Guia JavaScript Inces

INCES MILITAR
Barquisimeto – Estado Lara
Fase: Desarrollo Web

Instructor: Kurt Vladimir Gude P.
Java
Script
Guía de Programación JavaScript
1. Introducción a JavaScript:
Las páginas HTML son estáticas por naturaleza. El JavaScript se introdujo para superar la
desventaja de tener páginas web estáticas. Éste es un lenguaje de programación en el lado cliente. Los
programas JavaScript, incrustados en el código HTML, pueden ejecutarse en el navegador.
Aunque JavaScript puede usarse también en algunos servidores como un lenguaje script en el
lado servidor, es más popular como un lenguaje script en el lado cliente.
1.1. Historia de JavaScript:

JavaScript fue desarrollado por Netscape Corporation bajo el nombre de „LiveScript‟. Se
renombró como JavaScript debido a que Netscape tenía una sociedad conjunta con Sun Microsystems.
Actualmente, este lenguaje de script es soportado por la mayoría de los navegadores.
JavaScript no tiene ninguna conexión con Java, aparte del hecho de que su sintaxis se deriva de
Java. Java es un lenguaje de programación orientado a objetos mientras que JavaScript es un lenguaje
de script basado en objetos. Los programas Java se compilan antes de la ejecución mientras que
JavaScript, siendo un lenguaje de script, es interpretado antes de que sea ejecutado.
1.2. Características de JavaScript:

JavaScript mejora la interactividad del usuario en el lado cliente. Algunas de las características
son:
 JavaScript adopta una tecnología basada en objetos, lo que significa que proporciona un conjunto de
objetos del navegador predefinidos. JavaScript permite a los usuarios definir objetos para su uso en
el script.
 JavaScript está basado en un modelo manejado por eventos. En este tipo de modelos, se necesita
una acción apropiada en respuesta a los eventos del usuario, tales como: navegar a través de
diferentes páginas o hacer clic en los enlaces. JavaScript es capaz de responder a los eventos del
usuario.
 JavaScript se puede usar para hacer interactivas las páginas estáticas HTML. Se puede por ejemplo
validar los campos del formulario para ver si el usuario ingresa correctamente los valores requeridos.
 JavaScript es independiente del navegador, a diferencia de algunos lenguajes de script del lado
cliente. En consecuencia, JavaScript puede ejecutarse en cualquier navegador que tenga el motor
script de JavaScript.
 JavaScript es muy fácil de aprender. La sintaxis de JavaScript es similar a Java y sus construcciones
son similares a C o C++. Por lo tanto, cualquiera que esté familiarizado con estos lenguajes puede
aprender fácilmente JavaScript.
-------- o --------
1
2. Etiquetas básicas en la programación JavaScript:
<!DOCTYPE HTML PUBLIC -//w3c//DTD HTML 4.0//ENU>
<HTML>
<HEAD>
<TITLE>Ejemplo de JavaScript</TITLE>
<SCRIPT LANGUAGE="javascript">
// Aqui se escriben las funciones script
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Nota: Si el navegador no soporta JavaScript, el código JavaScript escrito aparece directamente en la

pantalla. Para evitar esto, se puede modificar el código anterior de la siguiente forma:
<HEAD>
<TITLE>Ejemplo de JavaScript</TITLE>

</SCRIPT>
</HEAD>
Nota: Observe que se han agregado dos nuevas líneas de código () que son comentarios
de HTML que aparecen dentro de las etiquetas script. Si el navegador tiene la capacidad de entender
código Javascript, entonces los comentarios HTML se ignoran.
2.1. Ejemplo de JavaScript:

<HTML>
<HEAD>
<TITLE>Mi primer JavaScript</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
2.2. Agregar Script al Documento:

Existen tres formas de agregar un script al documento HTML:
 Ubicar el script en el Head del documento.
 Inscrustar el script en el cuerpo (Body) del documento.
 Enlazar a un script almacenado en otro archivo.
Las funciones Script a ser usadas en varios documentos deben estar ubicadas en un archivo
separado. Luego este archivo puede ser referenciado desde el documento. Ejemplo:
<HEAD>
<SCRIPT SCR="Funciones.js" LANGUAGE="javascript">

</SCRIPT>
</HEAD>
-------- o --------
2
3. Variables y Tipos de Datos:
Las variables JavaScript se declaran de la siguiente manera:

</SCRIPT>
Nota: Es opcional, agregar un punto y coma (;) al final de una sentencia.
La declaración de variables en JavaScript tiene las siguientes características:

 Las variables se declaran anteponiendo la palabra var.
 A las variables se les puede asignar o no valores en el momento de la declaración.
 No es obligatorio declarar las variables (declaración implícita).
 Las variables Javascript son de libre tipado, es decir, cualquier variable puede almacenar datos de
cualquier tipo. Ejemplo:

</SCRIPT>
En el ejemplo anterior, la variable nota no tiene asignado ningún valor inicialmente.

A la variable codigoProducto se le asigna primero un valor de cadena (string) y posteriormente un
valor entero, esto es posible debido a la conversión de tipos de dato.
3.1. Tipos de Dato en JavaScript:
Tipo Descripción Ejemplos

Number Cualquier número decimal positivo, negativo o cero. 7, 2.5, 8.19
String Cualquier cadena dentro de las comillas. "Pamela"
Boolean Un true o false lógico. true, false
Object Cualquier entidad que tenga propiedades y métodos. Estudiante, Profesor
3.2. Arreglos en JavaScript:

Las colecciones o arreglos en JavaScript se obtienen usando el objeto Array. El índice
comienza en cero. Los arreglos en JavaScript son similares a los de Java. JavaScript soporta
únicamente arreglos de una sola dimensión, pero también puede simular arreglos multidimensionales.
var arreglo = new Array();
var arr = new Array("Juan", "Tamara", 5, true);
arreglo[0] = 30;
document.write(arreglo[0]+"<BR>");
document.write(arr[1]+"<BR>");
document.write(arr);
</SCRIPT>
Nota: En el ejemplo anterior se imprimirá en pantalla:

30
Tamara
Juan,Tamara,5,true
3
3.3. Operadores y Expresiones:
Los operadores permitidos en JavaScript son los mismos que se usan en Java o C++. Los
operadores pueden ser aritméticos, relacionales o lógicos.
Operador Descripción Ejemplos

+ Adición numérica o concatenación de cadenas. 7 + 2
nombre + " Pérez"
- Sustracción. 5 – 1
* Multiplicación. 3 * 4
/ División. 5 / 2
% Módulo o residuo de la división entera. 5 % 2
= Asignación. suma = num + 2
++ Incremento. cont++
-- Decremento. cont--
+=,-=,*=,/= Operadores compuestos de asignación. b += 2
>,<,>=,<= Mayor que, menor que, mayor o igual que, menor o igual que. total < 5
== Es igual a. (num == 5)
=== Identidad (exactamente igual). (a === b)
!= No es igual a. (num != 3)
&&, ||, ! AND, OR, NOT. (!encontrado)
Ejemplo:
var num1=5, num2=2;
divi = num1/num2;
document.write("Primer numero: " + num1 + "<BR>");
document.write("Segundo numero: " + num2 + "<BR>");
document.write("La división es: " + divi + "<BR>");
cadena = "Hasta " + "luego";
document.write(cadena);
</SCRIPT>

Primer numero: 5
Segundo numero: 2
La division es: 2.5
Hasta luego...
-------- o --------
4. Interactuar con el Usuario:

Existen métodos en JavaScript que permiten la entrada o salida de texto que permiten la
interacción del usuario. Entre estos métodos tenemos: alert(), prompt() y confirm().
4.1 Método alert():

El método alert() proporciona una salida o mensaje al usuario en pantalla. Se abre una
ventana de diálogo con un texto (mensaje) y un botón Aceptar. Ejemplo:
alert("Hola mundo...");
</SCRIPT>
Nota: En el ejemplo anterior se abrirá una ventana de diálogo con el texto: Hola mundo...
4
4.2 Método prompt():
El método prompt() permite al usuario ingresar texto. Se abre una ventana de diálogo con un
mensaje, una casilla de texto y un botón Aceptar. Este método recibe uno o dos parámetros. El primer
parámetro es un texto para indicarle al usuario lo que debe introducir en la casilla de texto; el segundo
parámetro es opcional y corresponde al valor por defecto en la casilla de texto. El método prompt()
puede asignarse a una variable. Ejemplo:
usuario = prompt("Introduzca su nombre:", "Escriba su nombre aquí");
document.write("Bienvenido " + usuario);
</SCRIPT>
Nota: En el ejemplo anterior se muestra una ventana de diálogo con una casilla de texto para introducir el
nombre del usuario. Si el usuario introduce el nombre Alberto y pulsa clic en el botón Aceptar se
imprimirá en pantalla: Bienvenido Alberto
Si el usuario presiona el botón Cancelar, el método prompt() asigna o devuelve el valor null.
4.3 Método confirm():

El método confirm() toma una cadena como parámetro. Se abre una ventana de diálogo con
la cadena de texto y los botones Aceptar y Cancelar. El usuario tiene que escoger entre un Sí
(Aceptar) y un No (Cancelar). Este método puede ser asignado a una variable, la cual tendrá un valor
lógico (true o false) de acuerdo al botón seleccionado. Ejemplo:
var respuesta;
respuesta = confirm("Desea aceptar la operación?");
</SCRIPT>
Nota: El ejemplo anterior muestra una ventana de diálogo con el texto: Desea aceptar la
operación?; y se presentan dos botones (Aceptar y Cancelar). Si el usuario pulsa el botón
Aceptar la variable respuesta tendrá el valor true; si se pulsa el botón Cancelar la variable
respuesta tendrá el valor false.
-------- o --------
5. Construcciones de Decisión:
Las construcciones de decisión permiten ejecutar un bloque particular de código basado en una
condición. En JavaScript existen dos construcciones de decisión:
 if..else
 switche..case
5.1. La sentencia if..else:

Sintaxis:
if (condición)
sentencia a ejecutar;
else
sentencia a ejecutar;
Sintaxis:
if (condición) {
sentencias a ejecutar;
}
else {
}
5
Sintaxis:
if (condición) {
}
else if (condición) {
}
JavaScript permite la construcción de bloques if..else anidados sin límite en el número de

niveles. La palabra else es opcional.
Ejemplo:
clave = prompt("Introduzca su clave:");
if (clave == "123") {
document.write("Bienvenido...");
}
else {
alert("Usuario no autorizado...");
}
</SCRIPT>
5.2. La sentencia switch..case:

La sentencia switch..case en JavaScript es similar a la construcción switch disponible en
lenguajes de programación como C, C++ o Java.
Sintaxis:
switch (expresión) {
case valor1 :
break;
case valor2 :
case valor3 :
break;
default :
}
Una manera más fácil para manejar if..else anidados es usar la construcción
switch..case. Si más de un case van a ejecutar el mismo conjunto de sentencias, entonces pueden
escribirse una debajo de la otra, tal como se muestra en la sintaxis para case value2 y case value3.
Debe insertar la sentencia break como última instrucción de cada case, sino se ejecutarán las
instrucciones pertenecientes a los case siguientes. Ejemplo:
nombre = prompt("Introduzca su nombre:");
switch (nombre) {
case "Administrador" :
alert("Bienvenido Administrador");
break;
case 'Lubia' :
case "Hernan" :
alert("Bienvenido... " + nombre);
break;
default :
alert('Usuario no autorizado');
}
</SCRIPT>
6
Nota: Observe que las cadenas (String) en JavaScript se pueden encerrar entre comillas simples o
dobles. En el ejemplo anterior se debe tener cuidado en las mayúsculas y minúsculas al introducir los
valores.
-------- o --------
6. Construcciones de Ciclo:
Las construcciones de bucle o ciclo permiten al programador ejecutar un bloque de código
particular un número dado de veces, basado en una condición. Existen tres construcciones de ciclo:
 for
 while
 do..while
6.1. La sentencia for:

Sintaxis:
for (inicialización, condición, incremento o decremento) {
}
El siguiente código permite ilustrar un ciclo con la sentencia for que se ejecutará tres veces:
var i;
for (i=1; i<=3; i++) {
document.write("Ejecutando el ciclo...<BR>");
}
document.write("Fuera del ciclo.");
</SCRIPT>
6.2. La sentencia while:

Sintaxis:
while (condición) {
}
El siguiente código permite ilustrar un ciclo con la sentencia while que se ejecutará tres veces:
var cont=0;
while (cont < 3) {
cont++;
}
</SCRIPT>
6.3. La sentencia do..while:

Sintaxis:
do {
} while (condición)
El siguiente código muestra un ciclo do..while que se ejecutará tres veces:

var cont=0;
do {
cont++;
} while (cont < 3);
</SCRIPT>
7
Nota: Para obligar la salida de un ciclo for o while (romper el ciclo), se usa la sentencia break.
-------- o --------
7. Funciones:
Una función es un grupo de sentencias de código para lograr una determinada funcionalidad. Las
funciones en JavaScript pueden recibir uno o más parámetros de entrada y devolver los resultados. El
uso de funciones en JavaScript es similar al de C o C++. Sin embargo, la sintaxis es diferente de C o
C++. Las funciones permiten la reutilización de código.
Las funciones en JavaScript son de dos tipos:

 Funciones incorporadas (proporcionadas por el lenguaje).
 Funciones definidas por el usuario.
7.1. Funciones incorporadas:

La siguiente es una lista de las diferentes funciones incorporadas disponibles:
Función Uso
eval(string) Esta función evalúa el valor del parámetro (string) de entrada y devuelve un
valor numérico como salida. Es decir, retorna el valor numérico contenido en
una cadena (parámetro). El parámetro de entrada puede ser una cadena
almacenando un valor numérico o una expresión.
isNaN(value) Esta función evalúa el valor del parámetro de entrada para determinar si no es
un número y devuelve un valor lógico (true o false). La función isNaN
significa No es un Número. Si el parámetro es un número, la función retorna
false, pero si no es un número entonces retorna true.
parseInt(string) Esta función analiza gramaticalmente el valor del parámetro de entrada y
devuelve un valor entero como salida. Si el parámetro contiene números y
caracteres no numéricos (ejemplo: "24Kma67") se evaluará la parte numérica
(24). Si la cadena a evaluar comienza con un valor no numérico (diferente de
0..9,+,-) la función devuelve NaN. Esta función también se usa para
convertir un valor numérico con decimales (ejemplo: 55.67) a su valor
numérico entero (55).
parseFloat(string) Esta función analiza gramaticalmente el valor del parámetro de entrada y
devuelve un valor de punto flotante (float). Si el parámetro contiene
números y caracteres no numéricos (ejemplo: "24.5Kma67") se evaluará la
parte numérica (24.5). Si la cadena a evaluar comienza con un valor no
numérico (diferente de 0..9,+,-) la función devuelve NaN. Esta función
también se usa para convertir un valor numérico entero (ejemplo: 44) a su
valor numérico float (44.0).
En el siguiente ejemplo la función eval toma como parámetro a cadena que contiene "28.5".
La función retorna 28.5 y lo guarda en la variable numero:
var cadena, numero;
cadena="28.5";
numero = eval (cadena);
document.write(numero);
document.write("<BR>");
document.write(eval("25+25"));
</SCRIPT>
Nota: Si en el ejemplo anterior, la variable cadena contiene un valor que no puede convertirse en
numérico, por ejemplo "abc.5" o "Caracas" entonces el script se detiene y no se ejecutan las
demás instrucciones del script.
8
var bandera;
bandera = isNaN("12.5");
document.write(bandera);
</SCRIPT>
Nota: El ejemplo anterior muestra el uso de la función isNaN, donde se evalúa la cadena "12.5" y se
retorna el valor false a la variable bandera.
var entero;
entero = parseInt("47.9");
document.write(entero);
</SCRIPT>
Nota: El ejemplo anterior muestra el uso de la función parseInt, donde se evalúa la cadena "47.9" y
se retorna la parte entera (47) en la variable entero. En el caso que el parámetro de entrada fuese
"Lara" se retorna el valor NaN.
var numeroReal;
numeroReal = parseFloat("95.8Kg");
document.write(numeroReal);
</SCRIPT>
Nota: El ejemplo anterior muestra el uso de la función parseFloat, donde se evalúa la cadena
"95.8Kg" y se retorna la parte numérica con decimales (95.8) en la variable numeroReal. En el caso
que el parámetro de entrada fuese "Valencia" se retorna el valor NaN.
El siguiente ejemplo muestra la forma en que podemos sumar dos valores numéricos
almacenados como cadenas:
var num1 = "45";
var num2 = "10";
suma = parseInt(num1) + parseInt(num2);
document.write(suma);
</SCRIPT>
7.2. Funciones Definidas por el Usuario:

Las funciones definidas por el usuario ayudan a lograr modularidad y tener funcionalidades
específicas del sistema construidas en las páginas web.
Sintaxis:
function nombreFuncion (param1, param2,...) {
sentencias;
return valor;
}
Una función JavaScript usualmente es definida dentro de las etiquetas <SCRIPT> presentes en la
etiqueta <HEAD>. La función puede invocarse desde cualquier parte del documento.
A continuación se presentan tres simples ejemplos de funciones JavaScript:
9
<HEAD>
<TITLE>Ejemplo de funciones JavaScript</TITLE>
var num1, num2;
function sumar (num1, num2) {
var s;
s = parseInt(num1) + parseInt(num2);
return s;
}
</SCRIPT>
</HEAD>
<BODY>
var n1, n2, suma;
n1=prompt("Introduzca un número:");
n2=prompt("Introduzca otro número:");
suma = sumar(n1, n2);
document.write(suma);
</SCRIPT>
</BODY>
Nota: Observe que en el ejemplo anterior se ha definido la función sumar() dentro de las etiquetas
<HEAD>. El siguiente ejemplo realiza el cálculo del 30% de un número a través de una función:
<HEAD>
<TITLE>Ejemplo de función JavaScript</TITLE>
var n;
function porcentaje30 (n) {
return parseInt(n) * 30 / 100;
}
</SCRIPT>
</HEAD>
<BODY>
var num;
num=prompt("Introduzca un número:");
document.write( porcentaje30(num) );
</SCRIPT>
</BODY>
El siguiente es otro ejemplo de función JavaScript:
<HEAD>
<TITLE>Ejemplo de otra función JavaScript</TITLE>
var texto;
function mostrar (texto) {
document.write("<FONT COLOR='RED'><H2>" + texto + "</H2></FONT>");
}
</SCRIPT>
</HEAD>
<BODY>
var nombre;
nombre=prompt("Introduzca su nombre:");
mostrar(nombre);
</SCRIPT>
</BODY>
-------- o --------
10
8. Modelo de Objetos de JavaScript:
JavaScript es un lenguaje basado en objetos. Existen ciertos objetos predefinidos que vienen
como parte del lenguaje, y ayudan a lograr algunas funcionalidades. Estos objetos son llamados objetos
JavaScript y se clasifican generalmente en dos categorías:
 Objetos del lenguaje (Objetos Language).

 Objetos Browser, basados en el Modelo de Objetos de Documento (Document Object Model - DOM).
8.1. Objetos del Lenguaje (Objetos Language):

Los objetos que vienen como parte del lenguaje JavaScript son:
 String.
 Number.
 Math.
 Array.
 Boolean.
 Date.
Estos objetos son similares a los objetos de Java. Cada uno de estos objetos tiene propiedades
y métodos. A continuación se discute cada uno de ellos:
8.1.1. El Objeto String:

El objeto String es un objeto envuelto proporcionado para almacenar un arreglo de caracteres.
En JavaScript las variables de tipo cadena son objetos String. Para crear un objeto String lo único
que hay que hacer es asignar una cadena a una variable. También podemos crear un objeto String
con el operador new. Ejemplo:
var cadena = "Esta es una cadena";
cadena2 = new String("otra cadena");
</SCRIPT>
Nota: En el ejemplo anterior se muestra la creación de cadena y cadena2 como objetos String.
El objeto String tiene una propiedad llamada length y proporciona varios métodos utilitarios
que son útiles para manipular cadenas.
Propiedades String Descripción

length Devuelve el número de caracteres presentes en una cadena.
Métodos String Descripción
toLowerCase() Devuelve la cadena con todos sus caracteres en minúsculas (lowercase).
toUpperCase() Devuelve la cadena con todos sus caracteres en mayúsculas (uppercase).
charAt(indice) Devuelve el carácter que hay en la posición indicada como índice. Las
posiciones de un String empiezan en cero (0).
substring(inicio,fin) Devuelve una subcadena del objeto String desde la posición indicada
como inicio hasta la posición anterior a fin. Si se omite el segundo
parámetro (fin), se tomará hasta el final de la cadena.
replace(str1,str2) Devuelve la cadena reemplazando el texto de entrada str1 por el texto de
entrada str2.
indexOf(string) Devuelve la posición de la primera ocurrencia de la cadena de entrada.
lastIndexOf(string) Devuelve la posición de la última ocurrencia de la cadena de entrada.
split(separador) Sirve para crear un arreglo a partir de un String en el que cada elemento
es la parte del String que está separada por el separador indicado como
parámetro. Por ejemplo, si se tiene una cadena con palabras separadas
por espacios en blanco, la función split(" ") devolverá un arreglo
cuyos elementos serán cada una de las palabras de la cadena.
toString() Este método lo tienen todos los objetos JavaScript y se usa para devolver
el valor del objeto en tipo cadena.
11
El siguiente ejemplo muestra el uso de la propiedad y los métodos String:
var cadena = "Esta Es Una Cadena";
tamano = cadena.length; //devuelve la cantidad de caracteres: 18
minusculas = cadena.toLowerCase(); //devuelve: "esta es una cadena"
mayusculas = cadena.toUpperCase(); //devuelve: "ESTA ES UNA CADENA"
caracter2 = cadena.charAt(2); //devuelve el caracter de la posi 2:"t"
subcadena = cadena.substring(5, 11); //devuelve: "Es Una"
nueva = cadena.replace("Una", "Otra"); //devuelve: "Esta Es Otra Cadena"
primera = cadena.indexOf("na"); //devuelve la posición del 1er "na": 9
ultima = cadena.lastIndexOf("na"); //devuelve la posi del último "na": 16
donde = cadena.indexOf("x"); //devuelve la posición de "x": -1
arreglo = cadena.split(" "); //arreglo("Esta","Es","Una","Cadena")
var numero = 25;
texto = numero.toString(); //devuelve: "25"
</SCRIPT>
8.1.2. El Objeto Number:

El objeto Number es un objeto envuelto (wrapper) proporcionado para almacenar los rangos de
números específicos del lenguaje. El objeto Number modeliza el tipo de datos numérico. Para crear un
objeto Number se usa el constructor new. Ejemplo:
numero = new Number(95);
</SCRIPT>
El valor del objeto Number que se crea depende de lo que reciba el constructor new, de acuerdo
con estas reglas:
 Si el constructor recibe un número, entonces inicializa el objeto con el número que recibe.
 Si recibe un número entrecomillado lo convierte a valor numérico, devolviendo también dicho número.
 Devuelve cero (0) en caso de que no reciba nada.
 Si recibe un valor no numérico devuelve NaN, que significa "Not a Number" (No es un número).
 En caso de recibir false se inicializa a cero (0) y si recibe true se inicializa a 1.
Su funcionamiento se puede resumir en el siguiente ejemplo:
var n1 = new Number(125);
document.write(n1 + "<br>"); //muestra: 125
var n2 = new Number("748");
var n3 = new Number();
var n4 = new Number("hola");
document.write(n4 + "<br>"); //muestra: NaN
var n5 = new Number("123asdfQWERTY")
document.write(n5 + "<br>"); //muestra: NaN
var n6 = new Number(false);
var n7 = new Number(true);
var n8 = new Number(1/0);
document.write(n8 + "<br>"); //muestra: Infinity
var n9 = new Number(-1/0);
document.write(n9 + "<br>"); //muestra: –Infinity
</SCRIPT>
12
El objeto Number no tiene métodos. Tiene propiedades para almacenar constantes, tales como
infinito (positivo y negativo), los números más grande y más pequeño que pueden ser asignados a las
variables y una constante para representar “Not a Number” (NaN).
Propiedades Number Descripción

NaN Devuelve la constante NaN, que significa "Not a Number" (No es un número).
MAX_VALUE Devuelve el valor máximo que se puede representar en Javascript.
MIN_VALUE Devuelve el mínimo valor que se puede representar en Javascript.
NEGATIVE_INFINITY Devuelve -Infinity, que representa el valor negativo, a partir del cual hay
desbordamiento.
POSITIVE_INFINITY Devuelve Infinity, que representa el valor positivo, a partir del cual hay
desbordamiento.
Estas propiedades son de clase, así que accederemos a ellas a partir del nombre de la clase
(Number), tal como podemos ver en el siguiente ejemplo en el que se muestra cada uno de sus valores:
document.write(Number.NaN +"<BR>"); //muestra: NaN
document.write(Number.MAX_VALUE +"<BR>"); //muestra:1.7976931348623157e+308
document.write(Number.MIN_VALUE +"<BR>"); //muestra: 5e-324
document.write(Number.NEGATIVE_INFINITY +"<BR>"); //muestra: -Infinity
document.write(Number.POSITIVE_INFINITY +"<BR>"); //muestra: Infinity
</SCRIPT>
8.1.3. El Objeto Math:

El objeto Math es un objeto envuelto (wrapper) proporcionado para operaciones matemáticas. El
objeto Math tiene propiedades que guardan valores a veces necesarios, tales como el número Pi o el
número E. También proporciona varios métodos para realizar operaciones matemáticas típicas, como el
seno de un número o una raíz cuadrada.
Propiedades Math Descripción

PI Devuelve el conocido número Pi (22/7).
E Devuelve el número E o constante de Euler, base de los logaritmos neperianos.
SQRT2 Devuelve la raíz cuadrada de 2.
LN2 Devuelve el logaritmo neperiano de 2.
LN10 Devuelve el logaritmo neperiano de 10.
LOG2E Devuelve el logaritmo en base 2 de E.
LOG10E Devuelve el logaritmo en base 10 de E.
Métodos Math Descripción
abs(n) Devuelve el valor absoluto de un número. El valor después de quitarle el signo.
sqrt(n) Devuelve la raíz cuadrada de un número.
round(n) Devuelve el número redondeado al entero más próximo.
ceil(n) Devuelve el entero igual o inmediatamente superior a un número. Por ejemplo,
ceil(3) vale 3, ceil(3.4) es 4.
floor(n) Lo contrario de ceil(). Devuelve el entero igual o inmediatamente inferior a
un número. Por ejemplo, floor(7) vale 7, floor(7.8) es 7.
sin(n) Devuelve el seno de un número con un ángulo en radianes.
cos(n) Devuelve el coseno de un número con un ángulo en radianes.
tan(n) Devuelve la tangente de un número en radianes.
max(n1,n2) Retorna el mayor de dos números (n1 y n2).
min(n1,n2) Retorna el menor de dos números (n1 y n2).
pow(base,expo) Devuelve el resultado del primer número (base) elevado al exponente (expo).
random() Devuelve un número aleatorio entre 0 y 1.
Para trabajar con la clase Math no debemos utilizar la instrucción new sino que utilizaremos el
nombre de la clase (Math) para acceder a sus propiedades y métodos. Ejemplo:
13
document.write(Math.PI +"<BR>"); //muestra: 3.141592653589793
document.write(Math.E +"<BR>"); //muestra: 2.718281828459045
document.write(Math.SQRT2 +"<BR>"); //muestra: 1.4142135623730951
document.write(Math.LN2 +"<BR>"); //muestra: 0.6931471805599453
document.write(Math.LN10 +"<BR>"); //muestra: 2.302585092994046
document.write(Math.LOG2E +"<BR>"); //muestra: 1.4426950408889633
document.write(Math.LOG10E +"<BR>"); //muestra: 0.4342944819032518
var num = -4.5;

valorAbs = Math.abs(num);
document.write(valorAbs + "<br>"); //muestra: 4.5
raiz = Math.sqrt(81);
document.write(raiz + "<br>"); //muestra: 9
redondeo = Math.round(18.5);
document.write(redondeo + "<br>"); //muestra: 19
techo = Math.ceil(18.75);
document.write(techo + "<br>"); //muestra: 19
piso = Math.floor(18.75);
document.write(piso + "<br>"); //muestra: 18
seno30 = Math.sin(30 * Math.PI * 2 / 360);
document.write(seno30 + "<br>"); //muestra: 0.49999999999999994
coseno30 = Math.cos(30 * Math.PI * 2 / 360);
document.write(coseno30 + "<br>"); //muestra: 0.8660254037844387
tan45 = Math.tan(45 * Math.PI * 2 / 360);
document.write(tan45 + "<br>"); //muestra: 0.9999999999999999
mayor = Math.max(27, 41);
document.write(mayor + "<br>"); //muestra: 41
menor = Math.min(27, 41);
document.write(menor + "<br>"); //muestra: 27
potencia = Math.pow(5, 3);
document.write(potencia + "<br>"); //muestra: 125
aleatorio = Math.random();
document.write(aleatorio + "<br>"); //muestra Ej: 0.061173431164350034
</SCRIPT>
8.1.4. El Objeto Array:

El objeto Array se usa para manejar una colección de valores (arreglo). Para crear un arreglo
se usa el operador new. Ejemplo:
var arreglo1 = new Array();
var arreglo2 = new Array("Juan", "Tamara", 5, true);
</SCRIPT>
Nota: En el ejemplo anterior se muestra la creación de dos arreglos: arreglo1 y arreglo2.
Los arreglos en JavaScript son similares a los de Java. El índice comienza en cero. El objeto
Array en JavaScript puede almacenar elementos de diferentes tipos, dado que las variables en
JavaScript son de tipado libre.
El objeto Array tiene una propiedad llamada length que devuelve el número de elementos en
el arreglo.
Propiedad Array Descripción

length Devuelve el número de elementos presentes en un arreglo.
El siguiente ejemplo muestra el manejo de un arreglo y el uso de la propiedad length:
14
var arreglo = new Array();
arreglo[0] = 90;
arreglo[1] = "Hola";
cantidad = arreglo.length;
document.write("Primer elemento: "+arreglo[0]+"<BR>");
document.write("Segundo elemento: "+arreglo[1]+"<BR>");
document.write("Cantidad de elementos: "+cantidad+"<BR>");
</SCRIPT>
Veamos este otro ejemplo, donde un arreglo se carga con tres elementos (0, 1 y 2):
var arreg = new Array();
var i;
for (i=0; i<3; i++) { //cargar arreglo
arreg[i] = i;
}
document.write("Elementos del arreglo: "+arreg+"<BR>"); //mostrar arreglo
</SCRIPT>
El siguiente ejemplo carga un arreglo con valores introducidos por el usuario usando el método
prompt(), hasta que el usuario introduce una cadena vacía o pulsa el botón Cancelar. Recuerde que
si el usuario presiona el botón Cancelar, el método prompt() asigna o devuelve el valor null. La
instrucción break obliga a salir del ciclo:
var arr = new Array();
var elemento;
while (true) {
elemento = prompt("Introduzca un valor:", "");
if (elemento != "" && elemento != null)
arr[arr.length] = elemento;
else
break;
}
document.write("Elementos del arreglo: "+arr+"<BR>"); //mostrar arreglo
document.write("Cantidad de elementos: "+arr.length+"<BR>");
</SCRIPT>
JavaScript soporta únicamente arreglos de una sola dimensión, pero también puede simular
arreglos multidimensionales. El siguiente ejemplo muestra un arreglo bidimensional simulado con los
valores asignados al momento de su creación:
var matriz = new Array([1,"Perro"],[2,"Gato"],[3,"Perico"]);
document.write("Los elementos de la matriz son: <BR>");
for (i=0; i<3; i++) {
for (j=0; j<2; j++) {
document.write(matriz[i][j]+"<BR>"); //mostrar elemento
}
}
</SCRIPT>
15
8.1.5. El Objeto Boolean:
Un objeto Boolean se usa para manejar los valores true y false (verdadero o falso). El objeto
Boolean es un envoltorio sobre los valores primitivos, true y false. Un objeto Boolean se crea
pasando un parámetro al constructor new, así:
variable = new Boolean(valor);
</SCRIPT>
El valor del objeto Boolean que se crea depende de lo que reciba el constructor new, de acuerdo
con estas reglas:
 Si el constructor recibe un cero (0), entonces inicializa el objeto con false. Cualquier otro número
se toma como true.
 Si recibe una cadena vacía se toma como false. Cualquier otra cadena es tomada como true.
 Si recibe un valor primitivo Boolean false se toma como false. Y un valor primitivo Boolean true
se toma como true.
 Cualquier objeto válido se toma como true . El valor null se toma como false.
Su funcionamiento se puede resumir en el siguiente ejemplo:
obj1 = new Boolean(0);
document.write(obj1+"<BR>"); //muestra: false
obj2 = new Boolean(245);
document.write(obj2+"<BR>"); //muestra: true
obj3 = new Boolean("");

obj4 = new Boolean("Venezuela");
obj5 = new Boolean(false);

obj6 = new Boolean(true);
obj7 = new Boolean(1/0);

obj8 = new Boolean(null);
</SCRIPT>
El objeto Boolean tiene el método valueOf(), que devuelve el valor primitivo. El método
valueOf()es común en todos los objetos (como String y Date).
Método Boolean Descripción

valueOf() Devuelve el valor primitivo del objeto Boolean.
El siguiente ejemplo muestra el uso de la propiedad valueOf():
objeto = new Boolean(123);
document.write(objeto.valueOf()+"<BR>"); //muestra: true
var numero = 45;
document.write(numero.valueOf()+"<BR>"); //muestra: 45
var ciudad = "San Cristobal";
document.write(ciudad.valueOf()+"<BR>"); //muestra: San Cristobal
</SCRIPT>
16
8.1.6. El Objeto Date:
Un objeto Date se usa para manejar fechas y horas en Javascript. Para trabajar con fechas
necesitamos instanciar con el constructor new un objeto de la clase Date. Un objeto de la clase Date se
puede crear con la fecha y hora actuales, por ejemplo:
fechaActual = new Date();
document.write(fechaActual); //muestra: Wed Feb 17 17:21:49 UTC-0400 2010
</SCRIPT>
Por otro lado podemos crearlo con un día y hora distintos a los actuales. Esto depende de los
parámetros que pasemos al construir el objeto. Ejemplo:
año = 2010;
mes = 2;
dia = 15;
hora = 14;
minutos = 30;
segundos = 0;
fecha1 = new Date(año,mes,dia,hora,minutos,segundos); //crear fecha1
fecha2 = new Date(año,mes,dia); //crear fecha2
</SCRIPT>
Nota: Los valores que debe recibir el constructor son siempre numéricos. Un detalle, el mes comienza
en cero (0), es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con la hora
00:00:00.
Los objetos de la clase Date no tienen propiedades pero si un montón de métodos, veamos:
Métodos Date Descripción

getDate() Devuelve el día del mes (1..31) del objeto Date.
getDay() Devuelve el número correspondiente al día de la semana (0..6), donde 0
corresponde a Domingo, 1 a Lunes, 2 a Martes, …
getMonth() Devuelve el mes en números (0..11), donde 0 corresponde a Enero, 1 a
Febrero, 2 a Marzo, ...
getYear() Retorna el año con todos los dígitos. Este método está obsoleto en Netscape a
partir de la versión 1.3 de Javascript y ahora se utiliza getFullYear().
getFullYear() Retorna el año con todos los dígitos del objeto Date.
getHours() Devuelve la hora (0..23) del objeto Date.
getMinutes() Devuelve los minutos (0..59) del objeto Date.
getSeconds() Devuelve los segundos (0..59) del objeto Date.
getTime() Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la
fecha correspondiente al objeto.
setDate(n) Actualiza el día del mes (1..31).
setMonth(n) Actualiza el mes (atención al mes que empieza por 0).
setYear(n) Actualiza el año. Este método está obsoleto a partir de Javascript 1.3 en
Netscape. Ahora se utiliza setFullYear(), indicando el año con todos los dígitos.
setFullYear(n) Actualiza el año de la fecha al número que recibe por parámetro. Ejemplo:
2005, o 1995. Utilizar este método para estar seguros que todo funciona para
fechas posteriores a 2000
setHours(n) Actualiza la hora (0..23).
setMinutes(n) Actualiza los minutos (0..59).
setSeconds(n) Actualiza los segundos (0..59).
setTime(n) Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de
enero de 1970.
17
Nota: Como habrás notado, hay métodos obsoletos por cuestiones relativas al año 2000: getYear() y
setYear(). Estos métodos se comportan bien en Internet Explorer y no nos dará ningún problema el
utilizarlos. Sin embrago, no funcionarán correctamente en Netscape, por lo que es interesante que
utilicemos en su lugar los métodos getFullYear() y setFullYear(), que funcionan bien en
Netscape e Internet Explorer.
El siguiente ejemplo muestra el uso de los métodos del objeto Date:
fecha = new Date(2011,7,29,12,35,0); //crear fecha (29-Ago-2011, 12:30:00)
document.write(fecha+"<BR>"); //muestra: Mon Aug 29 12:35:00 UTC-0400 2011
dia = fecha.getDate(); //Devuelve el día del mes: 29

document.write(dia + "<BR>");
diaSem = fecha.getDay(); //Devuelve el día de la semana (Lunes): 1
document.write(diaSem + "<BR>");
mes = fecha.getMonth(); //Devuelve el mes (que empieza por 0): 7
document.write(mes + "<BR>");
año = fecha.getFullYear(); //Devuelve el año: 2011
document.write(año + "<BR>");
hora = fecha.getHours(); //Retorna la hora: 12
document.write(hora + "<BR>");
min = fecha.getMinutes(); //Devuelve los minutos: 35
document.write(min + "<BR>");
seg = fecha.getSeconds();
document.write(seg + "<BR>"); //Devuelve los segundos: 0
mili = fecha.getTime();
document.write(mili + "<BR>"); //Devuelve los milisegundos: 1314635700000
/* Asignaremos la fecha 5-Ene-1992 y hora 8:25:30 al objeto f */

f = new Date();
document.write("Fecha actual: " + f + "<BR>"); //muestra la fecha actual
f.setDate(5);
f.setMonth(0);
f.setFullYear(1992);
f.setHours(8);
f.setMinutes(25);
f.setSeconds(30);
document.write("fecha:" + f); //muestra: Sun Jan 5 08:25:30 UTC-0400 1992
</SCRIPT>
A continuación se presenta un ejemplo con diferentes maneras de mostrar un objeto Date:
var f = new Date();
document.write(f.getDate() +"/"+ (f.getMonth()+1) +"/"+ f.getFullYear());
document.write(f.getHours() +":"+ f.getMinutes() +":"+ f.getSeconds());
var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves",

"Viernes","Sábado");
var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
document.write(f.getDate() +" de "+ meses[f.getMonth()] +" de "+

f.getFullYear());
document.write(diasSemana[f.getDay()] +", "+ f.getDate() +" de "+

meses[f.getMonth()] +" de "+ f.getFullYear());
</SCRIPT>
-------- o --------
18
8.2. Objetos basados en DOM (Objetos Browser):
DOM es la abreviatura de Document Objet Model. En español se podría traducir como Modelo de
Objetos de Documento, aunque habitualmente se hace referencia a DOM con el nombre de jerarquía de
objetos del navegador, porque realmente es una estructura jerárquica donde existen varios objetos y
unos dependen de otros.
Los objetos basados en DOM son también conocidos como objetos de navegador (browser). Los
objetos de navegador de JavaScript son abstracciones del navegador y los diferentes elementos del
navegador. Los objetos del DOM modelizan tanto la ventana del navegador como el historial, el
documento o página web, y todos los elementos que pueda tener dentro la propia página, como
imágenes, formularios y sus campos, etc. A través del DOM se puede acceder, por medio de Javascript,
a cualquiera de estos elementos, es decir a sus correspondientes objetos para alterar sus propiedades o
invocar a sus métodos. Con todo, a través del DOM, queda disponible para los programadores de
Javascript, cualquier elemento de la página, para modificarlos, suprimirlos, crear nuevos elementos y
colocarlos en la página, etc.
El DOM describe una jerarquía de objetos, que representan los diferentes elementos del
navegador. El siguiente cuadro muestra la jerarquía DOM:
Navigator Window
Location Document History
Anchor Link Form Image Applet
Text Password TextArea Radio Checkbox Select
Hidden Button Submit Reset Fileupload
El objeto de mayor nivel en la jerarquía DOM es la ventana actual del navegador, abstraída como
Window en JavaScript.
A continuación se discuten los diferentes objetos, sus propiedades y métodos, además de
algunos ejemplos.
8.2.1. El Objeto Navigator:

El objeto Navigator nos da información relativa al navegador que se está usando en la máquina
cliente. Este objeto tiene propiedades y métodos.
Propiedades Navigator Descripción

