DOM

Introduccioacuten a Javascript (2)

Objetos

Crear y usar Objetos

Los Objetos son algunos de los elementos maacutes poderosos que tenemos dentro de Javascript Un objeto es una coleccioacuten de propiedades y una propiedad es una asociacioacuten entre un nombre y un valor Un valor de propiedad puede ser una funcioacuten la cual es conocida entonces como un meacutetodo del objeto Ademaacutes de los objetos que estaacuten predefinidos en el navegador podemos definir nuestros propios objetos Los Objetos nos permiten agrupar y relacionar datos

3

Objetos

Crear y usar Objetos

Para crear un objeto lo hacemos entre llaves y a la vez que lo declaramos podemos incluir datos dentro de sus propiedades var auto =

autocolor = rojordquo autodueno = Manolordquo automarca = ferrarirdquo

documentwrite(ldquomi auto es de color ldquo + autocolor )

Hemos visto que para acceder a los elementos de un objeto se realiza escribiendo nombreobjetopropiedad

4

Objeto auto

Objetos

Crear y usar Objetos

5

Crea un nuevo objeto llamado casa Agreacutegale propiedades como color direccioacuten duentildeo o metros

cuadrados Muestra el valor de esas propiedades por pantalla

Objetos

Meacutetodos

Los meacutetodos son funciones que existen dentro de un objeto Siguen la misma loacutegica que las propiedades la diferencia es que al ser funciones se definen como tales Llamar a un meacutetodo es similar a acceder a una propiedad pero se agrega () al final del nombre del meacutetodo posiblemente con argumentos var auto = autocolor = rojordquo

autodueno = Manolordquo automarca = ferrarirdquo autosaludo = function() documentwrite(ldquomi auto es de color ldquo + autocolor ) autosaludo()

6

Creamos el meacutetodo saludo

Llamamos al meacutetodo saludo

Objetos

Meacutetodos

Una de las caracteriacutesticas importantes que tienen los objetos es que nos permiten acceder a sus propiedades incluso sin saber el nombre de objeto Por lo tanto podemos sustituir el nombre por this var auto = autocolor = rojordquo

autodueno = Manolordquo automarca = ferrarirdquo autosaludo = function() documentwrite(ldquoEl auto de ldquo + thisdueno + rdquo es un ldquo + thismarca + ldquo de color ldquo + thiscolor ) autosaludo()

7

Sustituimos el nombre del objeto por this

Objetos

Instancias

Las instancias nos permiten crear diferentes copias de nuestros objetos Asiacute podremos tener como una especie de clones que van a tener los mismos elementos que teniacutea el objeto original pero pudiendo cambiarle la informacioacuten

var auto = function() thiscolor

thisdueno thismarca thissaludo = function() documentwrite(ldquoEl auto de ldquo + thisdueno + rdquo es un ldquo + thismarca + ldquo de color ldquo + thiscolor ) Hasta aquiacute hemos definido un objeto llamado auto que nos serviraacute para crear sus ldquoclonesrdquo

8

Ahora definimos el objeto como una funcioacuten e incluimos dentro de eacutel las propiedades

Cambiamos por this todos los nombres del meacutetodo y eliminamos sus valores

Objetos

Instancias

Para crear los ldquoclonesrdquo del objeto que hemos creado lo hacemos mediante el comando new var pepe = new auto() pepecolor = ldquoverderdquo pepedueno = ldquoPeperdquo pepemarca = ldquoFerrarirdquo pepesaludo() De este modo podemos crear una cantidad indefinida de instancias con los mismos elementos que para llamarlas uacutenicamente tendriacuteamos que invocar a su nombre

9

Ahora la instancia pepe contiene los mismos elementos que el objeto auto

Asiacute invocamos la instancia para que nos muestre el saludo

Objetos

Instancias

10

Crea una funcioacuten llamada estudiante y asiacutegnale propiedades como nombre pais y nivel usando this

Agrega tambieacuten un meacutetodo que muestre los datos del estudiante en el HTML ej rdquoPedro vive en Salamanca y estudia 6ordm de Primariardquo

Crea al menos 5 diferentes instancias de estudiante con datos distintos

Prueba mostrar los diferentes datos de cada instancia de estudiante en tu documento HTML

DOM

Document Object Model (DOM)

La creacioacuten del Document Object Model o DOM es una de las innovaciones que maacutes ha influido en el desarrollo de las paacuteginas web dinaacutemicas y de las aplicaciones web maacutes complejas

