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>
Tema: JavaScript saber cuándo y qué tecla pulsas Capturar eventos de teclado. CU01161E (Leído 2597 veces)
RSS -
WAP2