JavaScript: Guía completa. Alessandra Salvaggio
Читать онлайн.| Название | JavaScript: Guía completa |
|---|---|
| Автор произведения | Alessandra Salvaggio |
| Жанр | Математика |
| Серия | |
| Издательство | Математика |
| Год выпуска | 0 |
| isbn | 9788426727701 |
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.
<script type="text/javascript">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();</script>
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]
Pasar parámetros a las funciones
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:
<body><p id="output"></p><img id="carita" /><script type="text/javascript">function queDia(nombre) {const dia = new Date().getDay();const nombreDia = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];return `Hola ${nombre}! Feliz ${nombreDia[dia]}`;}document.getElementById('output').innerHTML = queDia('Alessandra');</script></body>
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:
<script type="text/javascript">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');</script>
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.
Veamos cómo ocurre todo esto, puesto que la función contiene muchas novedades.
En primer lugar, además de la constante que representa la fecha, se crea otra que representa la duración de un día en milisegundos, porque la diferencia entre las fechas será devuelta exactamente en milisegundos y nosotros podremos utilizar el valor de esta constante para aplicar el resultado obtenido a varios días.
const milsegEnUnDia = 1000 * 60 * 60 * 24
Una vez hecho esto, indicamos la fecha de hoy a media noche. Si no lo hacemos, la fecha contiene también la hora del momento en que se ha creado y será más difícil de comparar con la fecha que crearemos con los parámetros pasados a la función que, en cambio, no contendrá un horario y, por tanto, hará referencia a la media noche:
hoy.setHours(0, 0, 0, 0);
setHours, efectivamente, ajusta la hora de una fecha. Requiere como argumentos hora, minutos, segundos y milisegundos.
En este momento, creamos la fecha con los parámetros que han sido pasados, sin olvidarnos de restar 1 al valor pasado para el mes, dado que JavaScript utiliza para los meses números que van del 0 (enero) al 11 (diciembre).
const fechaEvento = new Date(año, mes - 1, dia);
Para que nuestra función se comporte correctamente con o sin la horal legal, debemos ajustar el horario de la fecha de hoy de manera que tenga en cuenta el posible cambio de hora causado por la hora legal:
const diferenciaHoras = Math.abs(fechaEvento.getTimezoneOffset() / 60) - Math.abs(hoy.getTimezoneOffset() / 60);hoy.setHours(hoy.getHours() - diferenciaHoras);
Como ya sabéis (puesto que lo hemos visto en el capítulo ¡Hola mundo!), getTimezoneOffset devuelve la diferencia en minutos entre el UTC y la hora local. Si dividimos este resultado entre 60, obtendremos las horas.
En