Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 419

Visitas el mes pasado: 557

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




14. Cookies (III)

14.3 Ejemplo de cookies

javascript

planteamiento del ejercicio

Vamos a realizar un ejercicio práctico del uso de las cookies con javascript. El ejercicio consiste en crear una página en la que se configura su estilo, y otra a la que por medio de las cookies se le aplica el mismo estilo. El usuario configurará el estilo de ambas páginas. todo ello lo haremos desde un script guardado en un archivo diferente.

La primera página será un formulario, en el que por medio de listas select, el usuario selecciona los estilos que quiere aplicar a la página, en concreto al color de fondo, estilo de la cabecera, y estilo de los párrafos. Una vez que tenemos las listas de opciones, tendremos tres botones, el primero "aceptar", para ejecutar los cambios que ha indicado el usuario, el segundo, predeterminar, pone la página con unos estilos predeterminados; y el tercero, aplicar, abre la segunda página y le aplica los mismos cambios que se han aplicado a la primera.

La segunda página es una página de texto normal, en la que se aplican los mismos cambios que en la primera página. La única particularidad es que tiene un boton de "configurar" que enlaza con la primera página, en donde podremos cambiar su estilo.

En ambas páginas, al volver a abrirlas, se deben aplicar automáticamente los mismos estilos que tenían cuando se cerraron por última vez. En todo caso, al abrir la segunda página, deben aplicarsele los mismos estilos que en la primera.

El archivo de javascript enlaza con las dos páginas, de manera que en ambas se cargan las cookies al abrirlas, pero en la primera se enlazan las funciones para poder cambiar los estilos.


Códigos

Este es el código de la primera página, la del formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>cookies</title> 
<script type="text/javascript" src="ejemplo.js"></script>
</head>
<body>
<h1>Página de configuración</h1>
<form action="#" name="datos">
<p>Fondo: </p>
<p>...Color de fondo: 
<select name="colorFondo">
      <option value="aqua">Azul claro</option>
      <option value="white">Blanco</option>
      <option value="silver">Gris</option>
      <option value="#b88f67">Ocre</option>
      <option value="#b5ef65">Verde claro</option>
      <option value="yellow">Amarillo</option>
</select> </p>
<p>Cabecera: </p>
<p>... Color: 
<select name="colorH">
      <option value="blue">Azul</option>
      <option value="grey">Gris</option>
      <option value="maroon">Marron</option>
      <option value="black">Negro</option>
      <option value="red">Rojo</option>
      <option value="green">Verde</option>
      <option value="purple">Purpura</option>
</select>
... Tipo de letra: 
<select name="fuenteH">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Times New Roman">Times New Roman</option>
      <option value="Verdana">Verdana</option>
      <option value="Courier new">Courier new</option>
</select>
 ... Alineación: 
<select name="alinearH">
      <option value="left">Izquierda</option>
      <option value="right">Derecha</option>
      <option value="Center">Centrada</option>
</select>
 ... Tamaño: 
<select name="tamanoH">
      <option value="1.5em">Normal</option>
      <option value="2em">Grande</option>
      <option value="3em">Muy grande</option>
</select>
</p>
<p>Párrafos</p>
<p>... Color: 
<select name="colorP">
      <option value="blue">Azul</option>
      <option value="grey">Gris</option>
      <option value="maroon">Marron</option>
      <option value="black">Negro</option>
      <option value="red">Rojo</option>
      <option value="green">Verde</option>
      <option value="purple">Purpura</option>
</select>
... Tipo de letra: 
<select name="fuenteP">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Times New Roman">Times New Roman</option>
      <option value="Verdana">Verdana</option>
      <option value="Courier new">Courier new</option>
</select>
 ... Alineación: 
<select name="alinearP">
      <option value="left">Izquierda</option>
      <option value="right">Derecha</option>
      <option value="center">Centrada</option>
      <option value="justify">Justificada</option>
</select>
 ... Tamaño: 
<select name="tamanoP">
      <option value="0.8em">Pequeño</option>
      <option value="1em">Normal</option>
      <option value="1.2em">Grande</option>
</select>
</p>
<br />
<br />
<p>Estilo predeterminado: Color de fondo: blanco; 
Cabecera y párrafos: Color negro, tipo de letra Times New Roman, 
tamaño normal, alineación izquierda.</p>
<input type="button" value="Aceptar" onclick="aceptar()" /> ...
<input type="button" value="Predeterminar" onclick="predeterminar()" /> ...
<input type="button" value="Aplicar" onclick="location='ejemplo_2.html'" /> ...
</p>
</form>
</body>
</html>

La segunda página tiene el siguiente código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Página de prueba de cookies</title> 
<script type="text/javascript" src="ejemplo.js"></script>
</head>
<body>
<h1>Capítulo Primero</h1>
<h1>Que trata de la condición y ejercicio del famoso hidalgo D. Quijote de la Mancha</h1>
<input type="button" onclick="location='ejemplo_1.html'" value="Ver página de configuración." />
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho 
tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, 
rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, 
salpicón las más noches, duelos y quebrantos los sábados, lentejas los 
viernes, algún palomino de añadidura los domingos, consumían las tres 
partes de su hacienda. El resto della concluían sayo de velarte, calzas 
de velludo para las fiestas con sus pantuflos de lo mismo, los días de 
entre semana se honraba con su vellori de lo más fino. Tenía en su casa 
una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los 
veinte, y un mozo de campo y plaza, que así ensillaba el rocín 
como tomaba la podadera. </p>
</body>
</html>

