Autor Tema: Javascript mover con el cursor elementos Eventos de teclado Ejercicio CU01161E# (Leído 3766 veces)

Pepote21 · « **en:** 17 de Junio 2017, 11:49 »

Hola a todos. Os paso mi código para el ejercicio CU01161E del tutorial de desarrollo web desde cero con JavaScript. Gracias. Un saludo

Ejercicio 1

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            #central{width:400px; height:400px; border:2px solid black; margin:100px; margin-left:400px; font-size:250px; text-align:center;}
			
        </style>
        <script type="text/javascript">  	
            window.onload=function(){
			    document.onkeypress=mostrarInfoCharacter;
			}
			function mostrarInfoCharacter(e){
			    var character=String.fromCharCode(e.which);
				//var nodoDiv=document.getElementById('central');
				//nodoDiv.innerHTML='<p>'+character+'</p>';
				central.innerHTML=character;    
			}
        </script>
    </head>
    <body>
	    <script type="text/javascript">    
           
        </script> 
        <h1>Pulsa una tecla</h1>
		<div id="central"></div>
    </body>
</html>

Ejercicio 2

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:300px; height:300px; border:2px solid black; background-color:yellow; margin:200px; position:absolute;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                document.onkeyup=determinarTeclaPulsada;
            }		
                function determinarTeclaPulsada(event){    
			        var teclaPulsada=event.keyCode;
					moverElemento(teclaPulsada);     					
				}  
			    function moverElemento(tecla){
				    var nodoDiv=document.getElementById('central');
					var posTop=nodoDiv.offsetTop;
					var posLeft=nodoDiv.offsetLeft;
			        switch(tecla){
				        case 37:
				            nodoDiv.style.left=posLeft-220+'px';
							break;
				        case 38:						 
						    nodoDiv.style.top=posTop-220+'px';
							break;
				        case 39:						  
						    nodoDiv.style.left=posLeft-180+'px';
							break;
				        case 40:						  
						    nodoDiv.style.top=posTop-180+'px';
							break;
						default:
						    alert('Has pulsado una tecla incorrecta, debes pulsar las flechas del cursor');
					}
			    }	
        </script>
    </head>
    <body>
	    <script type="text/javascript">    
           
        </script> 
        <h1>Pulsa una flecha</h1>
		<div id="central"></div>
    </body>
</html>

Ogramar · « **Respuesta #1 en:** 08 de Julio 2017, 12:26 »

Buenas Pepote21

El ejercicio 1 está correcto, recomendación: evita dejar líneas comentadas "en sucio", da mal aspecto a tu código.

El ejercicio 2 también está correcto, recomendación: evita dejar etiquetas abiertas sin contenido como <script> ... </script> vacíos, da mal aspecto a tu código.

En otro hilo se ha comentado que si se quiere conseguir una animación más "realista" podemos cambiar document.onkeyup = determinarTeclaPulsada; por document.onkeypress = determinarTeclaPulsada; de este modo el div se mueve manteniendo pulsada la tecla flecha sin necesidad de pulsar cada vez que queramos moverlo.

Salu2

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

Noticias: