1.- INTRODUCCIÓN...........................................................................................................................

3
1.1.-QUÉ ES JAVASCRIPT.......................................................................................................................3
1.2.-DÓNDE Y CÓMO ESCRIBIR LOS GUIONES................................................................................................3
2.- USO Y CLASIFICACIÓN DE OBJETOS ............................................................................................3
2.1.-CLASIFICACIÓN DE OBJETOS..............................................................................................................4
2.2.-PROPIEDADES Y MÉTODOS DEL OBJETO WINDOW......................................................................................4
2.2.-PROPIEDADES Y MÉTODOS DEL OBJETO DOCUMENT....................................................................................5
2.3.-PROPIEDADES Y MÉTODOS DEL OBJETO HISTORY......................................................................................5
2.4.-PROPIEDADES Y MÉTODOS DEL OBJETO LOCATION.....................................................................................6
3.-MANEJADORES DE EVENTOS.........................................................................................................6
onMouseover....................................................................................................................................................7
onClick............................................................................................................................................................7
onFocus - onBlur..............................................................................................................................................7
onLoad............................................................................................................................................................7
onUnload.........................................................................................................................................................8
onMouseout.....................................................................................................................................................8

4.- OPERADORES, ASIGNACIONES Y COMPARACIONES......................................................................8

Operadores......................................................................................................................................................8
Asignaciones....................................................................................................................................................8
Comparaciones.................................................................................................................................................9

5.- VARIABLES.................................................................................................................................. 9
6.- SENTENCIAS CONDICIONALES...................................................................................................10
7.- BUCLES...................................................................................................................................... 10
7.1.- BUCLE FOR............................................................................................................................... 11
7.1.- BUCLE WHILE............................................................................................................................11
7.3.- SENTENCIAS BREAK Y CONTINUE......................................................................................................11
8.- FUNCIONES................................................................................................................................11
9.- BARRAS DE ESTADO CON DESPLAZAMIENTO..............................................................................12
10.- IMÁGENES DE SUSTITUCIÓN....................................................................................................13
11.- BANNERS CÍCLICOS.................................................................................................................15
11.1.- AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS.....................................................................................15
12.- MARCOS...................................................................................................................................16
13.- TRABAJAR CON VENTANAS DE NAVEGADOR.............................................................................17
13.1.- ABRIR UNA VENTANA NUEVA.........................................................................................................17
13.2.- CARGAR DIFERENTES CONTENIDOS EN UNA VENTANA.............................................................................17
13.3.- DESPLAZAMIENTOS EN UNA NUEVA VENTANA......................................................................................18
13.4.- ACTUALIZAR UNA VENTANA DESDE OTRA...........................................................................................18
13.5.- CREAR PÁGINAS NUEVAS.............................................................................................................18
13.6.- CREAR UN PANEL DE CONTROL.......................................................................................................18
14.- VALIDACIÓN DE FORMULARIOS...............................................................................................19
14.1.- OBJETOS, PROPIEDADES Y MÉTODOS DE FORMULARIOS..........................................................................19
OBJETO FORM.................................................................................................................................. 19
OBJETOS BUTTON, SUBMIT Y RESET.......................................................................................................19
OBJETOS TEXT, TEXTAREA Y PASSWORD..................................................................................................19
OBJETO CHECKBOX...........................................................................................................................20
OBJETO RADIO................................................................................................................................ 20
OBJETO SELECT............................................................................................................................... 20
14.2.- VERIFICAR CONTRASEÑAS............................................................................................................20
14.3.- LISTA DESPLEGABLE DE DIRECCIONES..............................................................................................21
14.4.- BOTONES DE OPCIÓN.................................................................................................................21
15.- CONSTRUCCIÓN DE PÁGINAS DINÁMICAS................................................................................22

1
 15.1.- IMPRIMIR LA FECHA ACTUAL..........................................................................................................22
15.2.- PERSONALIZAR EL MENSAJE SEGÚN EL MOMENTO.................................................................................23
16.- JAVASCRIPT Y LAS COOKIES....................................................................................................23
16.1.- ESTABLECER COOKIES.................................................................................................................23
16.2.- MOSTRAR COOKIES....................................................................................................................24
16.3.- BORRAR COOKIES.....................................................................................................................24
16.4.- Contador de visitas individual..................................................................................................24

2
1.- INTRODUCCIÓN
1.1.-QUÉ ES JAVASCRIPT

Javascript no es Java:
 Java es un lenguaje de programación, desarrollado y comercializado por Sun Microsystems, que crea
programas totalmente autosuficientes. Estos programas se descargan en Internet, y se ejecutan en el
navegador al ser referenciados en la página web mediante las etiquetas OBJECT o APPLET.
 Javascript también es un lenguaje de programación que puede usarse para añadir interactividad a las
páginas web. Sin embargo, los scripts de Javascript se escriben en la página web, al igual que se escriben
etiquetas y texto con HTML. En los comienzos fue desarrollado por Netscape.

Javascript se puede utilizar para muchas cosas, creando una interfaz de usuario activa:
 Crear botones que se destacan luminosamente al pasar el cursor por encima de ellos.
 Comprobar que los usuarios introducen información válida en los formularios, sin necesidad de utilizar un
programa CGI de servidor.
 Crear páginas HTML personalizadas sobre la marcha, dependiendo de las acciones ejecutadas por el
usuario.
 Controlar el navegador para abrir ventanas nuevas, visualizar ventanas de alerta, insertar mensajes
personalizados en la barra de estado.
 Generar documentos con relojes, calendarios y hora, mediante un conjunto de funciones de fecha y hora.

1.2.-DÓNDE Y CÓMO ESCRIBIR LOS GUIONES

Los guiones de Javascript se pueden crear con cualquier editor de texto, e irán encerrados entre las etiquetas
<SCRIPT LANGUAGE=JAVASCRIPT> y </SCRIPT> (para la versión 1.2 utilizaremos LANGUAJE=”JAVASCRIPT1.2”).
Un guión se puede colocar:
 En la cabecera de un documento HTML, entre las etiquetas <HEAD> y su cierre, siempre que el guión no
vaya a escribir texto en la pantalla.
 En el cuerpo del documento HTML, entre las etiquetas <BODY> y su cierre.
 Utilizando únicamente el código Javascript.

A diferencia de HTML, Javascript:

 Distingue entre mayúsculas y minúsculas (es “case sensitive”).
 Provoca errores cuando se insertan espacios en blanco o saltos de línea donde no corresponde utilizarlos.
 Cada línea se corresponderá con una sentencia, aunque podemos separar unas sentencias de otras
mediante punto y coma “;”.
 Exige el empleo de comillas simples dentro de comillas dobles.

EJEMPLO – DÓNDE Y CÓMO – (script01)

Por otra parte, también podemos insertar comentarios que no se visualizarán en el navegador, con el fin de
documentar los guiones. Para comentar una sola línea emplearemos dos barras inclinadas hacia la derecha al
inicio de la misma:
//Comentario corto
Para insertar un comentario que ocupa varias líneas, escribiremos /* al inicio y */ al final del comentario:

/*Un comentario un poco

más largo que el anterior*/
Además, las versiones antiguas de los navegadores (Netscape 1.x, Explorer 3 y anteriores) no soportan
Javascript. Aunque deberían ignorar cualquier etiqueta que no entienden, no todos lo hacen. Para “engañar” a
estos navegadores les haremos creer que el guión es un comentario de HTML, utilizando <!-- y --> como
primera y última línea del script respectivamente.

EJEMPLO – COMENTARIOS – (script02)

2.- USO Y CLASIFICACIÓN DE OBJETOS

Javascript es un lenguaje basado en objetos.

3
 Los objetos con los que trabaja Javascript son ventanas, documentos, formularios, los botones y las casillas
de verificación de los formularios, etc. Se trata de elementos que ya existen, como un documento, aunque
también se pueden crear nuevos objetos.
Los objetos tienen una serie de propiedades asociadas. Las propiedades pueden modificar a los objetos, y la
misma propiedad se puede aplicar a objetos completamente diferentes. Por ejemplo, una propiedad de un
documento es el color de fondo.
Por otra parte, los objetos tienen comportamientos que les pertenecen. Estos comportamientos o acciones se
denominan métodos. Por ejemplo clic() para los botones, open() para las ventanas, etc. Los paréntesis nos
indican que estamos refiriéndonos a un método y no a una propiedad.
En general, podríamos pensar que los objetos son sustantivos, las propiedades son adjetivos y los métodos
son verbos.
Para obtener una descripción mejor de un objeto o un proceso podemos juntar los objetos, las propiedades y
los métodos mediante la SINTAXIS DE PUNTO, separándolos por puntos:

objeto.propiedad document.bgcolor
o bien
objeto.método(parámetros del método)

Por ejemplo, para especificar el color de fondo de un documento escribiremos document.bgcolor=color y

para escribir algo en el documento document.write(“Bienvenido a mi página”).

2.1.-CLASIFICACIÓN DE OBJETOS

Cada objeto predefinido de Javascript determina una clase, con unas propiedades y métodos propios. Por
ejemplo, todas las imágenes pertenecen a la clase Image. Cada uno de los objetos de una clase será una
instancia de dicha clase de objeto y cada una de las instancias tendrá un nombre distinto.
Para especificar que una variable será un instancia de una clase de objeto, utilizaremos la palabra new:

instancia=new clase

Por ejemplo, torre=new Image, indica que la variable “torre” es un nuevo objeto de la clase “Image” y que
por lo tanto tendrá asociadas las mismas propiedades y métodos. La variable “torre” es una instancia del objeto
“Image”.

Las distintas clases de objetos que podemos emplear en Javascript son:

 Objetos con una única instancia: estos objetos no permiten crear copias de su clase mediante la
instrucción “new”. Suelen utilizarse para consultar una serie de características del ordenador del cliente, o
para manejar una serie de constantes y funciones de tipo matemático. Objetos de este tipo son Math,
Number, Navigator, Screen.
 Objetos asociados a tipos de datos: Estos objetos nos permiten definir tantas instancias de su clase como
nos interese. Entre ellos tenemos Array, Date, Function, String.
 Objetos dependientes jerárquicamente del objeto “window”: forman una jerarquía de objetos, de manera
que un objeto es una propiedad de otro objeto que a su vez es una propiedad de otro, y así
sucesivamente. En el nivel más alto de la jerarquía se encuentra el objeto “window”, y dependientes de él
serán los objetos “document”, “form”, “Image”, “Link”, “history”, “frame” y “location”. Veremos ahora las
propiedades y métodos de algunos de ellos.

2.2.-PROPIEDADES Y MÉTODOS DEL OBJETO WINDOW

El objeto “window” es el que se encuentra en el nivel más alto de la jerarquía de objetos de Javascript. Los
objetos “Frame”, “document”, “history” y “location” son propiedades del objeto “window” y a su vez son objetos
por sí mismos.
Por ejemplo, “window.location” especifica la nueva URL del documento que se muestra en la ventana, y
“location.href.” tiene la misma función.
Otras propiedades de “window” son:

PROPIEDAD DESCRIPCIÓN
length número de marcos en la ventana
name nombre de la ventana
opener nombre del objeto window que abrió la ventana actual

4
 parent ventana que contiene al marco actual
self sinómino para la ventana actual
status mensaje de la barra de estado
top ventana de nivel más alto que contiene al marco actual

Algunos métodos del objeto “window” son los siguientes:

MÉTODO DESCRIPCIÓN
alert muestra una ventana con un mensaje y un botón OK
confirm muestra una ventana con un mensaje y botones OK/CANCEL
prompt muestra una ventana con caja de texto y botones OK/CANCEL
back vuelve a la página anterior
forward va a la página siguiente
home va a la página de inicio
stop para la descarga de la página
focus centra el foco en la ventana
blur aleja el foco de la ventana
open abre una nueva ventana
close cierra la ventana
scroll desplaza el documento en la ventana a una posición concreta
setTimeout ejecuta una instrucción después de un número de milisegundos
clearTimeout cancela el tiempo de espera de un script que se inició con setTimeout

2.2.-PROPIEDADES Y MÉTODOS DEL OBJETO DOCUMENT

Este objeto hace referencia al documento de la ventana o marco. Puede ser también una propiedad de
“window” y de “frame”.
Al igual que “window”, el objeto “document” tiene propiedades que son objetos por sí mismas como “Link”,
“links”, “Form”, “forms”, “Image”, “images”. Otras propiedades que podemos destacar son las siguientes :

PROPIEDAD DESCRIPCIÓN
bgColor color del fondo en formato RGB
fgColor color del texto en formato RGB
linkColor color de los vínculos en formato RGB
alinkColor color de los vínculos activos en formato RGB
vlinkColor color de los vínculos visitados en formato RGB
URL del documento. Puede leerse pero no cambiarse.
location
No debe confundirse con "window.location"
URL igual que la anterior
URL del documento que contiene el enlace sobre el
referrer que el usuario ha pulsado para acceder al documento actual.
Si no hay ninguna, devuelve un espacio en blanco
title texto incluido entre <TITLE> y </TITLE>
lastModified fecha en que el documento fue modificado por última vez

Existe un método de “document” que sirve para escribir en el documento: el método write. También tiene
asociados los métodos open y close, que sirven para abrir y cerrar el flujo de escritura en el documento, y
serán usados para escribir en una ventana o marco desde otro.

2.3.-PROPIEDADES Y MÉTODOS DEL OBJETO HISTORY

5
 El objeto “history” representa la lista que mantiene el navegador de todas las páginas que ha visitado el
usuario durante la sesión.

PROPIEDAD DESCRIPCIÓN
length número de páginas visitadas durante la sesión
current URL del documento actual
previous URL del documento anterior
next URL del documento siguiente

MÉTODO DESCRIPCIÓN
back() carga el documento anterior de la lista history
forward() carga el documento siguiente de la lista history
carga el documento del índice indicado de la lista
go()
history

2.4.-PROPIEDADES Y MÉTODOS DEL OBJETO LOCATION

Este objeto representa la URL del documento actual. Cada parte de la URL coincide con una propiedad del
objeto:

PROPIEDAD DESCRIPCIÓN
href URL completa
protocol método de acceso a la información (http, ftp...)
nombre de la máquina a la que nos conectamos
host
(www.iespuntadelverde.com)
puerto por el que nos conectamos. Si no se indica,
port
toma el asignado por defecto
pathname ruta del documento en el servidor
hash ancla del documento donde nos queremos posicionar
search cadenas de consulta
hostname nombre de la máquina y puerto

El objeto “location” tiene los métodos reload, para volver a cargar la página, y replace para cargar la página
que se le indica de modo que ocupe en la lista history la posición que ocupaba la actual.

EJEMPLO – PROPIEDADES – (script03)

En este ejemplo todas las sentencias de Javascript utilizan “document.write”. Para que imprima el valor
intrínseco de las propiedades de los objetos junto con el texto, debemos incluir el texto entre comillas dobles y
sumarle el nombre de la propiedad correspondiente.

3.-MANEJADORES DE EVENTOS
Los eventos son acciones que el usuario realiza mientras visita la página, como enviar un formulario, mover el
ratón, etc. A cada evento que tiene lugar podemos asociarle una nueva acción mediante un guión de Javascript.
Para ello trabajaremos con manejadores de eventos. Por ejemplo, un evento puede ser que el usuario envíe un
formulario y la reacción mostrarle una ventana de alerta.
La sintaxis de un manejador de eventos es la siguiente:

onEvento = “código Javascript”

Si queremos ejecutar más de una sentencia de Javascript, separaremos unas de otras mediante comas.

onEvento = “sentencia JS 1, sentencia JS 2, ...”

6
 Estos manejadores de eventos, aunque emplean el código de Javascript para provocar una nueva acción, se
insertan en el código HTML acompañando a la etiqueta del objeto sobre el que deben actuar. Se dice que están
“incrustados”, por lo que no requieren la etiqueta <SCRIPT> y su correspondiente etiqueta de cierre:

<ETIQUETA onEvento = “código Javascript”>

Y para asociar más de un manejador de eventos a un mismo objeto, basta con que separemos unos de otros
mediante espacios en blanco:

<ETIQUETA onEvento1 = “sentencias de Javascript” onEvento2 = “sentencias de JS”>

Como vemos en la sintaxis, el código Javascript asociado a un evento se encuentra entre comillas dobles, por
lo tanto dentro del mismo debemos incluir comillas simples cuando sea necesario.
Algunos manejadores de eventos son:

MANEJADOR DE EVENTO CUÁNDO SE EJECUTA EL SCRIPT

onClick Se produce un click sobre el objeto
onDblClick Se produce un doble click sobre el objeto
onMouseover El ratón se desplaza sobre el objeto
onMouseout El cursor se retira del objeto
onKeydown Se pulsa una tecla sobre el objeto
onKeyup Se suelta una tecla sobre el objeto
onLoad Termina la carga del documento o imagen
onAbort Se interrumpe la carga del documento
onUnload Se abandona el documento
onFocus Se activa el objeto
onBlur Se abandona el objeto
onChange Se abandona y ha cambiado el objeto
onSubmit Se envía el formulario
onReset El formulario se devuelve a sus valores iniciales
onSelect Se selecciona el texto del objeto

Veamos algunos ejemplos sobre manejadores de eventos.

ONMOUSEOVER

 Podemos insertar el manejador de evento antes o después del modificador HREF.

 El código Javascript especifica lo que queremos que ocurra cuando el cursor del ratón pase por encima del
texto del enlace.
 “window" es un objeto y “status” una de sus propiedades. Especifican que se escribirá en la barra de
estado el texto que asignemos entre comillas. Utilizamos comillas simples por encontrarse entre comillas
dobles.
 El punto y coma le indica al manejador de evento que termina una sentencia y comienza una nueva, de
forma que son dos sentencias relacionadas entre sí.
 Una sentencia que podemos emplear en Javascript es “return true/false”, que devolverá uno de los valores
booleanos. En este ejemplo nos sirve para evitar que la dirección del enlace aparezca en la barra de
estado, de forma que siempre permanece el texto especificado mediante “window.status”.

ONCLICK

 Al pulsar sobre el enlace, se crea una ventana de alerta que avisa al usuario. Para ello utilizamos el
método “alert()” del objeto “window”, que podemos escribir sólo cuando “window” hace referencia a la
ventana actual. Como parámetro del método incluimos el mensaje entre comillas dobles (en este caso
simples por encontrarse ya entre comillas dobles).
 “return false” devuelve falso, por lo que la acción que debe ejecutarse tras cerrar la ventana se detiene
(no se produce la búsqueda de la página a la cual hace referencia el enlace).

7
  En el segundo ejemplo (go.htm) el método “go()” del objeto “history” nos permite introducir botones que
nos llevarán a las páginas anterior y posterior visitadas por el usuario. Los parámetros de “go()” son
números, positivos para ir hacia delante en el historial de páginas visitadas durante la sesión y negativos
para ir hacia atrás.

ONFOCUS - ONBLUR

 Con este ejemplo queremos que en la barra de estado aparezca un texto explicativo sobre lo que el
usuario debe escribir cuando se sitúa en un cuadro de texto de un formulario. El evento tiene lugar cuando
el usuario coloca el cursor en la caja.
 Cuando el cursor abandona la caja, aparece un nuevo texto en la barra de estado.

ONLOAD

Este manejador del evento “load” se sitúa dentro de las etiquetas <BODY> o <IMG...> del documento HTML, de
forma que la acción deseada se ejecuta cuando termina de cargarse el documento o la imagen.

ONUNLOAD

En este caso la acción se ejecutará cuando el usuario abandone la página, bien porque cierra la ventana o
porque carga otro documento en la misma ventana. Debe incluirse acompañando a la etiqueta <BODY> del
documento HTML.

ONMOUSEOUT

Las sentencias de Javascript asociadas a este manejador de eventos se ejecutarán cuando el cursor abandone
el objeto. Como vemos puede aplicarse a cualquier objeto: un trozo de texto, un vínculo, una imagen, etc.

PRÁCTICA 01

Crea una página que contenga un trozo de texto, de forma que al situar el ratón sobre él cambie el
color de fondo del documento y al mismo tiempo aparezca un mensaje en la barra de estado.

4.- OPERADORES, ASIGNACIONES Y COMPARACIONES

OPERADORES

Los operadores son los símbolos empleados para trabajar con variables. En Javascript podemos utilizar los
siguientes:

OPERADOR ACCIÓN
x+y (numérico) suma x e y
x+y (cadena) concatena x e y
x-y resta y a x
x*y multiplica x e y
x/y divide x entre y
x%y resto de la división
x++,++x añade uno a x (x=x+1)
x--,--x resta uno a x (x=x-1)
-x invierte el signo de x

Debemos tener en cuenta las siguientes consideraciones:

 Si sumamos valores numéricos y cadenas, el resultado será una cadena.

8
  Aunque tanto “x++” como “++x” añaden uno a la variable “x”, no son idénticos. El primero incrementa
“x” después de que la asignación esté completa, y el segundo antes de que sea así
Por ejemplo:
x=5 y=x++ da como resultado y=5 x=6 es decir, primero asigna a “y” el valor de “x” y luego
incrementa en uno la variable “x”
x=5 y=++x da como resultado y=6 x=6 es decir, primero incrementa un uno el valor de “x” y
luego se lo asigna a la variable “y”

ASIGNACIONES

Para asignar un valor a una variable debemos utilizar un operador de asignación. Los operadores de
asignación distintos al signo de igualdad nos servirán como atajos para modificar el valor de las variables:

ASIGNACIÓN ACCIÓN
x=y pone en x el valor de y
x+=y igual que x=x+y
x-=y igual que x=x-y
x*=y igual que x=x*y
x/=y igual que x=x/y
x%=y igual que x=x%y

COMPARACIONES

También podemos establecer comparaciones entre el valor de una variable y otra, o comparar una variable
con un valor literal:

COMPARACIÓN ACCIÓN
x==y devuelve verdadero si x e y son iguales
x!=y devuelve verdadero si x e y no son iguales
x>y devuelve verdadero si x es mayor que y
x>=y devuelve verdadero si x es mayor o igual que y
x<y devuelve verdadero si x es menor que y
x<=y devuelve verdadero si x es menor o igual que y
x&&y devuelve verdadero si x e y son verdaderas
x||y devuelve verdadero si x o y son verdaderas
!x devuelve verdadero si x es falsa

5.- VARIABLES

Una variable, al igual que en otros lenguajes, será un nombre empleado para almacenar algún tipo de datos.
En Javascript una variable puede tomar los siguientes valores:
 Números, incluidos enteros expresados en decimal, hexadecimal u octal, o números de punto flotante
 Valores booleanos
 Cadenas de caracteres.
 Valores nulos.
 Una sentencia de Javascript.

Para declarar una variable utilizaremos la palabra reservada “var” de la siguiente forma:

var variable = valor

o bien

var variable

9
 variable = valor

En Javascript no se determina el tipo de variable de que se trata en la declaración, según el tipo de datos que
vaya a almacenar, sino que el propio intérprete se encarga de hacerlo. Además, no es necesario declarar las
variables, basta con que a su nombre le asignemos un valor.
El nombre de una variable no puede coincidir con un comando de Javascript ni con una palabra reservada.
Podrá estar formado por cualquier combinación de números enteros positivos y letras, comenzando por una
letra o un guión bajo pero nunca por un número.

EJEMPLO – VARIABLES – (script04)

En este ejemplo la variable “nombre” toma como valor la salida del comando “prompt”. Es un método del
objeto “window” que se puede emplear sin acompañar a “window” cuando hacemos referencia a la ventana
actual.
El método “prompt” muestra un cuadro con una caja de texto para obtener información del usuario y dos
botones (aceptar y cancelar). Su sintaxis es la siguiente:

prompt(“Mensaje del cuadro”, “Respuesta predefinida”)

Si el usuario pulsa el botón “Cancelar”, la variable almacenará un valor nulo (null).

Si por el contrario el usuario pulsa el botón “Aceptar”, la variable almacenará la información que el usuario
haya escrito en el cuadro de texto.
Posteriormente podemos presentar en la ventana la respuesta del usuario, incrustando el valor intrínseco de la
variable con el método “write” de “document”.

6.- SENTENCIAS CONDICIONALES

Una sentencia condicional es aquella que establece una condición para que se realicen una serie de acciones u
otras.
En Javascript la sintaxis de las sentencias condicionales es la siguiente:

if (condición){
sentencia1
sentencia2
.
.
}
else{
sentenciaX
sentenciaY
.
.
}

o bien

(condición)?sentencias_then:sentencias_else

Si solamente hay una sentencia (tanto en el bloque “if” como en el bloque “else”) las llaves de inicio y cierre
del bloque se pueden suprimir.

EJEMPLO – CONDICIONALES – (script05)

En este ejemplo pretendemos comprobar si el usuario está utilizando el navegador Netscape o no, mediante la
propiedad “appName” del objeto “navigator”.
El objeto “navigator” es un objeto con una única instancia. Sus propiedades pueden consultarse pero no
pueden modificarse. Son las siguientes:

PROPIEDAD DESCRIPCIÓN
appCodeName nombre del código del navegador (Mozilla para Netscape)
appName nombre del navegador
appVersion versión del navegador
userAgent información que envía el navegador al servidor

10
 language lenguaje del navegador
platform sistema operativo que se utiliza

Además, como método de “navigator” tenemos “javaEnabled()”, que devuelve “true” si Java está activado.

EJEMPLO – MÉTODO CONFIRM() – (script06)

Para comprobar si el usuario acepta o rechaza una cuestión podemos utilizar el método “confirm()” del objeto
“window”, que actúa de la misma forma que “alert()” y “prompt()”. Este método muestra una ventana con un
mensaje y los botones “aceptar” (devuelve verdadero) y “cancelar” (devuelve falso).Su sintaxis es la
siguiente:
confirm(“cuestión que aparece en el cuadro”)

PRÁCTICA 02

Crea una página de forma que si el usuario ha visitado alguna página antes que esta, muestre un
mensaje diciendo cuántas páginas ha visitado antes. Si esta es la primera página que visita el
usuario, se lo agradeceremos en una ventana de alerta y luego lo redireccionaremos a nuestra home
page.

7.- BUCLES

Los bucles permiten ejecutar un bloque de código un número determinado de veces. Los que podemos utilizar
en Javascript son:
 Estructura “for”.
 Estructura “while”.
 Estructura “for/in”.
 Estructura “do/while”.

7.1.- BUCLE FOR

En este caso el código al que hace referencia se ejecutará siempre que se cumpla la condición impuesta.
Utiliza una variable de control, denominada “contador”, que comienza siempre con un valor. En el código del
bucle especificaremos:
 El valor inicial del contador.
 La condición.
 El modo en que se incrementa o disminuye el contador.
 Las sentencias a ejecutar.
Su sintaxis es la siguiente:

for (contador=inicio;condición;incremento/decremento)
{
sentencia1
sentencia2
.
.
}

También podemos suprimir las llaves de inicio y cierre del bucle si éste sólo contiene una sentencia.

EJEMPLO – BUCLES – (script07)

PRÁCTICA 3

Crea una página que presente los números naturales del 1 al 10, indicando junto a cada número si
es par o impar. Combinar para ello las sentencias "if" y "for".

7.1.- BUCLE WHILE

11
 En un bucle “for” sabemos desde el principio cuántas veces se va a repetir la ejecución de las sentencias. Sin
