Programación en JavaScript

Gonzalo Álvarez Marañón
Instituto de Física Aplicada, CSIC
www.iec.csic.es/criptonomicon

Resumen

JavaScript es la forma más sencilla de crear una animación y hacer operaciones básicas en una página web normal. En este curso se aprenderá cómo crear elementos que mejoran la interacción con el cliente; elementos que mejoran la visualización o la imagen de una página; cálculos matemáticos sencillos sobre variables para cálculo de presupuestos o conversiones automáticas; menús con una presentación de mayor nivel, manejando imágenes de forma dinámica; cookies y otros interesantes efectos.

1. Introducción

JavaScript es un lenguaje de programación desarrollado por Netscape Corporation para su navegador Netscape Navigator 2.0, cuya finalidad es permitir la ejecución de código dentro de las páginas en HTML. Microsoft posee su propia versión para su navegador Internet Explorer, llamada JScript, pero que, salvo en algunos detalles generalmente no demasiado importantes, resulta compatible con los navegadores de Netscape. Gracias a los programas (llamados guiones) escritos en este lenguaje y embebidos en las páginas HTML, se pueden conseguir interesantes efectos en las páginas web, comprobar la validez de la entrada de formularios, abrir y cerrar ventanas, cambiar dinámicamente el aspecto y los contenidos de una página, realizar cálculos matemáticos sencillos y mucho más.

En este curso se pretende ofrecer una introducción al lenguaje JavaScript, que dote a sus lectores del conocimiento y herramientas necesarios para empezar inmediatamente a utilizar con eficacia guiones en sus páginas y mejorar así su contenido. Se ofrecerán ejemplos continuamente, junto con su código fuente, que puede ser tomado como punto de arranque para desarrollar nuevas aplicaciones. Si desea obtener una guía completa sobre este lenguaje, se recomienda al lector acudir a la página de Netscape:

developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm

Las personas que ya estén familiarizadas con HTML y especialmente con los lenguajes de programación C/C++ o Java, no encontrarán ninguna dificultad en seguir estas lecciones, ya que JavaScript les resultará muy familiar. Se trata de un lenguaje interpretado (no compilado) por el navegador del usuario, lo que significa que el código se va ejecutando a medida que se carga la página web. Está basado en objetos, aunque no emplea clases ni herencia, típicas de la Programación Orientada a Objetos. En la Fig. 1 se muestra cuáles son los objetos que incorpora JavaScript.

Fig. 1. Jerarquía de objetos en JavaScript.

Teniendo en cuenta que el código JavaScript se ejecuta automáticamente en el ordenador del usuario cuando éste visita una página web, es necesario imponerle por diseño una serie de limitaciones, cuyo cometido principal es prevenir que se altere el sistema de ficheros del cliente, por lo que no puede leer, escribir, crear, borrar o listar ficheros (excepto cookies, de las que se hablará en la sección 8). Carece además de primitivas de red, de manera que no puede establecer una conexión directa con otras máquinas (excepto enviar correo).

El presente curso es una versión en Word de las páginas que pueden encontrarse en:

www.iec.csic.es/criptonomicon/javascript

2. Cómo añadir JavaScript a una página

Existen diversos métodos para añadir guiones y funciones en JavaScript a una página web convencional. En este curso se describirán las tres siguientes:

2.1 Mediante la etiqueta <SCRIPT>

Constituye la forma estándar de incluir funciones escritas en JavaScript:

<SCRIPT LANGUAGE="JavaScript">

<!--

Aquí iría incluido el código en JavaScript

//-->

</SCRIPT>

Cuando el navegador va interpretando la página en HTML, al llegar a esta etiqueta sabe que lo que está encerrado entre <SCRIPT> y </SCRIPT> constituye código JavaScript y lo ejecutará como corresponda. Cuando se crean funciones y variables que se utilizan en varios puntos de la página web, se suelen definir al principio de la página, entre las etiquetas <HEAD>.

2.2 Como un URL

También se pueden incluir sentencias de JavaScript, como argumentos de la etiqueta HREF, que serán evaluadas dinámicamente cuando el usuario pinche sobre un enlace o simplemente pase el ratón sobre él.
2.3 En respuesta a eventos

Los eventos disparan acciones programadas en JavaScript dentro de la página HTML como resultado de alguna acción del usuario, como pulsar un botón o deslizar el ratón sobre una imagen.

Más adelante, a medida que se vaya avanzando, se desarrollarán varios ejemplos de los tres métodos citados.

3. Abriendo y cerrando ventanas

Todo programador que se precie, cuando se adentra en un nuevo lenguaje, escribe siempre un primer programa que produce una salida con un saludo al mundo. En JavaScript existen varias formas de hacerlo, con diversos niveles de sofisticación. El más sencillo consiste en crear una ventana de alerta con el mensaje deseado:

alert( "¡Hola, mundo!" );

Si esta sentencia se incluye entre las etiquetas <SCRIPT> en cualquier lugar de una página web, se presentará una ventana con el mensaje "¡Hola, mundo!" (Fig. 2). Pulsando en el botón de Aceptar, se cerrará, sin afectar al contenido del resto de la página.

Fig. 2. Ventana de alerta.

También puede añadirse como atributo de la etiqueta HREF, de manera que aparezca la ventana al seguir un enlace:

Quiero ver la <a href="javascript:alert('Hola, mundo');">ventana</a>.

Por último, se puede hacer que al pulsar un botón presente en la página web (es decir, en respuesta al evento onClick del botón), aparezca igualmente la consabida ventana:

<input type="button" value="Mostrar ventana" onClick="alert('¡Hola, mundo!');">

Además de las ventanas de alerta, JavaScript proporciona otros dos tipos más, que permiten interactuar con el visitante:

nombre = prompt('Introduce tu nombre', 'Desconocido');

Fig. 3. Ventana para introducción de datos.

if (confirm('¿Desea continuar?'))

// se ejecuta una acción

else

// se ejecuta otra

Fig. 4. Ventana de confirmación.

También es posible abrir nuevas ventanas del navegador con el método open del objeto window:

nuevaVentana=window.open("ventananav.html");

donde nuevaVentana es el identificador de un nuevo objeto window que identifica a la ventana recién creada, en la que se habrá cargado la página ventananav.html. Algunos de los parámetros que se pueden controlar al abrir la nueva ventana, cuyos posibles valores pueden ser yes o no, son:

A su vez, las ventanas se pueden cerrar utilizando cualquiera de los siguientes tres métodos:

window.close()

self.close()

close()

Eso sí, el último de ellos no debe usarse en un gestor de eventos. Así, por ejemplo, para cerrar la ventana anterior, podría hacerse:

nuevaVentana.close();

4. Escribir en la ventana actual

Ahora que se ha visto cómo abrir y cerrar ventanas, se procederá a explicar cómo escribir texto de manera dinámica dentro de una página web.

Como ya se dijo, JavaScript es un lenguaje basado en objetos, siendo el objeto window, visto ya en la sección anterior, el que se encuentra a la raíz de todos ellos (Fig. 1). Por debajo de él se encuentran todos los demás, como el objeto document, que contiene información sobre el documento actual y proporciona los métodos o funciones que permiten mostrar una salida al usuario. En concreto, el método write escribe una o más expresiones HTML en un documento en la ventana especificada.

Por ejemplo, para escribir el mensaje "¡Hola, mundo!" dentro de la página web bastaría con utilizar la siguiente línea de código:

document.write( "¡Hola, mundo!" );

en el lugar en el que se quisiera que apareciera el mensaje (por supuesto, encerrada entre las etiquetas <SRIPT>, como ya se explicó).

Evidentemente, escribir directamente el texto de esta forma no presenta ninguna ventaja respecto a utilizar una línea convencional en HTML. La verdadera utilidad radica en poder utilizar variables y funciones de manera que el texto cambie dinámicamente. A continuación se verán dos ejemplos: cómo incluir información sobre el navegador del usuario y cómo incluir la fecha.

4.1 Cómo escribir datos del usuario

