Tema 3

JavaScript

Autor: Ramón Egido

1
 Tema 3

ÍNDICE

1. INTRODUCCIÓN .................................................................................................................... 5

[Link] ENTRE JAVASCRIPT Y JAVA .................................................................... 5

[Link] JAVASCRIPT EN LA PÁGINA WEB ............................................................ 5

[Link] EJEMPLO ................................................................................................................ 5

[Link] ................................................................................................................................ 5
1.3.1. ETIQUETA SCRIPT .......................................................................................................... 6
1.3.2. COMENTARIOS ................................................................................................................. 6
1.3.3. MÉTODO WRITE ................................................................................................................ 7

2. EL LENGUAJE ....................................................................................................................... 7

[Link]....................................................................................................................... 7

2.1.1. OPERADORES ARITMÉTICOS ............................................................................................. 7

2.1.2. OPERADORES LÓGICOS Y RELACIONALES ......................................................................... 8
2.1.3. OPERADORES DE ASIGNACIÓN .......................................................................................... 8
2.1.4. EL OPERADOR ? : ............................................................................................................ 8

[Link] ........................................................................................................................... 9

[Link] ................................................................................................................................ 9
2.2.1. DECLARACIÓN DE VARIABLES ........................................................................................... 9
[Link] ................................................................................................................................ 9
2.2.2. CONVERSIÓN DE VARIABLES ........................................................................................... 10
[Link] .............................................................................................................................. 10
2.2.3. VARIABLES BOOLEANAS ................................................................................................. 10
2.2.4. VARIABLES NULAS ......................................................................................................... 10
2.2.5. CONVERSIONES ENTRE TIPOS DE DATOS ......................................................................... 11

[Link] MATEMÁTICAS ............................................................................................. 11

[Link] WITH............................................................................................................. 12

[Link] CONDICIONALES........................................................................................ 12

2
 Tema 3

2.5.1. SENTENCIA IF................................................................................................................. 12

[Link] .............................................................................................................................. 12
[Link] .............................................................................................................................. 13
2.5.2. SENTENCIA SWITCH ........................................................................................................ 13
[Link] .............................................................................................................................. 14

[Link] DE CONTROL DE FLUJO ........................................................................... 15

2.6.1. SENTENCIA FOR ............................................................................................................. 15

[Link] .............................................................................................................................. 15
2.6.2. SENTENCIA WHILE .......................................................................................................... 16
[Link] .............................................................................................................................. 16
2.6.3. SENTENCIA BREAK ......................................................................................................... 16
[Link] ............................................................................................................................ 17
EJERCICIO 1 .............................................................................................................................. 18

[Link] ......................................................................................................................... 18

[Link] ............................................................................................................................ 18

[Link] DE INTRODUCIR UN SCRIPT EN HTML ........................................................... 19

[Link] O MATRICES ....................................................................................................... 20

2.9.1. DEFINICIÓN Y RECORRIDO ............................................................................................... 21

[Link] ............................................................................................................................ 21
[Link] ............................................................................................................................ 22
EJERCICIO 2 .............................................................................................................................. 24

2.10. CADENAS DE TEXTO....................................................................................................... 24

2.10.1. CHARAT ....................................................................................................................... 25

2.10.2. LENGTH ....................................................................................................................... 25
2.10.3. INDEXOF ...................................................................................................................... 25
2.10.4. SUBSTR ....................................................................................................................... 26
2.10.5. SLICE ........................................................................................................................... 26
2.10.6. SUBSTRING .................................................................................................................. 26
2.10.7. TOLOWERCASE() ......................................................................................................... 26
2.10.8. TOUPPERCASE().......................................................................................................... 26
EJERCICIO 3 .............................................................................................................................. 27

2.11. FECHAS Y HORAS ........................................................................................................... 27

[Link] ............................................................................................................................ 27

3. POO ...................................................................................................................................... 29

4. EVENTOS ............................................................................................................................. 30

3
 Tema 3

[Link] ............................................................................................................................ 30
[Link] ............................................................................................................................ 30
[Link] ............................................................................................................................ 32

5. LOS OBJETOS DEL NAVEGADOR.................................................................................... 33

[Link] OBJETO WINDOW......................................................................................................... 33

5.1.1. ABRIR VENTANAS ........................................................................................................... 34

[Link] ............................................................................................................................ 35

[Link] OBJETO LOCATION...................................................................................................... 35

[Link] OBJETO HISTORY......................................................................................................... 36

[Link] OBJETO NAVIGATOR ................................................................................................... 36

[Link] OBJETO SCREEN.......................................................................................................... 36

[Link] OBJETO DOCUMENT.................................................................................................... 36

6. FORMULARIOS ................................................................................................................... 37

[Link] ............................................................................................................................ 39

7. COOKIES.............................................................................................................................. 45

[Link] UNA COOKIE ......................................................................................................... 46

[Link] UNA COOKIE ............................................................................................... 47

[Link] UNA COOKIE ...................................................................................................... 47

[Link] DE USO .............................................................................................................. 47

4
 Tema 3

1. INTRODUCCIÓN
JavaScript no es un lenguaje de programación propiamente dicho, sinó un lenguaje de
scripts. Hay otros lenguajes de script. Uno de los más famosos es VBScript.

Con JavaScript daremos respuesta a eventos de usuario, como entrada de datos por
ejemplo. Para hacer este tipo de verificaciones no es necesario enviar ningún tipo de
información al servidor. Se procesa todo en el lado del cliente, en el navegador web.

Pero también existe JavaScript a nivel del servidor. Sus características son diferentes,
ya que en el cliente, JavaScript interactúa con el navegador y sus propiedades.

En este módulo vamos a tratar JavaScript desde el punto de vista del cliente. Todos los
ejemplos están en la carpeta ejemplos del archivo ZIP del módulo.

1.1. DIFERENCIAS ENTRE JAVASCRIPT Y JAVA

JavaScript es un subconjunto de Java, pero le faltan características fundamentales

para poder ser considerado como lenguaje de programación. Las principales diferencias son
que el programador de JavaScript no tendrá a su disposición tipos de datos, y que el código
deberá de estar integrado en una página HTML.

JavaScript puede ser bastante extenso. Nosotros pretendemos dar los conocimientos
necesarios para que por un lado se disponga del conocimiento necesario para el desarrollo de
interactividad en páginas web, y por otro lado, facilitar el aprendizaje de los módulos
posteriores de Java, y más en concreto los que utilicen más tarde JavaScript en su contenido.

1.2. INCLUYENDO JAVASCRIPT EN LA PÁGINA WEB

Hay varias formas de introducir código JavaScript en nuestra página web. Las 2 más
comunes son:

ƒ Mediante la etiqueta <SCRIPT>.

ƒ Importando el código de un fichero externo.

1.3. PRIMER EJEMPLO

El siguiente ejemplo muestra en el navegador el mensaje “Hola mundo”:

[Link]
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>

<BODY>
Este es documento normal de HTML.
<BR>
<SCRIPT LANGUAGE="JavaScript">
[Link]("Hola Mundo.")

5
 Tema 3

</SCRIPT>
<BR>
Segunda línea de texto puesta en el propio código HTML.
</BODY>

</HTML>
[Link]

En negrita está cómo introducir código JavaScript en mitad del documento.

JavaScript es case-sensitive, es decir, que diferencia entre mayúsculas y minúsculas,

por tanto es muy importante poner especial atención a este detalle a la hora de escribir código,
ya que muchas veces el error estará allí.

1.3.1. Etiqueta SCRIPT

Con esta etiqueta HTML podremos comunicar al navegador que lo que vamos a
escribir es código JavaScript. Como vemos en el ejemplo, tenemos una propiedad llamada
language, y cuyo valor será el nombre del lenguaje usado.

El siguiente ejemplo muestra cómo introducir un JavaScript general:

<SCRIPT LANGUAGE="JavaScript">

En este otro vemos cómo particularizamos la versión de JavaScript con la 1.1:

<SCRIPT LANGUAGE="JavaScript1.1">

En el último ejemplo podemos ver cómo introducir un código en otro lenguaje de script,
por ejemplo, VBScript:
<SCRIPT LANGUAGE="VBScript">

1.3.2. Comentarios

Hay navegadores que no utilizan códigos JavaScript. Para estos navegadores será
imposible interpretar el contenido de las etiquetas SCRIPT, por lo tanto, la forma para decir a
estos navegadores que no hagan nada con ese código es poniendo dicho código entre los
símbolos de comentarios, como en el ejemplo siguiente:

<SCRIPT LANGUAGE="JavaScript">
<!--
[Link]("Hola Mundo.")
//-->
</SCRIPT>

Acostúmbrate a poner los símbolos de comentario siempre que escribas un SCRIPT en

que no tengas controlados todos los diferentes navegadores donde se va a ejecutar. Pero si
por ejemplo sabemos a ciencia cierta en qué navegadores se utilizará la página y aceptan el
SCRIPT, no será necesario. Por ejemplo, imagina que estás desarrollando una intranet para
empresa en que sabes con seguridad que todos sus empleados utilizarán Internet Explorer
como navegador web. En este caso, puedes omitir los símbolos de comentarios ya que el
Internet Explorer interpreta JavaScript correctamente.

6
 Tema 3

Aprovechando que estamos hablando de comentarios, vamos a ver cómo comentar

código JavaScript. Hay dos tipos de cometarios, de una línea y de dos líneas. En el ejemplo
siguiente se muestra el uso de ambos:

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>

<BODY>
Este es documento normal de HTML.
<BR>
<SCRIPT LANGUAGE="JavaScript">
// Comentario de una línea
[Link]("Hola Mundo.")

/* Este es un comentario de más de una línea

Esta es la segunda línea */
</SCRIPT>
<BR>
Segunda línea de texto puesta en el propio código HTML.
</BODY>

</HTML>

1.3.3. Método write

El objeto document tiene un método, el método write, con el que podrá enviar
órdenes HTML al navegador.

Se usa de la siguiente forma:

[Link] (expresión);

2. EL LENGUAJE

2.1. OPERADORES

Los operadores se usan para realizar cálculos, comparaciones, y en general, lo que

denominamos operaciones.

2.1.1. Operadores aritméticos

ƒ Cambio de signo: -
ƒ Incremento: ++ (incrementa en una unidad)
ƒ Decremento: -- (decrementa en una unidad)
ƒ Multiplicación: *
ƒ División: /

7
 Tema 3

ƒ División entera (sin sacar decimales): \

ƒ Suma: +
ƒ Resta: - (igual que el cambio de signo)
ƒ Resto de la división entera (módulo): %

Los operadores ++ y -- se usan del siguiente modo:

A++ que es como sumar 1 al valor de A, es como hacer A=A+1
A-- que es como restar 1 al valor de A, es como hacer A=A-1

2.1.2. Operadores lógicos y relacionales

ƒ Y: &&
ƒ O: ||
ƒ NO: !
ƒ Igual a: ==
ƒ Distinto a: !=
ƒ Mayor que: >
ƒ Mayor o igual que: >=
ƒ Menor que: <
ƒ Menor o igual que: <=

Hay dos valores especiales para las operaciones de comparación, que son los valores
de verdadero y falso, true y false. Así, si se pregunta si A>5 y el valor de A es 8, el resultado
de esa pregunta es true.

2.1.3. Operadores de asignación

ƒ Asignación: =
ƒ Suma con asignación: +=
ƒ Resta con asignación: -=
ƒ Multiplicación con asignación: *=
ƒ División con asignación: /=
ƒ Módulo con asignación: %=

A += 8 es lo mismo que A = A + 8

Y así con el resto de los operadores.

2.1.4. El operador ? :

Es un operador especial que evalúa una expresión y si es verdadera devuelve un valor

y si es falsa, devuelve otro valor:

Variable = expresión ? valor_caso_verdadero : valor_caso_falso;

A = (cantidad < 100) ? 200 : 150;

En el ejemplo, si cantidad es menor que 100, la variable A tendrá un valor de 200, y

150 en otro caso.

8
 Tema 3

2.2. VARIABLES

Podemos utilizar variables dentro de un SCRIPT. El siguiente ejemplo muestra cómo

hacerlo:

[Link]
<HTML>
<BODY>
<h1>Ejemplo de variables JavaScript</H1>
<HR>
<SCRIPT LANGUAGE="JavaScript">
<!--
texto = "hola";
[Link]("Digamos ", texto," bien fuerte")
// -->
</SCRIPT>
<BR>Fin
</BODY>
</HTML>
[Link]

En el ejemplo puede verse que primero se crea una variable, llamada texto. En este
caso además de crear la variable, le damos un valor. La igualamos al valor “hola”. Se pone
entre comillas dobles porque es una cadena de texto. Si fuera un número no haría falta.

Luego, para usarla, basta con ver en la siguiente línea cómo se ha hecho. Podría
haberse programado de una forma más intuitiva. La línea puede cambiarse por:

[Link]("Digamos " + texto + " bien fuerte")

El cambio está realizado en el fichero [Link] de la carpeta de ejemplos.

El oprador + sirve para sumar números y para unir o concatenar cadenas de texto. Esta
segunda forma de utilizar la variable es más intuitiva que la primera.

Además de texto y de números existe otro tipo de variables, que son los ARRAYS. Un
array es como una lista de variables del mismo tipo, por ejemplo, una lista de variables
numéricas.

2.2.1. Declaración de variables

En JavaScript las variables se declaran con la palabra clave reservada var. La forma
de uso es la siguiente:

var nombre_variable [=valor];

nombre_variable es el nombre que nosotros le demos a la variable

[=valor] significa que lo que está dentro de los corchetes es OPCIONAL. En este
caso quiere decir que podemos establecer la variable a un determinado valor sin más que
poner el signo = y después del valor que deseemos establecer.

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

9
 Tema 3

var A = 5;
var B = 7;
var C;
C = A + B;
[Link] ("Resultado: " + C);
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

2.2.2. Conversión de variables

JavaScript hace de forma automática la conversión de tipos de datos, según las

operaciones que se realicen con ellos. Veamos el siguiente código:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var A = 5;
var B = "7";
var C;
[Link] (A + B);
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

En este caso, el operador + lo que hace no es sumar, sino concatenar (unir) los dos
números. Esto es así, porque el tipo menos restrictivo es la cadena de texto, y lo que hace
internamente es convertir el número 5 en la cadena de texto “5”, dando como resultado 57, en
lugar de 12.

2.2.3. Variables booleanas

Son aquellas que toman los valores true y false, es decir, verdadero y falso,
respectivamente.

2.2.4. Variables nulas

JavaScript dispone de un valor especial, null, que significa que la variable no tiene
valor. Así, si una variable es null es que está vacía. Una variable vacía no ocupa memoria.

A = 34;
A = null; //Vacío la variable A para que no ocupe memoria.

10
 Tema 3

2.2.5. Conversiones entre tipos de datos

Una variable en JavaScript tiene el tipo de datos del dato que contiene. Pero nosotros
podemos forzar a una conversión, si en algún momento nos hace falta.

Las tres funciones de conversión que vamos a ver son:

ƒ parseInt (texto, base): Devuelve la cadena de texto en número entero en base la

pasada como parámetro. Lo normal será usar la base 10.

ƒ parseFloat (texto): Devuelve la cadena de texto en número decimal.

ƒ toString(): Devuelve una cadena de texto a partir de un número de entrada.

Vamos a ver unos ejemplo de uso:

A = parseFloat("123,34");
B = parseFloat("123,34", 10);
C = [Link]();

En el primer ejemplo el valor de A será el número 123,34. En el segundo ejemplo el

valor de B será 123, y en el tercer ejemplo, el valor de C será la cadena de texto “123,34”.

A estas alturas ya habrás notado que las cadenas de texto siempre van entre comillas
dobles.

2.3. FUNCIONES MATEMÁTICAS

En JavaScript no se puede acceder de forma directa a la mayoría de las funciones

matemáticas. Se hace usando el objeto Math del siguiente modo:

x = [Link](24)

Guarda en la variable x el valor del coseno de 24.

ƒ [Link](valor): Logaritmo neperiano de valor

ƒ [Link](valor): Raiz cuadrada de valor
ƒ [Link](base,exponente): Potencia. Base elevado a exponente.
ƒ [Link](valor): Redondea al entero inferior más cercano. De 3,8 sería 3.
ƒ [Link](valor): Redondea al entero superior más cercano: De 3,2 sería 4.
ƒ [Link](valor): Redondea al entero más cercano. De 3,1 sería 3; de 3,5 sería 4;
de 3,8 sería 4.
ƒ [Link](valor): Seno de valor (en radianes).
ƒ [Link](valor): Coseno de valor (en radianes).
ƒ [Link](valor): Tangente de valor (en radianes).
ƒ [Link](valor): Arcotangente de valor (en radianes).
ƒ [Link](valor): Arcoseno de valor (en radianes).
ƒ [Link](valor): Arcocoseno de valor (en radianes).
ƒ [Link](valor1,valor2): Devuelve el máximo de los dos valores.
ƒ [Link](valor1,valor2): Devuelve el mínimo de los dos valores.
ƒ Math.E: Constante de Euler. Número e.
ƒ [Link]: Constante. Aproximadamente es 3,141592. El famoso 3,1416.

11
 Tema 3

2.4. SENTENCIAS WITH

Esta sentencia se usa para “ahorrar trabajo” al programador. Sirve para no tener que
escribir continuamente el nombre del objeto al que pertenece una propiedad o método
determinado. Podemos ver cómo se usa con el siguiente ejemplo:

with Math
{
x = sin(20) + 10 * (pow(12,3));
}

La sintaxis es:

with objeto
{
sentencias;
}

Nótese cómo al usar with, las sentencias que están dentro de las llaves de su ámbito
no hacen falta que se refieran al objeto Math.

2.5. SENTENCIAS CONDICIONALES

Se usan las sentencias condicionales para evaluar una expresión y dependiendo del
valor obtenido hacer una serie de acciones u otra.

2.5.1. Sentencia if

if (condición)
{
acciones cuando condición sea verdadero
}
else
{
acciones cuando condición sea falso
}

Observación: Hay que hacer especial incapié en que para comprobar que dos
expresiones son iguales se usa el operador ==.

Veamos un ejemplo de uso:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var A = 5;
if (A<5)
{
[Link]("La variable A es menor que 5.");
}
else
{
[Link]("La variable A es mayor o igual a 5.");

12
 Tema 3

}
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

En este sencillo ejemplo se comprueba el valor de la variable A. En caso de que sea

menor que 5 se muestra el mensaje de la rama del if y en caso de que sea mayor o igual que
5 se hace la rama del else.

La rama else es una rama opcional, es decir, se puede codificar la sentencia if sin la
necesidad de escribir la parte else.

Observación: Se pueden anidar sentencias if-else. Para ello hay que tener especial
cuidado en el uso de las llaves, que son los signos que van a agrupar las sentencias de cada
rama.

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var A = 5;
if (A<5)
{
[Link]("La variable A es menor que 5.");
}
else
{
if (A==5)
{
[Link]("La variable A es igual a 5.");
}
else
{
[Link]("La variable A es mayor que 5.");
}
}
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

2.5.2. Sentencia switch

Esta sentencia sólo está disponible a partir de la versión 1.3 de JavaScript y la 3 de

Jscript. La sentencia swith es una especia de anidación de sentencias if. Vamos a verlo más
fácilmente estudiando su sintáxis:

switch (expresión)
{
case valor1:
sentencias1;
break;

13
 Tema 3

case valor2:
sentencias1;
break;

case valor_n:
sentencias_n;
break;

default:
sentencias_en_otro_caso;
}

