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.
- Löydä itsesi osoitteesta script.google.com.
- Ota mallia edellisestä harjoituksesta ja luo doGet-toiminnon sisältävä Koodi.gs.
- Luo samanniminen HTML-tiedosto kuin HtmlServicen output-toiminto vaatii.
- 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>} $]].
- Tämän sisälle taulukkorivi [[$ \text{<tr>} $]].
- Toista, kunnes rivejä [[$ \text{tr} $]] on kymmenen. Sulje [[$ \text{</table>} $]].
- Liitä soluihisi eventtejä: Esimerkkejä interaktiivisista toiminnoista
- Muotoile blokeistasi sivun laajuisia.
- [[$ \text{html,body,table { width:100%; height:100%; } }$]]
- [[$\text{ td { width:10%; height:10%; text-align:center; align-content:center; }} $]]