JavaScript: Guía completa. Alessandra Salvaggio
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 utilizará posteriormente en una instrucción if
para crear el nombre de la imagen que se desea cargar en el objeto <img>
con el id = carita.
if (esFinDeSemana() === true) valorSrc = ‘CaritaFeliz.png’;else valorSrc = ‘CaritaTriste.png’;
Observa que el nombre de la función se debe llamar completo entre paréntesis.
En este ejemplo, para simplificar un poco la lectura, hemos ejecutado explícitamente la comparación esFinDeSemana() === true
; sin embargo, normalmente, cuando la parte derecha de la comparación es un valor booleano, no se ejecuta la comparación de manera explícita, sino que basta con una notación más reducida:
if (esFinDeSemana()) valorSrc = 'CaritaFeliz.png';
Antes de continuar, queremos mostrarte un modo más sintético de escribir una instrucción if
, una manera que se puede utilizar cuando se tiene una comparación booleana y, por tanto, una única expresión a valorar si la comparación es verdadera y una única expresión a valorar si es falsa.
Las expresiones en cuestión no pueden llevar a cabo una operación, solo devolver un valor.
Toda la instrucción if
anterior puede ser escrita del modo siguiente:
const valorSrc = esFinDeSemana() ? 'CaritaFeliz.png' : 'CaritaTriste.png';
Esta