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>

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