Autor Tema: JavaScript mover elemento con flechas cursor Capturar eventos teclado CU01161E (Leído 9294 veces)

Dimitar Stefanov · « **en:** 22 de Marzo 2016, 13:48 »

Buenas tardes. Cuelgo una posible solución del ejercicio CU01161E del curso JavaScript desde cero.

Citar

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:

Código: [Seleccionar]

<!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>

Citar

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:

Código: [Seleccionar]

<!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.

pedro,, · « **Respuesta #1 en:** 22 de Marzo 2016, 18:28 »

Hola dimiste.

El primer ejercicio todo bien.

El segundo tendrás que revisarlo porque el cuadrado no se mueve al pulsar las teclas.

Saludos.

bermartinv · « **Respuesta #2 en:** 22 de Marzo 2016, 23:26 »

Perdona pedro,, pero si se mueve el cuadrado

pedro,, · « **Respuesta #3 en:** 23 de Marzo 2016, 00:26 »

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

bermartinv · « **Respuesta #4 en:** 23 de Marzo 2016, 00:33 »

Efectivamente pedro,,
Chrome interpreta la teoría al pie de la letra.

Dimitar Stefanov · « **Respuesta #5 en:** 23 de Marzo 2016, 01:28 »

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":

Código: [Seleccionar]

document.onkeyup = inspeccionarTecla;
Graicas a los dos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: JavaScript mover elemento con flechas cursor Capturar eventos teclado CU01161E (Leído 9294 veces)

Dimitar Stefanov

JavaScript mover elemento con flechas cursor Capturar eventos teclado CU01161E

pedro,,

Re:CU01161E Capturar eventos de teclado en JavaScript

bermartinv

Re:CU01161E Capturar eventos de teclado en JavaScript

pedro,,

Re:CU01161E Capturar eventos de teclado en JavaScript

bermartinv

Re:CU01161E Capturar eventos de teclado en JavaScript

Dimitar Stefanov

Re:CU01161E Capturar eventos de teclado en JavaScript

Preguntas y respuestas