Curso de Javascript 1.

2
Autor: Daniel Rodriguez Herrera
Indice de contenidos
• Introducción

o ¿Qué es Javascript?

o Primeros pasos

• Elementos básicos

o Comentarios

o Literales

o Sentencias y bloques

• Tipos de datos

o Variables

o Referencias

o Vectores y matrices

• Operadores

o Operadores aritméticos

o Operadores de comparación

o Operadores lógicos

o Operadores de asignación

o Operadores especiales

• Estructuras de control

o Bifurcaciones condicionales

o Bucles

o Estructuras de manejo de objetos

• Funciones

o Funciones predefinidas

• Objetos
 o Propiedades y métodos

o Creación mediante constructores

o Herencia

• Objetos predefinidos

o Objeto Array

o Objeto Date

o Objeto Math

o Objeto Number

o Objeto String

o Objeto RegExp

o Objeto Boolean

o Objeto Function

• Eventos

o Lista de eventos

o Definición mediante código

• Modelo de objetos del documento

• Objeto Window

o La barra de estado

o Marcos (o frames)

• Objeto Document

o Cómo escribir en el documento

• Cookies

o Funciones básicas

o Un ejemplo: el contador individualizado

• Objeto Image

o Tratamiento de imágenes

• Objeto Form

o Objetos Text

o Objetos Checkbox y Radio

o Objetos Select y Option

• Otros objetos
 o Objeto History

o Objeto Location

o Objeto Navigator

o Objeto Screen

• Nuevas características

o Ficheros .js

• FAQ (Preguntas habituales)

o Para contactar conmigo

Introducción
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, según se avanza en el curso es
posible que algunas cosas no funcionen en navegadores antiguos, aún cuando soporten
Javascript.

Para poder teclear los ejemplos no hace falta más 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 múltiples maneras que han surgido para
extender las capacidades del lenguaje HTML. Al ser la más sencilla, es por el momento la más
extendida. Antes que nada conviene aclarar un par de cosas:

1. JavaScript no es un lenguaje de programación propiamente dicho. Es un lenguaje

u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos
procesadores de texto. Nunca podrás hacer un programa con JavaScript, tan sólo podrás
mejorar tu página Web con algunas cosas sencillas (revisión de formularios, efectos en
la barra de estado, etc...) y, ahora, no tan sencillas (animaciones usando HTML
dinámico, por ejemplo).

2. JavaScript y Java son dos cosas distintas. Principalmente porque Java sí que es un
lenguaje de programación 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 guía completa, sino sólo una pequeña introducción. Para tener una guía
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 Timofónica por leer este curso, es mejor que te lo
lleves a casa en formato ZIP si no quieres caer en la más absoluta de las ruinas.

Existen tres versiones de JavaScript. Casi todo lo que hay en este curso funciona con la versión
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.

También existe una versión 1.3, introducida en la versión 4.06 (si no recuerdo mal). Esta versión
es una pequeña revisión de la 1.2 creada para ajustarse al estándar internacional ECMA que
regula el lenguaje Javascript, y por su poca importancia no será cubierto aquí.

El Microsoft Explorer soporta el JavaScript, sólo que cambiandole el nombre. La versión 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
pequeño resumen del jaleo de las versiones.

Versión Navegador Versión 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. También servirá de ayuda que estés familiarizado con la
sintaxis de C, C++ o Java, aunque en los próximos capítulos 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 código es una página Web completa con un botón que, al pulsarlo,
muestra el mensaje.
HolaMundo.html

Y aquí está nuestro ejemplo funcionando:

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la
página anterior:

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 más te guste. Yo he elegido la
cabecera para hacer más legible la parte HTML de la página. Si un navegador no acepta
JavaScript no leerá lo que hay entre medias de estos elementos. Así que si programamos algo
que sólo funcione con la versión 1.1 pondríamos para que los
navegadores antiguos pasen olímpicamente del código y no se hagan un lío.

Esta es nuestra primera función en JavaScript. Aunque JavaScript esté orientado a objetos no es
de ningún 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
descripción del lenguaje. En el código de la función vemos una llamada al método (que
pertenece al objeto ) 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
función: no los reconoce. Así que pondremos directamente "¡" arriesgándonos a que salga de
otra manera en ordenadores con un juego de caracteres distinto al del nuestro.
Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: . Es un
controlador de evento. Cuando el usuario pulsa el botón, el evento click se dispara y ejecuta el
código que tenga entre comillas el controlador de evento , en este caso la llamada a la
función , que tendremos que haber definido con anterioridad. Existen muchos más
eventos que iremos descubriendo según avancemos en el tutorial. En el cuarto cápitulo hay un
resumen de todos ellos.

En realidad, podríamos haber escrito lo siguiente:

y nos habríamos ahorrado el tener que escribir la función y todo lo que le acompaña, además de
conseguir que nos reconozca el caracter especial . Sin embargo me pareció conveniente hacerlo
de esa otra manera para mostrar más elementos del lenguaje en el ejemplo.

Elementos básicos
Lo primero que vamos a ver son los ladrillos básicos del lenguaje. Las cosas que no sirven para
nada solas pero que es imprescindible aprender antes que nada. El rollo teórico, vamos.

Comentarios
Lo primero (por ser lo más fácil) es indicar cómo 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 programación y así hacer que el código sea más comprensible.

En JavaScript existen dos tipos de comentarios. El primero nos permite que el resto de la línea
sea un comentario. Para ello se utilizan dos barras inclinadas:

Sin embargo, también permite un tipo de comentario que puede tener las líneas que queramos.
Estos comentario comienzan con y terminan por . Por ejemplo:

Literales
Se llama así a los valores que puede tomar una variable o una constante. Aparte de los distintos
tipos de números y valores booleanos:

También podemos especificar vectores:

Dentro de las cadenas podemos indicar varios caracteres especiales, con significados especiales.
Estos son los más usados:

Carácter Significado
\n Nueva línea
\t Tabulador
\' Comilla simple
\" Comilla doble
\\ Barra invertida
\999 El número ASCII (según la codificación Latin-1) del carácter en hexadecimal

De este modo, el siguiente literal:

se corresponde con la cadena:

Por último, también se pueden especificar objetos como literales, aunque no funcione en más
que en Netscape 4 y superiores:

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 sólo podrá
almacenar fechas. En Javascript los tipos de datos se asignan dinámicamente según asignamos
valores a las distintas variables y son los clásicos: 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 información. En
Javascript, deben comenzar por una letra o un subrayado (), pudiendo haber además dígitos
entre los demás caracteres. No es necesario declarar una variable, pero cuando se hace es
por medio de la palabra reservada . 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 función, y local si está definida dentro:

Se pueden declarar varias variables en una misma sentencia separándolos por comas:

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 . Por ejemplo, si escribimos

Es de esperar que la variable tenga tipo numérico.

Referencias
La parte sin duda más complicada de comprender y manejar en los lenguajes de programación
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
código para distintos navegadores de forma transparente. Por ejemplo, supongamos que
tenemos una función que sólo funciona en Internet Explorer 4, y tenemos una variable llamada
que hemos puesto previamente a (verdedero) sólo si el explorador del usuario es ese.

En este código, cuando llamemos finalmente a al final en realidad llamaremos a la

función a la que en la línea 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 :

El vector tendrá inicialmente 20 elementos (desde el 0 hasta el 19). Si queremos ampliarlo no

tenemos más que asignar un valor a un elemento que esté fuera de los límites del vector:

De hecho, podemos utilizar de índices cualquier expresión que deseemos utilizar. Ni siquiera
necesitamos especificar la longitud inicial del vector si no queremos:

Hacer una matriz bidimensional es más 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 mátemáticas o lógicas. Un literal o una variable son
expresiones, pero también lo son esos mismos literales y variables unidos entre sí mediante
operadores.

JavaScript dispone de muchos más operadores que la mayoría 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 código no lo entendamos ni nosotros.

Operadores aritméticos
JavaScript dispone de los operadores aritméticos clásicos y algún que otro más:

Descripción Símbolo Expresión de ejemplo Resultado del ejemplo

Multiplicación * 2*4 8
División / 5/2 2.5
Resto de una división entera % 5%2 1
Suma + 2+2 4
Resta - 7-2 5
Incremento ++ ++2 3
Decremento -- --2 1
Menos unario - -(2+4) -6

Los operadores de incremento y decremento merecen una explicación auxiliar. Se pueden

colocar tanto antes como después de la expresión que deseemos modificar pero sólo devuelven
el valor modificado si están delante. Me explico.

En este primer caso, valdrá 2 y 2 también. Sin embargo:

Ahora, sigue valiendo 2, pero es ahora 1. Es decir, estos operadores modifican siempre a su
operando, pero si se colocan detrás del mismo se ejecutan después de todas las demás
operaciones.

Operadores de comparación
Podemos usar los siguientes:

Descripción Símbolo Expresión 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 comprobación
estricta de tipo. Han sido incluidos en el estándar ECMAScript y lo soportan Netscape 4.06 y
superiores y Explorer 3 y superiores. Hay que indicar que versiones más antiguas de Netscape
tratan la igualdad normal como si fuera estricta.

Operadores lógicos
Estos operadores permiten realizar expresiones lógicas complejas:

Descripción Símbolo Expresión de ejemplo Resultado del ejemplo

Negación ! !(2 = 2) Falso
Y && (2 = 2) && (2 >= 0) Verdadero
Ó || (2 = 2) || (2 <> 2) Verdadero

Operadores de asignación
Normalmente los lenguajes tienen un único operador de asignación, que en JavaScript es el
símbolo . Pero en este lenguaje, dicho operador se puede combinar con operadores aritméticos
y lógicos 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
concatenación de cadenas, por ejemplo, se realiza con el símbolo . El operador condicional
tiene esta estructura:

Si la condición se cumple devuelve el primer valor y, en caso contrario, el segundo. El siguiente

ejemplo asignaría a la variable un 2:

Como podéis ver no resulta muy legible. Huid de este operador como de la peste. Evitad la
tentación. Procurad no usarlo. Yo he tenido que descifrar código escrito por mí un par de meses
antes que tenía esta clase de operadores, a veces incluso anidados. Todavía tengo escalofríos al
recordarlo.

Para tratar con objetos disponemos de tres operadores:

Expresión de
Descripción Símbolo Resultado del ejemplo
ejemplo
Crear un objeto new a = new Array() a es ahora un vector
Elimina el vector anteriormente
Borrar un objeto delete delete a
creado
Referencia al objeto
this
actual

se suele utilizar en el código de los métodos de un objeto para referirse a otros métodos o
a propiedades de su mismo objeto.

Estructuras de control
Ningún programa es una secuencia lineal de instrucciones. En todo lenguaje de programación
existen estructuras que nos permiten variar el orden de ejecución dependiendo de ciertas
condiciones. Estas estructuras se pueden clasificar en dos grandes grupos: bifurcaciones
condicionales y bucles.

Aparte de los dos tipos clásicos de estructuras de control, en Javascript disponemos de algunas
estructuras adicionales para facilitar el manejo de objetos. Dispone de algunas estructuras más
de las que explicaremos en esta página (el soporte de etiquetas), pero debido a que no son más
que un recuerdo de lenguajes desfasados y su utilidad resulta escasa he preferido no incluirlas.

Bifurcaciones condicionales
Una bifurcación condicional en una estructura que realiza una tarea u otra
dependiendo del resultado de evaluar una condición. La primera que vamos a estudiar es
la estructura . Esta estructura es la más sencilla y antigua (es posible que se utilizara
con los ábacos y todo...) de todas:

Hay que indicar que el es opcional..

La siguiente estructura bifurca según los distintos valores que pueda tomar una variable
específica. Es la sentencia :

Hay que indicar que no es compatible con estándar ECMA y no es soportado por el Explorer 3.

Bucles
Un bucle es una estructura que permite repetir una tarea un número de veces,
determinado por una condición. Para hacer bucles podemos utilizar las estructuras y
. Estos bucle iteran indefinidamente mientras se cumpla una condición. La diferencia
entre ellas es que la primera comprueba dicha condición antes de realizar cada iteración y la
segunda lo hace después:

En este caso solo veríamos aparecer un ventana diciendo que es un . ¿Qué por qué?
Veamos. El comprueba primero si es igual a 1 y, como no lo es, no ejecutaría el
código que tiene dentro del bucle. En cambio, el primero ejecuta el código y luego,
viendo que la condición es falsa, saldría. Hay que resaltar que no pertenece al
estándar y no es soportado por el Explorer 3.

En Javascript, el bucle es singularmente potente. No se reduce a casos numéricos como en

muchos otros lenguajes sino que nos da mucha más libertad. Tiene la siguiente estructura:

El código contenido en el bucle se ejecutará mientras la se cumpla. Antes de

comenzar la primera iteración del bucle se ejecutará la sentencia y en cada iteración lo
hará . La manera más habitual de usar estas posibilidades es, claro está, la
numérica:

Por último, hay que decir que la ejecución de la sentencia dentro de cualquier parte del
bucle provoca la salida inmediata del mismo. Aunque a veces no hay más remedio que utilizarlo,
es mejor evitarlo para mejorar la legibilidad y elegancia del código (toma ya, la frase que me ha
salido).

Estructuras de manejo de objetos

JavaScript dispone de dos bien distintas. La primera es el bucle , que nos permitirá
recorrer todas las propiedades de un objeto. Se usa principalmente con vectores. Por ejemplo:

Este ejemplo sumaría dos a todos los elementos del vector. Sin embargo, conviene tener
cuidado ya que, de los navegadores de Microsoft, sólo la versión 5 lo soporta.
La otra estructura es , 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 podemos hacer:

Que resulta más cómodo (tenemos que teclar menos) y legible.

Funciones
Incluso los programas más sencillos tienen la necesidad de dividirse. Las funciones son los
únicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente estructura:

Los parámetros se pasan por valor. Eso significa que si cambiamos el valor de un argumento
dentro de una función, este cambio no se verá fuera:

En este ejemplo, seguirá valiendo 1 después de llamar a la función. Esto tiene una excepción,
que son las referencias. Cuando se cambia el valor de una referencia dentro de una función
también se cambia fuera.

Para devolver un valor de retorno desde la función se utiliza la palabra reservada :

En este ejemplo, valdrá 4.

Se pueden definir funciones con un número variable de argumentos. Para poder luego acceder a
dichos parámetros dentro de la función se utiliza el vector . Este ejemplo sumaría el
valor de todos los parámetros:

Funciones predefinidas
JavaScript dispone de las siguientes funciones predefinidas:
eval(cadena)
Ejecuta la expresión o sentencia contenida en la cadena que recibe como parámetro.

Este ejemplo nos muestra una ventana con un saludo.

parseInt(cadena [, base])
 Convierte en un número entero la cadena que recibe, asumiendo que está en la base
indicada. Si este parámetro falta, se asume que está en base 10. Si fracasa en la
conversión devolverá el valor .

Devuelve el número 3453.

parseFloat(cadena)
Convierte en un número real la cadena que recibe, devolviendo si fracasa en el
intento.

Este ejemplo devuelve ya que la cadena no contiene un número real válido.

isNaN(valor)
Devuelve sólo si el argumento es .
isFinite(numero)
Devuelve si el número es un número válido y no es infinito.
Number(referencia)
String(referencia)
Convierten a número (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 métodos). A partir de esta
estructura se ha creado un nuevo modelo de programación (la programación 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 programación orientada a objetos normal y corriente separa los mismos en dos:
clases e instancias. Las primeras son entes más 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 distinción se difumina. Sólo tenemos objetos.

Propiedades y métodos
Por si acaso ya lo hemos olvidado, recordemos ahora cómo se accede a los métodos y
propiedades de un objeto:

Bueno, vale, este apartado es un poco tonto. Pero no os preocupéis que los dos siguientes
tienen mucho más contenido.

Creación mediante constructores

Vamos a aprender a hacer nuestros propios objetos. Ya habíamos visto como hacerlo por medio
de literales, pero dado que es una solución bastante propietaria y poco flexible, estudiaremos el
método normal de lograrlo mediante constructores.

Un constructor es una función que inicializa un objeto. Cuando creamos un objeto nuevo
del tipo que sea, lo que hacemos en realidad es llamar al constructor pasándole argumentos. Por
ejemplo, si o nuevo