appName Contiene el nombre del navegador.
appCodeName Contiene el nombre del código del navegador.
appVersion Contiene la versión del navegador.
userAgent Contiene el agente de usuario del navegador, es decir, la cabecera
completa del agente enviada en una petición HTTP. Contiene la
información de las propiedades appCodeName y appVersion.
platform Contiene la plataforma sobre la que se está ejecutando el programa cliente
(ejemplo: Win32).
Método Navigator Descripción
javaEnabled() Devuelve true si el cliente permite la utilización de Java, en caso contrario,
devuelve false.
19
El siguiente ejemplo muestra el uso de las propiedades y un método del objeto Navigator:
document.write(navigator.appName + "<BR>");
document.write(navigator.appCodeName + "<BR>");
document.write(navigator.appVersion + "<BR>");
document.write(navigator.userAgent + "<BR>");
document.write(navigator.platform + "<BR>");
document.write(navigator.javaEnabled() + "<BR>");
</SCRIPT>
8.2.2. El Objeto Window:

Se trata del objeto más alto en la jerarquía del navegador (Navigator es un objeto
independiente de todos en la jerarquía), pues todos los componentes de una página web están situados
dentro de una ventana.
El objeto Window hace referencia a la ventana actual. El objeto Window representa la instancia
actual del navegador. Veamos a continuación sus propiedades y métodos
Propiedades Window Descripción

name Proporciona el nombre de la ventana, o del frame actual.
status Proporciona el texto que tiene la barra de estado (status bar) del
navegador.
defaultStatus Accede el texto por defecto que aparece en la barra de estado del
navegador. Puede usarse para cambiar el mensaje del defaultStatus.
Métodos Window Descripción
alert("…") Muestra un mensaje en un cuadro de diálogo.
prompt("…","…") Muestra un cuadro de diálogo que contiene un mensaje y una caja de
texto en la cual podremos escribir una respuesta a lo que nos pregunte en
el mensaje.
confirm() Muestra un cuadro de diálogo con un mensaje y dos botones, uno de
aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y
devuelve false si se pulsa cancelar.
open("…","…","…") Abre una nueva ventana de navegador. Toma tres parámetros: el URL del
documento a ser cargado, el nombre del manejador de la ventana y las
propiedades físicas de la ventana.
close() Cierra la ventana JavaScript.
focus() Captura el foco del ratón sobre el objeto window actual.
blur() Elimina el foco del objeto window actual.
setTimeout("func", Invoca una función ("func") después de que haya transcurrido un retraso
delay) (delay) en milisegundos. Esta función se invoca repetidamente. Cuando
la función se invoca por primera vez devuelve un timerId que es un
manejador del objeto timer.
clearTimeout(timerId) Este método detiene el timer que ha sido creado.
El siguiente ejemplo muestra el uso de algunas propiedades y métodos del objeto Window:
alert("Observe la Barra de Estado...");
alert(window.status = "Programación Web");
alert("Ahora se cambiará el mensaje de la barra de estado");
window.defaultStatus = "Bien";
</SCRIPT>
Nota: El objeto Window es el objeto por defecto en la jerarquía DOM JavaScript. En el ejemplo anterior
se usa la función alert() directamente, que es más cómodo que escribir window.alert().
20
El método open() del objeto Window toma tres parámetros: el URL del documento a ser
cargado, el nombre del manejador de la ventana y las propiedades físicas de la ventana. El tercer
parámetro es constituye una cadena que define las propiedades físicas de la ventana.
A continuación se presentan las propiedades a usar en el método open():
Propiedades Descripción
left Distancia en pixels desde el lado izquierdo de la pantalla a la ventana.
top Distancia en pixels desde el lado superior de la pantalla a la ventana.
width Especifica el ancho de la ventana en pixels.
height Especifica el alto de la ventana en pixels.
scrollbars Indica si aparecerán las barras de desplazamiento o no (yes o no).
location Indica si tendrá barra de ubicación (campo de localización) (yes o no).
directories Indica si aparecerá el botón de directorios o no (yes o no).
status Indica si aparecerá la barra de estado o no (yes o no).
menubar Indica si aparecerá la barra de menú o no (yes o no).
toolbar Indica si aparecerá la barra de herramientas o no (yes o no).
resizable Especifica si el tamaño de la ventana será modificable o no (yes o no).
En el siguiente ejemplo usaremos el método open() para abrir una nueva ventana con la página
prueba.html:
var propiedades = "left=200, top=200, height=300, width=500, scrollbar=no,
location=no, resizable=no, menubar=no";
var nuevaVentana = window.open("prueba.html", "temp", propiedades);
//window.close();
</SCRIPT>
Nota: En el ejemplo anterior debe existir una página con el nombre prueba.html.
El siguiente ejemplo muestra el uso de los métodos setTimeOut() y clearTimeOut() del

objeto Window:
<HTML>
<TITLE>Métodos del Objeto Window</TITLE>
function crearMiTimer() {
setTimeout("miFuncion()", 5000);
}
function miFuncion() {
alert("Este mensaje aparece a los 5 segundos");
clearTimeout();
}
</SCRIPT>
</HEAD>
<BODY>
document.write("<B>Bienvenidos.....</B>");
crearMiTimer();
</SCRIPT>
</BODY>
</HTML>
Nota: Se debe tener la precaución de encerrar entre comillas la función a invocar, es decir el primer
parámetro del método setTimeout().
21
Existen tres objetos que pertenecen al objeto Window en la jerarquía DOM. Estos objetos son:
 Location.
 History.
 Document.
8.2.3. El Objeto Location:

Este objeto representa el URL cargado en la ventana. Se usa para navegar hacia una página en
un sitio local u otra página en la Internet. Al cambiar la propiedad de este objeto, el documento cargado
en la ventana puede ser cambiado.
Recuerde que la sintaxis de una URL es:
protocolo://maquina_host[:puerto]/camino_al_recurso
El objeto Location tiene las siguientes propiedades y métodos
Propiedades Location Descripción

href Cadena que contiene la URL completa.
host Cadena que contiene el nombre del servidor y el número del puerto, dentro de
la URL.
hostname Cadena que contiene el nombre de dominio del servidor (o la dirección IP),
dentro de la URL.
port Cadena que contiene el número de puerto del servidor, dentro de la URL.
pathname Cadena que contiene el camino al recurso, dentro de la URL.
protocol Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro
de la URL.
Métodos Location Descripción
reload() Vuelve a cargar la URL especificada en la propiedad href del objeto
Location.
replace(cadenaURL) Reemplaza el historial actual mientras carga la URL especificada en
cadenaURL.
Podemos utilizar la propiedad href o el método replace() para navegar de una página a otra.
El URL accedido usando el método replace() no está disponible en la secuencia del historial. El
siguiente ejemplo muestra las dos formas de redireccionar a otra página:
window.location.href = "http://www.ibm.com/ve/es/";
window.location.replace("http://www.ibm.com/ve/es/");
</SCRIPT>
El siguiente ejemplo muestra el uso de algunas propiedades del objeto Location:
document.write(window.location.href +"<BR>"); //URL completa
document.write(window.location.host +"<BR>"); //Dirección IP del Host
document.write(window.location.hostname +"<BR>"); //Nombre del Host
document.write(window.location.port +"<BR>"); //Puerto del Host (URL)
document.write(window.location.pathname +"<BR>"); //Nombre de ruta relativa
document.write(window.location.protocol +"<BR>"); //Protocolo
</SCRIPT>
22
8.2.4. El Objeto History:
Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando,
es decir, guarda las referencias de los lugares visitados. Se utiliza, sobre todo, para movernos hacia
delante o hacia atrás en dicha lista.
Propiedades History Descripción

current Contiene la URL completa de la entrada actual en el historial
length Contiene el número de entradas del historial (cuántas direcciones han sido
visitadas).
next Contiene la URL completa de la siguiente entrada en el historial.
previous Contiene la URL completa de la anterior entrada en el historial.
Métodos History Descripción
forward() Redirecciona al usuario al sitio siguiente dentro del historial.
back() Redirecciona al usuario al sitio anterior dentro del historial.
go(n) Redirecciona al usuario al sitio que se encuentra en la n-ésima posición
(relativa) dentro del historial.
8.2.5. El Objeto Document:

El objeto Document es el que tiene el contenido de toda la página que se está visualizando. Esto
incluye el texto, imágenes, enlaces, formularios. Gracias a este objeto vamos a poder añadir
dinámicamente contenido a la página, o hacer cambios, según nos convenga.
Entre las propiedades y métodos del objeto Document tenemos:
Propiedades Document Descripción

title Contiene el título (<TITLE>) del documento actual.
fgColor Contiene el color de primer plano (foreground) del documento.
bgColor Contiene el color de fondo (background) del documento.
linkColor Contiene el color de los enlaces del documento.
alinkColor Contiene el color de los enlaces activos del documento.
vlinkColor Contiene el color de los enlaces visitados en el documento.
Métodos Document Descripción
open() Abre la escritura sobre un documento. Abre el flujo hacia el objeto Document
de modo que pueda escribirse texto en él. Es similar al método fopen en C.
close() Cierra la escritura sobre el documento actual. Cierra el flujo actualmente
abierto hacia el objeto Document.
write(texto) Escribe texto en el documento.
clear() Limpia la ventana del documento.
Existen algunas propiedades adicionales tales como: fileCreatedDate, fileModifiedDate,

fileSize y lastModified, que se usan moderadamente.
El siguiente ejemplo muestra el uso de algunas propiedades y métodos del objeto Document:
document.open();
document.write(document.title + "<BR>");
document.write(document.fgColor + "<BR>");
document.write(document.bgColor + "<BR>");
document.write(document.linkColor + "<BR>");
document.write(document.vlinkColor + "<BR>");
document.write(document.fileCreatedDate + "<BR>");
document.close();
</SCRIPT>
Nota: Recuerde que el método open() del objeto Document no abre una nueva ventana, sino que
permite la escritura en el documento.
23
El próximo ejemplo permite al usuario introducir un nuevo título a la página:
var unTitulo;
unTitulo = prompt ("Introduzca un Título para esta página:", "Mi título");
document.title = unTitulo;
</SCRIPT>
El siguiente ejemplo permite visualizar el título de nuestra página de forma animada, usando la
propiedad title del objeto Document y el método setTimeout() del objeto Window. Pruébalo:
<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
<script LANGUAGE="JavaScript">
var i=1;
var miTitulo = document.title;
function cambiarTitulo() {
document.title = miTitulo.substring(0, i);
i++;
if (i > miTitulo.length)
i=0;
setTimeout('cambiarTitulo()', 100);
}
cambiarTitulo();
</script>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
document.write("<B>Observe la Barra de Título en el navegador </B> ");
</script>
</BODY>
</HTML>
Como sabemos, un documento HTML puede tener numerosos elementos. Estos elementos
pueden ser:
 Anclas o enlaces internos (anchors)
 Enlaces externos (links)
 Formularios (forms)
 Imágenes (images)
 Applets (applets)
Los elementos de un documento HTML, anteriormente mencionados, están disponibles en

JavaScript como objetos, representados como arreglos (anchors, links, forms, images, applets).
Podremos saber la cantidad de imágenes existentes en un documento simplemente usando la
propiedad length del arreglo (objeto) images, es decir: document.images.length. De igual manera
se puede saber la cantidad de anclas, enlaces y formularios.
El siguiente ejemplo muestra el uso de estos objetos (arreglos) con su propiedad length:
document.write(document.anchors.length + "<BR>");
document.write(document.links.length + "<BR>");
document.write(document.images.length + "<BR>");
document.write(document.forms.length + "<BR>");
document.write(document.applets.length + "<BR>");
</SCRIPT>
24
El siguiente ejemplo ilustra más claramente el uso de estos objetos (arreglos) con su propiedad
length, para saber la cantidad de anclas, enlaces, imágenes y formularios de un documento:
<HTML>
<HEAD>
<TITLE>Ejemplo JavaScript</TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">
<A HREF="pagina1.html"> Enlace A</A> <BR>
<A HREF="pagina2.html"> Enlace B</A> <BR>
<IMG SRC="imagen1.jpg" NAME="foto1" WIDTH="200">
<IMG SRC="imagen2.jpg" NAME="foto2" WIDTH="200">
<IMG SRC="imagen3.jpg" NAME="foto3" WIDTH="200"> <BR>
<FORM NAME="f1" METHOD="GET">
Nombre: <INPUT TYPE="TEXT" NAME="nombre"> <BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
</FORM>
document.write("Cantidad de anclas: ");
document.write("Cantidad de enlaces: ");
document.write(document.links.length + "<BR>");
document.write("Cantidad de imágenes: ");
document.write("Cantidad de formularios: ");
</SCRIPT>
</BODY>
</HTML>

Cantidad de anclas: 0
Cantidad de enlaces: 2
Cantidad de imágenes: 3
Cantidad de formularios: 1
Estos objetos (arreglos) nos permiten tener acceso a cada uno de estos elementos (anclas,
enlaces, imágenes y formularios) y a sus propiedades.
Por ejemplo, si un documento contiene tres (3) imágenes, el arreglo images estará compuesto
por tres (3) elementos. La primera imagen desplegada en el documento corresponderá al primer
elemento del arreglo images, es decir document.images[0].
Quiere decir, que podemos acceder a cualquiera de estos elementos a través de su posición
(índice) en el arreglo (objeto). Este índice puede ser numérico (desde cero) o el nombre asignado al
elemento en la propiedad name (encerrado entre comillas).
Tomando como ilustración el ejemplo anterior, la primera imagen desplegada tiene la propiedad
NAME="foto1". Entonces, también podemos acceder a la primera imagen usando
document.images["foto1"].
El siguiente ejemplo permite mostrar la forma de acceder a las propiedades de estos elementos:
document.write("Nombre de la segunda imagen: ");
document.write(document.images[1].name + "<BR>");
document.write("Nombre del formulario: ");
document.write(document.forms[0].name + "<BR>");
document.write("Método de envío del formulario: ");
document.write(document.forms["f1"].method + "<BR>");
</SCRIPT>
25
Existen cinco objetos que pertenecen al objeto Document en la jerarquía DOM. Estos objetos
son:
 Anchor.
 Link.
 Image.
 Form.
 Applet.
8.2.6. El Objeto Anchor:

Este objeto engloba todas las propiedades que tienen los enlaces internos al documento actual.
Cuando un documento HTML es muy extenso se utilizan enlaces internos (anclas) para dirigirnos más
rápidamente a un determinado sitio en nuestro documento. Mejor dicho, Un ancla es una parte de texto
que define una etiqueta para ser referenciada desde otro lugar por un enlace hipertexto.
El objeto Anchor carece de métodos y de eventos asociados a él. Tiene dos propiedades
definidas:
Propiedades Anchor Descripción

name Contiene el nombre del ancla.
target Contiene el nombre de la ventana o del frame especificado en el atributo
target.
Cada ancla presente en un documento corresponde a un objeto que se coloca en el arreglo

Anchors. Así, se accederá al primer ancla mediante document.anchors[0], al segundo mediante
document.anchors[1], y así sucesivamente.
El siguiente ejemplo muestra el uso de las propiedades del objeto Anchor:
<BODY BGCOLOR="AQUA">
<br><br><br><br><br><br><br><br><br><br><br>
<A name="arriba" target="_tope">Inicio</A>
<A HREF="#arriba">Subir</A>
<br>
document.write("Nombre del acla: ");
document.write(document.anchors[0].name + "<BR>");
document.write("Atributo target del acla: ");
document.write(document.anchors[0].target + "<BR>");
document.write("Cantidad de anclas: ");
</SCRIPT>
</BODY>
8.2.7. El Objeto Link:

Este objeto engloba todas las propiedades que tienen los enlaces externos al documento actual.
El objeto Anchor carece de métodos y de eventos asociados a él. Tiene dos propiedades
definidas:
Propiedades Link Descripción

target Contiene el nombre de la ventana o frame especificado en el atributo target.
href Contiene la URL completa.
host Contiene el nombre del servidor y número del puerto, dentro de la URL.
hostname Contiene el nombre de dominio del servidor (o dirección IP) dentro de la URL.
port Número de puerto, dentro de la URL.
26
Cada enlace existente en un documento corresponde a un objeto que se coloca en el arreglo
Links. Así, se accederá al primer enlace mediante document.links[0], al segundo mediante
document.links[1], y así sucesivamente.
El siguiente ejemplo muestra el uso de las propiedades del objeto Link:
<BODY BGCOLOR="LIME">
<A HREF="http://www.yahoo.com" target="_blank"> Enlace a Yahoo!</A> <BR>
<A HREF="http://www.google.co.ve/"> Enlace a Google!</A> <BR>
var i;
for (i=0; i < document.links.length; i++) {
document.write("Atributo target del enlace: ");
document.write(document.links[i].target + "<BR>");
document.write("URL completa del enlace: ");
document.write(document.links[i].href + "<BR>");
document.write("Puerto del enlace: ");
document.write(document.links[i].port + "<BR>");
document.write("Dominio del enlace: ");
document.write(document.links[i].hostname + "<BR>");
}
</SCRIPT>
</BODY>
8.2.8. El Objeto Image:

Este objeto representa las imágenes que aparecen en los documentos. Se pueden manipular las
propiedades de las imágenes usando este objeto. Este objeto está disponible a partir de la versión 3 de
Netscape, aunque Microsoft lo adoptó en la versión 4 de su navegador.
El objeto Image tiene las siguientes propiedades:
Propiedades Image Descripción

name Contiene el valor especificado en el atributo name de la imagen.
src Contiene el valor especificado en el atributo src de la imagen.
height Contiene el valor especificado en el atributo height de la imagen.
width Contiene el valor especificado en el atributo width de la imagen.
border Contiene el valor especificado en el atributo border de la imagen.
Cada imagen existente en un documento corresponde a un objeto que se coloca en el arreglo

Images. Así, se accederá a la primera imagen mediante document.images[0], a la segunda mediante
document.images[1], y así sucesivamente.
El siguiente ejemplo muestra el uso de las propiedades del objeto Image:
<BODY BGCOLOR="#FFFF99">
<IMG NAME="logo" SRC="imagen.jpg" WIDTH="200"> <br><br>
document.write("Nombre de la imagen: ");
document.write(document.images[0].name + "<BR>");
document.write("URL de la imagen: ");
document.write(document.images['logo'].src + "<BR>");
document.write("Ancho de la imagen en pixels: ");
document.write(document.logo.width + "<BR>");
document.write("Cantidad de imagenes: ");
alert("Ahora se cambiará la imágen desde JavaScript");
document.logo.src='imagen8.jpg';
</SCRIPT>
</BODY>
27
Nota: El ejemplo anterior muestra que podemos acceder a una imagen JavaScript de tres maneras:
usando el objeto (arreglo) Images con índice numérico, usando el objeto Images colocando el nombre
de la imagen como índice (entre comillas), o simplemente usando el nombre de la imagen. Tomando la
imagen del ejemplo anterior podemos acceder al atributo src de las siguientes formas:
document.images[0].src
document.images['logo'].src
document.logo.src
Observe también que en el ejemplo anterior se ha modificado una imagen del documento desde
JavaScript.
El objeto Image, además, tiene ciertos eventos tales como onMouseOver y onMouseOut, entre
otros. Los eventos y manejadores de eventos se tratarán más adelante.
El siguiente ejemplo permite intercambiar imágenes cuando el cursor ingresa al espacio ocupado
por la imagen (mouse over) y cuando el cursor abandona la imagen (Mouse out):
<BODY BGCOLOR="Turquoise">
<IMG NAME="foto" SRC="imagen1.jpg" WIDTH="300"
onMouseOver="document.foto.src='imagen2.jpg';"
onMouseOut="document.foto.src='imagen1.jpg';">
<br>
Mueva el puntero del ratón hasta la imagen...
</BODY>
El ejemplo anterior podría escribirse usando una función JavaScript de la siguiente forma:
<HTML>
<HEAD>
<TITLE>Intercambio de imagenes con JavaScript</TITLE>
function cambiar_imagen(x) {
document.foto.src=x;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Turquoise">
<IMG NAME="foto" SRC="imagen1.jpg" WIDTH="300"
onMouseOver="cambiar_imagen('imagen2.jpg');"
onMouseOut="cambiar_imagen('imagen1.jpg');">
<br>
Mueva el puntero del ratón hasta la imagen...
</BODY>
</HTML>
8.2.9. El Objeto Form:

Este objeto representa el formulario HTML. El objeto Form tiene las siguientes propiedades y
métodos:
Propiedades Form Descripción

name Contiene el nombre del formulario (atributo name del formulario).
method Contiene el método con el que se va a enviar la información del formulario
(get/post).
elements Es un array que contiene todos los elementos del formulario.
target La ventana o frame a la que está dirigido el formulario.
Métodos Form Descripción
submit() Envía el formulario. Tiene el mismo efecto que si pulsáramos un botón de
tipo submit dispuesto en el formulario.
reset() Resetea el formulario. Tiene el mismo efecto que si pulsáramos un botón de
tipo reset dispuesto en el formulario.
28
Cada formulario existente en un documento corresponde a un objeto que se coloca en el arreglo
Forms. Así, se accederá al primer formulario mediante document.forms[0], al segundo mediante
document.forms[1], y así sucesivamente.
El siguiente ejemplo muestra el uso de las propiedades del objeto Form:
<BODY BGCOLOR="SpringGreen">
<FORM NAME="f1" METHOD="POST" TARGET="derecha">
Nombre: <INPUT TYPE="TEXT" NAME="nombre"> <BR>
Clave: <INPUT TYPE="PASSWORD" NAME="pass"> <BR>
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
document.write("Nombre del formulario: ");
document.write(document.forms[0].name + "<BR>");
document.write("Método de envío: ");
document.write(document.forms['f1'].method + "<BR>");
document.write("Atributo target del formulario: ");
document.write(document.f1.target + "<BR>");
document.write("Nombre del segundo elemento del formulario: ");
document.write(document.f1.elements[1].name + "<BR>");
document.write("Cantidad de formularios: ");
</SCRIPT>
</BODY>
Nota: El ejemplo anterior muestra que podemos acceder a un formulario JavaScript de tres maneras:
usando el objeto (arreglo) Forms con índice numérico, usando el objeto Forms colocando el nombre del
formulario como índice (entre comillas), o simplemente usando el nombre del formulario. Tomando como
ilustración el formulario del ejemplo anterior podemos acceder al atributo method de las siguientes
formas:
document.forms[0].method
document.forms['f1'].method
document.f1.method
Se puede decir que es mas fácil acceder a un atributo o elemento del formulario utilizando el
nombre del formulario, por lo cual se aconseja agregar el atributo name al formulario HTML.
El objeto Form, además, tiene ciertos eventos tales como onSubmit y onReset, que se tratarán
más adelante.
Como sabemos, un formulario está compuesto por elementos o campos, tales como: campos de
texto, checkbox y botones. El objeto Form está un paso arriba de los campos de formulario (formfield)
en la jerarquía DOM.
8.2.10. Objetos Formfield:

Los objetos que representan los diversos campos de formulario son objetos formfield. La
sintaxis para acceder a un objeto formfield es la siguiente:
window.document.nombreFormulario.nombreElemento.propiedad
Los objetos Formfield son:

 Text.  Select.
 Password.  Hidden.
 TextArea.  Button.
 Radio.  Submit.
 Checkbox.  Reset.
A continuación se detallan los objetos formfield con sus propiedades y métodos:

29
8.2.10.1. Objetos Text, Password y TextArea:
Los objetos Text, Password y TextArea almacenan texto. Los tres tienen propiedades y
métodos similares:
name Representa el nombre del campo (atributo name del campo).
value Representa el valor actual existente en el campo (atributo value del campo).
defaultValue Representa el valor por defecto del campo (texto inicialmente asignado al atributo
value del campo).
type Representa el atributo type del campo ("text", "password", "textarea").
form Contiene el formulario (objeto) que almacena al campo.
Métodos Descripción
focus() Obtiene el foco del ratón sobre el objeto especificado.
blur() Pierde el foco del ratón sobre el objeto especificado.
select() Selecciona el texto dentro del objeto especificado (y obtiene el foco del ratón).
El siguiente ejemplo muestra el uso de algunas propiedades y métodos de estos objetos:
<BODY BGCOLOR="Wheat">
<FORM NAME="f1">
Login: <INPUT TYPE="TEXT" NAME="log" VALUE="Administrador"> <BR>
Clave: <INPUT TYPE="PASSWORD" NAME="pass"> <BR>
Observaciones: <BR>
<TEXTAREA NAME="obser" COLS="40" ROWS="5"> Escriba aquí </TEXTAREA> <BR>
</FORM>
document.write("Name del campo Login: " + document.f1.log.name + "<BR>");
document.write("Value del campo Login: "+ document.f1.log.value +"<BR>");
document.write("Value del textArea: " + document.f1.obser.value +"<BR>");
document.write("type del campo Clave: " + document.f1.pass.type +"<BR>");
alert("Ahora colocamos el foco en el campo Clave: ");
document.f1.pass.focus();
</SCRIPT>
</BODY>
8.2.10.2. Objetos Radio y Checkbox:

Los objetos Radio y Checkbox se usan para hacer selecciones. El Radio es un elemento de
formulario que permite seleccionar una opción y sólo una, sobre un conjunto de posibilidades. El
Checkbox son unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario.
Los dos tienen propiedades y métodos similares:
name Representa el nombre del Radio o Checkbox (atributo name del campo).
checked Valor booleano que nos dice si el Radio o Checkbox está seleccionado o no. Es
posible cambiar las selecciones usando esta propiedad (asignando el valor true
o false).
defaultChecked Valor booleano de la propiedad checked por defecto.
length Cantidad de elementos Radio de un mismo grupo. No aplica en Checkbox.
type Representa el atributo type del campo ("radio", "checkbox").
click() Es como si hiciésemos un click sobre un Radio o un Checkbox, es decir, cambia
su estado.
30
Los botones de radio que pertenecen a un mismo grupo deben tener el mismo valor NAME. Por lo
tanto, el objeto Radio es un arreglo. Para referirse un botón de radio en específico se debe usar su
posición entre corchetes.
El siguiente ejemplo muestra el uso de algunas propiedades y métodos del objeto Radio:
<BODY BGCOLOR="YellowGreen">
<FORM NAME="f">
Por favor, seleccione su Sexo: <BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="Masculino" CHECKED> Masculino <BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="Femenino"> Femenino <BR>
</FORM>
document.write("Atributo name del Radio: ");
document.write(document.f.sexo[0].name + "<BR>");
document.write("Atributo value del primer Radio: ");
document.write(document.f.sexo[0].value + "<BR>");
document.write("Valor del atributo Checked del segundo Radio: ");
document.write(document.f.sexo[1].checked + "<BR>");
document.write("Cantidad de elementos Radio: ");
document.write(document.f.sexo.length + "<BR>");
alert("Ahora seleccionamos el segundo radio: ");
document.f.sexo[1].click();
</SCRIPT>
</BODY>
El siguiente ejemplo muestra el uso de algunas propiedades y métodos del objeto Checkbox:
<BODY BGCOLOR="LightBlue">
<FORM NAME="f2">
Deseo participar en: <BR>
<INPUT TYPE="CHECKBOX" NAME="ajz" VALUE="ajedrez" CHECKED> Ajedrez <BR>
<INPUT TYPE="CHECKBOX" NAME="nat" VALUE="natacion"> Natación <BR>
<INPUT TYPE="CHECKBOX" NAME="gim" VALUE="gimnasia"> Gimnasia <BR>
</FORM>
document.write("Atributo name del primer Checkbox: ");
document.write(document.f2.ajz.name + "<BR>");
document.write("Atributo value del segundo Checkbox: ");
document.write(document.f2.nat.value + "<BR>");
document.write("Valor del atributo checked del tercer Checkbox: ");
document.write(document.f2.gim.checked + "<BR>");
alert("Ahora seleccionamos gimnasia: ");
document.f2.gim.click();
alert("Ahora desmarcamos ajedrez: ");
document.f2.ajz.checked = false;
</SCRIPT>
</BODY>
31
8.2.10.3. Objeto Select:
El objeto Select se usa para recibir entradas del usuario, como selección de una lista de
elementos.
Las propiedades y métodos del objeto Select son:
name Representa el nombre del elemento Select (atributo name de la lista).
value Representa el valor actual seleccionado de la lista (atributo value de la opción
seleccionada).
selectedIndex Representa el índice de la opción que se encuentra seleccionada. En caso de no
haber seleccionado ninguna opción, contiene -1.
options Refleja un arreglo (objeto) con cada una de las opciones del objeto Select. A su
vez tiene algunas propiedades.
length Cantidad de opciones de la lista Select. Cantidad de etiquetas <OPTION>.
type Representa el atributo type del campo ("select-one"). Si la etiqueta
<SELECT> tiene el atributo MULTIPLE, type contendrá "select-multiple".
form Contiene el formulario (objeto) que almacena a esta lista.
El siguiente ejemplo muestra el uso de algunas propiedades y métodos del objeto Select:
<BODY BGCOLOR="Feldspar">
<FORM NAME="f3">
Valore este sitio web: <BR>
<SELECT NAME="valorar">
<OPTION VALUE="excelente">Excelente</OPTION>
<OPTION VALUE="bien" SELECTED>Bien</OPTION>
<OPTION VALUE="regular">Regular</OPTION>
</SELECT>
<BR>
</FORM>
document.write("Atributo name de la lista: ");
document.write(document.f3.valorar.name + "<BR>");
document.write("Valor seleccionado de la lista: ");
document.write(document.f3.valorar.value + "<BR>");
document.write("Indice de la opción seleccionada de la lista: ");
document.write(document.f3.valorar.selectedIndex + "<BR>");
document.write("Cantidad de opciones de la lista: ");
document.write(document.f3.valorar.length + "<BR>");
</SCRIPT>
</BODY>
Nota: Más adelante, en el tema 11. trataremos la propiedad (objeto) Options en detalle.
8.2.10.4. Objeto Hidden, Button, Submit y Reset:

El objeto Hidden almacena texto. Los campos ocultos o campos tipo Hidden se usan para
enviar información extra desde el formulario de forma completamente transparente para el usuario, pues
no se verá en ningún momento que tenemos estos campos en el documento.
También tenemos tres tipos de botones: un botón genérico, Button, que no tiene acción
asignada, y dos botones específicos, Submit y Reset. Estos dos últimos sí que tienen una acción
asignada al ser pulsados: el primero envía el formulario y el segundo limpia los valores del formulario.
Estos cuatro objetos tienen propiedades similares. Los tres tipos de botones tienen métodos. El
objeto Hidden no tiene métodos:
32
name Representa el nombre del campo (atributo name del campo).
type Representa el atributo type del campo ("radio", "checkbox").
focus() Obtiene el foco del ratón sobre el botón especificado.
blur() Pierde el foco del ratón sobre el botón especificado.
click() Es como hacer un click sobre un botón de tipo Button, Submit, o Reset. Este
método no aplica para los campos tipo Hidden.
<BODY BGCOLOR="Khaki">
<FORM NAME="f4">
<INPUT TYPE="HIDDEN" NAME="id" VALUE="123">
<INPUT TYPE="BUTTON" NAME="b1" VALUE="Calcular"> <BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Enviar">
<INPUT TYPE="RESET" NAME="reset" VALUE="Limpiar">
</FORM>
document.write("Atributo name del campo oculto: ");
document.write(document.f4.id.name + "<BR>");
document.write("Atributo value del campo oculto: ");
document.write(document.f4.id.value + "<BR>");
document.write("Atributo name del botón Calcular: ");
document.write("Atributo name del botón Limpiar: ");
alert("Ahora el botón Enviar obtendrá el foco...");
document.f4.submit.focus();
</SCRIPT>
</BODY>
9. Eventos y Manejadores de Eventos:

Existen diversos eventos que pueden ocurrir en el navegador. A continuación se listan los
eventos posibles en el navegador.
9.1. Lista de Eventos posibles en el Navegador:

Evento Descripción
Focus Ocurre cuando el usuario da una entrada o enfoca un elemento del formulario.
Blur Ocurre cuando el foco es removido de un elemento.
Click Ocurre cuando el usuario hace clic en un enlace o en un elemento del formulario.
Double Click Ocurre cuando el usuario hace doble clic.
Change Ocurre cuando el usuario cambia algún valor de un campo.
KeyDown Ocurre cuando la tecla hace un primer contacto.
KeyUp Ocurre cuando el contacto con la tecla es liberado.
Load Ocurre cuando la página es cargada.
Unload Ocurre cuando la ventana actual es limpiada de la vista.
MouseDown Ocurre cuando el usuario presiona cualquiera de los botones de un ratón.
MouseUp Ocurre cuando el usuario libera el botón del ratón.
MouseOver Ocurre cuando el cursor o puntero ingresa a la entidad en consideración.
MouseOut Ocurre cuando el cursor o puntero es movido fuera del espacio del rectángulo.
Submit Ocurre cuando el usuario envía un formulario de una página.
Reset Ocurre cuando el formulario es restaurado (reseteado).
Select Ocurre cuando la opción es seleccionada.
Resize Ocurre si el usuario cambia el tamaño de la ventana.
Error Ocurre cuando existe un error de transferencia.
No todos los eventos son posibles sobre todos los objetos. A continuación se muestra la
correspondencia entre cada evento y sus objetos relacionados.
33
9.2. Lista de Eventos y los Objetos asociados a ellos:
Evento Objetos a los que está asociado

Focus, Blur Text, Password, TextArea, Radio, Checkbox, Select, Button,
Submit, Reset, FileUpload, Frame, Layer, Window
Click Radio, Checkbox, Button, Submit, Reset, Link, Document
DoubleClick Link, Document
Change Text, TextArea, Select, FileUpload
KeyDown, KeyUp TextArea, Link, Document
Load Image, Layer, Document, Window
Unload Document, Window
MouseDown Button, Link, Image, Document
MouseUp Button, Link, Image, Document
MouseOver Link, Image, Layer
MouseOut Link, Image, Layer
Submit, Reset Form
Select Text, TextArea
Resize Frame, Window
Error Image, Window
La siguiente lista muestra cada objeto y sus posibles eventos.
9.3. Lista de Objetos y los Eventos asociados a ellos:
Objeto Eventos a los que está asociado

Text Focus, Blur, Change, Select
Password Focus, Blur
TextArea Focus, Blur, Change, KeyDown, KeyUp, Select
Radio, Checkbox Focus, Blur, Click
Select Focus, Blur, Change
Button Focus, Blur, Click, MouseDown, MouseUp
Submit, Reset Focus, Blur, Click
FileUpload Focus, Blur, Change
Link Click, DoubleClick, KeyDown, KeyUp, MouseDown, MouseUp,
MouseOver, MouseOut
Image Click, Load, MouseDown, MouseUp, MouseOver, MouseOut, Error
Frame Focus, Blur, Resize
Layer Focus, Blur, Load, MouseOver, MouseOut
Form Submit, Reset
Document Click, DoubleClick, KeyDown, KeyUp, Load, Unload, MouseDown,
MouseUp
Window Focus, Blur, Load, Unload, Resize, Error
Existen eventos que pueden ocurrir en determinados elementos de un documento. Además

existen manejadores de eventos. Por ejemplo, un campo tipo Button en un formulario puede tener el
evento Click, el cual es manejado como el evento onClick. Así, el evento Focus es manejado como
el evento onFocus en un campo de Texto. Al cambiar una opción en una lista tipo Select, se origina el
evento Change el cual es manejado como el evento onChange.
El siguiente tema muestra algunos ejemplos:
34
10. Ejemplos de Manejadores de Eventos:
A continuación veremos algunos ejemplos prácticos usando manejadores de eventos.
10.1. Ejemplo de Evento Load:

El siguiente ejemplo muestra una ventana de bienvenida al cargar el documento:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onLoad</TITLE>
function bienvenida() {
alert("Bienvenido a nuestro sitio web!");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="CadetBlue" onLoad="bienvenida();">
<H2 ALIGN=CENTER>Ejemplo 10.1</H2>
</BODY>
</HTML>
Nota: El evento Load es manejado como el evento onLoad en la etiqueta <BODY>, la cual ejecuta la
función "bienvenida()" definida en la etiqueta <HEAD>. La función se ejecuta al cargarse la página.
Observe que el llamado a la función debe estar entre comillas simples o dobles.
10.2. Ejemplo de Evento MouseDown sobre una imagen:

En el capítulo 8.2.8. se presentó un ejemplo de los eventos MouseOver y MouseOut
manejados como eventos onMouseOver y onMouseOut sobre una imagen. Conviene revisarlo.
El siguiente ejemplo cambia el tamaño de una imagen al presionar sobre ésta un botón del ratón:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onMouseDown</TITLE>
function cambio() {
if (document.foto.width == "200")
document.foto.width = "300";
else
document.foto.width = "200";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Brass">
<IMG NAME="foto" SRC="imagen1.jpg" WIDTH="200" onMouseDown="cambio();">
<br>
Presione cualquier botón del ratón sobre la imagen...
</BODY>
</HTML>
Nota: Puede probar este ejemplo sustituyendo el evento onMouseDown por el evento onClick.
35
10.3. Ejemplo de Evento Click sobre un botón:
Este ejemplo permite ingresar dos números en campos de texto para luego ser sumados al pulsar
un botón. Existe otro botón para limpiar las casillas de texto. Aquí se maneja el evento onClick en
ambos botones:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onClick</TITLE>
function sumar() {
valor=parseFloat(document.f3.n1.value)+parseFloat(document.f3.n2.value);
document.f3.resp.value = valor;
}
function borrar() {
document.f3.n1.value = "";
document.f3.n2.value = "";
document.f3.resp.value = "";
document.f3.n1.focus();
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="LightSteelBlue">
<FORM NAME="f3">
Primer Número: <INPUT TYPE="TEXT" NAME="n1" SIZE="10"> <BR>
Segundo Número: <INPUT TYPE="TEXT" NAME="n2" SIZE="10"> <BR>
Respuesta: <INPUT TYPE="TEXT" NAME="resp" SIZE="10"> <BR>
<INPUT TYPE="BUTTON" NAME="b1" VALUE="Sumar" onClick='sumar();'>
<INPUT TYPE="BUTTON" NAME="b2" VALUE="Borrar" onClick='borrar();'>
</FORM>
</BODY></HTML>
Nota: Si se introducen valores no numéricos (ejemplo "abc"), al efectuar la suma se muestra NaN. Los
valores ingresados no están validados.

Este ejemplo permite que el visitante evalúe nuestra página web pulsando un botón:
<HTML>
<HEAD>
function evaluar(boton) {
if (boton.value == "Excelente")
alert("Muchas gracias!");
if (boton.value == "Bien")
alert("Trataremos de Mejorar. Gracias!");
if (boton.value == "Regular")
alert("Agradecemos su sinceridad.");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Tan">
<H2 ALIGN=CENTER>Ejemplo 10.4</H2> <HR>
<FONT COLOR="RED" SIZE="4">Bienvenido a nuestra página web!</FONT> <BR> <BR>
<FORM NAME="f4">
Para un mejor servicio, por favor, evalúe nuestra página: <BR>
<INPUT TYPE="BUTTON" NAME="b1" VALUE="Excelente" onClick='evaluar(this);'>
<INPUT TYPE="BUTTON" NAME="b2" VALUE="Bien" onClick='evaluar(this);'>
<INPUT TYPE="BUTTON" NAME="b3" VALUE="Regular" onClick='evaluar(this);'>
</FORM>
</BODY> </HTML>
36
10.5. Ejemplo de Evento Blur sobre un campo de texto:
Este ejemplo valida la entrada de una cédula en el formulario. Después de ingresada la cédula,
al remover el foco de la casilla (evento onBlur) se envía un mensaje (alert) si es no numérica:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onBlur</TITLE>
function validar() {
noválido = isNaN(document.f5.ced.value);
if (noválido) {
alert("Debe introducir una cédula válida");
document.f5.ced.focus();
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="MediumOrchid">
<FORM NAME="f5">
Cédula:
<INPUT TYPE="TEXT" NAME="ced" SIZE=8 MAXLENGTH=8 onBlur="validar();"><BR>
Nombre: <INPUT TYPE="TEXT" NAME="nom" SIZE="20"> <BR>
<INPUT TYPE="SUBMIT" NAME="sub" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
Nota: Queda como tarea hacer las modificaciones pertinetes para validar que la casilla no esté vacía y no
tenga puntos (.) intermedios (puede usar la función charAt(n)).
10.6. Ejemplo de Evento Click sobre un Radio button:

Este ejemplo presenta un sencillo formulario con dos botones de Radio para que el visitante
seleccione el sexo (Masculino o Femenino). A hacer clic sobre alguna opción se muestra una imagen
de un hombre o una mujer dependiendo de la selección:
<HTML>
<HEAD>
function mostrar(lafoto) {
document.foto.src = lafoto;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="SlateBlue">
<FORM NAME="f5">
Nombre: <INPUT TYPE="TEXT" NAME="nombre" SIZE="20"> <BR>
Por favor, seleccione su Sexo: <BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="M" CHECKED
onClick="mostrar('hombre.jpg');"> Masculino <BR>
<INPUT TYPE="RADIO" NAME="sexo" VALUE="F"
onClick="mostrar('mujer.jpg');"> Femenino <BR>
<IMG NAME="foto" SRC="hombre.jpg" WIDTH="150"> <BR>
<INPUT TYPE="SUBMIT" NAME="subm" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
37
10.7. Ejemplo de Evento Click sobre un Checkbox:
Este ejemplo muestra un formulario para apartar accesorios de computadora. Se muestra una
tabla con tres Checkbox para seleccionar los accesorios y su precio. Cada vez que se hace clic en un
Checkbox se muestra un resumen con los accesorios seleccionados y el precio total:
<HTML>
<HEAD>
function totalizar() {
cadena = ""; total = 0;
if (document.f7.pen.checked) {
cadena = cadena + document.f7.pen.value + "\n";
total = total + 150;
}
if (document.f7.tec.checked) {
cadena = cadena + document.f7.tec.value + "\n";
total = total + 100;
}
if (document.f7.rat.checked) {
cadena = cadena + document.f7.rat.value + "\n";
total = total + 80;
}
document.f7.resumen.value = cadena + "Total BsF." + total;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Thistle">
<FORM NAME="f7">
Nombre: <INPUT TYPE="TEXT" NAME="nombre" SIZE="20"> <BR>
Deseo apartar los siguientes accesorios: <BR>
<TABLE BORDER="1" WIDTH="300" BGCOLOR="#00CCCC">
<TR>
<TH>Accesorio </TH> <TH>Precio BsF </TH>
</TR>
<TR>
<TD> <INPUT TYPE="CHECKBOX" NAME="pen" VALUE="Pen Drive 8Gb"
onClick="totalizar();"> Pen Drive 8Gb </TD>
<TD> 150 </TD>
</TR>
<TR>
<TD> <INPUT TYPE="CHECKBOX" NAME="tec" VALUE="Teclado"
onClick="totalizar();"> Teclado <BR> </TD>
<TD> 100 </TD>
</TR>
<TR>
<TD> <INPUT TYPE="CHECKBOX" NAME="rat" VALUE="Ratón"
onClick="totalizar();"> Ratón <BR> </TD>
<TD> 80 </TD>
</TR>
</TABLE>
Resumen: <BR>
<TEXTAREA NAME="resumen" COLS="30" ROWS="5" READONLY>(vacío)</TEXTAREA>
<BR>
<INPUT TYPE="SUBMIT" NAME="sub" VALUE="Enviar">
<INPUT TYPE="RESET" NAME="res" VALUE="Limpiar">
</FORM>
</BODY>
</HTML>
38
Este ejemplo calcula la diferencia de días entre dos fechas. Permite ingresar dos fechas y al
pulsar clic sobre un botón se muestra los días transcurridos entre las dos fechas:
<HTML>
<HEAD>
function calcu() {
var k1 = new Date();
var k2 = new Date();
k1 = cambiarFormato(document.f8.fecha1.value);
k2 = cambiarFormato(document.f8.fecha2.value);
//calcula los milisegundos desde el día 1 de enero de 1970
var miliseg1 = k1.getTime();
var miliseg2 = k2.getTime();
var dias = Math.abs((miliseg2 - miliseg1)/1000/60/60/24);
document.f8.dias.value = dias;
}
function cambiarFormato(fech) {
//cambia el formato de la fecha tipo String a tipo Date
var arreglo;
var nuevaFecha = new Date();
if (fech.length > 0) {
arreglo = fech.split("/");
nuevaFecha.setDate(parseInt(arreglo[0]));
//indice del mes empieza en cero
nuevaFecha.setMonth(parseInt(arreglo[1])-1);
nuevaFecha.setFullYear(parseInt(arreglo[2]));
return nuevaFecha;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="SeaGreen">
<FONT COLOR="RED" SIZE="5">Cálculo de Diferencia de Días</FONT> <BR>
<HR>
<FORM NAME="f8">
<P>Introduzca la primera fecha (dd/mm/aaaa):
<INPUT TYPE="TEXT" NAME="fecha1" SIZE="10" MAXLENGTH="10"> </P>
<P>Introduzca la segunda fecha (dd/mm/aaaa):
<INPUT TYPE="TEXT" NAME="fecha2" SIZE="10" MAXLENGTH="10"> </P>
<INPUT TYPE="BUTTON" NAME="b1" VALUE="Calcular" onClick='calcu();'>
<INPUT TYPE="RESET" NAME="rst" VALUE="Limpiar">
<P>Diferencia de Días:
<INPUT TYPE="TEXT" NAME="dias" SIZE="10"> </P>
</FORM>
document.f8.fecha1.focus();
</SCRIPT>
</BODY>
</HTML>
39
10.9. Ejemplo de Evento Load:
Este ejemplo calcula la diferencia de días entre dos fechas. Permite ingresar dos fechas y al
pulsar clic sobre un botón se muestra los días transcurridos entre las dos fechas:
<HTML>
<HEAD>
var timerId = null;
function pedirHora() {
fechaActual = new Date();
horas = fechaActual.getHours();
minutos = fechaActual.getMinutes();
segundos = fechaActual.getSeconds();
if (horas >= 12)
ampm = " PM";
else
ampm = " AM";
if (horas > 12)
horas = horas -12;
if (minutos < 10)
minutos = "0" + minutos;
if (segundos < 10)
segundos = "0" + segundos;
horaActual = "" + horas + ":" + minutos + ":" + segundos + ampm;
return horaActual;
}
//ahora una función recursiva para actualizar la hora cada segundo

function mostrarHora() {
document.f9.reloj.value = pedirHora();
timerId = setTimeout("mostrarHora()", 1000);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="SeaBlue" onLoad="mostrarHora()">

<FONT COLOR="BLUE" SIZE="5">Presentar la hora actual</FONT> <BR>
<HR>
<FORM NAME="f9">
<B>Hora actual:
<INPUT TYPE="TEXT" NAME="reloj" SIZE="11"> </B>
</FORM>
</BODY>
</HTML>
Nota: Una función recursiva es aquella que se llama o invoca a sí misma dentro de la función.
40
11. Un paso más… El Objeto Select y el objeto Options:
En el tema 8.2.10.3. se hizo referencia al objeto Select que es un elemento de un formulario,
el cual se usa para seleccionar de una lista de elementos. Corresponde a la etiqueta <SELECT> HTML.
El objeto Select tiene propiedades, tales como: name, value, selectedIndex, options,
length, type y form, además de las propiedades focus() y blur().
La propiedad options del objeto Select es un arreglo que contiene todas las opciones
contenidas o por contener en el objeto Select. Así pues, podemos acceder a cada una de las opciones
definidas dentro de las etiquetas <OPTION> en HTML. Este arreglo tiene a su vez algunas propiedades
que permiten manipular o revisar una determinada opción:
value Representa el valor del atributo value de una determinada opción (<OPTION>).
text Es el texto de la opción. Lo que puede ver el usuario en el Select, que se
escribe después de la etiqueta <OPTION>.
selected Valor booleano que nos dice si la opción está actualmente seleccionada o no. Es
posible cambiar una selección usando esta propiedad (asignando el valor true o
false).
Con este planteamiento, podemos acceder a cualquiera de las opciones de una lista mediante la
referencia:
document.nome_formulario.name_select.options[index].propiedad
El siguiente ejemplo JavaScript recorre y muestra cada opción de una lista. El ejemplo muestra
también como cambiar la selección de una lista desde JavaScript:
<HTML>
<HEAD>
<TITLE>Ejemplo de objeto Options</TITLE>
</HEAD>
<BODY BGCOLOR="Yellow">
<FORM NAME="f">
Lista de Componentes: <BR>
<SELECT NAME="lista">
<OPTION VALUE="monitor">Monitor</OPTION>
<OPTION VALUE="impresora">Impresora</OPTION>
<OPTION VALUE="teclado">Teclado</OPTION>
</SELECT>
<BR>
</FORM>
document.write("Recorriendo las opciones de la lista: <BR>");
var i;
for (i=0; i < document.f.lista.length; i++) {
document.write("valor:" + document.f.lista.options[i].value + "<BR>");
document.write("texto:" + document.f.lista.options[i].text + "<BR>");
}
alert("Ahora seleccionaremos la tercera opción de la lista...");
document.f.lista.options[2].selected = true;
</SCRIPT>
</BODY>
</HTML>
41
11.1. Ejemplo de Evento onChange en una lista:
El siguiente ejemplo JavaScript muestra en una caja de texto el valor seleccionado en la lista:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onChange</TITLE>
function mostrar() {
document.f0.equipo.value = document.f0.lista.value;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Gray">
<FORM NAME="f0">
<SELECT NAME="lista" onChange="mostrar()">
<OPTION VALUE="Cardenales">Cardenales</OPTION>
<OPTION VALUE="Magallanes">Magallanes</OPTION>
<OPTION VALUE="Leones">Leones</OPTION>
</SELECT>
<BR>
Equipo seleccionado: <INPUT TYPE="text" NAME="equipo" READONLY>
</FORM>
</BODY>
</HTML>
Nota: El atributo READONLY en un campo de texto no permite que el usuario modifique su contenido.
11.2. Ejemplo con una lista Select:

El siguiente ejemplo JavaScript presenta una lista, y al pulsar en un botón muestra en campos de
texto los valores de la propiedad value, el texto y el índice de la opción seleccionada por el usuario:
<HTML>
<HEAD>
function pasar() {
var indice = document.ff.menu.selectedIndex;
var valor = document.ff.menu.options[indice].value;
var texto = document.ff.menu.options[indice].text;
document.ff.caja1.value = valor;
document.ff.caja2.value = texto;
document.ff.caja3.value = indice;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Silver">
<FORM NAME="ff">
Lista de entretenimientos: <BR>
<SELECT NAME="menu">
<OPTION VALUE="opcion1">Cine</OPTION>
<OPTION VALUE="opcion2">Música</OPTION>
<OPTION VALUE="opcion3">Deporte</OPTION>
</SELECT> <BR>
<INPUT TYPE="BUTTON" VALUE="Pasar valores" onClick="pasar()"> <BR><BR>
value:<INPUT TYPE="text" NAME="caja1" READONLY> <BR>
texto:<INPUT TYPE="text" NAME="caja2" READONLY> <BR>
índice:<INPUT TYPE="text" NAME="caja3" SIZE="1" READONLY> <BR>
</FORM>
</BODY>
</HTML>
42
11.3. El constructor New Option:
El objeto Select posee también un constructor propio, new Option, que nos va a permitir
introducir dinámicamente una o varias opciones nuevas dentro de una lista. La sintaxis genérica de este
constructor es:
nuevaopcion = new Option("texto","valor", "defaultSelected", "selected")
en donde "texto" va a ser el texto asociado a la nueva opción y "valor" su value asociado.
Además, podemos agregar "defaultSelected" si queremos que sea la opción seleccionada por
defecto en la lista y "selected" si queremos que sea la seleccionada sólo en el momento de crearla.
Una vez creada la nueva opción hay que introducirla en la lista. Esto se consigue mediante:
document.name_formulario.name_select.options[indice] = nuevaopcion
en donde indice debe ser n+1, es decir, el indice debe ser una unidad mayor que el último que tenga
anteriormente el Select, ya que si le ponemos como indice uno ya existente en lugar de crear uno
nueva opción lo que haríamos sería sustituir una existente por la nueva.
11.4. Ejemplo de agregar y eliminar elementos de una lista Select:

<HTML><HEAD>
function agregarA() {
var nuevo = new Option('Atletismo','atletismo','', 'selected');
var indice = document.f.milista.length;
document.f.milista.options[indice] = nuevo;
}
function agregarT() {
var nuevo = new Option('Tenis','tenis','', 'selected');
var indice = document.f.milista.length;
document.f.milista.options[indice] = nuevo;
}
function eliminar() {
//eliminar el elemento seleccionado de la lista
var indice = document.f.milista.selectedIndex;
if (indice != 0)
document.f.milista.options[indice] = null;
}
function eliminarT() {
//eliminar todos los elementos excepto el primero
if (document.f.milista.length > 1) {
document.f.milista.length = 1;
alert("Todos los deportes han sido eliminados...");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Gold">
<FORM NAME="f">
Lista de Deportes: <BR>
<SELECT NAME="milista">
<OPTION VALUE="nada">-=Seleccione=-</OPTION>
<OPTION VALUE="futbol">Futbol</OPTION>
<OPTION VALUE="natación">Natación</OPTION>
<OPTION VALUE="gimnasia">Gimnasia</OPTION>
</SELECT>
<INPUT TYPE="BUTTON" VALUE="agregar Atletismo" onClick="agregarA()">
<INPUT TYPE="BUTTON" VALUE="agregar Tenis" onClick="agregarT()">
<INPUT TYPE="BUTTON" VALUE="eliminar" onClick="eliminar()">
<INPUT TYPE="BUTTON" VALUE="eliminar todos" onClick="eliminarT()">
</FORM></BODY></HTML>
43
En el ejemplo anterior, se agregaron los botones "eliminar" y "eliminar todos". Es
posible eliminar un elemento de la lista de la siguiente forma:
document.name_formulario.name_select.options[indice] = null
en donde indice correponde al indice de la opción que se desea eliminar. Además, si deseamos
eliminar todos los elementos de la lista simplemente escribimos:
document.name_formulario.name_select.length = 0
donde el cero (0) indica la cantidad de elementos que deseamos dejar en la lista. Si colocamos en lugar
de cero (0) un uno (1) entonces la lista contendrá solo el primer elemento.
11.5. Ejemplo de validación con dos listas Select:

El siguiente ejemplo muestra dos listas. Según la selección que hagamos en la primera lista
aparecerán unas opciones u otras en la segunda:
<HTML>
<HEAD>
<TITLE>Ejemplo con dos listas</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function cargar() {
var indice = document.f1.lista1.selectedIndex;
if (indice == 1) cargarLara();
if (indice == 2) cargarPortuguesa();
if (indice == 3) cargarYaracuy();
if (indice == 0) document.f1.lista2.length = 1;
}
function cargarLara() {
document.f1.lista2.length = 1;
document.f1.lista2.options[1] = new Option("Iribarren","Iribarren");
document.f1.lista2.options[2] = new Option("Torres","Torres");
}
function cargarPortuguesa() {
document.f1.lista2.options[1] = new Option("Araure","Araure");
document.f1.lista2.options[2] = new Option("Guanare","Guanare");
document.f1.lista2.options[3] = new Option("Papelón","Papelón");
}
function cargarYaracuy() {
document.f1.lista2.options[1] = new Option("Peña","Peña");
document.f1.lista2.options[2] = new Option("San Felipe","San Felipe");
document.f1.lista2.options[3] = new Option("Urachiche","Urachiche");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Goldenrod">
<FORM NAME="f1">
Estado:
<SELECT NAME="lista1" onChange="cargar()">
<OPTION VALUE="opcion0">--elije un Estado--</OPTION>
<OPTION VALUE="Lara">Lara</OPTION>
<OPTION VALUE="Portuguesa">Portuguesa</OPTION>
<OPTION VALUE="Yaracuy">Yaracuy</OPTION>
</SELECT> <BR><BR>
Municipio:
<SELECT NAME="lista2">
<OPTION VALUE="opcion0">--elije un Municipio--</OPTION>
</SELECT>
</FORM></BODY></HTML>
44
11.6. Ejemplo con dos listas Select:
En este ejemplo se muestran dos listas. Un botón permite sacar un elemento (seleccionado) de
la primera lista e introducirlo en la segunda. Otro botón saca un elemento (seleccionado) de la segunda
lista y lo introduce en la primera:
<HTML>
<HEAD>
function pasarLado2() {
if (document.f.lista1.selectedIndex != -1) {
indice = document.f.lista1.selectedIndex;
texto = document.f.lista1.options[indice].text;
valor = document.f.lista1.options[indice].value;
nueva = new Option(texto, valor);
ultimo = document.f.lista2.length;
document.f.lista2.options[ultimo] = nueva;
//borrar opcion de la lista1
document.f.lista1.options[indice] = null;
}
}
function pasarLado1() {
if (document.f.lista2.selectedIndex != -1) {
indice = document.f.lista2.selectedIndex;
texto = document.f.lista2.options[indice].text;
valor = document.f.lista2.options[indice].value;
nueva = new Option(texto, valor);
ultimo = document.f.lista1.length;
document.f.lista1.options[ultimo] = nueva;
//borrar opcion de la lista2
document.f.lista2.options[indice] = null;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="RichBlue">
<FORM NAME="f">
<TABLE BORDER="1">
<TR>
<TD WIDTH="130">
<SELECT NAME="lista1" SIZE="4">
<OPTION VALUE="Luke Skywalker">Luke Skywalker</OPTION>
<OPTION VALUE="Obi-Wan Kenobi">Obi-Wan Kenobi</OPTION>
<OPTION VALUE="Darth Vader">Darth Vader</OPTION>
</SELECT>
</TD>
<TD> <DIV>
<INPUT TYPE="button" VALUE="Mover >" onclick="pasarLado2()"><br>
<INPUT TYPE="button" VALUE="< Mover" onclick="pasarLado1()">
</DIV></TD>
<TD WIDTH="130">
<SELECT NAME="lista2" SIZE="4">
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
45
11.7. Ejemplo de validación de una fecha usando listas Select:
Este ejemplo permite validar una fecha:
<HTML>
<HEAD>
<TITLE>Ejemplo de validación de fecha</TITLE>
function cambioAño() {
// si seleccionó un año
if (document.f.año.selectedIndex > 0) {
// si la lista mes esta vacía
if (document.f.mes.length == 1) {
meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
for (i=0; i < meses.length; i++) {
nueva = new Option(meses[i], meses[i]);
document.f.mes.options[document.f.mes.length] = nueva;
}
} else { //sino, es porque la lista mes ya tiene los meses
if (document.f.mes.selectedIndex == 2) {
if (esBisiesto() && document.f.dia.length-1 == 28) {
//poner lista dia hasta 29
nueva = new Option(29, 29);
document.f.dia.options[document.f.dia.length] = nueva;
}
if (!esBisiesto() && document.f.dia.length-1 == 29)
document.f.dia.length = 28+1; //poner lista dia hasta 28
}
} //fin del else
} else { //si seleccionó la palabra "Año" de la lista
document.f.mes.length = 1;
document.f.dia.length = 1;
} //fin del else
}
function cambioMes() {
//si seleccionó un mes
if (document.f.mes.selectedIndex > 0) {
var elMes = document.f.mes.selectedIndex;
var finDia = 31;
if (elMes == 4 || elMes == 6 || elMes == 9 || elMes == 11)
finDia = 30;
if (elMes == 2) {
if (esBisiesto())
finDia = 29;
else finDia = 28;
}
//si la lista dia esta vacía
if (document.f.dia.length == 1) {
for (i=1; i <= finDia; i++) {
nueva = new Option(i, i);
}
} else { //sino, es porque la lista dia ya tiene los dias
if (document.f.dia.length-1 > finDia)
document.f.dia.length = finDia+1;
else if (document.f.dia.length-1 < finDia) {
for (i=document.f.dia.length; i <= finDia; i++) {
nueva = new Option(i, i);
}
46
} //fin del else if
} //fin del else
}
else //si seleccionó la palabra "Mes" de la lista
document.f.dia.length = 1;
}
function esBisiesto() {
var miAño = parseInt(document.f.año.value);
resp = ((miAño % 4 == 0) && ((miAño % 100 != 0) || (miAño % 400 == 0)));
return resp;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Tan">
<FONT COLOR="BLUE" SIZE="5">Validación de Fecha</FONT> <BR>
<HR>
<FORM NAME="f">
<P>Fecha de Nacimiento:
<SELECT NAME="año" onChange="cambioAño();">
<OPTION VALUE="Año">Año</OPTION>
<OPTION VALUE="1989">1989</OPTION>
</SELECT>
<SELECT NAME="mes" onChange="cambioMes();">
<OPTION VALUE="Mes">Mes</OPTION>
</SELECT>
<SELECT NAME="dia">
<OPTION VALUE="Dia">Dia</OPTION>
</SELECT> </P>
<INPUT TYPE="RESET" NAME="rest" VALUE="Limpiar">
</FORM>
</BODY>
</HTML>
Nota: La regla para los años bisiestos según el calendario gregoriano es:
Un año es bisiesto si es divisible por 4, excepto el último de cada siglo (aquel divisible por 100),
salvo que este último sea divisible por 400.
Es decir los años que sean divisibles por 4 serán bisiestos; aunque no serán bisiestos si son
divisibles entre 100 (como los años 1700, 1800, 1900 y 2100) a no ser que sean divisibles por 400 (como
los años 1600, 2000 ó 2400). En 400 años debe haber 97 años bisiestos, de esa manera el año del
calendario gregoriano se mantiene muy parecido al año solar. Así el año gregoriano dura 365 días +1/4 -
1/100 +1/400 = 365,2425 días.
47
11.8. Ejemplo de validación en el envío de un formulario:
En este ejercicio se evalúa que las casillas de texto no estén vacías, que la cédula tenga
caracteres numéricos y que haya seleccionado un botón de radio, al menos un checkbox y un elemento
de la lista. Esta validación se efectúa al momento de presionar el botón submit. Si hay algún error, se
envía un mensaje (alert) y no se envía el formulario:
<HTML>
<HEAD>
function validacion() {
if (document.f.ced.value.length == 0 || isNaN(document.f.ced.value)) {
alert('[ERROR] Debe ingresar una CÉDULA válida...');
document.f.cedula.focus();
return false;
}
else if (document.f.nombre.value.length == 0) {
alert('[ERROR] Debe ingresar su NOMBRE...');
document.f.nombre.focus();
return false;
}
else if (!document.f.sexo[0].checked && !document.f.sexo[1].checked) {
alert('[ERROR] Debe seleccionar su SEXO...');
document.f.sexo[0].focus();
return false;
}
else if (!document.f.ttr.checked && !document.f.dep.checked &&
!document.f.bai.checked) {
alert('[ERROR] Seleccione al menos una Actividad Extracurricular');
document.f.ttr.focus();
return false;
}
else if (document.f.pnf.value == "opcion0") {
alert('[ERROR] Debe seleccionar un P.N.F...');
document.f.pnf.focus();
return false;
}
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="MediumAquamarine">
<FONT COLOR="BLUE" SIZE="5">Validación de Formulario</FONT> <BR>
<HR>
<FORM NAME="f" onSubmit="return validacion()">
<TABLE BORDER="1">
<TR>
<TD WIDTH="180"> Ingrese su Cédula: </TD>
<TD WIDTH="250">
<SELECT NAME="nac">
<OPTION VALUE="V">V</OPTION>
<OPTION VALUE="E">E</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="ced" SIZE="8" MAXLENGTH="8">
</TD>
</TR>
48
<TR>
<TD WIDTH="180"> Ingrese su Nombre: </TD>
<TD WIDTH="250">
<INPUT TYPE="TEXT" NAME="nombre" SIZE="30" MAXLENGTH="30">
</TD>
</TR>
<TR>
<TD WIDTH="180"> Ingrese su sexo: </TD>
<TD WIDTH="250">
<INPUT TYPE="RADIO" NAME="sexo" VALUE="M">Masculino
<INPUT TYPE="RADIO" NAME="sexo" VALUE="F">Femenino
</TD>
</TR>
<TR>
<TD WIDTH="180"> Actividad extracurricular: </TD>
<TD WIDTH="250">
<INPUT TYPE="CHECKBOX" NAME="ttr" VALUE="Teatro"> Teatro
<INPUT TYPE="CHECKBOX" NAME="dep" VALUE="Deporte"> Deporte
<INPUT TYPE="CHECKBOX" NAME="bai" VALUE="Baile"> Baile
</TD>
</TR>
<TR>
<TD WIDTH="180"> Ingrese el P.N.F. a estudiar: </TD>
<TD WIDTH="250">
<SELECT NAME="pnf">
<OPTION VALUE="opcion0">--elije un P.N.F.--</OPTION>
<OPTION VALUE="Estudios Jurídicos">Estudios Jurídicos</OPTION>
<OPTION VALUE="Gestión Social">Gestión Social</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD WIDTH="180">
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Enviar">
<INPUT TYPE="RESET" NAME="reset" VALUE="Limpiar">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Nota: Si la función invocada por el evento onSubmit retorna false, el formulario no se envía.
-------- o --------
Instructor: Vladimir Gude

Email: vladimirgude@yahoo.es
Barquisimeto - Estado Lara - Venezuela
Marzo - 2014
49

Guia JavaScript Inces

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia JavaScript Inces

Enviado por

Direitos autorais:

Formatos disponíveis

INCES MILITAR

Barquisimeto – Estado Lara

Fase: Desarrollo Web

1.1. Historia de JavaScript:

1.2. Características de JavaScript:

Nota: Si el navegador no soporta JavaScript, el código JavaScript escrito aparece directamente en la

2.1. Ejemplo de JavaScript:

2.2. Agregar Script al Documento:

Nota: Es opcional, agregar un punto y coma (;) al final de una sentencia.

La declaración de variables en JavaScript tiene las siguientes características:

En el ejemplo anterior, la variable nota no tiene asignado ningún valor inicialmente.

3.1. Tipos de Dato en JavaScript:

Tipo Descripción Ejemplos

3.2. Arreglos en JavaScript:

Nota: En el ejemplo anterior se imprimirá en pantalla:

Operador Descripción Ejemplos

Nota: En el ejemplo anterior se imprimirá en pantalla:

4. Interactuar con el Usuario:

4.1 Método alert():

4.3 Método confirm():

5.1. La sentencia if..else:

JavaScript permite la construcción de bloques if..else anidados sin límite en el número de

5.2. La sentencia switch..case:

6.1. La sentencia for:

6.2. La sentencia while:

6.3. La sentencia do..while:

El siguiente código muestra un ciclo do..while que se ejecutará tres veces:

Las funciones en JavaScript son de dos tipos:

7.1. Funciones incorporadas:

7.2. Funciones Definidas por el Usuario:

El siguiente es otro ejemplo de función JavaScript:

 Objetos del lenguaje (Objetos Language).

8.1. Objetos del Lenguaje (Objetos Language):

8.1.1. El Objeto String:

Propiedades String Descripción

8.1.2. El Objeto Number:

Su funcionamiento se puede resumir en el siguiente ejemplo:

Propiedades Number Descripción

8.1.3. El Objeto Math:

Propiedades Math Descripción

var num = -4.5;

8.1.4. El Objeto Array:

Nota: En el ejemplo anterior se muestra la creación de dos arreglos: arreglo1 y arreglo2.

Propiedad Array Descripción

El siguiente ejemplo muestra el manejo de un arreglo y el uso de la propiedad length:

Su funcionamiento se puede resumir en el siguiente ejemplo:

obj3 = new Boolean("");

obj5 = new Boolean(false);

obj7 = new Boolean(1/0);

Método Boolean Descripción

Métodos Date Descripción

El siguiente ejemplo muestra el uso de los métodos del objeto Date:

dia = fecha.getDate(); //Devuelve el día del mes: 29

/* Asignaremos la fecha 5-Ene-1992 y hora 8:25:30 al objeto f */

A continuación se presenta un ejemplo con diferentes maneras de mostrar un objeto Date:

var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves",

document.write(f.getDate() +" de "+ meses[f.getMonth()] +" de "+

document.write(diasSemana[f.getDay()] +", "+ f.getDate() +" de "+

Location Document History

Anchor Link Form Image Applet

Text Password TextArea Radio Checkbox Select

Hidden Button Submit Reset Fileupload

8.2.1. El Objeto Navigator:

Propiedades Navigator Descripción