Deber HTML Calculadora Javier

TEMA
PROGRAMACION BASICA JAVA SCRIPT
PROCESO
Cmo funcionan las operaciones bsicas (suma, resta, divisin, multiplicacin) mediante java script
NOMBRE: Javier Alexander Sigchos Rivera

CURSO: primero B SECCION: Nocturna
ING: Pablo Aguilera
ASIGNATURA: HTML
AO: 2016-2017
JAVA SCRIPT
Es un lenguaje de programacin orientada a objetos se utiliza principalmente
en su forma del lado del cliente clien-side siendo parte de un navegador web
lo cual permite mejorar la interfaz de usuario y las pginas web aunque
tambin existe una forma de java script del lado del servidor widgets en la
actualidad la mayora de navegadores modernos soportan completamente
ECMAScript 5.1 (java script) los navegadores ms antiguos soportan por lo
menos ECMAScript 3 tradicionalmente se vena utilizando en pginas HTML
para realizar operaciones y nicamente en el marco de la aplicacin cliente sin
acceso a funciones del servidor Actualmente es ampliamente utilizado para
enviar y recibir informacin del servidor.
MANUAL DEL PROGRAMA CALCULADORA
El recuadro o banner debe distinguirse de la calculadora Pantalla en el cual

vamos a poder ver los nmeros que seleccionamos para que cumplan la
funcin que especifiquemos.
La calculadora debe resolver las operaciones aritmticas que se planteen.
Para ello adems de usar los botones mediante un clic del ratn, debemos
poder usar el teclado para escribir y resolver las operaciones.
PANTALLA Y BOTONES
Empezaremos por crear el cdigo que muestre la "pantalla" de la calculadora y los botones
que vamos a utilizar para las "teclas". Para ello creamos una pgina en HTML. En ella
creamos un "div" en el que mostraremos la calculadora. Dentro del "div calculadora",
creamos un formulario que contendr los elementos de la calculadora. En primer lugar la
pantalla, a la que ponemos un atributo "id" para poder manejarla ms tarde, y las teclas que
consistirn en elementos "input type='button'". La distribucin de los botones en filas la
hacemos poniendo todos los botones de una misma fila dentro de un mismo prrafo. El
cdigo HTML que nos mostrar lo anterior es el siguiente:
<div class="calculadora"
<form action="#" name="calculadora" id="calculadora">
<p id="textoPantalla">0</p>
<p>
<input type="button" class="largo" value="Retr" />
<input type="button" class="largo" value="CE" />
<input type="button" class="largo" value="C" />
</p>
<p>
<input type="button" value="7" />
<input type="button" value="/" />
<input type="button" value="Raiz" />
</p>
<p>
<input type="button" value="5" /> PANTALLA Y BOTONES HTML
<input type="button" value="*" />
<input type="button" value="%" />
</p>
<p>
<input type="button" value="-" />
<input type="button" value="1/x" />
</p>
<p>
<input type="button" value="+/-" />
<input type="button" value="." />
<input type="button" value="+" />
<input type="button" value="="/>
</p>
</form>
</div>
Fjate que en los tres primeros botones le hemos puesto un atributo de clase class="largo";
esto es porque estos botones sern distintos de los otros.
Este cdigo lo veremos en pantalla tal como se nos muestra en el siguiente enlace:
PANTALLA Y BOTONES IMAGEN
As que dara la pantalla con los cdigos anteriores

MEJORAR EL ASPECTO CON LOS CODIGOS SIGUIENTES
Debemos mejorar el aspecto de la calculadora, esto lo haremos mediante el
cdigo css con el que daremos unas dimensiones determinadas a la
calculadora, un borde que la delimite del resto de elementos, un color de
fondo: A la vez centraremos las filas de botones y delimitaremos el estilo del
texto de la pantalla y de los botones.
Para ello aplicamos al cdigo anterior el siguiente cdigo CSS:
/*aspectos generales: bordes y color de fondo de calculadora*/
.calculadora { border: 3px blue ridge; width: 250px;text-align: center;
background-color: #f6f8d8; }
/*pantalla de visualizacin: bordes, posicin, color de fondo, estilo

letra.*/
#textoPantalla { width: 185px; border: 2px black solid; text-align:
right;
position: relative; left: 23px; padding: 0px 5px;
background-color: white; font-family: "courier new";
overflow: hidden;}
/*botones normales: anchura y margen*/

.calculadora [type=button] { width: 35px; padding: 0; }
/*botones especiales*/
.calculadora input.largo { color: red; width: 60px; }
MEJORAR ASPECTO
Al ingresar el cdigo el aspecto de la calculadora quedara as.
FUNCIONAMIENTO DE LA CALCULADORA
En principio observamos que hay diferentes tipos de teclas en funcin de su

comportamiento.
Las teclas de control: Retroceso, borrado total, y borrado parcial. (retr, ce, c)
Cifras y coma decimal: Escriben el nmero en la pantalla.
Operaciones con dos nmeros: Operaciones clsicas: suma, resta,

multiplicacin y divisin.
Operaciones con un nmero: Raz cuadrada, porcentaje, numero opuesto y

numero inverso.
Tecla de igual: Resuelve las operaciones.
Vemos que las distintas teclas o grupos de teclas hacen varias funciones
diferentes. Veamos cmo se traduce eso en el cdigo.
Dependiendo de los distintos grupos de teclas y su comportamiento crearemos

las distintas funciones que compondrn nuestro script. Veamos cules son esas
funciones asociadas a las teclas:
Teclas de cifras y coma decimal: La funcin de estas teclas es escribir un
nmero en pantalla, el cual debemos guardarlo por si en una operacin
interviene ms de un nmero. Creamos una funcin nmero(xx) donde
recogemos las cifras pulsadas y los vamos aadiendo para formar un slo
nmero. Tendremos en cuenta tambin la coma decimal, la cual slo puede
escribirse una vez en el nmero. En la funcin recogemos en el parmetro la
tecla pulsada para poder aadirla a las anteriores.
Operaciones con dos nmeros: para estas teclas crearemos una funcin
operar (op) En la cual en primer lugar guardamos el nmero de la
pantalla. Guardamos despus el tipo de operacin, el cual nos viene dado en
el argumento de la funcin. Despus ponemos la pantalla a cero para poder
escribir el segundo nmero. La resolucin de la operacin se hace mediante
el signo igual, sin embargo si ya habamos guardado una operacin anterior,
las calculadoras tambin resuelven las operaciones pendientes al apretar
cualquiera de estas teclas, por lo que dentro de esta funcin haremos una
llamada a la funcin del signo igual antes de guardar ningn nmero.
Tecla de igual: Para esta tecla crearemos una funcin igualar () que
resuelve las operaciones con dos nmeros, para ello comprobamos primero
si tenemos un nmero guardado, y una operacin guardada; si es as
operamos de la siguiente manera: nmero guardado - operacin guardada -
nmero de pantalla. Si no hay un nmero guardado o una operacin guardada
dejamos el nmero de pantalla tal como est. Despus de operar el resultado
lo guardamos como el nmero de reserva, ya que puede ser que queramos
volver a operar con l.
Operaciones con un nmero: Estas teclas hacen operaciones en las que se

toma el nmero que hay en pantalla y se opera con l, por lo que no se
necesitan dos nmeros. Aqu crearemos una funcin para cada tecla en la
que tomamos el nmero que hay en pantalla y lo transformamos. Las
funciones sern: razc() para la raz cuadrada; porcent() para el
porcentaje; opuest() para el nmero opuesto; y inve() para el nmero
inverso. Estas operaciones se muestran directamente en pantalla sin
necesidad de utilizar la tecla de igual, por lo que las funciones las resuelven
directamente y muestran el nmero en pantalla.
Teclas de control: Cada una de estas teclas tiene una funcin distinta en la
calculadora, por lo que crearemos en el cdigo una funcin para cada tecla:
retro() funcin asociada a la tecla retro, la cual permite borrar la ltima
cifra escrita; borradoParcial() esta funcin borra el nmero escrito en
pantalla, pero conserva el nmero y la operacin guardada;
borradoTotal() esta funcin borra tanto el nmero de pantalla como el
nmero y operacin guardadas, reinicializando la calculadora.
Estas son las funciones que nos van a permitir interactuar con las teclas para
hacer funcionar la calculadora. Debemos ahora desarrollar el cdigo que tendr
cada una de ellas.
Como ya sabemos los nombres de las funciones, vamos a poner en el cdigo

