c



es un lenguaje de scripting orientado a objetos, utilizado para acceder a objetos en aplicaciones.
Principalmente, se utiliza integrado en un navegador web permitiendo el desarrollo de interfaces de
usuario mejoradas y páginas web dinámicas. JavaScript es un dialecto de ECMAScript y se
caracteriza por ser un lenguaje basado en prototipos, con entrada dinámica y con funciones de
primera clase. JavaScript ha tenido influencia de múltiples lenguajes y se diseñó con una sintaxis
similar al lenguaje de programación Java, aunque más fácil de utilizar para personas que no programan




c
c

c
JavaScript comparte muchos elementos con otros lenguajes de alto nivel. Hay que tener en cuenta
que este lenguaje es muy semejante a otros como C, Java o PHP, tanto en su formato como en su
sintaxis, aunque por supuesto tiene sus propias características definitorias.

JavaScript es un lenguaje que diferencia entre mayúsculas y minúsculas, por lo que si escribimos
alguna expresión en minúsculas, deberemos mantener esa expresión en minúsculas a lo largo de todo
el programa. Si escribimos esa misma expresión en mayúsculas, será una expresión diferente a la
primera. Esto es así en la mayoría de los lenguajes de este tipo, como PHP.

Otra característica es que podemos encerrar las expresiones que escribamos con una serie de
caracteres especiales. Estos caracteres se denominan operadores y sirven tanto para encerrar
expresiones como para realizar trabajos con ellas, como operaciones matemáticas o de texto. Los
operadores que permiten encerrar expresiones deben cerrarse siempre. ¶(·, ¶{· y ¶[' deben cerrarse con
sus correspondientes ')', '}' y ']¶, respectivamente.

Como JavaScript es un lenguaje de formato libre, podemos escribir las líneas de código de la forma
que consideremos mejor, aunque por supuesto debemos escribir siempre de la forma correcta. Por
ejemplo, podemos escribir las líneas con un número variable de espacios:

variable = "hola";

variable="hola";

variable ="hola";

variable= "hola";
Esto significa que podemos añadir tabuladores al inicio de la línea para justificar los párrafos de
código. También podemos romper las líneas de texto si son demasiado largas:

document.write("Muy \

Buenas");

Pero no podemos hacer esto:

document.write \

("Muy buenas");

Sólo podemos romper cadenas de texto, no instrucciones.

En ocasiones tenemos que escribir algunos caracteres especiales llamados ´de escapeµ, porque en
ocasiones hay que utilizar algunos caracteres no imprimibles, como por ejemplo:

document.write (µTú \& yo somos \µprogramadores\µ.µ);

Podemos ver que al introducir comillas dobles dentro de la cadena de caracteres, debemos añadir la
barra invertida ¶\· para escapar las propias comillas, aunque esta misma expresión se podía haber
escrito así:

document.write ("Tú \& yo somos 'programadores'.");

Otro aspecto importante de JavaScript es la necesidad o no de utilizar el punto y coma ¶;· al final de
las instrucciones. Este operador solo sirve para delimitar las instrucciones, pero aunque su uso es
obligatorio en la mayoría de los lenguajes, es opcional en JavaScript. Si usamos este operador,
podemos incluir varias sentencias en la misma linea de código, y si no lo usamos, sólo podemos escribir
una sentencia cada vez. De todas formas, aconsejamos usar el punto y coma porque en otros lenguajes
como PHP o Java, este operador es obligatorio.

Ò


c


c 


c
c c

c
c 

c 
c 
c



c c
, un espacio donde podemos
guardar cualquier tipo de información que necesitemos para realizar las acciones de nuestros

programas. Por ejemplo, si nuestro programa realiza sumas, será muy normal que guardemos en
variables los distintos sumandos que participan en la operación y el resultado de la suma. El efecto
sería algo parecido a esto:

sumando1=23

sumando2=33
suma=sumando1+sumando2

En este ejemplo tenemos tres variables, sumando1, sumando2 y suma, donde guardamos el resultado.

Vemos que su uso para nosotros es como si tuviésemos un apartado donde guardar un dato y que se
pueden acceder a ellos con sólo poner su nombre.

Los nombres de las variables han de construirse con caracteres alfanuméricos y el carácter

subrayado (_). Aparte de esta, hay una serie de reglas adicionales para construir nombres para

variables. La más importante es que tienen que comenzar por un carácter alfabético o el subrayado.

No podemos utilizar caracteres raros como el signo +, un espacio o un $. Nombres admitidos para las
variables podrían ser.

Edad

paisDeNacimiento

_nombre

También hay que evitar utilizar nombres reservados como variables, por ejemplo no podremos llamar

a nuestra variable palabras como return o for, que ya veremos que son utilizadas para estructuras del

propio lenguaje. Veamos ahora algunos nombres de variables que no está permitido utilizar .

12meses

tunombre

return
pe%pe




c
c




Declarar variables consiste en definir y de paso informar al sistema de que vas a utilizar una variable.
Es una costumbre habitual en los lenguajes de programación el definir las variables que se van a usar

en los programas y para ello, se siguen unas reglas estrictas. Pero javascript se salta muchas reglas
por ser un lenguaje un tanto libre a la hora de programar y uno de los casos en los que otorga un poco
de libertad es a la hora de declarar las variables, ya que no estamos obligados a hacerlo, al contrario
de lo que pasa en la mayoría de los lenguajes de programación.

De todos modos, es aconsejable declarar las variables, además de una buena costumbre y para ello

Javascript cuenta con la palabra var. Como es lógico, se utiliza esa palabra para definir la variable
antes de utilizarla.

var operando1

var operando2

También se puede asignar un valor a la variable cuando se está declarando

var operando1 = 23

var operando2 = 33

También se permite declarar varias variables en la misma línea, siempre que se separen por comas.

var operando1,operando2

c
c
c


c
c
Los lenguajes tradicionales (como el C) usan sólo variables que hayan sido previamente declaradas
para: c

1.c optimizar el uso de la memoria;

2.c aumentar la fiabilidad.

JavaScript, sin embargo utiliza un c

c c 
 por lo que no existe una sección de
declaración de variables ni es tampoco necesario declararlas:



c
c

c
cc
c


c
c 
c


. Por ejemplo Prueba="texto" y Prueba=59 son dos declaraciones totalmente
válidas, pero en el primer caso Prueba es considerada objeto string, mientras que en el segundo la
misma es considerada como valor numérico.

Si se concatenan valores diversos, prevalece el valor string, por lo que un número concatenado con una
cadena produce una cadena. Ahora bien, si la cadena es un número, el resultado será un número (p.ej.,
timval=365+"10" dará; 375).

A veces, sin embargo, este control no es preciso (por ejemplo, cuando se multiplica una variable
cadena por un número) y ya que no existe un compilador para controlar los errores, el script no
genera los resultados deseados. En este caso, más que declarar basta convertir el resultado con una
función de conversión.
Para convertir los valores basta utilizar:

1.c las comillas, para convertir un valor numérico en cadena o la suma de un número con un
espacio;
2.c método  (desde Javascript 1.2) para convertir en cadena o con el constructor 
(p.ej., micadena=String(num));
3.c las funciones eval(), parseInt() y parseFloat() para convertir un valor cadena en numérico;
4.c los valores lógicos se obtienen de valores numéricos o cadena igualándolos a true o false.

Las funciones eval(), parseInt() y parseFloat()funcionan como sigue:

c 

 busca un entero al inicio de una cadena, descartando las cadenas, y lo visualiza
ignorando las partes decimales y la eventual coma (p.ej., parseInt("39 grados")=39). Un
segundo parámetor, facultativo, es la base numérica (p.ej., parseInt(text,16) para buscar
números hexadecimales);

c 


 opera de la misma manera, pero conserva la eventual coma presente y el signo.

La función

 es bastante compleja y busca cualquier expresión Javascript válida para transformarla
en número. En Netscape 2.0, sin ambargo, provoca caídas imprevistas:

x=10; y=20; z=30; eval("x+y+z+900")=960

De todas formas, en cualquier momento, se puede verificar el tipo de la variable mediante el operador

 (p.ej., typeof 69 restituye "number"), el cual ha sido introducido con con Javascript 1.1. Los
valores restituidos son: string, boolean, number, function.

ccc
c
c

En nuestros scripts vamos a manejar variables diversas clases de información, como textos o

números. Cada una de estas clases de información son los tipos de datos. Javascipt distingue entre

tres tipos de datos y todas las informaciones que se puedan guardar en variables van a estar

encajadas en uno de estos tipos de datos. Veamos detenidamente cuáles son estos tres tipos de

datos.

c
c
c 

En este lenguaje sólo existe un tipo de datos numérico, al contrario que ocurre en la mayoría de los

lenguajes más conocidos. Todos los números son por tanto del tipo numérico, independientemente de
la precisión que tengan o si son números reales o enteros. Los números enteros son números que no

tienen coma, como 3 o 339. Los números reales son números fraccionarios, como 2.69 o 0.25, que
también se pueden escribir en notación científica, por ejemplo 2.482e12.

Con JavaScript también podemos escribir números en otras bases, como la hexadecimal. Las bases
son sistemas de numeración que utilizan más o menos dígitos para escribir los números. Existen tres

bases con las que podemos trabajar


c Base 10, es el sistema que utilizamos habitualmente, el sistema decimal. Cualquier número,
por defecto, se entiende que está escrito en base 10.

c Base 8, también llamado sistema octal, que utiliza dígitos del 0 al 7. Para escribir un número

en octal basta con escribir ese número precedido de un 0, por ejemplo 045.

c Base 16 o sistema hexadecimal, es el sistema de numeración que utiliza 16 dígitos, los

comprendidos entre el 0 y el 9 y las letras de la A a la F, para los dígitos que faltan.

Para escribir un número en hexadecimal debemos escribirlo precedido de un cero y una equis, por

ejemplo 0x3EF.

c



El tipo bolean, boolean en inglés, sirve para guardar un si o un no o dicho de otro modo, un verdadero

o un falso. Se utiliza para realizar operaciones lógicas, generalmente para realizar acciones si el
contenido de una variable es verdadero o falso.

Si una variable es verdadero entonces Ejecuto unas instrucciones Si no Ejecuto otras

Los dos valores que pueden tener las variables boleanas son true o false.

miBoleana = true

miBoleana = false

c
c
c


c
c





El último tipo de datos es el que sirve para guardar un texto. Javascript sólo tiene un tipo de datos

para guardar texto y en el se pueden introducir cualquier número de caracteres. Un texto puede

estar compuesto de números, letras y cualquier otro tipo de caracteres y signos. Los textos se

escriben entre comillas, dobles o simples.

miTexto = "Pepe se va a pescar"

miTexto = '23%%$ Letras & *--*'

Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado como una cadena de

caracteres independientemente de lo que coloquemos en el interior de las comillas. Por ejemplo, en

una variable de texto podemos guardar números y en ese caso tenemos que tener en cuenta que las

variables de tipo texto y las numéricas no son la misma cosa y mientras que las de numéricas nos
sirven para hacer cálculos matemáticos las de texto no.

Caracteres de escape en cadenas de texto.

Hay una serie de caracteres especiales que sirven para expresar en una cadena de texto
determinados controles como puede ser un salto de línea o un tabulador. Estos son los caracteres de

escape y se escriben con una notación especial que comienza por una contra barra (una barra inclinada
al revés de la normal '\') y luego se coloca el código del carácter a mostrar.

Un carácter muy común es el salto de línea, que se consigue escribiendo \n. Otro carácter muy

habitual es colocar unas comillas, pues si colocamos unas comillas sin su carácter especial nos

cerrarían las comillas que colocamos para iniciar la cadena de caracteres. Las comillas las tenemos que

introducir entonces con \" o \' (comillas dobles o simples). Existen otros caracteres de escape, que

veremos en la tabla de abajo más resumidos, aunque también hay que destacar como carácter
habitual el que se utiliza para escribir una contrabarra, para no confundirla con el inicio de un

carácter de escape, que es la doble contrabarra \\.

Tabla con todos los caracteres de escape

Salto de línea: \n

Comilla simple: \'

Comilla doble: \"

Tabulador: \t

Retorno de carro: \r

Avance de página: \f

Retroceder espacio: \b

Contrabarra: \\

O

cc


c
O

c

Las expresiones son el resultado de operaciones matemá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.

Una expresión está compuesta de nombres de variables y de constantes unidas entre sí por
operadores.

El resultado de una expresión puede ser - según los casos - un número, una cadena de caracteres, un
boolean, etc.

Las partes de una expresión situadas entre paréntesis son elaboradas antes que el resto de la
expresión ; tal como ocurre en una expresión algebraica. Estos paréntesis no deben ser confundidos
con los que encierran los parámetros de una función o procedimiento ya que en ese caso estarán
precedidos por el nombre de la función o procedimiento.
O
c!c
c

255 El valor de la expresión es 255

var2 El valor de la expresión es igual al valor de la variable var2

var2+255 El valor de la expresión es igual al valor de la variable var2 más 255

fonc1(par1,par2) El valor de la expresión es igual al valor proporcionado por la función fonc1,

con los parámetros par1 y par2

var3- El valor de la expresión es igual al valor de la variable var3 a la que se restará

fonc1(par1,par2) el valor proporcionado por la función fonc1 con los parámetros par1 y par2

¢


c

Un operador indica una operación o manipulación a efectuar entre variables.

"


!c
c

exp1, exp2,...

Expresiones de cualquier tipo.

nb1, nb2,...

Expresiones numéricas.

vnb1, vnb2,...

Variables numéricas.

chain1, chain2,...

Expresiones de cadenas de caracteres.

bool1, bool2,...

Expresiones buleanas.
 ¢
c #
  c

nb1$nb2 Suma nb1 y nb2

nb1%nb2 Resta nb2 de nb1

%nb1 Negación nb1

nb1&nb2 Multiplicación nb1 por nb2

nb1'nb2 División nb1 entre nb2

¢
 
c

c nb1(nb2 Resto de la división nb1 entre nb2 (módulo)
El resultado es un
número.
vnb1 es incrementada en una unidad, antes de
$$vnb1
ser usada en la expresión

vnb1 es disminuida en 1, antes de ser usada en

%%vnb1
la expresión

vnb1 es incrementada en 1, después de haber

vnb1$$
sido utilizada en la expresión

vnb1 es disminuida en 1, después de haber

vnb1%%
sido utilizada en la expresión

¢
c #
 c
¢
 
c

c
c chain1$chain2 Concatenación chain1 y chain2


c
El resultado es una chain1$nb1 Concatenación chain1 y nb1
cadena de
caracteres.
nb1$chain1 Concatenación nb1 y chain1
 ¢
c #
 c

exp1 )) exp2 true si exp1=exp2, false si no

exp1 *) exp2 true si exp1 distinto de exp2, false si no

nb1 + nb2 true si nb1 menor que nb2, false si no

nb1 , nb2 true si nb1 mayor que nb2, false si no

¢
 
c

c nb1 +) nb2 true si nb1 menor o igual a nb2, false si no

El resultado es un
buleano. nb1 ,) nb2 true si nb1 mayor o igual a nb2, false si no

true si bool1 es verdadero  si bool2 es

bool1 -- bool2 verdadero  si los dos son verdaderos, false
si no

true si bool1  bool2 son verdaderos, false si

bool1 bool2
no

* bool1 true si bool1 es false, false si es true

O

c 
c

Una expresión condicional es una expresión donde el resultado es una decisión entre dos expresiones,
esta decisión estará determinada por el valor verdadero o falso de una condición (expresión buleana).

Estructuras de control de flujo

Los bucles y las bifurcaciones condicionales son los pilares de la programación. Lo esencial del trabajo
de un ordenador consiste en realizar bucles que repiten una gran número de veces - millones y
millones de veces - las mismas operaciones.

Una bifurcación condicional es una estructura que realiza una tarea u otra dependiendo del resultado
de evaluar una   . La estructura condicional decide la veracidad o falsedad (
coc
) de
la condición planteada.

Los bucles pueden ser simplemente estructuras que se repiten un número determinado de veces o
también estructuras condicionales, realizando, por ejemplo, una serie de operaciones hasta que se
cumpla una condición.
c

.
c 
c/000c

1c


cc
c!c

c condición  instrucción1 2 3


instrucción2 2 4

c Si la condición se cumple (

), ejecutar instrucción1.

c En caso contrario, si está presente


, ejecutar instrucción2.

c En todos los casos la ejecución se reanuda en la instrucción siguiente.

O
c 
c/561c


cc
!c

56c expresión c

7
3 

variable ! 3 instrucción 4000 4000c

3

c! 3 instrucción 4000 4c

La estructura «56» bifurca según los distintos valores que pueda tomar una variable específica.

c Si el valor variable coincide con una expresión la ejecución continúa en la instrucción que sigue a
la expresión coincidente.

c Si no hay coincidencia la ejecución del programa prosigue en la instrucción siguiente a


.

c Si el programador ha omitido el caso


 el sistema saldrá de la estructura con un valor


cuando no exista ninguna coincidencia.

9c.
c
c

c

O
c
c
c/1c


cc
!c

cinicio2 condición2 incremento código (una o varias instrucciones).

c La instrucción inicio se ejecuta sólo la primera vez; en los siguientes ciclos del bucle será
incremento la que se ejecutará hasta lograr la condición.

c Verificar condición. Salir del bucle si se cumple. Si no se cumple:

uc Ejecutar código.
uc Ejecutar incremento.
uc Volver a 'Verificar condición'.
O
c
c
c/000c1c


cc
!c

c nomVariable  nomObjeto código

A cada nomVariable del objeto o matriz nomObjeto se le aplica el código.

Probar ejemplo

O
c
c
c/56
1c


cc
!c

56
c condición  código

c Verificar condición. Si se cumple salir del bucle, en caso contrario:

uc Ejecutar código.
uc Volver a 'Verificar condición'.

O
c
c
c/ 000c56
1c


cc
!c

 código 56
c condición 

c Ejecutar código mientras

c no se cumpla la condición.

Etiqueta Noscript
Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten
bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript
porque creen que así navegan de forma más segura.

En estos casos, es habitual que si la página web requiere JavaScript para su correcto funcionamiento,
se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar
completamente de la página. El siguiente ejemplo muestra una página web basada en JavaScript
cuando se accede con JavaScript activado y cuando se accede con JavaScript completamente
desactivado.
 Imagen de www.Netvibes.com con JavaScript activado

Imagen de www.Netvibes.com con JavaScript desactivado

El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su
navegador no puede ejecutar JavaScript. El siguiente código muestra un ejemplo del uso de la
etiqueta <noscript>:

<head> ... </head>

<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>

La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body> (normalmente se incluye al

principio de <body>). El mensaje que muestra <noscript> puede incluir cualquier elemento o etiqueta
XHTML.

c
 
c

c

El lenguaje

c 


c 
c 
c c 


c
c 
c
c

por estar basado en él.

También es muy parecida a la del lenguaje C, de modo que si el lector conoce alguno de estos dos
lenguajes se podrá manejar con facilidad con el código. De todos modos, en los siguientes capítulos

vamos a describir toda la sintaxis con detenimiento, por lo que los novatos no tendrán ningún
problema con ella.





Un comentario es una parte de código que no es interpretada por el navegador y cuya utilidad radica
en facilitar la lectura al programador. El programador, a medida que desarrolla el script, va dejando

frases o palabras sueltas, llamadas comentarios, que le ayudan a él o a cualquier otro a leer mas
fácilmente el script a la hora de modificarlo o depurarlo.

Ya se vio anteriormente algún comentario Javascript, pero ahora vamos a contarlos de nuevo. Existen

dos tipos de comentarios en el lenguaje. Uno de ellos, la doble barra, sirve para comentar una línea de

código. El otro comentario lo podemos utilizar para comentar varias líneas y se indica con los signos /*
para empezar el comentario y */ para terminarlo. Veamos unos ejemplos.

<SCRIPT>
//Este es un comentario de una línea

/*Este comentario se puede extender

por varias líneas.

Las que quieras*/

</SCRIPT>

:
;
cc;


En javascript se han de respetar las mayúsculas y las minúsculas. Si nos equivocamos al utilizarlas el

navegador responderá con un mensaje de error de sintaxis. Por convención los nombres de las cosas
se escriben en minúsculas, salvo que se utilice un nombre con más de una palabra, pues en ese caso se

escribirán con mayúsculas las iniciales de las palabras siguientes a la primera. También se puede

utilizar mayúsculas en las iniciales de las primeras palabras en algunos casos, como los nombres de las

clases, aunque ya veremos más adelante cuáles son estos casos y qué son las clases.




c
c


Las distintas instrucciones que contienen nuestros scripts se han de separar convenientemente para
que el navegador no indique los correspondientes errores de sintaxis. Javascript tiene dos maneras

de separar instrucciones. La primera es a través del carácter punto y coma (;) y la segunda es a
través de un salto de línea.
Por esta razón Las sentencias Javascript no necesitan acabar en punto y coma a no ser que

coloquemos dos instrucciones en la misma línea.

ëc
c
c


c


c
c

cc
c
c


c
c
c 
c

c
c 
. Por lo general, cuando
declaramos una variable hacemos que esté disponible en el lugar donde se ha declarado, esto ocurre

en todos los lenguajes de programación y como javascript se define dentro de una página web, 
c



c <
c


c
c 
c 
c

c


c
c
c

. De este modo, no

podremos acceder a variables que hayan sido definidas en otra página. Este es el ámbito más habitual

de una variable y le llamaremos a este tipo de variables globales a la página, aunque no será el único,

ya que también podremos declarar variables en lugares más acotados.

Ò


c



Como hemos dicho, las variables globales son las que están declaradas en el ámbito más amplio

posible, que en Javascript es una página web. Para declarar una variable global a la página
simplemente lo haremos en un script, con la palabra var.

<SCRIPT>
var variableGlobal

</SCRIPT>

Las variables globales son accesibles desde cualquier lugar de la página, es decir, desde el script

donde se han declarado y todos los demás scripts de la página, incluidos los manejadores de eventos,
como el onclick, que ya vimos que se podía incluir dentro de determinadas etiquetas HTML.

Ò


c



También podremos declarar variables en lugares más acotados, como por ejemplo una función. A estas
variables les llamaremos locales. Cuando se declaren variables locales sólo podremos acceder a ellas

dentro del lugar donde se ha declarado, es decir, si la habíamos declarado en una función solo
podremos acceder a ella cuando estemos en esa función.

Las variables pueden ser locales a una función, pero también pueden ser locales a otros ámbitos, como

por ejemplo un bucle. En general, son ámbitos locales cualquier lugar acotado por llaves.
<SCRIPT>

function miFuncion (){

var variableLocal

</SCRIPT>

En el script anterior hemos declarado una variable dentro de una función, por lo que esa variable sólo
tendrá validez dentro de la función. Se pueden ver cómo se utilizan las llaves para acotar el lugar

donde está definida esa función o su ámbito.

No hay problema en declarar una variable local con el mismo nombre que una global, en este caso la

variable global será visible desde toda la página, excepto en el ámbito donde está declarada la

variable local ya que en este sitio ese nombre de variable está ocupado por la local y es ella quien

tiene validez. En resumen, la variable que tendrá validez en cualquier sitio de la página es la global.

Menos en el ámbito donde está declarada la variable local, que será ella quien tenga validez.

<SCRIPT>

var numero = 2

function miFuncion (){

var numero = 19

document.write(numero) //imprime 19

}
document.write(numero) //imprime 2

</SCRIPT>

Sentencias break y continue

La estructura de control for es muy sencilla de utilizar, pero tiene el inconveniente de que el número
de repeticiones que se realizan sólo se pueden controlar mediante las variables definidas en la zona
de actualización del bucle.

Las sentencias break y continue permiten manipular el comportamiento normal de los bucles for para
detener el bucle o para saltarse algunas repeticiones. Concretamente, la sentencia break permite
terminar de forma abrupta un bucle y la sentencia continue permite saltarse algunas repeticiones del
bucle.
El siguiente ejemplo muestra el uso de la sentencia break:

var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";

var letras = cadena.split("");
var resultado = "";

for(i in letras) {
if(letras[i] == 'a') {
break;
}
else {
resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lug"

Si el programa llega a una instrucción de tipo break;, sale inmediatamente del bucle y continúa
ejecutando el resto de instrucciones que se encuentran fuera del bucle for. En el ejemplo anterior,
se recorren todas las letras de una cadena de texto y cuando se encuentra con la primera letra "a",
se detiene la ejecución del bucle for.

La utilidad de break es terminar la ejecución del bucle cuando una variable toma un determinado valor
o cuando se cumple alguna condición.

En ocasiones, lo que se desea es saltarse alguna repetición del bucle cuando se dan algunas
condiciones. Siguiendo con el ejemplo anterior, ahora se desea que el texto de salida elimine todas las
letras "a" de la cadena de texto original:

var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";

var letras = cadena.split("");
var resultado = "";

for(i in letras) {
if(letras[i] == 'a') {
continue;
}
else {
resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."

En este caso, cuando se encuentra una letra "a" no se termina el bucle, sino que no se ejecutan las
instrucciones de esa repetición y se pasa directamente a la siguiente repetición del bucle for.

La utilidad de continue es que permite utilizar el bucle for para filtrar los resultados en función de
algunas condiciones o cuando el valor de alguna variable coincide con un valor determinado.
¢=
c
c>


c

Los navegadores ofrecen al programador multitud de características en forma de un modelo

jerárquico. Esta jerarquía es lo que se llama 
c
c =
c
c 


cy mediante ella se
pueden controlar características propias del navegador desde qué mensaje mostrar en la barra de
estado hasta la creación de nuevas páginas con el aspecto deseado.

La jerarquía de dichos objetos toma la siguiente forma:

Para los más iniciados en la programación orientada a objetos, conviene aclarar que en esta jerarquía,
contra lo que pueda parecer, no existe herencia alguna. Los objetos se relacionan por composición, 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 jerarquía 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.

Oc=
c? 5c

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 sesión.

Aún cuando el objeto se llame Window, disponemos siempre de una referencia a él llamada window
(recordad que Javascript distingue entre mayúsculas y minúsculas). Será con esa referencia con la
que trabajemos. Este hecho será común a todos los objetos del modelo de objetos.

Por último, indicar que en Javascript, se supone que todas las propiedades y métodos que llamamos sin
utilizar ninguna referencia, en realidad se hacen utilizando esa referencia window. Así, por ejemplo,
cuando ejecutamos el método

 en realidad lo que estamos haciendo es ejecutar el método
5 50

.

c Veamos los    más usados del objeto Window.

3@
)435 504
#9Ac 
Ac



c
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 método: el navegador
automáticamente sabrá que pertenece al objeto window. El parámetro URL es una cadena que
contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con
una página en blanco. El nombre será el que queramos que se utilize como parámetro de un TARGET y
las propiedades son una lista separada por comas de algunos de los siguientes elementos:

c 
3)
4c

c 
3)
4c

c 

3)
4c

c 
3)
4c

c 

3)
4c

