Exercicis DOM

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Referències

Desenvolupament

1. Formulari per crear un compte de gmail

El següent enllaç és el formulari per crear un compte de gmail a Google.

Copia el codi font. Localitza l'etiqueta <form> i </form> i determina quants formularis hi ha. Inspecciona el codi font i localitza les diferents parts del formulari.

Mitjançnt el DOM, navega pels diferents elements del formulari. Concretament has de trobar els diferents elements (input, label,...) i les propietats com ara type, name, id, value,... Imprimeix tota la informació de forma ordenada per la pantalla.

solució:

Afegir al final del codi font:

<script>
forms = document.getElementsByTagName("form");
document.write("Número de formularis:<br />");
document.write(forms.length);
document.write("<br />");
document.write("Nom del formulari:<br />");
document.write(forms[0].name);
document.write("<br />");
document.write("Número d'elements del formulari:<br />");
document.write(forms[0].elements.length);

document.write("Llistat de tots els elements del formulari:<br />");
for (i=0;i<forms[0].elements.length;i++)           
{
	document.write(forms[0].elements[i].name);
	document.write(' - ');
	document.write(forms[0].elements[i].tagName);
	document.write(" (" + forms[0].elements[i].type + ")");
	document.write("<br />");
}
</script>

Exercici childNodes

Explorar el contingut de tot formulari fins a l'últim nivell. Com que hi ha diversos nivells fins arribar als input que ens interessa, trobar alguna funció recursiva que et permeti explorar tots els nivells de forma automàtica.

Cercar al google:

javascript get child nodes recursively

2. Llistar imatges de Google Images

A Google Images cerca per exemple imatges de rolling stones, o bé segueix el següent enllaç:

Mira el codi font. Localitza el tros de codi allà on estan llistades totes les imatges. Per exemple:

<div class="rg_di" i1527="155" i429="154" ><a href="http://www.google.com/imgres?um=1&hl=en&sa=N&tbo=d&biw=1787&bih=783&tbm=isch&tbnid=db3L0U907d0dxM:&imgrefurl=http://en.wikipedia.org/wiki/The_Rolling_Stones&docid=Lz7J8Hlpt4spLM&imgurl=http://assets.rollingstone.com/assets/images/story/bob-dylan-strikes-back-at-critics-20120912/1000x306/20120911-dylan-cover-306x-1347396830.jpg&w=306&h=416&ei=GPCzUMOBOIOZhQfnooGABg&zoom=1" class=rg_l ><img class=rg_i name=F8A1fEtEDWZlnM: src="https://encrypted ...

Si ordenem una mica el codi:

<div class="rg_di" i1527="155" i429="154" >
<a href="http://www.google.com/imgres?um=1&hl=en&sa=N&tbo=d&biw=1787&bih=783&tbm=isch&tbnid=db3L0U907d0dxM:&imgrefurl=http://en.wikipedia.org/wiki/The_Rolling_Stones&docid=Lz7J8Hlpt4spLM&imgurl=http://assets.rollingstone.com/assets/images/story/bob-dylan-strikes-back-at-critics-20120912/1000x306/20120911-dylan-cover-306x-1347396830.jpg&w=306&h=416&ei=GPCzUMOBOIOZhQfnooGABg&zoom=1" class=rg_l >
<img class=rg_i name=F8A1fEtEDWZlnM: src="https://encrypted ...
</a>
...

Veiem que el patró:

<div class="rg_di"

es va repetint:

<div class="rg_di" i1527="103" i3588="102" >

<a href="http://www.google.com/imgres?um=1&sa=N&hl=en&biw=1787&bih=783&tbm=isch&tbnid=uxpY2FhwrIMWMM:&imgrefurl=http://www.niemanlab.org/2013/07/this-week-in-review-tech-companies-nsa-pushback-and-rolling-stones-cover-backlash/&docid=uf8xbwdF2_RVIM&imgurl=http://www.niemanlab.org/images/130717-rolling-stone-cover-vmed-2p.jpg&w=990&h=1345&ei=s0WfUtPdA8rY0QWG-4GQDg&zoom=1" class=rg_l >

<img class=rg_i name=uxpY2FhwrIMWMM: data-sz=f  onload="google.stb.csi.onTbn(1, this)"></a>