embargo, con la estructura “while” el bloque de instrucciones se seguirá ejecutando mientras se cumpla la
condición especificada, sobre la cual no conocemos cuándo dejará de ser cierta.
La sintaxis de esta estructura es:

while (condición)
{
sentencia1
sentencia2
.
.
}

7.3.- SENTENCIAS BREAK Y CONTINUE

La sentencia “break” nos permite interrumpir un bucle y continuar la ejecución del script en la primera
sentencia que se encuentra tras el bucle.
La sentencia “continue” interrumpe la ejecución de una iteración del bucle y comienza a ejecutar la siguiente.

8.- FUNCIONES

Una función será un conjunto de sentencias de Javascript que realizan una tarea determinada, separadas del
resto del código.
Cada función debe recibir un nombre y puede ser llamada desde otras partes del guión. Además, podemos
llamar a una función cuantas veces sea necesario durante la ejecución del guión.
La definición de la función suele incluirse en la cabecera del documento, para que luego el script pueda
llamarla desde cualquier punto de la página web.
La sintaxis para definir una función es:

function nombre (argumento1, argumento2,...)

{
sentencia1
sentencia2
.
.
}

La definición de una función no implica su ejecución. La ejecución se realizará al efectuar una llamada a dicha
función. Para llamar a una función escribimos su nombre seguido del valor de los argumentos separados por
comas y encerrados entre paréntesis. Los argumentos especifican la información que recibirá la función para
procesarla. En el caso de que la función no necesite argumentos, podemos suprimir los paréntesis sólo en la
llamada (no en la definición).
Si nos interesa que la función devuelva algún valor, debemos incluir una sentencia con la palabra reservada
“return” seguida del valor a devolver.

EJEMPLO – FUNCIONES – (script08)

Analicemos este script:
 Entre las etiquetas <HEAD> y su cierre incluimos el script en el cual definimos la función “notas”.
 En la función especificamos que se va a trabajar con un parámetro, “mensaje”, cuyo valor dependerá de
cada llamada que se haga a la función.
 Desde el cuerpo del documento llamamos a la función a través del manejador de eventos “onClick”.
Cuando pulsemos el botón correspondiente se ejecutará la función.
 En la llamada a la función incluimos su nombre y entre paréntesis el valor del parámetro.

9.- BARRAS DE ESTADO CON DESPLAZAMIENTO

Veamos cómo hacer que un trozo de texto aparezca desplazándose en la barra de estado del navegador. Para
ello analizaremos el ejemplo “Barra de estado” (script09). Antes debemos conocer algunas propiedades y
métodos de“String”, objeto asociado a tipos de datos.

12
 Toda cadena en un script es un objeto de tipo “String”. La propiedad más importante es “length”, que
especifica el número de caracteres que contiene la cadena. El método que utilizaremos en este ejemplo es
“substring(posicionA,posicionB)”, que devuelve una parte de la cadena, la formada por los caracteres
comprendidos entre la posición A y la posición B-1, teniendo en cuenta que la posición cero hace referencia al
primer carácter de la cadena.
En el ejemplo:
1. Declaramos la variable “mensaje” asignándole como valor una cadena de texto.
2. Declaramos la variable “i” que actuará como contador.
3. Definimos la función “desplaza”, la cual se encargará de realizar varias tareas:
 Mediante “window.status” asigna a la barra de estado un mensaje. Este mensaje está dividido en dos
partes a través del método “substring()”. “substring(i,mensaje.length)” toma los caracteres del
mensaje desde “i” hasta la longitud del mensaje menos uno, es decir, hasta el último (porque con
substring se empieza a contar en 0) haciendo así referencia a la parte derecha. “substring(0,i)” hará
referencia a la parte izquierda del mensaje. A medida que “i” aumenta, la parte derecha del texto
disminuye en un carácter y la izquierda aumenta.
 La sentencia “if” permite incrementar en uno el valor del contador cuando éste es menor que la
longitud del mensaje. En el momento que la sobrepasa, debemos actualizar su valor a cero.
 Para provocar un bucle, utilizamos el método setTimeout(“sentencia”,milisegundos) que ejecuta
la acción especificada tras hacer una pausa de una cantidad concreta de milisegundos. Estamos
llamando a la función dentro de ella misma.
 En el cuerpo del documento realizamos la llamada a la función a través del evento “onLoad” en la
etiqueta <BODY>. De esta forma el mensaje desplazándose en la barra de estado aparece desde que
se carga la página.

PRÁCTICA 4

Crea una página que pida al usuario que escriba su nombre. Se realizarán las siguientes tareas:
 Si el usuario ha escrito su nombre, mostrará una página dándole la bienvenida de forma
explícita en la barra de estado del navegador, con un mensaje desplazándose.
 Si el usuario no escribe nada (o pulsa el botón "cancelar" del prompt), mostrará un cuadro de
alerta con un mensaje.

10.- IMÁGENES DE SUSTITUCIÓN

Mediante Javascript podemos crear la ilusión de movimiento o animación al situar el ratón sobre una imagen.
Para ello necesitaremos dos imágenes:
 Imagen original: es la imagen que se carga y se visualiza junto con el resto del texto y objetos al
cargarse el documento.
 Imagen de sustitución: es la imagen que reemplaza a la imagen original cuando el ratón se mueve
sobre ella.
Para trabajar con las imágenes debemos conocer antes el objeto “Image”. Se trata de un objeto dependiente
jerárquicamente de “window”, que nos permite crear y manejar imágenes.
Cada objeto “Image” es un objeto por sí mismo y también una propiedad del objeto “document”, de forma
que si creamos una nueva imagen

nombre_imagen=new Image()

estará disponible a través de su nombre, y si insertamos una imagen en el documento mediante la etiqueta
<IMG> de HTML

<IMG SRC=“ruta de la imagen” NAME=“nombre_imagen”>

accederemos a sus propiedades a través de

document.nombre_imagen

Las propiedades de este objeto hacen referencia a los modificadores que pueden acompañar a la etiqueta
<IMG> en HTML:

PROPIEDAD DESCRIPCIÓN
border atributo BORDER de <IMG>

13
 name atributo NAME de <IMG>
src atributo SRC de <IMG>
width atributo WIDTH de <IMG>
height atributo HEIGHT de <IMG>
vspace atributo VSPACE de <IMG>
hspace atributo HSPACE de <IMG>
valor booleano que indica si el navegador
complete
ha cargado completamente la imagen

Además, el objeto “document” tiene una propiedad llamada “images”. Esta propiedad es un vector que
contiene todas las imágenes del documento.
Veamos varios ejemplos de imágenes de sustitución.

IMAGEN DE SUSTITUCIÓN – (script10)

 Para que no tenga lugar un retraso perceptible en la descarga de la segunda imagen al sustituir a la
primera, creamos nuevas variables de tipo “Image()” que guardarán la dirección de las imágenes que
vamos a emplear en el documento. De esta forma, cuando el usuario sitúa el puntero del ratón sobre
una imagen, el guión sustituye el valor de una variable por el de otra, valores que se encuentran en la
memoria caché del navegador. Mediante la propiedad “src” especificamos la ruta de los archivos que
contienen las imágenes.
 Mediante una condición, comprobamos si el navegador no soporta los objetos “Image” (Netscape 2.0,
Iexplorer 3.0, y anteriores) y si el usuario tiene deshabilitada la carga de imágenes. En tal caso
dejamos vacías las variables de tipo imagen.
 En el cuerpo del documento insertamos la imagen original mediante la etiqueta <IMG>, a la cual
asignaremos un nombre empleando el modificador NAME.
 Si queremos que la imagen actúe como enlace, los manejadores de eventos que provocan la
sustitución de una imagen por otra deberán acompañar a la etiqueta <A>. Así,

document.flecha.src=flechaRoja.src

indica que la imagen del documento con nombre “flecha” tomará como dirección aquella que tenga el
objeto imagen “flechaRoja”.

PRÁCTICA 5

Crea una página que cargue la cara de Bart Simpson de forma que, al pasar el ratón sobre la
imagen, Bart saque la lengua y al mismo tiempo aparezca un mensaje en la barra de estado que diga
"¡Qué travieso eres, Bart!". (Utiliza las imágenes "simpson.gif" y "simpson1.gif")

IMAGEN DE SUSTITUCIÓN DESDE UN VÍNCULO DE TEXTO – (script11)

En este ejemplo conseguimos que al pasar el puntero del ratón sobre un vínculo de texto, una imagen del
documento sea reemplazada por su correspondiente imagen de sustitución.
La diferencia con el ejemplo anterior radica en insertar un vínculo de texto mediante la etiqueta <A..>, y
situar la imagen fuera del vínculo.
Esta técnica es útil si queremos ofrecer al usuario un adelanto de lo que verá cuando haga clic en el vínculo.

PRÁCTICA 6

Crea una página que ofrezca una lista de destinos posibles en España (Barcelona, Bilbao, Madrid,
Sevilla) y una imagen con el mapa de España. Al pasar el ratón por el elemento de lista "Sevilla", el
mapa cambiará a una foto de la "Plaza de España" de Sevilla.(Utiliza las imágenes "sevilla.gif" y
"mapa.gif")

