Alessandra Salvaggio - JavaScript - Guía completa

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 truey, si no, devuelve false(es decir, un valor booleano).

En realidad, podríamos escribir la función evitando la instrucción ify 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 ifque 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 ifpara crear el nombre de la imagen que se desea cargar en el objeto 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 únicaexpresión a valorar si la comparación es verdadera y una únicaexpresió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 ifanterior puede ser escrita del modo siguiente:

const valorSrc = esFinDeSemana() ? 'CaritaFeliz.png' : 'CaritaTriste.png';

Esta notación se denomina habitualmente operador ternarioporque se compone de tres partes:

test booleano ?valor si verdadero :valor si falso

El resultado de un operador ternario, que siempre es un valor, se asigna a una variable o a una constante (o se utiliza para ejecutar operaciones que todavía no hemos explicado), si no, se pierde. Nuestra función se utiliza una sola vez, pero nada nos impide utilizarla también en otras situaciones.

Por ejemplo, podríamos enriquecer nuestro código como se indica a continuación, para mostrar, además de una imagen, también un mensaje adecuado para el momento de la semana:

const valorSrc = esFinDeSemana() ? 'CaritaFeliz.png' : 'CaritaTriste.png'; const mensaje = esFinDeSemana() ? 'Diviértete' : 'Venga, que ya falta poco';document.getElementById('carita').src = valorSrc; document.getElementById('output').innerHTML = mensaje;

Puedes encontrar este ejemplo en el archivo Funciones1 .html

Tratemos de complicar un poco nuestro ejemplo de uso de una función haciendo que nos muestre el nombre del día de la semana actual.

const dia = new Date().getDay();function esFinDeSemana() {return dia === 0 || dia === 6;} function queDia() { const nombreDia = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']; return nombreDia[dia]; }const valorSrc = esFinDeSemana() ? ‘CaritaFeliz.png’ : ‘CaritaTriste.png’;document.getElementById('carita').src = valorSrc; document.getElementById('output').innerHTML = queDia();

Puedes encontrar este ejemplo en el archivo FuncionesArray .html

La auténtica novedad de este código es la línea:

const nombreDia = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];

La constante nombreDia, a diferencia de las que hemos visto hasta hora, contiene un conjunto de datos.

Se define como array y contiene múltiples valores ordenados y colocados entre corchetes.

Dado que los valores de un array están dispuestos en un orden determinado, es posible acceder a él especificando su posición mediante un número de índice que empieza desde 0 (el primer elemento del array tiene el valor 0).

Para acceder a un elemento de un array, basta con poner entre los corchetes de dicho array el número de índice del elemento.

nombreDia[2]

devolverá el valor “Martes” que se encuentra en la posición 2 en el array (0 corresponde a domingo; 1, a lunes; 2, a martes... y 6, a sábado).

Nuestro array contiene los nombres de los días de manera que su posición corresponda al valor devuelto por getDay()y almacenado en la variable dia, que después podemos utilizar como índice de nuestro array.

nombreDia[dia]

Hasta ahora, hemos escrito funciones que elaboran datos que ya poseen y devuelven como mínimo un valor.

En realidad, es posible pasar uno o más datos (denominados parámetros) a la función en el momento en que esta se llama.

La función utilizará los datos pasados para sus elaboraciones y después estos influirán en el resultado de dicha función.

Comprobémoslo con un ejemplo:

Puedes encontrar este ejemplo en el archivo FuncionesParametros .html

El comportamiento de esta función debería resultarte familiar; así podemos centrarnos en la gestión del parámetro.

Como puedes ver, la función, desde su definición, está predispuesta a aceptar un parámetro, nombre , en nuestro caso, que posteriormente será pasado ( ‘Alessandra’ ) en el momento en que la función es llamada.

En este ejemplo, hemos pasado un único parámetro, pero las funciones de JavaScript pueden aceptar más de uno.

Con este propósito, os proponemos otro ejemplo:

function cuantosDias( año, mes, dia, NombreEvento) {const hoy = new Date();const milsegEnUnDia = 1000 * 60 * 60 * 24; // los milisegundos de un día// indico a media noche la fecha de hoy, de no ser así la resta entre ambas fechas no nos dará la hora correctahoy.setHours(0, 0, 0, 0);const fechaEvento = new Date(año, mes - 1, dia)const diferenciaHoras = Math.abs(fechaEvento.getTimezoneOffset() / 60) - Math.abs(hoy.getTimezoneOffset() / 60);hoy.setHours(hoy.getHours() - diferenciaHoras);if (fechaEvento > hoy) {return `Faltan ${(fechaEvento.getTime() - hoy.getTime()) / milsegEnUnDia} días para ${NombreEvento}`;} else {return 'La fecha ya pasó'}}document.getElementById('output').innerHTML = cuantosDias(2017, 12, 25, 'Navidad');

Puedes encontrar este ejemplo en el archivo FuncionesParametros1 .html

Esta vez la función es más compleja y prevé que se pasen cuatro parámetros: un año, un mes, un día y un evento. La función utilizará los primeros tres parámetros para crear una fecha y calcular cuántos días faltan para dicha fecha (obviamente, si esta todavía no ha pasado). El cuarto parámetro no es otro que un nombre para el evento representado por la fecha a partir de la cual calculamos los días que faltan.