<div class=rg_meta>{"an":"Mark Coddington","au":"http://www.niemanlab.org/author/mcoddington/","cb":18,"cl":9,"cr":3,"fd":"","fn":"130717-rolling-stone-cover-vmed-2p.jpg","id":"uxpY2FhwrIMWMM:","is":"990\u0026nbsp;\u0026#215;\u0026nbsp;1345","isu":"niemanlab.org","ity":"jpg","lu":"/search?q=rolling+stone\u0026um=1\u0026sa=N\u0026hl=en\u0026biw=1787\u0026bih=783\u0026tbm=isch#imgrc=uxpY2FhwrIMWMM%3A%3Buf8xbwdF2_RVIM%3Bhttp%253A%252F%252Fwww.niemanlab.org%252Fimages%252F130717-rolling-stone-cover-vmed-2p.jpg%3Bhttp%253A%252F%252Fwww.niemanlab.org%252F2013%252F07%252Fthis-week-in-review-tech-companies-nsa-pushback-and-rolling-stones-cover-backlash%252F%3B990%3B1345","md":"/search?hl=en\u0026tbs=sbi:AMhZZiuUuJmszcwGS7TBL74INIAoKs2igjk-Czfbh2wRcBtf4Dmz10LuT3tYmkLX2l9_1oRN0yMFmeA8VVuLIYuyUl_1slDAz1CrlxKskTFEoRsmKxoiRQXguF9sKZnz_1N-gdVQ_1aHqRLs0L2UVse0jtS2vHC97hS8Zzh0tOOy_1tXBdBvK1k-fF06oyqfLow3BDYkjM170p0rfysvaCoksQqEahmaWjLAUfPu0eaRqGUBN8w_1tq87Ezn4mj-GSHYZEOXMDIgEjgM_1h\u0026ei=k1mzUMdAz5CFB9H_gaAH","msm":"More sizes","msu":"/search?q=rolling+stone\u0026um=1\u0026sa=N\u0026hl=en\u0026biw=1787\u0026bih=783\u0026tbm=isch\u0026tbs=simg:CAQSZAm7GljYWHCsgxpQCxCo1NgEGgIIFwwLELCMpwgaPAo6CAESFMECwQHDAtIC0gHmAuMCxwHZAt0BGiC3iYtoCLUpNva3B2aUpoyIcYhoa_1xW22uvavF9eoErSAwhuf8xbwdF2_1Q","oh":1345,"os":"602KB","ow":990,"pt":"This Week in Review: Tech companies\u0026#39; NSA pushback, and Rolling ...","s":"130717-rolling-stone-cover-vmed-2p. “What is so troubling about this image, ...","sc":1,"si":"/search?q=rolling+stone\u0026um=1\u0026sa=N\u0026hl=en\u0026biw=1787\u0026bih=783\u0026tbm=isch\u0026tbs=simg:CAESZAm7GljYWHCsgxpQCxCo1NgEGgIIFwwLELCMpwgaPAo6CAESFMECwQHDAtIC0gHmAuMCxwHZAt0BGiC3iYtoCLUpNva3B2aUpoyIcYhoa_1xW22uvavF9eoErSAwhuf8xbwdF2_1Q","sm":"Similar","th":262,"tu":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1QeC7nHR8ycQUl67ZT1ZsYFt42RbLeV9G-yAJMHkbT34Jj4ofsg","tw":193}
</div>
</div>
Dins d'aquest codi podem localitzar la url de la imatge:

que està dins de:

Per tant, l'objectiu és que amb DOM podem localitzar totes les capes amb class="rg_di", i dins la cadena, utilitzant funcions de cadena per identificar la url de la imatge que trobem entre imgurl= i &.

L'objectiu és treure per pantalla una llista de les url de totes les imatges.

Una solució és (afegir el codi al final del codi font):

<script type="text/javascript">
elements = document.getElementsByClassName("rg_di");
document.write(elements.length);
document.write("<br />");
for (i=0;i<elements.length;i++)           
{
cad = elements[i].innerHTML;
document.write(cad.substr(cad.search("imgurl=")+7,cad.search("&amp")-cad.search("imgurl=http")-7));
document.write("<br />");
}
</script>

Podem copiar l'anterior script al final de tot de la nostra pàgina, i el resultat ha de ser similar a:

...
http://www.ksdk.com/images/640/360/2/assetpool/images/130717094445_tsarnaev-rolling-stone.jpg
http://www.usnews.com/pubdbimages/image/52206/WideModern_TsarnaevRollingStone_130718620x413.jpg
http://media.zenfs.com/en/blogs/news/rolling-stone-tsarnaev-cover-lg.jpg
http://www3.images.coolspotters.com/photos/39457/rolling-stone-magazine-australia-profile.jpg
http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r%253Dx404%2526c%253D534x401/local/-/media/USATODAY/test/2013/07/17/1374061594000-Tsarnaev-1307171147_4_3.jpg
http://rapradar.com/wp-content/uploads/2013/08/labimg_640_macklemore-rolling-stone.jpg
http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/v2_article_large/public/2013/05/21/rollingstone.jpg
http://cbswzlx2.files.wordpress.com/2013/07/rolling_stone_tsarnaev-1.jpg%253Fw%253D350
http://www.gannett-cdn.com/-mm-/1dbdca4b217a9e3efe55f04f1471da92f0f6a5b4/c%253D18-0-862-636%2526r%253Dx404%2526c%253D534x401/local/-/media/USATODAY/test/2013/11/19//1384883363000-DylanRollingStone.jpg
http://www.csmonitor.com/var/ezflow_site/storage/images/media/content/2013/0718/0718-rolling-stone-cover-boston-bomber/16389797-1-eng-US/0718-Rolling-Stone-cover-Boston-bomber_full_600.jpg
http://www.thefabfemme.com/wp-content/uploads/2011/06/Lady-Gaga-Rolling-Stone.jpg
http://cdn.idolator.com/wp-content/uploads/2013/01/30/rihanna-rolling-stone-2013-400x470.jpg
http://assets.noisey.com/content-images/contentimage/20653/1151.jpg
...

NOTA: per al curs 2017-2018, el div que engloba cadascuna de les imatges té class: rg_meta notranslate:

elements = document.getElementsByClassName("rg_meta notranslate");

També pots utiltizar querySelectorAll:

elements = document.querySelectorAll('[jsname="ik8THc"]');

Un cop tenim el contingut del div que engloba la imatge, podem trobar la url de la imatge amb els delimitadors següents:

document.write(cad.substr(cad.search("ou")+5,cad.search("ow")-cad.search("ou")-8));

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology


creat per Joan Quintana Compte, Novembre 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines