http://www.ulpgc.es/otros/tutoriales/JavaScript/index.

htm

Tutorial de JavaScript
1. Introduccin al JavaScript
1.1. Qu es JavaScript? 1.2. Para qu sirve? 1.3. Diferencias con Java 1.4. Utilizacin de JavaScript en un documento HTML 1.5. Las versiones en JavaScript 1.6. Los Comentarios en JavaScript 1.7. Identificadores y Palabras reservadas 1.8. Ejemplos sencillos

2. Los tipos de datos en JavaScript

2.1. Tipos numricos. 2.2. Las strings. 2.3. Tipo Booleano. 2.4. El valor nulo. 2.5. Los arrays. 2.6. Los objetos.

3. Operadores

3.1. Operadores Aritmticos 3.2. Operadores relacionales 3.3. Operadores lgicos 3.4. Operadores a nivel de bits 3.5. Operadores de asignacin 3.6. Otros Operadores 3.7. Precedencia de operadores

4. Las Estructuras de control

4.1. Las variables en JavaScript 4.2. Sentencia if 4.3. Sentencia while 4.4. Sentencia for 4.5. Sentencia break 4.6. Sentencia continue 4.7. Sentencia switch

5. Las funciones en JavaScript

5.1. Definicin de funciones 5.2. La sentencia return 5.3. Propiedades de las funciones 5.4. Consideraciones a tener en cuenta 5.5. Funciones predefinidas en JavaScript

6. La gestin de eventos en JavaScript

6.1. La importancia de la gestion de eventos 6.2. Cmo se gestionan los eventos? 6.3. Clasificacin de eventos 6.4. Ejemplo de la gestion de eventos

7. Los objetos predefinidos.

7.1. Los objetos predefinidos por el lenguaje JavaScript 7.2. Los objetos propios del cliente WWW.

8. Aplicaciones prcticas.
8.1. Los marcos 8.2. La creacin de ventanas. 8.3. La verificacin de formularios.

9. Los cookies.
9.1. Qu son los cookies? 9.2. Propiedades de los cookies. 9.3. La definicin de cookies. 9.4. Ejemplo definicin de cookies mediante JavaScript.

Captulo 1:
Introduccin al JavaScript
1.1. Qu es JavaScript?
JavaScript, al igual que Java o VRML, es una de las mltiples maneras que han surgido para extender las capacidades del lenguaje HTML.Al ser la ms sencilla, es por el momento la ms extendida. Antes que nada conviene aclarar lo siguiente:
JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto. Nunca podrs hacer un programa con JavaScript, tan slo podrs mejorar tu pgina Web con algunas cosas que veremos en apartados posteriores de este captulo.

1.2. Para qu sirve JavaScript?

JavaScript sirve principalmente para mejorar la gestin de la interfaz cliente/servidor. Un script JavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestin de un formulario.
Vemos un ejemplo:

Cuando la pgina HTML es un formulario que permite acceder a una anuario telefnico, se puede insertar un script que verifique la validez de los parmetros proporcionados por el usuario. Esta prueba se efecta localmente y no necesita un acceso a la red. Por otro lado, tambin se podr utilizar JavaScript para efectuar varias opciones a la vez; por ejemplo, acompaar el acceso a un documento HTML de la visualizacin de un vdeo o la ejecucin de un applet de Java...

1.3. Diferencias con Java.

La principal diferencia entre JavaScript y Java, es que este ltimo es un lenguaje de programacin completo. Lo nico que comparten es la misma sintaxis. JavaScript es un lenguaje que se integra directamente en pginas HTML. Tiene como caractersticas principales las siguientes:

Es interpretado (que no compilado) por el cliente, es decir, directamente del programa fuente se pasa a la ejecucin de dicho programa, con lo que al contrario que los lenguajes compilados no se genera ni cdigo objeto ni ejecutable para cada mquina en el que se quiera ejecutar dicho programa. Est basado en objetos. No es, como Java, un lenguaje de programacin orientada a objetos (OOP). JavaScript no emplea clases ni herencia, ni otras tcnicas tpicas de la OOP. Su cdigo se integra en las pginas HTML, incluido en las propias pginas. No es necesario declarar los tipos de variables que van a utilizarse ya que como se ver ms adelante, JavaScript realiza una conversin automtica de tipos. Las referencias a objetos se comprueban en tiempo de ejecucin. Esto es consecuencia de que JavaScript no es un lenguaje compilado. No puede escribir automticamente al disco duro. Por eso decimos que JavaScript es un lenguaje seguro para el entorno de internet en el que se aplicar

1.4. Utilizacin de JavaScript en un documento HTML.

La insercin de un documento HTML se realiza mediante la marca SCRIPT utilizando la sintaxis:
<SCRIPT> Cdigo del script </SCRIPT>

Los atributos de esta marca son:

LANGUAGE="JavaScript" Precisa el lenguaje del script. Este atributo es obligatorio en ausencia del atributo SRC. SRC=url El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional, porque el script puede insertarse directamente en un documento HTML.

Estos dos atributos pueden especificarse simultneamente. Por ejemplo:

<SCRIPT LANGUAGE="lenguaje" SCR=url> Cdigo del script </SCRIPT>

podr especificarse para insertar en un documento un script de un lenguaje determinado y que cuyo cdigo fuente se encuentra en un acrhivo especificado en un determinado url. A continuacin enunciaremos algunos puntos a tener encuenta respecto a la introduccin de JavaScript en un documento HTML:

El script insertado mediante la marca SCRIPT es evaluado por el cliente tras la visualizacin de la pgina HTML. Las funciones definidas no se ejecutan inmediatamente, dependen de los eventos asociados a la pgina. La insercin del script mediante la marca SCRIPT puede colocarse en cualquier lugar del documento HTML pero se recomienda colocarla en la cabecera, es decir, en la zona definida por el HEAD. De este modo, el script est definido desde el principio del documento, lo que garantiza que ste se visible en todo el documento. Si se definen, adems del script mediante el atributo SRC, scripts en el propio documento, el cliente evaluar en primer lugar el insertado mediante el atributo SRC y seguidamente los incluidos en el documento. Los URL correspondientes a un JavaScript poseen generalmente la extencin .js. Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecer en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:
<SCRIPT LANGUAGE="JavaScript"> <-- Disimula el contenido del script para navegadores no compatibles Cdigo del script //--> </SCRIPT>

El lenguaje JavaScript no es case sensitive, es decir, no distinque maysculas de minsculas salvo en las cadanas de caracteres literales.

Por ltimo, comentar otra forma de introducir scripts en documentos HTML, y es incluir estos script como controladores de eventos de algunas marcas, como pueden ser la marcas de imgenes, anclas, links, botonoes, etc. Veamos a continuacin un ejemplo:
<A HREF="index.htm" OnClick="alert('ir al ndice')"> Ir al ndice </A>

Ir al ndice

Como puede verse, dentro de la marca, como atributo de esta, se pone un controlador de eventos y despus del signo igual y entre comillas se incluye el cdigo de JavaScript. Ahora bien, tambin es posible llamar a una funcin del HEAD del documento. Se recomienda esta segunda opcin ya que es una manera ms limpia y clara de escribir pginas. Se conseguira lo mismo que en el ejemplo anterior de esta forma:
<HEAD> <SCRIPT LANGUAGE="JavaScript">

<-- Disimula el contenido del script para navegadores incompatibles function alerta() { alert(" Ir al ndice"); } //--> </SCRIPT> ... </HEAD> <BODY> <A HREF="index.htm" OnClick="alerta()"> Ir al ndice </A> ... </BODY>

Ir al ndice

1.5. Las versiones de JavaScript.

La versin 1.0 de JavaScript naci con el Netscape Navigator 2.0. Posteriormente, surgieron las versiones 1.1 y 1.2 de JavaScript con las versiones 3 y 4 del Netscape. Tambin existe una versin 1.3, introducida en la versin 4.07 del Netscape Navigator. Esta versin es una pequea revisin de la 1.2 creada para ajustarse al estndar internacional ECMA que regula el lenguaje JavaScript. En cuanto a Microsoft Internet Explorer en su versin 3.0 interpreta JScript, que es muy similar a JavaScript 1.0 pero con algunas incompatibilidades. Pero ya su versin 4.0 soporta sin nign problema, la versin 1.1 de JavaScript. Para tener en cuenta la versiones colocar en el atributo LANGUAGE de la marca SCRIPT la versin con la que se pienza trabajar. Por ejemplo para la versin:
LANGUAGE="JavaScript1.1"

1.6. Los comentarios en JavaScript.

A continuacin empezaremos ya en este captulo a estudiar uno de los elementos ms simples de los que se compone un lenguaje de programacin, aunque no por ello son los menos importantes, estamos hablando de los comentarios. Los comentarios en el cdigo permiten insertar observaciones observaciones del autor del cdigo para describir las distintas partes del programa. El interprete JavaScript los ignora y posee por ello una sintaxis particular. Se distinguen los comentarios en una sola lnea, precedidos por la barra oblicua doble // y los comentarios en varias lneas delimitados por los smbolos /* y por */. Por ejemplo:

// esto es un comentario /* esto es un comentario de varias lneas con una longitud cualquiera */

1.7. Identificadores y palabras reservadas.

Conocer cual es la sintaxis de los identificadores y cuales son las palabras reservadas son aspectos de necesario conocimiento antes de empezar a escribir un programa en un lenguaje de programacin determinado.
1.7.1. Identificadores en JavaScript.

Los identificadores de un lenguaje son la ristra de caracteres que le asignamos a los nombres de variables, constantes, funciones, objetos, etc..., que nosotros definimos en dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en lugares posteriores a su definicin. Los identificadores deben seguir las siguientes reglas:

El identificador debe empezar por una letra o por el caracter '_'. Los caracteres siguientes, adems de letras o el caracter '_', pueden ser cifras.

Recordar que le uso de maysculas o minsculas no es importante porque JavaScript no diferencia de los nombres de maysculas o minsculas en los identificadores. Veamos algunos ejemplos de nombres de variables:
Num_linea aux1 _exit

1.7.2. Las palabras reservadas.

Primeramente decir que las palabras reservadas son palabras especiles que se utilizan para aumentar la legibilidad y separar las entidades sintcticas. Estas palabras no pueden usarse como identificadores. A continuacin veremos un cuadro en el que se muestran todas las palabras reservadas existentes en JavaScript, estas palabras tiene o tendrn un significado especial dentro del lenguaje:

1.8. Algunos ejemplos sencillos.

Una vez que nos hemos empezado a introducir en el mundo de JavaScript es hora de empezar a ver al lenguaje "en accin" viendo una bateria de ejemplos muy sencillos que nos permitirn ir adentrndonos en la potencia de este lenguaje.
Ejemplo 1: Visualizacin de texto mediante una ventana.

Como primer ejemplo no hay nada mejor que el clsico programa Hola mundo!. ste mostrar una ventana conteniendo el famoso mensaje cuando se pulse sobre el botn ejemplo1. Para ello debemos generar el siguiente cdigo fuente.
<CENTER> <FORM> <INPUT Type="button" Value=" ejemplo1 " onClick="Alert(' Hola mundo! ')"> </FORM> </CENTER>

Ejemplo 2: Definicin de una funcin.

Este ejemplo define una funcin que calcula el cuadrado de un nmero y visualiza el resultado en una ventana parecida a la anterior. Esto se llevar a cabo cuando se pulse sobre el botn ejemplo2. Como sabemos la funcin se tendr que definir entre las marcas (<SCRIPT>,</SCRIPT>) que se encuentran dentro de la cabecara (HEAD) del documento.
... <HEAD> ... <SCRIPT Laguage="JavaScript"> <!-function Cuadrado(numero) { return numero * numero; } //--> </SCRIPT> ...

</HEAD> <BODY> ... <CENTER><FORM> El cuadrado de 5 es: <INPUT Type="button" Value=" ejemplo2 " onClick="alert(Cuadrado(5))"> </FORM></CENTER>

El cuadrado de 5 es: Ejemplo 3: Interaccin con un formulario.

Este ejemplo es refleja la interaccin de un script con un formulario, esta es una de las aplicaciones en la que los programadores de pginas Web echan mano de JavaScript. Concretemante en este ejemplo el usuario introducir una expresin aritmtica en un campo de texto del formulario y el script le pedir al usuario que la confirme antes de pasar a evaluarla. Ms adelante ( captulo 8 ), se comprobar si de verdad la expresin est bien o mal, es decir, no se limitar a preguntarle al usuario y a fiarse de su respuesta.
... <HEAD> ... <SCRIPT Laguage="JavaScript"> <!-function evalua(form) { if (confirm("Est seguro?")) form.result.value = eval (form.expr.value); else alert("Intntelo de nuevo."); } //--> </SCRIPT> ... </HEAD> <BODY> ... <CENTER><FORM> Introduzca la expresin: <INPUT Type="text" name="expr" Size=10>

Resultado: <INPUT Type="text" name="result" Size=10>

<INPUT Type="button" Value=" Evaluar " onClick="evalua(this.form)">

</FORM></CENTER>

Introduzca la expresin:

Resultado:

Captulo 2:
Los tipos de datos
Antes de empezar este captulo hay que aclarar que ms que tipos de datos, lo que JavaScript reconoce son tipos de valores, ya que como veremos ms adelante JavaScript no requiere que las variables tengan un tipo determinado en su declaracin, pues que JavaScript trata a todos los tipos por igual realizando una conversin automtica de los mismos. Ejemplo: mi_variable = 345; // mi_varible es de tipo entero.
mi_variable = "hola"; //mi_variable es de tipo string.

Por lo tanto, ms que de tipos de datos, en JavaScript se habla de representacin de datos.

2.1. Tipos numricos.

Los tipos numricos los podemos dividir en reales y enteros.
2.1.1. Tipo numrico entero.

Los enterosPueden ser representados en tres formatos distintos:

Decimal: enteros en base 10.

Hexadecimal: enteros en base 16. Se coloca antes del nmero en base 16 0x o 0X.

Octal: enteros en base 8. Colocamos un cero antes de dicho nmero en octal. Ejemplo: Estas tres variables nmericas tendrn un entero con el mismo valor. var1 = 20; var2 = 0x14; var3 = 024;
2.1.2. Tipo numrico real.

Los reales se componen de una parte entera y otra fraccionaria separada por un punto de la anterior. La parte fraccionaria puede estar compuesta por un indicador de exponente E o e seguido de un nmero entero que indica el valor del exponente. A continuacin se mostrarn algunos ejemplos:
25.478 2.3e45 5.6E-2 -3.789 ...

2.2. Las strings.

Una string es una ristra de caracteres delimitadas por comillas. Las comillas sern simples o dobles atendiendo a una determinada regla.
Por defecto se usarn comillas dobles ("), pero si alguna sentencia a de ir incluida entre dichas comillas, si esa sentencia contiene una string o a su vez otra sentencia que tambin deba ir delimitada por dichas comillas, estas comillas sern entonces comillas simples ('). Ejemplo:
confirm("Estas seguro?"); OnMouseOver = "confirm('Estas seguro?');

Por otro lado, hay que tener en cuenta la escritura de caracteres especiales en lo que denominamos secuencias de escape. La secuencia de escape comienza siempre con el carcter \ y acontinuacin se escribe otro carcter que representa el cdigo especial o el nmero en octal o hexadecimal de su cdigo ASCII. Las secuencias de escape representan un nico carcter en las strings en donde aparecen.

2.3. Tipo booleano.

El tipo booleano simplemente distingue entre dos estados, un estado de xito o de activado valor verdadero true, y un estado de fracaso o de desactivado, valor false.

2.4. El valor nulo.

En JavaScript a las variables se les puede asignar un valor que indica el vaco, este valor es el valor null.

2.5. La conversin de datos.

Antes que nada, recordar que JavaScript no es un lenguaje con tipos; por consiguiente, cuando se declara una variable no es necesario precisar su tipo. El contenido de la variable se convertir automticamente en el transcurso del programa segn su uso. El esquema de conversin del tipo se basa en el principio siguiente: el tipo asociado corresponde al de operando de la izquierda. Esto se debe a que la evaluacin se realiza de izquierda a derecha. Por ejemplo, supongamos la definicin de las variables siguientes:
var una_string = "7"; var un_numero = 42;

Si evaluamos las siguientes expresiones.

x = una_string + un_numero; y = una_numero + una_string;

La primera expresin convertir la variable un_numero en una cadena de caracteres porque el operando de la izquierda una_string es una cadena de caracteres. Esta expresin concatena las dos cadenas de caracteres y el resultado x es: "742".

Por el contrario, la segunda expresin convierte la cadena una_string en un valor numrico porque el operando de la izquierda un_numero, es como su propio nombre indica, un nmero. Esta segunda expresin suma los dos nmeros y el resultado y es: 49. La coversin de tipos no puede hacerse en todos los casos posibles: ciertas cadenas de caracteres no pueden convertirse en nmero. Tales conversiones generan un error. Por ejemplo:
var una_string = "Pepe"; var un_numero = 578; y = una_numero + una_string; // ERROR: Pepe no puede convertirse en nmero

A continuacin mostraremos una tabla que resume la conversin de tipos en JavaScript.

2.6. Los arrays en JavaScript.

Podemos crear arrays a los que le daremos un nombre y a los que accederemos con un ndice que comenzar desde el elemento nmero 1 (no desde el 0 como en Java o C/C++). En los arrays al igual que con las variables no existen tipos predeterminados. Para crear un array es necesario definirnos una funcin como la que veremos a continuacin:
function CreaArray(n) { this.length = n; for (var i=1; i<=n; i++) this[i] = 0; return this; }

Comentar sobre la funcin que la palabra reservada this hace referencia a la variable a actual, es decir, a la variable que contendr el array. Por otro lado, observar que los array tienen una propiedad length que nos muestra la longitud de dicho array. Por ltimo mostrar el uso de dicha funcin:

mi_array = new CreaArray (2); // new: Creamos una instancia del objeto, en este caso un array // Llenamos el array mi_array[1] = "Pepe"; mi_array[2] = 35; longitud = mi_array.length; //longitud ser 2

Ejemplo de manejo de vectores

En este ejemplo se permitir que el cliente que est navegando por la pgina inicialice un vector con un nmero de elementos determinado (mximo 9). El usuario podr ir insertando los elementos y ver el estado del vector en el momento que lo crea oportuno. El valor inicial de los elementos del vector es cero. Los elementos que se pasan al vector slo puede tener tres caracteres como mucho. El cdigo fuente de esta pgina ser el siguiente:
<HEAD> ... <SCRIPT> <!-// Crea el vector con todos sus elementos a 0. function CreaArray(n) { this.length = n; for (var i=1; i<=n; i++) this[i] = 0; return this; } // Asigna un elemento en una posicin determinada function AsignaElemento(form,array,pos){ if (array.length < pos) alert("Asignacin fuera de rango"); else array[pos] = form.elemets.value; } // Determina se la dimensin es correcta function Inicia(form){ var ch=form.number.value; if (ch>='0' && ch<='9') return ch; else { alert("Dimensin incorrecta"); return -1; } } // Forma una ristra con los elementos del vector function Mostrar(array){ var resultado=""; for (var i=1; i<=array.length; i++) resultado += array[i]+ " ";

return resultado; } //Variables globales var numele=0; // Numero de elementos del vector var pos=1; // Posicin a insertar el elemento actual var vector; // Variable que contendr el vector //--> </SCRIPT> ... </HEAD> <BODY> ... <FORM> <CENTER> <H3><U>Inserta elementos en un vector>/U></H3> </CENTER> <TABLE> <tr><td>Introducir el nmero de elementos del vector: <input type="text" name="number" size=1 onChange="numele=Inicia(this.form); <!-- onChange: Se activa cuando cambia el contenido del text.//--> </tr> <tr> <td>Elementos: <input type="text" name="elemets" size=3> <td> <input type="button" value=" insertar " onClick="alert('Insertar elemento '+pos); </tr> <tr><tr> <input type="text" name="valores" size=45> <td> <input type="button" value=" Mostrar Vector " onClick="this.form.valores.value=Mostrar(vector)"> </tr> </TABLE> </FORM> ...

Para ms informacin sobre los manejadores de eventos ir al captulo 6. Inserta elementos en un vector Introducir el nmero de elementos del vector:

Elementos:

2.7. Los objetos en JavaScript.

Los objetos se componen de un conjunto de valores propiedades y un conjunto de operaciones aplicados a esos valores mtodos. Son estas ltimas las que nos permiten modificar el estado de dicho objeto, es decir, el valor de sus propiedades. En JavaScript existen objetos predefinidos. A parte el programador tambin puede crearse sus propios objetos.
2.7.1. Las propiedades de los objetos.

Para hacer uso de las propiedades de un objeto basta con utilizar la siguiente notacin:
mi_objeto.propiedad

Esto se ver con ms claridad en el siguiente ejemplo en el cual tenemos un objeto Universitario en el que tenemos las propiedades Nombre, Apellido, Edad y Facultad. Suponiendo que tenemos una variable Uni1 que contienen en un momento determinado un objeto Universitario:
Uni1.Nombre = "Pedro"; Uni1.Apellido = "Navarro"; Uni1.Edad = 13; Uni1.Facultad = "Telecomunicaciones";

Pero no slo podemos acceder a las propiedades de un objeto mediante la notacin expuesta anteriormente, ya que, existe una relacin entre los objetos y los arrays, puesto que podemos acceder a un objeto como si este fuera un array y sus elementos fueran los propiedades de dicho objeto en el orden en que se definieron. Ejemplo:
Uni1[1] Uni1[2] Uni1[3] Uni1[4] = = = = "Pedro"; "Navarro"; 13; "Telecomunicaciones";

Uni1["Nombre"] = "Pedro"; Uni1["Apellido"] = "Navarro"; Uni1["Edad"] = 13;

Uni1["Facultad"] = "Telecomunicaciones";

Este tipo de vectores se denominan arrays asociativos.

2.7.2. Los mtodos.

Como ya mencionamos con anterioridad un mtodo es una funcin asignada a un objeto. As para asignar una funcin como mtodo de un objeto se utiliza la siguiente sintaxis:
Objeto.nombreDelMtodo = NombreFuncin;

Podemos observar que, nombre del mtodo es la manera en la que queremos nombrar a la funcin dentro del objeto.

Un mtodo puede ser llamado en un contexto mediante la sintaxis:

Objeto.nombreDelMtodo(parmetros);

2.7.3. Utilizacin de la palabra reservada this.

La palabra reservada this permite referenciar al objeto actual. Por ejemplo, supongamos que la funcin validate permite validar las propiedades de un objeto mediante un mnimo y un mximo asociados; tendremos:
function validate(obj, lowval, hival){ if((obj.value < lowval) || (obj.value > hival)) alert("Valor no vlido"); }

Se podr llamar entonces a la funcin validate a cambio de los valores de un formulario mediante la palabra reservada this y el atributo OnChange que permite detectar los cambios de valores. Esto se hace mediante la marca HTML y el evento:
<INPUT TYPE = "text" NAME = "edad" OnChange = "validate(this,18,99)">

De manera general, la palabra this se refiere al objeto actual.

Comprobacin de valores correctos: 2.7.4. La creacin de objetos.

Como ya hemos mencionado anteriormente, el cliente y el servidor tienen un conjunto de objetos predefinidos que pueden ser completados mediante nuevos objetos. La creacin de un objeto se hace en dos etapas:

1. Definir el objeto mediante una funcin. 2. Crear un objeto mediante la palabra reservada new. As, para definir un objeto, se crear una funcin que permita precisar su nombre, sus funciones y sus mtodos asociados. Por ejemplo, si se quiere crear un objeto universitario cuyas propiedades seran nombre, apellido, edad y dni, se definir la funcin genrica siguiente:
function Univers(nom, apell, edad, dni){ this.nom = nom; this.apell = apell; this.edad = edad; this.dni = dni; } // this: propiedad del objeto a partir de los argumentos

La instacia del objeto la crearemos de la siguiente forma:

alumno = new univers("Juan","Delgado",12,44565789);

Las propiedades de un objeto puedean describirse mediante otros objetos. Por ejemplo:
function Nota_M(curso1, curso2, curso3, final){ this.curso1 = curso1; this.curso2 = curso2; this.curso3 = curso3; this.final = final; }

Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto:
function Univers(nom, apell, edad, dni, exp){ this.nombre = nom; this.apellido = apell; this.edad = edad; this.dni = dni; this.expediente = exp; }

Por tanto, para acceder a la nota final:

alumno.expediante.final

Cuando se define un objeto, es posible enriquecer su descripcin mediante nuevas propiedades. Por ejemplo:
alumno.dni = 44567234

Ahora la propiedad dni pertenece a la instancia del objeto contenido en alumno. Esta modificacin no afectar a los otros objetos del tipo universitario, ya que para aadir una pripiedad a un tipo de objeto esta debe figurar en la definicin del mismo.

2.7.5. La definicin de mtodos en la creacin de objetos.

La definicin de mtodos asociados a un objetos puede precisarse en la definicin del objeto. Por ejemplo, para el objeto universitario definimos una funcin que muestre el nombre, apellidos, dni y facultad de un alumno.
function Datos() { var ristra = this.nombre + " " + this.apellido + " " + this.dni + " " + this.edad + " " + this.expediente.curso1 + " " + this.expediente.curso2 + " " + this.expediente.curso3 + " " + this.expediente.final; alert(ristra); } //this: objeto al que pertenece el mtodo.

Esta funcin se convierte en un mtodo asociado al tipo realizando en su definicin lo siguiente:

function Univers(nom, apell, edad, dni, exp){ this.nombre = nom; this.apellido = apell; this.edad = edad; this.expediente = exp; this.dni = dni; this.Datos = Datos; }

Su forma de uso ser:

alumno.Datos()

En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos creado. Para ello creamos el siguiente formulario:
<FORM id=form1 name=form1> <CENTER><H3>Nota media de la etapa acadmica</H3> <TABLE border=1> <tr><td>Nombre <td>Primer Apellido <td>edad <td>DNI </tr> <tr><td><input type="text" name="nombre" value="ninguno" size=15> <td><input type="text" name="apellido" value="ninguno" size=15> <td><input type="text" name="edad" value="ninguno" size=15> <td><input type="text" name="DNI" value="ninguno" size=15> </tr> </TABLE> <p>

<TABLE border=1> <tr><td>Primer curso <td>Segundo curso <td>Tercer curso <td>Nota final </tr> <tr><td><input type="text" name="nota1" value=0 size=4> <td><input type="text" name="nota2" value=0 size=4> <td><input type="text" name="nota3" value=0 size=4> <td><input type="text" name="final" value=0 size=4> </tr> </TABLE> <p> <input type="button" value=" Ver datos" onClick="Mostrar_Univers(this.form)"> </CENTER> </FORM>

La funcin Mostrar_Univers(form) se define como sigue:

function Mostrar_Univers(form){ var notas = new Nota_M(form.nota1.value, form.nota2.value, form.nota3.value, form.final.value); var alumno = new Univers(form.nombre.value, form.apellido.value, form.edad.value, form.DNI.value, notas); alumno.Datos(); }

Nota: Como se puede ver en este ejemplo no se comprueba si los datos que se insertan en el formulario son "correctos", es decir, si las notas estn entre 0 y 10 o si los nombres y apellidos se componen slo de letras. Si se quiere ver procedimientos de este tipo ir al captulo 8. Nota media de la etapa acadmica Nombre
ninguno

Primer Apellido edad

ninguno ninguno

DNI
ninguno

Primer curso Segundo curso Tercer curso Nota final

0 0 0 0

Captulo 3: Operadores
JavaScript posee una amplia variedad de operadores. Estos operadores los podemos distinguir en dos grupos: binarios, que act sobre dos operandos y unarios, que slo requieren un operando. As, su sintaxis general es:
operando1 operador_Binario operando2 operando1 operador_unario operador_unario operando1

3.1. Operadores aritmticos

JavaScript suministra las operaciones bsicas con el nico aadido del operador que devuelve el resto de la divisin entre el operador izquierdo y el derecho. Se carece de operadores ms complejos, aunque el objeto Math definido en JavaScript posee dichas tareas.

Nota: El operador + aplicado strings, concatena ambas strings en una sola.

Operadores de incremento (++) y decremento (--).

Estos operadores son unarios y realizan el autoincremento y el autodecremento a la variable que se les aplica. Adems de modificar la variable, devuelven el valor de la misma. El operador de incremento o decremento puede ir delante p detrs de la variable teniendo diferente significado. Si el operador es ++ se sita despus de la variable se denomina

postincremento, haciendo que primero tome el valor y despus se incremente la variable. Ejemplo:
n=k++; // El valor de k se asigna a n y luego se incrementa k.

Si el operador ++ se sita antes de la variable se denomina preincremento y hace que primero se incremente la variable y luego se tome el valor. Ejemplo:
n=++k; // Primero se incrementa k y luego se asigna a n.

El operador de decremento acta de igual forma al de incremento.

3.2. Operadores relacionales

Se emplean tpicamente en las expresiones condicionales. Los operadores relacionales devuelven valores booleanos. Los operandos pueden ser tanto nmericos como strings.

3.3. Operadores lgicos.

Los operandos l est relacionados con los relacionales ya que normalmente los operandos que usan son resultado de expresiones relacionales. Los valores resultantes son booleanos.

3.4. Operadores bit a bit.

La forma de trabajar de estos operadores es convertir a binario los operandos y luego operar con ellos bit a bit.

Nota: Los operadores de propagacin toman dos operandos: el primero es la variable a propagar y el segundo es el nmero de posiciones a propagar.

3.5. Operadores de asignacin.

La asignacin tambin es un operador que devuelve la variable modificada. El operador de asignacin en JavaScript es =. Los operadores de asignacin que se muestran a continuacin no son sino abreviaturas que hacen ms cmoda y simples las expresiones, aunque a veces sean ms ilegibles.

3.6. Otros operadores.

3.6.1. Operador de seleccin.

Este operador se utiliza para ejecutar una operacin u otra dependiendo de la condicin. El formato es el siguiente:

Condicin ? Exp1 : Exp2

Si se cumple la condicin se eval y se devuelve la expresin Exp1 si no la Exp2. Podemos poner un slo valor. Ejemplo:
i = (x!=y)?6:(k+1) 3.6.2. El operador new.

Este operador se va a utilizar para crear una instacia de un tipo de objetos previamente definido. La sintaxis a seguir es la siguiente:
variableObjeto = new tipoDeObjeto(parmetro 1, parmetro 2, ...)

Estos parmetros son los que se le pasan al constructor de dicho objeto en cuestin.
3.6.3. El operador typeof.

Este operador aplicado a una variable devuelve el tipo de objeto al que pertenece el dato contenido por dicha variable. Su sintaxis es:
typeof(variable)

3.7. Precedencia.
La precedencia de los operadores va a determinar el orden en que se ejecuten en una expresin determinada. Usando parntesis controlaremos que las operaciones se lleven a cabo segn nosotros queramos. En JavaScript la precedencia de los operadores de mayor a menor es la siguiente:

Captulo 4:
Estructuras de control
JavaScript posee las sentencias de control tpicas de los lenguajes de alto nivel. A continuacin veremos la sintaxis de las mismas.

4.1. Declaracin de variables.

En cuanto a las variables en JavaScript decir que no se les asigna un tipo predefinido. En JavaScript el tipo de las variables dependen del valor que contengan las mismas en cada momento. Por tanto se realiza una conversin automtica de tipos. JavaScript reconoce los siguientes tipos de valores:
1. Nmeros: enteros y reales. 2. Valores booleanos: true y false. 3. Strings. 4. El valor null. 5. Los objetos: Creados por el programador o predefinidos por el lenguaje.

Dado que no existen tipos de variables a priori, no hemos de especificar el tipo de variable cuando la declaramos. La declaracin de variables se hace anteponiendo la palabra reservada var al nombre de la variable.
var mi_variable;

Es posible asignarle el valor cuando la declaramos, por ejemplo:

var mi_entero = 124;

4.2. La sentencia if.

La sentencia if tiene la forma:
if ( Condicin ) Instruccin 1 o bloque de instrucciones; [ else Instruccin 2 o bloque de instrucciones; ]

Los parntesis asociados que delimitan la condicin no son opcionales. En caso de que la condicin sea verdadera se ejecutar la instruccin 1; en caso contrario se ejecuta si existe la instruccin 2.

Un bloque de instrucciones es un conjunto de intrucciones delimitadas por llaves. Es decir:

{ Instruccin 1; Instruccin 2; ... Instruccin N; }

4.3. La sentencia while.

La sentencia while tiene la forma:
while ( Condicin ) Instruccin o bloque de instrucciones;

Los parntesis no son opcionales. Si se cumple la condicin se ejecute la instruccin o el bloque de instrucciones y se repite el proceso.

4.4. La sentencia for.

En cuando a dicha sentencia, en JavaScript podemos distinguir dos variantes:
4.4.1. El bucle for "clsico".

Este bucle, como a continuacin podremos ver, tiene una sintaxis muy parecida a la de C/C++.
for ([inicializacin]; [condicin]; [expresin] ) Instruccin o bloque de instrucciones;

En esta sintaxis: Inicializacin: Crea la variable contador y le da un valor inicial.

Condicin: lo que se debe cumplir para que el bucle se ejecute. Depende de la variable ndice. Actualizacin: Actualiza el valor de la variable ndice.
El equivalente de esta expresin con while es:
inicializacin; while (condicin ) { Instruccin 1; Instruccin 2; ...

Instruccin N; expresin; }

4.4.2. El bucle for/in.

Esta estructura itera una variable var sobre todas las propiedades de un objeto obj que se le pasa. As para cada valor de var se ejecutaran las sentencias del bucle. Por lo tanto, el bucle tendr tantas iteraciones como propiedades el objeto y en cada iteracin la variable tendr el valor de la propiedad del objeto correspondiente con dicha iteracin. Su sintaxis es:
for (var in obj) Instruccin o bloque de instrucciones;

4.5. La sentencia break.

La sentencia break se puede colocar dentro de un bucle o bucles anidados. Cuando se ejecuta la sentencia break se abandona el bucle ms interno. A todos los efectos la sentencia break acta como un salto a la instruccin siguiente al bucle en el que se ejecuta.

4.6. La sentencia continue.

La sentencia continue, no abandona el bucle si no hace que se ejecute la siguiente iteracin. En el bucle while la ejecucin del continue hace que el flujo del programa salte a la condicin. En el bucle for la ejecucin del continue hace que la expresin de incremento, para despus continuar normalmente con la condicin. Es decir, la ejecucin del continue evita que se ejecute el resto del cuerpo del bucle.

4.7. La sentencia switch.

Hace que se seleccione un grupo de sentencias entre varias posibles. Su sintaxis es:
switch ( Expresin ) { case Valor 1: Instruccin o bloque de instrucciones; [break;] case Valor 2: Instruccin o bloque de instrucciones; [break;] case Valor 3: Instruccin o bloque de instrucciones; [break;] ... case Valor N: Instruccin o bloque de instrucciones; [break;] [default:]Instruccin o bloque de instrucciones; }

La expresin entre parntesis del switch debe ser entera. Su resultado se comparar con los distintos valores del case. Si coincide con uno de ellos se pasar a la instruccin siguiente al case con dicho valor y se seguirn ejecutando las instrucciones consecutivas hasta encontrar una

instruccin break o alcanzar el cierra llaves del switch. En caso de que el resultado de la expresin no coincida con ningn valor se pasar la ejecucin a la instruccin siguiente de la etiqueta default, si la hubiera, y se continuar como un case. Los valores en los case pueden ser una expresin constante. No puede haber dos case con el mismo valor.

Captulo 5:
Las funciones
5.1. Definicin de funciones.
La instruccin function permite la definicin de funciones. Despus de esta palabra reservada se coloca el nombre de la funcin seguido de una lista de argumentos delimitados por parntesis y separados por comas.
function nombre (param1, param2,..., paramn){ instrucciones en JavaScript; }

5.2. La sentencia return.

La sentencia return es la que permite devolver el resultado de una funcin. En el ejemplo que se ver a continuacin, se muestra una funcin que devuelve el rea de un cuadrado de lado l.
function Area(lado){ return lado*lado; }

5.3. Propiedades de las funciones.

JavaScript asocia a cada funcin dos propiedades: arguments y caller. Estas propiedades permiten respectivamente la gestin de los parmetros opcionales y la identificacn de la funcin que llama.

5.3.1. La propiedad caller.

Muestra el nombre de la funcin que llama, por lo tanto, esta propiedad devolver una cadena de caracteres.
5.3.2. La propiedad arguments.

Es un array que contiene los parmetros que le son pasados a la funcin. Por ejemplo, la funcin suma definida como:
function Suma(x){ var sumandos = suma.arguments; var num_op = suma.arguments.length; var resultado = 0; for (var i=0; i<num_op; i++) resultado += sumandos[i]; return resultado; }

Vemos como esta funcin permite calcular la suma de los nmeros pasados como argumentos. As, Suma(4,5,7) devuelve 16 y Suma(56) devuelve 56.

5.4. Consideraciones a tener en cuenta.

Antes de empezar a trabajar con funciones es necesario tener en cuenta los siguientes puntos:

El lenguaje JavaScript no permite las definiciones anidadas de funciones. El paso de parmetros se realiza por valor. Es decir, si una funcin modifica el contenido de sus argumentos, esta modificacin es local y no repercute ni globalmente ni a la funcin que llama.

5.5. Las funciones predefinidas por el lenguaje.

5.5.1. La funcin eval.

La funcin eval tiene como argumento una expresin y devuelve el valor de la misma. Esta funcin resulta til para evaluar una cadena de caracteres que representa una expresin numrica. La edicin efectuada mediante un campo de formulario es una cadena de caracteres que a veces es necesario convertir en valor numrico. El cdigo siguiente ilustra este ejemplo permitiendo al usuario introducir una exprecin numrica y visualiza a continuacin el valor de la expresin.
<SCRIPT> function calcula(obj){ obj.result.value = eval(obj.expr.value)

} </SCRIPT> <FORM NAME="evalua"> Introducir expresin: <INPUT TYPE="text" NAME="expr" SIZE=20> <br> Resultado: <INPUT TYPE="text" NAME="result" SIZE=20> <br> <INPUT TYPE="button" VALUE="evalua" onClick="calcula(this.form)"> </FORM>

Introducir expresin: Resultado:

5.5.2. Las funciones escape y unescape.

Estas dos funciones permiten codificar cadenas de caracteres en formato URL. Esta codificacin es necesaria en la creacin automtica de enlaces de hipertexto o en la definicin de propiedades persistentes como los Cookies. Ejemplo:
escape("#"); // devuelve %23 unescape("%23"); // devuelve #

Ejemplo
<form> Introducir carcter en formato URL o normal: <input type="text" name="char" size=5> <br> <INPUT type="radio" name="codificacion" value="normal" onClick="this.form.char.value=escape(this.form.char.value)"> formato estndar a URL<br> <INPUT type="radio" name="codificacion" value="URL" onClick="this.form.char.value=unescape(this.form.char.value)"> formato URL a estndar<br> </form>

Introducir carcter en formato URL o normal: formato estndar a URL formato URL a estndar 5.5.3. La funcin isNaN.

Funcin que comprueba si el valor pasado por parmetros es nmerico o no. El resultado de esta funcin es un booleano. Es decir, evala un argumento para ver si es NaN: Not Number.

isNaN(valor de entrada)

Ejemplo
<SCRIPT> function Comprueba(form){ var number = parseFloat(form.valor.value); if (isNaN(number)==true) alert("No es numrico"); else form.valor.value = number; alert("Es numrico"); } </SCRIPT> ... <form> Introducir un valor numrico: <input type="text" name="valor"> <br> <input type="button" value=" Comprobar " onClick="Comprueba(this.form)"> </form>

Introducir un valor numrico:

5.5.4. Las funcin parseFloat.

Convierte una string a un nmero en punto flotante. Si se encuentra otros caracteres que no sean nmeros, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer caracter no se puede convertir a nmero devolver cero.
parseFloat(cadena de caracteres)

Ejemplo
<form> Convierte a real: <input type="text" name="float"> <br> <input type="button" value=" Convierte " onClick="this.form.float.value=parseFloat(this.form.float.value)"> </form>

