3 JAVASCRIPT.

3.1 INTRODUCIÓN A JAVASCRIPT.

3.1.1 Un consejo antes de empezar.

Si no estás familiarizado con la programación, es muy probable que este capítulo te resulte
bastante duro. En ese caso, no te desesperes, eso es algo que hemos sufrido todos en
nuestros inicios como programadores. Te recomiendo que leas las cosas tantas veces como
sea necesario, en cada lectura, descubrirás cosas nuevas.

Es muy importante que pierdas un poquito de tiempo y pruebes todos lo ejemplos para que
puedas comprobar los resultados, y si además eres un poquito intrépido se te puede incluso
ocurrir realizar ligeras modificaciones, o incluso añadir cosas nuevas, sobre los mismos. Hay
un dicho muy popular entre los programadores que dice “a programar se aprende
programando”, así que ya sabes, manos a la obra.

3.1.2 ¿Qué es JavaScript?

En primer lugar hay que decir que JavaScript es un lenguaje de programación creado por
Netscape para facilitar la creación de páginas interactivas. Crear un documento HTML es crear
algo de carácter estático, la página se carga y termina el proceso. La página HTML cargada
nos muestra la información contenida pero no podemos interactuar con ella. El lenguaje
JavaScript 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, una de las más extendidas de
todas. JavaScript en definitiva permite al usuario interactuar con la página HTML. Los
programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar
acciones en el propio navegador (cliente), como pueden ser verificar datos, mostrar mensajes,
crear animaciones, etc.

JavaScript es un lenguaje de alto nivel basado en objetos y conducido por eventos,

diseñado para permitir a los programadores Web la generación de documentos Web
interactivos de un modo sencillo. Ofrece las características básicas de un lenguaje orientado a
objetos sin las complejas realizaciones que acompañan a estos lenguajes como Java y C++.
Así, por ejemplo, no permite la definición de clases ni la utilización de la herencia.

El que JavaScript sea un lenguaje conducido por eventos significa que no vamos a tener un
programa que se ejecuta de principio a fin cuando carguemos la página Web que lo contiene.
Lo que significa la programación controlada o conducida por eventos es que el navegador
ejecuta secciones de código en función de la acción o evento que haya generado el usuario
sobre un objeto determinado. Por ejemplo si el usuario se sitúa sobre un hiperenlace (objeto) y
pulsa el botón derecho del ratón (evento pulsar botón derecho), se ejecuta el código que hace
que aparezca un mensaje en pantalla, si por ejemplo sitúa el ratón sobre una imagen (objeto) y
hace doble click sobre esta la imagen se ejecuta el código que la almacena en un fichero, etc.
Lógicamente en este caso no existe una función principal que se ejecute en primer lugar.

JavaScript es un lenguaje de guiones también denominados scripts. Existen distintas formas

de programar, se puede programar una aplicación completa que al ejecutarse abra su propia
ventana con los componentes adecuados y la actividad se desarrolle dentro de esa ventana,
cerrándose cuando termina la ejecución. Pero también se pueden programar trozos de código
Módulo 4
Creación de contenidos WEB

que se ejecutan dentro de otras aplicaciones (por ejemplo, dentro de la ventana del
navegador). Se puede decir que cuando se programa una aplicación completa lo que se
construye es un programa completo. Y cuando lo que se programa son trozos de código para
ser insertados enotros documentos, esos trozos de código son los que se denominan guiones
(scripts). Los guiones no se pueden ejecutar fuera de la aplicación para la que han sido
creados.

Cuando realizamos programas JavaScript lo que estamos haciendo es crear guiones que
insertaremos dentro de los documentos HTML para ser ejecutados en los navegadores. Por
ello, no podemos hacer un programa completo utilizando únicamente JavaScript. Sólo
podemos utilizarlo para mejorar nuestras páginas Web con algunas aplicaciones sencillas
(como revisión de formularios, efectos en la barra de estado, etc.) y, con otras no tan sencillas
como, por ejemplo, animaciones usando HTML dinámico (DHTML).

OBSERVACIÓN:

A pesar de compartir la misma sintaxis, Java y JavaScript son cosas distintas: Java es un
lenguaje de programación completo , que se compila y genera un ejecutable. Mientras que
JavaScript es un lenguaje interpretado.

El vocabulario de JavaScript, relativamente pequeño, es fácil de comprender y nos da un

amplio número de posibilidades, antes no disponibles. JavaScript nos proporciona un conjunto
de herramientas compactas propias que realzan las interacciones entre los usuarios y las
páginas HTML. Estas herramientas nos permiten responder a las pulsaciones del ratón, a las
entradas de los formularios, a la navegación de la página y a otras acciones del usuario
denominadas "eventos".

En JavaScript las respuestas a las acciones de los usuarios pueden ser invocadas sin
necesidad de realizar transmisiones por la red, en definitiva sin la necesidad de sobrecargar la
red. La mayor ventaja de JavaScript es que las interacciones del usuario son procesadas en el
ordenador del propio usuario (cliente), evitando de esta manera la sobrecarga de tráfico en
Internet.

Javascript es un lenguaje interpretado.

Como la mayoría de los lenguajes de script, JavaScript es interpretado en tiempo de ejecución

por el navegador, antes de que se ejecute. La desventaja de los lenguajes interpretados es el
tiempo que se tarda en ejecutar el código, porque el navegador compila las instrucciones antes
de ser ejecutadas. Sin embargo, la ventaja es que son mucho más fáciles de utilizar.

Los programas JavaScript se insertan en las páginas HTML: si el navegador es compatible con
JavaScript, interpretará el código y lo ejecutará. Por tanto, su ejecución depende de la
capacidad que tenga el navegador para interpretar el código JavaScript. Veremos cómo
insertar programas de JavaScript en un documento HTML posteriormente.

Principales características de Javascript.

Algunas de sus características más importantes son las siguientes:

2
Módulo 4
Creación de contenidos WEB

• Añade interactividad a las páginas Web.

• Permite el desarrollo de programas que se ejecutan en el navegador del usuario.

• Los programas o "guiones" (comúnmente llamados "scripts") se insertan en

archivos HTML.

• Está "basado en objetos" (veremos qué significa esto en el apartado 4.10.).

• Maneja "eventos", es decir, acciones que el usuario realiza cuando accede a

una página. Los eventos pueden disparar acciones, y JavaScript usa los
manejadores de eventos.

Qué permite hacer Javascript.

Las aplicaciones de JavaScript al diseño de páginas Web son muchas y muy variadas. Entre
ellas podemos destacar las siguientes:

• Creación de una interfaz de usuario activa.

• Dotar de dinamismo a la páginas con efectos como las imágenes de sustitución.

• Control de la información (por medio de formularios).

• Realización de cálculos en el ordenador del usuario.

• Gestión en tiempo real de la página Web.

• Apertura y cierre de ventanas.

• Utilización de funciones de apoyo (Math, fecha, arrays, etc)

• Generar páginas Web sobre la marcha, de acuerdo con las acciones realizadas por el
usuario.

• Controlar las ventanas del navegador, manipulando sus características, cargando en

ellas contenido, etc.

• Validar la información suministrada por el usuario en un formulario (antes de enviar los

datos y evitando esa comprobación al servidor).

Eventos.

Una de las características principales de JavaScript es su capacidad para capturar un número

limitado de acciones provocados por el usuario, conocidas por la mayoría de los
programadores como "eventos".

Algunos elementos HTML reaccionan a los eventos, como los enlaces en los que al pulsar
sobre ellos nos muestran un nuevo documento HTML; como los textos o gráficos en los que,

3
Módulo 4
Creación de contenidos WEB

cuando el puntero del ratón pasa sobre ellos, éste cambia de una flecha a una pequeña mano
apuntando. Algunos navegadores también responden mostrando la URL de destino en la barra
de estado. JavaScript denomina este evento como MouseOver, y se activa siempre que se
mueve el puntero del ratón sobre el elemento. Si se pulsa sobre cualquier parte de un enlace,
el navegador reacciona enviándonos a una localización diferente en el Web o abriendo un
nuevo fichero. Esta acción se denomina evento Click, desencadenado siempre que se pulsa
sobre un enlace. HTML recoge estos eventos y el navegador siempre actúa del mismo modo.
Otros ejemplos de eventos son: onError, onClick, etc.

Con JavaScript, se pueden crear reacciones personalizadas para la mayoría de los eventos
que ocurren mientras se está visualizando el documento HTML.

Programación basada en objetos.

Casi todos los programas, por no decir todos, realizados con Javasript hacen uso de objetos.
La cuestión es, ¿qué se entiende por objeto?. Pues bien, un objeto es una estructura que
contiene dos tipos de elementos:

- Variables: a las que Javascript denomina propiedades.

- Funciones: que permiten manipular las propiedades de los objetos. A las
funciones, en Javascript se les denomina métodos.

Para comprender mejor estos conceptos, observa el siguiente ejemplo en el que se propone
un objeto con sus propiedades y métodos:

Objeto Æ empleado

Propiedad Æ nombre, apellidos, edad, telefono (empleado.nombre,

empleado.apellidos, empleado.edad, empleado.telefono).

Métodos Æ Dar Alta, Dar Baja (empleado.Alta( ), empleado.Baja( ))

Si en estos momentos, estos conceptos te resultan algo o muy abstractos, no te preocupes,

hay un apartado completo del capítulo dedicado exclusivamente a la programación basada en
objetos en el que todo esto te resultará más sencillo.

¿Por qué Javascript?.

Existen varias razones para utilizar JavaScript dentro de los documentos HTML. Nos permite
hacer cosas con las páginas Web que de otra forma sería difícil de realizar, en ocasiones,
imposible.

Como otros lenguajes de script que aumentan las capacidades de las aplicaciones con las que
trabajan, JavaScript amplia las posibilidades de las páginas HTML más allá de su uso normal.
Nos permite dinamizar los sitios Web, gracias a su gran flexibilidad.

En un sitio Web estándar podemos obtener más información pulsando sobre un hiperenlace
para que el servidor correspondiente que nos envíe la página solicitada. En una página más
interactiva, podemos rellenar un formulario, enviar los resultados al servidor y esperar una

4
Módulo 4
Creación de contenidos WEB

respuesta. En cualquier caso, debemos esperar una nueva página desde el servidor.

En una página mejorada con JavaScript, existe código JavaScript insertado dentro del código
HTML. El JavaScript puede proporcionar información instantánea, sin necesidad de esperar
por una respuesta del servidor. Esta información puede venir de una entrada de usuario, del
código "oculto" dentro del documento, o de otros documentos de diferentes marcos e incluso
de diferentes ventanas. Una página mejorada con JavaScript puede hacer visible esta nueva
información actualizando los contenidos de un formulario o generando un nuevo documento.

3.1.3 JavaScript Versus Java.

Hay que dejar bien claro que Javascript no tiene nada que ver con Java. Se trata de
lenguajes completamente diferentes, que quizás lo único que comparten en una sintaxis muy
semejante. En los siguientes puntos se muestran las diferencias más significativas entre estos
dos lenguajes:

ƒ Compilador. Para programar en Java necesitamos un Kit de desarrollo y un

compilador. Sin embargo, Javascript no es un lenguaje que necesite que sus
programas se compilen, sino que éstos se interpretan por parte del navegador
(cliente) cuando éste lee la página.

ƒ Orientado a objetos. Java es un lenguaje de programación orientado a objetos

mientras que Javascript es un lenguaje de programación basado en objetos. En
definitiva, con JavaScript podemos programar sin la necesidad de crear clases,
tal como se hace en los tradicionales lenguajes de programación orientados a
objetos como C++ o Pascal.

ƒ Propósito. Java es mucho más potente que Javascript, esto es debido a que
Java es un lenguaje de propósito general, con el que se pueden hacer
aplicaciones de lo más variado, sin embargo, con Javascript sólo podemos
escribir programas para que se ejecuten en páginas Web.

ƒ Estructuras fuertes. Java es un lenguaje de programación fuertemente tipado,

esto quiere decir que al declarar una variable tendremos que indicar su tipo y no
podrá cambiar de un tipo a otro automáticamente. Por su parte Javascript no
tiene esta característica, y podemos almacenar en una variable la información
que deseemos, independientemente de su tipoa. Además, podemos cambiar el
tipo de información de una variable cuando se desee.

ƒ Otras características. Como se puede observar Java es mucho más complejo,

si bien es también más potente, robusto y seguro. Tiene más funcionalidades que
Javascript y las diferencias que los separan son lo suficientemente importantes
como para distinguirlos fácilmente.

3.1.4 ¿Qué necesitamos?

Para programar en Javascript necesitamos un editor de texto plano, esto es que no introduzca
ningún tipo de etiqueta y un navegador compatible con Javascript. Un usuario de Windows
posee de salida todo lo necesario para poder programar en Javascript, puesto que dispone
dentro de su instalación típica de sistema operativo, de un editor de textos, el Bloc de notas, y
de un navegador: Internet Explorer.

5
Módulo 4
Creación de contenidos WEB

Si bien se pueden editar los guiones o scripts con el block de notas, quizás sea más
aconsejable recurrir a editores específicos para este tipo de tareas y que por tanto ofrecen
mejores prestaciones. Por ejemplo este tipo de editores específicos tienen algunas ventajas
como es la de colorear los códigos de las sentencias y palabras reservadas, en definitiva de
los elementos del lenguaje, lo que facilita enormemente la detección de errores, que por otra
parte serían más difíciles de localizar en el block de notas. Otras de la ventajas destacables es
que este tipo de editores permiten trabajar con varios documentos simultáneamente,
proporcionan ayuda, he incluso algunos de ellos proporcionan scripts ya programados que
podemos añadir directamente a nuestras página Web. En Internet se pueden localizar algunos
editores de este tipo gratuitos, o versiones de evaluación de algunos comerciales. Entre este
tipo de editores caben destacar UltraEdit y EditPlus.

6
Módulo 4
Creación de contenidos WEB

3.2 PRIMEROS PASOS

3.2.1 Insertando código JavaScript en HTML.

JavaScript se puede insertar en los documentos HTML de cualquiera de estas dos maneras:

• Insertándolo en el documento entre un las etiquetas <SCRIPT> y <\SCRIPT> , como un

programa propiamente dicho, combinando funciones y sentencias, con el mismo
aspecto que tendría el código de cualquier otro lenguaje.

ƒ Introduciendo manejadores de eventos JavaScript en etiquetas HTML (es decir,

insertándolo dentro de una etiqueta HTML para responder a un evento). En capítulos
posteriores se estudiará como utilizar eventos y manejadores.

Cada vez que se carga una página HTML, el navegador del cliente interpreta el código
JavaScript. Algunas porciones del script insertado se ejecutarán dependiendo de las acciones
del usuario y de otros eventos ocurridos durante la visualización del documento.

De las dos formas de implementación de JavaScript, la más convencional es la primera. La

forma de insertar guiones de JavaSript en un documento HTML es mediante las etiquetas de
comienzo y final de script, (<SCRIPT> y </SCRIPT>), e igualando el atributo LANGUAGE de
dicha etiqueta a "JavaScript":

<SCRIPT LANGUAGE="JavaScript" >...</SCRIPT>

Entre las etiquetas <SCRIPT> y </SCRIPT> se encierra el texto que compone el código del
guión de JavaScript.

Claramente, estas etiquetas sirven también para insertar scripts escritos en otros lenguajes,
distintos a JavaScript (cambiando el valor del atributo LANGUAGE). Pero nosotros sólo vamos
a aprender a hacer guiones en JavaScript.

El navegador comienza buscando la primera etiqueta de script (<SCRIPT

LANGUAGE="JavaScript">), y continúa leyendo todo lo que encuentra hasta llegar a la
etiqueta de finalización de script (</SCRIPT>). JavaScript traduce cada línea de código en
instrucciones siguiendo el orden en que han sido definidas.

Los scripts se definen, normalmente, en la sección <BODY> del documento, aunque también
se pueden incluir en la cabecera. Si se declaran funciones, es más aconsejable hacerlo en la
cabecera (entre las etiquetas <HEAD> y </HEAD>). De esta manera conseguimos que, al
ejecutarse el "BODY", las funciones ya estén cargadas en el ordenador del usuario.

Existe una tercera manera de introducir código JavaScript en una página Web que consiste en
la inserción a partir de un fichero externo que contiene exclusivamente el código JavaScript.
Este método tiene gran utilidad cuando el código JavaScript es muy largo y se desea introducir
en numerosas páginas. Lo lógico en estos casos es situar el código JavaScript en un fichero
externo para poder invocarlo o llamarlo desde cada página. Esto tiene además la ventaja de

7
Módulo 4
Creación de contenidos WEB

que reduce el tamaño de la página, en definitiva espacio en el servidor que la aloja. En

segundo lugar, al ser el tamaño más reducido la cantidad de información a transferir por la red
es también menor, con lo que la descarga será más rápida.

En este caso lo primero que se debe hacer es escribir el código JavaScript en un fichero que
se debe guardar con extensión .js. Finalmente, se añade a la etiqueta <SCRIPT> el atributo
src que contiene la ruta y nombre del fichero JavaScript (.js) que se desea ejecutar. Se añade
también el atributo text/javascript con el fin de indicar al navegador que el Script está escrito
en texto plano. Se muestra a continuación un ejemplo en el que se ha incluido un fichero
externo.

Ejemplo:

<html>

<head>
<title>
Ejemplo de como incluir código JavaScript contenido en un fichero externo.
</title>
<script src="codigo.js" language="javascript" type="text/javascript">
</script>
</head>

<body>
Aquí el contenido de la página.
</body>

</html>

El fichero que contiene el código JavaScript a ejecutar sería codigo.js.

3.2.2 Primer programa.

Para insertar scripts en documentos Web, se puede utilizar el editor que se está utilizando para
editar HTML. A continuación se muestra un ejemplo de página que contiene un guión
JavaScript que muestra en pantalla el mensaje "Esto es JavaScript".

Ejemplo 1:

<HTML>
<HEAD>

8
Módulo 4
Creación de contenidos WEB

<TITLE>Ejemplo de script</TITLE>
</HEAD>
<BODY>
<BR>Esto es HTML
<BR>
<SCRIPT LANGUAGE="JavaScript">
document.write("Esto es JavaScript")
</SCRIPT>
</BODY>
</HTML>

