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 I

Visualizacion en pantalla

Planteamiento general

Calculadora acabada

Pretendemos crear un cuadro o banner que nos muestre una calculadora parecida a una sencilla calculadora de bolsillo. nos fijamos como ejemplo en la calculadora que viene con en el sistema operativo windows o en alguna parecida.

El recuadro o banner de la calculadora debe distinguirse del resto de la página, debe tener una "pantalla" donde ver los números que vamos escribiendo y los resultados, y unos botones o teclas con los números, operaciones, y otros elementos que hay en una calculadora normal.

La calculadora debe resolver las operaciones aritméticas que se planteen. pàra ello además de usar los botones mediante un click de ratón, debemos poder usar el teclado para escribir y resolver las operaciones.

A la derecha mostramos cómo queda la calculadora una vez acabado el ejercicio.


pantalla y botones

Empezaremos por crear el código que muestre la "pantalla" de la calculadora y los botones que vamos a utilizar para las "teclas". Para ello creamos una página 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 más tarde, y las teclas que consistirán en elementos "input type='button'". La distribución de los botones en filas la hacemos poniendo todos los botones de una misma fila dentro de un mismo párrafo.

El código 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="8" />
<input type="button" value="9" />
<input type="button" value="/"  />
<input type="button" value="Raiz" />
</p>
<p>
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" />
<input type="button" value="%" />
</p>
<p>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="-" />
<input type="button" value="1/x" />
</p>
<p>
<input type="button" value="0" />
<input type="button" value="+/-" />
<input type="button" value="." />
<input type="button" value="+" />
<input type="button" value="="/>
</p>
</form>
</div>

Fíjate que en los tres primeros botones le hemos puesto un atributo de clase class="largo"; esto es porque estos botones serán distintos de los otros.

Este código lo veremos en pantalla tal como se nos muestra en el siguiente enlace:

botones calculadora


Debemos mejorar el aspecto de la calculadora, esto lo haremos mediante el código 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 código anterior el siguiente código 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 visualización: bordes, posición, 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; }

tras añadir el código CSS anterior, el aspecto de la calculadora será tal como lo vemos en el siguiente enlace:

aspecto calculadora


Tenemos ya el aspecto final que tendrá la calculadora, ahora debemos hacer que esta funcione mediante el código javascript, pero eso lo veremos ya en la siguiente página.





En la siguente página planificaremos la programación necesaria para poder hacer funcionar la calculadora.

2. Planificación del script



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