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 (aquest codi anirà dins un tag de script, al final de tot de la pàgina):

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 cel·les de capçalaera (th en comptes de td) (aplicable tant a la capçalera com al peu). I a tots els elements d'una taula se'ls pot aplicar estils css diferenciats (table, thead, tbody, tfooter, tr, td, th).

Una taula html típica seria: (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot?retiredLocale=ca)

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Totals</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

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");

Aplicar les classes d'estil als elements de la taula

Per exemple, si seguim l'exemple:

• https://jsfiddle.net/zinoui/dB93J/

podem veure que podem aplicar tot un estil a la taula:

taula.className = "taula_estil";
o bé
taula.setAttribute("class","taula_estil");

i podem defiinir com es comporten les cel·les d'aquesta taula, per ex:

.taula_estil tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

(per tal de què funcioni el codi anterior és necessari haver definit el tbody en la taula)

També pots provar aquest exemple que funciona:

• https://jsfiddle.net/mplungjan/r5v7q1js/

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