Este ejemplo se limita a escribir en pantalla un determinado texto (la frase "Esto es
JavaScript"), por medio del código "document.write". En este código, "document" es un objeto
creado por el sistema que hace referencia al propio documento, y "write" es uno de los
métodos que proporciona para interactuar con ese objeto.

El resultado de cargar este documento en un explorador que sea capaz de interpretar

JavaScript será la aparición de los dos textos -el escrito en HTML ("Esto es HTML"), y el
escrito en JavaScript ("Esto es JavaScript"), sin que el usuario sea consciente de la diferencia
entre ambos.

El resultado tras la ejecución del código anterior en el navegador se muestra en la Figura 3.1:

Figura 3.1.- Resultado de la ejecución del código del ejemplo.

9
Módulo 4
Creación de contenidos WEB

Los navegadores que "entienden" JavaScript, reconocen el texto encerrado entre las etiquetas
<SCRIPT> y </SCRIPT> como código JavaScript, y no lo muestran en la pantalla del cliente.
En cambio, si el navegador no soporta JavaScript, en pantalla aparece escrito el código
JavaScript. Realmente, hoy en día todos los navegadores soportan JavaScript, pero, en
cualquier caso, se puede tener en cuenta la compatibilidad con navegadores anteriores. Como
se sabe, todo explorador ignora las etiquetas que le son desconocidas. Por lo tanto, aquéllos
que no soporten JavaScript ignorarán el comienzo y el final del código del programa (las
etiquetas <SCRIPT> y </SCRIPT>), pero no ignoran el resto del guión, sino que lo muestran
como texto. Para que el resto del código también sea ignorado y no aparezca en la pantalla del
cliente, debemos encerrarlo entre los símbolos de comentario de HTML (que, recordemos,
eran <!-- y -->). De esta manera el navegador que no soporta JavaScript interpreta las líneas
de código como si de un comentario se tratase.

Si se desea dar la posibilidad de ejecutar un código alternativo a los navegadores que no

interpretan JavaScript, se deben utilizar las etiquetas <NOSCRIPT>..</NOSCRIPT>. En el
siguiente ejemplo se puede observar la utilidad de los símbolos de comentario de HTML y de
las etiquetas <NOSCRIPT>..</NOSCRIPT>.

Ejemplo 2:
<HTML>
<HEAD>
<TITLE>Otro ejemplo</TITLE>
<SCRIPT>
<!--Ocultación a navegadores antiguos
document.write("Si ves esto, tu browser
interpreta JavaScript")
// Fin de la ocultación -->
</SCRIPT></HEAD>
<BODY>
<NOSCRIPT>
Si ves esto, tu browser no interpreta
JavaScript
</NOSCRIPT>
</BODY></HTML>

En este ejemplo, si el navegador puede interpretar JavaScript, aparece en pantalla la frase "Si
ves esto, tu browser interpreta JavaScript", y si no, lo que aparece es "Si ves esto, tu browser
no interpreta JavaScript".

A continuación se muestra otro ejemplo JavaScript en el que se hace utilidad de una función
propia de JavaScript como es la función alert(). Esta función hace que se genere el típico
cuadro de aviso en pantalla y detiene la carga de la página hasta que el usuario pulse el botón
de "Aceptar" que aparece en dicho cuadro.

10
Módulo 4
Creación de contenidos WEB

Ejemplo 3:

<html>

<head>
<title>
Página con Javascript.
</title>
<script language="javascript">
<!--
alert ("Hola Mundo");
//-->
</script>
</head>

<body>
Continua la carga del resto de la página.
</body>

</html>

Cuando el navegador empieza a cargar la página e interpreta el código JavaScript del ejemplo
3, aparece en pantalla la ventana de aviso mostrada en la figura 3.2:

Figura 3.2.- Ventana de aviso generada por la función alert() del ejemplo 3.

Una vez que el usuario pulsa el botón "Aceptar", el navegador continúa con la carga de la
página mostrando el resto del contenido (véase figura 3.3).

11
Módulo 4
Creación de contenidos WEB

Figura 3.3.- Aspecto de la ventana del navegador una vez cargado el resto de la página
del ejemplo 3.

Se pueden introducir programas de JavaScript a lo largo de todo el documento HTML, tantas

veces como se quiera. Así, un documento puede tener varias etiquetas <SCRIPT>, y cada una
de ellas puede incluir diferentes sentencias JavaScript.

El parámetro "language" de la etiqueta <SCRIPT> puede indicar, además del lenguaje en el

que está escrito el código del guión, la versión de este que está siendo utilizada:

<SCRIPT LANGUAGE="Versión de JavaScript">

sentencias JavaScript
</SCRIPT>

Por ejemplo:

• <SCRIPT LANGUAGE="JavaScript">

• <SCRIPT LANGUAGE="JavaScript1.1">

12
Módulo 4
Creación de contenidos WEB

3.3 ELEMENTOS DEL LENGUAJE

3.3.1 Algo de Sintaxis.

En este apartado se describen algunos aspectos genéricos relacionados con la sintaxis del
lenguaje JavaScript, como puede ser la inserción de comentarios, la finalización de sentencias,
etc.

Comentarios

Los comentarios de un programa (en cualquier lenguaje) son aquéllas partes del código que
no son interpretables por el compilador (programa que interpreta y traduce el código a lenguaje
máquina, generando un ejecutable) en el caso de lenguajes compilados, o por el intérprete en
el caso de lenguajes interpretados, como es el caso de JavaScript. Los programadores suelen
introducir comentarios a lo largo de sus programas para aclarar y explicar qué hace cada
sección de código. Es muy aconsejable insertar comentarios, sobre todo en códigos
complejos. De esta manera se facilita la compresión del código realizado tiempo atrás, con el
consiguiente ahorro de tiempo. Cualquier programador profesional es conocedor de que el
tiempo perdido en la inserción de comentarios se amortiza con creces.

En JavaScript, existen dos posibilidades para insertar comentarios en los guiones:

• Se pueden crear comentarios de una única línea, utilizando dos caracteres // seguidos:
la línea que comience con // será ignorada por el compilador.

• Podemos comentar varias líneas, comprendidas entre las marcas /* (inicio del bloque
de comentario) y */ (final del bloque).

Ejemplos:

1.- Comentario de una línea

//Esto es un comentario de una línea

2.- Comentario de varias líneas

/* Esto es un comentario que

puede ocupar tantas

líneas como se desee */

13
Módulo 4
Creación de contenidos WEB

Llaves

Las llaves ({ }) engloban partes del código que están relacionadas (por ejemplo, las
instrucciones de definición de un método o función).

Punto y Coma

El punto y coma (;) es el carácter utilizado como separador de sentencias situadas en la

misma línea. No es obligatorio si cada sentencia va en una línea, pero es aconsejable
utilizarlo.

Tokens

Los tokens son los caracteres, palabras o frases más pequeños que JavaScript es capaz de
entender. Cuando JavaScript es interpretado, el navegador "trocea" el script en estos tokens,
ignorando los espacios en blanco y los comentarios. Los tokens de JavaScript se agrupan en
cinco categorías: identificadores, palabras reservadas, literales , operadores y separadores.
Se estudiará cada uno de estos tokens en apartados posteriores.

Como en todos los lenguajes de programación, existen muchas formas de ordenar estos
tokens para indicar al ordenador que realice una función específica. La sintaxis del lenguaje es
el conjunto de reglas y restricciones que indican cómo se deben combinar los tokens.

Ya hemos visto que los tokens de JavaScript se agrupan en cinco categorías: identificadores,
palabras reservadas, literales, operadores y separadores. Empezaremos por los dos
primeros.

3.3.2 Identificadores y palabras reservadas.

Identificadores.

Un identificador no es más que un nombre que sirve para representar a algún elemento del
programa: una variable, una constante, un método o un objeto. Consisten en una combinación
de caracteres (pudiendo aparecer dígitos), que cumplen las siguientes normas:

• Deben comenzar por una letra, o por un guión bajo (_)

• A continuación, puede haber cualquier combinación de letras (en mayúsculas o

minúsculas), dígitos y guiones bajos.

JavaScript es Case Sensitive, esto es, sensible al uso de mayúsculas y minúsculas, por lo
que debemos tener cuidado: por ejemplo, los identificadores n y N son diferentes. Además,
algunos nombres no podemos utilizarlos, porque forman parte del lenguaje de
programación: son las llamadas "palabras reservadas".

14
Módulo 4
Creación de contenidos WEB

Ejemplos:

Válidos No válidos
Valor_actual Valor actual
NumeroDeDatos *datos
N 2num
n3 return

El identificador Valor actual no es válido porque contiene un espacio en blanco, y sería

interpretado por el lenguaje como dos identificadores en lugar de uno sólo. El siguiente
(*datos) tampoco sirve, porque el asterisco no es un carácter admitido para definir
identificadores. El identificador 2num no es válido porque comienza por un número. Y, por
último, return tampoco es válido por ser un identificador propio del lenguaje, que JavaScript
utiliza con otro propósito: definir identificadores con el nombre de palabras reservadas produce
errores a la hora de ejecutar el script.

Palabras reservadas.

Las palabras reservadas son identificadores predefinidos en JavaScript que, por lo tanto, no
pueden ser utilizados por el usuario para denominar variables, funciones, métodos u objetos.
Se muestran a continuación algunas palabras reservadas, si bien hay que indicar que la lista
de palabras reservadas es mucho mayor. En el Anexo I se muestra una lista de palabras
reservadas completa.

PALABRAS RESERVADAS EN JAVASCRIPT

abtract extends interface switch

boolean false labeled synchronized
break final long this
byte finally native throw
case float new throws
catch for null trasient
class function package true
const goto private try
continue if protected typeof
default implements public var
delete import return void
do in sort while
double instanceof static with
else int super

3.3.3 Literales.

Los literales son datos que comprenden números o caracteres usados para representar
valores fijos en JavaScript: son valores que no cambian durante la ejecución del script.

15
Módulo 4
Creación de contenidos WEB

Los diferentes tipos de literales que se pueden usar en JavaScript son los siguientes:

• literales enteros,

• literales en coma flotante,

• literales booleanos,

• literales de cadena, y

• caracteres especiales.

Literales Enteros

Los números enteros se pueden representar en formato decimal (es decir, en base 10), octal
(base 8) o hexadecimal (base 16). Para que el interprete de JavaScript pueda interpretar cuál
es el formato que estamos utilizando en cada momento, se debe indicar de la siguiente
manera:

• Los literales enteros en formato decimal pueden incluir cualquier secuencia de dígitos
que no comience por cero (0).

• Los literales enteros en formato octal deben comenzar por un 0, a continuación del cual
seguirá el número expresado en base 8 (es decir, cualquier secuencia de dígitos
comprendidos entre el 0 y el 7).

• Por último, los enteros hexadecimales se expresarán con los caracteres 0x (ó 0X)
delante del entero en base 16, que será una secuencia que puede incluir cualquiera de
los dígitos del 0 al 9, junto con letras de la A (ó a) hasta la F (ó f).

Ejemplos de literales enteros:

Formato Valores
Decimal 77, 9166
Octal 072, 06615
Hexadecimal 0x122, 0X4da2

Literales en coma flotante

Los literales en coma flotante sirven para representar números reales, esto es, números
decimales con parte fraccionaria. Éstos se pueden expresar de dos maneras: en forma
estándar, o con notación científica, haciendo uso de las letras "E" ó "e" para designar el

16
Módulo 4
Creación de contenidos WEB

exponente (al igual que hacen las calculadoras científicas). Tanto el número decimal como el
exponente pueden ser positivos o negativos, y el carácter de separación de las partes real y
fraccionaria del número no es la coma decimal, sino el "punto decimal" (notación anglosajona).

Ejemplos de literales en coma flotante:

Valores
11.654
-1.788
8.52e+10, ó 8.52e10
8.52E-10

Literales Booleanos

JavaScript implementa tipos de datos booleanos, es decir, datos con un contenido lógico,
evaluable a uno de los dos valores "verdadero" ó "falso". Además, el lenguaje dispone de las
palabras reservadas "true" y "false", que, internamente, representan los valores "1" y "0".
Estos literales deben aparecer siempre escritos en minúsculas.

Literales de cadena

Una cadena es una sucesión de ninguno, uno o más caracteres, encerrados entre comillas
simples (' ') o dobles comillas (" "). Para enmarcar una cadena, siempre debemos utilizar el
mismo tipo de comillas: una cadena que comience con comillas dobles, debe terminar con ese
tipo de comillas, y si comienza con comillas simples, debe terminar con comillas simples. En
algunas ocasiones, podemos entremezclar los dos tipos de entrecomillado (por ejemplo, para
insertar una cadena literal dentro de otra).

Ejemplos de literales cadena:

Cadenas
"¡Hola!"
'saludos'
"# 0-16"
'incluye "dobles"
comillas'

Caracteres especiales

Cuando se escriben scripts, a veces necesitamos indicarle al ordenador que utilice ciertos
caracteres especiales o teclas, como la tabulación o el retorno de carro. Para ello, debemos
utilizar el carácter de escape "\", seguido de un código de escape, correspondiente al
carácter especial que queremos introducir. A caracter "\", denominado backslash, seguido del

17
Módulo 4
Creación de contenidos WEB

código de escape se le denomina secuencia de escape. Por tanto una secuencia de escape es
una combinación de teclas que nos permite incluir caracteres "prohibidos" dentro de una
cadena, sin que sean interpretados como delimitadores.

La siguiente tabla muestra los caracteres especiales de JavaScript:

Secuencias
Significado
de escape
Espacio hacia
\b
atrás
\f Salto de página
\n Nueva línea
Retorno de
\r
carro
\t Tabulación
Barra invertida
\\
("backslash")
\' Comilla simple
\" Comilla doble

Supóngase que se desea mostrar una ventana en pantalla con el siguiente mensaje: Este
mensaje es un ejemplo de utilización de "Secuencias de Escape", de manera exacta a
como se a trascrito, esto es con el texto Secuencias de Escape entrecomillado.

El código que en primera instancia se podría pensar que sería correcto podría ser el siguiente:

Ejemplo Secuencias de escape:

<html>

<head>
<title>
Ejemplo utilización secuencias de escape.
</title>
<script language="javascript">
<!--
alert ("Este mensaje es un ejemplo de utilización de "Secuencias de Escape"");
//-->
</script>
</head>

<body>

18
Módulo 4
Creación de contenidos WEB

Aquí el cuerpo de la página.

</body>

</html>

Al cargar la página en el navegador nos aparece una ventana de error como la mostrada en la
Figura 3.4:

Figura 3.4.- Ventana de error al cargar la página.

Esto se debe a que las comillas no son un carácter que pueden insertarse "alegremente" en
las cadenas, para insertarlas se debe recurrir a las secuencias de escape, tal y como se
muestra en el siguiente código:

Ejemplo Secuencias de escape:

<html>

<head>
<title>
Ejemplo utilización secuencias de escape.
</title>
<script language="javascript">
<!--
alert ("Este mensaje es un ejemplo de utilización de \"Secuencias de Escape\" ");
//-->
</script>
</head>

<body>

Aquí el cuerpo de la página.

</body>

</html>

19
Módulo 4
Creación de contenidos WEB

En este caso, en el navegador aparece la ventana de aviso de la figura 3.5.

Figura 3.5.- Resultado de la utilización correcta de las secuencias de escape.

Igualmente se pueden incluir secuencias de escape para introducir retornos de carro, saltos de
línea, tabuladores, saltos de página, etc.

3.3.4 Variables y tipos de datos.

Una variable es el nombre que se le da a una posición de memoria de nuestro ordenador. En

esta posición de memoria se puede almacenar información, acceder a ésta y modificarla.
Conociendo esta posición de memoria (también llamada "dirección"), se puede encontrar,
actualizar o recuperar la información contenida en la variable cuando se necesite. A la
información guardada en una variable se le denomina "valor" de la variable. El dato que se
almacena en una variable puede cambiar durante la ejecución del guión o programa, de ahí
que reciba el nombre de variable.

Cuando una variable tiene un determinado contenido y se le asigna otro, el anterior se pierde
definitivamente.

Nombre de variables

En JavaScript, el nombre de una variable debe estar formado por una o más letras
(mayúsculas, de la "A" a la "Z", o minúsculas, de la "a" a la "z"), dígitos (del "0" al "9") o
guiones bajos ( _ ), no pudiendo comenzar por un dígito. Es decir, el primer carácter del
nombre de una variable debe ser una letra o el guión de subrayado. Los nombres de las
variables no pueden contener la letra ñ, ni espacios en blanco, ni acentos.

• Recordar que JavaScript establece diferencias entre mayúsculas y minúsculas, por lo

que dos nombres de variables que se diferencien en mayúsculas o minúsculas en
algún carácter igual, se referirán a dos variables distintas. De esta manera, las
variables camion y Camion son diferentes.

• Además, no olvidemos que podemos utilizar cualquier nombre, excepto los reservados
del lenguaje.

Declaración de variables

En primer lugar hay que decir que para utilizar una variable en nuestro código, lo primero que
se debe hacer es declararla. Cuando se declara una variable se le está indicando al navegador
que reserve espacio en memoria para la variable

20
Módulo 4
Creación de contenidos WEB

Existen dos formas de declarar variables: de manera explícita e implícita.

Declaración explícita.

Para declarar una variable de forma explícita se utiliza la palabra reservada var seguida del
nombre de la variable. Se pueden declarar varias variables en la misma línea, utilizando la
coma (,) como separador.

Ejemplos:

Declaraciones explícitas
var correo;
var Num1;
var i, j, k;

Una vez declarada la variable se le puede asignar un valor por medio del operador de
asignación "=", por ejemplo: Num1=25. Cuando a una variable tras su declaración se le asigna
un valor, se dice que se ha inicializado la variable. Se puede inicializar una variable al mismo
tiempo que la declaramos, o en cualquier otro punto del script. Asignar un valor a una variable
en su declaración puede ayudar a recordar el tipo de valor original para el que se creó la
variable.

Declaraciones con inicialización

var correo = "nombre@dominio";
var Num1=0.00;
var i=0, j=1, k;

En el siguiente ejemplo se muestra la declaración e inicialización de variables en un guión o

script.

Ejemplo declaración e inicialización de variables explícitas:

<html>

<head>

<title>
Ejemplo declaración variables explícitas.
</title>

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

21
Módulo 4
Creación de contenidos WEB

var Num1, Num2; //Declaración de dos variables en la misma línea.

Num1=90; //Inicialización de la variable Num1

Num2=120; //Inicialización de la variable Num2

alert ("El valor de la variable \"Num1\" es " + Num1);

alert ("El valor de la variable \"Num2\" es " + Num2);
//-->
</script>

</head>

<body>
Aquí el cuerpo de la página

</body>

</html>

En el ejemplo anterior se ha recurrido a la utilización de la secuencia de escape para imprimir

las dobles comillas. También se a hecho uso del operador "+" para concatenar cadenas. El uso
de este operador se estudiará más adelante, de momento baste con decir que se utiliza para
concatenar (unir) dos o más cadenas de caracteres.

Si se carga el código anterior en el navegador este muestra las siguientes ventanas de aviso:

Figura 3.6.- Ventanas de aviso del ejemplo de declaración explícita de variables.

22
Módulo 4
Creación de contenidos WEB

JavaScript lee el código de arriba a abajo, realizando en cada paso la instrucción leída. Hasta
que el programa no alcanza el paso en que una variable es inicializada, ésta permanece
indefinida ("undefined"), por lo que no se puede obtener información sobre ella. Intentar
acceder al valor de una variable antes de que ésta haya sido inicializada causará un error al
ejecutar la aplicación.

Declaración implícita de variables.

JavaScript permite declarar una variable sin utilizar la palabra reservada var. Cuando se
inicializa una variable que no existe, automáticamente el navegador reserva espacio en
memoria para almacenarla. A este modo de declaración se le denomina declaración implícita
de variables.

Desde un punto de vista de programación es siempre aconsejable declarar las variables

explícitamente. Se recomienda no utilizar la declaración implícita que soporta JavaScript. De
hecho, los lenguajes de programación más modernos y potentes no soportan la declaración
implícita, ya que puede conducir a errores importantes. En estos lenguajes, es obligatorio
declarar las variables e incluso indicar su tipo, en definitiva indicar si se trata de una variable
numérica entera, un caracter o cadena de caracteres, etc.

En el siguiente ejemplo se muestra la declaración implícita de una variable en un guión.

Ejemplo declaración e inicialización de variables implícitas:

<html>

<head>
<title>
Ejemplo declaración variables implícitas.
</title>

<script language="javascript">
<!--
Num1=90; //Declaración implícita de la variable Num1.
alert ("El valor de la variable \"Num1\" es " + Num1);
//-->
</script>

</head>
<body>

Contenido de la página
</body>
</html>

Como se puede verificar, la ejecución de este guión produce el mismo efecto que el de las
declaraciones explícitas, pero, se insiste en la recomendación de la utilización de la
declaración explícita frente a la implícita.

23
Módulo 4
Creación de contenidos WEB

TIPOS DE VARIABLES

Cuando se almacena información en una variable, automáticamente JavaScript la clasifica en

uno de los cinco tipos de datos válidos mostrados en la siguiente tabla:

La siguiente tabla muestra los diferentes tipos de datos utilizados en JavaScript:

Tipo de datos Ejemplo

numéricos (number) -17, 3.14159
boolean true, false
"¡Saludos a
cadena (string)
todos!", ""

Observación: todas las variables pueden tener contenido null, lo que significa que no
tienen ningún contenido, que están vacías.

Variables de tipo numérico

Las variables de tipo number son las que tienen un contenido numérico, y pueden
almacenar números enteros o reales (en coma flotante).

Como ya hemos visto en el apartado sobre los literales, los números enteros pueden aparecer
expresados en formato decimal, octal (comenzando por 0) ó hexadecimal (comenzando por
0x). También hemos visto ya cómo representar los números en coma flotante (que tiene una
parte entera y una parte decimal).

Ejemplos de variables enteras:

var numero=100

var numero_octal=02356

var numero_hexadecimal=0x1AB

Ejemplos de variables en coma flotante:

var numero_flotante=10.23 // Ojo, usar el punto como separador de los decimales, NO

la coma.

var otro_flotante=43.19e-2

Variables de tipo cadena (string)

Las variables de tipo cadena o string pueden almacenar cualquier literal de cadena que se
les asigne, incluyendo la cadena vacía. Así, una variable de este tipo contiene texto
delimitado por dobles comillas (" ") o por comillas simples (' '). La cadena vacía se
representa por "" ó '', usando comillas simples).

24
Módulo 4
Creación de contenidos WEB

Como ya se comentó, para escribir caracteres especiales se usan las secuencias de escape.

Ejemplos de variables cadena:

var pais="Francia"

var valor="" //Cadena vacía

var cadena="Me llamo \"Ruth\"" /*aquí hemos escapado las dobles comillas del interior
de la cadena*/

Tal y como se indicó anteriormente, el símbolo "+" se puede utilizar para concatenar cadenas:

Ejemplo:

var nombre1="Miguel "

var nombre2="Ángel"

var nombre_completo = nombre1+nombre2;

En este caso, la variable nombre_completo almacena, como valor, la cadena de caracteres

"Miguel Ángel".

Se muestra a continuación un ejemplo en el que se realiza una concatenación de cadenas.

Ejemplo concatenación de cadenas:

<html>

<head>

<title>
Ejemplo concatenación de cadenas.
</title>

<script language="javascript">
<!--
var cadena1="Esta es la cadena número 1 ", cadena2="y esta es la cadena número 2 ";
alert (cadena1+cadena2);
//-->
</script>

</head>

25
Módulo 4
Creación de contenidos WEB

<body>

Contenido de la página.
</body>

</html>

El mensaje que muestra el navegador al cargar esta página es el siguiente:

Figura 3.7.- Mensaje de aviso mostrado por el ejemplo de concatenación de cadenas.

Variables de tipo boolean

Las variables del tipo boolean son variables lógicas, y pueden tomar únicamente dos valores
verdadero (true en inglés) o falso (false).

Ejemplos de variables booleanas:

var enfermo=true

var control=false

Variables Indefinidas y Nulas.

Para finalizar con los tipos de variables indicar que cuando una variable se declara pero no se
inicializa, o simplemente cuando no se inicializa y no se declara, esta es de tipo undefined
(indefinida). Verifique el siguiente ejemplo:

Ejemplos de variable indefinida (undefined):

<html>

<head>

26
Módulo 4
Creación de contenidos WEB

<title>
Ejemplo de variable indefinida.
</title>

<script language="javascript">
<!--
var dato1;
alert ("dato1 es de tipo " + typeof(dato1) + "\ndato2 es de tipo " + typeof(dato2));
//-->
</script>

</head>

<body>
Contenido de la página
</body>

</html>

La salida que genera el navegador para el ejemplo anterior es la siguiente:

Figura 3.8.- Mensaje mostrado en el ejemplo de variable indefinida (undefined).

Cuando se desea dejar a una variable sin contenido alguno, esto es no se desea que valga 0
ni que sea una cadena vacía, se le asigna el valor null.

Ejemplos de asignación de valor null:

var dato1=null;

27
Módulo 4
Creación de contenidos WEB

Determinar el tipo de una variable

Se puede determinar el tipo de una variable por medio de la función typeof() que incorpora
JavaScript. En el siguiente ejemplo se muestra el uso de esta función.

Ejemplo de utilización de la función typeof() para determinar el tipo de una variable:

<html>

<head>
<title>
Utilización de la función typeof.
</title>
<script language="javascript">
<!--
var cadena = "Esto es una cadena", numero = 435.89;
alert ("La variable 'cadena' es de tipo " + typeof(cadena) + "\nLa variable 'numero' es de tipo " +
typeof(numero));
//-->
</script>

</head>

<body>

Contenido de la página
</body>

</html>

En este caso, el mensaje que se muestra es el siguiente:

Figura 3.9.- Mensaje mostrado en el ejemplo de utilización de la función typeof.

Observe que se ha utilizado la secuencia de escape \n para introducir un retorno de carro. Por
eso el mensaje aparece en dos líneas.

28
Módulo 4
Creación de contenidos WEB

Conversión de tipos de datos

En el proceso de programación de guiones puede surgir la necesidad de convertir un tipo de

variable a otro, por ejemplo de cadena a numérico o viceversa. La conversión de tipos se
puede realizar bien de manera directa (conversión implícita), bien utilizando funciones que
JavaScript proporciona para este fin (conversión explícita).

Conversión implícita.

Se produce simplemente cuando a una variable de un tipo se le asigna un dato de otro tipo
diferente. Observe el siguiente ejemplo:

Ejemplo de conversión implícita:

<html>

<head>
<title>
Ejemplo de conversión de datos implícita.
</title>

<script language="javascript">
<!--
var dato = "Dato es una variable de tipo cadena";
alert ("La variable 'dato' inicialmente es de tipo " + typeof(dato));
dato = 3.142592; // Ahora, al asignar a la variable dato un valor numérico se convierte en
variable numérica
alert ("La variable 'dato' es ahora de tipo " + typeof(dato));
//-->
</script>

</head>

<body>

Contenido de la página
</body>

</html>

Al cargar la página anterior en el navegador genera los dos mensajes siguientes:

29
Módulo 4
Creación de contenidos WEB

Figura 3.10.- Mensajes generados por el navegador en el ejemplo de conversión de

datos implícita.

También se produce una conversión implícita si cuando una variable de tipo cadena
realizamos algún tipo de operación matemática, tal y como se muestra en el siguiente ejemplo.

Otro ejemplo de conversión implícita:

<html>

<head>
<title>
Ejemplo conversión de datos implícita.
</title><script language="javascript">
<!--
var dato = "425";
alert ("La variable 'dato' es de tipo " + typeof(dato) + " y tiene valor " + dato );
dato = dato-2; // Al hacer la resta la variable dato se convierte a numérica
alert ("La variable 'dato' es de tipo " + typeof(dato) + " y tiene valor " + dato );
//-->
</script>
</head>

<body>

Contenido de la página.
</body>

</html>

30
Módulo 4
Creación de contenidos WEB

Al cargar la página, el navegador mostraría los siguientes mensajes:

Figura 3.11.- Mensajes generados por el navegador en el segundo ejemplo de

conversión de datos implícita.

En este último ejemplo hay que señalar una pequeña excepción, y es cuando el operador es el
signo "+". Como este operador se utiliza tambien para concatenar cadenas, no provoca la
conversión. De esta manera, si en el ejemplo anterior se sustituyera la línea dato = dato-2 por
la línea dato=dato+2, los mensajes que mostraría el navegador serían los siguientes:

Figura 3.12.- Mensajes generados por el navegador en el segundo ejemplo de

conversión de datos implícita si se realiza una operación suma.

Obsérvese que el navegador ha interpretado el símbolo "+" como una operación de

concatenación de cadenas (cedana 425 + cadena 2), en lugar de como operación matemática
suma. Esto se debe a que la variable inicialmente es de tipo cadena.

31
Módulo 4
Creación de contenidos WEB

Conversión explícita

JavaScript proporciona funciones propias para realizar la conversión de tipos:

• parseFloat(): Convierte una cadena de caracteres a su correspondiente valor numérico

en formato de número real.

• parseInt(): Convierte una cadena de caracteres a su correspondiente valor numérico

en formato de número entero. Esta función permite un argumento adicional para indicar
la base (binario, octal o hexadecimal) a la que se desea convertir la cadena. Si no se
indica este segundo parámetro, por defecto la conversión se hace a base decimal. Esto
es importante tenerlo en cuenta ya que en caso de conversión a un número
hexadecimal los caracteres a,b,c,d,e,y f deben ser reconocidos como datos numéricos.
En caso de tratarse de una conversión a binario la cadena "10" representaría el número
2 y no el 10, etc.

• toString(): Convierte un valor numérico en una cadena de caracteres. Permite indicar

en a través de un parámetro la base de numeración en la que se encuentra el número
que se desea convertir. De esta manera, la sintaxis de esta función es la siguiente:

datonumerico.toString (base de numeración);

Se muestran a continuación algunos ejemplos de utilización de estas funciones en scripts.

Ejemplo de conversión de tipo explícita:

<html>

<head>
<title>
Ejemplo de conversión de tipo explícita.
</title>

<script language="javascript">
<!--
var VariableCadena = "425.5";
var VariableNumerica;
VariableNumerica = parseFloat (VariableCadena);
alert ("La variable numérica tiene valor " + VariableNumerica + " y es de tipo "
+typeof(VariableNumerica));
//-->
</script>

</head>

32
Módulo 4
Creación de contenidos WEB

<body>
Contenido de la página
</body>

</html>

El mensaje que muestra el navegador al cargar la página es el siguiente:

Figura 3.13.- Mensaje presentado por el navegador al cargar la página del ejemplo de
conversión explícita utilizando la función parseFloat().

Si en el ejemplo anterior utilizásemos la función parseInt(), la variable numérica

VariableNumerica tomaría valor 425. Esto se debe a que esta función realiza la conversión a
un número entero. Si la cadena contiene un número con decimales, esta función los trunca. En
este caso la salida que se obtendría sería la siguiente:

Figura 3.14.- Mensaje presentado por el navegador al cargar la página del ejemplo de
conversión explícita utilizando la función parseInt().

Si la cadena que se desea convertir tiene algún carácter que no sea numérico pueden suceder
varias cosas dependiendo de la posición de estos. De esta manera si el carácter no numérico
se encuentra en la primera posición, la función de conversión correspondiente indica que no se
trata de un número. Para ello utiliza la palabra reservada NaN que viene del inglés Not a
Number. Compruebe el siguiente ejemplo:

33
Módulo 4
Creación de contenidos WEB

Ejemplo de conversión de tipo explícita para una cadena alfanumérica con carácter no
numérico en la primera posición:

<html>

<head>

<title>
Ejemplo de conversión de tipo explícita con cadena alfanumérica.
</title>

<script language="javascript">
<!--
var VariableCadena = "A425.5";
var VariableNumerica;
VariableNumerica = parseInt (VariableCadena);
alert ("La variable numérica tiene valor " + VariableNumerica + " y es de tipo "
+typeof(VariableNumerica));
//-->
</script>

</head>

<body>
Contenido de la página
</body>

</html>

Figura 3.15.- Salida para conversión de cadena alfanumérica con un carácter alfabético
al principio de la cadena.

Ahora bien, si el carácter no numérico se encuentre en una posición intermedia, la función de

conversión convierte los dígitos situados a la izquierda hasta que se encuentra el primer
carácter no numérico. El resto lo trunca tal y como se muestra en el siguiente ejemplo:

34
Módulo 4
Creación de contenidos WEB

Ejemplo de conversión de tipo explícita para una cadena alfanumérica con carácter no
numérico en posiciones intermedias:

<html>

<head>

<title>
Ejemplo de conversión de tipo explícita con cadena alfanumérica.
</title>

<script language="javascript">
<!--
var VariableCadena = "42A5.5";
var VariableNumerica;
VariableNumerica = parseInt (VariableCadena);
alert ("La variable numérica tiene valor " + VariableNumerica + " y es de tipo "
+typeof(VariableNumerica));
//-->
</script>

</head>

<body>

Contenido de la página
</body>

</html>

En este caso, la salida que proporciona el navegador es la siguiente:

Figura 3.16.- Salida para conversión de cadena alfanumérica con un carácter alfabético
en posiciones intermedias de la cadena.

Como se ha indicado, la función parseInt() permite realizar la conversión de una cadena a un

número entero admitiendo un segundo argumento que indica la base en la que se encuentra la
cadena a convertir. En el siguiente ejemplo se realiza la conversión de dos cadenas que
representan un número en base hexadecimal y binario a un número entero.

35
Módulo 4
Creación de contenidos WEB

Ejemplo de conversión de tipo explícita para cadenas que representa números en base
hexadecimal y binario:

<html>

<head>
<title>
Ejemplo de conversión de cadenas en base hexadecimal y binario.
</title>

<script language="javascript">
<!--
var cadenaHexadecimal = "a1", cadenaBinaria = "101";
var datoNumerico1, datoNumerico2;
datoNumerico1 = parseInt (cadenaHexadecimal, 16);
datoNumerico2 = parseInt (cadenaBinaria, 2);
alert ("El dato hexadecimal " + "'" + cadenaHexadecimal + "'" + " vale " + datoNumerico1 + " en
decimal");
alert ("El dato binario " + "'" + cadenaBinaria + "'" + " vale " + datoNumerico2 + " en decimal");
//-->
</script>
</head>

<body>
Contenido de la página
</body>

</html>

La ejecución del código de este ejemplo genera la siguiente salida:

Figura 3.17.- Salida del ejemplo para conversión de cadenas alfanuméricas en base
hexadecimal y binario.

36
Módulo 4
Creación de contenidos WEB

Para finalizar con el apartado de conversión de tipos, se muestra un ejemplo de la función

toString() que permite convertir datos numéricos en cadenas de caracteres.

Ejemplo de conversión de un dato numérico a cadena de caracteres:

<html>

<head>

<title>
Ejemplo de conversión de dato numérico a cadena de caracteres: función toString().
</title>

<script language="javascript">
<!--
var DatoNumerico = 10;
var CadenaDecimal, CadenaHexadecimal, CadenaBinaria;

CadenaDecimal = DatoNumerico.toString ();

CadenaHexadecimal = DatoNumerico.toString (16);
CadenaBinaria = DatoNumerico.toString (2);

alert ("El número " + DatoNumerico + " se representa en decimal mediante la cadena " + "'" +
CadenaDecimal + "'" + " y es de tipo " + typeof(CadenaDecimal));
alert ("El número " + DatoNumerico + " se representa en hexadecimal mediante la cadena " +
"'" + CadenaHexadecimal + "'" + " y es de tipo " + typeof(CadenaHexadecimal));
alert ("El número " + DatoNumerico + " se representa en binario mediante la cadena " + "'" +
CadenaBinaria + "'" + " y es de tipo " + typeof(CadenaBinaria));

//-->
</script>

</head>

<body>
Código de la páginia

</body>

</html>

Al cargar el código anterior en el navegador, aparecen de manera consecutiva los siguientes

mensajes:

37
Módulo 4
Creación de contenidos WEB

Figura 3.18.- Salida del ejemplo para conversión de datos numéricos a cadenas de
caracteres.

3.3.5 Constantes.

Constantes

Una constante es un elemento del lenguaje que mantiene el mismo valor durante toda la
ejecución de un programa.

El programador puede definir sus propias constantes, o bien utilizar las constantes que
JavaScript tiene predefinidas.

JavaScript utiliza una serie de constantes propias para representar valores que son utilizados
por operaciones matemáticas comunes (como por ejemplo el número pi). Se puede acceder a
estas constantes del lenguaje a través del objeto Math que se estudiará en capítulos
posteriores.

Las constantes definidas por el usuario son variables creadas por el programador con un
valor fijo, que no puede cambiar en todo el programa. Normalmente, las constantes se
declaran al comienzo del programa, y es habitual representarlas mediante letras mayúsculas,
para diferenciarlas del resto de las variables. En JavaScript, no hay forma de asegurar que el
contenido de una variable no sea modificado a lo largo del programa. Sin embargo, los
lenguajes que sí soportan el uso de constantes en el sentido tradicional, no permiten que el
valor de una variable declarada como constante sea alterado, una vez que ya ha sido definido,
los intentos de cambio provocan errores, cosa que no sucede en JavaScript.

3.3.6 Operadores

38
Módulo 4
Creación de contenidos WEB

La idea general para escribir scripts consiste en introducir, evaluar, modificar y recuperar
información. Las herramientas de las que disponemos para realizar este trabajo son los
operadores.

Los operadores son símbolos e identificadores que representan el modo en que los
datos se modifican, y la forma en que una combinación de expresiones es evaluada.

JavaScript soporta tanto operadores binarios (que requieren de la existencia de dos

operandos) como unarios (que sólo necesitan un operando).

Los operadores en JS pueden dividirse en varios grupos funcionales:

1. Operadores aritméticos.
2. Operadores lógicos.
3. Operadores de comparación.
4. Operador condicional.
5. Operadores de bit.
6. Operadores de asignación.
7. Operadores de cadena.
8. Otros operadores.

Operadores aritméticos

Como su propio nombre indica, son aquellos que nos permiten realizar operaciones con
números. Una operación muy habitual es la de incrementar o decrementar en una unidad el
valor de una variable y después reasignar dicho valor a la propia variable (es decir, si x es una
variable, hacer x=x+1 o x=x-1). JavaScript incorpora operadores cortos para realizar estas
operaciones. Se trata de los operadores de incremento (operador '++') y
decremento(operador '--'). Ambos se pueden utilizar como prefijos (primero se modifica el
valor de la variable, y después se realiza la asignación) o como sufijos (primero se realiza la
asignación, y a continuación se incrementa o decrementa, según el caso).

En la siguiente figura se muestran los operadores aritméticos y el orden en que se evalúan

cuando varios de ellos forman parte de una expresión.

Figura 3.19.- Operadores aritméticos y orden de evaluación o precedencia.

39
Módulo 4
Creación de contenidos WEB

Finalmente, dentro de los operadores aritméticos se encuadra el operador unario negación ('-
'), que permite cambiar el signo de una variable:

Ejemplos:

var x = 5, y, z, n;

y = -x; //La variable y vale -5

z = x++; //z vale 5, x vale 6

n = ++x; //Tanto n como x valen 6

Operadores lógicos

Los operadores lógicos o booleanos se utilizan conjuntamente con expresiones que

devuelven valores lógicos, y son los siguientes: && ("AND"), || ("OR") y ! ("NOT").

El operador "AND" devuelve true si las dos expresiones que evalúa (exp1 && exp2) son
verdaderas.

El operador "OR" devuelve true si una de las expresiones que evalúa (exp1 || exp2) es
verdadera.

El operador "NOT" devuelve true si la expresión que evalúa (!exp1) es falsa, y false si es
verdadera.

En la siguiente figura se muestran los tres operadores lógicos que soporta JavaScript y su
orden de evaluación cuando varios forman parte de una expresión:

Figura 3.20.- Operadores lógicos y orden de evaluación o precedencia.

Operadores de comparación

Los operadores de comparación se utilizan tal y como su nombre indica para comparar
expresiones y normalmente se utilizan en la toma de decisiones en las sentencias
condicionales que se estudiarán en el siguiente capítulo. Las expresiones que incluyen
operadores de comparación permiten obtener un resultado que puede ser true (verdadero) ó
false (falso). En función de dicho resultado se tomará una decisión u otra.

En la siguiente figura se muestran los operadores de comparación y su orden de evaluación:

40
Módulo 4
Creación de contenidos WEB

Figura 3.21.- Operadores de comparación y orden de evaluación o precedencia.

El operador igualdad "==" devuelve true si ambos operandos son iguales.

Con el operador de igualdad "==" se deben considerar las siguientes reglas de comparación :

1. Si uno de los valores es null y el otro es undefined se devuelve true.

2. Si los tipos de los dos valores a comparar difieren, se intenta convertir uno de ellos al tipo
del otro:

2.1. Si uno es numérico y el otro cadena, se convierte la cadena a numérico.

2.2. Si uno es numérico y el otro booleano, true se convierte a 1 y false a 0.

El operador desigual "!=" devuelve true si ambos operandos son distintos.

El operador identidad "===" también denominado identidad estricta, devuelve true cuando los
dos operandos tienen el mismo valor y son del mismo tipo. La diferencia con el operador
igualdad "==" estriba en el detalle de que en este último las variables no tienen por que ser del
mismo tipo. Por ejemplo, si se tienen dos variables una de tipo cadena denominada cadena y
tiene valor "45" (cadena="45") y otra de tipo numérico denominada numero de valor 45
(numero=45), al compararlas con el operador igualdad (es cadena==numero??) este
devolvería valor true. Sin embargo, si se comparan mediante el operador identidad (es
cadena===numero??) este devolvería valor false ya que las variables son de distinto tipo.

El operador no identidad "!==" es el inverso al operador identidad. Genera un resultado true

cuando los dos operandos que evalúa no son estrictamente iguales.

El operador mayor-que ">" devuelve true si el operando de la izquierda es estrictamente

mayor que el de la derecha.

El operador mayor-o-igual-que ">=" devuelve true si el operando de la izquierda es mayor o

igual que el de la derecha.

41
Módulo 4
Creación de contenidos WEB

El operador menor-que "<" devuelve true si el operando de la izquierda es estrictamente

menor que el de la derecha.

El operador menor-o-igual-que "<=" devuelve true si el operando de la izquierda es menor o

igual que el de la derecha.

Operadores condicionales

JavaScript incorpora dos operadores ('?' y ':'), que sirven para formar expresiones
condicionales. La sintaxis es la siguiente:

variable =(condición) ? <sentencia si true> : <sentencia si false>;

donde la condición debe ser evaluable a un valor lógico (true ó false). El operador condicional
funciona del siguiente modo: se evalúa la condición, y si es verdadera (es decir, si su valor
es true), se ejecuta la sentencia que se encuentra antes de los dos puntos (:), y si es falsa, se
ejecuta la otra sentencia.

Ejemplo operador condicional:

a = x > 0 ? 1: 2;

Si el valor de la variable x es positivo, el resultado del operador anterior es a=1. En caso

contrario, será a=2.

El operador condicional equivale a la sentencia condicional if que se estudiará en el siguiente

capítulo.

Operadores de bit

Como sabemos, todas las variables, independientemente de su tipo, se almacenan en la

memoria del ordenador como una sucesión de bits, utilizando el sistema de numeración binario
(en base 2). A una variable numérica se le puede asignar un número en formato decimal, octal
o hexadecimal, JavaScript los transforma en binarios para almacenarlos en memoria. Para
operar entre variables a nivel de bit se utilizan los operadores de bit. En la siguiente figura se
muestran estos operadores y su orden de evaluación:

Figura 3.22.- Operadores de bit y orden de evaluación o precedencia.

El operador "OR (|)" realiza la operación OR bit a bit.

42
Módulo 4
Creación de contenidos WEB

El operador "XOR (^)" realiza la operación OR- Exclusiva bit a bit.

El operador "AND (&)" realiza la operación AND bit a bit.

El operador "desplazamiento a la izquierda (<<)" rellena el operando1 con tantos 0's por la
derecha como indique el operando2.

El operador "desplazamiento a la derecha con propagación de signo (>>)" rellena el

operando1 con tantos 1's ó 0's por la izquierda como indique el operando2. El valor de relleno
lo indica el bit más a la izquierda del operando1.

El operador "desplazamiento a la derecha con rellenado de 0's (>>>)" rellena el operando1

con tantos 0's por la izquierda como indique el operando2.

El operador "complemento a uno (~)" devuelve el complemento a uno del operando.

Los operadores de bits no son muy utilizados en el desarrollo de Scripts, pero es

recomendable saber de su existencia ya que en ocasiones pueden resultar de gran utilidad.

Operadores de asignación

El operador de asignación (=) es uno de lo más utilizados, y su función básica es asignar un

valor a una variable. Por ejemplo, la expresión x=10 asigna el valor 10 a la variable x,
guardando ese valor en memoria. La asignación siempre funciona de derecha a izquierda, de
modo que la expresión 10=x provoca un error, al intentar asignar un nuevo valor a 10.

JavaScript soporta otros 11 operadores de asignación, que son, en realidad, una combinación
del operador de asignación y operadores aritméticos o de bits (véase la siguiente figura):

Figura 3.23.- Operadores de asignación.

Operadores de cadena

El conjunto de operadores de cadena de JavaScript incluye todos los operadores de

comparación (cuando las expresiones comparadas son cadenas de caracteres) y el operador
de concatenación (representado por el símbolo '+'). Concatenar dos cadenas significa unirlas:
escribir una a continuación de la otra.

43
Módulo 4
Creación de contenidos WEB

Ejemplos:

var nombre1 ="Miguel";

var nombre2="Ángel";

var nombre_completo;

nombre_completo = nombre1+" "+nombre2; //El valor de la variable nombre_completo es la

cadena "Miguel Ángel". El espacio en blanco lo hemos puesto contatenando la cadena " " a
continuación de nombre1.

Otros operadores

El operador typeof

Este operador es un operador unario que devuelve una cadena describiendo el tipo de datos
que corresponde con el operando que se le pasa. De este modo, podemos saber si un
operando es una función (tipo function), un valor numérico (tipo number), una cadena de
caracteres (tipo string), un valor booleano (tipo boolean), un objeto (tipo object) o si es un valor
sin definir (tipo undefined).

Este operador es especialmente útil cuando queremos comprobar si una variable ha sido bien
definida para el tipo de operación al que se la va a someter, tal y como ha sido utilizado en
ejemplos anteriores.

Ejemplo:

var cadena = "Hola";

typeof cadena -> string

El operador new

El operador new permite crear instancias a nuevos objetos. En principio, todavía no se tienen
conocimientos a cerca de lo que es un objeto en JavaScript. En capítulos posteriores, cuando
se trate el tema de objetos, aparecerá este operador. En principio baste con saber que se trata
de un operador.

El operador delete

Como el operador new, el operador delete está relacionado con objetos, permite eliminar
objetos previamente creados con el operador new. Su utilidad se describirá posteriormente.

PRECEDENCIA DE LOS OPERADORES

Al comentar los distintos tipos de operadores, se han ido indicando las precedencias u orden
de evaluación de los mismos. Cuando se utilicen expresiones en las que aparezca más de un
operador, se debe tener cuidado, porque JavaScript no siempre evalúa las expresiones de
izquierda a derecha. El lenguaje posee un orden predefinido de precedencia entre los
operadores, que es importante conocer, aunque no imprescindible: si utilizamos paréntesis
no quedará ninguna duda sobre el orden en que se efectuarán las operaciones.

44
Módulo 4
Creación de contenidos WEB

Por ejemplo, si escribimos x=2*3+10, sin paréntesis, JavaScript efectúa primero el producto
(pues el operador * tiene mayor precedencia que +) y después la suma, dando como resultado
16. Si queremos que se realice en primer lugar la suma, debemos poner paréntesis para
indicarlo: x=2*(3+10).

45
Módulo 4
Creación de contenidos WEB

3.4 ESTRUCTURAS DE CONTROL DE FLUJO

Las estructuras de control de flujo, tal y como su nombre indica, permiten modificar el flujo de
ejecución de un script en función de una serie de condiciones. De esta manera, la ejecución
deja de ser totalmente lineal, y puede haber partes del script que no se ejecuten, o que se
ejecuten más de una vez.

Las estructuras de control de flujo se dividen en dos grandes grupos:

• Sentencias condicionales: IF, IF...ELSE, SWITCH

• Bucles: FOR, FOR...IN, WHILE, DO WHILE

3.4.1.- Sentencias Condicionales.

A través de las sentencias if y else se puede tomar una decisión en función del valor de una
expresión, y hacer que el programa elija entre dos caminos de ejecución diferentes. En
definitiva, en función del valor (true o false) de la condición se ejecutará o no un bloque de
código.

Sentencia condicional "if" básica.

Su sintaxis es la siguiente:

if (condición) {
[ sentencias ]
}

La "condición" debe ser una expresión lógica: es decir, algo que pueda ser evaluable a
verdadero (true) o falso (false). Si el resultado de evaluar la condición es true, se ejecutan las
sentencias especificadas entre llaves {}, y si el resultado es false, JavaScript ignora las
sentencias y continúa a partir de la llave de cierre }.

Véase el siguiente ejemplo:

Ejemplo de sentencia condicional simple.

<html>

<head>

<title>
Ejemplo de sentencia condicional simple (if básico).
</title>

<script language="javascript">

46
Módulo 4
Creación de contenidos WEB

<!--
var edad;
edad = prompt ("Introduzca su edad: ", "");
edad = parseInt (edad); //La función prompt() siempre genera una cadena.

if (edad >= 18) // Condicional para comprobar si el usuario es mayor de edad

{
alert ("Es mayor de edad.");
}
//-->
</script>

</head>

<body>
Contenido de la página
</body>

</html>

En el ejemplo anterior se debe destacar la aparición de una nueva función, la función

prompt(). Esta función muestra en pantalla el típico cuadro de diálogo que solicita al usuario
algún tipo de dato o información. La sintaxis de esta función es:

prompt(mensaje, respuesta por defecto);

Como se observa requiere dos parámetros:

mensaje: Es el mensaje que se le muestra al usuario para informarle del dato que se le está
solicitando.

respuesta por defecto: Permite proporcionar una respuesta por defecto. Se utiliza cuando se
espera una respuesta muy generalizada por parte de los usuarios con el fin de facilitar la
entrada de datos. Por ejemplo, si se solicita la nacionalidad de los usuarios y se espera que la
mayor parte de estos seán españoles, se escribiría la siguiente línea en el Script:

promt("Indique su nacionalidad","Española")

Otro aspecto a destacar en este ejemplo es el hecho de haber convertido la variable edad a un
número entero, ya que la función prompt() siempre devuelve una cadena, y la comparación
posterior (edad >= 18) requiere valores numéricos. Esta conversión realmente no sería
necesaria, el script funcionaría exactamente igual aunque no se realizara. Pero en un lenguaje
de programación fuertemente tipado como C o C++ este código no funcionaría. En cualquier
caso, se ha incluido ya que resulta muy aconsejable que todas las operaciones se realicen con
el tipo de dato adecuado.

47
Módulo 4
Creación de contenidos WEB

Volviendo al ejemplo, al cargar la página en el navegador se obtendría el siguiente cuadro de

diálogo:

Figura 3.24.- Cuadro de diálogo obtenido con la función promt().

Si se introduce una edad mayor o igual a 18 años se mostrará un mensaje indicando que el
usuario es mayor de edad.

Figura 3.25.- Mensaje obtenido en el ejemplo del condicional básico.

Las sentencias if se pueden anidar, esto es, podemos poner, dentro de un bloque if, otras
sentencias if.

Sentencia condicional completa: "if...else"

En ocasiones, la sentencia if no es suficiente ya que se puede desear ejecutar un bloque de

sentencias si la condición es verdadera (true) y otro en caso de que sea falsa (false). En este
caso, se hace uso de la sentencia if...else, cuya sintaxis es la siguiente:

if (condición) {
[ sentencias a ejecutar si la
condición es true ]
} else {
[ sentencias a ejecutar si la
condición es false ]
}

Se evalúa la expresión condicional: si el resultado de dicha evaluación es true, se ejecutan las

instrucciones del bloque if, y si es false, se ejecutan las sentencias del bloque else.

Continuando con el ejemplo anterior, puede resultar de interés que en el caso de que el
usuario sea mayor de edad se presente en pantalla un mensaje y si no lo es se muestre otro

48
Módulo 4
Creación de contenidos WEB

indicándole por ejemplo que no tiene acceso a los contenidos por ser menor de edad. Para ello
se modificaría el código anterior de la siguiente manera:

Ejemplo de sentencia condicional completa (if...else).

<html>

<head>

<title>
Ejemplo de sentencia condicional simple (if básico).
</title>

<script language="javascript">
<!--
var edad;
edad = prompt ("Introduzca su edad: ", "");
edad = parseInt (edad); //La función prompt() siempre genera una cadena.

if (edad >= 18) // Condicional para comprobar si el usuario es mayor de edad

{
alert ("Es mayor de edad.");
}

else
{
alert ("Lo sentimos, es menor de edad y por tanto no tiene acceso a los contenidos de esta
página.");
}

//-->
</script>

</head>

<body>
Contenido de la página
</body>

</html>

Cargue el ejemplo anterior en el navegador y verifique los resultados.

Al igual que ocurre con la sentencia if simple, las estructuras if...else pueden anidarse.

49
Módulo 4
Creación de contenidos WEB

Condiciones compuestas.

En el capítulo anterior se estudiaron los diferentes tipos de operadores. Una de las principales
utilidades de los operadores lógicos (fundamentalmente AND "&&" y OR "||") es la construcción
de condiciones compuestas. Por ejemplo, supóngase que deseáramos ejecutar un bloque de
código en el caso de que la edad del usuario esté comprendida entre 18 y 65 años. En este
caso, se escribiría la siguiente línea en el Script:

if ((edad>=18) && (edad<=65)) //Condición Compuesta

//Bloque de sentencias a ejecutar si la edad está comprendida entre 18 y 65 años

Se debe indicar que cuando se comparan cadenas JavaScript distingue entre mayúsculas y
minúsculas ("coche" es diferente que "Coche", por ejemplo). También se debe tener especial
cuidado con los espacios en blanco, ya que aunque no son visibles, son caracteres.

Comparaciones múltiples: sentencia "Switch"

Se utiliza para comparar un dato entre un conjunto de posibles valores. Esto se puede
realizar también utilizando varias sentencias if, pero la sentencia switch es mucho más clara, y,
además, permite definir un conjunto de sentencias por defecto, en el caso de que el dato no
tenga un valor con qué compararlo. Su sintaxis es:

switch (condición)
{
case opcion1:
[acciones]
break;
.....................
case opcionN:
[acciones]
break;
default:
[acciones]
}

Si la condición (dato a comparar) coincide con "opcion1", se ejecutan las sentencias de dicho
bloque, y JavaScript ignora el resto del switch. Si no, se compara con "opcion2": si son
iguales, se ejecutan las sentencias correspondientes, y si no, se compara con el siguiente
valor. En caso de no coincidir con ninguna de la opciones especificadas en el switch, se
realizan las acciones del bloque "default". El bloque "default" es opcional, si no se desea no
tiene por que ponerse.

Es necesario poner la sentencia "break" en cada bloque "case", de lo contrario, una vez que
JavaScript se ha "metido" por una de las ramas del switch, ejecutaría, no sólo las sentencias

50
Módulo 4
Creación de contenidos WEB

correspondientes a ese bloque, sino también todas las que tiene por debajo, pues ya no realiza
ninguna comparación más.

En el siguiente ejemplo se puede verificar la utilidad de la sentencia switch.

Ejemplo de comparación múltiple: sentencia switch.

<html>

<head>

<title>
Ejemplo Sentencia de comparación múltiple: Switch.
</title>

<script language="javascript">
<!--
var numeroMes;

numeroMes = prompt ("Indique un número comprendido entre 1 y 12 (mes del año):", "");
numeroMes = parseInt (numeroMes);

switch (numeroMes)
{
case 1:
numeroMes = "Enero";
break;
case 2:
numeroMes = "Febrero";
break;
case 3:
numeroMes = "Marzo";
break;
case 4:
numeroMes = "Abril";
break;
case 5:
numeroMes = "Mayo";
break;
case 6:
numeroMes = "Junio";
break;
case 7:
numeroMes = "Julio";
break;
case 8:
numeroMes = "Agosto";
break;
case 9:

51
Módulo 4
Creación de contenidos WEB

numeroMes = "Septiembre";
break;
case 10:
numeroMes = "Octubre";
break;
case 11:
numeroMes = "Noviembre";
break;
case 12:
numeroMes = "Diciembre";
break;
default:
numeroMes = "ERROR: El número introducido no se corresponde con ningún mes del año.";
}

alert ("El número de mes introducido se corresponde con el mes " + numeroMes);

//-->
</script>

</head>

<body>
Codigo de la página
</body>

</html>

3.4.2.- Bucles.

Los bucles tienen muchas aplicaciones: se suelen utilizar para ejecutar un bloque de código
varias veces, para contar, o para recorrer objetos o estructuras compuestas por varios
elementos, como los arrays que se estudiarán en capítulos posteriores. En función del número
de veces que se desee ejecutar el bucle, se pueden utilizar diferentes sentencias.

Ejecución de un número determinado de veces: sentencia for.

La sentencia for se para ejecutar un bloque de código un número determinado de veces. Su

sintaxis es la siguiente:

for (inicialización;condición;actualización)
{
[ sentencias ]
}

52
Módulo 4
Creación de contenidos WEB

La inicialización se utiliza para declarar e inicializar la variable que actúa como contador del
bucle, la condición es la expresión condicional que utiliza la sentencia para dar por finalizado
el bucle, y la actualización le indica a la sentencia la manera en que debe ir actualizando la
variable utilizada como contador.

Al igual que sucede con las sentencias if, los bucles for pueden anidarse.

A modo de ejemplo verifique el funcionamiento del siguiente código.

Ejemplo: programa que imprime los números pares entre 0 y 100 e introduce un salto de
línea en los múltiplos de 10 utilizando un bucle con la sentencia for.

<html>
<head>

<title>
Ejemplo bucle for.
</title>

<script language="javascript">
<!--
var i;

for (i=1; i<=100; i++)

{
if (i%2==0) //i es par
{
document.write(i+", ");
}

//Cada vez que se llega a un múltiplo de 10, se introduce un salto de línea

if (i%10==0)
{
document.write("<BR>");
}
}

//-->
</script>
</head>
<body>

</body>
</html>

En este ejemplo aparece una línea con un código desconocido por ahora: document.write().
De momento no se tienen los conocimientos para poder comprenderla, solamente decir que lo
que hace es escribir datos en una página. En capítulos posteriores se hablará de ello. De
momento, verifique la ejecución del código del ejemplo. Su navegador tendrá el siguiente
aspecto tras cargar la página del ejemplo.

53
Módulo 4
Creación de contenidos WEB

Figura 3.26.- Aspecto del navegador tras cargar el código del ejemplo de la sentencia
for.

Ejecución de un número indeterminado de veces: sentencia while

La diferencia entre las sentencias for y while estriba en el hecho de que esta última no incluye
en su declaración la inicialización de la variable de control del bucle, ni su actualización
(incremento o decremento). Por ello, debemos declarar e inicializar dicha variable antes del
comienzo del bucle, y actualizarla dentro del cuerpo del mismo (es decir, entre las llaves {}).
De esta manera, el número de veces que se ejecuta el bloque de código contenido dentro del
while no está definido de antemano y por tanto se ejecutará un número indeterminado de
veces que dependerá, en gran medida, del propio usuario.

En cualquier caso, al igual que el bucle for, se utiliza para realizar tareas repetitivas. Todo
aquello que se puede implementar por medio de un bucle for, se puede implementar de la
misma manera con un bucle while, y viceversa.

Su sintaxis es la siguiente:

while (condición)
{
[ sentencias ]
}

54
Módulo 4
Creación de contenidos WEB

La condición es una expresión booleana (lógica) que, si se evalúa a true, conlleva a la

ejecución de las sentencias del cuerpo del bucle. Una vez finalizada la ejecución, se vuelve a
evaluar la condición, de modo que, si sigue siendo cierta, se realizará una nueva iteración del
bucle. Este proceso continúa hasta que la expresión deja de ser cierta (su valor es false),
momento en que el programa "se sale" del bucle. Si, la primera vez que se evalúa la condición,
ésta ya es falsa, el bucle no se ejecuta ni una sola vez.

Se debe prestar especial cuidado para asegurar que la condición se hace falsa en algún
momento, para evitar bucles infinitos.

Se muestra a continuación el mismo ejemplo que para el caso que la sentencia for, pero
implementando ahora el bucle con una sentencia while.

Ejemplo: programa que imprime los números pares entre 0 y 100 e introduce un salto de
línea en los múltiplos de 10 utilizando un bucle con la sentencia while.

<html>
<head>
<title>
Ejemplo bucle while.
</title>
<script language="javascript">
<!--
var i=1; //Se inicializa la variable que controla el bucle while

while (i<=100)
{
if (i%2==0) //i es par
{
document.write(i+", ");
}
if (i%10==0)
{
document.write("<BR>");
}
i++; // Se incrementa la variable i
}
//-->
</script>
</head>

<body>
</body>

</html>

Verifique como al cargar este ejemplo en el navegador se obtiene el mismo resultado que en el
caso del ejemplo del bucle for (Figura 3. 4. 2. 26).

Al igual que con el resto de las sentencias vistas hasta el momento, los bucles while se pueden
anidar.

55
Módulo 4
Creación de contenidos WEB

Ejecución de al menos una vez: sentencia do...while

Funciona como el bucle while, con la excepción de que la condición no se comprueba hasta
que no se ha realizado una iteración, de manera que el cuerpo del bucle se ejecuta, al
menos, una vez.

Su sintaxis es la siguiente:

do
{
[ sentencias ]
} while (condición)

Cuando JavaScript se encuentra con un bucle de este tipo, se ejecutan todas las sentencias
del bucle, y se evalúa la condición: si ésta es verdadera, se vuelven a ejecutar las sentencias,
y si es falsa, se sale del bucle. Salvo la primera iteración, que se realiza siempre, para el resto
de las iteraciones funciona igual que un bucle while.

Resumen:

Los bucles for y while son equivalentes: sólo se diferencian en su sintaxis, y en la forma
en que debemos utilizarlos. En ambos, el cuerpo de instrucciones se ejecuta 0 ó más
veces.

El bucle do...while es como un bucle while, con la diferencia de que sus sentencias se
ejecutan 1 ó más veces.

LAS SENTENCIAS BREAK Y CONTINUE

En ocasiones, es necesario dar por finalizado un bucle antes de que la condición del mismo se
evalúe a "false", o incluso antes de alcanzar cierta posición dentro del cuerpo del bucle. Para
ello, se utilizan las sentencias break y continue: la primera finaliza la ejecución del bucle, y la
segunda finaliza la iteración actual del bucle, volviendo al principio del mismo.

La sentencia "Break"

Esta instrucción interrumpe la ejecución de un bucle for o while, pasando a la instrucción que
aparece inmediatamente después de la llave de cierre (}) del bucle. Verifique el funcionamiento
del siguiente código.

Ejemplo:

Se pide la contraseña, hasta que se introduce la contraseña correcta (que es "hola"). En ese
caso, aparece una ventana nueva con el mensaje "Palabra mágica", y se interrumpe la
ejecución del bucle (ya no seguimos pidiendo la contraseña). Si nunca se introduce "hola"
como contraseña, el bucle seguirá ejecutándose hasta que el usuario introduzca la palabra
"Adiós", en señal de que ya no quiere seguir probando contraseñas.

56
Módulo 4
Creación de contenidos WEB

<html>

<head>

<title>
Ejemplo finalización de bucles: sentencia break.
</title>

<script language="javascript">
<!--
do
{
password= prompt("Introduzca clave" , "*****");
if (password == "hola")
{
alert("Palabra mágica");
break;
}
else if (password != "Adiós")
{
alert("Contraseña incorrecta: inténtelo de nuevo");
}
}
while (password != "Adiós")

//-->
</script>

</head>

<body>
</body>

</html>

La sentencia "continue"

A diferencia de la sentencia break, continue no finaliza la ejecución del bucle, sino que "se
salta" las sentencias del cuerpo del bucle posteriores a ella, y evalúa de nuevo la expresión del
bucle (si existe), continuando con la siguiente iteración.

57
Módulo 4
Creación de contenidos WEB

Ejemplo:

El siguiente Script imprime en pantalla los números impares comprendidos entre 1 y 5, sin
incluir al último.

<html>

<head>

<title>
Ejemplo finalización de bucles: sentencia continue.
</title>

<script language="javascript">
<!--
var contador=1;

while (contador<5)
{
if ((contador%2) == 0)
{
contador++;
continue;
}

document.write("Número=" +contador+ "<BR>");

contador++;
} // fin del while

//-->
</script>

</head>

<body>
</body>

</html>

58
Módulo 4
Creación de contenidos WEB

3.5 FUNCIONES

Suele ser habitual que ciertas partes del código de un script se repitan un número
indeterminado de veces durante la ejecución del mismo. En ocasiones, se quiere que algunas
secciones del código se ejecuten en cuanto la página Web se cargue en el navegador del
usuario. Otras veces, se necesita que el código actúe después de que el cliente nos haya
enviado información a través de un formulario HTML. Éstos son ejemplos de situaciones a
partir de las cuales surgió la idea de dividir el código del script en secciones menores, para que
cada una de ellas sirva a un propósito específico. Estas secciones de código que sirven para
ejecutar unas acciones determinadas, se denominan funciones. Las funciones existentes en
todos los lenguajes de programación.

Una función JavaScript no es más que una sección separada de código a la que se le ha
dado un nombre, y que se encarga de realizar una tarea determinada dentro del
programa cuando se le invoca.

Utilizando el nombre de una función, un script puede llamar a esta sección de código tantas
veces como quiera, en los momentos que lo necesite. Desde una función se pueden hacer
llamadas a otras funciones.

Las funciones pueden recibir valores (denominados argumentos ó parámetros) desde las
sentencias que las llaman, y pueden también devolver valores a dichas sentencias. Los
argumentos actúan como variables dentro del cuerpo de la función (que delimitaremos
mediante un par de llaves, {}, como se hacía en los bucles).

Las funciones dividen las tareas que debe realizar un script, agrupando instrucciones
relacionadas para la ejecución de una tarea bajo un nombre (el nombre de la función).
De este modo, siempre que el script necesite hacer una tarea determinada, sólo tendrá
que llamar a la función correspondiente.

Indicar que además de las funciones que pueda desarrollar el usuario, JavaSript dispone de un
conjunto de funciones predefinidas. Esto sucede en la mayoría de lenguajes de programación
actuales. Por tanto se debe distinguir entre las funciones definidas por el usuario y las
funciones predefinidas del lenguaje.

3.5.1 Funciones de usuario: definición y utilización.

Elementos de una función.

Los elementos que forman una función son los siguientes:

1. El identificador de función: function.

2. El nombre de la función.

3. La lista de argumentos.

4. Conjunto de sentencias que la definen.

59
Módulo 4
Creación de contenidos WEB

Declaración de funciones.

Las funciones pueden declararse en cualquier parte de la página html. Habitualmente, por
claridad.,se definen en la sección <head>.

La sintaxis de declaración de funciones es la siguiente:

function nombre_funcion([argumento1],[argumento2],....,[argumentoN])
{
[sentencias que definen el código de la función]
}

La palabra reservada function se utiliza para indicar que el bloque de código que comprende
es una función. A continuación de esta palabra reservada se especifica el nombre de la función
(nombre_funcion), que actúa como identificador del conjunto de sentencias comprendidas
entre las llaves: cada función tendrá un nombre diferente, que debe ser un identificador válido
en JavaScript.

Encerrados entre paréntesis y separados por comas, se ponen los nombres de los argumentos
de la función (si es que existen). Los argumentos son variables locales a la función, que
reciben valores cada vez que se llama a la función. Si la función no requiere ningún
argumento, debemos escribir igualmente los paréntesis:

function nombre_funcion()
{
[sentencias que definen el código de la función]
}

Las sentencias, que conforman el núcleo de la función, se ejecutan cada vez que se llama a la
misma, con los valores concretos que se le hayan pasado como argumentos.

Las funciones deben declararse entre un par de etiquetas <SCRIPT> y </SCRIPT>, y

aparte de la declaración de otras funciones o estructuras de control.

Además, es recomendable declarar todas las funciones en un script que esté incluido en
la cabecera del documento (en la sección <HEAD>). De esta manera, todas las funciones
estarán disponibles nada más cargar la página en el navegador del cliente.

Llamada a funciones

Una vez que tenemos declarada una función, ésta no se ejecuta hasta que no es llamada por
primera vez desde un script. La forma de llamar a una función declarada como function
nombre_funcion (argumento1,...,argumentoN) es mediante una sentencia del tipo:

nombre_funcion (valor1,...,valorN);

En esta instrucción, valor1,...,valorN son los valores que se le pasa a la función como
parámetros o argumentos. En este momento, JavaScript hace las asignaciones:

60
Módulo 4
Creación de contenidos WEB

argumento1=valor1;
..................
argumentoN=valorN;

y ejecuta las sentencias que forman el cuerpo de la función que ha sido llamada. Una vez
finalizadas éstas, la ejecución del programa se retoma en la sentencia situada a continuación
de la llamada a la función.

En el caso de que la función a la que se desea llamar no tenga argumentos, la llamada sería
de la forma:

nombre_funcion ();

El resultado de la llamada a una función es equivalente a insertar, en ese punto del

programa, todas las sentencias que definen el código de la función. Pero, si dicho
código debemos ejecutarlo varias veces, es mucho más sencillo darle un nombre y
llamarlo cada vez que lo necesitemos por dicho nombre: el código sólo lo escribimos
una vez (en la declaración de la función), en lugar de repetirlo cada vez que lo
necesitamos.

También se puede lanzar la ejecución de una función mediante eventos (se estudiaran éstos y
los manejadores de eventos en capítulos posteriores).

Vease un ejemplo en el que se hace uso de una función sin argumentos, declarada en la
cabecera de un documento HTML, que es llamada varias veces desde un bucle do...while,
cada vez que el usuario desea ver los siguientes 25 números pares. El control de la salida del
bucle se hace mediante la función de JavaScript confirm("texto"), que muestra una ventana
de confirmación al usuario, y devuelve un valor booleano, que valdrá true si el usuario hace
click en el botón "Aceptar", y false si hace click en "Cancelar". Como se podrá observar al
cargar esta página en el navegador, la función confirm() es muy similar a la función prompt().

Ejemplo de definición y llamada a una función sin argumentos:

<HTML>
<HEAD>

<TITLE>

Ejemplo de definición y llamada a funciones sin argumentos

</TITLE>

<SCRIPT LANGUAGE ="JavaScript">

function ImprimePares()
{
k=k+50;
for (i=k+1-50; i<=k; i++)

{
if (i%2==0) {

61
Módulo 4
Creación de contenidos WEB

document.write(i+", ");}
if (i%10==0) {
document.write("<BR>");}
} //fin del for
} //fin de la función
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE ="JavaScript">

var k=0;
document.write("Números pares entre 1 y ..." + "<BR>");
do

{
ImprimePares(); //llamada a la función
} while(confirm("¿Deseas ver los siguientes 25 números pares?"));
</SCRIPT>

</BODY>

</HTML>

Funciones con argumentos

Las funciones con argumentos son sumamente útiles, porque, no sólo pueden ser utilizadas
varias veces a lo largo de un programa, sino que los valores que se le pasan pueden ser
diferentes en cada llamada.

El siguiente ejemplo es una modificación del programa del ejemplo anterior. Esta vez,
mediante la función prompt() de JavaScript, se le pregunta al usuario por un límite superior (el
programa mostrará los números pares entre 1 y dicho límite). Este límite se utiliza como
argumento para la función ImprimePares():

Ejemplo de definición y llamada a una función con argumentos:

<HTML>
<HEAD>

<TITLE>
Ejemplo de llamada a una función con argumentos
</TITLE>

<SCRIPT LANGUAGE ="JavaScript">

function ImprimePares(cota)
{
document.write ("Números pares entre 1 y "+ cota + "<H3>");

62
Módulo 4
Creación de contenidos WEB

for (i=1; i<=cota; i++) {

if (i%2==0) {
document.write(i+", ");}
if (i%10==0) {
document.write("<BR>");}
} //fin del for
} //fin de la función
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE ="JavaScript">

var limite=0;
limite=prompt("Introduzca un límite para imprimir números pares"," ");
ImprimePares(limite); //llamada a la función con un argumento: el límite de los números pares
a imprimir.
</SCRIPT>

</BODY>

</HTML>

El aspecto que presenta el navegador al cargar la página del ejemplo anterior es el siguiente:

Figura 3.27.- Aspecto del navegador al cargar el ejemplo de llamada a una función con
argumentos.

En este ejemplo, la función ImprimePares(cota) es llamada una sola vez, pasándole como
parámetro el valor introducido por el usuario (supongamos que es 100), que está guardado en

63
Módulo 4
Creación de contenidos WEB

la variable "limite". Al ejecutarse la sentencia de llamada (ImprimePares(limite);), es decir,

ImprimePares(100);), JavaScript crea una variable llamada "cota" (variable local de la función)
y le asigna el valor del argumento (cota=100;). Se ejecutan todas las sentencias del cuerpo de
la función, con ese valor de la variable cota. Si esta variable cambiase de valor a lo largo de la
función, esto no afectaría a la variable que fue pasada como argumento (en este caso, limite),
por ser cota una variable local de la función. Esto se debe a que el parámetro (limite) se pasa
"por valor", y no "por referencia" (como sucede con los arrays y los punteros en otros lenguajes
de programación).

Funciones que devuelven valores

Las funciones pueden devolver valores como resultado de su ejecución. Esta devolución o
retorno de valores es similar a la devolución de un valor por parte de una expresión: el valor
devuelto puede ser asignado a una variable, o también ser utilizado dentro de una expresión.
Para devolver un valor desde una función, se utiliza la palabra clave return, seguida del valor
(o de la variable) que deseamos que la función devuelva.

El siguiente ejemplo utiliza una función que recibe tres argumentos y devuelve un valor: el
mayor de los tres números introducidos como argumentos. La función es llamada dentro de un
bucle do...while, cuya condición de salida se evalúa a través de una pregunta al usuario:

Ejemplo de definición y llamada a una función con argumentos y que devuelve un valor:

<HTML>
<HEAD>

<TITLE>
Ejemplo de llamada a una función con argumentos que devuelve un valor
</TITLE>

<SCRIPT LANGUAGE ="JavaScript">

function CalculaMayor(num1,num2,num3)
{
var mayor=0;
if (num1>num2) {
mayor=num1; }
else {
mayor=num2; }
if (num3>mayor) {
mayor=num3; }
return mayor; //valor devuelto
} //fin de la función
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE ="JavaScript">

var dato1=0, dato2=0, dato3=0;
do {
dato1=prompt("Introduce el primer valor a comparar: "," ");

64
Módulo 4
Creación de contenidos WEB

dato2=prompt("Introduce el segundo valor a comparar: "," ");

dato3=prompt("Introduce el tercer valor a comparar: "," ");

dato1=parseInt(dato1);
dato2=parseInt(dato2);
dato3=parseInt(dato3);

document.write("<H3>El mayor valor de ");

document.write(dato1 + ", " + dato2 + " y " + dato3 + " es: </H3>");
document.write("<H1>" + CalculaMayor(dato1, dato2, dato3) + "</H1>");
} while (confirm("¿Deseas continuar?"));

</SCRIPT>

</BODY>

</HTML>

Dentro del código se utiliza la función de JavaScript parseInt(), que recibe como parámetro una
cadena de caracteres y la convierte en un número entero. Es necesario utilizarla porque la
función prompt() devuelve una cadena de caracteres, y nosotros necesitamos tener los datos
como números enteros, para poder compararlos entre sí. Obsérvese también que la llamada a
la función CalculaMayor se realiza dentro de una llamada al método write(): el resultado de la
llamada a CalculaMayor es el valor que devuelve la función, que en este caso es el mayor de
los tres números que se le pasaron como parámetros.

Una vez cargada esta página en el navegador, se le solicitan al usuario tres números mediante
la función prompt(), y se muestra en pantalla el mayor valor de los tres introducidos. El aspecto
que presenta el navegador una vez introducidos los tres números y calculado el mayor de ellos
es el siguiente:

Figura 3.28.- Aspecto del navegador tras cargar el ejemplo de definición y llamada a una
función con argumentos y que devuelve un valor

65
Módulo 4
Creación de contenidos WEB

Ámbito de las variables: variables locales y globales.

El ámbito de una variable hace referencia al área o áreas del programa en las cuales la
variable está definida y puede, por tanto, ser referenciada. El ámbito de una variable depende
del lugar en el que ésta haya sido declarada, y puede ser local o global. Se debe tener muy
clara la diferencia entre variables locales y globales:

• Una variable es local cuando su ámbito es la zona del script en la que la variable está
definida. Solamente se puede acceder a ella desde esta zona. Por ejemplo, una variable
definida dentro de una función, es local a dicha función, y solo es accesible desde esta.
Si en otra función o zona de código existe otra variable con el mismo nombre, esta será
diferente a la primera. De hecho se almacenará en otra posición de memoria. A las
variables locales se les denomina también variables privadas. Una variable local se crea
cada vez que se llama a la función en la que está definida, y se elimina cada vez que la
función finaliza.

• Una variable es global cuando es accesible desde cualquier zona del programa. Las
variables globales reciben también el nombre de variables públicas.

Supóngase que se han insertado dos scripts en un documento HTML, uno en la cabecera y el
otro dentro del cuerpo. Para JavaScript, las variables declaradas en cualquiera de estas áreas
tienen el mismo ámbito: todas ellas son variables globales, y son accesibles por cualquier
script del documento actual.

Como se ha indicado, si en varias funciones se declara una variable con el mismo nombre,
JavaScript las considera variables distintas, de hecho cada una de ellas tendrá su propia
dirección de memoria. Véase el siguiente ejemplo en el que se pueden observar dos variables,
una local y otra global con el mismo nombre, pero que son totalmente independientes.

Ejemplo de ámbito de variables: variables locales y globales.

<html>
<head>
<title>
Ejemplo de ámbito de variables.
</title>

<script language="javascript">
<!--
var valor=10; //Se inicializa la variable global

function doblar (valor) //El argumento valor es una variable local

{
valor *= 2;
document.write ("El valor de la variable local " + "'" + "valor" + "'" + "es " + valor + "<br>");
//Se imprime el valor de la variable local
}

document.write ("El valor de la variable global" + "'" + "valor " + "'" + "es " + valor + "<br>");
doblar (valor); //llamamos a la función pasándole la variable global
document.write ("El valor de la variable global " + "'" + "valor " + "'" + "sigue siendo " + valor);
//La variable original no se ha modificado.

66
Módulo 4
Creación de contenidos WEB

//-->
</script>

</head>

<body>

</body>

</html>

El aspecto del navegador al cargar esta página se muestra en la siguiente figura:

Figura 3.29.- Aspecto del navegador al cargar la página del ejemplo de ámbito de
variables.

Para decidir el tipo de variable a utilizar, se pueden seguir las siguientes reglas:

• Si la variable va a ser utilizada (y, quizás, modificada) en cualquier parte del programa,
tanto dentro como fuera de las funciones, entonces debe ser declarada fuera de todas
las funciones, es decir, como variable global. El mejor lugar para declarar las variables
globales es en la sección <HEAD> del documento, asegurándonos, así, de que están
declaradas antes de poder ser utilizadas por ninguna función.

67
Módulo 4
Creación de contenidos WEB

• Si la variable sólo es necesaria en el interior de una función específica, entonces debe

declararse en el cuerpo de dicha función (es decir, con un ámbito local a la función en la
que se declara). Así nos aseguramos de que la variable sólo podrá ser utilizada y
modificada en el interior de dicha función. Además, se puyede estar seguros de que, en
esa función, la variable que se utilizará será ésta, aunque exista una variable global con
el mismo nombre.

• Por último, si el valor de una variable va a ser modificado en una función, pero lo van a
necesitar también otras funciones, entonces debemos pasar la variable como
argumento a las funciones que la vayan a necesitar. Estas funciones copian el valor de
la variable pasada como argumento a la variable local que lo recibe, y operan con la
variable local, de modo que las modificaciones que puedan realizar sobre el valor que
recibieron no afectan a la variable original.

Existe una excepción en cuanto al funcionamiento de los argumentos de una función, que se
pasan, en general, 'por valor'. Cuando el argumento que se le pasa a una función es un objeto,
la función no hace una copia del mismo, sino que utiliza el propio objeto (se dice que se le está
pasando una referencia al objeto). Por consiguiente, cualquier cambio que se produzca sobre
el objeto en el cuerpo de la función repercutirá sobre el objeto original: los objetos se pasan
'por referencia'.

3.5.2 Funciones predefinidas del lenguaje.

JavaScript cuenta con una serie de funciones propias del lenguaje, que son independientes
de los objetos que componen su modelo y que se estudiará en el siguiente capítulo. Algunas
de ellas ya se han estudiado como por ejemplo las funciones de conversión de tipos parseInt y
ParseFloat, otras que muestran cajas de diálogo de distintos tipos como prompt(), confirm() y
alert(). En este apartado, vamos a estudiar alguna más.

La función eval

Esta función ejecuta la expresión o sentencia contenida en la cadena que recibe como
parámetro. Puede ser útil para operar con valores numéricos introducidos, por ejemplo, a
través de la función prompt.

Sintaxis:

eval(expresión)

68
Módulo 4
Creación de contenidos WEB

Ejemplo de la función eval():

mensaje = 'Hola';
eval("alert('" + mensaje + "');");

Este ejemplo nos muestra una ventana con un saludo.

La función isNaN

Esta función evalúa el valor pasado como argumento para ver si es o no de tipo numérico, y
devuelve true si dicho valor no es numérico, y false en caso contrario. Esta función permite
controlar y evitar ciertos errores de programación.

Sintaxis:

isNaN(expresión)

Las funciones escape y unescape

La función escape devuelve el código ASCII correspondiente al carácter que recibe como
parámetro. El valor devuelto tiene el formato %**, donde ** es el valor numérico de codificación
del carácter.

La función unescape es la contraria a la anterior: devuelve el carácter cuyo código ASCII

coincide con la cadena pasada como parámetro. Así, dicha cadena deberá tener alguno de
los siguientes formatos: "%entero" ó "valor hexadecimal".

Sintaxis:

escape(carácter)
unescape(cadena)

Ejemplo de las funciones escape() y unescape():

escape('$');
devuelve %24

escape(''a B c 1 % a'');
devuelve a%20B%20c%20 1 %25%E1

69
Módulo 4
Creación de contenidos WEB

La función isFinite(argumento)

Esta función devuelve true si el argumento es un número válido y no es infinito.

3.5.3 Funciones almacenadas en ficheros externos.

JavaScript permite almacenar funciones en ficheros externos para que posteriormente las
podamos incluir en todas aquellas páginas que se desee. Para ello la función o funciones se
guardan en un fichero con extensión .js. Posteriormente se puede incluir en cualquier página
sin más que incluir la siguiente línea en la sección <Head> de la página:

<script src="fichero_externo.js" language="javascript" type="text/javascript">

</script>

En el siguiente ejemplo se ha incluido un fichero externo llamado saludo.js.

Ejemplo de función almacenada en fichero externo:

<html>

<head>
<title>
Ejemplo que incluye un fichero externo con extensión .js
</title>

<script src="scripts/saludo.js" language="javascript" type="text/javascript">

</script>

</head>

<body>
Contenido de la página.
</body>

</html>

El fichero externo saludo.js contiene únicamente una línea:

Fichero externo saludo.js:

alert ("Bienvenido a Javascript.");

70
Módulo 4
Creación de contenidos WEB

3.6 JAVASCRIPT: LENGUAJE BASADO EN OBJETOS Y PROGRAMACIÓN

CONTROLADA POR EVENTOS

Como se ha comentado en la introducción, JavaScript es un lenguaje de alto nivel, basado en

objetos, diseñado para permitir a los programadores Web la generación de documentos Web
interactivos de un modo sencillo. Ofrece las características básicas de un lenguaje orientado a
objetos sin las complejas realizaciones que acompañan a estos lenguajes como Java y C++.
JavaScript utiliza objetos, pero no permite la definición de clases ni la utilización del
mecanismo de la herencia: es decir, es un lenguaje basado en objetos, pero no un lenguaje
orientado a objetos.

Un objeto es una estructura que se compone de una serie de variables, que definen las
características del objeto, y una o más funciones, que son las acciones que puede realizar el
objeto. 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 la "herencia"
y el "polimorfismo". JavaScript simplifica en algo este modelo.

El modelo clásico de programación orientada a objetos separa a los mismos en dos

subgrupos: las "clases" y las "instancias". Las clases son entes más abstractos que definen
un conjunto determinado de objetos. Las instancias son miembros concretos de una clase,
por lo que poseen las mismas propiedades y los mismos métodos que la clase a la que
pertenecen. En JavaScript esta distinción se difumina: sólo se tienen objetos.

3.6.1 Conceptos sobre programación basada en objetos.

En este apartado se desarrollan los conceptos necesarios para entrar en contacto con la
programación basada en objetos.

¿Qué es un "objeto"?

La forma más sencilla de definir un objeto es una estructura que contiene dos tipos de
elementos: los datos y las funciones que trabajan o manejan los datos:

OBJETO = DATOS + FUNCIONES QUE TRABAJAN CON ESOS DATOS

Describiéndolo con un poco más de profundidad, los objetos son una estructura que se basa
en tres elementos fundamentales:

• Las propiedades: Son las características variables de un objeto. Por ejemplo si se tiene
un objeto como puede ser una página Web, el color del texto, el fondo de la página, el
tipo de fuente de texto utilizado, el tamaño de la fuente de texto, etc. serían propiedades
de ese objeto.
• Los métodos: Son las funciones que permiten la gestión y manejo de los objetos. En
particular, los métodos, permiten el manejo y gestión de las propiedades de los objetos.
Siguiendo con el ejemplo anterior, una función que permita modificar el tipo de fuente de
texto, o su tamaño o su color, es un método. Los métodos de un objeto proporcionan un
interfaz para manejarlo: no se necesita saber cómo está construido un objeto para
poder utilizarlo.

71
Módulo 4
Creación de contenidos WEB

• Los eventos: Son sucesos que normalmente provoca el usuario cuando por ejemplo
hace clic sobre un elemento de la pantalla, cuando mueve el ratón, cuando cierra una
ventana, etc. Normalmente cada evento tiene una función o método asociado que se
ejecuta cuando se produce ese evento. Por ejemplo, se puede hacer que un botón
cambie de color cuando se sitúa el puntero del ratón sobre el.

Ejemplo de objeto:

El objeto coche tiene la propiedad volante y presenta el método arrancar.

Un objeto, pues, es un elemento de cualquier tipo, que incluye en sí mismo los datos
necesarios para describir su naturaleza (sus propiedades) y las funciones que puede realizar
(sus métodos). Se puede considerar a un objeto como una entidad con unos límites definidos.

El núcleo de un objeto está compuesto por los valores de sus datos. Los ítems de datos que
componen un objeto, describen sus características especiales y su identificación. En la jerga
de la programación orientada a a objetos, los datos de los objetos se denominan propiedades
o atributos (en JavaScript, se llaman "propiedades"). Además de especificar las
características e identificar a un objeto, los atributos pueden representar el estado de un
objeto, o el papel que el objeto juega en un determinado momento. Las propiedades de un
objeto en JavaScript pueden contener tipos de variables simples, como caracteres y enteros, o
también otros objetos.

Normalmente, un objeto soporta varias funciones. Las funciones conforman el comportamiento

visible de los objetos. En la jerga de la orientación a objetos, las funciones se denominan
métodos. Un método es una porción de código fuente que realiza una única tarea, que es
una importante realización del objeto. En JavaScript, los métodos se representan con
funciones, y, por tanto, son de tipo "function" (ya se ha visto cómo definir y utilizar funciones
en capítulos anteriores del tema).

Por ejemplo, un button (un botón) es un objeto JavaScript que tiene, entre otras, las
propiedades value y name. El usuario puede pulsar sobre él, por lo que este objeto soporta la
función click().

Otro ejemplo es el objeto document, del que se utiliza su método write() para escribir texto
sobre la sección <BODY> de un documento HTML (como ya se ha visto en algunos ejemplos
en el apartado anterior).

¿Cómo se accede a las propiedades y los métodos de un objeto?

En JavaScript, para acceder a las propiedades y métodos de un objeto se utiliza el "operador

punto" (.), de la siguiente forma:

Objeto.propiedad
Objeto.método(argumentos)

72
Módulo 4
Creación de contenidos WEB

Aparte de esta notación, puede también utilizarse la notación en forma de "array" (vector) para
acceder a las propiedades de un objeto:

Objeto[propiedad]

En el siguiente ejemplo se muestra como se puede acceder a las propiedades y métodos de

un objeto.

Ejemplos de utilización del operador punto para acceder a propiedades y métodos:

* Objetos y propiedades: coche.rueda, coche.volante

* Objetos y métodos: coche.arranca(), coche.frena()

* Objetos, propiedades y métodos: coche.volante.gira()

¿Cómo se crean objetos en JavaScript?

Cuando creamos un objeto, en realidad estamos creando un 'molde', que recibe el nombre de
clase, en el que especificamos todo lo que se puede hacer con los objetos (que utilicen ese
molde. Es decir, cuando se crea un objeto lo que en realidad se está creando es una clase.
Posteriormente, lo que se crean son lo que se denominan instancias de esa clase, y a esas
instancias es a lo que se le denomina objeto.

Por ejemplo, se puede crear una clase denominada Coche, que vendría a ser algo así:

CLASE Coche
{

ATRIBUTOS: Color, modelo, cilindrada, potencia, rueda.

MÉTODOS: arranca(), frena(), gira()

Cuando se quiera tener uno o varios objetos pertenecientes a la clase coche, lo que el
programador hace es declarar estos objetos como pertenecientes a la clase coche. Al hecho
de declarar un objeto se le denomina instanciar un objeto. En definitiva, un objeto se declara
como cualquier otro tipo de variable. Por ejemplo en el caso de la clase Coche, se pueden
definir varios objetos pertenecientes a dicha clase de la siguiente manera:

Coche Coche1, Coche2, Coche_Mercedes;

73
Módulo 4
Creación de contenidos WEB

JavaScript permite a los programadores construir sus propios objetos a través de la

declaración de funciones, llamadas "constructores": en JavaScript, el constructor es
precisamente la función con la que crearemos el molde de la clase. Cuando se crea un objeto
nuevo del tipo que sea, lo que se hace en realidad, es llamar al constructor de ese objeto, con
una serie de argumentos.

La sintaxis de los métodos constructores es la siguiente:

function ClaseObjetos(dato1, dato2, ...., datoN) {

this.propiedad1 = dato1;
this.propiedad2 = dato2;
.
.
this.propiedadN = datoN;
this.método1 = función1;
this.método2 = función2;
.
.
this.métodoN = funciónN;
}

ClaseObjetos es el nombre del constructor de la clase. El objeto especial this hace referencia
al objeto actual que está siendo definido en la declaración. Las propiedades y los métodos del
nuevo objeto se definen mediante asignaciones al objeto this. Las propiedades iniciales del
nuevo objeto se dan como parámetros de la función de creación del mismo. En la definición
del nuevo objeto, sólo aparecen los nombres de las funciones asignadas a los métodos, pero
no sus parámetros.

La implementación de cada método del objeto se definirá después, utilizando las reglas de
JavaScript para la declaración de funciones (excepto si es una función predefinida en el
lenguaje), del siguiente modo:

function nombreFunción([argumento1], [argumento2], ...., [argumentoN])

{
[sentencias]
}

Para crear un objeto se utiliza el operador new comentado en capítulos anteriores, seguido del
nombre del constructor del objeto. Al llamar al constructor se le pasan los argumentos con los
que se ha definido la clase. La sintaxis de declaración de un objeto sería por tanto:

Creación de un objeto perteneciente a la clase ClaseObjetos:

var Objeto = new ClaseObjetos (dato1, ..., datoN);

74
Módulo 4
Creación de contenidos WEB

Con la expresión anterior se ha creado un objeto denominado Objeto perteneciente a la clase

ClaseObjetos. Al nuevo objeto creado le podemos aplicar los métodos de la clase y modificar
sus atributos.

En el siguiente ejemplo se muestra el constructor para crear un objeto Libro que permita
almacenar toda la información de un libro, para una posible aplicación de una biblioteca.
También se muestra como crear los métodos para manejar los objetos de tipo libro.

Ejemplo de creación de un objeto de tipo Libro.

El constructor podría ser algo así:

function Libro(titulo,autor, tema)

{
this.titulo=titulo;
this.autor=autor;
this.tema=tema;
this.escribir=escribirLibro; //Método: aquí no hay que poner los paréntesis
}

Y un método para imprimir los datos de un libro:

function escribirLibro()

{
alert("El libro " + this.titulo + " de " + this.autor + " trata sobre " + this.tema);
}

Una vez que se ha definido el objeto, se pueden crear instancias del mismo:

unLibro=new Libro("Momo","Michael Ende","novela juvenil");

La forma de acceder al método (esto es, ejecutarlo) es:

unLibro.escribir();

Por tanto resumiendo y para finalizar, la creación de un objeto se realiza en dos pasos:

1. Se define la clase de los objetos a través de la función constructor.

2. Se crean instancias del objeto mediante el operador new.

75
Módulo 4
Creación de contenidos WEB

3.6.2 El modelo de objetos en JavaScript.

JavaScript posee diferentes objetos propios ya construidos que los programadores pueden
utilizar según les convenga. Dichos objetos se almacenan en una librería básica de objetos,
que pueden "instanciarse" para trabajar con ellos.

Los objetos de JavaScript son verdaderos objetos, en el sentido de que tienen propiedades y
métodos y pueden responder a eventos. Sin embargo, como se ha podido observardo,
JavaScript no presenta las condiciones para ser un lenguaje orientado a objetos (en particular,
no posee la capacidad de la herencia).

El modelo de objetos de JavaScript, en lugar de tener una jerarquía de clases basada en la

herencia, se basa en una jerarquía basada en contenedores, es decir, en objetos que a su vez
contienen a otros objetos. Como resultado de ello, las relaciones entre los elementos del
modelo de objetos de JavaScript son del tipo contenedor-contenido.

Una primera clasificación del modelo de objetos de JavaScript lo dividiría en dos grandes
grupos:

• Por una parte, una serie de objetos más directamente relacionados con el propio
lenguaje JavaScript, es decir, con la estructura del lenguaje. Éstos se conocen con el
nombre genérico de "objetos intrínsecos del lenguaje".

• Por otro lado existen una serie de objetos directamente relacionados con el navegador y
con las posibilidades de programación de HTML. Estos objetos se denominan,
genéricamente, "objetos del navegador".

En los siguientes apartados se describirán detalladamente los objetos que forman estos
grupos junto con sus propiedades y métodos. De momento es suficiente con saber de su
existencia. Únicamente decir que los objetos del navegador se utilizan fundamentalmente
para el desarrollo de scripts del lado del cliente. Cuando se realizan scripts del lado del
servidor con otras tecnologías como podría ser ASP (Active Server Pages), estas proporcionan
otros objetos adecuados para el desarrollo de ese tipo de aplicaciones denominadas
aplicaciones Web, pero esto es otra historia.

3.6.3 Los eventos.

Los eventos ocurren como resultado de alguna acción realizada por el usuario, por ejemplo
pulsa el botón derecho del ratón, cierra una ventana, presiona una tecla, etc. Los eventos
tienen una función asociada que se ejecuta cuando se produce este. En definitiva, un evento
es un hecho provocado por el usuario, y que habitualmente lanza la ejecución de una función).

76
Módulo 4
Creación de contenidos WEB

Ejemplo de eventos:

• onLoad: termina de cargarse una página,

• onClick: se ha hecho clic con el ratón,

• onMouseOver: se ha pasado por encima con el ratón, etc.

La mayoría de los elementos de la interfaz gráfica de usuario (como ventanas, enlaces, cajas
de texto, etc.) reaccionan a ciertos eventos. Dichos elementos, como hemos estudiado a lo
largo del presente capítulo, se representan en JavaScript como objetos predefinidos.

Por lo tanto, la mayor parte del código JavaScript de un documento Web, responderá a
eventos provocados, bien por el usuario, bien por el propio navegador.

La siguiente tabla muestra los principales eventos incluidos en la versión estándar de

JavaScript, así como los objetos que pueden responder a ellos:

Objeto Eventos
onLoad, onUnload, onMouseMove, onMouseDown,
window
onMouseUp, onResize, onMove, onError
onMouseMove, onMouseDown, onMouseUp, onResize,
frame
onMove, onKeyDown, onKeyUp, onKeyPress
document onKeyDown, onKeyUp, onKeyPress
onClick, onMouseMove, onMouseDown, onMouseUp,
link
onMouseOver, onMouseOut
onSubmit, onMouseMove, onMouseDown, onMouseUp,
form
onReset
image onMouseMove, onMouseDown, onMouseUp, onAbort, onError
onChange, onFocus, onBlur, onMouseMove, onMouseDown,
text
onMouseUp, onSelect, onKeyDown, onKeyUp, onKeyPress
onChange, onFocus, onBlur, onMouseMove, onMouseDown,
textarea
onMouseUp, onSelect, onKeyDown, onKeyUp, onKeyPress
checkbox onClick, onMouseMove, onMouseDown, onMouseUp
radio onClick, onMouseMove, onMouseDown, onMouseUp
onChange, onFocus, onBlur, onMouseMove, onMouseDown,
select
onMouseUp
area onClick, onMouseOver, onMouseOut
button onClick, onMouseMove, onMouseDown, onMouseUp
reset onClick, onMouseMove, onMouseDown, onMouseUp
submit onClick, onMouseMove, onMouseDown, onMouseUp

77
Módulo 4
Creación de contenidos WEB

Como se puede deducir de esta tabla, determinado tipo de eventos es reconocido por
determinado tipo de objetos.

Ejemplos:

• Focalización, desfocalización y edición: Campos de texto, textareas y selections.

• Clicks: Buttons, radio buttons, checkboxes, reset y submit buttons, reset buttons, y
enlaces (links).
• Selección: Campos de texto y textareas.
• Señalización: Enlaces.

Cuando creamos páginas HTML, cada elemento de un documento tiene asociada una etiqueta
con una serie de atributos. De la misma forma, en JavaScript, cada evento tiene asociado un
manejador, que se encarga de responder automáticamente cuando ocurre dicho evento.

Los manejadores de eventos se insertan dentro de las etiquetas HTML como si de atributos de
las mismas se tratara. La sintaxis general es la siguiente:

<ETIQUETA manejadorEvento="Código JavaScript">,

donde ETIQUETA es cualquier etiqueta HTML que pueda relacionarse con un evento, y
manejadorEvento, el evento en sí.

A continuación pasamos a estudiar con más detalle todos estos eventos, viendo ejemplos de la
utilización de cada uno de ellos.

Pulsando un objeto: onClick

El evento click es uno de los más utilizados, y se produce cuando el usuario pulsa sobre un
objeto (debe tratarse de un objeto que pueda ser pulsado, como un botón, un enlace, un
checkbox, etc). Cuando se produce un evento click, el manejador onClick correspondiente al
objeto pulsado se encarga de ejecutar las acciones correspondientes, que pueden estar
definidas:

• en forma de comandos de JavaScript (separados entre ellos por punto y coma),

• ó en forma de llamada a una función de JavaScript.

El siguiente ejemplo muestra un botón en pantalla, con el mensaje "Púlsame", al que se le ha

añadido el manejador correspondiente al evento de pulsar sobre él:

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">

78
Módulo 4
Creación de contenidos WEB

<!-- se oculta la información de los navegadores antiguos

function saludo() {
alert("¡ Has pulsado \"" + document.miFormulario.miBoton.name + "\" !");
}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario">
<INPUT TYPE="BUTTON" NAME="miBoton" VALUE="Púlsame"
onClick="saludo()">
</FORM>
</CENTER>
</BODY>
</HTML>

Cuando pulsamos sobre el botón "Púlsame", su manejador onClick (que hemos insertado en
la etiqueta <INPUT>) llama a la función saludo(), que se encarga de mostrar un diálogo que
nos informa del nombre del botón pulsado.

Enviando y limpiando un formulario: onSubmit, onReset

Los eventos submit y reset se producen, respectivamente, cuando el usuario pulsa sobre los
botones de tipo Submit y Reset definidos en un formulario (o cuando se produce una llamada a
los métodos submit() o reset() de un objeto de tipo Form). En ambos casos, el manejador se
define en la etiqueta <FORM>.

El siguiente ejemplo muestra un formulario que recoge información sobre el usuario. En dicho
formulario se controlan los eventos submit y reset a través de sus manejadores
correspondientes, onSubmit y onReset, que llaman a un par de funciones que piden
confirmación al usuario para realizar tales operaciones:

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
<!-- se oculta la información de los navegadores antiguos
function confirmaReset() {
return confirm("¿Deseas limpiar el formulario?");
}
function confirmaSubmit() {

79
Módulo 4
Creación de contenidos WEB

return confirm("¿Deseas enviar el formulario?");

}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario" onReset="return confirmaReset()" onSubmit="return
confirmaSubmit()">
<P><B>Por favor, introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"
SIZE=10></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"
SIZE=30></TD>
</TR>
<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>
<TR>
<TD ALIGN=RIGHT>Dirección:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle"
SIZE=30></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="ciudad"
SIZE=10></TD>
<TD ALIGN=RIGHT>Código Postal:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="codigo"
SIZE=5 MAXLENGTH=5></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>

80
Módulo 4
Creación de contenidos WEB

Una vez que ha rellenado el formulario (introduciendo la información correspondiente en las

cajas de texto habilitadas para ello), el usuario puede elegir entre enviar los datos, o borrarlos,
por medio de los botones definidos. Al pulsar sobre ellos aparecerán sendos cuadros de
diálogo para que confirmemos la acción a realizar, de modo que ésta se realizará si pulsamos
sobre "Aceptar", y se cancelará si pulsamos sobre "Cancelar".

Modificando la información: onChange

El evento change es el más utilizado en la validación al nivel de campo: se produce cuando se

modifica el contenido (es decir, el valor del atributo VALUE) de un campo de texto
perteneciente a un objeto.

A continuación presentamos una modificación del ejemplo anterior que utiliza el manejador
onChange asociado a algunos de los campos del formulario. Éste llama a la función
aMayusculas(), que reescribe, con mayúsculas, el contenido de la caja de texto:

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
<!-- se oculta la información de los navegadores antiguos
function confirmaReset() {
return confirm("¿Deseas limpiar el formulario?");
}
function confirmaSubmit() {
return confirm("¿Deseas enviar el formulario?");
}
function aMayusculas(campo) {
campo.value = campo.value.toUpperCase();
}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario" onReset="return confirmaReset()" onSubmit="return
confirmaSubmit()">
<P><B>Por favor, introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>

81
Módulo 4
Creación de contenidos WEB

<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"

SIZE=10 onChange="aMayusculas(this)"></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"
SIZE=30 onChange ="aMayusculas(this)"> </TD>
</TR>
<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>
<TR>
<TD ALIGN=RIGHT>Dirección:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle"
SIZE=30 onChange="aMayusculas(this)" ></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="ciudad"
SIZE=10 onChange="aMayusculas(this)"></TD>
<TD ALIGN=RIGHT>Código Postal:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="codigo"
SIZE=5 MAXLENGTH=5></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>

En este caso, al cambiar el contenido de uno de los campos Nombre, Apellidos, Dirección ó
Ciudad, dicho contenido pasa, autamáticamente, a estar escrito con mayúsculas (ha cambiado
el atributo VALUE de esas cajas de texto). Así, por ejemplo, si en el campo Nombre escribimos
"juan luis", esta cadena se convertirá en "JUAN LUIS".

Recibiendo el foco: onFocus

El evento focus se dispara cuando un objeto pasa a ser el elemento activo del documento, bien
porque se ha pulsado sobre él, bien porque se ha ejecutado su método focus(). A través del
manejador de este evento, onFocus, somos capaces de responder al mismo.

82
Módulo 4
Creación de contenidos WEB

Ampliamos, de nuevo, el ejemplo anterior para que utilice el manejador onFocus, asociado a
todos los campos del formulario. Éste llama a la función cambiaEstado(), que modifica el
contenido de la barra de estado para que muestre información relacionada con el campo a
rellenar:

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
<!-- se oculta la información de los navegadores antiguos
function confirmaReset() {
return confirm("¿Deseas limpiar el formulario?");
}
function confirmaSubmit() {
return confirm("¿Deseas enviar el formulario?");
}
function aMayusculas(campo) {
campo.value = campo.value.toUpperCase();
}
function cambiaEstado(texto) {
window.status=texto;
}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario" onReset="return confirmaReset()" onSubmit="return
confirmaSubmit()">
<P><B>Por favor, introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"
SIZE=10 onChange="aMayusculas(this)"
onFocus="cambiaEstado('Nombre....')"></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"
SIZE=30 onChange ="aMayusculas(this)" onFocus="cambiaEstado('Apellidos....')">
</TD>
</TR>

83
Módulo 4
Creación de contenidos WEB

<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>

<TR>
<TD ALIGN=RIGHT>Dirección:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle"
SIZE=30 onChange="aMayusculas(this)" onFocus="cambiaEstado('Dirección
habitual....')"></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="ciudad"
SIZE=10 onChange="aMayusculas(this)" onFocus="cambiaEstado('Ciudad de
residencia....')"></TD>
<TD ALIGN=RIGHT>Código Postal:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="codigo"
SIZE=5 MAXLENGTH=5 onFocus="cambiaEstado('Código Postal....')"></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>

Así, por ejemplo, al situarse el usuario en el campo Dirección, la barra de estado del
navegador (situada abajo a la izquierda) muestra el mensaje "Dirección habitual....", que es el
texto pasado como parámetro a la función cambiaEstado(), en este caso.

Perdiendo el foco: onBlur

El evento blur es el opuesto al evento focus: se produce cuando un objeto deja de ser el
elemento activo del documento (se dice que dicho objeto "ha perdido el foco"). Podemos
utilizar este evento para realizar verificaciones sobre los campos.

Ampliamos, de nuevo, el ejemplo anterior añadiendo el manejador onBlur asociado al campo

código del formulario. Éste llama a la función compruebaCodigo(), encargada de comprobar
que el código introducido en dicho campo está formado por 5 números. En caso contrario,
aparece un mensaje avisando al usuario del error, y vuelve a situar el foco en el campo código:

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
<!-- se oculta la información de los navegadores antiguos

84
Módulo 4
Creación de contenidos WEB

function confirmaReset() {
return confirm("¿Deseas limpiar el formulario?");
}
function confirmaSubmit() {
return confirm("¿Deseas enviar el formulario?");
}
function aMayusculas(campo) {
campo.value = campo.value.toUpperCase();
}
function cambiaEstado(texto) {
window.status=texto;
}
function compruebaCodigo(campo) {
if (isNaN(campo.value) || (campo.value.length < 5)) {
alert("Debe introducir\nun código numérico\nde 5 cifras");
campo.focus();
campo.select();
}
}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY><CENTER>
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario" onReset="return confirmaReset()" onSubmit="return
confirmaSubmit()">
<P><B>Por favor, introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"
SIZE=10 onChange="aMayusculas(this)"
onFocus="cambiaEstado('Nombre....')"></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"
SIZE=30 onChange ="aMayusculas(this)" onFocus="cambiaEstado('Apellidos....')">
</TD>
</TR>
<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>
<TR>

85
Módulo 4
Creación de contenidos WEB

<TD ALIGN=RIGHT>Dirección:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle"
SIZE=30 onChange="aMayusculas(this)" onFocus="cambiaEstado('Dirección
habitual....')" ></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="ciudad"
SIZE=10 onChange="aMayusculas(this)" onFocus="cambiaEstado('Ciudad de
residencia....')"></TD>
<TD ALIGN=RIGHT>Código Postal:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="codigo"
SIZE=5 MAXLENGTH=5 onFocus="cambiaEstado('Código Postal....')"
onBlur="compruebaCodigo(this)"></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>

Así, por ejemplo, si el usuario rellena el campo código con los símbolos "abcde", cuando este
campo pierde el foco, la función compruebaCodigo() hace que aparezca el mensaje de error
"Debe introducir un código numérico de 5 cifras", solicitando la introducción de un código
postal correcto.

Movimientos del ratón

a) onMouseOver y onMouseOut

El evento mouseOver tiene lugar cuando el usuario mueve el puntero del ratón por encima de
un enlace o de la superficie de un objeto, mientras que el evento mouseOut ocurre cuando el
puntero abandona esa zona. Los manejadores onMouseOver y onMouseOut permiten cambiar
el comportamiento por defecto del navegador ante estos eventos.

Ampliamos, de nuevo, el ejemplo anterior añadiendo los manejadores onMouseOver y

onMouseOut, asociados a los botones del formulario. Como lo único que cambia, con
respecto al código del ejemplo anterior, son las líneas referentes a los botones Submit y Reset,
aquí sólo presentamos la parte final del código de la página:

// Lo anterior.......
<INPUT TYPE="SUBMIT" VALUE="Enviar" onMouseOver="this.value='Enviar el
formulario'" onMouseOut="this.value='Enviar'">
<INPUT TYPE="RESET" VALUE="Limpiar" onMouseOver="this.value='Limpiar el
formulario'" onMouseOut="this.value='Limpiar'">

86
Módulo 4
Creación de contenidos WEB

</FORM>
</CENTER>
</BODY>
</HTML>

De este modo, el aspecto de la página es el mismo que en el caso anterior, pero, si el usuario
pasa el cursor del ratón por encima del botón Enviar, el mensaje de éste cambia a "Enviar el
formulario", y vuelve al mensaje original cuando el cursor abandone esa zona del documento.
Lo mismo sucederá con el botón Limpiar, cuyo mensaje cambiará a "Limpiar el formulario"
mientras el puntero esté colocado sobre el botón.

Obsérvese que, a diferencia de los eventos anteriores, éstos no realizan una llamada a una
función, sino que se ejecuta directamente una instrucción JavaScript.

b) onMouseDown, onMouseUp y onMouseMove

