Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Calculadora con Javascript (i)
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Durante esta semana hemos estado trabajando sobre la calculadora, realizándola con Javascript.
00:00:02
Vamos a ver una posible solución.
00:00:08
Ya les digo que hay varias, hay muchas posibilidades, pero bueno, una calculadora casi todo el mundo sabe cómo es,
00:00:12
como esta que aparece en pantalla.
00:00:17
Es una calculadora típica, típica, típica, en la cual podemos analizar qué es lo que nos va a aparecer.
00:00:19
O simplemente unos botones con los números, una tecla de C que va a ser para limpiar, para hacer un clear de todo el display, después los cuatro símbolos matemáticos habituales y un igual para ver la información.
00:00:28
Vamos a ver cómo trabaja esta calculadora y después pasamos a ver el código.
00:00:48
Lo primero que vemos aquí es que yo puedo teclear cualquier número, 25 más, aquí está apareciendo un poquito de información para saber lo que he tecleado, 36 igual, pues 61.
00:00:53
Si limpio la pantalla, pues 26 dividido 2 igual 3.
00:01:09
Este es el funcionamiento de esta calculadora. No es la única manera de que funcione, puede funcionar en más maneras, pero vamos a ver cómo hemos desarrollado todo el código.
00:01:16
La primera parte ha sido el HTML. En este caso, como ya empieza a ser muy complicado, hemos dividido el HTML y hemos separado el CSS y el Javascript.
00:01:25
entonces aquí vemos los dos enlaces ambos
00:01:35
lo que hemos hecho simplemente es pintar una calculadora
00:01:38
hemos puesto un título y a partir de ahí hemos definido las siguientes áreas
00:01:42
esta parte que llamo control que es la que aparecía aquí arriba
00:01:47
vamos a verla otra vez, esta de aquí, esta de aquí arriba en gris para saber lo que ya habíamos introducido
00:01:51
una parte que es este input donde realmente está apareciendo este cero al inicio
00:01:58
y después poco a poco irían apareciendo los demás caracteres.
00:02:05
Después hemos pintado cuatro filas de botones.
00:02:10
Aquí están las cuatro filas.
00:02:15
Entonces cada una tiene lo que podemos ver en la pantalla
00:02:16
y están asociados a unos métodos que después desarrollaremos.
00:02:19
El 7 al número 7, el 8 al número 8, 9 al número 9,
00:02:23
la división al operador división y así todas las filas
00:02:27
Y en la última, el C al método init, que inicializará la calculadora, el 0 al 0, el igual a aldo, do it, y el más al operador más.
00:02:33
Bueno, ya vemos que no es difícil pintar esta calculadora, esto y un poquito de CSS para darle unos tamaños a los distintos elementos,
00:02:46
los botones, cómo los queremos de tamaño, cómo va a ser el display, etcétera, hacen que la pantalla,
00:02:56
que la visualización de la calculadora sea tal como la mostramos aquí. Bueno, vamos a ir al código.
00:03:02
Ya hemos visto aquí en calculadora.html los métodos que vamos a utilizar y vamos a ir viendo qué es lo que tenemos aquí.
00:03:09
- Idioma/s:
- Materias:
- Informática, Tecnologías de la Información
- Autor/es:
- Amadeo Mora
- Subido por:
- Amadeo M.
- Licencia:
- Reconocimiento - No comercial - Sin obra derivada
- Visualizaciones:
- 110
- Fecha:
- 20 de marzo de 2020 - 19:50
- Visibilidad:
- URL
- Centro:
- IES CLARA DEL REY
- Duración:
- 03′ 17″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1364x768 píxeles
- Tamaño:
- 16.96 MBytes
