Tema 4 - DOM de HTML y JavaScript

8/17/2019 Tema 4 - DOM de HTML y JavaScript

1/26

ITSON Manuel Domitsu Kono

Tema 4

DOM de HTML y JavaScriptDOM de HTML define una forma estándar para acceder y manipular documentosHTML. DOM permite a los programas y lenguajes de guiones acceder y actualizardinámicamente el contenidamente, la estructura y el estilo de un documentoHTML. DOM de HTML define los objetos y propiedades de todos los elementos deun documento y los métodos para accederlos.

DOM de HTML está dividido en dos diferentes niveles:

• Núcleo 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:

My t i t l e

My l i nk

My header

El nodo raíz de un documento HTML anterior es . Todos los demás nodosen el documento están contenidos dentro . El nodo tiene dosnodos hijos: y . El nodo tiene un nodo .El nodotiene los nodos y .


2/26

118 DOM de HTML y JavaScript


El texto de un nodo de elemento siempre se almacena en un nodo de texto. En elejemplo anterior el nodo del elemento , tiene un nodo de texto con elvalor "My t i t l e" . "My t i t l e" no es el valor del elemento . El valor delnodo de texto puede accederse mediante la propiedad i nner HTML.

Nodo de Árbol del DOM de HTMLDOM 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 puedemodificarse, 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 están relacionados jerarquicamente entresí.

• En un árbol de nodos, el nodo superior es el nodo raíz.• Cada nodo, excepto excepto el nodo raíz tiene exactamente un nodo padre.• Un nodo puede tener cualquier número de hijos.• Una hoja es un nodo sin hijos.• Los nodos son los nodos con el mismo padre.


3/26

Tema 4 DOM de HTML y JavaScript 119


La siguiente figura muestra una parte de un árbol de nodos y las relaciones entresus 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 susnodos:

• El nodo no tiene un nodo padre. Es el nodo raíz.• El nodo padre de los nodos y es el nodo .• El nodo padre del nodo del nodo de texto "my header" es el nodo .• El nodo tiene dos nodos hijos y .

• El nodo tiene un nodo hijo; el nodo .• El nodo tiene un nodo hijo; el nodo texto "My t i t l e" .• Los nodos y son hermanos, y ambos son hijos de .• El nodo es el primer hijo del nodo y el nodo es el

último hijo del nodo .• El nodo es el primer hijo del nodo y el nodo es el último

hijo del nodo .

Interfaz de Programación de DOM de HTML

En DOM, los documentos HTML consisten de un conjunto de nodos objetos. Losnodos pueden ser accedidos con JavaScript u otros lenguajes de programación.La interfaz de programación de DOM está definida por propiedades y métodosestándar.


4/26



Propiedades de DOM de HTML

Algunas propiedades de DOM:

• x. i nnerHTML – El valor del texto del elemento x.• x. nodeName - El nombre del elemento x.• x. nodeVal ue - El valor del elemento x.• x. parent Node - El padre del elemento x.• x. chi l dNodes - El nodos hijos del elemento x.• x. at t r i but es – Los atributos del elemento x.

Métodos de DOM de HTML

Algunos métodos de DOM:

• x. get El ement ByI d( id ) – Obtén el elemento con el atributo idespecificado.

• x. get El ement sByTagName( name) – Obten todos los elementos con unnombre de etiqueta especificado.

