Está en la página 1de 165

Iniciacin a Javascript

AULA
MENTOR
educacion.es
Nipo: 030-12-327-8

Autores:
Jorge Mohedano
Jos Miguel Saiz
Pedro Salazar Romn
Equipo de contenidos de Aula
Mentor

Coordinacin pedaggica:
Aula Mentor

Ilustracin de portada:
Mara Guija Medina
Tabla de Contenido 3

Tabla de contenido
UNIDAD 1 - INTRODUCCIN ........................................................................................................ 9

1.1 - QU ES JAVASCRIPT?.................................................................................................................. 9
1.2 - EDITAR JAVASCRIPT ................................................................................................................... 10
1.3 - MECANISMOS PARA INTEGRAR EL CDIGO JAVASCRIPT...................................................................... 11
1.3.1 - Incluir JavaScript directamente en el documento HTML .............................................. 11
1.3.2 - Incluir JavaScript en un fichero externo ....................................................................... 12
1.4 - EDITORES HTML Y JAVASCRIPT .................................................................................................... 13
1.5 - ENTORNOS DE EJECUCIN DE JAVASCRIPT....................................................................................... 14
1.6 - PRIMERAS APLICACIONES JAVASCRIPT ............................................................................................ 15
1.7 - COMENTARIOS QUE FACILITAN LA LECTURA ..................................................................................... 18
1.8 - ELEMENTOS DE UN PROGRAMA JAVASCRIPT .................................................................................... 20
1.9 - ENTRADA Y SALIDA EN JAVACRIPT ................................................................................................. 22
1.9.1 - Instrucciones bsicas de salida .................................................................................... 23
1.9.2 - Instrucciones bsicas de entrada ................................................................................. 23

UNIDAD 2 - ELEMENTOS BSICOS.............................................................................................. 25

2.1 - ELEMENTOS DEL LENGUAJE .......................................................................................................... 25


2.2 - CONSTANTES ............................................................................................................................ 26
2.3 - VARIABLES ............................................................................................................................... 26
2.3.1 - Almacenamiento de informacin en la variable. ......................................................... 28
2.3.2 - Consulta o utilizacin del valor contenido en la variable. ............................................ 28
2.4 - TIPOS DE VARIABLES ................................................................................................................... 29
2.4.1 - Numricas .................................................................................................................... 30
2.4.2 - Cadenas de caracteres ................................................................................................. 31
2.4.3 - Tipo lgico .................................................................................................................... 32
2.4.4 - Tipos estructurados: Arrays ......................................................................................... 32
2.4.5 - Tipos estructurados: Objetos ....................................................................................... 33
2.4.6 - Valores especiales ........................................................................................................ 34
2.5 - OPERADORES ............................................................................................................................ 34
2.5.1 - Operador de concatenacin. ........................................................................................ 35
2.5.2 - Operadores aritmticos. .............................................................................................. 35
2.5.3 - Operadores de incremento y decremento.................................................................... 35
2.5.4 - Operador de asignacin ............................................................................................... 37
2.5.5 - Operadores arimticos con asignacin ........................................................................ 37
4 Aula Mentor Iniciacin a Javascript

2.5.6 - Operadores relacionales .............................................................................................. 38


2.5.7 - Operadores lgicos ...................................................................................................... 39
2.6 - PRECEDENCIA DE OPERADORES ..................................................................................................... 39

UNIDAD 3 - ESTRUCTURAS DE CONTROL DE FLUJO .................................................................... 41

3.1 - INTRODUCCIN ......................................................................................................................... 41


3.2 - ESTRUCTURA ALTERNATIVA SIMPLE: IF ........................................................................................... 42
3.3 - ESTRUCTURA ALTERNATIVA DOBLE: IF ELSE ...................................................................................... 44
3.4 - ANIDAR ESTRUCTURAS ALTERNATIVAS ............................................................................................ 45
3.5 - EL OPERADOR CONDICIONAL ?...................................................................................................... 46
3.6 - ALTERNATIVA MLTIPLE .............................................................................................................. 46
3.7 - ESTRUCTURAS REPETITIVAS .......................................................................................................... 49
3.8 - ESTRUCTURA FOR ...................................................................................................................... 49
3.9 - ESTRUCTURA FOR...IN................................................................................................................. 51

UNIDAD 4 - UNIDAD 4 FUNCIONES ......................................................................................... 55

4.1 - CONCEPTO DE FUNCIN .............................................................................................................. 55


4.1.1 - Creacin de una Funcin. ............................................................................................. 56
4.1.2 - Ubicacin de la definicin de una Funcin. .................................................................. 57
4.1.3 - Llamada a una Funcin. ............................................................................................... 57
4.2 - FUNCIONES CON ARGUMENTOS .................................................................................................... 58
4.3 - CUESTIONES IMPORTANTES EN EL USO DE FUNCIONES. ...................................................................... 60
4.4 - VARIABLES GLOBALES Y LOCALES ................................................................................................... 60
4.5 - FUNCIONES PREDEFINIDAS ........................................................................................................... 61

UNIDAD 5 - OBJETOS ................................................................................................................. 65

5.1 - OBJETOS EN JAVASCRIPT ............................................................................................................. 65


5.1.1 - Operador new .............................................................................................................. 65
5.2 - ARRAYS ................................................................................................................................... 67
5.2.1 - Creacin de un Array. ................................................................................................... 67
5.2.2 - Asignacin de elementos en un Array. ......................................................................... 68
5.2.3 - Introduccin manual del contenido en un Array. ......................................................... 69
5.2.4 - Bsqueda en un Array. ................................................................................................. 70
5.2.5 - Propiedades de los arrays ............................................................................................ 72
5.2.6 - Mtodos de los Arrays ................................................................................................. 73
5.3 - REFERENCIA COMPLETA DE OBJETOS .............................................................................................. 75
5.4 - LOS OBJETOS DEL NAVEGADOR ..................................................................................................... 76
5.5 - LOS OBJETOS PREDEFINIDOS. ........................................................................................................ 79
5.6 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL NAVEGADOR. ............................................................. 80
Tabla de Contenido 5

5.6.1 - El objeto Window. ........................................................................................................ 80


5.6.2 - Propiedades del objeto window ................................................................................... 80
5.6.3 - mtodos para mover y redimensionar ventanas ...................................................... 85
5.6.4 - otros mtodos .............................................................................................................. 86
5.6.5 - El objeto Location......................................................................................................... 91
5.6.6 - Propiedades del objeto location................................................................................... 91
5.6.7 - Mtodos del objeto location ........................................................................................ 92
5.7 - EL OBJETO HISTORY.................................................................................................................... 93
5.7.1 - Propiedades del objeto history..................................................................................... 93
5.7.2 - Mtodos del objeto history .......................................................................................... 93
5.8 - EL OBJETO NAVIGATOR. .............................................................................................................. 94
5.8.1 - Propiedades del objeto navigator ................................................................................ 94
5.8.2 - Mtodos del objeto navigator...................................................................................... 95
5.9 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL DOCUMENTO. ............................................................ 95
5.9.1 - El objeto Document...................................................................................................... 96
5.9.2 - Propiedades del objeto document: .............................................................................. 96
5.9.3 - Mtodos del objeto document: .................................................................................... 97
5.10 - LOS OBJETOS LINK Y ANCHOR. ............................................................................................... 100
5.10.1 - Propiedades: .......................................................................................................... 100
5.11 - EL OBJETO IMAGE. ............................................................................................................... 101
5.11.1 - Propiedades del objeto image: .............................................................................. 101
5.12 - LOS OBJETOS DEL FORMULARIO. ............................................................................................. 105
5.12.1 - Propiedades del objeto form ................................................................................. 106
5.12.2 - Mtodos del objeto form ....................................................................................... 107
5.13 - LOS OBJETOS TEXT, TEXTAREA Y PASSWORD. ............................................................................. 109
5.13.1 - Propiedades de los objetos text, textarea y password .......................................... 110
5.13.2 - Mtodos de los objetos text, textarea y password ................................................ 110
5.14 - LOS OBJETOS BUTTON, RESET Y SUBMIT.................................................................................... 112
5.14.1 - Propiedades de los objetos button reset y submit ................................................. 112
5.14.2 - Mtodos de los objetos button .............................................................................. 113
5.15 - EL OBJETO CHECKBOX. .......................................................................................................... 113
5.15.1 - Propiedades del objeto checkbox: ......................................................................... 113
5.15.2 - Mtodos de los objetos checkbox: ......................................................................... 113
5.16 - EL OBJETO RADIO ................................................................................................................ 114
5.16.1 - Propiedades del objeto radio: ................................................................................ 115
5.16.2 - Mtodos del objeto radio: ..................................................................................... 115
6 Aula Mentor Iniciacin a Javascript

5.17 - EL OBJETO SELECT................................................................................................................ 116


5.17.1 - Propiedades del objeto select: ............................................................................... 117
5.18 - EL OBJETO HIDDEN............................................................................................................... 120
5.18.1 - Propiedades del objeto hidden: ............................................................................. 120
5.19 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL LENGUAJE. .......................................................... 120
5.19.1 - El objeto String. ..................................................................................................... 121
5.19.2 - Propiedades del objeto String:............................................................................... 121
5.19.3 - Mtodos del objeto String: .................................................................................... 121
5.19.4 - El objeto Math. ...................................................................................................... 126
5.19.5 - El objeto Date. ....................................................................................................... 129
5.19.6 - Creacin de un objeto de fecha: ............................................................................ 130
5.19.7 - Mtodos del objeto Date: ...................................................................................... 130
5.20 - OBJETOS PERSONALIZADOS. .................................................................................................. 133

UNIDAD 6 - EVENTOS. ............................................................................................................. 135

6.1 - DEFINICIN. ........................................................................................................................... 135


6.2 - EVENTOS DE TECLADO............................................................................................................... 139
6.3 - EVENTOS DE RATN ................................................................................................................. 139

UNIDAD 7 - DHTML Y EFECTOS MULTIMEDIA .......................................................................... 147

7.1 - INTRODUCCIN. ...................................................................................................................... 147


7.2 - DEFINICIN DE ESTILOS. ............................................................................................................ 148
7.3 - TRABAJAR CON HTML.............................................................................................................. 152
7.3.1 - Mover texto e imgenes. ........................................................................................... 152
7.3.2 - Cambiar el color de texto al pasar el puntero del ratn ............................................ 159
7.3.3 - Ocultar y mostrar texto e imgenes. ......................................................................... 161
Tabla de Ejemplos 7

Tabla de Ejemplos

Ejemplo 1 Cdigo Javascript embebido en HTML __________________________________________ 11


Ejemplo 2 Cdigo Javascript en fichero externo ___________________________________________ 13
Ejemplo 3 El primer programa _________________________________________________________ 16
Ejemplo 4 Programa Hola Mundo! ____________________________________________________ 16
Ejemplo 5 Uso de comentarios _________________________________________________________ 20
Ejemplo 6 Conversor pesetas a euros ____________________________________________________ 21
Ejemplo 7 Manejo de variables ________________________________________________________ 29
Ejemplo 8 Representacin en base 8 y 16 ________________________________________________ 30
Ejemplo 9 Operadores aritmticos ______________________________________________________ 35
Ejemplo 10 Diferencias notacin prefija y postfija__________________________________________ 36
Ejemplo 11 Operadores aritmticos con asignacin ________________________________________ 37
Ejemplo 12 Operador relacional igualdad ________________________________________________ 38
Ejemplo 13 Alternativa simple _________________________________________________________ 43
Ejemplo 14 Alternativa doble __________________________________________________________ 44
Ejemplo 15 Anidamiento de Alternativas _________________________________________________ 45
Ejemplo 16 Anidamiento de estructuras alternativas _______________________________________ 48
Ejemplo 17 Bucle con operador in ______________________________________________________ 52
Ejemplo 18 Declaracin de una funcin __________________________________________________ 57
Ejemplo 19 Llamada a una funcin _____________________________________________________ 58
Ejemplo 20 Funciones con argumentos (versin 1) _________________________________________ 58
Ejemplo 21 Funciones con argumentos (versin 2) _________________________________________ 59
Ejemplo 22 Variables locales y globales __________________________________________________ 61
Ejemplo 23 Manipulando arrays _______________________________________________________ 69
Ejemplo 24 Introduccin manual de datos en un array ______________________________________ 70
Ejemplo 25 Bsqueda en un array ______________________________________________________ 72
Ejemplo 26 Identificacin de objetos ____________________________________________________ 78
Ejemplo 27 Objetos predefinidos _______________________________________________________ 79
Ejemplo 28 Manipulacin de objeto ventana ______________________________________________ 83
Ejemplo 29 Scroller en la barra de desplazamiento _________________________________________ 88
Ejemplo 30 Ventanas hijas ____________________________________________________________ 90
Ejemplo 31 Ventana hija del ejemplo anterior _____________________________________________ 90
Ejemplo 32 Objeto Location ___________________________________________________________ 92
8 Aula Mentor Iniciacin a Javascript

Ejemplo 33 Objeto Document _________________________________________________________ 100


Ejemplo 34 Manipulando imgenes ____________________________________________________ 102
Ejemplo 35 Manipulando imgenes con eventos _________________________________________ 103
Ejemplo 36 Objetos formulario: Comprobar password _____________________________________ 111
Ejemplo 37 Objeto String ____________________________________________________________ 124
Ejemplo 38 Objeto String: Mtodos ____________________________________________________ 126
Ejemplo 39 Objeto Date _____________________________________________________________ 132
Ejemplo 40 Eventos de formulario _____________________________________________________ 140
Ejemplo 41 Otros eventos ____________________________________________________________ 141
Ejemplo 42 Eventos de ratn _________________________________________________________ 143
Ejemplo 43 Eventos de imgenes ______________________________________________________ 145
Ejemplo 44 Estilos (I) ________________________________________________________________ 149
Ejemplo 45 Estilos (II) _______________________________________________________________ 150
Ejemplo 46 Estilos (III) _______________________________________________________________ 151
Ejemplo 47 Mover texto _____________________________________________________________ 153
Ejemplo 48 Mover texto sin botones ___________________________________________________ 156
Ejemplo 49 Mover objetos con un enlace________________________________________________ 158
Ejemplo 50 Cambiar color al texto _____________________________________________________ 160
Ejemplo 51 Manipulacin de capas ____________________________________________________ 165
Introduccin 9

UNIDAD 1 - INTRODUCCIN
1.1 - QU ES JAVASCRIPT?

Javascript es un lenguaje de programacin que se utiliza principalmente para crear


pginas Web capaces de interactuar con el usuario. Las pginas Web se consideran
estticas cuando se limitan a mostrar un contenido establecido por su creador sin
proporcionar ms opciones al usuario que elegir entre los enlaces disponibles para
seguir navegando. Cuando un creador incorpora JavaScript a su pgina, proporciona al
usuario cierta capacidad de interactuacin con la pgina Web, es decir, cierto
dinamismo y por lo tanto se incrementan las prestaciones de la misma al aadir
procesos en respuesta a las acciones del usuario. Es importante sealar que estos
procesos se ejecutan en la mquina del cliente (en el navegador) y por tanto no
implican intercambio de datos con el servidor. Con Javascript se accede al mundo de
las pginas Web dinmicas.

Para profundizar en el concepto de pgina dinmica se recomienda la lectura del


artculo siguiente: http://www.desarrolloweb.com/manuales/7/

Desde el punto de vista tcnico Javascript es un lenguaje interpretado, eso significa


que las instrucciones son analizadas en secuencia por el intrprete de Javascript del
navegador Web, de manera que su ejecucin es inmediata a la interpretacin. Esto
permite que, una vez escrito un programa en Javascript con un editor de texto plano y
embebido el cdigo en un fichero HTML, el navegador es capaz de interpretarlo y
ejecutarlo sin necesidad de procesos intermedios. Es importante destacar que
Javascript y Java son dos lenguajes distintos ya que la semejanza de los nombres a
veces puede llevar a confusin.
10 Aula Mentor Iniciacin a Javascript

Javascript Java

Es un lenguaje ms complejo y completo con


Es un lenguaje sencillo.
una estricta orientacin a objetos.

Diseado para desarrollar aplicaciones de


Diseado para desarrollar aplicaciones
propsito general incluyendo tanto
Web.
aplicaciones de escritorio como Web.

Lenguaje interpretado por el navegador. Lenguaje compilado a cdigo intermedio que


No requiere compilador. luego es interpretado.

Ms flexible. Por ejemplo, no requiere Tiene reglas mucho ms rgidas. Por ejemplo,
declarar variables ni tipos (aunque es hay que declarar todas las variables con sus
aconsejable hacerlo). tipos.

Tabla 1 - Javascript vs Java

Para conocer ms datos sobre la historia y la evolucin de Javascript puede consultar


http://www.librosweb.es/javascript/capitulo1/breve_historia.html

1.2 - EDITAR JAVASCRIPT

La edicin de cdigo escrito en lenguaje JavaScript no requiere de ninguna


herramienta especial, siendo suficiente un editor de texto plano (sin formato). El
cdigo JavaScript debe integrarse en una pgina Web que ser la que establezca el
contexto de ejecucin del cdigo. Dicha pgina puede ser abierta con un navegador
Web y como consecuencia de ello se ejecutar el programa JavaScript en base al
propio flujo de control de la pgina Web. Esto significa que si el cdigo JavaScript se
asocia a la pulsacin de un botn, dicho cdigo se interpretar y ejecutar cuando el
usuario pulse el botn. Esto implica que, como la interpretacin y la ejecucin son
simultneas, los errores en el cdigo (salvo aquellos que imposibiliten la interpretacin
del cdigo HTML) sern detectados en el momento de la ejecucin. Esto complica en
parte la depuracin de los programas.
Introduccin 11

Integrar cdigo
Editar cdigo Abrir con un
Javascript con
Javascript navegador
cdigo HTML

Ilustracin 1 Proceso de edicin y ejecucin de un programa Javascript

Para editar cdigo Javascript y/o HTML existen multitud de editores. En el mbito de
los sistemas Windows uno de los ms verstiles, potentes y gratuitos es NotePad++
http://notepad-plus-plus.org/

1.3 - MECANISMOS PARA INTEGRAR EL CDIGO JAVASCRIPT

1.3.1 - INCLUIR JAVASCRIPT DIRECTAMENTE EN EL DOCUMENTO HTML

Dado que HTML es un lenguaje de marcas, existe una etiqueta (apertura y cierre)
especial para sealar que lo que aparece a continuacin debe ser analizado y
ejecutado por el intrprete de JavaScript en lugar de por el intrprete de HTML:
<script> cdigo JavaScript </script>. El siguiente cdigo muestra un sencillo ejemplo. Si
desea probarlo no tiene ms que cortar y pegar el texto en un documento en blanco,
guardarlo con el nombre ejemplo.html no se olvide de la extensin! Y abrirlo con un
navegador Web (le recomendamos usar Mozilla Firefox).

<html>
<head>
<title>Ejemplo de cdigo JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body> <p>Un prrafo de texto.</p></body>
</html>

Ejemplo 1 Cdigo Javascript embebido en HTML


12 Aula Mentor Iniciacin a Javascript

La secuencia de resultados se puede ver en las capturas de imagen siguientes. En la


izquierda aparece la ventana modal con el texto Un mensaje de prueba que es el
resultado de interpretar la funcin Javascript alert. Observe que esta funcin se
ejecuta incluso antes de que el navegador muestre el body de la pgina HTML.
Cuando el usuario pulsa el botn Aceptar, el navegador termina de mostrar el resto de
la pgina.

Ilustracin 2 Ejecucin de cdigo JavaScript y HTML

Se recomienda este sencillo mtodo cuando la simplicidad del cdigo no impide la


legibilidad del mismo. Es importante sealar que el lugar del fichero html en el que se
ponen las etiquetas de script, determina en qu momento de la interpretacin de la
pgina Web se ejecuta dicho cdigo Javascript. En el ejemplo anterior se ha observado
que el cdigo Javascript se ha ejecutado antes que el navegador haya mostrado el
cuerpo de la pgina Web (el mensaje Un prrafo de texto).

Adems hay una variante de este mtodo que permite incluir cdigo Javascript
entremezclado con cdigo HTML. No es un mtodo recomendado porque se pierde
mucha legibilidad y su uso se limita a establecer la respuesta Javascript a determinados
eventos, como por ejemplo hacer clic sobre un elemento de la pgina Web. En estos
casos, lo habitual es definir funciones Javascript de usuario en un fichero con el
segundo mtodo que se describe a continuacin y enlazar los eventos con las
funciones. El detalle de este mecanismo se estudiar ms adelante.

1.3.2 - INCLUIR JAVASCRIPT EN UN FICHERO EXTERNO

Cuando se desea separar el cdigo Javascript del cdigo HTML, con objeto de
aumentar la legibilidad y facilitar la reutilizacin del mismo en otras pginas HTML, se
Introduccin 13

utiliza un mtodo que permite definir las instrucciones Javascript en un fichero externo
al propio fichero HTML. En este caso se debe sealar en el cdigo HTML la ubicacin
relativa del fichero Javascript respecto al fichero HTML para que el navegador pueda
descargar ambos ficheros desde el servidor Web y este localice el cdigo
adecuadamente. Veamos un sencillo ejemplo:

Archivo JavaScript: micodigo.js


alert("Esto es una alerta escrita en JavaScript");

Documento HTML: ejemplo.html


<html>
<head>
<title>Cdigo JavaScript almacenado en fichero externo</title>
<script type="text/javascript" src="./micodigo.js"></script>
</head>
<body>
<p>Esto es un prrafo en HTML</p>
</body>
</html>

Ejemplo 2 Cdigo Javascript en fichero externo

En ambos casos volvemos a tener ficheros de texto plano con dos extensiones
diferentes. La primera js para indicar que se trata de cdigo Javascript y la segunda
html para indicar que se trata de cdigo HTML. Observe que el atributo src de la
etiqueta <script> est indicando la ruta relativa y el nombre en la que se encuentra el
fichero .js (en este caso ocupan la misma carpeta). Para ejecutar este ejemplo tiene
que crear dos ficheros de texto plano independientes y abrir con un navegador el que
tiene extensin html.

1.4 - EDITORES HTML Y JAVASCRIPT

Tal y como se ha sealado, el cdigo HTML y el cdigo Javascript son texto plano
(sin formato). Por ello se puede utilizar para su edicin desde un sencillo editor de
texto como el bloc de notas en los entornos Windows o el editor de texto en los
entornos Linux hasta un complejo software de diseo de pginas Web tipo
Dreamweaver o similar (activando la vista de cdigo fuente). En el punto intermedio
14 Aula Mentor Iniciacin a Javascript

de ambas opciones estn los editores de sintaxis resaltada que son editores de texto
plano pero que incorporan un reconocedor de sintaxis basado en la gramtica de los
lenguajes que soporta.

1.5 - ENTORNOS DE EJECUCIN DE JAVASCRIPT

En general el entorno de ejecucin de Javascript es un navegador Web. Esta


circunstancia hace que en principio y dado que hay navegadores para las plataformas
hardware ms importantes, Javascript podra considerarse un lenguaje
multiplataforma. Lamentablemente esta consideracin es terica porque no slo hay
diferencias entre la interpretacin que hacen diferentes navegadores sobre la misma
plataforma hardware sino que incluso a veces la diferencia se produce entre el mismo
navegador funcionando en plataformas diferentes o incluso entre versiones diferentes
del mismo navegador en la misma o en diferentes plataformas. Esta es una de las
principales dificultades a las que se enfrenta el desarrollador de aplicaciones
Javascript. En la actualidad, los programadores que utilizan Javascript recurren, cuando
la complejidad de la aplicacin as lo justifica, al uso de frameworks que entre otras
numerosas virtudes resuelven en gran medida el problema sealado, asegurando con
mayor o menos xito el denominado Javascript Cross Browser recurriendo a un
sistema que parte de identificar el navegador que se est utilizando y en funcin del
mismo utilizar el cdigo desarrollado especficamente para el mismo.

Existen numerosos framework algunos de los cuales aparecen reseados en:


http://www.desarrolloweb.com/articulos/listado-distintos-framework-javascript.html
Existe un interesante artculo comparando varios de ellos en:
http://www.maestrosdelweb.com/editorial/comparacion-frameworks-javascript/

Mencin especial merece el caso del GWT de Google que permite, entre otras
cosas, desarrollar aplicaciones utilizando lenguaje Java y posteriormente compilarlo
para generar Javascript con la caracterstica Cross Browser.

Pero Javascript no est ligado exclusivamente a los navegadores Web sino que
existen otras aplicaciones informticas que pueden ser programadas mediante este
Introduccin 15

lenguaje o algunos derivados del mismo. Tal es el caso de Adobe Acrobat que permite
incluir cdigo Javascript en documentos PDF o el caso de Adobe PhotoShop que
permite elaborar algunos scripts para automatizar tareas. Javascript tambin se puede
integrar con el lenguaje Java mediante el paquete javax.script y ha sido fuente de
inspiracin en el desarrollo del lenguaje Actioscript (Flash y Flex).

1.6 - PRIMERAS APLICACIONES JAVASCRIPT

Tal y como se ha sealado, los programas Javascript se encuentran vinculados


a pginas HTML. El navegador reconoce un programa Javascript cuando se encuentra
con una etiqueta <SCRIPT>. A partir de ese momento ser el intrprete Javascript el
encargado de interpretar y ejecutar el cdigo hasta la etiqueta </SCRIPT>. Para crear
un programa Javascript debemos seguir los siguientes pasos:

1. Crearemos una pgina HTML utilizando cualquier editor, por ejemplo el


NotePad ++ o el Bloc de Notas o un editor Linux de texto plano. (Tambin
podemos utilizar una pgina ya creada y continuar con el paso
siguiente).

2. Insertaremos dentro de la pgina HTML las etiquetas <SCRIPT> y </SCRIPT>


en el lugar donde se situar el cdigo Javascript.

3. Introduciremos el cdigo Javascript entre dichas etiquetas.

4. Salvaremos el programa poniendo especial cuidado para que el editor


mantenga la extensin .html

5. Para ejecutar el programa solamente tendremos que abrir el archivo


con el navegador.
16 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD><TITLE>El primer programa</TITLE>
</HEAD>
<BODY>
Esto es HTML<br />
<b>
<script type="text/javascript">
document.write("Esto es JavaScript.");
</SCRIPT>
<br /></b>
Esto es HTML<br/>
</BODY>
</HTML>

Ejemplo 3 El primer programa

La lnea central se ha escrito desde un programa JavaScript mediante la instruccin:


document.write("Esto es JavaScript."); De hecho, esta es la nica instruccin que
contiene el programa y su significado es escribir (write) en el documento actual
(document) el texto que aparece entre comillas. En realidad document es un objeto
que representa el documento HTML actual y write es un mtodo (procedimiento) que
se aplica sobre el objeto document y que permite escribir sobre dicho documento. El
resultado aparentemente no se distingue de cara al usuario si en lugar de poner el
cdigo Javascript se hubiese puesto directamente en HTML el texto. La ventaja de usar
Javascript no queda latente en este ejemplo. Veamos otro ejemplo en el que se utiliza
una funcin Javascript que muestra una ventana modal en pantalla.

<html>
<head>
<title>Hola Mundo!</title>
<script type="text/javascript">
alert("Hola Mundo!");
</script>
</head>
<body>
<p>Esta pgina contiene el segundo script</p>
</body>
</html>

Ejemplo 4 Programa Hola Mundo!

Slo ejecutando este sencillo ejemplo en diferentes navegadores (Internet Explorer,


Mozilla FireFox, Opera, Crome, etc.) podr observar la diferencias que existen a la hora
de interpretarlo. En este sencillo ejemplo se trata de diferencias estticas pero a
Introduccin 17

medida que avance en la programacin de scripts padecer la falta de consenso entre


fabricantes de navegadores a pesar de que existen entidades de normalizacin.

Resultado en Firefox

Resultado en Internet Explorer

Resultado en Google Chrome

Interpretar el cdigo no debera ser muy complicado si se conoce HTML y dado que
se ha optado por embeber el cdigo Javascript, este se ejecutar incluso antes de que
se muestre en pantalla el texto del body de la pgina Web porque si observa bien, el
script Javascript aparece en el <head> que es la parte que se ejecuta antes de mostrar
el <body> en el navegador.
18 Aula Mentor Iniciacin a Javascript

Es importante comprobar que la configuracin de seguridad del navegador no


impide la ejecucin de scripts ya que en algunos casos (por ejemplo, Internet Explorer)
la configuracin por defecto tiene bloqueada la ejecucin de script para proteger el
equipo de operaciones susceptibles de ser inseguras. Todos los navegadores avisan de
forma diversa sobre esta circunstancia y permite autorizar puntualmente la ejecucin
de un script o bien establecer por defecto la autorizacin.

1.7 - COMENTARIOS QUE FACILITAN LA LECTURA

Un programa de ordenador escrito en un lenguaje de programacin debe ser


interpretado por una maquina. Sin embargo es habitual que el propio programador o
cualquier otro acceda al cdigo para modificarlo, corregirlo o simplemente entender su
funcin. Con objeto de que esta lectura sea lo ms clarificadora posible es costumbre
obligada incorporar comentarios a las instrucciones que constituyen el programa de
ordenador, dirigidas a un potencial lector humano. Estos comentarios no tienen efecto
sobre el cdigo pero clarifican mucho su comprensin.

Para incluir comentarios en el cdigo Javascript y que estos no interfieran en la


labor del intrprete de Javascript ni en el intrprete de HTML hay que ceirse a una
sintaxis especfica.

Los comentarios pueden ser:

De una lnea. Se indican mediante dos barras inclinadas a la derecha (//). Todo
lo que aparezca detrs de dichas barras hasta el final de la lnea ser
considerado comentario y, por tanto, ser ignorado por el navegador.

Ejemplo:
// Esto es un comentario
document.write("Esto es JavaScript."); //otro comentario

De varias lneas. En este caso deberemos indicar el comienzo del comentario


mediante los caracteres barra inclinada a la derecha y asterisco (/*). Tambin
indicaremos el final del comentario, en este caso mediante la secuencia de
Introduccin 19

caracteres inversa: asterisco y barra inclinada a la derecha (*/), tal como


podemos observar en el siguiente fragmento de cdigo:
/* Este es un ejemplo de comentario
de varias lneas */

No obstante y dado que an hay sistemas informticos que tienen instalado, por
cuestiones de capacidad de proceso, navegadores antiguos es necesario proteger los
comentarios para que esos navegadores no lancen un error al encontrar un
comentario.

Un comentario HTML tiene la siguiente sintaxis:


<!-- aqu va el comentario -->

El comentario empieza con los caracteres: <!-- y termina con los caracteres: -->

Para ocultar Javascript a los navegadores antiguos escribiremos los comentarios


como se expone a continuacin:
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin para navegadores
Aqu va el cdigo JavaScript
// Fin de ocultacin del guin -->
</SCRIPT>

La ltima lnea de comentario empieza con //, indicando que es un comentario


Javascript, y termina con -->, que finaliza un comentario HTML. En algunos
navegadores antiguos es necesario incluir un comentario Javascript antes de
finalizar el comentario HTML. El siguiente ejemplo muestra el uso de comentarios
HTML para ocultar guiones Javascript:
20 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD><TITLE>Utilizando comentarios</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin para navegadores antiguos
function vertexto()
{
document.write("Esto es JavaScript.")
}
// Fin de ocultacin del guin -->
</SCRIPT>
</HEAD>
<BODY>
Esto es HTML<br />
<b>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin para navegadores antiguos
vertexto();
// Fin de ocultacin del guin -->
</SCRIPT>
</b>
Esto es HTML <br />
</BODY>
</HTML>

Ejemplo 5 Uso de comentarios

1.8 - ELEMENTOS DE UN PROGRAMA JAVASCRIPT

Un programa es un conjunto ordenado de instrucciones diseado para llevar a cabo


una tarea concreta. Los programas estn formados por instrucciones que determinan
las tareas que se realizarn y el orden en que estas se llevarn a cabo.
Tradicionalmente estas instrucciones se catalogan como:

Instrucciones declarativas o declaraciones: declaran, es decir, informan al


intrprete sobre los objetos que van a intervenir en el programa. Por ejemplo, las
variables, espacios de memoria identificados por un nombre y capaces de almacenar
un valor, se suelen declarar antes de ser utilizadas.

Instrucciones de entrada/salida: permiten que el programa reciba/ enve


datos desde/hasta un dispositivo externo, por ejemplo, teclado y pantalla como
principales interfaces de comunicacin con el usuario.
Introduccin 21

Instrucciones de control: determinan la secuencia de ejecucin del programa,


es decir, qu instrucciones se ejecutan y en qu momento.

El siguiente programa permite al usuario introducir una cantidad en pesetas,


calcula el importe equivalente en euros y finalmente lo muestra en pantalla.

<HTML>
<HEAD><TITLE>Conversor pesetas a euros</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var ImportePtas;
var ImporteEuros;
ImportePtas=prompt("Introduce el importe en pesetas:",1);
if (ImportePtas > 0)
{
ImporteEuros = ImportePtas / 166.33;
alert(ImporteEuros);
}
else
{
alert("Importe errneo");
}
</SCRIPT>
</BODY>
</HTML>

Ejemplo 6 Conversor pesetas a euros

Podemos observar que el programa realiza las siguientes tareas:

- La etiqueta <SCRIPT LANGUAGE="JavaScript"> indica el comienzo del script.

- Las instrucciones: var ImportePtas; var ImporteEuros;

Declaran las variables ImportePtas e ImporteEuros para que puedan ser utilizadas
posteriormente. Las variables son espacios de memoria del ordenador capaces de
almacenar datos.

- La instruccin: ImportePtas = prompt("Introduce el importe en pesetas: ",1);

Visualizar el texto "Introduce el importe en pesetas: ", permitiendo al usuario


introducir un importe. Dicho importe ser asignado a la variable ImportePtas. El
22 Aula Mentor Iniciacin a Javascript

nmero 1 representa el valor por defecto que tomar el cuadro de insercin de


manera que el usuario puede modificar dicho o valor o simplemente dejarlo intacto. La
ventana modal que aparece como consecuencia de la instruccin prompt muestra dos
botones: Aceptar y Cancelar. Si el usuario pulsa Aceptar, la instruccin almacena en la
variable ImportePtas el valor que tenga en ese momento el cuadro de texto. Si pulsa
Cancelar el valor que se asignar a dicha variable ser null.

- La instruccin if (ImportePtas > 0) es una instruccin de control. Comprueba el


resultado de la condicin (ImportePtas > 0) y si es verdadero ejecutar las
instrucciones que se encuentran encerradas entre las llaves que aparecen a
continuacin. En caso contrario ejecutar las instrucciones que siguen a la clusula
else.

- La instruccin: ImporteEuros = ImportePtas/166.33; Asigna a la variable


ImporteEuros el resultado de dividir el valor de la variable ImportePtas entre
166.33.

- Las instrucciones: alert(ImporteEuros); y alert("Importe errneo");

Visualizan el contenido de la variable ImporteEuros, o el texto "Importe errneo",


respectivamente, dependiendo de cul haya sido el resultado de evaluar la condicin
(ImportePtas > 0).

- Los caracteres // sirven para escribir comentarios en el programa. Estos


comentarios no se ejecutan. Su utilidad es servir como de ayuda al
programador al documentar el programa.

- La etiqueta </SCRIPT> seala el final del script.

1.9 - ENTRADA Y SALIDA EN JAVACRIPT

El esquema tradicional empleado en computacin responde a un modelo bsico y


sencillo en el que unos datos de entrada son procesados en base a un algoritmo
programado con un lenguaje de programacin que los somete a diversos clculos para
generar unos datos de salida. En este modelo la entrada y la salida son fundamentales
Introduccin 23

porque permiten al usuario proporcionar los datos de partida y conocer los resultados
del mismo.

A lo largo de estas primeras unidades utilizaremos con frecuencia instrucciones


para visualizar o introducir datos. Por ello vamos a anticipar en este punto algunas
caractersticas de formato y funcionamiento de estas instrucciones.

1.9.1 -INSTRUCCIONES BSICAS DE SALIDA

La instruccin document.write("mensaje") permite escribir un texto en el


documento actual. Ya hemos visto un ejemplo de utilizacin en un epgrafe anterior.

La instruccin alert se emplea para mostrar mensajes o visualizar datos. Esta


instruccin abre una ventana y muestra en ella el mensaje o texto especificado
en la llamada. Tambin incluye un botn de Aceptar que sirve para cerrar la
ventana.

1.9.2 -INSTRUCCIONES BSICAS DE ENTRADA

La instruccin prompt muestra una ventana de dilogo que incluye un texto o


mensaje, un rea de entrada de datos y dos botones: uno de Aceptar y otro de
Cancelar. Su sintaxis es:
prompt("mensaje", valorpordefecto);

Esta instruccin retorna un valor que normalmente se asignar a una variable


segn el formato:
variable = prompt("mensaje", valorpordefecto);

Donde mensaje: es un texto o mensaje que queremos que aparezca.


valor_por_defecto: es una cadena o un nmero que se asumir por defecto en el caso
de que no se introduzca ningn dato y se pulse Aceptar.
24 Aula Mentor Iniciacin a Javascript

Descripcin: muestra una ventana de dialogo y espera a recibir una entrada de


datos por parte del usuario. La ventana se cierra pulsando uno de los dos
botones: Aceptar: acepta la entrada del usuario (o la entrada por defecto si esta no
ha sido modificada). Cancelar: cancela la entrada que pudiese haber introducido el
usuario y asume como entrada el valor null.

Si no se especifica ningn valor en valor_por_defecto se asumir un valor


indefinido (<undefined>). Es conveniente especificar siempre un valor por
defecto, aunque sea 0 "" (cadena vaca). En el ejemplo anterior, la instruccin:
ImportePtas = prompt("Introduce el importe en pesetas:",1);

Dar como resultado la aparicin


de una ventana. El navegador
esperar a que el usuario
introduzca un valor o acepte el
valor por defecto y lo asignar a
la variable ImportePtas tal como
se indica al principio de la instruccin.
Estructuras de Control de Flujo 25

UNIDAD 2 - ELEMENTOS BSICOS

2.1 - ELEMENTOS DEL LENGUAJE

Un programa est formado por los elementos siguientes:

Constantes: Representan entidades que no se modifican durante la ejecucin del


programa. Pueden tener un identificador o carecer del mismo.

Variables: Posiciones de memoria a las que se asigna un nombre y a las que se


puede acceder para obtener el valor que almacenan.

Operadores: Smbolos que representan una operacin de naturaleza matemtica,


relacional o lgica.

Expresiones Son combinaciones de variables, constantes y operadores. La


evaluacin de una expresin devuelve un valor.

Instrucciones o sentencias: Permiten organizar el flujo de ejecucin de un


programa estableciendo el orden en el que se encadenan las acciones del mismo.

Funciones: Agrupaciones de instrucciones diseadas para resolver un problema


concreto.

El lenguaje presenta algunas normas o reglas que deben seguirse:

Distingue maysculas de minsculas, de forma que no es lo mismo definir una


variable con identificador suma que Suma.
26 Aula Mentor Iniciacin a Javascript

Los comentarios son iguales que en C/C++: /* ... */ para encerrar un bloque y // para
comentarios de una lnea.

Cada sentencia ha de terminar en punto y coma (;). (Aunque no es estrictamente


obligatorio)

Se pueden agrupar sentencias utilizando llaves {sentencia1; sentencia2; ... }

2.2 - CONSTANTES

Las constantes representan valores que no se modifican durante la ejecucin del


programa. Son constantes todos los valores que aparecen directamente en un programa,
por ejemplo 3.1415 es una constante que representa el nmero PI. Aula Mentor es
otra constante que representa una cadena de caracteres. En Javascript se pueden definir
constantes que incorporen un identificador de manera que se asigna un valor a dicho
identificador y en el programa se hace referencia a la constante no por su valor sino por
el identificador que la representa. La ventaja es que si el programador decide modificar
el programa y cambiar el valor de la constante, no tiene que buscar en todo el programa
el lugar en el que aparece, limitndose solamente a hacerlo en el lugar en el que ha sido
definida la misma. Las constantes con identificador se declaran con la clasula const
seguida del identificador, el smbolo = y el valor constante.
const tipo_iva=18;

Si el programador intenta modificar el valor de una constante desde las instrucciones


del programa se producir un error. En realidad las constantes con identificador (o
constantes con nombre) son posiciones de memoria cuyo valor se protege ante cambios.

2.3 - VARIABLES

Las variables son zonas de la memoria del ordenador identificadas por un nombre y
capaces de almacenar un valor. La variables deben su nombre a la capacidad para
almacenar valores que pueden cambiar durante la evolucin del programa en
contraposicin a las constantes cuyo valor tal y como seala su nombre no puede
cambiar. Las variables proporcionan una gran flexibilidad a los programas ya que
Estructuras de Control de Flujo 27

permiten que estos puedan resolver problemas con cierta generalidad. Por ejemplo, se
podra hacer un programa para resolver ecuaciones de segundo grado con constantes.
Pero dicho programa slo podra resolver siempre la misma ecuacin. Sin embargo al
dotar de variables al programa, este puede utilizarse para resolver cualquier ecuacin de
segundo grado.

Las variables son elementos fundamentales en cualquier lenguaje de programacin.


Sirven para guardar y manipular informacin. Podemos representar una variable como
un recipiente en el que se puede depositar informacin que puede ser consultada o
cambiada en cualquier momento de la ejecucin del programa. En realidad una variable
consiste en un conjunto de posiciones de memoria reservadas que a las que damos un
nombre llamado identificador de la variable que nos permitir manipular la
informacin.

Las variables se crean normalmente al comienzo NOTA

del programa utilizando la palabra var seguida del Como JavaScript diferencia maysculas y
minsculas en los identificadores es muy
nombre de la variable que queremos crear, como
fcil confundirse. Por este motivo es
en los siguientes ejemplos:
necesario seguir dos normas:
var nombre;
var edad;
1-Declarar todos los identificadores al

Se pueden declarar dos o ms variables en una comienzo del programa para poder
comprobar rpidamente cualquier duda.
instruccin. En estos casos se indicar la palabra
reservada var y, a continuacin, la lista de las 2- Establecer un criterio a la hora de
variables que queremos declarar (los nombres construir identificadores y seguirlo siempre

separados por comas): (Determinar cundo se utilizan maysculas,


minsculas y sub-guiones, etc.). A la hora de
var nombre, edad;
establecer este criterio deberemos valorar
El nombre o identificador de la variable podr tambin la legibilidad del programa.
estar formado por letras (maysculas y minsculas),
caracteres de subrayado (_), el smbolo de dlar ($)
, los nmeros (del 0 al 9). Pero no podr comenzar por un nmero y tampoco podr
coincidir el nombre con alguna de las palabras reservadas del lenguaje (nombres de
28 Aula Mentor Iniciacin a Javascript

comandos, etctera). Son por tanto identificadores vlidos: vApellido1; $1Apellido;


_Apellido y no vlidos: 1Apellido; #1Apellido; Apellido1;

2.3.1 -ALMACENAMIENTO DE INFORMACIN EN LA VARIABLE.

Para guardar informacin en una variable se utilizar el operador de asignacin (=)


precedido por el nombre de la variable y seguido por el valor que queremos asignar.
Ejemplos:
Nombre = 'Miguel';
Edad = 17;

Atencin: cuando guardamos informacin en una variable, cualquier otro valor que
dicha variable tuviese anteriormente se perder (salvo que lo guardemos en otra variable
antes de hacer la asignacin). JavaScript permite asignar un valor a una variable en el
mismo momento de su declaracin. Ejemplo:
var Nombre = 'Miguel';

Tambin permite asignar valor a una variable que no ha sido previamente declarada.
NuevoNombre = 'Alfonso';

En el ejemplo anterior NuevoNombre no ha sido declarada previamente, sin embargo,


al encontrar esta expresin JavaScript crear implcitamente la nueva variable y le
asignar el valor indicado. Esta prctica es, de todo punto de vista, desaconsejable; de
hecho, la mayora de los lenguajes de programacin la consideran ilegal. Debemos
acostumbrarnos a declarar todas las variables que vayamos a utilizar al comienzo del
programa.

2.3.2 -CONSULTA O UTILIZACIN DEL VALOR CONTENIDO EN LA VARIABLE.

Una vez declarada una variable podemos hacer referencia a su contenido para
visualizarlo, o para emplearlo con otras expresiones.
Estructuras de Control de Flujo 29

<HTML>
<HEAD><TITLE>Manejando variables</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo creacin y manejo de variables */
var Num1 = 5;
var Num2 = 7;
var Suma;
Suma = Num1+Num2;
alert(Suma);
</SCRIPT>
</BODY>
</HTML>

Ejemplo 7 Manejo de variables

Este programa crea tres variables (Num1, Num2 y Suma), inicializando las dos
primeras en el momento de su creacin y asignado el valor de la suma de estas a la
variable Suma. Finalmente muestra una ventana de alerta con el valor de la variable
Suma.

Nota: JavaScript elimina automticamente las variables al finalizar el programa en el


que se han declarado por lo que su valor se pierde en futuras ejecuciones del mismo.

2.4 - TIPOS DE VARIABLES

Todas las variables en JavaScript se crean de la misma forma, utilizando tal y como se
ha sealado la palabra reservada var. Sin embargo y a diferencia de otros lenguajes de
programacin, el tipo de las variables es dinmico, de manera que el programador puede
utilizar la misma variable para almacenar diferentes tipos de datos. Dicho de otra
manera, las variables adaptan su tipo al contenido que almacenan. Aunque no es una
prctica recomendable es aprovechada en algunos casos para hacer que los programas
sean ms sencillos pero en otras ocasiones provoca tener que aadir cdigo para
detectar el tipo de dato que tiene la variable en un instante determinado.
30 Aula Mentor Iniciacin a Javascript

2.4.1 -NUMRICAS

Se utilizan para almacenar valores numricos enteros (llamados integer en ingls) o


reales (llamados float en ingls). En este caso, el valor se asigna indicando directamente
el nmero entero o real. Los nmeros reales utilizan el carcter . (punto) en vez de ,
(coma) para separar la parte entera y la parte decimal:
var iva = 18; // variable entera
var euro = 166.38665; // variable real

Un valor numrico se suele representar mediante una serie de dgitos que pueden ir
precedidos de un signo (+ -) y que pueden llevar un punto decimal. A continuacin
podemos ver algunas expresiones numricas vlidas: 45 389.347 -18 +6789.89 -
8768.3243

JavaScript tambin admite la notacin exponencial para representar valores


numricos en formato de coma flotante: 56.987E+12 23634E-6 -484.2382E-20

Se pueden representar nmeros en base distinta a la decimal, por ejemplo en


hexadecimal, o en octal. Para expresar un nmero hexadecimal antepondremos el prefijo
0x (cero equis); y para expresar un nmero octal antepondremos un 0 (cero). 0xF34 (en
hexadecimal) 0567 (en octal)

<HTML>
<HEAD><TITLE>Representaciones en base 8 y 16</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
alert ("Hexadecimal:"+ 0xF34);
alert ("Octal:"+ 0567);
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

Ejemplo 8 Representacin en base 8 y 16

Observe que al ejecutar el ejemplo anterior, JavaScript transforma el F34


(hexadecimal pues va precedido por 0x) a su correspondiente valor decimal 3892.
Tambin ha trasformado el 567 (octal pues va precedido por 0) al valor correspondiente
en decimal: 375.
Estructuras de Control de Flujo 31

2.4.2 -CADENAS DE CARACTERES

Permiten almacenar caracteres que constituyen texto. Para asignar el valor a la


variable es necesario encerrar el valor entre comillas dobles o simples:
var mensaje = "Hola mundo ";
var nombre = 'Aula Mentor';
var letra = 'b';

El motivo de que se puedan utilizar comillas dobles o simples indistintamente es para


poder utilizar comillas dentro del propio texto que se desea almacenar. En este caso es
necesario encerrar con un tipo de comillas diferente al que se desea almacenar.
/* El contenido de texto1 tiene comillas simples, por lo que
se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
/* El contenido de texto2 tiene comillas dobles, por lo que
se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';

Pero si el texto que se desea almacenar incluye ambos tipos de comillas as como
otros caracteres especiales es necesario utilizar las secuencias de escape que no son ms
que smbolos precedidos de la barra inclinada \ y cuyo significado es:

Elemento que se desea incluir Secuencia de Escape

Una nueva lnea \n

Un tabulador \t

Una comilla simple \'

Una comilla doble \"

Una barra inclinada \\

var texto1 = 'Una frase con \'comillas simples\' dentro';


var texto2 = "Una frase con \"comillas dobles\" dentro";
32 Aula Mentor Iniciacin a Javascript

2.4.3 -TIPO LGICO

Las variables de tipo lgico o booleano son aquellas que permiten representar valores
de verdad: true (verdadero) o false (falso).
var PagoRealizado = false;
var ivaIncluido = true;

2.4.4 -TIPOS ESTRUCTURADOS: ARRAYS

Mientras que tal y como se ha observado, los tipos simples son capaces de almacenar
un nico valor simultneamente en una variable, los tipos estructurados o estructuras de
datos permiten almacenar mltiples valores. Tradicionalmente los lenguajes de
programacin disponen de numerosos tipos estructurados. Entre los ms habituales
destacan los Arrays ms conocidos en el mbito matemtico por matrices o incluso
vectores cuando se limitan a una dimensin. Un array es un conjunto de variables del
mismo tipo que tienen un nombre nico y se diferencian unas de otras por la posicin
que ocupan.

El objetivo de los arrays es simplificar el cdigo y establecer una relacin entre un


conjunto de variables que representan realidades similares. Por ejemplo, si se desea
trabajar con los meses del ao en un programa se podran definir doce variables simples
y por tanto independientes cada una con su propio nombre y que almacenasen valores
diferentes:

var mes_uno = "Enero";


var mes_dos = "Febrero";
...
var mes_doce = "Diciembre";

Esta estrategia obliga a crear una variable por cada mes y dado que cada una es
independiente su nombre debe de ser distinto. En captulos posteriores, cuando se
estudien las estructuras de control, se comprobar que utilizar arrays en vez de variables
simples, reduce mucho la complejidad del cdigo y abre un abanico ingente de
posibilidades a la hora de resolver problemas que impliquen informacin relacionada. En
este tipo de casos, se pueden agrupar todas las variables relacionadas en una coleccin
Estructuras de Control de Flujo 33

de variables o array. El ejemplo anterior se puede plantear con una array de una
dimensin (vector) de la siguiente forma:
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
"Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

Desde el punto de vista sintctico, la definicin de un array es muy sencilla ya que


simplemente hay que utilizar se utilizan los caracteres [ y ] para delimitar su comienzo y
su final y se utiliza el carcter , (coma) para separar sus elementos:
var nombre_array = [valor1, valor2, ..., valorN];

Para acceder a los diferentes elementos de un array simplemente hay que utilizar el
nombre de la variable y el ndice que representa la posicin que ocupa el elemento al
que se desea acceder dentro del array. Hay que tener en cuenta que las posiciones
comienzan a numerarse en cero, por lo que el primer elemento es el mes[0] y as
sucesivamente mes[1], mes[2], etc.

2.4.5 -TIPOS ESTRUCTURADOS: OBJETOS

Los objetos son los principales protagonistas del paradigma de la programacin


orientada a objetos. Son una evolucin de otro tipo estructurado denominado registro
(estructuras en algunos lenguajes). Los objetos representan entidades cuya complejidad
hace que no sea suficiente un valor para almacenar toda la informacin necesaria. Por
este motivo, los registros o estructuras son conjuntos de datos de diferente tipo
relacionados entre s. Por ejemplo, los datos de una persona (nombre, apellidos, fecha de
nacimiento, direccin, etc.) se pueden agrupar en un registro o estructura. El paradigma
orientado a objetos incorpora a esos datos estructurados, las funciones (llamadas
mtodos) que manipulan esos datos, haciendo que los datos y los procedimientos
conformen un ente llamado objeto. En JavaScript hay numerosos objetos predefinidos y
el usuario-programador puede definir los que necesite. Ejemplo de objetos predefinidos
en Javascript son las ventanas, los formularios, los controles, etc.
34 Aula Mentor Iniciacin a Javascript

2.4.6 -VALORES ESPECIALES

En JavaScript existen dos valores especiales que son el valor null que indica que el
contenido de una variable es nulo y el valor undefined que indica que la variable no tiene
valor. El valor null, por ejemplo, es el valor que devuelve la funcin prompt cuando el
usuario pulsa el botn Cancelar. El valor undefined, por ejemplo, es el valor que aparece
en el control de introduccin de datos cuando no se establece valor por defecto en la
funcin prompt.

2.5 - OPERADORES

Los operadores son el primer eslabn a la hora de establecer la capacidad de clculo


de un lenguaje de programacin. Con ellos es posible realizar operaciones de diversa
naturaleza que incluyen como mnimo clculos aritmticos, relacionales y lgicos. La
combinacin de operadores con los datos a tratar conformar las expresiones.

Las expresiones son combinaciones de operadores y operandos. Los operandos


pueden ser constantes, variables y llamadas a funciones. Todas las expresiones producen
o devuelven un resultado de un cierto tipo que estar determinado por el tipo de
operandos que manipula y por los operadores que utiliza. As mismo la operacin
asociada a un operador puede ser diferente en funcin de los operandos que maneje.
Esto recibe el nombre de sobrecarga de operadores y se manifiesta de forma muy
clarificadora cuando se analiza el operado +. Si este operador se aplica a dos operandos
numricos, el resultado ser la suma aritmtica. Sin embargo, si se aplica a operandos de
tipo cadena de caracteres, el resultado ser la concatenacin (yuxtaposicin) de ambas
cadenas.

Tipo de Expresin Tipo de retorno Expresin Resultado


Expresin de cadena Cadena Hola + Mundo HolaMundo
Expresin de cadena Cadena 10 + 20 1020
Expresin aritmtica Numrico 10 + 20 30
Expresiones relacionales Lgico 7>5 True
Expresiones lgicas Lgico True && False False
Estructuras de Control de Flujo 35

2.5.1 -OPERADOR DE CONCATENACIN.

Para unir cadenas de caracteres se emplea el operador de concatenacin (+). Por


ejemplo la expresin "Buenos" + "Das" dar como resultado "BuenosDias".

2.5.2 -OPERADORES ARITMTICOS.

Se utilizan con datos de tipo numrico y devuelven siempre un valor numrico. Son los
conocidos: suma (+), resta (-), multiplicacin (*), divisin (/) y mdulo o resto de
la divisin entera (%).

<HTML>
<HEAD><TITLE>Operadores aritmticos</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo operadores aritmticos*/
var Num1 = 2, Num2 = 4, Num3 = 6;
alert(
" Num1 \t" + (Num1)
+"\nNum2 \t" + (Num2)
+"\nNum3 \t" + (Num3)
+"\nNum1 + Num2 \t" + (Num1 + Num2)
+"\nNum3 / Num2 \t" + (Num3 / Num2)
+"\nNum3 % Num2 \t" + (Num3 % Num2)
+"\nNum1 + 2 \t" + (Num1 + 2)
+"\nNum1 \t" + (Num1)
);
</SCRIPT>
</BODY>
</HTML>

Ejemplo 9 Operadores aritmticos

2.5.3 -OPERADORES DE INCREMENTO Y DECREMENTO

Un caso particular dentro de los operadores aritmticos son los operadores de


incremento y decremento por el hecho de que su uso no solo devuelve un valor sino que
modifica el propio contenido de la variable. En realidad estos operadores combinan un
operador aritmtico con el operador de asignacin que aparece explicado en el prximo
epgrafe. Se utilizan con variables numricas y permiten incrementar o decrementar en
36 Aula Mentor Iniciacin a Javascript

una unidad el valor de la variable sobre la que se aplica. Se trata de operadores unarios y
el operando sobre el que se aplican siempre debe ser una variable ya que no tiene
sentido intentar incrementar una constante porque no se puede modificar su valor. Los
operados son el incremento (++) y el decremento (--).
var numero = 9;
++numero;
alert(numero); // numero = 10

Ambos operandos tienen un efecto diferente si se utilizan de forma prefija (delante


del operando) que de forma postfija (detrs del operando). En el primer caso
incrementan/decrementan el valor de la variable y la expresin devuelve como resultado
el nuevo valor (ya incrementado/decrementado). El caso postfijo primero devuelve el
valor antes de incrementar/decrementar y posteriormente incrementa/decrementa el
valor de la variable. Evidentemente esta sutil pero importante diferencia slo se observa
cuando el operador aparece formando parte de otra expresin ms compleja. Por
ejemplo se puede observar en el ejemplo siguiente asociada a una funcin alert.

<HTML>
<HEAD><TITLE>Diferencias en notacin prefija y postfija</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var pruebaA = 1;
var pruebaB = 1;
alert ("Operador ++ Prefijo:" + (++pruebaA));
alert ("Operador ++ Postfijo:"+ (pruebaB++));
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

Ejemplo 10 Diferencias notacin prefija y postfija

Notacin prefija Notacin postfija


(++pruebaA) (pruebaB++)
Ilustracin 3 Resultado diferencias entre notacin prefija y postfija
Estructuras de Control de Flujo 37

2.5.4 -OPERADOR DE ASIGNACIN

El operador de asignacin es uno de los operadores ms importantes en los lenguajes


de programacin ya que permite asignar (almacenar) en una variable, el resultado de una
expresin. El smbolo que representa el operador de asignacin (=) el cual no debe
confundirse con el operador relacional de comparacin (==)
var numero = 9;

2.5.5 -OPERADORES ARIMTICOS CON ASIGNACIN

Dado que es muy frecuente realizar operaciones aritmticas que impliquen que una
variable sea operando de la expresin y variable destino del resultado, los lenguajes de
programacin incorporan operadores que simplifican la escritura de expresiones que
suelen ser habituales en los programas. Estos operadores combinan dos smbolos que
son el correspondiente a la operacin deseada y el operador de asignacin. Para el caso
de la suma sera (+=)

<HTML>
<HEAD><TITLE>Operadores aritmticos con asignacin</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo operadores asignacin*/
var Suma = 6, Resta = 6, Multi = 6, Divi = 6, Modu = 6;
Suma += 2;
Resta -= 2;
Multi *= 2;
Divi /= 2;
Modu %= 5;
alert(
" Suma \t" + (Suma)
+"\nResta \t" + (Resta)
+"\nMulti \t" + (Multi)
+"\nDivi \t" + (Divi)
+"\nModu \t" + (Modu)
);
</SCRIPT>
</BODY>
</HTML>

Ejemplo 11 Operadores aritmticos con asignacin


38 Aula Mentor Iniciacin a Javascript

El programa anterior muestra el funcionamiento de los operadores de asignacin +=,


-=, *=, /= y %= utilizando cinco variables llamadas Suma, Resta, Multi, Divi y Modu.
Iniciacilizadas todas ellas a 6 y realizando las correspondientes operaciones de
asignacin. Finalmente se muestra con una ventana de alerta los nombres de las
variables y su valor tras la operacin.

2.5.6 -OPERADORES RELACIONALES

Los operadores relacionales permiten comparar dos operandos siempre que entre
ambos est definida una relacin de orden. En JavaScript estn definidos los operadores:
mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y
distinto de (!=). El resultado de aplicar un operador relacin da lugar a una expresin
lgica por lo que el resultado siempre ser true o false.

<HTML>
<HEAD><TITLE>Operador relacional de igualdad</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var A = 10;
var B = 12;
alert ( A==B);
</SCRIPT>
</BODY>
</HTML>

Ejemplo 12 Operador relacional igualdad

Es importante distinguir el operador de igualdad (==) del operador de asignacin (=)


ya que es origen de muchos errores y su deteccin no resulta fcil porque ambos se
pueden utilizar en el mismo contexto con resultados completamente diferentes. Cuando
se utilizan estos operadores con operandos del tipo cadenas de texto, los operadores
"mayor que" (>) y "menor que" (<) comparan letra a letra comenzando desde la izquierda
hasta que se encuentre una diferencia entre las dos cadenas de texto. Para determinar si
una letra es mayor o menor que otra, las maysculas se consideran menores que las
minsculas y las primeras letras del alfabeto son menores que las ltimas. La tabla ASCII
(codificacin numrica asociada a todos los caracteres visibles de un teclado) determina
el orden en estas comparaciones. Se puede consultar una tabla ASCII en
http://ascii.cl/es/
Estructuras de Control de Flujo 39

Ejercicio 4

2.5.7 -OPERADORES LGICOS

Los operadores lgicos permiten combinar expresiones lgicas (aquellas que


devuelven como resultado un valor true o false). Responden a tablas de verdad pre-
establecidas que determinan el resultado del operador a la combinacin de valores de
los operandos. El resultado siempre es un valor true o false. Dado que en algunos
lenguajes de programacin no existe el tipo lgico como tipo de datos, tradicionalmente
se considera que cualquier valor numrico diferente de cero se considera true y cero se
considera false. Por este motivo se pueden utilizar estos operadores con operandos
numricos. As mismo, cuando se trabaja con cadenas de caracteres, la cadena vaca se
considera false y el resto de cadenas true.

Operador negacin (!): Utiliza un nico operando y cuyo resultado es true cuando el
operando vale false y false cuando el operando vale true.
var soltero = true;
alert(!soltero); // Muestra "false" y no "true"

Operador Y-lgico (AND) (&&): El operador lgico AND es un operador binario por lo
que obtiene su resultado como resultado de evaluar dos operandos. La tabla de verdad
de este operador devuelve true si los dos operandos son true y false en cualquier otro
caso.

Operador O-lgico (OR) (||): El operador lgico OR es un operador binario por lo que
obtiene su resultado como resultado de evaluar dos operandos. La tabla de verdad de
este operador devuelve false si los dos operandos son false y true en cualquier otro caso.

2.6 - PRECEDENCIA DE OPERADORES

En una expresin pueden aparecer varios operadores y el resultado podra ser


diferente si las operaciones se realizan en un orden o en otro. Como parece lgico pensar
40 Aula Mentor Iniciacin a Javascript

no se puede dejar al azar este asunto ya que las expresiones deben ser evaluadas
siguiendo unas pautas establecidas. Por ejemplo, la operacin 3+5*4 proporcionar
resultados distintos si primero se suma y luego con el resultado se multiplica que si se
hace primero la multiplicacin y luego la suma. En el primer caso el resultado sera 32
mientras que en el segundo sera 23. Para eliminar esta ambigedad, los lenguajes de
programacin, como herencia de la matemtica, establecen una jerarqua de operadores
que determina el orden de evaluacin de los operadores.

Prioridad Operadores Operaciones


1 ++ -- - Incremento, decremento, cambio de signo, negacin
2 */% Multiplicacin, divisin, resto (mdulo) de la divisin
3 +- Suma, resta
4 < > <= >= Menor, mayor, menor o igual, mayor o igual
5 == = Igual, distinto
6 && Conjuncin lgica (AND Y lgico)
7 || Disyuncin lgica (OR O lgico)
8 = += -= *= /= %= Asignacin, asignacin y suma, etc.

Observaciones: Los operadores ++ y -- varan su comportamiento en una expresin


dependiendo de si se aplican antes (pre-) o despus (post-). Los operadores que se
encuentran en el mismo grupo tienen la misma precedencia. En estos casos no se
garantiza el orden de evaluacin. Si queremos que se evalen en algn orden concreto
deberemos utilizar parntesis.

La precedencia o prioridad establecida por defecto se puede alterar utilizando


parntesis, de manera que las expresiones que se encuentran dentro de los parntesis
se realizan antes que las restantes. Se pueden anidar parntesis y dentro de los mismos
se utiliza la precedencia por defecto.

JavaScript permite expresiones como: 100000 >= SALARIO <= 200000. Este tipo de
expresiones es ilegal en otros lenguajes de programacin y provocar un error ya que al
evaluar la primera parte de la expresin se sustituir por un valor lgico de tipo
true/false y este resultado no puede compararse con un valor numrico. La expresin
vlida para la mayora de los lenguajes de programacin sera SALARIO >= 100000 &&
SALARIO <= 200000.
Estructuras de Control de Flujo 41

UNIDAD 3 - ESTRUCTURAS DE
CONTROL DE FLUJO

3.1 - INTRODUCCIN

Aunque hasta este momento no se ha indicado nada en relacin con el flujo de


ejecucin de un programa, parece natural que se entienda que las instrucciones se
ejecutan en el orden en el que aparecen escritas al igual que un texto las lneas se leen
de arriba hacia abajo. Sin embargo este flujo de ejecucin hace que todas las
instrucciones se tengan que ejecutar y siempre se hagan en el mismo orden. Esta
caracterstica de ejecucin ordenada y lineal de un programa recibe el nombre de
estructura de ejecucin secuencial. Sin embargo, los lenguajes de programacin incluyen
otras estructuras de ejecucin adicionales como son la estructura alternativa (con
diferentes variantes: simple, doble o mltiple) y la estructura de ejecucin cclica o
repetitiva.

En definitiva, el objetivo es disponer de mecanismos para que el flujo de ejecucin de


un programa pueda alterar el esquema secuencial natural, incorporando fragmentos de
cdigo que se ejecutan si se cumplen determinadas condiciones o bien haciendo que un
conjunto de instrucciones se ejecuten un nmero determinado de veces antes de
continuar con la ejecucin del resto. Estas estructuras de control de flujo han dado lugar
al paradigma de programacin estructurado. Bsico en el mbito de gran parte de
lenguajes de programacin de carcter procedimental.
42 Aula Mentor Iniciacin a Javascript

3.2 - ESTRUCTURA ALTERNATIVA SIMPLE: IF

La estructura alternativa simple permite establecer que un conjunto de instrucciones


se ejecuten si se cumple una condicin lgica. La sintaxis es la siguiente:

if(condicion) {
instrucciones; ?
true
} instrucciones

false

Si la condicin se cumple (es decir, si su valor es true) se ejecutan las instrucciones


que se encuentran dentro del bloque delimitado por llaves {...} y a continuacin se
sigue con el flujo normal, ejecutando las instrucciones posteriores a la llave de cierre. Si
la condicin es false entonces el flujo de ejecucin salta las instrucciones del bloque
encerrado entre llaves y continua con las que se encuentran tras la llave de cierre. En el
ejemplo, la variable saludar es creada e inicializada con el valor true. Cuando el flujo de
ejecucin llega a la instruccin if, se evala su valor y al ser igual a true se ejecuta la
funcin alert mostrando en pantalla una ventana con el mensaje. Si se modifica la
primera lnea asignado false a la variable saludar se observar que el mensaje Hola
Mundo no aparece. En ambos casos, se mostrar al final la ventana de alerta con el
mensaje Fin.

var saludar = true;


if(saludar == true)
{
alert("Hola Mundo");
}
alert (Fin);
Estructuras de Control de Flujo 43

<HTML>
<HEAD><TITLE>Alternativa simple</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura alternativa simple.
var Nota;
Nota = prompt("Introduce la nota del alumno: ", 0);
if (Nota >= 5)
{
alert("APROBADO!");
}
alert("Fin del programa");
// Fin del programa.
</SCRIPT>
</BODY>

Ejemplo 13 Alternativa simple

Los operadores lgicos AND (&&), OR (||) y NOT (!) permiten encadenar varias
condiciones simples para construir condiciones complejas.

var llueve = true;


var calor = false;
If (!llueve && calor==false)
{
alert (Da de tenis);
}

El fragmento anterior muestra dos expresiones lgicas unidas por el operador AND. El
resultado ser verdadero si ambas expresiones son verdaderas. La primera expresin
est formada por la negacin del valor de la variable llueve. Dado que la variable llueve
vale true, la negacin devolver false. La segunda expresin compara el valor de calor
con false como es cierta esa comparacin, el resultado ser true. Por tanto false AND
true ser false y la alerta no se mostrar en pantalla. Modifique el valor de la
inicializacin de llueve a a false y la alerta se mostrar.
44 Aula Mentor Iniciacin a Javascript

3.3 - ESTRUCTURA ALTERNATIVA DOBLE: IF ELSE

Cuando en un programa se desea que se ejecuten un bloque de instrucciones si se


cumple una condicin y otro bloque diferente si la condicin no se cumple, la estructura
anterior se debe completar con una clusula else que establece a travs de un bloque
encerrado entre llaves, las instrucciones correspondientes al caso de que la condicin no
se cumpla.
var llueve = true;
var calor = false;
If (!llueve && calor==false){ false true
alert (Da de tenis); instrucciones ?
instrucciones
}
else
{
Alert (Da de lectura);
}

<HTML>
<HEAD><TITLE>Alternativa doble</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura alternativa doble.
var Nota;
Nota = prompt("Introduce la nota del alumno: ", 0);
if (Nota >= 5)
{
alert("APROBADO!");
}
else
{
alert("suspenso!");
}
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

Ejemplo 14 Alternativa doble


Estructuras de Control de Flujo 45

3.4 - ANIDAR ESTRUCTURAS ALTERNATIVAS

Todas las estructuras de control se pueden anidar, es decir, dentro de una puede
aparecer otra y dentro de esta otra a su vez construyendo estructuras alternativas ms
complejas. No obstante conviene ser cuidadoso con este mecanismo porque puede
complicar el cdigo en exceso y hacer que no todas las alternativas estn incluidas o que
incluso aparezcan algunas no previstas por el programador.

<HTML>
<HEAD><TITLE>Anidamiento de alternativas</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de anidamiento de estructuras alternativas.
var Nota;
Nota = prompt("Introduce la nota del alumno: ", 0);
if (Nota >= 5 && Nota <= 10)
{
alert("APROBADO!");
}
else
{
if (Nota >= 0 && Nota < 5)
{
alert("suspenso!");
}
else
{
alert("Nota errnea");
}
}
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

Ejemplo 15 Anidamiento de Alternativas


46 Aula Mentor Iniciacin a Javascript

3.5 - EL OPERADOR CONDICIONAL ?

En JavaScript est disponible el operador condicional ?. Se puede utilizar en algunas


ocasiones en lugar de los la alternativa doble cuando las instrucciones de la parte true
como las de la parte false son muy sencillas. Su formato genrico es:

(condicin) ? ExpresionSiVerdadera : ExpresionSiFalsa

Donde Condicin es cualquier expresin que devuelve un valor true o false.


ExpresionSiVerdadera es una expresin que se ejecutar en el caso de que la condicin
tenga el valor true. ExpresionSiFalsa igual que la anterior pero solo se ejecutar cuando
la condicin es falsa. Por ejemplo, la alternativa doble del ejemplo anterior puede
sustituirse por la siguiente expresin:
(Nota >= 0 && Nota < 5) ? alert("suspenso!") : alert("Nota erronea");

3.6 - ALTERNATIVA MLTIPLE

Esta estructura est disponible a partir de la versin JavaScript1.3. Tiene el siguiente


formato:

switch (expresin)
{ case valor1:
instrucciones1;
break;
case valor2:
instrucciones1;
break;
case valor3:
instrucciones1;
break;
...
case valorn:
instruccionesn;
break;
[default:
instrucciones;]
};

Donde: expresin es cualquier expresin vlida con la que se compararn los valores
que acompaan a la clusula case. valor1,..valorn son valores que suponemos puede
tomar la expresin a los que les siguen la instruccin o instrucciones que queremos que
Estructuras de Control de Flujo 47

se ejecute en cada caso. default es una clusula opcional, se ejecutarn las instrucciones
que la siguen en el caso de que el valor no coincidiese con ninguno de los casos
contemplados. El funcionamiento de esta estructura es el siguiente:

1. - calcula el valor de expresin.

2.- comprueba desde el principio cada valor que acompaa a las clusulas case
hasta encontrar alguno que coincida con el valor de expresin.

3.- cuando encuentra un valor que coincida con expresin ejecuta las
instrucciones correspondientes hasta que encuentra la clusula break.

4.- si no encuentra ningn valor que coincida con expresion ejecuta las
instrucciones correspondientes a la cusula default (si existe, en caso contrario no
har nada).

Observaciones:

La clusula break que aparece en este formato no es obligatoria pero si no se


utiliza cambiar el funcionamiento de la estructura switch. Esta clusula es la
responsable la salida del bloque una vez que se ejecuten las instrucciones de una
de las clusulas case. Si no se pone, se seguirn ejecutando todas las
instrucciones hasta llegar al final. Es decir las clusulas case sin break actuaran
como puntos de entrada a la estructura, siendo la salida la misma en todos los
casos.
Para una misma clusula case NO se pueden especificar diversos valores en lugar
de un nico valor. Si se desea que varios valores tengan la misma accin se deben
poner clasulas case por cada uno y dejar la accin en el ltimo sacerlo:
case valor1:
case valor2:
case valor3: acciones;break;
48 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD><TITLE>Anidamiento de estructuras</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura alternativa mltiple
// (Anidada dentro de una alternativa doble).
var Nota;
var Calificacion = " ";
Nota = prompt("Introduce la nota del alumno: ", 0);
Nota = Math.round(Nota);
if (Nota >= 0 && Nota <= 10)
{
switch (Math.round(Nota)) {
case 5: Calificacion="aprobado"; break;
case 6: Calificacion="bien"; break;
case 7:
case 8: Calificacion="notable"; break;
case 9:
case 10: Calificacion="sobresaliente"; break;
default: Calificacion="suspenso"; break;
}; //end switch
}
else
{
Calificacion = "Nota erronea";
}
alert(Calificacion);
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

Ejemplo 16 Anidamiento de estructuras alternativas

El ejemplo anterior muestra la utilizacin de una estructura alternativa mltiple


anidada dentro de una estructura alternativa doble. En esta ocasin, en lugar de ejecutar
una alerta para cada caso, hemos optado por guardar el texto a mostrar en una variable
(Calificacion) para, al final, mostrar el contenido de dicha variable. Tambin podemos
observar que la variable Nota se redondea antes de comprobar su contenido (Nota =
Math.round(Nota);) ya que los valores de las clusulas case deben ser exactos (5, 6,
etctera).
Estructuras de Control de Flujo 49

3.7 - ESTRUCTURAS REPETITIVAS

A la hora de elaborar un programa es muy habitual que un conjunto de instrucciones


tengan que ejecutarse de forma repetida. Para ello la mayor parte de los lenguajes de
programacin incorporan una familia de estructuras repetitivas que permiten establecer
que un bloque de instrucciones se ejecute varias veces seguidas. El lenguaje JavaScript
proporciona las siguientes: for, while, do while

3.8 - ESTRUCTURA FOR

La existencia de esta estructura es muy habitual aunque presenta ciertos matices


entre unos lenguajes y otros. Originalmente se dise en otros lenguajes de
programacin anteriores con objeto de poder ejecutar de forma repetida un bloque de
instrucciones, pero sabiendo exactamente y con carcter previo el nmero de
repeticiones. Por ejemplo, para calcular la suma de los diez primeros nmeros naturales
se poda utilizar una estructura for que repitiese diez veces una operacin de suma en la
que cada nmero natural se sumase al valor calculado previamente. Sin embargo, eran
muchas las estrategias que permitan alterar el funcionamiento ya que a pesar de estar
concebido para repetirse un nmero de veces, se poda alterar el valor del contador que
detectaba la iteracin en curso y por tanto modificar el valor previamente estimado.

Actualmente, la mayor parte de los lenguajes, incluyendo JavaScript proporcionan un


modelo amplio que aporta mucha flexibilidad y potencia a esta estructura de control. La
sintaxis general es la siguiente:

For (inicializacion; condicion; actualizacion)


{
Instrucciones_que_se_repetirn
}

El funcionamiento de una estructura for es sencillo. En primer lugar y exclusivamente


la primera vez que se entra en el bucle, se evala la expresin que ocupa la zona
50 Aula Mentor Iniciacin a Javascript

denominada inicializacin. Generalmente en esta zona se pone una expresin que utilice
el operador de asignacin para inicializar una variable denominada de control, el valor de
inicio. A continuacin se evala la expresin que ocupa la segunda parte y que se
denomina condicin ya que lo normal es que se trate de una condicin cuyo resultado
devuelva un valor true o false. Si la condicin es true, se ejecutan las instrucciones que se
encuentran dentro del bloque encerrado entre llaves y finalmente se evala la expresin
que aparece en la sintaxis bajo la denominacin de actualizacin. Tras esta actualizacin
se vuelve a evaluar la condicin y se vuelven a ejecutar las instrucciones del bloque, y as
sucesivamente hasta que la evaluacin de la condicin devuelva el valor false, en cuyo
caso el programa contina en la siguiente instruccin a la llave de cierre del bucle.

Por ejemplo, el siguiente fragmento de programa visualiza en pantalla los cinco


primeros nmeros naturales y para ello utiliza un bucle cuya variable de control se ha
denominado nmero:

for (numero=1; numero<6;numero++)


{
alert (numero);
}

El proceso que sigue el intrprete consiste, en primer lugar y por una nica vez, en
asignar a la variable numero el valor 1. A continuacin evala la condicin numero < 6 y
dado que la misma actualmente es true ejecuta el bloque de instrucciones (alert). El
siguiente paso consiste en ejecutar la expresin de actualizacin que en este caso utiliza
el operador de post-incremento para que la variable numero pase al siguiente valor (en
este caso 2) y de nuevo vuelve a evaluar al condicin numero<6 que al seguir siendo true
permite de nuevo la ejecucin del alert. Este proceso se repite hasta que la actualizacin
hace que la variable numero pase a valer 6 de manera que en ese momento la condicin
numero < 6 deja de ser true para ser false y por tanto el bucle se termina.

Hay que prestar mucha atencin en las expresiones que se utilizan en los bucles con
especial cuidado a la expresin denominada condicin ya que el programador debe tener
garanta de que ese condicin ser false en algn momento porque de no ser as el bucle
Estructuras de Control de Flujo 51

se ejecutara indefinidamente, motivo por el cual muchos programas se quedan


bloqueados, incapaces de avanzar y generando inestabilidad en el sistema.

Las caractersticas del bucle for hacen que se utilice mucho a la hora de manipular
arrays ya que los elementos de una array se identifican por el ndice que ocupan y por
tanto recorrer un array con un bucle es muy sencillo. Por ejemplo:

var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado","Domingo"];


for(var i=0; i<7; i++)
{
alert(dias[i]);
}

Es importante recordar que los arrays en Javascript se organizan de forma que el


primer elemento ocupa la posicin 0, motivo por el cual la variable de control del bucle
del ejemplo anterior se inicializa a cero y la condicin es i<7 ya que el ltimo elemento
del array ocupa la posicin 6. Esto, lejos de ser un inconveniente, es una ventaja, ya que
la condicin en estos casos es variable_de_control < nmero_de_elementos_del_array.

3.9 - ESTRUCTURA FOR...IN

Una variante de la estructura de control repetiva for es la denominada for..in cuya


aplicacin est muy relacionada con la programacin orientada a objetos. En este punto,
dado que an no se ha sealado nada en relacin con ese paradigma de programacin,
se explica exclusivamente su uso con arrays y a travs del mismo ejemplo utilizado antes
para mostrar la sencillez de su uso.

var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado", "Domingo"];


for(i in dias)
{
alert(dias[i]);
}
52 Aula Mentor Iniciacin a Javascript

La variable que se indica como indice es la que se puede utilizar dentro del bucle
for...in para acceder a los elementos del array. Como se puede observar el valor inicial,
la condicin y la actualizacin no hay que especificarlos, simplificando mucho la
manipulacin de estas estructuras de datos. Hay que pensar que todo aquello que el
intrprete conoce durante la ejecucin debera aprovecharse para que no quede en
manos del programador controles y decisiones que puedan provocar errores. El
intrprete conoce perfectamente la longitud de un array en cada momento, por lo tanto
es mejor que sea el propio intrprete el que determine cuntos elementos hay y por
tanto cuntas veces es necesario repetir el bucle. Evidentemente este bucle recorre
todos los elementos sin excepcin.

<HTML>
<HEAD><TITLE>Bucle for con operador in</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE",
"CRISTINA","IGNACIO");
var Apellidos = new Array ("GIL", "SANCHEZ", "RODRIGUEZ",
"ALONSO","VEGA");
for(i in Alumnos)
{
document.write(Alumnos[i]+" ** ");
document.write(Apellidos[i]+"<br>");
}
</SCRIPT></BODY></HTML>

Ejemplo 17 Bucle con operador in

Tal y como se ha sealado en el captulo 2, los arrays son estructuras de datos del
mismo tipo, identificadas por un nico nombre y que recurren al indexado para distinguir
unos elementos de otros. Su naturaleza hace que la gestin de los mismos est
fuertemente vinculada a las estructuras de control repetitivo. A continuacin veremos
una representacin grfica del fragmento de memoria que contiene un Array que
almacena los nombres de 5 alumnos:

Alumnos

MIGUEL ELENA JORGE CRISTINA IGNACIO

Alumnos[0] Alumnos[1] Alumnos[2] Alumnos[3] Alumnos[4]


Estructuras de Control de Flujo 53

Observamos que hay cinco elementos de informacin (el Array tiene cinco
elementos). Todos ellos comparten un mismo identificador (Alumnos) pero cada uno
tiene, adems, un ndice que hace referencia al elemento en particular. Podemos
apreciar tambin que el primer elemento es el 0, el segundo el 1, y as sucesivamente.
As, cuando hagamos referencia a Alumnos[3] estaremos refirindonos al elemento que
ocupa la posicin 4 (recuerde que la numeracin comienza en cero) cuyo contenido en
este caso es "CRISTINA".
Funciones 55

UNIDAD 4 - UNIDAD 4 FUNCIONES

4.1 - CONCEPTO DE FUNCIN

Cuando nos encontramos ante un script de una cierta dimensin o complejidad se


suele dividir en partes ms pequeas, de forma que cada una permita alcanzar un
determinado propsito. Para simplificar la tarea de desarrollo, los lenguajes de
programacin incorporan un mecanismo conocido con el nombre de funciones. Las
funciones permiten agrupar bajo un identificador un conjunto de instrucciones que
resuelven un problema concreto. Una funcin es, por tanto, un conjunto de instrucciones
a las que se asigna un nombre, pueden devolver un valor y estn disponibles para su
ejecucin tantas veces como se desee con solo invocarlas a travs del identificador que
las representa. Se pueden definir tantas funciones como sea preciso. A la hora de
trabajar con funciones debemos distinguir dos aspectos: la creacin de la funcin (o
definicin) y la utilizacin de la funcin (o llamada). En el cdigo que aparece a
continuacin se puede observar la repeticin de un conjunto de operaciones para
diferentes valores. Esta situacin es un claro ejemplo que puede resolverse eficazmente
con funciones.

var resultado;
var numero1 = 4;
var numero2 = 2;
// Se suman los nmeros y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);

numero1 = 7;
numero2 = 1;
resultado = numero1 + numero2;
alert("El resultado es " + resultado);

numero1 = 8;
numero2 = 2;
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
56 Aula Mentor Iniciacin a Javascript

4.1.1 -CREACIN DE UNA FUNCIN.

Para crear una funcin debemos determinar los siguientes aspectos:

El nombre de la funcin.
Los parmetros o valores sobre los que actuar, es decir, los argumentos.
Las acciones que deber realizar.
El valor que devolver. Aunque puede no devolver ningn valor.

Y aplicar el siguiente formato:


function nombredefuncion (listadeargumentos)
{
instrucciones...
...
[return valorderetorno;]
}

Donde:

nombredefuncion es un identificador vlido que servir para realizar llamadas


a la funcin.
listadeargumentos es una lista de variables (separadas por comas) que
recogern los valores que se pasen en la llamada a la funcin.
valorderetorno es una expresin cuyo valor devolver la funcin.

El siguiente ejemplo define una funcin llamada suma que recibe dos valores y
devuelve su suma:

function suma(A,B)
{
var C;
C = A + B;
return C;
}

Cuando el navegador encuentra la definicin de una funcin, carga dicha funcin en la


memoria pero no la ejecutar hasta que se produzca una llamada a la funcin.
Funciones 57

4.1.2 -UBICACIN DE LA DEFINICIN DE UNA FUNCIN.

Las funciones pueden declararse en cualquier parte de una pgina HTML entre las
etiquetas <SCRIPT> y </SCRIPT> pero teniendo en cuenta que no pueden definirse dentro
de otra funcin ni dentro de una estructura de control. Normalmente se definen dentro
de la cabecera de una pgina HTML, as cuando se carga la pgina en el navegador del
cliente estarn disponibles para ser utilizadas. En el ejemplo siguiente se declara una
funcin pero la misma no se utiliza y por lo tanto el programa aparentemente no hace
nada.

<html>
<head>
<title>Funciones</title>
<script language="JavaScript">
function Saludo()
{
document.write(hola mundo);
}
</script>
</head>
<body>
</body>
</html>

Ejemplo 18 Declaracin de una funcin

4.1.3 -LLAMADA A UNA FUNCIN.

Una vez definida la funcin podremos hacer llamadas que producirn la ejecucin de
la misma como si se tratase de cualquier instruccin. Estas llamadas deben hacerse
siguiendo el formato:
nombredefuncion(listadeparmetros)

Debemos tener en cuenta que la llamada puede devolver un valor y que debemos
hacer algo con l como escribirlo, asignarlo a una variable, etctera. Por ejemplo, para
hacer una llamada a la funcin suma y escribir el valor devuelto en el documento actual
escribiremos:
document.write(suma(2,3));
58 Aula Mentor Iniciacin a Javascript

<html>
<head>
<title>Llamada a una funcin</title>
<script language="JavaScript">
function Hora()
{
var hoy =new Date()
document.write(hoy.getHours(),":",hoy.getMinutes())
}
</script>
</head>
<body >
<script language="JavaScript">
document.write("Hora actual: ");
Hora();
</script>
</body>
</html>

Ejemplo 19 Llamada a una funcin

4.2 - FUNCIONES CON ARGUMENTOS

Los argumentos son variables locales a la funcin que toman un valor determinado
cuando se les invoca. Las funciones con argumentos generan resultados distintos
dependiendo de los valores que tomen los argumentos cuando se llama a la funcin. La
funcin suma expuesta a continuacin recibe dos valores y devuelve su suma:

<html>
<head>
<title>Funciones con argumentos</title>
<script language="JavaScript">
function Suma(a,b)
{
var resultado;
resultado=a+b;
return (resultado);
}
</script>
</head>
<body >
<script language="JavaScript">
var S, numero1,numero2;
numero1=parseInt(prompt("Introduzca un numero",0)); // parseInt se explica ms adelante
numero2=parseInt(prompt("Introduzca otro numero",0));
S=Suma(numero1,numero2);
alert ("La suma es: "+S);
</script>
</body>
</html>

Ejemplo 20 Funciones con argumentos (versin 1)


Funciones 59

En el ejemplo siguiente se puede ver otro enfoque diferente de la funcin Suma, ya


que en este caso no slo se calcula la suma sino que se muestra en resultado por pantalla
desde la misma funcin. Se puede comprobar que una misma funcin se puede llamar
varias veces desde el mismo programa.