El evento mouseDown tiene lugar cuando el usuario presiona un botón del ratón, y el evento
mouseUp ocurre cuando se libera el botón presionado. Por último, el evento mouseMove tiene
lugar cuando el usuario mueve el cursor del ratón. Los manejadores correspondientes,
onMouseDown, onMouseUp y onMouseMove permiten cambiar el comportamiento por defecto
del navegador ante estos eventos.

Carga y descarga de un documento: onLoad y onUnload

Tanto la apertura inicial como la salida de un documento Web pueden resultar momentos
importantes para realizar un proceso de JavaScript. El evento load tiene lugar cuando el
navegador termina de cargar una página, o cuando se carga por primera vez un frameset con
todos sus marcos. Por tanto, el manejador onLoad debe incluirse en las etiquetas <BODY> y
<FRAMESET>, según el caso, y lo mismo sucede para el evento unload y su manejador,
onUnload.

De nuevo, ampliamos el ejemplo anterior añadiendo los manejadores onLoad y onUnload,

asociados a la etiqueta <BODY> del documento. Estos manejadores definen una ventana
informativa que se crea en cuanto se carga la página (se produce el evento load), y que se
elimina cuando se descarga el documento (se produce el evento unLoad):

<HTML>
<HEAD>
<TITLE> Manejo de eventos </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
<!-- se oculta la información de los navegadores antiguos
var nuevaVentana=null;
function confirmaReset() {
return confirm("¿Deseas limpiar el formulario?");
}
function confirmaSubmit() {
return confirm("¿Deseas enviar el formulario?");
}