c 
3)
4c

c 
B

3)
4c

c 5 6)
c

c 6
6)


Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript.
Se llama a la función AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer
ejemplo. Esta función crea la nueva ventana MiVentana y escribe en ella por medio del objeto
Document (que se estudiará más adelante) todo el código HTML de la página.


c

Cierra la ventana actual. A no ser que hayamos acabado de abrirla nosotros mostrará al usuario una
ventana de confirmación para que decida él si quiere o no cerrarla. Esto se hace por motivos de
seguridad, ya que sería demasiado fácil hacer un script de esos mal intencionados que nos cerrase la
ventana del navegador.





c

Muestra una ventana de diálogo con el mensaje especificado.




c

Muestra una ventana de diálogo con el mensaje especificado y dos botones. Si el usuario pulsa OK, el
método devuelve true. Si, en cambio, pulsa Cancelar, devolverá false.




A
CC

c

Muestra una ventana de diálogo con el mensaje especificado y un campo de texto en el que el usuario
pueda teclear, cuyo valor inicial será igual a valor_por_defecto. Si el usuario pulsa OK, el método
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
condición para ver qué ha hecho el usuario.

Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado el botón de Aceptar:
3
 )4

DDA
c

Llama a función cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar
cualquier rutina que deba ejecutarse a cierta velocidad.




 c

