Javascript ja DOM

Alkuvalmistelut
Hello World
Elementtien saanti ja arvojen muuttaminen
- Otsikoiden numerointi
- Menu
Elementtien lisäys
- Linkit tekstiksi linkkilistaan
- Yhteenlaskupeli
Tapahtumat
- Tapahtumankäsittelijän lisääminen
Lisätehtäviä

Harjoitellaan Javascriptin ja DOM-rajapinnan perusteita.

Mallivastaus (malli.zip)

Alkuvalmistelut

Käynnistä Firefox-selain. Seuraavat tehtävät toteutetaan Firefoxissa käyttäen W3C:n DOM-rajapintaa. Älä käytä valmiita Javascript-kirjastoja.
Asenna Firebug-debuggeri ellet ole vielä sitä asentanut.
Avaa avuksesi

Hello World

Tallenna käyttöösi valmis dokumenttipohja johonkin väliaikaishakemistoon.
Avaa paketti W:\web-sovellukset-hakemiston alihakemistoon ohjaus2.
Luo haluamallasi editorilla nanonano.js-tiedosto samaan kansioon tallentamasi dokumenttipohjan kanssa.
Avaa editoriin ja Firefox-selaimeen Nanonanon kotisivu index.html.
Liitä nanonano.js XHTML-dokumenttin head-osaan script-elementillä.
Kirjoita nanonano.js-tiedostoon ensin yksinkertaisin mahdollinen Javascript-ohjelma:
```
alert("Hello world");
```
Lataa sivu uudelleen selaimessa. Jos kaikki meni ok niin näytölle pitäisi ilmestyä dialogi jossa lukee Hello world.
Dialogi ilmestyy jo ennen sivun sisältöä joten korjataan ohjelmaa sen verran, että sivu ilmestyy ensin ja vasta sitten dialogi. Siirrä alert-funktiokutsu ikkunan onload-tapahtumankäsittelijäfunktioon.
```
"use strict"; // estää pahimpia virheitä

window.onload = function() {
  alert("Hello world");
};
```
Kokeile ladata sivu uudelleen (reload). Nyt dialogi ilmestyy vasta dokumentin latauduttua.
Kommentoi (// tai /* */) alert-komento pois ennen seuraavia tehtäviä.

Elementtien saanti ja arvojen muuttaminen

Haetaan elementtien sisältä tekstejä ja muutetaan niitä.

Otsikoiden numerointi

Lisää uusi funktio numeroi ja kutsu tätä window.onload-tapahtuman käsittelijäfunktiossa.
Hae numeroi-funktiossa kaikki h2-elementit sopivan nimiseen muuttujaan. Tämä onnistuu getElementsByTagName-metodilla.
Käy for-silmukassa läpi listassa olevat h2-elementit. Listan alkioiden määrän saa length-metodilla.
Haetaan h2-elementtien tekstit
- Yksittäisen h2-elementin saa item-metodilla tai []-operaattorilla.
- Kunkin elementin sisällä oleva teksti muodostaa vielä oman TextNode-tyypin olionsa.
- Tämän saat firstChild-attribuutista.
- Varsinaisen tekstin (String-tyyppiä) saa nodeValue-attribuutista.
- Kokeile miten textContent-ominaisuus toimii. Sillä saat suoraan jonkun elementin tekstisisällön eikä tarvitse välittää erillisistä TextNodeista
Aluksi tekstin voi laittaa menemään Firebugin konsoliin console.log-metodilla ja testata tuleeko sinne tekstiä. Arvoja voi myös tutkia Firebugin debuggerilla.
- Valitse Script-välilehti, napauta rivinumeroa ja lataa sivu uudelleen.
- Koodin suoritus pysähtyy breakpointiin. Maalaa haluamasi lauseke ja valitse oikealla Add Watch.
- Osoittamalla muuttujia saat myös näkyviin niiden arvot.
- Kun suoritus on pysähtynyt voit testata sen hetkisiä arvoja kirjoittamalla lausekkeen Console-välilehteen.
nodeValue-attribuuttiin voi myös asettaa arvoja. Lisää nykyisen arvon eteen vielä for-silmukassa käytetyn indeksin arvo. Kokeile. Numerointi ei vielä mene oikein, joten lisää kierrosnumeroon vielä yksi.

Luo dokumentin alkuun XHTML:ää kirjoittamalla kaksitasoinen sisäkkäinen lista, jossa on pääkohdat Artikkelit, Harkat ja Linkit ja näiden alle pari listakohtaa, joiden sisällä on linkit. Lisää näiden listakohtien eteen img-elementillä minus.jpg-kuva merkitsemään avattua menukohtaa.
Merkitse ulompi lista id-attribuutilla. Muotoile CSS:llä listan ulkoasu ja liu'uta se oikeaan laitaan.
Luo nanonano.js-tiedostoon uusi funktio muuta_nakyvyys ja aseta ensimmäisen parametrin nimeksi event.
Hae window.onload-tapahtumankäsittelijässä edellä määrittelemälläsi id:llä varustettu ul-elementti johonkin muuttujaan (getElementById).
Pyydä kaikkia tämän ul-elementin alla olevia img-elementtejä getElementsByTagName-metodilla.
Käy for-silmukalla img-elementtilista läpi ja lisää kunkin elementin click-tapahtuman käsittelijäksi funktio muuta_nakyvyys. kts.tapahtumat
```
elementti.addEventListener("click", muuta_nakyvyys);
```
Selvitä muuta_nakyvyys-funktion alussa mikä elementti on aiheuttanut tapahtuman. Tämä selviää muuta_nakyvyys-funktiolle parametrina tulevan event-olion target-attribuutista. Voit esim. kokeilla mitä tekee console.log(event.target.nodeName) tai katsoa Firebugin debuggerilla mitä event-parametri pitää sisällään.
Muuta kuvan (event.target) src-attribuutin arvoksi plus.jpg. Kts. setAttribute. Kokeile selaimella. Lisää logiikkaa ja aseta src-attribuutiksi plus.jpg jos ennen oli minus.jpg, muutoin toisinpäin. Muuta myös alt-attribuutin ominaisuutta tekstiksi Auki/Kiinni tilan mukaan. Testaa toimintaa.
Tutki Firebugilla millainen puu sisäkkäisestä listasta muodostuu. Tämä näkyy Firebugin HTML-välilehdellä.
Selvitä, miten pääset käsiksi tapahtuman aiheuttaneen img-elementin seuraavaan (sibling) ul-elementtiin. Tapoja on monia, voit joutua käyttämään esim. joitain seuraavista attribuuteista/metodeista: parentNode, childNodes, nextSibling, nodeName ja getElementsByTagName (kts. elementtien saanti).
Piilota sisempi ul-elementti samalla kun asetat src-attribuutin arvoksi plus.jpg, muutoin näytä elementti.
- Elementin näkyvyyttä voi muuttaa esimerkiksi className-attribuuttia muokkaamalla.
- Lisää CSS-tiedostoon luokka, jossa on ominaisuus display: none;.
- Elementin saa näkyväksi poistamalla class-attribuutin. Tämä onnistuu removeAttribute-metodilla.

Elementtien lisäys

Lisätään elementtejä sivulle dynaamisesti DOM-rajapinnan avulla.

Linkit tekstiksi linkkilistaan

Linkit tekstiksi a-elementin jälkeen

Luo uusi funktio linkit ja kutsu sitä window.onload-käsittelijäfunktiossa.
Merkitse id-ominaisuudella dokumentin lopussa oleva ul-elementti.
Hae linkit-funktiossa id:llä varustettu ul johonkin muuttujaan.
Pyydä kaikkia tämän elementin alla olevia a-elementtejä getElementsByTagName-metodilla.
Tee for-silmukka ja hae kunkin a-elementin http-osoite href-ominaisuudesta ja tulosta se Firebugin konsoliin. Tämä onnistuu getAttribute-metodilla.
Luo osoitteesta uusi tekstisolmu createTextNode-metodilla.
Lisää se kyseisen a-elementin sisältävän li-elementin loppuun. Tarvitset parentNode-attribuuttia ja appendChild-metodia.
Kokeile toimiiko skripti. Ulkoasua voi parantaa lisäämällä tekstin alkuun vielä yhden välilyönnin. Koodin uudelleenkäytettävyyttä voi vielä parantaa siten, että funktion parametriksi laitetaan id, tämä id haetaan dokumentista ja tämän jälkeläisinä olevat linkit "tekstitetään".

Yhteenlaskupeli

Rivejä joissa kaksinumeroisia lukuja ja tekstikenttä niiden summaa varten

Tehdään Nano nanon sivuille päässälaskun harjoitteluun pieni yhteenlaskutehtäviä generoiva peli.

Lisää h2-otsikko ja sen alle div-lohko, jonka on id-ominaisuuden arvo on laskut. Lisää myös painike Tarkista, jolla on myös oma id-ominaisuuden arvonsa.
Tee funktio luo_lasku, joka ottaa parametrinä rivin numeron ja palauttaa p-elementin, joka sisältää arvotun laskutehtävän tekstinä ja tekstilaatikon vastaukselle. Tuotettu elementti on muotoa:
```
LUKU1 + LUKU2
 = <input id="summa_riviX" type="text" size="3" />
```
- Elementin runko-osan saa luotua helposti DOMTool-työkalulla. Kopioi elementit HTML-osaan ja napauta Create DOM Statements. Kopioi DOM-koodi js-tiedostoosi. Palautettava elementti löytyy Nodes to Append -osasta.
- Muuta id-attribuuttien asettamista siten, että X:n tilalle tulee parametrina annettu numero.
- Arvo tekstien LUKU1 ja LUKU2 tilalle jotkin luvut väliltä 0-99. Tämä onnistuu Math.random-metodilla.
Tee funktio luo_laskut, joka luo kymmenen laskua for-silmukassa ja lisää ne laskut-div-lohkon sisälle. Kutsu luo_lasku-funktiota silmukan kierrosluvun arvolla. Lisää luo_laskut-funktiokutsu window.onload-tapahtuman käsittelijään.
Tee CSS-tiedostoon uusi luokka .virhe, jossa muuttaa elementin taustanvärin punaiseksi ja tekstinvärin mustaksi.
Tee funktio tarkista_laskut. Lisää tämä funktio window.onload-tapahtuman käsittelijässä tarkista-napin click-tapahtuman käsittelijäksi.
Käy tarkistuksessa kaikki rivit läpi for-silmukassa ja tarkista ovatko kaikki laskut oikein.
- Summaa luvut yhteen ja vertaile onko luku sama kuin tekstilaatikossa.
  - Luvut sisältävät elementit saat document-olion getElementById-metodilla. Lisää id-arvojen runkojen ekaluku_rivi, tokaluku_rivi ja summa_rivi silmukan kierroksen numero.
  - Tekstin saa textContent- tai nodeValue-attribuutilla. Tekstilaatikosta arvon saa value-ominaisuudesta. Huom. ei html-koodin attribuutista vaan DOM-objektin value-ominaisuudesta.
  - Summausta varten luvut on muutettava integer-tyyppiseksi parseInt-funktiolla
- Jos ei ole, niin laita tekstilaatikon class-attribuuttiin arvo virhe.
- Jos rivi on kunnossa, niin poista class-attribuutti
- Jos kaikki rivit ovat ok, niin ilmoita alert-funktiolla pelin läpipääsystä.
Testaa "pelin" toimintaa.

Tapahtumat

Lisätään Javascriptillä elementteihin tapahtumia.

Tapahtumankäsittelijän lisääminen

Luo johonkin kohtaan dokumenttia painike button-elementillä. Anna painikkeelle jokin id-arvo ja näkyvä teksti Hello world.
Luo uusi funktio varoitus ja siirrä alert-kutsu sinne.
Lisää onload-tapahtuman käsittelijään koodi, joka hakee napin väliaikaismuuttujaan. Tämä onnistuu document-olion getElementById-metodilla.
Aseta painikkeelle click-tapahtuman käsittelijäksi funktio varoitus addEventListener-metodilla.
Testaa napin toimintaa. Javascript-virheet näkee helposti Firebugin avulla selaimen oikeasta alakulmasta Error-tekstiä klikkaamalla:
Muuta ohjelman toimintaa siten, että Hello world ilmestyy vain tuplaklikkauksesta (kts. XHTML:n tapahtumat).

Jos aikaa jäi, niin kokeile vielä toteuttaa uuden pelin arpominen ja vastaamisen kuluneen ajan laskeminen pelin uudelleenaloituksesta hyväksyttyyn tarkistukseen.