Anda di halaman 1dari 201

Curso de JavaScript - ndice

-1-
Indice
1 INTRODUCCIN .................................................................................... 3
1.1 Qu es JavaScript...................................................................... 3
1.2 Origen e incompatibilidades entre navegadores........................ 3
1.3 Editores HTML y JavaScript. ..................................................... 4
1.4 JavaScript y HTML..................................................................... 5
1.4.1 Pasos para crear un programa JavaScript. .................. 5
1.4.2 Dnde colocar los guiones. .......................................... 6
1.4.3 Comentarios en los guiones. ........................................ 7
1.4.4 Ocultar los guiones en los navegadores antiguos. ....... 8
1.5 Elementos de un programa........................................................ 9
2 ELEMENTOS BSICOS....................................................................... 13
2.1 Variables e identificadores. ...................................................... 13
2.2 Tipos de datos. ........................................................................ 16
2.3 Operadores y Expresiones. ..................................................... 19
2.3.1 Operador de concatenacin. ...................................... 20
2.3.2 Operadores aritmticos. ............................................. 20
2.3.3 Operadores de asignacin. ........................................ 23
2.3.4 Operadores de comparacin...................................... 24
2.3.5 Operadores lgicos. ................................................... 26
2.3.6 Orden de evaluacin de las expresiones. .................. 27
3 ESTRUCTURAS DE CONTROL........................................................... 31
3.1 Estructuras alternativas ........................................................... 31
3.1.1 Alternativa simple....................................................... 31
3.1.2 Alternativa doble......................................................... 32
3.1.3 La instruccin ? .......................................................... 33
3.1.4 Alternativa mltiple..................................................... 34
3.2 Estructuras repetitivas ............................................................. 37
3.2.1 Estructura while.......................................................... 37
3.2.2 Estructura do..while.................................................... 38
3.2.3 Estructura for.............................................................. 41
3.2.4 Bucle for..in ................................................................ 44
3.3 Utilizacin de arrays mediante estructuras de control.............. 45
3.3.1 Creacin de un Array ................................................. 46
3.3.2 Manipulacin de los elementos de un Array............... 46
3.3.3 Recorrido de los elementos de un Array .................... 47
3.3.4 Introduccin de los elementos del array desde la consola del
usuario ................................................................................ 48
3.3.5 Bsqueda en un array................................................ 49
3.3.6 El Objeto Array........................................................... 52
3.4 Ejercicios propuestos............................................................... 53
4 FUNCIONES......................................................................................... 62
4.1 Creacin de una funcin.......................................................... 62
4.1.1 Dnde declaramos una funcin?.............................. 63
4.2 Llamada a una funcin............................................................. 63
4.3 Argumentos ............................................................................. 64
4.4 Observaciones respecto a la utilizacin de funciones.............. 65
4.5 Variables locales y globales..................................................... 66
4.6 Funciones predefinidas............................................................ 66
4.7 Ejercicios ................................................................................. 68
Curso de JavaScript - ndice
-2-
5 OBJETOS............................................................................................. 76
5.1 Definicin................................................................................. 76
5.2 Jerarqua de objetos en JavaScript.......................................... 76
5.2.1 Referencia a los objetos............................................. 77
5.2.2 Los objetos del Navegador......................................... 78
5.2.3 Los objetos predefinidos ............................................ 81
5.3 Propiedades y mtodos de los objetos del navegador............. 83
5.3.1 El objeto Window........................................................ 83
5.3.2 El objeto Frame.......................................................... 92
5.3.2.1 Cargar mltiples marcos............................... 97
5.3.3 El objeto Location....................................................... 98
5.3.4 El objeto History ....................................................... 100
5.3.5 El objeto Navigator ................................................... 101
5.4 Propiedades y mtodos de los objetos del documento.......... 103
5.4.1 El objeto Document .................................................. 103
5.4.2 Los objetos Link y Anchor ........................................ 108
5.4.3 El objeto Image ........................................................ 109
5.4.4 Los objetos del formulario ........................................ 113
5.4.4.1 Los objetos text, textarea y password......... 118
5.4.4.2 Los objetos button, reset y submit .............. 120
5.4.4.3 El objeto checkbox...................................... 120
5.4.4.4 El objeto radio............................................. 122
5.4.4.5 El objeto select ........................................... 124
5.4.4.6 El objeto hidden.......................................... 128
5.5 Propiedades y mtodos de los objetos del lenguaje.............. 128
5.5.1 El objeto String......................................................... 128
5.5.2 El objeto Math .......................................................... 134
5.5.3 El objeto Date........................................................... 137
5.6 Objetos personalizados ......................................................... 141
5.7 Ejercicios ............................................................................... 142
6 EVENTOS........................................................................................... 148
6.1 Definicin............................................................................... 148
6.2 Lista de eventos ms comunes ............................................. 149
6.3 Ejemplos prcticos................................................................. 152
7 DHTML Y EFECTOS MULTIMEDIA................................................... 159
7.1 Introduccin ........................................................................... 159
7.2 Definicin de estilos............................................................... 160
7.3 Trabajar con DHTML. ............................................................ 164
7.3.1 Mover texto e imgenes ........................................... 164
7.3.2 Cambiar el color de texto al pasar el puntero del ratn por un
link..................................................................................... 170
7.3.3 Ocultar y mostrar texto e imgenes.......................... 172
7.3.4 Mens deslizables.................................................... 176
7.3.5 Archivos JavaScript externos ................................... 180
8 APNDICE.......................................................................................... 184
8.1 Valores de los colores............................................................ 184
8.2 Objetos predefinidos.............................................................. 187
8.3 Referencia rpida a objetos JavaScript ................................. 191
8.4 Referencia rpida a eventos ms comunes........................... 197
9 GLOSARIO DE TRMINOS ............................................................... 198
Curso de JavaScript - Introduccin
-3-
1 INTRODUCCIN.
1.1 Qu es JavaScript.

JavaScript es un potente lenguaje de programacin basado en scripts y enfocado a
Internet, que se utiliza fundamentalmente para:

realizacin de aplicaciones para la www.
creacin de interfaces de usuario.
aadir interactividad a las pginas web.
generacin de HTML dinmico.
control de eventos en pginas HTML
etctera.

A menudo se llama a JavaScript lenguaje de escritura de guiones. Un guin
JavaScript es un programa incluido en una pgina HTML, el texto del guin no aparece
en la pantalla del usuario. Los programas se sitan en una pgina web entre las
etiquetas <SCRIPT> y </SCRIPT>, y se ejecutarn automticamente al abrir dicha
pgina con un navegador. No se requiere compilador. Ser el propio navegador el
encargado de interpretar y ejecutar el cdigo JavaScript.

NOTA
No debemos confundir el lenguaje JavaScript con el lenguaje Java. Algunas de las diferencias
son:
JavaScript Java
- Es un lenguaje sencillo. -Es un lenguaje ms complejo y completo; con
una estricta orientacin a objetos.
- Diseado para desarrollar aplicaciones para
la www.
- Diseado para desarrollar aplicaciones de
propsito general.
- Lenguaje interpretado por el navegador. No
requiere compilador.
- Lenguaje compilado.
- Ms flexible. No requiere declarar variables
ni tipos (aunque es aconsejable hacerlo).
- Tiene reglas mucho ms rgidas. Hay que
declarar todas las variables con sus tipos,
etctera.

1.2 Origen e incompatibilidades entre navegadores.

JavaScript naci en Netscape bajo el nombre de LiveScript (primera versin de
JavaScript). Desde su nacimiento ha ido evolucionando junto con los navegadores que
lo soportan Navigator de Netscape e Internet Explorer de Microsoft.

Por su parte la empresa MicroSoft ha realizado una implementacin de este
lenguaje para su navegador denominada JScript.

A continuacin se muestran las principales versiones del lenguaje
JavaScript y las versiones de los navegadores que lo soportan. Tambin se
pueden observar las versiones de JScript equivalentes.

Versin de
JavaScript
Versin de Navigator Versin de Internet
Explorer
Versin de
JScript
Curso de JavaScript - Introduccin
-4-
JavaScript 1.0 Navigator 2.0 Internet Explorer 3.0 Jscript 1
JavaScript 1.1 Navigator 3.0 Internet Explorer 3.02 Jscript 2
JavaScript 1.2 Navigator 4.0 Internet Explorer 4.0 Jscript 3
JavaScript 1.3 Navigator 4.5 Internet Explorer 5.0 JScript 5
JavaScript 1.4 Navigator 5.0 Internet Explorer 5.5... Jscript 5.5...

Nota: Para saber qu versin Jscript tenemos instalada consultamos las propiedades
del archivo jscript.dll. Hacemos clic en la ficha versin para ver la versin.

Cada nueva versin del navegador es capaz de ejecutar un programa
JavaScript escrito para esa versin o para cualquiera de las versiones anteriores (por
ejemplo, Internet Explorer 5.0 y Navigator 4.0 pueden ejecutar programas escritos para
JavaScript 1.2, 1.1 y 1.0.). Sin embargo, algunas caractersticas avanzadas de las
versiones ms recientes de JavaScript pueden no estar soportadas por algunas
versiones antiguas del navegador.

Por su parte, JScript tiene una compatibilidad ms restringida ya que se
circunscribe al mbito del navegador de MicroSoft (utiliza caractersticas que no estn
soportadas por los navegadores de NetScape).

1.3 Editores HTML y JavaScript.

Al ser JavaScript texto normal, se puede utilizar casi cualquier tipo de editor de
textos. Lo mejor es empezar con un programa que slo admita texto normal como su
formato estndar como por ejemplo el Bloc de Notas (NOTEPAD.EXE) de Windows
95, 98 o NT. Tambin podemos utilizar el Worpad de Windows 95, 98 o NT.















Figura1_1. Editor
Bloc de Notas.





La Figura1_1, muestra el Bloc de Notas para escribir cdigo HTML con
JavaScript. Con independencia del programa que usemos no debemos olvidar guardar
el archivo con la extensin .htm o .html.

Tambin se puede usar alguno de los editores HTML como Adobe Golive,
Microsoft Front Page, Home Page de FileMaker o Dreamweaver de Macromedia, etc.
Curso de JavaScript - Introduccin
-5-
Basta con conmutar a su modo Fuente HTML o HTML para empezar a escribir
guiones.


Figura1_2. Editor Microsoft FrontPage 2000.


La Figura 1_2 muestra el editor FrontPage 2000 en su modo HTML, con un
documento htm, desde aqu se pueden crear y modificar guiones JavaScript y cdigo
HTML.

1.4 JavaScript y HTML.

Los programas JavaScript se encuentran en 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>.

1.4.1 Pasos para crear un programa JavaScript.

Para crear un programa JavaScript debemos seguir los siguientes pasos:

1. Crearemos una pgina HTML utilizando cualquier editor, por ejemplo el Bloc de
Notas. (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 .htm
5. Para ejecutar el programa solamente tendremos que abrir el archivo con el
navegador.
Curso de JavaScript - Introduccin
-6-

Ejemplo1_1.htm: El siguiente cdigo HTML:

<HTML>
<HEAD><TITLE>Mi primer guin</TITLE>
</HEAD>
<BODY>
Esto es HTML<br>
<b>
<SCRIPT LANGUAGE="JavaScript">
document.write("Esto es JavaScript.")
</SCRIPT>
</b>
<br>Esto es HTML
</BODY>
</HTML>

Producir como resultado la aparicin de tres lneas en la pantalla.

Esto es HTML
Esto es JavaScript.
Esto es HTML

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.

El modificador LANGUAGE con el valor "JavaScript" no es obligatorio pero
permite indicar al navegador cul es el lenguaje de SCRIPT que vamos a utilizar
incluyendo tambin la versin. Por defecto se asume que "JavaScript" equivale a
"JavaScript1.1".

(Tambin se podra haber puesto LANGUAGE=JAVASCRIPT sin usar comillas.)

1.4.2 Dnde colocar los guiones.

Los guiones se pueden colocar en dos sitios de la pgina HTML:

En la cabecera de la pgina entre las etiquetas <HEAD> y </HEAD> o
En el cuerpo de la pgina entre las etiquetas <BODY> y </BODY>.

En el ejemplo anterior el guin se escribi entre las etiquetas <BODY> y
</BODY>.

Cuando el script se incluye en la cabecera de una pgina ste suele estar
estructurado en forma de funciones que se ejecutan slo cuando se las invoca desde
otro script o cuando se produce el evento al que estn asociadas.

Cuando el script se incluye en el cuerpo de una pgina, las instrucciones que lo
forman se ejecutan en el momento de la carga de la pgina en el navegador.
Curso de JavaScript - Introduccin
-7-


Ejemplo1_2.htm: El siguiente script incluye una funcin en la cabecera del
documento HTML, desde el script del cuerpo de la pgina se llama a la funcin en el
momento de la carga de la pgina en el navegador:

<HTML>
<HEAD><TITLE>Mi primer guin</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function vertexto(){
document.write("Esto es JavaScript.")
}
</SCRIPT>

</HEAD>
<BODY>
Esto es HTML<br>
<b>
<SCRIPT LANGUAGE="JavaScript">
vertexto()
</SCRIPT>
</b>
<br>Esto es HTML
</BODY>
</HTML>

El resultado que se obtiene al visualizar la pgina es el mismo que el obtenido en
el Ejemplo1_1.htm.

1.4.3 Comentarios en los guiones.

JavaScript permite aadir comentarios al cdigo que no sern ejecutados ni
visualizados por el navegador. Estos comentarios sirven para explicar el cdigo
del programa; por ejemplo, para aclarar una expresin compleja, para indicar
cul es el contenido de una variable, etctera. Se visualizarn cuando editemos
el archivo HTML.

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
caracteres inversa: asterisco y barra inclinada a la derecha (*/), tal como
podemos observar en el siguiente fragmento de cdigo:

Curso de JavaScript - Introduccin
-8-
/* Este es un ejemplo de comentario
de varias lneas */

1.4.4 Ocultar los guiones en los navegadores antiguos.

Los navegadores antiguos como Netscape1.x, las versiones anteriores
de Microsoft Internet Explorer 3 no entienden JavaScript. Por ello conviene
incluir el cdigo de los scripts dentro de un comentario HTML, para que
aquellos navegadores que no reconozcan la etiqueta <SCRIPT> no muestren
las sentencias del mismo como texto plano.

Un comentario HTML tiene la siguiente sintaxis:

<!-- aqu va el comentario -->

Ejemplo:

<!--Esto es un comentario que puede aparecer
en cualquier lugar de un documento HTML -->

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 Netscape
Navigator es necesario incluir un comentario JavaScript antes de finalizar el
comentario HTML.


Ejemplo1_3.htm: El siguiente ejemplo muestra el uso de comentarios HTML para
ocultar guiones JavaScript:

<HTML>
<HEAD><TITLE>Mi primer guin</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin para navegadores antiguos

function vertexto(){
document.write("Esto es JavaScript.")
}

Curso de JavaScript - Introduccin
-9-
// 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>
<br>Esto es HTML
</BODY>
</HTML>

1.5 Elementos de un programa.

En una primera aproximacin podemos decir que un programa es un conjunto
de instrucciones que realiza una determinada tarea para la que ha sido diseado.
Los programas, por tanto, se componen bsicamente de instrucciones que determinan
las acciones que se realizaran durante la ejecucin del programa.

Tradicionalmente estas instrucciones se catalogan como:
Instrucciones declarativas o declaraciones: declaran los objetos que van a
intervenir en el programa (por ejemplo las variables).
Instrucciones de asignacin: se utilizan para asignar valores.
Instrucciones de entrada / salida: que permiten introducir / enviar datos
desde / hasta un dispositivo.
Instrucciones de control: determinan la secuencia ejecucin del programa.

Veamos un ejemplo:

Ejemplo1_4.htm: El siguiente programa permite al usuario introducir un importe en
pesetas y calcula y visualiza el importe equivalente en euros.

<HTML>
<HEAD><TITLE>Mi primer programa</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
Curso de JavaScript - Introduccin
-10-
{
alert("Importe erroneo");
}
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

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.

- 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.

- La instruccin if (ImportePtas > 0) es una instruccin de control. Comprueba
el resultado de la condicin (ImportePtas > 0); 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 erroneo");
Visualizan el contenido de la variable ImporteEuros, o el texto "Importe
erroneo", 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> determina el final del script.

INSTRUCCIONES DE ENTRADA Y SALIDA EN JAVASCRIPT:
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:

Curso de JavaScript - Introduccin
-11-
La instruccin document.write("mensaje") permite escribir un texto en el
documento actual. Ya hemos visto un ejemplo de utilizacin en el epgrafe
JavaScript y HTML en esta misma unidad.

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.

Por ejemplo, la instruccin: alert("Importe erroneo"); dar como resultado la
siguiente ventana:









Con Microsoft Internet Explorer Con Netscape Navigator

Figura1_3a y Figura1_3b. Ejemplo de ejecucin de alert

La instruccin prompt muestra una ventana de dilogo que incluye:
- Un texto o mensaje.
- Un rea de entrada de datos.
- 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.

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 en su
caso).
- Cancelar cancela la entrada que pudiese haber introducido el usuario y
asume la entrada por defecto.

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 " ".

En el ejemplo anterior, la instruccin:

ImportePtas = prompt("Introduce el importe en pesetas:",1);
Curso de JavaScript - Introduccin
-12-

Dar como resultado la aparicin de la siguiente ventana:

Figura1_4a y Figura1_4b. Ejemplo de ejecucin de prompt.


Con Microsoft Internet Explorer


Con Netscape Navigator

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.





Curso de JavaScript Elementos Bsicos.
-13-
2 ELEMENTOS BSICOS.

Los elementos bsicos con los que nos encontraremos en un programa
JavaScript se resumen a continuacin:


Variables Posiciones de memoria a las que se asigna un nombre y a las que se puede
acceder para obtener un valor.
Operadores Smbolos que pueden usarse para calcular o comparar valores.

Ejemplo: Suma + 1000
Expresiones Son combinaciones de variables, constantes y operadores que devuelven un valor
realizando determinadas operaciones.
Ejemplo: Suma = Suma +1000
Sentencias o
Instrucciones
Una sentencia puede incluir cualquier elemento de la grmatica de JavaScript.
Funciones Secuencia de sentencias que tienen un nombre y que puede ejecutarse las veces
que sea necesario llamndola por su nombre.


El lenguaje presenta algunas normas o reglas que deben seguirse:

Distingue maysculas de minsculas. No es lo mismo definir una variable
suma que Suma.
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.1 Variables e identificadores.

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.

Con una variable se pueden realizar las siguientes operaciones:

CREACIN DE LA VARIABLE.
Curso de JavaScript Elementos Bsicos.
-14-
Las variables se crean normalmente al comienzo del programa utilizando la
palabra var seguida del nombre de la variable que queremos crear, como en
los siguientes ejemplos:

var nombre;
var edad;

Se pueden declarar dos o ms variables en una instruccin. En estos casos se
indicar la palabra reservada var y, a continuacin, la lista de las variables que
queremos declarar (los nombres separados por comas):

var nombre, edad;
El nombre o identificador de la variable podr estar formado por:

- letras (maysculas y minsculas),
- caracteres de subrayado (_),
- el smbolo de dlar ($)
- y nmeros (del 0 al 9);
- pero no podr comenzar por un nmero.
- Tampoco podr coincidir el nombre con alguna de las palabras
reservadas del lenguaje (nombres de comandos, etctera).

A continuacin se muestran algunos ejemplos de identificadores vlidos y otros
ilegales:

Ejemplos de identificadores vlidos Ejemplos de identificadores ilegales
var vApellido1; var 1Apellido;
var $1Apellido; var #1Apellido;
var _Apellido var Apellido1;


NOTA
Como JavaScript diferencia maysculas y minsculas en los identificadores es
muy fcil confundirse por ello debemos seguir dos normas:

1- Declarar todos los identificadores al comienzo del programa para poder
comprobar rpidamente cualquier duda
2- Establecer un criterio a la hora de construir identificadores y seguirlo
siempre (Determinar cuando se utilizan maysculas, minsculas y sub-
guiones, etctera). A la hora de establecer este criterio deberemos valorar
tambin la legibilidad del programa.


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;

Curso de JavaScript Elementos Bsicos.
-15-
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.

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.

Ejemplo2_1.htm:

<HTML>
<HEAD><TITLE>Ejemplo2_1</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>

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.

Curso de JavaScript Elementos Bsicos.
-16-

Figura2_1. Ejecucin de una instruccin alert que incluye una expresin numrica.

Nota: JavaScript elimina automticamente las variables al finalizar el programa
en el que se han declarado .

2.2 Tipos de datos.

La informacin que maneja un programa puede ser de distintos tipos:

TEXTO o CADENAS :

Son cadenas de caracteres. Se pueden delimitar con comillas simples o
dobles indistintamente. A continuacin podemos observar algunos ejemplos:

Ej: "Pulse una tecla para continuar", 'Cristina', "alk&d28"

Se pueden realizar operaciones de concatenacin mediante el operador +
Ej.: "Hola " + "Mundo"
dar como resultado "Hola Mundo"

Tambin podemos incluir dentro de una cadena caracteres especiales
como salto de lnea (\n), salto de pgina (\f), tabulador (\t) o retorno de carro
(\r).

Ej.: "Hola \nMundo" en una instruccin alert producir el siguiente resultado:


Figura2_2. Ejemplo utilizacin de \n

Si dentro de una cadena queremos incluir algn carcter de comilla simple o
doble podremos utilizar una de las siguientes opciones:

a) Escribir el carcter directamente siempre que sea distinto del utilizado para
delimitar la cadena. Por ejemplo si queremos que aparezca el texto: 'Ests
en "Mi PC"' Podemos hacerlo tal como aparece aqu usando comillas
simples para delimitar la cadena.
b) Escapar el carcter que queremos que no sea interpretado. Por ejemplo:
"Ests en \"Mi PC\"".

En los dos casos el resultado ser el mismo:

Curso de JavaScript Elementos Bsicos.
-17-

Figura2_3. Visualizacin del carcter " en una alerta

Cuando necesitemos utilizar el carcter \ como tal dentro de una cadena
deberemos escaparlo utilizando el mismo carcter dos veces (\\).

Ejemplo: alert("No existe el fichero
a:\\drivers\\configura.dat");


Figura2_4. Visualizacin de \ dentro de una alerta.

NMEROS:

Son valores numricos que se pueden expresar en cualquiera de los formatos
habituales. Permiten realizar operaciones aritmticas utilizando los operadores
apropiados.

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 de 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).
Curso de JavaScript Elementos Bsicos.
-18-

0xF34 (en hexadecimal)
0567 (en octal)

Por ejemplo, la siguiente instruccin: alert(0xF34 +"\n"+ 0567);
Producir el siguiente resultado:

Figura2_5. El nmero 0xF34 (hexadecimal) y el 0567 (octal) se transforman a decimal.

Observamos que JavaScript ha transformado 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.

Atencin: debemos tener cuidado al utilizar 0 (cero) al comienzo de un nmero
ya que JavaScript interpretar que se trata de un nmero octal. Por ejemplo, el
siguiente fragmento de cdigo:

alert(315 +"\n"+ 227 +"\n"+ 045);

Dar como resultado:
Figura2_6. Si el primer dgito de un nmero es 0 JavaScript podr interpretar
que est en octal y har las trasformaciones oportunas.


Observamos que mientras los nmeros 315 y 227 no han sido
transformados, el 045 ha sido transformado a 35 ya que al anteponer un 0 al
nmero JavaScript lo interpretar como octal.

Aunque los tipos cadena y numrico son los ms habituales, JavaScript
soporta tambin otros tipos:

BOOLEANO (BOOLEAN)

Curso de JavaScript Elementos Bsicos.
-19-
Son valores lgicos que representan el valor verdadero (true) o falso (false).
Normalmente estos valores se obtienen como resultado de una comparacin, o de la
evaluacin de una expresin lgica.

OBJETO (OBJECT)

Contienen objetos que pueden tener propiedades y mtodos.

NULO (NULL)

El valor null nos puede servir para averiguar si hemos inicializado o no una
variable, comprobndolo con un if.

INDEFINIDO (Undefined).

Un valor indefinido es el que corresponde a una variable que ha sido creada
pero no le ha sido asignado un valor.

2.3 Operadores y Expresiones.

Los operadores sirven para manejar o transformar la informacin formando
expresiones.

Las expresiones son combinaciones de objetos como variables, constantes y
operadores que devuelven un valor realizando determinadas operaciones.

Normalmente en una expresin encontramos:

Operandos son los objetos cuyo valor se manipula u opera.
Operador u operadores son los objetos que determinan el tipo de operacin a
realizar:

Por ejemplo, la expresin 2 + 3 combina dos constantes numricas mediante la
operacin de suma.

Todas las expresiones producen o devuelven un resultado de un cierto tipo
que estar determinado por el tipo de objetos que manipula y por las
operaciones realizadas. Podemos establecer la siguiente clasificacin:



Tipo de expresin Tipo de valor devuelto Ejemplo
Expresiones de cadena Cadena de caracteres 'Hola' + 'Mundo'
Expresiones aritmticas . Numrico 34 / 7
Expresiones relacionales o de
comparacin
Lgico 3 < 5
Expresiones lgicas Lgico 3 < 5 && 5 < 7
Expresiones de asignacin. El valor asignado Num1 = 5

Observaciones:
Curso de JavaScript Elementos Bsicos.
-20-
No todas las expresiones requieren de la utilizacin de operadores, en realidad
tan solo se requiere que devuelva un valor. En este sentido podemos
considerar que una constante o una variable constituyen por s solas una
expresin.
En las expresiones pueden intervenir otros elementos como funciones que
estudiaremos ms adelante.

En JavaScript se emplean los siguientes operadores:

2.3.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.3.2 Operadores aritmticos.

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

Ejemplo2_2.htm: Ejemplo de operadores aritmticos.

<HTML>
<HEAD><TITLE>Ejemplo2_2</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>

Curso de JavaScript Elementos Bsicos.
-21-

Figura2_7. Expresiones con operadores aritmticos.

JavaScript dispone tambin de operadores de incremento (++) y
decremento (--) que resultan muy tiles para realizar, de manera eficaz,
operaciones muy frecuentes en programacin como son las que realizan los
contadores:

INCREMENTO (++) incrementa el valor del operando en una unidad. En
realidad realiza dos operaciones: suma uno al operando y el resultado lo guarda
en la variable que figura como operando.

Por ejemplo, la instruccin Conta++; aumentar en 1 el valor de Conta.

Este operador modifica el valor del operando incluyendo una asignacin de
manera implcita (a diferencia de los operadores anteriores que debe realizarse
la asignacin de manera explcita).

El uso de este operador requiere que el operando sea una variable ya que
de lo contrario no se podr realizar la asignacin tal como ocurre en la
siguiente instruccin: 5++;

El comportamiento de este operador cuando es el nico que interviene en
la expresin es relativamente sencillo. A continuacin veremos cmo se
comporta cuando forma parte de una expresin ms compleja. Estudiemos la
siguiente expresin:

Total = Conta++;
Suponiendo que Total y Conta son variables y que Conta tiene el valor 25 justo
al llegar a esta lnea del programa, el comportamiento de esta instruccin ser el
siguiente:

1. Se asigna el valor de la variable Conta a la variable Total, por tanto,
esta ltima quedar con el valor 25.
2. Se incrementa el valor de la variable Conta, con lo que sta quedar
con el valor 26.

Al finalizar la ejecucin de la instruccin la variable Conta valdr 26 y la variable
Total tendr el valor 25. Conta primero devuelve su valor a la expresin y despus se
reliza el incremento. Esta operacin recibe el nombre de post-incremento.

Curso de JavaScript Elementos Bsicos.
-22-
El comportamiento de este operador se modifica cuando se sita delante
del operando como aparece en la siguiente expresin:

Total = ++Conta;
Al situar el operador delante del operando se realizar en primer lugar el
incremento y posteriormente la variable Conta devolver su valor. Esta
operacin recibe el nombre de pre-incremento.

DECREMENTO (--) el comportamiento de este operador es igual que el
operador de incremento con la diferencia de que en lugar de sumar uno en cada
operacin se resta una unidad. Tambin permite situarlo delante o detrs del
operador. Su utilizacin es menos frecuente.

Ejemplo2_3.htm: El siguiente programa y su resultado muestran el comportamiento
de los operadores de incremento y las diferencias entre el pre-incremento y el post-
incremento.

<HTML>
<HEAD><TITLE>Ejemplo2_3</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo incrementos*/

var Num1 = 2, Num2 = 4, Num3 = 6, Num4 = 8;
var Num5, Num6;

Num1++;
++Num2;
Num5 = Num3++;
Num6 = ++Num4;

alert(
" Num1: \t" + (Num1)
+"\nNum2: \t" + (Num2)
+"\nNum3: \t" + (Num3)
+"\nNum4: \t" + (Num4)
+"\nNum5: \t" + (Num5)
+"\nNum6: \t" + (Num6)
);
</SCRIPT>
</BODY>
</HTML>

La ejecucin de este programa producir el siguiente resultado:



Figura2_8. Comportamiento de los operadores de pre
y post incremento.





Curso de JavaScript Elementos Bsicos.
-23-

En el programa anterior podemos realizar las siguientes observaciones:

- Num1 y Num2 quedan incrementados en una unidad al aplicar el post-
incremento y pre-incremento.
- Num3 y Num4 ven incrementado tambin su valor por las expresiones de
post y pre-incremento en las que participan (Num5 = Num3++ y Num6 =
++Num4); quedando el primero con un valor de 7 y el segundo con un valor
de 9.
- Num5 y Num6 tambin modifican su valor como resultado de las
asignaciones arriba indicadas; pero mientras que Num5 toma el valor
antes del incremento, Num6 toma el valor despus del incremento.

2.3.3 Operadores de asignacin.

Para asignar un valor a una variable se utiliza el operador de asignacin (=).
As, podemos asignar a la variable Importe el valor 5 empleando dicho operador
(Importe = 5;).

En JavaScript podemos tambin utilizar operadores que adems de la
asignacin realizan otras tareas como sumar, restar, multiplicar, dividir,
etctera. El todos los casos el formato de utilizacin es el siguiente:

operando1 operador operando2
La variable que figura como operando1 recibe el resultado de realizar una
cierta operacin (suma, resta, multiplicacin, etctera) entre dicha variable y el
operando2.

ASIGNACIN Y SUMA (+=) Este suma el valor de la variable que figura a su
izquierda (operando1) al valor de la expresin que figura a su derecha
(operando2) y asigna el resultado a la variable (operando1).

Ejemplo: consideremos el siguiente fragmento de programa y el resultado.
var Importe = 1;
Importe += 5;

Declaramos la variable importe y le asignamos el valor 1.
En la lnea siguiente utilizamos el operador (+=) que sumar los valores
situados a ambos lados y asignar el resultado de la suma a la variable Importe
situada a su izquierda.
Podemos comprobar la instruccin Importe += 5; es equivalente a escribir
Importe = Importe + 5;.
Los dems operadores de asignacin tienen un comportamiento muy similar:

ASIGNACIN Y RESTA (-=)
Ej.: A -= B; equivale a A = A B;

ASIGNACIN Y MULTIPLICACIN (*=)
Ej.: A *= B; equivale a A = A * B;

ASIGNACIN Y DIVISIN (/=)
Curso de JavaScript Elementos Bsicos.
-24-
Ej.: A /= B; equivale a A = A / B;

ASIGNACIN Y MDULO (%=)
Ej.: A %= B; equivale a A = A % B;


Ejemplo2_4.htm: El siguiente programa muestra el funcionamiento de los operadores
de asignacin +=, -=, *=, /= y %=. En el programa se utilizan cinco variables llamadas
Suma, Resta, Multi, Divi y Modu ; se realizan las correspondientes operaciones de
asignacin y despus se visualiza en una ventana los nombres de las variables y su
valor.

<HTML>
<HEAD><TITLE>Ejemplo2_4</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>

El resultado de la ejecucin del programa ser:

Figura2_9. Resultado de la ejecucin del programa.





2.3.4 Operadores de comparacin

Se emplean para comparar dos valores, y devuelven, a su vez, un valor que es
el resultado de la comparacin (verdadero true o falso false). Los utilizaremos
frecuentemente en programacin cuando debamos tomar decisiones en funcin del
valor de un objeto del programa (Ejemplo: si SALARIO es menor de 4000000
entonces APLICAR_BONIFICACION).

El formato genrico de estas operaciones es:

Curso de JavaScript Elementos Bsicos.
-25-
operando1 operador_de_comparacion operando2

En JavaScript estn disponibles los siguientes operadores de comparacin:

Igual (==)
Distinto (<>)
Mayor que (>)
Menor que (<)
Mayor o igual (>=)
Menor o igual (<=)

El operador de igualdad (==) es, quiz, el ms utilizado. Comprueba si el valor de la
expresin que aparece a su izquierda es igual al valor de la expresin que aparece a
su derecha; en caso afirmativo devuelve el valor true, y en caso contrario el valor false.

Ejemplo2_5.htm: El siguiente programa y la captura de pantalla muestran el
comportamiento del operador de comparacin (Figura2_10):

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


Figura2_10. Las expresiones de comparacin
devuelven un valor lgico.



Los dems operadores de comparacin tienen un comportamiento similar ( A > B
devolver el valor true si el valor de A es mayor que el valor de B, de lo contrario
devolver false;...).variando nicamente la condicin de la comparacin.

Observaciones:
El valor (true o false) que devuelven estos operadores es de tipo
BOOLEANO.
Debemos hacer algo con el valor que devuelven: asignarlo a otra
variable (de tipo BOOLEANO), ejecutar una instruccin de control (como
veremos ms adelante), visualizarlo, etctera.
No debemos confundir el operador de igualdad (==) que es un operador
de comparacin, con el operador de asignacin (=).
Los operadores de comparacin se utilizan frecuentemente con
cadenas de caracteres (Nombre == 'Miguel') para realizar bsquedas,
comprobaciones, etctera. En estos casos las comprobaciones se basan
en el valor de los caracteres en los cdigos ASCII y UNICODE.
Curso de JavaScript Elementos Bsicos.
-26-

Nota: A partir de la versin 1.3 JavaScript dispone tambin de los operadores de
comparacin estrictamente igual (===) y estrictamente distinto (!==).

Las expresiones lgicas se utilizan habitualmente en las instrucciones de control de
flujo del programa para determinar las acciones a realizar en funcin del valor de una
expresin.
Supongamos que disponemos de tres variables A, B y C. Todas ellas tienen un cierto
valor, y queremos asignar a la variable C la diferencia entre A y B pero slo en el caso
de que A sea menor que B. En JavaScript lo indicaremos mediante la instruccin:
if (A < B) {C = B A};
La clusula if se utiliza para realizar o no determinadas acciones en funcin de una
condicin. La estudiaremos ms adelante junto con otras estructuras de control de
flujo; por el momento podemos anticipar el siguiente formato bsico:

if (condicin) {acciones};

Donde condicin es cualquier expresin que devuelva un valor de tipo booleano y
acciones son las instrucciones que se ejecutarn (en el caso de que solamente sea
una instruccin se puede omitir los corchetes).

2.3.5 Operadores lgicos.

Ya hemos explicado que los operadores de comparacin devuelven un valor de
tipo lgico verdadero/falso (true/false). En ocasiones se necesita trabajar con varias
expresiones de comparacin (por ejemplo cuando queremos formar una condicin
comprobacin o bsqueda que cumpla dos condiciones) en estos casos debemos
recurrir a los operadores lgicos AND (&&), OR (||) y NOT (!).

Supongamos que queremos comprobar si el SALARIO de un empleado supera
una determinada cantidad (150000), y si, adems, tiene ms de dos hijos, para realizar
una determinada accin (APLICAR_PCTIRPF2). En este caso emplearemos el
operador lgico AND. Este operador devolver el valor true cuando los dos
operandos o expresiones son verdaderas. Simplificando podemos decir que se
utiliza cuando queremos que se cumplan las dos condiciones.

Ejemplo:
Si el SALARIO > 150000 AND NUMERO_HIJOS > 2 entonces
APLICAR_PCTIRPF2

Cuando lo que queremos es comprobar que se cumple alguna de las dos
condiciones utilizaremos el operador OR (||). Este operador devolver el valor true
cuando alguno de los dos operandos o expresiones es verdadero (cuando se
cumple la primera condicin, o la segunda o ambas).

Ejemplo:
Si OFICIO == 'Vendedor' OR CATEGORIA == 'Director' entonces
AP_COCHE_EMPRESA.

En el ejemplo anterior se ejecutar el procedimiento AP_COCHE_EMPRESA
cuando se cumple alguna de las condiciones ( el OFICIO es 'Vendedor' o la categora
es 'Director).

Curso de JavaScript Elementos Bsicos.
-27-
El operador NOT (!) se usa para negar una condicin o expresin lgica. As,
para comprobar que un empleado no est casado podemos hacerlo: ...NOT
CASADO... (suponiendo que existe la variable CASADO de tipo BOOLEANO).

NOTA
El formato que se aplica en los ejemplos anteriores no se ajusta a la sintaxis del
lenguaje JavaScript. Se trata de un formato pseudocodificado, a medio camino entre
el lenguaje natural y los lenguajes de programacin. Es muy intuitivo y nos servir para
ilustrar conceptos sin necesidad de introducir otros nuevos. A continuacin incluimos
los comandos equivalentes en JavaScript.

if (SALARIO > 150000 && NUMERO_HIJOS > 2) APLICAR_PCTIRPF2;

if(OFICIO =='Vendedor' || CATEGORIA == 'Director')
APCOCHE_EMPRESA;

if !CASADO ...;

A continuacin se detallan las tablas de valores de los operadores lgicos AND, OR y
NOT.
Operador AND: && Operador OR: || Operador NOT: !
Operando
1
Operando
2
Resultado Operando
1
Operando
2
Resultado Operando1 Resultado
true true true true true true
true false false true false true
true false

false true false false true true
false false false false false false
false true

Resumiendo, podemos afirmar que:
El operador AND devolver true cuando los dos operandos sean verdaderos,
y false en cualquier otro caso.
El operador OR devolver true cuando alguno de los operandos sea
verdadero (con independencia de que el otro sea verdadero o falso); y false
cuando los dos operandos sean falsos.
El operador NOT devuelve true cuando el operando es falso, y false cuando
el operando es true.

Podemos formar expresiones lgicas en las que intervengan varios operadores
lgicos de manera similar a como se hara con expresiones aritmticas en las que
intervienen varios operadores aritmticos. En todo caso deberemos tener en cuenta la
prioridad o precedencia del operador ya que puede afectar al resultado de la
operacin, como veremos en el siguiente apartado.

2.3.6 Orden de evaluacin de las expresiones.

Cuando en una expresin se realizan varias operaciones, el orden de
evaluacin de los operandos puede determinar el resultado de dicha expresin.

Curso de JavaScript Elementos Bsicos.
-28-
Por ejemplo, la expresin 12 + 24 / 6 dar un resultado distinto si se realiza
primero la suma y despus la divisin (6), que si se invierte el orden de evaluacin
(primero la divisin y luego la suma en cuyo caso el resultado ser 16).

JavaScript tiene asignado un orden de prioridad o precedencia a cada uno de
los operadores que determina el orden en el que se evaluarn en una expresin. La
tabla siguiente muestra los operadores disponibles agrupados y ordenados de mayor a
menor por su orden de precedencia.

Prioridad Operador Operacin
1 ++, --, -, ! incremento, decremento, cambio de signo,
negacin
2 *, / , % multiplicacin, divisin, mdulo
3 +, - suma y resta
4 < , > , <= , >= mayor, menor, mayor o igual, menor o igual
5 ==, != igual, distinto
6 && conjuncin
7 || inclusin
8 =, +=, -=, *=, /=, %= asignacin, asignacin y suma, etctera.

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

Podemos comprobar que la expresin de nuestro ejemplo en JavaScript dar
como resultado 6 ya que la divisin se realiza antes que la suma.

Esta es la prioridad establecida por defecto. Se puede cambiar utilizando
parntesis. En la expresin anterior, si queremos que la suma se realice antes que la
divisin, lo indicaremos: (12 + 24) / 6; en este caso el resultado ser 16


NOTA:
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.


Ejemplo: Suponiendo que disponemos de las variables Num1, Num2, Num3 y Num4
con los valores 0, 1, 2 y 3 respectivamente, determinar el orden de evaluacin e
indicar cul ser el valor devuelto por las siguientes expresiones:

6 + Num3 / Num4
-6 + Num3 / Num4
Num4 / Num2++
Curso de JavaScript Elementos Bsicos.
-29-
Num3 Num4 == Num2 + Num1
Num1 > Num2 || Num3 < Num4
Num3 + Num4 != 8 && Num1 / Num3 > 9
Num3 + Num4 != 8 && !(Num1 / Num3 > 9)

A continuacin, escribir un programa que visualice el resultado de cada
una de las expresiones.

SOLUCIN:
6 + Num3 / Num4
Primero se realiza la divisin y despus la
suma. El resultado ser: 6.666
-6 + Num3 / Num4
Primero que se realiza el cambio de signo,
despus se evala igual que la anterior. El
resultado ser: -5.333
Num4 / Num2++
Se trata de una divisin en la que uno de
los operandos es un post-incremento, por
tanto, se realiza la divisin con el valor
antes del incremento. El resultado ser: 3
Una vez realizada la divisin se llevar a
cabo el incremento de Num2. Para que se
realizase primero el incremento
escribiremos: Num4 / ++Num2; en cuyo
caso el resultado ser 1.5
Num3 Num4 == Num2 + Num1
Primero se evala por un lado la suma y
por otro la resta. Despus se compara el
resultado de ambas. El resultado ser
false
Num1 > Num2 || Num3 < Num4
En primer lugar se realizan las dos
comparaciones. Despus se opera con los
valores obtenidos (false || true)
El resultado ser: true
Num3 + Num4 != 8 && Num1 / Num3 > 9
Primero se realizan la suma por un lado y
la divisin por otro. Despus se realizan las
dos comparaciones. Por ltimo, se aplica el
operador && a los resultados obtenidos (de
las comparaciones). El resultado ser:
false
Num3 + Num4 != 8 && !(Num1 / Num3 >
9)
Es igual que el anterior pero despus de
evaluar las comparaciones ( y antes de
aplicar el operador &&) se realizar la
negacin de la segunda comparacin. El
resultado ser: true

El programa solicitado es (pruebaexpre.htm):

<HTML>
<HEAD><TITLE>Prueba de expresiones</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Prueba de expresiones */
var Num1 = 0, Num2 = 1, Num3 = 2, Num4 = 3;
alert(
(6 + Num3 / Num4) + "\n" +
(-6 + Num3 / Num4) + "\n" +
(Num4 / Num2++) + "\n" +
/* Observacion el valor de Num2 quedar modificado
Curso de JavaScript Elementos Bsicos.
-30-
despus de esta expresin */
(Num3 - Num4 == Num2 + Num1) + "\n" +
(Num1 > Num2 || Num3 < Num4) + "\n" +
(Num3 + Num4 != 8 && Num1 / Num3 > 9) + "\n" +
(Num3 + Num4 != 8 && !(Num1 / Num3 > 9))
);
</SCRIPT>
</BODY>
</HTML>

Como resultado de la ejecucin del programa se visualizarn los siguientes resultados:


Figura2_11. Ejemplo de ejecucin del programa.

Cabe destacar que, tal como se observa en el programa, el valor de
Num2 vara despus de aplicar el post-incremento. Por tanto, el resto de
las operaciones se ven contaminadas por este. No obstante slo afecta a
la expresin siguiente y, en este caso, el resultado final es el mismo.
Curso de JavaScript Estructuras de control
-31-
3 ESTRUCTURAS DE CONTROL.

JavaScript dispone de estructuras que permiten controlar el flujo de ejecucin del
programa en funcin de ciertas condiciones. Por ejemplo, si se cumple una condicin
se realizarn ciertas acciones, y si no se cumple se realizarn otras (estructuras
alternativas); o repetir una secuencia de comandos un cierto nmero de veces
(estructuras repetitivas). Este tipo de estructuras recibe el nombre de estructuras de
control.

3.1 Estructuras alternativas

Determinan la ejecucin de una u otra parte del programa dependiendo
de que se cumpla o no una cierta condicin. A su vez las estructuras
alternativas se subdividen en simples, dobles, etctera como veremos a
continuacin..
3.1.1 Alternativa simple

Si se cumple una determinada condicin se ejecutar un conjunto de
instrucciones (que en caso contrario no se ejecutaran).

Formato genrico:

if (condicin)
{
instrucciones
};



Diagrama de flujo:


Donde:
- condicin es cualquier expresin que devuelva un valor lgico
(true/false).
- instrucciones es un bloque de una o ms instrucciones que se
ejecutarn solo en el caso de que se cumpla la condicin. (Si se trata
de una sola instruccin podemos prescindir de las llaves ({}).

Ejemplo3_1.htm: A continuacin escribiremos un programa que leer (mediante
prompt) una nota introducida por teclado y, si la nota es igual o mayor que 5
visualizar una ventana con el texto APROBADO!, en caso contrario no har nada.

Curso de JavaScript Estructuras de control
-32-
<HTML>
<HEAD><TITLE>Ejemplo3_1</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!");
}
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

3.1.2 Alternativa doble

Si se cumple la condicin se ejecutar el primer bloque de instrucciones, si no
se cumple se ejecutar el segundo bloque.

Formato genrico:

if (condicin)
{
instrucciones1
}
else
{
instrucciones2
};
Diagrama de flujo:


Ejemplo3_2.htm: A continuacin escribiremos un programa que leer (mediante
prompt) una nota introducida por teclado y, si la nota es igual o mayor que 5
visualizar una ventana con el texto APROBADO!, en caso contrario visualizar una
ventana con el texto suspenso!.

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

Todas las estructuras de control se pueden anidar. A continuacin veremos
un ejemplo en el que se utiliza el anidamiento de estructuras para realizar
comprobaciones adicionales. La zona sombreada corresponde a la estructura
anidada.

Ejemplo3_3.htm:

<HTML>
<HEAD><TITLE>Ejemplo3_3</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 erronea");
}
}
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

3.1.3 La instruccin ?.

En JavaScript est disponible la instruccin ? llamada instruccin de
prueba de condicin. Se puede utilizar en algunas ocasiones en lugar de los la
alternativa doble. Su formato genrico es:
Curso de JavaScript Estructuras de control
-34-
(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");

Empleando esta instruccin podemos evitar el riesgo de una divisin por
cero as:
(Num1 > 0) ? Num3 = Num2/Num1 : Num3 = 0;

3.1.4 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;
...
Curso de JavaScript Estructuras de control
-35-
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 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).
5.- sale del bloque de la estructura switch..case.
Observaciones:
La clusula break que aparece en este formato no es obligatoria pero si no se
utiliza cambiar el funcionamiento de la estructura switch ..case. 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 se pueden especificar diversos valores en lugar
de un nico valor, en este caso se indicarn los valores separados por comas
segn el formato:

Curso de JavaScript Estructuras de control
-36-
case valor1, valor2, valor3:


Ejemplo3_4.htm: el siguiente programa muestra la utilizacin de una estructura
alternativa mltiple anidada dentro de una estructura alternativa doble.

<HTML>
<HEAD><TITLE>Ejemplo3_4</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(Nota)
{ case 5:
Calificacion = "Aprobado";
break;
case 6:
Calificacion = "Bien";
break;
case 7, 8:
Calificacion = "Notable";
break;
case 9,10:
Calificacion = "Sobresaliente";
break;
default:
Calificacion = "Suspenso";
};
}
else
{
Calificacion = "Nota erronea";
}
alert(Calificacion);
// Fin del programa.
</SCRIPT>
</BODY>
</HTML>

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).



Curso de JavaScript Estructuras de control
-37-
3.2 Estructuras repetitivas

En ocasiones necesitaremos que un bloque de instrucciones se ejecute varias
veces seguidas; en estos casos utilizaremos estructuras repetitivas o bucles. En
JavaScript disponemos de las siguientes:

3.2.1 Estructura while.

La estructura while ejecuta un bloque de instrucciones y repite dicha ejecucin
mientras que se cumpla una condicin.

Formato genrico:

while(condicin)
{
instrucciones
}

Diagrama de flujo:


Donde:
- condicin es la condicin cuyo valor deber ser true para que se produzca
la entrada en el bucle y que ser comprobado antes de cada nueva
ejecucin del bloque de instrucciones.
- instrucciones es el bloque de instrucciones que se ejecutar.

Funcionamiento:
1.- Al encontrar la estructura while lo primero que hace (antes de entrar por
primera vez en el bucle) es evaluar la condicin: si es verdadera entra en el
bucle y ejecuta el bloque de instrucciones, pero si es falsa ni siquiera llegar a
entrar en el bucle.
2.- Una vez ejecutadas las instrucciones del bucle se evala de nuevo la
condicin para determinar si se vuelve a ejecutar el bloque o no (si es
verdadera se ejecuta, si es falsa deja de ejecutarse). Este punto se repite hasta
que la condicin deja de ser verdadera.
3.- Cuando al evaluar la condicin el resultado es false, el flujo del programa va
a la lnea siguiente al final del bucle.

Ejemplo3_5.htm: utilizando esta estructura podemos asegurarnos que el
usuario introducir una nota correcta introduciendo las instrucciones de captura
de datos dentro de un bucle while del que solamente saldr cuando la nota
introducida sea correcta..
<HTML>
<HEAD><TITLE>Ejemplo3_5</TITLE></HEAD>
Curso de JavaScript Estructuras de control
-38-
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura while
var Nota = -1;
// Inicializamos a 1 para que entre la primera vez
// en el bucle
while (Nota < 0 || Nota > 10)
{
Nota = prompt("Introduce la nota del alumno: ", 0);
Nota = Math.round(Nota)
if (Nota < 0 || Nota > 10)
{
alert("Nota erronea")
}
}
// A partir de aqu podemos procesar la nota ya
// comprobada.
alert("La nota " + Nota + " es correcta");
</SCRIPT>
</BODY>
</HTML>

Observaciones:
Debemos asegurarnos de que en algn momento se produzca la salida
del bucle ya que de lo contrario estaramos ante un bucle sin fin. Por
ejemplo, si en lugar de la condicin while (Nota < 0 || Nota > 10)
hubisemos escrito: while (Nota > 0 || Nota < 10) el bucle hubiese
estado iterando constantemente y no finalizara nunca.
Para que esta salida se produzca se deber modificar el valor de la
expresin. En nuestro caso la modificacin se produce al leer un nuevo
valor del teclado.
Se puede forzar una salida del bucle en cualquier momento mediante la
clusula break.
Tambin se puede forzar a realizar un nuevo ciclo an sin terminar
todas las instrucciones del bucle mediante la clusula continue.
Pero ninguna de estas dos ltimas opciones es recomendable ya que
dificultan la legibilidad de los programas y, por tanto, su posterior
mantenimiento.

3.2.2 Estructura do..while.

La estructura do..while es similar a la anterior pero en este caso la
comprobacin se produce despus de ejecutar el bloque de instrucciones.

Formato genrico:

do
Diagrama de flujo:
Curso de JavaScript Estructuras de control
-39-
{
instrucciones
}
while(condicion)



La nica diferencia entre la estructura while y la estructura do..while est en la
primera vez que se ejecuta el bucle:
- la estructura while comprueba la condicin antes de entrar por primera vez
en el bucle y si la condicin no se cumple, no entrar.
- la estructura do..while ejecuta el bucle la primera vez sin comprobar la
condicin.

Para las dems iteraciones el funcionamiento es idntico en ambas estructuras
(nicamente se producen variaciones en el caso de utilizar la clusula continue).

A continuacin veremos el ejemplo anterior utilizando un bucle do..while.

<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura do..while
var Nota; /* En este caso no hace falta inicializar
Nota con un valor erroneo pues entrar
en el bucle de todas formas */
do
{
Nota = prompt("Introduce la nota del alumno: ", 0);
Nota = Math.round(Nota)
if (Nota < 0 || Nota > 10)
{
alert("Nota erronea")
}
}
while (Nota < 0 || Nota > 10)
alert("La nota " + Nota + " es correcta");
</SCRIPT>

Ejemplo3_6.htm: El siguiente programa leer una secuencia de nmeros introducidos
por teclado y calcula y visualiza su suma. (La secuencia terminar cuando el nmero
introducido sea 0):

