Harjoitus 3: Liian interaktiivinen nettisivu

HTML-event-esimerkkejä

Tällä kertaa luomme nettisivun, jossa on aivan liikaa toimintoja edelliskerran onclick-eventin sukulaisten avulla. Harjoitus 2b: Pisteenlaskusovellus​ haastoi sinut käsittelemään 2x2-taulukkoa, jonka sisältämien lukujen arvo kasvoi klikkaamalla. Nyt tarkoituksena on luoda 10x10-taulukko ja liittää jokaiseen soluun oma toimintonsa.

  1. Löydä itsesi osoitteesta script.google.com.
  2. Ota mallia edellisestä harjoituksesta ja luo doGet-toiminnon sisältävä Koodi.gs.
  3. Luo samanniminen HTML-tiedosto kuin HtmlServicen output-toiminto vaatii.
  4. Luo bodyn sisään taulukko [[$ \text{<table>} $]]​.
    • Tämän sisälle taulukkorivi [[$ \text{<tr>} $]]​.
      • Tämän sisälle 10 taulukon solua [[$ \text{<td>teksti</td>} $]]​.
      • Kirjoita solun sisälle vapaavalintainen teksti. Tämä voi olla esimerkiksi tämän Youtube-videon upotuskoodi.​​
    • Sulje taulukkorivi [[$ \text{</tr>} $]]​.
  5. Toista, kunnes rivejä [[$ \text{tr} $]]​ on kymmenen. Sulje [[$ \text{</table>} $]]​.
  6. Liitä soluihisi eventtejä: Esimerkkejä interaktiivisista toiminnoista
  7. Muotoile blokeistasi sivun laajuisia.
    • [[$ \text{html,body,table { width:100%; height:100%; } }$]]
    • [[$\text{ td { width:10%; height:10%; text-align:center; align-content:center; }} $]]​