<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function suma(A,B)
{
var resultado;
resultado = A + B;
alert("El resultado es " + resultado);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
suma (4 , 2);
suma (7 , 1);
suma (8 , 2);
</SCRIPT>
</BODY>
</HTML>

Ejemplo 21 Funciones con argumentos (versin 2)


60 Aula Mentor Iniciacin a Javascript

4.3 - CUESTIONES IMPORTANTES EN EL USO DE FUNCIONES.

Tanto las funciones como las llamadas deben ir entre etiquetas <SCRIPT>
</SCRIPT>
La clusula return produce la salida de la funcin devolviendo
(opcionalmente) un valor; como ya hemos visto en el ejemplo anterior.
JavaScript permite escribir varias clusulas return en una misma funcin.
Se pueden escribir funciones que no devuelven ningn valor sino que
solamente realizan una o varias acciones. Tambin se pueden escribir
funciones que no tengan parmetros.
Si al llamar a una funcin se le pasa un nmero menor de parmetros, los
parmetros que no han obtenido valor como resultado de la llamada
quedarn con el valor null. Por ejemplo, si la llamada a la funcin suma se
realiza con un slo nmero el resultado ser: NaN
Para evitar este tipo de situaciones podemos comprobar el nmero de
parmetros que se ha pasado a una funcin mediante arguments.length tal
como podemos apreciar en el siguiente ejemplo.

function suma(A,B)
{
var C;
if (arguments.length < 2)
{
B = 0;
}
if (arguments.length < 1)
{
A = 0;
}
C = A + B;
return C;
}

4.4 - VARIABLES GLOBALES Y LOCALES

Son variables locales aquellas que se declaran en la definicin de la funcin y slo son
accesibles en el mbito de la funcin donde se declaran. Las variables globales se
declaran fuera de la declaracin de cualquier funcin y se puede tener acceso a ellas
desde cualquier parte del documento.
Funciones 61

<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
var C; //variable global, la puede usar cualquier funcin
C=0;
function suma(A,B)
{
C = A + B;
return C;
}
function resta(A,B)
{
return C+A-B;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("Sumamos dos valores: ");
document.write(suma(2,3));
document.write('<BR>');
document.write("Restamos dos valores: ");
document.write(resta(10,20));
</SCRIPT>
</BODY>
</HTML>

Ejemplo 22 Variables locales y globales

4.5 - FUNCIONES PREDEFINIDAS

Existen algunas funciones propias del lenguaje que permitir realizar operaciones
comunes.

eval (cadena). Esta funcin permite que una cadena cuyo contenido debe ser cdigo
Javascript pueda ser evaluada por el intrprete de Javascript. No es una funcin
destinada a los programadores menos experimentados ya que la potencia que encierra
implica tener ciertos conocimientos de programacin.

isNaN(argumento). Es una funcin boolena (su resultado es true o false). La funcin


devuelve true si el argumento NO es un nmero y false en caso contrario.

parseInt (cadena[,base]). La funcin convierte una cadena de caracteres a su valor


numrico. Opcionalmente se puede establecer la base para indicar que la cadena de
caracteres representa un nmero en la base sealada. Si no se indica la base, el sistema
supone que se trata de la base 10. La funcin finalizar la conversin cuando encuentre
62 Aula Mentor Iniciacin a Javascript

un carcter que no sea un dgito del sistema cuya base haya sido especificada. Si la base
es 10 sern los dgitos (0..9), en base octal (0..7), en base hexadecimal (0..9,A..F).

parseFloat (cadena). La funcin convierte una cadena de caracteres a su valor en


coma flotante, es decir a un nmero real expresado en notacin exponencial. La funcin
finalizar la conversin cuando encuentre un carcter que no sea un dgito (0..9), un
punto decimal (.) o una "e".

escape (cadena). Codifica la cadena sustituyendo todos los caracteres que no forman
parte de la codificacin ASCII1 de 7 bits a sus secuencia de cdigos de escape asociada.
Estos cdigos sern devueltos con el formato %NN, donde NN es el cdigo de escape en
hexadecimal del carcter.

unescape (cadena). Realiza el proceso inverso al anterior, es decir devuelve la cadena


formada por los caracteres cuyo cdigo le especificaremos. Los cdigos deben ser
especificados con el mismo formato con el que escape los proporciona: %NN, donde NN
es el cdigo en hexadecimal.

toString (argumento). Convierte a cadena el dato especificado en argumento.


Normalmente se utiliza para convertir nmeros a cadena pero tambin funciona
conotros tipos como Booleano. Su utilizacin es restringida ya que JavaScript aplica una
conversin automtica de tipos a cadena cuando encuentra expresiones de
concatenacin en las que hay diversos tipos de datos.

typeof(argumento). Devuelve una cadena que indica el tipo del argumento (number,
string, boolean, undefined).

Ejemplo Resultado

eval(alert (Hola);); Muestra una ventana con el texto Hola

isNaN(12); False

isNaN(Hola); True

parseInt("27.11.2000"); 27

1
http://es.wikipedia.org/wiki/ASCII
Funciones 63

parseInt("20H30M07S"); 20

parseInt("345.6e5"); 345

parseInt("VUELO506"); NaN (Not a Number)

parseInt("27", 8); 23

parseInt("11111111", 2); 255

parseInt("A2", 16); 162

parseFloat("27.11.2000"); 27.11

parseFloat("20H30M07S"); 20

parseFloat("345.6e5"); 34560000

parseFloat("VUELO506"); NaN (Not a Number)

escape (Buenos das); Buenos d%EDas

unescape (Buenos d%EDas); Buenos das

Typeof (Hola); string


Objetos 65

UNIDAD 5 - OBJETOS
5.1 - OBJETOS EN JAVASCRIPT

Los objetos son los principales protagonistas del paradigma de la programacin


orientada a objetos. Son una evolucin de otro tipo estructurado denominado registro
(estructuras en algunos lenguajes). Los objetos representan entidades cuya complejidad
hace que no sea suficiente un valor para almacenar toda la informacin necesaria. Por
este motivo, los registros o estructuras son conjuntos de datos de diferente tipo
relacionados entre s. Por ejemplo, los datos de una persona (nombre, apellidos, fecha
de nacimiento, direccin, etc.) se pueden agrupar en un registro o estructura. El
paradigma orientado a objetos incorpora a esos datos estructurados, las funciones
(llamadas mtodos) que manipulan esos datos, haciendo que los datos y los
procedimientos conformen un ente llamado objeto. En Javascript todas las variables
hacen referencia a objetos y en realidad todo son objetos incluyendo los tipos de datos,
las estructuras e incluso las propias funciones. En Javascript hay numerosos objetos
predefinidos y el usuario-programador puede definir los que necesite. Entre los objetos
predefinidos asociados a elementos del navegador destacan las ventanas, los
formularios, los controles, y en general todos los elementos que permiten obtener la
experiencia de la navegacin.

5.1.1 -OPERADOR NEW

Para crear un objeto en Javascript se utiliza el mecanismo declarativo que se ha visto


en los temas anteriores o bien mediante el operador new. Con carcter general se
recurre al mtodo declarativo cuando se trabaja con tipos simples de datos y cadenas de
caracteres, recurriendo al mtodo ms formal basado en el operador new para el resto
de los objetos. Por ejemplo, el mtodo declarativo para una cadena de caracteres sera
66 Aula Mentor Iniciacin a Javascript

miCadena=; mientras que el mtodo basado en el operador new quedara as


miCadena = new String();

Javascript no posee todas las caractersticas de los lenguajes orientados a objeto ni es


objetivo de este curso ensear a programar utilizando este potente y prctico
paradigma. Sin embargo es importante conocer algunos aspectos de los objetos ya que
la mayor parte de los mecanismos estn ligados a los mismos. Y todo ello sin olvidar que
existen muchos objetos predefinidos que resuelven procesos sin necesidad de
programar nada. Entre los objetos ms relevantes destacan los siguientes: Array,
Boolean, Date, Function, Math, Number y String entre otros.

Para crear objetos a medida de las necesidades del programador hay que establecer
en primer lugar los datos y a continuacin los procedimientos que manipulan esos
datos. En la jerga del paradigma los primeros reciben el nombre de
atributos/propiedades mientras que los segundos se denominan mtodos. Por ejemplo,
para definir un tipo de objeto que represente los datos de una cuenta bancaria
simplificada y crear un objeto concreto se procede de la siguiente forma:

function cuenta_bancaria( numero, titular, saldo)


{
this.numero = numero;
this.titular = titular;
this.saldo = saldo;
}

var mi_cuenta = new cuenta_bancaria (123,Pedro Garca, 1500);

Como se puede observar el objeto llamado mi_cuenta se crea con el operador new
seguido del nombre del tipo de objeto y poniendo entre parntesis los valores que se
desean tomen los atributos del objeto. En el interior de la funcin cuyo nombre coincide
con el tipo de objeto aparece el operador this que hacer referencia al propio objeto que
se est creando. El lector en este punto puede simplemente recordar la sintaxis sin
pararse a analizar en detalle el motivo de su uso. La flexibilidad de JavaScript permite
incluso crear nuevos atributos para un objeto previamente creado aunque es
recomendable no hacerlo para evitar programas complejos de interpretar por una
persona.
Objetos 67

Para acceder a cada uno de los atributos de un objeto se utiliza la notacin punto que
consiste en escribir primero el nombre del objeto seguido de un punto y la propiedad
especfica. Por ejemplo, para mostrar en pantalla una alerta (ventana emergente y
modal) con el saldo de la cuenta se escribir alert (mi_cuenta.saldo);

5.2 - ARRAYS

En los lenguajes de programacin estructurados, los arrays constituan un tipo


concreto de estructuras de datos. En la actualidad, con la incorporacin del paradigma
orientado a objetos, la mayor parte de los lenguajes que siguen este paradigma
conciben los arrays como objetos.

5.2.1 -CREACIN DE UN ARRAY.

Para crear un array en Javascript se utiliza el siguiente formato:

var NombreDelArray = new Array (NumeroDeElementos)

NombreDelArray es el nombre o identificador del array y NumeroDeElementos es un


nmero que indica el nmero de elementos que contendr.

Para crear el Array Alumnos que contendr 5 elementos, escribiremos:


var Alumnos = new Array (5);

Ahora tenemos creada la estructura y las posiciones de memoria estn reservadas y


disponibles, aunque vacas, porque todava no hemos introducido en ellas ningn valor.

Cuando no conocemos previamente el nmero de elementos que va a tener un array


no se definir ningn nmero en el parmetro NumeroDeElementos. De esta forma el
Array se dimensionar automticamente al nmero de elementos que se vayan
introduciendo.

var NombreDelArray = new Array ()


68 Aula Mentor Iniciacin a Javascript

5.2.2 -ASIGNACIN DE ELEMENTOS EN UN ARRAY.

Un array es, estructuralmente hablando, un conjunto de variables del mismo tipo


identificadas por un nico nombre y diferenciadas entre s por la posicin relativa que
ocupan. Como consecuencia de ello el operador de asignacin se puede utilizar de igual
forma que se hace con variables normales. No obstante hay que sealar siempre a qu
elemento en concreto nos referimos del array. Por ejemplo, para asignar al elemento
que ocupa la posicin 3 un valor hay que poner como ndice el valor 2 (de nuevo
recuerde que los arrays se numeran comenzando por el cero): Alumnos[2] = PEPE;

Recorrido de los elementos de un Array.

Las variables numricas enteras, en combinacin con estructuras de control


repetitivas se utilizan frecuentemente para recorrer los elementos de un array. En
efecto, supongamos la siguiente estructura:
for (i = 0; i < 5; i = i + 1)
{
document.write(Alumnos[i]);
}

El bucle for se ejecutar 5 veces con la instruccin document.write. Para cada una de
estas ejecuciones la variable i tomar uno de los valores correspondientes al ndice del
Array (0, 1, 2, 3 y 4). En los arrays est disponible la propiedad length que devuelve el
nmero de elementos que tiene un array (incluyendo los elementos vacos, si hubiese).
Su formato genrico es: NombreDelArray.length

Utilizando esta propiedad podemos escribir una estructura que recorrera cualquier
array completo:
for (i = 0; i < NombreDelArray.length; i = i + 1)
{
Tratamiento_del_elemento_NombreDelArray[i]);
}

Veamos un ejemplo completo de creacin del Array, inicializacin de los elementos e


impresin de los mismos.
Objetos 69

<HTML>
<HEAD><TITLE>Manipulando Arrays</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo Arrays 1*/
var Alumnos = new Array (5);
Alumnos[0] = "MIGUEL";
Alumnos[1] = "ELENA";
Alumnos[2] = "JORGE";
Alumnos[3] = "CRISTINA";
Alumnos[4] = "IGNACIO";
for ( i = 0; i < 5; i++)
{
document.write(Alumnos[i] + "*");
}
</SCRIPT>
</BODY>
</HTML>

Ejemplo 23 Manipulando arrays

El resultado de la ejecucin de este programa ser:

MIGUEL*ELENA*JORGE*CRISTINA*IGNACIO*

Para recorrer los elementos de un array existe el bucle for in. Este bucle permite
recorrer todos los elementos del array sin necesidad de saber su nmero.
var miArr = [ 'uno', 'dos', 'tres'];
for( var elemento in miArr ){
document.write( miArr[elemento] );
}

5.2.3 -INTRODUCCIN MANUAL DEL CONTENIDO EN UN ARRAY.

Hasta el momento hemos trabajado con un array cuyos datos se introducen


directamente desde el cdigo JavaScript. Pero en ocasiones necesitaremos que sea el
usuario quien introduzca los elementos del array. A continuacin estudiaremos un
programa en el que el usuario introduce los datos que se guardan en el array de manera
secuencial (cada elemento a continuacin del anterior)
70 Aula Mentor Iniciacin a Javascript

<HTML><HEAD><TITLE>Introduccin manual de datos en un Array</TITLE></HEAD>


<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo Arrays Con valores introducidos por el usuario*/
var Alumnos = new Array (5);
for ( i = 0; i < 5; i++)
{
Alumnos[i] = prompt("Introduce nombre del alumno "+i, "");
}
for ( i = 0; i < 5; i++)
{
document.write(Alumnos[i] + "*");
}
</SCRIPT>
</BODY>
</HTML>

Ejemplo 24 Introduccin manual de datos en un array

JavaScript tambin permite crear un array e introducir los elementos


simultneamente desde el cdigo declarando el nombre y enumerando a continuacin
en una lista los elementos:
var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE","CRISTINA","IGNACIO");

El array se dimensionar implcitamente en funcin del nmero de elementos. Por su


parte, los elementos definidos as se asociarn con el ndice segn la posicin que
ocupan la lista (el primero ser el 0, el segundo el 1, y as sucesivamente).

5.2.4 -BSQUEDA EN UN ARRAY.

Una de las operaciones ms comunes a la hora de manipular informacin contenida


en arrays es realizar bsquedas. Para ello o bien se conoce la posicin que ocupa el
elemento o bien se busca el elemento por su contenido. La primera no plantea ningn
problema ya que si conocemos el ndice el acceso al elemento correspondiente es
automtico. (Por ejemplo, si buscamos el elemento 3 accedemos a l como Alumnos[2]
recuerde de nuevo el hecho de que el primer elemento ocupa el ndice cero-). La
segunda implica un recorrido del array comparando uno a uno cada elemento con el
valor que se busca hasta obtener dicho valor o llegar al final sin obtener un resultado
satisfactorio. En este caso hay que emplear algunas lneas de programa:
Objetos 71

...
Vbusca = ... // Vbusca es la variable que suponemos
// contiene el valor a buscar
Ultimo = NombreDelArray.length -1
i = 0;
while (NombreDelArray[i] != Vbusca && i < Ultimo)
{
i = i + 1;
}

La salida del bucle se produce por una de las siguientes circunstancias: ha llegado al
ltimo elemento; o bien, ha encontrado en valor buscado. Deberemos, por tanto,
comprobar si realmente ha encontrado lo que buscaba o no.

if (NombreDelArray[i] == Vbusca)
{
...Tratamiento en caso de encontrar el elemento.
}
else
{
...Tratamiento en caso de NO encontrar el elemento.
}

El siguiente ejemplo pide introducir un nombre de alumno por teclado, si el nombre


de alumno existe en la lista se visualizar el mensaje Encontrado, si no existe se
visualizar el mensaje de No encontrado
72 Aula Mentor Iniciacin a Javascript

<HEAD><TITLE>Bsqueda en un Array</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/************ Ejemplo bsqueda en Arrays**************/
var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE","CRISTINA","IGNACIO", "ALICIA");
Ultimo = Alumnos.length - 1;
Vbusca ="";
i= 0;
/************ Entrada del nombre a buscar ************/
Vbusca = prompt("Introduce el nombre del alumno en maysculas", " ");
/******************** Bsqueda ***********************/
i = 0;
while ( Alumnos[i] != Vbusca && i < Ultimo)
{
i = i + 1;
}
/************** Comprobacin y visualizacin *********/
if (Alumnos[i] == Vbusca)
{
alert("Encontrado el alumno: " + Vbusca +" con el nmero: " + i);
}
else
{
alert("No encontrado el alumno: " + Vbusca);
}
</SCRIPT>
</BODY>
</HTML>

Ejemplo 25 Bsqueda en un array

5.2.5 -PROPIEDADES DE LOS ARRAYS

Length: Devuelve la longitud del array, es decir, el nmero de elementos que puede
almacenar. Su uso es muy simple:
var vector = new Array(50);
longitud = vector.length; /* longitud valdra 50 */

prototype: Permite agregar al objeto array nuevas propiedades y mtodos. Por


ejemplo, para aadir una propiedad llamada denominacin se procedera de la
siguiente forma:
Array.protoype.denominacion = null;
dias = new Array ('lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes');
dias.denominacion = "Dias laborables";
Objetos 73

5.2.6 -MTODOS DE LOS ARRAYS

Todos los ejemplos estn extrados de http://www.w3schools.com/jsref/jsref_obj_array.asp pgina en la que adems puede consultar
muchos ms mtodos y sus ejemplos con ejecutables y cdigo disponible.

Funcin / Operacin Ejemplo Resultado


<HTML>
concat(objArray): Devuelve un array resultado de <HEAD> Cecilie,Lone,Emil,Tobias,Linus,Robin
<SCRIPT languaje="Javascript">
concatenar el objeto invocado con el objeto que se le pasa function myFunction()
como argumento. {
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
alert (children);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT languaje="Javascript">
myFunction();
</SCRIPT>
</BODY>
</HTML>
74 Aula Mentor Iniciacin a Javascript

function myFunction()
join(): Convierte los elementos de un array en una { Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
cadena separados por el carcter que se le indique. El var x=document.getElementById("demo");
var y=fruits.join();
separador por defecto es la coma. alert (y);
}

function myFunction()
reverse(): Invierte el orden de los elementos de un array { Mango,Apple,Orange,Banana
var fruits = ["Banana", "Orange", "Apple", "Mango"];
en el propio array sin crear uno nuevo. var y=fruits.reverse();
alert (y);
}
function myFunction()
slice(ini, fin): Extrae parte de un Array devolvindolo en { Orange,Lemon
var fruits = ["Banana", "Orange", "Lemon", "Apple",
un nuevo objeto array. "Mango"];
var citrus = fruits.slice(1,3);
alert (citrus);
}
function myFunction()
sort(rutord): Ordena alfabticamente los elementos de un { Apple,Banana,Mango,Orange
var fruits = ["Banana", "Orange", "Apple", "Mango"];
objeto Array. Opcionalmente admite un argumento adicional que fruits.sort();
ser una funcin para determinar el orden. La funcin tiene dos alert (fruits);
}
argumentos y devolver un valor negativo si el primer argumento es
menor que el segundo, cero si son iguales y un valor positivo si el
primer argumento es mayor que el segundo. En castellano esto es
necesario si queremos que la y vocales acentuadas figuren en su
lugar.
Objetos 75

5.3 - REFERENCIA COMPLETA DE OBJETOS

Una relacin muy completa de objetos con sus propiedades, mtodos y ejemplos
ejecutables se puede consultar en la siguiente Web:

http://www.w3schools.com/jsref/default.asp

Si visita la referencia anterior podr encontrar una clasificacin muy interesante


sobre los objetos predefinidos en Javascript. El conocimiento y dominio de los mismos
permitir disear aplicaciones muy verstiles con muy poco esfuerzo. En primer lugar
aparecen enlaces a los diferentes objetos JavaScript: Array object, Boolean object, Date
object, Math object, Number object, String object, RegExp object, as como la relacin
de propiedades y funciones globales: Global properties and functions. Con ellos se
pueden incorporar y manipular de forma sencilla datos y estructuras de datos en los
programas. A pesar de que el lector pueda entender que el abanico de opciones puede
llegar a ser complejo, la realidad demuestra todo lo contrario. La existencia de todos
estos objetos agiliza el desarrollo de aplicaciones. En Javascript con un mtodo de un
objeto se pueden hacer cosas que requeriran muchas lneas de cdigo en otros
lenguajes de programacin.

A continuacin se incluyen enlaces a los objetos del navegador: Window object,


Navigator object, Screen object, History object, Location object. Estos objetos permiten
que desde un programa Javascript se tenga control sobre los objetos del navegador y
por lo tanto permiten controlar la experiencia de navegacin. Adems hay enlaces a
los objetos DOM que permiten manipular ficheros XML en general y por tanto tambin
el propio HTML: DOM Node, DOM NodeList, DOM NamedNodeMap, DOM Document,
DOM Element, DOM Attr. Por ltimo referencias a objetos DOM HTML: Document
object, Event object, HTMLElement object, Anchor object, Area object, Base object,
Body object, Button object, Form object, Frame/IFrame object, Frameset object, Image
76 Aula Mentor Iniciacin a Javascript

object, Input Button object, Input Checkbox object, Input File object, Input Hidden
object, Input Password object, Input Radio object, Input Reset object, Input Submit
object, Input Text object, Link object, Meta object, Object object, Option object, Select
object, Style object, Table object, td / th object, tr object, Textarea object que
constituyen un control completo sobre los elementos HTML que conforman la
visualizacin de una aplicacin Web.

5.4 - LOS OBJETOS DEL NAVEGADOR

Los objetos asociados al navegador responden a una jerarqua que permite


referenciar a cada uno de los objetos. Existen dos jerarquas de objetos, una la del
objeto window formada por todos los elementos presentes en la visualizacin de un
documento HTML, y otra la del objeto navigator relacionado con las
caractersticas del navegador. La mayora de los objetos del navegador tienen una
correspondencia con las etiquetas HTML, as la etiqueta <FRAME> se corresponde con
el objeto Frame, la etiqueta <FORM> con el objeto Form, la etiqueta <A HREF= > con
el objeto Link, la etiqueta <INPUT TYPE=BUTTON> con el objeto Button, la etiqueta
<BODY> con el objeto Document, etc, etc. Slo los objetos window, history y location
no tienen una correspondencia directa con las etiquetas HTML.

Segn esta jerarqua, podemos decir por ejemplo que el objeto caja de texto text es
un objeto que est dentro del objeto form que a su vez est dentro del objeto
document y que este est dentro del objeto window. Para hacer referencia a la caja de
texto, tendremos que escribir: window.document.form.text. En la mayora de los
casos podemos ignorar la referencia a la ventana actual (window), pero ser necesaria
cuando estemos utilizando mltiples ventanas, o cuando usemos frames (actualmente
en desuso).

El uso de arrays como elementos dentro de la estructura jerrquica dentro del


modelo de objetos de JavaScript es muy importante. Proporcionan una manera
alternativa para referenciar a los elementos. As se puede referenciar a un objeto por
su posicin dentro del array que lo contiene. Los siguientes arrays son los ms
utilizados para referenciar los componentes de un documento:
Objetos 77

- Frames[posicin]: contiene los diferentes marcos del documento.


- Links[posicin]: contiene los diferentes enlaces externos de un documento.
- Images[posicin]: contiene las diferentes imgenes de un documento.
- Forms[posicin]: contiene los diferentes formularios de un documento.
- Elements[posicin]: contiene los diferentes elementos de un formulario.
- options[posicin]: contiene las diferentes opciones de un objeto select.

En el siguiente ejemplo se muestran los nombres de algunos de los objetos del


documento HTML utilizando la notacin de array. La funcin objetos() se encarga de
visualizar los nombres de los objetos, la funcin ver(dato) se encarga de visualizar el
dato en pantalla y al pulsar en el botn del formulario se visualiza el contenido del
texto escrito en la caja de texto, esta misin la realiza la funcin vertexto(). Observe
que para obtener el nombre de un objeto se utiliza la palabra name. Por ejemplo con
la sentencia document.images[0].name se obtiene el nombre de la primera imagen del
documento HTML.

Objeto window: representa la ventana del navegador o cualquiera de sus marcos, es el


de mayor jerarqua. Por cada etiqueta BODY o FRAMESET se genera un objeto window.

Objeto document: es el que tiene el contenido de toda la pgina que se est


visualizando. Esto incluye el texto, imgenes, enlaces, formularios. Gracias a este
objeto vamos a poder aadir dinmicamente contenido a la pgina, o hacer cambios,
segn nos convenga.

Objeto form: contiene los elementos necesarios para generar formularios. Los
formularios se agrupan en un array dentro de document. Cada elemento de este array
es un objeto de tipo form.

Objeto frame: un objeto frame se comporta igual que un objeto window y contiene
sus mismas propiedades y mtodos. No obstante este mecanismo est en desuso por
cuestiones de accesibilidad.
78 Aula Mentor Iniciacin a Javascript

Objeto history: contiene la informacin de las URL que el usuario ha visitado desde esa
ventana.

Objeto location: contiene informacin sobre la URL actual.

<html>
<head>
<title>Identificando objetos</title>
<SCRIPT LANGUAGE="JavaScript">
function ver(dato)
{ document.write(dato); }
function objetos()
{
ver("<BR><CENTER>");
ver("Nombre de la primera imagen:"+document.images[0].name+ "<BR>"); ver("Nombre de la
segunda imagen:"+document.images[1].name+ "<BR>"); ver("Nmero de
imgenes:"+document.images.length+ "<BR>"); ver("Nombre del segundo
vnculo:"+document.links[1].name+ "<BR>");
ver("Nmero de elementos del formulario:"+document.forms[0].elements.length+ "<BR>");
}
function vertexto()
{ ver("Contenido del texto:"+document.forms[0][0].value+ "<BR>"); }
</SCRIPT>
</head>
<body>
<p align="center">
<img border="0"
src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ_FVeoXTQd7fc2fqxrLGWD9COxnH2fl9iajoMNy
bMP2b2ghEv2yA" width="21" height="21" NAME ="ALFI1">Alfi1&nbsp;
<a href="http://www.mec.es" NAME ="MEC"> --MEC-- </a>
<img border="0"
src="http://t2.gstatic.com/images?q=tbn:ANd9GcTyDjBaGR_IhifCmYMdAI5dSYPTgBkH4V4Sbxzxp
pKzEPWUX1Pn" width="21" height="21" NAME ="ALFI3">Alfi3
</p>
<p align="center">
<a href="http://www.aulamentor.es/" NAME ="EJEMPLO">Aula Mentor</a>&nbsp;&nbsp;
<img border="0"
src="http://t0.gstatic.com/images?q=tbn:ANd9GcRteJuAuPRYGBbRALYjlxVwcY_TtG2qWDesqsjP5
BLf1iWyVlIObQ" width="21" height="21" NAME ="ALFI2"> Alfi2&nbsp;
<center>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFF99">
<tr><td>
<p align="center"><b>FORMULARIO</b><p>
<form NAME ="FORMULARIO">
TEXTO<input type="text" name="TEXTO" size="20">
<input type="submit" value="Ver texto" name="BOTON" onclick="vertexto()">
</form>
</td></tr></table></center>
<SCRIPT LANGUAGE="JavaScript">
objetos();
</script>
</body>
</html>

Ejemplo 26 Identificacin de objetos


Objetos 79

5.5 - LOS OBJETOS PREDEFINIDOS.

Estos objetos estn relacionados con el propio lenguaje y nos permitirn manejar
nuevas estructuras de datos y utilidades. Algunos ya se han utilizado anteriormente
como el objeto Array, Date, Function, etc. El siguiente ejemplo muestra el uso de los
objetos Array, String y Math con algunos de sus mtodos: cad es un objeto String,
nombres un objeto Array y a numero le aplicamos algunos mtodos del objeto Math:

<HTML>
<HEAD>
Objeto Array:predefinidos</TITLE>
<TITLE>Objetos nos permite gestionar matrices, vectores o arrays.
<SCRIPT LANGUAGE="JavaScript">
function probando() {
Objeto Boolean: nos permite crear objetos lgicos que representan el valor
var cad = "Objetos predefinidos";
var nombres=new
verdadero Array("Juan","Ana","Julio","Maria","Alicia");
(true) o falso (false).
var numero=36;

Objeto Number: nos permite


document.write("Longitud trabajar
de la cadena: con datos numricos.
"+cad.length+"<BR>");
document.write("Mayscula: "+cad.toUpperCase()+"<BR>");
document.write("De color rojo: "+cad.fontcolor("#FF0000")+"<P>");
Objeto String: nos permite trabajar con cadenas de caracteres.
document.write("Antes de ordenar el array: " +nombres.join(', ')+"<BR>");
document.write("Nombres ordenados: "+nombres.sort()+"<BR>");
Objeto Function: ya hemos
document.write("Ordenados utilizado
en orden este
inverso: objeto para crear nuevas funciones.
" +nombres.sort().reverse()+"<P>");

document.write("Raiz cuadrada
Objeto Math: permite de 36:con
trabajar " +Math.sqrt(numero)+"<BR>");
las funciones matemticas ms usadas.
document.write("36 elevedo a 5: " + Math.pow(numero,5)+"<BR>");
}
</SCRIPT>
Objeto Object: proporciona funcionalidades comunes a todos los objetos
</HEAD>
<BODY>
JavaScript.
<SCRIPT LANGUAGE="JavaScript">
probando();
</SCRIPT>
Objeto Date: contiene los objetos necesarios para trabajar con los valores de
</BODY> fecha
</HTML>
y hora. Ya vimos en la unidad anterior como se usaban.

Ejemplo 27 Objetos predefinidos


80 Aula Mentor Iniciacin a Javascript

5.6 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL NAVEGADOR.

5.6.1 -EL OBJETO WINDOW.

En el objeto ventana es donde acontecen todas las operaciones del


documento. Las propiedades y mtodos se resumen en la siguiente tabla, incluiremos
tambin los manejadores de eventos aunque en la siguiente unidad se hablar ms de
ellos.

Propiedades Mtodos Manejadores de


eventos
closed, default, Status, alert(mensaje), open(), onLoad, onUnload
frames, history, length, close(), confirm(mensaje),
location, name, parent, prompt(), moveBy(x,y),
opener, self, status, top. moveTo(x,y), print(),
setTimeout(), resizeBy(x,y),
resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y), clearInterval() ,
setInterval(), clearTimeout() ,
setTimeout()

Para crear una ventana: nuevaventana = window.open(). Para acceder a las


propiedades o mtodos: window.propiedad window.mtodo() self.propiedad,
self.mtodo()

5.6.2 -PROPIEDADES DEL OBJETO WINDOW

closed: Vlida a partir de JavaScript 1.1 (a partir de Netscape 3 e Internet Explorer 4).
Es un valor booleano que nos dice si la ventana est cerrada (closed = true) o no
(closed = false).

defaultStatus: Contiene el texto por defecto que aparece en la barra de estado


del navegador.
Objetos 81

frames: Es un array que representa a los objetos frame contenidos en la ventana


(frames[0], frames[1], ...). El orden de aparicin (frame[0],...) es el orden en que se
definen en el documento HTML.

history: Se trata de un array que representa las URLS visitadas por la ventana (estn
almacenadas en el historial).

length: Nmero de frames que contiene la ventana actual.

location: Cadena con la URL de la barra de direccin.

name: Nombre de la ventana, o del frame actual.

opener: Es una referencia al objeto window que abri la ventana si la ventana fue
abierta usando el mtodo open().

parent: Referencia al objeto window que contiene el frameset (padre de esta


ventana).

self: Es un nombre alternativo de la ventana actual.

status: Cadena con el mensaje que tiene la barra de estado.

top: Nombre alternativo del objeto window padre de esta ventana.

<SCRIPT LANGUAGE="JavaScript">
window.name="ventanita";
window.status="Esto es un ejemplito";
document.write("Est la Ventana cerrada? "+window.closed+"<br>");
document.write("Nombre de ventana: "+window.name+"<br>");
document.write("Mensaje de la barra de estado: "+window.status+"<br>");
document.write("Valor de self: "+window.self.name+"<br>");
document.write("Valor de top: "+window.top.name+"<br>");
document.write("Valor de location: "+window.location+"<br>");
</SCRIPT>

Ejemplo: Crear una ventana dinmicamente segn los datos establecidos por el
usuario a travs de un formulario.
82 Aula Mentor Iniciacin a Javascript

open(URL,nombre,caractersticas): Abre la URL que le pasemos como primer


parmetro en la ventana cuyo nombre se indica en el segundo parmetro 'nombre'. Si
esta ventana no existe, abrir una nueva ventana con las caractersticas indicadas en
el tercer parmetro.

Toolbar yes,no,1,0 Tendr (yes,1) o no (no,0) barra de herramientas.


location yes,no,1,0 Tendr campo de localizacin o no.
directories yes,no,1,0 Tendr botones de direccin o no.
status yes,no,1,0 Tendr barra de estado o no.
menubar yes,no,1,0 Tendr barra de mens o no.
scrollbars yes,no,1,0 Tendr barras de desplazamiento o no.
resizable yes,no,1,0 Podr ser cambiada de tamao (con el ratn) o
width N de pixels no. Devuelve el ancho de la ventana en pixels
height N de pixels Devuelve el alto de la ventana en pixels.
left N de pixels Devuelve la distancia en pixels desde el lado
izquierdo de la pantalla a la que se debe colocar
la ventana.
top N de pixels Devuelve la distancia en pixels desde el lado
superior de la pantalla a la que se debe colocar la
ventana

El mtodo close() cierra la ventana actual. La funcin CrearVentana() crea la ventana y


la funcin CerrarVentana() cierra las dos ventanas, la ventana actual y la ventana
creada. Las sentencia siguiente: if(ventana && !ventana.closed) ventana.close();
comprueba si la ventana creada existe y adems que no est cerrada, si se cumplen las
condiciones se cierra dicha ventana. Para obtener el valor de un objeto utilizamos la
palabra value. Por ejemplo con la sentencia document.FORMULARIO[0].value
obtenemos el valor introducido en el primer elemento del formulario cuyo nombre
es FORMULARIO.
Objetos 83

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo - VENTANAS</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var ventana;

function CrearVentana() {
var opciones="left=100,top=100,";

opciones=opciones + "width=" + document.FORMULARIO[0].value +",";


opciones=opciones + "height=" + document.FORMULARIO[1].value ;

ventana = window.open("","",opciones); //crea la ventana


ventana.document.write("ESTA ES LA VENTANA QUE SE HA CREADO");
}

function CerrarVentana() {
if(ventana && !ventana.closed)
ventana.close(); //cierra la ventana creada
window.close();//cierra la ventana actual
}
</SCRIPT>
</HEAD>
<BODY>
<p align="center"><b>INTRODUCE EL ANCHO Y ALTO DE LA VENTANA:</b></p>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFF66">
<form name="FORMULARIO" >
<p><b>ANCHO VENTANA:</b><input type="text" name="ANCHO" size="10"></p>
<p><b>ALTO VENTANA:</b> <input type="text" name="ALTO" size="10"></p>
<input type="button" value="Crear Ventana" name="B1" onclick="CrearVentana()">
<input type="button" value="Cerrar Ventana" name="B2" onclick="CerrarVentana()">
</form>
</td>
</tr>
</table>
</center>
</FORM>
</BODY>
</HTML>

Ejemplo 28 Manipulacin de objeto ventana


84 Aula Mentor Iniciacin a Javascript

Ejemplo: Supongamos que se definen tres botones en un formulario, dos de los


botones llaman a otro documento HTML que se abre en una ventana diferente y el
tercer botn cierra la ventana actual. El cdigo del formulario es el siguiente:

<form name="FORMULARIO" >


<input type="button" value="Ejemplo 5" name="B1" onclick="llamada(0)">
<input type="button" value="Ejemplo 4" name="B2" onclick="llamada(1)">
<input type="button" value="Cerrar Ventana" name="B2" onclick="CerrarVentana()">
</form>

La funcin llamada() se encargar de cargar los documentos HTML en otra


ventana. Esta funcin recibe un nmero indicando el documento a cargar (si es 0 se
carga un documento y si es 1 se carga otro), sus nombres estn cargados en un array
llamado paginas. El mtodo window.open() crea la ventana donde se cargarn los
documentos HTML. Para cargar la pgina en la ventana creada escribimos la siguiente
sentencia: nuevo.location.href = paginas[p]; donde href es una propiedad del objeto
location, nuevo es la nueva ventana creada, la sentencia hace que se carge en la nueva
ventana la URL contenida en el array paginas[p].

Todos los objetos window y frame tienen asociado un objeto location. Este objeto
permite modificar la URL de la pgina para cambiar a una nueva URL. El cdigo de la
funcin llamada() es el siguiente:

function llamada(p)
{
var nuevo=null;
var paginas=new Array("Ejemplo5_5.htm","Ejemplo5_4.htm");
nuevo = window.open('', 'VE','width=400,height=390,top=50,left=100');
nuevo.location.href = paginas[p];
}

Se crear una nica ventana de nombre VE, donde se visualizarn los


documentos HTML.
Objetos 85

5.6.3 -MTODOS PARA MOVER Y REDIMENSIONAR VENTANAS

resizeBy(x,y): Aumenta/disminuye el tamao actual de la ventana en el nmero de


pixeles indicados en x e y.

resizeTo(ancho,alto): Ajusta el tamao de la ventana a los valores indicados por la


ventana.

moveBy(x,y): Mueve la ventana actual el nmero de pixels especificados por (x,y).

moveTo(x,y): Mueve la ventana actual a las coordenadas (x,y).

scroll(x,y): Hace que en la esquina superior izquierda aparezca la ventana a partir


de las coordenadas indicadas por x e y.

scrollBy(x,y): Desplaza la ventana actual el nmero de pixels especificado por (x,y).

scrollTo(x,y): Desplaza la ventana actual a las coordenadas especificadas por (x,y).

Ejemplo: Este ejemplo mueve la ventana actual (moveTo) o la redimensiona


(resizeTo) segn los datos introducidos en los campos del formulario.

function llamada(p)
{
var nuevo=null;
var paginas=new Array("Ejemplo5_5.htm","Ejemplo5_4.htm");
nuevo = window.open('', 'VE', 'width=400,height=390,top=50,left=100');
nuevo.location.href = paginas[p];
}
86 Aula Mentor Iniciacin a Javascript

El cdigo del formulario es:

<form name="FORMULARIO" >


<p><b>Coordenada X:</b><input type="text" name="X" size="10"></p>
<p><b>Coordenada Y:</b> <input type="text" name="Y" size="10"></p>
<input type="button" value="Mover ventana" name="B1"
onclick="MoverVentana()">
<input type="button" value="Redimensionar" name="B2"
onclick="Redimensionar()">
</form>

El cdigo de las funciones es:

<SCRIPT LANGUAGE="JavaScript">
var x,y;
function MoverVentana() {
x= document.FORMULARIO[0].value ;
y = document.FORMULARIO[0].value;
window.moveTo(x,y);
}
function Redimensionar() {
x= document.FORMULARIO[0].value ;
y = document.FORMULARIO[0].value;
window.resizeTo(x,y) ;
}
</SCRIPT>

5.6.4 -OTROS MTODOS

alert(mensaje): Muestra el mensaje 'mensaje' en un cuadro de dilogo.

blur(): Elimina el foco de la ventana y dispara el evento onBlur.

clearInterval(id): Cancela el intervalo el intervalo de tiempo referenciado por 'id',


establecido por el mtodo setInterval().

clearTimeout(nombre): Cancela el intervalo el intervalo de tiempo referenciado


por 'nombre', establecido por el mtodo setTimeout().

confirm(mensaje): Muestra el mensaje en un cuadro de dilogo y dos botones,


uno de Aceptar y otro de Cancelar. Devuelve true si se pulsa aceptar y devuelve false si
se pulsa cancelar.
Objetos 87

focus(): Captura el foco del ratn sobre y dispara el evento onFocus.

prompt(mensaje,respuesta): Muestra el mensaje en un cuadro de dilogo que


contiene una caja de texto con dos botones (Aceptar y Cancelar) en la cual podremos
escribir una respuesta a lo que nos pregunte el 'mensaje'. El parmetro 'respuesta' es
opcional, e inicialmente aparece en el campo de texto. Devuelve una cadena de
caracteres con la respuesta introducida.

setInterval(expresion,tiempo): Evala la expresin cada vez que transcurren los


milisegundos indicados en el segundo parmetro. Devuelve un valor que puede
ser usado como identificativo por clearInterval().

setTimeout(expresion,tiempo): Evala la expresin despus de que hayan


pasado el nmero de milisegundos especificados en tiempo. Devuelve un valor que
puede ser usado como identificativo por clearTimeout().

Ejemplo: Este ejemplo crea una barra de texto movible en la ventana del
navegador. En este ejemplo se utilizan mtodos del objeto String que trabaja con
cadenas de caracteres, substring que obtiene parte de una cadena y length que
obtiene la longitud de una cadena. Se vern ms adelante. Se ha utilizado el evento
onLoad= que se dispara inmediatamente despus de que todos los objetos del
documento se han transferido al navegador.
88 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD>
<TITLE>Scroller en la barra de texto</TITLE>
<SCRIPT LANGUAGE="JavaScript" >
Texto = "Bienvenidos a mi pgina Web.....";
i = 0;
//Creamos el formulario
document.write ('<FORM NAME="form1">');
document.write ('<CENTER><INPUT NAME="text" VALUE= "''"></CENTER>');
document.write ('</FORM>');
//Escribimos la cadena
function MensajeScroll() {
cadena=Texto.substring(i,Texto.length) + Texto.substring(0,i-1);
if (i < Texto.length) i++; else i = 0;
document.form1.text.value=cadena

setTimeout("MensajeScroll()",50);
}
</SCRIPT>
</HEAD>
<BODY onLoad="MensajeScroll()">
</script>
</BODY>
</HTML>

Ejemplo 29 Scroller en la barra de desplazamiento

Ejemplo: Vamos a aadir al ejemplo anterior un botn de forma que al hacer clic en
l se imprima el contenido del documento que est visible en la ventana. Aadimos la
funcin Imprimir con el mtodo print():

function Imprimir()
{
window.print();
}

Y el cdigo asociado al botn:

document.write ('<input type="button" value="Imprimir" name="imprimir"


onClick="Imprimir()">')
Objetos 89

Ejemplo: Seguimos con el ejemplo anterior, ahora antes de imprimir nos ha de


aparecer un cuadro de dilogo pidindonos confirmacin para imprimir. Usaremos el
mtodo confirm(). Ahora la funcin Imprimir() nos quedara:

function Imprimir() {
if (confirm("Tiene encendida la impresora?"))
window.print();
}

Si el usuario pulsa el botn Aceptar, confirm() devuelve true y se ejecuta la


sentencia para imprimir.

Ejemplo: El siguiente ejemplo define varios hipervnculos de forma que al pasar el


puntero del ratn por cada hipervnculo se visualiza un mensaje en la etiqueta, al
abandonarlo se dejar la etiqueta en blanco. El cdigo para los hipervnculos es:

<form id="form1">
<p><b>Para visitar el Ejemplo 23 haz clic
<a href="Ejemplo23.htm" onMouseover="label1.value='Confirmacin para
imprimir';return true;" onMouseout="label1.value='';return true;">aqu</a>
, Para ver el ejemplo 24 haz clic
<a href="Ejemplo 24.htm" onMouseover="label1.value='Scroller e impresin';return true;"
onMouseout="label1.value='';return true;">aqu </a><br>
<label for="label1">Mensaje:</label>
<input type="text" id="label1" name="fnombre" size="40" />
</b></p>

El evento onMouseover se dispara cuando el usuario pasa el puntero del ratn por
el hipervnculo, onMouseout se dispara al salir del hipervnculo. Si la sentencia
return true no aparece, el mensaje no se visualiza en la lnea de estado.

Ejemplo: El siguiente ejemplo crea una ventana hija donde se carga el documento.
En este documento aparecern una serie de hipervnculos a ejemplos anteriores.
Al hacer clic en estos hipervnculos se cargarn en la ventana padre inicial.
90 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo - Crea una ventana Hija</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" >
ventanahija = window.open("Ejemplo 31.html", "miventana", "width=175,height=175")
</SCRIPT>
</HEAD>
<BODY >
<CENTER>
<B><P>ESTA PGINA CREA UNA VENTANA CON UN INDICE A DIVERSOS EJEMPLOS</P></B>
<P>LOS EJEMPLOS SE CARGARN EN ESTA VENTANA</P>
</CENTER>
</BODY>
</HTML>

Ejemplo 30 Ventanas hijas

<HTML>
<HEAD>
<TITLE>OBJETOS - Ventana hija del Ejemplo anterior</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" >
function ColocarUrl(direccion) {
opener.document.location = direccion;
}
</SCRIPT>
</HEAD>
<BODY >
<CENTER>
<p><b>HAZ CLIC EN UN EJEMPLO</p></b>
<A HREF="javascript:ColocarUrl('Ejemplo_23.htm')">Ejemplo 23</A><BR>
<A HREF="javascript:ColocarUrl('Ejemplo_24.htm')">Ejemplo 24</A><BR>
<A HREF="javascript:ColocarUrl('Ejemplo_25.htm')">Ejemplo 25</A><BR>
</CENTER>
</BODY>
</HTML>

Ejemplo 31 Ventana hija del ejemplo anterior

opener contiene la referencia a la ventana que abri sta, es el documento padre,


con la sentencia opener.document.location=direccion se cargar en dicha ventana el
documento indicado en direccin, tambin se podra haber puesto
opener.window.location.
Objetos 91

5.6.5 -EL OBJETO LOCATION

Representa la informacin de la URL de cualquier ventana que est actualmente


abierta. Ya hemos visto en ejemplos anteriores cmo puede obtenerse la URL de
un documento; y de un documento contenido en frames. Las propiedades y mtodos
se resumen en esta tabla:
Propiedades Mtodos Manejadores de
eventos
Hash, host, hostname, reload(), ninguno
href, pathname, replace(cadenaURL)
port, protocol, search

Para asignar a la ventana actual una nueva direccin: [window].location=URL


Para acceder a las propiedades o mtodos: [window.]location.propiedad
[window.]location.mtodo() [window] es opcional. Supongamos que tenemos la
siguiente direccin: http://www.servidor.com:80/camino/servicios.htm#primero
veamos cuales son las propiedades para la misma:

5.6.6 -PROPIEDADES DEL OBJETO LOCATION

hash: Cadena que contiene el nombre del enlace, dentro de la URL. #primero.

host: Contiene el nombre del servidor y el nmero del puerto.:


www.servidor.com:80

hostname: Contiene el nombre de dominio del servidor (o la direccin IP):Error!


Referencia de hipervnculo no vlida.

href: Contiene la URL completa:

http://www.servidor.com:80/camino/servicios.htm#primero

pathname: Contiene el camino al recurso: /camino/servicios.htm

port: Cadena que contiene el nmero de puerto del servidor: 80


92 Aula Mentor Iniciacin a Javascript

protocol: Contiene el protocolo utilizado (incluyendo los dos puntos): :80

search: Mantiene la parte de URL que contiene la informacin que se pasa en una
llamada a un script CGI.

5.6.7 -MTODOS DEL OBJETO LOCATION

reload(): Vuelve a cargar el documento cuya URL se mantiene en la propiedad href.

replace(cadenaURL): Carga el documento cuya URL se pasa como parmetro y hace


que el historial actual slo contenga esa direccin, no se podr volver a la pgina
anterior usando el botn Atrs del navegador.

Ejemplo: Veamos un ejemplo de uso de estas propiedades.

<SCRIPT LANGUAGE="JAVASCRIPT" >


function localizar(){
document.write("HREF: " + location.href +"<br>"); document.write("HOST: " +
location.host +"<br>"); document.write("HOSTNAME: " + location.hostname +"<br>");
document.write("PATHNAME: " + location.pathname +"<br>");
document.write("PORT: " + location.port +"<br>");
document.write("PROTOCOL: " + location.protocol +"<br>");
}
</SCRIPT>

Ejemplo: el siguiente ejemplo utiliza el mtodo replace(), al hacer clic en el botn se


carga un documento, y no se puede volver a la pgina anterior usando el botn Atrs
del navegador:

<HTML>
<HEAD>
<TITLE>Objeto Location</TITLE>
</HEAD>
<BODY >
<form >
<p><input type="button" value="Uso de replace"
onclick="location.replace('Ejemplo_23.html')"></p>
</form>
</BODY>
</HTML>

Ejemplo 32 Objeto Location


Objetos 93

5.7 - EL OBJETO HISTORY.

Cuando navegamos por la red, el explorador guarda una lista de las ltimas URL
donde se ha estado. Este objeto se encarga de representar esta lista. Se utiliza, sobre
todo, para movernos hacia delante o hacia atrs en dicha lista. Las propiedades y
mtodos se resumen en este cuadro:
Propiedades Mtodos Manejadores de
eventos
length back() forward() go(url) ninguno

Para acceder a las propiedades o mtodos: [window.]history.propiedad


[window.]history.mtodo() [window] es opcional

5.7.1 -PROPIEDADES DEL OBJETO HISTORY

Length: Contiene el nmero de entradas de la lista del historial.

5.7.2 -MTODOS DEL OBJETO HISTORY

back(): Carga la URL de la entrada anterior del historial.

forward(): Carga la URL de la entrada siguiente.

go(url): Carga la URL del documento especificado por url del historial. La url
puede ser un entero, en cuyo caso indica la posicin relativa del documento dentro del
historial (si es mayor que 0 va hacia delante, si es menor que 0 hacia detrs y si es 0
vuelve a cargar la ventana); o puede ser una cadena de caracteres, en cuyo caso hace
referencia a toda o parte de una URL que est en el historial.

Ejemplo: el siguiente cdigo define dos botones para ir a la pgina anterior y a la


siguiente :
94 Aula Mentor Iniciacin a Javascript

<form >
<p><input type="button" value="Atras"
onclick="history.back()"></p>
<p><input type="button" value="Siguiente"
onclick="history.forward()"></p>
</form>

5.8 - EL OBJETO NAVIGATOR.

Este objeto no mantiene una relacin directa con el resto de objetos del modelo de
JavaScript, simplemente nos da informacin relativa al navegador que se est
utilizando para visualizar los documentos. Las propiedades y mtodos se resumen en
esta tabla.
Propiedades Mtodos Manejadores de
eventos
appCodeName javaEnabled() ninguno
appName
appVersion
language
mimeTypes
platform
plugins
userAgent

Para acceder a las propiedades o mtodos: navigator.propiedad


navigator.mtodo()

5.8.1 -PROPIEDADES DEL OBJETO NAVIGATOR

appCodeName: Cadena que contiene el nombre del cdigo del navegador del
cliente.

appName: Contiene el nombre del navegador del cliente.

appVersion: Contiene la versin del navegador con el formato


numerodeversin(plataforma;pas)
Objetos 95

language: Contiene informacin sobre el idioma de la versin del navegador.

mimeTypes: Array que contiene todos los tipos MIME soportados por el navegador
del cliente.

Platform: Contiene el tipo de mquina en la que se compil el navegador.

Plugins: Array que contiene todos los plug-ins soportados por el cliente.

userAgent: Contiene la cabecera del agente que se enva del cliente al servidor con
el protocolo HTTP. Contiene la informacin de las propiedades appCodeName y
appVersion.

5.8.2 -MTODOS DEL OBJETO NAVIGATOR

javaEnabled(): Devuelve 'true' si el cliente permite la utilizacin de Java, en caso


contrario, devuelve 'false'.

Ejemplo: El siguiente cdigo javascript muestra las propiedades del objeto


navigator.

<SCRIPT LANGUAJE="JavaScript">
var i,navi;
var navi=eval("navigator");
//eval evala el parmetro y devuelve el
// objeto asociado a la cadena
for (i in navi)
{
document.write("navigator. <b>" +i + "</b>=> <i>" + navi[i]+ "</i><br>")
}
</SCRIPT>

5.9 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL DOCUMENTO.

Fijmonos en el grfico que muestra la jerarqua de objetos de JavaScript en el


epgrafe 5.2.2, vemos que el objeto document abarca gran parte del modelo de
96 Aula Mentor Iniciacin a Javascript

objetos. La mayor parte de comunicacin entre el script y el usuario se realiza a travs


de este objeto y sus elementos, por ello es necesario comprender el campo de accin
de dicho objeto.

5.9.1 -EL OBJETO DOCUMENT.

El objeto window y el objeto frame tienen asociado un objeto document que es el


que realmente contiene el resto de los objetos como son: texto, imgenes, enlaces,
formularios, etc que se muestran en el navegador. En la siguiente tabla se muestran
las propiedades y mtodos ms significativos
Propiedades Mtodos Manejadores de
eventos
alinkColor, anchors, clear()
open()
applets, bgColor, close()
cookie, write()
writeln()
fgColor , forms
images,
lastModified
linkColor, links
location , referrer
title ,vlinkColor

Para acceder a las propiedades y mtodos del documento:


[window.]document.propiedad [window.]document.mtodo() [window] es opcional

5.9.2 -PROPIEDADES DEL OBJETO DOCUMENT:

alinkColor: Almacena el color de los enlaces activos.

Anchors: Array que contiene una entrada por cada enlace interno (etiqueta <A> con
el atributo NAME) existente en el documento.

Applets: Array con los applets existentes en el documento.

bgColor: Almacena el color de fondo del documento.


Objetos 97

Cookie: Cadena que contiene el valor de una cookie.

fgColor: Almacena el color del primer plano.

Forms: Array que contiene una entrada por cada formulario definido en el
documento.

Images: Array con todas las imgenes del documento.

lastModified: Cadena con la fecha de la ltima modificacin del documento.

linkColor: Color de los enlaces del documento.

Links: Array que contiene una entrada por cada enlace externo existente en el
documento (etiquetas <AREA REF.= ...> y <A REF.= >).

Location: Cadena con la URL del documento actual.

Referrer: Cadena con la URL del documento que llam al actual, en caso de usar un
enlace.

Title: Ttulo del documento actual.

vlinkColor: Almacena el color de los enlaces visitados

5.9.3 -MTODOS DEL OBJETO DOCUMENT:

open(mime,"replace"): Abre la escritura sobre el documento. mime es el tipo


de documento soportado por el navegador. Si se indica "replace", se reutiliza el
documento anterior (no crea una nueva entrada en el historial).

close(): Cierra la escritura sobre el documento actual y fuerza la visualizacin de su


contenido.

write(): Escribe texto en el documento.

writeln(): Escribe texto en el documento y lo finaliza con un salto de lnea.


98 Aula Mentor Iniciacin a Javascript

Ejemplo: El siguiente ejemplo muestra las caractersticas del documento:


nmero de enlaces, de formularios, de imgenes, color de fondo, fecha ltima
modificacin, etc. En l se definen tres enlaces, uno a otro documento HTML y
los otros dos a un ancla o enlace dentro del documento, dos imgenes y dos
formularios.

<hr>
<A NAME="caracteristicas"></A>
<b><center>CARACTERISTICAS DEL DOCUMENTO</b><br>
<SCRIPT LANGUAJE="JavaScript">
document.write("Nmero de imgenes: "+ document.images.length+" <br>");
document.write("Nmero de enlaces externos: "+ document.links.length +" <br>");
document.write("Nmero de enlaces internos: "+ document.anchors.length+" <br>");
document.write("Nombre enlaces internos: "+ document.anchors[0].name +" , "
+ document.anchors[1].name + " <br>"); document.write("Nmero de formularios: "+
document.forms.length+" <br>"); document.write("Color de fondo: "+
document.bgColor+" <br>");
document.write("Color de los enlaces: "+ document.linkColor+" <br>");
document.write("Color de los enlaces activos: "+ document.alinkColor+" <br>");
document.write("Fecha ltima modificacin: "+ document.lastModified+" <br>");
</SCRIPT>
</center>

Ejemplo: El siguiente ejemplo crear un documento HTML segn unas


caractersticas definidas de colores, al pulsar un botn se eligen unos colores, al pulsar
otro botn se eligen otros colores; este nuevo documento se crear en un script. Se
utilizar un array de dos elementos coloresdocu que contiene los textos que se
visualizarn en el rea definida en el formulario, informando sobre los colores con los
que se crear y visualizar el nuevo documento. La funcin mostrar() visualiza en
esta rea el contenido del array, dependiendo del botn pulsado. La funcin
pintapagina() crea el documento HTML, con las especificaciones de colores segn
hayamos pulsado un botn u otro. Invoca a la funcin Colores() o SinColores(). Las
funciones Colores() y SinColores() devuelven una cadena que contiene los colores
de fondo, de texto, de link y de link visitados.
Objetos 99

<html>
<head>
<title>Objeto Document</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
coloresdocu = new Array ();
//array con los textos que se visualizan en el area
coloresdocu[0] = "Fondo: Blanco , Color Texto: Negro, Link: Azul , Link visitados: Rojo";
coloresdocu[1] = "Fondo: Amarillo, Color Texto: Azul , Link: Rojo , Link visitados: Rosa";

var ventana=window.open("","","height=150, width=300") //ventana que se abre

function pintapagina(x){ //esta funcin escribe el texto del nuevo docum.


var texto="";
texto ="<HTML><HEAD><TITLE>PAGINA QUE CAMBIA DE COLORES</TITLE></HEAD><BODY ";
if (x==1)
texto=texto + Colores();
else
texto=texto + SinColores();
texto=texto + "> <p>ESTA ES MI PAGINA WEB </p>";
texto=texto + "<p><a href='Ejemplo_23.html'> Visita otro ejemplo</a></p>"
texto=texto + "</BODY> </HTML>"

ventana.document.open(); //abre la escritura sobre el documento


ventana.document.write(texto);//escribe en el documento
ventana.document.focus(); // muestra la ventana pequea en primer plano
ventana.document.close(); //cierra la escritura del documento
}

function SinColores(){ //devuelve las carac. Para el doc sin colores


return "BGCOLOR='#ffffff' VLINK='#ff0000' LINK='#0000ff' TEXT='#000000'";
}

function Colores(){ //devuelve las carac. Para el doc con colores


return "BGCOLOR='#ffff00' VLINK='#ff00ff' LINK='#ff0000' TEXT='#0000ff'";
}

function mostrar(i) { //muestra el texto en el area


document.FORMULARIO.area.value = coloresdocu[i]
}
</SCRIPT></head>
<body><p align="center"><b>CREA UN NUEVO DOCUMENTO HTML</b></p>
<center> <table border="0" cellpadding="0" cellspacing="0" height="108">
<tr> <td height="87" align="center">
<form name="FORMULARIO" >
<input type="button" value="Documento con colores" name="B1"
onclick="mostrar(1);pintapagina(1);">
<input type="button" value="Valores por defecto" name="B2"
onclick="mostrar(0);pintapagina(0);"><br>
<textarea rows="4" name="area" cols="20" READONLY WRAP> Haz clic en uno de los
botones</textarea>
</form>
</td></tr></table></center>
</body></html>
100 Aula Mentor Iniciacin a Javascript

Ejemplo 33 Objeto Document

5.10 - LOS OBJETOS LINK Y ANCHOR.

Si el documento contiene algn hiperenlace local o externo, el objeto


document tendr asociados distintos objetos link y anchor. El objeto link engloba todas
las propiedades que tienen los enlaces externos al documento actual y el objeto
anchor todas las propiedades que tienen los enlaces locales al documento actual. Las
propiedades del objeto link se resumen en la siguiente tabla:
Propiedades Mtodos Manejadores de
eventos

links[indice].target ninguno onClick

length onMouseOver

propiedades del objeto

location

Para acceder a las propiedades: [window.]document.links[ndice].propiedad

5.10.1 - PROPIEDADES:

Target: Es una cadena que contiene el nombre de la ventana o del frame


especificado en el parmetro TARGET. Para hacer referencia a cada uno de estos
objetos y poder obtener el valor de sus propiedades usamos la expresin:
document.links[i].propiedad Donde i es el enlace que se est explorando (0 es el
primer enlace del documento, 1 el segundo, ...).

Length: Para obtener el nmero de enlaces externos: document.links.length Para


obtener el nmero de enlaces internos: document.anchors.length
Objetos 101

5.11 - EL OBJETO IMAGE.

Este objeto nos permitir manipular las imgenes del documento, pudiendo
conseguir efectos como el conocido rollover, o cambio de imgenes, por ejemplo, al
pasar el ratn sobre la imagen. Las propiedades se resumen en la siguiente tabla:
Propiedades Mtodos Manejadores de
eventos
border, complete
height, hspace,
lowsrc, name,
src, vspace, width

Para acceder a las propiedades: [window.]document.nombreimagen.propiedad

5.11.1 - PROPIEDADES DEL OBJETO IMAGE:

Border: Contiene el valor del atributo 'border' de la imagen.

Complete: Valor booleano que indica si la imagen se ha descargado completamente


o no.

Height: Contiene el valor del atributo 'height' de la imagen (alto). Alto de la imagen
que puede ponerse en pxeles o porcentaje con respecto a la pgina.

Hspace: Contiene el valor del atributo 'hspace' de la imagen (espacio


horizontal alrededor de la imagen).

Lowsrc: Contiene el valor del atributo 'lowsrc' de la imagen. Con este atributo
podemos indicar un archivo de la imagen de baja resolucin.

Name: Contiene el valor del atributo 'name' de la imagen. Se corresponde con el


nombre qye se le da al objeto imagen.

Src: Contiene el valor del atributo 'src' de la imagen <IMG SRC=...>.


102 Aula Mentor Iniciacin a Javascript

Vspace: Contiene el valor del atributo 'vspace' de la imagen. Sirve para indicar el
espacio libre en vertical medido en pxeles que se coloca entre la imagen y los otros
elementos que la rodean.

Width: Contiene el valor del atributo 'width' de la imagen. Ancho de la imagen que
puede ponerse en pxeles o porcentaje con respecto a la pgina.

Ejemplo: El siguiente ejemplo muestra como crear imgenes de sustitucin. En el


documento aparecen dos imgenes (de nombres img1 e img2) que son dos
hipervnculos, al pasar el ratn sobre ellas (evento onMouseover) la imagen cambia,
cuando el ratn abandona la imagen (evento onMouseout) esta vuelve a cambiar. El
cdigo es el siguiente:

<HTML>
<HEAD>
<TITLE>Manipulando imgenes</TITLE>
</HEAD>
<BODY bgcolor="#FFFFCC" >
<center>
<A HREF="departa.htm" onMouseover="document.img1.src='img1off.gif'"
onMouseout="document.img1.src='img1on.gif'">
<IMG SRC="img1on.gif" NAME="img1" ALT="Departamentos"></A>

<A HREF="equipo.htm" onMouseover="document.img2.src='img2off.gif'"


onMouseout="document.img2.src='img2on.gif'">
<IMG SRC="img2on.gif" NAME="img2" ALT="Equipo Directivo"></A>
</center>
</BODY>
</HTML>

Ejemplo 34 Manipulando imgenes

Para que cambie la imagen al pasar el ratn por encima o al abandonarla


cambiamos el valor de la propiedad src de dicha imagen:
document.nombreimagen.src='nuevaimagen' Tambin se poda haber puesto:
document['nombredeimagen'].src='nuevaimagen' Es decir:
document.img2.src='img2off.gif' document['img2'].src='img2off.gif'
Objetos 103

Ejemplo: Este ejemplo obtiene la misma salida que el ejemplo anterior pero se ha
aadido cdigo javascript para cargar las imgenes en la memoria cach del navegador
y colocarlas en variables:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo IMAGENES de sustitucin con funcin</TITLE>
<SCRIPT language=JavaScript>
//comprobar si el navegador entiende objetos imagen
if (document.images) {
img1on=new Image(); img1on.src= "img1on.gif";
img2on=new Image(); img2on.src= "img2on.gif";
img1off=new Image(); img1off.src= "img1off.gif";
img2off=new Image(); img2off.src= "img2off.gif";
}
function imagenOn(NombreImagen) {
if (document.images) {
document[NombreImagen].src=eval(NombreImagen + "on.src");
}
}
function imagenOff(NombreImagen) {
if (document.images) {
document[NombreImagen].src=eval(NombreImagen + "off.src");
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFCC" >
<center>
<A HREF="departa.htm" onMouseover="imagenOff('img1')" onMouseout="imagenOn('img1')" >
<IMG SRC="img1on.gif" NAME="img1" ALT="Departamentos"></A>
<A HREF="equipo.htm" onMouseover= "imagenOff('img2')" onMouseout="imagenOn('img2')">
<IMG SRC="img2on.gif" NAME="img2" ALT="Equipo Directivo"></A>
</center>
</BODY>
</HTML>

Ejemplo 35 Manipulando imgenes con eventos

La sentencia if (document.images) comprueba si el navegador entiende los


objetos imagen. Si es as se crean 4 objetos imagen y se les asigna el fichero de
imagen correspondiente usando la propiedad src:

img1on=new Image(); img1on.src= "img1on.gif";


104 Aula Mentor Iniciacin a Javascript

Se han creado dos funciones para el cambio de las


imgenes: imagenOn(NombreImagen)que realiza el intercambio para los nombres
de imagen que terminan en on e imagenOff(NombreImagen) que lo realiza para las
imgenes que terminan en off. Ambas realizan la siguiente operacin:

document[NombreImagen].src=eval(NombreImagen + "on.src");

NombreImagen es el nombre dado a la imagen (NAME=img1, NAME =img2).


Asigna a document[NombreImagen].src el resultado de evaluar la expresin que
concatena NombreImagen con on.src o con off.src dependiendo si se quiere
visualizar la imagen que termina en on o en off, el resultado es img1on.src
img1off.src, etc

Estas dos funciones se pueden simplificar en una de la siguiente forma:

function CambiarImagen(NombreImagen, NuevaImagen)


{
if (document.images)
{
document[NombreImagen].src=eval(NuevaImagen + ".src");
}
}

La llamada sera: CambiarImagen(img1,img1on), img1 es el nombre de


imagen del objeto e img1on es una de las variables imagen creadas a las que luego se
les asigna el archivo de imagen.

Ejemplo: Partimos del ejemplo anterior, vamos a crear dos hipervnculos de forma
que ahora al pasar el ratn por el hipervnculo hacemos que cambie la imagen. El
cdigo Javascript ser el mismo que el usado en el ejemplo anterior.
Objetos 105

<BODY bgcolor="#FFFFCC" >


<center>
<IMG SRC="img1on.gif" NAME="img1" ALT="Departamentos">
<IMG SRC="img2on.gif" NAME="img2" ALT="Equipo Directivo">
<BR>
<A HREF="departa.htm" onMouseover="imagenOff('img1')"
onMouseout="imagenOn('img1')" >Departamentos</A>&nbsp;
<A HREF="equipo.htm" onMouseover= "imagenOff('img2')"
onMouseout="imagenOn('img2')">Equipo Directivo </A>
</center>
</BODY>
</HTML>

Ejemplo: El siguiente ejemplo muestra las caractersticas de la imagen que aparece


en el documento, como el nombre, el alto, el ancho, el borde, etc. Se ha aadido el
siguiente cdigo JavaScript para obtener dichas caractersticas:

<p align="center"><img border="5" src="glaciar.gif" alt="LAGUNA GLACIAR"


hspace="15" vspace="5" width="342" height="211" NAME="laguna"> </p>
<center>
<br><b>CARACTERSTICAS DE LA IMAGEN:</b><br>
<SCRIPT LANGUAJE="JavaScript">
document.write("Nmero de imgenes: "+ document.images.length+" <br>");
document.write("Nombre de la imagen: "+ document.images[0].name+" <br>");
document.write("BORDE: "+ document.laguna.border );
document.write(" ALTO: "+ document.laguna.height);
document.write(" ANCHO: "+ document.laguna.width+" <br>");
document.write("Nombre de fichero: "+ document.laguna.src+" <br>");
document.write("Espacio vertical alrededor de la imagen: "+
document.laguna.vspace +" <br>");
document.write("Espacio horizontal alrededor de la imagen: "+
document.laguna.hspace+" <br>");
</SCRIPT>
<center>

5.12 - LOS OBJETOS DEL FORMULARIO.

En este apartado veremos cmo manipular los objetos de un formulario, as


podremos hacer funciones que nos permitan validarlo antes de enviar los datos a un
106 Aula Mentor Iniciacin a Javascript

servidor. JavaScript define un conjunto de objetos relacionados con los elementos que
se pueden incluir dentro de un formulario, son los siguientes: form, text, textarea,
button, checkbox, radio, select, password y hidden. Toda etiqueta <FORM> de HTML
tiene asociada un objeto form de JavaScript.
Propiedades Mtodos Manejadores de
eventos
action, elements, encoding reset() OnSubmit=
length , method, target submit()

Para acceder a las propiedades o mtodos:


[window.]document.nombreformulario.propiedad,
[window.]document.nombreformulario.mtodo()
[window.]document.forms[ndice].propiedad
[window.]document.forms[ndice].mtodo()

Si en el documento tenemos tres formularios podemos utilizar document.forms[0]


para referenciar el primer formulario, document.forms[1] para el segundo y
document.forms[2] para el tercero.

5.12.1 - PROPIEDADES DEL OBJETO FORM

Action: Cadena que contiene el valor del atributo ACTION del formulario (URL del
programa que procesa los datos del formulario).

Elements: Array que contiene todos los elementos del formulario, en el mismo
orden en el que se definen en el documento HTML. Por ejemplo, si en el formulario
hemos puesto, en este orden, una caja de texto, un checkbox y una lista de
seleccin, la caja de texto ser elements[0], el checkbox ser elements[1] y la lista
de seleccin ser elements[2].

Encoding: Cadena que contiene el valor del atributo ENCTYPE del formulario
(cdigo MIME).

Length: Nmero de elementos que contiene el formulario.


Objetos 107

Method: Cadena que contiene el valor del atributo METHOD del formulario
(mtodo con el que se va a recibir/procesar la informacin del formulario
GET/POST).

Target: Cadena que contiene el valor del atributo TARGET (nombre de ventana o
marco donde aparecer la respuesta que genere el servidor despus de enviar el
formulario).

5.12.2 - MTODOS DEL OBJETO FORM

reset(): Simula el mismo efecto que si pulsramos un botn de tipo RESET dispuesto
en el formulario (borra los datos que haya introducido el usuario en el
formulario).

submit(): Enva el formulario. Tiene el mismo efecto que si pulsramos un botn de


tipo SUBMIT dispuesto en el formulario. Recordemos la sintaxis para crear un
formulario:

<FORM NAME=NombreFormulario [TARGET=NombreVentana] [ACTION=URLservidor]


[METHOD= GET | POST] [ENCTYPE=tipoMIME] [onSubmit=Funcin_texto] >
...objetos del formulario...
</FORM>

Si el formulario no va a tener peticiones o envos a travs del servidor los


atributos ACTION=, TARGET= y METHOD= no son necesarios. Pero si el formulario va
a realizar peticiones o preguntas al servidor, ser necesario especificar al menos los
atributos ACTION= y METHOD=; especificaremos el atributo TARGET= si los datos
resultantes del servidor se van a mostrar en otra ventana que no sea la que realiza
la llamada. Igualmente especificaremos el atributo ENCTYPE= si los script de
formulario dan forma a los datos ligados al servidor en un tipo MIME= que no sea un
flujo ASCII.
108 Aula Mentor Iniciacin a Javascript

En este apartado aprenderemos a utilizar JavaScript para validar los datos del
formulario, es decir para asegurarnos que los formularios contienen informacin
vlida antes de que se enven al servidor.

Ejemplo: El siguiente ejemplo muestra algunas de las propiedades del


formulario.

<SCRIPT LANGUAGE="JAVASCRIPT" >


function localizar(){
document.write("HREF: " + location.href +"<br>"); document.write("HOST: " +
location.host +"<br>"); document.write("HOSTNAME: " + location.hostname +"<br>");
document.write("PATHNAME: " + location.pathname +"<br>");
document.write("PORT: " + location.port +"<br>");
document.write("PROTOCOL: " + location.protocol +"<br>");
}
</SCRIPT>

Para obtener el nmero de elementos del formulario


tambin podramos haber utilizado las siguientes expresiones:
document.forms[0].length, o bien, document.FORMULARIO.length

Donde FORMULARIO es el nombre dado al formulario y forms (propiedad del objeto


document) es un array que contiene una entrada por cada formulario definido en el
documento (forms[0] es el primer formulario que se encuentra en el documento).

Ejemplo: Partimos del ejemplo anterior, en este ejemplo aadimos a uno de los
botones el evento onClick, de forma que al hacer clic en el botn comprobaremos si se
ha dejado algn campo en blanco, en ese caso aparecer un cuadro de dilogo
indicndolo, y el foco situar el puntero del ratn en el campo . El cdigo aadido al
botn es: <input type="button" value="Enviar" name="enviar" onClick="Comprobar()">
Objetos 109

<<SCRIPT language="JavaScript">
<!--
function Comprobar(){
var i;
var n;
n=document.forms[0].elements.length; //n de elementos
for ( i=0; i<n ; i++) //recorremos elementos del formulario
{
if(document.forms[0].elements[i].value==""){
alert("Has de introducir datos en el campo: "+
document.forms[0].elements[i].name);
document.forms[0].elements[i].focus();
break //rompe el bucle
}
}
}
// -->
</SCRIPT>

Para obtener el valor de un elemento i del formulario utilizamos la expresin:


document.forms[0].elements[i].value. Para obtener el nombre de un elemento del
formulario utilizamos la expresin: document.forms[0].elements[i].name. Para que el
foco de ejecucin se site en un campo utilizamos el mtodo focus() que se ver en el
siguiente epgrafe: document.forms[0].elements[i].focus();

Casi todas las etiquetas HTML utilizadas para definir elementos en un


formulario tienen asociado un objeto JavaScript.

5.13 - LOS OBJETOS TEXT, TEXTAREA Y PASSWORD.

Estos objetos son el medio principal para la obtencin de texto introducido por el
usuario. Representan los campos de texto y las reas de texto dentro de un formulario.
El objeto password es igual que el objeto text salvo que los caracteres introducidos por
el usuario se muestran poniendo asteriscos (*) en su lugar. El objeto textarea est
destinado para la introduccin de mltiples lneas de texto. Los tres tienen las mismas
propiedades y mtodos, por ello los vemos juntos.
110 Aula Mentor Iniciacin a Javascript

Propiedades Mtodos Manejadores de


eventos
defaultValue blur() onBlur
name focus() onFocus
value select() onChange
onSelect

Para acceder a las propiedades o mtodos:


[window.]document.nombreformulario.nombrecampo.propiedad,
[window.]document.nombreformulario.nombrecampo.mtodo()
[window.]document.nombreformulario.elements[n].propiedad
[window.]document.nombreformulario.elements[n].mtodo()
[window.]document.forms[m].nombrecampo.propiedad
[window.]document.forms[m].nombrecampo.mtodo()
[window.]document.forms[m].elements[n].propiedad
[window.]document.forms[m].elements[n].mtodo()

5.13.1 - PROPIEDADES DE LOS OBJETOS TEXT, TEXTAREA Y PASSWORD

defaultValue: Cadena que contiene el valor por defecto dado al objeto (valor del
parmetro VALUE).

Name: Cadena que contiene nombre del campo (valor del parmetro NAME).

Value: Cadena que contiene el valor actual del campo.

5.13.2 - MTODOS DE LOS OBJETOS TEXT, TEXTAREA Y PASSWORD

blur(): Elimina el foco del objeto.

focus(): Asigna el foco del ratn al objeto.

select(): Selecciona el texto que contiene el objeto


Objetos 111

Ejemplo: En el siguiente formulario pediremos al usuario su nombre y la contrasea


y de nuevo la contrasea para validarla. Si las contraseas no coinciden se visualizar
un cuadro de dilogo indicndolo, entonces el foco de la ejecucin volver al campo
contrasea (mtodo focus()) que adems aparecer seleccionado (mtodo select()).
Si no se teclea nada en el campo contrasea tambin aparecer un mensaje y el
foco retornar a dicho campo. Si los datos han sido validados se enviarn al servidor
(mtodo submit()) a un programa CGI. El cdigo es el siguiente:

<HTML>
<HEAD>
<TITLE> Comprobar Password</TITLE>
<SCRIPT language="JAVASCRIPT">
function validarFormulario(formulario) {
if (formulario.clave1.value == "") {
//no se ha introducido contrasea
alert("Debes introducir la contrasea");
formulario.clave1.focus(); //devolver el foco al campo
return; }
if (formulario.clave1.value != formulario.clave2.value) {
//las contraseas escritas no coinciden
alert("Las contraseas introducidas son distintas")
formulario.clave1.focus(); //devolver el foco
formulario.clave1.select(); //seleccionar texto
return; }
formulario.action="http://www.servidor.es/login_servidor.cgi"
formulario.submit(); //enviar datos al servidor
}
</SCRIPT>
<BODY>
<p align="center"><b>VERIFICACIN DE LA CONTRASEA</b>
<center><table bgcolor="#FFFFCC" border="2">
<td>
<FORM onSubmit="javascript:validarFormulario(this)" method="POST"> Escribe tu nombre:
<INPUT size=30 name="NOMBRE">
<P>Contrasea: <INPUT name="clave1" type=password size="20">
<P>Introduce de nuevo la contrasea: <INPUT name="clave2" type=password size="20">
<P><center>
<INPUT type="submit" value=Enviar name="Enviar">&nbsp;
<INPUT type="reset" value=Restablecer>
</center>
</td></table></center></FORM>
</BODY></HTML>

Ejemplo 36 Objetos formulario: Comprobar password


112 Aula Mentor Iniciacin a Javascript

El evento onSubmit se dispara cuando un formulario est a punto de


enviarse. Cuando se enve el formulario (se hace clic en el botn Enviar,
type="submit") se invoca a la funcin validarFormulario(), el parmetro que se enva es
this que hace referencia al objeto actual, es decir al formulario. Se ha definido el
mtodo POST para enviar la informacin al servidor, method="POST". Cuando el
formulario haya sido validado se realizan las siguientes acciones:

formulario.action="http://www.servidor.es/login_servidor.cgi"

formulario.submit(); //enviar datos al servidor

Es decir la accin a realizar ser enviar los datos al servidor, a un programa CGI que
se encargar de procesar la informacin; a la URL indicada por el atributo action. Este
formulario es un ejemplo de cmo enviar datos al servidor para ser procesados por un
archivo CGI. Ms detalles sobre transmisin de datos a archivos CGI no es objetivo del
curso.

5.14 - LOS OBJETOS BUTTON, RESET Y SUBMIT.

Definen los tres tipos de botones que se pueden incluir en un formulario. Puede ser
un botn genrico, button, que no tiene accin asignada, un botn submit que al
ser pulsado enva los datos del formulario o un botn reset que al ser pulsado limpia
los valores del formulario.
Propiedades Mtodos Manejadores de
eventos
name click() onClick
value

5.14.1 - PROPIEDADES DE LOS OBJETOS BUTTON RESET Y SUBMIT

Name: Cadena que contiene el valor del parmetro NAME.

Value: Cadena que contiene el valor del parmetro VALUE.


Objetos 113

5.14.2 - MTODOS DE LOS OBJETOS BUTTON

click(): Reproduce la accin que el usuario realiza cuando hace clic en un botn.

5.15 - EL OBJETO CHECKBOX.

Las casillas de verificacin o "checkboxes" nos permiten seleccionar varias


opciones marcando el cuadrito que aparece a su

izquierda . La marca de la
casilla equivale a un valor true y si no est marcada equivale a un valor false.
Propiedades Mtodos Manejadores de
eventos
Checked click() onClick
defaultChecked
name
value

5.15.1 - PROPIEDADES DEL OBJETO CHECKBOX:

Checked: Valor booleano que indica si la checkbox est seleccionada (true) o no


seleccionada (false).

defaultChecked: Valor booleano que indica si la checkbox debe estar seleccionado


por defecto o no.

Name: Cadena que contiene el valor del parmetro NAME.

Value: Cadena que contiene el valor del parmetro VALUE.

5.15.2 - MTODOS DE LOS OBJETOS CHECKBOX:

click(): Reproduce la accin que el usuario realiza cuando hace clic en un botn.
114 Aula Mentor Iniciacin a Javascript

Ejemplo: En el siguiente formulario pediremos al usuario que introduzca su nombre


y seleccione las casillas deseadas. Los botones de opcin no tienen funcionalidad en
este ejemplo. Al hacer clic en el botn Calcular, se visualizar en el campo TOTAL un
total pts que depender de las casillas seleccionadas (Figura5_21).

<p><b>Accesorios</b><b>:
<input type="checkbox" name="AIRE" ></b>Aire Acondicionado
<input type="checkbox" name="ELEVALUNAS" >Elevalunas Elctrico
<input type="checkbox" name="RADIO" > RadioCD
</p>
<CENTER>
<input type="button" value="Calcular" name="Calcular" onClick="Calculo()">
<b>TOTAL:</b> <input type="text" name="TOTAL" size="10" value=0
READONLY>Pts</CENTER>
La funcin Calculo() es:
<SCRIPT language="JavaScript">
<!--
function Calculo(){
var tot=0;
if (document.FORMULARIO.AIRE.checked) tot=tot+120000;
if (document.FORMULARIO.ELEVALUNAS.checked) tot=tot+50000;
if (document.FORMULARIO.RADIO.checked) tot=tot+40000;
document.FORMULARIO.TOTAL.value=tot;
}
// -->
</SCRIPT>

Para comprobar si se ha seleccionado una casilla, por ejemplo la casilla AIRE,


utilizamos la expresin: if (document.FORMULARIO.AIRE.checked) Devuelve true si la
casilla est seleccionada, en caso contrario devuelve false.

5.16 - EL OBJETO RADIO

Este objeto nos permitir elegir una posibilidad entre todas las que hay:

Todos los botones de un grupo van a compartir el mismo nombre, de esta manera
JavaScript conoce al grupo de botones de tal forma que al hacer clic en uno de ellos se
desactive el resto de botones del grupo.
Objetos 115

Propiedades Mtodos Manejadores de


eventos
checked click() onClick()
defaultChecked, length
name, value

Para acceder a las propiedades o mtodos:

[window.]document.nombreformulario.grupobotones[x].propiedad
[window.]document.nombreformulario.grupobotones[x].mtodo()
[window.]document.nombreformulario.elements[n].propiedad
[window.]document.nombreformulario.elements[n].mtodo()
[window.]document.forms[m].grupobotones.propiedad
[window.]document.forms[m].grupobotones.mtodo()
[window.]document.forms[m].elements[n].propiedad
[window.]document.forms[m].elements[n].mtodo()

5.16.1 - PROPIEDADES DEL OBJETO RADIO:

checked: Valor booleano que nos dice si el radio est seleccionado (true) o no
(false).

defaultChecked: Valor booleano que indica el elemento radio debe estar


seleccionado por defecto o no

length: Nmero de botones de opcin definidos en el grupo de elementos radio.

name: Cadena que contiene el valor del parmetro NAME.

value: Cadena que contiene el valor del parmetro VALUE.

5.16.2 - MTODOS DEL OBJETO RADIO:

click(): Reproduce la accin que el usuario realiza cuando hace clic en un botn.
116 Aula Mentor Iniciacin a Javascript

Ejemplo: Partimos del formulario anterior, aadimos un nuevo botn que


visualizar en una nueva ventana el valor del botn de radio seleccionado y las casillas
seleccionadas. El cdigo HTML para el nuevo botn es:
<input type="button" value="Ver selecciones" name="VER" onClick="VerSeleccion()">

<function VerSeleccion(){
var i;
var ventana;

ventana=window.open("","",'width= 340,height=150');
ventana.document.write("<B>BOTON SELECCIONADO:</B><BR>");

// bucle que recorre los botones


for (i=0; i<document.FORMULARIO.BOTONES.length; i++)
if(document.FORMULARIO.BOTONES[i].checked){ ventana.document.write("Valor del
botn => "+ document.FORMULARIO.BOTONES[i].value +"<BR>");
}

ventana.document.write("<B>CASILLAS SELECCIONADAS:</B><BR>");

for (i=4;i<7;i++) //casillas elementos 4 a 6


if(document.FORMULARIO.elements[i].checked){ ventana.document.write("Nombre de
casilla: "+document.FORMULARIO.elements[i].name );
ventana.document.write(" * Valor: "+document.FORMULARIO.elements[i].value +"<BR>");
}
}

Para saber el nmero de botones de opcin del grupo de botones usamos la


expresin: document.FORMULARIO.BOTONES.length; por ello usamos un bucle hasta
el valor anterior para comprobar si el botn est chequeado o no; que lo
comprobamos con la expresin: if(document.FORMULARIO.BOTONES[i].checked) Para
obtener el valor del botn de radio tenemos la expresin:
document.FORMULARIO.BOTONES[i].value

5.17 - EL OBJETO SELECT.

Este objeto representa una lista de opciones dentro de un formulario. Pueden


aparecer en una pgina como cuadros de lista desplegables y por otra como cuadros
de lista. Presentan un uso eficaz a la hora de presentar lista de opciones por tratarse
de una lista desplegable de la que podremos escoger alguna (o algunas) de sus
opciones.
Objetos 117

Propiedades Mtodos Manejadores de


eventos
length Ninguno onChange()
name
options
selectedIndex
options[n].defaultSelected
options[n].index
options[n].selected
options[n].text
options[n].value

Para acceder a las propiedades:

[window.]document.nombreformulario.nombrelista.propiedad
[window.]document.forms[m].nombrelista.propiedad
[window.]document.nombreformu.nombrelista.options[n].propiedad
[window.]document.forms[m].nombrelista.options[n].propiedad

5.17.1 - PROPIEDADES DEL OBJETO SELECT:

Length: Nmero de opciones definidas en la lista.

Name: Contiene el valor del parmetro NAME.

Options: Se trata de un array que contiene una entrada por cada una de las
opciones de la lista, en el mismo orden en el que aparecen en el cdigo HTML. Este
array tiene, a su vez, las siguientes propiedades:

defaultSelected: indica si la opcin debe estar seleccionada por defecto (true,


si; false no).

index: indica la posicin de la opcin dentro de la lista.

selected: indica si la opcin est actualmente seleccionada o no (true, si; false no).

text: contiene el texto de la opcin.


118 Aula Mentor Iniciacin a Javascript

value: contiene el valor del parmetro VALUE de la opcin (valor que se enva
asociado al elemento Option cuando se manda el formulario al servidor).

selectedIndex: Contiene el valor del ndice de la opcin actualmente seleccionada.

En el siguiente ejemplo tenemos que elegir un men de comida a partir de un


conjunto de opciones. Para el primer plato se crea una lista desplegable cuya
definicin es la siguiente:

<p><b>ELIGE EL PRIMER PLATO: </b>


<select size="1" name="PRIMERPLATO">
<option value="" selected>Selecciona primer plato</option>
<option value="Garbanzos" >Garbanzos</option>
<option value="Lentejas">Lentejas</option>
<option value="Judas Verdes">Judas Verdes</option>
<option value="Paella">Paella</option>
</select></p>

Si no elegimos ningn elemento del men se visualizar un aviso indicndolo.


Para elegir el segundo plato se crea un cuadro de lista cuya definicin es la siguiente:

<p>&nbsp;<b>ELIGE SEGUNDO PLATO :</b>


<select size="3" name="SEGUNDOPLATO" multiple>
<option>Entrecot a la Plancha</option>
<option>Pescado a la Plancha</option>
<option>Cochinillo Frito</option>
<option selected>Huevos con bacon y chorizo</option>
</select></p>

Para elegir el postre definimos un grupo de botones de radio:

<p><b>POSTRE: </b>
<input type="radio" value="FRUTA" checked
name="POSTRE">Fruta
<input type="radio" name="POSTRE" value="HELADO">Helado
<input type="radio" name="POSTRE" value="YOGUR">Yogur
<input type="radio" name="POSTRE" value="OTRO">Otro

El botn Ver Men visualiza en una nueva ventana el men elegido por el usuario.
Al hacer clic en el botn se invoca a la funcin VerSeleccion() enviando el parmetro
this.form que hace referencia al formulario actual. El cdigo HTML asociado al
botn es:

<input type="button" value="Ver Men" name="VER" onClick="VerSeleccion(this.form)">


Objetos 119

El cdigo JavaScript de la funcin VerSeleccion() es el siguiente:

<<SCRIPT language="JavaScript">
<!--
function VerSeleccion(form){
var ventana;

ventana=window.open("","",'width= 340,height=150'); ventana.document.write("<B>HAS


ELEGIDO EL SIGUIENTE MEN:</B><BR>"); ventana.document.write("<B>Primer plato:
</B>");

primero = form.PRIMERPLATO.selectedIndex; //obtener seleccin primer plato


if (form.PRIMERPLATO.options[primero].value == "") {
alert("NO HAS ELEGIDO PRIMER PLATO") //si no elegimos nada
}
ventana.document.write(form.PRIMERPLATO.options[primero].value +"<BR>");
//visualizamos el valor de la opcin elegida

ventana.document.write("<B>Segundo Plato :</B>");


segundo = form.SEGUNDOPLATO.selectedIndex; //obtener seleccin 2 plato
ventana.document.write(form.SEGUNDOPLATO.options[segundo].text +"<BR>");
//Visualizamos el texto de la opcin elegida

ventana.document.write("<B>Postre :</B>"); for (i=0; i<form.POSTRE.length; i++)


if(form.POSTRE[i].checked)
ventana.document.write(form.POSTRE[i].value +"<BR>");

ventana.document.close(); //cerramos la escritura en el documento


}
// -->
</SCRIPT>

Para obtener el elemento seleccionado de cada una de las listas se han usado estas
expresiones:

primero=form.PRIMERPLATO.selectedIndex
segundo=form.SEGUNDOPLATO.selectedIndex

Para obtener el valor (debe estar definido el parmetro VALUE en la definicin de


la lista) seleccionado de la primera lista usamos esta expresin:

form.PRIMERPLATO.options[primero].value
120 Aula Mentor Iniciacin a Javascript

Para obtener el texto de la opcin seleccionada de la segunda lista usamos esta


expresin:

form.SEGUNDOPLATO.options[segundo].text

5.18 - EL OBJETO HIDDEN

Este es el objeto oculto del formulario, contiene cadenas de caracteres cuyos


contenidos no son visibles para el usuario de la pgina Web. Es similar a un objeto text
salvo que no tiene valor por defecto y que no se puede editar. Son tiles para las
aplicaciones CGI que implican mltiples pantallas y se suele utilizar para conservar
informacin de estado entre las pginas.

5.18.1 - PROPIEDADES DEL OBJETO HIDDEN:

Name: Cadena que contiene el valor del parmetro NAME.

Value: Cadena que contiene el valor del parmetro VALUE.

Para acceder a las propiedades:

[window.]document.nombreformulario.nombrecampo.propiedad
[window.]document.nombreformulario.elements[n].propiedad
[window.]document.forms[m].nombrecampo.propiedad
[window.]document.forms[m].elements[n].propiedad

5.19 - PROPIEDADES Y MTODOS DE LOS OBJETOS DEL LENGUAJE.

Los objetos vistos hasta el momento son los que forman parte de la jerarqua de
objetos JavaScript. Si embargo JavaScript posee otro tipo de objetos propios del
lenguaje que permiten manejar nuevas estructuras de datos y aadir utilidades al
lenguaje. Consideraremos en este apartado los objetos String, Date y Math.
Objetos 121

5.19.1 - EL OBJETO STRING.

Este objeto nos permite la manipulacin de cadenas de texto. Cuando


asignamos una cadena a una variable, JavaScript crea un objeto de tipo String que es el
que nos permite hacer las manipulaciones. Para acceder a las propiedades y mtodos:
ObjetoString.Propiedad ObjetoString.Mtodo()

5.19.2 - PROPIEDADES DEL OBJETO STRING:

length: Nos indica la longitud en caracteres de la cadena dada. Ej: "Hola


Mundo".length devuelve 10

prototype: Nos permite aadir nuevas propiedades al objeto String.

5.19.3 - MTODOS DEL OBJETO STRING:

anchor(nombre_del_ancla): Crea un enlace (local) asignando al atributo


NAME el valor de 'nombre_del_ancla'. Este nombre debe estar entre comillas " ". Se
asigna como texto del enlace el que tenga el objeto String. Genera el cdigo
HTML: <A NAME=nombre_del_ancla>valor del objeto string</A>.

big(): Devuelve el valor del objeto string con una fuente grande. Genera el cdigo
HTML: <BIG>valor del objeto string</BIG>.

blink(): Devuelve el valor del objeto string con un efecto intermitente. Genera el
cdigo HTML: <BLINK>valor del objeto string</BLINK>.

bold(): Devuelve el valor del objeto string en negrita. Genera el cdigo HTML:
<B>valor del objeto string</B>.

charAt(indice): Devuelve el carcter situado en la posicin especificada por 'indice'


(el primer carcter ocupa la posicin 0). Ej: "Hola Mundo".charAt(0) devuelve H
122 Aula Mentor Iniciacin a Javascript

concat(cadena): Concatena el valor del objeto string con el que se pasa como
parmetro. C1.concat(C2) Devuelve la cadena C1 concatenada con la cadena C2. Es
equivalente a C1+C2. Ej: "Hola".concat("Mundo") devuelve HolaMundo

fixed(): Devuelve el valor del objeto string con una fuente con formato
monoespacio. Genera el cdigo HTML: <TT>valor del objeto string</TT>

fontcolor(color): Cambia el color con el que se muestra la cadena. La variable color


debe ser especificada entre comillas: " ", o bien siguiendo el estilo de HTML. Genera
el cdigo HTML: <FONT COLOR= >valor del objeto string</FONT>

fontsize(tamao): Cambia el tamao con el que se muestra la cadena. Los tamaos


vlidos son de 1 (ms pequeo) a 7 (ms grande).

indexOf(cadena_buscada, indice): Devuelve el lugar de la cadena actual donde se


encuentra la primera ocurrencia de 'cadena_buscada' a partir de la posicin
dada por 'indice'. Este ltimo argumento es opcional y, si se omite, la
bsqueda comienza por el primer carcter de la cadena. Si no lo encuentra
devuelve 1. Ej: "Hola Mundo".indexOf("n") devuelve 7

italics(): Devuelve la cadena en cursiva. Genera el cdigo HTML: <I>valor del objeto
string</I>

lastIndexOf(cadena_buscada ,indice): Devuelve el lugar donde se encuentra la


ltima ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posicin dada por 'indice', y buscando hacia atrs. Este ltimo argumento es
opcional y, si se omite, la bsqueda comienza por el ltimo carcter de la cadena.

link(URL): Crea un enlace donde el atributo HREF toma el valor del URL y se asigna
como texto del enlace el que tenga el objeto string. Genera el cdigo HTML: <A
REF.=URL>valor del objeto string</A>.

small(): Devuelve el valor de la cadena con una fuente pequea. Genera el cdigo
HTML: <SMALL>valor del objeto string</SMALL>.
Objetos 123

split(carcter): Divide una cadena en subcadenas creadas a partir de la original de la


siguiente forma: 1 subcadena: desde el comienzo hasta el carcter especificado (o
hasta el final si no lo encuentra). 2 y sucesivas: a partir del carcter
especificado hasta el la siguiente ocurrencia del mismo o hasta el final. El carcter
no se incluye en las subcadenas. "Hola Mundo".split(" ") devuelve Hola,Mundo

strike(): Devuelve el valor de la cadena de caracteres tachada. Genera el cdigo


HTML: <STRIKE>valor del objeto string</STRIKE>

slice(inicio,fin): Devuelve una cadena formada formada por los caracteres que se
encuentra entre la posicin inicio y fin-1.

sub(): Devuelve el valor de la cadena con formato de subndice. Genera el cdigo


HTML: <SUB>valor del objeto string</SUB>

substr(N1, N2): Por ejemplo si considero C.substr(N1, N2): Devuelve una subcadena
a partir de la cadena C tomando N2 caracteres desde la posicin N1. Si no se
especifica N2. Devolver desde la posicin N1 hasta el final de la cadena. Ej: "Hola
Mundo".substr(2,5) devuelve la cadena Mu

substring(N1,N2): C.substring(N1,N2): Devuelve tambin una cadena a partir de la


cadena C, pero en este caso N1 y N2 indican las posiciones de comienzo y de final
de la subcadena. Ej: "Hola Mundo".substring(2,6) devuelve la cadena M

sup(): Devuelve el valor de la cadena con formato de superndice. Genera el cdigo


HTML: <SUP>valor del objeto string</SUP>

toLowerCase(): Devuelve el valor de la cadena en minsculas. Ej: "Hola


Mundo".toLowerCase() devuelve al cadena hola mundo

toUpperCase(): Devuelve la cadena en maysculas. Ej: "Hola


Mundo".toUpperCase() devuelve la cadena HOLA MUNDO
124 Aula Mentor Iniciacin a Javascript

Ejemplo: Este ejemplo muestra propiedades y mtodos del objeto String. La orden
with informa a JavaScript que el siguiente grupo de rdenes, dentro de los smbolos de
llave, sern referidas a un objeto en particular de forma que no es necesario escribir
la palabra document delante de los mtodos write.

With (objeto) { [instrucciones]


}
As en el ejemplo anterior utilizamos:
with(document) {
write("La cadena es: "+ cad +"<BR>");
write(......)
.......
}

<html>
<head>
<title>Objeto String</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function cadenas() {
var cad = "Hola Mundo";

with(document) {
write("La cadena es: "+ cad +"<BR>");
write("Longitud de la cadena: "+ cad.length +"<BR>");
write("Metodo anchor: "+ cad.anchor("Ancla") +"<BR>");
write("Negrita- bold: "+ cad.bold() +"<BR>");
write("Quinto caracter es: "+ cad.charAt(5) +"<BR>");
write("Formato FIXED: "+ cad.fixed() +"<BR>");
write("De color rojo- fontcolor: "+cad.fontcolor("#FF0000")+"<BR>");
write("Tamao 5- fontsize: "+ cad.fontsize(5) +"<BR>");
write("<BR>En cursiva-Italics: "+ cad.italics() +"<BR>");
write("La primera <b>o</b> esta, empezando a contar por detras,");
write(" en la posicion- lastindexOf: "+cad.lastIndexOf("o") +"<BR>");
write("Haciendola enlace- link: "+cad.link("Ejemplo5_29.htm")+"<BR>");
write("Tachada- strike: "+ cad.strike() +"<BR>");
write("Subindice- sub: "+ cad.sub() +"<BR>");
write("Superindice- sup: "+ cad.sup()+"<BR>");
}
}
//-->
</SCRIPT></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
cadenas();
//-->
</SCRIPT> </BODY> </HTML>

Ejemplo 37 Objeto String


Objetos 125

Ejemplo: El siguiente ejemplo muestra en el rea el cdigo HTML que se genera al


aplicar algunos de los mtodos del objeto String. Por ejemplo: la cadena escrita se
convertir a mayscula o minscula. En las casillas elegimos el tipo de fuente, tamao,
etc ... de la lista elegimos un color, que se lo aplicaremos a la cadena escrita. Estas
sentencias generan cdigo HTML Al hacer clic en el botn se visualizar en el rea
la cadena escrita en mayscula o minscula, en forma de URL (incluyendo <A
REF.=...>) y segn el formato elegido.

<html>
<head>
<title>Objeto String . Mtodos</title>
<SCRIPT language="JavaScript">
<!--
function Formateatexto(){
var texto,colortexto;

texto=document.forms[0].cadena.value;
//comprobamos si no se ha tecleado nada
if(document.forms[0].cadena.value==""){
alert("Has de introducir datos en la cadena!");
document.forms[0].cadena.focus();
return;
}
//mayuscula o minuscula
if(document.FORMULARIO.BOTONES[0].checked) texto=texto.toUpperCase();
if(document.FORMULARIO.BOTONES[1].checked) texto=texto.toLowerCase();

//casillas de seleccion
if(document.FORMULARIO.NEGRITA.checked) texto=texto.bold();
if(document.FORMULARIO.ITALICA.checked) texto=texto.italics();
if(document.FORMULARIO.PEQUE.checked) texto=texto.small();
if(document.FORMULARIO.GRANDE.checked) texto=texto.big();

//lista de colores
ct=document.FORMULARIO.COLOR.selectedIndex;//opcion seleccionada
colortexto=document.FORMULARIO.COLOR.options[ct].value;
if(ct>0) //si no es la primera opcion texto=texto.fontcolor(colortexto)

//aadimos el link
document.FORMULARIO.resul.value=texto.link("Ejemplo_30.html");
}
//-->
</SCRIPT>
</head>
126 Aula Mentor Iniciacin a Javascript

<body bgcolor="#FFFF99">
<form name="FORMULARIO">
<p><b>Escribe una cadena :</b> <input type="text" name="cadena" size="20">
<input type="radio" value="MAYUS" checked name="BOTONES"><b>Maysculas</b>
<input type="radio" name="BOTONES" value="MINUS"><b>Minsculas</b>
</p>
<p><b><input type="checkbox" name="NEGRITA" >Negrita
<input type="checkbox" name="ITALICA" >Itlica
<input type="checkbox" name="PEQUE" >Pequea
<input type="checkbox" name="GRANDE" >Grande</b>
<select size="1" name="COLOR">
<option selected value="">Elige un color</option>
<option value="#ff0000">Rojo</option>
<option value="#0000ff">Azul</option>
<option value="#ffff00">Amarillo</option>
<option value="#00ff00">Verde</option>
</select>
<textarea rows="5" name="resul" cols="28" READONLY WRAP> Cadena
resultante:</textarea></p>
<p><center><input type="button" onclick="Formateatexto()"
value="Ver cadena resultante en forma de URL" name="boton"> </center></p>
</form>
<HR>
</body>
</html>

Ejemplo 38 Objeto String: Mtodos

5.19.4 - EL OBJETO MATH.

Este objeto nos permite poder realizar clculos en los scripts. Sus propiedades slo
pueden consultarse, son constantes matemticas de uso frecuente. Las
referencias a las propiedades devuelven los valores inherentes (como por ejemplo pi);
las referencias a los mtodos requieren un valor enviado como parmetro al mtodo y
devuelven el resultado del mtodo realizando la operacin con el parmetro. La forma
de usar el objeto Math es la misma que la forma de usar cualquier objeto JavaScript:
Math.propiedad, Math.mtodo()
Objetos 127

Propiedad Descripcin

Math.E Constante de Euler. Nmero e, (aproximadamente 2.718)

Math.LN2 Logaritmo neperiano de 2 (aproximadamente 0.693)

Math.LN10 Logaritmo neperiano de 10 (aproximadamente 2.302)

Math.LOG2E Logaritmo en base 2 de e (aproximadamente 1.442)

Math.LOG10E Logaritmo en base 10 de e (aproximadamente 0.434)

Math.PI Constante PI (aproximadamente 3.14159)

Math.SQRT1_2 Raz cuadrada de 0.5 (aproximadamente 0.707)

Math.SQRT2 Raz cuadrada de 2 (aproximadamente 1.414)

Funcin Mtodo Descripcin y ejemplo


Raiz cuadrada Math.sqrt(N) Devuelve la raz cuadrada del argumento.
Ej: Math.sqrt(27) devuelve
5.196152422706632
Potencia Math.pow(N1, N2) Devuelve N1 elevado a N2. Ej:
Math.pow(5, 3) devuelve 125
Valor absoluto Math.abs(N) Devuelve el valor absoluto de un nmero
(es decir, el valor de ese nmero sin
signo). Ej: Math.abs(-5.3) devuelve 5

Redondeo Math.round(N Devuelve el nmero entero ms prximo al


nmero N.
Ej: Math.round(27.2) devuelve 27
Math.round(27.5) devuelve 28
Math.round(-27.5) devuelve -27
Math.round(27.6) devuelve 28
Entero superior Math.ceil(N) Devuelve el entero mas cercano (por
arriba) al nmero N. Si N es un nmero
entero devuelve N.
Ej: Math.ceil(6.1) devuelve 7
128 Aula Mentor Iniciacin a Javascript

Math.ceil(-6.1) devuelve 6

Entero inferior Math.floor(N) Redondea el nmero al


valor entero inmediatamante inferior.
Si N es un nmero entero devuelve N.
Ej: Math.floor(6.1) devuelve 6
Math.floor(-6.1) devuelve 7
Math.floor(6.7) devuelve 6
Math.floor(-6.7) devuelve 7

Nmero aleatorio Math.random() Genera un nmero aleatorio entre 0 y 1.

A continuacin podemos ver el valor


devuelto por Math.random() en tres
ejecuciones consecutivas.

0.46879380653891483
0.26926274793632804
0.3076617575535776
Mximo Math.max(N1, N2) Devuelve el nmero mayor de los dos
nmeros que se pasan como argumento.
Ej: Math.max(2, 4) devuelve 4
Mnimo. Math.min(N1, N2) Devuelve el nmero menor de los dos
nmeros que se pasan como argumento.
Ej: Math.min(2, 4) devuelve 2

Math.acos(N) Funcin arcocoseno. Devuelve el arcocoseno de N en


radianes
Math.asin(N) Funcin arcoseno. Devuelve el arcoseno de N en radianes.
Math.atan (N) Funcin arcotangente. Devuelve el arcotangente de N en
radianes.
Math.cos(N) Devuelve el coseno de N.
Math.exp(N) Devuelve el valor enumero.
Math.floor(N) Devuelve el siguiente nmero entero menor o igual que N.
Math.log(N) Devuelve el logaritmo neperiano de N.
Math.sin(N) Devuelve el seno de N en radianes.
Math.tan(N) Devuelve la tangente de N en radianes.
Objetos 129

En todas las rdenes que interviene el objeto Math se puede utilizar referencia
abreviada. Por ejemplo, la siguiente expresin: Resultado = Math.sqrt(125) * Math.PI
Se puede sustituir por esta otra:
with(Math)
{
Resultado = sqrt(125) * PI;
}

Ejemplo: El siguiente ejemplo muestra el uso de algunos mtodos del objeto Math.
Se escribir una cantidad numrica y al hacer clic en el botn Obtener clculos se
visualizarn los clculos obtenidos al aplicar algunos mtodos. El cdigo asociado al
botn es el siguiente:

<input type="button" value="Obtener clculos" name="Botn"


onclick="CalculosMatematicos(document.forms[0].NUMERO.value)">

Function CalculosMatematicos(numero)
{
with(Math)
{
document.forms[0].RAIZ.value= sqrt(numero);
document.forms[0].SUPERIOR.value= ceil(numero); document.forms[0].ELEVADO.value=
pow(numero,3); document.forms[0].INFERIOR.value= floor(numero);
document.forms[0].ABSOLUTO.value= abs(numero);
document.forms[0].REDONDEO.value= round(numero);
document.forms[0].NEPERIANO.value= log(numero);
document.forms[0].EXPONENTE.value= exp(numero);
}
}

5.19.5 - EL OBJETO DATE.

Este objeto nos va a permitir manipular fechas y horas. Dispone de diversos


mtodos para obtener y modificar el ao, el mes, el da, las horas, los minutos y los
segundos. Debemos tener en cuenta lo siguiente:

JavaScript maneja fechas en milisegundos.


130 Aula Mentor Iniciacin a Javascript

Los meses de Enero a Diciembre vienen dados por un entero cuyo rango
vara entre el 0 y el 11 (el mes 0 es Enero, el mes 1 es Febrero, y as
sucesivamente).
Los das de la semana de Domingo a Sbado vienen dados por un entero
cuyo rango vara entre 0 y 6 (el da 0 es el Domingo, el da 1 es el Lunes, ...),
Los aos se ponen tal cual, y las horas se especifican con el formato
HH:MM:SS.

5.19.6 - CREACIN DE UN OBJETO DE FECHA:

La sintaxis bsica para crear un objeto fecha es la siguiente: ObjetoFecha = new


Date([parmetros]) Podemos crear un objeto Date vaco (sin parmetros), entonces se
crear con la fecha correspondiente al momento actual en el que se crea. Ejemplo:
var Fecha=new Date();

O podemos crearlo dndole una fecha concreta (con parmetros). Indicando


parmetros tenemos estas posibilidades:
var Fecha = new Date(Month dd, yyyy hh:mm:ss);
var Fecha = new Date(Month dd, yyyy);
var Fecha = new Date(yyyy,mm,dd,hh,mm,ss);
var Fecha = new Date(yyyy,mm,dd);
var Fecha = new Date(milisegundos);

El nombre del mes debe aparecer completo y en ingls. Las horas, minutos y
segundos han de ir separados por dos puntos (:)

Ejemplos: podemos almacenar el 27 de julio de 2001 de varias formas:


var Fecha1 = new Date(2001, 6,27);
var Fecha2 = new Date("July 27, 2001");

Para utilizar los mtodos del objeto Date: ObjetoFecha.mtodo()

5.19.7 - MTODOS DEL OBJETO DATE:

Mtodo Descripcin
ObjetoFecha.getTime() Devuelve el nmero de
milisegundos transcurridos desde el 1 de
enero de 1970 hasta el momento actual.
ObjetoFecha.getDate() Devuelve el da del mes actual como un
Objetos 131

valor entero entre 1 y 31.


ObjetoFecha.getDay() Devuelve el da de la semana actual como
valor un entero entre 0 y 6.
ObjetoFecha.getHours() Devuelve la hora del da actual como un
valor entero entre 0 y 23.
ObjetoFecha.getMinutes() Devuelve los minutos de la hora actual
como un valor entero entre 0 y 59.
ObjetoFecha.getMonth() Devuelve el mes del ao actual como un
valor entero entre 0 y 11 (enero=0).
ObjetoFecha.getSeconds() Devuelve el nmero de segundos de la
hora actual como un valor entero entre 0
y 59.
ObjetoFecha.getYear() Devuelve el ao actual como un valor
entero. Si el ao se encuentra entre 1900
y 1999, devuelve un entero de dos dgitos
(diferencia entre el ao y 1900). Si est
fuera de este rango Explorer devuelve el
valor del ao expresado en 4 dgitos y
Mozilla devuelve el ao expresado como
la diferencia entre este y 1900.
ObjetoFecha.setDate(da_mes) Establece el da del mes en el objeto Date
(valor entre 1 y 31)
ObjetoFecha.setDay(da_semana) Establece el da de la semana (valor entre
0 y 6, domingo=0).
ObjetoFecha.setHours(horas) Establece la hora del objeto Date (valor
entre 0 y
23).
ObjetoFecha.setMinutes(minutos) Establece los minutos del objeto Date
(valor entre 0 y 59).
ObjetoFecha.setMonth(mes) Establece el mes del objeto Date (valor
entre 0 y
11).
ObjetoFecha.setSeconds(segundos) Establece el nmero de segundos del
objeto
Date (valor entre 0 y 59).
ObjetoFecha.setTime(milisegundos) Establece el nmero de
milisegundos transcurridos desde
el 1 de enero de 1970 y a las
00:00:00 horas.
ObjetoFecha.setYear(ao) Establece el ao del objeto Date. Si se
indica un nmero entre 0 y 99, este
mtodo asigna como ao ese valor mas
1900. Si el ao indicado est fuera de ese
rango, el mtodo asigna el valor tal cual.
Devuelve la fecha en forma de cadena
ObjetoFecha.toGMTString() usando la convencin de zona horaria del
meridiano de Greenwich (GMT).
Convierte la fecha del objeto Date en una
ObjetoFecha.toLocaleString() cadena en el formato del sistema.
132 Aula Mentor Iniciacin a Javascript

Ejemplo: El siguiente ejemplo muestra el uso de alguno de los mtodos del objeto
Date.

<html>
<head>
<title>Objeto Date</title>
<SCRIPT language="JavaScript">
<!--
function Fechas(F)
{
document.write("Fecha => "+ F +"<br>");
document.write("Dia del mes - getDate(): =>" +F.getDate()+"<br>");
document.write("Dia de la semana - getDay(): =>" +
F.getDay()+"<br>");
document.write("Nmero de mes - getMonth(): =>" +
F.getMonth()+"<br>"); document.write("Ao - getYear(): =>" + F.getYear()+"<br>");
document.write("Horas:Minutos:Segundos: =>" +F.getHours()+":"+
F.getMinutes()+":"+F.getSeconds()+"<br>"); document.write("toGMTString() =>"
+F.toGMTString()+"<br>"); document.write("toLocaleString() =>" +
F.toLocaleString()+"<br><hr>");
}
// -->
</SCRIPT>
</head>
<body >
<SCRIPT language="JavaScript">
<!--
var Fecha1 = new Date("July 27, 2001");
var Fecha2 = new Date();

Fechas(Fecha1); Fechas(Fecha2);
// -->
</SCRIPT>
</body>
</html>

Ejemplo 39 Objeto Date

Ejemplo: En el siguiente ejemplo se define una funcin que recibe una fecha y la
devuelve personalizada, incluyendo el nombre del da de la semana y el nombre del
mes. El cdigo del script es el siguiente:
Objetos 133

<<SCRIPT language="JavaScript">
<!--
Meses=new Array (); Dias=new Array();

Meses[0]="Enero"; Meses[1]="Febrero"; Meses[2]="Marzo"; Meses[3]="Abril";


Meses[4]="Mayo"; Meses[5]="Junio"; Meses[6]="Julio"; Meses[7]="Agosto";
Meses[8]="Septiembre"; Meses[9]="Octubre";
Meses[10]="Noviembre"; Meses[11]="Diciembre";

Dias[1]="Lunes"; Dias[2]="Martes"; Dias[3]="Mircoles"; Dias[4]="Jueves";


Dias[5]="Viernes"; Dias[6]="Sabado"; Dias[0]="Domingo";

function Convertir(F)
{
dia=Dias[F.getDay()];
mes=Meses[F.getMonth()];
an=F.getYear();
if (navigator.appName=="Netscape") {an=an+1900;}
return dia + ", "+ F.getDate() + " de " + mes + " de " + an;
}
// -->
</SCRIPT>

Un ejemplo de llamada a la funcin: document.write(Convertir(new Date())); que


visualiza la fecha de forma similar a : Martes, 22 de Mayo de 2012

5.20 - OBJETOS PERSONALIZADOS.

JavaScript nos permite crear nuestros propios objetos con propiedades y con
mtodos. Recordemos que un objeto es una entidad que posee unas ciertas
caractersticas, llamadas propiedades, y que tiene asociadas determinadas
operaciones, llamadas mtodos. As podemos definir el objeto Alumno con varios
atributos: nombre, apellidos, curso y nota; y varios mtodos como pueden ser:
obtener la nota del alumno, obtener todos los datos del alumno, etc. A la hora de crear
un objeto personalizado necesitamos una funcin que define cmo es el objeto y
cmo se comporta. As, definimos el objeto Alumno de la siguiente manera:
function Alumno(Nombre, Apellidos, Curso, Nota)
{
this.nombre=Nombre; this.apellidos=Apellidos; this.curso=Curso; this.nota=Nota;
this.Obtener_nota=Obtener_nota;
this.Obtener_datos=Obtener_datos;
134 Aula Mentor Iniciacin a Javascript

Donde:

- El nombre de la funcin (Alumno) se utilizar como nombre de objeto.


- Los parmetros de la funcin representan los valores que se asignarn a las
propiedades del objeto (nombre, apellidos, curso, y nota).
- Se utiliza la palabra reservada this seguida de un punto para asociar
propiedades al objeto (this.propiedad).
- Tambin se utiliza la palabra reservada this para aadir mtodos al objeto
(this.metodo).
- A los atributos se les asigna valores (parmetros que se pasan a la funcin) y
los mtodos se crean fuera de la declaracin del objeto.
- Se han definido dos mtodos: Obtener_nota y Obtener_datos, que se
definen fuera de la definicin del objeto:

function Obtener_nota()
{ //devuelve la nota
return (this.nota);
}

function Obtener_datos()
{ //devuelve datos del alumno
var datos= "Nombre : " + this.nombre +" <br>Apellidos: " + this.apellidos +
"<br>Curso: " + this.curso + "<br>Nota: " + this.nota;
return (datos);
}

Para utilizar este objeto creamos una instancia de la siguiente forma:

Alicia=new Alumno("Alicia","Tovar Gil",1,7);

Para hacer referencia a los mtodos y atributos:

Alicia.curso=2;
document.write(Alicia.Obtener_datos());
document.write("<br>La nota de : " + Alicia.nombre +", es: "+
Alicia.Obtener_nota());
Eventos 135

UNIDAD 6 - EVENTOS.
6.1 - DEFINICIN.

Podemos decir que los eventos son acciones que el usuario realiza mientras visita
una pgina Web. Por ejemplo son eventos hacer clic en un botn, mover el puntero del
ratn sobre un enlace, realizar una seleccin en una lista desplegable, etc. JavaScript
para trabajar con eventos utiliza unos comandos denominados manejadores de
eventos (event handler). Un manejador de eventos contiene instrucciones acerca de
qu hacer cuando una clase particular de evento se dispara. El nombre del manejador
de eventos es el nombre del evento precedido de la palabra on. Sin embargo en los
eventos se pone de manifiesto uno de los principales problemas que implica
desarrollar aplicaciones Web: las incompatibilidades entre navegadores. A pesar de
que existen estndares para cada una de las tecnologas empleadas, los navegadores
no los implementan intgra ni respetuosamente, haciendo que cada desarrollo se
ejecute con diferencias sustanciales que hacen que algunas aplicaciones deban ser
consideras incompatibles. Este es un problema muy grave de las tecnologas Web en
general y adems son un contrasentido ya que uno de los objetivos de las mismas era
hacer que las aplicaciones fuesen independientes de la plataforma.

En el caso concreto de JavaScript y de los eventos, existen tres modelos diferentes


para manejarlos dependiendo del navegador en el que se ejecute la aplicacin. Por un
lado el modelo bsico de eventos que se introduce con la versin 4 del estndar HTML
y que es considerado parte del nivel ms bsico de DOM. Es el nico compatible con
todos los navegadores pero es muy limitado. En segundo lugar el modelo de eventos
estndar asociado al estndar DOM de nivel 2 que es implementado por la mayor
parte de los navegadores con excepcin de Internet Explorer. Y finalmente el modelo
de eventos de Internet Explorer que como seala su nombre es especfico de este
136 Aula Mentor Iniciacin a Javascript

navegador. En el modelo bsico de eventos, cada elemento tiene una lista de eventos
que es capaz de manejar. El nombre de cada evento se construye con el prefijo on y
el nombre de la accin que desencadena el evento. En siguiente tabla extrada de
www.librosweb.es se muestran junto al nombre del manejador de eventos, la
descripcin y los elementos de interfaz de usuario ms comunes en los documentos
HTML.
Eventos 137

El papel del programador Javascript consiste en desarrollar el cdigo asociado a los


manejadores de eventos para que una vez que se detecte el evento se ponga en
ejecucin el cdigo previsto. El manejador de evento es por lo tanto una funcin
Javascript diseada por el programador para ese propsito. Para asociar a cada evento
el manejador correspondiente se pueden usar diferentes estrategias que
fundamentalmente se resumen en establecer el manejador como atributos de los
elementos XHTML, usar funciones JavaScript externas o emplear manejadores
"semnticos". El primer caso es el mtodo ms sencillo pero el menos recomendado.
Consiste en definir el cdigo del evento como el valor de un atributo de la marca
XHTML.
<input type="button" value="Haga click" onclick="alert('Gracias');" />

Con objeto de que desde el cdigo se pueda hacer referencia al propio elemento
XHTML que lo contiene, Javascript define el objeto this. En el ejemplo siguiente se
observa el funcionamiento de este objeto de manera que un evento puede hacer que
una propiedad del objeto XHTML se modifique durante la navegacin.
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"
onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Seccin de contenidos... </div>

El segundo mtodo consiste en desarrollar funciones que agrupen las instrucciones


sin que estas tengan que aparecer embebidas en el cdigo XHTML.
function Mensaje() {alert('Gracias'); }

<input type="button" value="Haga click" onclick="Mensaje()" />

Dado que en la funcin no tiene sentido, contextualmente hablando, utilizar el


objeto this, es posible pasar dicho objeto como parmetro a la funcin.
function resalta(elemento) {
switch(elemento.style.borderColor) {
case 'silver':
elemento.style.borderColor = 'black';
break;
case 'black':
elemento.style.borderColor='silver'; break; }
}
138 Aula Mentor Iniciacin a Javascript

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)"


onmouseout="resalta(this)"> Seccin de contenidos... </div>

El tercer mtodo para aadir manejadores de eventos tiene como principal objetivo
separar si cabe an ms el cdigo XHTML del cdigo JavaScript, para facilitar su lectura
y su mantenimiento futuro, al igual que es conveniente separar el contenido XHTML
del diseo y presentacin CSS. Este mtodo consiste en utilizar las propiedades DOM
de los elementos XHTML para asignar todas las funciones externas que actan de
manejadores de eventos. Por ejemplo:
// Funcin externa
function muestraMensaje() { alert('Gracias'); }
// Asignar la funcin externa al elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Haz click " />

El nico inconveniente de este mtodo es que la pgina se debe cargar


completamente antes de que se puedan utilizar las funciones DOM que asignan los
manejadores a los elementos XHTML. Una de las formas ms sencillas de asegurar que
cierto cdigo se va a ejecutar despus de que la pgina se cargue por completo es
utilizar el evento onload:
window.onload = function() { document.getElementById("pinchable").onclick = muestraMensaje; }

Para obtener informacin ms precisa sobre las circunstancias en las que se


produce un evento, JavaScript dispone de un objeto especial llamado event pero cuyo
uso depende del navegador. Los navegadores tipo Internet Explorer obtienen el objeto
event directamente mediante: var evento = window.event; En el resto de
navegadores, el objeto event se obtiene a partir del argumento que el navegador crea
automticamente:
function manejadorEventos(elEvento) { var evento = elEvento; }

Si se quiere programar una aplicacin que funcione correctamente en todos los


navegadores, es necesario obtener el objeto event de forma correcta segn cada
navegador. El siguiente cdigo muestra la forma correcta de obtener el objeto en
cualquier navegador:
function manejadorEventos(elEvento) {
var evento = elEvento || window.event;}
Eventos 139

6.2 - EVENTOS DE TECLADO

Los eventos relacionados con el teclado son los ms incompatibles entre diferentes
navegadores. Cada intervencin del usuario en el teclado desencadena tres eventos
diferentes (onkeyup, onkeypress y onkeydown). El evento onkeydown se corresponde
con el acto de pulsar una tecla y mantenerla sin soltarla; el evento onkeypress refleja
la pulsacin de la tecla y el evento onkeyup representa el instante en que se suelta la
tecla que pulsada. En funcin del navegador y del evento se pueden obtener
informacin concreta a travs de las propiedades keyCode y charCode
function manejador(elEvento)
{
var evento = elEvento || window.event;
var caracter = evento.charCode || evento.keyCode;
alert("El carcter pulsado es: " + String.fromCharCode(caracter));
}
document.onkeypress = manejador;

6.3 - EVENTOS DE RATN

La informacin que habitualmente se captura del ratn son las coordenadas de su


ubicacin y los eventos asociados a la pulsacin de los controles del mismo. Los
sistemas de coordenadas permiten conocer la posicin del ratn respecto a la pantalla
del ordenador, respecto a la ventana del navegador y respecto a la propia pgina
HTML (interesante si el usuario ha hecho scroll sobre la pgina). Las coordenadas ms
sencillas son las que se refieren a la posicin del puntero respecto de la ventana del
navegador, que se obtienen mediante las propiedades clientXy clientY:
function muestraInformacion(elEvento)
{
var evento = elEvento || window.event;
var coordenadaX = evento.clientX;
var coordenadaY = evento.clientY;
alert("Ratn en la posicin: " + coordenadaX + ", " + coordenadaY);
}
document.onclick = muestraInformacion;
140 Aula Mentor Iniciacin a Javascript

Las coordenadas de la posicin del puntero del ratn respecto de la pantalla


completa del ordenador del usuario se obtienen de la misma forma, mediante las
propiedades screenX y screenY:
var coordenadaX = evento.screenX; var coordenadaY = evento.screenY;

Las coordenadas respecto a la pgina HTML (hay diferencias entre navegadores)


function muestraInformacion(elEvento) {
var evento = elEvento || window.event;}
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
if(ie) {
coordenadaX = evento.clientX + document.body.scrollLeft;
coordenadaY = evento.clientY + document.body.scrollTop;
}
else {
coordenadaX = evento.pageX;
coordenadaY = evento.pageY;
}
alert("Ratn en la posicin: " + coordenadaX + ", " + coordenadaY + " respecto de la pgina web");
document.onclick=muestraInformacion;

<html>
<head>
<title> EVENTOS DE FORMULARIO</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Comprobar(F)
{
if(F.NOMBRE.value=="" && F.CURSO.value=="" && F.NOTA.value=="")
{
alert("Datos no vlidos");
return false;
}
return true;
}
</SCRIPT>
</head>
<body>
<p><b><font face="Verdana" size="4">EVENTOS DE FORMULARIO</font></b></p>
<form name="FORMU" onsubmit="return Comprobar(this)" onreset="return
document.FORMU.NOMBRE.value==''">
<p>Nombre y Apellidos: <input type="text" name="NOMBRE"
size="20"></p>
<p>Curso: <input type="text" name="CURSO" size="5"></p>
<p>Nota:<input type="text" name="NOTA" size="4"></p>
<p><input type="submit" value="Enviar" name="B1">
<input type="reset" value="Restablecer" name="B2"></p>
</form>
</body>
</html>

Ejemplo 40 Eventos de formulario


Eventos 141

<html>
<head>
<title> OTROS EVENTOS </title>
</head>
<body bgcolor="#66FFFF"
onresize='alert("HAS CAMBIADO EL TAMAO INICIAL DE LA VENTANA")'>
<p align="center"><B>BIENVENIDOS A MI PAGINA WEB</B>
<p align="center">
<img border="0" src="noesta.gif"
onerror='alert("NO EXISTE LA IMAGEN noesta.gif")'></p>
</body>
</html>

Ejemplo 41 Otros eventos

Este ejemplo muestra los eventos del ratn. Se ha definido un formulario con dos
cajas de texto, dos Botones de radio, un rea de texto, una lista y el botn restablecer.
Se han definido dos enlaces. Se ha definido la funcin Comprobar_seleccion(), que
comprobar el botn pulsado del grupo de botones de radio con el elemento
seleccionado de la lista de ciclos. Si se elige Ciclo de Grado Medio, solo pueden ser
vlidos los dos primeros elementos de la lista, si se elige Ciclo de Grado Superior,
son vlidos los elementos 3, 4 y 5 de la lista. Al elegir un elemento de la lista se
invocar a la funcin. Tambin se invocar al hacer clic en los botones de radio.
142 Aula Mentor Iniciacin a Javascript

<html>
<head>
<title> Eventos de ratn</title>
<script language="JavaScript">
function Comprobar_seleccion(){
n=document.FORMU.LISTA.selectedIndex;
if(document.FORMU.LISTA.options[n].value=="0") //no ha seleccionado nada
{
alert("Debes seleccionar un elemento de la lista");
document.FORMU.LISTA.focus();
}
else {

if(document.FORMU.BOTONES[0].checked) //grado medio


if(document.FORMU.LISTA.options[n].value>"2")
{
alert("Debes seleccionar un Ciclo de Grado Medio");
document.FORMU.LISTA.selectedIndex=5;//para que se visualice el elemento 5 de la lista
document.FORMU.LISTA.focus();//devolver foco a la lista
return;
}
if(document.FORMU.BOTONES[1].checked) //grado superior
if(document.FORMU.LISTA.options[n].value<"3")
{
alert("Debes seleccionar un Ciclo de Grado Superior");
document.FORMU.LISTA.selectedIndex=5; //para que se visualice el elemento 5 de la lista
document.FORMU.LISTA.focus();//devolver foco a la lista
return;
}
}
}
</script>
</head>
<body>
<h2 align="center"><font face="Verdana">EVENTOS DEL RATN</font></h2>
<center>
<table border="1" cellpadding="0" cellspacing="0" width="576" bgcolor="#CCFFFF">
<tr>
<td width="572">
<form name="FORMU"><p align="center">
Nombre:<input type="text" name="NOMBRE" size="20"
onblur="if(this.value=='') this.value='********'"> Edad:<input type="text" name="EDAD"
size="5"
onblur="if(this.value=='') this.value='********'"></p>
<center>
<table border="1" cellpadding="0" cellspacing="0" width="490" bgcolor="#FFFFCC">
Eventos 143

<tr>
<td width="243">
<input type="radio" name="BOTONES" value="CGM"
onclick="Comprobar_seleccion()">Ciclo de Grado Medio
<p><input type="radio" value="CGS" name="BOTONES"
onclick="Comprobar_seleccion()">Ciclo de Grado Superior
</td>
<td width="228"> Lista de ciclos:
<select size="1" name="LISTA"
onchange="Comprobar_seleccion()">
<option value="1">Gestin Administrativa</option>
<option value="2">Comercio</option>
<option value="3">Administracin y Finanzas</option>
<option value="4">Secretariado</option>
<option value="5">Comercio Internacional</option>
<option value="0" selected>Selecciona un Ciclo</option>
</select>
</td>
</tr>
</table><p><textarea rows="4" name="TEXTO" cols="23"
ondblclick="this.value=this.value.toUpperCase()" onselect="alert('Has seleccionado texto del
area')">
El texto que escribas se convertir en maysculas al hacer dobleclick.
</textarea>
<input type="reset" value="Restablecer" name="B2"
onmousedown="alert('Has presionado el botn Restablecer')">
</p>
</center>
</form>
<p align="center"><a href="cfgm.htm"
onmouseover="window.status='Ver ciclos de Grado Medio'; return true"
onmouseout="window.status='';return true"
onmouseup="alert('Has levantado el botn del enlace')"> Ver CFGM </a>
<a href="cfgs.htm"
onmouseup="alert('Has levantado el botn del enlace')">Ver CFGS</a>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>

Ejemplo 42 Eventos de ratn

Vamos a utilizar en este ejemplo el evento de teclado onkeypress (se ha


pulsado una tecla ANSI) para cambiar el color de fondo del documento.
144 Aula Mentor Iniciacin a Javascript

Definimos varios enlaces, nos situaremos en ellos usando el tabulador en el color


deseado y al presionar una tecla cambiar el color de fondo.

El cdigo asociado a los enlaces es el siguiente:

<a href="" onkeypress='document.bgColor="#0000FF"'>Azul</a>


<a href="" onkeypress='document.bgColor="yellow"'>Amarillo</a>
<a href="" onkeypress='document.bgColor="red"'>Rojo</a>

En este ejemplo al cambiar con el tabulador de un enlace a otro los colores no


cambian. Si utilizamos el evento onkeydown veremos que al pulsar una tecla
cualquiera sobre el enlace cambiar de color (antes nos situamos con el tabulador). Si
nos movemos solo con el tabulador para ir de un color a otro, cambiar al color del
enlace cuando el tabulador lo abandone, es decir cuando se presione la tecla. Si
utilizamos el evento onkeyup nada mas entrar en el enlace con el tabulador el fondo
cambia de color.

El siguiente ejemplo muestra el uso de una imagen mapeada, al pasar sobre los
textos cambia el color de fondo de pantalla. Al hacer clic en los textos que se
visualizan en la imagen se carga el archivo HTML correspondiente. Utilizamos el
evento onload para abrir una ventana de bienvenida con un documento HTML.

anuncio.html

<html>
<head>
<title>BIENVENIDO A MI PAG WEB</title>
</SCRIPT>
</head>
<body bgcolor="#66FFFF">
<p align="center">
<marquee bgcolor="#FFFF00" width="212" height="42" style="font-size: 24 pt; font-family:
Verdana">BIENVENIDOS A MI PAGINA WEB</marquee>
</body>
</html>
Eventos 145

<HTML>
<HEAD>
<TITLE>EVENTOS</TITLE>
<script language="javascript">

function anuncio()
{window.open("anuncio.html","","top=300,left=300,width=250,height=150");}
</script>

</HEAD>
<BODY onload="anuncio()" >
<center>
<MAP NAME="imagen">
<AREA SHAPE=RECT COORDS="18, 20, 367, 64" NOHREF
onMouseOver="document.body.style.backgroundColor='#ff0'"
onMouseOut="document.body.style.backgroundColor='#fff'"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="17, 80, 347, 123" NOHREF


onMouseOver="document.body.style.backgroundColor='#0f0'"
onMouseOut="document.body.style.backgroundColor='#fff'"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="16, 147, 241, 191" NOHREF


onMouseOver="document.body.style.backgroundColor='#f0f'"
onMouseOut="document.body.style.backgroundColor='#fff'"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="12, 210, 217, 256" NOHREF


onMouseOver="document.body.style.backgroundColor='#0ff'"
onMouseOut="document.body.style.backgroundColor='#fff'"
onclick="window.location.href='pag1.htm'">

</MAP>
<b><font face="Verdana">HAZ CLIC SOBRE EL TEXTO DE LA IMAGEN </font></b>
</center>
<p><center>
<IMG src="Imag1.jpg" width="413" height="295" border="0" USEMAP="#imagen" ISMAP>
</center></p>
</BODY>
</HTML>

Ejemplo 43 Eventos de imgenes


DHTML y Efectos multimedia 147

UNIDAD 7 - DHTML Y EFECTOS


MULTIMEDIA

7.1 - INTRODUCCIN.

El HTML Dinmico (DHTML Dynamic HTML) es una herramienta que nos va a


permitir aadir interactividad a las pginas Web. Se puede utilizar para crear
animaciones, juegos, aplicaciones, para introducir nuevas formas de navegar a travs
de los sitios Web, etc. DHTML ofrece la ventaja de que no requiere ningn tipo de
plug-in (programas que amplan la posibilidad del navegador, generalmente para
realizar una funcin especfica) para poder utilizarlo.

DHTML es una caracterstica de Netscape Communicator 4.0, y Microsoft Explorer


4.0 y posteriores versiones de ambos, adems de Firefox, Google Chrome y otros
navegadores. Es tarea del navegador mostrar y manipular las pginas Web. La forma
en que Firefox y Microsoft implementan DHTML es diferente. Por ello usar esta
tecnologa puede convertirse en tarea compleja ya que hay que conseguir que las
pginas se visualicen en los dos navegadores.

Podemos decir que DHTML es una combinacin de HTML, Hojas de estilo en


cascada (CSS, Cascading Style Sheets) y JavaScript.

Los Cascading Style Sheets (CSS) son la base del HTML Dinmico. Ofrecen una
forma de crear un conjunto de estilos que definen cmo se mostrarn los elementos
de una pgina.

Los Cascading Style Sheets Positioning (CSSP) son una extensin de los CSS, y
permiten un control a nivel de pixel sobre la localizacin de cualquier elemento de la
148 Aula Mentor Iniciacin a Javascript

pgina. Las propiedades de los CSSP se aplican, normalmente, a una


etiqueta <DIV>..</DIV>.

La manera de utilizar HTML Dinmico es mediante el uso de las marcas DIV


Dentro de estas marcas se puede colocar cdigo HTML, como por ejemplo imgenes,
tablas o formularios. La caracterstica principal de ambos objetos es que poseen un
conjunto de atributos que pueden ser modificables. Esto permite crear una infinidad
de efectos como animaciones, mens, etc.

<DIV>...</DIV> Este elemento indica un bloque de documento que se debera tratar


como una unidad lgica. A este elemento se le suele llamar de varias formas: "bloque
DIV", "elemento DIV", "capa-CSS" o, simplemente "capa". La sintaxis de una etiqueta
DIV es similar a otras etiquetas HTML:<DIV>Esto es una etiqueta </DIV>

Al aplicar CSS a una etiqueta DIV, podemos indicar en qu lugar de la pantalla se


mostrar el trozo HTML, con qu color, con qu tamao, etc... Para esto, daremos a la
etiqueta DIV un identificador (ID=identificador) para poder referirnos a l:

<DIV ID="minombre">
Esto es una etiqueta DIV con identificador
</DIV>

7.2 - DEFINICIN DE ESTILOS.

El propsito de las hojas de estilo es crear una presentacin para un elemento


particular o para un grupo de elementos. Los estilos se pueden definir de dos formas:

A - Directamente en una etiqueta de la siguiente forma:


<etiqueta STYLE="propieda1:valor;
..............;
propiedadN:valor"> ...
</etiqueta>

etiqueta es la etiqueta de HTML a la que vamos a dar una apariencia concreta


(<P>, <B>, <I>, <A>...). STYLE es el parmetro que indica que vamos a aplicar
el estilo definido a la etiqueta en la que se encuentra. propiedad ser la
DHTML y Efectos multimedia 149

caracterstica de la etiqueta que queremos modificar (color, tipo y tamao de letra,


etc). Valor es el valor que damos a la propiedad (color rojo, tamao 10, etc.)

<DIV id="saludo" STYLE="position:absolute; top:10; left:50; width:100; background-color:#AADDFF">


Hola Mundo!
</DIV>

En este ejemplo, podemos ver un objeto DIV el cual esta colocado absolutamente
(position:absolute) 50 pixels desde el margen izquierdo de la pantalla (left:50 ) y 10
pixels (top:10) desde la parte superior de la pantalla. El color de fondo es azul claro
(background-color:#AADDFF), y el ancho 100 pixels (width:200).

< HTML>
<head>
<title> Estilos</title>
</head>
<BODY>
<DIV id="saludo" STYLE="position:absolute; top:10; left:50; width:100; background-
color:#AADDFF">
Hola Mundo!
</DIV>
</BODY>
</HTML

Ejemplo 44 Estilos (I)

B - O bien se suelen definir para que se apliquen a todas las etiquetas del
documento que deseemos. Para ello usamos las etiquetas <STYLE>...</STYLE> que
se han de definir en la cabecera del documento (entre <HEAD>...</HEAD>) para
asegurarnos de que se aplicarn a todas las etiquetas. La sintaxis es:

<STYLE TYPE="text/css">
Etiq1,...,EtiqN : {propiedad1:valor;...;propiedadM:valor}
...
Etiqb,...,Etiqz : {propiedad1:valor;...;propiedadS:valor} Otros: {propiedad1:valor;...;propiedadT:valor}
</STYLE>

Etiq1, Etiq2, ...: Son las etiquetas HTML a las que se da una apariencia concreta.
Podemos aplicar el mismo estilo a varias etiquetas escribindolas separadas por
comas. Otros: Hace referencia a las llamadas clases (CLASS - precedidas de punto (.) )
150 Aula Mentor Iniciacin a Javascript

que nos permitirn definir un estilo para asignrselo a los elementos que queramos.
Tambin nos permitir crear reglas de estilo, precedidas de #.
<STYLE TYPE="text/css">
#ejemplo {aqu van los estilos (posicin, color, tamao..)}
</STYLE>

<DIV ID="ejemplo">
Esto es una etiqueta DIV con cierto estilo
</DIV>

Partimos del ejemplo anterior, definimos una regla de estilo llamada #saludo con
las caractersticas de color y posicin definidas en el ejemplo. Definimos un prrafo
con un ID igual al de la regla de estilo (<P ID="saludo">). A dicho prrafo se le aplicar
el estilo definido. El cdigo es el siguiente:

<HTML>
<head>
<title>Estilos</title>
<STYLE TYPE="text/css">
#saludo {position:absolute; top:10; left:50; width:100;background-color:#AADDFF}
</STYLE>
</head>
<BODY>
<P>Primera linea</P>
<P ID="saludo">Hola Mundo!</P>
<P>Segunda linea</P>
</BODY>
</HTML>

Ejemplo 45 Estilos (II)

En el ejemplo anterior se cre una regla de estilo para un elemento con un atributo
ID=saludo. Como el atributo ID debe ser nico, para poder asignar a varios
elementos un mismo estilo utilizamos el atributo CLASS. En este ejemplo,
definimos una clase llamada miclase con las caractersticas de color de fondo amarillo
y ancho de 100; y se la asignamos a varios elementos <P>. El cdigo es el siguiente:
DHTML y Efectos multimedia 151

<HTML><head>
<title>Estilos</title>
<STYLE TYPE="text/css">
#saludo {position:absolute; top:10; left:50; width:100;
background-color:#AADDFF}
.miclase {background-color:yellow; width:100}
</STYLE>
</head><BODY>
<P CLASS="miclase">Primera linea</P>
<P ID="saludo">Hola Mundo!</P>
<P CLASS="miclase">Segunda linea</P>
</BODY>
</HTML>

Ejemplo 46 Estilos (III)

La siguiente tabla muestra una serie de propiedades de los estilos que suelen
funcionar en los navegadores.
Propiedad Funcin
position Define cmo se posicionar la etiqueta DIV: "relative" indica que las coordenadas
estn especificadas con respecto a otro elemento, mientras que "absolute"
significa DIV se colocar en las coordenadas sealadas
left Posicin izquierda de la etiqueta DIV (nmero de pixels desde el extremo izquierdo
del navegador).
top Posicin superior de la etiqueta DIV (nmero de pixels desde el extremo
superior del navegador
width Ancho de la etiqueta DIV. Cualquier cosa que se coloque en el interior de la
etiqueta, se ajustar segn este valor.
height Altura de la etiqueta DIV.
clip Define el rectngulo de recorte de la capa. Los valores que se utilizan para definirlo
son los de las cuatro esquinas: arriba, derecha, abajo, izquierda.
clip:rect(superior,derecho,inferior,izquierdo)
visibility Determina si la capa ser "visible", "hidden" (oculta) o "inherit" (hereda visibilidad,
opcin por defecto).
z-index La profundidad de la etiqueta DIV.
background- Color de fondo de la etiqueta DIV.
color
layer- Color de fondo de la etiqueta DIV. Etiqueta para el antiguo Netscape.
background-
color
background- Imagen de fondo de la capa.
image
layer- Imagen de fondo de la capa. Etiqueta para el antiguo Netscape.
background-
image
152 Aula Mentor Iniciacin a Javascript

Resumiendo, podemos asignar propiedades a la etiqueta DIV de dos formas:

En la propia etiqueta:
<DIV ID="ejemplo" STYLE="position: absolute;
left:100; top:100; width:300>
Estilo en etiqueta DIV
</DIV>

Fuera de la etiqueta:
<STYLE TYPE="text/css">
#ejemplo {position: absolute; left:100;
top:100; width:300}
</STYLE>

<DIV ID="ejemplo">
Estiqueta DIV con estilo
</DIV>

7.3 - TRABAJAR CON HTML.

7.3.1 -MOVER TEXTO E IMGENES.

A continuacin se expone un ejemplo en el que 4 botones decidirn el movimiento


de un texto y una imagen hacia arriba, abajo, a la derecha o a la izquierda. El ejemplo
se muestra en la figura siguiente:
DHTML y Efectos multimedia 153

<HTML>
<HEAD>
<TITLE> Mover texto con Explorer </TITLE>
<STYLE TYPE="text/css">
#Parrafo {position:absolute; top:50; left:100; width:200;
height:100; background-color:aliceblue}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function MoverTexto(d) {
if(document.all.Parrafo.style.pixelTop<=0)
document.all.Parrafo.style.pixelTop=50;
if(document.all.Parrafo.style.pixelLeft<=0)
document.all.Parrafo.style.pixelLeft=100;

switch(d) {
case "A": document.all.Parrafo.style.pixelTop -= 10; break;
case "B": document.all.Parrafo.style.pixelTop += 10; break;
case "D": document.all.Parrafo.style.pixelLeft += 10; break;
case "I": document.all.Parrafo.style.pixelLeft -= 10; break;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<DIV ID="Parrafo" >
<P ALIGN="CENTER">HAZ CLIC EN LOS BOTONES PARA MOVER ESTE BLOQUE DONDE DESEES.</P>
<P ALIGN="CENTER"><img border="0" src="ESTRELLA1.GIF"></P>
</DIV>
<TABLE BORDER=0>
<FORM NAME ="FORMULARIO">
<INPUT TYPE=BUTTON VALUE="Arriba" onClick="MoverTexto('A');">
<INPUT TYPE=BUTTON VALUE="Abajo" onClick="MoverTexto('B');">
<INPUT TYPE=BUTTON VALUE="Derecha" onClick="MoverTexto('D');">
<INPUT TYPE=BUTTON VALUE="Izquierda" onClick="MoverTexto('I');">
</FORM>
</TABLE>
</BODY>
</HTML>

Ejemplo 47 Mover texto

Las posiciones iniciales de la imagen y el texto (o del prrafo DIV) son: posicin
superior 50 y posicin izquierda 100 (top:50; left:100). Al hacer clic en los botones
se ir sumando o restando 10 a estas posiciones, segn el botn pulsado.
154 Aula Mentor Iniciacin a Javascript

En el ejemplo las posiciones superior (top) e izquierda (left) se inicializan cuando


son menores o iguales a cero. No se controla la situacin de que se superen la altura y
el ancho del documento.

Se puede usar JavaScript para acceder y cambiar las propiedades de los elementos

CSS-P. La sintaxis difiere segn se use Firefox o Explorer. En Firefox, la forma general
para acceder a una propiedad CSS-P es: document.NombreCapa.NombrePropiedad o bien
document.layers["NombreCapa"].NombrePropiedad . En Explorer:

NombreCapa.style.NombrePropiedad o bien:
document.all["NombreCapa"].style.nombrePropiedad
document.all.NombreCapa.style.nombrePropiedad

donde nombrePropiedad puede ser cualquier propiedad CSS-P, como left, top,
width, position, visibility, etc...

Veamos el significado de estos objetos: document.all.Parrafo.style.pixelTop y


document.all.Parrafo.style.pixelLeft

Objeto style: Representa las caractersticas actuales para todos los posibles estilos
dados a un elemento. Algunas propiedades son:
Propiedades: Funcin
pixelHeight Contiene la altura del objeto en pixels.
pixelWidth Contiene el ancho del objeto en pixels.
pixelTop Contiene la posicin superior del objeto en pixels.
pixelLeft Contiene la posicin izquierda del objeto en pixels.

Estas propiedades se aplicarn al estilo creado de nombre Parrafo.

El siguiente ejemplo usa el objeto style para que el tipo de fuente del documento
sea Verdana: document.body.style.fontFamily = "Verdana"

Objeto all: Devuelve una referencia a la coleccin de elementos contenidos por el


objeto. La coleccin all incluye un elemento por cada etiqueta HTML vlidas.
DHTML y Efectos multimedia 155

Para poder manipular la etiqueta DIV de nombre Parrafo utilizamos la siguiente


expresin: document.all.Parrafo, al que despus aplicamos las propiedades del objeto
style. La altura de la ventana nos la da esta propiedad: document.body.clientHeight La

anchura de la ventana: document.body.clientWidth

Para que funcione en Mozilla es necesario cambiar la funcin MoverTexto():


function MoverTexto(d) {
if(document.Parrafo.top<=0)
document.Parrafo.top=50;
if(document.Parrafo.left<=0)
document.Parrafo.left=100;
switch(d) {
case "A": document.Parrafo.top -= 10; break;
case "B": document.Parrafo.top += 10; break;
case "D": document.Parrafo.left += 10; break;
case "I": document.Parrafo.left -= 10; break;
}

Los objetos document.Parrafo.top y document.Parrafo.left tienen la misma misin que


document.all.Parrafo.style.pixelTop y document.all.Parrafo.style.pixelLeft. Para poder
manipular la etiqueta DIV de nombre Parrafo utilizamos la siguiente expresin:
document.Parrafo.NombrePropiedad=valor en la que top y left tienen la misma misin
que pixelTop y pixelLeft. La altura de la ventana nos la da esta propiedad:
window.innerHeight mientras que la anchura de la ventana window.innerWidth

En este ejemplo se mover el texto sin necesidad de usar los botones.


Inicialmente el texto est en las posiciones (5,5), si la posicin Top supera la altura
de la ventana se vuelve a inicializar a 5, si la posicin Left supera la anchura tambin
la inicializamos a 5. Para que empiece a moverse el texto nada ms cargar el
documento se incluye el evento onLoad asociado a la etiqueta <BODY> invocando a la
funcin MoverTexto(). La funcin SetTimeout, espera 60 milisegundos para volver a
llamar a la funcin para que el texto se mueva por la ventana.
156 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD>
<TITLE> Mover texto sin botones </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function MoverTexto() { document.all.Parrafo.style.pixelTop +=5;
document.all.Parrafo.style.pixelLeft +=5;

if(document.all.Parrafo.style.pixelTop > (document.body.clientHeight-50) )


document.all.Parrafo.style.pixelTop=5;
if(document.all.Parrafo.style.pixelLeft > (document.body.clientWidth-50))
document.all.Parrafo.style.pixelLeft=5;
setTimeout( "MoverTexto()",60);
}
//-->
</SCRIPT>

<STYLE TYPE="text/css">
#Parrafo {position:absolute; top:5; left:5; width:200; color:red }
</STYLE>
</HEAD>
<BODY BGCOLOR=#00FFFF onLoad="MoverTexto()">
<DIV ID="Parrafo" >
<P ALIGN="CENTER">ESTE TEXTO SE MUEVEEEE!!!.</P>
<P ALIGN="CENTER"><img border="0" src="ESTRELLA1.GIF"></P>
</DIV>
</BODY>
</HTML>

Ejemplo 48 Mover texto sin botones


DHTML y Efectos multimedia 157

Para evitar los problemas derivados de las distintas formas de acceder a los
elementos de una pgina Web desde Javascript, se debe utilizar el mtodo
document.etElementById. Este mtodo permite obtener la referencia de un elemento
a partir de su id y es compatible para todos los navegadores modernos.
<IMG src=foto.jpg id=mifoto/>
<script type=text/javascript>
foto=document.getElementById(mifoto);
</script>

Una vez obtenida la referencia al elemento se pueden manipular y leer todas las
propiedades del mismo. Es importante respetar el uso de maysculas y minsculas a la
hora de escribir correctamente el mtodo getElementById.

En este ejemplo moveremos una imagen (la estrella) al hacer clic en un enlace
(onclick); dejar de moverse cuando abandonemos el enlace con el puntero del ratn
(onmouseout). Para mover otra imagen (tomy) pulsaremos una tecla (onkeydown),
mientras la tecla est pulsada se mover la imagen (slo vlido para Internet
Explorer), al soltarla (onkeyup) se parar.
158 Aula Mentor Iniciacin a Javascript

<HTML>
<HEAD>
<TITLE>7 - DHTML - Mover con un enlace - </TITLE>
<STYLE TYPE="text/css">
#Estrella {position:absolute; top:30; left:5}
#Tomy {position:absolute; top:110; left:5}
</STYLE>
<SCRIPT language=JavaScript>
corxEstrella=5;
corxTomy=5;
var clic = false; //variable que controla la pulsacin del enlace
var mov_tomy=true; //variable que controla si se mueve o no a tomy
//cada vez que se pulse una tecla se ejecuta la funcin MoverTomy
document.onkeydown = MoverTomy;
//al soltar una tecla se ejecuta la funcin PararTomy
document.onkeyup = PararTomy;
function Mover(){
if (clic) { //se ha hecho clic en el enlace, se mueve la estrella
corxEstrella +=3
document.getElementById("Estrella").style.left=corxEstrella
setTimeout ("Mover()",30);
}
}
function MoverTomy(s){
if (mov_tomy) { //tecla pulsada, se mueve tomy
corxTomy +=3;
document.getElementById("Tomy").style.left=corxTomy;
}
mov_tomy=true;
}
function PararTomy(){
mov_tomy=false;
}
</SCRIPT>
</head>
<BODY > Haz click
<A href="javascript:void(null)"
onclick= "clic=true; Mover()"
onmouseout="clic=false"> aqu </A>para mover la estrella. Para detenerla mueve el puntero del
ratn fuera del enlace.
<DIV id="Estrella"><IMG src="ESTRELLA1.GIF" ></DIV>
<BR><BR><BR><P>Presiona una tecla para mover a Tomy, sueltala para detenerlo<P>
<DIV id="Tomy"><IMG src="tommy.gif" >TOMY</DIV>
</BODY>
</HTML>

Ejemplo 49 Mover objetos con un enlace


DHTML y Efectos multimedia 159

7.3.2 -CAMBIAR EL COLOR DE TEXTO AL PASAR EL PUNTERO DEL RATN

Este ejemplo muestra cmo se puede cambiar el color de un texto al pasar el


puntero del ratn por un link.

Este ejemplo slo es vlido para Internet Explorer. Se han definido tres capas (tres
etiquetas <div> y </div>) de nombres: enlace1, enlace2 y enlace3; contienen el texto
que aparece bajo los enlaces. Se han definido dos funciones: CambiarColor() y
Restaurar(), ambas reciben como parmetro el nombre de capa que deseamos
cambiar el color. CambiarColor(capa) hace que el texto que hay en la capa (entre las
etiquetas <div> y </div>) cambie al color rojo (red) y Restaurar(capa) hace que cambie
al color inicial, es decir al negro (black). Para cambiar el color de la capa se utiliza la
siguiente expresin: document.all[capa].style.color = "red";

Para invocar a las funciones se utilizan los eventos onMouseOver y


OnMouseOut, el primero invoca a la funcin CambiarColor(), con el nombre de capa
que cambiar de color; el segundo invoca a la funcin Restaurar(), con el nombre de
capa que restaurar. Ejemplo:

onMouseOver="CambiarColor('enlace1')" onMouseOut="Restaurar('enlace1')">

La expresin: var explorer = (document.all) ? true : false; Comprueba el navegador,


si es Internet Explorer, la variable explorer toma el valor true. A la etiqueta (<A HREF>...
160 Aula Mentor Iniciacin a Javascript

</A>) se le ha aplicado el siguiente estilo: A {TEXT-DECORATION: none} que desactiva el


subrayado de los enlaces. El cdigo es el siguiente:

<html><head>
<title>Cambiar color de texto al pasar el ratn por un link</title>
<script language="javascript">
var explorer = (document.all) ? true : false; //comprobar navegador
function CambiarColor(capa){
if (explorer) document.all[capa].style.color = "red";
}
function Restaurar(capa){
if (explorer) document.all[capa].style.color = "black";
}
</script>
<STYLE type=TEXT/CSS>
A {TEXT-DECORATION: none}
</STYLE>
</head>
<body>
<center><table width="600" cellspacing="3" cellpadding="3">
<tr >
<td width="200">
<a href="unenlace.htm"
onMouseOver="CambiarColor('enlace1')" onMouseOut="Restaurar('enlace1')">
<b>OBJETOS</b></a>
</td>
<td width="200">
<a href="unenlace.htm"
onMouseOver="CambiarColor('enlace2')" onMouseOut="Restaurar('enlace2')">
<b>EVENTOS</b></a>
</td>
<td width="200"><a href="unenlace.htm" onMouseOver="CambiarColor('enlace3')"
onMouseOut="Restaurar('enlace3')">
<b>DHTML</b></a>
</td>
</tr>
<tr>
<td width="200">
<div id="enlace1" >Jerarquia de objetos, Propiedades y Mtodos, Objetos predefinidos...</div>
</td>
<td width="200">
<div id="enlace2" >Lista de eventos ms comunes: de ratn, de teclado, de formulario, etc..</div>
</td>
<td width="200">
<div id="enlace3" >DHTML, Mostrar, Ocultar y Mover capas, Mens deslizables, etc....</div>
</td>
</tr></table></center></form></body></html>

Ejemplo 50 Cambiar color al texto

Si deseamos usar getElementById para que funcione en todos los navegadores,


modificaramos la funcin CambiaColor() del siguiente modo:
DHTML y Efectos multimedia 161

function CambiaColor(capa)
{
document.getElementById(capa).style.color=red;
}
function Restaurar(capa)
{
document.getElementById(capa).style.color=black;
}

7.3.3 - OCULTAR Y MOSTRAR TEXTO E IMGENES.

Este ejemplo muestra como se pueden visualizar y ocultar capas con texto o
imgenes. Recordemos que una capa es lo que hay contenido entre las etiquetas
<DIV> y </DIV>. Inicialmente aparece una pantalla con varios hipervnculos, y una
capa (de nombre ninguna) indicando que hagamos clic en los mismos. Haciendo
clic en cada hipervnculo se mostrar la capa correspondiente.
162 Aula Mentor Iniciacin a Javascript

Veamos las capas que se han definido:

- capa0: capa que contiene los hipervnculos.

- capa1,capa2, capa3 y ninguna: son las capas que contendrn el texto e


imgenes a mostrar. Tienen las mismas caractersticas de posicin , ancho y alto, slo
vara el color de fondo. Inicialmente las capas 1, 2 y 3 estn ocultas (visibility:hidden);
la capa ninguna es la que aparecer junto con la capa0.

Para desarrollar el ejercicio se han definido las siguientes funciones:

Mostrar(n): indica la capa a visualizar. Para visualizar una capa en


document.capa.visibility='show'; document.all.capa.style.visibility='visible';

Ocultar(): oculta las capas. Para ocultar una capa en


document.capa.visibility='hide'; document.all.capa.style.visibility='hidden';
DHTML y Efectos multimedia 163

<html>
<head>
<title>7-DHTML Ver y ocultar texto - Ejemplo7_7.htm</title>
<STYLE type=text/css>
#capa0 {
background-color: turquoise; layer-background-color: turquoise;
left: 50; position: absolute; width: 508; top:20; height: 75}
#capa1 {
background-color: lightblue; layer-background-color: lightblue;
visibility:hidden; left: 100; position: absolute; width: 400; top:90}
#capa2 {
background-color: olive; visibility:hidden;
layer-background-color: olive;
left: 100; position: absolute; width: 400; top:90
}
#capa3 {
background-color: orange ; visibility:hidden;
layer-background-color: orange ;
left: 100; position: absolute; width: 400; top:90
}
#ninguna {
background-color: lawngreen;layer-background-color: lawngreen;
left: 100; position: absolute; width: 400; top:90
}
</style>
<script language="JavaScript">
var Nav=false;
var IE=false;

if( navigator.appName == "Netscape" ) //detectar el navegador


Nav = true;
else IE = true;

function Mostrar(n){ //visualiza la capa seleccionada


switch (n) {
case 1:
if (Nav) document.capa1.visibility='show';
else document.all.capa1.style.visibility='visible';
break;
case 2:
if (Nav) document.capa2.visibility='show';
else document.all.capa2.style.visibility='visible';
break;
case 3:
if (Nav) document.capa3.visibility='show';
else document.all.capa3.style.visibility='visible';
break;
164 Aula Mentor Iniciacin a Javascript

case 4:
if (Nav) document.ninguna.visibility='show';
else document.all.ninguna.style.visibility='visible';
break;
}
} function Ocultar() //oculta las capas
{
if (Nav) { document.capa1.visibility='hide'; document.capa2.visibility='hide';
document.capa3.visibility='hide'; document.ninguna.visibility='hide';
}
else {
document.all.capa1.style.visibility='hidden'; document.all.capa2.style.visibility='hidden';
document.all.capa3.style.visibility='hidden'; document.all.ninguna.style.visibility='hidden';
}
}
</script>
</head>
<body>
<div id="capa0" align="center" >
<P><B>HAZ CLIC EN LA FOTO QUE DESEES VER</P></B>
<table width="493">
<td width="147">
<p align="center">
<A href="javascript:void(null)" onclick="Ocultar();Mostrar(1)"> Primera Foto</p>
</a>
</td>
<td width="138">
<p align="center">
<A href="javascript:void(null)" onclick="Ocultar();Mostrar(2)">
Segunda Foto</p>
</a>
</td>

<td width="157">
<p align="center">
<A href="javascript:void(null)" onclick="Ocultar();Mostrar(3)">
Tercera Foto</p>
</a>
</td>
<td width="148">
<p align="center">
<A href="javascript:void(null)" onclick="Ocultar();Mostrar(4)">
Ninguna</p>
</a>
</td>
</table>
</div>

<div id="capa1" align="center" >


<b>Islandia</b>
<p><img border="0" src="glaciar.gif" width="300" height="224"></p>
<B>LAGUNA GLACIAR</B>
</div>
DHTML y Efectos multimedia 165

<div id="capa2" align="center" >


<b>Islandia</b>
<p><img border="0" src="canyon.jpg" ></p>
<B>CAON DEL JOKULSA</B>
</div>

<div id="capa3" align="center" >


<b>Islandia</b>
<p><img border="0" src="cascada.jpg" width="300" height="220" ></p>
<B>CASCADA DE LOS DIOSES</B>
</div>

<div id="ninguna" align="center" >


<HR SIZE=5>
<center><h1>HAZ CLIC EN LA FOTO A VISUALIZAR PARA QUE SE VISUALICE EN ESTA
ZONA</center></h1>
<HR SIZE=5>
</div>
</body>
</html>

Ejemplo 51 Manipulacin de capas