Copyright Computer Aided Elearning, S.A.

1
Buenas prcticas

1. SEPARAR ESTRUCTURA Y COMPORTAMIENTO

emos visto cmo podamos acceder a las propiedades de los
objetos, cmo utilizar sus mtodos y cmo escribir cdigo
para responder a los eventos.
Bien, ahora es el momento de decirte que la forma de escribir el
cdigo que has visto hasta ahora no es la ms adecuada de hacerlo.
Se podra decir que hemos visto el mtodo "de la vieja escuela", es
decir, la forma en que se escriba cdigo J avaScript hace unos aos.
Aunque esta forma sigue siendo perfectamente vlida y todos los
navegadores entendern ese tipo de cdigo, la verdad es que presenta
algunas deficiencias que ahora que ya tienes un poco ms de
experiencia vamos a corregir.
Y empezamos con ver cmo separar la estructura de la pgina web,
es decir, su cdigo HTML, del comportamiento o cdigo J avaScript.
As pues, aunque hemos visto que podemos incluir el cdigo
J avaScript junto al cdigo HTML, no es la mejor forma de hacerlo.
Tal como ocurre con las hojas de estilo en cascada CSS, lo mejor
es escribir el cdigo J avaScript en archivos independientes y enlazar
dicho cdigo con los objetos del documento HTML.
As pues, en el cdigo HTML incluiremos una etiqueta
<script>

con el atributo src, que indicar la ubicacin del archivo de J avaScript:
<script type="text/javascript" src="dom.js"></script>
Aunque tradicionalmente los script se incluan en la cabecera del
documento HTML, ahora se recomienda hacerlo al final de la pgina,
justo antes de la etiqueta de cierre </body>.
Esto permite que la carga de la pgina sea ms rpida, ya que el
navegador no tiene que esperar a cargar e interpretar el cdigo
J avaScript, para continuar con el resto de la pgina.
Por su parte, el cdigo J avaScript se incluir en un archivo cuyo
nombre debe incluir la extensin .js. Habitualmente, estos archivos se
guardan en una carpeta especfica del sitio web. Por ejemplo, la carpeta
scripts.
En este archivo no debe incluirse la etiqueta
<scr i pt >
, nicamente
el cdigo J avaScript:
H
Buenas prcticas
2 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
/ / Ar chi vo dom. j s
f unct i on Cont ar El ement os( )
{
var r esul t = 0;
var nodos = document . body. chi l dNodes;
f or ( var i = 0; i < nodos. l engt h; i ++)
{
i f ( nodos[ i ] . nodeType == 1)
r esul t ++;
}
r et ur n r esul t ;
}
f unct i on Cambi ar Text o( )
{
var el ement o_em=
document . get El ement sByTagName( " em" ) [ 0] ;
el ement o_em. f i r st Chi l d. nodeVal ue =" en comuni caci n" ;
}
f unct i on NuevoText o( )
{
var nuevo_el ement o = document . cr eat eEl ement ( " p" ) ;
var nuevo_t ext o = document . cr eat eText Node( " Si no
r eci be r espuest a t r as 2 d as, por f avor , vuel va a envi ar
l a consul t a. " ) ;
nuevo_el ement o. appendChi l d( nuevo_t ext o) ;
document . body. appendChi l d( nuevo_el ement o) ;
}
f unct i on NuevaTabl a( )
{
var codi go = " <t abl e>" ;
codi go += " <t r ><t h>T t ul o de l a pr i mer a col umna</ t h>"
codi go += " <t h>T t ul o de l a segunda col umna</ t h>"
codi go += " <t h>T t ul o de l a t er cer a
col umna</ t h></ t r >"
codi go += " <t r ><t d>Segunda f i l a, pr i mer a
col umna</ t d>" ;
codi go += " <t d>Segunda f i l a, segunda col umna</ t d>" ;
codi go += " <t d>Segunda f i l a, t er cer a
col umna</ t d></ t r >" ;
codi go += " <t r ><t d>Ter cer a f i l a, pr i mer a
col umna</ t d>" ;
codi go += " <t d>Ter cer a f i l a, segunda col umna</ t d>" ;
codi go += " <t d>Ter cer a f i l a, t er cer a
col umna</ t d></ t r >" ;
codi go += " </ t abl e>" ;

var nuevo_el ement o = document . cr eat eEl ement ( " di v" ) ;

nuevo_el ement o. st yl e. f ont Fami l y = "Ver dana, sans- ser i f ";
nuevo_el ement o. st yl e. col or = " r ed" ;
nuevo_el ement o. i nner HTML = codi go;
document . body. appendChi l d( nuevo_el ement o) ;
}

Buenas prcticas
Copyright Computer Aided Elearning, S.A. 3
Adems, en este mismo archivo .js incluiremos el cdigo para
registrar los manejadores de evento, eliminndolos de las etiquetas
HTML de la pgina web.
As pues, eliminaremos cualquier trozo de cdigo
oncl i ck=""
,
etc. de las etiqueta HTML y escribiremos dicho cdigo en el archivo de
J avaScript aunque de otra forma.
Con estos cambios separamos el cdigo HTML y el cdigo
J avaScript. Esto es ms importante de lo que parece ya que la pgina
web debera ser completamente funcional sin el cdigo J avaScript.
Piensa en lo que ocurre con las hojas de estilo CSS. El contenido
de la pgina sigue siendo vlido aunque no se puedan cargar. Eso s, con
un aspecto muy distinto al que conseguimos con una buena hoja de
estilo. Pues lo mismo debe ocurrir con el cdigo J avaScript.
Debemos pensar que si el navegador del usuario no puede ejecutar
el cdigo J avaScript, la pgina debe seguir siendo bsicamente til
aunque no se consiga toda la funcionalidad que proporciona J avaScript.

2. AADIR LOS MANEJADORES DE EVENTO
unque hemos incluido la referencia al archivo dom.js en el
documento HTML, realmente el cdigo J avaScript incluido
en l no es ms que la definicin de una serie de funciones.
Sabemos que la definicin de una funcin no implica ninguna
ejecucin de su cdigo y, adems, hemos eliminado los manejadores de
evento que se incluan en las etiquetas HTML <body> y <em> de la
pgina original.
Bien, la forma de hacerlo correctamente es incluir los manejadores
de evento en el propio archivo .js:
window.onload = NuevaTabla;
En este caso estamos utilizando el manejador de evento onload del
objeto window, lo que es equivalente a escribir el manejador onload de
la etiqueta <body> del documento HTML.
Es decir, que indicamos que se tiene que ejecutar la funcin
NuevaTabla cuando la pgina est completamente cargada.
A
Buenas prcticas
4 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
Fjate que no se incluyen los parntesis ni se puede especificar
ningn parmetro, solo el nombre de la funcin. En caso contrario,
estaras realizando la llamada a la funcin y esta se ejecutara.
Otra forma de incluir un manejador de evento en JavaScript es
utilizar el mtodo addEventListener sobre el objeto en el que
queremos registrar el manejador de evento.
Este mtodo requiere de tres parmetros:
addEventListener(evento, funcin, capture/bubble)
En nuestro ejemplo podra ser:
window.addEventListener("load", NuevaTabla, false);
En el primer parmetro se indica el nombre del evento (no el
nombre del manejador del evento, por lo que no se incluye el
prefijo on); en el segundo, el nombre de la funcin; y en el
tercero, si el evento especifica qu objeto es el responsable de
manejarlo.
As, si el tercer parmetro tiene valor true, entonces el evento
es capturado primero por el objeto window y despus se
propaga hacia el objeto destinatario del mismo.
Esto puede tener sentido. Por ejemplo, si se trata del evento
correspondiente al click de un botn, quin debe manejar el
evento?
El botn sobre el que se ha hecho clic o la propia ventana del
navegador? Al fin y al cabo, tambin se est pulsando en la
superficie de la ventana.
Con el valor true en el tercer parmetro de addEventListener,
el evento sera manejado primero por la ventana y despus se
propagara hasta llegar al botn.
Si el tercer parmetro tiene el valor false (valor
predeterminado), entonces ocurre justo al contrario. El evento
primero es manejado por el botn y despus sube hasta que
llega al objeto window.
Esta forma de aadir manejadores de evento es mejor, ya que
podemos incluir ms de una funcin para el mismo evento
utilizando varias veces el mtodo addEventListener.
Lo mismo podemos hacer para el segundo evento que tenamos en
la pgina:
document.getElementsByTagName("em")[0].onclick = CambiarTexto;
Buenas prcticas
Copyright Computer Aided Elearning, S.A. 5
En este segundo caso, seguramente habra sido mejor incluir un
identificador para el elemento "em" y utilizar el mtodo
getElementById para seleccionarlo.
Tambin podramos haber optado por esta otra notacin:
document.getElementsByTagName("em")[0].addEventListener(
"click", CambiarTexto, false);
Por ltimo, comentarte algo muy importante: debemos comprobar
que la pgina se ha cargado completamente antes de registrar los
manejadores de evento.
Esto significa que el cdigo asociado con el evento click que
acabamos de escribir, realmente debera estar asociado con el evento
load del documento, ya que es la nica forma de asegurarse de que la
pgina se ha cargado completamente y que, por lo tanto, existe el
elemento "em".
Por ejemplo, podramos ejecutar ms de una instruccin
asocindola con el evento load. Fjate cmo se hace:
wi ndow. onl oad = f unct i on ( ) {
NuevaTabl a( ) ;
document . get El ement sByTagName( "em") [ 0] . oncl i ck =Cambi arText o;
}
En este caso se utiliza lo que se conoce como una "funcin
annima", ya que no se incluye el nombre de la misma.
Esto es lo correcto porque el registro del evento click del elemento
"em" se realiza cuando seguro que ya se ha cargado la pgina
completamente.

3. DETECTAR CARACTERSTICAS DE LOS NAVEGADORES
tro aspecto importante a la hora de trabajar con la
funcionalidad del DOM es comprobar que realmente el
navegador (o agente de usuario) que utiliza el usuario sabe interpretar el
cdigo correctamente.
Esto es importante, ya que incluso con los navegadores modernos,
el usuario podra haber desactivado la ejecucin del cdigo J avaScript.
En ese caso, la pgina debe seguir funcionando sin J avaScript,
aunque lo haga con menor funcionalidad.
O
Buenas prcticas
6 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
Por otra parte, es posible que distintas versiones de un mismo
navegador acepten unas u otras caractersticas del DOM.
Por todo ello, podemos detectar las caractersticas que admite un
navegador y actuar en consecuencia.
Tradicionalmente, los desarrolladores comprobaban el nombre del
navegador utilizando principalmente la propiedad userAgent del objeto
navigator.
Sin embargo, esto no es una buena idea actualmente, ya que no es
una caracterstica fiable del navegador. Algunos navegadores
enmascaran o cambian esta propiedad para que sus usuarios puedan
acceder a pginas diseadas exclusivamente para otro navegador e
incluso tambin lo puede hacer el usuario.
Lo correcto actualmente es detectar las caractersticas u objetos del
DOM que acepta el navegador del usuario. Fjate cmo lo hacemos (el
cdigo de deteccin aparece en negrita):
wi ndow. onl oad = f unct i on ( ) {
if (!document.getElementById ||
!document.getElementsByTagName) return false;
NuevaTabl a( ) ;
document . get El ement sByTagName( "em") [ 0] . oncl i ck =Cambi arText o;
}
Qu estamos haciendo aqu? Pues simplemente detectando si el
navegador entiende los mtodos getElementById y getElements
ByTagName.
Si no es el caso, entonces salimos de la funcin devolviendo el
valor false, por lo que no se ejecuta el cdigo siguiente.
De esta forma, si el navegador no es compatible con alguna
caracterstica del DOM que estamos utilizando, simplemente no la
ejecutar.
Podremos comprobar esto con cada propiedad o mtodo del DOM
que queremos verificar. Aqu lo importante es darse cuenta de que en el
caso de un mtodo no debemos incluir los parntesis (ni parmetros),
solo su nombre.
Ocurre lo mismo que antes. Si incluimos los parntesis y/o
parmetros, estaremos ejecutando realmente el mtodo y esto no es lo
que queremos ahora.
En los siguientes captulos estudiaremos una pgina web un poco
ms compleja donde se han aplicado muchos de los conceptos que
hemos ido viendo al estudiar el DOM.
Buenas prcticas
Copyright Computer Aided Elearning, S.A. 7
4. EJEMPLO: UNA GALERA FOTOGRFICA
ara afianzar los conceptos y prcticas que hemos ido viendo
durante las ltimas lecciones, vamos a presentar un ejemplo
sencillo pero til.
Se trata de una "galera fotogrfica". El usuario acceder a la
pgina web que puedes ver en la figura adjunta para visualizar algunas
fotografas. Comprobaremos cmo podemos mejorar la experiencia del
usuario con la tecnologa DOM y J avaScript.

En la pgina encontramos una serie de fotografas "en miniatura",
representando productos (en este caso zapatos de seora) de una tienda
virtual.
La idea es que si un usuario desea obtener detalles adicionales
sobre cualquiera de esos productos, simplemente tiene que pulsar en su
imagen. Al hacerlo, se muestra una imagen ms grande del producto y
un pequeo texto descriptivo.
Fjate que aunque no parece que la pgina sea demasiado compleja,
realmente intervienen varios conceptos que se han estudiado: manejo de
eventos, seleccin de elementos de la pgina y de sus atributos,
actualizacin del contenido, creacin de nuevos elementos, etc.
Adems, veremos cmo se aplican las buenas prcticas que hemos
visto durante esta leccin.
Vamos all!
P
Buenas prcticas
8 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
5. EJEMPLO: LA ESTRUCTURA DE LA PGINA
n cuanto a la estructura de la pgina web, podemos ver que en
la pgina aparece una serie de fotografas en su parte superior
y un recuadro en la parte inferior.

Este recuadro inferior es realmente otra imagen, que simplemente
muestra un fondo blanco para que se confunda con el fondo de la pgina
web. Sirve como marcador o lugar donde se muestran las imgenes
grandes cuando se pulsa en alguna de las imgenes superiores.

Aqu vemos la
distribucin en carpetas del
sitio web al que pertenece
esta pgina. Fjate que hay
una carpeta para las
imgenes, para las hojas de
estilo y para los scripts.
Existen dos versiones de
cada imagen: una ms
pequea y la de tamao
normal.
Tambin aparece la imagen blanco.gif, que es la imagen que se
muestra inicialmente en el marcador de la parte inferior de la pgina
web.
E
Buenas prcticas
Copyright Computer Aided Elearning, S.A. 9
La imgenes ms pequeas aparecen en la subcarpeta
images/thumbnails. En los dos casos tienen el mismo nombre, por lo
que se diferencian por la ubicacin en la que estn almacenadas.
Ahora se adjunta el cdigo fuente del documento HTML.
Archivo index.html:
<! DOCTYPE ht ml >
<ht ml >
<head>
<t i t l e>Nueva t empor ada</ t i t l e>
<l i nk r el =" st yl esheet " t ype=" t ext / css"
hr ef =" css/ est i l o. css" >
</ head>
<body>
<di v i d=" cont ai ner " >
<h1>Zapat os seor a</ h1>
<p>Pul se sobr e l as i mgenes par a obt ener ms
det al l es. </ p>
<ul >
<l i >
<a hr ef =" i mages/ zapat os01. j pg" ><i mg i d=" model o1"
sr c=" i mages/ t humbnai l s/ zapat os01. j pg" al t =" Bot as al t as
de pi el " wi dt h=" 116" hei ght =" 116" ></ a>
</ l i >
<l i >
<a hr ef =" i mages/ zapat os02. j pg" ><i mg i d=" model o2"
sr c=" i mages/ t humbnai l s/ zapat os02. j pg" al t =" Bot as de
t acn al t o" wi dt h=" 116" hei ght =" 116" ></ a>
</ l i >
<l i >
<a hr ef =" i mages/ zapat os03. j pg" ><i mg i d=" model o3"
sr c=" i mages/ t humbnai l s/ zapat os03. j pg" al t =" Zapat os de
f i est a col or pl at a" wi dt h=" 116" hei ght =" 116" ></ a>
</ l i >
<l i >
<a hr ef =" i mages/ zapat os04. j pg" ><i mg i d=" model o4"
sr c=" i mages/ t humbnai l s/ zapat os04. j pg" al t =" Zapat os
negr os par a di ar i o" wi dt h=" 116" hei ght =" 116" ></ a>
</ l i >
<l i >
<a hr ef =" i mages/ zapat os05. j pg" ><i mg i d=" model o5"
sr c=" i mages/ t humbnai l s/ zapat os05. j pg" al t =" Bot as bl ancas
si n t acn" wi dt h=" 116" hei ght =" 116" ></ a>
</ l i >
</ ul >
<i mg cl ass=" i magenGr ande" i d=" act ual "
sr c=" i mages/ bl anco. gi f " al t =" Model o vi sual i zado"
wi dt h=" 289" hei ght =" 289" >
</ di v>
<scr i pt t ype=" t ext / j avascr i pt "
sr c=" scr i pt s/ f unci ones. j s" ></ scr i pt >
</ body>
</ ht ml >
Buenas prcticas
10 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
Respecto de este cdigo nos interesa comentar algunas cosas:
El aspecto o formato de la pgina se consigue a travs de
una hoja de estilo en cascada externa. Fjate que en la lnea
siguiente aparece el vnculo con el archivo estilo.css
situado en la subcarpeta css:
<l i nk r el =" st yl esheet " t ype=" t ext / css"
hr ef =" css/ est i l o. css" >
Cada imagen tiene su correspondiente identificador y texto
alternativo. Estos dos atributos son muy importantes ya que
el atributo "id" permitir seleccionar la imagen y el atributo
"alt" proporcionar el texto descriptivo que se utilizar
cuando se ha pulsado en ella.
Adems, vemos que rodeando a cada imagen aparece un
hipervnculo, cuyo atributo href tiene el valor de la
ubicacin de cada una de las imgenes "grandes".
En la siguiente lnea encontramos el marcador de imagen o
recuadro de la parte inferior donde se muestran las
imgenes grandes. Fjate que tiene el identificador
"actual".
<i mg cl ass=" i magenGr ande" i d=" act ual "
sr c=" i mages/ bl anco. gi f " al t =" Model o vi sual i zado"
wi dt h=" 289" hei ght =" 289" >
Finalmente, en la lnea siguiente encontramos la etiqueta
script, que enlaza la pgina web con el archivo externo de
J avaScript funciones.js, que est almacenado en la
subcarpeta scripts.
<scr i pt t ype=" t ext / j avascr i pt "
sr c=" scr i pt s/ f unci ones. j s" ></ scr i pt >
Fjate que hemos incluido el script justo al final del cuerpo
del documento y no en la seccin de cabecera.
Adems, no vemos ningn cdigo J avaScript para manejar
los eventos, ya que se encuentra en el archivo .js.
Como puedes ver, la estructura de la pgina web es sencilla, pero
se sigue la buena prctica de separar la estructura, el formato y el
comportamiento utilizando archivos distintos para cada una de esas
tareas.

Buenas prcticas
Copyright Computer Aided Elearning, S.A. 11
6. EJEMPLO: EL CDIGO JAVASCRIPT
ahora veamos el cdigo J avaScript, donde trabajaremos con
el DOM del documento.
Archivo funciones.js:
f unct i on Most r ar Fot o( el ement o)
{
var sour ce = el ement o. f i r st Chi l d. get At t r i but e( " sr c" ) ;
sour ce = sour ce. r epl ace( " t humbnai l s/ " , " " ) ;
document . get El ement ByI d( " act ual " ) . set At t r i but e( " sr c" ,
sour ce) ;
Descr i bi r ( el ement o. f i r st Chi l d. get At t r i but e( " i d" ) ) ;
}

f unct i on Descr i bi r ( i d)
{
var t ext o =
document . get El ement ByI d( i d) . get At t r i but e( " al t " ) ;
var obj et o = document . get El ement ByI d( " descr i pci on" ) ;
i f ( ! obj et o)
{
var newText = document . cr eat eText Node( t ext o) ;
var newEl ement = document . cr eat eEl ement ( " p" ) ;
newEl ement . set At t r i but e( " i d" , " descr i pci on" ) ;
newEl ement . set At t r i but e( "cl ass", "t ext oDescr i pci on") ;
newEl ement . appendChi l d( newText ) ;
document . body. appendChi l d( newEl ement ) ;
}
el se
{
obj et o. f i r st Chi l d. nodeVal ue = t ext o;
}
}


f unct i on Pr epar ar Hi per vi ncul os( )
{
i f ( ! document . get El ement ByI d | |
! document . get El ement sByTagName) r et ur n f al se;
var hi per vi ncul os =
document . get El ement sByTagName( " a" ) ;
f or ( var i = 0; i < hi per vi ncul os. l engt h; i ++)
{
hi per vi ncul os[ i ] . oncl i ck = f unct i on ( ) {
Most r ar Fot o( t hi s) ;
r et ur n f al se;
}
}
}

wi ndow. onl oad = Pr epar ar Hi per vi ncul os;
Y
Buenas prcticas
12 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
Aqu encontramos algunas funciones que son las que hacen que la
pgina funcione como hemos indicado.
Todo este cdigo se ejecuta al cargar la pgina. De esta forma, nos
aseguramos de que los elementos existen en el DOM del documento.
As pues, en la lnea siguiente vemos que se escribe el manejador
del evento load del objeto window. Para este manejador se ha asociado
la funcin PrepararHipervinculos:
wi ndow. onl oad = Pr epar ar Hi per vi ncul os;
En la funcin PrepararHipervinculos lo primero que se hace es
comprobar las caractersticas del DOM que soporta el navegador. Fjate
cmo se comprueba esto:
i f ( ! document . get El ement ByI d | |
! document . get El ement sByTagName) r et ur n f al se;
Si el navegador no es capaz de ejecutar los mtodos
getElementById o getElementsByTagName, entonces simplemente
no se sigue con el resto del cdigo J avaScript.
Seguidamente, se utiliza el mtodo getElementsByTagName para
seleccionar los hipervnculos de la pgina. As pues, la variable
hipervinculos es un array con dicho conjunto.
Para cada uno de estos hipervnculos se crea su correspondiente
manejador del evento click. Para ello, se recorre el array hipervinculos y
se asocia una funcin annima con el manejador onclick.
La funcin annima consta de una llamada a la funcin
MostrarFoto, que enva como parmetro el propio hipervnculo (fjate
que se utiliza la palabra clave this) y se devuelve el valor false.
Esto ltimo es necesario, ya que debemos evitar que se produzca la
accin predeterminada del hipervnculo.
Por defecto, cuando se pulsa en un hipervnculo se accede a la
URL indicada en su atributo href. En este caso esto no nos interesa, ya
que lo que realmente queremos que ocurra es que se ejecute el cdigo
J avaScript asociado con el evento click.
Para evitar la accin predeterminada del hipervnculo, simplemente
se devuelve el valor false.
Veamos pues, qu ocurre al pulsar en cada hipervnculo. Es decir,
estudiemos el cdigo de la funcin MostrarFoto.
Buenas prcticas
Copyright Computer Aided Elearning, S.A. 13
Primero se guarda el valor del atributo src de la imagen sobre la
que se ha pulsado. Fjate cmo conseguimos este valor.
Como la funcin recibe como parmetro el hipervnculo,
utilizamos el mtodo firstChild para acceder a la imagen relacionada.
Seguidamente, con getAttribute podemos conseguir el valor de su
atributo src:
var sour ce = el ement o. f i r st Chi l d. get At t r i but e( " sr c" ) ;
A continuacin establecemos el valor de la imagen grande. Para
ello, se est utilizando el mtodo replace de una cadena de texto o
String. Con este mtodo simplemente eliminamos la subcadena
"thumbnails/". De esta forma obtendremos la ubicacin de la imagen
grande correspondiente.
Por ejemplo, si se ha pulsado en la primera imagen, tendremos que
su atributo src tiene este valor:
.../galera/images/thumbnails/zapatos01.jpg
Por lo que tras esta lnea tendr este otro valor:
.../galera/images/zapatos01.jpg
De esta forma obtenemos la ubicacin de la imagen grande
correspondiente.
Despus se utiliza dicha ubicacin para establecer el valor del
atributo src de la imagen de identificador "actual", es decir, del
marcador de la imagen grande.
Fjate cmo se utilizan para ello los mtodos getElementById y
setAttribute:
document . get El ement ByI d( " act ual " ) . set At t r i but e( " sr c" ,
sour ce) ;
Con esto habremos conseguido que, al pulsar en una de las
imgenes, se muestre la correspondiente imagen grande en la parte
inferior de la pgina.
Nos faltara ver cmo aadir el texto descriptivo. Para ello, no solo
tenemos que modificar el DOM como hemos hecho hasta este
momento, sino que tenemos que crear nuevo contenido
Este contenido se crea a travs de la funcin Describir.
En la funcin Describir utilizamos los mtodos del DOM para
crear nodos y aadirlos al rbol del documento.
Buenas prcticas
14 SE PERMITE EL USO DE ESTE MANUAL NICAMENTE A LOS ALUMNOS DE ESTE CURSO
El texto en s se recoge a partir del atributo alt de la imagen. Fjate:
var t ext o =
document . get El ement ByI d( i d) . get At t r i but e( " al t " ) ;
Seguidamente seleccionamos el elemento cuyo identificador es
"descripcion".
Este elemento es justamente el que estamos creando con la funcin
Describir. Por ello, las siguientes lneas comprueban si ya existe o si
hay que crearlo:
var obj et o = document . get El ement ByI d( " descr i pci on" ) ;
i f ( ! obj et o)
Si no existe el elemento "descripcion", entonces se crea. Para ello,
se utilizan los mtodos createTextNode, createElement y
appendChild:
var newText = document . cr eat eText Node( t ext o) ;
var newEl ement = document . cr eat eEl ement ( " p" ) ;
newEl ement . set At t r i but e( " i d" , " descr i pci on" ) ;
newEl ement . set At t r i but e( "cl ass", "t ext oDescr i pci on") ;
newEl ement . appendChi l d( newText ) ;
document . body. appendChi l d( newEl ement ) ;
Si ya existe el elemento (se ha pulsado en alguna imagen con
anterioridad), no es necesario volver a crearlo, sino que simplemente
actualizamos el valor del nodo de texto. Para ello, se utiliza la propiedad
nodeValue.
obj et o. f i r st Chi l d. nodeVal ue = t ext o;
Con todo este cdigo J avaScript estamos mejorando
significativamente la experiencia del usuario.
Por ejemplo, la pgina se carga mucho ms rpidamente que si se
mostraran las imgenes grandes desde el principio, ya que las que se
muestran son ms pequeas.
Adems, la pgina sigue siendo perfectamente funcional aunque no
se pueda ejecutar el cdigo J avaScript. En este ltimo caso, cuando se
pulse en una de las imgenes, se acceder a la imagen grande.
Es decir, que aunque el usuario no obtiene la funcionalidad que
hemos visto, realmente sigue pudiendo ver el contenido de la pgina
web.