L5:Practica 2_1
- Tiempo: 2h
- Fecha: Martes, 16 de Marzo de 2021
-
Objetivos de la sesión:
- Enunciado de la práctica 2
- Toma de contacto con Javascript
- Probar y entender todos los ejemplos vistos
- Introducción
- Enunciado de la práctica 2 (ESPECIFICACIONES)
- Comprobando elementos en la consola
- Usando el depurador del navegador
- ¡A practicar!
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
Vamos a practicar la creación de páginas web interactivas programando una calculadora en Javascript
En esta imagen puedes ver la calculadora creada por Andrea López Recio en el curso 2019-2020. En esta animación se muestra su funcionamiento
Programar una calculadora en Javascript. Para la interfaz se usará un fichero HTML y otro de estilo CSS, y el código Javascript estará en otro fichero separado. La calculadora tendrá botones para introducir los dígitos 0,1...9, un display donde se muestra lo introducido, los botones para realizar las operaciones: suma, resta, producto y división, y el botón de = para calcular el resultado. Deberá haber un botón de AC para llevar la calculadora al estado inicial (Reset). Habrá un botón de DEL para borrar el último carácter introducido
La calculadora deberá disponer de un controlador básico que impida introducir expresiones erroneas como por ejemplo "1++2". Todas las expresiones a calcular deberán ser de la forma <Número> <Operador> <Número>. Es decir, las operaciones siempre serán sólo entre dos números. Así, la expresión "1+2+3" no es válida. Para calcularla habrá que hacer primero "1+2" y darle al igual. A este resultado ahora ya le podemos sumar el 3. El controlador se encargará de no permitir que se introduzcan otras expresiones.
Deberás incluir en el fichero README.md de la práctica 2 un manual de usuario básico indicando el funcionamiento de tu calculadora e indicando explícitamente las mejoras que has introducido
La calculadora deberá está accesible desde la URL: https://TU-USUARIO-GITHUB.github.io/2020-2021-CSAAI-Practicas/P2/
Puedes introducir las mejoras adicionales que consideres necesarias. Algunas propuestas de mejora son:
- Botones de cambio de base para realizar operaciones con números en binario, en hexadecimal o ambos
- Creación del teclado directamente desde javascript, insertando las teclas en el DOM (en vez de tenerlas definidas en el HTHML)
La consola del navegador nos permite ver el contenido de todos los elementos creados y modificar sus valores. Vamos a probar el Ejemplo 5 de la sesión S4
Abrimos la consola del navegador (Ctrl-Shift-K) y tecleamos test
Nos indica que el elemento test es un párrafo (tipo p). Si pasamos le curso por encima se resalta el párrafo en el navegador y si se pincha sobre él se abre la pestaña de Inspector y tenemos acceso a su estilo
Desde la consola tenemos acceso a todas las propiedades del párrafo test. Si escribimos test.innerHTML vemos en la consola el contenido del párrafo
Si asignamos un valor nuevo a esta propiedad, el párrafo cambiará: test.innerHTML="Párrafo cambiado!!!!"
Utilizando el operador += de Javascript podemos añadir otra cadena: test.innerHTML+="Trozo añadido"
Y por supuesto también podemos cambiar directamente la propiedades del estilo. Por ejemplo vamos a poner fondo amarillo: test.style.background="yellow"
El navegador incorpora un depurador (Debugger) de Javascript que nos permite ejecutar las instrucciones paso a paso y comprobar qué está sucenciendo. Es una herramienta clave para entender cómo funcionan nuestros programas y sobre todo encontrar los fallos
Para mostrar su uso vamos a usar esta página HTML, que guardamos en el fichero Ej-10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 10</title>
<script src="Ej-10.js" defer></script>
</head>
<body>
<p id="test">Haz click en este Párrafo...</p>
</body>
</html>Y su correspondiente Javascript en el fichero Ej-10.js
console.log("Ejecutnado JS...");
//-- Obtener el párrafo
const test = document.getElementById('test');
//-- Funcion de retrollamada de la pulsación del párrafo
test.onclick = () => {
console.log("Click!");
//-- Cambiar el color del fondo...
//-- Si no tenía color asignado ponemos amarillo
if (test.style.backgroundColor == "") {
test.style.backgroundColor = "yellow";
}
//-- Si ya tiene color se lo quitamos
else {
test.style.backgroundColor = "";
}
}Cada vez que pulsemos sobre el párrafo, se cambia el color del fondo. Se alterna entre blanco y amarillo. En esta animación lo vemos en funcioamiento
Con el ejemplo anterior cargado, si pinchamos en el nombre del programa en js, en la parte de la derecha o bien en la pestaña Debugger aparece el depurador
En el panel central vemos el código javascript. Al hacer clicks en los números de línea se establecen puntos de ruptura (Breakpoints). Son los luegares donde queremos que la ejecución se detenga y entre en modo paso a paso. Ponemos uno en la línea 8
Ahora, cuando se vaya a ejecutar esa línea, el programa se detendrá. Lo comprobamos haciendo click en el párrafo
Aparece un mensaje indicando que l**a ejecución está detenida+*. Está en la línea 8. Esa línea todavía no se ha ejecutado. Pinchamos en el icono de Step Over en la parte superior del panel derecho
La instrucción se ejecuta y se marca la siguiente instrucción a ejecutar. A esta acción de ejecutar una instrucción y pasar a la siguiente se le denomina dar un paso
Si ahora pinchamos en la pestaña de la consola, veremos que efectivamente se ha impreso el mensaje "Click!"
Volvemos al depurador. **Avanzamos un par de pasos+*, pinchando en STEP OVER dos veces, y el fondo del párrafo se pone amarillo
Para continuar con la ejecución pulsamos el botón triangular situado a la izquierda de step over
El breakpoint sigue en la línea 8, por lo que cuando se reciba otro evento de click se volverá a detener. Para quitarlo volvemos a pinchar en la línea 8
En esta animación se muestra el proceso completo:
Para practicar con Javascript haz desde cero los ejemplos mostrados en la sesión 4 de teoría. Guárdalos en ficheros independientes y sitúalos en el directorio P2/S4 de tus prácticas. Comprueba su funcionamiento y estúdialos. Súbelos al repositorio
Comprueba también el ejemplo 10 mostrado en esta sesión y practica con el depurador
Para seguir avanzando se proponen los siguientes ejercicios:
Coloca un botón y haz que se imprima un mensaje en la consola cada vez que se pulse
Modifica el programa anterior para que se imprima un mensaje en un párrafo HTML
Modifica el programa anterior para que se añada un '1' al final del párrafo cada vez que se pulse el botón
Coloca otro botón y haz que se añada otro número diferente al pulsarlo (por ejemplo el 2).
Esto todavía no es una calculadora, pero se va acercando 🙂
- Haz los ejemplos de la sesión 4 de teoría en P2/S4
- Súbelos al repo y compruébalos desde el ordenador y el teléfono móvil
- Haz el ejemplo 10
- Haz los ejercicios del 1 al 4 propuestos en la práctica
- Con lo que llevas hecho, piensa cómo podrías hacer una calculadora
Ya sabemos ejecutar nuestros primeros programas en Javascript y cómo mostrar información en la consola. Sabemos cómo añadir texto y cómo depurar los programas. Y también hemos aprendido a reaccionar al evento de onclick
- Juan González-Gómez (Obijuan)
- Creado a partir del contenido generado por el profesor Jose María Cañas
