Javascript Apuntes

A la hora de buscar información sobre desarrollo web nos encontramos multitud
de documentos que hablan de la nueva web (web 2.0) y de como ha contribuido a su

desarrollo las técnicas que componen AJAX.
Concepto AJAX
AJAX (Asynchronous Javascript and XML) es una técnica de desarrollo web que genera aplicaciones
web interactivas combinando:
●XHTML y CSS para la presentación de información
●Document Object Model (DOM) para visualizar dinámicamente e interactuar con la información
presentada
●XML, XSLT para intercambiar y manipular datos
●JSON y JSON-RPC pueden ser alternativas a XML/XSLT
● XMLHttpRequest para recuperar datos asíncronamente
●Javascript como nexo de unión de todas estas tecnologías
AJAX es un patrón de diseño que propone un nuevo modelo de interacción Web combinando las
tecnologías anteriores Los navegadores que soportan las tecnologías mencionadas son las plataformas
en las que se ejecutan las aplicaciones AJAX (Firefox, Iexplorer, Opera, Konqueror y Safari)
Ya hemos estudiado alguna de estás técnicas(XHTML y CSS) pero de todas las

que componen AJAX, la más importante es JavaScript, pues viene a ser el pegamento
que permite interactuar con todas estas técnicas dentro de una página html. De forma
que podamos recorrer la información contenida en un documento xml e ir generando
una tabla xhtml. O comprobar, que los datos introducidos en la página web por parte
del cliente, son correctos sin la necesidad de enviarlos a un servidor donde un
programa java o de otro tipo analice dichos datos.
Es más si no conocemos suficientemente JavaScript no seremos capaces de
crear aplicaciones dinámica por mucho que dominemos el resto de las técnicas.
Indice de Contenidos:
•Introducción
•¿Qué
es Javascript?
•Primeros pasos
•Elementos básicos
•Comentarios
•Literales
•Sentencias y bloques
•Tipos de datos
•Variables
•Referencias
•Vectores y matrices
•Operadores
•Operadores aritméticos
•Operadores de comparación
•Operadores lógicos
•Operadores de asignación
•Operadores especiales
•Estructuras de control
•Bifurcaciones condicionales
•Bucles
•Estructuras de manejo de objetos
1
•Funciones
•Funciones predefinidas
•Objetos
•Propiedades y métodos
•Creación mediante constructores
•Herencia
•Prototipado
•Objetos predefinidos
•Objeto Array
•Objeto Date
•Objeto Math
•Objeto Number
•Objeto String
•Objeto RegExp
•Objeto Boolean
•Objeto Function
•Eventos
•Lista de eventos
•Definición mediante código
•Modelo de objetos del documento
•Objeto Window
•La barra de estado
•Marcos (o frames)
•Objeto Document
•Cómo escribir en el documento
•Cookies
•Funciones básicas
•Un ejemplo: el contador individualizado
•Objeto Image
•Tratamiento de imágenes
•Objeto Form
•Objetos Text
•Objetos Checkbox y Radio
•Objetos Select y Option
•Expresiones regulares
•Objeto RegExp
•Métodos de String
•Otros objetos
•Objeto History
•Objeto Location
•Objeto Navigator
•Objeto Screen
•Nuevas características
•Ficheros .js
•Introducción
•¿Qué es Javascript?
El código JavaScript debe estar incluido dentro de una página HTML(XHTML).
Precisamente la función de JavaScript esta en leer , y modifcar los contenidos de las
etquetas HTML. Esto es lo que permite que las páginas html sean dinámcas. También
se ha de destacar que javascript es un lenguaje de programación interpretado.
•Primeros pasos
Para incluiir código JavaScript dentro de la página untilizamos las etiquetas
2
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Ejemplo:
<HTML>
<HEAD>
function HolaMundo() {
alert("¡Hola, mundo!");
var contestacion = prompt("¿Cómo te llamas, criatura?", "");
if (contestacion)
alert("Hola, " + contestacion);
}
function CambiaColor() {
document.bgColor='d0d0a9'
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
<INPUT TYPE="button" NAME="Boton" VALUE="Cambiar Color" onClick="CambiaColor()">
</FORM>
</BODY>
</HTML>
Viendo el código anterior vemos como JavaScript hace que una página sea
dinámica. Otra de las características de este lenguaje esta en que es interpretado.
También destaca que las herramientas gráficas como Dreamweaver generan
automáticamente el código JavaScript dentro de sus diseños. Por lo tanto se hace
imprescindible conocer este lenguaje si queremos ser capaces de leer y entender el
código generado por estas herramientas de diseño web.
•Elementos básicos
Antes de comenzar a escribir código tenemos que destacar que JAVASCRIPT
distigue mayúsculas de minúsculas, por lo tanto habrá que tener cuidado a la hora de
nombrar las variables y funciones, ya que en el caso de las variables no es obligatorio
definirlas para utilizarlas.
•Comentarios
Los comentarios se crean igual que en Java
// para una sola línea de comentarios
/* para varias líneas*/
•Literales
Se llama así a los valores que puede tomar una variable o una constante.
Aparte de los distintos tipos de números y valores booleanos:
"Soy una cadena"
3434
3.43
true, false
•Código JavaScript contenido en ficheros externos(.js)
El código que necesitemos crear para una página html lo podemos incluir en la
3
propia página dentro de las etiquetas <script language=”JavaScript”></script> o
bien incluir un fichero asccii con las instrucciones JavaScript. Para incluir dichero
fichero en la página html codificamos:
<script language=”JavaScript” src=”fichero.js”></script>
Desde este momento las variables y funciones definidas dentro del fichero
fichero.js están disponibles.
•Tipos de datos
Variables
Aunque no es obligado, se deben declarar las variables antes de utilizarlas. Esto
se hace utilizando la palabra clave var . Ejemplos de declaración de variables:
var man = "hola"; // El valor almacenado en man es de tipo cadena
(string).
var tres = 3; // El valor almacenado en tres es de tipo numerico.
var verdad = true; // El valor almacenado en verdad es de tipo boleano
(Boolean).var e = 2.718281828 // El valor almacenado en e es de tipo
numerico.
JavaScript es capaz de distinguir entre mayusculas y minusculas, y no solo es
capaz de distinguirlas, sino que tratará como variables diferentes dato y Dato.
El nombre de una variable no puede ser una palabra reservada, ni comenzar
por un dígito numérico. Ejemplos de nombres de variable no validos:
5Dias // Comienza con un numero.
Gaston&Daniela // El ampersand (&) no es un caracter valido para nom-
bre de variable.
Si declaramos una variable sin asignarla un valor, existe pero su valor es indefi-
nido(undefined). Ej.:
var que_sera;
Como JavaScript es un lenguaje sin tipos, las variables técnicamente no tienen
un tipo fijo. Tienen un tipo equivalente al tipo de valor que contienen. Es posible, en al-
gunas circunstancias, forzar la conversión automática de una variable o una parte de
datos en un tipo diferente. Los números pueden incluirse fácilmente en strings, pero
los strings no se pueden incluir directamente en números, para eso existen funciones
explicitas de conversión, parseInt() y parseFloat(), son las funciones encargadas de
hacerlo.
Los strings están delimitados por dobles o simples comillas. (Se utilizan comillas simples para
delimitar strings que contienen comillas dobles.) Un string también es un objeto en JavaScript,
siendo este un caso especial, con propiedades especiales. Son ejemplos de strings, los si-
String guientes:
"Este es un string."
'"¡Y este tambien!" pero con comillas simples.'
"125"
4
JavaScript soporta números enteros y de punto flotante. Los enteros pueden ser positivos, 0, o
negativos; un numero de punto flotante puede contener un punto decimal, una "e" (minúscula
o mayúscula), que se utiliza para representar "diez elevado a " en notación cientíifica, o am-
bos.
Los enteros se pueden representar en base 10 (decimal), base 8 (octal), y base 16 (hexadeci-
mal).
Los enteros octales se especifican por un "0" a la izquierda, y solo pueden contener los dígitos
0 a 7. Si un número tiene un "0" a la izquierda pero tiene los dígitos "8" y/o "9", es un número
decimal. Un numero, que por el contrario, podría ser un número octal pero que contenga la le-
tra "e" (o "E") genera un error.
Enteros hexadecimales ("hex") se especifican comenzando por "0x" (la "X" puede ser mayús-
cula o minúscula) y puede contener dígitos 0 a 9 y letras de la A a F (también en minúsculas o
mayúsculas). La letra "e" es un digito válido en notación hexadecimal y no significa un numero
exponencial. Las letras A a F se utilizan para representar, como dígitos, los números que van
desde el 10 al 15 en base 10. Es decir, 0xF es equivalente a 15, y 0x10 es equivalente a 16.
Números octales y hexadecimales pueden ser negativos, pero no pueden ser fraccionarios. Un
Numéricos número que comience con un "0" y contenga un punto decimal es numero decimal de coma
flotante; si un número que comienza con "0x" o "00" contiene un punto decimal, se ignora todo
lo que este situado a la derecha del punto decimal.
Veamos algunos ejemplos de números:
.0001, 0.0001, 1e-4, 1.0e-4 // Cuatro formas distintas de representar el mismo
número de punto flotante.
8.23e2 // Número de punto flotante, equivalente a 823.
102 // Número entero.
0377 // Entero octal, equivalente a 255.
00.0001 // Como un número octal no puede tener parte decimal, equivale a 0.
0378 // Número entero, equivale a 378.
0Xff // Entero hexadecimal, equivale a 255.
0x37CF // Entero hexadecimal, equivale a 14287.
0x3e7 // Entero hexadecimal, equivale a 999.
0x3.45e2 // Como un número hexadecimal no puede tener parte decimal,
equivale a 3.
Los valores boleanos posibles son true (verdad) y false (falso). Son valores especiales, y no se
Boleanos
pueden utilizar como 1 y 0.
Los objetos son construcciones lógicas que tienen unas propiedades y pueden ejecutar deter-
minados métodos. Se usa la notación del punto:
- objeto.propiedad, es una referencia a la propiedad citada
Objetos
- objeto.metodo, invoca el método en cuestión y se ejecuta
Por ej. el objeto window, tiene la propiedad window.location, que contiene la dirección de la
página y el método window.resizeTo(x,y), que dimensiona la ventana al tamaño x*y pixels.
Un valor que es indefinido es simplemente un valor dado a una variable despues de haber sido
Indefinido
creada, pero antes de que se haya asignado un valor a esta.
Null Un valor null es algo que no tiene valor y no quiere decir nada.
•Vectores y matrices
5
En los lenguajes de programación existen estructuras de datos
especiales que nos sirven para guardar información más compleja que simples
variables. Una estructura típica en todos los lenguajes es el Array, que es como una
variable donde podemos introducir varios valores, en lugar de solamente uno como
ocurre con la variables normales.
Los arrays nos permiten guardar varias variables y acceder a ellas de
manera independiente, es como tener una variable con distintos compartimentos
donde podemos introducir datos distintos. Para ello utilizamos un índice que nos
permite especificar el compartimiento o posición a la que nos estamos refiriendo.
Los arrays se introdujeron en versiones Javascript 1.1 o superiores, es
decir, solo los podemos utilizar a partir de los navegadores 3.0. Para navegadores
antiguos se puede simular el array utilizando sintaxis de programación orientada a
objetos, pero dada la complejidad de esta tarea, por lo menos en el momento en que
nos encontramos y las pocas ocasiones que los deberemos utilizar vamos a ver cómo
utilizar el auténtico array de Javascript.
Creación de Arrays
El primer paso para utilizar un array es crearlo. Para ello utilizamos un
objeto Javascript ya implementado en el navegador.Para crear un objeto array:
var miArray = new Array()
Esto crea un array en la página que esta ejecutándose. El array se crea

sin ningún contenido, es decir, no tendrá ningún elemento creado. También podemos
crear el array especificando el número de elementos que va a tener.
var miArray = new Array(10)
miArray[0] = 290
miArray[1] = 97
miArray[2] = 127
Los datos se introducen indicando entre corchetes el índice de la

posición donde queríamos guardar el dato. Los arrays empiezan siempre en la
posición 0, así que un array que tenga por ejemplo 10 posiciones, tendrá elementos
del 0 a la 9. Para recoger datos de un array lo hacemos igual: poniendo entre
corchetes el índice de la posición a la que queremos acceder. Veamos cómo se
imprimiría en la pantalla el contenido de un array.
miArray[0] = 155
miArray[1] = 4
miArray[2] = 499
for (i=0;i<3;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("<br>")
}
Tipos de datos en los arrays

En los arrays podemos guardar datos de cualquier tipo. Podemos ver un
6
array donde introducimos datos de tipo caracter.
miArray[0] = "Hola"
miArray[1] = "a"
miArray[2] = "todos"
Incluso, en Javascript podemos guardar distintos tipos de datos en un
mismo array. Es decir, podemos introducir números en unas casillas, textos en otras,
boleanos o cualquier otra cosa que deseemos.
miArray[0] = "desarrolloweb.com"
miArray[1] = 1275
miArray[1] = 0.78
miArray[2] = true
Longitud de los arrays

Para saber la longitud de un array se utiliza la propiedad length.
document.write("Longitud del array: " + miArray.length)
for (i=0;i<miArray.length;i++){
document.write(miArray[i])
}
Hay que fijarse que el bucle for se ejecuta siempre que i valga menos que la longitud
del array, extraída de su propiedad length.
El siguiente ejemplo nos servirá para conocer mejor los recorridos por los arrays, el
funcionamiento de la propiedad length y la creación dinámica de nuevas posiciones.
Vamos a crear un array con 2 posiciones y rellenar su valor. Posteriormente
introduciremos un valor en la posición 5 del array. Finalmente imprimiremos todas las
posiciones del array para ver lo que pasa.
miArray[0] = "Colombia"
miArray[1] = "Estados Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posición " + i + " del array: " + miArray[i])
document.write("<br>")
}
Arrays multidimensionales
Los arrays multidimensionales son un estructuras de datos que
almacenan los valores en más de una dimensión.
En Javascript no existe un auténtico objeto array-multidimensinal. Para
utilizar estas estructuras podremos definir arrays que donde en cada una de sus
posiciones habrá otro array. En nuestros programas podremos utilizar arrays de
cualquier dimensión, veremos a continuación cómo trabajar con arrays de dos
7
dimensiones, que serán los más comunes.
En este ejemplo vamos a crear un array de dos dimensiones donde tendremos por un
lado departamentos y por el otro los ciclos de cada departamento.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script>
var dpto = new Array(4);
var infor= new Array(3);
infor[0]="asi";
infor[1]="dai";
var adm = new Array(3);
adm[0]="af";
adm[1]="ga";
adm[3]="sec";
var ef = new Array(3);
ef[0]="afd";
dpto[0]=infor;
dpto[1]=adm;
dpto[2]=ef;
for(i=0;i<dpto.length;i++)
{
for(j=0;j<3;j++)
if( dpto[i][j]!=undefined){
document.write("<br/><i>Ciclo</i><b>" + dpto[i][j])+"</b>"}
}
</script>
</head>
<body>
</body>
</html>
También podemos crear un array a la vez que le indicamos sus datos.
var diasSemana = new

Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")
y también un array bidimiensional.
var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new

Array(10,8,10))
Operadores
8
Aritméticos Logicos De Bit Asignación Varios
Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo
Negacion - NO Logico ! NOT bit a bit ~ Asignacion = delete delete
Incremento ++ Menor que < Desplazamiento << Operadores typeof typeof

+= -=
izquierdo Bit a compactos
*= /=
Bit
Decremento -- Mayor que > Desplazamiento >> void Void

derecho Bit a
Bit
Multiplicacion * Menor que o <= Desplazamiento >>>

igual a derecho sin
signo
Division / Mayor que o >= AND bit a bit &

igual a
Modulo % Igualdad == XOR bit a bit ^

aritmetico
Suma + Distinto != OR bit a bit |
Resta - Y Logico AND &&
O Logico OR ||
•Operadores
aritméticos
•Operadores
de comparación
•Operadores lógicos
•Operadores de asignación
•Operadores especiales
•Estructuras de control
•Bifurcaciones condicionales
if (condicion_a_evaluar)
{ <Bloque de Instrucciones>;
}
else
}
switch(variable)
{
case “valor1”:
acciones ;
break;
case “valor2”:
acciones ;
break;
default: sentencias;
}
•Bucles
for (valor inicialt; condición; incremento ;)

