LocalStorage

Hoy aprenderemos a como utilizar el LocalStorage de HTML y JavaScript para usarlo en nuestras paginas web.

¿Qué es el LocalStorage?

Con el LocalStorage podemos guardar información en nuestro navegador web a modo de sesión y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio web.

El LocalStorage suele usarse mucho en aplicaciones web desarrolladas completamente con JavaScript,  puede aplicarse a cualquier web en la cual necesitemos compartir datos entre secciones.

Veamos cómo usar el LocalStorage en JavaScript.

Guardar datos en el navegador

Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:

// Guardar
localStorage.setItem("elemento", "ListadeElementos");

De esta manera damos de alta un nuevo elemento.

Recuperar datos

Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:

// Conseguir elemento
localStorage.getItem("elemento");

Esto nos devolverá el valor que hemos guardado anteriormente.

Guardar objetos en el LocalStorage

Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.

Tendríamos que hacer algo así:

localStorage.setItem("usuario", JSON.stringify(mi_objeto));

Guardamos el elemento usuario cuyo valor es un objeto convertido a string.

Sacar objetos del LocalStorage

Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript JSON en lugar del string JSON que se encuentra guardado por defecto.

Haríamos esto:

JSON.parse(localStorage.getItem("usuario"));

Recordemos que:
JSON.parse() es para convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.

Borrar o vaciar el LocalStorage

Para eliminar un elemento del LocalStorage usaremos la siguiente instrucción:

localStorage.removeItem("usuario");

Siendo"usuario" el identificador del elemento.

Para vaciar por completo el LocalStorage usaremos la siguiente instrucción:
localStorage.clear();

See the Pen
localstorage
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

[Arreglos] en JS

Siempre será necesario el uso de arreglos en cualquier lenguaje de programación y claro que JavaScript no es la excepción.

En esta publicación aprenderemos como declarar arreglos, como agregar, ordenar y eliminar elementos dentro de los también conocidos como “Arrays”.

Primero

Los arreglos son una colección ordenada de elementos no homogéneos, cada elemento puede ser de un tipo de dato diferente.

Son el método más común y simple de almacenar datos. Técnicamente, un “Array” es un objeto intrínseco de JavaScript. Admite datos del tipo cadenas, números, objetos, arrays, true, false, null.

Declaración

Existen dos formas de declarar un arreglo y son las siguientes:

La primera forma de declarar un arreglo es a través de los corchetes.

Un ejemplo de arreglo con tres datos string seria:

 var arreglo1 = ["rojo", "azul", "verde"] ;

En el caso de un arreglo vacío sería:

 var arreglo1 = [];

La segunda forma nos permite declarar un arreglo estableciendo el número de posiciones e indicando los elementos que tendrá.

De la siguiente manera declaramos el arreglo, pero sin ninguna posición:

 var arreglo2 = new Array();

entonces para establecer un número de posiciones para el arreglo, seria:

 var arreglo2 = new Array(3);

Dentro de los paréntesis o mejor llamado constructor, se establece el número de elementos que puede contener este arreglo, a su vez, se podría indicar los elementos del arreglo:

 var arreglo2 = new Array("rojo", "azul", "verde");

Agregar Elementos

Para agregar elementos dentro de nuestro arreglo podemos usar las funciones Push y Unshift.

  • Push agrega un elemento al final del arreglo.
  • Unshift agrega un elemento al inicio del arreglo.

Ejemplos:
var Colores = ["rojo","verde"];


Colores.push["azul"];
["rojo","verde","azul"]

Colores.unshift["negro"];
["negro","rojo","verde","azul"]

Ordenar elementos

Para ordenar elementos tenemos la función Sort que ordena alfabéticamente elementos de tipo string y ordena de menor a mayor elementos de tipo entero.

También existe la función Reverse que invierte el orden del arreglo.

Colores.sort();
["azul","negro","rojo","verde"]

Colores.reverse();
["verde","rojo","negro","azul"]

Eliminar elementos 

Para eliminar elementos de nuestro arreglo tenemos las funciones Pop Shift.

  • Pop elimina el ultimo elemento del arreglo
  • Shift elimina el primer elemento del arreglo

Ejemplos:
var Colores = ["verde","rojo","negro","azul"]

Colores.pop();
["verde","rojo","negro"]

