soy Kseso y esto EsCSS

Javascript con Furoya: obtener día de la semana y actuar en función de él

Javascript con Furoya: obtener día de la semana y actuar en función de él

✎ 3
COLABORACIÓN AUTOR INVITADO

Nota del Editor: Lo que te dispones a leer es un artículo original de Furoya.

Este artículo tiene poco que ver con CSS, pero más adelante se van a necesitar algunos conocimientos sobre estructuras básicas y razonamiento de programador que deberían estar presentes en estas primeras entregas. Me parece mejor si los ven trabajando en bruto y así a los lectores les da curiosidad y ven por sí mismos cómo se aplican en caso de usarlo para aplicar estilos CSS.

Seguimos viendo ejemplos para solicitudes 'clásicas' en blogs, foros y comunidades de CSS, pero que solamente se pueden resolver con lenguajes de programación. Y otra vez lo hacemos con javascript.

En el artículo anterior elegíamos una imagen al azar por cada vez que se cargaba el documento, y ahora vamos a ver algo parecido, pero con una mecánica diferente.

En vez de cargar fotos vamos a usar textos, y en lugar de hacerlo aleatoriamente, vamos a poner uno distinto para cada día de la semana. Para eso presentamos otro "prehecho" de javascript : el objeto Date().

Al igual que Math.random(), éste también busca información en el reloj de la máquina, pero para un fin más ortodoxo. Nos muestra horas, fechas, años en diferentes formatos. Y también el día de la semana en el reloj local.

El método es muy simple, volvemos a trabajar con las etiquetas de script y un mensaje de alerta. Pero ahora vamos a ayudarnos con una declaración de variable.

El concepto es igual al de CSS, elegimos un nombre que nos guste y le asignamos un valor, en el momento que queda "grabado", ya no se cambia a menos que le asignemos otro valor a la misma variable.

Para trabajar con tiempos en indispensable, porque si lo tenemos que pedir de nuevo a cada paso del escript, el reloj nos va a entregar siempre un valor distinto. Y nosotros tenemos que trabajar desde el principio hasta el final con uno que no se cambie. Para el caso del día, no es grave; dentro de sus 24 horas nos va a devolver lo mismo, pero si trabajamos con segundos (o menos) estamos en problemas.

Vamos al ejemplo.

<script type="text/javascript"> var fecha = new Date(); alert( fecha.getDay() ); </script>

Les explico : creo una variable y la bautizo fecha y en ella pongo un valor usando primero un operador new, que crea un nuevo objeto para que lo use el JS del navegador. Luego ponemos la función para construir el objeto (más exactamente, sería la instancia del objeto, pero de momento no nos vamos a ocupar de esto). Como dije hace un tiempo, hay muchas maneras de hacer las cosas en javascript, y estamos viendo solamente una.

En el momento que se ejecuta la función Date() trae el valor básico del reloj en ese momento y el navegador lo muestra traducido a lenguaje humano. Pero internamente javascript puede hacer operaciones con él y extraer hasta la hora de Greenwich.

Y de eso se encargan otras funciones como getDay(), que le saca el número de día de la semana:

0 → domingo
1 → lunes
2 → martes
3 → miércoles
4 → jueves
5 → viernes
6 → sábado

y lo devuleve limpio, para que podamos usarlo como parte de nuestro nombre de imagen, o como orden de frases.

Date() no lleva parámetros o argumerntos adentro, pero se puede encadenar a otra función usando el punto .. No conviene hacerlo por los motivos previamente explicados, pero si alguna vez les queda más cómodo tampoco hay inconveniente.

En nuestro ejemplo anterior podíamos haber usado el más intuitivo

<script type="text/javascript"> alert( new Date().getDay() ); </script>

pero yo quería usar variables, porque después las vamos a necesitar.

Veamos qué hay hasta ahora. Abrimos el navegador y se ejecuta el escript, que declara una variable y mete dentro los datos de la fecha actual, luego disparamos la función de alerta, que tiene como parámetros esa variable con la fecha seguida de otra función que le extrae el número del día de semana, que es lo que se muestra en el mensaje modal.

El paso siguiente es crear una serie o lista con siete frases para que aparezcan según el número que devuelva nuestro escript. Normalmente se haría creando un objeto Array, que es una variable especial para contener muchos valores ordenados con su número (por ejemplo, 7 textos ordenados del 0 al 6); pero ahora vamos a usar el mismo mecanismo que para las imágenes del artículo anterior.

<script type="text/javascript"> var fecha = new Date(); var semana0 = "Hoy es domingo."; var semana1 = "Hoy es lunes."; var semana2 = "Hoy es martes."; var semana3 = "Hoy es miércoles."; var semana4 = "Hoy es jueves."; var semana5 = "Hoy es viernes."; var semana6 = "Hoy es sábado."; var hoy = fecha.getDay(); alert( eval("semana" + hoy) ); </script>

Recordemos un poco. En el caso de las imágenes teníamos nombres de archivo casi iguales, solamente se diferenciaban en un número al final de su nombre, y es por este número que llamábamos a una en particular desde el escript. Para formar esa cadena de texto que después metíamos en url() de CSS concatenábamos el nombre con el número usando +.

Acá ya no tenemos una cadena de texto con la ruta para concatenar, pero podemos crear variables con el mismo sistema : la "palabra" semana seguida de un número que coincide con alguno de los que devuelve getDay(). Si usamos el siguiente ejemplo

<script type="text/javascript"> alert( semana1 ); </script>

en la alerta va a aparecer Hoy es lunes.. Y ya notamos un detalle : la variable que usamos como parámetro de alert() no tiene comillas. Porque no es una cadena de texto, es una variable, una referencia que usa javascript pero que sí contiene al texto; por eso lo que al final muestra es ese texto llamado a través de su variable.

Entonces —en teoría— no podremos usar el método de concatenar, que es exclusicamente para cadenas de texto.

Dos códigos antes echamos mano de una función de alto nivel llamada eval() que se usa muy pocas veces porque es potencialmente peligrosa: crea agujeros de seguridad. Aunque para nuestro caso no hay riesgo. Les explico qué hace.

eval() basicamente, prueba las cadenas de texto y operaciones que tenga como parámetro, y si coinciden con "algo" que ya esté en javascript, lo ejecuta. No importa si termina siendo una variable, una función, o una bomba.

De esa forma manejamos el texto inicial de las variables como cadena, lo juntamos con el número que devuelve la función getDay() y lo metemos como parámetro de eval() para que éste lo busque entre lo que tiene declarado javascript, cuando encuentra que coincide con una variable, convierte nuestra cadena en esa variable, que contiene el texto del día y es lo que termina apareciendo en la alerta.

Pero como en la mayoría de los casos, no nos interesa que aparezca en un mensaje modal, ahora vemos cómo meter ese texto en un párrafo.

<!DOCTYPE html> <html lang="es-ar"> <head> <meta charset="utf-8" /> <style type="text/css"> p { font: bold 300%/1 fantasy; } </style> </head> <body> <p id=miDia> </p> <script type="text/javascript"> var fecha = new Date(); var semana0 = "Hoy es domingo."; var semana1 = "Hoy es lunes."; var semana2 = "Hoy es martes."; var semana3 = "Hoy es miércoles."; var semana4 = "Hoy es jueves."; var semana5 = "Hoy es viernes."; var semana6 = "Hoy es sábado."; var hoy = fecha.getDay(); document.getElementById("miDia").textContent = eval("semana" + hoy); </script> </body> </html>

La última línea podría haber sido:

document.querySelector("#miDia").textContent = eval("semana" + hoy);

pero aprovecho para que vean otra forma de apuntar a un elemento por su identificador; esta vez especificado en la misma función y no en su parámetro, que solamente contiene el valor del 'id'.

La "traducción" a nuestra lengua sería: "en el documento, acceder al elemento por su identificador 'miDia' para poner un contenido de texto igual a ... ". Cómo se forma el valor, ya está explicado.

Ah!, y por si alguno le tiene miedo a eval(), otras de las formas de usar Array son:

<script type="text/javascript"> var fecha = new Date(); var semana = new Array(); semana[0] = "Hoy es domingo."; semana[1] = "Hoy es lunes."; semana[2] = "Hoy es martes."; semana[3] = "Hoy es miércoles."; semana[4] = "Hoy es jueves."; semana[5] = "Hoy es viernes."; semana[6] = "Hoy es sábado."; alert( semana[fecha.getDay()] ); </script>

Y su otra forma más moderna:

<script type="text/javascript"> var fecha = new Date(); var semana = ["Hoy es domingo." , "Hoy es lunes." , "Hoy es martes." , "Hoy es miércoles." , "Hoy es jueves." , "Hoy es viernes." , "Hoy es sábado."]; alert( semana[ fecha.getDay() ] ); </script>

porque si el contenido de 'semana' está entre corchetes, tiene que ser un Array. Y el orden de la lista es el mismo en que escribimos las cadenas de texto, que están separadas por comas.

Ahora, usar saludos, imágenes, canciones, colores, según el día de la semana, el mes, la hora ... ya queda en sus gustos.

Como en este pen, donde se aplica al input del calendario para que muestre el valor de la fecha actual actual por defecto y que este mismo valor sea el máximo admitido. Al elegir una fecha futura dispara la validación Css input:invalid

See the Pen Validated ´input type=date´ to this day. by Kseso (@Kseso) on CodePen.

Tienes una explicación más detallada de este pen en los comentarios.

Autoría

Furoya: Autor del artículo

Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.

Notas del Editor

Hasta aquí el artículo de Furoya. Lo que siguen son unos apuntes al vuelo del editor del blog.
Como ves el contenido podría decirse que es de introducción a Javascript puro. Estoy seguro que a quienes se inician en este lenguaje, tras su lectura, les surgirán ideas o posibilidades de uso que requerirán de algo de ayuda. Me consta que Furoya estará encantado de responder a ellas. Ya sea en los comentarios o en futuros artículos.
La imagen que encabeza el artículo de publicdomainreview.org