Harjoitus 3: Liian interaktiivinen nettisivu

Valmis sovellus

2019-02-15T09:50:49+02:00

Klikkaa tästä!

Edellisen tehtävän tapaan pääset testaamaan sovellusta ennen devaamista.

Esimerkkejä interaktiivisista toiminnoista

2019-03-27T11:32:06+02:00

Ruutu tervehtii tekstillä "Hyvää päivää!", kun kursori tulee ruutuun, ja hyvästelee tekstillä "Näkemiin!", kun tämä poistuu.

<td onmouseover="tervehdi(this)" onmouseout="hyvästele(this)"></td>
- function tervehdi(painike) { painike.innerHTML = "Hyvää päivää!"; }
- function hyvästele(painike) { painike.innerHTML = "Näkemiin!"; }

Ikkuna tervehtii tekstillä "Hyvää päivää!", kun kursori tulee ruutuun, ja hyvästelee tekstillä "Näkemiin!", kun tämä poistuu.
Ruudun lukuarvo kasvaa yhdellä, kun sitä klikkaa. Poistumalla ruudusta lukuarvo nollautuu.
- <td onclick="lisää(this)" onmouseout="nollaa(this)"></td>
  - function lisää(painike) { painike.innerHTML += 1; }
  - function nollaa(painike) { painike.innerHTML = 0; }
Ruudun taustaväri muuttuu, kun kursori liikkuu ruudun päälle tai pois.
- <td onmouseover="enterväri(this)" onmouseout="exitväri(this)"></td>
  - function enterväri(painike) { painike.style.backgroundColor = "red";}
  - function exitväri(painike) { painike.style.backgroundColor = "blue"; }
Ruudun taustakuva muuttuu, kun kursori tuplaklikkaa ruutua.
- <td ondblclick="taustakuva(this)"></td>
  - function taustaväri(painike) { painike.style.background = "url('https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/63062-istock-658344164.jpg?itok=9A7q2BFc')"}

HTML-event-esimerkkejä

2019-03-27T11:34:02+02:00

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>} $]].
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; }} $]]

"Miten se oikeasti menee"

2019-04-24T11:40:47+03:00

Tehtävän 10x10-taulukon luominen käsin on työlästä. Seuraava [[$ \text{script} $]] luo sen puolestasi.

[[$ \text{var table = document.getElementsByTagName("table")[0];} $]]
[[$ \text{var rivit = 10;} $]]
[[$ \text{while (rivit) \{} $]]
[[$ \quad \text{var sarake = 10;}$]]
[[$ \quad \text{var rivi = document.createElement("tr");} $]]
[[$ \quad \text{while (sarakkeet) \{ } $]]
[[$ \quad \quad \text{var sarake = document.createElement("td");} $]]
[[$ \quad \quad \text{sarake.innerHTML = rivit + "x" + sarakkeet;} $]]
[[$ \quad \quad \text{rivi.appendChild(sarake);} $]]
[[$ \quad \quad \text{sarakkeet--;} $]]
[[$ \quad \text{\}} $]]
[[$ \quad \text{table.appendChild(rivi);} $]]
[[$ \quad \text{rivit--;} $]]
[[$ \} $]]