Con esta sentencia se evalúa la expresión a un valor y se va comprovando si ese

valor es igual a alguna de las ramas case que hay codificadas. En caso de encontrar alguna
entra por esa rama de acciones, y en caso de no encontrar ninguna realizará las sentencias
marcadas como default. Esta parte, default, es opcional.

Hay que hacer un especial incapié al uso de la sentencia break, que hace que una vez
que he pasado por uno de los bloques case, no continúe la evaluación de más casos. En caso
de no poner una sentencia break, se continuaría con la evaluación del siguiente case.

Vamos a ilustrar el uso de swith con el siguiente ejemplo:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var A = 5;
if (A>=0)
{
switch (A)
{
case 1:
[Link]("A es igual a 1.");
break;

case 2:
[Link]("A es igual a 2.");
break;

case 3:
[Link]("A es igual a 3.");
break;

case 4:
[Link]("A es igual a 4.");
break;

case 5:
[Link]("A es igual a 5.");
break;

default:
[Link]("A es mayor a 5.");
}
}

14
 Tema 3

else
{
[Link]("A es menor que 0.");
}
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

2.6. SENTENCIAS DE CONTROL DE FLUJO

Un bucle es una sentencia o grupo de sentencias que se repiten un número

determinado de veces. En JavaScript tenemos disponibles varios tipos de bucles. Vamos a ir
estudíandolos uno por uno.

2.6.1. Sentencia for

La sintáxis del bucle for es la siguiente:

for (contador=valor_inicial; condición_fin; incremento)

{
sentencias;
}

Para ilustrar este buble vamos a hacer un SCRIPT que sume los 100 primeros números
y muestre su resultado en la página web:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var suma=0;
var i;
for (i=1;i<=100;i++)
{
suma = suma + i;
}
[Link]("La suma es: " + suma);
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

El bucle comienza con el valor de la variable contador i a 1, y no para mientras que i

sea menor o igual que 100. El incremento i++ indica que i suma 1 en cada iteración (o vuleta)
del bucle.

Observaciones: Al igual que con las sentencias if, los bucles pueden anidarse entre
sí. Tened cuidado con el uso de las llaves que son las que definen los cuerpos del bucle.

15
 Tema 3

2.6.2. Sentencia while

Hay veces en que no sabemos o no nos interesa calcular el número de vueltas que
debe de dar un bucle. Para esas ocasiones se ha desarrollado el bucle while. Tiene dos
formas de ser utilizado. Pasemos a ver la sintáxis de ambas:

Forma 1 Forma 2

while (condición) do
{ {
sentencias; sentencias;
} } while (condición);

La diferencia entre cada forma es clara. Mediante la forma 1, la condición de entrada al

bucle se evalúa antes de la primera iteración, luego si no se cumple nunca se ejecutará el
bucle. Sin embargo, con la segunda forma, las sentencias siempre se harán al menos una vez,
ya que la condición de entrada (o de seguir) en el bucle se evalúa después de la ejecución de
las sentencias.

Vamos a traducir al bucle while el anterior ejemplo del bucle for:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var suma=0;
var i=1;
while (i<=100)
{
suma = suma + i;
i++;
}
[Link]("La suma es: " + suma);
// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

2.6.3. Sentencia break

En cualquier momento podemos salir de un bucle mediante la sentencia break. Esta

sentencia es la misma que veíamos al estudiar la sentencia switch. Hay que notar que
cuando se ejecuta la sentencia break se sale inmediatamente del bucle, es decir, que nada de
lo que se encuentre debajo del break se ejecutará. No es común usar esta sentencia pero si
se usa se suele hacer en combinación de if, para definir la condición de salida.

Como ejemplo vamos a hacer un SCRIPT en que el usuario trate de adivinar una clave
numérica, definido en el código del propio SCRIPT.

En el ejemplo vamos a estudiar el uso de dos nuevas sentencias, alert y prompt.

16
 Tema 3

La sentencia alert saca en pantalla el mensaje que se le pasa por parámetro y un

botón aceptar. El mensaje no desaparecerá hasta que el usuario pulse sobre el botón.

La sentencia prompt se usa para pedir datos al usuario por el teclado, y se guardan en
una variable.

Vemos el uso de ambas sentencias sobre el propio ejemplo:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var numero;
var clave = 5;
do
{
numero = prompt("Introduzca la clave de acceso:","");
if (numero == clave)
{
alert("Acceso permitido");
break;
}
} while(true);

// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

La sentencia prompt muestra el siguiente mensaje:

El segundo parámetro del prompt, el que hemos puesto al valor “” es el valor inicial
que sale en la caja de introducción de datos. Como lo hemos dejado vacío, no sale nada.

El mensaje que nos muestra alert es el siguiente:

17
 Tema 3

En este ejemplo hemos utilizado un bucle del tipo do-while para que el grupo de
sentencias se ejecute al menos una vez. Al poner como condición de terminación
while(true) le estamos diciendo que se ejecute de forma indefinida. Por eso tenemos que
salir del bucle mediante la sentencia break.

EJERCICIO 1

Remodela el ejemplo anterior de forma que el bucle tenga una condición de

terminación para no tener que usar la sentencia break y envíale la solución a tu tutor.

2.7. FUNCIONES

En programación muchas veces tenemos que repetir cierto código, a veces de forma
exacta, y a veces de forma parametrizada, es decir, que tenga valores diferentes, pero que
realice las mismas instrucciones.

Las funciones son las herramientas que tenemos para no tener que escribir el código
varias veces. Para ello, JavaScript tiene una palabra especial. La palabra function. La
sintáxis de la definición de una función es:

function NombreFuncion (Parámetros)

{
sentencias;
}

Un ejemplo de función sencilla sería la siguiente, que no tiene parámetros, y lo único

que hace es mostrar en pantalla un mensaje:

function Mensaje()
{
alert("Hola mundo. ");
}

Para ejecutar una función hay que llamarla. Para ello, en alguna parte del código
JavaScript, sólo hay que poner su nombre, y si tuviera parámetros, los parámetros que lleve.
Veamos un ejemplo:

[Link]
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Permiso_OK()
{
alert("Acceso permitido");
}

var numero;
var clave = 5;
do
{
numero = prompt("Introduzca la clave de acceso:","");
if (numero == clave)

18
 Tema 3

{
Permiso_OK();
break;
}
} while(true);

// -->
</SCRIPT>
</BODY>
</HTML>
[Link]

A veces las funciones tienen que devolver un valor. Esto se hace mediante la sentencia
return. A continuación vemos una porción de código de cómo una función devuelve un valor y
como se usa dicha función:

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Cuadrado(x)
{
return x * x;
}