IMAGEN DE SUSTITUCIÓN DESDE MÚLTIPLES IMÁGENES – (script12)

En este caso, según la foto sobre la que pasemos el cursor del ratón se mostrará una descripción distinta.
Disponemos de varias imágenes, una de las cuales es sustituida por otra al pasar el cursor del ratón sobre las
demás.
Existirá una imagen de sustitución diferente asociada a cada imagen de vínculo, de forma que cambiará una
única imagen y podrá hacerlo de diferentes formas.

14
 MÚLTIPLES IMÁGENES DE SUSTITUCIÓN – (script13)
Es posible que queramos que una imagen, al situar el cursor del ratón sobre ella, sea reemplazada por una
imagen de sustitución y, a su vez, provoque que otra imagen sea también reemplazada por su correspondiente
imagen de sustitución.
Para ello, incluimos dos acciones diferentes asociadas a un mismo evento que se ejecutarán al mismo tiempo,
separándolas mediante punto y coma (;).

FUNCIONES PARA IMÁGENES DE SUSTITUCIÓN – (script14)

Cuando se utilizan varias imágenes de sustitución en el mismo documento, podemos simplificar el código
definiendo una función.
No será necesario que dejemos vacías las variables de tipo imagen cuando el navegador no soporta las
imágenes, basta con que no se ejecute la sustitución de unas por otras en la función.
La función recibirá como primer argumento el nombre de la imagen original, y como segundo argumento el
nombre de la variable que contiene la imagen de sustitución.
En la llamada a la función, se puede hacer referencia a las variables por su nombre, sin embargo el nombre de
la imagen que se inserta en el documento mediante <IMG> debemos pasarlo como cadena, ya que no se trata
de una variable declarada en el script.
Por ello, no podemos utilizar en la función la sentencia “document.imagen.src”, puesto que “imagen” no será
un objeto sino una cadena de texto. En estos casos podemos utilizar una sintaxis alternativa a la sintaxis de
punto:

objeto1[objeto2] es equivalente a objeto1.objeto2

11.- BANNERS CÍCLICOS

Un banner cíclico es aquel que cambia periódicamente de imagen. Para ello se podría utilizar simplemente un
archivo GIF animado. La ventaja de utilizar Javascript es que nos permite utilizar imágenes JPG y por lo tanto de
mayor calidad.
Para insertar en un documento un banner cíclico necesitamos crear un vector. En Javascript los vectores están
representados por el objeto Array (objeto asociado a tipos de datos).
Un vector está formado por un conjunto de elementos del mismo tipo que se pueden referenciar de forma
individual a través de su índice (lugar que ocupa en el vector, siendo 0 el índice del primer elemento del vector).
Para crear un vector, definimos una nueva variable de tipo Array. Podemos hacerlo de dos formas:
 Especificando los valores de los elementos en la definición:

variable = new Array(elemento1, elemento2, elemento3,...)

 Definiendo el vector y asignando los valores a los elementos en otro momento:

variable = new Array( )

...
variable[0] = elemento1
variable[1] = elemento2
variable[2] = elemento3
...

La propiedad de los vectores con la que trabajaremos es “length”, que hace referencia a la longitud del
vector.

EJEMPLO – BANNERS CÍCLICOS – (script15)

 En primer lugar creamos un nuevo objeto de tipo Array cuyos elementos se corresponden con las
direcciones de las imágenes que vamos a insertar.
 La variable “contador” nos servirá para pasar de una imagen a otra.
 Definimos la función “rotacion”, que realizará las siguientes tareas:
- Comprueba si el navegador soporta objetos de tipo imagen.
- Incrementa en uno el contador para cambiar el índice.
- Comprueba si el valor del contador es mayor que el índice del último elemento del vector.
- Asigna el valor del elemento correspondiente del vector a la dirección de la imagen de <IMG>.
- Provoca un bucle mediante la función “setTimeout”.
 La llamada a la función se realiza al cargar el documento.
 La imagen del documento toma como dirección original la correspondiente al primer elemento del
vector.

15
 Si queremos incluir varios banners cíclicos en el documento, sólo necesitamos algunas líneas más en el
código:
 Definir un vector y un contador por cada banner cíclico.
 Repetir las líneas de la función que aumentan y controlan el valor del contador, y la que especifica la
dirección de la imagen.

PRÁCTICA 7

Crea una página que presente un banner cíclico con tres imágenes y que cambie el color del fondo
cada tres segundos. Utiliza los colores blanco, rosa, rojo, azul, amarillo y verde.

11.1.- AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS

Podemos construir un banner cíclico de forma que cuando el usuario pulse sobre él se enlace con otro
documento, documento que será distinto según la imagen del banner sobre la que haya pulsado.
Para ello definiremos un nuevo vector cuyos elementos serán los destinos a los que serán enviados los
usuarios cuando hagan clic en el banner.
El truco reside en convertir la etiqueta <IMG> en un vínculo cuya dirección será la que reciba al llamar a la
función de Javascript que determina la dirección correspondiente.
Veámoslo con un ejemplo.

EJEMPLO – VÍNCULOS EN BANNERS CÍCLICOS – (script16)

 Definimos las dos variables de tipo Array que contienen las direcciones de las imágenes y sus destinos
asociados.
 El contador en este caso nos servirá para los dos vectores, ya que tienen el mismo número de
elementos.
 En la función que permite rotar los banners utilizamos la propiedad “complete” de las imágenes para
comprobar si se ha cargado completamente (por si el usuario no tiene buena conexión y la imagen
tarda más de tres segundo en cargarse).
 La función dirección asigna a la ventana como dirección el elemento del vector cuyo índice coincide
con “contador”.
 En el vínculo no sabemos cuál es la dirección que se debe cargar, por lo que desde el modificador
HREF. realizamos la llamada a la función correspondiente. Esta es otra forma posible de invocar a
Javascript: asignar a una variable de HTML (en este caso un modificador) el resultado de una o varias
sentencias de Javascript:

HREF=“javascript:sentencia1;sentencia2;...”

12.- MARCOS

Cada marco de un “frameset” es un objeto “frame” en Javascript. Además, cada marco es una propiedad del
objeto “window”. En realidad, internamente Javascript maneja cada “frame” como si fuese una ventana por sí
misma, con lo cual tiene prácticamente las mismas propiedades y métodos que el objeto “window”.

PROPIEDAD DESCRIPCIÓN
document documento visualizado actualmente en el marco
length número de marcos dentro de este marco
name atributo NAME de la etiqueta<FRAME>
location URL del documento del marco
parent frameset que contiene a este marco
top frameset que contiene a este marco
self sinónimo para el marco actual
window sinónimo para el marco actual
frames vector que contiene los marcos hijos de este marco

16
 MÉTODO DESCRIPCIÓN
blur aleja el foco del marco especificado
focus traslada el foco al marco especificado
ejecuta una instrucción después de un número de
setTimeout
milisegundos
cancela el tiempo de espera de un script que se inició
clearTimeout
con setTimeout

Podemos referirnos a un marco concreto por su nombre o por el índice de la matriz “frames” que contiene a
dicho marco, como propiedades del top (parent) que lo contiene
Veamos algunos ejemplos sencillos.

EJEMPLO – CAMBIAR COLORES DE OTROS MARCOS – (script17)

El frameset contiene cuatro marcos hijos. En el primer marco incluimos una serie de botones para cambiar el
color de fondo de los marcos.
El marco actual se puede referenciar mediante “self” o simplemente teniendo en cuenta que se trata de la
ventana actual.
Haremos referencia al resto de marcos mediante “parent” o “top”, y el nombre del marco o su índice en la
matriz “frames” del frameset.

EJEMPLO – ACTUALIZAR OTROS MARCOS – (script18)

En este caso, al pulsar en uno de los tres primeros botones se ejecuta la función correspondiente. Estas
funciones hacen todas lo mismo, abren el marco para escribir en él y luego lo cierran. Si no cerrásemos los
marcos, podríamos escribir el texto tantas veces como pulsáramos el botón.
La tercera función vuelve a cargar la dirección correspondiente al frameset que contiene al marco A.

EJEMPLO – COMPARTIR FUNCIONES ENTRE MARCOS – (script19)

En el marco A definimos dos funciones, una para cambiar los colores de los marcos utilizando dos argumentos
y otra para recargar el frameset.
Desde el marco D se ejecutan las funciones incluidas en el marco A. Simplemente hay que indicarle al
manejador de eventos dónde se encuentra la función que debe ejecutar.

13.- TRABAJAR CON VENTANAS DE NAVEGADOR

Podemos utilizar Javascript para abrir y cerrar ventanas, desplazar la información en ellas, actualizarlas y
posicionarlas, así como crearlas para utilizarlas como paneles de control.
También podremos escribir información en las ventanas, de forma que crearemos páginas web sobre la
marcha, incluso provocar eventos cuando una página se carga.

13.1.- ABRIR UNA VENTANA NUEVA

Para mostrar a los usuarios información adicional, sin perder la que están leyendo actualmente, necesitaremos
por ejemplo crear ventanas nuevas. Es el caso de las páginas que nos muestran una sección de noticias a través
de otra ventana.
Con HTML es posible abrir una ventana nueva de navegador desde un vínculo mediante el modificador
TARGET. Sin embargo, Javascript nos ofrece un mayor control sobre el contenido de la ventana nueva y sus
características.
Para abrir una nueva ventana utilizamos el método “open()” del objeto “window” de la siguiente forma

window.open(“archivo”, “nombre_ventana”, “propiedad1,propiedad2,...”)

donde:
 “archivo” es la ruta del documento que se cargará en la nueva ventana.
 “nombre_ventana” es un nombre que asignamos a la nueva ventana por si es necesario hacer
referencia a la misma más adelante en un vínculo o en otro guión.
 “propiedad1, propiedad2,...” hacen referencia a las dimensiones de la ventana, así como a los
distintos elementos que la componen. Irán separadas por comas, sin ningún espacio en blanco.
Pueden ser:
- width=valor: anchura de la ventana en píxeles.

17
 - height=valor: altura de la ventana en píxeles.
- toolbar=yes/no: barra de herramientas.
- menubar=yes/no: barra de menús.
- scrollbars=yes/no: barras de desplazamiento.
- status=yes/no: barra de estado.
- location=yes/no: barra de direcciones.
- resizable=yes/no: esquina de redimensión, para cambiar el tamaño de la ventana.
En el caso de las variables booleanas el valor por defecto es “no”.

EJEMPLO – ABRIR UNA VENTANA NUEVA – (script20)

Al hacer clic sobre el vínculo se ejecuta la función de Javascript que abre una nueva ventana. El valor de HREF
será el resultado de la función.

13.2.- CARGAR DIFERENTES CONTENIDOS EN UNA VENTANA

En lugar de utilizar un solo vínculo, queremos que varios vínculos tengan como objetivo la misma ventana
nueva.
Haciendo clic en cualquiera de los vínculos se abre una ventana nueva, con la imagen correspondiente. Si
volvemos nuevamente a la ventana principal y hacemos clic en otro vínculo, la imagen de la nueva ventana será
sustituida.
En este caso declaramos un parámetro en la función para que la dirección del archivo a cargar se la pasemos
desde los vínculos. De esta forma el valor del parámetro será distinto para cada vínculo.
Además, utilizaremos el método “focus()” del objeto ventana abierta para indicar que la ventana que se acaba
de abrir se coloque en primer plano. El método contrario a “focus()” es “blur()”; este método empuja la ventana
detrás de otras que estén abiertas.

EJEMPLO – DIFERENTES CONTENIDOS – (script21)

PRÁCTICA 8

Crea una página que muestre dos botones, uno para Granada y otro para Sevilla, de forma que al
pulsarlos se abra una nueva ventana de navegador que muestre la foto de la Alhambra y de la Plaza
de España respectivamente. La nueva ventana debe permitir que el usuario cambie su tamaño.
(Utiliza las imágenes "sevilla.gif" y "alhambra.jpg")

13.3.- DESPLAZAMIENTOS EN UNA NUEVA VENTANA

Podemos abrir una nueva ventana desde un vínculo (de texto, de imagen, etc.) de forma que se visualice
aquel punto del documento que nos interese.
Para ello utilizamos el método “scroll” del objeto “window”. En este método debemos especificar el número de
píxeles horizontales y verticales que queremos que se desplace la barra de desplazamiento de la ventana:

window.scroll(píxeles_horizontales,píxeles_verticales)

Debemos tener en cuenta que la ventana debe estar abierta antes de provocar el desplazamiento, por lo que
será necesario utilizar el método “setTimeout” para establecer una pausa.

EJEMPLO – DESPLAZAR NUEVA VENTANA – (script22)

Desde los enlaces llamamos a la función, especificando los píxeles de desplazamiento.
El método “scroll” se ejecuta desde “setTimeout” para hacer antes una pausa. Si el documento tarda en
cargarse más de lo indicado en “scroll” se producirá un error.

13.4.- ACTUALIZAR UNA VENTANA DESDE OTRA

Podemos enviar información de una ventana a otra por ejemplo para reproducir, a modo de sumario, la
información que introduce el usuario. Para ello necesitamos dos ventanas:
 Ventana padre: es la ventana principal; recibirá y visualizará la información introducida en la ventana
hija.
 Ventana hija: es la que se abre desde la ventana padre, y en la cual se introduce la información.
Para hacer referencia a la ventana padre desde la ventana hija utilizaremos el objeto “opener”.

18
 EJEMPLO – ACTUALIZAR VENTANA – (script23)
En el guión de la ventana padre, abrimos una nueva ventana con una serie de propiedades, e insertamos un
formulario con la caja de texto que mostrará lo que escribamos en el formulario de la ventana hija.
En la ventana hija, el formulario contiene también una caja de texto, además de un botón que en principio no
hace nada. Al abandonar la caja se ejecuta la función, que asigna al valor de la caja de texto del formulario que
se encuentra en el documento desde el cual se abrió esta ventana, el valor de la caja de texto del documento
actual. Una vez hecho esto se cierra la ventana actual (ventana hija).
La palabra clave “this” permite al guión pasar un valor a una función basándose únicamente en el contexto
donde se utiliza.

13.5.- CREAR PÁGINAS NUEVAS

En el apartado anterior hemos utilizado un archivo HTML para cada ventana. Es posible abrir una nueva
ventana y crear su contenido desde otra, utilizando únicamente un documento HTML.
Para ello incrustamos todo el código correspondiente a un documento HTML dentro de un guión de Javascript.

EJEMPLO – PÁGINAS NUEVAS – (script24)

Abrimos una nueva ventana que en principio no tendrá ningún contenido. Posteriormente escribimos en el
documento de la nueva ventana los encabezados HTML y el cuerpo de la nueva página.
El método “close” indica al navegador que hemos terminado de escribir en el documento de “ventana”.

13.6.- CREAR UN PANEL DE CONTROL

Podemos crear una página de forma que al cargarse abra una ventana hija que actuará como panel de
control, es decir, que contendrá controles que afectarán a la ventana padre.
Por ejemplo, utilizamos un panel de control con una serie de vínculos que condicionarán la información que se
mostrará en la ventana padre.

EJEMPLO – PANEL DE CONTROL – (script25)

En el guión de la ventana padre, abrimos una nueva ventana con una serie de propiedades.
En el guión de la ventana hija los enlaces toman como dirección aquella que resulte de ejecutar la función
actualiza, que simplemente cambia la dirección de la ventana que abrió la actual en función del valor del
argumento.

PRÁCTICA 9

Crea una página que muestre centrado el texto "PRÁCTICAS 01-08" y que abra un panel de control.
El panel de control contendrá un enlace a cada una de las ocho prácticas realizadas hasta el
momento, de forma que al pasar sobre los enlaces se muestre un mensaje descriptivo de la práctica
en la barra de estado del panel. Al pulsar sobre un enlace, la práctica correspondiente se ejecutará
en la página que se abre inicialmente.

14.- VALIDACIÓN DE FORMULARIOS

Generalmente, cuando necesitemos reunir información sobre los usuarios tendremos que recurrir a un
formulario.
Una vez que el usuario rellena el formulario, pulsa en botón de envío para mandar la información al servidor
web, donde un programa interpretará los datos y actuará sobre ellos.
A menudo los datos se almacenan en una base de datos para su uso posterior, por lo que será útil asegurarse
de que los datos introducidos por el usuario están ajustados y en el formato adecuado.
Mediante Javascript podemos verificar los datos en la computadora del cliente. A esto es a lo que se llama
“validación del formulario”. Aunque un programa de servidor puede hacer la validación, es mucho más rápido
utilizar Javascript.

14.1.- OBJETOS, PROPIEDADES Y MÉTODOS DE FORMULARIOS

Un formulario es un objeto que a su vez contiene otros objetos como botones, casillas de texto, etc. Veamos
la propiedades, métodos y eventos más importantes que se utilizan para describir estos objetos y los procesos
relacionados con ellos.

19
 OBJETO form

elements: vector que contiene todos los elementos del formulario

PROPIEDADES
length: número de elementos que contiene el formulario
submit: envía el formulario
MÉTODOS
reset: restablece los valores del formulario
EVENTOS onSubmit: ejecuta la función asociada al enviar el formulario

OBJETOS Button, Submit y Reset

value: texto que acompaña al botón

PROPIEDADES
name: nombre del objeto
click: simula una pulsación del ratón sobre el botón
MÉTODOS blur: aleja el foco del botón
focus: sitúa el foco en el botón
EVENTOS onClick: ejecuta la función asociada al pulsar el botón

OBJETOS Text, TextArea y Password

value: texto escrito en la caja

PROPIEDADES name: nombre de la caja
defaultValue: texto de la caja por defecto
focus: fuerza a que la caja esté activa
MÉTODOS blur: fuerza a desactivar la caja
select: activa la caja y selecciona el texto
onFocus: ejecuta la función asociada al activar la caja
onBlur: ejecuta la función asociada al desactivar la caja
EVENTOS
onSelect: ejecuta la función asociada al seleccionar el texto
onChange: ejecuta la función asociada al cambiar el texto

OBJETO CheckBox

checked: indica si la casilla está seleccionada (true) o no (false)

value: valor de la casilla
PROPIEDADES
name: nombre de la casilla
defaultChecked: valor de la casilla seleccionada por defecto
click: simula una pulsación del ratón sobre la casilla
MÉTODOS blur: aleja el foco de la casilla
focus: sitúa el foco en la casilla
EVENTOS onClick: ejecuta la función asociada al pulsar la casilla

