Tutor 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>
<-- 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:
10*2
20
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>

</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);
vector= new
CreaArray(numele);
pos=1">

</tr>
<tr>
<td>Elementos:
<input type="text" name="elemets" size=3>
<td>
<input type="button" value=" insertar "
onClick="alert('Insertar elemento '+pos);
AsignaElemento(this.form,vector,pos);
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.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
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.
2.
3.
4.
Nmeros: enteros y reales.

Valores booleanos: true y false.
Strings.
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;]
[break;]
[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.ch
ar.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.fo
rm.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.i
nt.value, 10)">
Expresar entero en decimal<br>
value="hexadecimal"
nt.value, 16)">
Expresar entero en hexadecimal<br>
value="octal"
nt.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
<TR>
<OPTION VALUE=Option3> Seleccin 3

</SELECT>
<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
calcular la raiz cuadrada de 1/2. Su valor es 0.707...
SQRT2
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 =
#0000ff
anchors. Propiedad del tipo objeto anchor que

contiene los anclas (destino) de los enlaces hipertexto
del documento. En esta pgina:
http://www.cicei.com/gsi/tutorial_javascr
ipt/cap6.htm
bgColor. Color RGB del fondo. En esta pgina:

document.bgColor =
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 =
#ffffff
#000000
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]
images Propiedad del tipo Image que contiene todas

las imagenes presentes en el documento. En esta
pgina.
document.images[0].src =
http://www.cicei.com/gsi/tutorial_javascrip
t/tabla10.gif
lastModified. Fecha de la ltima modificacin. En

esta pgina:
document.lastModified =
09:37:54
12/18/2001
linkColor. Color RGB de los enlaces hipertexto. En

esta pgina:
document.linkColor =
#0000ff
links. Propiedad del tipo link que contiene todos los

enlaces del documento. As como sus propiedades. En
esta pgina:
document.link[0] =
t/cap6.htm
document.link[1] =
t/cap9.html
location. Propiedad del tipo location que contiene la

direccin URL del documento. En esta pgina:
document.location =
t/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 =
#800080
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.cicei.com
hostname. Nombre de mquina del URL actual.

location.hostname = www.cicei.com
href. URL actual en forma de objeto string.

location.href =
http://www.cicei.com/gsi/tutorial_javascript/cap7.html
pathname. El camino del recurso indicado en el URL.

location.pathname =
/gsi/tutorial_javascript/cap7.html
port. Puerto precisado en el URL.

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 ?)
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 =
current. URL de la pgina actual.

history.current =
undefined
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.

enlace1.length = undefined
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.
enlace1.target = window
enlace1.host = www.cicei.com:80
hostname. Nombre de mquina del URL enlazado.

enlace1.hostname = www.cicei.com
href. URL enlazado en forma de objeto string.

enlace1.href =
t/cap6.htm
pathname. El camino del recurso indicado en el