function MostrarCuadrado()
{
alert("El cuadrado de 2 es: " + Cuadrado(2));
// -->
</SCRIPT>
</BODY>
</HTML>

2.8. FORMAS DE INTRODUCIR UN SCRIPT EN HTML

Además de introducir los SCIPTS como en los ejemplos que hemos estado viendo
hasta este momento, hay otra forma, que es en la cabecera del documento HTML, de forma
idéntica como hasta ahora, con la salvedad de que esta es la forma habitual.

La etiqueta SCRIPT soporta otra que se usa cuando el navegador no interpreta JavaScript. Es
la etiqueta NOSCRIPT, y se usa como se ve a continuación:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
…
// -->
</SCRIPT>
<NOSCRIPT>
Su navegador no admite lenguajes de SCRIPT. Actualícelo.
</NOSCRIPT>
</HEAD>

<BODY>
</BODY>
</HTML>

19
 Tema 3

Los SCRIPTS también se pueden almacenar en archivos externos, con extensión .js
de la siguiente forma:

<SCRIPT LANGUAJE="JavaScript" SRC="[Link]">

</SCRIP>

El archivo [Link] contendrá código JavaScript. En este archivo NO se ponen

los signos de comentarios:

<!--
…
// -->

2.9. ARRAYS O MATRICES

Una matriz es un conjunto de elementos del mismo tipo colocados de forma ordenada
de forma que nos podremos referir a ellos con un nombre común y un índice de lugar.

Es una forma de almacenar información de forma ordenada y de rápido acceso. Son

cómodas de gestionar y se manejan fácilmente.

Las matrices pueden ser de una dimensión, o de más dimensiones. Cuando son de una
dimensión se llaman Arrays. En JavaScript las matrices son todas de UNA dimensión. Veremos
en los módulos de Java matrices de varias dimensiones.

La figura anterior muestra un ejemplo gráfico de un Array. En cada “caja” se guardaría

la información.

Una matriz de dimensión 2 podría representarse por:

Las matrices pueden clasificarse del siguiente modo, dependiendo del número de
elementos que puedan almacenar:

ƒ Estáticas: Tienen un límite de elementos que se pueden alamacenar.

ƒ Dinámicas: A medida que se necesita más espacio en ellas, se va
redimensionando la cantidad de elementos que es posible almacenar.

En JavaScript todas las matrices son del tipo dinámico.

20
 Tema 3

2.9.1. Definición y recorrido

Tenemos disponibles tres formas para definir una matriz:

La primera símplemente indica que la variable que definimos es una matriz:

var matriz = new Array();

La segunda es igual que la anterior, pero indicamos el número de elementos que

tendrá la matriz:

var matriz = new Array(8);

Una vez esté definida la matriz, para acceder a sus elementos, lo haremos del
siguiente modo:

matriz[indice] = valor;

Los índices de las matrices siempre empiezan en cero. Es decir, en una matriz de 8
elementos, los índices van del 0 al 7.

provincias[0] = "Madrid";
provincias [1] = "Valencia";
provincias [2] = "Cuenca";
provincias [3] = "Asturias";
provincias [4] = "Lugo";
provincias [5] = "Cáceres";
provincias [6] = "Alicante";
provincias [7] = "Málaga";

Mediante la propiedad length de las matrices podremos conocer cual es el último

elemento, y entonces podremos recorrerlas con un bucle, pero cuidado, sólo hasta ese último
elemento menos 1, ya que la numeración empieza en 0.

En el siguiente ejemplo creamos una matriz con los meses del año y los mostramos en
la página web.

[Link]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Matrices()
{
var meses = new Array(12);
var i;

meses[0] = "Enero";
meses[1] = "Febrero";
meses[2] = "Marzo";
meses[3] = "Abril";
meses[4] = "Mayo";
meses[5] = "Junio";
meses[6] = "Julio";
meses[7] = "Agosto";
meses[8] = "Septiembre";
meses[9] = "Octubre";
meses[10] = "Noviembre";
meses[11] = "Diciembre";

21
 Tema 3

for (i=0;i<=11;i++)
{
[Link](i+1 + ": " + meses[i] + "<BR>");
}

}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
Matrices();
// -->
</SCRIPT>

</BODY>

</HTML>
[Link]

Analizando este código tenemos varios aspectos interesantes.

La sentencia siguiente

[Link](i+1 + ": " + meses[i] + "<BR>");

tiene un comportamiento especial. Nos podemos dar cuenta en la salida del ejemplo
que la parte que puedes ver en amarillo es una suma y no una concatenación. El primer signo
+ suma el valor a i al número 1, y el segundo signo + une o concatena dos cadenas de texto.
Como ya hemos hablado de esto anteriormente, esto ocurre porque el operador + está
sobrecargado, y dependiendo del valor de sus operandos realiza una operación u otra,
teniendo mayor preferencia, en este caso, la operación aritmética de la suma.

Es importante que cada vez que codifiquemos este tipo de sentencias nos sentemos
tranquilamente a pensar cual será el resultado final, y si tenemos alguna duda, lo mejor será
hacer una línea más, y convertir la sentencia anterior en las siguientes:

j = i + 1;
[Link](j + ": " + meses[i] + "<BR>");

De esta forma no obtendremos resultados inesperados.

Vamos a ver otro ejemplo. En el siguiente código el sistema pide al usuario los 9
números de su número de teléfono y los guarda en una matriz para posteriormente mostrarlos
en pantalla. Además, en este ejemplo, vamos a introducir el uso de la función isNaN. Esta
función devuelve true si la variable que se le ha pasado como parámetro no es un número, es
decir, que es un NaN (not a number). Devuelve false si es un número.

[Link]
<HTML>

22
 Tema 3

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Telefono()
{
var numero = new Array(9);
var i,j;
var digito = "";

for (i=0;i<=8;i++)
{

do {
j = i + 1;
digito = prompt("Introduce el dígito " + j + " de tu
número de teléfono:","");
} while ((isNaN(digito)==true) || (digito==null));
numero[i] = digito;
}

for (i=0;i<=8;i++)
{
[Link](numero[i] + " ");
}
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
Telefono();
// -->
</SCRIPT>

</BODY>

</HTML>
[Link]

El corazón del código es el bucle que número a número va pidiendo el dígito

correspondiente, y luego lo guarda en el array.

do {
j = i + 1;
digito = prompt("Introduce el dígito " + j + " de tu número de teléfono:","");
} while ((isNaN(digito)==true) || (digito==null));

Hemos puesto este trozo de código en un tipo de letra más pequeño para que pueda
verse línea a línea fácilmente. La condicición del bucle pregunta por dos valores. Primero
pregunta si el número que acabamos de introducir es un número, y mediante la segunda
condición pregunta si hemos pulsado la tecla CANCELAR de la caja de diálogo prompt.

23
 Tema 3

Entonces, mediante esta condición estamos diciendo que si es algo que no sea un número o
(||) si se ha pulsado cancelar, siga preguntando por el dígito número i.

((isNaN(digito)==true) || (digito==null));

El esto del código debería ser ya fácil de entender.

A la hora de la definición de las matrices, hay otra forma, que es la tercera de la que
hablábamos al principio del capítulo. Es la siguiente:

var matriz = new Array("S","Y","N","C","R","O","M");

Se trata de inicializar la matriz a la vez que se crea la variable. En este ejemplo hemos
creado un array de 7 elementos (del 0 al 6), con la palabra SYNCROM.

EJERCICIO 2

Crea un SCRIPT que represente el juego del ahorcado. Define en un array una palabra,
en cada casilla del array una letra, y que luego el usuario intente adivinar la palabra introducida.
Pon un limite de 5 a los fallos permitidos.

Esta práctica, más adelante, será más sencilla de hacer con otros elementos que
estudiaremos, pero es una buena manera de ir ensayando sobre todo lo visto hasta el
momento.

2.10. CADENAS DE TEXTO

El disponer de funciones para tratar las cadenas de texto es fundamental a la hora de

programar, ya que las cadenas de texto son muy utilizadas en la creación de software.

Para ir entrando en materia, lo primero es darle un nombre técnico a las cadenas de

texto. Ese nombre del este tipo de datos es String.

JavaScript nos provee a través del objeto String un conjunto de funciones que van a
permitir al programador multitud de operaciones con las cadenas de texto.

Algunas de las características de las cadenas de texto son que deben de ir entre
comillas dobles o simples y que se unen o concatenan mediante el operador +.

En cuanto a las comparaciones entre cadenas de texto, igual que pueden compararse
variables que contengan números para ver, por ejemplo, cuando una es mayor que la otra, las
cadenas de texto también pueden ser comparadas.

Para ello, cada carácter tiene asociado un número interno. Este número es el llamada
código ASCII. Por ejemplo, el carácter “A” tiene asociado el número 65, y la “a” el 97.

La “B” tiene el código 66, por lo tanto “A” será menor que “B”.

24
 Tema 3

Así es como se hacen las comparaciones de las cadenas de texto.

Vamos a empezar a ver diferentes funciones sobre las cadenas de texto.

[Link]

carácter = [Link](índice);

charAt se usa para conocer cual es el carácter que se encuentra en la posición

índice de la cadena.

caracter = "Syncrom".charAt(3);

Esta sentencia devuelve en la variable caracter el valor ”c”, que es el que ocupa la
posición 3. Los índices, al igual que en las matrices, comienzan en 0. Por tanto la cadena
Syncrom sería somo sigue:

S y n c r o m
índices 0 1 2 3 4 5 6

[Link]

Utilizaremos length para conocer la longitud de una cadena.

longitud = "Syncrom".length;

La salida de esta sentencia es que la variable longitud tiene un valor de 7.

[Link]

Utilizaremos indexOf para saber si una cadena está contenida en otra, y si es así, nos
devuelve la posición en la cadena de búsqueda donde se inicia la contención.

posicion = "Syncrom".indexOf("cr");

La salida de esta sentencia es que la variable posicion tiene un valor de 3.

Si no se encuentra la subcadena dentro de la cadena donde se busca, se devuelve el

valor –1. Además, esta función tiene un segundo parámetro, que es opcional, y que sirve para
indicar la posición a partir de la cual se ha de buscar la subcadena.

posicion = "Syncrom".indexOf("cr",2);

En este ejemplo se comenzaría a buscar desde la posición 2, es decir, desde la “n”.

25
 Tema 3

[Link]

Usaremos substr para obtener un subconjunto de la cadena de texto.

cadena = "Syncrom Informática".substr(inicio,longitud);

Un ejemplo sería:

cadena = "Syncrom Informática".substr(0,7);

Empezando desde el carácter de la posición 0 y con una longitud de 7 caracteres, la

salida de esta sentencia es que cadena tendrá un valor de "Syncrom".

[Link]

Es muy similiar a substr, pero el segundo argumento en lugar de ser la longitud de la

subcadena a extraer es la posición del último carácter a extraer, sin incluirlo. Así, el ejemplo
anterior sería como sigue:

cadena = "Syncrom Informática".slice(0,7);

En este caso es el mismo rango de números. El carácter que ocupa la posición 7 es el

espacio que hay entre Syncrom e Informática, y como no se incluye ese carácter, este
sería el índice que habría que colocar para que el resultado fuera el mismo que el del ejemplo
anterior.

El segundo parámetro es opcional, y si no se pone, se llega hasta el final de la cadena.

[Link]

Es otra función más para obtener una subcadena a partir de otra. Funciona
exactamente igual a slice pero el segundo parámetro es obligatorio. Esta función, junto con
substr, es muy usada.

cadena = "Syncrom Informática".substring(0,7);

[Link]()

Es función se utiliza para convertir a minúsculas la cadena a la que aplica.

minusculas = "Syncrom Informática".toLowerCase();

El resultado será que minusculas será igual a “syncrom informática”.

[Link]()

Es función se utiliza para convertir a mayúsculas la cadena a la que aplica.

26
 Tema 3

mayusculas = "Syncrom Informática".toLowerCase();

El resultado será que mayusculas será igual a “SYNCROM INFORMÁTICA”.

Estas dos funciones son de uso frecuente en las comparaciones entre cadenas, ya que
normalmente no nos interesarán las diferencias entre mayúsculas o minúsculas.

EJERCICIO 3

Con todas estas funciones de trabajo de cadenas, ahora será mucho más sencillo crear
un SCRIPT para modelizar el juego del ahorcado que antes te hemos propuesto como Ejercicio
2.

2.11. FECHAS Y HORAS

Para trabajar con fechas y horas hay que trabajar con el objeto Date. Para conocer la
fecha y hora actual, basta con la siguiente línea:

var fecha = new Date();

Una vez que tenemos una variable de tipo Date, podemos usar sus métodos o
funciones para acceder a su componentes:

ƒ getTime: Devuelve la parte correspondiente a la hora.

ƒ getDay: Devuelve el día de la semana. Se empieza a contar en domingo que es el
cero.
ƒ getDate: Devuelve el día del mes.
ƒ getMonth: Devuelve el número del mes. Enero sería el mes 0.
ƒ getYear: Devuelve el año.
ƒ getFullYear: Devuelve el año con 4 cifras.
ƒ getHours: Devuelve la hora.
ƒ getMinutes: Devuelve los minutos.
ƒ getSeconds: Devuelve los segundos.

Todas se usan del siguiente modo:

var fecha = new Date();

var dia;
dia = [Link]();

Veámos un ejemplo de uso:

[Link]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function VerFecha()
{
var fecha=new Date();
var diames=[Link]();

27
 Tema 3

var diasemana=[Link]();
var mes=[Link]() + 1 ;
var anio=[Link]();

var semana = new Array (7);

semana[0]="Domingo";
semana[1]="Lunes";
semana[2]="Martes";
semana[3]="Miércoles";
semana[4]="Jueves";
semana[5]="Viernes";
semana[6]="Sábado";

var meses = new Array (12);

meses[1]="Enero";
meses[2]="Febrero";
meses[3]="Marzo";
meses[4]="Abril";
meses[5]="Mayo";
meses[6]="Junio";
meses[7]="Julio";
meses[7]="Agosto";
meses[9]="Septiembre";
meses[10]="Octubre";
meses[11]="Noviembre";
meses[12]="Diciembre";

[Link]("<FONT FACE='Arial'>")
[Link](semana[diasemana] + ", " + diames + " de "
+ meses[mes] + " de " + anio);
[Link]("</FONT>")
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
VerFecha();
// -->
</SCRIPT>

</BODY>

</HTML>
[Link]

Todo el código es fácil de comprender. Pero nos vamos a parar en las siguientes
sentencias, que hemos puesto en un tipo de letra inferior para que quepan en un línea:

[Link]("<FONT FACE='Arial'>")
…
[Link]("</FONT>")

Nos damos cuenta de que hemos enviado código HTML por medio de
[Link] a la página. Y hemos entrecomillado con comillas dobles todo el parámetro,

28
 Tema 3

y si necesitamos comillas en alguna parte de la cadena enviada, se usan las simples. Así es
como se envía código HTML mediante [Link].

3. POO
Como ya sabemos, la Programación Orientada a Objetos, o POO, trata de vincular el
mundo real con el mundo del software. Se intenta modelizar el mundo real de una forma
cercana al propio mundo real.

En lo que llevamos visto de JavaScript ya hemos visto varios objetos.

Por ejemplo, cuando hablamos de Date, estamos hablando de un objeto. Cuando

hablamos de las cadenas de texto, de los String, estamos hablando de un objeto. Y cuando,
por ejemplo, hemos hablado de funciones como substr, estas funciones son en realidad
métodos del objeto String.

Como se puede ver, hemos ido incluyendo los objetos en nuestros pequeños códigos, y
lo hemos hecho de una forma natural. Porque la POO, lejos de ser compleja, es una
modelización natural del mundo.

En nuestro mundo, casi todo está compuesto de partes. Por ejemplo, un coche es un
conjunto de piezas unidas en determinada forma.

Pero volvamos a JavaScript. La construcción de una variable de un objeto determinado

se hace mediante la palabra clave reservada new. Ya la hemos visto en algún código en este
manual.

var fecha = new Date();

Lo que hace new realmente es invocar a una función especial que tienen todos los
objetos y que se llama constructor. El constructor toma una serie de parámetros y crea una
variable del tipo el objeto al que hace referencia con los parámetros que se le han pasado.

No vamos a entrar en este módulo en el desarrollo de objetos con JavaScript. Dejamos

al lector que si le interesa el tema investigue en Internet este mundo apasionante.

Sin embargo, si es motivo de este manual el saber usar los objetos que vamos
explicando, y sobre todo, el comenzar a dar unas nociones que luego, en Java, serán de
mucha utilidad.

Para acceder a los métodos y propiedades que tienen los objetos se hace mediante la
nomenclatura “punto”.

[Link]

Objeto.método

Esto ya lo hemos podido ver en sentencias como

[Link]("</FONT>")

en donde invocamos al método write del objeto document.

29
 Tema 3

En este punto, tenemos que hablar de la palabra clave reservada null. Cuando
igualamos una variable al valor null la estamos dejando vacía. De esta forma vamos a liberar
la memoria que ocupa ese objeto.

4. EVENTOS
Los eventos es donde se van a desencadenar las acciones que interaccionan con el
usuario.

Vamos a poner un ejemplo. Imagina una página con un formulario que debes rellenar
para asociarte a un determinado servicio. Ese formulario tiene un botón que sirve para enviar
tus datos y proceder al registro de tu cuenta. Al hacer clic sobre el botón se desencadena el
evento onClick.

Los eventos se desencadenan aunque no estén programados. En ese caso, no ocurrirá

nada. Para que ocurra alguna acción deberemos de programarla. Pero el que no tengamos
nada programado no significa que no se desencadene el evento. El que al hacer clic en el
botón del ejemplo se haga algo o no, vendrá determinado por lo que esté programado, pero lo
cierto es que si se pulsa el botón, se desencadena el evento.

Todos los eventos de JavaScript comienzan por las letras on. Así, tenemos, por
ejemplo, el evento onClick, onBlur, onFocus, etc..

<INPUT TYPE="button" value="Enviar" onClick="Validar()">

Esta línea define un botón con el título Enviar en el que se ha definido que al ser
pulsado se ejecute la función Validar(), que estará definida en un SCRIPT.

Aprovechando que ya hemos visto como introducir un evento de clic en un botón,

vamos a convertir el Ejemplo 1 para que el ya famoso “Hola Mundo” esté asociado a un botón.

[Link]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Mensaje()
{
alert("Hola Mundo.");
}
</SCRIPT>
</HEAD>

<BODY>
Este es documento normal de HTML.
<BR>
<INPUT TYPE="button" VALUE="Saludar" onClick="Mensaje()">
<BR>
Segunda línea de texto puesta en el propio código HTML.
</BODY>

</HTML>
[Link]

30
 Tema 3

onClick

Vamos a ver ahora una lista de los eventos disponibles en los diferentes objetos:

Objeto Eventos

onLoad
onUnload
window
onBlur
onFocus

onClick
onMouseOut
link
onMouseOver

onAbort
image onError
onLoad

onReset
form onSubmit

onBlur
onChange
text, textarea, password
onFocus
onSelect

onClick
onBlur
button, reset, submit, radio, checkbox, select
onChange
onFocus

Vamos a ver ahora la explicación de estos eventos:

ƒ onLoad: Al cargar.
ƒ onUnload: Al descargar.
ƒ onBlur, onFocus: Al recibir el foco.
ƒ onClick: Al hacer clic. Al pulsar.

31
 Tema 3

ƒ onMouseOut: Al salir el ratón de estar por encima de.

ƒ onMouseOver: Al entrar el ratón sobre la zona asociada.
ƒ onAbort: Al cancelar la carga de la imagen.
ƒ onError: Al generarse un error.
ƒ onReset: Al pulsar sobre un botón TYPE="reset" o al ejecutar una sentencia
reset().
ƒ onSubmit: Al pulsar sobre un botón TYPE="submit" o al ejecutar una sentencia
submit().
ƒ onChange: Al cambiar el contenido del objeto asociado. No se notificará el cambio
hasta que el objeto asociado pierda el foco.
ƒ onSelect: Al seleccionar el contenido del objeto asociado.

Vamos a programar un ejemplo un poco más elaborado, que incorpore algunas de las
características que hemos ido viendo hasta este momento. Además, este ejemplo nos servirá
para la introducción de la función setTimeout, que toma dos parámetros. El primero es la
función que se va a ejecutar, y el segundo es el número de milisegundos pasados los cuales se
ejecutará el código indicado en el primer parámetro.

function Ejemplo

Código

setTimeout("Ejemplo()",1000);

La sentencia setTimeout("Ejemplo()",1000) hace que a los 1000 milisegundos

(1 segundo) se ejecutará la función Ejemplo.

Mediante esta función podremos crear una estructura con un bucle cuyo resultado sea
que parezca que hay un movimiento en nuestra página web. Vamos a ver el código:

[Link]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Mover()
{
var s = [Link];
var longitud = [Link];
var i, resultado;

resultado = [Link](1) + [Link](0,1);

[Link]=resultado;

setTimeout("Mover()",100);
}
</SCRIPT>
</HEAD>

32
 Tema 3

<BODY>

<INPUT TYPE="text" NAME="texto" ID="texto" value="Hola, Mundo..." size="11">

<br>
<input type="button" value="Comenzar animación" onClick="Mover()">

</BODY>

</HTML>
[Link]

Hemos puesto un NAME y un ID a la caja de texto porque algunos navegadores usan el

NAME para referenciar a los objetos y otros el ID.

La caja de texto tiene una propiedad llamada value que referencia al contenido de la
caja.

5. LOS OBJETOS DEL NAVEGADOR

El navegador tiene una serie de objetos que vamos a estudiar en este capítulo.

‰ window
- history
- location
- frames
• document
- anchors
- applets
- embeds
- images
- links
- Forms
- Elements

5.1. EL OBJETO WINDOW

Este objeto representa las ventanas que se abren en el navegador.

Las propiedades de este objeto son:

ƒ name: Nombre de la ventana.

ƒ closed: Indica si está cerrada o no.
ƒ length: Cantidad de ventanas hijas que contiene una ventada determinada.
ƒ self: Devuelve una referencia a la propia ventana.
ƒ parent: Devuelve una referencia a la ventana que contiene a la ventana actual.
ƒ opener: Devuelve una referencia a la ventana que ha abierto la actual.
ƒ top: Devuelve una referencia a la ventana de orden superior del navegador.
ƒ location: Devuelve una referencia al objeto location. Lo veremos más
adelante.

33
 Tema 3

Los métodos del objeto window son:

ƒ blur: Hace perder el foco a la ventana y desencadena el evento onBlur.

ƒ focus: Envía el foco a la ventana y desencadena el evento onFocus.
ƒ close: Cierra la ventana.
ƒ scroll(X,Y): Desplaza la ventana hasta la posición X, Y en pixels, sabiendo que
la posición (0,0) es la esquina superior izquierda de la ventana.
ƒ open: Abre una ventana.

5.1.1. Abrir ventanas

Para abrir ventanas se utiliza el método open, como acabamos de ver. Vamos a
estudiar este método especial. Su sintáxis es:

Variable_ventana = [Link](URL, target, características);

URL contiene la página que se va a abrir. Si se deja vacío (“”), se abrirá una página en
blanco, que podremos controlar mediante la Variable_ventana y las órdenes a través de
[Link] aplicadas a dicha Variable_ventana.

target hace referencia al sitio donde va a abrirse la ventana. Puede tomar los valores
del parámetro TARGET de la etiqueta A de HTML, o puede ser el nombre de una ventana ya
definida antes, en cuyo caso se abrirá en el espacio que ocupe dicha ventana.

características es un parámetro opcional. La lista de parámetros que se pueden

poner en este van separados por comas, y son los siguientes:

ƒ toolbar: Si vale ‘no’ no se mostrará la barra de herramientas de la ventana.

ƒ location: Si vale ‘yes’ se mostrará la barra de direcciones del navegador.
ƒ directories: Muestra o no la barra de vínculos.
ƒ menubar: Muestra o no la barra de menú.
ƒ scrollbars: Muestra o no las barras de desplazamiento.
ƒ resizable: Indica si la ventana será o no redimensionable por el usuario.
ƒ width: Ancho de la ventana en pixels.
ƒ height: Alto de la ventana en pixels.
ƒ top: Posición en pixels de la parte superior de la ventana. El orígen está en la
esquina superior izquierda.
ƒ left: Posición en pixels de la parte izquierda de la ventana. El orígen está en la
esquina superior izquierda.

Navegador
(0,0)

top
(top, left)

left
Ventana height

width

34
 Tema 3

En algunas versiones de navegadores alguna de estas propiedades no tienen

aplicación. Si estás probando estas propiedades en tu navegador y no ves diferencia, lo más
probable es que sea por esta razón.

Vamos a ver un ejemplo en el que se abre con un botón una ventana vacía en la que
se pone un mensaje, y luego se cierra con otro botón.

[Link]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var ventana;

function Abrir()
{
ventana = [Link]("","_blank","directories=no,
scroll=no, menubar=no, width=200, height=100");

[Link]("<H1>");
[Link]("Bienvenido a mi ventana");
[Link]("</H1>");
}

function Cerrar()
{
[Link]();
}

</SCRIPT>
</HEAD>

<BODY>

<input type="button" value="Abrir" onClick="Abrir()">

<BR>
<input type="button" value="Cerrar" onClick="Cerrar()">

</BODY>

</HTML>
[Link]

Nótese que para que la variable ventana esté accesible desde todo el SCRIPT se
define fuera de las funciones, a nivel del propio SCRIPT.

5.2. EL OBJETO LOCATION

Este objeto contiene toda la información acerca de la localización de la página web que
se está mostrando.

Su propiedad más importante es href:

[Link] = "[Link]

Como métodos destacados tenemos al método reload, que recarga la página y es

equivalente a las opciones de Actualizar de los navegadores web, y el método replace, que
es como hacer una asignación con href, pero este método reemplazará completamente la

35
 Tema 3

página en todos los sitios, hasta en el historial. Es como si la página reemplazada no se

hubiera visitado.

5.3. EL OBJETO HISTORY

Representa al historial de navegación.

Con su propiedad length podemos saber el número de páginas que están

almacenadas en el historial de navegación. Con los métodos back y forward podemos ir a la
página anterior y a la siguiente, respectivamente. Mediante el método go también nos podemos
mover a una página determinada. Se usa pasando por parámetro el número de páginas a ir
hacia delante, o hacia atrás, con un número negativo, del modo go(3) o go(-2), por ejemplo,

5.4. EL OBJETO NAVIGATOR

Permite obtener información acerca del navegador que se está utilizando para la
visualización de la página. Es interesante a la hora de hacer una programación específica para
un determinado navegador. Aunque desde este curso nosotros siempre os aconsejamos hacer
una programación estándar para todos los navegadores y no usar características propias de
cada uno de ellos, a no ser, claro, que sepáis que todos vuestros visitantes usarán un
determinado navegador, como es el caso de una Intranet, por ejemplo.

Las propiedades más destacadas son:

ƒ appName: Devuelve el nombre real del navegador.

ƒ appVersion: Devuelve la versión del navegador.
ƒ JavaEnabled(): Devuelve si el navegador está o no configurado para interpretar
java. Esto no es una propiedad, sinó un método, y por eso los paréntesis al final.
ƒ platform: Devuelve el nombre del sistema operativo donde se está ejecutando el
navegador.
ƒ cookieEnabled: Devuelve true si están habilitadas las cookies, y false en otro
caso. Hablaremos de las cookies en el último capítulo de este manual.

5.5. EL OBJETO SCREEN

Proporciona información sobre el modo de visualización que tiene el visitante de

nuestra página en su ordenador.

Sus propiedades son:

ƒ width: Devuelve el ancho de la pantalla en pixels.

ƒ height: Devuelve el alto de la pantalla en pixels.
ƒ colorDepth: Devuelve el número de bits utilizados para definir los colores de la
pantalla. Si vale 16 es color de alta densidad, y si vale 24 es color real.

5.6. EL OBJETO DOCUMENT

Representa el propio documento. Ya hemos visto algo de este objeto con la ya famosa
sentencia [Link].

Sus propiedades más importantes son:

36
 Tema 3

ƒ title: Título del documento.

ƒ bgColor: Color de fondo del documento.
ƒ URL: Es como [Link].

Como método destacado tenemos al método write, del que ya hemos tratado en este
capítulo

Este objeto también dispone de una serie de matrices definidas en él. Pero sólo nos
vamos a ocupar de 2 de ellas. La matriz de imágenes (images), que contiene todas las
imágenes IMG de un documento HTML, y la matriz de formularios (forms) que contiene todos
los objetos FORM del documento.

Como estas propiedades son matrices, tienen todas las propiedades y métodos de las
matrices que ya hemos estudiado.

Un ejemplo de uso sería el siguiente, en el que tomamos la imagen de índice 4, que

suponemos que existe, y guardamos en una varible de tipo texto su ubicación, su SRC:

s = [Link][4].src;

6. FORMULARIOS
Ya hemos visto en el tema de HTML todas las etiquetas necesarias para la creación de
formularios. Recordemos, por encima, la etiqueta FORM:

<FORM NAME="nombre" ID="nombre" ACTION="acción" METHOD="método">

</FORM>

La primera consideración que vamos a hacer es que vamos a utilizar la propiedad

NAME y la propiedad ID con el mismo valor. Ya hemos comentado que diferentes navegadores
pueden usar una u otra. Recordamos también que ACTION contenía la acción a realizar al ser
ejecutado un envío del formulario, es decir, al hacer un submit del formulario. Por unir
conceptos, al hacer un submit del formulario se desencadena el evento onSubmit. Se hace
un submit del formulario cuando se pulsa el botón <INPUT TYPE="submit"> definido en
ese formulario, o cuando se ejecuta un script con la orden submit(). Recordemos que el
submit ejecutará la propiedad ACTION del formulario. Y además la forma de envío podrá ser
GET o POST, que es lo que define la propiedad METHOD.

La forma de trabajar con JavaScript con los formularios es muy sencilla. Pongamos un
ejemplo de un formulario que tenga una caja de texto, según el código siguiente:

<FORM NAME="datos" ID="datos">

<INPUT TYPE="text" NAME="nombre" ID="nombre">
</FORM>

37
 Tema 3

Si recuerdas las propiedades de las cajas de texto, teníamos una que hacía referencia
al contenido, que es value.

Bueno, pues para acceder al contenido de la caja de texto mediante un SCRIPT sólo
tendremos que utilizarla como sigue:

s = [Link]

Con esta sentencia hemos guardado el contenido de la caja de texto en la variable s.

Accedemos primero al fomrulario mediante su nombre, luego un punto seguido del nombre de
la caja de texto, seguido de otro punto y el nombre de la propiedad.

Así se hace con todas las propiedades que hemos visto en el módulo de HTML.

Ahora tenemos todas las herramientas necesarias para comenzar a programar

aplicaciones JavaScript que empiecen a tener algo de potencia.

Para ilustrar todo lo que hemos ido viendo a lo largo de este manual, vamos desarrollar
el ejemplo del ahorcado.

Es el [Link] de la lista de ejemplos. Aunque os proponemos que primero

ejecutéis la página web para ver el ejemplo, y que luego seáis vosotros los que intentéis
hacerlo antes de ver el código. Usamos algunos aspectos que todavía no hemos visto, pero los
pasamos a enumerar para puedas programarlo sin dichas características.

Los aspectos que todavía no hemos visto, porque hacen referencia a DHTML, el
próximo tema, son:

ƒ Hojas de estilo. Es la etiqueta <STYLE> que puedes ver en el código en la

cabecera del documento. Gracias a ella vamos a dar el mismo aspecto en cuanto a
dimensiones a todos los botones.

38
 Tema 3

ƒ Visibilidad de los botones: Al pulsar una de las letras, para saber que ya ha sido
usada la ponemos invisible. Esto es parte de DHTML.

ƒ Para ocultar la letra utilizamos además de DHTML un bucle especial que vamos a
analizar a la hora de analizar el código. Es un bucle para recorrer los objetos de un
formulario que nos permitirá recorrer los botones para saber cuál de ellos ha
pulsado el usuario.

Quitando estos 3 aspectos, deberías ser capaz de realizar el ejercicio, aunque hay que
decir que este ejercicio-práctica tiene la dificultad añadida de unir varios de los aspectos de
JavaScript que hemos visto hasta ahora.

Intenta una aproximación al ejercicio, y no desesperes si no te sale a la primera. La

programación es mucho de probar y probar. Si llega un momento en que te quedas sin saber
qué hacer, pasa al análisis del código que viene a continuación.

Si tu curso incorpora el servicio del tutor, y necesitas su ayuda, no dudes en consultarle

para que te oriente. Es un muy buen ejercicio el intentar por ti mismo esta práctica.

Vamos a pasar ahora a analizar el código. Al final analizamos diferentes partes:

[Link]
<HTML>
<HEAD>
<TITLE>Juego del Ahorcado</TITLE>
Hojas de estilo:
<STYLE TYPE="text/css"> Se verá en el
INPUT {width:20pt;} tema de DHTML.
.boton2 {width:80pt;}
.texto {width:150pt; text-align:center;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
var palabra; Variables a nivel de SCRIPT para que
var num_intentos = 6; puedan ser usadas en todas las
var sugerida = new Array(); funciones.

function Comenzar()
{ Explicada al final del código
var i;
var longitud;

BotonesVisibles();

num_intentos = 6;
palabra = "";
do
{
palabra = prompt("Introduzca una palabra para adivinar","");
}
while((palabra=="")||(palabra==null));

palabra = [Link]();

[Link] = num_intentos;

39
 Tema 3

longitud = [Link];
for(i=0;i<=longitud-1;i++)
{
sugerida[i] = " - ";
}

EscribirPalabra();
}

function EscribirPalabra()
{ Escribe en la cada de texto
var i; adivinar el array sugerida.
var longitud = [Link];

[Link] = "";
for(i=0;i<=longitud-1;i++)
{
[Link] = [Link] + sugerida[i];
}
}

function EsCorrecta()
{ Verifica si hay algún guión en el array
sugerida. Si no hay ninguno es que
var i;
se ha adivinado ya todas las letras.
var longitud = [Link];
var PalabraOK; En este tipo de bucles, en los que a la
salida tenemos que tener una
PalabraOK = true; respuesta en verdadero o falso a una
for(i=0;i<=longitud-1;i++) pregunta (en este caso si todas las
casillas del array son guiones), se
{ hacen del mismo modo. Suponemos
if(sugerida[i] ==" - ") un valor, en este caso
{ PalabraOK=true, y buscamos
PalabraOK = false; dentro del bucle el que ese valor
cambie (a false, en nuestro ejemplo).
}
Pero NUNCA se evalúan las dos
} posibilidades. Se supone una. Si no
hay cambios, la suposición es
return PalabraOK; correcta, y si hay cambios es que la
} suposición era falsa.

function Probar(letra)
{
var i;
var longitud = [Link];
var bAcertar;

[Link] = "";
Comprobamos si la letra
que nos llega en el
bAcertar = false; parámetro está en alguna
for(i=0;i<=longitud-1;i++) de las posiciones de la
{ palabra.
if([Link](i)==letra)
{
sugerida[i] = " " + letra + " ";
En caso de que se acierte
bAcertar = true; una letra, también se pone
} en la posición
} correspondiente en el array
sugerida.
EscribirPalabra();

40
 Tema 3

if (EsCorrecta()==true)
{
alert("Has ganado.");
}

if (bAcertar==false)
{
Fallar();
Hojas de estilo: Se pone a invisible
} (hidden) el botón de la letra que se
ha pulsado. Se verán estos
aspectos en DHTML.
for (i=0; i<[Link]; i++)
{ Al final del código está el análisis de
este bucle.
if ([Link][i].name==letra)
{
[Link][i].[Link] = "hidden";
}
}
}

function BotonesVisibles()
Este bucle hace lo
{
contrario al anterior.
for (i=0; i<[Link]; i++) Es decir, pone a
{ visibles todos los
[Link][i].[Link] = "visible"; botones del
} formulario.
}

function Fallar() Sencilla función. Se

{ resta 1 al nº de
num_intentos = num_intentos - 1; intentos, y se carga la
[Link] = num_intentos; imagen que
corresponda al
estado del juego
switch(num_intentos) mediante el acceso a
{ la propiedad src del
case 5: objeto imagen, que
[Link] = "[Link]"; es del tipo IMG.
break;
case 4:
[Link] = "[Link]";
break;
case 3:
[Link] = "brazo_izdo.jpg";
break;
case 2:
[Link] = "brazo_dcho.jpg";
break;
case 1:
[Link] = "pierna_izda.jpg";
break;
case 0:
[Link] = "pierna_dcha.jpg";
alert("AHORCADO: ¡¡Has perdido!!");
break;
}
}

</SCRIPT>

41
 Tema 3

</HEAD>

<BODY>

<p><FONT SIZE="5" FACE="Arial"><u>Juego del Ahorcado</u></FONT> Hojas de estilo:

<br> Se verá en el
tema de DHTML.
<br>
<input type="button" value="Comenzar" onClick="Comenzar();" Class="boton2">
</p>

<form name="datos" ID="datos">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input name="A" type="button" id="A" value="A" onClick="Probar('A')">
Siempre utiliza un
mismo NAME e </td>
ID. <td>
<input name="B" type="button" id="B" value="B" onClick="Probar('B')">
</td>
<td>
<input name="C" type="button" id="C" value="C" onClick="Probar('C')">
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td rowspan="9">
<img src="[Link]" width="200" height="297" name="imagen" id="imagen">
</td>
</tr>
<tr>
<td>
<input name="D" type="button" id="D" value="D" onClick="Probar('D')">
</td>
<td>
<input name="E" type="button" id="E" value="E" onClick="Probar('E')">
</td>
<td>
<input name="F" type="button" id="F" value="F" onClick="Probar('F')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="G" type="button" id="G" value="G" onClick="Probar('G')">
</td>
<td>
<input name="H" type="button" id="H" value="H" onClick="Probar('H')">
</td>
<td>
<input name="I" type="button" id="I" value="I" onClick="Probar('I')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="J" type="button" id="J" value="J" onClick="Probar('J')">
</td>
<td>
<input name="K" type="button" id="K" value="K" onClick="Probar('K')">
</td>
<td>
<input name="L" type="button" id="L" value="L" onClick="Probar('L')">
</td>
<td>&nbsp;</td>
</tr>
<tr>

42
 Tema 3

<td>
<input name="M" type="button" id="M" value="M" onClick="Probar('M')">
</td>
<td>
<input name="N" type="button" id="N" value="N" onClick="Probar('N')">
</td>
<td>
<input name="&Ntilde;" type="button" id="&Ntilde;" value="&Ntilde;"
onClick="Probar('Ñ')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="O" type="button" id="O" value="O" onClick="Probar('O')">
</td>
<td>
<input name="P" type="button" id="P" value="P" onClick="Probar('P')">
</td>
<td>
<input name="Q" type="button" id="Q" value="Q" onClick="Probar('Q')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="R" type="button" id="R" value="R" onClick="Probar('R')">
</td>
<td>
<input name="S" type="button" id="S" value="S" onClick="Probar('S')">
</td>
<td>
<input name="T" type="button" id="T" value="T" onClick="Probar('T')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="U" type="button" id="U" value="U" onClick="Probar('U')">
</td>
<td>
<input name="V" type="button" id="V" value="V" onClick="Probar('V')">
</td>
<td>
<input name="W" type="button" id="W" value="W" onClick="Probar('W')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<input name="X" type="button" id="X" value="X" onClick="Probar('X')">
</td>
<td>
<input name="Y" type="button" id="Y" value="Y" onClick="Probar('Y')">
</td>
<td>
<input name="Z" type="button" id="Z" value="Z" onClick="Probar('Z')">
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>

43
 Tema 3

<td>
<INPUT NAME="adivinar" TYPE="text" ID="adivinar" Class="texto">
</td>
</tr> Hojas de estilo:
</table> Se verá en el
tema de DHTML.
<p>
<font size="2" face="Arial, Helvetica, sans-serif">
N&ordm; de intentos que te quedan:
</font> <input name="intentos" type="text" id="intentos">
</p>
</form>
</BODY>

</HTML>
[Link]

Vamos a por las explicaciones parciales de las 2 porciones de código más especiales:

function Comenzar()
{
var i;
var longitud;

BotonesVisibles();

num_intentos = 6;
palabra = "";
do
{
palabra = prompt("Introduzca una palabra para adivinar","");
}
while((palabra=="")||(palabra==null));

palabra = [Link]();

[Link] = num_intentos;

longitud = [Link];
for(i=0;i<=longitud-1;i++)
{
sugerida[i] = " - ";
}

EscribirPalabra();
}

Lo primero es inicializar las variables que usaremos, así como poner visibles todos los
botones de las letras mediante la función BotonesVisibles().

Mediante el bucle do-while se pide la palabra que luego habrá que adivinar. Lo ideal
sería que el sistema tuviera una lista de palabras grabadas de antemano, pero de momento,
para esta práctica, lo hacemos así.

Mediante la sentencia palabra = [Link]() lo que hacemos es

pasar a mayúsculas el contenido de la variable palabra.

Luego se ponen el número de intentos en la caja de texto INPUT TYPE="text" de los

intentos, y se rellena el array sugerida a guiones. Este array contiene la palabra que hay que

44
 Tema 3

adivinar, pero en lugar de las letras se inicializa a guiones, y cada vez que se acierta una letra
se cambia el guión por la letra correspondiente.

A continuación mostramos en pantalla el array sugerida, que inicialmente será todo

guiones.

Vamos a analizar ahora el bucle especial del que antes hablábamos, y que se encarga
de recorrer todos los elementos del formulario:

for (i=0; i<[Link]; i++)

{
if ([Link][i].name==letra)
{
[Link][i].[Link] = "hidden";
}
}

Es muy simple, ¿verdad? Se trata de un bucle for especial. Pero hemos utilizado la
características elements de los formularios, que es un array con los elementos del formulario.

Lo primero es recorrer dicho array desde cero hasta su length. Una vez dentro del
bucle preguntamos qué botón se ha pulsado. Como hemos puesto la propiedad NAME y la
propiedad ID de los botones igual a la letra que indican, sólo tengo que preguntar si el NAME
del elemento actual es igual a la letra que se ha pasado por parámetro a la función. En ese
caso pondré dicho botón a invisible, accediendo a la propiedad style que tiene un atributo,
visibility, que puede tomar dos valores, hidden y visible. Estos valores y esta
propiedad son fundamentales en DHTML.

No es difícil el código, ¿verdad? Es algo laborioso, sobre todo teniendo en cuenta de

que este es el primer programa más completo que hacemos en este curso.

Repasa ahora el código poco a poco, con todas las explicaciones leídas e intenta
comprender cómo la descomposición de las funciones que hay es natural, de cara a modular
un poco el propio código.

7. COOKIES
Seguramente en más de una ocasión ya has visto el término de cookie navegando por
Internet, en mensajes del tipo “debe de tener las cookies activadas para ver correctamente esta
página”, o similares.

Las cookies es el medio por el que la página web almacena una limitada información
temporal en el ordenador del navegante. Permiten almacenar datos del usuario sin tener que
tener esta información guardada en grandes ficheros en los servidores de la propia página.
Información desde una configuración de colores, por ejemplo, hasta incluso contraseñas,
aunque no es buena idea guardar contraseñas en las cookies.

Las cookies son simples archivos de texto que no contienen código ejecutable, sólo
texto. Un ejemplo típico de una cookie es contar el número de veces que un usuario ha visitado
una página.

45
 Tema 3

En esta línea, se podría decir que si alguna página instala una cookie en nuestro
ordenador que lo que haga sea “vigilar” por qué páginas se navega para conocer así los
hábitos de navegación de los usuario y poder crear estadísticas, o incluso, un marketing más
enfocado, y lo hace de una forma ilícita, es decir, sin pedir permiso al usuario de esa
instalación u omitiendo para qué va a ser usada esa información, entonces sí podría decirse
que estamos ante un intento de una actividad que debe de ser detenida, y ahí es donde entran
en juego los sistemas de antivirus y protección de la máquina y de nuestra información.

Pero la propia cookie en si no representa ningún problema, sinó es más bien el uso que
se da de esa información recopilada.

Vamos a ver a continuación cómo trabajar en JavaScript con las cookies.

Básicamente, las tres operaciones que podemos hacer son:

ƒ Crear una cookie

ƒ Consultar una cookie
ƒ Eliminar una cookie

Las cookies se almacenan como una cadena de texto que pertenece a la propiedad
cookie del objeto document.

7.1. CREAR UNA COOKIE

Nos vamos a crear una función para crear una cookie que sea capaz de establecer
todos sus valores mediante los parámetros que le pasemos. De esta forma será mucho más
sencillo trabajar con las cookies:

function CrearCookie(nombre, valor, caducidad, path, dominio,

seguro)
{
[Link] = nombre + "=" + escape(valor) +
((caducidad == null) ? "" : "; expires=" +
[Link]()) +
((path == null) ? "" : "; path=" + path) +
((dominio == null) ? "" : "; domain =" + dominio) +
((seguro == null) ? "" : "; seguro");
}

Los valores que podemos establecer en una cookie son:

ƒ name: Nombre de la cookie.

ƒ valor: Valor de la cookie.
ƒ caducidad: Fecha de caducidad de la cookie. Si no se dice nada, la cookie caduca
cuando termina la sesión del usuario.
ƒ dominio: Si se pone un dominio, sólo las páginas de ese dominio podrán acceder a
la cookie.
ƒ path: Establece qué directorio dentro del dominio anterior son las páginas que
pueden acceder a la coookie.
ƒ seguro: Si se establece, sólo se podrá transmitir la cookie si la conexión es segura
(SSL).

Los dos primeros parámetros son los obligatorios. El resto son opcionales. Podríamos
tener así, la siguiente sentencia:

CrearCookie("Ejemplo", "Cookie de ejemplo");

46
 Tema 3

La sentencia espace, “codifica” la cookie.

7.2. CONSULTAR UNA COOKIE

Una cookie se busca por su nombre dentro de la cadena [Link]. Vamos a

ver el código asociado:

function LeerCookie(nombre)
{
var cnombre = nombre + "=";
var dc = [Link];

if ([Link] > 0)
{
inicio = [Link](cnombre);
if (inicio != -1)
{
inicio += [Link];
fin = [Link](";",inicio);
if (fin == -1)
{
fin = [Link];
}
return unescape([Link](inicio, fin));
}
}
return null;
}

La sentencia unescape se encarga de “decodificar” la cookie.

7.3. BORRAR UNA COOKIE

Para eliminar una cookie tan sólo hay que poner la fecha de caducidad a una anterior a
la actual:

function BorrarCookie (nombre, path, dominio)

{
if (getCookie(nombre))
{
[Link] = nombre + "=" +
((path == null) ? "" : "; path=" + path) +
((dominio == null) ? "" : "; domain=" + dominio) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}

7.4. EJEMPLO DE USO

En el siguiente ejemplo colocamos un formulario con una caja de texto. Vamos a

guardar en una cookie lo que escribamos en el formulario. Podremos ver el valor de la cookie
con el botón que vamos a poner, pero también haremos una función que usaremos en el

47
 Tema 3

onLoad del formulario y que establezca el valor inicial de la caja de texto al valor de la cookie,
si existe.

Para ver esta funcionalidad, basta con ejecutar la página y establecer un valor para la
cookie. Luego cierra la página y vuelve a abrirla. Verás que la caja de texto tendrá el valor que
tiene almacenada la cookie.

También le daremos un plazo de caducidad a la cookie.

[Link]

<html>
<head>
<script language="javascript">
<!--

function CrearCookie(nombre, valor, caducidad, path, dominio,

seguro)
{
[Link] = nombre + "=" + escape(valor) + ((caducidad
== null) ? "" : "; expires=" + [Link]()) + ((path
== null) ? "" : "; path=" + path) + ((dominio == null) ? "" : ";
domain =" + dominio) + ((seguro == null) ? "" : "; seguro");
}

function LeerCookie(nombre)
{
var cnombre = nombre + "=";
var dc = [Link];

if ([Link] > 0)
{
inicio = [Link](cnombre);
if (inicio != -1)
{
inicio += [Link];
fin = [Link](";",inicio);
if (fin == -1)
{
fin = [Link];
}
return unescape([Link](inicio, fin));
}
}
return null;
}

function Mostrar()
{
var Visitante = LeerCookie('Visitante2')
if (Visitante != null)
{
[Link] = Visitante;
}
return;
}

48
 Tema 3

var validez = 10;

var caduca = new Date(); <!-- Almacenamos en una variable la
fecha actual -->
[Link]([Link]() + (validez*24*60*60*1000)); <!--
Incrementamos la fecha de caducidad tantos días como valor tenga
la variable "validez" -->

// -->
</script>

</head>

<body onLoad="Mostrar()">

<h1>Ejemplo de cookies</h1>
<hr>
<form name="formulario" method="get">
Introduce tu nombre:
<input type="text" name="Nombre">
<input type="button" value="Enviar"
onClick="CrearCookie('Visitante2',[Link],caduca,'/')">
<br><br>
<input type="button" value="Leer cookie"
onClick="alert(LeerCookie('Visitante2'))">
</form>

</body>
</html>
[Link]

49
 Tema 3

AUTOEVALUACIÓN

1. Indica qué estructura de las siguientes es la correcta:

A. If (x>2) y=100;

B. If (x>2) then y=100;

C. If x>2 y=100;

D. if (x>2) y=100;

2. Indica qué bucle no termina nunca:

A. do {…} while (!fin);

B. do {…} while (fin==false);

C. do {…} while (true);

D. do {…} while (fin==true);

3. El evento onLoad se produce:

A. Al cargar una imagen en la página web.

B. Al cargar una imagen en la memoria de la página web.

C. Justo después de cargar una imagen en la página web.

D. Al cargar la página web.

4. ¿Qué pasa si el navegador no interpreta JavaScript?:

A. Nada.

B. Sacará en pantalla las líneas de texto que hay entre las

etiquetas SCRIPT a no ser que haya puesto los símbolos de
comentario para evitar esto.

C. No existen navegadores que no interpreten JavaScript.

D. Ninguna de las otras opciones es cierta.

5. Una cookie es:

A. Una forma de obtener información ilícita del usuario.

B. Una forma de guardar información del usuario en la

máquina del propio usuario.

50
 Tema 3

C. Un virus.

D. Ninguna de las otras opciones es cierta.

6. JavaScript distingue entre mayúsculas y minúsculas:

A. Nunca.

B. Sólo en algunas palabra clave determinadas.

C. Siempre.

7. Es obligatorio declarar las variables en JavaScript:

A. Verdadero.

B. Falso.

C. No existen las variables en JavaScript. En un lenguaje

póbremente tipado.

8. JavaScript permite el uso de bucles anidados:

A. Verdadero.

B. Falso.

C. Sólo cuando se trata de blucles del tipo for.

51
 Tema 3

Ejercicios Propuestos
1. Programar un SCRIPT que tenga una función que nos indique si una dirección de
correo que se le pase por parámetro tiene el signo @ en ella. Hacerla en un
fichero .js externo.

2. Programa un formulario con los campos nombre, apellidos, dirección, código

postal, localidad y provincia, y con un botón que envíe el formulario al servidor,
pero que antes de enviarlo verifique que los campos nombre y apellidos están
rellenos. Si no lo están, el formulario no se enviará al servidor y se dará un
mensaje para que el usuario rellene dichos datos.

3. Programa una calculadora al estilo de la calculadora de Windows. Deberá de tener

una botonera y una caja de texto donde mostrar los resultados. Las operaciones
serán las básicas: suma, resta, multiplicación y división.

52