OBJETO Radio

checked: indica si la casilla está seleccionada (true) o no (false)

length: número de casillas del conjunto
PROPIEDADES value: valor de la casilla
name: nombre de la casilla
defaultChecked: valor de la casilla seleccionada por defecto
click: simula una pulsación del ratón sobre la casilla
MÉTODOS blur: aleja el foco de la casilla
focus: sitúa el foco en la casilla
EVENTOS onClick: ejecuta la función asociada al pulsar la casilla

OBJETO Select

PROPIEDADES length: número de elementos de la lista

name: nombre de la lista
selectedIndex: índice de la opción seleccionada actualmente

20
 options: vector que contiene todos los elementos de la lista
Este vector tiene, entre otras, las siguientes propiedades:
index.- índice de la opción en la lista
length.- número de opciones seleccionadas
selected.- indica si la opción está seleccionada
selectedIndex.- índice opción seleccionada actualmente
text.- texto de la opción en la lista
value.- valor de la opción
defaultSelected.- indica si la opción está seleccionada por defecto
blur: fuerza a desactivar la lista
MÉTODOS
focus: fuerza a activar la lista
onFocus: ejecuta la función asociada al activar la lista
EVENTOS onBlur: ejecuta la función asociada al desactivar la lista
onChange: ejecuta la función asociada al cambiar el valor

Los objetos “Radio” y “Select” requieren un tratamiento especial:

 El objeto “Radio” es un vector cuyos elementos son cada uno de los botones que forman parte del
conjunto, por lo que haremos referencia a cada uno de ellos a través de su índice.
 El objeto “Select” tiene la propiedad “options”. Esta propiedad es un vector que contiene los
elementos de la lista. Para hacer referencia a cada uno de ellos utilizaremos su índice dentro de este
vector.

14.2.- VERIFICAR CONTRASEÑAS

En ocasiones se le pide a los usuarios que tecleen una nueva contraseña dos veces para asegurarnos de que
no se equivoca al teclearla.
Podemos comunicarle al usuario, por ejemplo mediante ventanas de alerta, si olvidó escribir la contraseña o si
las contraseñas no coinciden.
En el caso de que no se cumplan las condiciones exigidas, el manejador de eventos “onSubmit” actuará en
consecuencia deteniendo el envío del formulario.

EJEMPLO – CONTRASEÑAS – (script26)

En el momento que el usuario intenta enviar el formulario comprobamos si se cumplen todos los requisitos.
Para ello ejecutamos una función que devolverá como valor “true” o “false”, de forma que se envíe o no el
formulario según convenga.
La función realiza varias comprobaciones:
 Si el valor introducido en la primera casilla de contraseña es “vacío”, alerta al usuario, activa la casilla
y devuelve “false” para detener el envío de los datos.
 Si el valor de las casillas de contraseña no coincide, alerta al usuario, activa la primera casilla y
selecciona su contenido y devuelve “false” para detener el envío de los datos.
 En última instancia, si las comprobaciones anteriores no detienen el envío, devuelve “true” para
continuar con el evento “submit”.

14.3.- LISTA DESPLEGABLE DE DIRECCIONES

Podemos diseñar una lista desplegable de formulario de forma que, al elegir un elemento de la misma,
enlacemos con una página determinada.
En el caso de que el navegador del usuario no tenga soporte para Javascript, podemos utilizar la etiqueta
<NOSCRIPT> para que este usuario visualice botones o enlaces en lugar de la lista.
No olvidemos que para hacer referencia a una opción determinada de la lista debemos emplear su índice
dentro del vector “options”.

EJEMPLO – LISTA – (script27)

En este caso, el valor de cada elemento de la lista será una dirección de enlace, excepto la opción que nos
sirve para proporcionar indicaciones al usuario, cuyo valor será “vacío”.
Además, podemos forzar a que cada vez que se cargue el documento el elemento seleccionado sea el de
índice “0”. Esto lo haremos manejando el evento “load” en la etiqueta <BODY>.
Cuando cambiamos el elemento seleccionado de la lista se ejecuta la función que:
 En primer lugar comprueba si la opción elegida es la primera. En ese caso no cambia la dirección de la
ventana.
 Si el elemento seleccionado es cualquier otro, la nueva localización de la ventana será la elegida por el
usuario.

21
 Por último, el botón para usuarios con navegador sin soporte para Javascript no lo visualizarán el resto de
usuarios. Por lo tanto, el envío del formulario a un programa de servidor sólo se producirá en el caso de que
Javascript no se ejecute.

PRÁCTICA 10

Crea una página que, a través de un formulario, pida al usuario su nombre y dos veces la misma
contraseña. Si el usuario no escribe su nombre o no introduce la primera contraseña, se mostrará un
mensaje de alerta explicativo. Si las contraseñas no coinciden, también se mostrará un mensaje de
alerta, se seleccionará el texto de la primera y se borrará lo que el usuario escribió en la segunda.

PRÁCTICA 11

Crea una página que contenga un menú desplegable. Los elementos del menú serán todas las
prácticas realizadas hasta el momento, de forma que al seleccionar una enlace con el
correspondiente ejercicio. Si el usuario selecciona la práctica 10, antes de cargarse la página elegida
aparecerá el mensaje de alerta "¡Ánimo, ya vas por la 10!".

14.4.- BOTONES DE OPCIÓN

En un formulario, cada objeto de tipo “radio” sólo nos permite marcar una de las opciones. Si ninguna de ellas
está seleccionada por defecto, podemos forzar al usuario a elegir una de ellas antes de enviar el formulario.

EJEMPLO – BOTONES DE OPCIÓN – (script28)

En el momento que el usuario pretende remitir los datos del formulario se ejecuta la función que realiza las
comprobaciones oportunas.
La función verifica si alguna de las opciones está seleccionada a través de un bucle que recorre todos los
elementos del vector “radio”. Si no ocurre así, comunica al usuario esta incidencia y retorna un valor falso para
detener el evento “submit”.
En este ejemplo solamente tenemos dos opciones, de forma que podríamos utilizar la siguiente función:

function validar(radio){
if(!radio.sexo[0].checked && !radio.sexo[1].checked){
alert(“Especifique el sexo”)
return false}
return true}

Sin embargo, cuando el número de opciones es mayor, el código se complica y resulta más cómodo trabajar
con un bucle.

15.- CONSTRUCCIÓN DE PÁGINAS DINÁMICAS

Una forma de acelerar la carga de las páginas y ofrecer al usuario páginas interactivas es trasladar el proceso
del lado del servidor al cliente. Es decir, consiste en actualizar los elementos de la página en el navegador del
usuario en lugar de en el servidor web.
Por ejemplo, podemos visualizar la hora y fecha locales, personalizar un saludo según el momento del día, etc.
Para ello trabajaremos con fechas y horas utilizando una serie de métodos del objeto “ Date”. Este objeto
contiene la fecha actual del sistema y algunos de sus métodos asociados son los siguientes:

MÉTODO DESCRIPCIÓN VALORES DEVUELTOS

getDate( ) Día del mes 1 - 31
getDay( ) Valor entero del día de la semana 0-6
getFullYear( ) El año con cuatro dígitos 1900 en adelante
getHours( ) Valor entero de la hora del día 0 - 23
getMinutes( ) Número de minutos desde la última hora 0 - 59
getMonth( ) Mes del año 0 - 11
Número de segundos desde el último
getSeconds( ) 0 - 59
minuto

22
 Fecha en milisegundos
setDate( ) Establece el día
desde 1 de enero de 1970
setFullYear( ) Establece el año Fecha en milisegundos
setHours( ) Establece la hora Fecha en milisegundos
setMinutes( ) Establece los minutos Fecha en milisegundos
setMonth( ) Establece el mes Fecha en milisegundos
setSeconds( ) Establece los segundos Fecha en milisegundos
toGMTString( )
Greenwich Mean Time
Fecha GMT y hora en formato cadena día, dd mmm yyyy hh:mm:ss
(hora de Greenwich)

Para crear un objeto Date podemos utilizar diferentes formatos:

variable = new Date( ) asigna la fecha actual

variable = new Date(1999,7,15)
variable = new Date(“aug,15,1999 12:20:06”)
variable = new Date(“15,aug,1997 12:20:06”)
variable = new Date(1999,7,15,12,20,06)

Todos estos ejemplos almacenan la misma hora (excepto el primero) y fecha.

15.1.- IMPRIMIR LA FECHA ACTUAL

Las funciones de fecha y hora solamente devuelven números. Si queremos mostrar en el documento la fecha
actual utilizando el nombre de los días de la semana y los meses del año tendremos que definir nuevos vectores
que contengan esos elementos.

EJEMPLO – FECHA ACTUAL – (script29)

En la cabecera del documento definimos los vectores que contienen los nombres de los días de la semana y de
los meses del año, y una nueva variable que contiene la fecha actual.
En el cuerpo del documento insertamos el script que imprime los elementos que nos interesan. Debemos tener
en cuenta que los días de la semana se numeran del 0 al 6 comenzando en Domingo, y los meses del año del 0
al 11 comenzando por Enero.