HTML los diferentes atributos onclick que harn que se activen las
funciones. Modificamos el cdigo HTML y nos quedar de la siguiente manera:
<p>
<input type="button" class="largo" value="Retr" onclick="retro()" />
<input type="button" class="largo" value="CE" onclick="borradoParcial()"
/>
<input type="button" class="largo" value="C" onclick="borradoTotal()" />
</p>
<p>
<input type="button" value="7" onclick="numero(7)" />
<input type="button" value="8" onclick="numero('8')" />
<input type="button" value="/" onclick="operar('/')" />
<input type="button" value="Raiz" onclick="raizc()" />
</p>
<p>
<input type="button" value="6" onclick="numero('6')" /> ESTE CODIGO HACE UN
<input type="button" value="*" onclick="operar('*')" />
<input type="button" value="%" onclick="porcent()" /> LLAMAMIENTO A LAS
</p> DISTINTAS FUNCIONES
<p>
<input type="button" value="-" onclick="operar('-')" />
<input type="button" value="1/x" onclick="inve()" />
</p>
<p>
<input type="button" value="+/-" onclick="opuest()" />
<input type="button" value="." onclick="numero('.')" />
<input type="button" value="+" onclick="operar('+')" />
<input type="button" value="=" onclick="igualar()" />
</p>
</form>
</div>
En el cdigo se hace un llamamiento a las distintas funciones que se activarn
al pulsar con el ratn las diferentes teclas de la calculadora. Si examinas el
cdigo vers que cada tecla tiene asignada la funcin que le corresponde, y con
el argumento que le corresponde en caso de que ste haga falta.
La calculadora debe funcionar tambin con las teclas del teclado, para ello
crearemos tambin una funcin que recoja el valor de las teclas pulsadas, y
enve el resultado a las funciones adecuadas.
MOSTRAR NMEROS
Opciones que tenemos
Al pulsar una tecla de cifra o la tecla de coma decimal podemos estar ante dos
casos diferentes:
Empezar a escribir un nuevo nmero, esto debe ocurrir cuando la pantalla

est a 0 o despus de pulsar la tecla de alguna operacin.
Seguir escribiendo un nmero de varias cifras. En este caso hay ya una o

varias cifras escritas en la pantalla, y anteriormente no hemos pulsado tecla
para ninguna operacin.
Elementos iniciales
Sin embargo lo primero que debemos hacer es tener localizado en el DOM el

div de la pantalla para poder escribir en ella. Esto lo haremos mediante el
siguiente cdigo javascript:
window.onload = function(){ //Acciones tras cargar la pgina

pantalla=document.getElementById("textoPantalla"); //elemento pantalla de
salida
}
Como puedes observar el cdigo est comentado para una mayor comprensin.
A continuacin definiremos las variables que necesitaremos para controlar la
pantalla:

pantalla=document.getElementById("textoPantalla"); //elemento pantalla de
salida
}
x="0"; //guardar nmero en pantalla
xi=1; //iniciar nmero en pantalla: 1=si; 0=no;
coma=0; //estado coma decimal 0=no, 1=si;
En azul hemos destacado el nuevo cdigo que hemos aadido. Inicializamos

las siguientes variables las cuales tienen el siguiente significado:
x="0": Guardaremos aqu el nmero que tenemos en pantalla. Por lo

tanto toda variacin del nmero que hay en pantalla debe ir acompaada
de una variacin en el valor de esta variable.
xi=1: Variable de inicializacin del nmero. A esta variable le daremos

nicamente dos posibles valores: 1 cuando debamos empezar a escribir un
nuevo nmero en la pantalla. y 0 cuando al escribir en la pantalla estemos
aadiendo cifras para completar un nmero.
coma=0: Esta variable controla la existencia de la coma decimal, le

daremos dos posibles valores: 0 no hay coma escrita; y 1 la coma est
escrita. Controlaremos de esta manera que no se pueda escribir ms de una
coma cuando ya est escrita (valor 1).
FUNCIN PARA VISUALIZAR NMERO
Y ahora veamos la funcin que controla la escritura en pantalla: empezaremos

por distinguir mediante una condicional if si escribimos estamos empezando
un nuevo nmero o estamos ampliando uno ya empezado. Veamos el cdigo y
luego lo comentamos:
CODIGO PARA
function numero(xx) { //recoge el nmero pulsado en el argumento.
if (x=="0" || xi==1 ) { // inicializar un nmero, VISUALIZAR
pantalla.innerHTML=xx; //mostrar en pantalla NUMEROS EN
x=xx; //guardar nmero; PANTALLA
}
else { //continuar un nmero
pantalla.innerHTML+=xx; //aadimos y mostramos en pantalla.
x+=xx; //aadimos y guardamos
}
xi=0 //el nmero est iniciado y podemos ampliarlo.
}
La funcin consiste en una condicional en la que comprobamos si tenemos que

inicializar el nmero, las condiciones son, que en pantalla haya escrito un 0, o
que le hayamos dado la orden el alguna otra parte del script mediante la variable
xi=1; si se cumplen se escribe un nmero nuevo, si no es as aadimos la cifra
a la/s que ya tenamos.
La variable x; se modifica de la misma manera que el nmero de pantalla, de

manera que tenga el mismo valor que el nmero mostrado.
Por ltimo modificamos la variable: xi=0; para poder seguir escribiendo cifras
en el mismo nmero.
Observa que tanto el nmero de pantalla como la variable x son cadenas de

texto, ya que de otro modo en lugar de aadirse el nmero, ste se sumara al
anterior, con lo que no nos dara el resultado deseado.
Una vez que hemos escrito este cdigo a continuacin del que ya tenamos,
comprobamos en el navegador el resultado, el cual podemos verlo en el
siguiente enlace:
Abrimos el enlace y probamos a calculadora. Despes de unas pruebas nos