Detiene el proceso anterior.

Ac

Desliza el documento contenido en la ventana hasta la posición especificada por las coordenadas x e y
que indican el grado de desplazamiento horizontal y vertical en píxels, respectivamente. Ambos
argumentos están referidos a la esquina superior izquierda de la ventana actual.

c Ahora veamos las 


 del objeto Window:




Sirve para averiguar o asignar el nombre de una ventana determinada.



Propiedad booleana que indica si la ventana está o no cerrada.


6

Informa sobre la cantidad de ventanas hijas que contiene la ventana actual (frames).




Devuelve una referencia a la propia ventana. Suele usarse para diferenciar una ventana de un
formulario si tienen el mismo nombre.





Devuelve una referencia a la ventana que contiene a la ventana actual.



Devuelve una referencia a la ventana de orden superior del navegador, es decir, a la que contiene
todas las demás ventanas.



Define la cadena de caracteres que saldrá en la barra de estado en un momento dado.





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.



34

Uno de los problemas más frecuentes a los que se enfrenta un programador de Javascript es el
manejo de marcos. Es decir, ¿cómo accedo yo al código o a objetos como Window o Document de
otros marcos? JS propone una manera bastante sencilla de hacerlo.

Podríamos acceder a su objeto Window por medio de la referencia 5 0


