Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo 

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Calculadora VII

Uso del teclado

Información de las teclas

Queremos ahora que la calculadora funcione también al pulsar sus correspondientes teclas en el teclado del ordenador, y no sólo al pulsar encima del botón con el ratón. para ello utilizaremos los eventos de teclado.

Concretamente utilizaremos el evento onkeydown, del cual extraeremos la propiedad keyCode, la cual nos dirá el código de la tecla pulsada.

Utilizamos este evento con esta propiedad, por ser el único que da el mismo resultado tanto en navegadores tipo Internet Explorer, como tipo Mozilla.

Cada tecla tiene un número de código, sabiendo el número de la tecla pulsada podemos identificarla, con lo cual podremos enviar luego la orden de ejecutar la función que le corresponda a esa tecla.

Lo primero que debemos hacer es recopilar la información del evento, para saber qué número corresponde a cada tecla, para ello creamos una página provisional que nos diga qué número corresponde a cada tecla. su código podría ser el siguiente:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript">
function info (elEvento) { 
         evento = elEvento || window.event;
         k=evento.keyCode; //número de código de la tecla.
         alert(k)
         }
window.onload = function() {
document.onkeydown = info;
}
</script>
</head>
<body >
<h1>Pulsa las teclas para saber su número de código</h1>
</body>
</html>

Esta página no forma parte de la calculadora, pero nos ayudará a saber cual es el número de código de las teclas que utilizaremos en la calculadora.

En esta página al pulsar una tecla veremos que sale una ventana de alerta con el número de la tecla pulsada. de esta manera podemos saber los números de las teclas que tenemos que activar para cada función de la calculadora. La página la puedes ver en el siguiente enlace:

Código de las teclas



Códigos de las teclas

Para hacer funcionar la calculadora con el teclado necesitaremos las siguientes teclas, las cuales, como podemos ver en la página del enlace anterior, tienen los siguientes códigos:

El resto de botones no tendrán correspondencia con el teclado, ya que no hay teclas claras que definan las operaciones. Aunque nada nos hubiera impedido asignarles arbitrariamente cualquier otra tecla que no hayamos usado.


Función teclado()

Ahora que ya sabemos qué teclas vamos a usar y cuales son sus códigos, podemos hacer una función que recoja la información del código de la tecla pulsada, y nos mande a ejecutar el código que se necesite. Por ejemplo, al pulsar una cifra del teclado, abrimos la misma función con el mismo argumento, que al pulsar el botón de esa cifra con el ratón.

La función para manejar la calculadora con el teclado será la siguiente:


function teclado (elEvento) { 
         evento = elEvento || window.event;
         k=evento.keyCode; //número de código de la tecla.
         //teclas númericas del teclado alfamunérico
         if (k>47 && k<58) { 
            p=k-48; //buscar número a mostrar.
            p=String(p) //convertir a cadena para poder añádir en pantalla.
            numero(p); //enviar para mostrar en pantalla
            }	
         //Teclas del teclado númerico. Seguimos el mismo procedimiento que en el anterior.
         if (k>95 && k<106) {
            p=k-96;
            p=String(p);
            numero(p);
            }
         if (k==110 || k==190) {numero(".")} //teclas de coma decimal
         if (k==106) {operar('*')} //tecla multiplicación
         if (k==107) {operar('+')} //tecla suma
         if (k==109) {operar('-')} //tecla resta
         if (k==111) {operar('/')} //tecla división
         if (k==32 || k==13) {igualar()} //Tecla igual: intro o barra espaciadora
         if (k==46) {borradoTotal()} //Tecla borrado total: "supr"
         if (k==8) {retro()} //Retroceso en escritura : tecla retroceso.
         if (k==36) {borradoParcial()} //Tecla borrado parcial: tecla de inicio.
         }

El procedimiento consiste en que al pulsar la tecla, hacemos una llamada a la función que llamaríamos al plsar con el ratón el botón correspondiente, de esta manera el código se ejecutará tanto desde el teclado como desde el ratón.

En las teclas de cifras, restamos al número de código la cantidad necesaria para que nos dé la cifra que indica, convertimos luego el número a cadena, ya que si no no podríamos añadir más cifras en la pantalla de la calculadora, y después llamamos a la función que muestra o añade el número en pantalla.

Para que esta función se ejecute, debemos llamarla cada vez que pulsemos una tecla. Para ello, al principio del script modificamos la función window.onload = function(), en la cual incluiremos el evento onkeydown, su código quedará de la siguiente manera:


window.onload = function(){ //Acciones tras cargar la página
pantalla=document.getElementById("textoPantalla");  //elemento pantalla de salida
document.onkeydown = teclado;  //función teclado disponible
}

En azul viene destacado el código que hemos añadido a esta función. Ahora la calculadora puede usarse tanto pulsando los botones con el ratón como utilizando el teclado. El resultado lo vemos en el siguiente enlace:

Calculadora


Hemos conseguido hacer con javascript una calculadora bastante simple. Podriamos ampliar este ejemplo y añadirle más funciones a la calculadora, por ejemplo con teclas de memoria o convertirla en una calculadora avanzada con funciones trigonométricas, logaritmos, y otro tipo de operaciones. Nosotros no vamos a seguir ampliando este script, sin embargo si quereis hacerlo vosotros no creo que tengais mucha dificultad en seguir ampliandolo.

En el siguiente enlace os mostramos el código completo utilizado para hacer la calculadora en las tres paginas que hemos empleado: HTML, CSS, y Javascript.

Código completo de calculadora


Mediante este código puedes incrustar la calculadora en cualquier página web, sólo tienes que copiar el "div" de la calculadora en el lugar de la página que desees y enlazar la página con los archivos CSS y Javascript en la cabecera.

Por último nos ha parecido que una forma interesante de poner la calculadora en una página es hacerla aparecer en una ventana emergente al pulsar un botón de llamada. De esta forma dejamos la página libre, y el usuario puede utilizar la calculadora si la necesita. Esto sería de la siguiente manera:


Para ello no tenemos más que añadir en la página el siguiente código:

<input type="button" value="usar calculadora" onclick="open('ej10.html','calculadora', 'width=270,height=275,toolbar=no, statusbar=no,menubar=no,titlebar=no')" />

Aunque aquí lo hemos puesto en varias líneas por motivos de espacio, debemos ponerlo todo en una sóla línea.

Aquí hemos creado la calculadora en un archivo aparte, si queremos mostrarla dentro de una página la mejor solución es insertarla mediante una etiqueta iframe. Esto es lo que hemos hecho nosotros para mostrarla en la primera página de este ejercicio. Para borrar los bordes del iframe le añadimos el estilo CSS border: 0





Aquí acaba el tema práctico "calculadora", si quieres seguir con algun otro tema práctico vuelve a la página inicial de este curso y elige otro. Recuerda, no es imprescindible seguir un orden en losw temas prácticos, ya que cada uno de ellos es un ejercicio independiente.



Calculadora con javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com