Document Object Model (DOM) ja tapahtumankäsittely - Viikkotehtävä 2

Tässä tehtävässä opitaan HTML5-dokumentin rakenteen muokkausta DOM-rajapinnan avulla ja tapahtumankäsittelyä.

Käy ensin läpi nämä luentomateriaalit:

Yhteiset vaatimukset

Kaikille tasoille yhteiset vaatimukset ovat:

Taso 1

Tallenna itsellesi valmis pohja:

Katso pohja.html-tiedostosta ja vt2.js-tiedostosta vinkit.

Data on tällä kerralla XML-muodossa. Joudut DOM-operaatioiden avulla muuntamaan datan ainakn osittain helpommin javascriptilla käsiteltävään muotoon.

Datan rakenne ei ole aivan sama kuin aikaisemmin! Joukkueen sarja tai leimaukset eivät ole nyt viitteitä vaan niissä on vastaavan sarjan tai rastin tunniste (id), jonka perusteella täytyy etsiä oikea sarjaobjekti tai rastiobjekti. Vinkki: Luo oma objekti, johon kopioit viitteet kaikkiin sarjoihin. Käytä objektissa avaimena sarjan id:tä. Tämän objektin avulla on helppo löytää aina kutakin id:tä vastaava sarja ilman silmukoita. Vastaavan voi tehdä myös rasteille.

Muokkaa pohja.xhtml- ja vt2.js-tiedostoja ja kirjoita Javascript-ohjelma, joka tekee seuraavat asiat.

Taso 3

Laajenna Taso 1 -ohjelmaa seuraavilla ominaisuuksilla ja muutoksilla:

joukkuelistaus taso 3

Taso 5

Toteuta taso 3:n mukainen Javascript-ohjelma seuraavilla laajennuksilla:

Vinkkejä

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta