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: bermartinv en 22 de Febrero 2016, 11:26
-
Adjunto mi código para el ejercicio 1 de la entrega CU01161E del tutorial javascript desde cero.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pizarra{
border:solid 5px black;
margin:100px;
font-size: 250px;
height:400px;
width:400px;
color:yellowgreen;
text-align: center;
}
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
}
function mostrarCodigo(evento){
var caracter = String.fromCharCode(evento.which);
var pizarra = document.getElementById("pizarra") ;
pizarra.innerHTML = caracter;
}
</script>
</head>
<body>
<h1>Pulsa una tecla</h1>
<div id="pizarra"></div>
</body>
</html>
Amplío el ejercicio y añado un código para poder saber el codigo de cada caracter de teclado que pulsemos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pizarra{
border:solid 5px black;
margin:100px;
font-size: 250px;
height:400px;
width:400px;
color:yellowgreen;
text-align: center;
}
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
document.onkeyup = mostrarCodigo2;
}
function mostrarCodigo(evento){
var caracter = (evento.which);
var pizarra = document.getElementById("pizarra") ;
pizarra.innerHTML = caracter;
}
function mostrarCodigo2(evento){
var caracter = (evento.keyCode);
var pizarra = document.getElementById("pizarra") ;
pizarra.innerHTML = caracter;
}
</script>
</head>
<body>
<h1>Pulsa una tecla</h1>
<div id="pizarra"></div>
</body>
</html>
-
Hola bermartinv.
Veo el código perfecto. ;)
Sobre el segundo código que propones, como curiosidad, cuando pulsas una tecla, por ejemplo la 'p', en la pizarra se muestra el código ASCII de la letra 'p' mientras tengo pulsada la tecla, y cuando suelto la tecla, muestra el código ASCII de la tecla 'P' en mayúscula.
Falta el ejercicio 2, ¿que pasó? :o
Saludos.
-
Ufffff, Pedro, no me había dado cuenta de ese detalle. He estado pensando y no sé como solucionarlo, creo que sucede por tener las dos eventos (onkeypress y onkeyup), actuando a la vez. Mira que curioso. Prueba este código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pizarra{
border:solid 5px black;
margin:100px;
font-size: 250px;
height:400px;
width:400px;
color:yellowgreen;
text-align: center;
}
#pizarra2{
border:solid 5px black;
margin:100px;
font-size: 250px;
height:400px;
width:400px;
color:yellowgreen;
text-align: center;
}
</style>
<script>
window.onload =function(){document.onkeypress = mostrarCodigo;
document.onkeyup = mostrarCodigo2;
}
function mostrarCodigo(evento){
var caracter = (evento.which);
var pizarra = document.getElementById("pizarra") ;
pizarra.innerHTML = caracter;
}
function mostrarCodigo2(evento){
var caracter = (evento.keyCode);
var pizarra = document.getElementById("pizarra2") ;
pizarra.innerHTML = caracter;
}
</script>
</head>
<body>
<h1>Pulsa una tecla</h1>
<div id="pizarra"></div>
<div id="pizarra2"></div>
</body>
</html>
Si el segundo ejercicio, tengo esto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pizarra{
margin: 200px;
height:300px;
width:300px;
border:solid 5px black;
position: absolute;
}
</style>
<script>
window.onload = function (){
document.onkeyup = moverPizarra;
}
function moverPizarra(evento){
var tecla = (evento.keyCode);
var pizarra = document.getElementById("pizarra");
var posicionY = pizarra.offsetTop;
var posicionX = pizarra.offsetLeft;
switch (tecla){
case 39:pizarra.style.left=posicionX-180+'px';break;
case 37:pizarra.style.left=posicionX-220+'px';break;
case 38:pizarra.style.top=posicionY-220+'px';break;
case 40:pizarra.style.top=posicionY-180+'px';break;
default: alert ("No has pulsado una flecha de teclado");
}
}
</script>
</head>
<body>
<h1>Pulse una tecla</h1>
<div id="pizarra"></div>
</body>
</html>