El objeto navigator posee propiedades o variables para almacenar el nombre y versión del navegador usado, los tipos MIME soportados por el cliente y los plug-in instalados en el cliente. La propiedad appName contiene el nombre del navegador, mientras que la propiedad appVersion almacena información sobre su versión. Usando estas propiedades se le puede mandar al usuario un mensaje indicándole el navegador que usa y su versión:

document.write( "Utilizas el navegador " + navigator.appName + ", versión " + navigator.appVersion + "." );

La utilidad de estas funciones radica sobre todo en la posibilidad de mostrar la página de una manera u otra en función del tipo y versión del navegador del usuario.

4.2 Cómo escribir la fecha actual

Es muy común encontrarse la fecha del día en páginas web de periódicos y otros servicios de información. En lugar de tener que escribirla y cambiarla manualmente cada día a las 00.00, resulta mucho más cómodo y eficiente escribir un sencillo guión que se encargue automáticamente de la tarea.

Para gestionar fechas y horas se utiliza el objeto Date. Cuando no se le proporcionan argumentos a su constructor, éste devuelve la fecha y hora en el momento en que se le invocó:

ahora = new Date();

almacenándose la fecha y hora actuales en ahora. Se puede acceder a los distintos componentes de la fecha y hora por medio de métodos como los siguientes:

Utilizando estos métodos, se puede construir una función que devuelva la fecha actual:

function fechahoy() {

var diasemana = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');

var nombremes = new Array('enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre');

var ahora;

var fecha = new Date();

var anio = fecha.getYear();

var mes = fecha.getMonth();

var dia = fecha.getDay();

var num = fecha.getDate();

ahora = diasemana[dia] + ", " + num + " " + nombremes[mes] + " " + anio;

return ahora;

}

Esta función devuelve una cadena con el día de la semana, seguido del día del mes, el mes y el año. La función se puede invocar en cualquier lugar de la página web y presentar su salida utilizando el método write del objeto document:

document.write( "Hoy es " + fechahoy() );

5. Cómo validar formularios

Los formularios representan una forma rápida y eficaz de enviar información desde el ordenador del usuario hasta el servidor web. Generalmente, constan de varios campos de texto, botones de selección y listas desplegables, que el usuario rellena convenientemente y transmite al servidor pulsando finalmente en un botón de envío. A menudo, muchos de los campos que el usuario debe completar obedecen a un formato determinado, por lo que conviene que el usuario los rellene correctamente para evitar errores al procesar en el servidor los datos recibidos. JavaScript constituye una manera muy conveniente de trasladar esta labor de validación de la información al ordenador del cliente, descargando así al servidor de esta tarea.

Fig. 5. Formulario usando etiquetas HTML.

En JavaScript, los formularios son objetos form, que dependen a su vez del objeto document. Cuando se crea el formulario utilizando la etiqueta <FORM> de HTML, conviene darle un nombre para poder referenciarlo cómodamente más adelante desde funciones de JavaScript. Asimismo, todos los elementos del formulario, botones, cuadros de texto, listas, etc., deberían ser nombrados por la misma razón. JavaScript se añade a los elementos convencionales del formulario en la forma de gestores de eventos.

En primer lugar, se crea el formulario de manera normal, usando las etiquetas HTML convencionales. En la Fig. 5 aparece el formulario cuyo código se lista a continuación:

<form method = "POST" name = "registro" onSubmit = "return validar(this)" action = "formularios.asp">

Nombre: <input type="text" name="nombre" size="20"><br>

Edad: <input type="text" name="edad" size="2"><br>

Dirección de correo: <input type="text" name="correo" size="20"><br>

<input type="submit" value="Enviar datos" name="enviar">

</form>

que consta de tres campos de entrada y un botón para enviar los datos. Se ha añadido el evento onSubmit, que se produce cuando el usuario pulsa el botón Enviar datos, de manera que se invoca a la función validar antes de transmitir nada. El argumento que toma es this, es decir, el propio formulario. A continuación se presenta el código de dicha función:

function validar(formulario) {

if (formulario.nombre.value.length < 4) {

alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");

formulario.nombre.focus();

return (false);

}

var checkOK = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚabcdefghijklmnñopqrstuvwxyzáéíóú ";

var checkStr = formulario.nombre.value;

var allValid = true;

for (i = 0; i < checkStr.length; i++) {

ch = checkStr.charAt(i);

for (j = 0; j < checkOK.length; j++)

if (ch == checkOK.charAt(j))

break;

if (j == checkOK.length) {

allValid = false;

break;

}

}

if (!allValid) {

alert("Escriba sólo letras en el campo \"Nombre\".");

formulario.nombre.focus();

return (false);

}

var checkOK = "0123456789";

var checkStr = formulario.edad.value;

var allValid = true;

var decPoints = 0;

var allNum = "";

for (i = 0; i < checkStr.length; i++) {

ch = checkStr.charAt(i);

for (j = 0; j < checkOK.length; j++)

if (ch == checkOK.charAt(j))

break;

if (j == checkOK.length) {

allValid = false;

break;

}

allNum += ch;

}

if (!allValid) {

alert("Escriba sólo dígitos en el campo \"Edad\".");

formulario.edad.focus();

return (false);

}

var chkVal = allNum;

var prsVal = parseInt(allNum);

if (chkVal != "" && !(prsVal >= "18" && prsVal <= "30")) {

alert("Escriba un valor mayor o igual que 18 y menor o igual que 30 en el campo \"Edad\".");

formulario.edad.focus();

return (false);

}

if ((formulario.correo.value.indexOf ('@', 0) == -1)||(formulario.correo.value.length < 5)) {

alert("Escriba una dirección de correo válida en el campo \"Dirección de correo\".");

return (false);

}

return (true);

}

Esta función realiza las siguientes comprobaciones:

  1. La longitud del nombre es mayor de cuatro caracteres.
  2. El nombre sólo contiene caracteres del alfabeto español, no contiene números ni caracteres no alfanuméricos.
  3. La edad sólo contiene números.
  4. El valor de la edad está comprendido entre 18 y 30.
  5. La dirección de correo incluye una arroba y su longitud es superior a cinco caracteres.

6. Cómo cambiar las imágenes dinámicamente

Una de las aplicaciones más extendidas y vistosas de JavaScript dentro de una página web es el famoso efecto de cambiar la imagen cuando el ratón se desliza sobre ella, por ejemplo en los menús de opciones. Para aprender a realizar este efecto es necesario comprender antes cómo se acceden y manipulan las imágenes en JavaScript. Cada imagen insertada con la etiqueta <IMG> en una página se corresponde con un objeto Image. Además, se crea un array llamado images que contiene secuencialmente, según el orden de inserción en la página, todas las imágenes de ésta. Así pues, una primera forma de referenciar las imágenes en una página sería mediante este array:

document.images[0] //para la primera imagen del documento

document.images[1] //para la segunda imagen del documento

etc.

Ahora bien, si a la hora de insertar una imagen en una página se le da un nombre, éste permitirá referenciarla más cómodamente por este nombre. Por ejemplo, la imagen

<img name="castillo" src="fotocastillo.gif" width="110" height="80">

puede referenciarse desde una sentencia de JavaScript como:

document.images["castillo"]

Cuando se generan los efectos de cambio de imagen, deben cargarse además de las imágenes que ya están en la página, las que las sustituirán cuando el ratón pase sobre ellas. Para ello se utiliza lo que se llama precarga de imágenes: cargar una imagen en el caché de manera que cuando sea necesaria se visualice inmediatamente en la página. La precarga se realiza antes de cargar los contenidos del documento, entre las etiquetas <HEAD>:

boton1_on = new Image()

boton1_on.src = "boton1b.gif"

boton1_off = new Image()

boton1_off.src = "boton1.gif"

El constructor del objeto Image crea primero una instancia de la imagen boton1_on, a la que posteriormente le asigna la foto del fichero boton1b.gif. De esta manera, ya ha quedado cargada la imagen en memoria para ser visualizada instantáneamente en cuanto se le invoque. Lo mismo ocurre para la segunda imagen.

Ya sólo queda cambiar la imagen cuando el ratón se deslice sobre ella. Para lograr este efecto se utilizan los eventos onMouseover y onMouseout. El primero se produce cuando el ratón pasa sobre un objeto, mientras que el segundo tiene lugar cuando el ratón abandona el área del objeto:

<a href = "presentacion.html" onmouseover =

"document.images['boton1'].src =

boton1_on.src" onmouseout =

"document.images['boton1'].src =

boton1_off.src"><img src = "boton1.gif" name =

"boton1"></a>

Se están definiendo los gestores de ambos eventos, de manera que cuando el ratón pase sobre la imagen boton1.gif, que a su vez enlaza con la página web presentacion.html, se cargue la imagen boton1_on, que como se definió en la precarga, se corresponde con el fichero boton1b.gif. Cuando el ratón salga del área ocupada por la imagen, entonces se cargará la imagen boton1_off, que se corresponde con el fichero boton1.gif.

Como resultaría muy farragoso tener que escribir todas esas sentencias cada vez para cada hipervínculo, pueden crearse algunas funciones que simplifiquen el trabajo:

<html>

<head>

<title>Cambio dinámico de imágenes</title>

<script language="Javascript">

<!--

// Precarga de imágenes

if (document.images) {

var boton1_off = new Image();

boton1_off.src = "imagenes/boton1.gif";

var boton1_on = new Image();

boton1_on.src = "imagenes/boton1b.gif";

}

// Carga de imagen cuando el ratón pasa por encima

function entra(boton) {

if (document.images) {

if (boton == 'boton1') {

document.images[boton].src =

boton1_on.src;

}

}

}

// Carga de imagen cuando el ratón abandona el área de la imagen

function sale(boton) {

if (document.images) {

if (boton == 'boton1') {

document.images[boton].src =

boton1_off.src;

}

}

}

//-->

</script>

</head>

<body>

<p><a href = "suscripcion.html" onMouseOver =

"entra('boton1');" onMouseOut =

"sale('boton1');"><img

src="imagenes/boton1.gif" alt="Presentación" border="0" name="boton1" WIDTH="150"

HEIGHT="30"></a> </p>

</body>

</html>

Este proceso puede repetirse para tantas imágenes como aparezcan en la página web. En la figura 6 se muestra el resultado.

Fig. 6. a) Imagen por defecto. b) Imagen cuando el ratón pasa por encima.

7. Cálculos matemáticos sencillos

JavaScript incorpora el objeto Math, que proporciona propiedades y métodos para realizar funciones matemáticas y operar con constantes numéricas, como funciones trigonométricas, logaritmos, potencias, etc. En la siguiente tabla se listan los métodos proporcionados por Math:

Método

Descripción

abs

Valor absoluto

sin, cos, tan

Funciones trigonométricas estándar (argumento en radianes)

acos, asin, atan

Funciones trigonométricas inversas (devuelven valor en radianes)

exp, log

Potencia y logaritmo natural, base e

ceil

Devuelve el menor entero mayor o igual que el argumento

floor

Devuelve el mayor entero menor o igual que el argumento

min, max

Devuelven el menor o mayor (respectivamente) de dos argumentos

pow

Potencia (el primer argumento es la base; el segundo, el exponente)

round

Redondea el argumento al entero más próximo

sqrt

Raíz cuadrada

Tabla 1. Métodos del objeto Math.

Por ejemplo, el seno y coseno de 3p/4 se calcularían como:

Math.sin(3*Math.PI/4);

Math.cos(3*Math.PI/4);

Cuando se van a utilizar varias funciones o constantes matemáticas, se puede evitar el tener que poner cada vez Math. de la siguiente manera:

with (Math) {

a = PI * r*r;

y = r*sin(theta);

x = r*cos(theta)

}

A continuación se presenta una sencilla calculadora del Euro (Fig. 7), capaz de convertir cantidades en pesetas a euros y viceversa:

<html>

<head>

<title>La calculadora del Euro</title>

<script language="Javascript">

<!--

function convertir() {

if ( document.calc.conv[1].checked )

factor = 166.386;

else

factor = 0.00601012;

document.calc.resultado.value=document.calc.cantidad.value*factor;

}

//-->

</script>

</head>

<body>

<h1>La calculadora del Euro</h1>

<form name="calc">

<p><input type="radio" value="euros" checked name="conv">Convertir pesetas en euros<br>

<input type="radio" name="conv" value="pesetas">Convertir euros en pesetas</p>

<p>Valor a convertir: <input type="text" name="cantidad" size="15"><input type="button"

value="Convertir" name="B1" onClick="convertir()"></p>

<p>Resultado: <input type="text" name="resultado" size="15"></p>

</form>

</body>

</html>

Fig. 7. Calculadora para convertir pesetas en euros y viceversa.

Este ejemplo podría combinarse con el de validación de entrada de datos en formularios (v. Sec. 5), para asegurarse de que se introducen valores numéricos válidos en las casillas.

8. Cookies

Las cookies constituyen una potente herramienta empleada por los servidores web para almacenar y recuperar información acerca de sus visitantes. Dado que el Protocolo de Transferencia de HiperTexto (HTTP) es un protocolo sin estados (no almacena el estado de la sesión entre peticiones sucesivas), las cookies proporcionan una manera conveniente de conservar información entre peticiones del cliente, extendiendo significativamente las capacidades de las aplicaciones cliente/servidor basadas en tecnologías web. Mediante el uso de cookies se permite al servidor web recordar algunos datos concernientes al usuario, como sus preferencias para la visualización de las páginas de ese servidor, nombre y contraseña, productos que más le interesan, etc.

Una cookie no es más que un fichero de texto que algunos servidores piden al navegador que escriba en el disco duro del ordenador del usuario, con información acerca de lo que ha estado haciendo por sus páginas o datos que previamente le ha suministrado.

Entre las mayores ventajas de las cookies se cuenta el hecho de ser almacenadas en el disco duro del usuario, liberando así al servidor de una importante sobrecarga. Es el propio cliente el que almacena la información y quien se la devolverá posteriormente al servidor cuando éste la solicite. Además, las cookies poseen una fecha de caducidad, que puede oscilar desde el tiempo que dure la sesión con el navegador hasta una fecha futura previamente especificada, a partir de la cual son eliminadas.

Las cookies son fácilmente accesibles a través de la propiedad cookie del objeto document, tanto para leerlas como para escribirlas. La propiedad document.cookie devuelve una cadena conteniendo las cookies existentes en el ordenador. Manipulando esta cadena con las funciones de manejo de cadenas disponibles en JavaScript es posible localizar la información a extraer, en caso de lectura, o a escribir, en caso de enviar una cookie.

Cada cookie representa una pequeña porción de información con una fecha de caducidad opcional, que se añade al fichero o directorio de cookies con el siguiente formato:

nombre = valor; expires = fechaCaducidad;

Donde nombre es el nombre del dato almacenado, y valor representa su valor. La fecha de caducidad es un parámetro opcional que indica el tiempo que se conservará la cookie. Si no se especifica fechaCaducidad, la cookie caduca cuando el usuario sale de la sesión en curso con el navegador. Por consiguiente, el navegador conservará y recuperará la cookie sólo si su fecha de caducidad aún no ha expirado.

La forma más sencilla de enviar una cookie es mediante la siguiente instrucción en JavaScript:

document.cookie='ejemplo=cookie';

Ahora bien, para simplificar el proceso de escritura, lectura y borrado de cookies, lo mejor es diseñar unas sencillas funciones en JavaScript:

// Esta es la función que usa Heinle para recuperar una cookie

// name - nombre de la cookie deseada

// devuelve un string conteniendo el valor de la cookie especificada o null si la cookie no existe

function getCookie(name){

var cname = name + "=";

var dc = document.cookie;

if (dc.length > 0) {

begin = dc.indexOf(cname);

if (begin != -1) {

begin += cname.length;

end = dc.indexOf(";", begin);

if (end == -1) end = dc.length;

return unescape(dc.substring(begin, end));

}

}

return null;

}

// Esta es una adaptación de la función de Dorcht para colar una cookie

// name - nombre de la cookie

// value - valor de la cookie

// [expires] - fecha de caducidad de la cookie (por defecto, el final de la sesión)

// [path] - camino para el cual la cookie es válida (por defecto, el camino del documento que hace la llamada)

// [domain] - dominio para el cual la cookie es válida (por defecto, el dominio del documento que hace la llamada)

// [secure] - valor booleano que indica si la trasnmisión de la cookie requiere una transmisión segura

// al especificar el valor null, el argumento tomará su valor por defecto

function setCookie(name, value, expires, path, domain, secure) {

document.cookie = name + "=" + escape(value) +

((expires == null) ? "" : "; expires=" + expires.toGMTString()) +

((path == null) ? "" : "; path=" + path) +

((domain == null) ? "" : "; domain=" + domain) +

((secure == null) ? "" : "; secure");

}

// Esta es una adaptación de la función de Dorcht para borrar una cookie

// name - nombre de la cookie

// [path] - camino de la cookie (debe ser el mismo camino que el especificado al crear la cookie)

// [domain] - dominio de la cookie (debe ser el mismo dominio que el especificado al crear la cookie)

// se considera el camino y dominio por defecto si se especifica null o no se proporcionan argumentos

function delCookie (name,path,domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path == null) ? "" : "; path=" + path) +

((domain == null) ? "" : "; domain=" + domain) +

"; expires=Thu, 01-Jan-70 00:00:01 GMT";

}

}

Existen unas páginas web de ejemplos en las que se puede ver cómo se utilizan estas funciones en aplicaciones reales escritas en JavaScript:

www.iec.csic.es/criptonomicon/cookies/ejemplos.html

En la siguiente página web se encuentra una aplicación en JavaScript que permite hornear cookies de manera instantánea, ya que crea automáticamente el código JavaScript para leer, escribir o borrar cookies, listo para copiar y pegar donde haga falta (Fig. 8):

www.iec.csic.es /criptonomicon/cookies/horno.html

Fig. 8. Horno Express para crear automáticamente código para cookies.

9. La barra de estado

La barra de estado que aparece en la parte inferior de la ventana del navegador puede contener mensajes informativos configurados por el diseñador, como por ejemplo una breve descripción de lo que puede encontrarse si se sigue un enlace. Existen dos propiedades del objeto window para manipular el valor de la barra de estado:

En ambos casos debe devolverse true si se desea establecer la propiedad defaultStatus o status en los gestores de eventos onMouseOut u onMouseOver.

La propiedad defaultStatus suele establecerse al cargar la página, utilizando el evento onLoad en la etiqueta <BODY>, que se produce cuando comienza a cargarse el documento. Por otro lado, la propiedad status se suele establecer en los enlaces, utilizando el evento onMouseOver:

<html>

<head>

<title>La barra de estado</title>

</head>

<body onLoad = "defaultStatus='Página con información sobre la barra de estado'; return true;">

<h1>La barra de estado</h1>

<p>Esta página contiene información sobre la barra de estado. Puede visitarse esta otra página para <a href = "escribir.html" onMouseover = "status = 'Más información'; return true;">más información</a>.</p>

</body>

</html>

En la Fig. 9 se representa el efecto de estas funciones.

Fig. 9. Mensajes en la barra de estado del navegador.


[Empresas] [Empleo] [Biblioteca] [Estadísticas] [Derechos] [Padres]
[Prensa] [Álbum de Fotos] [Rincón del Usuario] [Administración en Internet]

Háganos llegar sus opiniones y sugerencias sobre el Web A.U.I.
Su colaboración nos ayuda a mejorar...

Copyright © Asociación de Usuarios de Internet (http://www.aui.es/Index.htm)
Avenida Alberto Alcocer 46B, 28016 Madrid (Spain)
Telf: 902 - 21.03.23 / Fax: 91 - 344.14.25 / E-mail: infoaui@aui.es