cómo podemos ver el resultado de nuestro bucle for?
Una posibilidad consiste en leer el código fuente de la página del navegador. Para acceder al código fuente de la página, pulsa con el botón derecho del ratón en cualquier punto de la página y selecciona la opción “Ver código fuente” o similar (depende del navegador): ¡verás que el código HTML ha sido modificado por nuestro código JavaScript!
Una manera más potente de analizar una página es abrir el modo de desarrolladores pulsando la tecla F12 del teclado (en Firefox y Chrome, también mediante la combinación CTRL+MAYÚS+i).
En función del navegador que se utilice, aparece una ventana independiente o una sección en la página que muestra distintas pestañas, una de las cuales permite analizar el código HTML (Figura 5.1), además de los estilos CSS y el código JavaScript cargados por la página.
Figura 5.1 – El código HTML que genera la página mostrada.
Otra sección muy interesante de las herramientas para los desarrolladores es la consola: un área donde el navegador muestra eventuales errores encontrados durante la carga de la página y/o la ejecución del código JavaScript.
Desde nuestro código, es posible utilizar la consola del navegador para escribir mensajes que nos pueden ayudar a identificar problemas (los denominados mensajes de depuración).
Por ejemplo, podemos modificar nuestro bucle for del siguiente modo.
for (let i=0; i<listaLI.length; i+=1) {console.log(`i=${i} value=${i + 1} elemento=${listaLI.item(i)}`);listaLI.item(i).value = i+1;}
Puedes encontrar este ejemplo en el archivo Bucles2 .html
La instrucción console.log llama a la función log del objeto console, que escribe un mensaje en la consola del navegador.
| NOTA | Obviamente, si la consola no está abierta, el mensaje no aparece. |
Si ejecutamos el bucle, tendremos, en la consola (Figura 5.2), líneas como estas:
i=0 value=1 elemento=[object HTMLLIElement]
i=1 value=2 elemento=[object HTMLLIElement]
i=2 value=3 elemento=[object HTMLLIElement]
Figura 5.2 – Mensajes en la consola.
Estos mensajes confirman los valores de la variable índice i, del valor calculado para el atributo value y del hecho que listaLI.item contiene objetos JavaScript que representan elementos LI.
Algunos desarrolladores suelen mostrar en pantalla estos mensajes mediante ventanas alert que se abren en la página del navegador (Figura 5.3).
alert(`i=${i} value=${i + 1} elemento=${listaLI.item(i)}`);
Figura 5.3 – La ventana alert.
Es preferible utilizar console.log en lugar de las ventanas de alert, porque console.log no interrumpe la ejecución del código y en cambio alert, sí.
Funciones
En este capítulo hablaremos de funciones que permiten agrupar varias líneas de código para mantener el orden y reutilizar más fácilmente partes de código.
Temas tratados
•Definir y utilizar funciones
•Utilizar el operador ternario
•Pasar parámetros
•Arrays
•Funciones anónimas
•Área de validez de constantes y variables
Una función es un grupo de instrucciones que ejecuta una tarea o calcula un valor.
Para trabajar con funciones se precisan dos pasos:
•declarar la función y definir sus acciones
•llamar a la función en uno o varios puntos del código
Para explicar mejor el uso de funciones, empezaremos con un ejemplo:
<body><p id="output"></p><img id="carita" /><script type="text/javascript">function esFinDeSemana() {const dia = new Date().getDay();if (dia === 0 || dia === 6) return true;else return false}let valorSrc;if (esFinDeSemana() === true) valorSrc = 'CaritaFeliz.png';else valorSrc = 'CaritaTriste.png';document.getElementById('carita').src = valorSrc;</script></body>
Puedes encontrar este ejemplo en el archivo Funciones .html
Empezamos el análisis de este código precisamente por la función esFinDeSemana:
function esFinDeSemana() {const dia = new Date().getDay();if (dia === 0 || dia === 6) return true;else return false}
Observa que, para crear la función, se utiliza la palabra function seguida del nombre de la misma función y, a su vez, seguida de un par de paréntesis.
Todas las líneas de código que forman parte de la función se sitúan entre llaves.
Anteriormente hemos dicho que una función puede limitarse a ejecutar acciones, o bien puede devolver un valor, como la función que estamos analizando.
El valor devuelto se introduce con la palabra return.
La función utiliza un código que ya te debería ser familiar: tras haber leído el número del día de la semana, si es sábado (6) o domingo (0), la función devuelve true y, si no, devuelve false (es decir, un valor booleano).
En realidad, podríamos escribir la función evitando la instrucción if y utilizando una notación más resumida:
return dia === 0 || dia === 6;
Esta instrucción devuelve el resultado de la comparación dia === 0 || dia === 6, es decir, verdadero o falso, igual que la instrucción if que hemos escrito inicialmente.
Tanto si utilizamos una instrucción if, como si recurrimos a la forma más resumida, el valor que devuelve la función se