<HTML>
<HEAD><TITLE>Ejemplo3_6</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de acumulador
var Num = 0;
var Suma = 0;
Curso de JavaScript Estructuras de control
-40-
do
{
Num = parseInt(prompt("Introduce un nmero (cero para
finalizar): ", 0));
Suma = Suma + Num;
}
while (Num != 0)
alert("La suma es :" + Suma);
</SCRIPT>
</BODY>
</HTML>

Observaciones:
- En este programa hemos empleado dos variables: Num y Suma. La primera
se encargar de leer los nmeros introducidos y la segunda de acumular la
suma.
- Para convertir el valor introducido a un valor numrico se emplea la funcin
parseInt sobre el valor devuelto por la funcin prompt antes de realizar la
asignacin.

Este es un ejemplo tpico de acumulador. Se trata de una variable (en este
caso la variable Suma) con la que se realizan las siguientes operaciones:

- 1 Inicializacin: el acumulador debe ser inicializado (Suma = 0)antes de
comenzar su funcin.
- 2 Acumulacin: normalmente se realiza dentro de una estructura repetitiva
y consiste en incrementar el acumulador (Suma = Suma + Num;)

Un acumulador es una estructura que se utiliza con frecuencia en
programacin, tambin se utilizan con frecuencia los contadores. Veamos un ejemplo:

Ejemplo3_7.htm: El siguiente programa, es igual que el anterior pero devolver,
adems, la media de los valores introducidos. Para calcular la media se necesita
contar el nmero de valores que han sido introducidos.

<HTML>
<HEAD><TITLE>Ejemplo3_7</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de acumulador y contador
var Num = 0;
var Suma = 0;
var Conta = 0;
var Media = 0;
do
{
Num = parseInt(prompt("Introduce nmero (cero para
finalizar): ", 0));
if (Num != 0)
{
Conta = Conta + 1;
Suma = Suma + Num;
}
}
while (Num != 0)
Curso de JavaScript Estructuras de control
-41-
Conta > 0 ? Media = Suma / Conta : Media = 0;
alert("La suma es :" + Suma
+ "\n La media es: " + Media);
</SCRIPT>
</BODY>
</HTML>

Observamos que en este caso se ha empleado una estructura alternativa dentro
del bucle para evitar que el contador se incremente cuando el nmero introducido es 0.
Podamos haber utilizado otras opciones como restar uno al contador al final, o
emplear otra estructura repetitiva, como por ejemplo un bucle while:

Ejemplo3_8.htm:

<HTML>
<HEAD><TITLE>Ejemplo3_8</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de acumulador y contador
var Num = 0;
var Suma = 0;
var Conta = 0;
var Media = 0;
Num = parseInt(prompt("Introduce nmero (cero para
finalizar): ", 0));
while(Num != 0)
{
Conta = Conta + 1;
Suma = Suma + Num;
Num = parseInt(prompt("Introduce nmero (cero para
finalizar): ", 0));
}
Conta > 0 ? Media = Suma / Conta : Media = 0;
alert("La suma es :" + Suma
+ "\n La media es: " + Media);
</SCRIPT>
</BODY>
</HTML>

3.2.3 Estructura for.

La estructura for ejecuta un bucle un nmero determinado de veces
controlando automticamente el nmero de iteraciones. La utilizaremos siempre que
sepamos previamente el nmero de veces que se ejecutar el bucle. Su formato
genrico es el siguiente:

for (VariableControl = ValorInio;
CondicinContinuacin; ExpresinIncremento)
{
instrucciones
...
}
Curso de JavaScript Estructuras de control
-42-

Donde:
- VariableControl: es una variable interna o local al bucle (no hay que
declararla previamente) que se utiliza normalmente como contador del
numero de ejecuciones del bucle en cada momento.
- ValorInicio: es el valor inicial que tomar la VariableControl.
- CondicionContinuacion: es una condicin que ser comprobada antes de
realizar cada ejecucin del bucle. Si se cumple, se ejecutar el bloque de
instrucciones; en caso contrario pasar el control a la lnea siguiente al final
de la estructura.
- ExpresionIncremento: es una expresin que modificar el valor de la
variable de control. Normalmente se trata de una simple suma pero puede
ser cualquier expresin que permita en algn momento la salida del
programa.


Ejemplo3_9.htm: Veamos un ejemplo sencillo.

<HTML>
<HEAD><TITLE>Ejemplo3_9</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura for
for (i = 1; i <= 3; i = i + 1)
{
document.write(i + "*");
}
</SCRIPT>
</BODY>
</HTML>

En este ejemplo observamos que:
- La variable de control es i y su valor de inicio es 1.
- La condicin de continuacin es que i sea menor o igual que tres.
- La expresin de incremento es i = i + 1.
- El bucle, por tanto, se ejecutar tres veces

El resultado de la ejecucin del programa ser: 1*2*3*

La estructura for puede sustituirse por una estructura while siempre que tengamos
en cuenta lo siguiente:

- Habr que crear e inicializar antes de entrar en el bucle una variable que
har las funciones de variable de control.
- La condicin del bucle while ser la misma que la equivalente del bucle for.
- Al final del bloque de instrucciones habr que incluir una instruccin
adicional que ser la encargada de incrementar (o variar de alguna manera)
el valor de la variable que controla la ejecucin del bucle.

As, podemos escribir el programa anterior empleando una estructura while :

<SCRIPT LANGUAGE="JavaScript">
// Ejemplo de estructura while simulando un for
var i = 1;
while (i <= 3)
Curso de JavaScript Estructuras de control
-43-
{
document.write(i + "*");
i = i + 1;
}
</SCRIPT>

El resultado ser exactamente el mismo.

Ejemplo3_10.htm: Escribiremos un programa que lee un nmero y calcula y visualiza
su factorial. (Sabiendo que el factorial de un nmero N se calcula : 1 * 2 * 3 ..* N y que
factorial de 0 = ).

<HTML>
<HEAD><TITLE>Ejemplo3_10</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo factorial
Num = 0;
Fact = 1;
Num = parseInt(prompt("Introduce nmero:", 0));
for (i = 2; i <= Num; i = i + 1)
{
Fact = Fact * i;
}
alert("Factorial de " + Num + " = " + Fact);
</SCRIPT>
</BODY>
</HTML>

Ejemplo3_11.htm: El siguiente programa lee una cadena de caracteres del
teclado y la escribir al revs:
<HTML>
<HEAD><TITLE>Ejemplo3_11</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
// Ejemplo cadena al revs

var Cad1 = ""; // Cad1 es la cadena que se leer.
var Cad2 = ""; // Cad2 contendr la cadena al revs.
Longitud = 0; // Longitud guardar la longitud de la cadena.

Cad1 = prompt("Introduce una cadena:", " ");
Longitud = Cad1.length;

for (i = Longitud -1; i >= 0; i = i - 1)
{
Cad2 = Cad2 + Cad1.charAt(i);
}
document.write(Cad2);
</SCRIPT>
</BODY>
</HTML>

Curso de JavaScript Estructuras de control
-44-
Observamos que el programa, despus de leer la cadena, va cogiendo uno
a uno los caracteres de esta, comenzando por el final y terminando por el
principio, y va construyendo de esta forma la nueva cadena (Cad2). La
estructura para empleada en esta ocasin es decreciente, esto es,
comienza con un valor igual a la longitud de la cadena menos uno (no
olvidemos que mientras length devuelve la longitud total de la cadena,
chartAt empieza a contar desde el 0). De esta forma, si ejecutamos el
programa e introducimos la cadena "HOLA" obtendremos el siguiente
resultado:
ALOH

3.2.4 Bucle for..in.

Puede ser considerado como una modificacin del bucle for. Nos facilita el
procesamiento de matrices y colecciones de objetos. La sintaxis es la siguiente:

for (variable in [objeto|array] )
{
instruccin(es);
}

Donde:
- Variable: es la variable contador usada para repetir sobre los elementos
del array o las propiedades de un objeto.
- objeto|array:objeto o array del que se desean conocer sus
elementos/propiedades.
- instruccin(es): conjunto de instrucciones que se repetirn.

Al igual que en un bucle for normal se utiliza una variable para iterar. En el
caso de que se est trabajando con un objeto la variable contador del bucle for se
sustituye por una variable de tipo cadena que contiene el nombre de cada una de las
propiedades del objeto manejado en el bucle for..in. Si se est trabajando con arrays
la variable ser de carcter numrico y contendr la posicin del elemento en el array.

En este bucle no es necesario definir la condicin de terminacin ya que las
instrucciones se ejecutarn siempre que existan propiedades del objeto o elementos
en el array. Tampoco es necesario incrementar la variable contador ya que se
actualiza automticamente.


Ejemplo3_12.htm: Ejemplo del bucle for..in para obtener informacin sobre los
elementos de dos arrays:

<HTML>
<HEAD><TITLE>Probando bucle for..in</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE",
"CRISTINA","IGNACIO", "ALICIA");
var Apellidos = new Array ("GIL", "SANCHEZ", "RODRIGUEZ",
"ALONSO","VEGA", "REY");
Curso de JavaScript Estructuras de control
-45-

for(i in Alumnos)
{
document.write(Alumnos[i]+" ** ");
document.write(Apellidos[i]+"<br>");
}
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>

La salida generada es la siguiente:

MIGUEL ** GIL
ELENA ** SANCHEZ
JORGE ** RODRIGUEZ
CRISTINA ** ALONSO
IGNACIO ** VEGA
ALICIA ** REY

3.3 Utilizacin de arrays mediante estructuras de control.

JavaScript dispone de una estructura denominada Array, parecida a las
variables, pero en este caso se trata de guardar varios elementos de informacin
similares (por ejemplo los nombres de los 20 alumnos de un aula, o sus notas,
etctera).

Podemos definir un Array como una serie de elementos todos del mismo tipo
que ocupan posiciones contiguas en la memoria del ordenador. A estos
elementos se accede mediante un nombre o identificador comn para todos los
elementos que identifica el Array, y un nmero o ndice que hace referencia al
elemento del Array.

A continuacin veremos una representacin grfica de un Array que contiene los
nombres de 6 alumnos:
Alumnos
MIGUEL ELENA JORGE CRISTINA IGNACIO ALICIA
Alumnos[0] Alumnos[1] Alumnos[2] Alumnos[3] Alumnos[4] Alumnos[5]

Observamos que hay seis elementos de informacin (el Array tiene seis
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[4] estaremos refirindonos al elemento que ocupa la posicin 5 cuyo
contenido en este caso es "IGNACIO".
Esta estructura se utiliza con frecuencia en programacin, por ello
profundizaremos en sus caractersticas y utilizacin.

Curso de JavaScript Estructuras de control
-46-
3.3.1 Creacin de un Array

Para crear un array utilizaremos el siguiente formato:
var NombreDelArray = new Array (NumeroDeElementos)

Donde :
- NombreDelArray es el nombre o identificador del array.
- NumeroDeElementos es un nmero que indica el nmero de
elementos que contendr.

Para crear el Array Alumnos que contendr 6 elementos, escribiremos:
var Alumnos = new Array (6);
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.

3.3.2 Manipulacin de los elementos de un Array

Una vez creada la estructura podemos manipular los elementos del array como
si se tratase de variables (con la particularidad del ndice) para introducir, cambiar o
consultar los valores que contienen.

Para introducir informacin en un elemento utilizaremos normalmente un
operador de asignacin. Por ejemplo, para introducir el valor "MIGUEL" en el elemento
Alumnos[0] escribiremos: Alumnos[0] = "MIGUEL"; de manera similar se introducirn
todos los elementos del Array:

Alumnos[0] = "MIGUEL";
Alumnos[1] = "ELENA";
Alumnos[2] = "JORGE";
Alumnos[3] = "CRISTINA";
Alumnos[4] = "IGNACIO";
Alumnos[5] = "ALICIA";

Podemos hacer referencia a cualquiera de los objetos del Array bien para
cambiar su valor, o bien para utilizarlo en expresiones como si se tratase de cualquier
otra variable, con la particularidad apuntada de la utilizacin del ndice. As, podemos
escribir las siguientes expresiones:

alert(Alumnos[4]);
Visualiza una ventana de alerta con el contenido de Alumnos[4]
Alumnos[4] = prompt("Nombre del alumno", " ")
Lee un nuevo nombre de la consola y lo introduce en el elemento
Alumnos[4]
Curso de JavaScript Estructuras de control
-47-
var DosPrimeros = Alumnos[0] + Alumnos[1];
Crea la variable DosPrimeros e introduce en ella el resultado de
concatenar Alumnos[0] + Alumnos[1];
Alumnos[2] > Alumnos[3]
Es una expresin que compara el contenido de ambos elementos y
determina si el primero es mayor que el segundo segn su valor ASCII en cuyo
caso el resultado ser true, en caso contrario false.
En general, para hacer referencia a un elemento de un Array emplearemos el
formato genrico:
NombreDelArray [Indice]

El ndice no tiene que ser necesariamente una constante numrica (2,
10, 35) se puede referenciar mediante cualquier expresin numrica que
devuelva un entero. As, por ejemplo, las siguientes expresiones seran
expresiones vlidas (suponiendo que i sea una variable numrica entera):

Alumnos[ i ]
Hace referencia al elemento i (si i vale 2, al dos, etctera).
Alumnos[ i + 1]
Hace referencia al elemento siguiente al elemento i (si i vale 2, har referencia
el elemento 3).
Alumnos[ i ] > Alumnos [ i + 1 ]
Compara el elemento i con el siguiente.

3.3.3 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 < 6; i = i + 1)
{
document.write(Alumnos[i]);
}

El bucle for se ejecutar 6 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, 4 y 5).

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:
Curso de JavaScript Estructuras de control
-48-

for (i = 0; i < NombreDelArray.length; i = i + 1)
{
Tratamiento_del_elemento_NombreDelArray[i]);
}


Ejemplo3_13.htm: Veamos un ejemplo completo de creacin del Array, inicializacin
de los elementos e impresin de los mismos:

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

El resultado de la ejecucin de este programa ser:

MIGUEL*ELENA*JORGE*CRISTINA*IGNACIO*ALICIA*

3.3.4 Introduccin de los elementos del array desde la consola del
usuario.

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) (Figura3_1).

Ejemplo3_14.htm:

<HEAD><TITLE>Ejemplo3_14</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
/* Ejemplo Arrays Con valores introducidos por el usuario*/

Curso de JavaScript Estructuras de control
-49-
var Alumnos = new Array (6);

for ( i = 0; i < 6; i++)
{
Alumnos[i] = prompt("Introduce nombre del alumno "+i, "");
}

for ( i = 0; i < 6; i++)
{
document.write(Alumnos[i] + "*");
}
</SCRIPT>
</BODY>
</HTML>


Figura3_1. Se introducen los datos por teclado

JavaScript tambin permite crear un array e introducir los elementos
simultaneamente desde el cdigo declarando el nombre y enumerando a
continuacin en una lista los elementos:

var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE",
"CRISTINA","IGNACIO", "ALICIA");

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 el la lista (el primero ser el 0, el segundo el 1, y
as sucesivamente).

3.3.5 Bsqueda en un array.

Podemos realizar bsquedas en un array basndonos en los siguientes
criterios:
- Bsqueda a partir del ndice. (Sabiendo cul es el ndice, obtener el
elemento).
- Bsqueda de un elemento para obtener su posicin (o
simplemente saber que existe).
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[3]).
Curso de JavaScript Estructuras de control
-50-
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:
...
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.
}

Ejemplo3_15.htm: 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

<HEAD><TITLE>Ejemplo3_15</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", " ");

/******************** Bsqueda ***********************/

i = 0;
Curso de JavaScript Estructuras de control
-51-
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>

3.3.6 El Objeto Array
El objeto array es un objeto predefinido por el lenguaje que nos va a
permitir construir arrays, como ya hemos visto. Como todo objeto, dispone de
una serie de propiedades y mtodos. Dentro de las propiedades hemos
utilizado una que es la propiedad length, que de devuelve el nmero de
elementos del array. De los mtodos podemos destacar algunos como:
join(separador). Genera una cadena con todas las cadenas de cada uno
de los elementos del array separadas por el separador especificado.
reverse(). Invierte el orden de los elementos del array. Invierte el orden de los
elementos del array.
sort(). Ordena los elementos del array siguiendo un orden lexicogrfico.


(Para obtener ms informacin del objeto consultar el Apndice.)

Ejemplo3_16.htm: El siguiente ejemplo muestra el uso de los mtodos descritos
anteriormente:

<HTML>
<HEAD>
<TITLE> Probando el objeto Array </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE",
"CRISTINA","IGNACIO", "ALICIA");
document.write(Alumnos.join("*")+"<br>");
document.write(Alumnos.reverse()+"<br>");
document.write(Alumnos.sort()+"<br>");
// Fin de ocultar guin -->
Curso de JavaScript Estructuras de control
-52-
</SCRIPT>
</BODY>
</HTML>


La salida generada es la siguiente:

MIGUEL*ELENA*JORGE*CRISTINA*IGNACIO*ALICIA
ALICIA,IGNACIO,CRISTINA,JORGE,ELENA,MIGUEL
ALICIA,CRISTINA,ELENA,IGNACIO,JORGE,MIGUEL



Nota: en esta unidad se han empleado las siguientes funciones:

parseInt(cadena) Devuelve un nmero entero a partir de la cadena especificada. La
funcin finalizar la conversin cuando encuentre un carcter que
no sea un dgito. Se estudia en la unidad siguiente.
charAt(ndice) Devuelve el carcter situado en la posicin especificada por
'indice' (el primer carcter ocupa la posicin 0).
Se estudia en el tema de Objetos.
Math.round(N)
Redondeo. Devuelve el nmero entero ms prximo al nmero N.
Se estudia en el tema de Objetos.


3.4 Ejercicios propuestos.

1) Ejercicio3_1.htm: Escribir un programa que lea tres nmeros (Num1, Num2 y
Num3) y visualice el mayor de los tres.

<HTML>
<HEAD><TITLE> Ejercicio3_1 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
Num1=Num2=Num3=0;
Num1 = parseInt(prompt("Introduce primer nmero:", 0));
Num2 = parseInt(prompt("Introduce segundo nmero:", 0));
Num3 = parseInt(prompt("Introduce tercer nmero:", 0));

if(Num1>Num2)
if (Num1>Num3) document.write("El Mayor es : "+Num1);
else
if (Num2>Num3) document.write("El Mayor es : "+Num2);
else document.write("El Mayor es : "+Num3);
else
if (Num2>Num3) document.write("El Mayor es : "+Num2);
else document.write("El Mayor es : "+Num3);
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>

2) Ejercicio3_2.htm: Programa que lea un nmero entero positivo y escriba la tabla
de multiplicar de ese nmero.
Curso de JavaScript Estructuras de control
-53-

Por ejemplo si escribimos el nmero 7 la salida generada ser la siguiente:

TABLA DE MULTIPLICAR DEL 7
7 * 0 0
7 * 1 7
7 * 2 14
7 * 3 21
7 * 4 28
7 * 5 35
7 * 6 42
7 * 7 49
7 * 8 56
7 * 9 63
7 * 10 70

Las tablas se irn creando y llenando desde el cdigo JavaScript con la orden
document.write() y entre parntesis las rdenes HTML para crear tablas.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_2 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
N=0;
N = parseInt(prompt("Introduce un nmero:", 0));

document.write("<CENTER><TABLE border=1 ")
document.write("<TR bgcolor='aliceblue'>")
document.write("<TH>TABLA DE MULTIPLICAR DEL "+N+ "</TH> </TR>");
document.write("</TABLE>");
document.write("<TABLE border=1 ")
for (i=0; i<=10; i++) {
X = N*i;
document.write("<TR align='center'>");
document.write("<TD>"+ N + " * " + i + "</TD>");
document.write("<TD>"+ X + "</TD></TR>");
}
document.write("</TABLE></CENTER>");
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


3) Ejercicio3_3.htm: Programa que lea un importe y escriba el desglose del cambio
en unidades monetarias de 5000, 2000, 1000, 500, 200, 100, 50, 25, 10, 5 y 1.

Por ejemplo si escribimos la cantidad 3459 la salida generada ser la
siguiente:

Curso de JavaScript Estructuras de control
-54-
DESGLOSES DE LA CANTIDAD: 3459
Unidades de 5000 : 0
Unidades de 2000 : 1
Unidades de 1000 : 1
Unidades de 500 : 0
Unidades de 200 : 2
Unidades de 100 : 0
Unidades de 50 : 1
Unidades de 25 : 0
Unidades de 10 : 0
Unidades de 5 : 1
Unidades de 1 : 4

Las tabla se ir creando y llenando desde el cdigo JavaScript igual que en el
ejercicio anterior.
Se validar la entrada del IMPORTE a una cantidad mayor o igual que 0.
Se ha definido un array de nombre Desgloses que contiene las cantidades a
desglosar. La cantidad introducida IMPORTE se ir dividiendo por los elementos
de este array para obtener las unidades correspondientes para cada desglose
(CANTIDAD = Math.floor(IMPORTE / Desgloses[i]);), este proceso se hace en un bucle for,
que finalizar cuando recorramos dicho array. En cada paso del bucle el IMPORTE
ir cambiando, ser igual al resto de dividir el IMPORTE anterior entre el Desglose
(IMPORTE = IMPORTE% Desgloses[i];). Cuando las unidades (CANTIDAD) sean mayores
que cero se visualizarn en negrita y cursiva.

Para obtener la parte entera del importe se ha usado la funcin floor del objeto
Math.

Nota: La funcin floor(n) devuelve el entero obtenido de redondear 'n' al valor entero
inmediatamente inferior. Para usarla se necesita anteponer el objeto Math (Math.floor(n)). Mas
informacin de este objeto en el tema de Objetos.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_3 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var Desgloses=new Array(5000,2000,1000,500,200,100,50,25,10,5,1);
IMPORTE=-1;

while(IMPORTE<0){
IMPORTE = parseInt(prompt("Introduce el importe a desglosar:", 0));
if(IMPORTE<0)
alert("<<El IMPORTE ha de ser positivo>>");
}

document.write("<CENTER><TABLE border=1 >")
document.write("<TR bgcolor='aliceblue'>")
document.write("<TH>DESGLOSES DE LA CANTIDAD: "+IMPORTE+ "</TH> </TR>");
document.write("</TABLE>");
document.write("<TABLE border=1 >")
Curso de JavaScript Estructuras de control
-55-

for (i=0; i<Desgloses.length; i++) {
CANTIDAD = Math.floor(IMPORTE / Desgloses[i]);
IMPORTE= IMPORTE% Desgloses[i];
document.write("<TR align='center'>");
Unidades="Unidades de " + Desgloses[i] + " : " + CANTIDAD;
if(CANTIDAD>0)
Unidades="<B><I>" + Unidades + "</B></I>";
document.write("<TD>"+ Unidades + "</TD></TR>");
}
document.write("</TABLE></CENTER>");
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


4) Ejercicio3_4.htm: El siguiente ejercicio crear una tabla con un color de fondo
elegido por el usuario y escribir un texto en ella con el color elegido por el usuario.
Los colores y cdigos son los siguientes:

Color Cdigo
TABLA
rosa (R)
azul claro (A)
amarillo claro (Y)
verde claro (V)
hotpink
lightblue
lightyellow
lightgreen
TEXTO
rosa (R)
azul claro (A)
amarillo claro (Y)
verde claro (V)
Red
blue
yellow
green

Si se teclea algn valor distinto a: R, A, Y V se definirn estos colores:
para la tabla lightgrey y
para el texto black.

Los colores se pedirn mediante una orden prompt(). Si no se elige uno de los
colores se tomar un valor por defecto.
Una vez que se sepan los colores se crearn la tabla y el texto con la orden
document.write().

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_4 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
COLORTABLA= prompt("Elige el Color DE FONDO de la tabla: (R-rosa,
A-azul claro, Y-amarillo claro, V-verde claro:", "R");
COLORTEXTO = prompt("Elige el Color del TEXTO: (R-rojo, A-azul,
Y-amarillo, V-verde:", "R");

switch(COLORTABLA){
case 'R':COLORTABLA="hotpink";
break;
case 'A':COLORTABLA="lightblue";
break;
case 'Y':COLORTABLA="lightyellow";
break;
Curso de JavaScript Estructuras de control
-56-
case 'V':COLORTABLA="lightgreen";
break;
default:COLORTABLA="lightgrey";
}

switch(COLORTEXTO){
case 'R':COLORTEXTO="red";
break;
case 'A':COLORTEXTO="blue";
break;
case 'Y':COLORTEXTO="yellow";
break;
case 'V':COLORTEXTO="green";
break;
default:COLORTEXTO="black";
}

document.write("<CENTER><TABLE border=2 bgcolor="+COLORTABLA+">");
document.write("<TR><TD><FONT COLOR="+ COLORTEXTO +
">TEXTO CON COLOR");
document.write("</FONT></TD></TR>");
document.write("</TABLE>");
document.write("COLOR DE FONDO DE LA TABLA : "+ COLORTABLA +
"<BR>");
document.write("COLOR DEL TEXTO : "+ COLORTEXTO +"</CENTER>");

// Fin de ocultacin del guin -->
</SCRIPT>
</BODY>
</HTML>


Por ejemplo: si elegimos como color de fondo azul claro y como color de texto
azul, la salida generada es la siguiente:

TEXTO CON COLOR
COLOR DE FONDO DE LA TABLA : lightblue
COLOR DEL TEXTO : blue


5) Ejercicio3_5.htm: Escribir un programa que lea 10 nmeros de teclado, los
almacene en un array llamado numeros, y los escriba en orden inverso al que fueron
introducidos. La entrada por teclado se har con la orden prompt.

Por ejemplo si escribimos los nmeros 1, 2, 3, 4, 5, 6, 7, 8, 9 y 0 la salida que
se generar ser la siguiente:

NUMEROS INTRODUCIDOS INICIALMENTE:
1 2 3 4 5 6 7 8 9 0

NUMEROS EN ORDEN INVERSO:
0 9 8 7 6 5 4 3 2 1

donde podemos ver una tabla HTML con los nmeros introducidos inicialmente
y otra tabla HTML con los nmeros en orden inverso.
Curso de JavaScript Estructuras de control
-57-
Para resolver el ejercicio una vez almacenamos los nmeros en la tabla, la
recorremos desde el primer elemento al ltimo con un bucle for y visualizamos
sus elementos. Para visualizarlos en orden inverso recorremos la tabla desde
el ltimo elemento al primero con otro bucle for.
En ambos bucles los nmeros se visualizan dentro de las celdas de una tabla
HTML.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_5 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var N;
var numeros = new Array(10);
for(i=0; i<10; i++)
numeros[i] = parseInt(prompt("Introduce nmero: "+ i, 0));

document.write("<CENTER><TABLE border=1 >")
document.write("<TR bgcolor='cyan'>")
document.write("<TH><B>NUMEROS INTRODUCIDOS INICIALMENTE: </B></TH>
</TR>");
document.write("</TABLE>");
document.write("<TABLE border=1 >")
document.write("<TR align='center'>");

for (i=0; i<10; i++)
document.write("<TD>"+ numeros[i] + "</TD>");
document.write("</TR></TABLE>");

document.write("<BR><TABLE border=1 >")
document.write("<TR bgcolor='yellow'>")
document.write("<TH><B>NUMEROS EN ORDEN INVERSO: </B></TH> </TR>");
document.write("</TABLE>");
document.write("<TABLE border=1 >")
document.write("<TR align='center'>");

for (i=9; i>=0; i--)
document.write("<TD>"+ numeros[i] + "</TD>");
document.write("</TR></TABLE></CENTER>");

// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


6) Ejercicio3_6.htm: Escribir un programa que lea un nmero entero positivo mayor
que cero y calcule y visualice el nmero de cifras que tiene.

Por ejemplo si escribimos el nmero 4590 el nmero de cifras ha de ser 4. Un
ejemplo de la salida del ejercicio puede ser la siguiente:

EL NMERO INTRODUCIDO ES: 4590
Numero de cifras : 4

Curso de JavaScript Estructuras de control
-58-
Para contar las cifras del nmero le vamos dividiendo por 10 en un bucle que
se repetir mientras el nmero sea mayor que 0.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_6 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var numero=0;
var cifras=0;

numero = parseInt(prompt("Introduce el nmero: ", 0));
N=numero;

if (numero<=0)
alert("<<<NMERO ERRONEO>>>");
else
{
while (numero>0) {
cifras=cifras+1;
numero= Math.floor(numero / 10);
}
document.write("<CENTER><TABLE border=1 >")
document.write("<TR bgcolor='cyan'>")
document.write("<TH><B>EL NMERO INTRODUCIDO ES: </B>" + N +
"</TH></TR>");
document.write("<TR align='center'><TD>")
document.write("<B><I>Numero de cifras : "+ cifras +
"</B></I></TD></TR>");
document.write("</TABLE></CENTER>");
}
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


7) Ejercicio3_7.htm: Este programa trata de adivinar un nmero que el ordenador
generar aleatoriamente entre 0 y 10, a este nmero le llamamos por ejemplo: oculto.
El usuario introducir un nmero por teclado. El programa comprobar si el nmero es
mayor, menor o igual que el oculto. El usuario tiene 5 oportunidades para adivinar el
nmero, si no lo adivina pierde. Un ejemplo de la ejecucin del programa se muestra
en la Figura3_1.

La siguiente sentencia utiliza el objeto Math para generar un nmero aleatorio
entre 0 y 10: oculto = Math.floor(Math.random()* 11);

random() genera un nmero aleatorio entre 0 y 1, lo multiplicamos por 11 y
despus obtenemos el entero mas bajo con el mtodo floor(), as obtenemos
un nmero entre 0 y 10.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_7 </TITLE></HEAD>
<BODY>
Curso de JavaScript Estructuras de control
-59-
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var oculto=0;
var intentos=1;
var N=0;

oculto=Math.floor(Math.random()* 11); //genera un numero entre 0 y 10

while(intentos<6)
{
N = parseInt(prompt("Introduce un numero entre 0 y 10 : ", 0));
if (N==oculto)
{
alert("<<ENHORABUENA HAS ADIVINADO EL NUMERO>>" + oculto +
"!!!");
break;
}
else
if (N>oculto) alert("<<INTRODUCE UN NUMERO MENOR>>");
else
alert("<<INTRODUCE UN NUMERO MAYOR>>");
document.write("<BR><B>NUMERO TECLEADO: "+ N +
", INTENTO: " + intentos + "</B>");
intentos ++;
}
if (intentos==6)
alert("<<<LO SIENTO HAS PERDIDO>>>");

// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


Figura3_1. Ejercicio3_7 en el navegador


8) Ejercicio3_8.htm: Este programa lee por teclado un nmero entero positivo y lo
visualiza invertido.

Curso de JavaScript Estructuras de control
-60-
Por ejemplo si el usuario escribe: 1234567, la salida generada por el programa
ha de ser: 7654321:

EL NMERO INTRODUCIDO ES: 1234567
EL NMERO AL REVES ES: 7654321

Una forma de resolver el ejercicio es creando un array en el que se vayan
almacenando las ltimas cifras del nmero tecleado. Para obtener la ltima
cifra se calcula el mdulo entre el numero y 10; y se almacena este valor en el
array.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio3_8 </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var numero=0;
var TABLA=new Array(); //array que almacena los dgitos del nmero
var I=0; //indice para saber los elementos introducidos en el array

numero = parseInt(prompt("Introduce el nmero: ", 0));
N=numero;

if (numero<=0) alert("<<<NMERO ERRONEO>>>");
else
{
while (numero>0) {
TABLA[I]=numero%10; //me quedo con las ultimas cifras
I=I+1;
numero= Math.floor(numero / 10);
}
document.write("<CENTER><TABLE border=1 >")
document.write("<TR bgcolor='cyan'>")
document.write("<TH><B>EL NMERO INTRODUCIDO ES: </B>" + N +
"</TH> </TR>");
document.write("<TR align='center'><TD>")
document.write("<B><I>EL NMERO AL REVES ES: ");

for(z=0; z<I; z++) //visualizamos el array con los dgitos
document.write(TABLA[z]);

document.write("</B></I></TD></TR></TABLE></CENTER>");
}
// Fin de ocultar guin -->
</SCRIPT>
</BODY>
</HTML>


Curso de JavaScript - Funciones
-61-
4 FUNCIONES

Cuando nos encontramos ante un script de una cierta dimensin o complejidad se
suele dividir en partes ms pequeas, de forma que cada una sirve para un
determinado propsito. De esta forma se crean las funciones. Las funciones
permitirn que se ejecuten una serie de instrucciones cuando se produce un evento
(por ejemplo, cuando se pulsa un botn). Tambin permitirn que se ejecute el mismo
cdigo sin necesidad de insertar la secuencia de instrucciones repetidas veces.

Una funcin es un conjunto de instrucciones a las que se asigna un
nombre, devuelve o no un valor y se puede ejecutar tantas veces como se
desea con solo llamarla con el nombre asignado. 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).

4.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;
Curso de JavaScript - Funciones
-62-
}

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.

4.1.1 Dnde declaramos 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.

Ejemplo 1 (Ejemplo4_1.htm): Definimos una funcin que visualiza la hora en formato
Hora:Minutos:

<html>
<head>
<title>FUNCIONES - Ejemplo 1</title>
<script language="JavaScript">
function Hora(){
var hoy =new Date()
document.write(hoy.getHours(),":",hoy.getMinutes())
}
</script>
</head>

La funcin se llama Hora, no recibe argumentos y no devuelve ningn valor.
Define una variable hoy que utiliza el objeto Date para poder obtener la hora
hoy.getHours() y los minutos hoy.getMinutes(). Este objeto se tratar en la
siguiente unidad.

4.2 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));

Curso de JavaScript - Funciones
-63-
Ejemplo 1, continuacin (Ejemplo4_1.htm): Para llamar a la funcin Hora slo
tendremos que escribir su nombre y los parntesis vacos porque no lleva argumentos
Hora();. El Ejemplo 1 completo se muestra a continuacin:

<html>
<head>
<title>FUNCIONES - Ejemplo 1</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>


Figura4_1 Ejemplo4_1.htm en el navegador.

4.3 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>
<SCRIPT LANGUAJE="JavaScript">
function suma(A,B){
var C;
C = A + B;
return C;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
Curso de JavaScript - Funciones
-64-
document.write("Llamada a una funcin con argumentos:");
document.write(suma(2,3));
</SCRIPT>
</BODY>
</HTML>

Al ejecutarse obtendremos el siguiente resultado:

Llamada a una funcin con argumentos: 5

4.4 Observaciones respecto a la utilizacin 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.

function mayor(A,B)
{
if (A >= B) {
return A;
}
else {
return B;
}
}

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;
Curso de JavaScript - Funciones
-65-
}

4.5 Variables locales y globales

Son variables locales aquellas que se declaran en la definicin de la
funcin, 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.

Ejemplo4_2.htm:

<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
var C; //variable global, la puede usar cq. 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>

Obtiene la siguiente salida:
Sumamos dos valores: 5
Restamos dos valores: -5

4.6 Funciones predefinidas.

Existen algunas funciones propias del lenguaje que nos van a permitir convertir
cadenas a enteros o reales, evaluar una expresin, etc..

parseFloat(cadena) devuelve un nmero en coma flotante a partir de la cadena
especificada. La funcin finalizar la conversin cuando encuentre un carcter que no
sea un dgito (0..9), un punto decimal (.) o una "e". Ejemplos:

parseFloat("27.11.2000"); devuelve 27.11
parseFloat("20H30M07S"); devuelve 20
Curso de JavaScript - Funciones
-66-
parseFloat("345.6e5"); devuelve 34560000
parseFloat("VUELO506"); devuelve NaN (Not a Number)

parseInt(cadena) devuelve un nmero entero a partir de la cadena especificada. La
funcin finalizar la conversin cuando encuentre un carcter que no sea un dgito
(0..9). Ejemplos:

parseInt("27.11.2000"); devuelve 27
parseInt("20H30M07S"); devuelve 20
parseInt("345.6e5"); devuelve 345
parseInt("VUELO506"); devuelve NaN (Not a Number)

En principio se considerar como base la decimal (excepto cuando el nmero
comienza con 0x o con 0); pero este formato se puede aadir un segundo argumento
que indicara la base en la que creemos que est el nmero que queremos convertir.
El formato ampliado ser parseInt(cadena, base). Ejemplos:

parseInt("27", 8); devuelve 23 parseInt("11111111", 2);
devuelve 255
parseInt("A2", 16); devuelve 162

toString(argumento) convierte a cadena el dato especificado en argumento.
Normalmente se utiliza para convertir nmeros a cadena pero tambin funciona con
otros tipos como Booleano, etctera.
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). El siguiente programa muestra la utilizacin de esta
funcin:

Ejemplo4_3.htm:

<HTML>
<BODY>
<SCRIPT LANGUAGE=''JavaScript''>
V1 = 10; V2 = 'a'; V3 = true; var V10;
alert(typeof(V1)+ "\n"+ typeof(V2)+ "\n"+ typeof(V3)+
"\n"+ typeof(V10));
</SCRIPT>
</BODY>
</HTML>




Figura4_ 2 Ejemplo4_3.htm en el navegador.

escape(cadena)devuelve la secuencia de cdigos de escape de cada uno de los
caracteres de la cadena que le pasemos como argumento. Estos cdigos
sern devueltos con el formato %NN, donde NN es el cdigo de escape en
hexadecimal del carcter.
Curso de JavaScript - Funciones
-67-
unescape(cadena) 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.
isNaN(argumento) esta funcin evala el argumento que se le pasa y devuelve
false si es un nmero en caso contrario devuelve true. Por ejemplo:
isNaN("Hola);
devuelve 'true', pero isNaN("10"); devuelve 'false'. Esta funcin no funciona
correctamente con la versin 3.0 del navegador MSIE.
eval(expresin) devuelve el resultado de evaluar la expresin pasada como
parmetro. Por ejemplo eval("2+3"); nos devuelve 5.

4.7 Ejercicios.

Nota: En los siguientes ejercicios se utilizarn conceptos que no se han visto todava
como son: eventos y objetos. Se ha pensado as para que nos vayamos familiarizando
con la utilizacin de objetos, eventos y uso de funciones; aunque los eventos se
tratarn ms adelante y los objetos se tratarn en la siguiente unidad. Se pueden
consultar dichas unidades para aclaraciones.

1) Ejercicio4_1.htm. Diseamos una pgina Web en la que aparecen 3 botones de
tal forma que al hacer clic en cualquier botn se visualiza un mensaje en forma de
alerta (Figura4_3).

El cdigo es el siguiente:

<html>
<head>
<title>FUNCIONES - Ejercicio 1</title>
<script language="JavaScript">
function Mensaje(texto){
alert(texto);
}
</script>
</head>
<body >
<center>
Haz clic en el botn para visualizar un mensaje
<form >
<input type=BUTTON value="Mensaje 1"
onClick="Mensaje('Has pulsado el primer botn')">
<input type=BUTTON value="Mensaje 2"
onClick="Mensaje('Has pulsado el segundo botn')">
<input type=BUTTON value="Mensaje 3"
onClick="Mensaje('Has pulsado el tercer botn')">
</form>
</center>
</body>
</html>

La funcin Mensaje(texto) recibe una cadena de caracteres y la visualiza en
forma de alerta.
Novedad: utilizamos el evento onClick que se dispara cuando pulsamos el
botn izquierdo del ratn sobre un objeto. Al hacer clic en algn botn se
Curso de JavaScript - Funciones
-68-
invoca a la funcin Mensaje() con un texto para visualizarlo en forma de alerta.
Los eventos se tratarn en la unidad 6.


Figura4_3. Ejercicio4_1.htm en el navegador.


2) Ejercicio4_2htm. En este ejercicio aparecen 3 hipervnculos de tal forma que al
hacer clic en cualquiera de ellos se visualiza un mensaje en forma de alerta como en
el ejemplo anterior (Figura4_4).

El cdigo es el siguiente:

<html>
<head>
<title>FUNCIONES - Ejercicio 2</title>
<script language="JavaScript">
function Mensaje(texto){
alert(texto);
}
</script>
</head>
<body >
<center>
<P>Haz clic en algn hipervnculo para visualizar un mensaje<P>
<A HREF="javascript:Mensaje('Has pulsado el primer
hipervnculo')">Mensaje 1</a>
<A HREF="javascript:Mensaje('Has pulsado el segundo
hipervnculo')">Mensaje 2</a>
<A HREF="javascript:Mensaje('Has pulsado el tercer
hipervnculo')">Mensaje 3</a>
</center>
</body>
</html>

Utilizamos la funcin Mensaje(texto) como en el ejercicio anterior.
Novedad: utilizamos la directiva ancla <A> con el atributo HREF para invocar a
la funcin Mensaje que no devuelve ningn valor. Para invocar a una funcin
javascript desde un hipervnculo escribiramos:

<A HREF="javascript:nombrefuncin(parmetros)">Hipervnculo</A>

Curso de JavaScript - Funciones
-69-

Figura4_4. Ejercicio4_2.htm en el navegador.


3) Ejercicio4_3htm. En este ejercicio vamos a escribir dos nmeros en las casillas
NUMERO1 y NUMERO2 y al hacer clic en el botn se visualizar su suma en la casilla
RESULTADO (Figura4_5).

El cdigo es el siguiente:

<html>
<head>
<title>FUNCIONES - Ejercicio 3</title>
<script language="JavaScript">
function Suma(){
document.FORMULARIO.RESUL.value=
parseInt(document.FORMULARIO.NUMERO1.value) +
parseInt(document.FORMULARIO.NUMERO2.value);
}
</script>
</head>
<body>
<CENTER>
<p>ESCRIBE DOS NUMEROS Y HAZ CLIC EN EL BOTN PARA SUMARLOS:</p>
<form name ="FORMULARIO">
NUMERO 1: <input type="text" name="NUMERO1" size="10" >
&nbsp;&nbsp;
NUMERO 2:<input type="text" name="NUMERO2" size="10" >
<p>RESULTADO:<input type="text" name="RESUL" size="10"
value=0></p>
<p><input type=BUTTON value="Sumar" name="SUMA"
onClick= "Suma()"></p>
</form>
</body>
</html>

Utilizamos la funcin Suma para sumar dos nmeros que se escriben en un
formulario. No recibe ni devuelve nada. El nombre del formulario es
FORMULARIO. Al hacer clic en el botn Sumar se realiza la operacin de
suma:

Curso de JavaScript - Funciones
-70-
document.FORMULARIO.RESUL.value=
parseInt(document.FORMULARIO.NUMERO1.value) +
parseInt(document.FORMULARIO.NUMERO2.value);

Donde document es el objeto que contiene el documento actual,
FORMULARIO es el nombre del formulario donde estn los objetos NUMERO1
y NUMERO2, value hace referencia al valor de los objetos. ParseInt convierte
a entero. Los objetos se tratarn en la siguiente unidad.
Podemos transformar la funcin Suma de forma que reciba dos parmetros
(Ejercicio4_3bis.htm):

function Suma(a,b){
document.FORMULARIO.RESUL.value=
parseInt(a.value) + parseInt(b.value);
}

Para hacer la llamada a la funcin escribiramos lo siguiente:

<input type=BUTTON value="Sumar" name="SUMA"
onClick= "Suma(NUMERO1,NUMERO2)">


Figura4_5 Ejercicio4_3htm en el navegador


4) Ejercicio4_4.htm. En este ejercicio vamos a escribir nuestro nombre en la casilla,
al abandonar el foco de entrada se visualiza una alerta saludando e informndonos del
mes y ao en que estamos (Figura4_6).

Curso de JavaScript - Funciones
-71-

Figura4_6. Ejercicio4_4htm en el navegador

El cdigo es el siguiente:

<html>
<head>
<title>FUNCIONES - Ejercicio 4</title>
<script language="JavaScript">
function dia() {
var mes=new Array(12);
var hoy= new Date();

mes[0]="ENERO"; mes[1]="FEBRERO";
mes[2]="MARZO"; mes[3]="ABRIL";
mes[4]="MAYO"; mes[5]="JUNIO";
mes[6]="JULIO"; mes[7]="AGOSTO";
mes[8]="SEPTIEMBRE"; mes[9]="OCTUBRE";
mes[10]="NOVIEMBRE"; mes[11]="DICIEMBRE";

if (navigator.appName=="Netscape")
{
return (mes[hoy.getMonth()] + " de "
+ (hoy.getYear()+1900));
}
else
{
return (mes[hoy.getMonth()] + " de " + hoy.getYear());
}
}
function saludar(nombre) {
alert("Hola "+ nombre + ", estamos en \n"+ dia());
}
</script>
</head>
<body>
ESCRIBE TU NOMBRE:
<form>
<input type="text" name="nombre" onBlur="saludar(this.value)" >
</form>
</body>
Curso de JavaScript - Funciones
-72-
</html>

Este ejemplo utiliza dos funciones. La funcin dia devuelve una cadena con el
nombre de mes y el ao en que estamos. La funcin saludar escribe la alerta
de saludo.
Novedad: utilizamos el evento onBlur que se dispara cuando el objeto pierde
el foco de entrada. Al abandonar el campo de entrada se invoca a la funcin
saludar. Recibe como parmetros la palabra clave this que hace referencia al
objeto actual, this.value hace referencia al valor del objeto, es decir al nombre
tecleado.
La funcin getMonth() devuelve el mes del objeto Date como un valor entero
entre 0 y 11.
La funcin getYear() devuelve el ao del objeto Date. 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 Netscape devuelve el ao expresado como la
diferencia entre este y 1900. Por ello se ha incluido la siguiente sentencia:

if (navigator.appName=="Netscape")
{
return (mes[hoy.getMonth()] + " de "
+ (hoy.getYear()+1900));
}
//si el navegador es Netscape devuelve el ao como la diferencia de
este y 1900 //por ello le sumamos 1900.
else
{
return (mes[hoy.getMonth()] +
" de " + hoy.getYear());
}

El objeto Date se ver con ms extensin en la siguiente unidad.


5) Ejercicio4_5.htm. Partimos del Ejercicio3_3.htm de la unidad anterior que
desglosaba una cantidad introducida por teclado. Transformamos el ejercicio para que
el desglose lo realice una funcin que reciba como argumentos la cantidad a desglosar
Desglose(cantidad). Se disear un formulario en el que de entrada se escribir una
cantidad y al hacer clic en un botn (Desglosar Cantidad) se visualizar la cantidad
desglosada en una nueva ventana (Figura4_7).

Para crear una nueva ventana utilizamos el mtodo open() del objeto window:

ventana=window.open("","","width=350, height=400");

y el resultado se asigna a una variable que ser la que utilicemos para referenciar
a dicha ventana. El ejemplo anterior crea una ventana de ancho 350 pixels y de
alto 400 pixels.
Para visualizar datos en esta ventana ha de preceder a la orden document.write el
nombre de la variable ventana, en este caso ventana:

ventana.document.write("<HTML><HEAD><TITLE>.....");

Curso de JavaScript - Funciones
-73-
En esta ventana escribiremos un nuevo documento HTML con los desgloses de la
cantidad utilizando la orden ventana.document.write(). Al final de los desgloses
aparecer un botn para cerrar dicha ventana.
Con la orden window.close() se cierra la ventana.


Figura4_7. Ejercicio4_5.htm en el navegador.

El cdigo es el siguiente:

<HTML>
<HEAD><TITLE> Ejercicio4_5 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Ocultar guin
var Desgloses=new Array(5000,2000,1000,500,200,100,50,25,10,5,1);
var IMPOR=0;
var ventana;

