Manual Completo de DHTML y JavaScript

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
-4-
JavaScript 1.0 Navigator 2.0 Internet Explorer 3.0 Jscript 1
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.
-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.
-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:


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.
-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>
function vertexto(){
}
</SCRIPT>

</HEAD>
<BODY>
Esto es HTML<br>
<b>
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:

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



Ejemplo:



El comentario empieza con los caracteres: 

Para ocultar JavaScript a los navegadores antiguos escribiremos los
comentarios como se expone a continuacin:


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

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

-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]
-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:
-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>
<BODY>
/* Ejemplo Arrays 1*/
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:

<BODY>
/* Ejemplo Arrays Con valores introducidos por el usuario*/

-49-

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:


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

<BODY>
/************ Ejemplo bsqueda en Arrays**************/

Ultimo = Alumnos.length - 1;
Vbusca ="";
i= 0;

/************ Entrada del nombre a buscar ************/

Vbusca = prompt("Introduce el nombre del alumno", " ");

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

i = 0;
-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>

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:

-117-
defaultValue
name
value
blur()
focus()
select()

onBlur=
onFocus=
onChange=
onSelect=

[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;
-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">
<INPUT type="reset" value=Restablecer>
</center>
</td>
</table></center>
</FORM>
</BODY>
</HTML>


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


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.


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

Mtodos de los objetos checkbox:
click();

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>

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

if (document.FORMULARIO.AIRE.checked)

Devuelve true si la casilla est seleccionada, en caso contrario devuelve
false.


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


checked
defaultChecked
length
name
value
click() onClick=

[window.]document.nombreformulario.grupobotones[x].propiedad
[window.]document.nombreformulario.grupobotones[x].mtodo()

[window.]document.nombreformulario.elements[n].mtodo()
-122-

[window.]document.forms[m].grupobotones.propiedad
[window.]document.forms[m].grupobotones.mtodo()

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

Mtodos del objeto radio:
click()

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


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:

-124-

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

-125-


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

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

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

Para acceder a las propiedades:
[window.]document.nombreformulario.nombrecampo.propiedad
[window.]document.forms[m].nombrecampo.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.

-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.
-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.
-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>
</HEAD>
<BODY>

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


<html>
<head>
<title>5-OBJETOS - Ejemplo5_31 - String</title>

</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>
-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
-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.
-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);
-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");
-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
-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>
</head>
<body >

</SCRIPT>
</body>
</html>

La salida generada utilizando el navegador Internet Explorer es:

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

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

-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>
</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>
<a href="javascript:Siguiente()">Siguiente imagen</a></p>
</body>
-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>

El cdigo de la funcin Verimagen() es:

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

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.


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

<form name="FORMULARIO">
-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.

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

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

-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

-149-
Eventos de teclado:

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:

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:

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

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:

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

-152-



<html>
<head>
<title>6-EVENTOS- Ejemplo6_1 - Eventos de ratn</title>

</script>
</head>
<body>
-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):

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

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


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

onMouseOver="return window.status='Informacin de secretara'"

onMouseOver="return window.status='Informacin y pginas de
alumnos'"

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

-157-


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>

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

#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>
#saludo {position:absolute; top:10; left:50; width:100;
-161-
background-color:#AADDFF}
</STYLE>
</head>
<BODY>
<P>Primera linea</P>
<P ID="saludo">Hola Mundo!</P>
<P>Segunda linea</P>
</BODY>
</HTML>



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



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

#ejemplo {position: absolute; left:100;
top:100; width:300}
</STYLE>

<DIV ID="ejemplo">
Estiqueta DIV con estilo
</DIV>

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


El cdigo para Internet Explorer es el siguiente:

<HTML>
<HEAD>
<TITLE>7 - DHTML - Mover texto con Explorer - Ejemplo7_4.htm</TITLE>
#Parrafo {position:absolute; top:50; left:100; width:200;
height:100; background-color:aliceblue}
</STYLE>

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

-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

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

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

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


</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))
if(document.all.Parrafo.style.pixelLeft >
(document.body.clientWidth-50))
}
-168-

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

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

}

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.


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>
#Estrella {position:absolute; top:30; left:5}
#Tomy {position:absolute; top:110; left:5}
</STYLE>

<SCRIPT language=JavaScript>
-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.
-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.


<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)
{
-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"
<b>OBJETOS</b></a>
</td>
<td width="200">
<b>EVENTOS</b></a>
</td>

<td width="200">
<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.

-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:
-173-
Netscape: document.capa.visibility='hide';
Explorer: document.all.capa.style.visibility='hidden';


<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 ;
}
#ninguna {
background-color: lawngreen;layer-background-color: lawngreen;
}
</style>

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

function Ocultar() //oculta las capas
{
if (Nav) {
document.capa1.visibility='hide';
document.ninguna.visibility='hide';
}
else {
document.all.capa1.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">
Segunda Foto</p>
</a>
</td>
<td width="157">
<p align="center">
Tercera Foto</p>
</a>
</td>
<td width="148">
<p align="center">
Ninguna</p>
</a>
</td>
</table>
</div>

<b>Islandia</b>
<p><img border="0" src="barco.gif" width="300" height="224"></p>
<B>LAGUNA GLACIAR</B>
</div>

<b>Islandia</b>
<p><img border="0" src="canyon.gif" ></p>
-175-
<B>CAON DEL JOKULSA</B>
</div>

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


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

function Ocultar(){ //Oculta los submenus al cargarse la pgina
document.all.subMenu0.style.visibility=hidden;
}

function Posicionar(){ //Posiciona los mens y submens
document.all.Menu1.style.pixelTop = m1;
document.all.subMenu1.style.pixelTop = s1;
}

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 ////////////////////////
m1=100;s1=115; m2=150;s2=165;
if(document.all.subMenu0.style.visibility=='visible')
}
else {
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///////////////////
if (mimenu.visibility=='hidden')
else
mimenu.visibility='hidden'
break;
} //fin del switch
}
</SCRIPT>

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

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

<A href="javascript:OpcionMenu(1)">Tema Eventos</A>
</DIV>

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

<A href="Ejemplo6_2b.htm" target="DERECHA">Ejemplo 2</A><BR>
<A href="Ejemplo6_3.htm" target="DERECHA">Ejemplo 3</A>
</DIV>

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

-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>
-180-
</SCRIPT>
............ 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';
}
else{
document.all.subMenu0.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
{
}
}

function OpcionMenu(opcion){//comprueba la opcin de men seleccionada
switch(opcion){
case 0: /////////////////////Opcion menu0 //////////////////

if(Nav){
mimenu = document.subMenu0;
mimenu1 = document.subMenu1;
}
else {
mimenu1 = document.all.subMenu1.style;
-181-
}
if(!Nav){
m1=135;s1=145;m2=165;s2=180;
if(mimenu1.visibility=='visible' )
}
else {
m1=100;s1=115; m2=125;s2=140;
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' )
}
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 {
mimenu0 = document.all.subMenu0.style;
}

if(!Nav){
m1=100;s1=115; m2=150;s2=165;
if(mimenu0.visibility=='visible')
}
else {
m1=100;s1=115; m2=125;s2=140;
if(mimenu0.visibility=='visible')
}
-182-

}
else
{
if (mimenu.visibility=='hide') {
m1=100;s1=115; m2=150;s2=165;
if(mimenu0.visibility=='show')
}
else {
mimenu.visibility='hide';
m1=100;s1=115; m2=125;s2=140;
if(mimenu0.visibility=='show')
}
}

Posicionar();
break;
case 2: /////////////////////Opcion menu2///////////////////

if(Nav) mimenu = document.subMenu2;
else mimenu = document.all.subMenu2.style;

if(!Nav){
if (mimenu.visibility=='hidden')
else
mimenu.visibility='hidden'
}
else
{
if (mimenu.visibility=='hide')
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
-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
-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

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

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


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:

-188-

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


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


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:

-189-
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() +"
"); }
-190-
8.3 Referencia rpida a objetos JavaScript.

EL OBJETO WINDOW:

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:

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:

hash
host
hostname
href
pathname
port
protocol
search
reload()
replace(cadenaURL)
ninguno

EL OBJETO HISTORY:

length

back()
forward()
go(url)
ninguno

-191-
EL OBJETO NAVIGATOR:

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:

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:

action, elements
encoding,
length , method
target
reset()
submit()

OnSubmit=

LOS OBJETOS TEXT, TEXTAREA Y PASSWORD:

-192-
defaultValue
name
value
blur()
focus()
select()

onBlur=
onFocus=
onChange=
onSelect=

LOS OBJETOS BUTTON, RESET Y SUBMIT:

name
value
click() onClick=

EL OBJETO CHECKBOX:

checked
defaultChecked
name
value
click() onClick=

EL OBJETO RADIO:

checked
defaultChecked
length
name
value
click() onClick=

EL OBJETO SELECT:

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:
-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)
-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
-195-
NEGATIVE_INFINITY
POSITIVE_INFINITY
prototype

Mtodos:
Objeto.toString()

EL OBJETO FUNCTION:
Propiedades:
arguments
prototype

Mtodos:
Objeto.toString()
-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.


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


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


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

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

Manual Completo de DHTML y JavaScript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual Completo de DHTML y JavaScript

Încărcat de

Drepturi de autor:

Formate disponibile

Curso de JavaScript - ndice

S-ar putea să vă placă și