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 .
8/17/2019 Tema 4 - DOM de HTML y JavaScript
2/26
118 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
3/26
Tema 4 DOM de HTML y JavaScript 119
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
4/26
120 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
5/26
Tema 4 DOM de HTML y JavaScript 121
ITSON Manuel Domitsu Kono
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") ;
8/17/2019 Tema 4 - DOM de HTML y JavaScript
6/26
122 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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
8/17/2019 Tema 4 - DOM de HTML y JavaScript
7/26
Tema 4 DOM de HTML y JavaScript 123
ITSON Manuel Domitsu Kono
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/17/2019 Tema 4 - DOM de HTML y JavaScript
8/26
124 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
9/26
Tema 4 DOM de HTML y JavaScript 125
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
10/26
126 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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" ;
}
8/17/2019 Tema 4 - DOM de HTML y JavaScript
11/26
Tema 4 DOM de HTML y JavaScript 127
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
12/26
128 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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 :
8/17/2019 Tema 4 - DOM de HTML y JavaScript
13/26
Tema 4 DOM de HTML y JavaScript 129
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
14/26
130 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
15/26
Tema 4 DOM de HTML y JavaScript 131
ITSON Manuel Domitsu Kono
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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
16/26
132 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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
document . wr i t e( "
" + 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.
8/17/2019 Tema 4 - DOM de HTML y JavaScript
17/26
Tema 4 DOM de HTML y JavaScript 133
ITSON Manuel Domitsu Kono
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:
8/17/2019 Tema 4 - DOM de HTML y JavaScript
18/26
134 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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 ! ") ;}
}
8/17/2019 Tema 4 - DOM de HTML y JavaScript
19/26
Tema 4 DOM de HTML y JavaScript 135
ITSON Manuel Domitsu Kono
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!="") {
document . wr i t e( "
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:
8/17/2019 Tema 4 - DOM de HTML y JavaScript
20/26
136 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
• 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( )/ /
8/17/2019 Tema 4 - DOM de HTML y JavaScript
21/26
Tema 4 DOM de HTML y JavaScript 137
ITSON Manuel Domitsu Kono
/ / 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) ;
8/17/2019 Tema 4 - DOM de HTML y JavaScript
22/26
138 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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;
8/17/2019 Tema 4 - DOM de HTML y JavaScript
23/26
Tema 4 DOM de HTML y JavaScript 139
ITSON Manuel Domitsu Kono
}/ / 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) ;
8/17/2019 Tema 4 - DOM de HTML y JavaScript
24/26
140 DOM de HTML y JavaScript
ITSON Manuel Domitsu Kono
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;
}
8/17/2019 Tema 4 - DOM de HTML y JavaScript
25/26
Tema 4 DOM de HTML y JavaScript 141
ITSON Manuel Domitsu Kono
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 *
8/17/2019 Tema 4 - DOM de HTML y JavaScript
26/26
142 DOM de HTML y JavaScript
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;
}. . .
Top Related