URL.
enlace1.pathname =
gsi/tutorial_javascript/cap6.htm
port. Puerto precisado en el URL.
protocol. Protocolo precisado en el URL.
search. Parte del URL que caracteriza una consulta (a

continuacin de ?)
enlace1.port = 80
enlace1.protocol = http:
enlace1.search =
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>
value="Deporte"
checkbox')">Msica<br>
value="Lectura"
checkbox')">Lectura<br>
<input type="checkbox" name="aficiones" value="Cine"
checkbox')">Cine<br>
value="Fotografia"
checkbox')">Fotografa<br>
value="Otros"
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 y Apellidos:
nombre + apellidos
Sexo:
Masculino
Femenino
Aficiones:
Msica
Deporte
Lectura
Cine
Fotografa
Otros
Otras aficiones:
Escribe aqu
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.
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.action = programa.cgi
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[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.
checked. Esta propiedad contiene un valor booleano que especifica

si un elemento determinado del checkbox est selecionado o no.
formulario.aficiones.value = undefined
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.
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.
formulario.clave.defaultValue = miclave
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:

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

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 =
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:

botn.
formulario.submit.value = borrar
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.

del objeto text.
formulario.identificacion.defaultValue =
nombre + apellidos

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

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.

del objeto textArea.
formulario.otrasAficiones.defaultValue =
Escribe aqu

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 = 35
rows Representa el nmero de filas.

textArea. Representa el valor del atributo NAME.
formulario.otrasAficiones.rows = 15
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

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 clienteservidor.
Este objeto carece de mtodos y de manejadores de eventos y slo posee dos
propiedades que son:

botn.
formulario.valorclave.value = 4657$?ab
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 =
appName. Guarda el nombre del navegador. Propiedad de slo

lectura.
navigator.appName =
Mozilla
Microsoft Internet Explorer
appVersion. Guarda la versin del navegador. Propiedad de slo

lectura.
navigator.appVersion =
4.0 (compatible; MSIE 5.0;
Windows 98; DigExt)
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 =
width. Anchura. En nuestro caso:

screen.width =
600
800
colorDepth. Nmero de colores. En nuestro caso:

screen.colorDepth =
7.2.22. El objeto image.
16
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:
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 www.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
cliente-servidor 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>
<!-// 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>

Tutor Javascript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutor Javascript

Cargado por

Copyright:

Formatos disponibles

Captulo 1:

1.2. Para qu sirve JavaScript?

1.3. Diferencias con Java.

JavaScript es un lenguaje que se integra directamente en pginas HTML. Tiene como

Es interpretado (que no compilado) por el cliente, es decir,

1.4. Utilizacin de JavaScript en un

Los atributos de esta marca son:

<SCRIPT LANGUAGE="lenguaje" SCR=url>

podr especificarse para insertar en un documento un script de un lenguaje determinado y

El script insertado mediante la marca SCRIPT es evaluado por el

El lenguaje JavaScript no es case sensitive, es decir, no distinque

1.5. Las versiones de JavaScript.

1.6. Los comentarios en JavaScript.

A continuacin empezaremos ya en este captulo a estudiar uno de los elementos ms

1.7. Identificadores y palabras reservadas.

1.7.1. Identificadores en JavaScript.

El identificador debe empezar por una letra o por el

Recordar que le uso de maysculas o minsculas no es importante porque

1.7.2. Las palabras reservadas.

1.8. Algunos ejemplos sencillos.

Ejemplo 1: Visualizacin de texto mediante una ventana.

Ejemplo 2: Definicin de una funcin.

cabo cuando se pulse sobre el botn ejemplo2.

Ejemplo 3: Interaccin con un formulario.

<INPUT Type="button" Value=" Evaluar "

2.1. Tipos numricos.

2.1.1. Tipo numrico entero.

Los enterosPueden ser representados en tres formatos distintos:

2.1.2. Tipo numrico real.

2.2. Las strings.

carcter \ y acontinuacin se escribe otro carcter que representa el cdigo especial o el

2.3. Tipo booleano.

2.4. El valor nulo.

2.5. La conversin de datos.

La primera expresin convertir la variable un_numero en una cadena de caracteres porque

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

2.6. Los arrays en JavaScript.

Ejemplo de manejo de vectores

// Crea el vector con todos sus elementos a 0.

// Asigna un elemento en una posicin determinada

// Determina se la dimensin es correcta

// Forma una ristra con los elementos del vector

// Posicin a insertar el elemento actual

Variable que contendr el vector

Para ms informacin sobre los manejadores de eventos ir al captulo 6.

Inserta elementos en un vector

2.7. Los objetos en JavaScript.

2.7.1. Las propiedades de los objetos.

Este tipo de vectores se denominan arrays asociativos.

2.7.2. Los mtodos.

2.7.3. Utilizacin de la palabra reservada this.

Se podr llamar entonces a la funcin validate a cambio de los valores de un formulario

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

2.7.4. La creacin de objetos.

La instacia del objeto la crearemos de la siguiente forma:

Por tanto, para acceder a la nota final:

Cuando se define un objeto, es posible enriquecer su descripcin mediante nuevas

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

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

Su forma de uso ser:

En el siguiente ejemplo se muestra el funcionamiento del tipo universitario que hemos

<td><input type="text" name="nota3" value=0 size=4>

La funcin Mostrar_Univers(form) se define como sigue:

Nota media de la etapa acadmica