Curso de Javascript 1.

2
Autor: Daniel Rodriguez Herrera
Indice de contenidos

Introduccin

Qu es Javascript?

Primeros pasos

Elementos bsicos

Comentarios

Literales

Sentencias y bloques

Tipos de datos

Variables

Referencias

Vectores y matrices

Operadores

Operadores aritmticos

Operadores de comparacin

Operadores lgicos

Operadores de asignacin

Operadores especiales

Estructuras de control

Bifurcaciones condicionales

Bucles

Estructuras de manejo de objetos

Funciones

Objetos

Funciones predefinidas

Propiedades y mtodos

Creacin mediante constructores

Herencia

Objetos predefinidos

Objeto Array

Objeto Date

Objeto Math

Objeto Number

Objeto String

Objeto RegExp

Objeto Boolean

Objeto Function

Eventos

Lista de eventos

Definicin mediante cdigo

Modelo de objetos del documento

Objeto Window

La barra de estado

Marcos (o frames)

Objeto Document

Cookies

Funciones bsicas

Un ejemplo: el contador individualizado

Objeto Image

Cmo escribir en el documento

Tratamiento de imgenes

Objeto Form

Objetos Text

Objetos Checkbox y Radio

Objetos Select y Option

Otros objetos

Objeto History

Objeto Location

Objeto Navigator

Objeto Screen

Nuevas caractersticas

Ficheros .js

FAQ (Preguntas habituales)

Para contactar conmigo

Introduccin
Para poder seguir este curso necesitas un navegador capaz de ejecutar Javascript. Esto es:
Netscape 2 o superior y Explorer 3 o superior. Sin embargo, segn se avanza en el curso es
posible que algunas cosas no funcionen en navegadores antiguos, an cuando soporten
Javascript.
Para poder teclear los ejemplos no hace falta ms que un editor como el bloc de notas de
Windows o similares. As que, si cumples todos los requisitos, valor y al toro!

Qu es Javascript?
JavaScript, al igual que Java o VRML, es una de las mltiples maneras que han surgido para
extender las capacidades del lenguaje HTML. Al ser la ms sencilla, es por el momento la ms
extendida. Antes que nada conviene aclarar un par de cosas:
1.

JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script

u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos
procesadores de texto. Nunca podrs hacer un programa con JavaScript, tan slo podrs
mejorar tu pgina Web con algunas cosas sencillas (revisin de formularios, efectos en
la barra de estado, etc...) y, ahora, no tan sencillas (animaciones usando HTML
dinmico, por ejemplo).

2. JavaScript y Java son dos cosas distintas. Principalmente porque Java s que es un
lenguaje de programacin completo. Lo nico que comparten es la misma sintaxis.
Este documento tiene como objetivo mostrar una parte de las potencialidades del JavaScript. No
pretendo hacer aqu una gua completa, sino slo una pequea introduccin. Para tener una gua
de referencia es mejor acudir a la que ofrece Netscape que, al fin y al cabo, son los creadores
del invento. Si, como suele ocurrir, pagas a Timofnica por leer este curso, es mejor que te lo
lleves a casa en

formato ZIP si no quieres caer en la ms absoluta de las ruinas.

Existen tres versiones de JavaScript. Casi todo lo que hay en este curso funciona con la versin
1.0, que naci con el Netscape Navigator 2.0. No nos detendremos en la compatibilidad
demasiado, ya que en el mundo hispano no existen demasiadas copias de Netscape con
versiones inferiores a la 4.
Tambin existe una versin 1.3, introducida en la versin 4.06 (si no recuerdo mal). Esta versin
es una pequea revisin de la 1.2 creada para ajustarse al estndar internacional ECMA que
regula el lenguaje Javascript, y por su poca importancia no ser cubierto aqu.
El Microsoft Explorer soporta el JavaScript, slo que cambiandole el nombre. La versin 3.0
interpreta el JScript, que es similar al JavaScript 1.0 pero con algunas diferencias para provocar

ciertas incompatibilidades (majetes que son los de Microsoft). El Explorer 4 parece que s que
admite JavaScript 1.1 con cierta fiabilidad, y muchas cosas del 1.2. La siguiente tabla ofrece un
pequeo resumen del jaleo de las versiones.
Versin

Navegador

Versin

Navegador

Javascript 1.0 Netscape 2.0

JScript 1.0 Explorer 3.0

Javascript 1.1 Netscape 3.0

JScript 3.0 Explorer 4.0

Javascript 1.2 Netscape 4.0-4.05

JScript 5.0 Explorer 5.0

Javascript 1.3 Netscape 4.06-4.71

A partir de ahora asumo que quien est leyendo esto conoce el HTML. Si no tienes ni idea del
mismo, visita primero el curso de HTML. Tambin servir de ayuda que ests familiarizado con la
sintaxis de C, C++ o Java, aunque en los prximos captulos explicaremos la misma.

Primeros pasos
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos
muestre el ya famoso mensaje "hola, mundo". As podremos ver los elementos principales del
lenguaje. El siguiente cdigo es una pgina Web completa con un botn que, al pulsarlo,
muestra el mensaje.
HolaMundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaMundo() {
alert("Hola, mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
Y aqu est nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que tiene la
pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos ser donde se puedan poner funciones en JavaScript. Puedes poner
cuantos quieras a lo largo del documento y en el lugar que ms te guste. Yo he elegido la
cabecera para hacer ms legible la parte HTML de la pgina. Si un navegador no acepta
JavaScript no leer lo que hay entre medias de estos elementos. As que si programamos algo
que slo funcione con la versin 1.1 pondramos LANGUAGE= "JavaScript1.1" para que los
navegadores antiguos pasen olmpicamente del cdigo y no se hagan un lo.
function HolaMundo() {
alert("Hola, mundo!");
}
Esta es nuestra primera funcin en JavaScript. Aunque JavaScript est orientado a objetos no es
de ningn modo tan estricto como Java, donde nada est fuera de un objeto. Para las cosas que
se van a hacer en este tutorial, no vamos a crear ninguno, pero usaremos los que vienen en la
descripcin del lenguaje. En el cdigo de la funcin vemos una llamada al mtodo alert (que
pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. Por un
fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una
funcin: no los reconoce. As que pondremos directamente "" arriesgndonos a que salga de
otra manera en ordenadores con un juego de caracteres distinto al del nuestro.

<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva: onClick. Es un
controlador de evento. Cuando el usuario pulsa el botn, el evento click se dispara y ejecuta el
cdigo que tenga entre comillas el controlador de evento onClick, en este caso la llamada a la
funcin HolaMundo(), que tendremos que haber definido con anterioridad. Existen muchos ms
eventos que iremos descubriendo segn avancemos en el tutorial. En el cuarto cpitulo hay un
resumen de todos ellos.
En realidad, podramos haber escrito lo siguiente:
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="alert('&iexcl;Hola,Mundo!')">
</FORM>
y nos habramos ahorrado el tener que escribir la funcin y todo lo que le acompaa, adems de
conseguir que nos reconozca el caracter especial . Sin embargo me pareci conveniente hacerlo
de esa otra manera para mostrar ms elementos del lenguaje en el ejemplo.

Elementos bsicos
Lo primero que vamos a ver son los ladrillos bsicos del lenguaje. Las cosas que no sirven para
nada solas pero que es imprescindible aprender antes que nada. El rollo terico, vamos.

Comentarios
Lo primero (por ser lo ms fcil) es indicar cmo se ponen los comentarios. Un comentario es
una parte de nuestro programa que el ordenador ignora y que, por tanto, no realiza ninguna
tarea. Se utilizan generalmente para poner en lenguaje humano lo que estamos haciendo en el
lenguaje de programacin y as hacer que el cdigo sea ms comprensible.
En JavaScript existen dos tipos de comentarios. El primero nos permite que el resto de la lnea
sea un comentario. Para ello se utilizan dos barras inclinadas:
var i = 1; // Aqui esta el comentario
Sin embargo, tambin permite un tipo de comentario que puede tener las lneas que queramos.
Estos comentario comienzan con /* y terminan por */. Por ejemplo:
/* Aqui comienza nuestro maravilloso comentario
que sigue por aqu
e indefinidamente hasta que le indiquemos el final */

Literales
Se llama as a los valores que puede tomar una variable o una constante. Aparte de los distintos
tipos de nmeros y valores booleanos:
"Soy una cadena"
3434
3.43
true, false
Tambin podemos especificar vectores:
vacaciones = ["Navidad", "Semana Santa", "Verano"];
alert(vacaciones[0]);
Dentro de las cadenas podemos indicar varios caracteres especiales, con significados especiales.
Estos son los ms usados:
Significado

Carcter
\n

Nueva lnea

\t

Tabulador

\'

Comilla simple

\"

Comilla doble

\\

Barra invertida

\999

El nmero ASCII (segn la codificacin Latin-1) del carcter en hexadecimal

De este modo, el siguiente literal:

"El curso de Javascript (\xA9 1997-99 Daniel Rodrguez) es \"co..\"."
se corresponde con la cadena:
El curso de Javascript ( 1997-99 Daniel Rodrguez) es "co..".
Por ltimo, tambin se pueden especificar objetos como literales, aunque no funcione en ms
que en Netscape 4 y superiores:
miNavegador = {nombre: "Netscape", version: 4.5,
idioma: "Espaol", plataforma: "PC"};
alert(miNavegador.plataforma);

Sentencias y bloques
En Javascript las sentencias se separan con un punto y coma, y se agrupan mediante llaves ({ y
}).

Tipos de datos
Un tipo de datos es la clase de valores que puede tomar un identificador (es decir, una variable
o una constante). Si el tipo de datos es fecha, el identificador que tenga ese tipo slo podr
almacenar fechas. En Javascript los tipos de datos se asignan dinmicamente segn asignamos
valores a las distintas variables y son los clsicos: cadenas, varios tipos de enteros y reales,
valores booleanos, vectores, matrices, referencias y objetos.

Variables
Las variables son nombres que ponemos a los lugares donde almacenamos la informacin. En
Javascript, deben comenzar por una letra o un subrayado (_), pudiendo haber adems dgitos
entre los dems caracteres. No es necesario declarar una variable, pero cuando se hace es
por medio de la palabra reservada var. Una variable, cuando no es declarada, tiene siempre
mbito global, mientras que en caso contrario ser de mbito global si est definida fuera de
una funcin, y local si est definida dentro:
var x;
// Accesible fuera y dentro de pruebas
y = 2;
// Accesible fuera y dentro de pruebas
function pruebas() {
var z;
// Accesible slo dentro de pruebas
w = 1;
// Accesible fuera y dentro de pruebas
}
Se pueden declarar varias variables en una misma sentencia separndolos por comas:
var x, y, z;
El tipo de datos de la variable ser aquel que tenga el valor que asignemos a la misma, a no ser
que le asignemos un objeto por medio del operador new. Por ejemplo, si escribimos
b = 200;
Es de esperar que la variable b tenga tipo numrico.

Referencias
La parte sin duda ms complicada de comprender y manejar en los lenguajes de programacin
tradicionales (y especialmente en C y C++) son los punteros. Por eso mismo (entre otras

razones) fueron eliminados tanto de Java como de JavaScript. Sin embargo, algunas de sus
capacidades han tenido que ser suplantadas con otras estructuras.
Los punteros se pueden usar para apuntar a otras variables, es decir, un puntero puede ser
como un nuevo nombre de una variable dada. A esto se le suele llamar referencia. En JavaScript
se pueden usar referencias a objetos y a funciones. Su mayor utilidad est en el uso de distinto
cdigo para distintos navegadores de forma transparente. Por ejemplo, supongamos que
tenemos una funcin que slo funciona en Internet Explorer 4, y tenemos una variable llamada
IE4 que hemos puesto previamente a true (verdedero) slo si el explorador del usuario es ese.
function funcionIE4() {...}
function funcionNormal() {...}
var funcion = (IE4) ? funcionIE4 : funcionNormal;
// Si IE4 es verdadero, funcion es una referencia de funcionIE4
// Si no, funcion es una referencia de funcionNormal
funcion();
// La llamada que haremos realmente depende de la
// lnea anterior
En este cdigo, cuando llamemos finalmente a funcion al final en realidad llamaremos a la
funcin a la que en la lnea anterior hemos decidido que se refiera.

Vectores y matrices
Estos tipos de datos complejos son un conjunto ordenado de elementos, cada uno de los cuales
es en s mismo una variable distinta. En Javascript, los vectores y las matrices son
objetos. Como veremos que hacen todos los objetos, se declaran utilizando el operador new:
miEstupendoVector = new Array(20)
El vector tendr inicialmente 20 elementos (desde el 0 hasta el 19). Si queremos ampliarlo no
tenemos ms que asignar un valor a un elemento que est fuera de los lmites del vector:
miEstupendoVector[25] = "Algo"
De hecho, podemos utilizar de ndices cualquier expresin que deseemos utilizar. Ni siquiera
necesitamos especificar la longitud inicial del vector si no queremos:
vectorRaro = new Array();
vectorRaro["A colocar en los bookmark"] = "HTML en castellano";
Hacer una matriz bidimensional es ms complicado, ya que tenemos que hacer un bucle que
cree un vector nuevo en cada elemento del vector original.

Operadores
Los operadores nos permiten unir identificadores y literales para formar expresiones. Las
expresiones son el resultado de operaciones mtemticas o lgicas. Un literal o una variable son
expresiones, pero tambin lo son esos mismos literales y variables unidos entre s mediante
operadores.
JavaScript dispone de muchos ms operadores que la mayora de los lenguajes, si exceptuamos
a sus padres C, C++ y Java. Algunos de ellos no los estudiaremos debido a su escasa utilidad y
con algunos otros (especialmente el condicional) deberemos andarnos con cuidado, ya que
puede lograr que nuestro cdigo no lo entendamos ni nosotros.

Operadores aritmticos
JavaScript dispone de los operadores aritmticos clsicos y algn que otro ms:
Descripcin

Smbolo Expresin de ejemplo Resultado del ejemplo

Multiplicacin

2*4

Divisin

5/2

2.5

Resto de una divisin entera %

5%2

Suma

2+2

Resta

7-2

Incremento

++

++2

Decremento

--

--2

Menos unario

-(2+4)

-6

Los operadores de incremento y decremento merecen una explicacin auxiliar. Se pueden

colocar tanto antes como despus de la expresin que deseemos modificar pero slo devuelven
el valor modificado si estn delante. Me explico.
a = 1;
b = ++a;
En este primer caso, a valdr 2 y b 2 tambin. Sin embargo:
a = 1;
b = a++;
Ahora, a sigue valiendo 2, pero b es ahora 1. Es decir, estos operadores modifican siempre a su
operando, pero si se colocan detrs del mismo se ejecutan despus de todas las dems
operaciones.

Operadores de comparacin
Podemos usar los siguientes:
Descripcin

Smbolo Expresin de ejemplo Resultado del ejemplo

Igualdad

==

2 == '2'

Verdadero

Desigualdad

!=

2 != 2

Falso

Igualdad estricta

===

2 === '2'

Falso

Desigualdad estricta !==

2 !== 2

Falso

Menor que

<

2<2

Falso

Mayor que

>

3>2

Verdadero

Menor o igual que

<=

2 <= 2

Verdadero

Mayor o igual que

>=

1 >= 2

Falso

La igualdad y desigualdad estricta son iguales a las normales pero hacen una comprobacin
estricta de tipo. Han sido incluidos en el estndar ECMAScript y lo soportan Netscape 4.06 y
superiores y Explorer 3 y superiores. Hay que indicar que versiones ms antiguas de Netscape
tratan la igualdad normal como si fuera estricta.

Operadores lgicos
Estos operadores permiten realizar expresiones lgicas complejas:
Descripcin Smbolo Expresin de ejemplo Resultado del ejemplo
Negacin

!(2 = 2)

Falso

&&

(2 = 2) && (2 >= 0)

Verdadero

||

(2 = 2) || (2 <> 2)

Verdadero

Operadores de asignacin
Normalmente los lenguajes tienen un nico operador de asignacin, que en JavaScript es el
smbolo =. Pero en este lenguaje, dicho operador se puede combinar con operadores aritmticos
y lgicos para dar los siguientes:

Operador Significado Operador Significado

x += y

x=x+y

x -= y

x=x-y

x /= y

x=x/y

x *= y

x=x*y

x%y

x=x%y

Operadores especiales
Vamos a incluir en este apartado operadores que no hayan sido incluidos en los anteriores. La
concatenacin de cadenas, por ejemplo, se realiza con el smbolo +. El operador condicional
tiene esta estructura:
condicion ? valor1 : valor2
Si la condicin se cumple devuelve el primer valor y, en caso contrario, el segundo. El siguiente
ejemplo asignara a la variable a un 2:
a = 2 > 3 ? 1 : 2
Como podis ver no resulta muy legible. Huid de este operador como de la peste. Evitad la
tentacin. Procurad no usarlo. Yo he tenido que descifrar cdigo escrito por m un par de meses
antes que tena esta clase de operadores, a veces incluso anidados. Todava tengo escalofros al
recordarlo.
Para tratar con objetos disponemos de tres operadores:
Descripcin

Expresin de
ejemplo

Smbolo

Resultado del ejemplo

Crear un objeto

new

a = new Array()

a es ahora un vector

Borrar un objeto

delete

delete a

Elimina el vector anteriormente

creado

Referencia al objeto
actual

this

this se suele utilizar en el cdigo de los mtodos de un objeto para referirse a otros mtodos o
a propiedades de su mismo objeto.

Estructuras de control
Ningn programa es una secuencia lineal de instrucciones. En todo lenguaje de programacin
existen estructuras que nos permiten variar el orden de ejecucin dependiendo de ciertas
condiciones. Estas estructuras se pueden clasificar en dos grandes grupos: bifurcaciones
condicionales y bucles.
Aparte de los dos tipos clsicos de estructuras de control, en Javascript disponemos de algunas
estructuras adicionales para facilitar el manejo de objetos. Dispone de algunas estructuras ms
de las que explicaremos en esta pgina (el soporte de etiquetas), pero debido a que no son ms
que un recuerdo de lenguajes desfasados y su utilidad resulta escasa he preferido no incluirlas.

Bifurcaciones condicionales
Una bifurcacin condicional en una estructura que realiza una tarea u otra
dependiendo del resultado de evaluar una condicin. La primera que vamos a estudiar es
la estructura if...else. Esta estructura es la ms sencilla y antigua (es posible que se utilizara
con los bacos y todo...) de todas:
if (bso.compositor == "Manuel Balboa")
alert(Hombre, una banda sonora espaola!');
else
alert('Seguro que es una americanada');
Hay que indicar que el else es opcional..

La siguiente estructura bifurca segn los distintos valores que pueda tomar una variable
especfica. Es la sentencia switch:
switch(directorPreferido) {
case "John Ford":
alert('Eso es tener buen gusto, s seor');
break;
case "Joel Coen":
alert('Parece que te gustan las cosas raras');
break;
default:
alert('Y ese quien es?');
}
Hay que indicar que no es compatible con estndar ECMA y no es soportado por el Explorer 3.

Bucles
Un bucle es una estructura que permite repetir una tarea un nmero de veces,
determinado por una condicin. Para hacer bucles podemos utilizar las estructuras while y
do...while. Estos bucle iteran indefinidamente mientras se cumpla una condicin. La diferencia
entre ellas es que la primera comprueba dicha condicin antes de realizar cada iteracin y la
segunda lo hace despus:
var numero=0;
while (numero==1) {
alert('Soy un while');
}
do {
alert('Soy un do...while');
} while (numero==1);
En este caso solo veramos aparecer un ventana diciendo que es un do...while. Qu por qu?
Veamos. El while comprueba primero si numero es igual a 1 y, como no lo es, no ejecutara el
cdigo que tiene dentro del bucle. En cambio, el do...while primero ejecuta el cdigo y luego,
viendo que la condicin es falsa, saldra. Hay que resaltar que do...while no pertenece al
estndar y no es soportado por el Explorer 3.
En Javascript, el bucle for es singularmente potente. No se reduce a casos numricos como en
muchos otros lenguajes sino que nos da mucha ms libertad. Tiene la siguiente estructura:
for (inicio; condicin; incremento)
cdigo
El cdigo contenido en el bucle se ejecutar mientras la condicin se cumpla. Antes de
comenzar la primera iteracin del bucle se ejecutar la sentencia inicio y en cada iteracin lo
har incremento. La manera ms habitual de usar estas posibilidades es, claro est, la
numrica:
var numero = 4;
for (n = 2, factorial = 1; n <= numero; n++)
factorial *= n;
Por ltimo, hay que decir que la ejecucin de la sentencia break dentro de cualquier parte del
bucle provoca la salida inmediata del mismo. Aunque a veces no hay ms remedio que utilizarlo,
es mejor evitarlo para mejorar la legibilidad y elegancia del cdigo (toma ya, la frase que me ha
salido).

Estructuras de manejo de objetos

JavaScript dispone de dos bien distintas. La primera es el bucle for...in, que nos permitir
recorrer todas las propiedades de un objeto. Se usa principalmente con vectores. Por ejemplo:
var vector = [1, 2, 2, 5];
for (i in vector)
vector[i] += 2;
Este ejemplo sumara dos a todos los elementos del vector. Sin embargo, conviene tener
cuidado ya que, de los navegadores de Microsoft, slo la versin 5 lo soporta.

La otra estructura es with, que nos permitir una mayor comodidad cuando tengamos que
tratar con muyas propiedades de un mismo objeto. En lugar de tener que referirnos a todas ellas
con un objeto.propiedad podemos hacer:
with (objeto) {
propiedad1 = ...
propiedad2 = ...
...
}
Que resulta ms cmodo (tenemos que teclar menos) y legible.

Funciones
Incluso los programas ms sencillos tienen la necesidad de dividirse. Las funciones son los
nicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente estructura:
function nombre(argumento1, argumento2,..., argumento n) {
cdigo de la funcion
}
Los parmetros se pasan por valor. Eso significa que si cambiamos el valor de un argumento
dentro de una funcin, este cambio no se ver fuera:
function sumarUno(num) {
num++;
}
var a = 1:
sumarUno(a);
En este ejemplo, a seguir valiendo 1 despus de llamar a la funcin. Esto tiene una excepcin,
que son las referencias. Cuando se cambia el valor de una referencia dentro de una funcin
tambin se cambia fuera.
Para devolver un valor de retorno desde la funcin se utiliza la palabra reservada return:
function cuadrado(num) {
return num * num;
}
a = cuadrado(2);
En este ejemplo, a valdr 4.
Se pueden definir funciones con un nmero variable de argumentos. Para poder luego acceder a
dichos parmetros dentro de la funcin se utiliza el vector arguments. Este ejemplo sumara el
valor de todos los parmetros:
function sumarArgumentos() {
resultado = 0;
for (i=0; i<arguments.length; i++)
resultado += arguments[i];
return resultado;
}

Funciones predefinidas
JavaScript dispone de las siguientes funciones predefinidas:
eval(cadena)
Ejecuta la expresin o sentencia contenida en la cadena que recibe como parmetro.
mensaje = 'Hola';
eval("alert('" + mensaje + "');");
Este ejemplo nos muestra una ventana con un saludo.
parseInt(cadena [, base])

Convierte en un nmero entero la cadena que recibe, asumiendo que est en la base
indicada. Si este parmetro falta, se asume que est en base 10. Si fracasa en la
conversin devolver el valor NaN.
parseInt("3453");
Devuelve el nmero 3453.
parseFloat(cadena)
Convierte en un nmero real la cadena que recibe, devolviendo NaN si fracasa en el
intento.
parseFloat("3.12.3");
Este ejemplo devuelve NaN ya que la cadena no contiene un nmero real vlido.
isNaN(valor)
Devuelve true slo si el argumento es NaN.
isFinite(numero)
Devuelve true si el nmero es un nmero vlido y no es infinito.
Number(referencia)
String(referencia)
Convierten a nmero (o referencia) el objeto que se les pase como argumento.

Objetos
Un objeto es una estructura que contiene tanto variables (llamadas propiedades)
como las funciones que manipulan dichas variables (llamadas mtodos). A partir de esta
estructura se ha creado un nuevo modelo de programacin (la programacin orientada a
objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos,
JavaScript simplifica en algo este modelo.
El modelo de la programacin orientada a objetos normal y corriente separa los mismos en dos:
clases e instancias. Las primeras son entes ms abstractos que definen un conjunto determinado
de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la
clase a la que pertenecen. En Javascript esta distincin se difumina. Slo tenemos objetos.

Propiedades y mtodos
Por si acaso ya lo hemos olvidado, recordemos ahora cmo se accede a los mtodos y
propiedades de un objeto:
objeto.propiedad
objeto.metodo(parametros)
Bueno, vale, este apartado es un poco tonto. Pero no os preocupis que los dos siguientes
tienen mucho ms contenido.

Creacin mediante constructores

Vamos a aprender a hacer nuestros propios objetos. Ya habamos visto como hacerlo por medio
de literales, pero dado que es una solucin bastante propietaria y poco flexible, estudiaremos el
mtodo normal de lograrlo mediante constructores.
Un constructor es una funcin que inicializa un objeto. Cuando creamos un objeto nuevo
del tipo que sea, lo que hacemos en realidad es llamar al constructor pasndole argumentos. Por
ejemplo, si creamos un objeto Array de esta manera:
vector = new Array(9);
En realidad, estamos llamando a un constructor llamado Array que admite un parmetro. Sera
algo as:

function Array(longitud) {
...
}
Vamos a crear nuestro primero objeto. Supongamos que queremos codificar en Javascript una
aplicacin que lleve nuestra biblioteca de libros tcnicos, de esos de Informtica. Para lograrlo,
crearemos un objeto Libro que guarde toda la informacin de cada libro. Este sera el
constructor:
function Libro(titulo, autor, tema) {
this.titulo = titulo;
this.autor = autor;
this.tema = tema;
}
Como vemos, accederemos a las propiedades y mtodos de nuestros objetos por medio de la
referencia this. Ahora podemos crear y acceder a nuestros objetos tipo Libro:
miLibro = new Libro("JavaScript Bible", "Danny Goodman", "JavaScript");
alert(miLibro.autor);
Sencillo, no? Sin embargo, para disfrutar de toda la funcionalidad de los objetos nos falta algo.
Ese algo son los mtodos. Vamos a incluir uno que nos saque una ventana con el contenido de
las propiedades escrito:
function escribirLibro() {
alert("El libro " + this.titulo + " de " + this.autor +
" trata sobre " + this.tema);
}
Para incluirlo en nuestro objeto aadimos la siguiente lnea a nuestra funcin constructora:
this.escribir = escribirLibro;
Y podremos acceder al mismo de la manera normal:
miLibro.escribir();

Herencia
Una de las capacidades ms empleadas de la programacin orientada a objetos es la herencia.
La herencia supone crear objetos nuevos y distintos que, aparte de los suyas propios,
disponen de las propiedades y mtodos de otro objeto, al que llamaremos padre.
Vamos a ver en nuestro ejemplo cmo se puede aplicar. En la actualidad, en muchos libros de
informtica, se incluye un CD-ROM con ejemplos y a veces aplicaciones relacionadas con el tema
del libro. Si quisieramos tener tambin esa informacin nos sera difcil, ya que algunos libros
tienen CD y otros no. Podramos tener otro objeto, pero tendramos que reproducir el cdigo (al
menos del constructor) y si cambiramos algo del mismo en el objeto Libro tambin tendramos
que hacerlo en el nuevo. Lo mejor ser crear un objeto que herede las caractersticas de Libro y
aada otras nuevas.
function LibroConCD (titulo, autor, tema, ejemplos, aplicaciones) {
this.base = Libro
this.base(titulo, autor, tema);
this.tieneEjemplos = ejemplos;
this.tieneAplicaciones = aplicaciones;
}
El problema es que, ahora, para acceder a las propiedades de Libro tenemos que hacerlo con
intermediarios:
miLibro = new LibroConCD("JavaScript Bible", "Danny Goodman",
"JavaScript", true, true);
alert('El libro Javascript Bible de Danny Goodman trata sobre
Javascript');
Para poder tener ms transparencia y llamar a las propiedades de Libro como si fueran de
LibroConCD, tenemos que incluir, fuera del constructor, la siguiente asignacin:
LibroConCD.prototype = new Libro;

Y ya podremos. prototype es una propiedad que viene por defecto en todos los objetos que
creemos. Slo admite un valor, as que los aficionados a la herencia mltiple se quedarn con las
ganas.

Objetos predefinidos
JavaScript dispone de varios objetos predefinidos para acceder a muchas de las funciones
normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas. En
algunos casos estaremos tratando con objetos aunque no nos demos cuenta, ya que los usos
ms habituales de los mismos disponen de abreviaturas que esconden el hecho de que sean
objetos.
Este captulo no pretende ser una referencia completa, sino un resumen de las propiedades y
mtodos ms usados. Si quieres ms informacin consulta el manual de referencia de Javascript
de Netscape.

Objeto Array
Como dijimos antes, este objeto permite crear vectores. Se inicializa de cualquiera de las
siguientes maneras:
vector = new Array(longitud);
vector = new Array(elemento1, elemento2, ..., elementoN);
En el primer caso crearemos un vector con el nmero especificado de elementos, mientras que
en el segundo tendremos un vector que contiene los elementos indicados y de longitud N. Para
acceder al mismo debemos recordar que el primero elemento es el nmero cero.
El objeto Array tiene, entre otros, los siguientes mtodos y propiedades:
length
Propiedad que contiene el nmero de elementos del vector.
concat(vector2)
Aade los elementos de vector2 al final de los del vector que invoca el mtodo,
devolviendo el resultado. No funciona en Explorer 3 y no forma parte del estndar ECMA.
sort(funcionComparacion)
Ordena los elementos del vector alfabticamente. Si se aade una funcin de
comparacin como parmetro los ordenar utilizando sta. Dicha funcin debe aceptar
dos parmetros y devolver 0 si son iguales, menor que cero si el primer parmetro es
menor que el segundo y mayor que cero si es al revs.
function compararEnteros(a,b) {
return a<b ? -1 : (a==b ? 0 : 1);
}
Usando esta funcin ordenara numricamente (y de menor a mayor) los elementos del
vector.

Objeto Date
Este objeto nos permitir manejar fechas y horas. Se invoca as:
fecha = new Date();
fecha = new Date(ao, mes, dia);
fecha = new Date(ao, mes, dia, hora, minuto, segundo);
Si no utilizamos parmetros, el objeto fecha contendr la fecha y hora actuales, obtenidas del
reloj del sistema. En caso contrario hay que tener en cuenta que los meses comienzan por cero.
As, por ejemplo:
navidad99 = new Date(1999, 11, 25)
El objeto Date dispone, entre otros, de los siguientes mtodos:

getTime()
setTime(milisegundos)
Obtienen y ponen, respectivamente, la fecha y la hora tomados como milisegundos
transcurridos desde el 1 de enero de 1970.
getYear()
setYear(ao)
Obtienen y poner, respectivamente, el ao de la fecha. ste se devuelven como nmeros
de 4 dgitos excepto en el caso en que estn entre 1900 y 1999, en cuyo caso se
devolvern las dos ltimas cifras. Hay que tener cuidado, ya que la implementacin de
stos mtodos puede variar en las ltimas versiones de Netscape.
getFullYear()
setFullYear(ao)
Realizan la misma funcin que los anteriores, pero sin tantos los, ya que siempre
devuelven nmeros con todos sus dgitos. Funciona en Explorer 4 y Netscape 4.06 y
superiores.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
Obtienen y ponen, respectivamente, el mes, da, hora, minuto y segundo de la fecha,
tambin respectivamente, respectivamente hablando.
getDay()
Devuelve el da de la semana de la fecha en forma de nmero que va del 0 (domingo) al
6 (sbado).

Objeto Math
Este objeto no est construido para que tengamos nuestras variables Math, sino como un
contenedor donde meter diversas constantes (como Math.E y Math.PI) y los siguientes mtodos
matemticos:
Mtodo

Descripcin

Expresin de
ejemplo

Resultado del
ejemplo

abs

Valor absoluto

Math.abs(-2)

sin, cos,
tan

Funciones trigonomtricas, reciben el

argumento en radianes

Math.cos(Math.PI)

-1

asin, acos,
Funciones trigonomtricas inversas
atan

Math.asin(1)

1.57

exp, log

Exponenciacin y logaritmo, base E

Math.log(Math.E)

ceil

Devuelve el entero ms pequeo mayor o

igual al argumento

Math.ceil(-2.7)

-2

floor

Devuelve el entero ms grande menor o

igual al argumento

Math.floor(-2.7)

-3

round

Devuelve el entero ms cercano o igual al

argumento

Math.round(-2.7)

-3

min, max

Devuelve el menor (o mayor) de sus dos

Math.min(2,4)

argumentos
pow

Exponenciacin, siendo el primer argumento

Math.pow(2,4)
la base y el segundo el exponente

16

sqrt

Raz cuadrada

Math.sqrt(4)

Objeto Number
Al igual que en el caso anterior, no se pueden crear objetos de tipo Number, sino que debemos
referirnos al genrico. Este objeto contiene como propiedades los siguientes valores numricos
Propiedad

Descripcin

NaN

Valor que significa "no es un nmero"

MAX_VALUE y MIN_VALUE

Mximo y mnimo nmero representable

NEGATIVE_INFINITIVE y
POSITIVE_INFINITIVE

Infinito negativo y positivo, se utilizan cuando hay

desbordamiento al realizar alguna operacin matemtica

Objeto String
Este es un objeto que se puede confundir con los datos normales de tipo cadena. Conviene
utilizar estos ltimos, ya que los objetos String tienen un comportamiento extrao cuando se
utilizan como cadenas normales. Adems, al crear una cadena estamos creando a la vez un
objeto String asociado. Su utilidad est en sus mtodos, entre los que cabe destacar:
charAt(pos)
charCodeAt(pos)
Devuelven el caracter o el cdigo numrico del carcter que est en la posicin indicada
de la cadena. El ltimo no funciona en Explorer 3.
indexOf(subcadena)
Devuelven la posicin de la subcadena dentro de la cadena, o -1 en caso de no estar.
split(separador)
Devuelven un vector con subcadenas obtenidas separando la cadena por el carcter
separador. No funciona en Explorer 3.
cadena = "Navidad,Semana Santa,Verano";
vector = cadena.split(",");
En el ejemplo, el vector tendr tres elementos con cada una de las vacaciones de un
escolar espaol normal.
concat(cadena2)
Devuelve el resultado de concatenar cadena2 al final de la cadena. No funciona en
Explorer 3 y no forma parte del estndar ECMA.
substr(indice, longitud)
substring(indice1, indice2)
Devuelven una subcadena de la cadena, ya sea cogiendo un nmero de caracteres a
partir de un ndice o pillando todos los caracteres entre dos ndices.
toLowerCase()
toUpperCase()
Transforman la cadena a minsculas y maysculas, respectivamente.

Objeto RegExp
Este objeto se utiliza para comprobar si las cadenas se ajustan a ciertos patrones formalizados
como expresiones regulares. Funcionan en las versiones 4 y superiores de los dos navegadores.

Resultan bastante complicadas de manejar, as que les dedicaremos prximamente un captulo

en exclusiva.

Objeto Boolean
Objeto creado para crear confusiones a los programadores. Se supone que sirve para meter en
un objeto los valores lgicos de verdadero y falso pero resulta que no se pueden utilizar en
condiciones de la manera habitual.

Objeto Function
Sirve para crear funciones de manera ilegible y para que las referencias (que son siempre
referencias a objetos) puedan usarse con funciones como en el ejemplo que vimos. La manera
de crear funciones es la siguiente:
funcion = new Function([arg1, arg2, ..., argN], codigo);
Por ejemplo:
esElMejor = new Function([cadena], "return cadena=='Daniel' ? true :
false");

Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se
ejecute slo cuando suceda algo extrao deberemos llamarla desde un controlador de eventos.
Estos controladores se asocian a un elemento HTML y se incluyen as:
<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">

Lista de eventos
Aqu tienes una pequea gua de eventos definidos en JavaScript. Para ms informacin, lee la
gua de Netscape.
Evento

Descripcin

Elementos que lo admiten

onLoad

Terminar de cargarse una pgina

<BODY...>
<FRAMESET...>

onUnLoad

Salir de una pgina (descargarla)

<BODY...><FRAMESET...>

onMouseOver Pasar el ratn por encima

<A HREF..>
<AREA...>

onMouseOut

Que el ratn deje de estar encima

<A HREF..>
<AREA...>

onSubmit

Enviar un formulario

<FORM...>

onClick

Pulsar un elemento

<INPUT TYPE="button, checkbox, link,

radio"...>

onBlur

Perder el cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

onChange

Cambiar de contenido o perder el

cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

onFocus

Conseguir el cursor

<INPUT TYPE="text"...>
<TEXTAREA...>

onSelect

Seleccionar texto

<INPUT TYPE="text"...>
<TEXTAREA...>

Como ejemplo, vamos a hacer que una ventana aparezca automticamente en cuanto pasemos
un cursor por encima de un elemento <A> (e impidiendo, de paso, que quien est viendo la
pgina pueda hacer uso del mismo).

eventos.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JavaScript
function Alarma() {
alert("No me pises, que llevo chanclas");
return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aqu encima
</A>
</BODY>
</HTML>
Y aqu est nuestro ejemplo funcionando:
Pasa por aqu encima

Definicin mediante cdigo

Hemos visto como declarar un controlador de eventos desde etiquetas HTML. Sin embargo, y
desde las versiones 3 de Netscape y 4 de Explorer, existe otro modo de hacerlo mediante
cdigo.
Muchos objetos cuyas etiquetas HTML correspondientes permiten atributos que definen
controladores de evento, permiten el acceso a dichos controladores por medio de propiedades
con el mismo nombre. Por ejemplo, la pgina:
load1.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JavaScript
function Alarma() {
alert("Hola");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
...
</BODY>
</HTML>
Se puede reescribir como:
load2.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el cdigo a navegadores sin JavaScript
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Modelo de objetos del documento

Cuando funciona en un navegador, el lenguaje JavaScript dispone de una serie de objetos que se
refieren a cosas como la ventana actual, el documento sobre el que trabajamos, o el navegador
que estamos utilizando. En los prximos captulos vamos a hacer un pequeo repaso de algunos
de ellos con los mtodos y propiedades ms usados (los que tenga ganas de contaros, vamos).
La jerarqua de dichos objetos toma la siguiente forma:

Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que en esta
jerarqua, contra lo que pueda parecer, no existe herencia alguna. Los objetos se relacionan por
composicin, es decir, un objeto Window se compone (entre otras cosas) de un objeto
Document, y ste a su vez se compone de diversos objetos Form, Image, etc..
El padre de esta jerarqua es el objeto Window, que representa una ventana de nuestro
navegador. Dado que cada marco se considera una ventana distinta, cada uno de ellos dispone
de su propio objeto Window. El objeto Document representa el documento HTML y cada uno de
los objetos que lo componen se corresponden con diversas etiquetas HTML.

Objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos
referentes a la barra de tareas, el documento o la secuencia de direcciones de la ltima sesin.
En este captulo veremos los mtodos y propiedades ms utilizadas, al menos por m, dejando el
estudio de dichos objetos para sus captulos correspondientes.
An cuando el objeto se llame Window, disponemos siempre de una referencia a l llamada
window (recordad que Javascript distingue entre maysculas y minsculas). Ser con esa
referencia con la que trabajemos. Este hecho ser comn a todos los objetos del DOM.
Por ltimo, indicar que en Javascript, se supone que todas las propiedades y mtodos que
llamamos sin utilizar ninguna referencia, en realidad se hacen utilizando utilizando esa referencia
window. As, por ejemplo, cuando ejecutamos el mtodo alert en realidad lo que estamos
haciendo es ejecutar el mtodo window.alert.
[Variable=][window.]open(URL, nombre, propiedades)

Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la
ventana donde la creamos deberemos asignarle una variable, si no simplemente
invocamos el mtodo: el navegador automticamente sabr que pertenece al objeto
window. El parmetro URL es una cadena que contendr la direccin de la ventana que
estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. El
nombre ser el que queramos que se utilize como parmetro de un TARGET y las
propiedades son una lista separada por comas de algunos de los siguientes elementos:

toolbar[=yes|no]

location[=yes|no]

directories[=yes|no]

status[=yes|no]

menubar[=yes|no]

scrollbars[=yes|no]

resizable[=yes|no]

width=pixels

height=pixels

Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas
combinaciones de los mismos no funcionen en todos los navegadores. El Explorer 4, por
ejemplo, da error ante la combinacin toolbar=no, directories=no, menubar=no.
Veamos un ejemplo:
ventanas.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function AbrirVentana() {
MiVentana=open("","MiPropiaVentana",
"toolbar=no,directories=no,menubar=no,status=yes");
MiVentana.document.write(
"<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>" +
"Esto puede ser lo que tu quieras</B></H1></CENTER>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Ssamo"
onClick="AbrirVentana()">
</FORM>
</BODY>
</HTML>
Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con
JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya
sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana MiVentana
y escribe en ella por medio del objeto Document (tranquilos, en el prximo captulo se
estudiar este objeto) todo el cdigo HTML de la pgina. Aqu debajo podis probarlo.
close()
Cierra la ventana. A no ser que hayamos acabado de abrirla nosotros mostrar al
usuario una ventana de confirmacin para que decida l si quiere o no cerrarla. Esto se
hace por motivos de seguridad, ya que sera demasiado fcil hacer un script de esos mal
intencionados que nos cerrase la ventana del navegador, con lo que fastidia eso.

alert(mensaje)
Muestra una ventana de dilogo con el mensaje especificado.
confirm(mensaje)
Muestra una ventana de dilogo con el mensaje especificado y dos botones. Si el usuario
pulsa OK, el mtodo devuelve true. Si, en cambio, pulsa Cancelar, devolver false.
prompt(mensaje, sugerencia)
Muestra una ventana de dilogo con el mensaje especificado y un campo de texto en el
que el usuario pueda teclear, cuyo valor inicial ser igual a sugerencia. Si el usuario
pulsa OK, el mtodo devuelve la cadena introducida en el campo de texto. Si, por el
contrario, pulsa Cancelar, devolver el valor null. Dado que este valor se considera
igual a false, podemos comprabarlo directamente en una condicin para ver que ha
hecho el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha pulsado el botn
de Aceptar:
var contestacion = prompt("Cmo te llamas, criatura?", "");
if (contestacion)
alert("Hola, " + contestacion);
status
Define la cadena de caracteres que saldr en la barra de estado en un momento dado.
defaultStatus
Define la cadena de caracteres que saldr por defecto en la barra de estado. Cuando no
la especificamos, defaultStatus ser igual al ltimo valor que tom status.
setTimeout("funcin",tiempo)
Llama a funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la hora
de realizar cualquier rutina que deba ejecutarse a cierta velocidad.

La barra de estado
En muchas pginas web se puede observar cmo sus creadores controlan por completo la barra
de estado del navegador. Quiz tambin hayas visto esos scrolls tan bonitos, y que tan rpido
cansan. Ahora voy a explicar cmo se hacen ambas cosas, utilizando los que ya hemos visto del
objeto Window.
Para empezar vamos con lo ms sencillito: escribir mensajes diversos en la barra de estado. En
el captulo en que hablbamos sobre los objetos predefinidos apareca el objeto window. En este
objeto se definan dos atributos: status y defaultStatus. Para poner un mensaje en la barra
de estado nada ms cargar el documento y que se mantenga ah mientras no haya otro ms
importante (un sustituto del famoso Document: Done del Netscape, vamos) haremos:
<BODY onLoad=
"window.defaultStatus='El documento ya se ha ledo';return true">
El cdigo lo nico que hace es modificar defaultStatus y devolver true como resultado del
controlador de eventos. Por alguna misteriosa razn es obligatorio hacer esto cuando modificas
algo de la barra de estado. No me preguntis por qu, al parecer no es ms que una convencin.
Ahora veremos cmo se puede definir el valor de la barra de estado cuando el ratn pasa por
encima de un elemento <A>:
<A HREF="MiPagina.html" onMouseOver=
"window.status='Vente a mi psgina';return true">
Fcil, no? Bueno, ahora vamos a ver cmo se hacen scrolls, que es mas chulo todava.
scrolls.html
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>

<SCRIPT LANGUAGE="JavaScript">
var texto="
Aqu est el mensaje que espero " +
"observes y leas con suma atencin
";
var longitud=texto.length;
function scroll() {
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status = texto;
setTimeout("scroll()",150);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor psgina del mundo conocido.
</BODY>
</HTML>
Como podis ver, la cosa no es ni ms larga ni ms compleja que los ejemplos anteriores.
Simplemente escribe el texto en la barra de estado y luego coge el caracter ms a la izquierda
del mismo y lo pone a la derecha, para despus volver a escribirlo. La nica pega que tiene es
cmo demonios hago para que la funcin se llame cada cierto tiempo predeterminado para ir
desplazando el texto a una velocidad constante. Y la respuesta esta en el mtodo setTimeout.

Marcos (o frames)
Uno de los problemas ms frecuentes a los que se enfrenta un programador de Javascript es el
manejo de marcos. Es decir, cmo accedo yo al cdigo o a objetos como Window o Document de
otros marcos? Javascript propone una manera bastante sencilla de hacerlo.
Javascript considera el documento de declaracin de marcos (es decir, aquel en el que
escribimos las etiquetas FRAME y FRAMESET) como un objeto Window normal y corriente. Permite
acceder a los marcos que hemos declarado en l por medio del vector frames. Es decir, si en
nuestro documento estuviera la siguiente lnea:
<FRAME NAME="principal" SRC="MiPagina.html">
Podramos acceder a su objeto Window por medio de la referencia
window.frames["principal"].
A su vez, desde el documento "hijo", es decir, desde el documento que est encerrado en un
marco, podemos acceder al padre por medio de la referencia parent. Tambin podemos acceder
al documento que est arriba del todo en esta jerarqua por medio de top. Por ejemplo:
window == window.top
Esta igualdad comprobar si nuestro documento est en la ventana principal o en un marco.
Comprueba si la ventana en la que est (window) es igual a la ventana principal (window.top).
Mediante esta sencilla comprobacin podemos crear fcilmente (toda vez que conozcamos el
manejo del objeto Location), rutinas que aseguren que nuestra ventana es la principal, o que
recarguen nuestra estructura de marcos si algn usuario pretende acceder a un marco
especfico, etc..

Objeto Document
Este objeto representa el documento HTML en el que estamos. Se accede a l por medio de la
referencia document. Su mayor importancia viene por el nmero de vectores que posee, que
referencian a objetos Image, Form o Link, los cuales permiten acceder a las imgenes,
formularios y enlaces del documento, respectivamente.
Tambin dispone de varios mtodos para trabajar con cookies, pero eso lo veremos en otro
captulo.
lastModified
Contiene la fecha y hora en que se modific el documento por ltima vez y se suele usar
en conjuncin con write para aadir al final del documento estas caractersticas.

bgColor
Modifica el color de fondo del documento. El color deber estar en el formato usado en
HTML. Es decir, puede ser red o FF0000.
forms[]
Vector que contiene los formularios del documento. El primero ser el nmero 0, el
segundo el 1, etc..
images[]
Vector que contiene las imgenes del documento. Se ordenan igual que en el anterior
caso, aunque tambin permiten ser accedidas con el nombre como ndice. Es decir, a
una imagen definida como <IMG SRC=".." NAME="miImagen"> se puede acceder con
document.inages["miImagen"].
links[]
Vector que contiene los enlaces del documento. Se ordenan igual que en los dos
anterioers, aunque no se suele utilizar en el cdigo Javascript. Su razn de ser es que, al
ser los enlaces objetos, permiten incluir cdigo Javascript en ellos por medio de la
pseudo-URL javascript:codigo.
write(cadena)
writeln(cadena)
Escribe el cdigo HTML indicado en cadena en nuestro documento HTML. writeln hace
lo mismo, pero incluyendo al final un retorno de carro.
open()
Abre un nuevo documento para escribir. Un documento debe estar abierto para poder
escribir en l. Sin embargo, no se utiliza mucho ya que los dos mtodos anteriores abren
automticamente el documento si no lo est ya.
close()
Cierra el documento, impidiendo escribir de nuevo en l.

Cmo escribir en el documento

A la hora de escribir en un documento por medio de write o writeln hay que tener en cuenta
un hecho fundamental. Para poder escribir en un documento, ste debe estar abierto y, al
abrirlo, se destruye todo el cdigo que haya en l.
Un documento se abre automticamente cuando empieza a cargarse y se cierra cuando termina
de hacerlo. As pues, si deseamos escribir en un documento si sobreescribir su contenido,
deberemos hacerlo antes de que ste termine de cargar. Si lo hacemos despus,
sobreescribiremos su contenido. Por lo tanto:
escribir.html
<HTML>
<HEAD>
<TITLE>Escribe y no sobreescribe</TITLE>
</HEAD>
<BODY>
Este es un documento muy interesante y que fue modificado por ltima vez
el da
<SCRIPT LANGUAGE="JavaScript">
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Este ejemplo os mostrar la cadena completa, ya que se llama a write antes de cerrarse el
documento. Es decir, antes de que termine de cargar. Sin embargo, el siguiente ejemplo:
sobreescribir.html
<HTML>
<HEAD>

<TITLE>Sobreescribe</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function escribir() {
document.write("Este es un documento muy interesante y " +
"que fue modificado por ltima vez el da");
document.write(document.lastModified);
}
</SCRIPT>
</HEAD>
<BODY onLoad="escribir()">
Hola.
</BODY>
</HTML>
Sobreescribir el documento y no podremos ver ese "Hola", al ser llamado despus de cargar el
documento, es decir, despus de cerrarlo.

Cookies
Parece ms que necesario definir algo que lleva el absurdo nombre de cookie (literalmente:
galletita). Al parecer, en Estados Unidos (ignoro si tambin en Gran Bretaa) reciben ese
nombre las fichas que dan en los guardarropas a modo de resguardo. Y es un smil bastante
acertado de lo que son en realidad las cookies cuando hablamos de Internet.
Una cookie es un elemento de una lista que se guarda en el ordenador del visitante. Cada
elemento de esa lista tiene dos campos obligatorios: el nombre y su valor; y uno opcional: la
fecha de caducidad. Este ltimo campo sirve para establecer la fecha en la que se borrar la
galleta. Tiene este formato:
nombre=valor;[expires=caducidad;]
Slo el servidor que ha enviado al usuario una determinada cookie puede consultarla. Cada una
tiene un tamao mximo de 4 Kb y puede haber un mximo de 300 cookies en el disco duro.
Cada servidor podr almacenar como mucho 20 galletas en el fichero cookies.txt (en el caso
de usar Netscape) o en el directorio cookies (si utilizamos Explorer) del usuario. Si no
especificamos la fecha de caducidad la "galleta" se borrar del disco duro del usuario en cuanto
ste cierre el navegador.

Funciones bsicas
Para poder hacer algo con cookies deberemos programar dos funciones: una que se encargue de
mandar una cookie al usuario y otra que consulte su contenido.
function mandarGalleta(nombre, valor, caducidad) {
document.cookie = nombre + "=" + escape(valor)
+ ((caducidad == null) ? "" : ("; expires=" +
caducidad.toGMTString()))
}
Con esta funcin mandamos una galleta. Vemos que el valor es codificado por medio de la
funcin escape y que la caducidad (en caso de decidir ponerla) debe ser convertida a formato
GMT. Esto se hace mediante el metodo toGMTString() del objeto Date.
function consultarGalleta(nombre) {
var buscamos = nombre + "=";
if (document.cookie.length > 0) {
i = document.cookie.indexOf(buscamos);
if (i != -1) {
i += buscamos.length;
j = document.cookie.indexOf(";", i);
if (j == -1)
j = document.cookie.length;
return unescape(document.cookie.substring(i,j));
}
}
}

Declaramos la variable buscamos que contiene el nombre de la cookie que queremos buscar ms
el igual que se escribe justo despus de cada nombre, para que as no encontremos por error un
valor o una subcadena de otro nombre que sea igual al nombre de la cookie que buscamos. Una
vez encontrada extraemos la subcadena que hay entre el igual que separa el nombre y el valor y
el punto y coma con que termina dicho valor.

Un ejemplo: el contador individualizado

Vamos a ver un ejemplo. Utilizaremos una galleta llamada VisitasAlCursoDeJavaScript para
guardar el nmero de veces que has visitado este curso:
cookies.txt
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Se usan los comentarios para esconder el cdigo a navegadores sin
JavaScript
function Contador() {
var fecha=new Date (2004, 12, 31); // La fecha de caducidad es 31
de diciembre del 1999
if (!(num=consultarGalleta("VisitasAlCursoDeJavaScript")))
num = 0;
num++;
mandarGalleta("VisitasAlCursoDeJavaScript", num, fecha);
if (num==1)
document.write("esta es la primera vez que lees este captulo.");
else {
document.write("has visitado este curso "+num+" veces.");
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Por lo que veo,
<SCRIPT LANGUAGE="JavaScript">
<!-Contador();
// -->
</SCRIPT>
</BODY>
</HTML>
La funcin consulta el valor de la cookie incrementandolo y, si no existe, lo pone a uno. Luego
escribe en el documento el nmero de veces que has visitado el curso. Y, por lo que veo,
esta
es la primera vez que lees este captulo.

Objeto Image
Este objeto representa a una imagen. Se puede acceder a las diversas imgenes del documento
por medio del vector de referencias document.images[]. Este objeto est disponible desde el
Netscape 3 y el Explorer 4. Sus propiedades ms importantes son:
src
Contiene el archivo de la imagen.
lowsrc
Los navegadores admiten incluir un nombre de imagen que se cargue antes que la
imagen final. Es til para poner una imagen que ocupe poco mientras esperamos que se
cargue la imagen final, que puede ocupar una cantidad insultante de espacio. Esta
propiedad permite accede al archivo de esa primera imagen pequea.
complete
Valor lgico que ser true si la imagen ha terminado ya de cargarse.

Tambin dispone de diversas propiedades de slo lectura que se corresponden con los atributos
de la etiqueta <IMG> como, por ejemplo, width o border.

Tratamiento de imgenes
Lo que vamos a lograr con este truco es un pequeo cambio de imgenes. En muchas pginas,
al pasar el ratn por encima de una imagen puedes observar que el grfico cambia. Para hacer
esto deberemos crear dos grficos distintos: el que se ver normalmente y el que nicamente
podr verse cuando el ratn pase por encima. Si llamamos al primero, por ejemplo,
apagado.gif y al segundo encendido.gif el cdigo necesario para que el truco funcione es:
imagenes.html
<HTML>
<HEAD>
<TITLE>Ejemplo de imagenes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
if (document.images) {
var activado=new Image();
activado.src="encendido.gif";
var desactivado= new Image();
desactivado.src="apagado.gif";
}
function activar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=activado.src; }
}
function desactivar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=desactivado.src; }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="mipagina.html" onMouseOver="activar('prueba');"
onMouseOut="desactivar('prueba');">
<IMG NAME="prueba" SRC="apagado.gif" BORDER=0>
</A>
</BODY>
</HTML>
Lo primero que hay que indicar es que para que funcione el invento la imagen debe ser un
enlace. Por qu? Porque los eventos que controlan si el ratn pasa o no por encima no son
admitidos por la etiqueta <IMG>. Tambin deberemos "bautizar" nuestra imagen usando el
atributo NAME="como-se-llame" para permitir al cdigo su identificacin posterior.
El ejemplo funciona de la siguiente manera: en principio la imagen que vemos es la desactivada,
que es la que indica la etiqueta <IMG>. Al pasar el raton por encima de ella el evento
onMouseOver llamar a la funcin activar llevando como parmetro el nombre de la imagen.
Esta funcin sustituir en el objeto document el nombre del fichero donde se guarda la imagen
por encendido.gif, que es el grfico activado. Cuando apartemos el ratn de la imagen, ser el
evento onMouseOut el que se active, llamando a desactivar. Esta funcin sustituir el grfico de
nuevo, esta vez por apagado.gif.
Leyendo esta explicacin parece que una parte del cdigo sobra. Para qu sirve declarar dos
objetos Image para albergar los grficos? No bastara con cambiar directamente el nombre de la
imagen escribiendo document[nombreImagen].src = 'encendido.gif';? Pues no del todo.
Efectivamente funcionara, pero cada vez que cambisemos el nombre, el navegador se traera
la imagen del remoto lugar donde se encontrara. Es decir, cada vez que passemos el ratn por
encima de la imagen o nos alejaramos de ella tendramos que cargar (aunque ya lo hubisemos
hecho antes) el grfico correspondiente. Es cierto que con la cach del navegador este efecto
quedara algo mitigado, pero siempre es mejor precargar las imgenes usando el objeto Image,
ya que as el navegador comenzar a leer el grfico en cuanto ejecute el cdigo en vez de
esperar a que el usuario pase por encima de la imagen con el ratn. El objeto Image tiene como
atributos los distintos parmetros que puede tener la etiqueta <IMG>.

Por ltimo, hay que estudiar que significa eso de if (document.images). Los navegadores en
que no exista el objeto Image darn un mensaje de error si se lo encuentran por ah. La solucin
a este problema consiste en detectar la capacidad del navegador para manipular grficos
preguntandole por la existencia del vector document.images. As podremos no crear las
variables que guardan los grficos ni ejecutar el cdigo de las funciones para activar y desactivar
en el caso de que el navegador no soporte este vector.
Y este es nuestro ejemplo funcionando:

Para hacerlo con ms de una imagen el asunto se complica. Si quereis saber la manera de
realizarlo visitad el taller web.

Objeto Form
Los formularios siempre han sido la mejor manera de facilitar la comunicacin entre los usuarios
y los creadores de una web. Sin embargo, la implementacin de los mismos en el lenguaje HTML
ha provocado ciertos problemas debido a sus carencias. Estos problemas han intentado
solventarse con scripts, situados tanto en el servidor como en el navegador.
Los programas albergados en el servidor suelen ser scripts CGI y, por supuesto, no vamos a
investigarlos en un curso de JavaScript. Solamente decir que existen infinidad de ellos y que, en
general, los buenos proveedores de espacio web tienen alguno disponible para sus usuarios, con
instrucciones de uso incluidas.
Los programas que se ejecutan en el navegador suelen estar escritos en JavaScript, y realizan
tareas simples de validacin. En muchas ocasiones estn combinados con scripts CGI que
modifican el mensaje generado por un formulario para facilitar su lectura y manejo.
El vector document.forms contiene todos los formularios de un documento. As, se accedera al
primer formulario definido como document.forms[0]. Sin embargo, si usamos el parmetro
NAME en la etiqueta HTML:
<FORM NAME="miFormulario">
entonces podremos acceder al formulario con document.miFormulario, que resulta bastante
ms cmodo y estable ante la posibilidad de variacin del nmero y posicin de formularios en el
documento. Estos son los mtodos y propiedades del objeto Form:
submit()
Enva el formulario.
reset()
Devuelve los valores de un formulario a su estado inicial.
elements[]
Contiene todos y cada uno de los elementos de los que consta el formulario, es decir, los
botones, cajas de textos, listas desplegables, etc. que componen un formulario. Cada
elemento puede ser un objeto distinto, por lo que deberemos averiguar de qu tipo son
por medio de la propiedad comn type.

Objetos Text
Cuatro elementos HTML distintos (text, textarea, password y hidden) son, desde el punto de
vista del DOM, objetos tan parecidos entre s que vamos a estudiarlos conjuntamente. En
realidad, slo tienen tres propiedades verdaderamente importantes:
name
Nombre del elemento, indicado en el atributo NAME de su etiqueta HTML. Este atributo
est presente en todos los objetos que son elementos de un formulario.

type
Tipo del elemento. Al igual que el anterior, esta propiedad est presente en todos los
objetos que representan elementos de un formulario. En el caso de los que nos ocupan
valdr siempre "text".
value
Contiene el valor, es decir, el texto tecleado por el usuario. Es a esta propiedad a la que
accederemos habitualmente.
Como ejemplo de su uso, vamos a ver ahora el cdigo de nuestro primer formulario con
validacin, que comprueba si la direccin de correo electrnico que introduce el usuario es
correcta:
formularios.html
<HTML>
<HEAD>
<TITLE>Ejemplo de formularios</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miFormulario"
METHOD="POST"
ACTION="mailto:yo@miproveedor.mipais"
ENCTYPE="text/plain"
onSubmit="return validar(this.email.value)">
Mandame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Mandame tu e-mail">
</FORM>
</BODY>
</HTML>
El cdigo es sencillo: el cdigo llamado por el controlador de evento onSubmit debe devolver
false si deseamos que el formulario no sea enviado. As pues, llamamos a la funcin que
comprueba si hay alguna arroba en el campo email del formulario.
La manera de llamar a esta funcin es quizs lo ms complicado. La funcin validar recibe una
cadena de caracteres, devolviendo verdadero o falso dependiendo de que haya o no una arroba
dentro de ella. El controlador utiliza para llamar a esta funcin lo siguiente:
this.email.value
this es una referencia estndar. Cuando veamos this en algn cdigo en realidad deberemos
sustituirlo mentalmente por el nombre del objeto en el que est el cdigo. En este caso, como
estamos dentro de miFormulario, this ser equivalente a document.miFormulario. email es el
nombre del campo que queremos investigar y value el el atributo que contiene lo que haya
tecleado el usuario.
Mandame tu e-mail:
Enviar

Objetos Checkbox y Radio

En estos objetos, tanto el atributo HTML VALUE como su correspondiente propiedad value
accesible desde Javascript no corresponden a nada visible. En ambos casos, el estado del
elemento es de tipo lgico: puede estar seleccionado o no. Este valor lgico se contiene en la
propiedad checked.

Por tanto, para comprobar si est pulsado o no una caja de confirmacin o un botn de seleccin
especfico deberemos preguntar por dicha propiedad.
Vamos a ver un ejemplo prctico de uso: os voy a hacer un pequeo examen, para ver cuanto
JavaScript habis aprendido. Espero que ningn profesor utilice este ejemplo para realizar sus
exmenes, ya que cualquiera puede averiguar las respuestas observando el cdigo. Aqu tenis
el examen:
La estructura a = b ? c : d; es...

j un bucle
k
l
m
n
j una operacin aritmtica
k
l
m
n
j una condicin
k
l
m
n
El atributo window.status contiene:

j el valor de la barra de estado

k
l
m
n
j el valor por defecto de la barra de estado
k
l
m
n
j ciertas caractersticas de la ventana
k
l
m
n
El evento load ocurre:

j cuando termina de cargarse una pgina

k
l
m
n
j cuando termina de cargarse un grfico
k
l
m
n
j cuando empieza a cargarse una pgina
k
l
m
n
Que array contiene los grficos de una pgina?

j document.graphics
k
l
m
n
j document.images
k
l
m
n
j no hay ninguno
k
l
m
n
El mtodo alert sirve para:

j hacer sonar un pitido de alarma

k
l
m
n
j lanzar una ventana con informacin
k
l
m
n
j decirle al navegador que hay un problema con el cdigo
k
l
m
n
Enviar

No os voy a poner el cdigo que si no me averiguais las respuestas, tramposillos... Simplemente

comprueba que cada elemento del formulario de tipo radio seleccionado tiene el atributo VALUE
igual a "bien". Teniendo en cuenta que el vector elements contiene todos los elementos de un
formulario, el cdigo resultante es el siguiente:
function averiguarNota(examen) {
var resultado=0;
for (i=0;i<examen.elements.length;i++)
if ((examen.elements[i].type=="radio") &&
(examen.elements[i].value=="bien") &&
(examen.elements[i].checked))
resultado++;
alert("Acertaste "+resultado+" de 5 preguntas.");

return false;
}
y cada pregunta tiene la siguiente estructura:
<BR>HTML en castellano es
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
una porquera
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="bien">
el mejor
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
algo poco reseable
Luego la funcin es llamada desde el evento submit y ya est. Podra haberse hecho tambin
desde el evento click de un botn... siempre hay ms de una manera de hacer las cosas.

Objetos Select y Option

El objeto Select es, con mucho, el ms complicado. Esto es debido a que contiene en su interior
un vector de objetos Option. Dispone de dos propiedades interesatnes:
selectedIndex
Empezando a contar a partir de cero, indica qu opcin est seleccionada. Si hay varias
seleccionadas, indica la opcin con el ndice ms bajo.
options[]
Vector que contiene los objetos Option correspondientes a todas y cada una de las
opciones.
El objeto Option, por otro lado, dispone de otras dos propiedades a estudiar (aparte de las
comunes, como type o value):
selected
Valor lgico que ser verdadero si la opcin est seleccionada.
text
Texto que acompaa a la opcin.
Como ejemplo, vamos a ver una lista desplegable que nos permita navegar por diversas
pginas. Cada etiqueta OPTION tendr como parmetro VALUE la direccin de la pgina web e
incluiremos un controlador del evento onChange (que se ejecuta cuando el usuario cambia la
opcin escogida en la lista) que llamar a una rutina que explicamos ms adelante:
select.html
<HTML>
<HEAD>
<TITLE>Ejemplo de Select</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function irA(menu){
window.location.href = menu.options[menu.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION VALUE="">Visitar
<OPTION VALUE="http://www.ole.es">&iexcl;Ol&eacute;!
<OPTION VALUE="http://www.ozu.es">Oz&uacute;
<OPTION VALUE="http://www.ozu.com">Otro oz&uacute;
<OPTION VALUE="http://www.es.lycos.de">Lycos
<OPTION VALUE="http://www.metabusca.com">Metabusca
</SELECT>
</FORM>
</BODY>
</HTML>

La funcin irA simplemente utiliza la opcin elegida para obtener por medio de su valor la
direccin de la pgina a la que debe acudir.

Otros objetos
El modelo de objetos del documento define varios objetos, por as decirlo, "menores", que no
tienen relacin con nada fsico de la pgina en la que estamos. Es decir, no guardan relacin con
las etiquetas HTML que estn en ellas escritas. Son los siguientes:

Objeto History
Se accede a este objeto por medio de la referencia document.history y contiene todas las
direcciones que se han visitado en la sesin actual. Aunque no permite acceder a ellas (para que
no podamos cotillear demasiado al usuario), dispone de varios mtodos para sustituir el
documento actual por alguno que el usuario ya haya visitado:
back()
Volver a la pgina anterior. Es muy sencillo de utilizar:
<A HREF="javascript:window.history.back()">
Y, para variar, si deseas probar no tienes ms que pulsar aqu.
forward()
Ir a la pgina siguiente.
go(donde)
Ir a donde se indique, siendo donde un nmero tal que go(1)=forward() y go(1)=back().

Objeto Location
Se accede a este objeto por medio de la referencia document.location y contiene informacin
sobre la direccin de la pgina actual en varias propiedades.
href
Permite el acceso a la direccin de la pgina actual. Si lo cambiamos, pues cambiaremos
de pgina.
protocol
Protocolo de la pgina actual. Habitualmente http.
host
Mquina donde se alberga la pgina actual. En el caso de la que ests leyendo, sera
html.programacion.net.
pathname
Camino de la pgina actual. En nuestro ejemplo, ser /js/otrosobjetos.htm.
hash
Si hemos accedido a una pgina por medio de un ancla, contiene una almohadilla
seguida de ese ancla. Por ejemplo, #location.
search
Puede que hallas notado que muchas pginas (especialmente en los motores de
bsqueda) tienen unas direcciones inmensas con una estructura como
pagina.asp?busqueda=HTML+en+castellano&tipo=Y o engendros semejantes. Esta
propiedad permite acceder a esa ltima parte de la direccin (a partir de la
interrogacin, inclusive). Puede ser til para pasar parmetros de una pgina a otra.

Objeto Navigator

Se accede a l por medio de la referencia navigator y nos permite averiguar varias

caractersticas del navegador que usamos. Por ejemplo:
appName
Nombre del navegador.
appVer
Nmero principal de versin.
language
Idioma del mismo.
platform
Plataforma donde esta ejecutndose.
No podemos sobreescribir estos atributos, pero s leerlos.

Objeto Screen
Como caba esperarse, se puede acceder a este objeto por medio de la referencia... chachaaaan
screen! Nos permitir conocer la configuracin de la pantalla del usuario. Al igual que en el
anterior objeto, todos sus atributos son de slo lectura. Conviene indicar que este objeto slo
est disponible desde las versiones 4.0 de ambos navegadores.
height
Altura de la resolucin de la pantalla.
width
Anchura de la resolucin de la pantalla.
pixelDepth
Nmero de bits por pixel.
As, por ejemplo, te puedo decir que en este momento tu pantalla est configurada para
1024x768x65536 colores. Y el cdigo que he utilizado para averiguarlo es el siguiente:
if (window.screen)
texto=screen.width+"x"+screen.height+"x"+Math.pow(2,screen.colorDepth)+"
colores.";
else
texto="quien sabe cuantos colores, que necesito que tengas Communicator
o IE4 para averiguarlo.";
document.write(texto);
Puede verse que antes de acceder al objeto, investigo si ste existe, mostrando un mensaje de
circunstancias en caso de que no sea as.

Nuevas caractersticas
Vamos a estudiar algunos elementos del lenguaje que no estaba definidos en su primera versin
pero, tras ser introducidos en la versin 1.1, se han incorporado al estndar ECMAScript. Por
ejemplo, en esta versin se define el mtodo para incluir una expresin JavaScript en los
parmetros de una etiqueta HTML. La forma de hacerlo es considerando dicha expresin (entre
llaves) como un caracter especial HTML, encerrandolo, por tanto, entre un & y un ;. Por
ejemplo:
<HR WIDTH=&{anchoLinea+"%";};>
que, en el supuesto de que la variable anchoLinea sea igual a 50 nos dara el siguiente
resultado:

Ficheros .js

Un fichero .js es un archivo donde podremos guardar funciones y variables globales que podrn
leerse desde cualquier pgina HTML. Gracias a ellos podremos evitar el tener que duplicar
funciones que se necesiten en ms de un documento. Podremos incorporarlos a nuestras
pginas de esta manera:
externo.html
<HTML>
<HEAD>
<TITLE>Mi Pgina</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="funciones.js">
<!-alert('Error con el fichero js');
// -->
</SCRIPT>
</HEAD>
<BODY>
Lo que sea.
</BODY>
</HTML>
El cdigo que incluyamos entre un <SCRIPT SRC> y un </SCRIPT> slo se ejecutar en caso de
que la lectura del fichero .js falle.
Por otra parte, hay que indicar que el fichero en cuestin contendr slo cdigo en Javascript, no
etiquetas HTML de ningn tipo, ni siquiera las de apertura y cierre de SCRIPT.

FAQ (Preguntas habituales)

Como me haceis muchas preguntas, y muchas de ellas iguales, he decidido elaborar este FAQ
(Frequently Asked Questions, o preguntas hechas a menudo) con las ms habituales. Espero que
lo leas antes de escribirme.

Puedo hacer contadores, o acceder a bases de datos, en JavaScript?

Quiero que me ensees a hacer el truco que he visto en tal pgina

No s muy bien como extender el truco del cambio de imgenes al caso en que tengo
muchas imgenes, puedes ayudarme?

Existe una versin comprimida del curso para poder leerlo desconectado?

Qu bibliografa puedes recomendarme para ampliar conocimientos?

Qu enlaces puedes recomendarme para ampliar conocimientos?

Puedo hacer contadores, o acceder a bases de datos, en JavaScript?

No, no puedes. La razn es sencilla: JavaScript se ejecuta en el ordenador que alberga el
explorador que usa el navegante para acceder a tus pginas. Para poder realizar consultas a
bases de datos (el mirar el nmero de usuarios que han pasado por tus pginas no es ms que
eso) debes acceder a ficheros situados en el ordenador que alberga tus pginas. Que no es el
mismo. Luego JavaScript no puede hacer esas cosas.
Quiero que me ensees a hacer el truco que he visto en tal pgina
Bueno, dime la pgina y si tengo tiempo le echar un vistazo. Si es suficientemente interesante
me lo apuntar para contarselo a todos en el Taller Web. Si la cosa es sencilla, te lo contar en
un mensaje. Todo esto suponiendo que disponga del tiempo suficiente...
No s muy bien como extender el truco del cambio de imgenes al caso en que tengo
muchas imgenes, puedes ayudarme?
Visitar el artculo que he escrito para la seccin de Taller Web.

Existe una versin comprimida del curso para poder leerlo desconectado?
S, lo puedes coger

aqu, aunque tambin estaba disponible en el primer captulo.

Qu bibliografa puedes recomendarme para ampliar conocimientos?

Pues... no mucha. Yo he aprendido de la red y no conozco muchos libros sobre el tema. El mejor
de ellos es "Javascript Bible" de Danny Goodman.
Qu enlaces puedes recomendarme para ampliar conocimientos?
Si sabes ingls, puedes leerte el manual oficial de referencia de JavaScript de Netscape. Incluye
hasta la versin 1.3, que por los pocos cambios incluidos no esta cubierta por este curso.

Para contactar conmigo

Este curso est abierto a cualquier sugerencia que queris hacerme. Si me escribes con tus
dudas, sugerencias, peticiones de trucos nuevos, etc... me ayudars a mejorarlo, as que te
agradecera que rellenaras el formulario que tienes abajo o que me escribieras. Pero si lo que
quieres es preguntar asegurate antes de que tu pregunta no est ya respondida en el FAQ.