Convierte a real:

5.5.5. Las funcin parseInt.

Convierte una cadena de caracteres de entrada a un nmero entero con una base especificada. La base puede ser 8, 10 16. Si se encuentra otros caracteres que no sean nmeros, el signo '+', el '-' o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer caracter no se puede convertir a nmero devolver cero.

//base es opcional. parseInt(ristra,base)

Ejemplo
Introducir entero: <input type="text" name="int"> <br> <INPUT type="radio" name="conversion" value="decimal" onClick="this.form.int.value=parseInt(this.form.int.value, 10)"> Expresar entero en decimal<br> <INPUT type="radio" name="conversion" value="hexadecimal" onClick="this.form.int.value=parseInt(this.form.int.value, 16)"> Expresar entero en hexadecimal<br> <INPUT type="radio" name="conversion" value="octal" onClick="this.form.int.value=parseInt(this.form.int.value, 8)"> Expresar entero en octal<br> </form>

Introducir entero: Expresar entero en decimal Expresar entero en hexadecimal Expresar entero en octal

Captulo 6:
La gestin de eventos
6.1. La importacia de la gestin de eventos.
El inters de los scripts JavaScript reside en gestionar localmente los eventos detectados. Los eventos son el resultado de una accin del usuario. Por ejemplo, hacer clic sobre un botn o seleccionar un campo de un formulario son eventos. La importancia de los eventos radica en que nos posibilita modificar el contenido de un documento HTML sin intercambio de datos a travs de la red. Esto se haca hasta ahora mediante la programacin CGI.

6.2. Cmo se gestionan los eventos?

La gestin de eventos se efecta mediante scripts ejecutados automticamente cuando se produce un evento dado. Esta gestin se indica en ciertas marcas y se especifica la accin asociada a cada evento. La sintaxis es la siguiente:
<TAG eventHandler="JavaScript code">

donde TAG representa una marca HTML y eventHandler el nombre del evento detectado. As, en el siguiente ejemplo se ejecutar la funcin evaluar cuando el usuario haga clic sobre el botn calcular.
<INPUT TYPE="button" VALUE="calcular" onClick="evalua(this.form)">

La estructura this.form se refiere al formulario que contiene el botn. Esta estructura representa la variable pasada como argumento a la funcin evalua.

6.3. Clasificacin de eventos.

Los eventos que vemos a continuacin se encuentran en la versin 1.1 de JavaScript.
onAbort Se origina cuando se cancela la carga de una imagen. onBlur Se produce al deseleccionar un campo de edicin. Se aplica a la marca INPUT TYPE="text" y a la marca TEXTAREA. En la versin 1.2 de JavaScript tambin se aplica a la marca LAYER. onClick Se produce cuando se hace clic en un elemento del formulario o un enlace hipertexto. Se aplica tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca . onChage Se origina al cambiar en contenido de un campo o seleccin. Se aplica a las marcas INPUT TYPE="text", SELECT y TEXTAREA. onError Se produce cuando se obtiene un error al cargar el documento HTML. Se aplica sobre las marcas BODY y FRAMESET. onFocus

Se produce cuando se Activa un campo de edicin. Se aplica a la marca INPUT TYPE="text" y a la marca TEXTAREA. En la versin 1.2 tambin se aplica a la marca LAYER. onLoad Se origina cuando se carga el documento HTML. Se aplica a las marcas BODY y FRAMESET. En la versin 1.2 tambin se aplica a marca LAYER. onMouseOut Se produce cuando alejamos el mouse de un enlace de hipertexto. Se aplica sobre las marcas A AREA. En JavaScript 1.2 tambin se aplica a la marca LAYER. onMouseOver Se produce cuando desplaza el mouse sobre los enlaces de hipertexto. Se aplica sobre la marca A y AREA. En la versin 1.2 de JavaScript tambin se aplica a la marca LAYER. onReset Se produce cuando se resetea el formulario. Se aplica sobre la marca FORM. onSelect Se produce al seleccionar un campo de edicin. Se aplica sobre las marcas INPUT TYPE="text" y TEXTAREA. onSumit Se origina al enviar el formulario.Se aplica sobre al marca FORM. onUnload Se origina al abandonar el documento HTML. Se aplica sobre las marcas BODY y FRAMESET. En la versin 1.2 de JavaScript tambin se aplica a la marca LAYER.

Para la versin 1.2 de JavaScript se ha definido nuevos enventos que veremos en la siguiente lista.
onDblClick Se produce cuando se hace doble clic en un formulario o enlace hipertexto. Se aplica tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca . onDragDrop Se produce cuando se vuelca (drop) un objeto sobre la ventana del navegador.

onKeyDown Se produce cuando se pulsa una tecla. onKeyPress Se produce cuando se tiene una tecla pulsada. onMouseDown Se origina al pulsar algn botn del mouse. OnMouseMove Se origina al mover el cursor. onMove Se produce cuando se mueve una ventana o frame. onResize Se produce al cambiar el tamao de una ventana o frame.

En este tutorial slo se utilizarn los eventos de la versin 1.1 para que dichos ejemplos funcionen tanto para los usuarios de Microsoft Internet Explorer (versin 4.0 o superior) y para los usuarios de Netscape Navigator (versin 3.0 o superior).

6.4. Ejemplo de gestin de eventos.

El ejemplo siguiente ilustra diferentes eventos mostrando a cada evento detectado un mensaje informativo al usuario:
<HEAD> <SCRIPT> <!-function Muestra(mensaje, evento){ alert(mensaje + "\n" + evento); } fucntion Cerrar(){ window.close(); } //--> </SCRIPT> </HEAD> <a name="arriba"></a> <BODY onLoad="Muestra('documento cargado','onLoad');" onUnload="Muestra('Adios','onUnload');"> <H3 align=center> Gestin de Eventos </H3> <A href=""

onClick="Muestra('Click sobre un link','onClick');" onMouseOver="Muestra('Colocado sobre el link','onMouseOver');" onMouseOut="Muestra('Te alejas del link','onMouseOut');"> Esto es un link</A> <p> <A href="#arriba" onClick="Muestra('Click sobre un link','onClick');" > Esto es otro link</A> <FORM METHOD=POST ACTION="" onSumit="Muestra('Enva le formulario','onSumit');" onReset="Muestra('Restaura valores del formulario','onReset');"> <TABLE> <TR> <TD>Pulse sobre este botn <TD> <INPUT TYPE="checkbox" onClick="Muestra('Has pulsado','onClick');"> <TD>Campo de edicin <TD> <INPUT TYPE="text" SIZE=14 onFocus="Muestra('Escriba','onFocus');" onBlur="Muestra('Has escrito','onBlur');" onChange="Muestra('Has escrito','onChange');"> <TR> <TD>Selecciones <TD> <SELECT Name="Seleccion" onChange="Muestra('Has elegido','onChange')"> <OPTION VALUE=Option1> Seleccin 1 <OPTION VALUE=Option2 SELECTED> Seleccin 2 <OPTION VALUE=Option3> Seleccin 3 </SELECT> <TR> <TD><INPUT TYPE="Reset" value=" Reset " onClick="Muestra('Has pulsado','onClick')"> <TD><INPUT TYPE="Submit" value=" Enviar " onClick="Muestra('Has pulsado','onClick')"> <TR> <TD><INPUT TYPE="button" value=" Cerrar " onClick="Cerrar()"> </TABLE> </FORM> </BODY>

Captulo 7:

Los objetos predefinidos

Entre los objetos predefinidos distinguiremos los objetos predefinidos por JavaScript y los que se crean cuando el cliente WWW carga un documento HTML.

7.1. Objetos predefinidos por el lenguaje JavaScript.

El lenguaje JavaScript posee objetos predefinidos, estos objetos nos premiten representar:

las cadenas de caracteres y los mtodos asociados. las constantes matemticas y las funciones matemticas. las fechas y los mtodos asociados.

7.1.1. El objeto string.

En cada asignacin de una cadena de caracteres a una variable o a una propiedad, JavaScript crea un objeto de tipo string. Por ejemplo:
//crea un objeto mystring de tipo string mystring = "Prueba";

El objeto string posee una sola propiedad, la propiedad length, que contiene el tamao de la cadena de caracteres representada por dicho objeto. Los mtodos asociados al objeto string se pueden clasificar en dos categoras:
7.1.1.1. Los de manipulacin

Estos mtodos extraen o modifican la cadena de caracteres. Estos mtodos permiten manipular la cadena de caracteres.
charAt(ndice) Extrae un caracter representado por el ndice especificado. ndice est entre 0 y length-1. indexOf(carcter) o indexOf(carcter,ndice) Devuelve el ndice de la primera ocurrencia del carcter. Tambin se le puede especificar el lugar por el que se quiere que empieze a buscar. lastIndexOf(cadena de caracteres)

Devuelve la ltima ocurrencia de la cadena de caracteres. substring(principo,fin) Extrae una cadena de caracteres entre un valor de ndice inicial y otro final. toLowerCase() Transforma una cadena de caracteres en minsculas. toUpperCase() Transforma una cadena de caracteres en maysculas. 7.1.1.2. Los de formato

Los siguientes mtodos permiten insertar cadenas de caracteres en marcas HTML. Sirven para generar cdigo HTML mediante scritps.
anchor(etiqueta) Transforma la cadena de caracteres en un ancla. Etiqueta es la cadena de caracteres que llevara el atributo NAME. big() Inserta la cadena de caracteres en la marca BIG. blink() Inserta la cadena de caracteres en la marca BLINK. bold() Inserta la cadena de caracteres en la marca B. fixed() Inserta la cadena de caracteres en la marca TT. fontcolor() Inserta la cadena de caracteres en la marca FONTCOLOR. fontsize() Inserta la cadena de caracteres en la marca FONTSIZE. italics()

Inserta la cadena de caracteres en la marca I. link(URL) Crea un enlace con el URL pasado. small() Inserta la cadena de caracteres en la marca SMALL. strike() Inserta la cadena de caracteres en la marca STRIKE. sub() Inserta la cadena de caracteres en la marca SUB. sup() Inserta la cadena de caracteres en la marca SUP.

7.1.2. El objeto Math.

El objeto Math predefinido posee propiedades y mtodos asociados a las constantes y funciones matemticas.

7.1.2.1. Los atributos de Math

E Constante matemtica que representa al nmero e. Su valor es 2.71828... LN2 Constante matemtica que representa al nmero resultado de calcular el logaritmo neperiano de 2. Su valor es 0.693... LN10 Constante matemtica que representa al nmero resultante de calcular el logaritmo neperiano de 10. Su valor es 2.303... PI Constante matemtica que representa al nmero PI . Su valor es 3.1416...

SQRT1_2 Constante matemtica que representa al nmero resultante de calcular la raiz cuadrada de 1/2. Su valor es 0.707... SQRT2 Constante matemtica que representa al nmero resultante de calcular la raiz cuadrada de 2. Su valor es 1.414213... 7.1.2.2. Los mtodos de Math abs(nmero) Devuelve el valor absoluto del nmero pasado por parmetros. acos(nmero) Devuelve el arco coseno del nmero pasado por parmetros. asin(nmero) Devuelve el arco seno del nmero pasado por parmetros. atan(nmero) Devuelve la arco tangente del nmero pasado por parmetros. ceil(nmero) Redondeo superior. cos(nmero) Devuelve el coseno del nmero pasado por parmetros. exp(nmero) Devuelve e elevado al nmero pasado por parmetros. floor(nmero) Devuelve la parte entera del nmero pasado por parmetros. log(nmero) Devuelve el logaritmo neperiano del nmero pasado por parmetros. max(nmero1, nmero2) Devuelve el mximo de dos valore.

min(nmero1, nmero2) Devuelve le mnimo de dos valores. pow(base, exponente) Devuelve el resultado de elevar la base al exponente. random() Devuelve el valor aleatorio entre cero y uno. round(nmero) Redondeo inferior. sin(nmero) Devuelve el seno del nmero pasado por parmetros. sqrt(nmero) Devuelve la raz cuadrada del nmero pasado por parmetros. tan(nmero) Devuelve la tangente del nmero pasado por parmetros.

7.1.3. El objeto Date.

El lenguaje JavaScript no posee variables tipo fecha, pero el objeto predefinido Date permiten la manipulacin de datos que representen fechas. Este objeto no posee propiedades pero posee un nmero importante de mtodos que permiten su actualizacin, la obtencin y la manipulacin de fechas. JavaScript gestiona las fechas como el lenguaje Java. Estos dos lenguajes comparten un gran nmero de mtodos que permiten la manipulacin de fechas y utilizan la misma referencia: 1 de enero de 1970. Se utilizar la sintaxis siguiente para crear un objeto de tipo de Date:
NombreVariable = new Date(parmetros)

donde NombreVariable es el nombre de la variable en JavaScript que representa al objeto creado. Esta variable puede ser un objeto o la propiedad de un objeto existente.

El constructor Date admite los parmetros siguientes:

ninguno, para crear un objeto que tenga la hora actual.

hoy = new Date();

una cadena de caracteres con el formato.

"Mes da, ao horas:minutos:segundos"

Por ejemplo:
fecha = new Date("January 6, 1996 14:50:00");

Si las horas, los minutos y los segundos se omiten, se ponen a cero.

tres enteros que representan el ao, el mes y el da. Por ejemplo:

fecha = new Date(79,2,12);

seis enteros que representan el ao, el mes, el da, la hora, los minutos y los segundos. Por ejemplo:
fecha = new Date(79,2,12,6,45,0);

Los valores de los distintos campos de fecha mediante nmeros enteros segn la convencin siguiente:

segundos y minutos: 0 a 59; horas: 0 a 23; das de la semana: 0 a 6; meses: 0 (enero) a 11 (diciembre); aos: nmero de aos desde 1970;

7.1.3.1. Los mtodos de Date

Entre los mtodos del objeto Date que veremos a continuacin podremos distinguir cuatro categorias bien diferenciadas:
o o o o

Aquellos que nos permiten acceder a la fecha y hora fijar la fecha y hora analizar las cadenas de caracteres que representan las fechas convertir las fechas en una cadena de caracteres

7.1.3.2. Clasificacin de mtodos.

getDate()

Devuelve el da del mes de 1 a 31. getDay() Devuelve el da de la semana de 0 (domingo) a 6 (sbado). getHours() Devuelve la hora de 0 a 23. getMinutes() Devuelve los minutos de 0 a 59. getSeconds() Devuelve los segundos de 0 a 59. getMonth() Devuelve el mes de un objeto Date. La salida es un valor entero entre 0 (Enero) y 11 (Diciembre). getTime() Devuelve el valor numrico correspondiente al objeto Date que lo llama, el valor de salida va referido al 1 de Enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fecha es posterior a la de referencia y con signo negativo si la fecha est antes de sta. getTimezoneOffset() Devuelve la diferencia con la zona GMT en minutos. getYear() Devuelve el ao. parse(ristra) Devuelve el nmero de milisegundos de una string que representa a una fecha con respecto a la ya conocida fecha de referencia del 1 de Enero de 1970 a las 00:00:00 horas. Para referenciar este mtodo no hemos de crear ninguna instancia del objeto Date, bastar con realizar lo siguiente:
var miliseg = Date.parse(string);

Por tanto, decimos que este mtodo es esttico.

setDate(nmero) Asigna el da del mes, donde nmero ser un valor entre 1 y 31. setHours(nmero) Asigna la hora, donde nmero ser un valor entre 0 y 23. setMinutes(nmero) Asigna los minutos, donde nmero ser un valor entre 0 y 59. setSeconds(nmero) Asigna los segundos, donde nmero ser un valor entre 0 y 59. setTime(nmero) Fija en valor numrico correspondiente al objeto Date que lo llama, el valor de entrada va referido al 1 de enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fecha es posterior a la referencia y negativo en caso contrario. setYear(nmero) Asigna el ao. toGMTString() Convierte una cadena de caracteres que representa un fecha al formato GMT. toLocaleString() Convierte una fecha al formato local. toString() Convierte convierte una fecha en una cadena de caracteres. UTC(ao, [mes], [da], [horas], [minutos], [segundos], [milisegundos]) Devuelve el nmero de milesegundos desde la fecha que se toma como referencia 1 de enero de 1970 a las 00:00:00, hasta la fecha del argumento de entrada. Decir que los campos horas, minutos y segundos son opcionales y si se omiten se considerarn cero. No es necesario crear una instancia del objeto de Date para usar este mtodo, ya que es un mtodo esttico. Por tanto, el mtodo se utilizar de la siguiente manera:
var miliseg = Date.UTC(parmetros);

7.2. Objetos propios del cliente WWW.

Cuando un cliente carga un documento HTML, crea los objetos correspondientes al documento, a su contenido y a la informacin til. Cada documento HTML crea los objetos siguientes:

window. Representa la raz del rbol, y posee descendientes cuando el documento contiene subventanas. location. Contiene las propiedades de la direccin URL del documento. history. Contiene la informacin relativa a las direcciones URL visitadas en la sesin actual. document. Contiene informacin sobre el documento actual como el ttulo, los formularios,... Las propiedades del objeto document dependen del contenido de la pgina HTML. Se crean en funcin del contenido de dicha pgina, algunas de estas propedades son objetos.

Adems de propiedades y mtodos, los objetos del cliente WWW posee tambin manejadores de eventos asociados. En este captulo se nombrarn slo los principales manejadores de eventos de cada objeto, si se quiere ms informacin se puede ir al captulo anterior.
7.2.1. La jerarqua de objetos asociados al cliente WWW.

El objeto creado por el cliente se describe de manera jerrquica y representa la estrutura jerrquica del documento HTML. Esta jerarqua es del tipo jerarqua instanciada porque es especfica de las instancias de objeto y no de la clase del objeto. En esta jerarqua, los descendinetes de un objeto se representan mediante propiedades del objeto. Por ejemplo, un formulario form1 es un objeto pero tambin es una propiedad del objeto document y ser referenciado como document.form1. Para referenciar una propiedad especfica a un objeto de esta jerarqua es necesario precisar sus ascendientes. En cualquier caso, la raz del rbol puede omitirse.

7.2.2. El objeto document.

El objeto document contiene la informacin respecto al objeto actual. Se define por la marca BODY. El contenido del documento se delimita por la secuencia <BODY>...</BODY>; y se puede acceder a las propiedades del objeto document. El objeto document contiene los eventos vistos anteriormente asociados a la marca BODY (onLoad, onUnLoad).
7.2.2.1. Las propiedades de document.

Las propiedades del objeto document depende de como sea la instancia en un momento dado. As, las propiedades del objeto document son:

alinkColor. Color RGB de los enlaces activados. En esta pgina:

document.alinkColor =

anchors. Propiedad del tipo objeto anchor que contiene los anclas (destino) de los enlaces hipertexto del documento. En esta pgina:
http://www.ulpgc.es/otros/tutoriales/JavaScript/cap6.htm

bgColor. Color RGB del fondo. En esta pgina:

document.bgColor = white

cookie. Cadena de caracteres que contiene el cookie asociado al recurso representado por el objeto. Captulo 9 fgColor. Color RGB del primer plano de un documento. En esta pgina:

document.fgColor =

forms. Propiedad del tipo objeto form que contiene los formularios presentes en el documento. Este objeto contendr propiedades de que permitirn acceder a cada uno de los elementos del formulario.
[object HTMLFormElement]

images Propiedad del tipo Image que contiene todas las imagenes presentes en el documento. En esta pgina.
document.images[0].src = http://www.ulpgc.es/otros/tutoriales/JavaScript/tabla10.gif

lastModified. Fecha de la ltima modificacin. En esta pgina:

document.lastModified = 02/17/2007 05:20:12

linkColor. Color RGB de los enlaces hipertexto. En esta pgina:

document.linkColor =

links. Propiedad del tipo link que contiene todos los enlaces del documento. As como sus propiedades. En esta pgina:
document.link[0] = http://www.ulpgc.es/otros/tutoriales/JavaScript/cap6.htm document.link[1] = http://www.ulpgc.es/otros/tutoriales/JavaScript/cap9.html

location. Propiedad del tipo location que contiene la direccin URL del documento. En esta pgina:
document.location = http://www.ulpgc.es/otros/tutoriales/JavaScript/cap7.html

title. Ttulo del documento HTML. En esta pgina:

document.title = Los objetos predefinidos

vlinkColor. Color RGB de enlaces accedidos. En esta pgina:

document.vlinkColor =

7.2.2.2. Los mtodos de document.

eval(expresin). Evala una expresin. Esta funcin la hemos estudiado en el captulo 5 como una funcin predefinida del lenguaje JavaScript, ya que as nos lo podemos encontrar en algunas bibliografas. write("cdigo HTML"). Genera cdico HTML en el documento. writeln("cdigo HTML"). Idntico a write pero inserta un retorno de carro al final. open("type MIME"). Abre un bfer para recoger los resultados de los mtodos write y writeln. Los tipos MIME tenidos en cuenta son:

Cuando se indica el tipo MIME, ste indica el tipo de bfer en el que se escribe. El tipo por defecto es text/html.

close(). Cierra el bfer. clear(). Borra el contenido de un documento.

7.2.3. El objeto window.

El objeto window creado por el navegador se encuentra en la raz de la jerarqua que describe el contenido del documento HTML. A este objeto se le asocian propiedades que permiten acceder al contenido del documento as como a los mtodos que permiten crear o destruir ventanas cliente y ventanas de dilogo. Al igual que el objeto document, los manejadores de eventos asociados, son los mismos que estn asignados a la marca BODY, es decir, onLoad y onUnLoad.
7.2.3.1. Las propiedades de window.

defaultStatus. Mensaje visualizado en el parte inferior de la ventana. frames. Matriz con particiones de la ventana. El campo frames.length representa el nmero de frames que se encuentran en una ventada. parent. Ascendiente de una particin tipo FRAME. Forma la ventana padre, es decir, la que contiene la marca FRAMESET, a partir de esta, se obtiene todas las subventanas o FRAMEs. self. Hace referencia a la ventana actual. status. Mensaje que ilustra el estado del cliente. top. Raz de la jerarqua de objetos definida por el cliente. window. Se refiere a la ventana actual.

7.2.3.2. Los mtodos de window.

alert("mensaje"). Crea una ventana de dilogo en la que se muestra el mensaje. Hacer doble click:

close(). Destruye la ventana del cliente actual.

confirm("mensaje"). Crea una ventana de confirmacin (OK/Cancel) en la que se visualiza la cadena de caracteres "mensaje". El valor devuelto es true si el usuario elige la opcin OK y false en caso contrario. prompt("mensaje","texto"). Crea una ventana de dlogo en la que se visualiza la cadena de caracteres "mensaje" y permite la edicin de una cadena de caracteres. El parmetro "texto" representa el valor predeterminado. Esta ventana, al igual que confirm, posee dos botones aceptar y cancelar. Si se pulsa aceptar este mtodo devolver el texto insertado por el usuario o el que se daba por defecto si el usuario no ha introducido nada, mientras que si se pulsa cancelar dicho mtodo devolver null. setTimeout(expresin, msec). Este mtodo evalua la expresin pasada como argumento despus de que el nmero de milisegundos msec haya pasado. clearTimeout(timeoutID). Anula la cuenta a atrs inicializada por el mtodo setTimeout e identifica la variable timeoutID. open("URL","WindowName","Caractersticas"). Crea una nueva ventana cliente, le asocia el nombre WindowName y accede al URL indicado, si ste campo se pasa "en blanco" obtendremos una ventana vaca. La Caractersticas son un conjunto de parmetros que describen las propiedades de la ventana. En la siguiente tabla podemos ver cada uno de estos parmetros con su significado.

A los parmetros height y width se les asigna el nmero de pixels, mientras que al resto se les asigna yes, 1 o true para aceptar el parmetro y no , 0 o false para denegarlo. Para ver un ejemplo sobre los mtodos open y close ir al apartado de la creacin de ventanas del captulo 8.
A continuacin veremos un ejemplo en el que utilizaremos los mtodos del objeto windows setTimeout y clearTimeout. Adems de trabajar con la propiedad status.

Pulsar para ver el ejemplo:

7.2.4. El objeto location.

Este objeto es el encargado de guardar la informacin del URL actual. Cada propiedad posee una parte del URL. Este objeto carece de mtodos y de manejadores de eventos. As, las propiedades del objeto location son las siguientes:

hash. Cadena de caracteres que representa el nombre del ancla definida por los caracteres tras el smbolo #. En esta pgina:
El URL actual carece de esta propiedad

host. Nombre de la mquina y puerto del URL actual.

location.host = www.ulpgc.es

hostname. Nombre de mquina del URL actual.

location.hostname = www.ulpgc.es

href. URL actual en forma de objeto string.

location.href = http://www.ulpgc.es/otros/tutoriales/JavaScript/cap7.html

pathname. El camino del recurso indicado en el URL.

location.pathname = /otros/tutoriales/JavaScript/cap7.html

port. Puerto precisado en el URL.

El URL actual carece de esta propiedad

protocol. Protocolo precisado en el URL.

location.protocol = http:

referrer. URL a partir de que el documento actual se consulta.

location.referrer = undefined

search. Parte del URL que caracteriza una consulta (a continuacin de ?)

El URL actual carece de esta propiedad

7.2.5. El objeto history.

Este objeto guarda la informacin sobre los URLs que el usuario ha visitado dentro de una ventana determinada. La informacin aqu guardada es la que se lee sobre el men Go del navegador. El objeto history, al igual que el location, no posee manejador de eventos.
7.2.5.1. Las propiedades de history.

length. Guarda el nmero de entradas en el documento. En esta pgina:

history.length = 24

current. URL de la pgina actual.

history.current =

7.2.5.2. Los mtodos de history.

back(). Accede al URL anterior forward(). Accede al documento siguiente contenido en el histrico. Para ver un ejemplo de estos dos mtodos ir al captulo 8. go("ndice" | "URL destino"). Carga el URL indicado en el ndice que se le pasa como argumento respecto del documento actual, current.Si el ndice es positivo iremos hacia delante en la lista de documentos, si por el contrario es negativo, iremos hacia atrs. Tambin podemos indicarle directamente el URL al que queremos ir. Cmo se ha realizado este ejemplo?

<form> <input type="button" value=" Ejemplo "

onClick="url=prompt('Introducir el url a visitar',''); history.go(url)"> </form>

7.2.6. El objeto link.

Un objeto link es un objeto que enlaza a otro URL mediante hipertexto. Cada enlace presente en un documento corresponde a un objeto que se coloca en la matriz links. As, se acceder al primer enlace mediante document.links[0], al segundo mediante document.links[1], y as sucesivamente. El objeto link carece de mtodos pero no de propiedades como veremos a continuacin. A continuacin analizaremos las propiedades de un link. Para ello, utilizaremos el primer link que se encuentra en esta pgina que es:
<a name="enlace1" href="cap6.htm" target="window">captulo anterior</a>

7.2.6.1. Las propiedades de link.

length. Tamao del objeto link. target. Indica la ventana de destino en la que se visualizar la respuesta de tratamiento del formulario. Se indica mediante el atributo TARGET de la marca A. host. Nombre de la mquina y puerto del URL enlazado. hostname. Nombre de mquina del URL enlazado. href. URL enlazado en forma de objeto string. pathname. El camino del recurso indicado en el URL. port. Puerto precisado en el URL. protocol. Protocolo precisado en el URL. search. Parte del URL que caracteriza una consulta (a continuacin de ?)

7.2.7. El objeto anchor.

Una anchor o ancla es una parte de texto que define una etiqueta para ser referenciada desde otro lugar por un enlace hipertexto.

Cada ancla presente en un documento corresponde a un objeto que se coloca en la matriz anchors. As, se acceder al primer enlace mediante document.anchors[0], al segundo mediante document.anchors[1], y as sucesivamente. Este objeto carece de mtodos y la nica propiedad que tiene es length que indica el tamao del objeto anchor. Tambin carece de eventos asociados al mismo.
7.2.8. El objeto form.

El cliente, el navegador, crea un objeto de tipo form por formulario contenido en el documento (especificado por la marca form. Cada formulario se identifica por el atributo NAME de la marca FORM. Es til hacer un formulario para mandar datos a un servidor. Cada formulario presente en un documento corresponde a un objeto que se coloca en la matriz forms. As, se acceder al primer formulario mediante document.forms[0], al segundo mediante document.forms[1], y as sucesivamente. Ocurre lo mismo con los distintos elementos de un formulario (texto, botones...) que se colocan en la matriz elements, permitiendo as un acceso simple y genrico a las propiedades del objeto form. El nico mtodo que posee este objeto es submit() que produce el envo de un formulario mediante uno de los mtodos selecionados en la propiedad que veremos a continuacin. Estos datos los recoger el cgi asignado en la prpiedad correspondiente del formulario. Este mtodo equivale al botn SUBMIT del formulario. Para ver las propiedades y los mtodos del objeto form construiremos el siguiente formulario:
<form name="formulario" action="programa.cgi" method="post" target="window" onSubmit="alert('Has ejecutado el mtodo sumit')"><br> Nombre y Apellidos: <input type="text" name="identificacion" size=50 onBlur="alert('Generado blur en identificacion')" onfocus="identificacion.value='Tengo el foco'" onSelect="alert('Generado Select en identificacion')"><br> <input type="button" name="comp" value="comprueba nombre" onClick="alert(this.form.identificacion.value)"> Sexo:<br> <input type="radio" name="sexo" value="Masculino" onClick="alert('Generado click en radiobutton')">Masculino<br> <input type="radio" name="sexo" value="Femenino" onClick="alert('Generado click en radiobutton')">Femenino<br> Aficiones:<br> <input type="checkbox" name="aficiones" value="Musica" onClick ="alert('Generado click checkbox')">Msica<br>

<input type="checkbox" name="aficiones" value="Deporte" onClick ="alert('Generado click checkbox')">Msica<br> <input type="checkbox" name="aficiones" value="Lectura" onClick ="alert('Generado click checkbox')">Lectura<br> <input type="checkbox" name="aficiones" value="Cine" onClick ="alert('Generado click checkbox')">Cine<br> <input type="checkbox" name="aficiones" value="Fotografia" onClick ="alert('Generado click checkbox')">Fotografa<br> <input type="checkbox" name="aficiones" value="Otros" onClick ="alert('Generado click checkbox')">Otros<br> Otras aficiones:<br> <input name="otrasAficiones" rows=15 cols=35 value="Escribe aqu" onBlur="alert('Generado blur en Otras aficiones')" onfocus="OtrasAficiones.value='Tengo el foco'" onSelect="alert('Generado Select en Otras aficiones')"><br> Tipo de revista que le gustara recibir: <select name="revista" onClick="alert('Click en revista')"> <option value="deportes">Deportes <option value="musica">Msica <option value="informatica" selected>Informtica <option value="ciencia">ciencia </select><br> Introducir Clave: <input type="password" name="clave" value="miclave" size=15 onBlur="alert('Generado blur en clave')" onfocus="clave.value=''" onSelect="alert('Generado Select en clave')"> <input type="hidden" name="valorclave" value="4657$?ab"> <p> <input type="reset" name="resetea" value="borrar" onclick="alert('Activado click de resetea')"> <input type="submit" name="submit" value="Enviar" onclick="alert('Activado click de submit')"> </form>
nombre + apellidos

Nombre y Apellidos: Sexo: Masculino Femenino Aficiones: Msica Deporte

Lectura Cine Fotografa Otros Otras aficiones:

Escribe aqu

Tipo de revista que le gustara recibir: Introducir Clave:

borrar Enviar
*******

Informtica

4657$?ab

El nico evento asociado con el objeto form es onSubmit.

7.2.8.1. Las propiedades de form.

action. String que representa el URL del cgi-bin que se encargar de la gestin de los datos que se le introducirn al formulario. Esta cadena de caracteres representa el valor del atributo ACTION.
formulario.action = http://www.ulpgc.es/otros/tutoriales/JavaScript/programa.cgi

method. Propiedad que indica el mtodo con el que el formulario enviar los datos al cgi que se encarga de tratarlos. Los mtodos son GET o POST que se identifican respectivamente por 0 1.
formulario.method = post

elements. Los elementos de un formulario (texto, botones...) se colocan en la matriz elements por orden de aparicin. Esta matriz permite as un acceso simple y genrico a las propiedades del objeto form.
formulario.elements[0] = text formulario.elements[1] = button formulario.elements[2] = radio formulario.elements[3] = radio formulario.elements[4] = checkbox formulario.elements[5] = checkbox formulario.elements[6] = checkbox formulario.elements[7] = checkbox formulario.elements[8] = checkbox formulario.elements[9] = checkbox formulario.elements[10] = text formulario.elements[11] = select-one formulario.elements[12] = password formulario.elements[13] = hidden formulario.elements[14] = reset formulario.elements[15] = submit

name. Cadena de caracteres que referencia el objeto. Se precisa mediante el atributo NAME.

target. Indica la ventana de destino en la que se visualizar la respuesta de tratamiento del formulario, en otras palabras, nombre del objeto window que responde al submit del formulario. Se indica mediante el atributo TARGET de la marca FORM
formulario.target = window

legth. Indica la longitud o el tamao del formulario.

formulario.length = 16

7.2.9. El objeto button.

Representa a un botn de un formulario y debe ser definido dentro del mismo. El nico mtodo que posee es click() el cual simula la pulsacin de dicho botn. Por otra parte, el evento que hay asociado al objeto es onClick.
Si se pulsa esta botn se disparar el evento onClick del botn Comprueba nombre del formulario de ejemplo.

Por otro lado, slo posee dos propiedades que son:

value. Guarda el nombre de la etiqueta de texto que aparece en el botn.

formulario.comp.value = comprueba nombre

name. String que guarda el nombre del objeto. Referencia al objeto.

7.2.10. El objeto checkbox.

Representa una opcin booleana (si o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de seleccin multiple (muchos de muchos). El evento asociado a checkbox es onClick Solamente posee el mtodo click() que produce la seleccin de una opcin. En cuanto a las propiedades, las nicas que posee son las siguientes:

name. String que guarda el nombre de un objeto checkbox. value. Es una string que representa el estado de seleccin de un elemento del objeto selecionado. Si el objeto seleccionado se enva tendr este valor en el servidor.
formulario.aficiones.value = undefined

checked. Esta propiedad contiene un valor booleano que especifica si un elemento determinado del checkbox est selecionado o no.
formulario.aficiones.checked = undefined

defaultChecked. Valor booleano que guarda el estado de seleccin por defecto del checkbox. Valdr true si el elemento est seleccionado. Equivale al atributo CHECKED de la marca CHECKBOX.
formulario.aficiones.defaultChecked = undefined

7.2.11. El objeto password.

Se trata de un campo de texto que esconde su contenido utilizando arteriscos (*). Es un elemnto del formulario por tanto se ha de definir dentro de ste. Los eventos asociados asociado son: onBlur, onChange y onSelect. Sus propiedades y mtodos los veremos en los dos aparados siguientes.
7.2.11.1. Las propiedades de password.

defaultValue. String indicando por defecto el valor del objeto password.

formulario.clave.defaultValue = miclave

value. Representa el valor del atributo VALUE. Puede modificarse en cualquier momento cambiando automticamente el valor representado en el documento y que el usuario ve en pantalla en forma de arterisco. La modificacin se har por programa o por el propio usuario. Valor del campo de texto identificacion del formulario ejemplo:

name. String que guarda el nombre del objeto password. Representa el valor del atributo NAME.

7.2.11.2. Los mtodos de password.

focus(). Seleciona el objeto password. blur(). Deseleciona el objeto password. select(). Activamos el objeto password.

Generacin de eventos para le text identificacin Notar que para poder generar el evento blur se ha de generar primero el focus o el select. Para generar dicho evento pase el mouse sobre el link. blur 7.2.12. El objeto radioButton.

Representa una opcin booleana (si o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de seleccin multiple (uno de muchos). Solamente posee el mtodo click() que produce la seleccin de una opcin y la deseleccin de otra. En cuanto a las propiedades, las nicas que posee son las siguientes:

name. String que guarda el nombre de un objeto radioButton.

value. Es una string que representa el estado de seleccin de un elemento del objeto selecionado. Si el objeto seleccionado se enva tendr este valor en el servidor.
formulario.sexo.value = undefined

checked. Esta propiedad contiene un valor booleano que especifica si un elemento determinado del radioButton est selecionado o no.
formulario.sexo.checked = undefined

defaultChecked. Valor booleano que guarda el estado de seleccin por defecto del checkbox. Valdr true si el elemento est seleccionado. Equivale al atributo CHECKED de la marca RADIO.
formulario.sexo.defaultChecked = undefined

length. Contiene el nmero de botones del radioButton. formulario.sexo.length = 2

7.2.13. El objeto reset.

Botn que resetea todos los elementos de un formulario y les da su valor por defecto. Un objeto reset es otro elemento del formulario y como tal debe ir definido dentro de l. El nico mtodo que posee es click() el cual simula la pulsacin de dicho botn de reset. El nico evento que tiene asignado es onClick. Como ejemplo generaremos el evento onClick del botn de reset del formulario de ejemplo:
Por otro lado, slo posee dos propiedades que son:

value. Guarda el nombre de la etiqueta de texto que aparece en el botn

formulario.resetea.value = borrar

name. String que guarda el nombre del objeto.

7.2.14. El objeto selection.

Es un men del formulario que consiste en una lista de seleccin de elementos representada en un men pop-up. En esta lista el usuario eligir un elemento o ms en funcin del tipo de lista de seleccin El nico mtodo que tiene es el click() que simula el clic del mouse para seleccionar un elemento. De manera anloga, slo tiene asignado el evento onClick. Como ejemplo de este evento generaremos el mismo en el select del formulario de ejemplo al pulsar el botn que hay a continuacin:
7.2.14.1. Las propiedades de selection.

defaultSelected. Valor booleano que guarda el estado de seleccin por defecto de una opcin. Valdr true si el valor est selecionado. Equivale true a poner SELECTED en la definicin del elemento OPTION en HTML.
formulario.revista.defaultSelected = undefined

selectedIndex. Guarda la opcin selecionada si se trata de una lista de una sola seleccin o la primera opcin escogida si se trata de una lista de seleccin.
formulario.revista.selectedIndex = 2

name. String que guarda el nombre del objeto selection. Representa el valor del atributo NAME. length. Nmeros de elementos del selection formulario.revista.length = 4 options. Array que contiene las distintas opciones del objeto selection
formulario.revista.options[0].value formulario.revista.options[1].value formulario.revista.options[2].value formulario.revista.options[3].value = = = = deportes musica informatica ciencia

7.2.15. El objeto submit.

Se trata de unos de los objetos imprescindibles en un formulario. Se trata de un botn que sirve para, una vez rellenados los campos del formulario, dar la orden de enviar todos los componentes al cgi especificado en la propiedad action de dicho formulario. As, se carga una nueva pgina en la ventana del cliente, que puede ser la misma u otra. Al igual que el resto de los componentes del formulario, el objeto submit se ha de definir dentro de ste. El nico mtodo que posee es click() el cual simula la pulsacin de dicho botn de submit. El manejador de evento asociado con este objeto es onClick. Como ejemplo generaremos el evento onClick del botn de submit del formulario de ejemplo:
Por otro lado, slo posee dos propiedades que son:

value. Guarda el nombre de la etiqueta de texto que aparece en el botn. formulario.submit.value = borrar name. String que guarda el nombre del objeto.

7.2.16. El objeto text.

Este objeto define un campo de texto en un formulario. Permite introducir una palabra, una frase y tambin nmeros. Los manejadores de eventos asociados son onBlur, onChange y onSelect.
7.2.16.1. Las propiedades de text.

defaultValue. String indicando por defecto el valor del objeto text.

formulario.identificacion.defaultValue = nombre + apellidos

value. Representa el valor del atributo VALUE. Puede modificarse en cualquier momento cambiando automticamente el valor representado en el documento y que el usuario ve en pantalla. La modificacin se har por programa o por el propio usuario.

Valor del campo de texto identificacion del formulario ejemplo:

name. String que guarda el nombre del objeto text. Representa el valor del atributo NAME.

7.2.16.2. Los mtodos de text.

focus(). Seleciona el objeto text. blur(). Deseleciona el objeto text. select(). Activamos el objeto text.

Generacin de eventos para le text identificacin Notar que para poder generar el evento blur se ha de generar primero el focus o el select. Para generar dicho evento pase el mouse sobre el link. blur 7.2.17. El objeto textArea.

Un objeto textArea define un campo de texto multilinea que es parte de un formulario y como tal se deber definir dentro de ste. Dentro de textArea podemos incluir palabras sueltas, frases y nmeros. Los manejadores de eventos asociados son onBlur, onChange y onSelect.
7.2.17.1. Las propiedades de textArea.

defaultValue. String indicando por defecto el valor del objeto textArea.

formulario.otrasAficiones.defaultValue = Escribe aqu

value. Representa el valor del atributo VALUE. Puede modificarse en cualquier momento cambiando automticamente el valor representado en el documento y que el usuario ve en pantalla. La modificacin se har por programa o por el propio usuario.
formulario.otrasAficiones.value = Escribe aqu

cols Representa el nmero de columnas.

formulario.otrasAficiones.cols = undefined

rows Representa el nmero de filas.

formulario.otrasAficiones.rows = undefined

name. String que guarda el nombre del objeto textArea. Representa el valor del atributo NAME.

7.2.17.2. Los mtodos de textArea.

focus(). Seleciona el objeto textArea. blur(). Deseleciona el objeto textArea. select(). Activamos el objeto textArea.

Generacin de eventos para le textArea identificacin Notar que para poder generar el evento blur se ha de generar primero el focus o el select. Para generar dicho evento pase el mouse sobre el link. blur 7.2.18. El objeto frame.

Un objeto frame es una ventana que se subdivide en partes o marcos que albergan cada uno distintos objetos document o si se entiende mejor, distintos URLs. Al referirnos a un objeto frame lo haramos normalmente utilizando su nombre. Pero, dependiendo de a que frame deseemos hacer referencia tendremos que referenciarlo de una forma u otra. As, si queremos referirnos al frame actual, podemos utilizar su nombre o tambin los atributos window o self que son equivalentes. Por otro lado, si utilizamos como nombre de frame top nos estamos refiriendo a la ventana ms externa que contiene frames. Tambin, si utilizamos como nombre parent nos estamos refiriendo a la ventana que contiene nuestro frame por medio de FRAMESET. Por otro lado, decir que el objeto frame no posee manejadores de eventos asociados.
7.2.18.1. Las propiedades de frame.

frames. Arrays de objetos correspondientes a las ventanas hijas de unas determinadas ventanas. name. String que guarda el nombre del objeto frame. length. Valor entero que indica el tamao o la longitud de un objeto frame parent. La propiedad parent es sinnimo de una ventana cuyo frameset contenga al frame actual. Se puede explicar de otra forma diciendo que un objeto window se refiere al objeto window parent como a la ventana que contiene a la actual. Para ello esta la ventana actual debe ser un frame. self. Propiedad sinnimo del objeto window o frame actual. Esta propiedad es de slo lectura y se utiliza para ver el cdigo ms claro y evitar ambigedades con los nombres de elementos del formulario que coincidad con los nombres de propiedades de la ventana. window. Propiedad que se refiere a la ventana actual. Es equivalente a self.

7.2.18.2. Los mtodos de frame.

setTimeout(expresin, msec). Este mtodo evalua la expresin pasada como argumento despus de que el nmero de milisegundos msec haya pasado. clearTimeout(timeoutID). Anula la cuenta a atrs inicializada por el mtodo setTimeout e identifica la variable timeoutID.

Los ejemplos del objeto frame son muy similares a los del objeto window por eso no aportamos ninguno en esta seccin.

7.2.19. El objeto hidden.

Se trata de un objeto componente de un formulario y se deber definir dentro del mismo. Este elemento, no puede ser visto o modificado por el usuario. Pero si podemos modificar su valor por programa actuando sobre la propiedad value. Este objeto va a ser muy til en la comunicacin cliente-servidor. Este objeto carece de mtodos y de manejadores de eventos y slo posee dos propiedades que son:

value. Guarda el nombre de la etiqueta de texto que aparece en el botn. formulario.valorclave.value = 4657$?ab name. String que guarda el nombre del objeto.

7.2.20. El objeto navigator.

Guarda la informaci sobre el navegador en uso. Este objeto carece de mtodos y de manejadores de eventos y slo posee cuatro propiedades que son:

appCodeName. Guarda el cdigo del navegador. Propiedad de slo lectura.

navigator.appCodeName = Mozilla

appName. Guarda el nombre del navegador. Propiedad de slo lectura.

navigator.appName = Netscape

appVersion. Guarda la versin del navegador. Propiedad de slo lectura.

navigator.appVersion = 5.0 (Windows; es-ES)

userAgent. Guarda la cabecera llamada User-Agent que se manda en un protocolo HTTP desde el cliente hasta el servidor. Este valor lo usa el servidor para identificar al cliente. Esta propiedad contiene el valor de las propiedades appName y appVersion. Es una propiedad de slo lectura.
navigator.userAgent = undefined

7.2.21. El objeto screen.

Con este objeto podremos averiguar la configuracin de la pantalla. Este objeto slo tiene propiedades y stas son de slo lectura. Las propiedades son las siguientes:

height. Altura. En nuestro caso:

screen.height = 768

width. Anchura. En nuestro caso:

screen.width = 1366

colorDepth. Nmero de colores. En nuestro caso:

screen.colorDepth = 24

7.2.22. El objeto image. El objeto image es el encargado de contener y de tratar las imgenes que utilizamos en nuestros documentos html. Cada objeto es equivalente a introducir en nuestro documento el tag IMG. Para una vez creado el objeto image poder visualizarlo se debe introducir en el vector de imagenes del objeto document

Esta imagen se define de la siguiente manera:

<img src="Canarias.gif" name="canary" border=0 alt="Islas Canarias" align="middle">

A continuacin veremos un ejemplo de uso del objeto Image. Su cdigo fuente es el siguiente:
// Esta funcin va en el HEAD function CambiarImage(nombre){ var imagen = new Image(); imagen.src = "Foto.gif"; document[nombre].src=imagen.src; } ... <form> Cambiar de imagen: <input type="button" value="cambiar" onclick="CambiarImage('canary')"> </form>

Cambiar de imagen: Este objeto carece de mtodos pero no de propiedades. Estas propiedades del objeto Image son las mismas que las del TAG IMG. Estas propiedades son las siguientes:

src. Localizacin de la imagen. width. Anchura de la imagen. height. Altura de la imagen. alt. Texto para especificar en lugar de la imagen. name. Nombre para referenciar a la imagen. border. Anchura del marco que rodea a la imagen. Si border=0, la imagen carece de marco. vspace. Regulacin del flujo del texto a lo largo de la imagen verticalmente. hspace. Regulacin del flujo del texto a lo largo de la imagen horizontalmente. align. Se encarga de la posicin de la imagen. Puede tomar los siguientes valores: 1. bottom: Alinear la base de la imagen con la lnea actual. 2. top: Alinear la parte superior de la imagen con la lnea actual. 3. middle: Alinear el centro de la imagen con la lnea actual. 4. left: Flotar la imagen por la izquierda. 5. right: Flotar la imagen por la derecha.

Para terminar con el objeto image realizaremos un ejemplo que es muy utilizado por los creadores de pginas web. Se trata de un cambio de imagenes, es decir, hay un grfico inicialmente y al pasar por encima del mismo se podr observar que el grfico cambia. Se puede observar que para esto hace falta el evento onMouseOver y que el objeto Image carece de eventos, pues, para solucionar este problema se coloca la imagen detro de un link que si posee dicho envento. El cdigo fuente necesario para solucionar este evento es el siguiente:
<HEAD> <SCRIPT language="JavaScript"> <!-if (document.images) { var activado = new Image(); activado.src="image1.gif"; var desactivado= new Image(); desactivado.src="image2.gif"; } function activar(nombreImagen) { if (document.images) { document[nombreImagen].src=activado.src; } } function desactivar(nombreImagen) { if (document.images) { document[nombreImagen].src=desactivado.src; } } //--> </SCRIPT> </HEAD> <BODY> ... <A NAME="#alli"></A> ...

<center> <A HREF="#alli" onMouseOver="activar('prueba');" onMouseOut="desactivar('prueba');"> <IMG NAME="prueba" SRC="image1.gif" BORDER=0></A> </center> ... </BODY>

Captulo 8:
Aplicaciones prcticas
El lenguaje JavaScript permite una descentarlizacin parcial o total del tratamiento de la informacin hacia la plataforma del cliente. Las ventajas son considerables. En efecto, la gestin de las peticiones efectuadas por los usuarios solicita permanentemente al servidor WWW y depende en gran medida de la velocidad de la red. Este problemas es ms importante cuando el usuario accede a documentos dinmicos. Estos necesitan no slo una transferencia de datos sino adems un tratamiento previo de la solicitud. As, la verificacin del contenido de un formulario necesita de varias transacciones por parte del cliente. ste enva el formulario, el servidor verifica el contenido y la validez de las respuestas y seguidamente, restransmite de nuevo hacia el cliente el resultado del tratamiento del formulario. La verificacin del contenido del formulario, as como la generacin del cdigo HTML, representan generalmente la parte ms importante del tratamiento de la solicitud. Adems, la verificacin del contenido puede generar un nmero importante de comunicaciones cliente/servidor costosas en tiempo y en recursos CPU del servidor.

El lenguaje JavaScript permite descentralizar una parte del tratamiento de la solicitud y ofrece una interactividad aumentada porque deja al cliente en condiciones de detectar ciertos eventos. Veremos en los ejemplos siguientes como utilizar recursos para mejorar las comunicaciones cliente/servidor y proponer interfaces HTML ms interactivas que las basadas en CGI.

8.1. Los marcos.

Los marcos permiten dividir la pgina HTML en varias regiones. Cada una de estas regiones es independiente y puede modificarse por separado. Para ello es necesario conocer la representacin de objeto utilizada por JavaScript para representar estas regiones: una ventana de navegacin y una ventana que representa al objeto actual. Esta pgina HTML contiene tambin la definicin de la funcin view_doc que permite visualizar la estructura de un documento. Este ejempo se describe a continuacin:
<HEAD> <SCRIPT> function view_doc(obj, obj_name){ var result="", i=""; for(i in obj) result += obj_name + "." + i + " = " + obj[i] + "<br>\n"; return result; } </SCRIPT> </HEAD> <FRAMESET ROWS="15%, 85%"> <FRAME NAME="menu" SCR="nav.htm"> <FRAME NAME="doc" SCR="doc.htm"> </FRAMESET>

Cada marco puede acceder a la estructura del documento definindolo mediante la funcin parent. Tambin podr acceder a las funciones definidas en los otros marcos utilizando la construccin:
parent.FrameName.fucntionName

donde FrameName corresponde al valor del atributo NAME de la marca FRAME. As, se podr acceder a la funcin view_doc definida en el documento como:
parent.view_doc(parent,"parent");

La estructura del objeto descrito por el cdigo HTML anterior es:

parent.length = 2; parent.frame[0].name = "menu";

parent.frame[1].name = "doc";

Las variables JavaScript son locales al documento. As, para llamar a una funcin definida en otro marco y cuyos parmetros son variables locales, es necesario precisar explcitamente el marco al que pertenecen estas variables. Por ejemplo, para acceder a partir del marco Frame1 a la funcin FuncName definida en el marco Frame2, se utilizar:
parent.Frame2.FuncName(parent.Frame1.Variables)

De igual modo, para ejecutar la funcin FuncName, definida localmente, y cuyos parmetros se declaran en el marco Frame2 se utilizar:
FuncName(parent.Frame2.Variables)

El ejemplo anterior define un men de navegacin. Este men, insertado mediante la marca HTML:
<FRAME NAME="menu" SRC="nav.htm">

se refiere al archivo HTML nav.htm decrito como:

<HEAD> <TITLE> Men de navegacin </TITLE> </HEAD> <BODY> <FORM> <CENTER><TABLE> <TR> <TD><INPUT type=button Value=" Inicio " onClick="parent.doc.location='Inicio.html'"> <TD><INPUT type=button Value=" << Atrs << " onClick="parent.doc.history.back()"> <TD><INPUT type=button Value=" >> Adelante >> " onClick="parent.doc.history.forward()"> </TABLE></CENTER> </FORM> </BODY>

8.2. La creacin de ventanas.

La creacin de nuevas ventanas resuelve en parte estos problemas y permite la creacin de ventanas de dilogo para una mejor utilizacin de la interfaz. Adems el lenguaje JavaScript permite referenciar las diferentes ventanas creadas. En el siguiente ejemplo consideraremos al funcin JavaScript CreateWindow, que permite crear una ventana en la que se visualiza la imagen cuyo URL se pasa como argumento.

<HEAD> <TITLE> Crear una ventana </TITLE> <SCRIPT> function CreateWindow(Image, Tittle, Width, Height) { var htmlpage = " "; var win_opt = "toolbar=0, location=0, directories=0, status=0,"; win_opt += "menubar=0, scrollbars=0, resizable=0, copyhistory=0,"; win_opt += "width=" + Width + ",height=" + Height; // Crear una nueva ventana NewWindow = window.open("","Title",win_opt); // Generacin del contenido de la pgina NewWindow.document.open(); htmlpage += "<HTML><HEAD><TITLE>" + Title + "</TITLE>"; htmlpage += "</HEAD><BODY>" htmlpage += "<CENTER><B><FONT SIZE=+1>" + Title + </FONT>"; htmlpage += "</B><HR>"; htmlpage += "<IMG HSPACE=0 VSPACE=0 HEIGHT=100 WIDTH=100 SRC=" + Image + ">"; htmlpage += "<HR><FORM>"; htmlpage += "<INPUT Type='button' Value='Close' onClick='window.close()'>"; htmlpage += "</FORM>"; htmlpage += "</CENTER>"; htmlpage += "</BODY></HTML>"; NewWindow.document.write(htmlpage); NewWindow.document.close(); } </SCRIPT> </HEAD> <BODY> <H3 Aling="center"> Creacin de ventanas <HR></H3> <FORM><CENTER><TABLE> <TR> <TD><INPUT Type="button" Value="Crea Ventana" onClick="CreateWindow('foto.gif','Nueva Ventana',300,230)"> <TD><INPUT Type="button" Value="Cerrar Ventana" onClick="NewWindow.close()"> </TABLE></CENTER></FORM> <BODY>

As, la ventana se crea cuando se pulsa el botn Crea Ventana.

8.3. Verificacin del contenido de un formulario.

La marca INPUT permite editar informacin proporcionada por el usuario. Esta informacin debe varificarse antes de su utilizacin. As, una direccin electrnica debe ser objeto de una verificacin porque puede ser el origen de graves problemas de seguridad. La

funcin JavaScript VerifyEmail listada seguidamente permite verificar que la direccin email es coherente, es decir, que contiene el smbolo arroba (@) y que no contiene ninguno de los caracteres siguientes:
;/:<>*|'&$!#()[]{}'"
function VerifyEmail(form){ email=form.Email.value; if(email.indexOf('@',0)==-1 || email.indexOf(';',0)!=-1 || email.indexOf(' ',0)!=-1 || email.indexOf('/',0)!=-1 || email.indexOf(';',0)!=-1 || emial.indexOf('<',0)!=-1 || email.indexOf('>',0)!=-1 || email.indexOf('*',0)!=-1 || email.indexOf('|',0)!=-1 || email.indexOf('`',0)!=-1 || email.indexOf('&',0)!=-1 || email.indexOf('$',0)!=-1 || email.indexOf('!',0)!=-1 || email.indexOf('"',0)!=-1 || email.indexOf(':',0)!=-1) { alert("Direccin incorrecta"); } }

Tambin se pueden hacer diferentes pruebas sobre el texto entrado por el usuario. Las funciones VerifySpace, VerifyLength y VerifyNumeric listadas a continuacin permiten respectivamente asegurarse de que:

El texto entrado no contien una cadena de espacios en blanco.

function VerifySpace(form){ text = form.Space.value; if(text.indexOf(' ',0)!=-1) { alert("Escriba una cadena de caracteres sin espacios."); return false; } else return true; }

El tamao de texto escrito es conforme al mnimo fijado.

function VerifyLength(form, minimo){ text = form.Length.value; if(text.length > minimo) { alert("La cadena de caracteres es mayor de la permitida."); return false; } else return true; }

El texto escrito representa valores numricos.

function VerifyNumeric(form){ text = form.Length.value; for(var i=0; i<text.length; i++) {

var ch=text.substring(i,i+1); if(ch < "0" || ch > "9") { alert("Escriba una valor numrico."); return false; } else return true; }

Estas diferentes funciones se insertan en la cabecera del documento mediante la marca SCRIPT y se invocan a partir de los distintos campos de edicin INPUT cuando se detecta el evento onChange. Este evento se caracteriza por la tecla TAB que permite validar el contenido de la edicin. Para ms informacin sobre la gestin de eventos ir al captulo 6. Un buen ejemplo de ello ser el siguente formulario:
<FORM> <CENTER<>H3<>U>Comprobacin de contenido</U<>H3<>CENTER> <TABLE> <tr<>td>Email: <td<>input type="text" name="Email" onChange="VerifyEmail(this.form)"> </tr> <tr<>td>Una cadena de caracteres: <td<>input type="text" name="Space" onChange="VerifySpace(this.form)"> </tr> <tr<>td>Mximo tres caracteres: <td<>input type="text" name="Length" onChange="VerifyLength(this.form, 3)"> <tr<>td>Un valor numrico: <td<>input type="text" name="Numeric" onChange="VerifyNumeric(this.form)"> </tr> </TABLE> </FORM>

Comprobacin de contenido Email: Una cadena de caracteres: Mximo tres caracteres: Un valor numrico:
juangui

123

123456

ab

Captulo 9:
Los cookies
9.1. Qu son los cookies?.
Los cookies representan mecanismos que permiten al servidor almacenar en el cliente informacin relativa a la transaccin. As, cuando el servidor responde a una peticin del cliente, inserta una informacin que se conservar en el cliente. Esta informacin es una descripcin relativa a un conjunto de direcciones URL. En adelante, ser insertada por el cliente en una peticin que referencie estas direcciones URL y se denomina un cookie. Este mecanismo, muy simple, proporciona una herramienta potente para numerosas aplicaciones gestionadas por el Web.

9.2. Propiedades de los cookies.

Antes de empezar a enumerar las distintas propiedades de los cookies debemos apuntar que un cliente no puede memorizar ms de 300 cookies. El tamao mximo de cada cookie es de 4000 bytes. Adems, el cliente no puede memorizar ms de 20 cookies por servidor. Una vez dicho esto, vamos a enumerar las distintas propiedades de los cookies:
Nombre = Valor Esta cadena de caracteres permite asociar a cada variable un valor especfico. Los caracteres espacio, punto y coma; y coma, no pueden figurar en la cadena de caracteres. Si estos caracteres forman parte del nombre de la variable o del valor asignado, deben remplazarse por su codificacin URL respectiva. La presencia de este campo es obligatoria. expires = Fecha El atributo expires especifica la fecha de caducidad del cookie. Cuando llega esta fecha, el cookie ser borrado por el cliente y dejar de insertarse en transacciones futuras. La fecha debe especificarse en el formato siguiente: WeekDay, DD-Month-YY HH:MM:SS GMT

Este campo es opcinal. Si no se indica, el cookie se borrar al terminar la sesin. Por otra lado, tambin se utiliza esta propiedad para borrar un cookie, esto se har introduciendo dicha propiedad con una fecha pasada.

domain = nombre_mbito Cuando el cliente busca el cookie aplicable a un servidor dado, este campo permite identificar el cookie correspondiente al servidor accedido. Cuando se pueden aplicar varios cookies, el campo path se evala una bsqueda ms completa. Tales situaciones se producen cuando el campo domain representa un mbito IP. Por ejemplo, si el campo especificado es domain="ulpgc.es", los cookies memorizados para este mbito se aplicarn tamnin a los servidores azuaje.ulpgc.es y pracgsi.ulpgc.es. En ciertos mbitos como los "COM", "EDU", "NET", "ORG", "GOV", "MIL" e "INT", es obligatorio especificar los mbitos conteniendo tres puntos, es decir, especificando tambin los submbitos. El valor predeterminado de este campo corresponde al servidor HTTP que haya inicializado el cookie. path = camino El atributo path permite asignar el cookie a un conjunto de recursos identificados por el camino. Cuando el cookie a sido asociado previamente a un servidor mediante el atributo domain, el URL del recurso se compara con el atributo path. Si este ltimo est presente en el URL entonces el cookie es vlido y el cliente lo inserta en la peticin. Por ejemplo, el atributo path="/foo" se aplicar a los recursos "foobar" y "/foo/bar.html". El atributo path="/" permitir aplicar al cookie todos los recursos consultados. El valor predeterminado de path corresponde la documento consultado. secure Un cookie que contenga este campo es insertado por el cliente cuando la conexin clienteservidor es segura. Es el caso por ejemplo cuando se utiliza el protocolo HTTPS. Cuando este atributo est ausente, el cookie se transmite independientemente del protocolo HTTP considerado.

9.3. La definicin de cookies.

Como ya hemos visto anteriormente, el inters que presenta la utilizacin de cookies para memorizar las propiedades relativas a un recurso especfico. Estas propiedades se pueden definir de dos maneras:
1. Mediante una llamada la Servidor HTTP. En este caso, un cookie es iniciado por el servidor insertando al directiva Set-Cookie en la cabecera de la respuesta HTTP. Esto se generaliza mediante un script CGI con la siguiente sintaxis:
Set-Cookie: Nombre=Valor; expires=Fecha; path=Camino; domain=Nombre_mbito; secure

2. Utilizando JavaScript. Como veremos en la seccin siguiente con ms detenimiento mediante un ejemplo, tambin puede definirse mediante la propiedad cookie del objeto document. Esto permite la definicin local de propiedades de un cookie sin intervencin del servidor WWW. As, la gestin y la memorizacin de los cookies las lleva a cabo el cliente.

9.4. Ejemplo de definicin de cookies mediante JavaScript.

En el ejemplo siguiente, asociaremos a un recurso las propiedades username y lastime que permiten asociar a un cliente un nombre de usuario y la fecha de ltimo acceso al recurso. Para ello las funciones GetCookie y SetCookie permiten respectivamente la bsqueda y la definicin de una propiedad. Estas funciones actn sobre la cadena de caracteres document.cookie que contiene las propiedades asociadas al recurso. Estas funciones utilizan las funciones predefinidas escape y unescape que permiten respectivamente codificar y decodificar una cadena de caracteres en formato URL. La funcin GetCookie posee dos argumentos que son el nombre de la propiedad y la cadena de caracteres que representa los cookies asociados al documento. Esta funcin devuelve el valor de la propiedad cuando sta aparece definida.

function GetCookie (name, InCookie) { var prop = name + "="; // propiedad buscada var plen = prop.length; var clen = InCookie.length; var i=0; if (clen>0) { // Cookie no vaco i = InCookie.indexOf(prop,0); // aparicin de la propiedad if (i!=-1) { // propiedad encontrada // Buscamos el valor correspondiente j = InCookie.indexOf(";",i+plen); if(j!=-1) // valor encontrado return unescape(InCookie.substring(i+plen,j)); else //el ltimo no lleva ";" return unescape(InCookie.substring(i+plen,clen)); } else return ""; } else return ""; }

La funcin SetCookie permite inicializar o borrar un cookie. Posee al menos dos argumentos correspondientes a la propiedad y a su valor. Estos argumentos pueden completarse con los diferentes campos de un cookie.

function SetCookie (name, value) { // nmero de parmetros variable. var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; // asociacin de parmetros a los campos cookie. var expires = (argc > 2) ? argv[2] : null var path = (argc > 3) ? argv[3] : null var domain = (argc > 4) ? argv[4] : null var secure = (argc > 5) ? argv[5] : false // asignacin de la propiedad tras la codificacin URL document.cookie = name + "=" + escape(value) + ((expires==null) ? "" : ("; expires=" + expires.toGMTString())) + ((path==null) ? "" : (";path=" + path)) + ((domain==null) ? "" : ("; domain=" + domain)) + ((secure==true) ? "; secure" : ""; }

La signacin de propiedades username y lasttime se hace mediante la funcin RecordUsernameAndTime, que asocia a estas propiedades una fecha de caducidad.

Este cookie tambin puede ser anulado por el usuario mediante la funcin DeleteUsernameAndTime. sta es similar a la funcin de inicializacin, pero especifica una fecha de caducidad pasada.

function DeleteUsernameAndTime (username) { var today = new Date(); var expire = new Date("Feb 12, 1980"); // fecha pasada // Asignacin de la propiedad username SetCookie("username", username.value, expire); // Asignacin de la propiedad lastime SetCookie("lastime", today.getTime(), expire); alert("El cookie " + username + " se ha borrado"); return true; }

Ejemplo de uso

Mediante este ejemplo trataremos de usar las funciones que acabamos de ver, de esta manera, permitiremos al usuario inicializar un cookie. El nombre proporcionado por el usuario as como la fecha del ltimo acceso se mostrarn en cada nuevo acceso. Para ello implementaremos lo siguiente:
<HEAD> <TITLE> JavaScript Cookies <TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-// Aqu van las funciones que hemos construido en esta captulo //--> </SCRIPT> </HEAD> <body background="bg1.jpg" vlink="#0000FF" alink="#FF0000" link="#FF1493" text="#000000"> <script language="JavaScript"> <!-// Cookies asociadas al documento actual var InCookie = document.cookie; var msg = " "; // buscamos la propiedad username var username = GetCookie("username",document.cookie); // buscamos la propiedad lastime var last = GetCookie("lastime",document.cookie); if ( username.length != 0) {// Cliente identificado por el Cookie msg += "<h2> Buenos das, " + username + "!! </h2>"; // Muestra la fecha del ltimo acceso var lastime = new Date(last); lastime.setTime(last); // Transforma el formato fecha msg += "ltimo acceso de esta pgina: " + lastime + "<br>"; // Creacin del botn de eliminar el cookie msg += "<form onSubmit = 'DeleteUsernameAndTime(username)'>"; msg += "<input type='submit' value=' Anulacin del cookie '>"; msg += "</form><br>"; } else{ // Primer acceso // Creacin de un formulario que permite inicializar el cookie msg += "<h2> Primer acceso, </h2>"; msg += "<form onSubmit='RecordUsernameAndTime(username)'>"; msg += "<h3>su nombre?</h3>"; msg += "<input type='text' name='username' size=12 "; msg += "OnChange='if(this.value.length > 0){this.focus();this.select();}"; msg += "else{alert('Insertar una cadena de caracteres');}'>"; msg += "<input type='submit' value='Inicializar el cookie'>"; msg += "</form><br>"; }

document.write(msg); //--> </script> </body>