function Desglose(IMPORTE){
IMPOR=IMPORTE.value;
if(IMPOR<0)
{
alert("<<El IMPORTE ha de ser positivo>>");
return;
}
ventana=window.open("","","width=350, height=400");
ventana.document.write("<HTML><HEAD><TITLE>Desglose de la
cantidad</TITLE></HEAD>");
ventana.document.write("<BODY><CENTER><TABLE border=1 >");
ventana.document.write("<TR bgcolor='aliceblue'>");

ventana.document.write("<td>");
ventana.document.write("<TH>DESGLOSES DE LA CANTIDAD: "+ IMPOR
+ "</TH></TR>");
ventana.document.write("</TABLE>");
ventana.document.write("<TABLE border=1>");

for (i=0; i<Desgloses.length; i++) {
CANTIDAD = Math.floor(IMPOR / Desgloses[i]);
Curso de JavaScript - Funciones
-74-
IMPOR= IMPOR% Desgloses[i];
ventana.document.write("<TR align='center'>");
Unidades="Unidades de " + Desgloses[i] + " : " + CANTIDAD;
if(CANTIDAD>0)
Unidades="<B><I>" + Unidades + "</B></I>";
ventana.document.write("<TD>"+ Unidades + "</TD></TR>");
}
ventana.document.write("</TABLE>");
ventana.document.write("<FORM><INPUT TYPE='button'
value='Cerrar ventana' ");
ventana.document.write("onclick='window.close()'></FORM>");
ventana.document.write("</CENTER></BODY></HTML>");
}
// Fin de ocultar guin -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM name = "FORMULARIO">
<p>ESCRIBE LA CANTIDAD A DESGLOSAR: <input type="text"
name="CANTIDAD" size="10"></p>
<p><input type="button" value="Desglosar Cantidad" name="B1"
onclick="Desglose(CANTIDAD)"></p>
</FORM>
</CENTER>
</BODY>
</HTML>














Curso de JavaScript - Objetos
-75-
5 OBJETOS.
5.1 Definicin.

La orientacin a objetos se ha empezado a desarrollar paralelamente con el
desarrollo de los entornos grficos de usuario (GUI), as por ejemplo cuando estamos
ante una herramienta de dibujo y hacemos clic en un icono para pintar un cuadrado
har que el puntero del ratn pueda dibujar un cuadrado en la ventana del dibujo.

La orientacin de objetos se centra en identificar los objetos procedentes del
dominio de la aplicacin que se va a estudiar y en especificar lo que es y lo que hace
ms que en especificar la forma en que se utiliza. Un objeto es un concepto o una
vista abstracta de una entidad. Es como una variable en algunos aspectos, su objetivo
es representar una cosa, por ejemplo un objeto podra ser un botn o un campo de
entrada de un documento HTML.

Cualquier objeto posee unas caractersticas que lo define, estas caractersticas se
llaman propiedades, cada propiedad tiene un valor de algn tipo unido a l. Con los
objetos podemos hacer cosas, necesitamos saber los nombres de las cosas que
podemos hacer y los parmetros que necesitamos para hacerlas. Cada una de estas
cosas se llama mtodo. Por ejemplo en la sentencia:

document.write(Hola);

tenemos el objeto document y el mtodo write que requiere un parmetro.
JavaScript utiliza el punto para realizar instrucciones utilizando los objetos. En
esta otra lnea

document.FORMULARIO.RESUL.value

tenemos la propiedad value, de un objeto RESUL, de un objeto FORMULARIO
de un objeto document.

5.2 Jerarqua de objetos en JavaScript..

Podemos decir que JavaScript no es un lenguaje orientado a objetos pero
s es un lenguaje basado en objetos. En JavaScript podemos considerar a los
objetos como colecciones de propiedades y mtodos. Admite tres tipos de
objetos:

Los objetos del navegador: window, frame, location, history y
navigator.
Los objetos predefinidos: Array, Bolean, Date, Function, Math,
Number, Object y String.
Los objetos creados por el usuario para dar solucin a sus
necesidades.



Curso de JavaScript - Objetos
-76-
5.2.1 Referencia a los objetos.

En JavaScript los objetos y las matrices se manipulan igual. Podemos
referenciar a los miembros de un objeto (propiedades y mtodos) de la siguiente
forma:

Por su nombre o notacin de punto

NombreObjeto.NombrePropiedad
NombreObjeto.NombreMtodo(argumentos)

Por su posicin que ocupa en la jerarqua de objetos o notacin de array:

NombreObjeto[posicin] NombreObjeto[NombrePropiedad]

Usando la palabra clave this que hace referencia al objeto actual. Si se
utiliza fuera del contexto de cualquier objeto hace referencia al objeto window.
Admite referencia por nombre o por posicin:

this.NombrePropiedad
this.NombreMtodo(argumentos)
this[posicin]
this[NombrePropiedad]

Ejemplo5_1.htm: El siguiente ejemplo muestra el ttulo de la pgina Web y la URL
actual de diversas formas:

Para obtener el ttulo utilizamos el objeto document y la propiedad title.
Para obtener la URL utilizamos el objeto window y la propiedad location.
Estos objetos se vern a lo largo del tema.

<html>
<head>
<title>OBJETOS - Ejemplo 1</title>
<script language="JavaScript">
function ver(dato){
document.write(dato);
}
</script>
</head>
<body >
<script language="JavaScript">
ver("TITULO DEL DOCUMENTO: <BR>");
ver(document.title); ver(" ==>document.title<BR>");
ver(document["title"]); ver(" ==>document[\"title\"]<BR>");
ver(this.document.title); ver(" ==>this.document.title<BR>");
ver("URL del DOCUMENTO: <BR>");
ver(window.location);
</script>
</body>
</html>

La funcin ver(dato) visualiza el contenido del parmetro que recibe.

La salida generada es la siguiente:

Curso de JavaScript - Objetos
-77-
TITULO DEL DOCUMENTO:
OBJETOS - Ejemplo 1 ==>document.title
OBJETOS - Ejemplo 1 ==>document["title"]
OBJETOS - Ejemplo 1 ==>this.document.title
URL del DOCUMENTO:
file:///D:/CURSOJAVASCRIPT/EJEMPLOSCURSO/Ejemplo5_1.htm
5.2.2 Los objetos del Navegador.

La jerarqua muestra el camino para poder referenciar a un objeto con
respecto a todos los objetos contenidos en la ventana del navegador. El siguiente
grfico muestra la jerarqua de los objetos del navegador:








































Podemos observar dos jerarquas de objetos, una la del objeto window
formada por todos los elementos presentes en la visualizacin de un documento
Window
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
FileUpload
Password
Hidden
Submit
Reset
Radio
Checkbox
Button
Textarea
Text
Select Option
Plugin
MimeType
navigator
Frame
document
Location
History
Curso de JavaScript - Objetos
-78-
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 st 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.

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, podemos 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:

- 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.

Ejemplo5_2.htm: El siguiente ejemplo muestra los nombres de algunos de los objetos
del documento HTML utilizando la notacin de array. En la Figura5_1 se muestra el
navegador con la ejecucin del ejercicio.

La funcin objetos() se encarga de visualizar los nombres de los objetos.
La funcin ver(dato) se encarga de visualizar el dato en pantalla.
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().

El cdigo es el siguiente:

<html>
<head>
<title>OBJETOS - EJEMPLO 2</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">
Curso de JavaScript - Objetos
-79-
<img border="0" src="Alfi1.gif" width="21" height="21" NAME ="ALFI1">Alfi1&nbsp;
<a href="http://www.mec.es" NAME ="MEC"> --MEC-- </a>
<img border="0" src="Alfi3.gif" width="21" height="21" NAME ="ALFI3">Alfi3
</p>
<p align="center">
<a href="Ejemplo5_1.htm" NAME ="EJEMPLO">Ejemplo 1</a>&nbsp;&nbsp;
<img border="0" src="Alfi2.gif" 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>


Nota: para obtener el nombre de un objeto se utiliza la palabra name. Por
ejemplo con la sentencia document.images[0].name obtenemos el nombre de la
primera imagen del documento HTML.


Figura5_1. Ejemplo5_2.htm en el navegador.
(Nota: el nombre del vnculo no se visualiza en Netscape)

Al hacer clic en el botn se visualiza una nueva ventana con el siguiente texto:

Contenido del texto:Este es mi texto

Veamos a continuacin una breve descripcin de los objetos del navegador:

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.
Curso de JavaScript - Objetos
-80-

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.

La Figura5_2 (Ejemplo5_3.htm) muestra el objeto window (la ventana del
navegador) que contiene un objeto document que a su vez contiene un objeto
link, un objeto image y un objeto form. El objeto form incluye los objetos text,
radio, button, submit y reset.

Objeto frame: un objeto frame se comporta igual que un objeto window y
contiene sus mismas propiedades y mtodos.

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

Objeto location: contiene informacin sobre la URL actual.


Figura5_2. Diversos objetos en el navegador

5.2.3 Los objetos predefinidos.

Estos objetos estn relacionados con el propio lenguaje y nos permitirn manejar
nuevas estructuras de datos y utilidades. Algunos ya los hemos utilizado en unidades
anteriores como el objeto Array, Date, Function, etc. Son los siguientes:

Objeto Array: nos permite gestionar matrices, vectores o arrays.

Curso de JavaScript - Objetos
-81-
Objeto Boolean: nos permite crear objetos lgicos que representan el valor
verdadero (true) o falso (false).

Objeto Number: nos permite trabajar con datos numricos.

Objeto String: nos permite trabajar con cadenas de caracteres.

Objeto Function: ya hemos utilizado este objeto para crear nuevas funciones.

Objeto Math: permite trabajar con las funciones matemticas ms usadas.

Objeto Object: proporciona funcionalidades comunes a todos los objetos
JavaScript.

Objeto Date: contiene los objetos necesarios para trabajar con los valores de
fecha y hora. Ya vimos en la unidad anterior como se usaban.


Ejemplo5_4.htm: 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>
<TITLE>OBJETOS - Ejemplo 3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function probando() {
var cad = "Objetos predefinidos";
var nombres=new Array("Juan","Ana","Julio","Maria","Alicia");
var numero=36;

document.write("Longitud de la cadena: "+cad.length+"<BR>");
document.write("Mayscula: "+cad.toUpperCase()+"<BR>");
document.write("De color rojo: "+cad.fontcolor("#FF0000")+"<P>");

document.write("Antes de ordenar el array: " +
nombres.join(', ')+"<BR>");
document.write("Nombres ordenados: "+nombres.sort()+"<BR>");
document.write("Ordenados en orden inverso: " +
nombres.sort().reverse()+"<P>");

document.write("Raiz cuadrada de 36: " +Math.sqrt(numero)+"<BR>");
document.write("36 elevedo a 5: " + Math.pow(numero,5)+"<BR>");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
probando();
</SCRIPT>
</BODY>
</HTML>

Genera la siguiente salida:

Curso de JavaScript - Objetos
-82-
Longitud de la cadena: 20
Mayscula: OBJETOS PREDEFINIDOS
De color rojo: Objetos predefinidos
Antes de ordenar el array: Juan, Ana, Julio, Maria, Alicia
Nombres ordenados: Alicia,Ana,Juan,Julio,Maria
Ordenados en orden inverso: Maria,Julio,Juan,Ana,Alicia
Raiz cuadrada de 36: 6
36 elevado a 5: 60466176

5.3 Propiedades y mtodos de los objetos del navegador.

En este apartado veremos las propiedades y mtodos de los objetos del
navegador, empezaremos por el objeto window que es el de nivel ms alto en
la jerarqua. Se describirn las propiedades y mtodos ms usados.
5.3.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
defaultStatus
frames
history
length
location, name,
parent , opener
self, status
top
alert(mensaje),
open(), close(),
confirm(mensaje), prompt(),
moveBy(x,y), moveTo(x,y),
print(), setTimeout(),
resizeBy(x,y), resizeTo(ancho,alto),
scroll(x,y), scrollBy(x,y),
scrollTo(x,y)
clearInterval() , setInterval()
clearTimeout() , setTimeout()
onLoad=
onUnload=

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

Para acceder a las propiedades o mtodos:
window.propiedad
window.mtodo()
self.propiedad
self.mtodo()

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
Curso de JavaScript - Objetos
-83-
Contiene el texto por defecto que aparece en la barra de estado del
navegador.
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.

El siguiente ejemplo muestra el valor de algunas de estas propiedades
(Ejemplo5_0.htm):

<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>

Genera la siguiente salida:

Est la Ventana cerrada? false
Nombre de ventana: ventanita
Mensaje de la barra de estado: Esto es un ejemplito
Valor de self: ventanita
Valor de top: ventanita
Valor de location:
file:///D:/CURSOJAVASCRIPT/EJEMPLOSCURSO/Ejemplo5_0.htm


A continuacin se exponen ejemplos que utilicen estas propiedades y mtodos
que se explicarn con ms detalle.

Curso de JavaScript - Objetos
-84-
Ejemplo5_5.htm: El siguiente ejemplo crear una ventana con un ancho y un alto que
se piden por teclado. Al hacer clic en el botn Crear Ventana se crear la ventana con
las especificaciones dadas y aparecer un texto, al hacer clic en el botn Cerrar
Ventana se cerrar la ventana actual y la ventana creada (Figura5_3).

Por defecto la nueva ventana que se crea se visualiza sin barras de men, de
herramientas, de direccin, de estatus, etc. Se pueden especificar ciertas
caractersticas para variar las opciones por defecto.





Figura5_3. Ejemplo5_5.htm en
el navegador










Los mtodos usados en el ejemplo son los siguientes:

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: Las caractersticas son las
siguientes:

Caractersticas Valores Nos dice si la nueva ventana
toolbar
location
directories
status
menubar
scrollbars
resizable
width
height
left

top
yes,no,1,0
yes,no,1,0
yes,no,1,0
yes,no,1,0
yes,no,1,0
yes,no,1,0
yes,no,1,0
N de pixels
N de pixels
N de pixels

N de pixels
Tendr (yes,1) o no (no,0) barra de herramientas.
tiene campo de localizacin o no.
tendr botones de direccin o no.
tendr barra de estado o no.
tendr barra de mens o no.
tendr barras de desplazamiento o no.
podr ser cambiada de tamao (con el ratn) o no.
Nos dice el ancho de la ventana en pixels
el alto de la ventana en pixels.
la distancia en pixels desde el lado izquierdo de la
pantalla a la que se debe colocar la ventana.
la distancia en pixels desde el lado superior de la
pantalla a la que se debe colocar la ventana.

close():
Cierra la ventana actual.

El cdigo del ejemplo es el siguiente:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo 5 - VENTANAS</TITLE>
Curso de JavaScript - Objetos
-85-
<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>

Las funcin CrearVentana() crea la ventana.
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

Nota: 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.


Ejemplo5_6.htm: Supongamos que defino 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"
Curso de JavaScript - Objetos
-86-
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 (Ejemplos
4 y 5 de esta unidad) en otra ventana. Esta funcin recibe un nmero
indicando el documento a cargar (si es 0 se carga el Ejemplo 5, si es 1 se
carga el Ejemplo 4), 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];

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.

A continuacin veamos algunos mtodos para mover y redimensionar
ventanas, son los siguientes:

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). A
partir de Netscape 4 (JavaScript 1.2).
moveTo(x,y) :
Mueve la ventana actual a las coordenadas (x,y). A partir de Netscape
4 (JavaScript 1.2).
scroll(x,y):
Hace que en la esquina superior izquierda aparezca la ventana a partir
de las coordenadas indicadas por x e y. A partir de Netscape 3,
Internet Explorer 4 (JavaScript 1.1).
scrollBy(x,y):
Curso de JavaScript - Objetos
-87-
Desplaza la ventana actual el nmero de pixels especificado por (x,y).
A partir de Netscape 4 (JavaScript 1.2).
scrollTo(x,y):
Desplaza la ventana actual a las coordenadas especificadas por (x,y).
A partir de Netscape 4 (JavaScript 1.2)


Ejemplo5_7.htm: Este ejemplo
mueve la ventana actual (moveTo) o
la redimensiona (resizeTo) segn
los datos introducidos en los
campos del formulario (Figura5_4).






Figura5_4. Ejemplo5_7.htm en el
navegador

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>


Veamos otros mtodos, algunos ya los hemos usado:

alert(mensaje):
Muestra el mensaje 'mensaje' en un cuadro de dilogo.
blur():
Elimina el foco de la ventana y dispara el evento onBlur. A partir de
Netscape 3, Internet Explorer 4 (JS 1.1).
Curso de JavaScript - Objetos
-88-
clearInterval(id) :
Cancela el intervalo el intervalo de tiempo referenciado por 'id', establecido
por el mtodo setInterval(). A partir de Netscape 4, Internet Explorer 4
(JavaScript 1.2).
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.
focus() :
Captura el foco del ratn sobre y dispara el evento onFocus. A partir de
Netscape 3, Internet Explorer 4 (JavaScript 1.1).
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(). A partir de Netscape 4, Internet Explorer 4
(JavaScript 1.2).
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().A partir de Netscape 4, Internet
Explorer 4 (JavaScript 1.2).


Ejemplo5_8.htm: Este ejemplo crea una barra de estado movible en la ventana del
navegador. Al cerrar la ventana se visualizar un mensaje de despedida:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo 8 - Scroller en la barra de desplazamiento</TITLE>
<SCRIPT LANGUAGE="JavaScript" >
Texto = "Bienvenidos a mi pgina Web.....";
i = 0;
function MensajeScroll() {
window.status = Texto.substring(i,Texto.length) + Texto.substring(0,i-1);
if (i < Texto.length) i++;
else i = 0;
setTimeout("MensajeScroll()",50);
}
</SCRIPT>
</HEAD>
<BODY onLoad="MensajeScroll()" onUnload="alert(Adis)" >
<B>MIRA EN LA BARRA DE ESTADO</B>
</BODY>
</HTML>

En este ejemplo se han utilizado 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
Curso de JavaScript - Objetos
-89-
objetos del documento se han transferido al navegador. El evento onUnload=
se dispara despus de que el objeto se ha descargado, en este caso despus
de cerrada la ventana, se visualizar un cuadro de dilogo con el mensaje
Adis (alert(Adis)).


Ejemplo5_9.htm: 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:

<form>
<p><input type="button" value="Imprimir" name="imprimir"
onClick="Imprimir()"></p>
</form>


Ejemplo5_10.htm: Seguimos con el ejemplo anterior, ahora antes de imprimir nos ha
de aparecer un cuadro de dilogo pidindonos confirmacin para imprimir (Figura5_5).
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.


Figura5_5. Ejemplo5_10.htm en el navegador


Ejemplo5_11.htm: El siguiente ejemplo define varios hipervnculos de forma que al
pasar el puntero del ratn por cada hipervnculo se visualiza un mensaje en la barra de
estado (Figura5_6), al abandonarlo se dejar la barra de estado como estaba. El
cdigo para los hipervnculos es:

<B>MIRA EN LA BARRA DE ESTADO AL PASAR POR LOS HIPERVNCULOS.</B>
<p><b>Para visitar el Ejemplo 10 haz clic
<a href="Ejemplo5_10.htm"
onMouseover="window.status='Confirmacin para imprimir';return true;"
Curso de JavaScript - Objetos
-90-
onMouseout="window.status='';return true;">aqu
</a>, Para ver el ejemplo 9 haz clic
<a href="Ejemplo5_9.htm"
onMouseover="window.status='Scroller e impresin';return true;"
onMouseout="window.status='';return true;">aqu
</a>.

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.


Figura5_6. Ejemplo5_11.htm en el navegador


Ejemplo5_12.htm: El siguiente ejemplo crea una ventana hija donde se carga el
documento Ejemplo5_12b.htm. En este documento aparecern una serie de
hipervnculos a ejemplos anteriores. Al hacer clic en estos hipervnculos se cargarn
en la ventana padre inicial (Figura 5_6b).


Figura5_6b. Ejemplo5_12.htm en el navegador

El cdigo del: Ejemplo5_12.htm
<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo 12 - Crea una ventana Hija</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" >
Curso de JavaScript - Objetos
-91-
ventanahija = window.open("Ejemplo5_12b.htm", "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>

Ejemplo5_12b.htm:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ventana hija del Ejemplo 12</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('Ejemplo5_4.htm')">Ejemplo 4</A><BR>
<A HREF="javascript:ColocarUrl('Ejemplo5_5.htm')">Ejemplo 5</A><BR>
<A HREF="javascript:ColocarUrl('Ejemplo5_6.htm')">Ejemplo 6</A><BR>
</CENTER>
</BODY>
</HTML>

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.

5.3.2 El objeto Frame.

Un objeto window puede contener mltiples subventanas denominadas frames
o marcos. Cada marco puede contener un documento distinto, de esta forma una
ventana puede contener diferentes documentos. Un objeto frame se comporta igual
que un objeto window. Las propiedades y mtodos se resumen en la siguiente tabla.

Propiedades Mtodos Manejadores de eventos
defaultStatus
window
frames
parent
self
status
top
alert(),confirm(mensaje)
clearInterval(), setInterval()
clearTimeout(),setTimeout()
focus() , blur(),
moveBy(x,y) ,moveTo(x,y)
open(),close()
prompt(), scroll(x,y)
onLoad=
onUnload=

Curso de JavaScript - Objetos
-92-
Para acceder a las propiedades o mtodos:
parent.nombreframe.propiedad
parent.nombreframe.mtodo()
parent.frames[i].propiedad
parent.frames[i].mtodo()


Propiedades del objeto frame
frames
Array que representa los objetos frame que estn contenidos en la
ventana actual. El orden de aparicin (frame[0],...) es el orden en que
se definen en el documento HTML.
name
Nombre del objeto frame.
parent
Referencia al objeto window que contiene el frame.
self
Nombre alternativo del frame.
top
Nombre alternativo del objeto window padre de este frame.

Mtodos del objeto frame

La mayora se han visto con el objeto window:

blur()
Elimina el foco del frame y dispara el evento onBlur.
focus()
Asigna el foco al frame y dispara el evento onFocus.


Un objeto frame siempre tiene una propiedad top y una propiedad parent
diferente de su propiedad self.

Ejemplo 1: El siguiente ejemplo define una pgina con dos marcos. El documento
HTML que define el marco padre se llama padre.htm, los marcos hijos se llaman
frame1.htm (situado en la parte superior) y frame2.htm (en la parte inferior). En el
marco padre hemos dado nombre a la ventana con la sentencia
window.name=VENTANITA, los marcos hijos visualizan informacin referente
al padre y a s mismos (Figura5_7).

Figura5_7. Documento padre.htm en el navegador
Curso de JavaScript - Objetos
-93-



















El
cdigo para los archivos es el siguiente:

padre.htm:

<HTML>
<HEAD>
<title>5 - OBJETOS - Frames</title>
<script language="JavaScript">
{
window.name="VENTANITA";
}
</script>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="FRAME1" noresize>
<FRAME SRC="frame2.htm" name="FRAME2" noresize>
</FRAMESET>
</HTML>

frame1.htm:

<HTML>
<HEAD>
<script language="JavaScript">
function infdocu()
{
document.write("Nombre de esta ventana: "+top.name +"<br>");
document.write("Nombre del padre: "+parent.name+"<br>");
document.write("Mi nombre es: "+self.name+"<br>");
document.write("Nombre del frame de abajo: "+
top.frames[1].name +"<br>");
document.write("URL de mi padre: "+parent.location+"<br>");
document.write("Mi URL es: "+self.location+"<br>");
}
</script>
</HEAD>
<BODY>
<script language="JavaScript">
Curso de JavaScript - Objetos
-94-
infdocu();
</script>
</BODY>
</HTML>

frame2.htm:

El cdigo es similar al del frame1.htm, solo vara la lnea que visualiza el
Nombre del frame de arriba:

document.write("Nombre del frame de arriba: "+
top.frames[0].name +"<br>");

self.parent: hace referencia a la ventana que contiene el frame actual.
self.parent.name: obtiene el nombre del padre del frame actual.
self.name: hace referencia al nombre del frame actual.
self.location: obtiene la URL del frame actual.
parent.location: obtiene la URL del padre del frame actual.

Todos los objetos window y frame tienen asociado un objeto location.


Ejemplo 2: partimos del ejercicio anterior supongamos que el frame de arriba
(arriba.htm) es a la vez otro documento HTML que contiene dos marcos, uno a la
derecha (derecha.htm). y otro a la izquierda (izquierda.htm). Al frame principal lo
llamamos padre2.htm. Grficamente lo podemos representar como se muestra en el
Cuadro 1. En la Figura5_8, se muestra el documento padre2.htm en el navegador.

En el Cuadro 2 se muestran los documentos padre, es decir los que contienen
los frames, que son frame2.htm y arriba.htm. Los nombres de padre de cada frame
son PADRE2 y ARRIBA respectivamente.

PADRE2.HTM










Cuadro 1


padre2.htm
<HTML>
<HEAD>
<title>5 - OBJETOS - 3 Frames</title>
<script language="JavaScript">
{
window.name="PADRE2";
}
</script>
</HEAD>
<FRAMESET ROWS="50%,50%">
arriba.htm
<HTML>
<HEAD>
<title>5 - OBJETOS - 3 Frames</title>
<script language="JavaScript">
{
window.name="ARRIBA";
}
</script>
</HEAD>
<FRAMESET COLS="50%,50%">
ARRIBA.HTM

IZQUIERDA.HTM DERECHA.HTM
ABAJO.HTM
Curso de JavaScript - Objetos
-95-
<FRAME SRC="arriba.htm"
name="ARRIBA">
<FRAME SRC="abajo.htm" name="ABAJO">
</FRAMESET>
</HTML>
<FRAME SRC="izquierda.htm"
name="IZQUIERDA">
<FRAME SRC="derecha.htm" name="DERECHA">
</FRAMESET>
</HTML>
Cuadro 2

Veamos en los siguientes listados de los documentos HTML las rdenes en
negrita que hacen referencia al nombre de los frames. En los documentos
izquierda.htm y derecha.htm, para visualizar el nombre del frame de la derecha y el de
la izquierda, respectivamente, se utiliza un array de dos dimensiones:

En el documento izquierda.htm: para visualizar el nombre del frame de la
derecha :

top.frames[0][1].name
primer frame que se carga, posicin 0 (ARRIBA)
segundo frame dentro de este frame, posicin 1 (DERECHA).

En el documento derecha.htm: para visualizar el nombre del frame de la
izquierda:

top.frames[0][0].name
primer frame que se carga, posicin 0 (ARRIBA)
primer frame dentro de este frame, posicin 0 (IZQUIERDA).

abajo.htm : Similar al documento frame2.htm.

izquierda.htm

<HTML>
<HEAD>
<script language="JavaScript">
function infdocu()
{
document.write("Nombre de esta ventana: "+top.name +"<br>");
document.write("Nombre del padre: "+self.parent.name+"<br>");
document.write("Mi nombre es: "+self.name+"<br>");
document.write("Nombre Frame de abajo: "+top.frames[1].name+"<br>");
document.write("Nombre Frame de arriba: "+top.frames[0].name+"<br>");
document.write("Nombre Frame de la derecha: " +
top.frames[0][1].name+"<br>");
}
</script>
</HEAD>
<BODY>
<script language="JavaScript">
infdocu();
</script>
</BODY>
</HTML>

derecha.htm : similar al anterior solo que visualiza el nombre del frame de la izquierda
usando un array de 2 dimensiones (primer frame que se carga, posicin 0; primer
frame dentro de este frame tambin en la posicin 0):

Curso de JavaScript - Objetos
-96-
document.write("Frame de la izquierda: "+
top.frames[0][0].name+"<br>");


Figura5_8. Documento padre2.htm en el navegador

Si se carga en el navegador arriba.htm, se producirn errores al referenciar al
frame de la derecha y la izquierda.

5.3.2.1 Cargar mltiples marcos:

A veces cuando estamos en una pgina de marcos y hay que cargar otro
documento que tambin contiene pginas de marcos, nos interesa que se siga
manteniendo la ventana, es decir, que el nuevo documento con marcos se carge en
los marcos del documento actual. Supongamos que el documento con marcos es el
siguiente:

<html>
<head>
<title>MANTENEMOS LOS MARCOS</title>
</head>
<frameset framespacing="0" border="0" rows="39,*" frameborder="0">
<frame name="titular" scrolling="no" noresize
src="opciones.htm">
<frameset cols="146,*">
<frame name="contenido" src="masopci.htm">
<frame name="principal" src="presenta.htm" >
</frameset>
</frameset>
</html>

El marco tendr una estructura similar a la siguiente, los nombres que
aparecen en negrita son los nombres de cada marco y debajo el documento HTML
que va en ellos:

Curso de JavaScript - Objetos
-97-
titular
opciones.htm
contenido
masopci.htm
principal
presenta.htm

Supongamos que en el marco principal hay un documento HTML que tiene un
hipervnculo que carga las pginas en los diferentes marcos: titular, contenido y
principal, el hipervnculo podra tener el siguiente cdigo:

<A HREF="javascript:cargar('docu1.htm','docu2.htm','docu3.htm')">
Departamento de Informatica</A>

En el documento HTML debe existir la funcin cargar() que recibe el
nombre de los documentos a cargar en los parmetros page1, page2 y page3,
el cdigo es:

<script language="JavaScript">
function cargar(page1, page2,page3) {
parent.contenido.location.href=page1;
parent.principal.location.href=page2;
parent.titular.location.href=page3;
}
</script>

En cada marco, al que se accede por su nombre, se cargar el documento
indicado en los parmetros que recibe la funcin. El marco quedara as:

titular
docu3.htm
contenido
docu1.htm
principal
docu2.htm
5.3.3 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
href
pathname
port
protocol
search
reload()
replace(cadenaURL)
ninguno

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()

Curso de JavaScript - Objetos
-98-
[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:

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):
www.servidor.com
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
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.


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.


Ejemplo5_13.htm: Veamos un ejemplo de uso de estas propiedades. El siguiente
script:

<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>

Curso de JavaScript - Objetos
-99-
Obtiene la siguiente salida:

HREF: file:///D:/CURSOJAVASCRIPT/EJEMPLOSCURSO/Ejemplo5_13.htm
HOST:
HOSTNAME:
PATHNAME: /D:\CURSOJAVASCRIPT\EJEMPLOSCURSO\Ejemplo5_13.htm
PORT:
PROTOCOL: file:


Ejemplo5_14.htm: el siguiente ejemplo utiliza el mtodo replace(), al hacer clic en el
botn se carga el Ejemplo5_13.htm, y no se puede volver a la pgina anterior usando
el botn Atrs del navegador:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo 14 - Objeto Location</TITLE>
</HEAD>
<BODY >
<form >
<p><input type="button" value="Uso de replace"
onclick="location.replace('Ejemplo5_13.htm')"></p>
</form>
</BODY>
</HTML>


5.3.4 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

Propiedades del objeto history
length
Contiene el nmero de entradas de la lista del historial.

Mtodos del objeto history
back()
Carga la URL de la entrada anterior del historial.
forward()
Carga la URL de la entrada siguiente.
go(url)
Curso de JavaScript - Objetos
-100-
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 (Ejemplo5_15.htm):

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

5.3.5 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
appName
appVersion
language
mimeTypes
platform
plugins
userAgent
javaEnabled()

ninguno

Para acceder a las propiedades o mtodos:
navigator.propiedad
navigator.mtodo()


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)

language
Contiene informacin sobre el idioma de la versin del navegador.
mimeTypes
Curso de JavaScript - Objetos
-101-
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.

Mtodos del objeto navigator
javaEnabled()
Devuelve 'true' si el cliente permite la utilizacin de Java, en caso contrario,
devuelve 'false'.


Ejemplo5_16.htm: El siguiente cdigo javascript muestra las propiedades del objeto
navigator. En las figuras Figura5_9 y Figura 5_10 se pueden observar las propiedades
de este objeto en los navegadores Microsoft Internet Explorer 5 y Netscape 4.5:

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



Figura5_9. Ejemplo5_16.htm en el navegador Explorer.


Curso de JavaScript - Objetos
-102-

Figura5_10. Ejemplo5_16.htm en el navegador Netscape.

5.4 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
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.4.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
alinkColor, anchors, applets
bgColor, cookie,
fgColor , forms
images, lastModified
linkColor, links
location , referrer
title ,vlinkColor
clear()
open()
close()
write()
writeln()


Para acceder a las propiedades y mtodos del documento:
[window.]document.propiedad
[window.]document.mtodo()
[window] es opcional


Propiedades del objeto document:
alinkColor
Almacena el color de los enlaces activos.
Curso de JavaScript - Objetos
-103-
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.
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

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.


Ejemplo5_17.htm: 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 (Figura5_11).
Curso de JavaScript - Objetos
-104-









Figura5_11.
Ejemplo5_17.htm en el
navegador





El enlace
Caractersticas del
documento es un ancla a la parte del documento que muestra dichas
caractersticas, Figura5_12.


Figura5_12. Ejemplo5_17.htm en el navegador, despus de hacer clic en el enlace de
Caractersticas del documento.

El cdigo que obtiene las caractersticas es el siguiente:

<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>");
Curso de JavaScript - Objetos
-105-
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>


Ejemplo5_18.htm: 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.
(Figura5_13).

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.


Figura5_13. Ejemplo5_18 en el navegador


El cdigo es el siguiente:

<html>
<head>
<title>OBJETOS - Ejemplo 18 - 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 ,
Curso de JavaScript - Objetos
-106-
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='Ejemplo5_17.htm'> 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>





Curso de JavaScript - Objetos
-107-
5.4.2 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
length
propiedades del objeto
location
ninguno

onClick=
onMouseOver=

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

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, ...).

Netscape no define ningn atributo ni ningn mtodo para el objeto anchor,
por lo que no existen atributos comunes a los dos navegadores.

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


Ejemplo5_19.htm: Partimos del Ejemplo5_l7.htm que mostraba varios enlaces, dos
formularios y dos imgenes. Modificamos el cdigo JavaScript que mostraba las
caractersticas del documento por el siguiente cdigo que muestra las caractersticas
de los enlaces presentes en el documento:

<A NAME="caracteristicas"></A>
<b><center>CARACTERISTICAS DE LOS ENLACES</b><br>
<SCRIPT LANGUAJE="JavaScript">
var i;
document.write("Nmero de enlaces externos: "+
document.links.length+" <br>");
document.write("Nmero de enlaces internos: "+
document.anchors.length+" <br><hr>");

for(i=0; i<document.links.length; i++)
{
document.write("Direccion href: "+ document.links[i].href+ "<br>");
Curso de JavaScript - Objetos
-108-
document.write("Nombre de enlace hash: "+document.links[i].hash
+ "<br>");
document.write("Servidor hostname: "+ document.links[i].hostname
+ "<br>");
document.write("Protocol: "+ document.links[i].protocol + "<br>");
document.write("Pathname: "+ document.links[i].pathname
+ "<br><hr>");
}
</SCRIPT>
</center>

La salida generada se muestra en la Figura5_14.



















Figura5_14. Ejemplo5_19 en el navegador

5.4.3 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
border, complete,
height, hspace,
lowsrc, name,
src, vspace, width
Explorer y Netscape no tienen
ningn mtodo comn asociado a
este objeto.


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


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.
Curso de JavaScript - Objetos
-109-
height
Contiene el valor del atributo 'height' de la imagen (alto).
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.
name
Contiene el valor del atributo 'name' de la imagen.
src
Contiene el valor del atributo 'src' de la imagen <IMG SRC=...>.
vspace
Contiene el valor del atributo 'vspace' de la imagen.
width
Contiene el valor del atributo 'width' de la imagen.


Ejemplo5_20.htm: 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
ejemplo se muestra en la Figura 5_15. El cdigo es el siguiente:

<HTML>
<HEAD>
<TITLE>OBJETOS - Ejemplo5_20 IMAGENES</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>


Figura5_15. Ejemplo5_20 en el navegador

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'
Curso de JavaScript - Objetos
-110-

Tambin se poda haber puesto:

document['nombredeimagen'].src='nuevaimagen'

Es decir:

document.img2.src='img2off.gif' document['img2'].src='img2off.gif'

Ejemplo5_21.htm: 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 - Ejemplo5_21 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>

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";

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:

Curso de JavaScript - Objetos
-111-
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.


Ejemplo5_22.htm: 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
(Figura5_16). El cdigo Javascript ser el mismo que el usado en el ejemplo anterior.


Figura5_16. Ejemplo5_22 en el navegador

El cdigo HTML ES:

<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>


Curso de JavaScript - Objetos
-112-
Ejemplo5_23.htm: El siguiente ejemplo muestra las caractersticas de la imagen que
aparece en el documento (Figura5_17), 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="barco.gif" alt="LAGUNA GLACIAR"
hspace="15" vspace="5" width="237" height="172"
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>



Figura5_17. Ejemplo5_23 en el navegador

5.4.4 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
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.
Curso de JavaScript - Objetos
-113-

Las propiedades y mtodos del objeto form se resumen en esta tabla:


Propiedades Mtodos Manejadores de eventos
action, elements
encoding,
length , method
target
reset()
submit()

OnSubmit=

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.,


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.
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).

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.
Curso de JavaScript - Objetos
-114-

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.

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.


Ejemplo5_24.htm: El siguiente ejemplo muestra algunas de las propiedades del
formulario, Figura 5_18.


Figura5_18. Ejemplo5_24 en el navegador

El cdigo JavaScript para obtener las caractersticas es el siguiente:

<SCRIPT language="JavaScript">
document.write("Nmero de elementos del FORMULARIO: "+
document.forms[0].elements.length+" <br>");
document.write("ACTION : "+ document.forms[0].action+" <br>");
Curso de JavaScript - Objetos
-115-
document.write("ENCODING : "+ document.forms[0].encoding+" <br>");
document.write("METHOD : "+ document.forms[0].method+" <br>");
document.write("TARGET : "+ document.forms[0].target+" <br>");
</SCRIPT>

Para obtener el nmero de elementos del formulario tambin
podramos haber utilizado las siguientes expresiones:

document.forms[0].length
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).


Ejemplo5_25.htm: 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 (Figura 5_19).


Figura5_19. Ejemplo5_25 en el navegador

El cdigo aadido al botn es:

<input type="button" value="Enviar" name="enviar" onClick="Comprobar()">

El cdigo JavaScript para la funcin Comprobar() es:

<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: "+
Curso de JavaScript - Objetos
-116-
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. La siguiente tabla muestra la relacin
entre los elementos HTML de un formulario y los objetos de JavaScript:

Etiqueta HTML Objeto JavaScript
<INPUT type=text>
<TEXTAREA>
<INPUT type=password>
<INPUT type=button>
<INPUT type=submit>
<INPUT type=reset>
<INPUT type=checkbox>
<INPUT type=radio>
<SELECT>
<INPUT type=hidden>
text
textarea
password
button
submit
reset
checkbox
radio
select
hidden

A continuacin se exponen las propiedades y mtodos de estos objetos.

5.4.4.1 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.

Las propiedades y mtodos de estos objetos se resumen en esta tabla:

Propiedades Mtodos Manejadores de eventos
Curso de JavaScript - Objetos
-117-
defaultValue
name
value
blur()
focus()
select()

onBlur=
onFocus=
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()


Propiedades de los objetos text, textarea y password:
dafaultValue
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.

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


Ejemplo5_26.htm: 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 (Figura5_20), 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>OBJETOS - EJEMPLO 26 - 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;
Curso de JavaScript - Objetos
-118-
}
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>



Figura5_20. Ejemplo5_26 en el navegador


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:
Curso de JavaScript - Objetos
-119-


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.4.4.2 Los objetos button, reset y submit.

Definen los tres tipos de botones que se pueden incluir en un formulario. Son los
siguientes:
- un botn genrico, button, que no tiene accin asignada.
- un botn submit: al ser pulsado enva los datos del formulario.
- un botn reset: al ser pulsado limpia los valores del formulario.

Las propiedades y mtodos se resumen en esta tabla:

Propiedades Mtodos Manejadores de eventos
name
value
click() onClick=

Para acceder a las propiedades o mtodos se hace de forma similar a los
objetos vistos anteriormente.

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.

Mtodos de los objetos button
click();
Reproduce la accin que el usuario realiza cuando hace clic en un botn.

5.4.4.3 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.

Las propiedades y mtodos se resumen en esta tabla:

Propiedades Mtodos Manejadores de eventos
Curso de JavaScript - Objetos
-120-
checked
defaultChecked
name
value
click() onClick=

Para acceder a las propiedades o mtodos se hace de forma similar a los
objetos vistos anteriormente.

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.

Mtodos de los objetos checkbox:
click();
Reproduce la accin que el usuario realiza cuando hace clic en un botn.


Ejemplo5_27.htm: 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).

El cdigo HTML para las casillas y el botn Calcular es el siguiente:

<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;
Curso de JavaScript - Objetos
-121-
}
// -->
</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.


Figura5_21. Ejemplo5_27 en el navegador

5.4.4.4 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.

Las propiedades y mtodos se resumen en esta tabla:

Propiedades Mtodos Manejadores de eventos
checked
defaultChecked
length
name
value
click() onClick=

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()
Curso de JavaScript - Objetos
-122-

[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()

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.

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


Ejemplo5_28.htm: 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. La salida generada se muestra en la Figura5_22. El cdigo
HTML para el nuevo botn es:

<input type="button" value="Ver selecciones" name="VER"
onClick="VerSeleccion()">

El cdigo de la funcin VerSeleccion() es:

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>");
Curso de JavaScript - Objetos
-123-
}
}


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




Figura5_22. Ejemplo5_28 en el navegador

5.4.4.5 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.


La siguiente figura muestra las listas
desplegables y los cuadros de lista:






Las propiedades y mtodos se resumen en esta tabla:
Curso de JavaScript - Objetos
-124-

Propiedades Mtodos Manejadores de eventos
length
name
options
selectedIndex
options[n].defaultSelected
options[n].index
options[n].selected
options[n].text
options[n].value
ninguno onChange=

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


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.
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.


Ejemplo5_29.htm: En el siguiente ejemplo tenemos que elegir un men de comida
a partir de varias opciones (Figura5_23).

Curso de JavaScript - Objetos
-125-

Figura5_23. Ejemplo5_29 en el navegador

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
Curso de JavaScript - Objetos
-126-
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)">


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

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

form.SEGUNDOPLATO.options[segundo].text

Curso de JavaScript - Objetos
-127-
5.4.4.6 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.

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.5 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, el
resto de objetos predefinidos estn incluidos en el Apndice.

5.5.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()


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.

Curso de JavaScript - Objetos
-128-
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

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.
Curso de JavaScript - Objetos
-129-
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>.
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 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 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 hola mundo

toUpperCase()
Devuelve la cadena en maysculas.
Curso de JavaScript - Objetos
-130-

Ej: "Hola Mundo".toUpperCase() devuelve HOLA MUNDO


Ejemplo de uso para acceder a las propiedades y mtodos:

var cad = "Hola Mundo";
Longitud de la cadena cad.length
En Maysculas cad.toUpperCase()


Ejemplo5_30.htm: Este ejemplo muestra propiedades y mtodos del objeto String:

<html>
<head>
<title>OBJETOS - Ejemplo5_30 - 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>


Nota: 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.
Curso de JavaScript - Objetos
-131-
With (objeto) {
[instrucciones]
}
As en el ejemplo anterior utilizamos:
with(document) {
write("La cadena es: "+ cad +"<BR>");
write(......)
.......
}
de forma que no es necesario escribir la palabra document
delante de los mtodos write.


La salida generada es la siguiente:

La cadena es: Hola Mundo
Longitud de la cadena: 10
Metodo anchor: Hola Mundo
Negrita- bold: Hola Mundo
Quinto caracter es: M
Formato FIXED: Hola Mundo
De color rojo- fontcolor: Hola Mundo
Tamao 6- fontsize: Hola Mundo
En cursiva-Italics: Hola Mundo
La primera o esta, empezando a contar por detras, en la posicion- lastindexOf:
9
Haciendola enlace- link: Hola Mundo
Tachada- strike: Hola Mundo
Subindice- sub:
Hola Mundo
Superindice- sup:
Hola Mundo


Ejemplo5_31.htm: El siguiente ejemplo muestra en el rea el cdigo HTML que se
genera al aplicar algunos de los mtodos del objeto String. El ejemplo se muestra en la
Figura5_24.


Figura5_24 Ejemplo5_31 en el navegador
Curso de JavaScript - Objetos
-132-


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 (como se ve en el rea de texto) de la Figura5_24.
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.

El cdigo es el siguiente:

<html>
<head>
<title>5-OBJETOS - Ejemplo5_31 - String</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("Ejemplo5_30.htm");
}

// -->
</SCRIPT>
</head>
<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>
Curso de JavaScript - Objetos
-133-
<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>


5.5.2 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()


Propiedades del objeto Math:

Propiedad Descripcin
Math.E Constante de Euler. Nmero e, base de los logaritmos
naturales (neperianos) (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)


Mtodos del objeto Math:

Veamos algunos mtodos con ejemplos:
Funcin Mtodo Explicacin 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
Curso de JavaScript - Objetos
-134-
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
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

Aqu tenemos otros mtodos:

Mtodo Devuelve
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.
Curso de JavaScript - Objetos
-135-
Math.exp(N) Devuelve el valor e
numero
.
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.


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;
}


Ejemplo5_32.htm: 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 ejemplo se
muestra en la Figura5_25. El cdigo asociado al botn es el siguiente:

<input type="button" value="Obtener clculos" name="Botn"
onclick="CalculosMatematicos(document.forms[0].NUMERO.value)">


Figura5_25 Ejemplo5_32 en el navegador


El cdigo de la funcin que recibe el nmero escrito desde el formulario es:

function CalculosMatematicos(numero){
with(Math){
document.forms[0].RAIZ.value= sqrt(numero);
Curso de JavaScript - Objetos
-136-
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.5.3 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.
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.


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);

Month nombre de mes, ddda, yyyyao, hhhoras, mmminutos, sssegundos

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");
Curso de JavaScript - Objetos
-137-


Para utilizar los mtodos del objeto Date:

ObjetoFecha.mtodo()


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 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 Netscape 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
Curso de JavaScript - Objetos
-138-
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.
ObjetoFecha.toGMTString() Devuelve la fecha en forma de cadena usando la
convencin de zona horaria del meridiano de
Greenwich (GMT).
ObjetoFecha.toLocaleString() Convierte la fecha del objeto Date en una cadena
en el formato del sistema.


Ejemplo5_33.htm: El siguiente ejemplo muestra el uso de alguno de los mtodos del
objeto Date.

<html><head>
<title>5-OBJETOS - Ejemplo5_33 - 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>

La salida generada utilizando el navegador Internet Explorer es:

Curso de JavaScript - Objetos
-139-
Fecha => Fri Jul 27 00:00:00 UTC+0200 2001
Dia del mes - getDate(): =>27
Dia de la semana - getDay(): =>5
Nmero de mes - getMonth(): =>6
Ao - getYear(): =>2001
Horas:Minutos:Segundos: =>0:0:0
toGMTString() =>Thu, 26 Jul 2001 22:00:00 UTC
toLocaleString() =>07/27/2001 00:00:00

Fecha => Sun Jul 29 17:57:31 UTC+0200 2001
Dia del mes - getDate(): =>29
Dia de la semana - getDay(): =>0
Nmero de mes - getMonth(): =>6
Ao - getYear(): =>2001
Horas:Minutos:Segundos: =>17:57:31
toGMTString() =>Sun, 29 Jul 2001 15:57:31 UTC
toLocaleString() =>07/29/2001 17:57:31

Con el navegador Netscape:

Fecha => Fri Jul 27 00:00:00 GMT+0200 (Hora de verano romance)
2001
Dia del mes - getDate(): =>27
Dia de la semana - getDay(): =>5
Nmero de mes - getMonth(): =>6
Ao - getYear(): =>101
Horas:Minutos:Segundos: =>0:0:0
toGMTString() =>Thu, 26 Jul 2001 22:00:00 GMT
toLocaleString() =>Friday, July 27, 2001 00:00:00

Fecha => Sun Jul 29 17:57:37 GMT+0200 (Hora de verano romance)
2001
Dia del mes - getDate(): =>29
Dia de la semana - getDay(): =>0
Nmero de mes - getMonth(): =>6
Ao - getYear(): =>101
Horas:Minutos:Segundos: =>17:57:37
toGMTString() =>Sun, 29 Jul 2001 15:57:37 GMT
toLocaleString() =>Sunday, July 29, 2001 17:57:37



Ejemplo5_34.htm: 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:

<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";
Curso de JavaScript - Objetos
-140-
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 : Domingo, 29 de Julio de 2001

5.6 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;
}

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).
Curso de JavaScript - Objetos
-141-
- 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());


Todo este cdigo est contenido en el archivo Ejemplo5_35.htm. La
salida generada es la siguiente:

Nombre : Alicia
Apellidos: Tovar Gil
Curso: 2
Nota: 7
La nota de : Alicia, es: 7

5.7 Ejercicios.

1) Ejercicio5_1.htm. Vamos a crear una pgina donde se presentarn imgenes de
un Viaje a Islandia. Tendremos una zona donde se irn visualizando las imgenes, y
dos enlaces para visualizar la siguiente imagen o la anterior imagen. El ejemplo se
muestra en la Figura5_26.

Curso de JavaScript - Objetos
-142-

Figura5_26. Ejercicio5_1 en el navegador.

Cuando se visualiza la ltima imagen del conjunto se empieza de nuevo con la
primera. El cdigo es el siguiente:

<html>
<head>
<title>5-OBJETOS - Ejercicio5_1.htm</title>
<SCRIPT language="JavaScript">
<!--
//se crea un array con las imgenes a visualizar
Imagenes=new Array("glaciar.gif","skoga.gif","strokur.gif",
"gulfos.gif", "barco.gif", "canyon.gif", "cascada.gif");
imag=0; //ndice que recorre el array
n=Imagenes.length - 1; //nmero de imgenes del array menos uno

function Siguiente() { //muestra la siguiente imagen
imag++;
if (imag>n) imag=0; //si es la ltima imagen empezamos de nuevo
document.FOTO.src=Imagenes[imag];
}
function Anterior(){ //muestra la anterior imagen
imag--;
if (imag<0) imag=n; //si es la 1 imagen empezamos por el final
document.FOTO.src=Imagenes[imag];
}
// -->
</SCRIPT>
</head>
<body bgcolor="#FFFFCC">
<h1 align="center"><font color="#000080" face="Verdana"><b>VIAJE A
ISLANDIA</b></font></h1>
<p align="center">
<img border="2" src="glaciar.gif" width="300" height="224" name="FOTO"
alt ="Mis imagenes" hspace="2" vspace="2"></p>
<p align="center">
<a href="javascript:Anterior()">Anterior imagen</a>&nbsp;
<a href="javascript:Siguiente()">Siguiente imagen</a></p>
</body>
Curso de JavaScript - Objetos
-143-
</html>


2) Ejercicio5_2.htm. Partimos del ejercicio anterior, eliminamos los enlaces para ver
la anterior y siguiente imagen. Aadimos un nuevo enlace para visualizar
aleatorimente una imagen del array de Imgenes. El enlace es el siguiente:

<a href="javascript:Verimagen()">Ver imagen</a>&nbsp;

El cdigo de la funcin Verimagen() es:

function Verimagen() { //muestra una imagen aleatoria
with (Math){
imag=floor(random()* Imagenes.length); //nmero al azar
}
document.FOTO.src=Imagenes[imag];
}

La siguiente sentencia utiliza el objeto Math:

imag=floor(random()* Imagenes.length);

random() genera un nmero aleatorio entre 0 y 1, lo multiplicamos por el nmero de
elementos de la tabla y despus obtenemos el entero mas bajo, floor(), de esa cantidad
para asegurarnos de generar un nmero entre 0 y 6 (posiciones del array de
imgenes).


3) Ejercicio5_3htm. Continuamos con el ejercicio anterior. Ahora aadimos una lista
de elementos de forma que al seleccionar uno de los elementos de la lista se carge la
imagen seleccionada. El texto de la lista tambin va a cambiar cada vez que hagamos
clic en el enlace que visualiza la imagen aleatoria. La salida se muestra en la
Figura5_27.


Figura5_27. Ejercicio5_3 en el navegador.

Se ha aadido el siguiente cdigo, que define la lista:

<form name="FORMULARIO">
Curso de JavaScript - Objetos
-144-
<p align="center">
<select size="1" name="LISTA" onchange="javascript:Verlista()">
<option value="0" selected >Laguna glaciar</option>
<option value="1">Cascada Skogafoss</option>
<option value="2">Geyser Strokkur</option>
<option value="3">Cascada Gulfoss</option>
<option value="4">Un paseo por la Laguna</option>
<option value="5">Caon del Jokulsa</option>
<option value="6">Cascada de los dioses</option>
</select></p>
</form>

El evento onchange se dispara cuando el contenido de un objeto de seleccin
cambia.

El cdigo de la funcin Verlista() es el siguiente:

function Verlista()
{
seleccion=document.forms[0].LISTA.selectedIndex;
//posicion del elemento
j=document.forms[0].LISTA.options[seleccion].value;
//valor del elemento
document.FOTO.src=Imagenes[j]; //cambio de imagen
}

A la funcin Verimagen() le aadimos la siguiente lnea para que cambie
la seleccin de la lista:

document.forms[0].LISTA.selectedIndex=imag;
//cambio de posicion en la lista


4) Ejercicio5_4htm. Vamos a realizar las siguientes validaciones para un formulario
de entrada de datos:

Nombre y Apellidos: no puede contener nmeros y es la nica entrada
obligatoria.
Edad: slo puede contener nmeros, el rango de valores vlidos es de 0 a 120.
Codigo Postal: slo puede contener nmeros de cinco dgitos.


Figura5_28. Ejercicio5_4 en el navegador.
Curso de JavaScript - Objetos
-145-

Vamos a enviar los resultados del formulario a un archivo CGI:
ACTION="algunacosa.cgi"

La declaracin del formulario es la siguiente:

<form name="FORMULARIO" onSubmit="return Validar_datos()"
ACTION="algunacosa.cgi">

Antes de enviar el formulario se ha de ejecutar la funcin Validar_datos(), que
hasta que no devuelva un valor true no se enviar al archivo CGI. Se ha definido el
botn Enviar datos de tipo submit. <input type="submit" value="Enviar datos">

Todas las funciones utilizadas devuelven true si el dato a comprobar es correcto,
en caso contrario devuelven false. El cdigo JavaScript de estas funciones es:

<SCRIPT language="JavaScript">
<!--
function Validar_datos() {
sw=-1; //variable de control para ver si se producen errores

if (!Comprobar_nombre()) sw=0; //es erroneo
if (!Comprobar_edad()) sw=1; //es erroneo
if (!Comprobar_codpostal()) sw=3; //es erroneo

if (sw!=-1) {
Cursor(sw);
return false; //hay algn error
}
else return true; //No hay errores, Formulario verificado
}

//Funcin que hace que el foco se situe en el campo errneo y se seleccione
function Cursor(I) {
document.forms[0].elements[I].focus();
document.forms[0].elements[I].select();
}

//Comprobamos si el nombre es correcto
function Comprobar_nombre() {
if (document.forms[0].elements[0].value=="") {
alert("Has de introducir datos en el Nombre y Apellidos");
return false;
}
//comprobar si hay caracteres numricos en el nombre
for(i=0;i<document.forms[0].elements[0].value.length; i++)
if(!isNaN(document.forms[0].elements[0].value.substr(i,i+1))) {
alert("El nombre tiene numeros");
return false;
}
return true;
}

//Comprobamos si la edad es correcta
function Comprobar_edad() {
if (document.forms[0].elements[1].value=="") return true;
n= document.forms[0].elements[1].value;
if(!Comprobar_numero(n)) return false;
if (parseInt(n)<0 || parseInt(n)>120) {
alert("La EDAD no est en los lmites 0 y 120");
return false;
}
return true;
}
Curso de JavaScript - Objetos
-146-
//Comprobamos si un dato es numrico
function Comprobar_numero(N) {
if(isNaN(N)) {
alert("Has de introducir nmeros en el campo");
return false;
}
return true;
}

//Comprobamos si el cdigo Postal es correcto
function Comprobar_codpostal() {
if (document.forms[0].elements[3].value=="") return true;
n= document.forms[0].elements[3].value;
if(!Comprobar_numero(n)) return false;
if(n.length!=5) {
alert("El Cdigo Postal ha de tener 5 dgitos");
return false;
}
return true;
}

// -->
</SCRIPT>

Curso de JavaScript - Eventos
-147-
6 EVENTOS.

Inicialmente JavaScript fue dotado con un conjunto mnimo de eventos para poder
dar interactividad a las pginas Web. A partir de la versin 1.2 cambi su modelo de
objetos para dar lugar a uno ms sofisticado. El Explorer de Microsoft incorpora la
posibilidad de utilizar una gran cantidad de eventos, algunos de carcter muy
especializado. Sin embargo, Netscape no incluye tanta variedad de sucesos, pero
soporta los eventos ms importantes. En este captulo vamos a ver los eventos ms
comunes.

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. As en la siguiente tabla se muestran los elementos de interfaz de usuario ms
comunes en los documentos HTML y los tipos de eventos que pueden detectar,
tambin se muestra el nombre del Manejador de eventos:

Elemento Accin Evento Manejador de eventos
Botn Clic Click onClick
Casilla Clic Click onClick
Enlace Clic
Situar el puntero
Click
MouseOver
onClick
onMouseOver
Botn de opcin Clic Clic onClick
Seleccin Tabulador/Clic
Tabulador/Clic para cambio
de seleccin y clic
Focus
Blur

Change
onFocus
onBlur

onChange
Campo de texto Tabulador/Clic
Tabulador/Clic para cambio
de seleccin y clic
Seleccin de texto
Focus
Blur

Change
Select
onFocus
onBlur

onChange
onSelect


Ya hemos utilizado manejadores de eventos en ejercicios de unidades
anteriores. Recordemos como se utilizan los manejadores de eventos en etiquetas
HTML:

<ETIQUETA Manejador_de_Eventos="Cdigo JavaScript">

Por ejemplo supongamos que tenemos definido un botn y que al hacer
clic en l queremos que se ejecute la funcin JavaScript Calcular():

Curso de JavaScript - Eventos
-148-
<INPUT TYPE="button" VALUE="Clculos" onClick="Calcular()">

Cuando el nmero de acciones a realizar sea pequeo se pueden incluir
dentro de la etiqueta HTML. Por ejemplo:

<INPUT TYPE="text" Name="Nombre"
onBlur="if(Nombre.value=='')
{alert('Debe introducir el nombre');Nombre.focus();}">


Al incluir el cdigo del manejador de eventos podemos indicarlo con comillas
dobles o simples:

<INPUT TYPE="text" Name="Nombre"
onBlur='if(Nombre.value=="")
{alert("Debe introducir el nombre");Nombre.focus();}'>

6.2 Lista de eventos ms comunes.

A continuacin se expone una descripcin de los eventos ms comunes. Se
incluye los objetos a los que se aplica en el navegador Netscape, casi todos vlidos
tambin para Explorer, de ste se incluyen ms objetos de los que slo se expondrn
algunos.

Nota: Los nombres de eventos los podemos escribir en maysculas o
minsculas.


Eventos de ratn:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onmousedown
Se ha presionado (bajado) un botn
del ratn
Link, Button,
document
onmousemove Se ha movido el puntero del ratn ninguno
onmouseover
El puntero del ratn pasa sobre una
zona
Layer, Link
onmouseout El puntero del ratn sale de una zona Layer, Link
onmouseup Se ha levantado un botn del ratn
Link, Button,
document
onclick
Se pulsa el botn izquierdo del ratn
sobre algo
Button, Checkbox,
document, Link,
Radio, Reset, Submit
ondblclick
Se ha realizado una pulsacin doble
con el botn izquierdo del ratn.
document, Link
Las mismas de
Netscape (menos
Layer), AREA, DIV,
APPLET, OBJECT,
TABLE, TD, TR,
SPAN, SELECT,
BLOCKQUOTE
,INPUT, FORM,
Imagen, SPAN, LI,
LABEL, MAP, HR, Hn,
TEXTAREA
onselect Se realiza una seleccin Text, Textarea
HTMLAREA, Text,
Textarea



Curso de JavaScript - Eventos
-149-
Eventos de teclado:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onkeydown El usuario realiza la bajada
correspondiente a una pulsacin de
una tecla.
onkeypress El usuario pulsa una tecla.
onkeyup El usuario realiza la subida
correspondiente a una pulsacin de
una tecla.


document, Image,
Link, Textarea
Las mismas de
Netscape, AREA, DIV,
APPLET, OBJECT,
TABLE, TD, TR,
SPAN,BLOCKQUOTE
,INPUT,



Eventos de enfoque:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onblur El objeto pierde el foco de entrada.

onfocus El objeto recibe el foco.
Button, Checkbox,
FileUpload, Layer,
Password, Radio,
Reset, Select, Submit,
Text, Textarea,
Window
Las mismas de
Netscape menos
FileUpload y Layer, ,
AREA, DIV, APPLET,
OBJECT, TABLE, TD,
TR, SPAN,



Eventos de formulario:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onreset El usuario inicializa un formulario. Form

onsubmit Un formulario est a punto de
enviarse.
Form


Ejemplo6_0.htm: Aunque ya estamos familiarizados con algunos de estos eventos
porque se han usado en unidades anteriores vamos a comentar el siguiente cdigo
que utiliza eventos de formulario:

<html>
<head>
<title>6-EVENTOS - EVENTOS DE FORMULARIO - Ejemplo6_0</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;
Curso de JavaScript - Eventos
-150-
}
</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>

La funcin Comprobar() devuelve false si no se ha escrito nada en los campos
de entrada, en caso contrario devuelve true.
El valor devuelto por la funcin Comprobar() es muy importante debido a que
vara el funcionamiento del evento onsubmit. Si se devuelve true al evento, los
datos se envan; si se devuelve false se inhabilita el envo de datos.

Lo mismo ocurre con el evento onreset, si le devolvemos el valor false no se
producir ninguna inicializacin de elementos de formulario. En el ejemplo si el
NOMBRE tiene datos no se inicializa el formulario, si el nombre est vaco se
inicializan el resto de campos del formulario.



Eventos de carga de pgina:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onload El navegador ha cargado el objeto. Image, Layer, Window Image, Window,
Applet, Object,
Frameset,
onunload El objeto se ha descargado. Window Frameset, Imagen,
Window



Otros eventos:

Objetos a los que se aplica
Evento Causa del evento
Netscape Explorer
onAbort El usuario cancela la carga de una
imagen
Image
onChange El contenido de un objeto o seleccin
ha cambiado
FileUpload, Select,
Text, Textarea
HTMLAREA, Select,
Text, Textarea
onDragDrop Se dispara continuamente en el
objeto fuente durante una operacin
de arrastre.
Window
--
Curso de JavaScript - Eventos
-151-
onError Se produce un error en la carga de
un objeto.
Image, Window Image, Window, Link,
Style, Script, Object
onMove Se mueve la ventana Window --
onResize Se cambia el tamao de un objeto Window Window,Link, Applet,
Div, Input,

Ejemplos: En el siguiente ejemplo se muestra el uso de los eventos onMove,
onResize y onError (otroseventos.htm):

<html>
<head>
<title> OTROS EVENTOS </title>
</head>
<body bgcolor="#66FFFF"
onMove='alert("HAS MOVIDO LA VENTANA DE SITIO")'
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>


6.3 Ejemplos prcticos.

1) Ejemplo6_1.htm. 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. Tambin se han definido dos enlaces. El ejemplo en el navegador
se muestra en la Figura6_1.

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.

Curso de JavaScript - Eventos
-152-

Figura6_1. Ejemplo6_1.htm en el navegador.


El cdigo es el siguiente:

<html>
<head>
<title>6-EVENTOS- Ejemplo6_1 - 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>
Curso de JavaScript - Eventos
-153-

<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">
<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>


Los eventos utilizados (algunos no son de ratn) y los objetos a los que se
aplica se muestran en la siguiente tabla (En Netscape algunos de los eventos no
funcionarn, consultar las tablas de eventos mostradas al inicio de la unidad):

Curso de JavaScript - Eventos
-154-
EVENTOS OBJETOS FUNCIN
onblur="if(this.value=='')
this.value='********'"
input type="text"
name="NOMBRE"
name="EDAD"
Al abandonar el campo si no
se ha escrito nada, se le
asigna una serie de
asteriscos.
onclick="Comprobar_seleccion()" input type="radio"
name="BOTONES"
Al hacer clic en los botones se
de radio ejecuta la funcin
Comprobar_seleccin().
onchange="Comprobar_seleccion()"

select
name="LISTA"
Al cambiar el contenido de la
lista se ejecuta la funcin
Comprobar_seleccin().
ondblclick="this.value=this.value.toU
pperCase()"
Al hacer doble clic con el ratn
en el rea, el texto escrito se
convierte a maysculas.
onselect="alert('Has seleccionado
texto del area')"


textarea
name="TEXTO"
Al hacer una seleccin en el
rea se visualiza el mensaje.
onmousedown="alert('Has
presionado el botn Restablecer')"
input type="reset"
Botn "Restablecer"
Al presionar el botn se
visualiza un mensaje.
onmouseover="window.status='Ver
ciclos de Grado Medio'; return true"
Al pasar el puntero del ratn
por el enlace se visualiza un
mensaje en la barra de estado
onmouseout="window.status='';return
true"
Al abandonar el puntero del
ratn el enlace no se visualiza
nada en la barra de estado.
onmouseup="alert('Has levantado el
botn del enlace')"




a href="cfgm.htm"
onmouseup="alert('Has levantado el
botn del enlace')"
a href="cfgs.htm"

Al levantar un botn del ratn
sobre el enlace se visualiza un
mensaje.


2) Ejemplo6_2.htm. 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. Definimos varios enlaces, nos situaremos en ellos usando el tabulador en
el color deseado y al presionar una tecla cambiar el color de fondo. La ejecucin se
ve en la Figura6_2. Se han utilizado tres enlaces para elegir los colores.

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>

Nota:Los colores se pueden consultar en el Apndice del curso.
Curso de JavaScript - Eventos
-155-

Figura6_2. Ejemplo6_2.htm en el navegador.
(En Netscape no funciona correctamente)

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
(Ejemplo6_2b.htm).

Si utilizamos el evento onkeyup nada mas entrar en el enlace con el tabulador
el fondo cambia de color. (Ejemplo6_2c.htm).


3) Ejemplo6_3.htm. El siguiente ejemplo muestra el uso de una imagen mapeada, al
hacer clic en los textos que se visualizan en la imagen se carga el archivo HTML
correspondiente. Al cargar el documento se comprueba el tipo de navegador, ya que
Netscape no soporta mapeo de imgenes, si el navegador es Netscape se carga otro
archivo HTML. Utilizamos el evento onload para abrir una ventana de bienvenida con
un documento HTML, al cerrar esta ventan se visualiza un mensaje de despedida
utilizando el evento onunload. El ejemplo se muestra en la Figura6_3.

El cdigo es el siguiente:

Ejemplo6_3.htm:
<HTML>
<HEAD>
<TITLE>6- EVENTOS- Ejemplo 6_3</TITLE>
<script language="javascript">

if(navigator.appName=="Netscape")
window.location.href="Ejemplo6_3b.htm";

function anuncio()
{
window.open("anuncio.htm","","top=300,left=300,width=250,height=100");
}
</script>
Curso de JavaScript - Eventos
-156-
</HEAD>
<BODY onload="anuncio()" >
<center>
<MAP NAME="imagen">
<AREA SHAPE=RECT COORDS="4, 2, 169, 24" NOHREF
onMouseOver="return window.status='Visita las pginas del equipo
directivo'"
onMouseOut="return window.status=''"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="4 ,24, 158, 44" NOHREF
onMouseOver="return window.status='Departamentos del centro'"
onMouseOut="return window.status=''"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="4, 45, 106, 63" NOHREF
onMouseOver="return window.status='Informacin de secretara'"
onMouseOut="return window.status=''"
onclick="window.location.href='pag1.htm'">

<AREA SHAPE=RECT COORDS="4, 66, 92, 84" NOHREF
onMouseOver="return window.status='Informacin y pginas de
alumnos'"
onMouseOut="return window.status=''"
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 ISMAP USEMAP="#imagen" border="0" src="Imag1.gif" > </center></p>
</BODY>
</HTML>

anuncio.htm:

<html>
<head>
<title>BIENVENIDO A MI PAG WEB</title>
</SCRIPT>
</head>
<body bgcolor="#66FFFF"
onunload="alert('Gracias por visitar mi pgina')">
<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>


Curso de JavaScript - Eventos
-157-

Figura6_3. Ejemplo6_3.htm en el navegador.

Curso de JavaScript DHTML y Multimedia
-158-
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 navegadores. Es tarea del navegador mostrar y
manipular las pginas Web. La forma en que Netscape 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, tanto en el
Netscape Navigator 4.0 como en el Internet Explorer 4.0. 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
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
para Explorer y LAYER para Netscape. Sin embargo, tambin se puede utilizar la
marca DIV en Netscape, ya que sta es tranformada internamente en un objeto
LAYER.
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"
<LAYER>....</LAYER>: Implementa el concepto de capas en Netscape, todo lo que
est encerrado entre esa etiqueta ser la capa.

La sintaxis de una etiqueta DIV es similar a otras etiquetas HTML:
<DIV>
Esto es una etiqueta DIV
</DIV>

Curso de JavaScript DHTML y Multimedia
-159-
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>

Veamos a continuacin cmo se pueden aplicar las hojas de estilos.

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:

1. Directamente en una etiqueta de la siguiente forma:

<etiqueta STYLE="propieda1:valor;
..............;
propiedadN:valor"> ...
</etiqueta>

Donde:
- 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 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
...).

Ejemplo:

<DIV id="saludo" STYLE="position:absolute;
top:10; left:50; width:100;
background-color:#AADDFF">
Hola Mundo!
</DIV>


Ejemplo7-1.htm: 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) (Figura 7_1).

<HTML>
<head>
<title>Ejemplo 7_1.htm - Estilos</title>
</head>
<BODY>
<DIV id="saludo" STYLE="position:absolute;
top:10; left:50; width:100;
background-color:#AADDFF">
Curso de JavaScript DHTML y Multimedia
-160-
Hola Mundo!
</DIV>
</BODY>
</HTML>




Figura7_1. Ejemplo7_1 en el navegador.


(Funciona tambin en Netscape)



2. 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>

Donde:
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 (.)
) que nos permitirn definir un estilo para asignrselo a los elementos que
queramos. Tambin nos permitir crear reglas de estilo, precedidas de #.
Ejemplo:

<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>


Ejemplo7_2.htm: 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 ejemplo se muestra en la Figura7_2. El cdigo es el
siguiente:

<HTML>
<head>
<title>Ejemplo 7_2.htm - Estilos</title>
<STYLE TYPE="text/css">
#saludo {position:absolute; top:10; left:50; width:100;
Curso de JavaScript DHTML y Multimedia
-161-
background-color:#AADDFF}
</STYLE>
</head>
<BODY>
<P>Primera linea</P>
<P ID="saludo">Hola Mundo!</P>
<P>Segunda linea</P>
</BODY>
</HTML>


Figura7_2. Ejemplo7_2 en el navegador.


(Funciona tambin en Netscape)





Ejemplo7_3.htm: 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> (Figura7_3). El cdigo es
el siguiente:

<HTML><head>
<title>Ejemplo 7_3.htm - 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>





Figura7_3. Ejemplo7_3 en el navegador.


(Funciona tambin en Netscape)

La siguiente tabla muestra una
serie de propiedades de los estilos que suelen funcionar en los navegadores Netscape
y Explorer:

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
Curso de JavaScript DHTML y Multimedia
-162-
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
Color de fondo de la etiqueta DIV. En Netscape, esta propiedad slo
se aplica al color de fondo del texto.
layer-
background-
color
Color de fondo de la etiqueta DIV. Slo para Netscape.
background-
image
Imagen de fondo de la capa. Slo para Internet Explorer.
layer-
background-
image
Imagen de fondo de la capa. Slo para Netscape Navigator.


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>







Curso de JavaScript DHTML y Multimedia
-163-
7.3 Trabajar con DHTML.
7.3.1 Mover texto e imgenes.

Ejemplo7_4.htm: 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 Figura7_4.


Figura7_4. Ejemplo7_4 en el navegador.

El cdigo para Internet Explorer es el siguiente:

<HTML>
<HEAD>
<TITLE>7 - DHTML - Mover texto con Explorer - Ejemplo7_4.htm</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>
Curso de JavaScript DHTML y Multimedia
-164-
</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>

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.

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 Netscape o Explorer.

En Netscape, 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
document.all.Parrafo.style.pixelLeft


Curso de JavaScript DHTML y Multimedia
-165-
Objeto style: Representa las caractersticas actuales para todos los posibles
estilos dados a un elemento. Algunos 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.

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.


Para ms informacin:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp

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 Netscape 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;
}
}

La versin Netscape est contenida en el archivo Ejemplo7_4b.htm, donde:

document.Parrafo.top y
document.Parrafo.left

tienen la misma misin que

document.all.Parrafo.style.pixelTop y
document.all.Parrafo.style.pixelLeft

Curso de JavaScript DHTML y Multimedia
-166-
Para poder manipular la etiqueta DIV de nombre Parrafo utilizamos la siguiente
expresin: document.Parrafo.NombrePropiedad=valor.

top y left tienen la misma misin que pixelTop y pixelLeft.

La altura de la ventana nos la da esta propiedad: window.innerHeight
La anchura de la ventana: window.innerWidth


Para ms informacin:
http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm


Ejemplo7_5.htm: 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.

El cdigo para Explorer es el siguiente:

<HTML>
<HEAD>
<TITLE>7 - DHTML - Mover texto sin botones - Ejemplo7_5.htm</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>
Curso de JavaScript DHTML y Multimedia
-167-

El cdigo para Netscape es el siguiente (Ejemplo7_5b.htm):

<SCRIPT LANGUAGE="JavaScript">
<!--
function MoverTexto(){
document.Parrafo.top +=5;
document.Parrafo.left +=5;

if(document.Parrafo.top > (window.innerHeight-50) )
document.Parrafo.top=5;
if(document.Parrafo.left > (window.innerWidth-50) )
document.Parrafo.left=5;
setTimeout( "MoverTexto()",60);
}
//-->
</SCRIPT>


La salida se muestra en la Figura7_5.






Figura7_5. Ejemplo7_5b en el
navegador.













Se puede hacer que el mismo ejemplo funcione para los dos navegadores de la
siguiente forma (Ejemplo7_5c.htm):

function MoverTexto() {

if(document.all){ //Explorer
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;
}
Curso de JavaScript DHTML y Multimedia
-168-

else //Netscape
{
document.Parrafo.top +=5;
document.Parrafo.left +=5;

if(document.Parrafo.top > (window.innerHeight-50) )
document.Parrafo.top=5;
if(document.Parrafo.left > (window.innerWidth-50) )
document.Parrafo.left=5;
}

setTimeout( "MoverTexto()",60);
}

El objeto document.all devuelve true si el navegador es Internet Explorer en caso
contrario devuelve false. El objeto document.layers devuelve true si el navegador es
Netscape Navigator en caso contrario devuelve false.


Ejemplo7_6.htm: 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. El ejemplo se muestra en la
Figura7_6.


Figura7_6. Ejemplo7_6 en el navegador.

Se han definido dos estilos uno para la imagen de la estrella y otro para la imagen
de tomy. El cdigo vlido para Explorer y Netscape es el siguiente:

<HTML>
<HEAD>
<TITLE>7 - DHTML - Mover con un enlace - Ejemplo7_6.htm</TITLE>
<STYLE TYPE="text/css">
#Estrella {position:absolute; top:30; left:5}
#Tomy {position:absolute; top:110; left:5}
</STYLE>

<SCRIPT language=JavaScript>
Curso de JavaScript DHTML y Multimedia
-169-
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
if (document.all)
document.all.Estrella.style.pixelLeft +=3;
else
document.Estrella.left +=3;
setTimeout ("Mover()",30);
}
}

function MoverTomy(s)
{
if (mov_tomy) { //tecla pulsada, se mueve tomy
if (document.all)
document.all.Tomy.style.pixelLeft +=10;
else
document.Tomy.left +=10;
}
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>

7.3.2 Cambiar el color de texto al pasar el puntero del ratn por un
link.

CambiarColor.htm: Este ejemplo muestra cmo se puede cambiar el color de un
texto al pasar el puntero del ratn por un link, Figura7_7.
Curso de JavaScript DHTML y Multimedia
-170-


Figura7_7. CambiarColor.htm en el navegador

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 cambia 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 (<A HREF>... </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>7 - DHTML 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)
{
Curso de JavaScript DHTML y Multimedia
-171-
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>

7.3.3 Ocultar y mostrar texto e imgenes.

Ejemplo7_7.htm: 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
(Figura7_8); haciendo clic en cada hipervnculo se mostrar la capa correspondiente
(Figura7_9). El ejemplo es visible en Netscape y Explorer.

Curso de JavaScript DHTML y Multimedia
-172-




Figura7_8. Ejemplo7_7, capas
iniciales.




































Figura7_9. Ejemplo7_7,
seleccin de una capa.



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
(Figura7_8).

Para desarrollar el ejercicio se han definido las siguientes funciones:

Mostrar(n) : n indica la capa a visualizar. Para visualizar una capa en:
Netscape: document.capa.visibility='show';
Explorer: document.all.capa.style.visibility='visible';

Ocultar(): oculta las capas. Para ocultar una capa en:
Curso de JavaScript DHTML y Multimedia
-173-
Netscape: document.capa.visibility='hide';
Explorer: document.all.capa.style.visibility='hidden';

El cdigo es el siguiente:

<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;
case 4:
if (Nav) document.ninguna.visibility='show';
else document.all.ninguna.style.visibility='visible';
break;
}
Curso de JavaScript DHTML y Multimedia
-174-
}

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="barco.gif" width="300" height="224"></p>
<B>LAGUNA GLACIAR</B>
</div>

<div id="capa2" align="center" >
<b>Islandia</b>
<p><img border="0" src="canyon.gif" ></p>
Curso de JavaScript DHTML y Multimedia
-175-
<B>CAON DEL JOKULSA</B>
</div>

<div id="capa3" align="center" >
<b>Islandia</b>
<p><img border="0" src="cascada.gif" 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>

7.3.4 Mens deslizables.

Ejemplo7_8.htm: En este apartado se muestra un men deslizable. Habr tres
opciones de men (Figura7_10), al hacer clic en cada opcin se desplegarn ms
opciones (Figura7_11), y si haba opciones visibles se desplazarn hacia abajo. Cada
una de estas opciones es un hipervnculo a ejercicios y ejemplos ya realizados.




Figura7_10. Opciones de men.







Figura7_11. Algunas opciones de men deslizadas.


Al hacer de nuevo clic en la opcin de men, si sus opciones
estn desplegadas, se ocultarn (Figura7_12), y el resto de
opciones visibles se desplegarn hacia arriba.



Figura7_12. Opciones del men Tema Objetos ocultas.


El cdigo es el siguiente:

<HTML>
<HEAD>
<TITLE>7-DHTML - Menus deslizables</TITLE>
<SCRIPT language="JAVASCRIPT" >
//variables para posicionar los mens y submenus
var m0=s0=m1=s1=m2=s2=0;
Curso de JavaScript DHTML y Multimedia
-176-

function Ocultar(){ //Oculta los submenus al cargarse la pgina
document.all.subMenu0.style.visibility=hidden;
document.all.subMenu1.style.visibility=hidden;
document.all.subMenu2.style.visibility=hidden;
}

function Posicionar(){ //Posiciona los mens y submens
document.all.Menu1.style.pixelTop = m1;
document.all.subMenu1.style.pixelTop = s1;
document.all.Menu2.style.pixelTop = m2;
document.all.subMenu2.style.pixelTop = s2;
}

function OpcionMenu(opcion){//comprueba la opcin de men seleccionada
switch(opcion){
case 0: /////////////////////Opcion menu0 //////////////////
mimenu = document.all.subMenu0.style;
if (mimenu.visibility=='hidden') {
mimenu.visibility='visible';
m1=135;s1=145;m2=165;s2=180;
if(document.all.subMenu1.style.visibility=='visible' )
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 1
}
else {
m1=100;s1=115; m2=125;s2=140;
mimenu.visibility='hidden';
if(document.all.subMenu1.style.visibility=='visible' )
{m2=150; s2=165;} //se ve Submenu1
}
Posicionar();
break;

case 1: ////////////////////Opcion menu1 ////////////////////////
mimenu = document.all.subMenu1.style;
if (mimenu.visibility=='hidden') {
mimenu.visibility='visible';
m1=100;s1=115; m2=150;s2=165;
if(document.all.subMenu0.style.visibility=='visible')
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 0
}
else {
mimenu.visibility='hidden';
m1=100;s1=115; m2=125;s2=140;
if(document.all.subMenu0.style.visibility=='visible')
{m1=140; s1=155; m2=165;s2=180;} //se ve Submenu 0
}
Posicionar();
break;
case 2: /////////////////////Opcion menu2///////////////////
mimenu = document.all.subMenu2.style;
if (mimenu.visibility=='hidden')
mimenu.visibility='visible';
else
mimenu.visibility='hidden'
break;
} //fin del switch
}
</SCRIPT>

Curso de JavaScript DHTML y Multimedia
-177-
<STYLE type=TEXT/CSS>
.submenu { font: 12px Arial; position: absolute}
.menu {font: 12px Verdana; position: absolute; }

#subMenu0 {POSITION: absolute; left:50; top:90; width: 75; height: 33}
#subMenu1 {POSITION: absolute; left:50; top:115; width:75; height: 33}
#subMenu2 {POSITION: absolute; left:50; top:140; width:75; height: 30}
#Menu0 {POSITION: absolute; left:20; top: 75; width: 100; height: 20}
#Menu1 {POSITION: absolute; left:20; top: 100; width: 100; height: 20}
#Menu2 {POSITION: absolute; left:20; top: 125; width: 100; height: 20}

A {TEXT-DECORATION: none}
</STYLE>

</HEAD>
<BODY BGCOLOR="#EEEEEE" onload="Ocultar()">
<DIV STYLE="position: absolute; color: olive; font-size: 14px;
font-family: verdana; width: 134; top: 30; height: 45; left: 12">
<b>Haz clic en la opcion deseada:</b>
</DIV>

<DIV class=menu id=Menu0 >
<A href="javascript:OpcionMenu(0)">Tema Objetos</A>
</DIV>

<DIV class=menu id=Menu1 >
<A href="javascript:OpcionMenu(1)">Tema Eventos</A>
</DIV>

<DIV class=menu id=Menu2 >
<A href="javascript:OpcionMenu(2)">Tema DHTML</A>
</DIV>

<DIV class=submenu id=subMenu0>
<a href="Ejercicio5_1.htm" target="DERECHA">Ejercicio 1</a><BR>
<a href="Ejercicio5_2.htm" target="DERECHA">Ejercicio 2</a><BR>
<A href="Ejercicio5_3.htm" target="DERECHA">Ejercicio 3</A>
</DIV>

<DIV class=submenu id=subMenu1>
<A href="Ejemplo6_2b.htm" target="DERECHA">Ejemplo 2</A><BR>
<A href="Ejemplo6_3.htm" target="DERECHA">Ejemplo 3</A>
</DIV>

<DIV class=submenu id=subMenu2>
<a href="Ejemplo7_6.htm" target="DERECHA">Ejemplo 6</a><BR>
<a href="Ejemplo7_7.htm" target="DERECHA">Ejemplo 7</a>
</DIV>
</BODY>
</HTML>


Se han definido 2 clases (se incluyen en los prrafos DIV de la siguiente
forma: class=submenu o class=menu) :
menu: que define el tipo de letra para las 3 opciones del men.
submenu: define el tipo de letra para los elementos de estas opciones.

Se han definido 6 capas:
Menu0, Menu1 y Menu2: Define las caractersticas de las opciones de men.
Curso de JavaScript DHTML y Multimedia
-178-
subMenu0, subMenu1 y subMenu2: Define las caractersticas de los elementos
de estas opciones.

A la etiqueta A (<A HREF>... </A>) se le ha aplicado el siguiente estilo:
A {TEXT-DECORATION: none}
que desactiva el subrayado de los enlaces.


Nota:Las clases y estilos pueden ir con o sin comillas en los prrafos DIV.

Se han definido tres funciones:
Ocultar(): que se ejecuta inicialmente al cargar la pgina, y oculta las capas de
subMenus.
Posicionar(): que asigna a las capas Menu1, subMenu1, Menu2 y subMenu2,
las posiciones top (pixelTop) en las que deben aparecer dependiendo de la
opcin de men que se despliegue u oculte.
OpcionMenu(): Comprueba la opcin de men seleccionada (Menu0, Menu1, o
Menu2) para desplegarla o para ocultarla. Al desplegar u ocultar las opciones
de men se ha de calcular la posicin top en que se deben visualizar el resto
de capas.

Las variables m0, s0, m1, s1, m2, s2 se utilizan para posicionar las capas Menu
y subMenu.


Si el cdigo expuesto lo probamos en el navegador Netscape, no funcionar.
La versin para Netscape y Explorer se encuentra en el archivo menu.htm.

Vamos a crear el archivo index.htm que contiene frames. El frame de la
izquierda contendr el archivo menu.htm (vlido para los dos navegadores), y en el
frame de la derecha se irn visualizando las opciones de men que se seleccionen.
Inicialmente contiene la pgina: nada.htm. El cdigo del archivo index.htm es el
siguiente:

<html>
<head>
<title>DHTML - MENUS DESLIZABLES</title>
</head>
<frameset cols="175,*">
<frame name="IZQUIERDA" src="menu.htm">
<frame name="DERECHA" src="nada.htm">
</frameset>
</html>


Un ejemplo de la visualizacin en el navegador se muestra en la Figura7_13.

Curso de JavaScript DHTML y Multimedia
-179-

Figura7_13. Index.htm en el navegador con el men deslizable.

7.3.5 Archivos JavaScript externos.

A veces un mismo cdigo JavaScript puede ser utilizado por varias de nuestras
pginas Web. En este caso no se necesita aadir el cdigo a cada pgina, sino que se
puede crear un archivo externo que contenga dicho cdigo; y las pginas harn
referencia a este archivo.

Este archivo externo ha de tener la extensin .js. Para llamar a dicho archivo
hay que aadir el atributo SRC a la etiqueta SCRIPT. Ejemplo:

<SCRIPT SRC=archivo.js LANGUAGE=JavaScript>

El servidor ha de estar configurado para servir correctamente el archivo .js

En muchas ocasiones este mtodo se utiliza para ocultar el cdigo JavaScript a
los usuarios. Esto no funcionar si el usuario tiene suficientes conocimientos tcnicos
para revisar los archivos cach del navegador; todo lo que el navegador ve se
almacena all.

Ejemplo7_9.htm: Partimos del archivo menu.htm. Guardamos todo el cdigo
JavaScript en un archivo de nombre por ejemplo funmenu.js. El cdigo HTML
de este ejemplo es similar al cdigo HTML mostrado en el Ejemplo7_8.htm,
slo vara el cdigo JavaScript en el que se incluye la llamada al archivo que
contiene los scripts:

<HTML>
<HEAD>
<TITLE>7-DHTML - ARCHIVOS EXTERNOS</TITLE>
<SCRIPT SRC="funmenu.js" language=JAVASCRIPT>
Curso de JavaScript DHTML y Multimedia
-180-
</SCRIPT>
<STYLE type=TEXT/CSS>
............ el resto igual al Ejemplo7_8.htm ya expuesto
...............
</HTML>


El contenido del archivo funmenu.js es el siguiente:

//variables para posicionar los mens y submenus
var m0=s0=m1=s1=m2=s2=0;

var Nav=false;
var IE=false;
if( navigator.appName == "Netscape" ) //detectar el navegador
Nav = true;
else IE = true;

function Ocultar(){ //Oculta los submenus al cargarse la pgina
if(Nav)
{
document.subMenu0.visibility='hide';
document.subMenu1.visibility='hide';
document.subMenu2.visibility='hide';
}
else{
document.all.subMenu0.style.visibility='hidden';
document.all.subMenu1.style.visibility='hidden';
document.all.subMenu2.style.visibility='hidden';
}
}

function Posicionar(){ //Posiciona los mens y submens
if(Nav)
{
document.Menu1.top = m1;
document.subMenu1.top = s1;
document.Menu2.top = m2;
document.subMenu2.top = s2;
}
else
{
document.all.Menu1.style.pixelTop = m1;
document.all.subMenu1.style.pixelTop = s1;
document.all.Menu2.style.pixelTop = m2;
document.all.subMenu2.style.pixelTop = s2;
}
}

function OpcionMenu(opcion){//comprueba la opcin de men seleccionada
switch(opcion){
case 0: /////////////////////Opcion menu0 //////////////////

if(Nav){
mimenu = document.subMenu0;
mimenu1 = document.subMenu1;
}
else {
mimenu = document.all.subMenu0.style;
mimenu1 = document.all.subMenu1.style;
Curso de JavaScript DHTML y Multimedia
-181-
}
if(!Nav){
if (mimenu.visibility=='hidden') {
mimenu.visibility='visible';
m1=135;s1=145;m2=165;s2=180;
if(mimenu1.visibility=='visible' )
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 1
}
else {
m1=100;s1=115; m2=125;s2=140;
mimenu.visibility='hidden';
if(mimenu1.visibility=='visible' )
{m2=150; s2=165;} //se ve Submenu1
}
}
else {
if (mimenu.visibility=='hide') {
mimenu.visibility='show';
m1=135;s1=145;m2=165;s2=180;
if(mimenu1.visibility=='show' )
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 1
}
else {
m1=100;s1=115; m2=125;s2=140;
mimenu.visibility='hide';
if(mimenu1.visibility=='show' )
{m2=150; s2=165;} //se ve Submenu1
}
}

Posicionar();

break;

case 1: ////////////////////Opcion menu1 ////////////////////////


if(Nav){
mimenu = document.subMenu1;
mimenu0 = document.subMenu0;
}
else {
mimenu = document.all.subMenu1.style;
mimenu0 = document.all.subMenu0.style;
}


if(!Nav){
if (mimenu.visibility=='hidden') {
mimenu.visibility='visible';
m1=100;s1=115; m2=150;s2=165;
if(mimenu0.visibility=='visible')
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 0
}
else {
mimenu.visibility='hidden';
m1=100;s1=115; m2=125;s2=140;
if(mimenu0.visibility=='visible')
{m1=140; s1=155; m2=165;s2=180;} //se ve Submenu 0
}
Curso de JavaScript DHTML y Multimedia
-182-

}
else
{
if (mimenu.visibility=='hide') {
mimenu.visibility='show';
m1=100;s1=115; m2=150;s2=165;
if(mimenu0.visibility=='show')
{m1=140; s1=155; m2=190; s2=205;} //se ve Submenu 0
}
else {
mimenu.visibility='hide';
m1=100;s1=115; m2=125;s2=140;
if(mimenu0.visibility=='show')
{m1=140; s1=155; m2=165;s2=180;} //se ve Submenu 0
}
}

Posicionar();
break;
case 2: /////////////////////Opcion menu2///////////////////


if(Nav) mimenu = document.subMenu2;
else mimenu = document.all.subMenu2.style;

if(!Nav){
if (mimenu.visibility=='hidden')
mimenu.visibility='visible';
else
mimenu.visibility='hidden'
}
else
{
if (mimenu.visibility=='hide')
mimenu.visibility='show';
else
mimenu.visibility='hide'
}
break;
} //fin del switch
}


Curso de JavaScript - Apndice
-183-
8 APNDICE.

8.1 Valores de los colores.

Se pueden utilizar literales para especificar los colores en las propiedades:

alinkColor,
bgColor,
fgColor,
linkColor, y
vLinkColor

Y en el mtodo:

fontcolor.


Tambin se pueden usar en etiquetas HTML, por ejemplo:

<BODY BGCOLOR="yellow"> Color de fondo amarillo

<FONT COLOR="blue">Color azul</FONT> Color de fuente azul


En la siguiente tabla se muestran los nombres de color y el valor en hexadecimal:



Color
Valor
Hexadecimal

Color
Valor
Hexadecimal
aliceblue F0F8FF cadetblue 5F9EA0
antiquewhite FAEBD7 chartreuse 7FFF00
aqua 00FFFF chocolate D2691E
aquamarine 7FFFD4 coral FF7F50
azure F0FFFF cornflowerblue 6495ED
beige F5F5DC cornsilk FFF8DC
bisque FFE4C4 crimson DC143C
black 000000 cyan 00FFFF
blanchedalmond FFEBCD darkblue 00008B
blue 0000FF darkcyan 008B8B
blueviolet 8A2BE2 darkgoldenrod B8860B
brown A52A2A darkgray A9A9A9
burlywood DEB887 darkgreen 006400
darkkhaki BDB76B lightcoral F08080
darkmagenta 8B008B lightcyan E0FFFF
darkolivegreen 556B2F lightgoldenrodyellow FAFAD2
darkorange FF8C00 lightgreen 90EE90
Curso de JavaScript - Apndice
-184-
darkorchid 9932CC lightgrey D3D3D3
darkred 8B0000 lightpink FFB6C1
darksalmon E9967A lightsalmon FFA07A
darkseagreen 8FBC8F lightseagreen 20B2AA
darkslateblue 483D8B lightskyblue 87CEFA
darkslategray 2F4F4F lightslategray 778899
darkturquoise 00CED1 lightsteelblue B0C4DE
darkviolet 9400D3 lightyellow FFFFE0
deeppink FF1493 lime 00FF00
deepskyblue 00BFFF limegreen 32CD32
dimgray 696969 linen FAF0E6
dodgerblue 1E90FF magenta FF00FF
firebrick B22222 maroon 800000
floralwhite FFFAF0 mediumaquamarine 66CDAA
forestgreen 228B22 mediumblue 0000CD
fuchsia FF00FF mediumorchid BA55D3
gainsboro DCDCDC mediumpurple 9370DB
ghostwhite F8F8FF mediumseagreen 3CB371
gold FFD700 mediumslateblue 7B68EE
goldenrod DAA520 mediumspringgreen 00FA9A
gray 808080 mediumturquoise 48D1CC
green 008000 mediumvioletred C71585
greenyellow ADFF2F midnightblue 191970
honeydew F0FFF0 mintcream F5FFFA
hotpink FF69B4 mistyrose FFE4E1
indianred CD5C5C moccasin FFE4B5
indigo 4B0082 navajowhite FFDEAD
ivory FFFFF0 navy 000080
khaki F0E68C oldlace FDF5E6
lavender E6E6FA olive 808000
lavenderblush FFF0F5 olivedrab 6B8E23
lawngreen 7CFC00 orange FFA500
lemonchiffon FFFACD orangered FF4500
lightblue ADD8E6 orchid DA70D6
palegoldenrod EEE8AA sienna A0522D
palegreen 98FB98 silver C0C0C0
paleturquoise AFEEEE skyblue 87CEEB
palevioletred DB7093 slateblue 6A5ACD
papayawhip FFEFD5 slategray 708090
peachpuff FFDAB9 snow FFFAFA
peru CD853F springgreen 00FF7F
pink FFC0CB steelblue 4682B4
plum DDA0DD tan D2B48C
Curso de JavaScript - Apndice
-185-
powderblue B0E0E6 teal 008080
purple 800080 Thistle D8BFD8
red FF0000 tomato FF6347
rosybrown BC8F8F turquoise 40E0D0
royalblue 4169E1 violet EE82EE
saddlebrown 8B4513 Wheat F5DEB3
salmon FA8072 white FFFFFF
sandybrown F4A460 whitesmoke F5F5F5
seagreen 2E8B57 Yellow FFFF00
seashell FFF5EE yellowgreen 9ACD32



Curso de JavaScript - Apndice
-186-
8.2 Objetos predefinidos.

Vamos a ver en este apartado las propiedades y mtodos de los objetos: array,
boolean, number y function.


EL OBJETO ARRAY:

Propiedades del objeto Array:

Para definir un objeto array escribimos:

Objeto=new Array(num_elementos)

Propiedad Descripcin
Objeto.length

Indica la longitud del array, es decir el nmero de elementos
que tiene.


Mtodos del objeto Array:

Mtodo Descripcin
Objeto.concat(array) Devuelve el array resultado de la concatenacin del valor del
objeto array con el array que se pasa como parmetro.

Ejemplo:
var cad1=new Array(" Hola ");
var cad2=new Array(" Mara ");
document.write(cad1.concat(cad2));
devuelve: Hola , Mara
Objeto.join(separador)

Genera una cadena con todas las cadenas de cada uno de
los elementos del array separadas por el separador
especificado.

Ejemplo:
var t2=new Array("Hola Juan","cmo","estas?");
document.write(t2.join("*"));
devuelve: Hola Juan*cmo*estas?
Objeto.slice(inicio,fin) Devuelve un array formado por los elementos del array que
se encuentran entre las posiciones marcadas por inicio y fin-
1.

Ejemplo:
document.write(t2.slice(0,2));
devuelve: Hola Juan,cmo
Obteto.toString() Devuelve una cadena que representa el objeto array.

Ejemplo:
document.write(t2.toString());
devuelve: Hola Juan,cmo,estas?
Objeto.reverse() Invierte el orden de los elementos del array.

Ejemplo:
Curso de JavaScript - Apndice
-187-
document.write(t2.reverse());
devuelve: estas?,cmo,Hola Juan
Objeto.sort() Ordena los elementos del array siguiendo un orden
lexicogrfico.

Ejemplo:
document.write(t2.sort());
devuelve: Hola Juan,cmo,estas?



EL OBJETO BOOLEAN:

Este objeto nos permite crear tipos de datos que pueden ser verdaderos o falsos,
tomando los valores 'true' o 'false'. Podemos crear objetos de este tipo de varias
formas, por ejemplo:

var a=new Boolean(); //false
var b=new Boolean("hola"); //true
var c=new Boolean(0); //false
var d=new Boolean(5); //true
var e=new Boolean(true); //true
var f=new Boolean(false); //false

La propiedad prototype permite aadir nuevas propiedades al objeto Boolean.

El mtodo toString() devuelve una cadena que representa al objeto Boolean.
Si el valor es true, el mtodo devuelve la cadena true, si es false devuelve la
cadena false. Por ejemplo:

document.write(" a es : "+ a.toString() +"<br>");
document.write(" b es : "+ b.toString() +"<br>");
document.write(" c es : "+ c.toString() +"<br>");
document.write(" d es : "+ d.toString() +"<br>");
document.write(" e es : "+ e.toString() +"<br>");
document.write(" f es : "+ f.toString() +"<br>");

Genera la siguiente salida:

a es : false
b es : true
c es : false
d es : true
e es : true
f es : false




EL OBJETO NUMBER:

Este objeto representa el tipo de datos numrico con el que trabaja JavaScript.

Propiedades del objeto number:

Curso de JavaScript - Apndice
-188-

Propiedad Descripcin
MAX_VALUE Mximo valor que se puede manejar con un tipo numrico.
MIN_VALUE Mnimo valor que se puede manejar con un tipo numrico.
NaN Valor especial que representa que un valor no es numrico
(Not a Number)
NEGATIVE_INFINITY Representa el valor a partir del cual hay desbordamiento
negativo (underflow)
POSITIVE_INFINITY Representa el valor a partir del cual hay desbordamiento
positivo (overflow)
Prototype Permite aadir nuevas propiedades al objeto Number.


Para consultar estos valores tenemos que hacerlo directamente sobre el objeto
Number. Ejemplo:

document.write("Valor Mximo: "+ Number.MAX_VALUE +"<br>");
document.write("Valor Mnimo: "+ Number.MIN_VALUE +"<br>");
document.write("Valor Negativo Infinito: "+ Number.NEGATIVE_INFINITY +"<br>");
document.write("Valor Positivo Infinito: "+ Number.POSITIVE_INFINITY +"<br>");

Obtiene la siguiente salida:

Valor Mximo: 1.7976931348623157e+308
Valor Mnimo: 5e-324
Valor Negativo Infinito: -Infinity
Valor Positivo Infinito: Infinity

El mtodo toString() devuelve una cadena que representa al objeto Number.
Ejemplo:

var a= new Number;

a=125;
document.write("Valor de a: "+ a.toString() +"<br>");

Genera la siguiente salida:

Valor de a: 125




EL OBJETO FUNCTION:

Ya hemos utilizado este objeto en muchas ocasiones, sin mencionar que era un
objeto, cuando hablamos de declaracin de funciones.

Nos proporciona la propiedad 'arguments' que, como ya sabemos, es un Por el
hecho de ser un Array, cuenta con todas las propiedades y los mtodos de estos

Propiedades del objeto Function:


Curso de JavaScript - Apndice
-189-
Propiedad Descripcin
arguments Array que mantiene los argumentos que se han pasado al
llamar a una funcin.
prototype Permite aadir nuevas propiedades al objeto Function.


El mtodo toString() devuelve una cadena que representa al objeto Function. Esta
cadena est formada por:

function nombre_funcin (parmetros){cdigo_funcin}

Ejemplo: definimos la funcin probar con dos argumentos:

function probar(a,b) {
n=arguments.length; // Nmero de argumentos pasados a la funcion
for(i=0;i<n; i++)
document.write("Valor argumento "+i+": "+
probar.arguments[i]+"<br>");
document.write("Cdigo:<br><b> "+ probar.toString() +"</b><br>");
}

llamamos a la funcin con un argumento:

probar(10);

La salida que se genera es la siguiente:

Valor argumento 0: 10
Cdigo:
function probar(a,b) { n=arguments.length; // Nmero de argumentos
pasados a la funcion for(i=0;i
"); document.write("Cdigo:
"+ probar.toString() +"
"); }
Curso de JavaScript - Apndice
-190-
8.3 Referencia rpida a objetos JavaScript.

EL OBJETO WINDOW:

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


EL OBJETO FRAME:

Propiedades Mtodos Manejadores de eventos
defaultStatus
window
frames
parent
self
status
top
alert(),confirm(mensaje)
clearInterval(), setInterval()
clearTimeout(),setTimeout()
focus() , blur(),
moveBy(x,y) ,moveTo(x,y)
open(),close()
prompt(), scroll(x,y)
onLoad=
onUnload=


EL OBJETO LOCATION:

Propiedades Mtodos Manejadores de eventos
hash
host
hostname
href
pathname
port
protocol
search
reload()
replace(cadenaURL)
ninguno


EL OBJETO HISTORY:

Propiedades Mtodos Manejadores de eventos
length

back()
forward()
go(url)
ninguno


Curso de JavaScript - Apndice
-191-
EL OBJETO NAVIGATOR:

Propiedades Mtodos Manejadores de eventos
appCodeName
appName
appVersion
language
mimeTypes
platform
plugins
userAgent
javaEnabled()

ninguno


EL OBJETO DOCUMENT:

Propiedades Mtodos
alinkColor, anchors, applets
bgColor, cookie,
fgColor , forms
images, lastModified
linkColor, links
location , referrer
title ,vlinkColor
clear()
open()
close()
write()
writeln()



LOS OBJETOS LINK Y ANCHOR:

Propiedades Mtodos Manejadores de eventos
links[indice].target
length
propiedades del
objeto location
ninguno

onClick=
onMouseOver=


EL OBJETO IMAGE:

Propiedades Mtodos
border, complete,
height, hspace,
lowsrc, name,
src, vspace, width
Explorer y Netscape no tienen
ningn mtodo comn asociado a
este objeto.



EL OBJETO FORMULARIO:

Propiedades Mtodos Manejadores de eventos
action, elements
encoding,
length , method
target
reset()
submit()

OnSubmit=


LOS OBJETOS TEXT, TEXTAREA Y PASSWORD:

Curso de JavaScript - Apndice
-192-
Propiedades Mtodos Manejadores de eventos
defaultValue
name
value
blur()
focus()
select()

onBlur=
onFocus=
onChange=
onSelect=


LOS OBJETOS BUTTON, RESET Y SUBMIT:

Propiedades Mtodos Manejadores de eventos
name
value
click() onClick=


EL OBJETO CHECKBOX:

Propiedades Mtodos Manejadores de eventos
checked
defaultChecked
name
value
click() onClick=


EL OBJETO RADIO:

Propiedades Mtodos Manejadores de eventos
checked
defaultChecked
length
name
value
click() onClick=


EL OBJETO SELECT:

Propiedades Mtodos Manejadores de eventos
length
name
options
selectedIndex
options[n].defaultSelected
options[n].index
options[n].selected
options[n].text
options[n].value
ninguno onChange=


EL OBJETO HIDDEN:
Propiedades:
name
value

EL OBJETO STRING:
Propiedades:
Curso de JavaScript - Apndice
-193-
length
prototype

Mtodos:
cadena.anchor(nombre_del_ancla)
cadena.big()
cadena.blink()
cadena.bold()
cadena.charAt(indice)
cadena.concat(cadena)
cadena.fixed()
cadena.fontcolor(color)
cadena.fontsize(tamao)
cadena.indexOf(cadena_buscada, indice)
cadena.italics()
cadena.lastIndexOf(cadena_buscada ,indice)
cadena.link(URL)
cadena.small()
cadena.split(carcter)
cadena.strike()
cadena.slice(inicio,fin)
cadena.sub()
cadena.substr(N1, N2)
cadena.substring(N1,N2)
cadena.sup()
cadena.toLowerCase()
cadena.toUpperCase()


EL OBJETO MATH:
Propiedades:
Math.E
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math.PI
Math.SQRT1_2
Math.SQRT2

Mtodos:
Math.sqrt(N)
Math.pow(N1, N2)
Math.abs(N)
Math.round(N)
Math.ceil(N)
Math.floor(N)
Math.random()
Math.max(N1, N2)
Math.min(N1, N2)
Math.acos(N)
Math.asin(N)
Math.atan(N)
Math.cos(N)
Math.exp(N)
Curso de JavaScript - Apndice
-194-
Math.floor(N)
Math.log(N)
Math.sin(N)
Math.tan(N)


EL OBJETO DATE:
Mtodos:
ObjetoFecha.getTime()
ObjetoFecha.getDate()
ObjetoFecha.getDay()
ObjetoFecha.getHours()
ObjetoFecha.getMinutes()
ObjetoFecha.getMonth()
ObjetoFecha.getSeconds()
ObjetoFecha.getYear()
ObjetoFecha.setDate(da_mes)
ObjetoFecha.setDay(da_semana)
ObjetoFecha.setHours(horas)
ObjetoFecha.setMinutes(minutos)
ObjetoFecha.setMonth(mes)
ObjetoFecha.setSeconds(segundos)
ObjetoFecha.setTime(milisegundos)
ObjetoFecha.setYear(ao)
ObjetoFecha.toGMTString()
ObjetoFecha.toLocaleString()


EL OBJETO ARRAY:
Propiedades:
Objeto.length

Mtodos:
Objeto.concat(array)
Objeto.join(separador)
Objeto.slice(inicio,fin)
Obteto.toString()
Objeto.reverse()
Objeto.sort()


EL OBJETO BOOLEAN:
Propiedades:
prototype

Mtodos:
Objeto.toString()


EL OBJETO NUMBER:
Propiedades:
MAX_VALUE
MIN_VALUE
NaN
Curso de JavaScript - Apndice
-195-
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype

Mtodos:
Objeto.toString()


EL OBJETO FUNCTION:
Propiedades:
arguments
prototype

Mtodos:
Objeto.toString()
Curso de JavaScript - Apndice
-196-
8.4 Lista de eventos ms comunes.

EVENTOS DE RATN:
onmousedown
onmousemove
onmouseover
onmouseout
onmouseup
onclick
ondblclick
onselect

EVENTOS DE TECLADO:
onkeydown
onkeypress
onkeyup

EVENTOS DE ENFOQUE:
onblur
onfocus

EVENTOS DE FORMULARIO:
onreset
onsubmit

EVENTOS DE CARGA DE PGINA:
onload
onunload

OTROS EVENTOS:
onAbort
onChange
onDragDrop
onError
onMove
onResize

Curso de JavaScript - Glosario de trminos

-197-

GLOSARIO DE TRMINOS


Active X: Pequeos programas que permiten mostrar pginas web dinmicas en el
PC y que suplen las limitaciones que, al respecto, tiene el lenguaje HTML. Los
controles ActiveX tienen que descargarse al disco duro del ordenador para que los
documentos que los utilizan puedan visualizarse.

Alfanumrico: Este termino se utiliza en informtica para designar un teclado que
integra en una sola pieza el teclado alfabtico normal y el numrico (ms las teclas de
funcin y teclas especiales). Este tipo de teclados se diferencian de otros -cada vez
menos habituales- que cuentan con el teclado numrico separado.

Algoritmo: Conjunto de Instrucciones que especifican la secuencia de operaciones a
realizar, en orden, para resolver un sistema especifico o clase de problema.

ANSI (American National Standards Institute): Organizacin dedicada a la creacin y
establecimiento de estndares para facilitar el comercio y las telecomunicaciones.

API: Siglas de "Applications Programming Interface" o Interfaz de programacin de
aplicaciones. Se trata de un conjunto de libreras que se suministran junto con una
aplicacin determinada y que implementan un conjunto de rutinas que pueden ser
invocadas por un programa externo a esa aplicacin.

APPLET Aplicacin escrita en JAVA y compilada.

Array: conjunto de elementos de informacin todos del mismo tipo que ocupan
posiciones contiguas en la memoria del ordenador.

ASCII: (American Standard Code for Information Interchange). Estndar Americano
para Intercambio de Informacin. La tabla bsica de caracteres ASCII esta compuesta
por 128 caracteres incluyendo smbolos y caracteres de control. El ms utilizado es al
ASCII extendido (de 8 bits) que permite representar 256 caracteres, como la , vocales
acentuadas, etc., frente al ASCII de 7 bits que solo permite representar 127
caracteres.

Banner (anuncio): Recuadro publicitario, en texto o imagen, en una pgina Web, que
normalmente enlaza con el sitio Web del anunciante.

Binario: Se dice que un sistema es binario cuando slo caben dos posibles resultados
o respuestas a un planteamiento determinado. El cdigo binario es la base de la
informtica, al reducir todas las posibles instrucciones interpretadas por la mquina a
un cdigo de unos y ceros (encendido/apagado; si/no) por el que el microprocesador
funciona y ejecuta las rdenes introducidas en l.

Browser: Navegador. Aplicacin para visualizar documentos Web y navegar por
Internet. En su forma mas bsica son aplicaciones hipertexto que facilitan la
navegacin por los servidores de navegacin de Internet. Los mas avanzados,
cuentan con funcionalidades plenamente multimedia y permiten indistintamente la
navegacin por servidores Web, FTP, Gopher, acceso a grupos de noticias, la gestin
del correo electronico, etc.

Bucle: estructura repetitiva.

Curso de JavaScript - Glosario de trminos

-198-

Bug: Defecto de sistema. Un Bug es un fallo del disco de un sistema que sus
creadores no han detectado. Puede producirse por un error en una frmula
matemtica o por un defecto en la forma de leer y tratar la informacin que se recibe.

Buscador: Los buscadores son sitios Web, especializados en localizar informacin a
traves de Internet.

CGI:(Common Getaway Interface). Interface Comn de Pasarela. Interface de
intercambio de datos estndar en la Web travs del cual se organiza el envo de
recepcin de datos entre visualizadores y programas residentes en servidores Web.

Clase: (Class). En programacin orientada a objetos, un tipo de datos definido por el
usuario que especifica un conjunto de objetos que comparten las mismas
caractersticas. Un miembro de la clase (objeto) es un "ejemplo" o caso de la clase.
Las clases concretas estn diseadas para citar como ejemplos, mientras que las
clases abstractas, para pasar las caractersticas por herencia.

Cdigo: Se refiere a las instrucciones contenidas en un programa, y entendibles por el
ordenador. Las aplicaciones normales pueden tener miles de lneas de cdigo que es
necesario mantener y actualizar.

Compilador: Programa traductor que genera lenguaje mquina a partir de un lenguaje
de programacin de alto nivel basado en el lenguaje.

Cookie: Pequeo fichero de texto y datos que un servidor Web enva a un navegador
Web para que el servidor pueda identificarle cuando regrese a dicho sitio, de esta
manera puede saber qu hizo el usuario en la ltima visita.
Con una cookie: No se puede obtener informacin real sobre el usuario, como su
direccin de e-mail; No se puede usar para revisar el contenido del disco duro y no
puede transmitir virus a los ordenadores.

CSS: Cascading Style sheets. Hojas de Estilos en Cascada.

DHTML Dynamic HTML, HTML Dinmico. Son aplicaciones que contienen objetos y
eventos y se procesan en el lado del cliente dentro del navegador Web. Es una
combinacin de: HTML, Hojas de estilo en cascada (CSS, Cascading Style Sheets) y
JavaScript.

EBCDIC (Extended Binary Coded Decimal Interchange Code) Cdigo ampliado de
intercambio decimal codificado en binario. Cdigo binario para texto, comunicaciones y
control de impresora de IBM. Este cdigo se origin con el System/360 y an se usa
en mainframes IBM y en la mayora de los computadores de medio rango de IBM. Es
un cdigo de 8 bits (256 combinaciones) que almacena un carcter alfanumrico o dos
dgitos decimales en un byte.
EBCDIC y ASCII son los dos cdigos de mayor uso para representar datos.

Estructura de control: es un tipo de instruccin que controla la secuencia de
ejecucin de otras instrucciones del programa. Puede ser bsicamente de dos tipos:
alternativa o repetitiva.

Evento: Un evento es una accin que el usuario realiza, como por ejemplo hacer clic
con el ratn o mover el ratn por una imagen.

Explorador Web: Ver Navegador.

Curso de JavaScript - Glosario de trminos

-199-

Expresin: es una combinacin de objetos como variables, constantes y operadores
que devuelven un valor realizando determinadas operaciones.

Frame: Marco, cuadro.

Funcin: conjunto de instrucciones (empaquetadas en un determinado formato) que
realizan una tarea o parte de ella, devolviendo un valor.

Funciones predefinidas: son programas predefinidos que devuelven un valor a partir
del valor o los valores con los que se invoca a la funcin.

Guin JavaScript: Un guin es un programa JavaScript incluido en una pgina HTML.

Hipertexto: Documento que rene imgenes, textos, sonidos o vdeos relacionados
entre s por medio de enlaces, de tal modo que al sealar una palabra o grfico se
pasa de uno a otro. La world Wide Web es una forma de usar la Internet por medio de
hipertextos conectados entre s.

Hipervnculo: Tambin se conoce como enlace. Son referencias entre varias pginas
que se encuentran en la red Internet o en una Intranet.

HTML (Hyper Text Markup Language): Lenguaje de Marcado de HiperTexto. Es el
lenguaje en el que estn escritas las pginas Web.

HTTP (HyperText Transfer Protocol): Protocolo de Transferencia de Hipertexto. Es un
protocolo de Internet que permite la transferencia de pginas Web entre ordenadores.

Identificador: es un nombre que se da a un objeto de un programa (variable,
constante, funcin, etc).

Indice: expresin numrica (normalmente variable numrica) que se emplea para
acceder a los elementos de un array.

Intrprete: Programa que realiza un anlisis de una aplicacin escrita en un lenguaje
no-mquina (fcil de entender y trabajar con l) y lo convierte en lenguaje mquina
entendible por el ordenador.

Iteracin: cada repeticin del bloque de instrucciones que se encuentra en una
estructura repetitiva.

Java: Lenguaje desarrollado por Sun Microsystems para la elaboracin de
aplicaciones exportables a la red y capaces de operar sobre cualquier plataforma a
travs, normalmente, de visualizadores Web. El programa Java se descarga desde el
servidor Web y lo interpreta un programa que se ejecuta en el equipo que contiene el
explorador de Web.

JavaScript: Lenguaje de programacin desarrollado por Netscape Communications
basado en scripts y orientado a la Web. El cdigo de JavaScript se inserta
directamente en una pgina HTML.

Lenguaje de programacin: Conjunto de normas lingsticas que permiten escribir
un programa y que ste sea entendido por el ordenador y pueda ser trasladado a
ordenadores similares para su funcionamiento en otros sistemas.

Curso de JavaScript - Glosario de trminos

-200-

Lenguaje mquina o Cdigo mquina: Conjunto de instrucciones entendibles
directamente por el ordenador, puesto que se componen de unos y ceros.
Generalmente, el programador utiliza un lenguaje de programacin basado en el
lenguaje natural, y ste es traducido a cdigo mquina posteriormente.

Mquina virtual de Java: Virtual Machine, VM. Es el intrprete de Java que
incorporan los navegadores. La VM toma applets y los ejecuta.

Mtodo: Un mtodo son los procedimientos que puede hacer un objeto.

MIME: (Multipurpose Internet Mail Extension) Extensin multipropsito de correo
Internet. Extensiones para el formato SMTP que permite llevar mltiples tipos de datos
(binario, audio, video, etc.).

Navegador: Los navegadores son programas de ordenador diseados para facilitar la
visualizacin de pginas Web en Internet. (Ver Browser).

Objeto: Un objeto es una cosa de cualquier clase. Los objetos con los que trata
JavaScript en los navegadores Web son: ventanas, formularios y sus elementos,
imgenes, enlaces, etc...

OCTAL: Se trata de otro sistema de numeracin como el binario, el hexadecimal o el
decimal (que usamos nosotros). Este sistema utiliza como base el 8 (el binario utiliza
el 2). En l, cada nmero es representado por un grupo de 3 bits cuyo valor binario va
del 0 al 7 (base 8). La conversin de decimal a octal puede hacerse mediante
sucesivas divisiones por 8. Lo inverso, octal a decimal, se realiza multiplicando por
cada cifra, esto es, por potencias.

Operador: elemento que sirve para manejar o transformar la informacin formando
expresiones.

Orientacin a Objetos: En la programacin tradicional, se distingue entre los datos y
los procedimientos. En la tcnica de programacin orientada a objetos no es as,
puesto que no existen los procedimientos como tales. Los elementos de los programas
se denominan objetos y son considerados como entidades independientes que se
relacionan e interactan entre s.

Pginas Dinmicas: Pginas Web que contienen, adems de texto y grficos,
archivos de sonido, de vdeo, animaciones o elementos interactivos. Para su correcta
reproduccin, suele requerir la instalacin e integracin en el sistema de pequeas
aplicaciones especiales.

Parmetros: sirven para pasar valores en la llamada a una funcin.

Plug-ins: son programas que amplan las posibilidades del navegador, generalmente
para realizar una funcin especfica. Los Plug-ins ms comunes son Shockwave y
Flash de Macromedia , que permiten ver animaciones, y tambin QuickTime de Apple,
que permite al navegador reproducir pelculas digitales y otros contenidos multimedia.

POO: Programacin Orientada a Objetos.

Propiedades: Caractersticas de los objetos.

SMTP: (Simple Mail Transfer Protocol). Protocolo Simple de Trasferencia de Correo.
Protocolo que se usa para trasmitir correo electrnico entre servidores.
Curso de JavaScript - Glosario de trminos

-201-


Tag: Rtulo, etiqueta, identificador.

UNICODE : Superconjunto del conjunto de caracteres ASCII que utiliza dos bytes en
lugar de uno para cada carcter. Unicode es capaz de manejar 65.536 combinaciones
de caracteres en lugar de 256, y puede contener los alfabetos de la mayor parte de los
lenguajes a nivel mundial. ISO define un conjunto de caracteres de cuatro bytes para
alfabetos mundiales, pero tambin utiliza el Unicode como un subconjunto.

URL (Uniform Resource Locator): Localizador Universal de Recursos. Es la direccin
de los recursos que se pueden encontrar en Internet: pginas Web (http), archivos
(ftp) o grupos de noticias (news). Por ejemplo, una direccin URL es:
http://www.terra.es/

Variable: consiste en un conjunto de posiciones de memoria reservadas a las que
damos un nombre llamado identificador de la variable que nos permitir depositar
informacin que puede ser consultada o cambiada en cualquier momento de la
ejecucin del programa.

Variable Global: es una variable que se puede utilizar en cualquier funcin o
procedimiento de un programa..

Variable Local: Una Variable Local es una variable propia o exclusiva del
procedimiento o funcin donde est declarada e inicializada.

World Wide Web (WWW) o Web: La traduccin de WWW en espaol podra ser: Tela
de Araa Amplia y Mundial. La Web es la parte de Internet a la que accedemos a
travs del protocolo HTTP mediante un navegador. Para muchos la Web es toda la
informacin que hay en Internet en forma de pginas Web.