Este es el código del archivo javascript, el cual viene con comentarios para aclarar qué es lo que hace cada función.

//Fecha de caducidad de las cookies
caduca = "31 Dec 2020 23:59:59 GMT";
//lista de elementos afectados
misCookies=["colorFondo","colorH","fuenteH","alinearH","tamanoH","colorP","fuenteP","alinearP","tamanoP"];
//al cargar la página recupera la última configuración
window.onload =  function() {
for (n=0;n<misCookies.length;n++) {
    leer(misCookies[n]);
    miNombre=misCookies[n];
    escribir();
    }
}	
//guardar cookies	
function guardar(Nombre,Valor,Fecha){
         document.cookie=Nombre+"="+Valor+";expires="+Fecha;
         }
//leer cookies
function leer(nombre) {
         lista = document.cookie.split(";")
         for (i in lista) {
             busca = lista[i].search(nombre)
             if (busca > -1) {micookie=lista[i]}
             }
         igual = micookie.indexOf("=")
         valor = micookie.substring(igual+1)
         return valor
         }
//Guardar, leer y configurar estilo para una nueva cookie
function ver() {
         guardar(miNombre,miValor,caduca)
         leer(miNombre)
         escribir()
         }
//configurar estilo de la cookie		 
function escribir() {			 
         switch (miNombre) {
         case "colorFondo": //cambiar color de fondo
         document.body.style.backgroundColor = valor;
         break;
         case "colorH": //cambiar color cabecera
         cabeceras = document.getElementsByTagName("h1");
         for (i=0;i<cabeceras.length;i++) {
             cabeceras[i].style.color = valor
             }
         break;
         case "fuenteH": //cambiar fuente cabecera
         cabeceras = document.getElementsByTagName("h1");
         for (i=0;i<cabeceras.length;i++) {
             cabeceras[i].style.fontFamily = valor
             }
         break;
         case "alinearH": //cambiar alineación cabecera
         cabeceras = document.getElementsByTagName("h1");
         for (i=0;i<cabeceras.length;i++) {
             cabeceras[i].style.textAlign = valor
             }
         break;
         case "tamanoH": //cambiar tamaño cabecera
         cabeceras = document.getElementsByTagName("h1");
         for (i=0;i<cabeceras.length;i++) {
             cabeceras[i].style.fontSize = valor
             }
         break;
         case "colorP": //cambiar color parrafos
         parrafos = document.getElementsByTagName("p");
         for (i=0;i<parrafos.length;i++) {
             parrafos[i].style.color = valor
             }
         break;
         case "fuenteP": //cambiar fuente parrafos
         parrafos = document.getElementsByTagName("p");
         for (i=0;i<parrafos.length;i++) {
              parrafos[i].style.fontFamily = valor
              }
         break;
         case "alinearP": //cambiar alineación parrafos
         parrafos = document.getElementsByTagName("p");
         for (i=0;i<parrafos.length;i++) {
             parrafos[i].style.textAlign = valor
             }
         break;
         case "tamanoP": //Cambiar tamaño párrafos
         parrafos = document.getElementsByTagName("p");
         for (i=0;i<parrafos.length;i++) {
             parrafos[i].style.fontSize = valor
             }
         break;
         }
         }	
//Cambiar el estilo al indicado en el formulario 		 
function aceptar() {
         for (i in misCookies) {
            lista = "document.datos."+misCookies[i]
            lista = eval(lista)
            miNombre = lista.name
            opciones = lista.options
            valorSelec = lista.selectedIndex
            miValor = opciones[valorSelec].value
            ver()	
            } 
        }
//Volver al estilo predeterminado.			
function predeterminar() { 
         valores = [1,3,2,0,0,3,2,0,1]
         for (i in misCookies) {
             lista = "document.datos."+misCookies[i]
             lista = eval(lista)
             miNombre = lista.name
             opciones = lista.options
             miValor = opciones[valores[i]].value
             ver()
             }
         }			 

A la primera página la hemos llamado ejemplo_1.html, a la segunda ejemplo_2.html y al archivo javascript ejemplo.js los tres archivos deben guardarse en la misma carpeta, para que funcionen los enlaces entre ellos.


Cambios que podemos hacer.

En el primer archivo podemos variar las listas de opciones añadiendo, quitando o variando el valor de las opciones, y el código javascript seguirá funcionando igual.

Podemos cambiar la segunda página, y poner otra totalmente distinta en la que haya cabecera con etiqueta h1 y párrafos con etiqueta p y los cambios se aplicarán siempre que mantengamos el enlace al archivo javascript en la cabecera del documento.

De igual modo podemos añadir más páginas a las que se apliquen los estilos de la página de configuración, con enlazarlas al archivo javascript en la cabecera de la página.

Ver el ejemplo funcionando

Para ver cómo funciona este ejemplo pulsa en los siguentes enlaces:

Página de configuración


Página de texto

Almacenamiento Local en HTML5

El nuevo HTML5 resuelve el problema del almacenamiento local de datos en el ordenador del usuario de una manera más eficaz, dejando la forma de almacenar datos mediante cookies un tanto obsoleta. Para ver más sobre esto nos remitimos a la página del manual de HTML5 Almacenamiento local; donde se explica el funcionamiento del almacenamiento local con HTML5.





Aunque el manual de javascript está prácticamente acabado, ponemos un último tema en donde hacemos un resumen de lo visto en el manual. Este resumen puede servirnos de conulta o de recordatorio para el trabajo en la práctica.

Resumen Javascript



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com