damos cuenta de algunos fallos. En primer lugar no podemos borrar el nmero
escrito a no ser que reiniciemos la pgina. Esto no es problema ya que an
tenemos que crear las funciones de las teclas de borrado total y parcial, con las
cuales solucionaremos el problema.
El problema que debemos solucionar ahora es el de la coma decimal. Ya que
podemos escribir varias veces la coma en la pantalla, con lo que lo escrito ya no
es interpretado como un nmero y no podremos luego operar con l.
LA COMA DECIMAL
Modificaremos la funcin, de forma que hacemos una distincin en cada uno

de los casos anteriores entre las teclas de cifras normales y la tecla de la coma
decimal, de manera que impediremos que la coma decimal pueda ser escrita
ms de una vez dentro de un nmero.
Por otro lado si inicializamos un nmero con una coma decimal, debemos
mostrar un 0 antes de la coma, lo que no sucede en el cdigo anterior.
Para saber si la coma est ya escrita o no en el nmero de pantalla, utilizaremos

la variable coma.
Mostramos a continuacin el cdigo de la funcin tras modificarla, y despus

lo comentamos:

if (x=="0" || xi==1 ) { // inicializar un nmero,
pantalla.innerHTML=xx; //mostrar en pantalla
x=xx; //guardar nmero
if (xx==".") { //si escribimos una coma al principio del
nmero
pantalla.innerHTML="0."; //escribimos 0.
x=xx; //guardar nmero MODIFICACION
coma=1; //cambiar estado de la coma
}
}
else { //continuar escribiendo un nmero
if (xx=="." && coma==0) { //si escribimos una coma decimal
pr primera vez
pantalla.innerHTML+=xx;
x+=xx;
coma=1; //cambiar el estado de la coma
}
//si intentamos escribir una segunda coma decimal no
realiza ninguna accin.
else if (xx=="." && coma==1) {}
//Resto de casos: escribir un nmero del 0 al 9:
else {
x+=xx
}
}
}
Como ves el cdigo se complica un poco dentro de cada apartado de la

condicional que tenamos ponemos otras condicionales que nos distinguirn si
la tecla o botn pulsado es una cifra o una coma decimal. El cdigo est
comentado para una mayor claridad de lo que vamos haciendo. no obstante
vamos a ver su estructura:
Como en la funcin inicial tenemos dos grandes bloques, en el primero

mostramos qu hacer si inicializamos el nmero. Al cdigo que tenamos hemos
aadido una condicional que indica qu hacer si lo que hemos escrito es una
coma: en este caso modificamos el nmero en pantalla de manera que
mostramos un cero delante de la coma, y luego indicamos que la coma ya est
puesta (cambiar variable coma).
El segundo bloque muestra qu hacer si estamos escribiendo ms cifras en el

nmero. En primer lugar distinguimos si hemos puesto una coma, y no estaba
escrita, en este caso escribimos la coma e indicamos que ya est escrita. El
segundo caso es si escribimos una coma y ya hay una escrita; en este caso la
funcin no hace nada. Y el tercer caso es el que ya tenamos, es decir escribir
una cifra; en este caso se escribe la cifra.
En todos los casos anteriores modificamos tambin la variable x de la misma

forma que cambia el contenido de la pantalla, de manera que guarde lo mismo
que tenemos en pantalla.
Una vez que hemos cambiado el cdigo de la funcin, comprobamos en el

navegador el resultado.
pantalla=document.getElementById("textoPantalla"); //elemento pantalla de salida
}
x="0"; //nmero en pantalla
ni=0; //nmero oculto o en espera.
op="no"; //operacin en curso; "no" = sin operacin.
//mostrar nmero en pantalla segn se va escribiendo:

if (xx==".") { //si escribimos una coma al principio del nmero
coma=1; //cambiar estado de la coma
}
}
if (xx=="." && coma==0) { //si escribimos una coma decimal pr
primera vez
CODIGO
x+=xx; REALIZADO
coma=1; //cambiar el estado de la coma HASTA AHORA
}
//si intentamos escribir una segunda coma decimal no realiza
ninguna accin.
else if (xx=="." && coma==1) {}
else {
x+=xx
}
}
}
function operar(s) {
igualar() //si hay operaciones pendientes se realizan primero
ni=x //ponemos el 1 nmero en "numero en espera" para poder escribir el
segundo.
op=s; //guardamos tipo de operacin.
xi=1; //inicializar pantalla.
}
function igualar() {
if (op=="no") { //no hay ninguna operacin pendiente.
pantalla.innerHTML=x; //mostramos el mismo nmero
}
else { //con operacin pendiente resolvemos
sl=ni+op+x; // escribimos la operacin en una cadena
sol=eval(sl) //convertimos la cadena a cdigo y resolvemos
pantalla.innerHTML=sol //mostramos la solucin
x=sol; //guardamos la solucin
op="no"; //ya no hay operaciones pendientes
xi=1; //se puede reiniciar la pantalla.
}
}
Raz cuadrada
Recuerda que en el botn de la raiz cuadrada, habamos puesto un atributo

