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: paramonso en 10 de Febrero 2018, 10:10
-
Hola. Dejo el ejercicio CU01161E capturar eventos teclado JavaScript fromCharCode keyCode which del curso gratuito de JavaScript de aprenderaprogramar.
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.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
document.onkeyup = muestraInformacion;
document.onkeypress = muestraInformacion;
document.onkeydown = muestraInformacion;
// Estilos CSS al elemento div (pizarra)
Pizarra = document.getElementById('pizarra');
Pizarra.style.width='400px';
Pizarra.style.height='400px';
Pizarra.style.margin='100px';
Pizarra.style.fontSize='250px';
Pizarra.style.border='groove red 8px';
Pizarra.style.borderRadius='25px 25px';
}
function muestraInformacion(elEvento)
{
var evento = window.event || elEvento;
var m=evento.type
if (m=="keydown"){borrar()}
var mensaje =String.fromCharCode(evento.charCode);
pizarra.innerHTML += mensaje
}
function borrar()
{
Pizarra.innerHTML = '';
var msg=''
Pizarra.innerHTML = msg;
}
</script>
<style type="text/css">
body{background-color:green;}
h1 {
text-align:center;
margin:0;
padding:0;
color:white;
}
#pizarra {
text-align:center;
background-color:black;
color:white;
padding:15px;
float:left;
}
</style>
</head>
<h1>Pulse una tecla</h1>
<div id="pizarra"></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.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
// keyCode Devuelve el código de tecla pulsada para eventos keydown y keyup (Tabla pag 3)
document.onkeydown = moverDiv
stilos(); // Dar estilo css a la pagina
}
function moverDiv(evento)
{
// keyCode Devuelve el código de tecla pulsada para eventos keydown y keyup (Tabla pag 3)
var codTecla= evento.keyCode; // Capturar codigo de la tecla
var posAcLeft = Pizarra.offsetLeft; // Coger posicion actual izquierda
var posAcTop = Pizarra.offsetTop; // Coger posicion actual superior
if (codTecla=="37"){Pizarra.style.left=posAcLeft-220+'px' ; } //Izquierda
else if (codTecla=="38"){Pizarra.style.top=posAcTop-220+'px' ; } //Arriba
else if (codTecla=="39"){Pizarra.style.left=posAcLeft-180+'px' ; } //Derecha
else if (codTecla=="40"){Pizarra.style.top=posAcTop-180+'px' ; } //Abajo
else {alert("Para mover el cuadrado\npulsa las flechas del cursor") }
}
function stilos()
{
// Estilos CSS elemento div (pizarra)
Pizarra = document.getElementById('pizarra');
Pizarra.style.position='absolute';
Pizarra.style.width='300px';
Pizarra.style.height='300px';
Pizarra.style.margin='200px';
Pizarra.style.backgroundColor='yellow';
Pizarra.style.border='groove black 1px';
Pizarra.style.borderRadius='25px 25px';
Pizarra.style.left='25%';
Pizarra.style.textAlign="center";
}
</script>
<style type="text/css">
body{background-color:green;}
h1 {
text-align:center;
margin:0;
padding:0;
}
</style>
</head>
<body >
<h1>Pulse una flecha</h1>
<div id="pizarra"></div>
</body></html>
Ahí queda eso. Hasta luego. Un saludo
;)
-
Buenas, el ejercicio 1 funciona bien, no obstante, parece repetitivo ejecutar la función con onkeyup, onkeypress y onkeydown. En este otro hilo https://aprenderaprogramar.com/foros/index.php?topic=6432.0 se hace solo con onkeypress que supuestamente debe ir bien en todos los navegadores. No sé si lo has hecho por tener problemas con algún navegador.
Ejercicio 2 correcto.
Salu2
-
Hola Ogramar. Lo puse asi porque en los navegadores que tengo yo no funcionaba con onkeypress solamente. Gracias
Un Saludazo
;)