Con el Modelo de Objetos del Documento los programadores pueden construir documentos navegar por su estructura y antildeadir modificar o eliminar elementos y contenido Se puede acceder a cualquier cosa que se encuentre en un documento HTML y se puede modificar eliminar o antildeadir usando el Modelo de Objetos del Documento salvo algunas excepciones

12

DOM

Document Object Model (DOM)

DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos que estaacuten interconectados y que representan los contenidos de las paacuteginas web y las relaciones entre ellos Por su aspecto la unioacuten de todos los nodos se llama aacuterbol de nodos

13

DOM

Document Object Model (DOM)

14

DOM

Document Object Model (DOM)

La raiacutez del aacuterbol de nodos de cualquier paacutegina HTML siempre es la misma un nodo de tipo especial denominado Document

A partir de ese nodo raiacutez cada etiqueta HTML se transforma en un nodo de tipo Element La conversioacuten de etiquetas en nodos se realiza de forma jeraacuterquica

ltpgtEsta paacutegina es ltstronggt muy sencillaltstronggtltpgt

15

DOM

Document nodo raiacutez del que derivan todos los demaacutes nodos del aacuterbol

Element representa cada una de las etiquetas XHTML Se trata del uacutenico nodo que puede contener atributos y el uacutenico del que pueden derivar otros nodos

Attr se define un nodo de este tipo para representar cada uno de los atributos de las etiquetas XHTML es decir uno por cada par atributo=valor

Text nodo que contiene el texto encerrado por una etiqueta XHTML

Commentrepresenta los comentarios incluidos en la paacutegina XHTML

Los otros tipos de nodos existentes que no se van a considerar son DocumentType CDataSection DocumentFragment Entity EntityReference ProcessingInstruction y Notation

Tipos de nodos

16

DOM DOM proporciona dos meacutetodos alternativos para acceder a un nodo especiacutefico acceso a traveacutes de sus nodos padre y acceso directo

Es importante recordar que el acceso a los nodos su modificacioacuten y su eliminacioacuten solamente es posible cuando el aacuterbol DOM ha sido construido completamente es decir despueacutes de que la paacutegina HTML se cargue por completo

Acceso directo a los nodos

17

DOM

getElementsByTagName() Obtiene todos los elementos de la paacutegina XHTML cuya etiqueta sea igual que el paraacutemetro que se le pasa a la funcioacuten El siguiente ejemplo muestra coacutemo obtener todos los paacuterrafos de una paacutegina HTML

var parrafos = documentgetElementsByTagName(p)

De este modo se puede obtener el primer paacuterrafo de la paacutegina de la siguiente manera

var primerParrafo = parrafos[0]

De la misma forma se podriacutean recorrer todos los paacuterrafos de la paacutegina con el siguiente coacutedigo

for(var i=0 iltparrafoslength i++) var parrafo = parrafos[i]

Acceso directo a los nodos

18

DOM

getElementsByTagName() Para mostrar el contenido de cada una de las etiquetas tenemos que utilizar la propiedad textContent

var txt = nodoSpan[0]textContent

documentwrite(txt)

El ejemplo anterior nos mostrariacutea por pantalla el elemento 0 del array nodoSpan que hemos almacenado en la variable txt

Acceso directo a los nodos

19

DOM getElementsByName() La funcioacuten getElementsByName() es similar a la anterior pero en este caso se buscan los elementos cuyo atributo name sea igual al paraacutemetro proporcionado En el siguiente ejemplo se obtiene directamente el uacutenico paacuterrafo con el nombre indicado

var parrafoEspecial=documentgetElementsByName(especial)

ltp name=pruebagtltpgt ltp name=especialgtltpgt ltpgtltpgt

Acceso directo a los nodos

20

DOM getElementById() Es la maacutes utilizada cuando se desarrollan aplicaciones web dinaacutemicas Se trata de la funcioacuten preferida para acceder directamente a un nodo y poder leer o modificar sus propiedades Devuelve el elemento HTML cuyo atributo id coincide con el paraacutemetro indicado en la funcioacuten

var cabecera = documentgetElementById(cabecera)

ltdiv id=cabeceragt lta href= id=logogtltagt

ltdivgt

Acceso directo a los nodos

21

DOM

Crear y antildeadir a la paacutegina un nuevo elemento HTML sencillo consta de cuatro pasos diferentes 1 Creacioacuten de un nodo de tipo Element que represente al elemento 2 Creacioacuten de un nodo de tipo Text que represente el contenido del

elemento 3 Antildeadir el nodo Text como nodo hijo del nodo Element 4 Antildeadir el nodo Element a la paacutegina en forma de nodo hijo del