onclick="raizc()". Por tanto llamaremos la funcin raizc(). En esta
funcin resolvemos la operacin y reiniciamos algunas variables. Su cdigo es
el siguiente.
function raizc() {
x=Math.sqrt(x) //resolver raz cuadrada. RAIZ CUADRADA
pantalla.innerHTML=x; //mostrar en pantalla resultado
op="no"; //quitar operaciones pendientes. CODIGO
xi=1; //se puede reiniciar la pantalla
}
Tras resolver la operacin con la funcin Math.sqrt(x, mostramos el

resultado en pantalla. Despus inicializamos las variables de operacin, por si
hubiera alguna pendiente.
PORCENTAJE
La tecla de porcentaje, lo que hace en la mayora de las calculadoras es dividir

el nmero por 100, de manera que al multiplicarlo luego por otro nos da su
porcentaje.
Recordemos que en el botn del formulario correspondiente al porcentaje

habamos puesto el atributo onclick="porcent()". Debemos ahora
crear esta funcin, la cual tendr el siguiente cdigo:
function porcent() {
x=x/100 //dividir por 100 el nmero PORCENTAJE CODIGO
pantalla.innerHTML=x; //mostrar en pantalla
igualar() //resolver y mostrar operaciones pendientes
xi=1 //reiniciar la pantalla
}
Como cosa distinta vemos que tras dividir por 100 llamamos a funcin
igualar(); esto hace que el porcentaje se pueda aplicar tras una operacin,
(normalmente la multiplicacin). Por ejemplo, para hallar el 5% de 500
escribiremos en la calculadora: 500 * 5 %.
NMERO INVERSO
Cualquier nmero multiplicado por su inverso nos da como resultado 1. En el

botn del nmero inverso hemos puesto el atributo onclick="inve()",
esto nos indica cmo debe llamarse la funcin, la cual ser la siguiente:
function inve() {
nx=Number(x);
nx=(1/nx); NUMERO INVERSO
x=String(nx); CODIGO
pantalla.innerHTML=x;
xi=1; //reiniciar pantalla al pulsar otro nmero.
}
BORRADO TOTAL
Este botn (C) es parecido al anterior, pero aqu adems de borrar el nmero en
pantalla borramos tambin todo lo dems, es decir reiniciamos la calculadora,
y eliminamos operaciones pendientes, y nmeros en espera.
En el cdigo HTML del botn ya habamos puesto el atributo onclick=

"borradoTotal()" que nos indica cmo deber llamarse la funcin que
ejecute el borrado total.
Como ya hemos dicho la funcin consiste en reiniciar todas las variables que
controlan el estado de la calculadora. Crearemos pues la siguiente funcin:
function borradoTotal() {
pantalla.innerHTML=0; //poner pantalla a 0 BORRADO TOTAL
x="0"; //reiniciar nmero en pantalla
(C) CODIGO
coma=0; //reiniciar estado coma decimal
ni=0 //indicador de nmero oculto a 0;
op="no" //borrar operacin en curso.
}
Como puedes ver la funcin pone las variables al estado inicial y la pantalla a
0, de forma que reiniciamos la calculadora, dejndola en el mismo estado que
cuando abrimos la pgina.
USO DEL TECLADO
Informacin de las teclas
Queremos ahora que la calculadora funcione tambin al pulsar sus

correspondientes teclas en el teclado del ordenador, y no slo al pulsar encima
del botn con el ratn. Para ello utilizaremos los eventos de teclado.
Concretamente utilizaremos el evento onkeydown, del cual extraeremos la

propiedad keyCode, la cual nos dir el cdigo 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 nmero de cdigo, sabiendo el nmero de la tecla pulsada

podemos identificarla, con lo cual podremos enviar luego la orden de ejecutar
la funcin que le corresponda a esa tecla.
Lo primero que debemos hacer es recopilar la informacin del evento, para

saber qu nmero corresponde a cada tecla, para ello creamos una pgina
provisional que nos diga qu nmero corresponde a cada tecla. Su cdigo podra
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; //nmero de cdigo de la tecla.
alert(k)
} CODIGO TECLADO
window.onload = function() {
document.onkeydown = info;
}
</script>
</head>
<body >
<h1>Pulsa las teclas para saber su nmero de cdigo</h1>
</body>
</html>
Esta pgina no forma parte de la calculadora, pero nos ayudar a saber cul es
el nmero de cdigo de las teclas que utilizaremos en la calculadora.
En esta pgina al pulsar una tecla veremos que sale una ventana de alerta con el
nmero de la tecla pulsada. De esta manera podemos saber los nmeros de las
teclas que tenemos que activar para cada funcin de la calculadora. La pgina
la puedes ver en el siguiente enlace:
CDIGO DE LAS TECLAS
Cdigos de las teclas
Para hacer funcionar la calculadora con el teclado necesitaremos las siguientes