[brrak]
9
[continue]
}
while (condicion)
[break]
[continue]
}
do
[break]
[continue]
} while (condicion)
•Funciones
Incluso los programas más sencillos tienen la necesidad de dividirse. Las
funciones son los únicos tipos de subprogramas que acepta JavaScript. Tienen la
siguiente estructura:
function nombre(argumento1, argumento2,..., argumento n)
{código de la funcion}
Los parámetros se pasan por valor. Eso significa que si cambiamos el valor de
un argumento dentro de una función, este cambio no se verá fuera:
function sumarUno(num) {
num++;
}
var a = 1:
sumarUno(a);
En este ejemplo, a seguirá valiendo 1 después de llamar a la función. Esto tiene
una excepción, que son las referencias.
Para devolver un valor de retorno desde la función se utiliza la palabra reserva-
da return:
function cuadrado(num) {
return num * num;
}
a = cuadrado(2);
En este ejemplo, a valdrá 4.
Se pueden definir funciones con un número variable de argumentos. Para poder

luego acceder a dichos parámetros dentro de la función se utiliza el vector argumen-
tos. Este ejemplo sumaría el valor de todos los parámetros:
<html>
<head>
<title></title>
<script>
function sumarArgumentos() {
resultado = 0;
10
for (i=0; i<arguments.length; i++)
resultado += arguments[i];
return resultado;
}
alert( "nº de argumentos:"+ sumarArgumentos("1","2"));
</script>
</head>
<body>
</body>
</html>
Funciones predefinidas
JavaScript dispone de las siguientes funciones predefinidas:
eval(cadena)
Ejecuta la expresión o sentencia contenida en la cadena que recibe como parámetro.
mensaje = 'Hola';
eval("alert('" + mensaje + "');");
Este ejemplo nos muestra una ventana con un saludo.
parseInt(cadena [, base])
Convierte en un número entero la cadena que recibe, asumiendo que está en la base
indicada. Si este parámetro falta, se
asume que está en base 10. Si fracasa en la conversión devolverá el valor NaN.
parseInt("3453");
Devuelve el número 3453.
parseInt("3453",16);
Devuelve el número 13395
parseFloat(cadena)
Convierte en un número real la cadena que recibe, devolviendo NaN si fracasa en el
intento.
parseFloat("3.12.3");
Este ejemplo devuelve NaN ya que la cadena no contiene un número real válido.
isNaN(valor)
Devuelve true sólo si el argumento es NaN.
isFinite(numero)
Devuelve true si el número es un número válido y no es infinito.
Number(referencia)
String(referencia)
Convierten a número (o referencia) el objeto que se les pase como argumento
•Objetos
Para crear objetos, primero es necesario definir su tipo (o
clase):
function empleado(nombre, edad, puesto) {
this.nombre = nombre
this.edad = edad
this.puesto = puesto
}
En JavaScript, la partícula this se refiere al objeto en el que se utiliza. Una vez

definida la clase, podemos crear variables (instanciar objetos) de esa clase de la si-
guiente manera:
11
empleado_1 = new empleado("Pedro", 26, "Programador")
Pueden añadirse propiedades a los objetos aunque estas no haya sido declara-
das en la definición de la clase. Por ejemplo:
empleado_1.jefe = "Luis"
Estas propiedades nuevas sólo afectaran a ese objeto y no al resto.
Los objetos pueden anidarse de forma que un objeto sea un a propiedad de
otro objeto. Por ejemplo:
function oficina(ciudad, pais) {
this.ciudad = ciudad
this.pais = pais
}
oficinaPedro = new oficina("Madrid","España")
empleado_1 = new empleado("Pedro", 26, "Programador",
oficinaPedro)
En el ejemplo anterior, hay que definir la clase empleado de esta forma:

function empleado(nombre, edad, puesto, oficina)
this.edad = edad
this.oficina = oficina
}
Dentro de la definición de la clase o tipo del objeto, pueden incluirse funciones

que accedan a sus propiedades. Estas funciones reciben el nombre de métodos. Un
método se define de la siguiente manera:
function mostrarPerfil() {
document.write("Nombre: " + this.nombre + "<BR>")
document.write("Edad: " + this.edad + "<BR>")
document.write("Puesto: " + this.puesto + "<BR>")
}
function empleado(nombre, edad, puesto) {

this.edad = edad
this.mostrarPerfil = mostrarPerfil
}
<HTML><HEAD><TITLE>Empleados</TITLE>
<!—
//DEFINE EL METODO muostrarPerfil
function mostrarPerfil() {
document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>")

document.writeln("Edad: " + this.edad)
document.writeln("Puesto: " + this.nombre)
12
document.write("</PRE>")
}
//DEFINE EL OBJECTO EMPLEADO
function empleado() {
this.nombre = prompt("Introduzca el nombre del empleado: ", "Nombre")
this.edad = prompt("Introduzca la edad de " + this.nombre, "00")
this.mostrarPerfil = mostrarPerfil
}
//-->
</SCRIPT>
</HEAD><BODY><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
</body>
</html>
Otro Ejemplo:

<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
listas=new Array();
var c=0;pos=0;
function objetonotas(alumno,modulo,nota)
{
13
this.alumno=alumno;
this.modulo=modulo;
this.nota=nota;
this.graba=grabaalumno;
this.leerAlumno=leerAlumno;
}
function grabarA()
{
a=calumno.value;
m=cmodulo.value;
n=cnota.value;
al= new objetonotas(a,m,n);
al.graba()
}
function grabaalumno()
{
c=c+1;
pos=c;
listas[c]=al;
}
function leerAlumno()
{
calumno.value=al.alumno;
cmodulo.value=al.modulo;
cnota.value=al.nota;
}
function siguiente()
{
pos=pos+1;
if(pos>c) {pos=c;}
al = new objetonotas();
al=listas[pos];
al.leerAlumno();
function anterior()
{
pos=pos-1;
if(pos<1) {pos=1;}
al = new objetonotas();
al=listas[pos];
al.leerAlumno();
}
function listar()
{
var i=1;
document.write("<table border='1'>");
14
for(i;i<= c;i++)
{
document.write("<tr><td width='33%'><B>Alumno :</B>" + listas[i].alumno + "</td><td
width='33%'><B>Modulo :</B>" + listas[i].modulo + "</td><td width='33%'><b> Nota :</B>" +
listas[i].nota +"</tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<p>nombre
<input name="calumno" type="text"><br>
modulo
<input name="cmodulo" type="text"><br>
nota
<input name="cnota" type="text"><br>
</p>
<p>
<input name="Grabar" type="button" value="Grabar Notas" onClick="grabarA()">
<input name="boorra" type="reset" id="boorra" value="Nueva Calificación"
onClick="calumno.value='';cmodulo.value='';cnota.value='';">
<br><br>
<hr>
<input name="siguiente" type="button" value="Siguiente" onClick="siguiente()">
<input name="anterior" type="button" value="Anterior" onClick="anterior()">
<input name="Listado" type="button" value="Listado" onClick="listar()">
<input name="Listado" type="button" value="cambio" onClick="window.location='curri.htm'">
</p>
</body>
</html>
•Objetos predefinidos
•Objeto Array
Ya explicado.
•Objeto Date
Este objeto nos permitirá manejar fechas y horas.
fecha = new Date();
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);
Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales,
obtenidas del reloj del sistema. En caso contrario hay que tener en cuenta que los me-
ses comienzan por cero. Así, por ejemplo:
navidad99 = new Date(1999, 11, 25)
El objeto Date dispone, entre otros, de los siguientes métodos:
getTime()
setTime(milisegundos)
Obtienen y ponen, respectivamente, la fecha y la hora tomados como milise-
gundos transcurridos desde el 1 de enero de
1970.
getYear()
setYear(año)
15
Obtienen y poner, respectivamente, el año de la fecha. Éste se devuelven como
números de 4 dígitos excepto en el caso en que estén entre 1900 y 1999, en cuyo
caso se devolverán las dos últimas cifras. Hay que tener cuidado, ya que la implemen-
tación de éstos métodos puede variar en las últimas versiones de Netscape.
getFullYear()
setFullYear(año)
Realizan la misma función que los anteriores, pero sin tantos líos, ya que siem-
pre devuelven números con todos sus dígitos.
Funciona en Explorer 4 y Netscape 4.06 y superiores.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
Obtienen y ponen, respectivamente, el mes, día, hora, minuto y segundo de la
fecha, también respectivamente,
respectivamente hablando.
getDay()
Devuelve el día de la semana de la fecha en forma de número que va del 0 (do-
mingo) al 6 (sábado).
•Objeto Math
Este objeto no está construido para que tengamos nuestras variables Math,
sino como un contenedor donde meter diversas constantes
(como Math.E y Math.PI) y los siguientes métodos matemáticos:
Método Descripción Expresión de Resultado

ejemplo del ejemplo
abs Valor absoluto Math.abs(-2) 2
sin, Funciones Math.cos(Math.PI) -1

cos, tan trigonométricas, reciben
el argumento en radianes
asin, Funciones Math.asin(1) 1.57

acos, trigonométricas
atan inversas
exp, log Exponenciación y Math.log(Math.E) 1

logaritmo,
base E
ceil Devuelve el entero más Math.ceil(-2.7) -2

pequeño mayor o igual al
argumento
16
floor Devuelve el entero más Math.floor(-2.7) -3
grande menor o igual al
argumento
round Devuelve el entero más Math.round(-2.7) -3

cercano o igual al
argumento
min, Devuelve el menor (o Math.min(2,4) 2

max mayor)
de sus dos argumentos
pow Exponenciación, siendo Math.pow(2,4) 16

el
primer argumento la base
y
el segundo el exponente
sqrt Raíz cuadrada Math.sqrt(4) 2
• Objeto Number
Al igual que en el caso anterior, no se pueden crear objetos de tipo Number,
sino que debemos referirnos al genérico. Este objeto contiene como propiedades los
siguientes valores numéricos
Propiedad Descripción
NaN Valor que significa "no es un número"
MAX_VALUE y MIN_VALUE Máximo y mínimo número representable
NEGATIVE_INFINITIVE y Infinito negativo y positivo, se utilizan

POSITIVE_INFINITIVE cuando hay desbordamiento al realizar
alguna operación matemática
•Objeto String
Este es un objeto que se puede confundir con los datos normales de tipo
cadena. Conviene utilizar estos últimos, ya que los objetos String tienen un
comportamiento extraño cuando se utilizan como cadenas normales. Además, al crear
una cadena estamos creando a la vez un objeto String asociado. Su utilidad está en
sus métodos, entre los que cabe destacar:
charAt(pos)
charCodeAt(pos)
Devuelven el carácter o el código numérico del carácter que está en la posición
indicada de la cadena.
indexOf(subcadena)
Devuelven la posición de la subcadena dentro de la cadena, o -1 en caso de no
estar.
split(separador)
Devuelven un vector con subcadenas obtenidas separando la cadena por el
17
carácter separador.
cadena = "Navidad,Semana Santa,Verano";
vector = cadena.split(",");
En el ejemplo, el vector tendrá tres elementos con cada una de las vacaciones
de un escolar español normal.
concat(cadena2)
Devuelve el resultado de concatenar cadena2 al final de la cadena.
substr(indice, longitud)
substring(indice1, indice2)
Devuelven una subcadena de la cadena, ya sea cogiendo un número de
caracteres a partir de un índice o pillando todos los caracteres entre dos índices.
toLowerCase()
toUpperCase()
Transforman la cadena a minúsculas y mayúsculas, respectivamente.
•Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una ru-
tina nuestra se ejecute sólo cuando suceda algo extraño deberemos llamarla desde un
controlador de eventos. Estos controladores se asocian a un elemento HTML y se in-
cluyen así:
<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">
•Lista de eventos
Evento Descripción Elementos que lo admiten
onLoad Terminar de cargarse una página <BODY...> <FRAMESET...>
onUnLoad Salir de una página (descargarla) <BODY...><FRAMESET...>
onMouseOver Pasar el ratón por encima <A HREF..> <AREA...>
onMouseOut Que el ratón deje de estar encima <A HREF..> <AREA...>
onSubmit Enviar un formulario <FORM...>
onClick Pulsar un elemento <INPUT TYPE="button,

checkbox,
link, radio"...>
onBlur Perder el cursor <INPUT TYPE="text"...>

<TEXTAREA...>
onChange Cambiar de contenido <INPUT TYPE="text"...>

o perder el cursor <TEXTAREA...>
onFocus Conseguir el cursor <INPUT TYPE="text"...>

<TEXTAREA...>
onSelect Seleccionar texto <INPUT TYPE="text"...>

<TEXTAREA...>
18
Como ejemplo, vamos a hacer que una ventana aparezca automáticamente en
cuanto pasemos un cursor por encima de un elemento <A> (e impidiendo, de paso,
que quien esté viendo la página pueda hacer uso del mismo).
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
Pasa por aquí encima
</A>
</BODY>
</HTML>
Otro Ejemplo
<HTML>
<HEAD>
<TITLE> Prueba de eventos </TITLE>
function mensaje()
{
alert("Estoy en mensajes");
}
</SCRIPT>
</HEAD>
<BODY onload="alert('onload')" onunload="alert('onunload')">
<FORM onreset="alert('onreset')" onsubmit="alert('onsubmit')">
<INPUT TYPE=BUTTON VALUE="Prueba el evento onclick " onclick= "alert('onclick' + mensaje())">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento ondblclick " ondblclick= "alert('ondblclick')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmousedown"
onmousedown="alert('onmousedown')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseup " onmouseup= "alert('onmouseup')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseover"
onmouseover="alert('onmouseover')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmousemove"
onmousemove="alert('onmousemove')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseout " onmouseout= "alert('onmouseout')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onfocus " onfocus= "alert('onfocus')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onblur " onblur= "alert('onblur')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeypress " onkeypress= "alert('onkeypress')">
19
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeydown " onkeydown= "alert('onkeydown')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeyup " onkeyup= "alert('onkeyup')">
<BR>
<INPUT TYPE=TEXT SIZE=25 VALUE="Prueba el evento onselect" onselect="alert('onselect')">
<BR>
<INPUT TYPE=TEXT SIZE=25 VALUE="Prueba el evento onchange" onchange="alert('onchange')">
<BR>
<INPUT TYPE=SUBMIT VALUE="Prueba el evento onsubmit " ><BR>

<INPUT TYPE=RESET VALUE="Prueba el evento onreset " ><BR>
</FORM>
</BODY>
</HTML>
Otro Ejemplo
<HTML>
<HEAD>
<TITLE> Prueba de eventos </TITLE>
function mensaje()
{
alert("Estoy en mensajes");
}
</SCRIPT>
20
</HEAD>
<BODY onload="alert('onload')" onunload="alert('onunload')">
<FORM onreset="alert('onreset')" onsubmit="alert('onsubmit')">
<INPUT TYPE=BUTTON VALUE="Prueba el evento onclick " onclick= "alert('onclick' +
mensaje())"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento ondblclick " ondblclick= "alert('ondblclick')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmousedown"
onmousedown="alert('onmousedown')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseup " onmouseup=
"alert('onmouseup')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseover"
onmouseover="alert('onmouseover')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmousemove"
onmousemove="alert('onmousemove')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onmouseout " onmouseout=
"alert('onmouseout')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onfocus " onfocus= "alert('onfocus')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onblur " onblur= "alert('onblur')">
<BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeypress " onkeypress=
"alert('onkeypress')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeydown " onkeydown=
"alert('onkeydown')"> <BR>
<INPUT TYPE=BUTTON VALUE="Prueba el evento onkeyup " onkeyup= "alert('onkeyup')">
<BR>
<INPUT TYPE=TEXT SIZE=25 VALUE="Prueba el evento onselect" onselect="alert('onselect')">
<BR>
<INPUT TYPE=TEXT SIZE=25 VALUE="Prueba el evento onchange"
onchange="alert('onchange')"> <BR>
<INPUT TYPE=SUBMIT VALUE="Prueba el evento onsubmit " ><BR>

<INPUT TYPE=RESET VALUE="Prueba el evento onreset " ><BR>
</FORM>
</BODY>
</HTML>
•Definición mediante código

Existe otra forma de definir eventos.. Por ejemplo, la página:
load1.html
<HTML>
<HEAD>
function Alarma() {
alert("Hola");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
21
...
</BODY>
</HTML>
Se puede reescribir como:
load2.html
<HTML>
<HEAD>
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD><BODY></BODY></HTML>
•Modelo de objetos del documento

Los objetos del navegador son:
navigator Permite manipular información referente al

browser del cliente.
window Ofrece métodos y propiedades de cada
ventana del navegador que finalizan cuando
éste se cierra. Cada ventana es un objeto.
frame Facilita el uso de métodos y propiedades
que posee cada frame presente en una
ventana.
location Habilita al navegador para trabajar con las
direcciones de Web cargadas previamente en
la ventana.
history Es usada para trabajar con el historial de
la ventana (lista de direcciones
visitadas).
document Tiene métodos y propiedades para trabajar
con el documento actual creando salidas
interactivas en la misma ventana donde se
encuentra este documento, y haciendo más
eficiente el trabajo realizado con él.
link Permite manipular los enlaces.
form Establece los métodos y propiedades
para trabajar con los formularios
presentes en un documento, así como
los elementos que las constituyen.
Es el contenedor de todos los
elementos del formulario.
anchor Proporciona los mecanismos
necesarios para manipular las
22
navigator Permite manipular información referente al
browser del cliente.
marcas.
applet Sirve para incluir applets en el
HTML.
image Permite manejar las imágenes.
area Para definir los mapas sensibles.
Los objetos del navegador están organizados jerárquicamente
Programa que visualiza las propiedades de todos los objetos del

navegador
<HTML>
<HEAD>
<TITLE></TITLE>
document.onmousedown =boton
function boton(k)
{
alert(event.button );
alert(event.srcElement.id );
propiedades();
}
function propiedades()
{
alert(event.button );
var cadena;
var sw;
sw=0;
23
obj = new Array();
obj[0]="window";
obj[1]="navigator";
obj[2]="location";
obj[3]="history";
obj[4]="document";
obj[5]="screen";
cadena = cadena + "<html><head></head><body><h1>Proiedades de los objetos del
Navegador</h1>";
for(i=0;i<6;i++)
{
//cadena = cadena + "<br>Propiedades del Objeto : <b>";
cadena = cadena + "<h2>" + obj[i] + "</h2></b><br>"
var objeto;
objeto =obj[i];
for(m in eval(objeto))
{
/*
if (sw==1)
{
sw=0;
continue;
}*/
// alert( "Propiedad:" + m + " Valor = " + objeto[m]);
cadena = cadena + "Propiedad:" + m + " Valor = " + objeto[m] + "</br>"
// if(m == "event")
// { sw=1;}
}
}
cadena = cadena + "</body></html>";
document.write(cadena);
}
</script>
</HEAD>
<BODY>
<form name= formu>
<input id = bbb type= button onclick =propiedades()>Propiedades de los Objetos del Navegador
<br></input>
</form>
</BODY>
</HTML>
Objeto Window
El objeto window hace referencia a la ventana actual.
•PROPIEDADES
closed Es un booleano que nos dice si la ventana está
cerrada( closed = true ) o no ( closed = false ).
defaultStatus Cadena que contiene el texto por defecto que aparece en la
barra de estado (status bar) del navegador.
frames Es un array: cada elemento de este array (frames[0],
frames[1], ...) es uno de los frames que contiene la
ventana. Su orden se asigna según se definen en el
24
closed Es un booleano que nos dice si la ventana está
cerrada( closed = true ) o no ( closed = false ).
documento HTML.
history Se trata de un array que representa las URLS visitadas por
la ventana (están almacenadas en su historial)
length Variable que nos indica cuántos frames tiene la ventana
actual.
location Cadena con la URL de la barra de dirección.
name Contiene el nombre de la ventana, o del frame actual.
opener Es una referencia al objeto window que lo abrió, si la
ventana fue abierta usando el método open() que veremos
cuando estudiemos los métodos.
parent Referencia al objeto window que contiene el frameset.
self ó window Es un nombre alternativo del window actual.
status String con el mensaje que tiene la barra de estado.
Top Nombre alternativo de la ventana del nivel superior.
•METODOS
alert(mensaje) Muestra el mensaje 'mensaje' en un cuadro de diálogo
blur() Elimina el foco del objeto window actual.
Elimina el intervalo referenciado por 'id' (ver el método

clearInterval(id)
setInterval(), también del objeto window).
Cancela el intervalo referenciado por 'nombre' (ver el

clearTimeout(nombre)
método setTimeout(), también del objeto window).
close() Cierra el objeto window actual.
Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos

confirm(mensaje) botones, uno de aceptar y otro de cancelar. Devuelve true
si se pulsa aceptar y devuelve false si se pulsa cancelar.
focus() Captura el foco del ratón sobre el objeto window actual.
Mueve el objeto window actual el número de pixels

moveBy(x,y)
especificados por (x,y).
moveTo(x,y) Mueve el objeto window actual a las coordenadas (x,y).
25
Abre la URL que le pasemos como primer parámetro en una
ventana de nombre 'nombre'. Si esta ventana no existe,
abrirá una ventana nueva en la que mostrará el contenido
con las características especificadas. Las características
que podemos elegir para la ventana que queramos abrir son
las siguientes:
toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra
de herramientas (yes,1) o no la tendrá (no,0).
location = [yes|no|1|0]. Nos dice si la ventana tendrá
campo de localización o no.
directories = [yes|no|1|0]. Nos dice si la nueva ventana
tendrá botones de dirección o no.
status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá
barra de estado o no.
menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá
open(URL,nombre,caracter barra de menús o no.
isticas) scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana
tendrá barras de desplazamiento o no.
resizable = [yes|no|1|0]. Nos dice si la nueva ventana
podrá ser cambiada de tamaño (con el ratón) o no.
width = px. Nos dice el ancho de la ventana en pixels.
height = px. Nos dice el alto de la ventana en pixels.
outerWidth = px. Nos dice el ancho *total* de la ventana en
pixels.
outerHeight = px. Nos dice el alto *total* de la ventana el
pixels.
left = px. Nos dice la distancia en pixels desde el lado
izquierdo de la pantalla a la que se debe colocar la
ventana.
top = px. Nos dice la distancia en pixels desde el lado
superior de la pantalla a la que se debe colocar la
ventana.
Muestra un cuadro de diálogo que contiene una caja de texto
en la cual podremos escribir una respuesta a lo que nos
prompt(mensaje,respuesta pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto'
_por_defecto) es opcional, y mostrará la respuesta por defecto indicada
al abrirse el cuadro de diálogo. El método retorna una
cadena de caracteres con la respuesta introducida.
Desplaza el objeto window actual a las coordenadas

scroll(x,y)
especificadas por (x,y).
Desplaza el objeto window actual el número de pixels

scrollBy(x,y)
especificado por (x,y).
Desplaza el objeto window actual a las coordenadas

scrollTo(x,y)
especificadas por (x,y).
Evalua la expresión especificada después de que hayan

setInterval(expresion,ti pasado el número de milisegundos especificados en tiempo.
empo) Devuelve un valor que puede ser usado como identificativo
(id) por clearInterval().
Evalua la expresión especificada después de que hayan

setTimeout(expresion,tie pasado el número de milisegundos especificados en tiempo.
mpo) Devuelve un valor que puede ser usado como identificativo
por clearTimeout().
Ejemplo
26
<html>
<head>
<title>TODO supply a title</title>
var ventana=null;
function abreventana(){
var caracteristicas ="width=450,height=400,scrollbars=yes"+",left="+500+",top="+100;
if (ventana==null || ventana.closed==true){
ventana = window.open("","OpenWindow",caracteristicas);
}
}
function escribeventana()
{
texto=document.getElementById("cajatexto");
// alert(" texto :" +texto.value);
ventana.document.write("<br/>"+texto.value);
ventana.document.write("PROPIEDADES</br>")
ventana.document.write("PROPIEDADES</br>")
ventana.document.write(ventana.closed + " </br>")
ventana.document.write(ventana.defaultstatus + " </br>")
ventana.document.write(ventana.frames.lengtn + " </br>")
ventana.document.write(ventana.history + " </br>")
ventana.document.write(ventana.length + " </br>")
ventana.document.write(ventana.location + " </br>")
ventana.document.write(ventana.name + " </br>")
ventana.document.write(ventana.opener + " </br>")
ventana.document.write(ventana.parent + " </br>")
ventana.document.write(ventana.status + " </br>")
ventana.document.write(ventana.top + " </br>")
}
function CambiaTamano(x,y)
27
{
ventana.moveTo(x,y)
}
abreventana();
</script>
</head>
<body>
<p>
Trabajando con el Objeto Window
</p>
</body>
<a href="javascript:void(0)" onclick="ventana.close();">cierra ventana</a><br>
<input type="button" value="Escribir en ventana" name="ev" onclick="escribeventana();"/><br>
<input type="text" id ="cajatexto" name="cajatexto" value="" width="30" /><br>
<a href="javascript:void(0)" onclick="abreventana();">Abre Ventana</a><br>
<p>X<input type="text" id ="tx" name="tx" value="100" width="10" /></p><br>

<p>Y <input type="text" id ="ty" name="ty" value="100" width="10" /></p><br>
<input type="button" value="CambiaPosicion" name="ev"

onclick="CambiaTamano(tx.value,ty.value);"/><br>
</html>
•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.
PROPIEDADES
Esta propiedad tiene almacenado el color de los enlaces

alinkColor
activos
28
Se trata de un array con los enlaces internos existentes en el
anchors
documento
applets Es un array con los applets existentes en el documento
bgColor Propiedad que almacena el color de fondo del documento
Es una cadena con los valores de las cookies del documento

cookie
actual
domain Guarda el nombre del servidor que ha servido el documento
embeds Es un array con todos los EMBED del documento

fgColor En esta propiedad tenemos el color del primer plano
Se trata de un array con todos los formularios del documento.

Los formularios tienen a su vez elementos (cajas de texto,
forms botones, etc) que tienen sus propias propiedades y métodos, y
serán tratados en el siguiente capítulo.
images. Array con todas las imágenes del documento
Un array de objetos imagen que contiene los nombres de las

images
mismas.
Es una cadena con la fecha de la última modificación del

lastModified
documento
linkColor Propiedad que almacena el color de los enlaces

links Es un array con los enlaces externos
location Cadena con la URL del documento actual
Cadena con la URL del documento que llamó al actual, en caso

referrer
de usar un enlace.
title Cadena con el título del documento actual
Propiedad en la que se guarda el color de los enlaces

vlinkColor
visitados
METODOS
clear() Limpia la ventana del documento

open() Abre la escritura sobre un documento
close() Cierra la escritura sobre el documento actual
write() Escribe texto en el documento
Escribe texto en el documento, y además lo finaliza con

writeln()
un salto de línea
Ejemplo
29
<html>
<head>
<title>Titulo</title>
function visualiza()
{
var n =document.images.length;
alert("Elementos :" +n);
var datos=""
for (i=0; i<n; i++)
{
datos=datos+document.images[i].src+"<br/>";
}
document.write(datos);
}
</script>
</head>
<body onload="visualiza();">
<img name="im1" align="middle" alt="Imagen" border="2" src="F:\Manual
Curso\pruebas\cebra.jpg"/><br/>
Curso\pruebas\conejo.jpg"/><br/>
Curso\pruebas\caracol.jpg"/><br/>
Curso\pruebas\aguila.jpg"/><br/>
</body>
</html>
•Cómo escribir en el documento
A la hora de escribir en un documento por medio de write o writeln hay que
tener en cuenta un hecho fundamental. Para poder escribir en un documento, éste
debe estar abierto y, al abrirlo, se destruye todo el código que haya en él.
Un documento se abre automáticamente cuando empieza a cargarse y se cierra
cuando termina de hacerlo. Así pues, si deseamos escribir en un documento sin
sobreescribir su contenido, deberemos hacerlo antes de que éste termine de cargar.
Si lo hacemos después, sobreescribiremos su contenido. Por lo tanto:
escribir.html
<HTML>
<HEAD>
<TITLE>Escribe y no sobreescribe</TITLE>
</HEAD>
<BODY>
Este es un documento muy interesante y que fue modificado por última vez el día
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Este ejemplo os mostrará la cadena completa, ya que se llama a write antes de
cerrarse el documento. Es decir, antes de que termine de cargar. Sin embargo, el
siguiente ejemplo:
sobreescribir.html
30
<HTML>
<HEAD>
<TITLE>Sobreescribe</TITLE>
function escribir() {
document.write("Este es un documento muy interesante y " +
"que fue modificado por última vez el día");
document.write(document.lastModified);
</SCRIPT>
</HEAD>
<BODY onLoad="escribir()">
Hola.
</BODY>
</HTML>
Sobreescribirá el documento y no podremos ver ese "Hola", al ser llamado después de
cargar el documento, es decir, después de cerrarlo.
HISTORY:
• Objeto history
Objeto derivado de window, contiene todas las direcciones que se han ido visi-
tando durante la sesión actual. Al ser un objeto derivado de window, este también pue-
de utilizar sus métodos.
Este objeto guarda la información sobre los URLs que el usuario ha visitado
dentro de una ventana determinada. La información aquí guardada es la que se lee
sobre el menú Go del navegador. El objeto history, al igual que el location, no posee
manejador de eventos.
Las propiedades de history.

length. Guarda el número de entradas en el documento
current. URL de la página actual.
history.current = undefined
Tiene 3 métodos:
METODO DESCRIPCIÓN SINTAXIS
back() Vuelve a la página anterior. window.history.back();
forward() Nos lleva a la página siguiente window.history.forward();
go(valor) Carga el URL indicado en el índice que se

le pasa como argumento respecto del do- window.history.go(valor);
cumento actual, valor.Si el índice es posi-
tivo iremos hacia delante en la lista de do-
cumentos, si por el contrario es negativo,
iremos hacia atrás. También podemos in-
dicarle directamente el URL
31
Uno.html
<html>
<head>
</head>
<body>
<input name="" type="button" onClick="history.back();"value="Página Anterior">
<input name="" type="button" onClick="history.forward();"value="Página Siguiente">
<input name="" type="button" onClick="history.go(1);"value="ir a 1">
<a href="dos.htm">dos</a>
</body>
</html>
Dos.html
<html>
<head>
</head>
<body>

<a href="tres.htm">tres</a>
</body>
</html>
Tres.html
<html>
<head>
</head>
<body>
32
<a href="uno.htm">uno</a>
</body>
</html>
Objeto location
Este objeto es el encargado de guardar la información del URL actual. Cada
propiedad posee una parte del URL. Este objeto carece de métodos y de manejadores
de eventos. Así, las propiedades del objeto location son las siguientes:
• hash. Cadena de caracteres que representa el nombre del ancla definida por
los caracteres tras el símbolo #. En esta página:
• host. Nombre de la máquina y puerto del URL actual.
• hostname. Nombre de máquina del URL actual.
• href. URL actual en forma de objeto string.
• pathname. El camino del recurso indicado en el URL.
• port. Puerto precisado en el URL.
• protocol. Protocolo precisado en el URL.
• referrer. URL a partir de que el documento actual se consulta.
• search. Parte del URL que caracteriza una consulta (a continuación de ?)
Ejemplo:
<html>
<head>
<title></title>
<script language="javascript">
function pagina()
{
document.write("<b>hash :</b>"+window.location.hash+"<br/>");
document.write("<b>host :</b>"+window.location.host+"<br/>");
document.write("<b>hostname:</b>"+window.location.hostname+"<br/>");
document.write("<b>href :</b>"+window.location.href+"<br/>");
document.write("<b>pathname :</b>"+window.location.pathname+"<br/>");
document.write("<b>port :</b>"+window.location.port+"<br/>");
document.write("<b>protocol :</b>"+window.location.protocol+"<br/>");
document.write("<b>referrer :</b>"+window.location.referrer+"<br/>");
document.write("<b>search :</b>"+window.location.search+"<br/>");
}
</script>
</head>
<body onload="pagina();">
</body>
</html>
33
Lo mismo pero utilizando DOM
<html>
<head>
<title>Trabajo con el objeto Location</title>
</head>
<style type="text/css">
h1{
color:red;
font-family:verdana;
font-size:24;
}
div{
color:teal;
font-family:courier;
font-size:16;
}
p{
color:black;
font-family:Arial;
font-size:16;
font-weight: bold; font-style: italic

}
</style>
var ccolor=new Array("teal","maroon","green","cyan","yellow","purple","blue");
var pos=0;
function carga()
{
for(propiedad in location)
{
var cadena="location."+propiedad
var mip=document.createTextNode("Porpiedad: location."+propiedad + "=" + eval(cadena));
miparrafo=document.createElement("P");
//var el = document.getElementById('parrafo');
var caja = document.getElementById('caja');
miparrafo.style.color=eval("ccolor[pos]");
//el.style.fontSize="24";
//el.appendChild(mip);
miparrafo.appendChild(mip);
caja .appendChild(miparrafo);
//alert(eval(cadena))
pos++;
}
}
</script>
</head>
<body onload="carga();">
<h1 id="titulo"> Propiedades del Objeto Location</h1>
<div id="caja"> </div>
34
</body>
</html>
Otra vez utilizamos DOM pero generamos una
tabla
<html>
<head>
<title>Trabajo con el objeto Location</title>
</head>
h1{
color:red;
font-family:verdana;
font-size:24;
}
p{
color:black;
font-family:Arial;
font-size:16;
font-weight: bold; font-style: italic

}
</style>
var ccolor=new
Array("teal","maroon","green","cyan","black","purple","blue","teal","maroon","green","cyan","white",
"purple","blue");
var pos=0;
function carga()
{
raiz=document.getElementsByTagName("body").item(0);
tabla=document.createElement("table");
tabla.border=1;
mibody=document.createElement("TBODY");
35
for(propiedad in location)
{
var cadena="location."+propiedad
var mip =document.createTextNode("Porpiedad: location."+propiedad + "=" +

eval(cadena));
miparrafo=document.createElement("P");
miparrafo.appendChild(mip);
miparrafo.style.color=eval("ccolor[pos]");
pos=pos+1;
fila=document.createElement("TR");
columna=document.createElement("td");
columna.appendChild(miparrafo);
fila.appendChild(columna);
mibody.appendChild(fila);
}
tabla.appendChild(mibody);
raiz.appendChild(tabla);
}
</script>
</head>
<body onload="carga();">
<h1 id="titulo"> Propiedades del Objeto Location</h1>
</body>
</html>
• Objeto link
Un objeto link es un objeto que enlaza a otro URL mediante hipertexto.
Cada enlace presente en un documento corresponde a un objeto que se coloca
en la matriz links. Así, se accederá al primer enlace mediante document.links[0], al se-
gundo mediante document.links[1], y así sucesivamente.
El objeto link carece de métodos pero no de propiedades como veremos a con-
tinuación.
A continuación analizaremos las propiedades de un link. Para ello, utilizaremos
el primer link que se encuentra en esta página que es:
<a name="enlace1" href="cap6.htm" target="window">capítulo anterior</a>
Las propiedades de link.

• length. Tamaño del objeto link.
enlace1.length = undefined
• target. Indica la ventana de destino en la que se visualizará la respuesta de tra-
tamiento del formulario. Se indica mediante el atributo TARGET de la marca A.
enlace1.target = window
• host. Nombre de la máquina y puerto del URL enlazado.
enlace1.host = www.ulpgc.es:80
36
• hostname. Nombre de máquina del URL enlazado.
enlace1.hostname = www.ulpgc.es
• href. URL enlazado en forma de objeto string.
enlace1.href = http://www.ulpgc.es/otros/tutoriales/JavaScript/cap6.htm
• pathname. El camino del recurso indicado en el URL.
enlace1.pathname = otros/tutoriales/JavaScript/cap6.htm
• port. Puerto precisado en el URL.
enlace1.port = 80
• protocol. Protocolo precisado en el URL.
enlace1.protocol = http:
• search. Parte del URL que caracteriza una consulta (a continuación de ?)
enlace1.search =
• Objeto anchor
Una anchor o ancla es una parte de texto que define una etiqueta para ser refe-
renciada desde otro lugar por un enlace hipertexto.
Cada ancla presente en un documento corresponde a un objeto que se coloca
en la matriz anchors. Así, se accederá al primer enlace mediante
document.anchors[0], al segundo mediante document.anchors[1], y así sucesivamen-
te.
Este objeto carece de métodos y la única propiedad que tiene es length que in-
dica el tamaño del objeto anchor. También carece de eventos asociados al mismo.
<p><a href="#1">ir_arriba</a> <a href="#2">ir_centro</a> <a href="#3">ir_abajo</a></p>
<p> </p>
<p><a name="1"></a>arriba</p>
<p> </p>
<p> <a name="2"></a>centro </p>
<p> </p>
<p><a name="3"></a>abajo</p>
<p> </p>
<p>
<script LANGUAGE="JavaScript">
var i;
for (i=0;i<document.anchors.length;i++)
{
document.write("Name : " + document.anchors[i].name + "<br>");
document.write("Target : " + document.anchors[i].target + "<br>");
document.write("<br><br>");
}
</script>
</p>
• Objeto form
El cliente, el navegador, crea un objeto de tipo form por formulario contenido en

el documento (especificado por la marca form. Cada formulario se identifica por el atri-
buto NAME de la marca FORM. Es útil hacer un formulario para mandar datos a un
servidor.
37
Cada formulario presente en un documento corresponde a un objeto que se co-
loca en la matriz forms. Así, se accederá al primer formulario mediante
document.forms[0], al segundo mediante document.forms[1], y así sucesivamente.
Ocurre lo mismo con los distintos elementos de un formulario (texto, botones...) que se
colocan en la matriz elements, permitiendo así un acceso simple y genérico a las pro-
piedades del objeto form.
El único método que posee este objeto es submit() que produce el envío de un
formulario mediante uno de los métodos selecionados en la propiedad que veremos a
continuación. Estos datos los recogerá el cgi asignado en la pròpiedad correspondien-
te del formulario. Este método equivale al botón SUBMIT del formulario.
Para ver las propiedades y los métodos del objeto form construiremos el si-
guiente formulario:
<form name="formulario" action="programa.cgi" method="post" target="window"

onSubmit="alert('Has ejecutado el método sumit')">
<br>Nombre y Apellidos:
<input type="text" name="identificacion" size=50
onBlur="alert('Generado blur en identificacion')"
onfocus="identificacion.value='Tengo el foco'"
onSelect="alert('Generado Select en identificacion')">
<br> <input type="button" name="comp" value="comprueba nombre"
onClick="alert(this.form.identificacion.value)">
Sexo:
<br><input type="radio" name="sexo" value="Masculino"
onClick="alert('Generado click en radiobutton')">
Masculino
<br><input type="radio" name="sexo" value="Femenino"
onClick="alert('Generado click en radiobutton')">Femenino<br>
Aficiones:
<br><input type="checkbox" name="aficiones" value="Musica"
onClick ="alert('Generado click checkbox')">Música<br>
<input type="checkbox" name="aficiones" value="Deporte"
38
onClick ="alert('Generado click checkbox')">Música<br>
<input type="checkbox" name="aficiones" value="Lectura"
onClick ="alert('Generado click checkbox')">Lectura<br>
<input type="checkbox" name="aficiones" value="Cine"
onClick ="alert('Generado click checkbox')">Cine<br>
<input type="checkbox" name="aficiones" value="Fotografia"
onClick ="alert('Generado click checkbox')">Fotografía<br>
<input type="checkbox" name="aficiones" value="Otros"
onClick ="alert('Generado click checkbox')">
Otros<br>
Otras aficiones:
<br> <input name="otrasAficiones" rows=15 cols=35 value="Escribe aquí"
onBlur="alert('Generado blur en Otras aficiones')"
onfocus="OtrasAficiones.value='Tengo el foco'"
onSelect="alert('Generado Select en Otras aficiones')">
<br> Tipo de revista que le gustaría recibir:
<select name="revista" onClick="alert('Click en revista')">
<option value="deportes">Deportes
<option value="musica">Música
<option value="informatica" selected>Informática
<option value="ciencia">ciencia
</select><br>
Introducir Clave:
<input type="password" name="clave" value="miclave" size=15
onBlur="alert('Generado blur en clave')"
onfocus="clave.value=''"
onSelect="alert('Generado Select en clave')">
<input type="hidden" name="valorclave" value="4657$?ab">
<p>
<input type="reset" name="resetea" value="borrar"
onclick="alert('Activado click de resetea')">
<input type="submit" name="submit" value="Enviar"
onclick="alert('Activado click de submit')">
</form>
• Objeto applet
Contiene el nombre del applet.

name
src Contiene el nombre del archivo fuente.
width Ancho del applet.
height Alto del applet.
hspace Borde horizontal.
vspace Borde vertical.
code El nombre del archivo *.class que contiene el código java.
• Objeto area<a>
39
hash Cadena que contiene el nombre del enlace, dentro de la URL.
host Cadena que contiene el nombre del servidor dentro de la URL.
Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de
hostname
la URL.
href Cadena que contiene la URL completa.
pathname Cadena que contiene el camino al recurso, dentro de la URL.
port Cadena que contiene el número de puerto del servidor, dentro de la URL.
Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la
protocol
URL
Cadena que contiene la información pasada en una llamada a un script, dentro de la
search
URL.
target Especifica la cadena de destino del enlace.
<script LANGUAGE="JavaScript">

</script>
<BODY>
<a href="" onmouseover="cambia(imagen1,img1)" onmouseout="cambia(imagen1,img2)"><img
src="G:/100OLYMP/P1010003.JPG" width="68" height="68" border="0" name="imagen1"></a><br><br>
<a href="javascript:dobleancho()">Doble ancho</a><br>
<a href="javascript:doblealto()">Doble Alto</a><br>
<a href="javascript:mitadancho()">Mitad ancho</a><br>
<a href="javascript:mitadalto()">Mitad Alto</a><br>
</BODY>
• Objeto image<img>
40
border Contiene el valor del grosor del borde.
complete Es un valor booleano que nos dice si la imagen se ha descargado completamente o no
height Contiene la altura de la imagen.
hspace Contiene el valor en pixels del margen horizontal.
lowsrc Contiene la dirección de la imagen en baja resolución.
name Contiene el nombre de la imagen.
src Contiene el nombre del archivo fuente.
vspace Contiene el valor en pixels del margen vertical.
width Ancho de la imagen.
Nos sirve el ejercicio anterior para ver el uso de la etiqueta img.
•Cookies
Una cookie es un elemento de una lista que se guarda en el ordenador del visi-
tante. Cada elemento de esa lista tiene dos campos obligatorios: el nombre y su valor;
y uno opcional: la fecha de caducidad. Este último campo sirve para establecer la fe-
cha en la que se borrará la galleta. Tiene este formato:
nombre=valor;[expires=caducidad;]
Sólo el servidor que ha enviado al usuario una determinada cookie puede con-
sultarla. Cada una tiene un tamaño máximo de 4 Kb ypuede haber un máximo de 300
cookies en el disco duro. Cada servidor podrá almacenar como mucho 20 galletas en
el fichero cookies.txt (en el caso de usar Netscape) o en el directorio cookies (si utiliza-
mos Explorer) del usuario. Si no especificamos la fecha de caducidad la "galleta" se
borrará del disco duro del usuario en cuanto éste cierre el navegador.
Ejemplo:
var dni=prompt("Introduce DNI del alumno","13102395");
41
var posc=0;
aalumnos = new Array();
function graba()
{
ddni=cdni.value;
dnombre=cnombre.value;
dcurso=ccurso.value;
dedad=cedad.value;
hoy = new Date("December 31,2006");
alert(hoy);
var galleta="DNI"+ddni+"="+ddni+","+dnombre+","+dcurso+","+dedad+";expires="+hoy.toGMTString();
alert(galleta);
document.cookie=galleta;
}
function leer()
{
datos=document.cookie;
aalumnos=datos.split(";");
for(i=0;i<aalumnos.length;i++)
{
valora=aalumnos[i];
//alert (valora);
posigual=valora.indexOf("=")+1;
ada=valora.substr(posigual,valora.length -13);
//alert(valora+".."+ada);
td=ada.split(",");
//alert(dni+"---"+td[0]);
if(dni==td[0]){
cdni.value=td[0];
cnombre.value=td[1]
ccurso.value=td[2]
cedad.value=td[3]}
posc=i;
break;
}
}
function borra()
{
cdni.value="";
cnombre.value="";
ccurso.value="";
cedad.value="";
}
function siguiente()
{
42
posc=posc+1;
var n=aalumnos.length -1 ;
if(posc > n)
{
posc=aalumnos.length -1;
}
else{
//posc=aalumnos.length;
valora=aalumnos[posc];
//alert (valora);
td=ada.split(",");
cdni.value=td[0];
cnombre.value=td[1]
ccurso.value=td[2]
cedad.value=td[3]
}
function anterior()
{
posc=posc-1;
if(posc < 0){
posc=0;}
valora=aalumnos[posc];
//alert (valora);
td=ada.split(",");
cdni.value=td[0];
cnombre.value=td[1]
ccurso.value=td[2]
cedad.value=td[3]
}
function borrar()
{
43
fborrar = new Date()
fborrar.setDate(fborrar.getDate()-1)
nombrec="DNI"+cdni.value;
cadena =nombrec+"=;expires="+fborrar.toGMTString();
//alert(cadena);
document.cookie=cadena;
}
function listado()
{
v=window.open("","");
v.document.write("<table
border=2><tr><td>DNI</td><td>Nombre</td><td>Curso</td><td>Edad</td></tr>");
datos=document.cookie;
aalumnos=datos.split(";");
pos=12;
for(i=0;i<aalumnos.length;i++)
{
valora=aalumnos[i];
//alert (valora);
ada=valora.substr(pos,valora.length -13);
pos=13;
td=ada.split(",");
posc=i;
cadena="<tr><td>"+td[0]+"</td><td>"+td[1]+"</td><td>"+td[2]+"</td><td>"+td[3]+"</td></tr>";
v.document.write(cadena);
v.document.write("</table>");
}
function limpiadatos()
{
cdni.value="";
cnombre.value="";
ccurso.value="";
cedad.value="";
}
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
44
<body onload="leer()">
DNI .................:<input name="cdni" type="text" maxlength="8">
<br>
Nombre ...........:<input name="cnombre" type="text"><br>

<script language="JavaScript">cdni.value=dni;cnombre.focus();</script>
Curso ...............:<input name="ccurso" type="text"><br>

Edad ................:<input name="cedad" type="text"><br><br><br>
<br>
<table width="75%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCCCC">
<tr>
<td><input name="grabar" type="button" onClick="graba()" value="Graba Alumnos"></td>
<td><input name="borrar" type="button" onClick="borrar()" value="Borrar Datos"></td>
<td><input name="Limpiar" type="button" onClick="limpiadatos();" value="LImpiar campos"></td>
<td> </td>
</tr>
<tr>
<td><input name="anterior" type="button" onClick="anterior()" value="Anterior"></td>
<td><input name="siguiente" type="button" onClick="siguiente()" value="Siguiente"></td>
<td><input name="listado" type="button" onClick="listado()" value="Listado">
<input name="Recargar" type="button" onClick="location.reload();" value="Recargar datos"></td>
<td> </td>
</tr>
</table>
<br>
</body>
</html>
Temporizador
Por medio del método window.setInterval podemos establecer un

temporizador que una vez llegue al tiempo establecido em milésimas de segundo
ejecutará la función javascript que le indiquemos.
id=window.setInterval("cerrarv()",5000);
El método window.clearInterval(id) elimina el temporizador. De ho
eliminarse transcurrido nuevamente el tiempo establecido la función volverá a
ejecutarse.
<html>
<head>
<title></title>
</head>
<script>
id=window.setInterval("cerrarv()",5000);
¡function cerrarv()
{
window.clearInterval(id)
window.close()
document.location.reload()
45
}
</script>
<body>
</body>
<script>
for(i=0;i<5000;i++){
document.write("<br/>"+i);
}
</script>
</html>
46
Ejercicios.
<html>
<head>
<title>Java Script></title>

</script>
<noscript>
</noscript>
</head>
<body>
<form name="form">
Hora<input type="text" name="hora"></input>
Alarma Activa <input type="checkbox" name="activa" ></input>
Alarma<input type="text" name="alarma" value =""></input>
</form>
<img src="D:\applet\0.gif" name="h1" id="h1" alt="0"></img><img src="0.gif" name="h2" id="h2"
48
alt="0"></img><img src="dospuntos.gif" alt=":"></img>
<img src="D:\applet\0.gif" name="m1" id="m1" alt="0"></img><img src="0.gif" name="m2" id="m2"
alt="0"></img><img src="dospuntos.gif" alt=":"></img>:
<img src="D:\applet\0.gif" name="s1" id="s1" alt="0"></img><img src="0.gif" name="s2" id="s2"
alt="0"></img>:
<img name="campana" style="visibility:hidden;"src="campana.gif" alt ="Ring !!!!!!!!!!!!!!!!!!!!"
onClick="pararalarma();"></img>
</body>
</html>
<%@ Language=JavaScript %>

<html>
<head>
<title>Menu</title>
<SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE="JAVASCRIPT">
var numeromenu = 1;
function cambia(op,nn,pp)
{
op.style.backgroundColor="black";
op.style.color="olive";
op.style.fontWeight="bold";
visualiza_submenu(nn,pp);
function cambiacm(op)
{
op.style.backgroundColor="teal";
49
op.style.color="white";
op.style.fontWeight="bold";
}
function oculta(mop)
{
mop.style.display="none";
}
function visualiza_submenu(nmenu,y)
{
cod="menuop"+numeromenu+".style.display='none'";
eval(cod);
numeromenu = nmenu;
cod="menuop"+nmenu+".style.display='block'";
eval(cod);
cod="menuop"+nmenu+".style.left='"+y+"'";
eval(cod);
}
function sin_submenu()
{
cod="menuop"+1+".style.display='none'";
eval(cod);
eval(cod);
eval(cod);
eval(cod);
function obj_window()
{
alert("responswe");
Response.write("<h1>parrafo</h1><br><h1>parrafo</h1><br><h1>parrafo</h1><br><h1>parrafo</h1><b
r><h1>parrafo</h1><br><h1>parrafo</h1><br><h1>parrafo</h1><br><h1>parrafo</h1><br>") ;
}
</script>
50
<STYLE type="text/css">
.borde
{
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 4px;
border-style: solid;
border-color:black;
width=100%;
position:absolute;
top:10px;
left:10px;
background-color:teal;
color:white;
font-weight:800;
font-size:10pt;
.elementos_menu
{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 4px;
border-style: solid;
border-color:black;
width=180;
position:absolute;
top:40px;
left:10px;
background-color:white;
color:black;
display:none;
background-color:transparent;
font-size:10pt;
}
A:link {font-family: sans-serif;color: #009900; text-decoration: none}
A:visited {background-color: silver; color: #009900;text-decoration: none}
A:hover {cursor: help; background-color: yellow; font-family: sans-serif}
BODY { background-image: url(cuaderno.jpg); }

</STYLE>
</head>
<body onClick=sin_submenu()>
<table class=borde >
51
<td id=op1 onmousemove=cambia(op1,1,10) onmouseout=cambiacm(op1)
onclick=visualiza_submenu(1,10) >
Opciones
</td>
onclick=visualiza_submenu(2,205)>
Biblioteca
</td>
Fichero
</td>
Servicios
</td>
</table>
<div id=menuop1 class=elementos_menu >

<A HREF="javascript:window.open('default.html')" >Abrir</A><BR>
<A HREF="javascript:window.print() ">Imprimir</A><BR>
<A HREF="javascript:history.back() ">Atrás</A><BR>
<A HREF="javascript:history.forward() ">Adelante</A><BR>
<A HREF="javascript:window.close() ">Cerrar</A>
</div>

<A HREF="d:\santac\default.htm" >Prestamos Biblioteca</A><BR>
<A HREF="d:\santac\default.htm">Consultas por Tema</A><BR>
<A HREF="d:\santac\default.htm">Consultas por Autor</A><BR>
<A HREF="d:\santac\default.htm">Libros por Alumno</A><BR>
</div>
<A href="http://loly\santac\asp\nom_fic.asp?accion=Creacion de ">Crear Fichero</A><BR>

<A HREF="http://loly\santac\asp\nom_fic.asp?accion=Nuevos Registros al">Abrir Fichero
para Añadir Dadtos</A><BR>
<A HREF="http://loly\santac\asp\nom_fic.asp?accion=Leer ">Leer Fichero</A><BR>
<A HREF="http://loly\santac\asp\nom_fic.asp?accion=Borrar">Borrar Fichero</A><BR>
<A HREF="http://loly\santac\asp\nom_fic.asp?accion=Copiar">Copiar Fichero</A><BR>
</div>
<A HREF="javascript:obj_window()">Objetos Window</A><BR>

<A HREF="d:\santac\default.htm">Consultas por Tema</A><BR>
<A HREF="d:\santac\default.htm">Consultas por Autor</A><BR>
<A HREF="d:\santac\default.htm">Libros por Alumno</A><BR>
</div>
52
<pre style="display:block;">
Equivalencia entre CSS y JavaScript
CSS JavaScript CSS JavaScript

font-family fontFamily width width
font-size fontSize height height
text-decoration textDecoration left left
text-transform textTransform top top
text-align textAlign visibility visibility
color color z-Index zIndex
background-color backgroundColor
</pre>
</body>
</html>
<html>
<head>
<title>Java Script></title>

</script>
<noscript>
</noscript>
</head>
<body onload="cargacomunidad();">
<form name="form1" action="mailto:micorreo@servidor.com" method="post" onSubmit="return
verificar();" onReset="return borrar();">
<table width=90% align=center>
<tr>
<td> * Nombre
<input type="text" name="nombre" size=20 maxlength=20>
</td>
<td>
* Apellidos <input type="text" name="apellidos" size=20 maxlength=20>
</td>
</tr>
<tr><td> * DNI <input type="text" name="dni" size=8 maxlength=8 onkeypress="return
pulsadaDNI(event);" onblur="obtieneletradni();">
<input type=text name=letra size=1 maxlength=1 onkeypress="return pulsadaLETRA(event);"><font
size=1>ej:01222222 J</font>
</td><td>* E-mail <input type="text" name="email" size=20 maxlength=20
onblur="emailcorrecto();"></td></tr>
<tr><td> Dirección <input type="text" name="direccion" size=20 ></td>
<td>Comunidad <select name="comunidad" onclick="cargaprovincia();">
<option value="_" >.</option>
<option value="_">.</option>
</select> </td>
<td>Provincia <select name="provincia">

</select> </td></tr>
56
<tr><td colspan=2 align=center>Otros <textarea name="otros" maxlength=20 onKeyPress="return
caracteres();"> Datos de interés</textarea>
<font size=1>Máximo 100 caracteres</font>
</td></tr> <tr><td><input type="submit" value="Enviar"></td><td>
<input type="reset" value="Borrar"> </td></tr>
</table>
</form>
</body>
</html>
form1.comunidad.click();
cargaprovincia();
</script>
57
DOM(Modelo de Objetos de Documento), es una interfaz estándar
que permite a scripts y programas, y de forma dinámica, el acceso y
manipulación de la escritura, estilo y contenido de los documentos.
Como hemos indicado la manipulación la podremos realizar sobre
distintos documentos, creados con formato HTML o XML y manipulados
mediante lenguajes de script como JavaScript y programas construidos con
Java y .net.
EN el presente manual utilizaremso javascript sobre HTML.
DOM es un estándar soportado por todos los navegadores. Cuando
el navegador carga una página HTML, crea internamente una
representación del documento en forma de árbol jerárquico. Ejemplo:
<html>
<head>
<title>ARBOL DOM</title>
</head>
<body>
<p id=”primera” align=”center> Estudio de DOM</p>
<p id=”segunda”>
<a href="index.html”>Enlace</a>
</p>
</body>
</html>
Para este código HTML el árbol generado sería el siguiente:
Document
Element
HTML
Element
Element BODY
HEAD
Element Element
P p
Element
TITLE
Element
A
Id
Id segunda
“ARBOL primera
DOM” a “Estudio a “Enlace” href
de DOM” index.h
tml
58
En el gráfico podemos ver cuatro tipos de nodos:
• Nodo Documento(document). No tiene padre y únicamente
tiene un hijo, el nodo elemento raíz, que es el elemento HTML.
A través de sus métodos y propiedades podemos crear y
acceder a nodos elemento.
• Nodos Elementos(element). Se corresponden con etiquetas
HTML. Pueden ser hijos o padres de otros elementos.
• Nodos de Texto(”..”). Son hijos de un nodo elemento y no
pueden tener hijos.
• Atributos(id,href). Son siempre nodos hijo de un n odo
elemento y tampoco pueden tener hijos.
Los elementos se corresponden con las etiquetas HTML, los nodos

de texto con las cadenas de caracteres y los atributos con los atributos de
las etiquetas. Documento se corresponde con la raíz del documento HTML.
Además se establecen relaciones entre los nodos:
Padre-hijo: HTML es padre de Head que a su vez lo es de Title.
Un padre puede tener varios hijos y un hijo un solo padre.
Hermanos:Son hermanos cuando son hijos del mismo padre.En el
ejemplo son hermanos los dos elementos p.
Para acceder a un nodo elemento, lo hacemos desde el nodo

documento o desde otro nodo elemento.
Para acceder a un nodo de texto o un nodo de atributo, lo
hacemos desde el nodo elemento del que descienden.
DOM ofrece una serie de interfaces, objetos, propiedades y
métodos para recorrer, manipular, eliminar y crear nodos en el árbol del
documento.
Para acceder a un nodo:
Utilizando el atributo id
getElementById(idnetificativo del elemento)
Utilizando el atributo Name
getElementsByName(name del elemento)
Recorriendo toda la estructura:
Mas teoría
Ejemplo:
<html>
<head>
<title>ARBOL DOM</title>
<script>
function cambia(){
var nuevousuario=document.getElementById('usuario').getAttribute('value');
document.getElementById('pusuario').firstChild.nodeValue= nuevousuario
document.getElementById('pclave').firstChild.nodeValue=
document.getElementById('clave').getAttribute('value')
}
function estructura(){
var estru="";
59
alert(document.firstChild.nodeValue)
alert(document.lastChild.tagName)
estru=estru+"<p><b>Primer Elemento Nombre Nodo :</b>
"+document.lastChild.tagName+"</p>"
estru=estru+"<p><b>Primer Elemento Valor Nodo :</b>
"+document.firstChild.nodeValue+"</p>"
if(!document.lastChild.hasChildNodes())
{
alert("No Tiene hijos")
estru=estru+"<h2>No Tiene hijos</h2>"
}
else
{ alert("Tiene hijos")
estru=estru+"<h2>Tiene hijos</h2>"
oo=document.documentElement;
alert(oo.firstChild.tagName)
estru=estru+"<p><b>Primer Hijo</b>"+ oo.firstChild.tagName +"</p>";
alert(oo.lastChild.tagName)
estru=estru+"<p><b>Ultimo Hijo</b>"+ oo.lastChild.tagName +"</p>";
oo2=oo.lastChild;
estru=estru+"<p><i>Creamos un objeto a partir de l ultimo objeto del
padre</i></p>"
estru=estru+"<p><i>Primer hijo de este objeto</i></p>"
alert(oo2.firstChild.tagName+ ":"+oo2.firstChild.firstChild.nodeValue)
estru=estru+"<p><b>"+oo2.firstChild.tagName+
":</b>"+oo2.firstChild.firstChild.nodeValue+"</p>"
estru=estru+"<p><i>Ahora todos los objetos contenidos en el mismo</i></p>"
for(i=0;i<oo2.childNodes.length;i++)
{
alert("Tiene Hijos"+oo2.childNodes(i).hasChildNodes());
estru=estru+"<p><b>Tiene Hijos </b>"+oo2.childNodes(i).hasChildNodes()
+"</p>"
if(oo2.childNodes(i).hasChildNodes())
{
alert(oo2.childNodes(i).tagName);
estru=estru+"<p><b>"+oo2.childNodes(i).tagName+"</b></p>"
estru=estru+"<p><i>SI el objeto es un FORM visualizamos los elementos del
formulario</b></p>"
if(oo2.childNodes(i).tagName !="FORM"){
alert(oo2.childNodes(i).tagName
+":"+oo2.childNodes(i).firstChild.nodeValue);
estru=estru+"<p><b>"+oo2.childNodes(i).tagName
+":</b>"+oo2.childNodes(i).firstChild.nodeValue+"</p>"
}
else
{
oo3=oo2.childNodes(i);
for(j=0;j<oo3.childNodes.length;j++)
{
alert(oo3.childNodes(j).getAttribute('id'));
estru=estru+"<p><b>"+oo3.childNodes(j).getAttribute('id')
+"</b></p>";
}
}
}
else
60
{
alert(oo2.childNodes(i).tagName
+":"+oo2.childNodes(i).firstChild.nodeValue);
estru=estru+"<p><b>"+oo2.childNodes(i).tagName
+":</b>"+oo2.childNodes(i).firstChild.nodeValue+"</p>"
}
}
}
alert(estru)
document.write(estru)
}
</script>
</head>
<body>
<p id="pusuario">Usuario</p>
<p id="pclave" >Clave</p>
<p onclick="estructura()" style="color:cyan;background-color:teal;font-
weight:bold">Pinchame para Visualiza Estrutura del documento</p>
<form>
<input type="hidden" value="Clave_Oculta" id="clave"/>
<input type="hidden" value="Usuario_Oculto" id="usuario"/>
<input type="button" value="Pinchame para sabel la clave" id="boton"
onclick="cambia()"/>
</form>
</body>
</html>
61
Introducción a
DOM
Todos los derechos reservados
www.nosolousabilidad.com
INTRODUCCIÓN
DOM, Document Object Model o Modelo de Objetos de Documento, es una
interfaz estándar que posibilita a scripts y programas, y de forma dinámica,
el acceso y manipulación de la estructura, estilo y contenido de los
documentos.
En este documento vamos a tratar el acceso y manipulación de documentos
HTML con JavaScript y a través del estándar DOM2. Esto significa que
muchos de los métodos y propiedades que vamos a utilizar no están
soportados por algunos navegadores antiguos, aunque al tratarse DOM de
un estándar, los actuales navegadores más extendidos, al igual que
(presuponemos) futuros navegadores, no tendrán problemas en interpretar
correctamente el código.
EMPEZANDO...
Cuando el navegador carga una página HTML, crea internamente una
representación del documento en forma de árbol jerárquico. En el siguiente
ejemplo de página HTML:
<HTML>
<HEAD>
<TITLE>Mi primera página para DOM</TITLE>
</HEAD>
<BODY>
<P id=”primera” align=”center”>Hola Mundo!</P>
<P id=”segunda”>
<A href=”index.htm”>Inicio</A>
</P>
</BODY>
</HTML>
El árbol generado internamente por el navegador sería como este:
62
Como podemos observar en el grafo, el documento está compuesto por una
serie de nodos relacionados jerárquicamente. Entre los nodos podemos
diferenciar cuatro tipos diferentes: Nodo de Documento (document), Nodos
de Elementos (element), Nodos de Texto (“..”) y Atributos.
Los Elementos se corresponden con las etiquetas del documento HTML. Los
Nodos de Texto con las cadenas de caracteres (encerradas entre etiquetas),
y los Atributos con los atributos de las etiquetas. El nodo de documento
representa el documento HTML en sí.
Además, esta jerarquía establece implícitamente relaciones entre los nodos:
Padre-Hijo: Por ejemplo, el elemento HTML es padre del elemento HEAD,
que a su vez lo es del elemento TITLE. Un padre puede tener muchos hijos,
aunque un hijo únicamente un padre.
Hermanos: Dos elementos se consideran hermanos cuando son hijos del
mismo padre. En nuestro ejemplo, los dos elementos P son hermanos, ya
que ambos son hijos de BODY.
Tipos de Nodos
Ya hemos comentado que hay diversos tipos de nodos, pero veamos un
poco más específicamente sus características.
Nodos de Elemento
En un documento HTML se definen a través de etiquetas. Pueden ser hijos
de otro nodo elemento, y también tener hijos (nodos elemento o nodos de
texto). Su acceso y manipulación se realiza a través de la interfaz Node y el
objeto document.
Nodos de Texto
Estos nodos siempre son hijos de un nodo elemento, y no pueden tener
hijos. Su acceso y manipulación se realiza a través del nodo elemento del
que son hijos.
Nodos de Atributo
Al igual que los de Texto, son siempre hijos de un nodo elemento, y no
63
pueden tener hijos. Su acceso y manipulación se realiza a través del nodo
elemento del que son hijos.
Nodo de Documento
Es un nodo único y diferente del resto. No tiene padre y únicamente tiene
un hijo, el nodo elemento raíz, en un documento HTML es el elemento
HTML. A través de los métodos y propiedades del objeto document
podemos crear y acceder a nodos elemento.
Resumiendo:
Para acceder a un nodo elemento, lo hacemos desde el nodo documento o
desde otro nodo elemento.
Para acceder a un nodo de texto o un nodo de atributo, lo hacemos desde el
nodo elemento del que desciendan.
DOM ofrece una serie de interfaces, objetos, propiedades y métodos para
recorrer, manipular, eliminar y crear nodos en el árbol del documento, que
se muestra en la siguiente sección de referencia.
REFERENCIA
DOCUMENT
El acceso a nodos del documento:
getElementById()
Acceder a un elemento del documento a través de su atributo id.
getElementsByTagName()
Acceder a un conjunto (array) de elementos a través del nombre de
su etiqueta.
documentElement
Accede al nodo raiz, es decir, al primer hijo de ‘document’, en el caso
de un documento HTML este elemento se corresponde con el
elemento HTML (<HTML>...</HTML>).
Ejemplo de uso:
alert(oo.tagName)
Creación de nuevos nodos en el documento:
createElement()
Crear un nuevo nodo de tipo elemento en el documento.
parrafo= document.createElement("P");
createTextNode()
Crear un nuevo nodo de tipo texto en el documento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
function carga()
{
alert(oo.tagName)
var ccaja=document.getElementById('caja');
alert(caja.hasChildNodes());
alert(ccaja.lastChild.firstChild.nodeValue)
64
alert(ccaja.firstChild.firstChild.nodeValue)
alert(ccaja.childNodes.length
+ccaja.childNodes(1).firstChild.nodeValue);
for(i=0;i<ccaja.childNodes.length;i++)
{
alert (ccaja.childNodes(i).firstChild.nodeValue);
}
alert(ccaja.parentNode.tagName )
parra=ccaja.firstChild;
alert(parra.parentNode.tagName )
alert(parra.nextSibling.firstChild.nodeValue )
var bboton=document.getElementById('boton').getAttrib-
ute('type');
alert(bboton);
var bb=document.getElementById('boton');
alert(bb.getAttribute('value'));
bb.setAttribute('style',"text");
texto=document.createTextNode(bb.getAttribute('value'));
parrafo.setAttribute('id','np');
parrafo.appendChild(texto);
caja.appendChild(parrafo)
}
function borraNodo()
{
var oo=document.getElementById('caja')
var hijo=document.getElementById('np')
oo.removeChild(hijo);
}
</script>
</head>
<body onload="carga()">
<div id="caja">
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
</div>
<input onclick="borraNodo()" type="button" name="boton" value="boton"
id="boton"/>
</body>
</html>
NODE
Acceso a nodos cercanos:
firstChild
Acceso al primer hijo del nodo.
alert(ccaja.firstChild.firstChild.nodeValue)
lastChild
Acceso al último hijo del nodo.
alert(ccaja.lastChild.firstChild.nodeValue)
childNodes
Acceso al conjunto (array) de hijos del nodo.
var ccaja=document.getElementById('caja');
alert(ccaja.childNodes.length
+ccaja.childNodes(1).firstChild.nodeValue);
for(i=0;i<ccaja.childNodes.length;i++)
{
alert (ccaja.childNodes(i).firstChild.nodeValue);
65
}
parentNode
Acceso al padre del nodo.
alert(ccaja.parentNode.tagName )
nextSibling
Acceso al siguiente hermano del nodo.
prevSibling (No funciona)

Acceso al anterior hermano del nodo.
Obtención de información sobre los nodos:

tagName
Nos informa del nombre de la etiqueta del nodo (en nodos de tipo
Elemento).
alert(oo.tagName)
nodeValue
Nos informa del valor del nodo (en nodos de tipo Texto).
ccaja.childNodes(1).firstChild.nodeValue
hasChildNodes()
Nos devuelve true o false en caso de que tenga o no hijos el nodo.
Manipulación de los atributos de un nodo:
alert(caja.hasChildNodes());
getAttribute()
Devuelve el valor del atributo indicado.
var bboton=document.getElementById('boton').getAttribute('type');
alert(bboton);
var bb=document.getElementById('boton');
alert(bb.getAttribute('value'));
setAttribute()
Especifica un atributo para el nodo.
Añadir o eliminar nodos:
bb.setAttribute('style',"text");
appendChild();
Añade un nodo hijo al nodo actual.
texto=document.createTextNode(bb.getAttribute('value'));
parrafo.setAttribute('id','np');
parrafo.appendChild(texto);
caja.appendChild(parrafo)
removeChild();
Elimina un nodo hijo al nodo actual.
function borraNodo()
{
var oo=document.getElementById('caja')
var hijo=document.getElementById('np')
66
oo.removeChild(hijo);
}
ESTILO CSS
Tabla de correspondencia entre propiedades CSS y propiedades de ‘style’ en
DOM.
Propiedades CSS Style
background background
background-color backgroundColor
border border
border-bottom, border-bottom-color, borderBottom, borderBottomColor,
border-bottom-style, border-bottom- borderBottomStyle, borderBottomWidth
width
border-color borderColor
border-left, border-left-color, borderLeft, borderLeftColor,
border-left-style, border-left-width borderLeftStyle, borderLeftWidth
border-right, border-right-color, borderRight, borderRightColor,
border-right-style, border-right-width borderRightStyle, borderRightWidth
border-style borderStyle
border-top, border-top-color, borderTop, borderTopColor,
border-top-style, border-top-width borderTopStyle, borderTopWidth
border-width borderWidth
bottom bottom
clip clip
color color
display display
font, font-familiy, font-size, font- font, fontFamiliy, fontSize, fontStyle,
style, fontVariant, fontWeight
font-variant, font-weight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style, list-style-type, list-style- listStyle, listStyleType, listStyleImage,
image, listStylePosition
list-style-position
margin, margin-left, margin-top, margin, marginLeft, marginTop,
margin-right, margin-bottom marginRight, marginBottom
overflow overflow
padding, padding-left, padding-top, padding, paddingLeft, paddingTop,
padding-bottom, padding-right paddingBottom, paddingRight
position position
right right
text-align, text-indent, text- textAlign, textIndent, textDecoration,
decoration, textTransform
text-transform
top top
visibility visibility
width width
67
z-index zIndex
Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
68
Scripts Para Los Navegadores 6.0
Por Scott Andrew LePera
Traduccil espa‫ﬠ‬de Jose Luis Pumarega y Fernando Gutierrez
Revisado en Enero 12, 2001
Por fin alguien entra en razón.
Despues de años de espezanza, rezando, y en algunos casos arrastrándonos, por fín

ha salido un navegador que soporta las recomendaciones del World Wide Web Con-
sortium para el Document Object Model.
Cierto, Netscape 6.0 está lejos de ser perfecto. Pero su amplio soporte del DOM-1 y
CSS-1 es un gran paso en la dirección correcta. Esperemos que sea el primero en una
linea de navegadores populares y exitosos que serán adoptados de modo entusiasta
por el público que navega por internet y que nos haga la vida más sencilla a los desa-
rrolladores.
De modo que ¿qué nos importa a nosotros como creadores de scripts? Todo, por que
la estructura del DOM expone nuevos y poderosos métodos que nos permiten acceder
y manipular los elementos de cualquier documento. Esto va más allá del DHTML y de
las etiquetas <DIV>; es el control absoluto sobre cada elemento de la página vía Ja-
vaScript.
Con métodos de Script DOM-1, puedes:
- Crear nuevos elementos al vuelo. Olvídate de usar document.write para insertar

HTML y CSS en tu página, no más constructores de objetos. El DOM te permite crear
elementos completos de la nada.
- Capturar todas las etiquetas del documento, o sólo el texto, sin las etiquetas.
- Insertar nuevo texto, y cambiar o eliminar texto de cualquier elemento sin recurrir a
innerHTML o document.write()
- Mover partes completas del documento, o eliminar partes o fragmentos y trabajar con
ellos.
- Y lo mejor: Todos estos nuevos métodos deben funcionar en cualquier navegador
compatible con DOM-1. Adios a la detección del navegador. No necesitamos construir
69
diferentes versiones de la misma página para distintos navegadores. Un conjunto co-
mún de técnicas de script es todo lo necesario.
Este artículo tratará de ser una introducción no excesivamente técnica a los scripts del
DOM, prestando relevancia al Netscape 6. Aquellos que quieran seguir estrictamente
las referencias (¿?) querrán echar un ojo a la especificación del W3C respecto a DOM
y CSS en profundidad, papeles blancos llenos de jerga técnica.
¿Estás dispuesto? Echemos un ojo al asuntillo del DOM.
Parte 1: Nuevas Piezas Del Puzzle
La mejor manera de concebir el DOM es como un árbol gigante, con un tronco que re-
presenta el documento, y muchas ramas que representan diferentes elementos de la
página. Cada parte del árbol es llamada nodo. Los nodos pueden ser etiquetas, como
HTML o XML, o atributos de esas etiquetas, como "align=left" o "size=3". Los nodos
también pueden ser cadenas de texto en el documento, como las que estás leyendo
ahora mismo.
Un nodo puede ser parte de otro más grande, llamado el padre (parent) de ese nodo.
Un nodo puede también ser padre de cualquier número de nodos hijos (child nodes).
Por ejemplo, el documento es un nodo. Si el documento contiene imágenes, el docu-
mento es el padre de los nodos imagen, que son sus hijos. Al mismo tiempo las imá-
genes son padres de sus atributos, como nodos hijos. Exactamente igual que un árbol:
es padre de la rama, que es padre de la hoja. Así es el Document Object Model.
Buf!! ¿lo has cogido?
En los navegadores de cuarta generación, estábamos limitados por el número de

nodos que podíamos manipular con JavaScript. Con soporte DOM completo aplicacio-
nes como Netscape 6 y Mozilla podremos acceder a cualquier elemento -o nodo-. El
cómo somos capaces de acceder a ellos depende principalmente del atributo ID del
elemento. Echemos un ojo a dos importantes métodos DOM que nos permiten hacer
todo esto.
getElementById()
70
Si conoces el ID de un elemento, puedes acceder a el con el nuevo método getEle-
mentById(). Simplemente pásale el ID del elemento como parámetro y devolverá la re-
ferencia a ese elemento.
<div id="miElemento"></div>
Para recoger esto en JavaScript, deberíamos usar:

x = document.getElementById("miElemento");
X es ahora una referencia al elemento <DIV>. A partir de esto, podemos usar x para
manipular la etiqueta <DIV>, como veremos en breve.
Otro modo de recoger elementos es usando getElementByTagName(). Este método

toma el tipo de etiqueta (tag) como parámetro y devuelve una colección (o array) de
todos los elementos con ese tipo en el documento.
Por ejemplo, si quisieras recoger todas las imágenes del documento, podrías hacer
esto:
x = document.getElementsByTagName("IMG");
X es ahora una colección de referencias a los elementos <IMG> del documento. Para
acceder a un elemento particular en la colección, digamos la primera imagen, podría-
mos referirnos a ella por su número ordinal o posición dentro de la colección.
x = document.getElementsByTagName("IMG");
firstImage = x.item(0) ;
getElementsByTagName() recoge todos los elementos coincidentes tanto si tienen un

atributo ID como si no, lo cual es extremadamente útil para etiquetas a las que normal-
mente no se asignan ID, como <P> y <TD>.
getElementById() y getElementsByTagName() son modos muy potentes de atravesar

el árbol DOM hacia las ramas más lejanas. En vez de usar document.algo.algoMás
para alcanzar un elemento, puedes dirigirte directamente a él, o a elementos de su
mismo tipo, con estos dos métodos.
71
Parte 2: Magia Elemental
getElementById() y getElementsByTagName() se utilizan para recuperar elementos.

Pero los elementos tienen su propio conjunto de métodos que facilitan la manipulación
de elementos sin necesidad de realizar scripts.
Considera la siguiente etiqueta de imagen para nuestros próximos ejemplos:

<image id="myImg" src="jabberwocky.gif" align="left"></img>
Para recuperar este elemento en Java-Script, usaríamos:

x = document.getElementById("myImg")
Ahora observa lo que los métodos DOM x tienen disponible para ello:
getAttribute()
getAttribute() devuelve el valor del atributo que tú le pases. Para obtener el valor SRC
de esta etiqueta via Java-Script, podríamos hacer esto:
myValue = x.getAttribute("src")
myValue podría entonces contener la cadena "jabberwocky.gif."
setAttribute()
setAttribute() te permite asignar el valor del atributo que tú le pases. Utiliza dos argu-
mentos: el nombre del atributo y el valor que se le asigna.
Para cambiar el valor ALIGN de esta etiqueta de izquierda por el de derecha, pode-
mos hacer esto:
x.setAttribute("align","right")
removeAttribute()
removeAttribute() simplemente quita el atributo que le pases. Para quitar el atributo

ALIGN de esta etiqueta:
x.removeAttribute("align")
Hey, espera. ¿No hemos visto esto antes? Lo has pillado. Lo vimos originalmente en
el objeto documento, pero cada elemento también dispone de este método. La diferen-
cia es que el método del documento devuelve todas las etiquetas que coincidan para
72
todo el documento, mientras que el método del elemento devuelve las etiquetas coin-
cidentes sólo para ese nodo.
Veamos un ejemplo:
<table id="tableOne">
<tr>
<td>Esta es la celda Uno</td>
<td>Esta es la celda Dos</td>
<td>Esta es la celda Tres</td>
</tr>
</table>
<table id="tableTwo">
<tr>
<td>Esta es la celda Cuatro</td>
<td>Esta es la celda Cinco</td>
<td>Esta es la celda Seis</td>
</tr>
</table>
Tenemos dos tablas, tableOne y tableTwo respectivamente. Podemos usar getEle-

mentsByTagName() con el documento para recuperar todos los elementos de celda
de tabla en esta página, de esta forma:
x = document.getElementsByTagName("TD")
Lo cuál nos devolverá x como una colección de las seis etiquetas <TD>. Pero quizás
preferiríamos extraer sólo las etiquetas de tableTwo. Para hacer esto, podemos usar
primero getElementById() para recuperar el elemento tabla, y entonces usar getEle-
mentsByTagName() para recuperar sólo aquellas celdas de este elemento tabla:
x = document.getElementById("tableTwo")
tableCells = x.getElementsByTagName("TD")
tableCells se convierte ahora en una colección de sólo tres etiquetas <TD> contenidas
en tableTwo.
Parte 3: Gran Papá document
Echemos un ojo hacia atrás al Gran Nodo Padre de Todas Las Cosas - el documento.
Ya sabemos que el documento tiene métodos para recoger cualquier elemento a pla-
cer. Pero, ¿qué mas puede hacer? Muchas, muchísimas cosas.
El documento puede crear nuevos nodos al vuelo, destruirlos, moverlos alrededor de

la página, lo que sea. Es perversamente divertido. Y lo hace sin usar document.write()
o constructores de nuevos objetos (No te asustes, esos métodos siguen ahí). Eche-
mos un ojo a los métodos de Script de DOM que permiten que esto ocurra.
73
createElement()
createElement() permite crear nuevas etiquetas. ¡Si! ¡Puedes crear estructuras HTML
completas de la nada. ¡Sorprende e impresiona a tus amigos! ¡Vamos a hacer uno
ahora mismo!
miImagen = document.createElement("IMG");
¡Ta-da! ¡Simple como un cubo! ¡Acabamos de crear una nueva etiqueta <IMG>! Pode-
mos hacer esto para crear qualquier etiqueta válida que queramos.
Pero espera. ¿donde se ha creado la imagen? Aún no está en el documento. ¿Por

qué? Por que para cada nuevo elemento que quieras que sea mostrado, debes decirle
al documento dónde añadirlo dentro del árbol del mismo documento.
Esto es algo importante que debes de entender cuando uses creaeteElement(). No es-
tás insertando HTML como podrías hacerlo con document.write(). A cambio, estás
creando un nuevo elemento crudo, esperando a ser definido e insertado como un hijo
del nodo document. Está flotando en el Limbo, esperando a que alguien le de forma y
figura. En el ejemplo anterior, nuestra etiqueta recien nacida <IMG> no tenía ni ID ni
SRC ni un lugar en el documento aún. Así que definámoslo:
miImagen.setAttribute("id","imagenUno");
miImagen.setAttribute("src","jabberwocky.gif");
Ahora todo lo que necesitamos es añadirlo al cuerpo del documento. Para ello, usare-
mos el método para nodos DOM appendChild():
docBody = document.getElementsByTagName("body").item(0);
docBody.appendChild(miImagen);
Fíjate ahora cómo hemos recogido la etiqueta <BODY> del documento y la hemos
usado en vez de añadirlo directamente al documento. El motivo de esto es que
<BODY> es el nodo dentro del documento en el que todo se muestra.
appendChild() es un método que funciona en cualquier nodo. En el próximo ejemplo,

construiremos una tabla de 3x3 de dentro a fuera, primero crearemos el cuerpo, filas y
columnas, y las añadiremos a la tabla principal. Finalmente añadiremos la tabla com-
pleta al cuerpo del documento.
myTable = document.createElement("TABLE");
myTable.id = "TableOne";
myTableBody = document.createElement("TBODY");
for (i = 0; i < 3; i++){
74
row = document.createElement("TR");
for (j = 0; j < 3; j++){
cell = document.createElement("TD");
row.appendChild(cell);
}
myTableBody.appendChild(row);
}
myTable.appendChild(myTableBody);
docBody.appendChild(myTable);
Puedes ver por qué tiene sentido construir códigos HTML complejos comenzando pri-
mero por los nodos y luego ensamblarlas en estructuras mayores.
createTextNode()
Hmm. Nuestra tabla está un poco, bien, vacía. Añadamos algo de texto con el método
DOM createTextNode(). createTextNode() simplemente crea un nodo genérico que no
es otra cosa que una cadena de texto. Puedes añadirlo a otros nodos para darlos con-
tenidos dinámicos. Añadamos algo de código a nuestro bucle crea-celdas.
for (j = 0; j < 3; j++){
textVal = "Cell" + i + "_" + j;
textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
}
Ahora nuestras celdas tienen algo de texto. ¿Y qué pasa con atributos como BGCO-
LOR o VALIGN? Podemos asignarlos mediante el método DOM setAttribute():
for (j = 0; j < 3; j++){
cell.setAttribute("WIDTH","50");
cell.setAttribute("HEIGHT","50");
}
Vamos a acabar. Aquí está el código completo para nuestra funión generadora de ta-
blas.
function construyeTabla(){
myTable = document.createElement("TABLE");
myTable.id ="TableOne";
myTable.border = 1;
myTableBody = document.createElement("TBODY");
for (i = 0; i < 3; i++){
row = document.createElement("TR");
for (j = 0; j < 3; j++){
cell.setAttribute("WIDTH","50");
75
cell.setAttribute("HEIGHT","50");
}
myTableBody.appendChild(row);
}
myTable.appendChild(myTableBody);
docBody.appendChild(myTable);
}
window.onload = construyeTabla;
Llamamos a la funcion construyeTabla() en el evento window.onload dado que tene-

mos que estar seguros de que el elemento <BODY> existe antes de añadirle una ta-
bla. Prueba a copiar el código y pegarlo entre etiquetas <SCRIPT> en el head de un
documento HTML en blanco, y abrelo con IE 5.0 o Netscape 6.0 para ver el efecto
completo.
Parte 4: Siguiendo A Tus Nodos
¿Hemos llegado hasta aquí? Bien, aún queda mucho más. El DOM provee de un con-
junto de métodos y propiedades que todos los nodos pueden usar. Muchos de ellos
tienen que ver con manipulación de nodos hijos o padres. Echemos un ojo:
(ACTUALIZADO 11.17.00: La versión final de Netscape 6 contiene un bug que puede

colgar al navegador cuando se usen los métodos removeChild o replaceChild, así que
proceded con precaución. Ojo al parche -nunca mejor dicho- de la próxima actualiza-
ción.)
Métodos para Nodos
appendChild(hijo) Ya lo has visto en acción, de hecho. Permite añadir un nuevo nodo

a otro existente.
replaceChild(nuevo,viejo) Permite eliminar un nodo y reemplazarlo por otro. Nuevo es

el ID del nuevo nodo, y viejo es el ID del nodo que quieres reemplazar.
nuevaFila = document.createElement("TR");
cuerpoTabla = document.getElementById("miTabla");
viejaFila = document.getElementByTagName("TR").item(0);
cuerpoTabla.replaceChild(nuevaFila,viejaFila);
removeChild(hijo) eliminará el nodo hijo del documento. Hijo es el nombre del nodo
que quieres eliminar. El siguiente ejemplo elimina una fila de un elemento Table.
76
hijoUno = document.getElementByTagName("TR").item(0);
tableBody.removeChild(hijoUno)
Piensa que al eliminar un elemento eliminas además sus hijos.
insertBefore(nuevo,referencia) te permite insertar un nuevo nodo justo antes que otro.

Nuevo es el nuevo nodo que quieres insertar. Referencia es el nombre del nodo antes
del cual quieres insertarlo.
nuevaFila = document.createElement("TR");
todasLasFilas = tableBody.getElementByTagName("TR");
ultimaFila = allRows.item(allRows.length-1);
tableBody.insertBefore(nuevaFila,ultimaFila);
hasChildNodes() devuelve un valor Booleano true si el nodo tiene hijos.
Fíjate en que appendChild(), replaceChild(), removeChild() e insertBefore() sólo acep-

tan referencias a elementos, no los ID de esos elementos, como argumentos. Por
ejemplo, si quisieramos eliminar una etiqueta con el ID "miEtiqueta" la siguiente sin-
taxis sería incorrecta:
removeChild("miEtiqueta");
La correcta sería:
removeChild(document.getElementById("miEtiqueta"));
Propiedades de los Nodos
En adición a esos métodos, los nodos tienen las siguientes propiedades:
nodeName devuelve simplemente el nombre de la etiqueta HTML como una cadena

de caracteres. No es lo mismo que el atributo NAME de la etiqueta, si no una cadena
que representa el tipo de etiqueta. Por ejemplo, el nodeName de una celda de una ta-
bla devolverá "TD". Esto es útil para saber si una etiqueta es de un tipo particular:
if (x.nodeName == "IMG") alert("miElemento es una etiqueta IMG");
nodeType devuelve un entero que representa el tipo de nodo de un elemento (NO el

tipo de etiqeta) Las que con toda certeza usarás con más frecuencia serán elementos
(1), atributo (2) y texto (3). Esto es útil para saber si un nodo es de un tipo determina-
do.
if (x.nodeType == 1) {alert("miElemento es un nodo de tipo elemento");}
77
else if (x.nodeType == 2) {alert("miElemento es un nodo de tipo atributo");}
else if (x.nodeType == 3) {alert("miElemento es un nodo de tipo texto");}
nodeValue refleja el valor de un nodo dado. Esto se usa comunmente para obtener y
cambiar el contenido o valor de un nodo. Para recoger el valor del quinto nodo en
nuestro elemento:
a = document.getElementById("miElemento");
b = a.childNodes.item(4).nodeValue;
Para los nodos de atributo, nodeValue devuelve el valor del atributo. Para nodos de
tipo texto, nodeValue devuelve el texto como una cadena.
parentNode es una referencia al nodo padre del nodo en cuestión. Es útil cuando no
estás seguro de donde estás o de cual es el nodo padre de otro nodo:
xParent = x.parentNode;
childNodes es una colección de los nodos hijos de un nodo en particular. Puedes usar
esto para saber el número de hijos que tiene un nodo, o acceder a caulquiera de sus
hijos mediante el índice de esa colección.
Por ejemplo, para conocer el número de hijos que tiene un nodo, podrías hacer esto:
b = a.childNodes.length;
Para acceder al tercer nodo hijo del elemento:

b = a.childNodes.item(2);
firstChild y lastChild apuntan directamente al primer y último nodo de la colección

childNodes. Es, sencilamente, una manera de acceder a ellos.
PrimerNodoDea = a.firstChild;
UltimoNodoDea = a.lastChild;
Parte 5: Sumario
Uaaaaaaj. Hay un montón de material para recordar. Las siguientes tablas recogen los
distintos métodos DOM y propiedades que hemos cubierto.
Métodos del Documento:

Devuelve una referencia al elemento
getElementById(id)
llamado.
78
Devuelve una colección de todos los
getElementsByTagName(nombre) elementos coincidentes en el
documento.
Crea un nuevo elemento del tipo
createElement(nombre)
nombrado.
createTextNode(texto) Crea un nuevo nodo de puro texto.
Métodos de los Elementos:

Devuelve el valor del atributo
getAttribute(id)
pasado como parámetro.
setAttribute(id,valor) Asigna un nuevo valor al atributo.
Elimina el atributo pasado como
removeAttribute(id)
parámetro junto con su valor.
Devuelve una colección de todos los
getElementsByTagName(nombre)
elementos coincidentes en el nodo.
Métodos de los Nodos:

Añade un nuevo nodo hijo al
appendChild(hijo)
nodo.
Elimina un nodo hijo del
removeChild(hijo)
nodo .
Reemplaza un nodo hijo antiguo
replaceChild(nuevoHijo,viejoHijo)
por otro nuevo.
Inserta un nodo antes del
insertBefore(nuevoHijo,referencia)
anterior en la jerarquía.
Devuelve un true booleano si
hasChildNodes()
el nodo tiene nodos hijo.
Propiedades de los Nodos:

nodeName Contiene el nombre del nodo como una cadena de texto.
nodeType Contiene el tipo de nodo como un entero.
nodeValue Contiene el valor de un nodo en formato útil.
parentNode La referencia del nodo padre de este nodo.
Una colección que contiene referencias a los nodos
childNodes
hijos de este nodo en cuestion.
La referencia al primer nodo hijo en la colección
firstChild
childNodes.
La referancia al último nodo hijo en la coleción
lastChild
childNodes.
Conclusión
Como probablemente estés viendo, la funcionalidad del W3C DOM hace posible tener
documentos extremadamente dinámicos. Cuando el resto de los navegadores se ade-
cúen al standard, nuestras vidas como desarrolladores serán mucho más sencillas.
79
Podremos abandonar nuestros scripts de detección de navegadores, y ser libres de
programar codigo auténticamente multi navegador sin dolores de cabeza. Es posible.
Actualmente, depende de ti (¿qué significa esto, en cualquier caso?) seguir aprendien-

do las especificaciones DOM-1 y CSS-1. Hemos cubierto la mayor parte del material
importante aquí, pero hay mucho más de lo que ofrece el DOM. Emplea algo más de
tiempo en el sitio del W3C, familiarízate con las especificaciones y estarás listo para
hacerlas pasar por el aro.
Feliz scripting!
Aprende Más
- Comenta este tutorial.

- Encuentra algo más sobre Netscape 6 en developer.netscape.com
- Aprende acerca del DOM, CSS y soporte standard en http://www.w3c.org/
- Unete a la causa del Web Standards Project http://www.webstandards.org/
80
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<sql:setDataSource driver="org.gjt.mm.mysql.Driver" url="jdbc:mysql://localhost/dietas"
var="dietas" user="root" password="arsa0607"/>
<sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from
dietas"></sql:query>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
select{
position:absolute;
left:120px;
}
.comidas{
overflow: auto;
}
</style>
var ccantidad=0;
var ccalorias=0;
var idalimento=""
var comida="comida";
var cuentalinea=0;
function cambiaComida(lacomida)
{
comida=lacomida;
81
}
function eventoCantidad(event)
{
if(window.event.keyCode==13)
{ //alert(idalimento);
oo=document.getElementById(idalimento);
var cadena="p"+idalimento;
// alert(oo.value+ccalorias+"...."+cadena);
oo2=document.getElementById(cadena);
//alert("id "+oo2.id);
var calculo=oo.value * ccalorias;
totallinea=document.createTextNode(calculo+"");
oo2.appendChild(totallinea);
}
}
function creaPlato(alimento)
{
// alert("alimneto" +alimento.text);
var cc= "tabla"+comida;
tablade=document.getElementById(cc);//'tabladesayuno');
var ccc=comida+"cuerpotabla"
cuerpota=document.getElementById(ccc);//'cuerpotabla');
linea= document.createElement("TR");
nplato= document.createElement("P");
nplato.style.fontSize=10;
nplato.style.color="green";
nombrenuevoplato=document.createTextNode(alimento.text);
cuentalinea++;
idalimento=alimento.text+cuentalinea;
nplato.appendChild(nombrenuevoplato);
columna1= document.createElement("TD");
columna1.appendChild(nplato);
linea.appendChild(columna1)
cplato= document.createElement("P");
cplato.style.fontSize=10;
cplato.style.color="green";
caloriasnuevoplato=document.createTextNode(alimento.value);
ccalorias=alimento.value;
cplato.appendChild(caloriasnuevoplato);
columna2.appendChild(cplato);
linea.appendChild(columna2)
cantidad= document.createElement("INPUT");
cantidad.type="text"
cantidad.id=alimento.text+cuentalinea;
columna3.appendChild(cantidad);
linea.appendChild(columna3);
parrafototal= document.createElement("P");
parrafototal.id="p"+alimento.text+cuentalinea;
82
columna4.appendChild(parrafototal);
linea.appendChild(columna4);
cuerpota.appendChild(linea);
tablade.appendChild(cuerpota);
oo=document.getElementById(alimento.text+cuentalinea);
oo.onkeypress = eventoCantidad;
}
</script>
</head>
<body>
<h1 style="font-family:Calisto MT;font-size:36;display:block;margin-left:50%;"> Peso
Ideal</h1>
<div style="position:absolute;left:10;top:10;width: 340px; height: 450px;background-
color:AntiqueWhite">
<div style="position:relative;top:40px"> Lacteos

<select id="Lacteos" name="Lacteos" style="width: 209px"
onchange="creaPlato(Lacteos.options[Lacteos.selectedIndex] )">

dietas where Familia='Lacteos'"></sql:query>
<c:forEach var="registro" items="${cursor.rows}">
<option value="${registro.Calorias}" selected="selected">$
{registro.Descripcion}</option>
</c:forEach>
</select>
</div>
<div style="position:relative;top:50px"> Carnes
<select id="Carnes" style="width: 209px"
onchange="creaPlato(Carnes.options[Carnes.selectedIndex] )">
dietas where Familia='Carnes'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:60px"> Pescados
<select id="Pescados" style="width: 209px"
onchange="creaPlato(Pescados.options[Pescados.selectedIndex] )">
dietas where Familia='Pescados'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:70px"> Legumbres
<select id="Legumbres" style="width: 209px"
onchange="creaPlato(Legumbres.options[Legumbres.selectedIndex] )">
83
dietas where Familia='Legumbres'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:80px"> Hortalizas
<select id="Hortalizas" style="width: 209px"
onchange="creaPlato(Hortalizas.options[Hortalizas.selectedIndex] )">
dietas where Familia='Hortalizas'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:90px"> Frutas
<select id="Frutas" style="width: 209px"
onchange="creaPlato(Frutas.options[Frutas.selectedIndex] )" >
dietas where Familia='Frutas'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:100px"> Verduras
<select id="Verduras" style="width: 209px"
onchange="creaPlato(Verduras.options[Verduras.selectedIndex] )">
dietas where Familia='Verduras'"></sql:query>
</c:forEach>
</select>
</div>
<div style="position:relative;top:110px"> Dulces
<select id="Dulces" style="width: 209px"
onchange="creaPlato(Dulces.options[Dulces.selectedIndex] )">
dietas where Familia='Dulces'"></sql:query>
</c:forEach>
</select>
</div>
</div>
<div style="background-color:lime ; left: 355px; position: absolute; top: 84px;">
<div onclick="cambiaComida('desayuno');" id="desayuno" class="comidas"

style="background-color:#ccffcc; width: 600px; height: 150px; ">
<p style="vertical-align: middle; position: static; background-color: #336600;
84
text-align: center; color: white; border-bottom: darkorange thick inset;"> Desayuno</p>
<table id="tabladesayuno" width="90%" border=4 align="center" style="font-
size: 16px; font-family: 'Agency FB';">
<tbody id="desayunocuerpotabla">
<tr>
<td width="40%" style="height: 21px" >Alimneto
</td>
<td style="height: 21px" >Calorias 100g.
</td>
<td style="height: 21px" >Cantidades de 100g.
</td>
<td style="height: 21px" >Total Calorias
</td>
</tr>
</tbody>
</table>
</div>
<div onclick="cambiaComida('comida');" class="comidas" style="background-
color:#ffffcc; width: 600px; height: 150px; ">
text-align: center; color: white; border-bottom: #ff9900 thick inset;">Comida</p>
<table id="tablacomida" width="90%" border=4 align="center" style="font-
size: 16px; font-family: 'Agency FB';">
<tbody id="comidacuerpotabla">
<tr>
</td>
</td>
</td>
</td>
</tr>
</tbody>
</table>
</div>
<div onclick="cambiaComida('cena');" class="comidas" style="background-
color:#ccffff; width: 600px; height: 150px; border-bottom: #ff9900 thick outset;">
text-align: center; color: white; border-bottom: #ff9900 thick inset;">Cena</p>
<table id="tablacena" width="90%" border=4 align="center" style="font-size:
16px; font-family: 'Agency FB';">
<tbody id="cenacuerpotabla">
<tr>
</td>
</td>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
85
</body>
</html>

86
A
A J X
Con el siguiente ejercicio completamos todas las técnicas que se utilizan en

la tecnología AJAX, también conocida como la nueva Web 2.0.
Estas técnicas XML y el objeto XMLHttpRequest nos va a permitir obtener
los datos que queramos visualizar en la página web dese un fichero XML que o bien se
encuentre en el cliente , descargando el mismo desde la web o solicitando la
información en formato XML desde un servlet de java. El objeto
XMLHttpRequest nos permitirá solicitar la información XML justo en el momento en
el que lo deseemos y así modificar la página (utilizando DOM) en el justo momento. De
forma que no tendremos que emplear formularios que llamen a servlet o jsp que
generen toda la página de nuevo si no que nos traeremos del servidor ( o desde un
fichero xml ) la información que necesitemos en ese momento.
Ejemplo:
Haremos el ejercicio de tres formas:
87
La primera desde una página html utilizamos un ojeto XMLHttpRequest para
solicitar los datos de un servlet que devuelve la información generando código XML.
Una vez recibido el código, con los datos xml, utilizamos DOM para accder al mismo y
visualizarlo dentro de un TextArea.
La segunda desde una página html utilizamos un ojeto XMLHttpRequest para

solicitar los datos de un lee información de una base de datos genera un fichero XML y
lee del mismo la información. La información que lee se la devuelve al cliente. Una vez
recibido el código, con los datos xml, utilizamos DOM para accder al mismo y
visualizarlo dentro de un TextArea.
La tercera utiliza la posibilidad que tiene javascript para cargar en memoria el

contenido de un fichero xml por medio de la instrucción : <xml id="writersXML"
src="tiendaropa.xml"></xml>.
A continuación llamamos a una función por medio de la cual utilizando el
DOM leemos el contenido del objeto que hemos creado con la información xml :
var imagenes= new Array();
var precios= new Array();
var tallas= new Array();
var colores= new Array();
function cargaXML()
{
var myXml;
myXml=document.all("writersXML").XMLDocument;
escribirImagen=myXml.getElementsByTagName("imagen");
escribirPrecio=myXml.getElementsByTagName("precio");
escribirTallas=myXml.getElementsByTagName("tallas");
escribirColores=myXml.getElementsByTagName("colores")
….
….
}
Si no implementamos esta solución estudia el fichero ofertas.htm. de la aplicación
carrito.
88
La primera
FICHERO leeXML.HTML
Desde este fichero se llama a los distintos servlet que realizan la tarea de
leer el codigo xml. Tabién se encarga de visualizar los datos.

<html>
<head>
<title>Cargar y leer Xml desde Java Script</title>
<script type="text/javascript">
function cargar()
{
idField=document.getElementById('idField');
//var url = "http://localhost:8080/alquiler/trabajarconXstream";
var url = "http://localhost:8080/alquiler/LeerCliente";
//var url = "http://localhost:8080/alquiler/devuelveXml.jsp";
if (window.XMLHttpRequest) {
alert("window.XMLHttpRequest");
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
alert("Microsoft.XMLHTTP");
}
alert("url..............: "+url)
req.open("POST", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
//alert("callback")
alert("req.readyState"+req.readyState);
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
parseMessage();
}
}
}
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
alert("Mensaje recibido "+message);
alert("Mensaje recibido "+ req.responseXML)
var todo="";
for(j=0;j<req.responseXML.getElementsByTagName("libro").length;j++)
{
var message = req.responseXML.getElementsByTagName("libro")[j];
for(i=0;i<message.childNodes.length;i++)
89
{
alert("Elemento :"+message.childNodes[i].tagName
+"..."+message.childNodes[i].firstChild.nodeValue)
todo=todo+message.childNodes[i].tagName
+"..."+message.childNodes[i].firstChild.nodeValue+"\n";
}
}
alert(todo);
// setMessage(message.childNodes[0].nodeValue);
setMessage(todo);
}
function setMessage(message) {
alert(" setMessage" +message)
ccaja=document.getElementById('caja');
ccaja.value=message;
/* var p=message.indexOf("-");
if(p==-1){
var cajaNombre = document.getElementById("Nombre");

cajaNombre.value= message ;
}
else
{
var nombreApellidos=message.substr(0,p);
var pago=message.substr(p+1,message.length);

cajaNombre.value= nombreApellidos ;
var cajaPago = document.getElementById("cpago");
cajaPago.value= pago ;
}*/
}
/* var request=null;
//alert("Carga xml");
if(window.XMLHttpRequest){
alert("Soporto XMLHttpRequest");
}
else if(window.ActiveXObject)
{
alert("Soporto ActiveXObject");
request=new ActiveXObject("Microsoft.XMLHTTP");
if(! request){
alert("NO microsoft.XMLHTTP");
90
}
else
{
request=new ActiveXObject("Msxml2.XMLHTTP");
alert("SI microsoft.XMLHTTP");}
}
var url = "LeerCliente";
request.open("POST", url, true);
request.onreadystatechange = callback;
request.send(null);
alert("callback")
//alert("req.readyState"+req.readyState);
if (request.readyState == 4) {
if (request.status == 200) {
parseMessage();
}
}
}
// alert("parseMessage")
var message = request.responseXML.getElementsByTagName("message")[0];
alert("Mensage :"+ message +" recibido");
//setMessage(message.childNodes[0].nodeValue);
}
}*/
</script>
</head>
<body>
<input name="CargaXML" value="Carga XML" type="button" onclick="cargar()"/>
<form action="LeerCliente" method="post">
<input type="text" id="idField"/>
<textarea cols="50" rows="10" id="caja" ></textarea>
<input type="submit" value="envia"/>
</form>
</body>
</html>
<script type="text/javascript">
/*
var url = "LeerCliente?nif=" + escape(idField.value);
//alert("window.XMLHttpRequest");
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
// alert("Microsoft.XMLHTTP");
}
//alert("url..............: "+url)
req.open("GET", url, true);
91
req.send(null);
}
//alert("callback")
//alert("req.readyState"+req.readyState);
parseMessage();
}
}
}
// alert("parseMessage")
setMessage(message.childNodes[0].nodeValue);
}
function setMessage(message) {
// alert(" setMessage" +message)
var p=message.indexOf("-");
if(p==-1){

cajaNombre.value= message ;
}
else
{
var nombreApellidos=message.substr(0,p);
var pago=message.substr(p+1,message.length);

cajaNombre.value= nombreApellidos ;
var cajaPago = document.getElementById("cpago");
cajaPago.value= pago ;
}
}
*/
</script>
FICHERO LeerCliente.java
Servlet que genera código XML que envía a la página leeXml.html
package alquiler;
import javax.servlet.*;
import javax.servlet.http.*;
92
import javax.servlet.http.HttpSession;
import java.io.*;
import java.util.*;
import java.sql.*;
public class LeerCliente extends HttpServlet {

static final private String CONTENT_TYPE = "text/html";
public void init(ServletConfig config) throws ServletException {
}
//Procesar una petición HTTP Get
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
System.out.println("Estroy eb el Servlet.." + request.getMethod() +".."+request.getPathInfo());

String dato="Loly";
dato="<?xml version='1.0' encoding='UTF-8' ?>";
dato=dato+"<?xml-stylesheet type='text/xsl' href='libros.xsl'?>";

// dato=dato+"<!DOCTYPE biblioteca SYSTEM 'libros.dtd'>";
dato=dato+"";
dato=dato+"<biblioteca>";
dato=dato+"<libro>";
dato=dato+"<titulo> Introducion a XML XSL</titulo>";
dato=dato+"<editorial>Anaya</editorial>";
dato=dato+"</libro>";
dato=dato+"<titulo>Programacion en Widnows 2000</titulo>";
dato=dato+"<editorial>Paraninfo</editorial>";
dato=dato+"</biblioteca>";
System.out.println("DATO: "+dato);
dato="<message>"+dato+"</message>";
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(dato);
93
}
//Procesar una petición HTTP Post
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
doGet(request,response);
}
//Limpiar recursos
public void destroy() {
}
}
Para que fucnione en tomcar necesitamos implementar el siguiente codigo

en el fichero web.wml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-
app_2_4.xsd" version="2.4">
<display-name>alquiler</display-name>
<servlet>
<servlet-name>LeerCliente</servlet-name>
<servlet-class>alquiler.LeerCliente</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LeerCliente</servlet-name>
<url-pattern>/LeerCliente</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>lc</servlet-name>
<servlet-class>alquiler.lc</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>lc</servlet-name>
<url-pattern>/lc</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>trabajarconXstream</servlet-name>
<servlet-class>alquiler.trabajarconXstream</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>trabajarconXstream</servlet-name>
<url-pattern>/trabajarconXstream</url-pattern>
</servlet-mapping>
</web-app>
94
La segunda
Aquí solamente necesitamos el servlet trabajarconXstream.java
que leera la información desde una base de datos , la copiará en un fichero xml , lo
leera y devolver al información a leeXml.html para que la visualice.
Fichero trabajarconXstream.java
package alquiler;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.util.*;
import java.sql.*;
import com.thoughtworks.xstream.XStream;
import org.gjt.mm.mysql.*;
import javax.sql.rowset.WebRowSet;
import java.awt.HeadlessException;
import com.sun.rowset.WebRowSetImpl;
public class trabajarconXstream extends HttpServlet {
static final private String CONTENT_TYPE = "text/html";
WebRowSet wr ;
private java.sql.Connection cn;
private java.sql.ResultSetMetaData estructura;
boolean nuevo_registro;
private String isql="";
// Objetos para trabajar con WerRowSet
String UsuarioBaseDeDatos="root";
String PasswordBaseDeDatos="alpiap";
String DriverBaseDeDatos = "org.gjt.mm.mysql.Driver";
String OrdenBaseDeDatos = "select * from clientes";
FileWriter fGrabacion;
FileReader fLectura;
int [] keyCols ={1};
String urlBd = "jdbc:mysql://localhost/datos";
WebRowSet receiver;
public void init(ServletConfig config) throws ServletException {
try {
95
Class.forName(DriverBaseDeDatos);
Connection con = DriverManager.getConnection(urlBd,
UsuarioBaseDeDatos, PasswordBaseDeDatos);
// Create a WebRowSet and set properties.
WebRowSet sender = new WebRowSetImpl();

sender.setUrl(urlBd);
sender.setUsername(UsuarioBaseDeDatos);
sender.setPassword(PasswordBaseDeDatos);
sender.setCommand(OrdenBaseDeDatos);
sender.setKeyColumns(keyCols);
// Now populate the WebRowSet
sender.execute();
fGrabacion = new FileWriter("g:/glXML/clientes.xml");
sender.writeXml(fGrabacion);
fGrabacion.flush();
fGrabacion.close();
sender.close();
javax.swing.JOptionPane.showMessageDialog(null,
"Fin Grabación XML");
}
catch (HeadlessException ex) {
}
catch (IOException ex) {
}
catch (SQLException ex) {
}
catch (ClassNotFoundException ex) {
}
try {
receiver = new WebRowSetImpl();

fLectura = new FileReader("f:/glXML/clientes.xml");
receiver.readXml(fLectura);
// receiver.acceptChanges();
}
catch (HeadlessException ex) {ex.printStackTrace();
}
catch (FileNotFoundException ex) {javax.swing.JOptionPane.showMessageDialog(null, "Fichero XML
Sin Datos -- Ejecute la Opción del Menu : Crear XML");
}
catch (SQLException ex) {ex.printStackTrace();
}
96
}
//Procesar una petición HTTP Get
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException
{
System.out.println("Estroy eb el Servlet..Xstream" + request.getMethod()

+".."+request.getServletPath());
String dato="";
dato=dato+"<biblioteca>";
try {
receiver.beforeFirst();
while (receiver.next()) {
dato=dato+"<titulo>"+receiver.getString("Nombre")+"</titulo>";
dato=dato+"<editorial>"+receiver.getString("Direccion")+"</editorial>";
}
dato=dato+"</biblioteca>";
catch (SQLException ex) {

}
System.out.println("DATO: "+dato);
dato="<message>"+dato+"</message>";
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(dato);
}
//Procesar una petición HTTP Post
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
doGet(request,response);
}
//Limpiar recursos
public void destroy() {
}
}
97
Propiedades y eventos del objeto
Onreadystatechange Es una función de rellamada. La función de esta propiedad se

llama siempre que cambia readyState
readyState Es un número que puede tomar los siguiente valores:
0 Significa sin inicializar, es decir que aun no se ha ejecutado el
método open()
1 Significa cargando, que aún no se ha llamado a send().
2 Significa cargado, es decir ya se ha llamado al método send().
3 Significa interactuando y responseText contiene datos parciales.
4 Significacompletado
responseText. Es una cadena. Representa la respuesta recibida desde el servidor
web.
responseXML. Es Objeto document de DOM. Son los datos enviados desde le
servidor en formato XML.
status Código de estado de la respuesta . 200 significa respuesta recibida
correctamente y 404 respuesta de no encontrado el servidor o la página web
solicitada.
statusText Es una cadena con el mensaje asociado al código de status de la
respuesta HTTP.
abort() Cancela la petición http.

open(metodo POSt o GET,cadena url,true/false) Prepara la petición que se va a enviar
al servidor mediante el protocolo de comunicación http. True/false especifica si es una
conexión asincrona o no.
send(cadena) Envía la petición http.send(null);
Ejemplo:
var url = http://localhost:8080/alquiler/LeerCliente
alert("window.XMLHttpRequest");
req = new XMLHttpRequest();}
else if (window.ActiveXObject)
{ req = new ActiveXObject("Microsoft.XMLHTTP");
alert("Microsoft.XMLHTTP");}
req.open("POST", url, true);
req.send(null);
}
alert("req.readyState"+req.readyState);
parseMessage();} } }
alert("Mensaje recibido "+message);}
98
JSON
La alternativa a XML busca más información
Fichero de datos: datos.jso
<datos>
[({"NOMBRE":"Gabriel Lucia Velazquez","EDAD":6}),
({"NOMBRE":"Angel Lucia Velazquez","EDAD":8}),
({"NOMBRE":"Luis Lucia Velazquez","EDAD":8})];
</datos>
Fichero html con el código JavaScript que procesa los datos leidos del
fichero datos.jso:json.htm
<%@ Language=JavaScript %>
<html>
<head>
<xml id="articulosXML" src="datos.jso"></xml>
<script language="javascript" type="text/javascript">

myXml=document.all("articulosXML").XMLDocument;
function carga()
{
var part=myXml.getElementsByTagName("datos");
alert(part.length);
dato=part.item(0).firstChild.nodeValue;
alert(dato);
var objeto = eval(dato);
var nr = objeto.length ;
for(i=0;i<nr;i++)
{
alert("Nombre : " +objeto[i].NOMBRE + " Edad : "+objeto[i].EDAD);
}
}
</script>
</head>
<body onload="carga()">
</body>
</html>
99

Javascript Apuntes

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript Apuntes

Încărcat de

Drepturi de autor:

Formate disponibile

A la hora de buscar información sobre desarrollo web nos encontramos multitud

de documentos que hablan de la nueva web (web 2.0) y de como ha contribuido a su

Ya hemos estudiado alguna de estás técnicas(XHTML y CSS) pero de todas las

var miArray = new Array()

Esto crea un array en la página que esta ejecutándose. El array se crea

var miArray = new Array(10)

Los datos se introducen indicando entre corchetes el índice de la

var miArray = new Array(3)

Tipos de datos en los arrays

Longitud de los arrays

document.write("Longitud del array: " + miArray.length)

var miArray = new Array(2)

También podemos crear un array a la vez que le indicamos sus datos.

var diasSemana = new

y también un array bidimiensional.

var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new

Negacion - NO Logico ! NOT bit a bit ~ Asignacion = delete delete

Incremento ++ Menor que < Desplazamiento << Operadores typeof typeof

Decremento -- Mayor que > Desplazamiento >> void Void

Multiplicacion * Menor que o <= Desplazamiento >>>

Division / Mayor que o >= AND bit a bit &

Modulo % Igualdad == XOR bit a bit ^

Suma + Distinto != OR bit a bit |

Resta - Y Logico AND &&

for (valor inicialt; condición; incremento ;)

Se pueden definir funciones con un número variable de argumentos. Para poder

En JavaScript, la partícula this se refiere al objeto en el que se utiliza. Una vez

En el ejemplo anterior, hay que definir la clase empleado de esta forma:

Dentro de la definición de la clase o tipo del objeto, pueden incluirse funciones

function empleado(nombre, edad, puesto) {

document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Método Descripción Expresión de Resultado

abs Valor absoluto Math.abs(-2) 2

sin, Funciones Math.cos(Math.PI) -1

asin, Funciones Math.asin(1) 1.57

exp, log Exponenciación y Math.log(Math.E) 1

ceil Devuelve el entero más Math.ceil(-2.7) -2

round Devuelve el entero más Math.round(-2.7) -3

min, Devuelve el menor (o Math.min(2,4) 2

pow Exponenciación, siendo Math.pow(2,4) 16

sqrt Raíz cuadrada Math.sqrt(4) 2

NaN Valor que significa "no es un número"

MAX_VALUE y MIN_VALUE Máximo y mínimo número representable

NEGATIVE_INFINITIVE y Infinito negativo y positivo, se utilizan

Evento Descripción Elementos que lo admiten

onLoad Terminar de cargarse una página <BODY...> <FRAMESET...>

onUnLoad Salir de una página (descargarla) <BODY...><FRAMESET...>

onMouseOver Pasar el ratón por encima <A HREF..> <AREA...>

onMouseOut Que el ratón deje de estar encima <A HREF..> <AREA...>

onSubmit Enviar un formulario <FORM...>

onClick Pulsar un elemento <INPUT TYPE="button,

onBlur Perder el cursor <INPUT TYPE="text"...>

onChange Cambiar de contenido <INPUT TYPE="text"...>

onFocus Conseguir el cursor <INPUT TYPE="text"...>

onSelect Seleccionar texto <INPUT TYPE="text"...>

<INPUT TYPE=SUBMIT VALUE="Prueba el evento onsubmit " ><BR>

<INPUT TYPE=SUBMIT VALUE="Prueba el evento onsubmit " ><BR>

•Definición mediante código

•Modelo de objetos del documento

navigator Permite manipular información referente al

Los objetos del navegador están organizados jerárquicamente

Programa que visualiza las propiedades de todos los objetos del

alert(mensaje) Muestra el mensaje 'mensaje' en un cuadro de diálogo