87
Módulo 4
Creación de contenidos WEB

function aMayusculas(campo) {
campo.value = campo.value.toUpperCase();
}
function cambiaEstado(texto) {
window.status=texto;
}
function compruebaCodigo(campo) {
if (isNaN(campo.value) || (campo.value.length < 5)) {
alert("Debe introducir\nun código numérico\nde 5 cifras");
campo.focus();
campo.select();
}
}
function abreVentana() {
nuenaVentana=window.open("" , "" , "width=275, height=75, menubar=no");
nuevaVentana.document.write("<TITLE>Manejando onLoad y
onUnload</TITLE>");
nuevaVentana.document.write("<CENTER><BIG>En este ejemplo, manejaremos
los<BR>");
nuevaVentana.document.write("<TITLE>eventos básicos de
JavaScript</BIG></CENTER>");
}
function cierraVentana() {
nuevaVentana.close();
}
// final del comentario -->
</SCRIPT>
</HEAD>
<BODY onLoad="abreVentana()" onUnload="cierraVentana()">
<CENTER> //El resto es idéntico....
<H1>Manejando de eventos</H1>
<BR>
<FORM NAME="miFormulario" onReset="return confirmaReset()" onSubmit="return
confirmaSubmit()">
<P><B>Por favor, introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"
SIZE=10 onChange="aMayusculas(this)"
onFocus="cambiaEstado('Nombre....')"></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>

88
Módulo 4
Creación de contenidos WEB

<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"

SIZE=30 onChange ="aMayusculas(this)" onFocus="cambiaEstado('Apellidos....')">
</TD>
</TR>
<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>
<TR>
<TD ALIGN=RIGHT>Dirección:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle"
SIZE=30 onChange="aMayusculas(this)" onFocus="cambiaEstado('Dirección
habitual....')" ></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="ciudad"
SIZE=10 onChange="aMayusculas(this)" onFocus="cambiaEstado('Ciudad de
residencia....')"></TD>
<TD ALIGN=RIGHT>Código Postal:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="codigo"
SIZE=5 MAXLENGTH=5 onFocus="cambiaEstado('Código Postal....')"
onBlur="compruebaCodigo(this)"></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar" onMouseOver="this.value='Enviar el
formulario'" onMouseOut="this.value='Enviar'">
<INPUT TYPE="RESET" VALUE="Limpiar" onMouseOver="this.value='Limpiar el
formulario'" onMouseOut="this.value='Limpiar'">
</FORM>
</CENTER>
</BODY>
</HTML>

Manejo de errores: onError y onAbort

Las imágenes (objetos de tipo Image) y las ventanas (objetos de tipo Window) disponen del
manejador onError para responder a los errores que puedan producirse durante su carga.
Dichos errores pueden ser de muy diversa naturaleza: sintácticos, del navegador, o incluso del
servidor.

Las imágenes cuentan, además, con otro manejador, llamado onAbort, que controla cuándo no
se ha cargado completamente la imagen.

Seleccionando un text: onSelect

El evento select y su correspondiente manejador, onSelect, permiten controlar qué ocurre

cuando se selecciona parte del texto de un objeto de tipo Text o Textarea.

89
Módulo 4
Creación de contenidos WEB

Manejando el teclado: onKeyDown, onKeyUp y onKeyPress

El evento keyDown tiene lugar cuando el usuario presiona una tecla del teclado, el evento
keyUp ocurre cuando éste libera la tecla presionada, y el evento keyPress cuando el usuario
mantiene presionada una tecla. Los manejadores onKeyDown, onKeyUp y onKeyPress
permiten cambiar el comportamiento por defecto del navegador ante estos eventos.

Manejando la ventana: onMove y onResize

El evento move tiene lugar cuando el usuario mueve una ventana o un marco de la ventana
principal del navegador. Cuando el usuario cambia el tamaño de la ventana o del marco, se
produce el evento resize. Los manejadores onMove y onResize permiten cambiar el
comportamiento por defecto del navegador.

Para finalizar, en la siguiente tabla se muestra un resumen de los eventos más comúnmente
utilizados:

90
Módulo 4
Creación de contenidos WEB

3.7 OBJETOS INTRÍNSECOS DEL LENGUAJE.

El conjunto de objetos del lenguaje de JavaScript nos proporciona herramientas que facilitan la
programación: estos objetos no aparecen nunca de forma visual, pero son muy utilizados a la
hora de programar scripts. En la siguiente tabla se muestran los objetos propios del lenguaje:

• String

• Math

• Date

• Array

• Boolean

• Number

• Function

En este apartado vamos a estudiar estos objetos uno a uno.

3.7.1 El objeto cadena: String

Este objeto se utiliza para la manipulación de cadenas de caracteres. Cada vez que se define
una variable de tipo cadena, se crea un objeto del tipo String. Por ello, no es necesario declarar
estos objetos: en el momento de la asignación, el objeto se crea automáticamente.

Propiedades del objeto String.

Las propiedades de los objetos string son las siguientes:

• length: Valor numérico que indica la longitud de la cadena (esto es, el número de
caracteres de que consta).

• prototype: Permite implementar nuevos métodos al objeto string. Para implementar un

nuevo método en primer lugar se crea la función, posteriormente se asocia el nuevo
método que se desea implementar a la función utilizando la siguiente sintaxis:

String.prototype.nombre_metodo=nombre_función;

El nombre del método y de la función pueden coincidir.

Una vez creado el método, a este se accede de la misma manera que al resto. En el siguiente
ejemplo se muestra la creación de un objeto tipo String al que se le añade un nuevo método.

91
Módulo 4
Creación de contenidos WEB

Ejemplo: Añadiendo un método a un objeto String.

<html>

<head>

<title>
Añadiendo un método a un objeto String.
</title>

<script language="javascript">
<!--
function imprimir(dato)
{
document.write("El nombre es: " + dato)
}

String.prototype.imprime = imprimir; //Se crea el método imprime para los objetos de tipo String.

var nombre = "José Antonio Fernandez";

nombre.imprime(nombre);

//-->
</script>

</head>

<body>
</body>

</html>

Verifique el funcionamiento del código de este ejemplo.

Métodos del objeto String.

Los objetos String poseen muchos métodos, algunos de los cuales tienen asociada una etiqueta
HTML, que realiza la misma operación. Entre estos métodos se pueden destacar los siguientes:

• anchor(nombre): Crea un hiperenlace asignando el valor nombre al atributo NAME de la

etiqueta <A>.

• big(): Muestra la cadena de caracteres con una fuente grande.

92
Módulo 4
Creación de contenidos WEB

• blink(): Muestra la cadena de texto con un efecto parpadeante, intermitente (<BLINK>).

• bold(): Muestra la cadena en negrita (<B>).

• charAt(indice): Devuelve el carácter situado en la posición especificada por el atributo

'indice'.

• eval(): Evalúa la cadena como una sentencia, en referencia al objeto String.

• fixed(): Muestra la cadena de caracteres con una fuente proporcional.

• fontColor(color): Cambia el color con el que se muestra la cadena (equivalente a

<FONT COLOR="color">).

• fontSize(tamaño): Cambia el tamaño con el que se muestra la cadena (equivalente a

<FONT SIZE="tamaño">).

• indexOf(cadena buscada,indice): Devuelve la posición de la primera ocurrencia de

'cadena buscada' dentro de la cadena actual, a partir de la posición dada por 'indice'. Este
ultimo argumento es opcional y, si se omite, la búsqueda comienza por el primer carácter
de la cadena.

• italics(): Muestra la cadena en cursiva (<I>).

• lastIndexOf(cadena buscada,indice): Devuelve la posición de la ultima ocurrencia de

'cadena buscada' dentro de la cadena actual, a partir de la posición dada por 'indice', y
buscando hacia atrás. Este ultimo argumento es opcional y, si se omite, la búsqueda
comienza por el ultimo carácter de la cadena.

• link(URL): Convierte la cadena en un vínculo, asignando el valor URL al atributo HREF.

• small(): Muestra la cadena con una fuente pequeña.

• strike(): Muestra la cadena de caracteres tachada.

• sub(): Muestra la cadena con formato de subíndice (<SUB>).

• substring(primer Indice,segundo Indice): Devuelve la subcadena que comienza en la

posición 'primer Indice + 1' y que finaliza en la posición 'segundo Indice'. Si 'primer Indice'
es mayor que 'segundo Indice', empieza por 'segundo Indice + 1' y termina en 'primer
Indice'. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en
'primer Indice' y termina en 'segundo Indice - 1' (o bien 'segundo Indice'y 'primer Indice -
1' si el primero es mayor que el segundo).

• sup(): Muestra la cadena con formato de superíndice (<SUP>).

• toLowerCase(): Devuelve la cadena escrita en minúsculas.

• toString(): Devuelve una cadena que representa al objeto String.

• toUpperCase(): Devuelve la cadena escrita en mayúsculas.

93
Módulo 4
Creación de contenidos WEB

• valueOf(): Convierte el objeto a su tipo primitivo (number, boolean, string ó function).

En el siguiente ejemplo se muestra la utilización de estos métodos sobre una cadena.

Ejemplo de aplicación de métodos de objetos String:

<HTML>
<HEAD>
<TITLE> Ejemplo JS </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a() {
var cad = "Esta es la cadena de prueba",i;

with(document) {
write("La cadena es: "+cad+"<BR>");
write("Longitud de la cadena: "+cad.length+"<BR>");
write("Haciendola ancla: "+cad.anchor("b")+"<BR>");
write("En grande: "+cad.big()+"<BR>");
write("Parpadea: "+cad.blink()+"<BR>");
write("Caracter 3 es: "+cad.charAt(3)+"<BR>");
write("Fuente FIXED: "+cad.fixed()+"<BR>");
write("De color: "+cad.fontcolor("#FF0000")+"<BR>");
write("De color: "+cad.fontcolor("salmon")+"<BR>");
write("Tamano 7: "+cad.fontsize(7)+"<BR>");
write("<I>orl</I> esta en la posicion: "+cad.indexOf("orl"));
write("<BR>En cursiva: "+cad.italics()+"<BR>");
write("La primera <I>l</I> esta, empezando a contar por detras,");
write(" en la posicion: "+cad.lastIndexOf("l")+"<BR>");
write("Haciendola enlace: "+cad.link("doc.htm")+"<BR>");
write("En pequeno: "+cad.small()+"<BR>");
write("Tachada: "+cad.strike()+"<BR>");
write("Subindice: "+cad.sub()+"<BR>");
write("Superindice: "+cad.sup()+"<BR>");
write("Minusculas: "+cad.toLowerCase()+"<BR>");
write("Mayusculas: "+cad.toUpperCase()+"<BR>");
write("Subcadena entre los caracteres 3 y 10: ");
write(cad.substring(2,10)+"<BR>");
write("Entre los caracteres 10 y 3: "+cad.substring(10,2)+"<BR>");
write("Subcadenas resultantes de separar por las <B>o:</B><BR>");
}
}
//-->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--

94
Módulo 4
Creación de contenidos WEB

a();
//-->
</SCRIPT>

</BODY>

</HTML>

3.7.2 El objeto matriz: Array

El objeto array: Array

El objeto Array es la manera que tiene JavaScript para representar los arrays (matrices), que
son una construcción típica de todos los lenguajes de programación avanzados.

Un array (ó matriz) es un conjunto de elementos del mismo tipo de datos, identificados por un
índice, que indica la posición de cada elemento dentro del array. Así, en cada número índice del
array, éste contiene un valor. Un array puede ser unidimensional (un vector), bidimensional
(matriz 2x2, cuyos elementos están ordenados por filas y columnas), etc.

En el caso de JavaScript el programador no debe preocuparse por la longitud del array, ya que la
su longitud cambia de forma dinámica a medida que se van añadiendo elementos.

Los elementos de un array pueden ser de cualquiera de los tipos básicos estudiados: numérico,
booleano o cadena,

Un Array se crea (instancia) mediante su método constructor, utilizando, tal y como se indicó
anteriormente, el operador new y el nombre del constructor que en este caso es Array():

objetoArray = new Array(longitud)

El parámetro longitud del constructor le indica la longitud que se desea tenga el array que se
está creando.

Ejemplo creación de un array de 20 elementos:

Mi_Array = new Array(20);

Un array puede también inicializarse en el momento de su creación. En el siguiente ejemplo se

muestra como inicializar un array a la vez que se crea.

Ejemplo creación e inicialización de array:

Mi_Array = new Array("Cadena1", "Cadena2", "Cadena3" );

Se ha creado un array que contiene tres elementos de tipo cadena.

Hay que indicar, que ha diferencia de otros lenguajes, JavaScript permite que los elementos de
un array puedan ser de diferentes tipos, tal y como se demuestra en el siguiente ejemplo.

95
Módulo 4
Creación de contenidos WEB

Ejemplo creación e inicialización de un array con variables de diferente tipo:

Mi_Array = new Array("Cadena1", 48, true);

Se ha creado un array que contiene tres elementos, uno de tipo numérico, otro de tipo cadena,
y el tercero de tipo boolean.

Una vez creado el array, para acceder a cada elemento individual se utiliza la la notación
array[índice], donde índice puede variar a entre 0 y N-1, siendo N el número de elementos del
array. Por ejemplo, para acceder al segundo elemento de Mi_Array, se escribe:

elemento2=Mi_Array(1);

Se debe tener cuidado, ya que siguiendo estos criterios, cuando se crea el siguiente array:

Mi_Array = new Array(4,2);

En este caso lo que se está creando es un array de dos elementos numéricos que tienen valor 4
y 2, no un array que contiene 4 filas y 2 columnas. Se indica este aspecto ya que en otros
lenguajes esta notación equivaldría a la declaración de un array bidimensional de cuatro filas y
dos columnas.

JavaScript no dispone de mecanismos para crear arrays bidimensionales. Lo que se puede

hacer en el caso de que se desee construir una matriz bidimensional es crear una matriz de
matrices, de la siguiente manera:

Creación de matrices bidimensionales:

var matriz1 = new Array(elementos de la matriz 1);

var matriz2 = new Array(elementos de la matriz 2);

var matriz3 = new Array(elementos de la matriz 3);

var matriz4 = new Array(elementos de la matriz 4);

var matrizTotal = new Array(matriz1, matriz2, matriz3);

Se ha creado una matriz denominada matrizTotal que contiene cuatro matrices.

Se muestra a continuación un ejemplo en el que se crea una matriz bidimensional.

Ejemplo de creación de una matriz bidimensional:

<html>
<head>

<title>
Ejemplo de matriz bidimensional.
</title>

96
Módulo 4
Creación de contenidos WEB

<script language="javascript">
<!--
var alumno_0 = new Array ("Angel Jiménez",18);
var alumno_1 = new Array ("Pedro Sánchez",19);
var alumno_2 = new Array ("María José Angels",25);
var alumno_3 = new Array ("José Dominguez",20);

var alumnos_clase = new Array (alumno_0, alumno_1, alumno_2, alumno_3);

var i;

for (i=0; i<alumnos_clase.length; i++)

{
document.write (alumnos_clase[i] + "<br>");
}
//-->
</script>

</head>

<body>
</body>

</html>

Al cargar esta página en el navegador se obtiene:

Figura 3.30.- Aspecto del navegador al cargar el ejemplo de creación de matriz

bidimensional.

97
Módulo 4
Creación de contenidos WEB

Para acceder a los elementos de un array bidimensional utilizamos la notación

array[índiceFila,índiceColumna], donde índiceFila e índiceColumna pueden variar a entre 0 y N-1
y entre o y M-1, respectivamente, siendo N el número de filas del array y M el de columnas. En el
ejemplo anterior se ha creado un array bidimensional de cuatro filas y dos columnas, si se
quisiera acceder al elemento situado en la segunda fila y primera columna, se escribiría:

var elemento=alumnos_clase[1,0];

La variable elemento tomaría entonces el valor "Pedro Sánchez" (elemento="Pedro Sánchez").

Verifique el funcionamiento del siguiente ejemplo:

Ejemplo de acceso a elementos de una matriz bidimensional:

<html>
<head>

<title>
Ejemplo de acceso a elementos de una matriz bidimensional.
</title>

<script language="javascript">
<!--
var alumno_0 = new Array ("Angel Jiménez",18);
var alumno_1 = new Array ("Pedro Sánchez",19);
var alumno_2 = new Array ("María José Angels",25);
var alumno_3 = new Array ("José Dominguez",20);

var alumnos_clase = new Array (alumno_0, alumno_1, alumno_2, alumno_3);

document.write (alumnos_clase[1][0] + "<br>")

//-->
</script>

</head>

<body>
</body>

</html>

Se describen a continuación las propiedades y métodos de los objetos Array.

Propiedades del objeto Array.

Las propiedades del objeto Array son las siguientes:

• length: Valor entero que indica la longitud del array (esto es, su número de elementos).

98
Módulo 4
Creación de contenidos WEB

• prototype: Permite asignar nuevas propiedades y métodos al objeto Array. Para

implementar una nueva propiedad se sigue la siguiente sintaxis:

Array.prototype.nombre_propiedad="valor inicial";

Se muestra a continuación un ejemplo en el que se crea una nueva propiedad para un array:

Ejemplo: Añadiendo una propiedad a un objeto Array.

<html>
<head>

<title>
Añadiendo una propiedad a un objeto Array.
</title>

<script language="javascript">
<!--
Array.prototype.cilindrada = "";

var coches = new Array ("BMW","Mercedes", "Audi");

coches.cilindrada = "alta";

document.write ("Los cohes " + coches[0] + ", " + coches[1] + " y " + coches[2] + " son de
cilindrada " + coches.cilindrada);

//-->
</script>

</head>

<body>
</body>

</html>

Para implementar un nuevo método se sigue la misma sintaxis que en el caso de los objetos
String:

Array.prototype.nombre_metodo=nombre_función;

El nombre del método y de la función pueden coincidir.

99
Módulo 4
Creación de contenidos WEB

Métodos del objeto Array.

En cuanto a los métodos más relevantes de Array, se tienen:

• join(): Agrupa los elementos del array en una cadena de caracteres, separados por
comas.

• join(separador): Agrupa los elementos del array en una cadena de caracteres,

separados por la cadena de caracteres indicada en el parámetro.

• reverse(): Invierte el orden de colocación de los elementos del array.

• sort(): Ordena los elementos del array, utilizando el orden lexicográfico.

En el siguiente ejemplo se muestra el efecto de estos métodos sobre los arrays:

Ejemplo de aplicación de métodos de objetos array:

<HTML>

<HEAD>

<TITLE>
Métodos del objeto Array
</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
function metodos_array() {
var array1=new Array(2),array2=new Array(1), array3=new Array(1,"Hola",3);
var array4=new Array("Pepe","Antonio","Juan","Andrés");
var array5=new Array("Una cadena de ejemplo");
var array6=new Array(false);

array1[0]=new Array(3); //Array bidimensional: se crean tres columnas para la primera fila de
array1
array1[1]=new Array(2); //Array bidimensional: se crean dos columnas para la segunda fila de
array1

array1[0][0]=0; array1[0][1]=1; array1[0][2]=2;

array1[1][0]=3; array1[1][1]=4; array1[1][2]=5; //Se añaden tres elementos a esta fila a pesar de
que se creo con solo dos columnas. JavaScript cambia el tamaño dinámicamente sin que el
programador deba preocuparse de este aspecto.

document.write(array5);
document.write("<P>"+array6+"</P>"); //Observe que se pueden escribir etiquetas HTML.

document.write("array1[0][0]="+array1[0][0]+"; array1[0][1]="+array1[0][1]+ ";

array1[0][2]="+array1[0][2]+"<BR>");
document.write("array1[1][0]="+array1[1][0]+"; array1[1][1]="+array1[1][1]+ ";
array1[1][2]="+array1[1][2]);

100
Módulo 4
Creación de contenidos WEB

document.write("<P>array2= "+(array2[0]='Hola')+"<P>");
document.write("array3[0]="+array3[0]+"; array3[1]="+array3[1]+"; array3[2]="+array3[2]+"<P>");

document.write("Antes de ordenar: "+array4.join(', ')+"<P>");

document.write("Ordenados: "+array4.sort()+"<P>");
document.write("Ordenados en orden inverso: "+array4.sort().reverse());
}
//-->
</SCRIPT></HEAD>

<BODY>

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

</BODY>

</HTML>

Al cargar en el navegador el código de este ejemplo, este muestra:

Figura 3.31.- Aspecto del navegador al cargar el ejemplo de aplicación de métodos de

objeto Array.

101
Módulo 4
Creación de contenidos WEB

JavaScript utiliza los Arrays para hacer referencia a objetos predefinidos. Por ejemplo, los
distintos componentes de un documento, como:

• formularios: forms[posicion]

• elementos de un formulario: elements[posicion]

• anclas: anchors[posicion]

• marcos: frames[posicion]

• enlaces: links[posicion]

• imágenes: images[posicion]

• plugins: embeds[posicion]

• etc.

En cualquier caso, esto se estudiará en el siguiente apartado.

Aparte de todos estos objetos de tipo Array, JavaScript utiliza el vector arguments para poder
trabajar con los parámetros que se le pasan a una función. Esto permite trabajar con
funciones que admitan un número variable de argumentos: si se pasan más argumentos de
los definidos en la declaración de la función, los restantes se almacenan en el array arguments.
La forma de acceder a estos argumentos sería arguments[posicion], donde posicion es la
relativa a la dada en la sentencia de llamada.

Por tanto, para definir funciones con un número de parámetros indefinido, se utiliza el vector
arguments tal y como se muestra en el siguiente ejemplo:

function SumarArgumentos()
{
resultado=0;
for (i=0; i<arguments.length; i++) {
resultado += arguments[i]; }
return resultado;
}

3.7.3 El objeto funciones matemáticas: Math

Este objeto se utiliza para realizar cálculos matemáticos, en lugar de utilizar constantes y
funciones matemáticas genéricas, JavaScript las implementa a través de propiedades y métodos
del objeto Math, respectivamente.

102
Módulo 4
Creación de contenidos WEB

Propiedades del objeto Math

Las propiedades del objeto Math representan constantes matemáticas, y sólo se puede acceder
a ellas en modo lectura. Son las siguientes:

• E: Número 'e' (constante de Euler).

• LN2: Logaritmo neperiano (esto es, en base e) de 2.

• LN10: Logaritmo neperiano de 10.

• LOG2E: Logaritmo en base 2 del número e.

• LOG10E: Logaritmo en base 10 del número e.

• PI: Número PI.

• SQRT1_2: Valor de la raíz cuadrada de 0'5.

• SQRT2: Valor de la raíz cuadrada de 2.

Métodos del objeto Math

Los métodos del objeto Math representan las funciones matemáticas típicas, como las funciones
trigonométricas, la exponencial, su inversa, etc:

• abs(numero): Devuelve el valor absoluto del número (dígito, expresión o propiedad

evaluable a un número).

• acos(numero), asin(numero), atan(numero): Devuelven, respectivamente, el

arcocoseno, el arcoseno y el arcotangente del número que debe estar en radianes. El
argumento debe ser un dígito, expresión o propiedad evaluable a un número en el rango -
1 a 1 (en caso contrario, estas funciones devuelven NaN).

• atan2(x,y): Devuelve el ángulo formado por el vector de coordenadas (x,y) con respecto
al eje OX.

• ceil(numero): Devuelve el entero obtenido de redondear 'numero' "por arriba".

• cos(numero), sin(numero), tan(numero): Devuelven, respectivamente, el coseno, el

seno y la tangente del número, en radianes (ó NaN).

• exp(numero): Devuelve la exponencial del número (valor del número 'e' elevado a la
potencia número).

• floor(numero): Devuelve el entero obtenido de redondear 'numero' a -∞.

• log(numero): Devuelve el logaritmo neperiano de número.

• max(numero1,numero2): Devuelve el mayor de los dos números pasados como

argumentos.

103
Módulo 4
Creación de contenidos WEB

• min(numero1,numero2): Devuelve el menor de los dos números pasados como

argumentos.

• pow(base,exponente): Devuelve el valor de la potencia base elevada al exponente.

• random(): Devuelve un numero pseudoaleatorio entre 0 y 1.

• round(numero): Redondea 'numero' al entero más cercano.

• sin(numero): Devuelve el seno de 'numero' (que debe estar en radianes) o NaN.

• sqrt(numero): Devuelve la raíz cuadrada de 'número'.

• tan(numero): Devuelve la tangente de 'numero' (que debe estar en radianes) o NaN.

Como es lógico, para poder usar alguna de las propiedades o métodos de los objetos Math, se
debe anteponer la palabra 'Math'. Por ejemplo, para calcular el seno de un ángulo de 90o (pi/2
radianes), se escribiría la siguiente sentencia:

Math.sin((Math.PI)/2);

3.7.4 El objeto fecha: Date

Este objeto posee los métodos necesarios para trabajar con fechas y horas. JavaScript
representa las fechas de la siguiente manera:

• Los meses se indican mediante números enteros, desde el 0 (para el mes de Enero)
hasta el 11 (para Diciembre).
• Los días de la semana también son enteros, y van desde el 0 (que representa el
Domingo) hasta el 6 (el Sábado).
• Las fechas se manejan en milisegundos desde el 1/1/1970 a las 00:00:00 h, no
pudiéndose trabajar con fechas anteriores.

Creación de objetos Date.

Estos objetos, a diferencia de los de tipo String o Math, necesitan ser creados. El constructor de
los objetos Date permite diferentes conFigura 3. 4.ciones de argumentos:

• objetoDate = new Date() crea un objeto con la fecha y hora actuales.

• objetoDate = new Date("mes día, año") crea un objeto con la fecha especificada en el
parámetro de tipo cadena.

• objetoDate = new Date("mes día, año horas : minutos : segundos") crea un objeto
con la fecha y hora especificadas en el parámetro de tipo cadena.

• objetoDate = new Date(año, mes, día) crea un objeto con la fecha especificada en los
parámetros de tipo entero.

104
Módulo 4
Creación de contenidos WEB

• objetoDate = new Date(año, mes, día, horas, minutos, segundos) crea un objeto con
la fecha y la hora especificadas en los parámetros de tipo entero.

Métodos de objetos Date.

De entre todos los métodos del objeto Date, caben destacar los siguientes:

• getDate(): Devuelve el día del mes del objeto Date actual, como un entero entre 1 y 31.

• getDay(): Devuelve el día de la semana del objeto Date actual, como un entero entre 0 y
6.

• getFullYear(): Devuelve el año completo, con cuatro cifras. Es un método más eficiente
que el método getYear() ya que este último proporciona resultados diferentes
dependiendo del navegador (por ejemplo en NetScape devuelve el año menos 1900). Por
tanto, es recomendable utilizar el método getFullYear() frente al método getYear().

• getMonth(): Devuelve el mes del objeto Date actual, como un entero entre 0 y 11.

• getYear(): Devuelve el año del objeto Date actual, como un entero de dos dígitos, que
representa el año menos 1900.

• getHours(), getMinutes(), getSeconds(), getMilliseconds() : Devuelven,

respectivamente, la hora, los minutos, los segundos y los milisegundos del objeto Date
actual (como un entero entre 0 y 23, entre 0 y 59, entre 0 y 59 y entre 0 y 59,
respectivamente).

• getTime(): Devuelve la fecha (hora completa) del objeto Date actual.

• setDate(dia): Establece el día del mes en el objeto Date actual, como un entero entre 1 y
31.

• setDay(dia): Establece el día de l semana en el objeto Date actual, como un entero entre
0 y 6.

• setMonth(mes): Establece el mes en el objeto Date actual, como un entero entre 0 y 11.

• setYear(año): Establece el año en el objeto Date actual, como un entero mayor que
1900.

• setHours(horas), setMinutes(minutos), setSeconds(segundos): Establecen,

respectivamente, la hora, los minutos y los segundos en el objeto Date actual (como un
entero entre 0 y 23, entre 0 y 59, y entre 0 y 59, respectivamente).

• setTime(fecha): Establece la fecha en el objeto Date actual (El parámetro representa los
milisegundos transcurridos desde el 1/1/1970 a las 00:00:00 horas).

En el siguiente ejemplo se puede observar el funcionamiento de estos métodos:

105
Módulo 4
Creación de contenidos WEB

Ejemplo de funcionamiento de los métodos del objeto Date.

<html>

<head>

<title>
Ejemplo de métodos de objetos Date.
</title>

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

var fecha = new Date();

var annoCompleto = fecha.getFullYear();
var annoNormal = fecha.getYear();
var mesNumero = fecha.getMonth();
var diaMesNumero = fecha.getDate();
var diaSemanaNumero = fecha.getDay();
var hora = fecha.getHours();
var minuto = fecha.getMinutes();
var segundo = fecha.getSeconds();
var milisegundos = fecha.getMilliseconds();
var miliMarca = fecha.getTime();

document.write ("La fecha completa es: " + fecha + "<br>");

document.write ("El año completo es: " + annoCompleto + "<br>");
document.write ("El año es: " + annoNormal + "<br>");
document.write ("El número de mes es: " + mesNumero + "<br>");
document.write ("El día del mes es: " + diaMesNumero + "<br>");
document.write ("El día de la semana en número es: " + diaSemanaNumero + "<br>");
document.write ("La hora es: " + hora + "<br>");
document.write ("Los minutos son: " + minuto + "<br>");
document.write ("Los segundos son: " + segundo + "<br>");
document.write ("Los milisegundos son: " + milisegundos + "<br>");
document.write ("Desde el uno de enero de 1.970 han transcurrido: " + miliMarca + "
milisegundos.");

//-->
</script>

</head>

<body>
</body>

</html>

106
Módulo 4
Creación de contenidos WEB

cargar la página en Internet Explorer y NetScape hágalo y compruebe la diferencia de los

resultados obtenidos en ambos navegadores.

Existen también métodos para trabajar con la hora de referencia mundial UTC (Universal Time
Coordinate), también denominada hora del meridiano de Greenwich o GMT (Greenwich Meridian
Time). Como se sabe, la hora UTC es una referencia horaria común para todos los países del
mundo. Su ordenador además de la hora local que usted puede visualizar, conoce la diferencia
horaria entre la hora local y la hora UTC ó GMT a pesar de que este dato no sea visible. Esta
diferencia horaria se configuró durante la instalación del sistema. Algunos de los métodos para
trabajar con la hora UTC se describen a continuación si bien son similares a los comentados
anteriormente, con la diferencia de que lo que permiten es configurar u obtener datos referidos al
horario UCT. Por este motivo, los que son comunes no se explican.

• getTimezoneOffset(): Devuelve la diferencia horaria entre la hora local y la hora UCT

expresada en minutos.

• getUTCFullYear().

• getUTCYear().

• getUTCMonth().

• getUTCDate().

• getUTCDay().

• getUTCHours().

• getUTCMinutes().

• getUTCSecons().

• getUTCMilliseconds().

• getUTCTime(): Devuelve la marca de tiempo GMT.

• setUTCFullYear().

• setUTCYear().

• setUTCMonth().

• setUTCDate().

• setUTCDay().

• setUTCHours().

• setUTCMinutes().

• setUTCSecons().

107
Módulo 4
Creación de contenidos WEB

• setUTCMilliseconds().

• setUTCTime(): Configura la marca de tiempo GMT.

• toGMTString(), toUTCString(): Convierte un objeto Date en una cadena en formato GMT.

• toLocateString(): Convierte un objeto Date en una cadena en el formato local del

ordenador del usuario.

• UTC(): Recibe como argumentos unos valores que corresponden a año, mes, día, hora,
minutos, segundos y milisegundos y devuelve una marca de tiempo.

3.7.5 El objeto Boolean

Este objeto nos permite crear objetos booleanos, es decir, permite manejar valores booleanos
como objetos, incluso a partir de datos que no lo son. De este modo, se pueden transformar
datos no booleanos en booleanos.

Los objetos Boolean deben crearse a partir de su constructor.

ObjetoBooleano = new Boolean(valor);

El funcionamiento del constructor del objeto Boolean es el siguiente:

• El nuevo objeto toma el valor false, en los siguientes casos:

- No se pasa ningún argumento.

- El argumento que se pasa (valor) vale 'false'.
- El argumento que se pasa vale 0.
- El argumento que se pasa es la cadena vacía.

• El nuevo objeto toma el valor true, en los siguientes casos:

- El argumento que se pasa (valor) vale 'true'.

- El argumento que se pasa es distinto de 0.
- El argumento que se pasa no es la cadena vacía.

Propiedades de los objetos Boolean.

Los objetos del tipo Boolean disponen de la propiedad :

• Prototyp: permite asignar nuevas propiedades al objeto Boolean.

108
Módulo 4
Creación de contenidos WEB

Métodos de los objetos Boolean.

En cuanto a sus métodos, sólo tiene los tres siguientes:

• eval(): Evalúa la cadena como una sentencia, en referencia al objeto Boolean.

• toString(): Devuelve una cadena que representa al objeto Boolean.

• valueOf(): Convierte el objeto a su tipo primitivo (number, boolean, string ó function).

Se muestra a continuación algunos ejemplos de creación de objetos Boolean:

Ejemplo de creación de objetos Boolean.

var boolean1 = new Boolean()

document.write(boolean1 + "<br>")
//muestra false

var boolean2 = new Boolean("")

document.write(boolean2 + "<br>")
//muestra false

var boolean3 = new Boolean(false)

document.write(boolean3 + "<br>")
//muestra false

var boolean4 = new Boolean(0)

document.write(boolean4 + "<br>")
//muestra false

var boolean5 = new Boolean("0")

document.write(boolean5 + "<br>")
//muestra true

var boolean6 = new Boolean(3)

document.write(boolean6 + "<br>")
//muestra true

var boolean7 = new Boolean("Cadena")

document.write(boolean7 + "<br>")
//muestra true

3.7.6 El objeto Number

Este objeto proporciona una serie de propiedades y métodos muy útiles para trabajar con valores
numéricos. Los objetos Number deben ser creados utilizando su constructor denominado
Number():

ObjetoNumber = new Number(valor),

109
Módulo 4
Creación de contenidos WEB

donde el parámetro valor es el valor inicial que tendrá el objeto creado.

Propiedades del objeto Number.

Las propiedades del objeto Number son las siguientes:

• MAX_VALUE: Número más grande que se puede procesar con JavaScript, que tiene
valor 1.7976931348623157e+308.

• MIN_VALUE: Número más pequeño que se puede procesar con JavaScript, que tiene
valor 5e-324.

• NaN: Valor de Not-A-Number devuelto cuando un elemento no es un número.

• NEGATIVE_INFINITY: Valor de infinito negativo, devuelto cuando se produce un

desbordamiento de pila (overflow), producido por errores en la programación, etc.
Cualquier valor menor que -1.7976931348623157e+308.

• POSITIVE_INFINITY: Valor de infinito positivo, devuelto cuando se produce un

desbordamiento de pila (overflow). Cualquier valor mayor que -
1.7976931348623157e+308.

• prototype: Permite asignar nuevas propiedades al objeto Number.

Métodos del objeto Number.

En cuanto a sus métodos, solo tiene los tres siguientes:

• eval(): Evalúa la cadena como una sentencia, en referencia al objeto Number.

• toString(): Devuelve una cadena que representa al objeto Number.

• valueOf(): Convierte el objeto a su tipo primitivo (number, boolean, string ó function).

Se muestran a continuación algunos ejemplos de creación de objetos Number.

Ejemplos de creación de objetos Number.

var numero1 = new Number()

document.write(numero1 + "<br>")
//muestra un 0

var numero2 = new Number("cadena")

document.write(numero2 + "<br>")
//muestra NaN

var numero3 = new Number("1228")

document.write(numero3 + "<br>")
//muestra 1228

110
Módulo 4
Creación de contenidos WEB

var numero4 = new Number("432a")

document.write(numero4 + "<br>")
//muestra NaN

var numero5 = new Number(123456)

document.write(numero5 + "<br>")
//muestra 123456

var numero6 = new Number(false)

document.write(numero6 + "<br>")
//muestra 0

var numero7 = new Number(true)

document.write(numero7 + "<br>")
//muestra 1

3.7.7 El objeto Function

Para su creación dispone del constructor Function(), cuya sintaxis es:

NuevaFuncion = new Function([argumento1, ... , argumentoN], sentencias),

donde NuevaFuncion es el nombre que le damos a la función que estamos creando,

argumento1,...,argumentoN son los argumentos (opcionales) que recibe la función, y
sentencias es el conjunto de instrucciones que componen el cuerpo (es decir, la implementación)
de la función.

El objeto Function no dispone de métodos, y sólo tiene dos propiedades:

• prototype: Permite asignar nuevas propiedades al objeto Function.

• arguments: Objeto de tipo Array en el que se encuentran almacenados todos los

parámetros de la función.

Consideración final.

Como se puede observar todos los objetos estudiados en este apartado, salvo Math y Date,
coinciden con los tipos de datos básicos con los que cuenta JavaScript. Lo que sucede en
realidad es que al crear una variable, en el momento que JavaScript conoce su tipo, crea un
objeto de ese tipo para la variable en cuestión. De esta manera, cuando se crea una variable de
tipo cadena, automáticamente se pueden utilizar los métodos del objeto String, ya que lo que ha
hecho JavaScript es crear un objeto String para esa variable. Cuando a esa variable se le asigna
otro tipo, por ejemplo, un número, destruye el objeto String y crea otro del tipo Number, con lo
que a partir de ese momento se pueden aplicar sobre el objeto los métodos del objeto Number.

Para finalizar y a modo de resumen, se proporcionan algunos ejemplos de creación de los

distintos tipos de objetos estudiados.

111
Módulo 4
Creación de contenidos WEB

Ejemplos de creación de objetos:

*Objeto de tipo String:

var texto="hola" --> Se crea el objeto

texto.bold(); texto.sub() --> Control de aspecto

*Objeto de tipo Math:

numeroPI=Math.PI --> Se crea el objeto

resultado=Math.sqrt(num)

*Objeto de tipo Date:

objetoFecha = new Date() --> Se crea el objeto

objetoFecha.getYear() --> Se obtiene el año
del objeto

*Objeto de tipo Array:

objetoArray = new Array() --> tr>

vector = new Array(10) --> Se crea el objeto
vector[i]=dato --> Se inicializan los elementos
del array
vector.length --> Se obtiene el tamaño del
array

*Objeto de tipo Boolean:

dato = new Boolean() --> Se crea el objeto

booleano con valor 'false'
dato = new Boolean(true) --> Se crea el objeto
booleano con valor 'true'
dato = new Boolean("hola") --> Se crea el
objeto booleano con valor 'true'
dato = new Boolean("") --> Se crea el objeto
booleano con valor 'false'

*Objeto de tipo Number:

dato = new Number(136) --> Se crea el objeto

con valor 136
dato = new Number(-16) --> Se crea el objeto
con valor -16

112
Módulo 4
Creación de contenidos WEB

*Objeto de tipo Function:

mi_funcion = new
Function(num1,num1,num1*num2) --> Se crea
el objeto

113
Módulo 4
Creación de contenidos WEB

3.8 OBJETOS DEL NAVEGADOR.

Cuando el lenguaje JavaScript funciona en un navegador, dispone de una serie de objetos

incorporados en el propio lenguaje que se refieren a los típicos elementos de un navegador.
Elementos como la ventana actual, el documento sobre el que trabajamos, o el navegador que
estamos utilizando. Esto es lo que se denomina el DOM de JavaScript, o lo que se denomina
Modelo de objetos de documento (Document Object Model). Este modelo establece una
jerarquía de objetos de manera que existen objetos con un mayor nivel jerárquico que otros. El
objeto de mayor nivel jerárquico es Window, que representa la ventana en la que está abierta
el navegador y cargada la página. Se puede decir que el objeto Window es el más importante
ya que es el que contiene a los demás. Otro objeto de nivel inferior a Window es el objeto
document que representa la página que está cargada en el navegador. Pues bien, lo que se
dice es que el objeto document es propiedad del objeto window por encontrarse en un nivel
inferior. De esta manera, para hacer referencia a una propiedad del objeto document como
puede ser el color del texto, se escribiría la siguiente sentencia:

window.document.fgColor="red";

En cualquier caso, como window es el objeto de mayor jerarquía, JavaScript permite omitir su
nombre, siendo también válida la siguiente sentencia:

document.fgColor="red";

A un objeto que está en el nivel inmediatamente superior de otro se le denomina objeto padre.
El que se encuentra en el nivel inmediatamente inferior se le denomina hijo y, tal como se ha
indicado, se dice que este objeto es propiedad del nodo padre. En la siguiente figura se
muestra un esquema simplificado de la jerarquía de los objetos del navegador de JavaScript:

Figura 3.32.- Jerarquía de objetos de navegador en JavaScript.

114
Módulo 4
Creación de contenidos WEB

Los objetos de esta jerarquía se pueden dividirlos en dos grupos:

• Los objetos del nivel más alto de la jerarquía, que tratan directamente con las
posibilidades del navegador (como, por ejemplo, abrir una nueva ventana, ver la lista de
sitios por los que hemos pasado, el host al que nos conectamos, etc.). Este grupo de
objetos del navegador se estudiará en detalle.

• Y los objetos directamente relacionados con las etiquetas HTML. Este otro grupo
de objetos del navegador también serán objeto de estudio.

La siguiente tabla muestra los objetos del navegador de JavaScript con sus correspondientes
etiquetas HTML (cuando existen):

Objeto de JavaScript Etiqueta HTML

window
frame <FRAME>
document <BODY>
form <FORM>
button <INPUT TYPE="button">
checkbox <INPUT TYPE="checkbox">
hidden <INPUT TYPE="hidden">
fileUpload <INPUT TYPE="file">
password <INPUT TYPE="password">
radio <INPUT TYPE="radio">
reset <INPUT TYPE="reset">
select <SELECT>
submit <INPUT TYPE="submit">
text <INPUT TYPE="text">
textarea <TEXTAREA>
link <A HREF=" ">
anchor <A NAME=" ">
applet <APPLET>
image <IMG>
plugin <EMBED>
area <MAP>
history
location
navigator

115
Módulo 4
Creación de contenidos WEB

Como ya se ha indicado, en esta jerarquía, contra lo que pueda parecer, no existe herencia
alguna. Los objetos se relacionan por composición. Por ejemplo, un objeto Window se
compone de (o contiene), entre otras cosas, un objeto document, y éste a su vez se compone
de diversos objetos, como Form, Image, etc.

Es muy importante entender estas relaciones de contenedor-contenido entre los objetos, para
saber cómo referenciarlos utilizando el operador punto, que además de utilizarse para hacer
referencia a las propiedades y métodos de un objeto, se utiliza también para denotar los
objetos que están contenidos dentro de otro objeto, tal y como se ha indicado anteriormente.

Indicar que, además de la notación de punto, se puede también utilizar la notación de array.
Normalmente, esta notación se utiliza cuando el objeto al que se quiere hacer referencia no
tiene definido su atributo NAME: en estos casos, no se puede utilizar la notación del punto
porque no se dispone de un nombre con el que identificar al objeto.

Por ejemplo, para referenciar el primer elemento del primero de los formularios de
nuestro documento, se escribiría:

document.forms[0].elements[0]

A continuación se hace un pequeño repaso de los objetos más importantes junto con sus
métodos y propiedades más utilizados, empezando con los objetos relacionados con el
navegador, para posteriormente analizar los objetos relacionados con las etiquetas HTML.

3.8.1 Objetos relacionados con el navegador.

3.8.1.1.- El objeto Screen.

Este objeto representa la pantalla del monitor y permite determinar sus características (altura,
anchura, etc.). Gracias a este objeto se pueden ajustar los contenidos de la página al tamaño
de la pantalla del usuario.

Propiedades del método Screen.

• avalHeight: Permite obtener la altura disponible o efectiva de pantalla. Esto es, la altura
de la que dispone el programador para mostrar sus contenidos. Se obtiene restando a la
altura total de pantalla, la altura correspondiente a barras de tareas, barras de menus,
etc.

• avalWidth: Permite obtener la anchura disponible o efectiva de pantalla. Esto es, la

anchura de la que dispone el programador para mostrar sus contenidos. Se obtiene
restando a la anchura total de pantalla, la anchura correspondiente a barras de
desplazamientos, barras de tareas, etc.

• colorDepth: Permite obtener la profundidad de color, que normalmente es de 32 bits.

• height: Permite obtener la resolución en píxeles de la altura total del monitor.

116
Módulo 4
Creación de contenidos WEB

• updateInterval: Indica el tiempo en milisegundos que tarda en refrescarse la pantalla

cuando se produce algún cambio en sus contenidos.

• width: Permite obtener la resolución en píxeles de la anchura total del monitor.

Todas las propiedades del objeto Screen, a excepción de updateInterval, son, como es lógico,
de solo lectura.

En el siguiente ejemplo se puede comprobar el efecto de estas propiedades.

Ejemplo de las propiedades del objeto Screen:

<html>
<head>

<title>
Ejemplo de propiedades del objeto Screen.
</title>

<script language="javascript">
<!--
var anchura = screen.width;
var altura = screen.height;
var anchuraDisponible = screen.availWidth;
var alturaDisponible = screen.availHeight;
var profundidadColor = screen.colorDepth;
var intervalo = screen.updateInterval;

document.write ("La anchura del monitor es " + anchura + " píxeles.<br>");

document.write ("La altura del monitor es " + altura + " píxeles.<br>");
document.write ("La anchura del área disponible es " + anchuraDisponible + " píxeles.<br>");
document.write ("La altura del área disponible es " + alturaDisponible + " píxeles.<br>");
document.write ("La profundidad del color es " + profundidadColor + " bits.<br>");
document.write ("El intervalo predeterminado es " + intervalo + " milisegundos.<br>");

//-->
</script>

</head>

<body>
</body>

</html>

Al cargar la página en el navegador se obtiene:

117
Módulo 4
Creación de contenidos WEB

Figura 3.33.- Aspecto del navegador tras cargar el ejemplo de las propiedades del objeto
Screen.

El objeto Screen no dispone de ningún método.

3.8.1.2.- El objeto Window.

Dentro de la jerarquía de objetos de JavaScript, el objeto más alto de la jerarquía es el objeto

Window, que representa una ventana del navegador. Todos los elementos con los que el
usuario interactúa se sitúan dentro de una ventana. Por ello, mientras que otros objetos
pueden estar o no presentes, el objeto Window siempre lo estará. El objeto Window contiene al
resto de objetos.

De hecho, pueden existir múltiples instancias del objeto Window en un mismo instante: esto
sucede cuando estamos trabajando en entornos con varias ventanas, o con marcos ya que
cada marco actúa como una ventana independiente, y por tanto dispone de su propio objeto
Window.

Propiedades del objeto Window.

Los objetos de tipo Window poseen, entre otras, las siguientes propiedades:

• closed: Valor booleano que indica si la ventana está o no cerrada.

• defaultStatus: Contiene el mensaje, por defecto, que aparece en la barra de estado del
navegador.

• document: Objeto que contiene el la página web que se está mostrando.

118
Módulo 4
Creación de contenidos WEB

• frame: Array que representa los marcos (objetos de tipo Frame) contenidos en la
ventana actual. El orden en que aparecen en el array es el orden en que están definidos
en el documento HTML.

• frames array: El vector que contiene todos los frames de la página. Se accede por su
índice a partir de 0.

• history: Array que representa las URL almacenadas en el historial del objeto Window
actual.

• innerHeight: Tamaño en pixels del espacio donde se visualiza la página, en vertical.

• innerWidth: Tamaño en pixels del espacio donde se visualiza la página, en horizontal.

• length: Valor entero que indica el número de marcos del objeto Window actual.

• location: La URL del documento que se está visualizando. Podemos cambiar el valor
de esta propiedad para movernos a otra página. Ver también la propiedad location del
objeto document.

• locationbar: Objeto barra de direcciones de la ventana.

• menubar: Objeto barra de menús de la ventana.

• name: Nombre del objeto Window, ó del frame, actual.

• opener: Hace referencia a la ventana de navegador que abrió la ventana donde

estamos trabajando. Se verá con detenimiento en el tratamiento de ventanas con
Javascript.

• outherHeight: Tamaño en pixels del espacio de toda la ventana, en vertical. Esto

incluye las barras de desplazamiento, botones, etc.

• outherWidth: Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto

incluye las barras de desplazamiento.

• parent: Referencia al objeto Window que contiene el frameset (los marcos).

• personalbar: Objeto barra personal del navegador.

• scrollbars: Objeto de las barras de desplazamiento de la ventana.

• self: Nombres alternativos del objeto Window actual.

• status: Determina el mensaje que aparece en la barra de estado del navegador.

• statusbar: Objeto barra de estado del navegador.

• toolbar: Objeto barra de herramientas.

• top: Nombre alternativo para la ventana del nivel más superior.

119
Módulo 4
Creación de contenidos WEB

Métodos del objeto Window.

En cuanto a los métodos, podemos destacar los siguientes:

• alert(mensaje): Muestra el mensaje en una caja de diálogo.

• back(): Ir una página atrás en el historial de páginas visitadas. Funciona como el botón
de volver de la barra de herramientas.

• blur(): Quitar el foco de la ventana actual.

• captureEvents(eventos): Captura los eventos que se indiquen por parámetro.

• clearInterval(): Elimina la ejecución de sentencias asociadas a un intervalo indicadas

con el método setInterval().

• clearTimeout(): Elimina la ejecución de sentencias asociadas a un tiempo de espera

indicadas con el método setTimeout().close(): Cierra la ventana (el objeto Window
actual).

• confirm(mensaje): Muestra el mensaje en una caja de diálogo, para su confirmación

(aparecen las opciones de "Aceptar" y "Cancelar").

• eval(): Evalúa la cadena como una sentencia, en referencia al objeto Window.

• find(): Muestra una ventanita de búsqueda.

• focus(): Coloca el foco de la aplicación en la ventana.

• forward(): Ir una página adelante en el historial de páginas visitadas. Como si

pulsásemos el botón de adelante del navegador.

• home(): Ir a la página de inicio que haya configurada en el explorador.

• moveBy(pixelsX, pixelsY) : Mueve la ventana del navegador los pixels que se indican
por parámetro hacia la derecha y abajo.

• moveTo(pixelsX, pixelsY): Mueve la ventana del navegador a la posición indicada en

las coordenadas que recibe por parámetro.

• open(URL, nombre, propiedades): Abre la URL especificada en la ventana llamada

nombre, si es que existe tal ventana; si no existe, la crea con las características
especificadas en el tercer parámetro. Éstas pueden ser:

o toolbar = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener barra de

herramientas.
o location = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener campo de
localización.
o directories = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener
botones de dirección.
o status = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener barra de
estado.

120
Módulo 4
Creación de contenidos WEB

o menubar = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener barra de

menús.
o scrollbars = [yes,no,1,0]: Indica si la nueva ventana deberá o no tener barras
de desplazamiento.
o resizable = [yes,no,1,0]: Indica si la nueva ventana podrá o no cambiar de
tamaño.
o alwaysRaised = [yes,no,1,0]: Indica si la nueva ventana deberá permanecer
siempre delante de cualquier otra ventana.

• print(): Equivale a pulsarl botón de imprimir del navegador.

• prompt(mensaje, sugerencia): Muestra el mensaje en una caja de diálogo que

contiene una caja de texto que permite al usuario introducir información. En dicha caja
aparece la sugerencia, a modo de respuesta por defecto (podemos no ponerla).

• releaseEvents(eventos): Deja de capturar eventos del tipo que se indique por

parámetro.

• resizeBy(pixelsAncho,pixelsAlto): Redimensiona el tamaño de la ventana, añadiendo

a su tamaño actual los valores indicados en los parámetros. El primero para la altura y
el segundo para la anchura. Admite valores negativos si se desea reducir la ventana.

• resizeTo(pixelsAncho,pixelsAlto): Redimensiona la ventana del navegador para que

ocupe el espacio en pixels que se indica por parámetro.

• routeEvent(): Enruta un evento por la jerarquía de eventos.

• scroll(pixelsX,pixelsY): Hace un scroll de la ventana hacia la coordenada indicada por

parámetro. Este método está desaconsejado, pues ahora se debería utilizar scrollTo().

• scrollBy(pixelsX,pixelsY): Hace un scroll del contenido de la ventana relativo a la

posición actual.

• scrollTo(pixelsX,pixelsY): Hace un scroll de la ventana a la posición indicada por el

parámetro. Este método se tiene que utilizar en lugar de scroll.

• setInterval(): Define un script para que sea ejecutado indefinidamente en cada intervalo
de tiempo.
• setTimeout("función", tiempo): Lanza la función especificada tras pasado el tiempo
(expresado en milisegundos).

• stop(): Equivale a pulsar el botón de stop de la ventana del navegador.

• toString(): Devuelve una cadena que representa al objeto Window.

• valueOf(): Convierte el objeto a su tipo primitivo (number, boolean, string ó function).

La función principal del objeto Window es la de contener al resto de objetos. Sin embargo, no
posee contenido propio: el contenido del documento Web que se está visualizando está
vinculado con el objeto Document.

121
Módulo 4
Creación de contenidos WEB

Para finalizar con el objeto Window se muestran un par de ejemplos con los que se pueden
comprobar los efectos de las propiedades y métodos presentados.

Ejemplos de propiedades y métodos del objeto Window.

Ejemplo 1.- Ventana que se desplaza por la pantalla.

<html>
<head>

<title>
Ejemplo de propiedades del objeto Window.
</title>

<script language="javascript">
<!--
var izquierda=0, superior=300, desplazamiento=1;

window.moveTo (0,300);
window.resizeTo (200,200);

for (izquierda = 0; izquierda<(screen.availWidth-200); izquierda++)

{
window.moveBy (desplazamiento,0);
}

desplazamiento = -1;
for (izquierda = 0; izquierda<(screen.availWidth-200); izquierda++)
{
window.moveBy (desplazamiento,0);
}

//-->
</script>

</head>

<body>
</body>

</html>

Ejemplo 2.- Métodos del objeto Window.

<html>
<head>

<title>
Ejemplo de métodos del objeto Window.

122
Módulo 4
Creación de contenidos WEB

</title>

</head>

<body>
<form>
<input type="button" value="Ventana de búsqueda (Solo Netscape)" onClick="window.find()">
<br>
<br>
<input type="button" value="Mover la ventana 10 derecha,10 abajo" onClick="moveBy(10,
10)">
<br>
<br>
<input type="button" value="Mover la ventana al punto (100,10)" onClick="moveTo(100, 10)">
<br>
<br>
<input type="button" value="Imprimir esta página" onClick="print()">
<br>
<br>
<input type="button" value="Aumenta la ventana 10 ancho,10 largo" onClick="resizeBy(10,
10)">
<br>
<br>
<input type="button" value="Fija el tamaño de la ventana en 400 x 200" onClick="resizeTo(400,
200)">
<br>
<br>
<input type="button" value="Scroll arriba del todo" onClick="scroll(0,0)">
<br>
<br>
<input type="button" value="Scroll arriba 10 pixels" onClick="scrollBy(0,-10)">
</form>

</body>

</html>

Una vez cargado el segundo ejemplo en el navegador, este presenta el siguiente aspecto:

123
Módulo 4
Creación de contenidos WEB

Figura 3.34.- Aspecto del navegador tras cargar la página del ejemplo de métodos del
objeto Window.

Al pulsar sobre los distintos botones el usuario puede ir comprobando los efectos que se van
produciendo.

Para finalizar se muestra un tercer ejemplo en el que se puede observar como crear ventanas
secundarias.

Ejemplo de creación de una ventana secundaria.

<html>
<head>

<title>
Ejemplo de apertura de una ventana secundaria.
</title>

<script language="javascript">
<!--
window.open ("contenidoSecundaria.htm","ventana");
//-->
</script>

</head>

<body>
<h1>
Ésta es la ventana principal.

124
Módulo 4
Creación de contenidos WEB

</h1>
</body>

</html>

La página que se carga en la ventana secundaría es la contenida en el fichero

contenidoSecundaria.htm que se le pasa como parámetro. En este caso, el código de la
página secundaría podría ser algo tan sencillo como lo siguiente:

Contenido del fichero contenidoSecundaria.htm:

<html>

<head>
<title>
Página que se carga en la ventana secundaria.
</title>
</head>

<body>
<h1>
Ésta es la ventana secundaria.
</h1>
</body>

</html>

Al cargar en su navegador el código de la página del último ejemplo, mostrará el siguiente

aspecto:

Figura 3.35.- Aspecto del navegador tras cargar el ejemplo para crear una ventana
secundaria.

125
Módulo 4
Creación de contenidos WEB

3.8.1.3.- El objeto Frame.

Las ventanas (es decir, los objetos de tipo Window) pueden dividirse en varias subventanas,
que reciben el nombre de marcos o frames, cada uno de los cuales puede contener un
documento Web distinto, permitiendo así mantener varios documentos simultáneamente.

Propiedades del objeto Frame.

Las propiedades del objeto Frame coinciden con las propiedades del objeto Window con
alguna excepción:

• parent: Referencia al objeto Window que contiene el frameset.

Métodos del objeto Frame.

Coinciden con los del objeto Window.

3.8.1.4.- El objeto Document.

El objeto Document representa el documento HTML cargado en el navegador con todos sus
contenidos. Su etiqueta HTML es <BODY>. Además, cada uno de los objetos que lo
componen se corresponden con etiquetas HTML. Por tanto, con este objeto se pueden
controlar todos los elementos que contiene la página cargada en el navegador.
Jerárquicamente se encuentra un nivel por debajo del objeto Window, por lo que se puede
decir que un objeto Document es una propiedad del objeto Window.

Propiedades del objeto Document.

Las propiedades de este objeto son el reflejo, en JavaScript, de los atributos de un documento
HTML:

• alinkColor, linkColor, vlinkColor: Representan, respectivamente, el color de los

enlaces activos, de todos los enlaces, y de los enlaces visitados, del documento.

• Anchor: Un ancla de la página. Se consigue con la etiqueta <A

name="nombre_del_ancla">. Se accede por su nombre.

• anchors array: Array que contiene todos los enlaces internos existentes en el
documento.

• Applet: Un applet de la página. Se accede por su nombre.

• applets array: Array que contiene todos los applets existentes en el documento.

• Area: Una etiqueta <AREA>, de las que están vinculadas a los mapas de imágenes
(Etiqueta ). Se accede por su nombre.

• bgColor, fgColor: Color del fondo y del primer plano del documento, respectivamente.

• classes: Las clases definidas en la declaración de estilos CSS.

126
Módulo 4
Creación de contenidos WEB

• cookie: Cadena con los valores de las cookies del documento actual.

• domain: Nombre del servidor que ha servido el documento.

• Embed: Un elemento de la pagina incrustado con la etiqueta <EMBED>. Se accede por

su nombre.

• embeds array: Array que contiene todos los elementos <EMBED> existentes en el
documento.

• Form: Un formulario de la página. Se accede por su nombre.

• forms array: Array que contiene todos los formularios existentes en el documento.

• ids: Para acceder a estilos CSS.

• Image: Una imagen de la página web. Se accede por su nombre.

• images array: Array que contiene todos las imágenes del documento.

• Link: Un enlace de los de la página. Se accede por su nombre.

• links array: Array que contiene todos los enlaces externos existentes en el documento.

• location: Cadena con la URL del documento actual.

• referrer: La página de la que viene el usuario.

• tags:Estilos definidos a las etiquetas de HTML en la página web.

• title: Cadena que contiene el título del documento actual.

• URL: Lo mismo que location, pero es aconsejable utilizar location ya que URL no existe
en todos los navegadores.

Se muestra a continuación un ejemplo relacionados con las propiedades del objeto Document.

Ejemplos propiedades del objeto Document: Cambiar el color de fondo de la página.

<html>

<head>

<title>
Ejemplo de propiedades del objeto Document.
</title>

<script>
function cambiaColorFondo(colorfondo)
{

127
Módulo 4
Creación de contenidos WEB

document.bgColor = colorfondo
}

function cambiaColorTexto(colortexto)
{
document.fgColor = colortexto
}

</script>

</head>

<body>

<form>
<input type="Button" value="Color de fondo Rojo" onclick="cambiaColorFondo('ff0000')">
<input type="Button" value="Color de fondo Verde" onclick="cambiaColorFondo('00ff00')">
<input type="Button" value="Color de fondo Azul" onclick="cambiaColorFondo('0000ff')">

<br>

<input type="Button" value="Color de texto Rojo" onclick="cambiaColorTexto('ff0000')">

<input type="Button" value="Color de texto Verde" onclick="cambiaColorTexto('00ff00')">
<input type="Button" value="Color de texto Azul" onclick="cambiaColorTexto('0000ff')">
</form>

<br>

<br>

<br>

<h1> Aquí el texto que contiene la página. </h1>

</body>

</html>

Métodos del objeto Document.

El objeto Document dispone de los siguientes métodos:

• captureEvents(): Para capturar los eventos que ocurran en la página web. Recibe
como parámetro el evento que se desea capturar.

• clear(): Limpia la ventana del documento (es decir, borra la página del navegador).

• close(): Cierra la escritura sobre el documento actual.

128
Módulo 4
Creación de contenidos WEB

• contextual()
Ofrece una línea de control de los estilos de la página. En el caso que deseemos
especificarlos con Javascript.

• getSelection()
Devuelve un string que contiene el texto que se ha seleccionado. Sólo funciona en
Netscape.

• handleEvent()
Invocas el manejador de eventos del elemento especificado.

• open(mime,"replace"): Abre la escritura sobre un documento. El primer parámetro

(mime) especifica el tipo de documento soportado por el navegador. Si se pasa la
cadena "replace" como segundo parámetro, se reutiliza el documento anterior del
historial.

• releaseEvents(): Liberar los eventos capturados del tipo que se especifique,

enviándolos a los objetos siguientes en la jerarquía.

• routeEvent()
Pasa un evento capturado a través de la jerarquía de eventos habitual.

• write(): Escribe texto y HTML sobre el documento actual.

• writeln(): Escribe texto y HTML sobre el documento actual, seguido de una nueva línea.

Como se puede observar, los métodos del objeto Document sirven para dos tareas claramente
diferenciadas: un grupo ofrece funciones para el control de los documentos, como escribir,
abrirlos y cerrarlos, y el otro grupo ofrece herramientas para el control de los eventos en el
documento.

Las cookies: Objeto dependiente de Document.

En principio y como introducción de estos elementos se puede decir los siguiente:

ƒ Son elementos de una lista que se guarda en el ordenador visitante. Depende del
objeto Document.
ƒ Utilidad: Saber cuántas veces se ha accedido desde una máquina a un servidor.
ƒ Campos: nombre=valor; expires=caducidad;
ƒ Se almacena en el archivo cookies.txt o en en directorio cookies.
ƒ Si no tiene fecha de caducidad, se borra al cerrar el navegador.
ƒ Se pueden deshabilitar en los propios navegadores.
ƒ Se necesitan dos funciones para su manejo:
- Crear cookie
- Consultar cookie

129
Módulo 4
Creación de contenidos WEB

3.8.1.5.- El objeto Navigator

Este objeto, que no tiene una relación real con el resto de objetos de la jerarquía, proporciona
información relativa al navegador Web que el usuario está utilizando para visualizar los
documentos Web.

Propiedades del objeto Navigator.

Las propiedades de llos objetos de tipo Navigator son:

• appCodeName: Cadena que contiene el nombre del código del navegador cliente.

• appMinorVersion: Número de parche aplicado al navegador. (Compatible solo con

Internet Explorer)

• appName: Cadena que contiene el nombre del navegador del navegador cliente.

• appVersion: Cadena que contiene información sobre la versión del navegador cliente.

• cookieEnabled: Tiene valor true si el navegador del cliente admite cookies y false en
caso contrario.

• cpuClass: Permite obtener el tipo de procesador empleado por la máquina del cliente.
(Compatible solo con Internet Explorer)

• language: Cadena de dos caracteres que contiene información sobre el idioma de la

versión del navegador cliente.(Compatible solo con Internet Explorer)

• mimeTypes: Array que contiene todos los tipos MIME soportados por el navegador.

• online: Toma valor true si el navegador está conectado a internet y false en caso
contrario. (Compatible solo con Internet Explorer)

• platform: Cadena con la plataforma sobre la que se está ejecutando el navegador.

• plugins: Array que contiene todos los 'plug-ins' soportados por el navegador.

• product: Nombre de producto del navegador. (Compatible solo con Netscape)

• productSub: Permite obtener más datos relacionados con el navegador, por ejemplo la
fecha de fabricación. (Compatible solo con Netscape)

• securityPoliticy: Permite obtener el tipo de encriptación de datos que soporta el

navegador. Devuelve la cadena Export policy si soporta una encriptación baja y la
cadena US &CA domestic policy si soporta una encriptación alta. (Compatible solo con
Internet Explorer)

• userAgent: Cadena que contiene la cabecera completa del agente, enviada en una
petición HTML (contiene los datos de las propiedades appCodeName y appVersion). En
definitiva, contiene el nombre y versión del navegador, el sistema operativo empleado,
etc. (Compatible solo con Internet Explorer)

130
Módulo 4
Creación de contenidos WEB

• vendor: Permite conocer el nombre de la compañía que ha desarrollado el navegador.

(Compatible solo con Netscape)

• vendorSub: Permite obtener información adicional acerca de la compañía que ha

desarrollado el navegador. (Compatible solo con Netscape)

Métodos del objeto Navigator.

Entre los métodos de Navigator podemos destacar los siguientes:

• javaEnabled(): Devuelve true si el cliente permite la utilización de Java, y false en caso

contrario.

Para comprobar el funcionamiento de las propiedades del objeto Navigator, cargue en su

navegador la siguiente página y compruebe los resultados.

Ejemplo de propiedades del objeto Navigator:

<html>
<head>

<title>
Ejemplo propiedades del objeto Navigator.
</title>

<script language="javascript">
<!--
var cadenaDatos = navigator.userAgent.toLowerCase();
var ie = "Microsoft Internet Explorer";
var nn = "Netscape Navigator";
var op = "Opera";
var navegador;
var version;
var sistema;

if (cadenaDatos.indexOf ("opera") != -1)

{
navegador = op;
} else if (cadenaDatos.indexOf ("msie") != -1) {
navegador = ie;
} else {
navegador = nn;
}

if (navegador == ie)
{
var posicion = cadenaDatos.indexOf ("msie") + 5;
version = cadenaDatos.substr (posicion, 3);
} else if (navegador == nn) {
var posicion = cadenaDatos.indexOf ("netscape") + 9;
version = cadenaDatos.substr (posicion);
} else {

131
Módulo 4
Creación de contenidos WEB

var posicion = cadenaDatos.indexOf ("opera") + 6;

version = cadenaDatos.substr (posicion, 3);
}

if ((cadenaDatos.indexOf("windows 3.1") != -1) || (cadenaDatos.indexOf("win16") != -1) ||

(cadenaDatos.indexOf("16bit") != -1) || (cadenaDatos.indexOf("16-bit") != -1))
{
sistema = "Windows 3.1 o 3.11";
} else if ((cadenaDatos.indexOf ("windows 95") != -1) || (cadenaDatos.indexOf ("win95") != -1)) {
sistema = "Windows 95";
} else if ((cadenaDatos.indexOf ("win 9x 4.90") != -1) || (cadenaDatos.indexOf ("windows me")
!= -1)) {
sistema = "Windows Me";
} else if ((cadenaDatos.indexOf ("windows 98") != -1) || (cadenaDatos.indexOf ("win98") != -1)) {
sistema = "Windows 98";
} else if ((cadenaDatos.indexOf ("windows nt 5.1") != -1) || (cadenaDatos.indexOf ("winnt 5.1")
!= -1)) {
sistema = "Windows XP";
} else if ((cadenaDatos.indexOf ("windows nt 5.0") != -1) || (cadenaDatos.indexOf ("winnt 5.0")
!= -1)) {
sistema = "Windows 2000";
} else if ((cadenaDatos.indexOf ("windows nt") != -1) || (cadenaDatos.indexOf ("winnt") != -1)) {
sistema = "Windows NT";
} else if ((cadenaDatos.indexOf ("mac") != -1) && ((cadenaDatos.indexOf ("68000") != -1) ||
(cadenaDatos.indexOf ("68k") != -1))) {
sistema = "Mac 68K";
} else if ((cadenaDatos.indexOf ("mac") != -1) && ((cadenaDatos.indexOf ("powerpc") != -1) ||
(cadenaDatos.indexOf ("ppc") != -1))) {
sistema = "Mac Power PC";
} else if (cadenaDatos.indexOf ("linux") != -1) {
sistema = "Linux";
} else {
sistema = "Otro sistema operativo";
}

document.write ("<h1>Informe de entorno</h1><br>");

document.write ("El navegador detectado es: " + navegador + "<br>");
document.write ("La versión del navegador es: " + version + "<br>");
document.write ("El sistema operativo encontrado es: " + sistema + "<br>");
document.write ("Fin de informe de entorno.");

//-->
</script>

</head>

<body>
</body>

</html>

132
Módulo 4
Creación de contenidos WEB

Al cargar esta página en su navegador obtendrá algo similar a lo mostrado en la siguiente

figura:

Figura 3.36.- Aspecto del navegador tras cargar la página del ejemplo de las
propiedades del objeto navigator.

3.8.1.6.- El objeto Location.

Este objeto contiene la dirección URL de la página actual e información adicional sobre esta, y
tiene dos propósitos principales:

1.- Modificar el objeto Location para cambiar a una nueva URL.

2.- Extraer sus componentes para poder trabajar con ellos de forma individual
(recordemos que la estructura básica de una URL contiene el protocolo que se ha de
utilizar, el nombre del servidor (host), el puerto utilizado y el camino hasta el recurso).

Propiedades del objeto Location.

Las principales propiedades del objeto Location son:

• hash: Cadena que contiene el nombre de un enlace interno, dentro de la URL.

• host: Cadena que contiene el nombre del servidor y el número de puerto, dentro de la
URL.

• hostname: Cadena que contiene el nombre de dominio del servidor (es decir, la
dirección IP), dentro de la URL.

133
Módulo 4
Creación de contenidos WEB

• href: Cadena que contiene la URL completa (protocolo+host+ruta (si procede) + puerto
(si procede)). Esta es sin duda la propiedad más importante.

• pathname: Cadena que contiene el camino al recurso, dentro de la URL.

• port: Cadena que contiene el número de puerto del servidor, dentro de la URL.

• protocol: Cadena que contiene el protocolo de comunicación utilizado (incluyendo los

dos puntos), dentro de la URL.

Métodos del objeto Location.

Los métodos del objeto Location son los siguientes:

• reload(valor): Recarga (actualiza) la URL especificada en el navegador. Este método

tiene una parámetro de tipo booleano, de manera que si no se le pasa ningún valor o se
le pasa valor false, actualiza la página desde la caché del navegador, en caso contrario
la carga desde el servidor.

location.reload(); // Actualiza la página desde la caché del navegador.

location.reload(false); // Actualiza la página desde la caché del navegador.

location.reload(true); // Actualiza la página desde el servidor.

• replace(URL): Este método está relacionado con el objeto History que se estudiará a
continuación. Lo que hace este método es reemplazar el historial de página visitadas
mientras carga la URL especificada en el parámetro URL.

3.8.1.7.- El objeto History.

La función del objeto History es almacenar la lista de sitios por los que el usuario ha estado
navegando en la sesión actual. guardar la referencia de los últimos lugares visitados.

Las propiedades de este objeto son:

• current: Cadena que contiene la URL completa de la entrada actual del historial.

• next: Cadena que contiene la URL completa de la siguiente entrada en el historial.

• length: Valor entero que contiene el número de ítems del historial.

• previous: Cadena que contiene la URL completa de la anterior entrada en el historial.

• Para finalizar, vemos los métodos del objeto History:

134
Módulo 4
Creación de contenidos WEB

• back(): Recarga la URL del documento anterior en el historial.

• forward(): Recarga la URL del documento siguiente en el historial.

• go(posición): Permite avanzar o retroceder un número determinado de páginas del

historial. Si el parámetro posición es positivo el desplazamiento es hacía adelante, en
caso contrario es hacía atrás.

3.8.2 Objetos relacionados con las etiquetas HTML.

En este apartado se estudian los objetos que forman parte del HTML (texto, imágenes,
hipervínculos, formularios, etc.) y como gestionarlos desde JavaScript.

El objeto Link.

Es el objeto que permite realizar enlaces externos al documento actual. Refleja, pues, todos
los enlaces de hipertexto que aparecen en el documento.

Las principales propiedades del objeto Link son:

• hash: Es una cadena con el nombre del enlace, dentro de la URL.

• target: Cadena que contiene el nombre de la ventana (ó marco) especificado en el

atributo TARGET.

• host: Cadena que contiene el nombre del servidor y el número de puerto, dentro de la
URL.

• hostname: Cadena que contiene el nombre de dominio del servidor (ó la dirección IP),
dentro de la URL.

• href: Cadena que contiene la URL completa.

• innerHTML: El contenido del código HTML situado entre los tags <a> y </a>.

• pathname: Cadena que contiene el camino al recurso, dentro de la URL.

• port: Cadena que contiene el número de puerto del servidor, dentro de la URL.

• protocol: Cadena que contiene el protocolo utilizado (incluyendo los dos puntos),
dentro de la URL.

• search: Es una cadena que tiene la información pasada en una llamada a un script
CGI, dentro de la URL.

• target: Es el marco de destino del enlace, en caso de que el documento web al que se
apunte se deba cargar en un marco distinto al actual.

135
Módulo 4
Creación de contenidos WEB

El objeto Anchor

Este objeto permite definir los enlaces internos del documento (es decir, las llamadas "anclas"
del documento).

Sólo posee dos propiedades:

• href: Cadena que contiene la URL completa.

• target: Cadena que contiene el nombre de la ventana (ó marco) especificado en el

atributo TARGET.

El objeto Form

Como ya se estudió al principio de este tema, una de las utilidades más importantes de
JavaScript es la de permitir que el usuario pueda interactuar en el lado del cliente. En HTML,
esta interacción podía realizarse a través de los formularios (creados mediante la etiqueta
<FORM>), que se corresponden con el objeto Form de JavaScript.

El objeto Form permite, no sólo recuperar la información suministrada por el usuario, sino
también reforzar la forma en que dicha interacción ocurre.

Gracias a los elementos del objeto Form se puede configurar el modo en el que el usuario va a
interactuar con el documento.

Los objetos de tipo Form poseen las siguientes propiedades:

• action: Cadena que especifica la URL donde la información del usuario debe ser
procesada/enviada.

• elements: Array que contiene todos los objetos que aparecen en el formulario (en el
orden en que aparecen en el código HTML).

• encoding: Cadena que contiene la codificación MIME especificada en el atributo

ENCTYPE.

• method: Cadena que contiene el nombre del método encargado de recibir/procesar la

información.

• target: Cadena que contiene el nombre de la ventana a la que se deben enviar las
respuestas del formulario.

En cuanto a los métodos de Form, son los siguientes:

• reset(): Borra el formulario (equivale a pulsar sobre un botón de tipo RESET).

• submit(): Envía el formulario (equivale a pulsar sobre un botón de tipo SUBMIT).

136
Módulo 4
Creación de contenidos WEB

El objeto Image

Este objeto nos permite trabajar con imágenes dentro del documento, ampliando la
funcionalidad de la etiqueta <IMAGE> de HTML (recordemos que HTML no nos permitía
utilizar las imágenes de una forma dinámica).

Las propiedades más importantes de estos objetos son:

• border: Contiene el valor del atributo BORDER de la imagen.

• height, width: Contienen, respectivamente, el valor de los atributos HEIGHT y WIDTH.

• hspace, vspace: Contienen, respectivamente, el valor de los atributos HSPACE y

VSPACE.

• name: Contiene el valor del atributo NAME de la imagen.

• prototype: Permite añadir nuevos atributos al objeto.

• src: Contiene el valor del atributo SRC de la imagen.

Los objetos Text y Textarea

Estos objetos permiten manejar campos de tipo texto dentro de los formularios, por lo que son
básicos para poder recuperar y mostrar información al usuario.

Los objetos de tipo Text y Textarea tienen las siguientes propiedades:

• defaultValue: Cadena que contiene el valor por defecto del objeto Text ó Textarea
(esto es, el valor del atributo VALUE).

• name: Cadena que contiene el nombre del objeto Text ó Textarea (esto es, el valor del
atributo NAME).

• value: Cadena que contiene el valor del objeto Text ó Textarea (esto es, el valor del
atributo VALUE).

Los objetos de tipo Text y Textarea tienen los siguientes métodos:

• blur(): Simula la acción de eliminar el foco del objeto.

• focus(): Simula la acción de obtener el foco sobre el objeto dado.

• select(): Simula la acción de seleccionar el texto dentro del objeto.

137
Módulo 4
Creación de contenidos WEB

Los objetos Button (Submit, Reset y Button)

Los objetos de tipo botón son los que nos permiten manejar botones dentro de un formulario: a
través de ellos, los usuarios suelen desencadenar las posibles acciones relacionadas con el
manejo del documento.

Los objetos de tipo botón (que son tres: Submit, Reset y Button) tienen las siguientes
propiedades:

• name: Cadena que contiene el nombre del objeto (esto es, el valor del atributo NAME).

• value: Cadena que contiene el valor del objeto (esto es, el valor del atributo VALUE).

El método más utilizado con los objetos de tipo botón es:

• click(): Simula la acción de pulsar sobre el botón.

El objeto Checkbox

Los objetos de este tipo nos permiten seleccionar múltiples opciones dentro de un formulario,
permitiendo al usuario especificar, pulsando sobre ellos, un Sí/No sobre cualquier opción.

Los objetos de tipo Checkbox tienen las siguientes propiedades:

• checked: Valor booleano que indica si el objeto Checkbox está o no seleccionado.

• defaultChecked: Valor booleano que indica si el objeto Checkbox deberá estar o no

seleccionado por defecto.

• name: Cadena que contiene el nombre del objeto Checkbox (esto es, el valor del
atributo NAME).

• value: Cadena que contiene el valor del objeto Checkbox (esto es, el valor del atributo
VALUE).

Como en el caso del objeto botón, en los objetos de tipo Checkbox, el método más utilizado es
click():

• click(): Simula la acción de pulsar sobre el Checkbox.

El objeto Radio

A diferencia de los objetos de tipo Checkbox, los objetos de tipo Radio sólo permiten realizar
una selección de cada conjunto de opciones que nos muestran (es decir, permiten realizar
selecciones excluyentes). Estos objetos permiten al usuario, pulsando sobre ellos, elegir una
opción entre varias posibles.

138
Módulo 4
Creación de contenidos WEB

Los objetos de tipo Radio tienen las siguientes propiedades:

• checked: Valor booleano que indica si el objeto Radio está o no seleccionado.

• defaultChecked: Valor booleano que indica si el objeto Radio deberá estar o no

seleccionado por defecto.

• length: Valor numérico que indica el número de opciones de un conjunto dado.

• name: Cadena que contiene el nombre del objeto Radio (esto es, el valor del atributo
NAME).

• value: Cadena que contiene el valor del objeto Radio (esto es, el valor del atributo
VALUE).

En cuanto a los métodos de los objetos de tipo Radio, tenemos los mismos que para los
objetos de tipo botón y de tipo Checkbox, el más destacado en método click():

• click(): Simula la acción de pulsar sobre el Radio.

El objeto Select

Estos objetos nos permiten seleccionar una opción ó un conjunto de opciones (si tienen
definido el atributo MULTIPLE) dentro de los formularios, y pueden aparecer presentados de
dos formas: como listas desplegables o como listas de desplazamiento. Se suelen utilizar para
sustituir a los objetos Checkbox y Radio cuando las opciones de selección son muchas.

Las propiedades de los objetos Select son:

• length: Valor numérico que indica el número de opciones del objeto Select.

• name: Cadena que contiene el nombre del objeto Select (esto es, el valor del atributo
NAME).

• options: Array que contiene cada una de las opciones que aparecen en la lista
seleccionable. Los elementos de este array tienen, a su vez, las siguientes propiedades:

o defaultSelected: Valor booleano que indica si la opción está seleccionada por

defecto.
o index: Valor numérico que indica el índice de la opción dentro de la lista.
o length: Valor numérico que indica el número de opciones de la lista.
o selected: Valor booleano que indica si la opción está seleccionada o no.
o selectedIndex: Valor numérico que indica el índice de la opción actualmente
seleccionada.
o text: Cadena que contiene el texto mostrado en la lista, para una opción
concreta.
o value: Cadena que contiene el valor de una opción concreta (esto es, el valor
del atributo VALUE).

139
Módulo 4
Creación de contenidos WEB

• selectedIndex: Valor numérico que indica el índice de la opción actualmente

seleccionada.

El objeto Password

Estos objetos sirven para capturar palabras claves (contraseñas) de usuarios. Este objeto es
muy parecido al objeto Text, pero, a diferencia de éste, no muestra los caracteres que va
introduciendo el usuario, sino una sucesión de asteriscos (*).

Los objetos de tipo Password disponen de tres propiedades:

• defaultValue: Cadena que contiene el valor por defecto de la palabra clave (es decir, el
valor del atributo VALUE).

• name: Cadena que contiene el nombre del objeto Password (esto es, el valor del
atributo NAME).

• value: Cadena que contiene el valor del objeto Password introducido por el usuario.

Y sus métodos son:

• blur(): Simula la acción de eliminar el foco del objeto dado.

• focus(): Simula la acción de obtener el foco sobre el objeto dado.

• select(): Simula la acción de seleccionar el texto dentro del objeto.

140