nodo correspondiente al lugar en el que se quiere insertar el elemento

Crear nodo de tipo Element var parrafo = documentcreateElement(p) Crear nodo de tipo Text var contenido = documentcreateTextNode(Hola Mundo) Antildeadir el nodo Text como hijo del nodo Element parrafoappendChild(contenido) Antildeadir el nodo Element como hijo de la pagina documentbodyappendChild(parrafo)

Creacioacuten de nodos

22

DOM

El proceso de creacioacuten de nuevos nodos puede llegar a ser tedioso ya que implica la utilizacioacuten de tres funciones DOM createElement(etiqueta) crea un nodo de tipo Element que

representa al elemento XHTML cuya etiqueta se pasa como paraacutemetro

createTextNode(contenido) crea un nodo de tipo Text que almacena el contenido textual de los elementos XHTML

nodoPadreappendChild(nodoHijo) antildeade un nodo como hijo de otro nodo Se debe utilizar al menos dos veces con los nodos habituales en primer lugar se antildeade el nodo Text como hijo del nodo Element y a continuacioacuten se antildeade el nodo Element como hijo de alguacuten nodo de la paacutegina

Creacioacuten de nodos

23

DOM

insertBefore nos permite elegir un nodo del documento e incluir otro antes que eacutel Su sintaxis es

elemento_padreinsertBefore(nuevo_nodonodo_de_referencia)

Si tuvieacuteramos un fragmento de un documento como eacuteste ltdiv id=parentElementgt ltp id=childElementgtPrimer paacuterrafoltpgt ltp id=childElement2gtSegundo paacuterrafoltpgt ltdivgt

y quisieacuteramos antildeadir un nuevo paacuterrafo antes del segundo lo hariacuteamos asiacute var parrafo = documentcreateElement(p) var contenido = documentcreateTextNode(Nuevo paacuterrafo insertado) parrafoappendChild(contenido) Obtenemos la referencia al elemento antes de insertarlo var sp2 = documentgetElementById(childElement2) Obtenemos la referencia al elemento padre var parentDiv = sp2parentNode Insertamos el nuevo elemento en el DOM antes de childElement2 que es sp2 parentDivinsertBefore(parrafo sp2)

Creacioacuten de nodos

24

DOM

En este caso solamente es necesario utilizar la funcioacuten removeChild()

var parrafo = documentgetElementById(provisional)

parrafoparentNoderemoveChild(parrafo)

Eliminacioacuten de nodos

ltp id=provisionalgtltpgt

La funcioacuten removeChild() requiere como paraacutemetro el nodo que se va a eliminar Ademaacutes esta funcioacuten debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar Cuando se elimina un nodo tambieacuten se eliminan automaacuteticamente todos los nodos hijos que tenga

25

DOM Crear un programa que a partir de un div inicial con un

pequentildeo texto pueda antildeadir y eliminar nodos hijos

Crear un programa que a partir de un div inicial con un pequentildeo texto pueda antildeadir e intercambiar nodos hijos

26

DOM

Para acceder a su valor simplemente se indica el nombre del atributo HTML detraacutes del nombre del nodo

var enlace = documentgetElementById(enlace)

alert(enlacehref) muestra httpwwwcom

lta id=enlace href=httpwwwcomgtEnlaceltagt

En el ejemplo anterior se obtiene el nodo DOM que representa el enlace mediante la funcioacuten documentgetElementById() A continuacioacuten se obtiene el atributo href de enlace mediante enlacehref Para obtener por ejemplo el atributo id se utilizariacutea enlaceid

Acceso directo a los atributos HTML

27

DOM Una vez que hemos seleccionado un elemento podemos modificar cualquiera de sus propiedades incluso su contenido Esto lo realizamos con la propiedad innerHTML que permite acceder al texto del nodo seleccionado Asiacute asignaacutendole un nuevo contenido con una variable podemos cambiarlo

innerHTML accede al texto del nodo seleccionado

documentgetElementById(rdquoidSeleccionado)innerHTML = nuevoTexto

Cambio del contenido HTML de un nodo

28

DOM

Con el elemento seleccionado tambieacuten podemos modificar cualquiera de la propiedades de CSS utilizando el atributo style seguido de cualquiera de las propiedades CSS de que disponga ese elemento

stylepropiedad modifica cualquier estilo

documentgetElementById(childElement2)stylecolor = FF0000rdquo

Cambio del estilo CSS de un nodo

29

Estilos de un elemento mostrados con el inspector de Google Chrome

DOM La transformacioacuten del nombre de las propiedades CSS compuestas consiste en eliminar todos los guiones medios (-) y escribir en mayuacutescula la letra siguiente a cada guioacuten medio A continuacioacuten se muestran algunos ejemplos

bull font-weight se transforma en fontWeight

bull line-height se transforma en lineHeight

bull border-top-style se transforma en borderTopStyle

bull list-style-image se transforma en listStyleImage

Cambio del estilo CSS de un nodo

30

Eventos

Evento Descripcioacuten Elementos para los que estaacute definido

onblur Deseleccionar el elemento ltbuttongt ltinputgt ltlabelgt ltselectgtlttextareagt ltbodygt

onchange Deseleccionar un elemento que se ha modificado

ltinputgt ltselectgt lttextareagt

onclick Pinchar y soltar el ratoacuten Todos los elementos

ondblclick Pinchar dos veces seguidas con el ratoacuten

Todos los elementos

onfocus Seleccionar un elemento ltbuttongt ltinputgt ltlabelgt ltselectgtlttextareagt ltbodygt

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y ltbodygt

onkeypress Pulsar una tecla Elementos de formulario y ltbodygt

onkeyup Soltar una tecla pulsada Elementos de formulario y ltbodygt

onload La paacutegina se ha cargado completamente

ltbodygt

onmousedown Pulsar (sin soltar) un botoacuten del ratoacuten Todos los elementos

onmousemove Mover el ratoacuten Todos los elementos

Modelo baacutesico de eventos

32

Eventos

Evento Descripcioacuten Elementos para los que estaacute definido

onmouseout El ratoacuten sale del elemento (pasa por encima de otro elemento)

Todos los elementos

onmouseover El ratoacuten entra en el elemento (pasa por encima del elemento)

Todos los elementos

onmouseup Soltar el botoacuten que estaba pulsado en el ratoacuten

Todos los elementos

onreset Inicializar el formulario (borrar todos sus datos)

ltformgt

onresize Se ha modificado el tamantildeo de la ventana del navegador

ltbodygt

onselect Seleccionar un texto ltinputgt lttextareagt

onsubmit Enviar el formulario ltformgt

onunload Se abandona la paacutegina (por ejemplo al cerrar el navegador)

ltbodygt

Modelo baacutesico de eventos

33

Eventos Las funciones o coacutedigo JavaScript que se definen para cada evento se denominan manejador de eventos y como JavaScript es un lenguaje muy flexible existen varias formas diferentes de indicar los manejadores

bull Manejadores como atributos de los elementos HTML

bull Manejadores como funciones JavaScript externas

bull Manejadores semaacutenticos

Manejadores de eventos

34

Eventos En este meacutetodo se definen atributos HTML con el mismo nombre que los eventos que se quieren manejar En el ejemplo soacutelo quiere controlar el evento de click con el ratoacuten cuyo nombre es onclick Asiacute el elemento HTML para el que se quiere definir este evento debe incluir un atributo llamado onclick

ltinput type=button value=boton onclick=alert(Gracias) gt

Manejadores de eventos como atributos HTML

35

Eventos En este otro ejemplo cuando el usuario pincha sobre el elemento ltdivgt se muestra un mensaje y cuando el usuario pasa el ratoacuten por encima del elemento se muestra otro mensaje

ltdiv onclick=alert(lsquoclick con el ratoacuten) onmouseover=alert(Acabas de pasar el ratoacuten por encima)gt Puedes pinchar sobre este elemento o simplemente pasar el ratoacuten por encima ltdivgt

Manejadores de eventos como atributos HTML

Este otro ejemplo incluye una de las instrucciones maacutes utilizadas en las aplicaciones JavaScript maacutes antiguas

ltbody onload=alert(La paacutegina se ha cargado completamente)gt ltbodygt

36

Eventos JavaScript define una variable especial llamada this que vimos anteriormente y que se emplea en algunas teacutecnicas avanzadas de programacioacuten para facilitar el trabajo

Si no se utiliza la variable this el coacutedigo necesario para modificar el color de los bordes seriacutea el siguiente

ltdiv id=contenidos style=width150px height60px borderthin solid silver onmouseover=documentgetElementById(contenidos) styleborderColor=black onmouseout=documentgetElementById(contenidos)styleborderColor=silvergt Seccioacuten de contenidos ltdivgt

Manejadores de eventos y variable this

37

Eventos El coacutedigo anterior es demasiado largo y demasiado propenso a cometer errores Dentro del coacutedigo de un evento JavaScript crea automaacuteticamente la variable this que hace referencia al elemento HTML que ha provocado el evento

Asiacute el ejemplo anterior se puede reescribir de la siguiente manera

ltdiv id=contenidos style=width150px height60px borderthin solid silver onmouseover=thisstyleborderColor=black onmouseout=thisstyleborderColor=silvergt

Seccioacuten de contenidos ltdivgt

Manejadores de eventos y variable this

38

Eventos Esta teacutecnica consiste en extraer todas las instrucciones de JavaScript y agruparlas en una funcioacuten externa Una vez definida la funcioacuten en el atributo del elemento HTML se incluye el nombre de la funcioacuten para indicar que es la funcioacuten que se ejecuta cuando se produce el evento Es la teacutecnica que hemos venido usando en la mayoriacutea de ejemplos

La llamada a la funcioacuten se realiza de la forma habitual indicando su nombre seguido de los pareacutentesis y de forma opcional incluyendo todos los argumentos y paraacutemetros que se necesiten

Manejadores de eventos como funciones externas

39

Eventos

Manejadores de eventos como funciones externas

40

El principal inconveniente de este meacutetodo es que en las funciones externas no se puede seguir utilizando la variable this y por tanto es necesario pasar esta variable como paraacutemetro a la funcioacuten

function resalta(elemento) switch(elementostyleborderColor) case silver elementostyleborderColor =black break case black elementostyleborderColor= silver

break

ltdiv style=width150px height60px borderthin solid silver onmouseover=resalta(this) onmouseout=resalta(this)gt Seccioacuten de contenidos ltdivgt

Eventos La propiedad type indica el tipo de evento producido lo que es uacutetil cuando una misma funcioacuten se utiliza para manejar varios eventos

var tipo = eventtype

La propiedad type devuelve el tipo de evento producido que es igual al nombre del evento pero sin el prefijo on

Informacioacuten sobre el evento

41

Eventos

Informacioacuten sobre el evento

42

A partir de la paacutegina web proporcionada completar el coacutedigo JavaScript para que Cuando se pinche sobre el primer enlace se oculte su seccioacuten relacionada Cuando se vuelva a pinchar sobre el mismo enlace se muestre otra vez esa

seccioacuten de contenidos Completar el resto de enlaces de la paacutegina para que su comportamiento sea

ideacutentico al del primer enlace Cuando una seccioacuten se oculte debe cambiar el mensaje del enlace asociado

Descargar paacutegina HTML

Eventos La forma maacutes sencilla de obtener la informacioacuten sobre la tecla que se ha pulsado es mediante el evento onkeypress La informacioacuten que proporcionan los eventos onkeydown y onkeyup se puede considerar como maacutes teacutecnica ya que devuelven el coacutedigo interno de cada tecla y no el caraacutecter que se ha pulsado

A continuacioacuten se incluye una lista con todas las propiedades diferentes de todos los eventos de teclado

Informacioacuten sobre el evento

43

Evento keydown Mismo comportamiento en todos los navegadores bull Propiedad keyCode coacutedigo interno de la tecla bull Propiedad charCode no definido

Eventos

Evento keypress Internet Explorer bull Propiedad keyCode el coacutedigo del caraacutecter de la tecla que se

ha pulsado bull Propiedad charCode no definido Resto de navegadores bull Propiedad keyCode para las teclas normales no definido Para

las teclas especiales el coacutedigo interno de la tecla bull Propiedad charCode para las teclas normales el coacutedigo del

caraacutecter de la tecla que se ha pulsado Para las teclas especiales 0

Evento keyup Mismo comportamiento en todos los navegadores bull Propiedad keyCode coacutedigo interno de la tecla bull Propiedad charCode no definido

Informacioacuten sobre el evento

44

Eventos

La informacioacuten maacutes relevante sobre los eventos relacionados con el ratoacuten es la de las coordenadas de la posicioacuten del puntero del ratoacuten Las coordenadas maacutes sencillas son las que se refieren a la posicioacuten del puntero respecto de la ventana del navegador que se obtienen mediante las propiedades clientX y clientY

function muestraInformacion(elEvento) var evento = elEvento || windowevent var coordenadaX = eventoclientX var coordenadaY = eventoclientY alert(Has pulsado el ratoacuten en la posicioacuten + coordenadaX + + coordenadaY)

documentonclick = muestraInformacion

Informacioacuten sobre los eventos de ratoacuten

45

Eventos Las coordenadas de la posicioacuten del puntero del ratoacuten respecto de la pantalla completa se obtienen de la misma forma mediante las propiedades screenX y screenY

var coordenadaX = eventoscreenX var coordenadaY = eventoscreenY

Informacioacuten sobre los eventos de ratoacuten

46

Crea un documento HTML que muestre las coordenadas del ratoacuten en la ventana a medida que se va desplazando

Eventos

Informacioacuten sobre el evento

47

Completar el coacutedigo JavaScript proporcionado para que

1 Al mover el ratoacuten en cualquier punto de la ventana del navegador se muestre la posicioacuten del puntero respecto del navegador y respecto de la paacutegina

2 Al pulsar cualquier tecla el mensaje mostrado debe cambiar para indicar el nuevo evento y su informacioacuten asociada

3 Antildeadir la siguiente caracteriacutestica al script cuando se pulsa un botoacuten del ratoacuten el color de fondo del cuadro de mensaje debe ser amarillo (FFFFCC) y cuando se pulsa una tecla el color de fondo debe ser azul (CCE6FF) Al volver a mover el ratoacuten el color de fondo vuelve a ser blanco

Descargar paacutegina HTML

Eventos

Informacioacuten sobre el evento

48

Crear una paacutegina web que funcione como una calculadora del estilo a la mostrada en la imagen

Formularios Cuando se carga una paacutegina web el navegador crea automaacuteticamente un array llamado forms que contiene la referencia a todos los formularios de la paacutegina Para acceder al array forms se utiliza el objeto document por lo que documentforms es el array que contiene todos los formularios de la paacutegina

documentforms[0]

Ademaacutes del array de formularios el navegador crea automaacuteticamente un array llamado elements por cada uno de los formularios de la paacutegina Cada array elements contiene la referencia a todos los elementos (cuadros de texto botones listas desplegables etc)

documentforms[0]elements[0]

Propiedades baacutesicas de formularios y elementos

50

Formularios Una forma de acceder a los formularios de una paacutegina es a traveacutes de su nombre (atributo name) o a traveacutes de su atributo id El objeto document permite acceder directamente a cualquier formulario y elemento del mismo mediante su atributo name

var formularioPrincipal = documentformulario var formularioSecundario = documentotro_formulario var primerElemento = documentformularioelemento ltform name=formulario gt ltinput type=text name=elemento gt ltformgt

ltform name=otro_formulario gt ltformgt

51

Propiedades baacutesicas de formularios y elementos

Formularios Obviamente tambieacuten se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos El siguiente ejemplo utiliza la habitual funcioacuten documentgetElementById() para acceder de forma directa a un formulario y a uno de sus elementos

var formularioPrincipal=documentgetElementById(formulario) var primerElemento=documentgetElementById(elemento) ltform name=formulario id=formulario gt ltinput type=text name=elemento id=elemento gt ltformgt

52

Propiedades baacutesicas de formularios y elementos

Formularios Independientemente del meacutetodo utilizado para obtener la referencia a un elemento de formulario cada elemento dispone de las siguientes propiedades uacutetiles para el desarrollo de las aplicaciones

bull type indica el tipo de elemento que se trata Para los elementos de tipo ltinputgt (text button checkbox etc) coincide con el valor de su atributo type Para las listas desplegables normales (elemento ltselectgt) su valor es select-one lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos y cuyo tipo es select-multiple Por uacuteltimo en los elementos de tipo lttextareagt el valor de type es textarea

53

Propiedades baacutesicas de formularios y elementos

Formularios Los eventos maacutes utilizados en el manejo de los formularios son los siguientes

bull onclick evento que se produce cuando se hace click con el ratoacuten sobre un elemento Normalmente se utiliza con cualquiera de los tipos de botones que permite definir HTML (ltinput type=buttongt ltinput type=submitgt ltinput type=imagegt)

bull onblur evento complementario de onfocus ya que se

produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario Teacutecnicamente se dice que el elemento anterior ha perdido el focordquo

54

Propiedades baacutesicas de formularios y elementos

Formularios bull onchange evento que se produce cuando el usuario cambia el valor de un elemento de texto (ltinput type=textgt o lttextareagt) Tambieacuten se produce cuando el usuario selecciona una opcioacuten en una lista desplegable (ltselectgt) Sin embargo el evento soacutelo se produce si despueacutes de realizar el cambio el usuario pasa al siguiente campo del formulario lo que teacutecnicamente se conoce como que el otro campo de formulario ha perdido el foco

bull onfocus evento que se produce cuando el usuario selecciona un elemento del formulario

55

Propiedades baacutesicas de formularios y elementos

Formularios Cuadro de texto y textarea

El valor del texto mostrado por estos elementos se obtiene y se establece directamente mediante la propiedad value

Obtener el valor de los campos de formulario

ltinput type=text id=texto gt var valor = documentgetElementById(texto)value lttextarea id=parrafogtlttextareagt

var valor = documentgetElementById(parrafo)value

56

Formularios

var elementos = documentgetElementsByName(pregunta) for(var i=0 iltelementoslength i++) alert( Elemento + elementos[i]value + n Seleccionado + elementos[i]checked)

Radiobutton Cuando se dispone de un grupo de radiobuttons lo importante es conocer cuaacutel de todos los radiobuttons se ha seleccionado La propiedad checked devuelve true para el radiobutton seleccionado y false en cualquier otro caso

Obtener el valor de los campos de formulario

ltinput type=radio value=si name=pregunta id=pregunta_sigtSI ltinput type=radio value=no name=pregunta id=pregunta_nogtNO ltinput type=radio value=nsnc name=pregunta id=pregunta_nsncgtNS

57

Formularios

Checkbox Los elementos de tipo checkbox son muy similares a los radiobutton salvo que en este caso se debe comprobar cada checkbox de forma independiente del resto

Obtener el valor de los campos de formulario

ltinput type=checkbox value=condiciones name=condiciones id=condicionesgt He leiacutedo y acepto las condiciones ltinput type=checkbox value=privacidad name=privacidadrdquo id=privacidadgt He leiacutedo la poliacutetica de privacidad var elemento = documentgetElementById(condiciones) alert( Elemento + elementovalue + n Seleccionado + elementochecked) elemento = documentgetElementById(privacidad) alert( Elemento + elementovalue + n Seleccionado + elementochecked)

58

Formularios

ltselect id=opciones name=opcionesgt ltoption value=1gtPrimer valorltoptiongt ltoption value=2gtSegundo valorltoptiongt ltoption value=3gtTercer valorltoptiongt ltoption value=4gtCuarto valorltoptiongt ltselectgt var lista = documentgetElementById(opciones) Obtener el valor de la opcioacuten seleccionada var valorSeleccionado=listaoptions[listaselectedIndex]value Obtener el texto que muestra la opcioacuten seleccionada var valorSeleccionado=listaoptions[listaselectedIndex]text

Select Las listas desplegables (ltselectgt) son los elementos en los que es maacutes difiacutecil obtener su valor Si se dispone de una lista desplegable como la siguiente

Obtener el valor de los campos de formulario

59

Formularios Establecer el foco en un elemento Para asignar el foco a un elemento de XHTML se utiliza la funcioacuten focus() El siguiente ejemplo asigna el foco a un elemento de formulario cuyo atributo id es igual a primero

documentgetElementById(primero)focus()

Obtener el valor de los campos de formulario

ltform id=formulario action=gt ltinput type=text id=primero gt

ltformgt

60

Formularios

ltform action= method= id= name= onsubmit=return validacion()gt ltformgt

La validacioacuten de formularios del lado del cliente ha sido un problema que siempre se ha solucionado con la utilizacioacuten de Javascript pero con la llegada de HTML5 ahora esto es posible de modo sencillo como ya hemos visto La principal utilidad de JavaScript en el manejo de los formularios es la validacioacuten de los datos introducidos por los usuarios Antes de enviar un formulario al servidor se recomienda validar mediante JavaScript los datos insertados por el usuario A continuacioacuten se muestra el coacutedigo JavaScript baacutesico necesario para incorporar la validacioacuten a un formulario

Validacioacuten de formularios

61

Formularios

Y el esquema de la funcioacuten validacion() es el siguiente

function validacion() if (condicion que debe cumplir el primer campo del form)

Si no se cumple la condicion alert([ERROR] El campo debe tener un valor de) return false

else if (condicion que debe cumplir el segundo campo del form) Si no se cumple la condicion alert([ERROR] El campo debe tener un valor de) return false

else if (condicion que debe cumplir el uacuteltimo campo del form) Si no se cumple la condicion alert([ERROR] El campo debe tener un valor de) return false

Si el script ha llegado a este punto todas las condiciones se han cumplido por lo que se devuelve el valor true return true

Validacioacuten de formularios

62

Formularios Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio La condicioacuten en JavaScript se puede indicar como

valor = documentgetElementById(campo)value If (valor == null || valorlength == 0 || ^s+$test(valor))

return false

Validar un campo de texto obligatorio

63

