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: Dimitar Stefanov en 22 de Marzo 2016, 13:48
-
Buenas tardes. Cuelgo una posible solución del ejercicio CU01161E del curso JavaScript desde cero.
EJERCICIO 1
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una tecla>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Utiliza el evento keypress para determinar el carácter que el usuario ha escrito utilizando el teclado y haz que se muestre dentro del div con un tamaño de fuente de 250px.
El código JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){
document.onkeypress = mostrarInformacionCaracter;
}
function mostrarInformacionCaracter(evobject){
var elCaracter = String.fromCharCode(evobject.which);
central.innerHTML = elCaracter;
}
</script>
</head>
<body>
<div id="contenedor">
<h1 style="margin-left: 180px;">Pulsa una tecla</h1>
<div style="width: 400px; height: 400px; border: solid; margin: 100px; font-size: 250px; text-align: center;" id="central"></div>
</div>
</body>
</html>
EJERCICIO 2
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.
El código:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: solid;
margin: 200px;
background: yellow;
position: relative;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.onkeypress = inspeccionarTecla;
}
var desplazamiento = 20;
var desplazamientoVertical = 20;
function inspeccionarTecla(evobjet){
var elCaracter = evobjet.keyCode;
if(elCaracter == 39){
principal.style.marginLeft = (200+desplazamiento)+"px";
desplazamiento = desplazamiento +20;
}else if(elCaracter == 37){
principal.style.marginLeft = (200+(desplazamiento-20))+"px";
desplazamiento = desplazamiento - 20;
}else if(elCaracter == 40){
principal.style.marginTop = (200+desplazamientoVertical)+"px";
desplazamientoVertical = desplazamientoVertical + 20;
}else if(elCaracter == 38){
//alert(desplazamientoVertical);
principal.style.marginTop = (200+(desplazamientoVertical-20))+"px";
desplazamientoVertical = desplazamientoVertical - 20;
}else{
alert('Teclee una flecha!!!');
}
}
</script>
</head>
<body>
<h1>Pulsa una tecla</h1>
<div id="principal"></div>
</body>
</html>
Gracias.
-
Hola dimiste.
El primer ejercicio todo bien.
El segundo tendrás que revisarlo porque el cuadrado no se mueve al pulsar las teclas.
Saludos.
-
Perdona pedro,, pero si se mueve el cuadrado
-
Estuve probando y en realidad lo que pasa es que solo funciona en firefox. En Chrome el evento keypress no detecta las teclas de las flechas al ser pulsadas.
Saludos
-
Efectivamente pedro,,
Chrome interpreta la teoría al pie de la letra.
-
Buenas chicos.
Gracias a los dos por haber mirado y corregido mi ejercicio.
Efectivamente, cuando me dijistéis que no funcionaba me extraño, porque a mi se me movía. Pensé que lo habías probado en otro navegador que no sea firefox, Pedro, y efectivamente es lo que dice Bermartinv, sólo funciona en éste (firefox).
He añadido la siguiente línea en el código para que funcione también en "Chrome":
document.onkeyup = inspeccionarTecla;
Graicas a los dos :)