15.2.- PERSONALIZAR EL MENSAJE SEGÚN EL MOMENTO

Según la hora del día, el día de la semana, el mes del año, etc., en que nos encontremos podemos saludar al
usuario con un mensaje adecuado al momento.
Por ejemplo podemos dar la bienvenida al usuario con un saludo distinto según la hora del día

EJEMPLO – MENSAJE A UNA HORA – (script30)

Comprobamos mediante sentencias condicionales el intervalo de hora en que nos encontramos, teniendo en
cuenta que el método “getHours()” del objeto “Date” devuelve un número entero de 0 a 23, siendo 0 las doce
de la noche, 1 la una de la madrugada, etc.

PRÁCTICA 12

Crea una página que muestre un mensaje al usuario indicándole si es fin de de semana (sábado o
domingo) o día laborable (de lunes a viernes).

PRÁCTICA 13

Utilizando los métodos de Date, crea una página que muestre un reloj con el formato hh:mm:ss.

16.- JAVASCRIPT Y LAS COOKIES

23
 Una cookie no es más que un fichero de texto guardado en el disco duro del usuario, donde el programador de
Javascript puede almacenar información.
Es una pieza única de información que un servidor web envía al navegador que lo visita y que ambos
comparten cada vez que se encuentran. El servidor remoto guarda su parte de la cookie y la información que
contiene sobre la computadora visitante, y ésta hace lo mismo a través del navegador guardando un archivo de
texto.
Este archivo siempre incluye la dirección del servidor que lo envió. De esta forma, cuando el usuario regrese
al servidor que le pasó una cookie particular, el servidor podrá retirar la información almacenada en la cookie
que ambas partes intercambiaron.
Las cookies se guardan en:
 UNIDAD:\Documents and Settings\"usuario”\Cookies si utilizamos IExplorer en Windows 2000.
 UNIDAD:\Archivos de Programa\Netscape\Users\"usuario”\cookies.txt si trabajamos con Netscape en
Windows 2000.
Una cookie no sirve para obtener información sobre el usuario, ni para revisar el disco duro, ni para transmitir
virus a las computadoras. Nos puede servir por ejemplo para conocer el número de veces que se ha accedido a
nuestra página desde una computadora, para almacenar el nombre y contraseña del visitante, etc.
Por otra parte, debemos tener en cuenta que:
 Un cliente no puede memorizar más de 300 cookies.
 El tamaño máximo de cada cookie es de 4 KB.
 El cliente no podrá guardar más de 20 cookies por servidor.

16.1.- ESTABLECER COOKIES

Una cookie es un elemento de una lista que se guarda en el ordenador del visitante. Cada cookie de la lista
será una cadena de texto con el siguiente formato:

nombre=valor;expires=fecha_GMT_caducidad;path=ruta;domain=dominio

 nombre=valor: se trata de un campo obligatorio, que asigna a la cookie un nombre y un valor.

 expires=fecha_GMT_caducidad: especifica la fecha en que la cookie será borrada del disco al finalizar
la sesión. Por lo tanto, si para establecer la fecha de caducidad utilizamos el método “setX()” del
objeto “Date”, posteriormente tendremos que transformar esa fecha a GMT mediante el método
“toGMTString()” para que se pueda escribir en la cookie como una cadena de texto.
 path=ruta: especifica a partir de qué directorios, del servidor que originó el requerimiento de grabar la
cookie, se puede acceder a la cookie.
 domain=dominio: indica bajo qué dominio se puede acceder a la cookie. Por ejemplo, si
“dominio=fila.net”, la cookie también será válida para “www.fila.net” y “mail.fila.net”.
Para trabajar con cookies utilizaremos la propiedad “cookie” del objeto “document”, cadena que contiene los
valores de las cookies para el documento actual. Entre una cookie y otra habrá un espacio además del punto y
coma.
Además, como la propiedad “cookie” de “document” es una cadena, emplearemos el método
“split(separador)” de los objetos “String” para dividir la cadena en un vector de cadenas. El separador indica
dónde termina un elemento del array y comienza otro.

EJEMPLO – ESTABLECER COOKIES – (script31)

En este ejemplo el servidor establece una cookie a partir de un valor introducido por el usuario en una caja de
texto de formulario.
 La variable “caduca” guardará la fecha de caducidad que queramos para la cookie.
 La variable “usuario” guardará el texto que debe mostrarse en la caja de texto del formulario. Cuando
no es la primera vez que el usuario accede al documento, ya se habrá guardado antes esta cookie,
podemos obtener su valor mediante “split”.
 Al cargar el cuerpo del documento, se escribe en la caja el valor de “usuario”.
 Al abandonar la caja, se establece la cookie ejecutando la función “estableceCookie”.

16.2.- MOSTRAR COOKIES

Un servidor sólo tendrá acceso a sus propias cookies. Es decir, no podrá leer las cookies que hayan sido
establecidas por otro servidor. Si nuestro servidor sólo establece una cookie utilizaremos el siguiente guión para
mostrar su valor:

<SCRIPT LANGUAGE=JAVASCRIPT>
if(document.cookie != “”)
document.write(“El valor de la cookie es ” + document.cookie.split(“=”)[1])

24
 </SCRIPT>

En el caso de que nuestro servidor establezca varias cookies y queramos mostrarlas todas, tendremos que
recurrir a un bucle “for”.

EJEMPLO – MOSTRAR COOKIES – (script32)

En primer lugar comprobamos si existen cookies. Si existen, convertimos en un vector la cadena que contiene
todas las cookies.
En el bucle, para cada cookie mostramos su nombre y su valor utilizando nuevamente el método “split”.

16.3.- BORRAR COOKIES

Para borrar una cookie establecemos su caducidad en una fecha del pasado y el navegador la borrará
automáticamente al cerrar la sesión.
Antes de borrarlas podemos preguntar al usuario si desea borrar las cookies o no.

EJEMPLO – BORRAR COOKIES – (script33)

 En primer lugar preguntamos al usuario si desea borrar las cookies y seguidamente comprobamos si
hay cookies guardadas.
 La variable “caduca” guardará la fecha actual menos un día y la variable “misCookies” será el vector
que contiene todas las cookies.
 El bucle vuelve a escribir las cookies en el disco con la nueva fecha de caducidad y con el mismo
nombre, de forma que se sobrescriben. No será necesario asignar un valor a las cookies, las vamos a
borrar.
 Podemos mostrar a usuario la cantidad de cookies que se han borrado o, por lo contrario, un mensaje
indicativo de que no existen cookies.

16.4.- CONTADOR DE VISITAS INDIVIDUAL

Podemos usar las cookies para almacenar el número de veces que ha accedido a una página un usuario
determinado. No debemos confundir esto con los contadores de visitas totales a una página.
Simplemente debemos buscar la cookie que cuenta el número de visitas, mostrarla después de incrementar
en uno su valor y volver a establecer la cookie con su nuevo valor.

EJEMPLO – CONTADOR DE VISITAS – (script34)

 Definimos la función, a la cual pasaremos como argumento el nombre de la cookie, para buscar entre
todas las cookies aquella que se encarga de contar las visitas. Si no la encuentra querrá decir que la
página no ha sido visitada antes y devuelve cero. Si la página ha sido visitada antes, la función
devolverá el valor de la cookie encontrada.
 La variable “caduca” guarda la fecha de caducidad y la varialble “visitas” el valor de la cookie. Este
valor lo incrementamos en uno para incluir la visita actual.
 Volvemos a establecer la cookie con el mismo nombre pero con su nuevo valor.
 En el cuerpo del documento incluimos el script que muestra al usuario el valor de la variable “visitas”.

PRÁCTICA 14

Crea la página índice de un sitio web. Esta página mostrará el texto "Entrar..." que será un vínculo
a la primera página del sitio web. Además, si el usuario ha visitado antes el sitio web, le
mostraremos cuántas veces lo ha hecho y la fecha correspondiente a la última visita. Si es la primera
visita que realiza, el mensaje que le mostraremos será "Ha encontrado el sitio web adecuado".

PRÁCTICA 15

Crea una página que muestre un formulario de solicitud de coche como el siguiente

25
El formulario no se enviará, y mostrará el correspondiente mensaje de alerta, si:
 El usuario no especifica la dirección de correo electrónico.
 El usuario no elige un color.
 El usuario no elige el número de puertas.
 El usuario elige Descapotable y cuatro puertas (el coche descapotable sólo está disponible en
dos puertas).
Además, si el usuario elige el coche Descapotable, automáticamente se seleccionará la opción de
dos puertas.

PRÁCTICA 16

Crea una página que muestre un texto intermitente en la barra de estado.

PRÁCTICA 17

Crea una página que muestre una caja de texto, indicando al usuario que escriba su nombre y
pulse intro. Cuando haga lo que se le indica, comprobaremos si el usuario está registrado o no en
una lista predeterminada de usuarios. Tanto si está registrado como si no, se abrirá una nueva
ventana con el mensaje correspondiente (el contenido de la ventana no será un archivo).

PRÁCTICA 18

Crea una página que muestre un cuestionario como el que aparece en la siguiente imagen

26
 Cuando el usuario pulse el botón para averiguar los aciertos que ha conseguido, aparecerá una
ventana de alerta con el mensaje "Acertaste x de 5 preguntas".

27