teclas, las cuales, como podemos ver en la pgina del enlace anterior, tienen los
siguientes cdigos:
0 al 9 teclado alfanumrico: Cdigo nmeros 48 al 57 correlativamente,

ambos inclusive.
0 al 9 en teclado numrico: Nmeros 96 a 105 correlativamente, ambos

inclusive.
Coma decimal: Nmero 110 en teclado nmerico o 190 en teclado

alfanumrico (utilizando el punto).
Multiplicacin: Nmero 106: (teclado numrico).
Suma: Nmero 107: (teclado numrico).
Resta: Nmero 109: (teclado numrico).
Divisin: Nmero 111: (teclado numrico).
Igual: Utilizaremos la tecla Enter con cdigo 13 o la barra espaciadora con

cdigo 32
Borrado total: Utilizaremos la tecla "supr" con cdigo 46.
Retroceso: Utilizaremos la tecla de retroceso del carro, con cdigo 8.

Borrado parcial: Utilizaremos la tecla de inicio, con cdigo 36.
El resto de botones no tendrn 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.
FUNCIN TECLADO ()
Ahora que ya sabemos qu teclas vamos a usar y cules son sus cdigos,
podemos hacer una funcin que recoja la informacin del cdigo de la tecla
pulsada, y nos mande a ejecutar el cdigo que se necesite. Por ejemplo, al pulsar
una cifra del teclado, abrimos la misma funcin con el mismo argumento, que
al pulsar el botn de esa cifra con el ratn.
La funcin para manejar la calculadora con el teclado ser la siguiente:
function teclado (elEvento) {

//teclas nmericas del teclado alfamunrico
if (k>47 && k<58) {
p=k-48; //buscar nmero a mostrar.
p=String(p) //convertir a cadena para poder adir en
pantalla.
numero(p); //enviar para mostrar en pantalla
}
//Teclas del teclado nmerico. Seguimos el mismo procedimiento
que en el anterior.
if (k>95 && k<106) { FUNCION
p=k-96;
p=String(p); PARAMANEJAR
numero(p); LA
} CALCULADORA
if (k==110 || k==190) {numero(".")} //teclas de coma decimal
CON EL
if (k==106) {operar('*')} //tecla multiplicacin
if (k==107) {operar('+')} //tecla suma TECLADO
if (k==109) {operar('-')} //tecla resta
if (k==111) {operar('/')} //tecla divisin
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
funcin que llamaramos al plsar con el ratn el botn correspondiente, de esta
manera el cdigo se ejecutar tanto desde el teclado como desde el ratn.
En las teclas de cifras, restamos al nmero de cdigo la cantidad necesaria para

que nos d la cifra que indica, convertimos luego el nmero a cadena, ya que si
no no podramos aadir ms cifras en la pantalla de la calculadora, y despus
llamamos a la funcin que muestra o aade el nmero en pantalla.
Para que esta funcin se ejecute, debemos llamarla cada vez que pulsemos una
tecla. Para ello, al principio del script modificamos la funcin
window.onload = function(), en la cual incluiremos el evento
onkeydown, su cdigo quedar de la siguiente manera:

pantalla=document.getElementById("textoPantalla"); //elemento pantalla
de salida
document.onkeydown = teclado; //funcin teclado disponible
}
En azul viene destacado el cdigo que hemos aadido a esta funcin. Ahora la
calculadora puede usarse tanto pulsando los botones con el ratn como
utilizando el teclado.
CALCULADORA CODIGO COMPLETO
Pgina HTML: calculadora.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Calculadora</title>
<link rel="stylesheet" type="text/css" href="calculadora.css" />
<script type="text/javascript" src="calculadora.js"></script>
</head>
<body>
<p>
<input type="button" class="largo" value="Retr" onclick="retro()" />
<input type="button" class="largo" value="CE" onclick="borradoParcial()" />
<input type="button" class="largo" value="C" onclick="borradoTotal()" />
</p>
<p>
<input type="button" value="7" onclick="numero(7)" />
<input type="button" value="/" onclick="operar('/')" />
<input type="button" value="Raiz" onclick="raizc()" />
</p>
<p>
<input type="button" value="*" onclick="operar('*')" />
<input type="button" value="%" onclick="porcent()" />
</p>
<p>
<input type="button" value="-" onclick="operar('-')" />
<input type="button" value="1/x" onclick="inve()" />
</p>
<p>
<input type="button" value="+/-" onclick="opuest()" />
<input type="button" value="." onclick="numero('.')" />
<input type="button" value="+" onclick="operar('+')" />
<input type="button" value="=" onclick="igualar()" />
</p>
</form>
</div>
</body>
</html>
Pgina de estilos: calculadora.css
/*aspectos generales: bordes y color de fondo de calculadora*/