Formularios Se trata de obligar al usuario a introducir un valor numeacuterico en un cuadro de texto La condicioacuten JavaScript consiste en

valor = documentgetElementById(campo)value If (isNaN(valor))

return false

Si el contenido de la variable valor no es un nuacutemero vaacutelido no se cumple la condicioacuten La ventaja de utilizar la funcioacuten interna isNaN() es que simplifica las comprobaciones ya que JavaScript se encarga de tener en cuenta los decimales signos etc

Validar un campo de texto con valores numeacutericos

64

Formularios Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable El siguiente coacutedigo JavaScript permite conseguirlo

indice = documentgetElementById(opciones)selectedIndex if( indice == null || indice == 0 )

return false

ltselect id=opciones name=opcionesgt ltoption value=gt- Selecciona un valor -ltoptiongt ltoption value=1gtPrimer valorltoptiongt ltoption value=2gtSegundo valorltoptiongt ltoption value=3gtTercer valorltoptiongt

ltselectgt

Validar la seleccioacuten una opcioacuten de una lista

65

Formularios Las fechas suelen ser los campos de formulario maacutes complicados de validar por la multitud de formas diferentes en las que se pueden introducir El siguiente coacutedigo asume que de alguna forma se ha obtenido el antildeo el mes y el diacutea introducidos por el usuario

var anio = documentgetElementById(anio)value var mes = documentgetElementById(mes)value var dia = documentgetElementById(dia)value valor = new Date(anio mes dia) If (isNaN(valor) return false

Es muy importante tener en cuenta que el nuacutemero de mes se indica de 0 a 11 siendo 0 el mes de Enero y 11 el mes de Diciembre

Validar una fecha

66

Formularios Se trata de obligar al usuario a introducir una direccioacuten de email con un formato vaacutelido Por tanto lo que se comprueba es que la direccioacuten parezca vaacutelida ya que no se comprueba si se trata de una cuenta de correo electroacutenico real y operativa La condicioacuten JavaScript consiste en

valor = documentgetElementById(campo)value If ((w+([-+]w+)w+([-]w+)w+([-]w+)test(valor)))

return false

La comprobacioacuten se realiza mediante las expresiones regulares ya que las direcciones de correo electroacutenico vaacutelidas pueden ser muy diferentes

Validar una direccioacuten de email

67

Formularios

Validar un nuacutemero de teleacutefono

Los nuacutemeros de teleacutefono pueden ser indicados de formas muy diferentes con prefijo nacional con prefijo internacional agrupado por pares separando los nuacutemeros con guiones etc El siguiente script considera que un nuacutemero de teleacutefono estaacute formado por nueve diacutegitos consecutivos y sin espacios ni guiones entre las cifras

valor = documentgetElementById(campo)value if( (^d9$test(valor)) ) return false

68

Formularios

A continuacioacuten se muestran otras expresiones regulares que se pueden utilizar para otros formatos de nuacutemero de teleacutefono

Nuacutemero Expresioacuten regular Formato

900900900 ^d9$ 9 cifras seguidas

900-900-900 ^d3-d3-d3$ 9 cifras agrupadas de 3 en 3 y separadas por guiones

900 900900 ^d3sd6$ 9 cifras las 3 primeras separadas por un espacio

900 90 09 00 ^d3sd2sd2sd2$ 9 cifras las 3 primeras separadas por un espacio las siguientes agrupadas de 2 en 2

(900) 900900 ^(d3)sd6$ 9 cifras las 3 primeras encerradas por pareacutentesis y un espacio de separacioacuten del resto

+34 900900900 ^+d23sd9$ Prefijo internacional (+ seguido de 2 o 3 cifras) espacio en blanco y 9 cifras consecutivas

Validar un nuacutemero de teleacutefono

69

Formularios Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados es maacutes faacutecil utilizar un bucle

formulario = documentgetElementById(formulario) for(var i=0 iltformularioelementslength i++) var elemento = formularioelements[i] if(elementotype == checkbox) if(elementochecked) return false

Validar que un checkbox ha sido seleccionado

70

Formularios

Se trata de un caso similar al de los checkbox la validacioacuten de los radiobutton presenta una diferencia importante en general la comprobacioacuten que se realiza es que el usuario haya seleccionado alguacuten radiobutton de los que forman un determinado grupo

Validar que un radiobutton ha sido seleccionado

opciones = documentgetElementsByName(opciones) var seleccionado = false for(var i=0 iltopcioneslength i++) if(opciones[i]checked) seleccionado = true break if(seleccionado) return false

71