Colores.shift();
["rojo","negro","azul"]

See the Pen
Arreglos en js
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Efectos en imágenes con FadeIn y FadeOut

Siempre queremos darle la mejor presentación a nuestra página web usando y manejando imágenes de la mejor manera, muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que hacen lenta y no muy funcional nuestra página haciendo que la navegación dentro de la misma sea molesta para el usuario.

Por eso en esta publicación te mostraremos como desplegar algunas imágenes sin hacer uso de técnicas que estropeen la funcionalidad de tu página.

Documento HTML
Lo primero que debemos hacer es nuestro documento HTML, donde en una lista desordenada agregamos imágenes y dos enlaces con id “mostrar” y “ocultar”, conteniendo el mismo texto.

Documento CSS
Agregaremos un estilo, en un archivo CSS, para nuestros elementos en la lista de imágenes donde no se vea ninguna viñeta y se encuentren colocados a la izquierda. Es importante no mostrarlos en un inicio, esto lo podemos hacer agregando “display: none”.

Creación del Script
Para realizar el efecto sobre las imágenes haremos un script. Usaremos JQuery así que debemos agregar la siguiente librería en nuestro HTML: https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Utilizaremos la sentencia “document.ready “y dentro de ella cargaremos la función padre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los enlaces.

Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar nuestras imágenes.
Para darle un estilo elegante al mostrar las imágenes, usaremos la librería FadeIn y FadeOut de JQuery, las cuales nos permiten agregar efectos de desvanecimiento en las imágenes.

La función “muestra” utilizará el efecto FadeIn para que cada imagen se muestre cada 250 ms, y de manera recursiva mande llamar a la función “mostrarimg”.

Para uso de la recursividad crearemos una variable con el nombre de “i” inicializándola en 0. Una vez iniciado el ciclo la variable ira aumentando de valor cada vez que se llame a “mostrarimg” esto dejará de funcionar una vez que la variable i alcance un valor fuera de la lista. Cuando la función devuelva un elemento que no existe, JQuery devolverá un objeto vacío, y deja de llamar a FadeIn.

Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut, le daremos un tiempo de 150 ms, para dar un efecto de borrado rápido. En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor.

Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera.

See the Pen
Imagenes
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Tabla de Pendientes con JS/JQuery

En esta publicación vamos a realizar una pequeño y fácil script en JavaScript que realizara el trabajo de una pequeña tabla de pendientes.

Este ejercicio es bastante útil, no necesariamente por que vayamos a incluir una tabla de pendientes en una de nuestras páginas web sino porque podemos sacarle algunas ideas para otras cosas que deseemos realizar solo basta con cambiar la idea principal y aunque no se quede guardado ya que no haremos uso de base de datos es un ejercicio que podría resolverte varias dudas con respeto a la creación de nuevos elementos hijo o su eliminación.

Pasos:

  1. En el el head le agregamos el <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> para poder hacer el query que necesitamos.
  2. Creamos un archivo html en este tendremos una entrada de tipo texto y le podremos un id = textoTarea, este input nos servirá para ingresar el texto de nuestro pendiente. Creamos un botón el cual le podremos un id = btnAniadir el cual tiene como texto Añadir, como el texto lo dice este botón contendrá el evento para añadir el pendiente o tarea.
  3. Aquí podría ser de diferentes maneras como crear la tabla completamente desde el script, pero aquí crearemos el encabezado de la tabla desde el html, creamos una tabla la cual tendrá como id= TablaPendientes.
    1. Dentro de la tabla creamos el cuerpo de la tabla mediante la etiqueta <body> y creamos la fila del encabezado con la etiqueta tr el cual tiene definido class = “FileRen”, este encabezado tendrá 3 columnas Fecha, Pendiente, Estado y no constará de ningún id.
  4. Darle diseño, le daremos un pequeño diseño a nuestra tabla para que no se vea tan feo.
  5. Ya en el script instanciamos la variable btnAniadir la cual obtendrá el elemento botón que creamos, textoPendiente que obtendrá el elemento de la entrada de tipo texto, tbody obtendrá el cuerpo de la tabla que servirá para agregarle los renglones que vamos creando, ren obtendrá los renglones y realizara un query, checa obtendrá los elementos qie tienen estado para realizar un query y una variable de tipo fecha para sacar la fecha del dia.
  6. Creamos un evento a btnAniadir en el cual cada que demos clic crearemos un TR y sus respectivos TD, el primer TD le creamos un nodo texto donde sacamos la fecha por medio de la variable fecha que creamos previamente, el segundo TD le creamos un nodo texto apartir del texto que ingresamos, y al tercer le creamos un nodo texto con la palabra “PENDIENTE” y le agregamos un atrubuto “class” de nombre “estado” para crearele un query a ese TD, los tres TD se los agregamos a el TR y este TR se los agregamos al cuerpo de la tabla tbody.
  7. En el mismo evento de btnAniadir creamos un query para la variable ren que es la que tiene todos los elementos que tienen la clase = “FilaRen” eliminar cada vez que un renglón tenga doble clic
  8. Creamos otro query con la variable checa que es la que obtiene todos los elementos que tienen la clase = “estado”, para que cada que le demos clic a la ultima celda de cada fila cambie su estado.

 

See the Pen
JzaNJX
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

CSS Media Query

¿Qué es una Media Query?

La Media Query es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una cierta condición es verdadera.

Las consultas de los medios se pueden utilizar para verificar muchas cosas, como:

  • ancho y alto de la ventana
  • ancho y alto del dispositivo
  • orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
  • resolución

El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada para computadoras de escritorio, computadoras portátiles, tabletas y teléfonos móviles (como los teléfonos iPhone y Android).

 

Sintaxis de consulta de medios

Una consulta de medios consta de un tipo de medio y puede contener una o más expresiones, que se resuelven como verdaderas o falsas.

Por ejemplo en este query el fondo de todos los h2 sera tomado solo si tiene un rango mínimo de 50rem y un máximo de 75rem en el ancho de la pantalla


@media screen and (min-width:50rem) and (max-width:75rem)
{
h2{ background-color: tomato;}
}

El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas normales en cascada.

A menos que utilice los operadores no o solo, el tipo de medio es opcional y all tipo estará implícito.

También puede tener diferentes hojas de estilo para diferentes medios.

 

 

Ejemplo sencillo: MENU RESPOSIVO

 

Tenemos un pequeño menú el cual diseñamos de la siguiente manera que en teoría es lo original


* {
box-sizing: border-box;

.nav {
overflow: hidden;
background-color: #333;
}

.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.nav a:hover {
background-color: #ddd;
color: black;
}

p{
width: 50%;
float: left;
}

Pero al meter nosotros nuestra primer quería la restricción nos dice que cuando el ancho de la pantalla este entre un mínimo de 75rem y un máximo de 120rem el fondo de la etiqueta h2 será de color #FCF7FF, y todo sigue igual en nuestro navegador

@media screen and (min-width: 75rem) and (max-width:120rem){
h2{ background-color: #FCF7FF;}
}

Pero cuando nuestra pantalla cumpla la siguiente restricción el fondo de la etiqueta h2 cambiara a  #967AA1 la barra de menú o navegador dejara de flotar y cubrirán el 100% del ancho y las etiquetas p también lo haciendo que a pesar de lo pequeño de nuestra pantalla no se pierdan los elementos del menú.


@media screen and (min-width:25rem) and (max-width:50rem){
h2{
background-color: #967AA1; }

p{
width: 100%;
float: none; }

.nav a {
float: none;
width: 100%; }
}

 

See the Pen
bZqPGV
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

JavaScript HTML DOM

El DOM de HTML (modelo de objeto de documento)

¿Qué es el DOM?

El DOM define un estándar para acceder a los documentos:

“El DOM es una plataforma y una interfaz de lenguaje neutral que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento”. 

 DOM se divide en 3 Puntos:

  • Core DOM – modelo estándar para todos los tipos de documentos
  • XML DOM – modelo estándar para documentos XML
  • HTML DOM – modelo estándar para documentos HTML

¿Qué es el DOM de HTML?

El DOM de HTML es un modelo de objeto estándar y una interfaz de programación para HTML. Se define:

  • Los elementos HTML como objetos.
  • Las propiedades de todos los elementos HTML.
  • Los métodos para acceder a todos los elementos HTML.
  • Los eventos para todos los elementos HTML.

El método getElementById

El método getElementById () devuelve el elemento que tiene el atributo ID con el valor especificado.

Este método es uno de los métodos más comunes en el DOM de HTML y se usa casi cada vez que desea manipular u obtener información de un elemento de su documento.

Devuelve nulo si no existen elementos con el ID especificado.

Una identificación debe ser única dentro de una página. Sin embargo, si existe más de un elemento con el ID especificado, el método getElementById () devuelve el primer elemento en el código fuente.

El método getElementsByClassName

El método getElementsByClassName () devuelve una colección de todos los elementos en el documento con el nombre de clase especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con un nombre de clase específico, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByName 

El método getElementsByName () devuelve una colección de todos los elementos en el documento con el nombre especificado (el valor del atributo del nombre), como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: puede usar la propiedad length del objeto NodeList para determinar el número de elementos con el nombre especificado, luego puede recorrer todos los elementos y extraer la información que desee.

El método getElementsByTagName 

El método getElementsByTagName () devuelve una colección de todos los elementos en el documento con el nombre de etiqueta especificado, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: el parámetro “*” devuelve todos los elementos del documento.

Sugerencia: Puede usar la propiedad de longitud del objeto NodeList para determinar el número de elementos con el nombre de etiqueta especificado, luego puede recorrer todos los elementos y extraer la información que desee.

La propiedad innerHTML

La forma más fácil de obtener el contenido de un elemento es mediante el uso de la propiedad innerHTML .

La propiedad innerHTML es útil para obtener o reemplazar el contenido de elementos HTML.

Veremos un ejemplo de la manipulación del DOM en HTML

En nuestro documento html tendremos dos entradas una de tipo “text” la cual tendrá un id el cual identificaremos con “entrada” y otra de tipo “button” en la cual su id será “btnElimina”.

Posteriormente tendremos una etiqueta “section” donde estarán situados nuestras cajas las cuales son simples “div” con un estilo fondo azul para ubicarlos y un contenido.

 

En la hoja de estilos editamos el estilo de los “div” a través de su clase “caja”  poniéndole un fondo azul.

En js tenemos que  declarar una variable para obtener por medio del id, el nodo de la etiqueta de entrada de tipo boton y posteriormente crearle un evento el cual se activara al momento de dar clic en el botón, en ese instante se declarara una variable “entrada” la cual obtiene por medio del id “entrada” los elementos de la etiqueta y una variable contenido para igualarla al valor de la variable entrada, y se mandara llamar la función agregaCaja.

La función agrega caja constara de declarar una variable que en este caso llamaremos divCaja la cual inicializaremos con un método para crear elemento el cual llevara el elemento a crear en este caso “div”.

Se declarara otra variable textDiv, pero esta vez crearemos un nodo de texto con el texto que nos llega por parámetro.

A la variable divCaja de añadiremos un elemento al nodo divCaja que en realidad es un “div”, y le agregamos un atributo de tipo class y su nombre de clase.

Creamos una variable padre, para obtener todos los elementos de estén que en nuestro caso es el “body”, para finalmente adherirle un hijo a padre que en este caso es la variable divCaja.

 

See the Pen
JzYqgJ
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Crea tu propio Slider para tu página web con HTML, CSS Y JS

Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.

Comencemos con una pequeña introducción de lo que es un slider.

Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.

Requisitos:

Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.

  • Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
  • Declararemos en el código CSS la apariencia que tomara el contenedor.
  • Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.

Procedimiento:

  1. Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body>  colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
  2. Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes  <img  src= dirección de imagen  id= identificador de imagen>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
</head>
<!--Código HTML-->
<body onload="javascript:Aparecer();">
.
.(imagenes)
.
</body>

 

Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.

3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS--> 
<style type="text/css">
#caja{
width:262px; 
height:192px; 
color:white; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
margin:0px auto; 
margin-top:30px;}

img{     
width:350px;    
height:200px; 
position:absolute;}
</style>
</head> 
<!--Código HTML--> 
.
.
.
</html>

Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.

Ahora estamos listos para comenzar a introducir el código javascript.

4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.

La función Aparecer llamara:

  • La función detener  la cual manejara un clearInterval(interval) para limpiar el intervalo.
  • Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS-->
.
.
. 
<!--Código Javascript--> 
 
var interval; 
var i=1; 
var ver=0; 

function Aparecer() { 
detener(); 
elige(); 
interval=setInterval(muestra, 20); } 

function muestra() { 
if(i>6) { 
   i=1; 
    Ocultar(); } 
if(ver==0) 
   document.getElementById("arbol").style.opacity=i; 
else 
   document.getElementById("nieve").style.opacity=i; 
i+=0.05; } 

function detener() { 
clearInterval(interval); } 

function elige() { 
if(ver==0) { 
document.getElementById("arbol").style.visibility="visible"; 
document.getElementById("nieve").style.visibility="hidden"; } 
else { 
document.getElementById("arbol").style.visibility="hidden"; 
document.getElementById("nieve").style.visibility="visible"; } }


</head> 
<!--Código HTML--> 
.
.
.
</html>

5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.

function Ocultar() { 
detener(); 
interval=setInterval(desvanecer,20); } 

function desvanecer() { 
if(i<=0) { 
i=0; 
if(ver==0) 
ver=1; 
else ver=0; 
elige(); 
Aparecer(); } 
if(ver==0) 
document.getElementById("arbol").style.opacity=i; 
else document.getElementById("nieve").style.opacity=i; 
i-=0.05; } 
<!--Código HTML--> 
.
.
.
</html>

6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.

De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.

Resultado:

See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Almacenar Arrays en Cookies con Javascript

Cuando un servidor web responde a una solicitud de un cliente el servidor termina la conexión que se establece entre ellos y se “olvida” de lo que esta pasando con el cliente, es por ello que se ideó la idea de almacenar en el cliente información que puede ser necesaria en caso de reestablecer la conexión con el servidor para realizar mas peticiones. Tomemos como ejemplo el inicio de sesión de un usuario en sitio web, el usuario iniciará su sesión al ingresar al sitio por primera vez, esta página pedirá recordar estas credenciales para evitar que el usuario tenga que iniciar sesión cada que se reestablece la comunicación con el servidor.

Esto es posible gracias a que el lenguaje JavaScript es capaz de escribir esta información directamente en el cliente a través de archivos de texto. Las cookies se administran de forma diferente para cada navegador, en algunos casos se crea un archivo de cookies por dominio y en algunos otros por cada usuario del equipo cliente. Esto no nos afecta en nada ya que en el lenguaje JavaScript las cookies se manejan de la misma forma, independientemente del navegador que el cliente utilice.

Desde el JavaScript las cookies se guardan la propiedad cookie del objeto document y de igual manera es desde ahí donde se recuperan las cookies almacenadas.

Cabe recordar que los datos que se almacenan dentro de las cookies se almacenan como cadena de caracteres, entonces les presento aquí una forma de almacenar datos de un arreglo dentro de una cookie:

//Teniendo un array con datos:
var ganadores = [“Luis”,120,”Ernesto”,87,”Vane”,145];
//creamos una variable que almacenara las cadenas que contienen el arreglo
var strGanadores=””;
//mediante un ciclo concatenamos los valores del arreglo a la cadena.
for(var i=0;i<ganadores.length;i++)
{
strGanadores+=ganadores[i]+”,”;  //agregamos un carácter ‘,’ (coma) como separador de los elementos en la cadena
}
//Quitamos el ultimo carácter, que es una coma.
strGanadores = strGanadores.substr(0, strGanadores.length-1);
//Generamos el tiempo de duración que tendrá la cookie
var hoy = new Date();    //Fri May 09 2014 10:43:00 GMT-0500 (Hora de verano central (México))
var unAnio  = 365*24*60*60*1000; // establecer la duración que tendra la cookie 365 dias * 24 horas *60 minutos * 60 segundos * 1000 milisegundos (1 año en milisegundos)
var duracion = hoy.getTime() + unAnio; //la suma de la fecha de hoy en ms ´un año en ms, como resultado = Fri May 09 2024 10:43:00 GMT -0500 en ms
hoy.setTime(duracion);
var expira = hoy.toUTCString();
//guardamos la cookie con los datos del arreglo y que expirara dentro de un año
document.cookie = strGanadores+”;expires=”+expira;

//Para recuperar la informacion
ganadores = document.cookie.split(“,”);  //obtenemos los elementos que se separaron por coma, retorna un arreglo
for(var i=0;i<ganadores.length; i++)
{
document.getElementById(i+1).innerHTML=ganadores[i];
}

Gracias