Professional Documents
Culture Documents
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.
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...
Por ltimo, comentar otra forma de introducir scripts en documentos HTML, y es incluir
estos script como controladores de eventos de algunas marcas, como pueden ser la marcas
de imgenes, anclas, links, botonoes, etc. Veamos a continuacin un ejemplo:
<A HREF="index.htm" OnClick="alert('ir al ndice')">
Ir al ndice
</A>
Ir al ndice
Como puede verse, dentro de la marca, como atributo de esta, se pone un controlador de
eventos y despus del signo igual y entre comillas se incluye el cdigo de JavaScript. Ahora
bien, tambin es posible llamar a una funcin del HEAD del documento. Se recomienda
esta segunda opcin ya que es una manera ms limpia y clara de escribir pginas. Se
conseguira lo mismo que en el ejemplo anterior de esta forma:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<-- Disimula el contenido del script para navegadores
incompatibles
function alerta() {
alert(" Ir al ndice");
}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
<A HREF="index.htm" OnClick="alerta()">
Ir al ndice
</A>
...
</BODY>
Ir al ndice
LANGUAGE="JavaScript1.1"
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:
<CENTER>
<FORM>
<INPUT Type="button" Value=" ejemplo1 "
onClick="Alert(' Hola mundo! ')">
</FORM>
</CENTER>
...
<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:
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>
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.
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
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
<HEAD>
...
<SCRIPT>
<!--
function AsignaElemento(form,array,pos){
if (array.length < pos)
alert("Asignacin fuera de rango");
else
array[pos] = form.elemets.value;
}
//Variables globales
var numele=0; // Numero de elementos del vector
var pos=1;
var vector;
//
//-->
</SCRIPT>
...
</HEAD>
<BODY>
...
<FORM>
<CENTER>
<H3><U>Inserta elementos en un vector>/U></H3>
</CENTER>
<TABLE>
<tr><td>Introducir el nmero de elementos del vector:
<input type="text" name="number" size=1
onChange="numele=Inicia(this.form);
vector= new
CreaArray(numele);
pos=1">
<!-- onChange: Se activa cuando cambia el
contenido del text.//-->
</tr>
<tr>
<td>Elementos:
<input type="text" name="elemets" size=3>
<td>
<input type="button" value=" insertar "
onClick="alert('Insertar elemento '+pos);
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>
...
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";
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);
this.dni = dni;
}
// this: propiedad del objeto a partir de los argumentos
Las propiedades de un objeto puedean describirse mediante otros objetos. Por ejemplo:
function Nota_M(curso1, curso2, curso3, final){
this.curso1 = curso1;
this.curso2 = curso2;
this.curso3 = curso3;
this.final = final;
}
Hacemos que el objeto universitario tenga un propiedad del objeto Nota_Media por tanto:
function Univers(nom, apell, edad, dni, exp){
this.nombre = nom;
this.apellido = apell;
this.edad = edad;
this.dni = dni;
this.expediente = exp;
}
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.
+ this.expediente.curso1 + "
" + this.expediente.curso2
+ " " +
this.expediente.curso3 + " " + this.expediente.final;
alert(ristra);
}
//this: objeto al que pertenece el mtodo.
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.
ninguno
DNI
ninguno
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
continuacin no son sino abreviaturas que hacen ms cmoda y simples las expresiones,
aunque a veces sean ms ilegibles.
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.
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;
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;
}
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;
}
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;
}
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.
Introducir expresin:
Resultado:
Ejemplo
<form>
Introducir carcter en formato URL o normal:
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>
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:
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>
<INPUT type="radio" name="conversion"
value="hexadecimal"
onClick="this.form.int.value=parseInt(this.form.i
nt.value, 16)">
Expresar entero en hexadecimal<br>
<INPUT type="radio" name="conversion"
value="octal"
onClick="this.form.int.value=parseInt(this.form.i
nt.value, 8)">
Expresar entero en octal<br>
</form>
Introducir entero:
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.
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)">
<TR>
<TD><INPUT TYPE="Reset"
value=" Reset "
onClick="Muestra('Has pulsado','onClick')">
<TD><INPUT TYPE="Submit" value=" Enviar " onClick="Muestra('Has
pulsado','onClick')">
<TR>
<TD><INPUT TYPE="button" value=" Cerrar " onClick="Cerrar()">
</TABLE>
</FORM>
</BODY>
Captulo 7:
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.
Por ejemplo:
fecha = new Date("January 6, 1996 14:50:00");
o
o
o
o
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);
Adems de propiedades y mtodos, los objetos del cliente WWW posee tambin
manejadores de eventos asociados. En este captulo se nombrarn slo los principales
#0000ff
#ffffff
#000000
12/18/2001
#0000ff
#800080
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.
undefined
enlace1.target = window
enlace1.host = www.cicei.com:80
enlace1.port = 80
enlace1.protocol = http:
enlace1.search =
onClick="alert('Generado
click en radiobutton')">Masculino<br>
<input type="radio" name="sexo" value="Femenino"
onClick="alert('Generado
click en radiobutton')">Femenino<br>
Aficiones:<br>
<input type="checkbox" name="aficiones"
value="Musica"
onClick ="alert('Generado click
checkbox')">Msica<br>
<input type="checkbox" name="aficiones"
value="Deporte"
onClick ="alert('Generado click
checkbox')">Msica<br>
<input type="checkbox" name="aficiones"
value="Lectura"
onClick ="alert('Generado click
checkbox')">Lectura<br>
<input type="checkbox" name="aficiones" value="Cine"
onClick ="alert('Generado click
checkbox')">Cine<br>
<input type="checkbox" name="aficiones"
value="Fotografia"
onClick ="alert('Generado click
checkbox')">Fotografa<br>
<input type="checkbox" name="aficiones"
value="Otros"
onClick ="alert('Generado click
checkbox')">Otros<br>
Otras aficiones:<br>
<input name="otrasAficiones" rows=15 cols=35
value="Escribe aqu"
onBlur="alert('Generado blur en Otras
aficiones')"
onfocus="OtrasAficiones.value='Tengo el
foco'"
onSelect="alert('Generado Select en Otras
aficiones')"><br>
Tipo de revista que le gustara recibir:
<select name="revista" onClick="alert('Click en
revista')">
<option value="deportes">Deportes
<option value="musica">Msica
<option value="informatica" selected>Informtica
<option value="ciencia">ciencia
</select><br>
Introducir
Clave:
<input type="password" name="clave" value="miclave"
size=15
onBlur="alert('Generado blur en clave')"
onfocus="clave.value=''"
onSelect="alert('Generado Select en
clave')">
<input type="hidden" name="valorclave" value="4657$?
ab">
<p>
Nombre y Apellidos:
nombre + apellidos
Sexo:
Masculino
Femenino
Aficiones:
Msica
Deporte
Lectura
Cine
Fotografa
Otros
Otras aficiones:
Escribe aqu
formulario.action = programa.cgi
formulario.method = post
formulario.elements[3] = radio
formulario.elements[4] = checkbox
formulario.elements[5] = checkbox
formulario.elements[6] = checkbox
formulario.elements[7] = checkbox
formulario.elements[8] = checkbox
formulario.elements[9] = checkbox
formulario.elements[10] = text
formulario.elements[11] = select-one
formulario.elements[12] = password
formulario.elements[13] = hidden
formulario.elements[14] = reset
formulario.elements[15] = submit
formulario.aficiones.value = undefined
formulario.aficiones.checked = undefined
formulario.clave.defaultValue = miclave
informatica
formulario.revista.options[3].value =
ciencia
formulario.otrasAficiones.rows = 15
Los ejemplos del objeto frame son muy similares a los del
objeto window por eso no aportamos ninguno en esta seccin.
Mozilla
undefined
600
800
16
...
<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:
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.
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");
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)
El ejemplo anterior define un men de navegacin. Este men, insertado mediante la marca
HTML:
<FRAME NAME="menu" SRC="nav.htm">
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:
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.
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.
2. Utilizando JavaScript.
return
unescape(InCookie.substring(i+plen,j));
else //el ltimo no lleva ";"
return
unescape(InCookie.substring(i+plen,clen));
}
else
return "";
}
else
return "";
}
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.
Ejemplo de uso
Mediante este ejemplo trataremos de usar las funciones que acabamos de ver, de esta
manera, permitiremos al usuario inicializar un cookie. El nombre proporcionado por el
usuario as como la fecha del ltimo acceso se mostrarn en cada nuevo acceso.
Para ello implementaremos lo siguiente:
<HEAD>
<TITLE> JavaScript Cookies <TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-// Aqu van las funciones que hemos construido en esta
captulo
//-->
</SCRIPT>
</HEAD>
<body background="bg1.jpg" vlink="#0000FF" alink="#FF0000"
link="#FF1493" text="#000000">
<script language="JavaScript">
<!-// Cookies asociadas al documento actual
var InCookie = document.cookie;
var msg = " ";
// buscamos la propiedad username
var username = GetCookie("username",document.cookie);
// buscamos la propiedad lastime
var last = GetCookie("lastime",document.cookie);
if ( username.length != 0) {// Cliente identificado por el
Cookie
msg += "<h2> Buenos das, " + username + "!!
</h2>";
// Muestra la fecha del ltimo acceso
var lastime = new Date(last);
lastime.setTime(last); // Transforma el formato
fecha
msg += "ltimo acceso de esta pgina: " + lastime +
"<br>";
// Creacin del botn de eliminar el cookie
msg += "<form onSubmit =
'DeleteUsernameAndTime(username)'>";
msg += "<input type='submit' value=' Anulacin del
cookie '>";
msg += "</form><br>";
}
else{
// Primer acceso
// Creacin de un formulario que permite inicializar
el cookie
msg += "<h2> Primer acceso, </h2>";
msg += "<form
onSubmit='RecordUsernameAndTime(username)'>";
msg += "<h3>su nombre?</h3>";
msg += "<input type='text' name='username' size=12
";