Scribd
Cargar
207 vistas

Tema 4 - DOM de HTML y JavaScript

DOM de HTML define una forma estándar para acceder y manipular documentos HTML, permitiendo a programas y lenguajes de scripts acceder y actualizar dinámicamente el contenido, estructura y estilo de un documento HTML. DOM representa el documento como un árbol de nodos en el que cada elemento, atributo, texto y comentario es un nodo. Esto permite navegar la estructura del documento y modificarla mediante propiedades y métodos.

Cargado por

Anonymous NJREfqf
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
207 vistas

Tema 4 - DOM de HTML y JavaScript

DOM de HTML define una forma estándar para acceder y manipular documentos HTML, permitiendo a programas y lenguajes de scripts acceder y actualizar dinámicamente el contenido, estructura y estilo de un documento HTML. DOM representa el documento como un árbol de nodos en el que cada elemento, atributo, texto y comentario es un nodo. Esto permite navegar la estructura del documento y modificarla mediante propiedades y métodos.

Cargado por

Anonymous NJREfqf
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 26

Tema 4

DOM de HTML y JavaScript


DOM de HTML define una forma estndar para acceder y manipular documentos
HTML. DOM permite a los programas y lenguajes de guiones acceder y actualizar
dinmicamente el contenidamente, la estructura y el estilo de un documento
HTML. DOM de HTML define los objetos y propiedades de todos los elementos de
un documento y los mtodos para accederlos.
DOM de HTML est dividido en dos diferentes niveles:

Ncleo de DOM - standard model for any structured document


DOM de HTML - standard model for HTML documents

Nodos de DOM de HTML


Todo en un documento de HTML es un nodo.

El documento entero es un nodo de documento.


Cada elemento de HTML es un nodo de elemento.
El texto en los elementos de HTML son nodos de texto.
Cada atributo de HTML es un node de atributo
Los comenarios son nodos de comentarios

Ejemplo de DOM
Considere el siguiente documento HTML:
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1>My header</h1>
</body>
</html>

El nodo raz de un documento HTML anterior es <html>. Todos los dems nodos
en el documento estn contenidos dentro <html>. El nodo <html> tiene dos
nodos hijos: <head> y <body>. El nodo <head> tiene un nodo <title>.El nodo
<body> tiene los nodos <a> y <h1>.

ITSON

Manuel Domitsu Kono

118

DOM de HTML y JavaScript

El texto de un nodo de elemento siempre se almacena en un nodo de texto. En el


ejemplo anterior el nodo del elemento <title>, tiene un nodo de texto con el
valor "My title". "My title" no es el valor del elemento <title>. El valor del
nodo de texto puede accederse mediante la propiedad innerHTML.

Nodo de rbol del DOM de HTML


DOM de HTML visualiza a un documento HTML como una estructura de rbol,
llamada rbol de Nodos. Todos los nodos del rbol estan relacionados entre s.
Todos los nodos pueden accederse mediante el rbol. Su contenido puede
modificarse, borrarsey pueden crearse nuevos elementos.
El rbol de la figura 1 corresponde al documento HTML del ejemplo anterior.

Figura 1. Estructura de rbol de un Documento HTML.

Nodos Padres, Hijos y Hermanos


Los nodos de un rbol de nodos tienen estn relacionados jerarquicamente entre
s.

ITSON

En un rbol de nodos, el nodo superior es el nodo raz.


Cada nodo, excepto excepto el nodo raz tiene exactamente un nodo padre.
Un nodo puede tener cualquier nmero de hijos.
Una hoja es un nodo sin hijos.
Los nodos son los nodos con el mismo padre.

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

119

La siguiente figura muestra una parte de un rbol de nodos y las relaciones entre
sus nodos:

Figura 2. Relaciones entre nodos de un rbol de Nodos


Para el rbol de nodos de la figura 1, tenemos las siguientes relaciones entre sus
nodos:

El nodo <html> no tiene un nodo padre. Es el nodo raz.


El nodo padre de los nodos <head> y <body> es el nodo <html>.
El nodo padre del nodo del nodo de texto "my header" es el nodo <h1>.
El nodo <html> tiene dos nodos hijos <head> y <body>.
El nodo <head> tiene un nodo hijo; el nodo <title>.
El nodo <title> tiene un nodo hijo; el nodo texto "My title".
Los nodos <a> y <h1> son hermanos, y ambos son hijos de <body>.
El nodo <head> es el primer hijo del nodo <html> y el nodo <body> es el
ltimo hijo del nodo <html>.
El nodo <a> es el primer hijo del nodo <body> y el nodo <h1> es el ltimo
hijo del nodo <body>.

