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