M06UF3Q3: Google Images i taula dinàmica

Introducció

Hem vist a classe com generar una taula dinàmica amb Javascript i createElemnt. Creem la taula, els tr, els td, els nodes de text, i anem ajuntant (append) cadascun d'aquests elements al seu pare.

Desenvolupament

A partir de l'exemple vist a classe, anem a fer la mateixa idea aplicat a unes imatges de Google Images.

1. origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente), i guarda-ho localment a google_images.html.

2. Pots accedir a les imatges contingudes mitjançant document.images, i a partir d'aquí a les propietats (title, alt, etc) (veure el codi de sota)

3. crea de forma dinàmica una taula, amb els següents requisits:

3.1) crear una capçalera (fotos de l'Everest, per ex') (hauràs d'utilitzar colspan)

3.2) crea un full d'estils style.css per a la taula (per exemple, pots agafar l'estil que es proposa a: https://jsfiddle.net/zinoui/dB93J/)

3.3) Crea un footer per a la taula, amb el teu nom (taula feta per Pep XXX)

Com accedim a les imatges que tenim en el document html que hem creat a partir de la pàgina de Google Images?

Prova el següent codi i ho tindràs més clar:

console.log(document.images.length);
console.log(document.images[22].alt);
console.log(document.images[22].width);
console.log(document.images[22].height);
console.log(document.images[22].src);

Amb la informació d'aquests 4 camps ja pots generar la teva taula de forma dinàmica. Els camps que contenen molt text els pots limitar a 20 caràcters i posar punts suspensius.

Per tant, la taula tindrà l'estructura:

------------------------------
Fotos Everest                |
------------------------------
alt  | width | height | src  |
xxx1 | 325   | 244    | yyy1 |
xxx2 | 325   | 244    | yyy2 |
...  | ...   | ...    | ...  |
------------------------------
taula realitzada per Pep     |
------------------------------

Header i footer de la taula

Si no ho has vist mai, sàpigues que en una taula html no tenim només tr i td, sinó que també tenim el concepte de capçlaera (th) i peu de la taula (tf). I al th i tf se'ls pot aplicar uns estils css diferenciats.

Per al nostre head i footer haurem de fer un colspan (és a dir, la capçalera ha d'ocupar l'espai de 4 cel·les). Ho fem de la següent manera:

th = document.createElement("th");
th.setAttribute("colspan", "2");

Entrega al Classroom

Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.

Opcional per pujar nota

Fes un screencast explicant el procés que has seguit en aquesta tasca, i ensenyant el teu resultat. Hauràs d'ensenyar tant el resultat final com la part de codi més significativa.

---

creat per Joan Quintana Compte, novembre 2021