3D
D4.

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 comprobación podemos crear fácilmente (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 algún usuario pretende acceder a un marco específico, etc..

Oc
c>

c

Este objeto permite obtener diversas informaciones sobre el navegador donde se está ejecutando el
código JS. Se suele usar para averiguar el nombre y la versión del navegador que ejecuta nuestro
código, de forma que se puedan tomar decisiones sobre qué tipo de código ejecutar o qué tipo de
páginas mostrar.

c Algunas de sus 


, de sólo lectura, son:

>


Cadena que contiene el nombre del cliente.

Ò


Cadena que contiene información sobre la versión del cliente.

 


Informa sobre el tipo de procesador sobre el que se está ejecutando el sistema operativo.

c Y el    con el que cuenta es:
=

O



c
c

Oc
c

c

Como cabía esperarse, se puede acceder a este objeto por medio de la referencia screen. Nos
permitirá conocer la configuración de la pantalla del usuario. Al igual que en el anterior objeto, todos
sus atributos son de sólo lectura. Conviene indicar que este objeto sólo está disponible desde las
versiones 4.0 de los navegadores.

c á


.

6
6

Averigua la altura en píxels de la pantalla.

5 6

Averigua la anchura en píxels de la pantalla.


6

Indica el número de bits utilizados para proporcionar el color en la pantalla del sistema donde se
ejecuta el navegador. Por ejemplo, si vale 4 es que se permite la visualización de 16 colores al mismo
tiempo (24).

Oc
c
c

Este objeto representa el propio documento HTML que se está mostrando en la ventana del
navegador. Se accede a él por medio de la referencia 
 (aunque también sería válido
5 50 
). Su mayor importancia viene por el número de vectores que posee, que referencian
a objetos 

, co 9, los cuales permiten acceder a las imágenes, formularios y enlaces del
documento, respectivamente.

c Algunas 


 de este objeto son:


: 

Contiene la fecha y hora en que se modificó el documento por última vez y se suele usar en conjunción
con write para añadir al final del documento estas características.

 
Especifica el color de fondo del documento. El color deberá estar en el formato usado en HTML. Es
decir, puede ser "red" o "#FF0000", por ejemplo.

 

Especifica el color de para el texto del documento.

 Ac
9 Ac9 

Especifican el color de los hiperenlaces del documento: iniciales, activos o ya visitados.



Especifica el título del documento.

c :

 del objeto Document.

34

Vector que contiene los formularios del documento. El primero será el número 0, el segundo el 1, etc..
Se estudiará más detenidamente en el siguiente capítulo.



34

Vector que contiene las imágenes del documento. Se ordenan igual que en el anterior caso, aunque
también permiten ser accedidas con el nombre como índice. Es decir, a una imagen definida como
<IMG SRC=".." NAME="miImagen"> se puede acceder con document.images["miImagen"].

34

Vector que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no
se suele utilizar en el código Javascript. Su razón de ser es que, al ser los enlaces objetos, permiten
incluir código Javascript en ellos por medio de la pseudo-URL "javascript:codigo".

c :   del objeto Document.




Abre un nuevo documento para escribir. Un documento debe estar abierto para poder escribir en él.




Cierra el documento, impidiendo escribir de nuevo en él.

5



Escribe el código HTML indicado en cadena en nuestro documento HTML.

A la hora de escribir en un documento por medio de write 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 código que haya en él.

Oc
cEc

Se accede a este objeto por medio de la referencia 5 506 y contiene todas las direcciones
que se han visitado en la sesión actual. Aunque no permite acceder a ellas, dispone de varios   
para sustituir el documento actual por alguno que el usuario ya haya visitado:



Volver a la página anterior. Es muy sencillo de utilizar, sólo tienes que pulsar aquí, cuya etiqueta se ha
declarado como:

5 

Ir a la página siguiente.

 


Ir a donde se indique, siendo donde un número tal que F significa lo mismo que 5  y %F
es equivalente a .

Oc
c9c

Se accede a este objeto por medio de la referencia 5 50 y contiene información sobre la
dirección de la página actual en varias 

.

6


Permite el acceso a la dirección de la página actual. Si lo cambiamos cambiaremos de página.



Protocolo de la página actual. Habitualmente http.

6

Máquina donde se alberga la página actual.


6


Camino de la página actual.

6
6

Si hemos accedido a una página por medio de un ancla, contiene una almohadilla seguida de ese ancla.

Funciones en JavaScript
G c
c
c

A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden
concebir de forma independiente, y que son más sencillos de resolver que el problema entero.
Además, estos suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos
procesos se pueden agrupar en una función, definida para que no tengamos que repetir una y otra vez
ese código en nuestros scripts, sino que simplemente llamamos a la función y ella se encarga de hacer
todo lo que debe.

Así que podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo
proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por
ejemplo, en una página web puede haber una función para cambiar el color del fondo y desde cualquier
punto de la página podríamos llamarla para que nos cambie el color cuando lo deseemos.

Las funciones se utilizan constantemente, no sólo las que escribes tu, sino también las que ya están
definidas en el sistema, pues todos los lenguajes de programación tienen un montón de funciones para
realizar procesos habituales como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o
convertir variables de un tipo a otro. Ya hemos visto alguna función en nuestros sencillos ejemplos
anteriores cuando hacíamos un document.write() en realidad estabamos llamando a la función write()
asociada al documento de la página que escribe un texto en la página. En los capítulos de funciones
vamos primero a ver cómo realizar nuestras propias funciones y cómo llamarlas luego. A lo largo del
libro veremos muchas de las funciones definidas en Javascript que debemos utilizar para realizar
distintos tipos de acciones habituales.

c
c

c
c

Una función se debe definir con una sintaxis especial que vamos a conocer a continuación.

function nombrefuncion (){

Instrucciones de la función

...
}
Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el nombre
de la función, que como los nombres de variables puede tener números, letras y algún carácter
adicional como en guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la
función. Las llaves en el caso de las funciones no son opcionales, además es útil colocarlas siempre
como se ve en el ejemplo, para que se vea fácilmente la estructura de instrucciones que engloba la
función.

Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de

etiquetas <H1> para que quede más resaltado.

function escribirBienvenida(){

document.write("<H1>Hola a todos</H1>")

Simplemente escribe en la página un texto, es una función tan sencilla que el ejemplo no expresa
suficientemente el concepto de función, pero ya veremos otras más complejas. Las etiquetas H1 no se
escriben en la página, sino que son interpretadas como el significado de la misma, en este caso que
escribimos un encabezado de nivel 1. Como estamos escribiendo en una página web, al poner etiquetas
HTML se interpretan como lo que son.

c

c
c
c

Cuando se llaman a las funciones Para ejecutar una función la tenemos que llamar en cualquier parte
de la página, con eso conseguiremos que se ejecuten todas las instrucciones que tiene la función entre
las dos llaves. Para ejecutar la función utilizamos su nombre seguido de los paréntesis.

NombreDeLaFuncion()

DOM
El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página web que
está mostrando el navegador, así como otras características del proceso de navegación (como son el
historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador).
Si no se está familiarizado con la programación orientada a objetos, el concepto de objeto puede
resultar algo difuso. Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre
dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se
realiza mediante una interfaz bien definida que aisla al programador de la necesidad de conocer cómo
están implementadas internamente dichas funciones. De este modo, la programación orientada a
objetos resulta muy intuitiva, y más próxima al conocimiento humano.

Veamos un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de diálogo

utilizamos:

window.alert("¡Hola mundo!")

Si bien no conocemos como funciona internamente la función


, sabemos cómo invocarla. La
abstracción es tal que nos basta con saber que se trata de una función del objeto 5 5. A estas
funciones se las llama   , y a las variables 


.
 Modelos de Eventos
Crear páginas y aplicaciones web siempre ha sido mucho más complejo de lo que debería serlo debido
a las incompatibilidades entre navegadores. A pesar de que existen decenas de estándares para las
tecnologías empleadas, los navegadores no los soportan completamente o incluso los ignoran.

Las principales incompatibilidades se producen en el lenguaje XHTML, en el soporte de hojas de

estilos CSS y sobre todo, en la implementación de JavaScript. De todas ellas, la incompatibilidad más
importante se da precisamente en el modelo de eventos del navegador. Así, existen hasta tres
modelos diferentes para manejar los eventos dependiendo del navegador en el que se ejecute la
aplicación.

:
cc
c

c

Este modelo simple de eventos se introdujo para la versión 4 del estándar HTML y se considera parte
del nivel más básico de DOM. Aunque sus características son limitadas, es el único modelo que es
compatible en todos los navegadores y por tanto, el único que permite crear aplicaciones que
funcionan de la misma manera en todos los navegadores.

:
c
c

c

c

Las versiones más avanzadas del estándar DOM (DOM nivel 2) definen un modelo de eventos
completamente nuevo y mucho más poderoso que el original. Todos los navegadores modernos lo
incluyen, salvo Internet Explorer.

:
c
c

c
c

cO
c

Internet Explorer utiliza su propio modelo de eventos, que es similar pero incompatible con el modelo
estándar. Se utilizó por primera vez en Internet Explorer 4 y Microsoft decidió seguir utilizándolo
en el resto de versiones, a pesar de que la empresa había participado en la creación del estándar de
DOM que define el modelo de eventos estándar.

ToolTips
Los ToolTips son pequeños recuadros de información que aparecen al posicionar el ratón sobre un
elemento. Normalmente se utilizan para ofrecer información adicional sobre el elemento seleccionado
o para mostrar al usuario pequeños mensajes de ayuda. Los ToolTips son habituales en varios
elementos de los sistemas operativos:

Aspecto de un tooltip típico en el Sistema Operativo

Realizar un tooltip completo mediante JavaScript es una tarea muy compleja, sobre todo por la
dificultad de mostrar el mensaje correctamente en función de la posición del ratón.
>ncluir JavaScript en el mismo documento XHTML
El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del
documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se
recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiqueta
<head>):

<!DOCTYPE html PUBL>C "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>

<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la etiqueta
<script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso de
JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir
instrucciones específicas en un determinado documento HTML que completen las instrucciones y
funciones que se incluyen por defecto en todos los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es

necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript.


c
c

c

Un 
 dentro de una página web permite al usuario introducir datos los cuales son enviados a
un servidor para ser procesados. Los formularios web se parecen a los formularios de papel porque
los internautas llenan dichos formularios usando casillas de selección, botones de opcion, o campos de
texto. Por ejemplo, los formularios web pueden ser usados para introducir datos de envío o datos de
una tarjeta de crédito con el objetivo de solicitar un producto o bien ser utilizada para solicitar
datos (p. ej., al buscar en un Motor de búsqueda).

Además de servir como plantillas para nueva informacion, los formularios web también pueden ser
usados para consultar y mostrar información existente en forma similar a los formularios de
Combinación de correspondencia, incorporando las mismas ventajas. La separación del la estructura y
los datos subyacentes de un mensaje, permite a ambos variar i ndependientemente. El uso de
formularios webs para este proposito evita los problemas asociados con la creación explícita de
paginas webs separadas para cada registro en una base de datos.

Los formularios web estan definidos en lenguajes de programacion como HTML, Perl, Java o .NET.
Las implementaciones de estos lenguajes usualmente invocan automaticamente los idiomas de la
interfaz de usuario, tales como el diseño estructural, y tema, minimizando el tiempo, el costo y el
tiempo de programación.
 :
;c



c
La navegación de algunas páginas web se realiza mediante menús desplegables, que disponen de varios
niveles jerárquicos que se despliegan a medida que el usuario pasa el puntero del ratón por encima de
cada elemento. Aunque CSS permite realizar menús desplegables horizontales y verticales de
cualquier nivel de profundidad, los navegadores de la familia >nternet Explorer versión 6.0 y
anteriores no disponen del suficiente soporte de CSS como para crear este tipo de menús.

De esta forma, la única forma de crear un menú desplegable que funcione correctamente en cualquier
navegador consiste en utilizar JavaScript. A pesar de que realizar un menú desplegable sencillo con
JavaScript no es una tarea muy compleja, se va a utilizar un componente ya realizado que pertenece a
la librería de desarrollo web de Yahoo.

La Yahoo U> Library, conocida como YU>, y que se puede traducir como "Librería de componentes de
interfaz de usuario de Yahoo" es un conjunto de utilidades y controles escritos en JavaScript para el
desarrollo rápido y sencillo de aplicaciones web complejas.

H


c
c

c
Muchos sitios web utilizan galerías de imágenes para mostrar sus productos y servicios. Este tipo de
galerías muestran una serie de miniaturas de imágenes que se amplían al pinchar sobre cada imagen.
Hasta hace poco, la técnica más utilizada para construir una galería consistía en incluir las miniaturas
en la página y abrir cada imagen grande en una ventana emergente (o pop-up) o en una nueva página.

El uso de técnicas basadas en JavaScript ha supuesto una revolución en la creación de las galerías de
imágenes y ha permitido mejorar la experiencia de navegación del usuario. La técnica se conoce como
Lightbox y fue creada originalmente por Lokesh Dhakar. Lightbox es una técnica muy sencilla de
utilizar, funciona correctamente en todos los navegadores y permite mantener la semántica del
documento (no ensucia la página con código JavaScript).