Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: JuansT en 27 de Febrero 2017, 19:25
-
Respuestas a los ejercicios propuestos en la entrega CU01161E del tutorial de programación web con JavaScript:
Ejercicio 1:
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#tecla{
position:relative;
width: 400px;
height:400px;
margin: 100px 100px 100px 100px;
text-align:center;
font-size: 250px;
border: 1px solid;
}
</style>
<script type="text/javascript">
function start(){
var widthBody = document.body.clientWidth;
document.getElementById("tecla").style.left = ((widthBody - 600)/2) + "px";
document.onkeypress = mostrarTecla;
document.onkeyup = function(){tecla.innerHTML = "";};
}
function mostrarTecla(objEvent){
var caracter = String.fromCharCode(objEvent.which);
if (objEvent.which!=0 && objEvent.which!=13) {
tecla.innerHTML = caracter;
}
}
</script>
</head>
<body onload="start()">
<h1 style="text-align:center;">Pulsa una tecla</h1>
<div id="tecla">
</div>
</body>
</html>
Ejercicio 2:
Para este ejercicio el enunciado propone capturar el evento con onkeypress pero las flechas no se pueden capturar con este evento, solo se pueden capturar con keydown o keyup, decido hacerlo con keyup ya que en esta sesión se recomienda que la captura de teclas no imprimibles se haga con keyup y keyCode:
Regla 2: para determinar si ha sido pulsada una tecla no imprimible (como flecha de cursor, etc.), usaremos el evento keyup, determinando la tecla pulsada con la propiedad keyCode (código de la tecla física).
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#tecla{
position: absolute;
width: 300px;
height:300px;
margin: 200px 200px 200px 200px;
border: 1px solid;
top:1px;
background-color:yellow;
}
</style>
<script type="text/javascript">
var left, toper=0;
function start(){
var widthBody = document.body.clientWidth;
document.getElementById("tecla").style.left = ((widthBody - 700)/2) + "px";
left = parseInt(document.getElementById("tecla").style.left);
document.onkeyup = mostrarTecla;
}
function mostrarTecla(objEvent){
var divElem = document.getElementById("tecla");
var caracter = String.fromCharCode(objEvent.keyCode);
console.log(objEvent.keyCode);
if (objEvent.keyCode==37) {
left-=20;
divElem.style.left = left+"px";
}
else if(objEvent.keyCode==38){
toper-=20;
divElem.style.top = toper+"px";
}
else if(objEvent.keyCode==39){
left+=20;
divElem.style.left = left+"px";
}
else if(objEvent.keyCode==40){
toper+=20;
divElem.style.top = toper+"px";
}
}
</script>
</head>
<body onload="start()">
<h1 style="text-align:center;">Pulsa una flecha</h1>
<div id="tecla">
</div>
</body>
</html>
-
Hola JuansT.
El ejercicio 1 es correcto, lo único que al usar el evento keyup también, no deja mucho tiempo para ver la tecla que se muestra por pantalla.
El segundo ejercicio también funciona, pero estás haciendo uso de variables con ámbito global cuando podrías evitarla, te dejo un enlace con otra forma de resolver el ejercicio:
https://www.aprenderaprogramar.com/foros/index.php?topic=3503.msg15282#msg15282
Saludos. ;D