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
------------------------------

Entrega al Classroom

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