• x. appendChi l d( node) - Inserta un nodo hijo al elemento x.• x. r emoveChi l d( 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

con i d="i nt r o" :

Hol a mundo!

t xt =document . get El ement ByI d( " i nt r o") . i nner HTML;document . wr i t e( "

El t exto en el par r af o i nt r o: "

+ t xt + "") ;

En el ejemplo anterior getEl ement ByI d( ) es un método y i nner HTML es unapropiedad.


5/26



Nodos Hijos y Valor de un Nodo

Podemos usar las propiedades chi l dNodes y nodeVal ue para obtener elcontenido de un elemento.

El siguiente código obtiene el valor del elemento

con i d="i nt r o":

Hol a mundo!

t xt =document . get El ement ByI d( " i nt r o"). chi l dNodes[ 0] . nodeVal ue;

document . wr i t e( "

El t exto en el par r af o i nt r o: "+ t xt + "") ;

En el ejemplo anterior getEl ement ByI d( ) es un método, mientras chi l dNodes

y nodeVal ue 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 método getEl ement ByI d( ) .

2. Usando el método get El ement sByTagName( ) .3. Navegando el árbol de nodos, usando las relaciones entre nodos.

Método getElementById()

Este método regresa el elemento con el id especificado. Su sintaxis es:

node.getElementById("id ");

El siguiente ejemplo obtiene el elemento con i d="i nt r o" :

document . getEl ement ByI d( " i nt r o") ;


6/26



Método getElementsByTagName()

Este método regresa todos los elementos con el nombre de etiqueta especificado.Su sintaxis es:

node. get El ement sByTagName("tagname") ;

El siguiente ejemplo regresa una lista de nodos de todos los elementos

en eldocumento:

document . get El ement sByTagName( "p") ;

El siguiente ejemplo regresa una lista de nodos de todos los elementos

queson descendientes del elemento con i d="pr i nci pal ":

document . getEl ement ByI d( "pr i nci pal " ) . getEl ement sByTagName("p") ;

Lista de Nodos de DOM

El método get El ement sByTagName( ) regresa una lista de nodos. Una lista denodos es un arreglo de nodos. El siguiente código selecciona todos los nodos

en una lista de nodos.

x=document . getEl ementsByTagName( "p") ;

Los nodos de la lista de nodos pueden accesarse por su índice. Para acceder al

segundo párrafo podemos escribir:y=x[1] ;

Longitud de la Lista de Nodos de DOM

La propiedad l engt h establece el número de nodos en una lista de nodos. En el

siguiente ejemplo se obtiene la lista de todos los elementos

. Luego se itera lalista de nodos para desplegar el valor de su nodo de texto:

x=document . getEl ementsByTagName( "p") ;

f or ( i =0; i


7/26



Navegar las Relaciones de los Nodos

Las tres propiedades par ent Node, f i r st Chi l d y l as tChi l d, siguen laestructura del documento y permiten hacer viajes cortos en el documento. Porejemplo en el siguiente fragmento HTML:

Hol a mundo!

DOM es muy ut i l !

Est e ej empl o muest r a l as r el aci ones ent r e nodos.

El primer elemento

es el nodo primer hijo (f i r st Chi l d) del elemento

y el elemento es el último hijo (l as tChi l d) del elemento .El nodo padre (par ent Node) del primer elemento

y el elemento , es elelemento y el nodo padre de los elementos

dentro del elemento, es el elemento .

El elemento firstChild puede usarse para acceder al texto de un elemento:

Hel l o Wor l d!

x=document . get El ement ByI d( " i nt r o") ;document . wr i t e( x. f i r st Chi l d. nodeVal ue) ;

Nodos Raíz de DOM

Hay dos propiedades del documentos especiales que permiten acceder a loselementos:

• document . document El ement – Regresa el nodo raíz del documento.• document . body – Da acceso directo al elemento .

Información

de

un

Nodo

DOM

de

HTML

En DOM de HTML, cada nodo es un objeto. Los objetos tienen métodos ypropiedades que pueden manipularse mediante JavaScript. Tres propiedades de


8/26



los nodos son: nodeName, nodeVal ue y nodeType que contienen información delos 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 #t ext .• El nodeName del nodo del documento es siempre #document .

Nota: El nodeName siempre contiene el nombre del elemento en mayúsculas.

La Propiedad nodeValue

La propiedad nodeVal ue especifica el valor de un nodo.

• El nodeVal ue para los nodos de los elementos está indefinido.• El nodeVal ue de un nodo de texto es el texto mismo.• El nodeVal ue de un atributo es el valor del atributo.

El siguiente ejemplo recupera el valor del nodo de texto del elemento :

Hol a mundo!

x=document . get El ement ByI d( " i nt r o") ;document . wr i t e( x. f i r st Chi l d. nodeVal ue) ;

La Propiedad nodeType

La propiedad nodeType especifica el tipo de un nodo. Esta propiedad es de sololectura.


9/26



La tabla 4.1 muestra los tipos de nodos más importates.

Tabla 4.1 Tipos de nodosTipo de Elemento Tipo de Nodo

Elemento 1

Atributo 2Texto 3Comentario 8Documento 9

Cambio de los Elementos DOM de HTML

Los valores (contenido y atributos) de los elementos HTML pueden modificarseusando JavaScript, DOM de HTML y eventos.

El siguiente ejemplo cambia el color de fondo del elemento :

document . body. bgCol or=" l avender" ;

La forma más sencilla de obtener o modificar el contenido de un elemento es

mediante la propiedad i nner HTML.

El siguiente ejemplo cambia el texto de un elemento

:

Hol a mundo!

document . get El ement ByI d("p1") . i nnerHTML="Hol a de nuevo! " ;

Se puede cambiar un elemento HTML usando eventos. Un manejador de eventospermite la ejecución de código cuando un evento ocurre. Los eventos songenerados por el navegador cuando el usuario hace clic en un elemento, la páginacarga, se envía un formulario, etc.


10/26



El siguiente ejemplo cambia el color de fondo del elemento cuando sehace clic en un botón.

Se puede cambiar el valor de un elemento mediante una función. El siguienteejemplo usa una función para cambiar el texto de un elemento

cuando sehace clic en un botón:

f unct i on cambi aTexto( ) {document . get El ement ByI d( "p1" )

. i nnerHTML="Hol a de nuevo!" ;}

Hol a mundo!

Uso

del

Objeto

Style

El objeto Style de cada elemento HTML representa su estilo individual. El siguienteejemplo usa una función para cambiar el estilo del elemento cuando sehace clic en un botón:

f unct i on cambi aCol or ( ) {document . body. st yl e. backgr oundCol or=" l avender" ;

}


11/26



El siguiente ejemplo usa una función para cambiar el estilo de un elemento

cuando se hace clic en un botón:

f unct i on Cambi aEst i l o() {

document . get El ement ByI d( "p1" ) . st yl e. col or ="bl ue";document . get El ement ByI d( "p1" ) . st yl e. f ont Fami l y="Ar i al ";

}

Hol a mundo!

Eventos de DOM de HTML

Los eventos son acciones que pueden ser detectadas desde JavaScript. Cadaelemento de una página Web tiene una serie de eventos que pueden dispararfunciones de JavaScript. Por ejemplo, se puede usar el evento onclick de un botónpara indicar que la función se ejecutará cuando el usuario haga clic sobre el botón.

Se definen los eventos en los elementos de HTML.

Ejemplos de eventos:

• Clic del ratón• Cargado de una página o imagen• Pasar el ratón sobre una parte de una página Web• Selección de un elemento de entrada en un formulario HTML• Envío de un formulario HTML• Presionar una tecla

Nota: Normalmente los eventos se usan en combinación con las funciones y lasfunciones no ejecutarán antes de que el evento suceda.

El siguiente ejemplo despliega la fecha cuando se hace clic sobre un botón.


12/26



f unct i on despl i egaFecha( ) {

document . get El ement ByI d( "demo") . i nnerHTML=Dat e( ) ;}

Despl i ega Fecha

Despl i ega Fecha

Eventos onload y onUnload

Los eventos onl oad y onUnl oad son disparados cuando el usuario entra a o dejauna página.

El evento onl oad se usa, normalmente, para verificar el tipo y versión delnavegador del visitante y cargar la versión apropiada de la página Web en base aesta información.

Ambos eventos onl oad y onUnl oad son usados frecuentemente para ttrabajarcon cookies que deben establecerse cuando el usuario entra a o sale de unapágina. Por ejemplo se puede pedirle al visitante su nombre de usuario cuandorecién arriva a la página. El nombre se almacena en un cookie. Cuando elvisistante arriva de nuevo a la página, el visitante puede ser reconocido por lainformación en el cookie.

Eventos onFocus, onBlur y onChange

Los eventos onFocus, onBl ur y onChange se usan frecuentemente encombinación con validacioes de elementos de formulario.

El siguiente es un ejemplo de cómo se usa el evento onChange. Se invoca a lafunción checkEmail() cada vez que se cambia el contenido del campo de entradae-mail.

E- mai l :


13/26



Evento onSubmit

El evento onSubmi t se usa para validar todos los elementos de un formularioantes de enviarlo.

En el siguiente ejemplo, la función checkFor m( ) será invocada cuando el usuariohaga clic en el botón Submi t . Si los valores de los campos de entrada no sonaceptados, el envío es cancelado. La función checkFor m( ) regresa un valorbooleano. Si regresa true la forma será enviada, de otra manera el envío seracancelado.


14/26



Elemento de HTML

Para insertar código JavaScript en un documento HTML se usa el elementode HTML cuya sintaxis es:

codi go

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

Tabla 2.3 Atributo href del Elemento Atributo Descripc ión Valores Descripc ión

type Especifica el tipo MIMEdel código

"t ext / j avascr i pt " Para insertar código enJavaScript

src Establece el URL delarchivo externo con elcódigo.

URL Si el atributo sr c estápresente el elemento debe estarvacío.

JavaScript en el Cuerpo de un Documento HTML

El código JavaScript es interpretado conforme se va procesando el documentoHTML.

En el siguiente ejemplo, el código JavaScript colocado dentro del cuerpo deldocumento HTML, escribe la fecha actual en el elemento

cuando la página secarga en el navegador.

Despl i ega Fecha

document . get El ement ByI d("demo") . i nnerHTML=Dat e( ) ;

Note que el código JavaScript se coloca al final de la página para asegurarse queno sea ejecutado antes de que el elemento

sea creado.

Funciones de JavaScript y Eventos

No siempre se quiere que el código JavaScript sea ejecutado cuando la páginacarga. Algunas veces deseamos que el código ejecute cuando ocurre un evento.En estos casos podemos poner el código Javascript dentro de una función.


15/26



JavaScript en el Encabezado de un Documento HTML

Las funciones de JavaScript normalmente se colocan en la cabecera de unadocumento de HTML.

En el siguiente ejemplo se invoca a la función cuando se hace clic sobre un botón:

f unct i on despl i egaFecha( ) {

document . get El ement ByI d( "demo") . i nnerHTML=Dat e( ) ;}

Despl i ega Fecha

Despl i ega Fecha

JavaScript en el Encabezado y en el Cuerpo de un DocumentoHTML

Se puede colocar un ilimitado numero de elementos con código

JavaScript dentro del documento HTML y se puede tener los elementos tanto enla cabecera como en el cuerpo del documento HTML al mismo tiempo.

Se acostumbra colocar todas las funciones en la cabecera o en el final deldocumento HTML para que estén en un solo lugar y no interfieran con el contenidode la página.

JavaScript en un Archivo Externo

El código JavaScript también puede colocarse en archivos externos. Un archivo

JavaScript por lo general contiene código que va a ser usado en varias páginasWeb.

Los archivos externos con código JavaScript tienen la extensión ". j s " . El atributo"src" de el elemento apunta al nombre del archivo externo con elcódigo JavaScript.


16/26



Nota: El código JavaScript en un archivo externo no puede contener elementos.

El siguiente código muestra el código de una función JavaScript en el archivoexterno despl i egaFecha. j s:

f unct i on despl i egaFecha( ) {document . get El ement ByI d("demo") . i nnerHTML=Dat e( ) ;

}

El código siguiente muestra la página HTML que invoca el archivo externo einvoca a la función que contiene.

Despl i ega Fecha

Despl i ega Fecha

Nota: Coloque el elemento exactamente donde normalmente se colocaríael código javaScript.

Insertar Texto en el Documento HTML con JavaScript

El siguiente ejemplo inserta un elemento

con la fecha actual en el documentoHTML:

Despl i ega Fecha


" + Dat e( ) + "") ;

Nota: Evite el uso de método document . wr i t e( ) en el código JavaScript. Si lousamos dentro de una función o después de que se ha cargado la página, lapágina completa HTML será sobreescrita.


17/26



Cambiar Elementos HTML con JavaScript

En el siguiente ejemplo se escribe la fecha actual en un párrafo existente:

Despl i ega Fecha

document . get El ement ByI d("demo") . i nnerHTML=Dat e( ) ;

Note: Algunos navegadores no soportan JavaScript. Esos navegadoresdesplegarán el código JavaScript como texto. Para evitar eso, encierre el códigoJavaScript entre delimitadores de comentarios de HTML:

Despl i ega Fecha

document . get El ement ByI d( "demo") . i nnerHTML=Dat e( ) ;/ / - - >

Note el comentario de línea de JavaScript para impedir que JavaScript ejecute laetiqueta - - >.

Cuadros de Diálogo Emergentes de JavaScript

JavaScript tiene tres tipos de cuadros de diálogos emergentes: Cuadro de Alerta,Cuadro de Confirmación y Cuadro con Campo de Texto.

Cuadro de Alerta

Un Cuadro de Alerta se usa cuando se quiere asegurar que la informaciónproviene del usuario. Cuando un Cuadro de Alerta aparece, el usuario tiene quehacer clic en el botón "OK" para continuar.

La sintaxis de un Cuadro de Alerta es:


18/26



alert("texto");

Ejemplo de un Cuadro de Alerta

f unct i on muest r a_al er t a( ) {

al er t ( "Soy un Cuadr o de Al er t a! " ) ;}

Cuadro de Confirmación

Un Cuadro de Confirmación se usa si queremos que el usuario verifique o aceptealgo. Cuando un Cuadro de Confirmación aparece, el usuario tiene que hacer clicen el botón "OK" o en el botón "Cancel" para continuar. Si el usuario hace clic enel botón "OK", el cuadro regresa t rue. Si el usuario hace clic en el botón"Cancel", el cuadro regresa el valor de f al se.

La sintaxis de un Cuadro de Confirmación es:

confirm("texto");

Ejemplo de un Cuadro de Confirmación

f unct i on muest r a_conf i r maci on( ) {var r =conf i r m( "Presi ona un boton") ;

i f ( r ==t r ue) {al er t ( "Presi onast e OK! ") ;

}el se {

al er t ( "Presi onast e Cancel ! ") ;}

}


19/26



Cuadro con Campo de Texto

Un Cuadro con Campo de Texto se usa si se quiere que el usuario suministre unvalor antes de entrar a una página. Cuando un Cuadro con Campo de Textoaparece, el usuario tiene que hacer clic en el botón "OK" o en el botón "Cancel"para continuar después de suministrar un valor. Si el usuario hace clic en el botón"OK", el cuadro regresa el valor suministrado. Si el usuario hace clic en el botón"Cancel", el cuadro regresa el valor de nul l .

La sintaxis de un Cuadro Campo de Texto es:prompt ( "text","valorOmision");

Ejemplo de un cuadro con Campo de Texto

f unct i on capt ur a_nombre( ) {

var nombre=prompt ( "Dame tu nombre", " J uan Perez" ) ;i f ( nombre!=nul l && nombre!="") {


Hol a " + nombre+ "! Como est as?" ) ;

}}

Validación de Formularios con JavaScript

La única forma confiable de validar los datos capturados en un formulario es dellado del servidor. No se debe validar sólo del cliente mediante JavaScript, por lassiguientes razones:


20/26



• Un dispositivo puede no tener un intérprete de JavaScript.• Un usuario puede haber desabilitado la ejecución de código JavaScript en

el navegador.• Un administrador puede haber desabilitado JavaScript en una red.

Sin embargo, además de validar los datos de todos los formularios en el servidor,es recomendable validarlos usando JavaScript del lado del cliente también. Laventaja, si JavaScript está disponible, es que en el caso de errores en los datos lavalidación nos ahorra el viaje al servidor para detectar los errores, lo cual es útilsobretodo para los usuarios con conexiones lentas.

Hay dos formas de validación del lado del cliente:

• Validar los datos cuando se presiona el botón enviar.• Validar cada dato campo por campo, sobre todo con formularios largos y

revalidar toda la forma al presionar el botón enviar.

Ejemplo

El siguiente código contiene una serie de funciones para validar que un campo noeste vacío, para valida una edad y para validar una fecha. Las funciones están enun archivo externo JavaScript. Las principales características de este código son:

• En la función val i daci onComun( ) se detecta si el navegador es unaversión que no soporta los métodos de DOM de HTML empleados. En

estos casos no se realiza la validación del lado del cliente y se delega lavalidación al servidor.• La detección se realiza verificando si el navegador tiene definidos algunos

métodos como document . get El ement ByI d( ) .• 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 / // / Funci ones de val i daci on de f or mul ar i os de J avascri pt ./ /

var nbsp = 160; / / caract er de espaci ovar node_t ext = 3; / / Ti po de nodo de t exto de DOMvar cadenaVaci a = / \̂ s*$/ ;var campoEnf ocarGl obal ; / / Vari abl e gl obal para al macenar elcampoEnf ocar

/ / enf ocaAt r asado( )/ /


21/26



/ / Hace que el el ement o al macenado en l a var i abl e gl obal/ / campoVal i darGl obal Del ayed obt enca el f oco. Aj ust e para/ / r emedi ar un bug de I E y ot r os

f unct i on enf ocaAt r asado( ) {campoEnf ocarGl obal . f ocus( ) ;

}

/ / enf oca( )/ // / Hace que el el ement o del par amet r o obt enga el f oco/ /

/ / Par amet r os:/ / - campoEnf ocar: El ement o a obt ener el f ocof unct i on enf oca( campoEnf ocar ) {

/ / Guarda campoEnf ocar en l a vari abl e gl obal para conservar el val or/ / cuando l a f unci on t ermi necampoEnf ocarGl obal = campoEnf ocar ;set Ti meout ( ' enf ocaAt r asado( ) ' , 100) ;

}

/ / t r i m( )/ // / El i mi na l os car acteres bl ancos al pr i nci pi o o f i nal/ / de l a cadena del parametr o/ // / Par amet r os/ / - st r : Cadena a pr ocesarf uncti on t r i m( str ) {

return str . repl ace( / \̂ s+| \ s+$/ g, ' ' ) ;

}

/ / despl i egaMensaj e( )/ // / Despl i ega un mensaj e de er r or o avi so/ // / Par amet r os

/ / - i dMensaj e: i d del el ement o en que se despl egara el mensaj e/ / - cl aseMensaj e: Cl ase asoci ada al mensaj e para usarse en CSS,/ / warn/ er ror./ / - mensaj e: Mensaj e a despl egar/ /

/ / Debe l l amarse ant es a l a f unci on val i daci onComunf unct i on despl i egaMensaj e( i dMensaj e, cl aseMensaj e, mensaj e) {

var mensaj eDespl egar ;

/ / Si el mensaj e a despl egar es una cadena vací ai f ( cadenaVaci a. t est ( mensaj e) )

/ / Hacer que l a cadena a despl egar sea el caracter de espaci omensaj eDespl egar = St r i ng. f r omChar Code(nbsp) ;


22/26



el se/ / Hacer que l a cadena a despl egar sea el mensaj emensaj eDespl egar = mensaj e;

/ / Despl i ega el mensaj evar el em= document . getEl ement ByI d( i dMensaj e) ;

el em. f i r st Chi l d. nodeVal ue = mensaj eDespl egar;

/ / Est abl ece l a cl ase CSS para est abl ecer l as pr opi edades del mensaj eel em. cl assName = cl aseMensaj e;

}

/ / val i daci onComun( )/ // / Codi go comun para t odas l as f unci ones de val i daci on:/ / Si l a ver si on del navegador es vi ej a, pasa l a val i daci on/ / par a que l a val i daci on l a haga el ser vi dor/ // / Par amet r os:/ / - campoVal i dar : El ement o a val i dar

/ / - i dMensaj e: i d del el ement o en que se despl egara el mensaj e/ / - r equer i do: Campo r equer i do/ // / Regr esa:/ / - t r ue: Pasa l a val i daci on/ / - f al se: Fal l a l a val i dat i on/ / - pr osi gue: Cont i nua con l a si gui ent e val i daci onvar prosi gue = 2;

f unct i on val i daci onComun( campoVal i dar, i dMensaj e, r equer i do) {/ / Si el navegador es vi ej oi f ( ! document . get El ement ByI d)

/ / Dej a l a val i daci on al ser vi dorr et ur n t r ue;

var el em= document . getEl ement ByI d( i dMensaj e) ;

/ / Si el navegador es vi ej o, dej a l a val i daci on al ser vi dori f ( !el em. f i rst Chi l d) r et urn t rue;/ / El el ement o en que se despl egara el mensaj e no es el corr ectoi f ( el em. f i r st Chi l d. nodeType ! = node_t ext ) r et ur n t r ue;

/ / Si el campo a val i dar esta vaci oi f ( cadenaVaci a. t est ( campoVal i dar . val ue) ) {

/ / Si el campo est a vaci o y es obl i gat ori o

i f ( requeri do) {despl i egaMensaj e( i dMensaj e, "er r or ",

"Err or : Se r equi er e un val or ") ;enf oca(campoVal i dar) ;return f al se;


23/26



}/ / Si el campo est a vaci o y no es obl i gat or i oel se {

/ / Borr a un posi bl e mensaj e de er r or previ odespl i egaMensaj e( i dMensaj e, "warn", "" ) ;r et ur n t r ue;

}}r et ur n pr osi gue;

}

/ / val i daPresent e( )/ // / Val i da si se ha t ecl aeado al go en el campo de text o/ // / Par amet r os:/ / - campoVal i dar : El ement o a val i dar/ / - i dMensaj e: i d del el ement o en que se despl egara el mensaj e/ // / Regr esa:

/ / t r ue si se t ecl aeado al go, f al so en caso cont r ar i o/ /f unct i on val i daPr esent e( campoVal i dar, i dMensaj e) {

var st at = val i daci onComun (campoVal i dar, i dMensaj e, t r ue) ;i f ( stat ! = pr osi gue) return stat ;

/ / Borr a un posi bl e mensaj e de err or previ odespl i egaMensaj e ( i dMensaj e, "warn", "" ) ;

r et ur n t r ue;

}

/ / val i daEdad( )/ // / Val i da l a edad de una persona. Una edad t i ene de 1 a 3 dí gi t os/ / y edad en [ 0, edadMax]/ /

/ / Par amet r os:/ / - edadMax: Edad maxi ma/ / - campoVal i dar : El ement o a val i dar/ / - i dMensaj e: i d del el ement o en que se despl egara el mensaj e/ / - r equer i do: Campo r equer i do

/ // / Regr esa:/ / t rue s i ok

f unct i on val i daEdad( edadMax, campoVal i dar, i dMensaj e, r equer i do) {var st at = val i daci onComun (campoVal i dar, i dMensaj e, r equer i do) ;i f ( stat ! = prosi gue) r et ur n stat;

var edad = t r i m( campoVal i dar. val ue) ;


24/26



var r eEdad = / [̂ 0- 9] {1, 3}$/

i f ( ! r eEdad. t est ( edad) ) {

despl i egaMensaj e ( i dMensaj e, "err or ", "Err or : Edad no vál i da") ;enf oca(campoVal i dar) ;r et urn f al se;

}

i f ( edad > edadMax) {despl i egaMensaj e ( i dMensaj e, "err or ", "Err or : Edad no vál i da") ;enf oca(campoVal i dar) ;

r et urn f al se;}

/ / Borr a un posi bl e mensaj e de err or previ odespl i egaMensaj e ( i dMensaj e, "warn", "" ) ;r et ur n t r ue;

}

/ / val i daEmai l ( )

/ // / Val i da una di r ecci on de cor r eo/ // / Par amet r os:/ / - campoVal i dar : El ement o a val i dar/ / - i dMensaj e: i d del el ement o en que se despl egara el mensaj e/ / - r equer i do: Campo r equer i do/ /

/ / Regr esa:

/ / t rue s i ok/ /f unct i on val i daEmai l ( campoVal i dar , i dMensaj e, r equer i do) {

var st at = val i daci onComun (campoVal i dar, i dMensaj e, r equer i do) ;i f ( stat ! = prosi gue) r et ur n stat;

var emai l = t r i m( campoVal i dar. val ue) ;

var reEmai l = / (̂ [ \ w- ] +( ?: \ . [ \ w- ] +) *) @( ( ?: [ \ w- ] +\ . ) *\ w[ \ w-] {0, 66}) \ . ( [ a- z]{2, 6}( ?: \ . [ a- z]{2}) ?)$/ i ;

i f ( ! reEmai l . t est( emai l ) ) {despl i egaMensaj e ( i dMensaj e, "err or ", "Err or : E- mai l no vál i do") ;

enf oca(campoVal i dar) ;r et urn f al se;

}

/ / Borr a un posi bl e mensaj e de err or previ odespl i egaMensaj e ( i dMensaj e, "warn", "" ) ;r et ur n t r ue;

}


25/26



El siguiente código muestra una página HTML en la que se utilizan las funcionesJavaScript anteriores para validar cada campo conforme se van capturandovalores así como al enviar el formulario completo. De existir un error en alguno delos campos, se despliega un mensaje de error a la derecha del campo con el error.

Las principales características de este código son:

• Utiliza un botón de enviar estándar y su atributo onSubmi t para invocar lafunción que valida todo el formulario.

• Las validaciones de cada campo individual se hacen mediante el atributoonChange de cada campo para invocar a la función que valida cadacampo.

contactame.html

Cont á ct ame

f uncti on val i daEnvi ar ( ) {var el em;var er r ores=0;

/ / Ej ecut a l as val i daci ones en orden i nver so para que el el ement o

/ / con el enf oque sea el pr i mer o con er r ori f ( ! val i daEmai l ( document . f or ms. cuest i onar i o. emai l ,

' msj Emai l ' , t r ue) ) er r or es += 1;i f ( ! val i daEdad( 150, document . f orms. cuest i onar i o. edad, ' msj Edad' ,

t r ue) ) er r ores += 1;i f ( ! val i daPr esent e( document . f or ms. cuest i onar i o. nombr e,

' msj Nombr e' ) ) err ores += 1;r etur n ( er r ores==0) ;

};

Cont &aacut e; ct ame

Mi s Dat os Personal es

Nombre *


26/26


Edad *

E- mai l *

Para resaltar los mensajes de aviso o de error, el código JavaScript inserta estilospara colorear el texto de los mensajes usando las siguientes reglas de estilo:

estilos.css. . .*. err or {

col or: red;}

*. warn {col or: bl ue;

}. . .

Tema 4 - DOM de HTML y JavaScript

Documents

Transcript of Tema 4 - DOM de HTML y JavaScript