Interfaz de Programacin de DOM de HTML


En DOM, los documentos HTML consisten de un conjunto de nodos objetos. Los
nodos pueden ser accedidos con JavaScript u otros lenguajes de programacin.
La interfaz de programacin de DOM est definida por propiedades y mtodos
estndar.

ITSON

Manuel Domitsu Kono

120

DOM de HTML y JavaScript

Propiedades de DOM de HTML


Algunas propiedades de DOM:

x.innerHTML El valor del texto del elemento x.


x.nodeName - El nombre del elemento x.
x.nodeValue - El valor del elemento x.
x.parentNode - El padre del elemento x.
x.childNodes - El nodos hijos del elemento x.
x.attributes Los atributos del elemento x.

Mtodos de DOM de HTML


Algunos mtodos de DOM:

x.getElementById(id) Obtn el elemento con el atributo id


especificado.
x.getElementsByTagName(name) Obten todos los elementos con un
nombre de etiqueta especificado.
x.appendChild(node) - Inserta un nodo hijo al elemento x.
x.removeChild(node) - Remueve un nodo hijo al elemento x.

La Propiedad innerHTML
La propiedad innerHTML nos permite obtener o modificar el contenido de un
elemento.
El siguiente ejemplo obtiene el texto del elemento <p> con id="intro":
<html>
<body>
<p id="intro">Hola mundo!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>El texto en el parrafo intro: "
+ txt + "</p>");
</script>
</body>
</html>

En el ejemplo anterior getElementById() es un mtodo y innerHTML es una


propiedad.

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

121

Nodos Hijos y Valor de un Nodo


Podemos usar las propiedades childNodes y nodeValue para obtener el
contenido de un elemento.
El siguiente cdigo obtiene el valor del elemento <p> con id="intro":
<html>
<body>
<p id="intro"> Hola mundo!</p>
<script type="text/javascript">
txt=document.getElementById("intro")
.childNodes[0].nodeValue;
document.write("<p> El texto en el parrafo intro: "
+ txt + "</p>");
</script>
</body>
</html>

En el ejemplo anterior getElementById() es un mtodo, mientras childNodes


y nodeValue son propiedades.

Acceso a los Nodos DOM de HTML


Con DOM, se puede acceder a cada nodo en un documento HTML.
Se puede acceder a un nodo de tres formas:
1. Usando el mtodo getElementById().
2. Usando el mtodo getElementsByTagName().
3. Navegando el rbol de nodos, usando las relaciones entre nodos.

Mtodo getElementById()
Este mtodo regresa el elemento con el id especificado. Su sintaxis es:
node.getElementById("id");

El siguiente ejemplo obtiene el elemento con id="intro":


document.getElementById("intro");

ITSON

Manuel Domitsu Kono

122

DOM de HTML y JavaScript

Mtodo getElementsByTagName()
Este mtodo regresa todos los elementos con el nombre de etiqueta especificado.
Su sintaxis es:
node.getElementsByTagName("tagname");

El siguiente ejemplo regresa una lista de nodos de todos los elementos <p> en el
documento:
document.getElementsByTagName("p");

El siguiente ejemplo regresa una lista de nodos de todos los elementos <p> que
son descendientes del elemento con id="principal":
document.getElementById("principal").getElementsByTagName("p");

Lista de Nodos de DOM


El mtodo getElementsByTagName() regresa una lista de nodos. Una lista de
nodos es un arreglo de nodos. El siguiente cdigo selecciona todos los nodos <p>
en una lista de nodos.
x=document.getElementsByTagName("p");

Los nodos de la lista de nodos pueden accesarse por su ndice. Para acceder al
segundo prrafo podemos escribir:
y=x[1];

Longitud de la Lista de Nodos de DOM


La propiedad length establece el nmero de nodos en una lista de nodos. En el
siguiente ejemplo se obtiene la lista de todos los elementos <p>. Luego se itera la
lista de nodos para desplegar el valor de su nodo de texto:
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++) {
document.write(x[i].innerHTML);
document.write("<br />");
}

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

123

Navegar las Relaciones de los Nodos


Las tres propiedades parentNode, firstChild y lastChild, siguen la
estructura del documento y permiten hacer viajes cortos en el documento. Por
ejemplo en el siguiente fragmento HTML:
<html>
<body>
<p>Hola mundo!</p>
<div>
<p>DOM es muy util!</p>
<p> Este ejemplo muestra las relaciones entre nodos.</p>
</div>
</body>
</html>

El primer elemento <p> es el nodo primer hijo (firstChild) del elemento


<body> y el elemento <div> es el ltimo hijo (lastChild) del elemento <body>.
El nodo padre (parentNode) del primer elemento <p> y el elemento <div>, es el
elemento <body> y el nodo padre de los elementos <p> dentro del elemento
<div>, es el elemento <div>.
El elemento firstChild puede usarse para acceder al texto de un elemento:
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

Nodos Raz de DOM


Hay dos propiedades del documentos especiales que permiten acceder a los
elementos:

document.documentElement Regresa el nodo raz del documento.


document.body Da acceso directo al elemento <body>.

InformacindeunNodoDOMdeHTML
En DOM de HTML, cada nodo es un objeto. Los objetos tienen mtodos y
propiedades que pueden manipularse mediante JavaScript. Tres propiedades de

ITSON

Manuel Domitsu Kono

124

DOM de HTML y JavaScript

los nodos son: nodeName, nodeValue y nodeType que contienen informacin de


los nodos.

La Propiedad nodeName
La propiedad nodeName especifica el nombre de un nodo.

El nodeName es de solo lectura.


El nodeName es lo mismo que el nombre del elemento.
El nodeName de un atributo es el nombre del atributo.
El nodeName de un nodo de texto es siempre #text.
El nodeName del nodo del documento es siempre #document.

Nota: El nodeName siempre contiene el nombre del elemento en maysculas.

La Propiedad nodeValue
La propiedad nodeValue especifica el valor de un nodo.
El nodeValue para los nodos de los elementos est indefinido.
El nodeValue de un nodo de texto es el texto mismo.
El nodeValue de un atributo es el valor del atributo.
El siguiente ejemplo recupera el valor del nodo de texto del elemento <p
id="intro">:
<html>
<body>
<p id="intro">Hola mundo!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

La Propiedad nodeType
La propiedad nodeType especifica el tipo de un nodo. Esta propiedad es de solo
lectura.

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

125

La tabla 4.1 muestra los tipos de nodos ms importates.


Tabla 4.1 Tipos de nodos
Tipo de Elemento
Elemento
Atributo
Texto
Comentario
Documento

Tipo de Nodo
1
2
3
8
9

Cambio de los Elementos DOM de HTML


Los valores (contenido y atributos) de los elementos HTML pueden modificarse
usando JavaScript, DOM de HTML y eventos.
El siguiente ejemplo cambia el color de fondo del elemento <body>:
<html>
<body>
<script type="text/javascript">
document.body.bgColor="lavender";
</script>
</body>
</html>

La forma ms sencilla de obtener o modificar el contenido de un elemento es


mediante la propiedad innerHTML.
El siguiente ejemplo cambia el texto de un elemento <p>:
<html>
<body>
<p id="p1">Hola mundo!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="Hola de nuevo!";
</script>
</body>
</html>

Se puede cambiar un elemento HTML usando eventos. Un manejador de eventos


permite la ejecucin de cdigo cuando un evento ocurre. Los eventos son
generados por el navegador cuando el usuario hace clic en un elemento, la pgina
carga, se enva un formulario, etc.

ITSON

Manuel Domitsu Kono

126

DOM de HTML y JavaScript

El siguiente ejemplo cambia el color de fondo del elemento <body> cuando se


hace clic en un botn.
<html>
<body>
<input type="button"
onclick="document.body.bgColor='lavender';"
value="Cambia color de fondo" />
</body>
</html>

Se puede cambiar el valor de un elemento mediante una funcin. El siguiente


ejemplo usa una funcin para cambiar el texto de un elemento <p> cuando se
hace clic en un botn:
<html>
<head>
<script type="text/javascript">
function cambiaTexto() {
document.getElementById("p1")
.innerHTML="Hola de nuevo!";
}
</script>
</head>
<body>
<p id="p1">Hola mundo!</p>
<input type="button" onclick="cambiaTexto()"
value="Cambia Texto" />
</body>
</html>

UsodelObjetoStyle
El objeto Style de cada elemento HTML representa su estilo individual. El siguiente
ejemplo usa una funcin para cambiar el estilo del elemento <body> cuando se
hace clic en un botn:
<html>
<head>
<script type="text/javascript">
function cambiaColor() {
document.body.style.backgroundColor="lavender";
}
</script>
</head>
<body>
<input type="button" onclick=" cambiaColor()"
value="Cambia color de fondo" />

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

127

</body>
</html>

El siguiente ejemplo usa una funcin para cambiar el estilo de un elemento <p>
cuando se hace clic en un botn:
<html>
<head>
<script type="text/javascript">
function CambiaEstilo() {
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Arial";
}
</script>
</head>
<body>
<p id="p1">Hola mundo!</p>
<input type="button" onclick=" CambiaEstilo()"
value="Cambia Estilo" />
</body>
</html>

EventosdeDOMdeHTML
Los eventos son acciones que pueden ser detectadas desde JavaScript. Cada
elemento de una pgina Web tiene una serie de eventos que pueden disparar
funciones de JavaScript. Por ejemplo, se puede usar el evento onclick de un botn
para indicar que la funcin se ejecutar cuando el usuario haga clic sobre el botn.
Se definen los eventos en los elementos de HTML.
Ejemplos de eventos:

Clic del ratn


Cargado de una pgina o imagen
Pasar el ratn sobre una parte de una pgina Web
Seleccin de un elemento de entrada en un formulario HTML
Envo de un formulario HTML
Presionar una tecla

Nota: Normalmente los eventos se usan en combinacin con las funciones y las
funciones no ejecutarn antes de que el evento suceda.
El siguiente ejemplo despliega la fecha cuando se hace clic sobre un botn.

ITSON

Manuel Domitsu Kono

128

DOM de HTML y JavaScript

<html>
<head>
<script type="text/javascript">
function despliegaFecha() {
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<button type="button"
onclick="despliegaFecha()">
Despliega Fecha
</button>
</body>
</html>

Eventos onload y onUnload


Los eventos onload y onUnload son disparados cuando el usuario entra a o deja
una pgina.
El evento onload se usa, normalmente, para verificar el tipo y versin del
navegador del visitante y cargar la versin apropiada de la pgina Web en base a
esta informacin.
Ambos eventos onload y onUnload son usados frecuentemente para ttrabajar
con cookies que deben establecerse cuando el usuario entra a o sale de una
pgina. Por ejemplo se puede pedirle al visitante su nombre de usuario cuando
recin arriva a la pgina. El nombre se almacena en un cookie. Cuando el
visistante arriva de nuevo a la pgina, el visitante puede ser reconocido por la
informacin en el cookie.

Eventos onFocus, onBlur y onChange


Los eventos onFocus, onBlur y onChange se usan frecuentemente en
combinacin con validacioes de elementos de formulario.
El siguiente es un ejemplo de cmo se usa el evento onChange. Se invoca a la
funcin checkEmail() cada vez que se cambia el contenido del campo de entrada
e-mail.
E-mail: <input type="text" id="email" onchange="checkEmail()" />

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

129

Evento onSubmit
El evento onSubmit se usa para validar todos los elementos de un formulario
antes de enviarlo.
En el siguiente ejemplo, la funcin checkForm() ser invocada cuando el usuario
haga clic en el botn Submit. Si los valores de los campos de entrada no son
aceptados, el envo es cancelado. La funcin checkForm() regresa un valor
booleano. Si regresa true la forma ser enviada, de otra manera el envo sera
cancelado.
<form method="post" action="xxx.htm" onsubmit="return checkForm()"

Javascript del Lado del Cliente


JavaScript es un lenguaje de programacin de propsito general que es
interpretado. En la mayora de los casos el cdigo JavaScript se inserta en las
pginas Web y su cdigo es interpretado por el intrprete que est incrustado en
el navegador Web.
JavaScript junto con DOM y CSS permiten que el contenido y aparencia de las
pginas Web pueda ser modificado.
Con JavaScript podemos:

Agregarle instrucciones a las pginas HTML.


Hacer que las pginas Web respondan a los eventos disparados por el
navegador.
Leer y escribir elementos de HTML para cambiar el contenido de un
elemento HTML.
Validar datos de entrada antes de enviarlos al servidor Web.
Detectar el tipo de navegador del cliente y cargar una una pgina adecuada
al navegador.
Crear cookies para almacenar y recuperar informacin en la computadora
del cliente.

Ubicacin del Cdigo JavaScript


El cdigo JavaScript puede ser puesto en tres lugares:
En el cuerpo de un documento HTML.
En la cabecera de un documento HTML.
En un archivo externo.
ITSON

Manuel Domitsu Kono

130

DOM de HTML y JavaScript

Elemento <script> de HTML


Para insertar cdigo JavaScript en un documento HTML se usa el elemento
<script> de HTML cuya sintaxis es:
<script type="tipo" src="URL">codigo</script>

La tabla 4.2 muestra el significado y valor de los atributos elemento <script>:


Tabla 2.3 Atributo href del Elemento <script>
Atributo
type
src

Descripcin
Especifica el tipo MIME
del cdigo
Establece el URL del
archivo externo con el
cdigo.

Valores
"text/javascript"
URL

Descripcin
Para insertar cdigo en
JavaScript
Si el atributo src est
presente el elemento
<script> debe estar
vaco.

JavaScript en el Cuerpo de un Documento HTML


El cdigo JavaScript es interpretado conforme se va procesando el documento
HTML.
En el siguiente ejemplo, el cdigo JavaScript colocado dentro del cuerpo del
documento HTML, escribe la fecha actual en el elemento <p> cuando la pgina se
carga en el navegador.
<html>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>

Note que el cdigo JavaScript se coloca al final de la pgina para asegurarse que
no sea ejecutado antes de que el elemento <p> sea creado.
Funciones de JavaScript y Eventos
No siempre se quiere que el cdigo JavaScript sea ejecutado cuando la pgina
carga. Algunas veces deseamos que el cdigo ejecute cuando ocurre un evento.
En estos casos podemos poner el cdigo Javascript dentro de una funcin.

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

131

JavaScript en el Encabezado de un Documento HTML


Las funciones de JavaScript normalmente se colocan en la cabecera de una
documento de HTML.
En el siguiente ejemplo se invoca a la funcin cuando se hace clic sobre un botn:
<html>
<head>
<script type="text/javascript">
function despliegaFecha() {
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<button type="button"
onclick="despliegaFecha()">
Despliega Fecha
</button>
</body>
</html>

JavaScript en el Encabezado y en el Cuerpo de un Documento


HTML
Se puede colocar un ilimitado numero de elementos <script> con cdigo
JavaScript dentro del documento HTML y se puede tener los elementos tanto en
la cabecera como en el cuerpo del documento HTML al mismo tiempo.
Se acostumbra colocar todas las funciones en la cabecera o en el final del
documento HTML para que estn en un solo lugar y no interfieran con el contenido
de la pgina.

JavaScript en un Archivo Externo


El cdigo JavaScript tambin puede colocarse en archivos externos. Un archivo
JavaScript por lo general contiene cdigo que va a ser usado en varias pginas
Web.
Los archivos externos con cdigo JavaScript tienen la extensin ".js". El atributo
"src" de el elemento <script> apunta al nombre del archivo externo con el
cdigo JavaScript.

ITSON

Manuel Domitsu Kono

132

DOM de HTML y JavaScript

Nota: El cdigo JavaScript en un archivo externo no puede contener elementos


<script>.
El siguiente cdigo muestra el cdigo de una funcin JavaScript en el archivo
externo despliegaFecha.js:
function despliegaFecha() {
document.getElementById("demo").innerHTML=Date();
}

El cdigo siguiente muestra la pgina HTML que invoca el archivo externo e


invoca a la funcin que contiene.
<html>
<head>
<script type="text/javascript" src="despliegaFecha.js">
</script>
</head>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<button type="button"
onclick="despliegaFecha()">
Despliega Fecha
</button>
</body>
</html>

Nota: Coloque el elemento <script> exactamente donde normalmente se colocara


el cdigo javaScript.

Insertar Texto en el Documento HTML con JavaScript


El siguiente ejemplo inserta un elemento <p> con la fecha actual en el documento
HTML:
<html>
<body>
<h1>Despliega Fecha</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>

Nota: Evite el uso de mtodo document.write() en el cdigo JavaScript. Si lo


usamos dentro de una funcin o despus de que se ha cargado la pgina, la
pgina completa HTML ser sobreescrita.

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

133

Cambiar Elementos HTML con JavaScript


En el siguiente ejemplo se escribe la fecha actual en un prrafo existente:
<html>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>

Note: Algunos navegadores no soportan JavaScript. Esos navegadores


desplegarn el cdigo JavaScript como texto. Para evitar eso, encierre el cdigo
JavaScript entre delimitadores de comentarios de HTML:
<html>
<body>
<h1>Despliega Fecha</h1>
<p id="demo"></p>
<script type="text/javascript">
<!-document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>

Note el comentario de lnea de JavaScript para impedir que JavaScript ejecute la


etiqueta -->.

Cuadros de Dilogo Emergentes de JavaScript


JavaScript tiene tres tipos de cuadros de dilogos emergentes: Cuadro de Alerta,
Cuadro de Confirmacin y Cuadro con Campo de Texto.

Cuadro de Alerta
Un Cuadro de Alerta se usa cuando se quiere asegurar que la informacin
proviene del usuario. Cuando un Cuadro de Alerta aparece, el usuario tiene que
hacer clic en el botn "OK" para continuar.
La sintaxis de un Cuadro de Alerta es:

ITSON

Manuel Domitsu Kono

134

DOM de HTML y JavaScript

alert("texto");

Ejemplo de un Cuadro de Alerta


<html>
<head>
<script type="text/javascript">
function muestra_alerta() {
alert("Soy un Cuadro de Alerta!");
}
</script>
</head>

<body>
<input type="button" onclick="muestra_alerta()"
value="Muestra un Cuadro de Alerta" />
</body>
</html>

Cuadro de Confirmacin
Un Cuadro de Confirmacin se usa si queremos que el usuario verifique o acepte
algo. Cuando un Cuadro de Confirmacin aparece, el usuario tiene que hacer clic
en el botn "OK" o en el botn "Cancel" para continuar. Si el usuario hace clic en
el botn "OK", el cuadro regresa true. Si el usuario hace clic en el botn
"Cancel", el cuadro regresa el valor de false.
La sintaxis de un Cuadro de Confirmacin es:
confirm("texto");

Ejemplo de un Cuadro de Confirmacin


<html>
<head>
<script type="text/javascript">
function muestra_confirmacion() {
var r=confirm("Presiona un boton");
if (r==true) {
alert("Presionaste OK!");
}
else {
alert("Presionaste Cancel!");
}
}
</script>
</head>

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

135

<body>
<input type="button" onclick=" muestra_confirmacion()"
value="Muestra un Cuadro de Confirmacion" />
</body>
</html>

Cuadro con Campo de Texto


Un Cuadro con Campo de Texto se usa si se quiere que el usuario suministre un
valor antes de entrar a una pgina. Cuando un Cuadro con Campo de Texto
aparece, el usuario tiene que hacer clic en el botn "OK" o en el botn "Cancel"
para continuar despus de suministrar un valor. Si el usuario hace clic en el botn
"OK", el cuadro regresa el valor suministrado. Si el usuario hace clic en el botn
"Cancel", el cuadro regresa el valor de null.
La sintaxis de un Cuadro Campo de Texto es:
prompt("text","valorOmision");

Ejemplo de un cuadro con Campo de Texto


<html>
<head>
<script type="text/javascript">
function captura_nombre() {
var nombre=prompt("Dame tu nombre","Juan Perez");
if (nombre!=null && nombre!="") {
document.write("<p>Hola " + nombre
+ "! Como estas?</p>");
}
}
</script>
</head>
<body>
<input type="button" onclick="captura_nombre()"
value="Captura Nombre" />
</body>
</html>

Validacin de Formularios con JavaScript


La nica forma confiable de validar los datos capturados en un formulario es del
lado del servidor. No se debe validar slo del cliente mediante JavaScript, por las
siguientes razones:

ITSON

Manuel Domitsu Kono

136

DOM de HTML y JavaScript

Un dispositivo puede no tener un intrprete de JavaScript.


Un usuario puede haber desabilitado la ejecucin de cdigo JavaScript en
el navegador.
Un administrador puede haber desabilitado JavaScript en una red.
Sin embargo, adems de validar los datos de todos los formularios en el servidor,
es recomendable validarlos usando JavaScript del lado del cliente tambin. La
ventaja, si JavaScript est disponible, es que en el caso de errores en los datos la
validacin nos ahorra el viaje al servidor para detectar los errores, lo cual es til
sobretodo para los usuarios con conexiones lentas.
Hay dos formas de validacin del lado del cliente:
Validar los datos cuando se presiona el botn enviar.
Validar cada dato campo por campo, sobre todo con formularios largos y
revalidar toda la forma al presionar el botn enviar.

Ejemplo
El siguiente cdigo contiene una serie de funciones para validar que un campo no
este vaco, para valida una edad y para validar una fecha. Las funciones estn en
un archivo externo JavaScript. Las principales caractersticas de este cdigo son:
En la funcin validacionComun() se detecta si el navegador es una
versin que no soporta los mtodos de DOM de HTML empleados. En
estos casos no se realiza la validacin del lado del cliente y se delega la
validacin al servidor.
La deteccin se realiza verificando si el navegador tiene definidos algunos
mtodos como document.getElementById().
El formateo de los mensajes de aviso y error se realiza estableciendo la
clase CSS del elemento en el que se desplegar el mensaje.
valida.js
//
// Funciones de validacion de
//
var nbsp = 160;
var node_text = 3;
var cadenaVacia = /^\s*$/ ;
var campoEnfocarGlobal;
campoEnfocar

formularios de Javascript.
// caracter de espacio
// Tipo de nodo de texto de DOM
// Variable global para almacenar el

// enfocaAtrasado()
//

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

137

// Hace que el elemento almacenado en la variable global


// campoValidarGlobalDelayed obtenca el foco. Ajuste para
// remediar un bug de IE y otros
function enfocaAtrasado() {
campoEnfocarGlobal.focus();
}
// enfoca()
//
// Hace que el elemento del parametro obtenga el foco
//
// Parametros:
//
- campoEnfocar: Elemento a obtener el foco
function enfoca(campoEnfocar) {
// Guarda campoEnfocar en la variable global para conservar el valor
// cuando la funcion termine
campoEnfocarGlobal = campoEnfocar;
setTimeout('enfocaAtrasado()', 100);
}
// trim()
//
// Elimina los caracteres blancos al principio o final
// de la cadena del parametro
//
// Parametros
//
- str: Cadena a procesar
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
// despliegaMensaje()
//
// Despliega un mensaje de error o aviso
//
// Parametros
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
- claseMensaje: Clase asociada al mensaje para usarse en CSS,
// warn/error.
//
- mensaje:
Mensaje a desplegar
//
// Debe llamarse antes a la funcion validacionComun
function despliegaMensaje(idMensaje, claseMensaje, mensaje) {
var mensajeDesplegar;
// Si el mensaje a desplegar es una cadena vaca
if (cadenaVacia.test(mensaje))
// Hacer que la cadena a desplegar sea el caracter de espacio
mensajeDesplegar = String.fromCharCode(nbsp);

ITSON

Manuel Domitsu Kono

138

DOM de HTML y JavaScript

else
// Hacer que la cadena a desplegar sea el mensaje
mensajeDesplegar = mensaje;
// Despliega el mensaje
var elem = document.getElementById(idMensaje);
elem.firstChild.nodeValue = mensajeDesplegar;
// Establece la clase CSS para establecer las propiedades del mensaje
elem.className = claseMensaje;
}
// validacionComun()
//
// Codigo comun para todas las funciones de validacion:
// Si la version del navegador es vieja, pasa la validacion
// para que la validacion la haga el servidor
//
// Parametros:
//
- campoValidar: Elemento a validar
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
- requerido:
Campo requerido
//
// Regresa:
//
- true:
Pasa la validacion
//
- false:
Falla la validation
//
- prosigue: Continua con la siguiente validacion
var prosigue = 2;
function validacionComun(campoValidar, idMensaje, requerido) {
// Si el navegador es viejo
if (!document.getElementById)
// Deja la validacion al servidor
return true;
var elem = document.getElementById(idMensaje);
// Si el navegador es viejo, deja la validacion al servidor
if (!elem.firstChild) return true;
// El elemento en que se desplegara el mensaje no es el correcto
if (elem.firstChild.nodeType != node_text) return true;
// Si el campo a validar esta vacio
if(cadenaVacia.test(campoValidar.value)) {
// Si el campo esta vacio y es obligatorio
if(requerido) {
despliegaMensaje(idMensaje, "error",
"Error: Se requiere un valor");
enfoca(campoValidar);
return false;

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

139

}
// Si el campo esta vacio y no es obligatorio
else {
// Borra un posible mensaje de error previo
despliegaMensaje(idMensaje, "warn", "");
return true;
}
}
return prosigue;
}
// validaPresente()
//
// Valida si se ha teclaeado algo en el campo de texto
//
// Parametros:
//
- campoValidar: Elemento a validar
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
// Regresa:
//
true si se teclaeado algo, falso en caso contrario
//
function validaPresente(campoValidar, idMensaje) {
var stat = validacionComun (campoValidar, idMensaje, true);
if(stat != prosigue) return stat;
// Borra un posible mensaje de error previo
despliegaMensaje (idMensaje, "warn", "");
return true;
}
// validaEdad()
//
// Valida la edad de una persona. Una edad tiene de 1 a 3 dgitos
// y edad en [0, edadMax]
//
// Parametros:
//
- edadMax:
Edad maxima
//
- campoValidar: Elemento a validar
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
- requerido:
Campo requerido
//
// Regresa:
//
true si ok
function validaEdad(edadMax, campoValidar, idMensaje, requerido) {
var stat = validacionComun (campoValidar, idMensaje, requerido);
if (stat != prosigue) return stat;
var edad = trim(campoValidar.value);

ITSON

Manuel Domitsu Kono

140

DOM de HTML y JavaScript

var reEdad = /^[0-9]{1,3}$/


if (!reEdad.test(edad)) {
despliegaMensaje (idMensaje, "error", "Error: Edad no vlida");
enfoca(campoValidar);
return false;
}
if (edad > edadMax) {
despliegaMensaje (idMensaje, "error", "Error: Edad no vlida");
enfoca(campoValidar);
return false;
}
// Borra un posible mensaje de error previo
despliegaMensaje (idMensaje, "warn", "");
return true;
}
// validaEmail()
//
// Valida una direccion de correo
//
// Parametros:
//
- campoValidar: Elemento a validar
//
- idMensaje:
id del elemento en que se desplegara el mensaje
//
- requerido:
Campo requerido
//
// Regresa:
//
true si ok
//
function validaEmail(campoValidar, idMensaje, requerido) {
var stat = validacionComun (campoValidar, idMensaje, requerido);
if (stat != prosigue) return stat;
var email = trim(campoValidar.value);
var reEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!reEmail.test(email)) {
despliegaMensaje (idMensaje, "error", "Error: E-mail no vlido");
enfoca(campoValidar);
return false;
}
// Borra un posible mensaje de error previo
despliegaMensaje (idMensaje, "warn", "");
return true;
}

ITSON

Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScript

141

El siguiente cdigo muestra una pgina HTML en la que se utilizan las funciones
JavaScript anteriores para validar cada campo conforme se van capturando
valores as como al enviar el formulario completo. De existir un error en alguno de
los campos, se despliega un mensaje de error a la derecha del campo con el error.
Las principales caractersticas de este cdigo son:
Utiliza un botn de enviar estndar y su atributo onSubmit para invocar la
funcin que valida todo el formulario.
Las validaciones de cada campo individual se hacen mediante el atributo
onChange de cada campo para invocar a la funcin que valida cada
campo.
contactame.html
<html>
<head>
<title>Cont&aacute;ctame</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="valida.js">
</script>
<script type="text/javascript">
function validaEnviar() {
var elem;
var errores=0;
// Ejecuta las validaciones en orden inverso para que el elemento
// con el enfoque sea el primero con error
if(!validaEmail(document.forms.cuestionario.email,
'msjEmail', true)) errores += 1;
if(!validaEdad(150, document.forms.cuestionario.edad, 'msjEdad',
true)) errores += 1;
if(!validaPresente(document.forms.cuestionario.nombre,
'msjNombre')) errores += 1;
return (errores==0);
};
</script>
</head>
<body>
<h1 align="center">Cont&aacute;ctame</h1>
<form name="cuestionario" onSubmit="return validaEnviar()"
action="blanco.html">
<table align="center">
<caption>Mis Datos Personales</caption>
<tr>
<td align="right">Nombre *</td>

ITSON

Manuel Domitsu Kono

142

DOM de HTML y JavaScript

<td><input name="nombre" id="nombre" maxlenght="50" size="20"


onchange="validaPresente(this, 'msjNombre');" />
</td>
<td id="msjNombre">&nbsp;</td>
</tr>
<tr>
<td align="right">Edad *</td>
<td><input name="edad" id="edad" maxlenght="3" size="3"
onchange="validaEdad(150, this, 'msjEdad', true);" />
</td>
<td id="msjEdad">&nbsp;</td>
</tr>
<tr>
<td align="right">E-mail *</td>
<td><input name="email" id="email" maxlenght="75" size="50"
onchange="validaEmail(this, 'msjEmail', true);" />
</td>
<td id="msjEmail">&nbsp;</td>
</tr>
</table>
<br />
<br />
<table align="center">
<tr>
<td><input type="submit" name="boton" value="Enviar" /></td>
<td><input type="reset" name="boton" value="Restaurar" /></td>
</tr>
</table>
</form>
</body>
</html>

Para resaltar los mensajes de aviso o de error, el cdigo JavaScript inserta estilos
para colorear el texto de los mensajes usando las siguientes reglas de estilo:
estilos.css
...
*.error {
color: red;
}
*.warn {
color: blue;
}
...

ITSON

Manuel Domitsu Kono

También podría gustarte