Professional Documents
Culture Documents
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)
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>
<SCRIPT LANGUAGE="JavaScript">
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:
miArray[0] = 290
miArray[1] = 97
miArray[2] = 127
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>")
}
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
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>
Operadores
8
Aritméticos Logicos De Bit Asignación Varios
Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo Descripcion Simbolo
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
{ <Bloque de Instrucciones>;
}
switch(variable)
{
case “valor1”:
acciones ;
break;
case “valor2”:
acciones ;
break;
default: sentencias;
}
•Bucles
9
[continue]
}
while (condicion)
{ <Bloque de Instrucciones>;
[break]
[continue]
}
do
{ <Bloque de Instrucciones>;
[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.
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
}
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)
<HTML><HEAD><TITLE>Empleados</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!—
//DEFINE EL METODO muostrarPerfil
function mostrarPerfil() {
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">
<!--
nuevoEmpleado = new empleado()
nuevoEmpleado.mostrarPerfil()
//-->
</SCRIPT>
</BODY>
</HTML>
</body>
</html>
Otro Ejemplo:
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:
16
floor Devuelve el entero más Math.floor(-2.7) -3
grande menor o igual al
argumento
• 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
•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
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 LANGUAGE="JavaScript">
<!-- Los comentarios esconden el código a navegadores sin JavaScript
function Alarma() {
alert("No me pises, que llevo chanclas");
return true;
}
// -->
</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>
<SCRIPT LANGUAGE="JavaScript">
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>
<HTML>
<HEAD>
<TITLE> Prueba de eventos </TITLE>
<SCRIPT LANGUAGE="JavaScript">
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>
21
...
</BODY>
</HTML>
Se puede reescribir como:
load2.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Los comentarios esconden el código a navegadores sin JavaScript
function Saludo() {
alert("Hola");
}
window.onload = Saludo;
// -->
</SCRIPT>
</HEAD><BODY></BODY></HTML>
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.
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
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.
Ejemplo
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TODO supply a title</title>
<script language="JavaScript">
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>
•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
28
Se trata de un array con los enlaces internos existentes en el
anchors
documento
METODOS
Ejemplo
29
<html>
<head>
<title>Titulo</title>
<script language="JavaScript">
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/>
<img name="im2" align="middle" alt="Imagen" border="2" src="F:\Manual
Curso\pruebas\conejo.jpg"/><br/>
<img name="im3" align="middle" alt="Imagen" border="2" src="F:\Manual
Curso\pruebas\caracol.jpg"/><br/>
<img name="im4" align="middle" alt="Imagen" border="2" src="F:\Manual
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
<SCRIPT LANGUAGE="JavaScript">
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>
<SCRIPT LANGUAGE="JavaScript">
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.
31
Uno.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
Tres.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<input name="" type="button" onClick="history.back();"value="Página Anterior">
<input name="" type="button" onClick="history.forward();"value="Página Siguiente">
32
<input name="" type="button" onClick="history.go(1);"value="ir a 1">
<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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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;
<script language="JavaScript">
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>
<style type="text/css">
h1{
color:red;
font-family:verdana;
font-size:24;
}
p{
color:black;
font-family:Arial;
font-size:16;
<script language="JavaScript">
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
• 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:
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
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:
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
• 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">
<!--
img1 = new Image();
img1.src = "G:/100OLYMP/P1010002.JPG";
img2 = new Image();
img2.src = "G:/100OLYMP/P1010001.JPG";
function cambia(nombre,imagen)
{
nombre.src = imagen.src
}
function dobleancho()
{
imagen1.width=imagen1.width*2;
}
function doblealto()
{
imagen1.height=imagen1.height*2;
}
function mitadancho()
{
imagen1.width=imagen1.width/2;
}
function mitadalto()
{
imagen1.height=imagen1.height/2;
}
//-->
</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:
<script language="javascript">
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);
posigual=valora.indexOf("=")+1;
ada=valora.substr(posigual,valora.length -13);
//alert(valora+".."+ada);
td=ada.split(",");
//alert(dni+"---"+td[0]);
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);
posigual=valora.indexOf("=")+1;
ada=valora.substr(posigual,valora.length -13);
//alert(valora+".."+ada);
td=ada.split(",");
//alert(dni+"---"+td[0]);
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;
//alert(valora+".."+ada);
td=ada.split(",");
//alert(dni+"---"+td[0]);
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
</head>
44
<body onload="leer()">
DNI .................:<input name="cdni" type="text" maxlength="8">
<br>
Temporizador
<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 language="JavaScript">
<!--
// Codigo JavaScritp
setInterval("mueve()",1000);
function mueve()
{
var fecha = new Date();
var hora=fecha.getHours();
var minuto=fecha.getMinutes();
var segundo=fecha.getSeconds();
window.status=fecha.getSeconds();
if(form.activa.checked==true)
{
if (form.hora.value == form.alarma.value)
{
document.campana.style.visibility="visible";
// alert("Levantate");
}
// else{form.texto.value=form.hora.value+"--"+form.alarma.value}
}
/* segundo=segundo +1;
if (segundo == 60)
{
minuto=minuto+1;
segundo=1;
47
}
if (minuto == 60)
{
hora=hora+1;
minuto=1;
}
if (hora == 24)
{
hora=hora+1;
} */
//alert(hora+":"+minuto+":"+segundo);
form.hora.value=hora+":"+minuto+":"+segundo;
var shora = new String(hora);
var hora1 = shora.charAt(0);
if(shora.length==2){var hora2 = shora.charAt(1);}else{hora2=hora1;hora1="0";}
var sminuto = new String(minuto);
var minuto1 = sminuto.charAt(0);
if(sminuto.length==2){var minuto2 = sminuto.charAt(1);}else{minuto2=minuto1;minuto1="0";}
var ssegundo = new String(segundo);
var segundo1 = ssegundo.charAt(0);
if(ssegundo.length==2){var segundo2 = ssegundo.charAt(1);}else{segundo2=segundo1;segundo1="0";}
document.h1.src=hora1+".gif";
document.h2.src=hora2+".gif";
document.m1.src=minuto1+".gif";
document.m2.src=minuto2+".gif";
document.s1.src=segundo1+".gif";
document.s2.src=segundo2+".gif";
}
function pararalarma()
{
document.campana.style.visibility="hidden";
form.alarma.select();
form.activa.checked=false;
}
-->
</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>
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);
cod="menuop"+2+".style.display='none'";
eval(cod);
cod="menuop"+3+".style.display='none'";
eval(cod);
cod="menuop"+4+".style.display='none'";
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}
</head>
<body onClick=sin_submenu()>
51
<td id=op1 onmousemove=cambia(op1,1,10) onmouseout=cambiacm(op1)
onclick=visualiza_submenu(1,10) >
Opciones
</td>
<td id=op2 onmousemove=cambia(op2,2,205) onmouseout=cambiacm(op2)
onclick=visualiza_submenu(2,205)>
Biblioteca
</td>
<td id=op3 onmousemove=cambia(op3,3,405) onmouseout=cambiacm(op3)
onclick=visualiza_submenu(3,405)>
Fichero
</td>
<td id=op4 onmousemove=cambia(op4,4,580) onmouseout=cambiacm(op4)
onclick=visualiza_submenu(4,580)>
Servicios
</td>
</table>
</div>
52
<pre style="display:block;">
</pre>
</body>
</html>
<html>
<head>
<title>Java Script></title>
<script language="JavaScript">
<!--
// Codigo JavaScritp
var com = new Array("Castilla Leon","Cataluña","Extremadura");
var prov0 = new
53
Array("Burgos","Soria","Segovia","Avila","Valladolid","Palencia","Leon","Zamora","Salamanca");
var prov1 = new Array("Lerida","Tarragona");
var prov2 = new Array("Caceres","Bdajoz");
var prov3 = new Array("Ciudad Real","Guadalajara");
function cargacomunidad()
{
form1.comunidad.options[0].value = com[0];
form1.comunidad.options[0].text = com[0];
form1.comunidad.options[1].value = com[1];
form1.comunidad.options[1].text = com[1];
form1.comunidad.options[2].value = com[2];
form1.comunidad.options[2].text = com[2];
form1.comunidad.options[form1.comunidad.length]=new Option("Castilla la Mancha","Castilla la
Mancha");
}
function cargaprovincia()
{
var indice =form1.comunidad.selectedIndex;
/*
dato = eval("prov"+indice+"[0]")
form1.provincia.options[0].text = dato;
dato = eval("prov"+indice+"[1]")
form1.provincia.options[1].text = dato;
*/
dato = eval("prov"+indice)
lista=new String(dato).split(",");
// Borra las provincias de la lista de otras comunidades
for(var j=0;j<form1.provincia.length;j++)
{
form1.provincia.options[j].text=""
}
// Añade la provincias de la comunidad a la lista desplegable
for(var j=0;j<lista.length;j++)
{
form1.provincia.options[j]=new Option(lista[j]);
}
}
function pulsadaDNI()
{
var codigoTecla = event.keyCode;
var cadenaTecla = (String.fromCharCode(event.keyCode));
//alert (codigoTecla +"--" +cadenaTecla);
if(codigoTecla < 48 || codigoTecla > 57 ){return false;}
}
function pulsadaLETRA()
{
var codigoTecla = event.keyCode;
var cadenaTecla = (String.fromCharCode(event.keyCode));
54
//alert (codigoTecla +"--" +cadenaTecla);
if(codigoTecla < 65 || codigoTecla > 122 ) {return false;}
}
function obtieneletradni()
{
var ndni = parseInt(form1.dni.value);
var letras ='TRWAGMYFPDXBNJZSQVHLCKE';
var numero = ndni%23;
form1.letra.value=letras.substring(numero,numero+1);
}
function verificar()
{
var vacio=0;
// verificar campos vacios
if(form1.nombre.value == "")
{
form1.nombre.style.background="red";
vacio=1;}
if(form1.dni.value == "")
{
form1.dni.style.background="red";
vacio=1;}
if(form1.apellidos.value == "")
{
form1.apellidos.style.background="red";
vacio=1;}
if(form1.email.value == "")
{
form1.email.style.background="red";
vacio=1;}
if(vacio==1){return false;}
// /////////////////////////////////////////////
}
function borrar()
{
form1.nombre.style.background="white";
form1.dni.style.background="white";
form1.apellidos.style.background="white";
form1.email.style.background="white";
}
function caracteres()
{
if(form1.otros.value.length>100)
{return false;}
}
function emailcorrecto()
55
{
eemail=form1.email.value;
var n1=0;
var n2=0;
var n1 = eemail.indexOf(".");
var n2 = eemail.indexOf("@");
}
-->
</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>
<option value="_">.</option>
</select> </td>
<td>Provincia <select name="provincia">
<!--
<option value="_">.</option>
<option value="_">.</option>
-->
</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>
<script language="JavaScript">
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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.
Mas teoría
Ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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:
oo=document.documentElement;
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.
parrafo= document.createElement("P");
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= document.createElement("P");
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 )
parra=ccaja.firstChild;
alert(parra.parentNode.tagName )
nextSibling
Acceso al siguiente hermano del nodo.
parra=ccaja.firstChild;
alert(parra.parentNode.tagName )
alert(parra.nextSibling.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= document.createElement("P");
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
68
Scripts Para Los Navegadores 6.0
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.
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.
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.
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>
X es ahora una referencia al elemento <DIV>. A partir de esto, podemos usar x para
manipular la etiqueta <DIV>, como veremos en breve.
getElementsByTagName()
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) ;
71
Parte 2: Magia Elemental
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")
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()
getElementsByTagName()
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>
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.
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.
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.
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.
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++){
cell = document.createElement("TD");
textVal = "Cell" + i + "_" + j;
textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
row.appendChild(cell);
}
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 = document.createElement("TD");
cell.setAttribute("WIDTH","50");
cell.setAttribute("HEIGHT","50");
textVal = "Cell" + i + "_" + j;
textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
row.appendChild(cell);
}
Vamos a acabar. Aquí está el código completo para nuestra funión generadora de ta-
blas.
function construyeTabla(){
docBody = document.getElementsByTagName("body").item(0);
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 = document.createElement("TD");
cell.setAttribute("WIDTH","50");
75
cell.setAttribute("HEIGHT","50");
textVal = "Cell" + i + "_" + j;
textNode = document.createTextNode(textVal);
cell.appendChild(textNode);
row.appendChild(cell);
}
myTableBody.appendChild(row);
}
myTable.appendChild(myTableBody);
docBody.appendChild(myTable);
}
window.onload = construyeTabla;
¿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:
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
cuerpoTabla = document.getElementById("miTabla");
hijoUno = document.getElementByTagName("TR").item(0);
tableBody.removeChild(hijoUno)
La correcta sería:
removeChild(document.getElementById("miEtiqueta"));
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:
x = document.getElementById("miElemento");
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:
a = document.getElementById("miElemento");
b = a.childNodes.length;
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.
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.
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.
Feliz scripting!
Aprende Más
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>
<title>Untitled Page</title>
<style type="text/css">
select{
position:absolute;
left:120px;
}
.comidas{
overflow: auto;
}
</style>
<script language="javascript">
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= document.createElement("TD");
columna2.appendChild(cplato);
linea.appendChild(columna2)
cantidad= document.createElement("INPUT");
cantidad.type="text"
cantidad.id=alimento.text+cuentalinea;
columna3= document.createElement("TD");
columna3.appendChild(cantidad);
linea.appendChild(columna3);
columna4= document.createElement("TD");
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">
83
dietas where Familia='Legumbres'"></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:80px"> Hortalizas
<select id="Hortalizas" style="width: 209px"
onchange="creaPlato(Hortalizas.options[Hortalizas.selectedIndex] )">
<sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from
dietas where Familia='Hortalizas'"></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:90px"> Frutas
<select id="Frutas" style="width: 209px"
onchange="creaPlato(Frutas.options[Frutas.selectedIndex] )" >
<sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from
dietas where Familia='Frutas'"></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:100px"> Verduras
<select id="Verduras" style="width: 209px"
onchange="creaPlato(Verduras.options[Verduras.selectedIndex] )">
<sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from
dietas where Familia='Verduras'"></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:110px"> Dulces
<select id="Dulces" style="width: 209px"
onchange="creaPlato(Dulces.options[Dulces.selectedIndex] )">
<sql:query var="cursor" dataSource="${pageScope.dietas}" sql="select * from
dietas where Familia='Dulces'"></sql:query>
<c:forEach var="registro" items="${cursor.rows}">
<option value="${registro.Calorias}" selected="selected">$
{registro.Descripcion}</option>
</c:forEach>
</select>
</div>
</div>
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; ">
<p style="vertical-align: middle; position: static; background-color: #336600;
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 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('cena');" class="comidas" style="background-
color:#ccffff; width: 600px; height: 150px; border-bottom: #ff9900 thick outset;">
<p style="vertical-align: middle; position: static; background-color: #336600;
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 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>
85
</body>
</html>
<!-- /*
86
A
A J X
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.
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.
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 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);
function callback() {
alert("callback")
//alert("req.readyState"+req.readyState);
if (request.readyState == 4) {
if (request.status == 200) {
// update the HTML DOM based on whether or not message is valid
parseMessage();
}
}
}
function 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);
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("GET", url, true);
91
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() {
// alert("parseMessage")
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
function setMessage(message) {
// alert(" setMessage" +message)
var p=message.indexOf("-");
if(p==-1){
*/
</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.*;
}
//Procesar una petición HTTP Get
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
dato=dato+"<biblioteca>";
dato=dato+"<libro>";
dato=dato+"<titulo> Introducion a XML XSL</titulo>";
dato=dato+"<editorial>Anaya</editorial>";
dato=dato+"</libro>";
dato=dato+"<libro>";
dato=dato+"<titulo>Programacion en Widnows 2000</titulo>";
dato=dato+"<editorial>Paraninfo</editorial>";
dato=dato+"</libro>";
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
ServletException, IOException {
doGet(request,response);
}
//Limpiar recursos
public void destroy() {
}
}
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;
WebRowSet receiver;
public void init(ServletConfig config) throws ServletException {
try {
95
Class.forName(DriverBaseDeDatos);
Connection con = DriverManager.getConnection(urlBd,
UsuarioBaseDeDatos, PasswordBaseDeDatos);
sender.execute();
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 {
}
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
{
dato=dato+"<biblioteca>";
try {
receiver.beforeFirst();
while (receiver.next()) {
dato=dato+"<libro>";
dato=dato+"<titulo>"+receiver.getString("Nombre")+"</titulo>";
dato=dato+"<editorial>"+receiver.getString("Direccion")+"</editorial>";
dato=dato+"</libro>";
}
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);
}
//Procesar una petición HTTP Post
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doGet(request,response);
}
//Limpiar recursos
public void destroy() {
}
}
97
Propiedades y eventos del objeto
Ejemplo:
var url = http://localhost:8080/alquiler/LeerCliente
if (window.XMLHttpRequest) {
alert("window.XMLHttpRequest");
req = new XMLHttpRequest();}
else if (window.ActiveXObject)
{ req = new ActiveXObject("Microsoft.XMLHTTP");
alert("Microsoft.XMLHTTP");}
req.open("POST", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
alert("req.readyState"+req.readyState);
if (req.readyState == 4) {
if (req.status == 200) {
parseMessage();} } }
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
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>
<title>Untitled Page</title>
<xml id="articulosXML" src="datos.jso"></xml>
for(i=0;i<nr;i++)
{
}
}
</script>
</head>
<body onload="carga()">
</body>
</html>
99