.calculadora { border: 3px blue ridge; width: 250px;text-align: center;
background-color: #f6f8d8; }
/*pantalla de visualizacin: bordes, posicin, color de fondo, estilo letra.*/
#textoPantalla { width: 185px; border: 2px black solid; text-align: right;

position: relative; left: 23px; padding: 0px 5px;
background-color: white; font-family: "courier new";
overflow: hidden;}
/*botones normales: anchura y margen*/

.calculadora [type=button] { width: 35px; padding: 0; }
/*botones especiales*/
.calculadora input.largo { color: red; width: 60px; }
Pgina javascript: calculadora.js

pantalla=document.getElementById("textoPantalla"); //elemento pantalla de salida
document.onkeydown = teclado; //funcin teclado disponible
}
x="0"; //nmero en pantalla
ni=0; //nmero oculto o en espera.
op="no"; //operacin en curso; "no" = sin operacin.
//mostrar nmero en pantalla segn se va escribiendo:

if (xx==".") { //si escribimos una coma al principio del nmero
coma=1;
if (xx=="." && coma==0) { //si escribimos una coma decimal pr primera vez
x+=xx;
coma=1; //cambiar el estado de la coma
}
//si intentamos escribir una segunda coma decimal no realiza ninguna accin.
else if (xx=="." && coma==1) {}
else {
x+=xx
}
}
}
function operar(s) {
igualar() //si hay operaciones pendientes se realizan primero
ni=x //ponemos el 1 nmero en "numero en espera" para poder escribir el segundo.
op=s; //guardamos tipo de operacin.
xi=1; //inicializar pantalla.
}
function igualar() {
if (op=="no") { //no hay ninguna operacin pendiente.
pantalla.innerHTML=x; //mostramos el mismo nmero
}
else { //con operacin pendiente resolvemos
sl=ni+op+x; // escribimos la operacin en una cadena
sol=eval(sl) //convertimos la cadena a cdigo y resolvemos
pantalla.innerHTML=sol //mostramos la solucin
x=sol; //guardamos la solucin
op="no"; //ya no hay operaciones pendientes
xi=1; //se puede reiniciar la pantalla.
}
}
function raizc() {
x=Math.sqrt(x) //resolver raz cuadrada.
pantalla.innerHTML=x; //mostrar en pantalla resultado
op="no"; //quitar operaciones pendientes.
xi=1; //se puede reiniciar la pantalla
function porcent() {
x=x/100 //dividir por 100 el nmero
pantalla.innerHTML=x; //mostrar en pantalla
igualar() //resolver y mostrar operaciones pendientes
xi=1 //reiniciar la pantalla
}
function opuest() {
nx=Number(x); //convertir en nmero
nx=-nx; //cambiar de signo
x=String(nx); //volver a convertir a cadena
pantalla.innerHTML=x; //mostrar en pantalla.
}
function inve() {
nx=Number(x);
nx=(1/nx);
x=String(nx);
pantalla.innerHTML=x;
xi=1; //reiniciar pantalla al pulsar otro nmero.
}
function retro(){ //Borrar slo el ltimo nmero escrito.

cifras=x.length; //hayar nmero de caracteres en pantalla
br=x.substr(cifras-1,cifras) //describir ltimo caracter
x=x.substr(0,cifras-1) //quitar el ultimo caracter
if (x=="") {x="0";} //si ya no quedan caracteres, pondremos el 0
if (br==".") {coma=0;} //Si el caracter quitado es la coma, se permite escribirla
de nuevo.
pantalla.innerHTML=x; //mostrar resultado en pantalla
}
function borradoParcial() {
pantalla.innerHTML=0; //Borrado de pantalla;
x=0;//Borrado indicador nmero pantalla.
coma=0; //reiniciamos tambin la coma
}
function borradoTotal() {
pantalla.innerHTML=0; //poner pantalla a 0
x="0"; //reiniciar nmero en pantalla
coma=0; //reiniciar estado coma decimal
ni=0 //indicador de nmero oculto a 0;
op="no" //borrar operacin en curso.
}
function teclado (elEvento) {
//teclas nmericas del teclado alfamunrico
if (k>47 && k<58) {
p=k-48; //buscar nmero a mostrar.
p=String(p) //convertir a cadena para poder adir en pantalla.
numero(p); //enviar para mostrar en pantalla
}
//Teclas del teclado nmerico. 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 multiplicacin
if (k==107) {operar('+')} //tecla suma
if (k==109) {operar('-')} //tecla resta
if (k==111) {operar('/')} //tecla divisin
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.
}
PROGRAMA CALCULADORA TERMINADO

Deber HTML Calculadora Javier

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Deber HTML Calculadora Javier

Hochgeladen von

Copyright:

Verfügbare Formate

TEMA

PROGRAMACION BASICA JAVA SCRIPT

NOMBRE: Javier Alexander Sigchos Rivera

El recuadro o banner debe distinguirse de la calculadora Pantalla en el cual

PANTALLA Y BOTONES IMAGEN

As que dara la pantalla con los cdigos anteriores

/*pantalla de visualizacin: bordes, posicin, color de fondo, estilo

/*botones normales: anchura y margen*/

Al ingresar el cdigo el aspecto de la calculadora quedara as.

En principio observamos que hay diferentes tipos de teclas en funcin de su

Cifras y coma decimal: Escriben el nmero en la pantalla.

Operaciones con dos nmeros: Operaciones clsicas: suma, resta,

Operaciones con un nmero: Raz cuadrada, porcentaje, numero opuesto y

Tecla de igual: Resuelve las operaciones.

Dependiendo de los distintos grupos de teclas y su comportamiento crearemos

Operaciones con un nmero: Estas teclas hacen operaciones en las que se

Como ya sabemos los nombres de las funciones, vamos a poner en el cdigo

Opciones que tenemos

Empezar a escribir un nuevo nmero, esto debe ocurrir cuando la pantalla

Seguir escribiendo un nmero de varias cifras. En este caso hay ya una o

Sin embargo lo primero que debemos hacer es tener localizado en el DOM el

window.onload = function(){ //Acciones tras cargar la pgina

window.onload = function(){ //Acciones tras cargar la pgina

En azul hemos destacado el nuevo cdigo que hemos aadido. Inicializamos

x="0": Guardaremos aqu el nmero que tenemos en pantalla. Por lo

xi=1: Variable de inicializacin del nmero. A esta variable le daremos

coma=0: Esta variable controla la existencia de la coma decimal, le

FUNCIN PARA VISUALIZAR NMERO

Y ahora veamos la funcin que controla la escritura en pantalla: empezaremos

La funcin consiste en una condicional en la que comprobamos si tenemos que

La variable x; se modifica de la misma manera que el nmero de pantalla, de

Observa que tanto el nmero de pantalla como la variable x son cadenas de

Abrimos el enlace y probamos a calculadora. Despes de unas pruebas nos

Modificaremos la funcin, de forma que hacemos una distincin en cada uno

Para saber si la coma est ya escrita o no en el nmero de pantalla, utilizaremos

Mostramos a continuacin el cdigo de la funcin tras modificarla, y despus

function numero(xx) { //recoge el nmero pulsado en el argumento.

Como ves el cdigo se complica un poco dentro de cada apartado de la

Como en la funcin inicial tenemos dos grandes bloques, en el primero

El segundo bloque muestra qu hacer si estamos escribiendo ms cifras en el

En todos los casos anteriores modificamos tambin la variable x de la misma

Una vez que hemos cambiado el cdigo de la funcin, comprobamos en el

//mostrar nmero en pantalla segn se va escribiendo:

Recuerda que en el botn de la raiz cuadrada, habamos puesto un atributo

Tras resolver la operacin con la funcin Math.sqrt(x, mostramos el

La tecla de porcentaje, lo que hace en la mayora de las calculadoras es dividir

Recordemos que en el botn del formulario correspondiente al porcentaje

Cualquier nmero multiplicado por su inverso nos da como resultado 1. En el

En el cdigo HTML del botn ya habamos puesto el atributo onclick=

Informacin de las teclas

Queremos ahora que la calculadora funcione tambin al pulsar sus

Concretamente utilizaremos el evento onkeydown, del cual extraeremos la

Cada tecla tiene un nmero de cdigo, sabiendo el nmero de la tecla pulsada

Lo primero que debemos hacer es recopilar la informacin del evento, para

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

CDIGO DE LAS TECLAS

Cdigos de las teclas

Para hacer funcionar la calculadora con el teclado necesitaremos las siguientes

0 al 9 teclado alfanumrico: Cdigo nmeros 48 al 57 correlativamente,

0 al 9 en teclado numrico: Nmeros 96 a 105 correlativamente, ambos

Coma decimal: Nmero 110 en teclado nmerico o 190 en teclado

Multiplicacin: Nmero 106: (teclado numrico).

Suma: Nmero 107: (teclado numrico).

Resta: Nmero 109: (teclado numrico).

/botones normales: anchura y margen/

/aspectos generales: bordes y color de fondo de calculadora/

/pantalla de visualizacin: bordes, posicin, color de fondo, estilo letra./

/botones normales: anchura y margen/