Sesion Laboratorio 5 Practica 2 1 - jesusgpa/2022-2023-CSAAI GitHub Wiki
- Tiempo: 2h
- Fecha: Martes, 23 de Febrero de 2023
-
Objetivos de la sesión:
- Enunciado de la práctica 2
- Toma de contacto con Javascript
- Probar y entender todos los ejemplos vistos
- Comprobando elementos en la consola
- Usando el depurador del navegador
- ¡A practicar!
- Ejercicios recomendados
- Conclusiones
- Autores
- Licencia
- Enlaces
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 el cursor 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á sucediendo.
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 funcionamiento.
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 lugares 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 la 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).
- 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
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.
Jesús Parrado Alameda (jesusgpa)
- Creado a partir del contenido generado por el profesor Jose María Cañas
- Creado a partir del contenido generado por el profesor Juan Gonzalez-Gomez
