Viikkotehtävä 7 - Javascript ja DOM

• Taso 1
• Taso 3
• Taso 5

Treenataan dokumenttipuun käsittelyä Javascript-kielen ja DOMin avulla. Tehdään lintubongaukseen keskiarvo-laskuri, joka toimii suoraan selaimessa.

Yhteiset vaatimukset:

• Käytetään vain Javascript-ohjelmointikieltä.
• PHP-kieltä ei saa käyttää.
• Ohjelman pitää toimia myös ilman verkkoyhteyttä, ts. Javascriptillä ei saa kutsua mitään www-palvelimelta löytyviä palveluja.
• XHTML-sivun saa tehdä normaalisti seuraavin rajoituksin
  • Sivuja saa olla vain yksi kappale JavaScript-kooditiedoston lisäksi.
  • JavaScriptiä ei saa upottaa XHTML-sivuun vaan se on oltava erillisessä tiedostossa.
  • Tapahtumankäsittelijät on lisättävät Javascriptin avulla, ei siis suoraan XHTML:ään kirjoittaen.
  • XHTML-sivuun saa tehdä muutoksia vain standardien DOM-operaatioiden avulla.
  • Ulkoasun muokkaukseen voi käyttää erillistä CSS-tiedostoa ja DOM-operaatioita. On suositeltavaa käyttää CSS-tyylimäärityksiin liittyviä DOM-operaatioita, kuten esim. class-attribuutin muokkausta.
• Kommentoikaa koodin oleellisimpia osia!
• Valmiin ohjelman pitää toimia Firefox 2 -selaimella, muista selaimista ei tarvitse toistaiseksi välittää (Firefoxissa on standardinmukaisin DOM-tuki).

Taso 1

Tee tason 1:n mallikuvien mukainen laskuri, joka laskee 4 kuukauden keskiarvon.

• Mallitiedostot
• Tekstilaatikkoon on kirjoitettava kokonaisluku.
  • Virheellisen tekstin kirjoittamisen jälkeen laatikko värjäytyy punaiseksi.
  • Jos laske-painiketta yrittää painaa ja jossain laatikossa on virhe, niin käyttäjää varoitetaan tästä varoitusikkunalla eikä keskiarvoa lasketa.
  • Kun virheellinen teksti on korjattu muuttuu laatikon väri takaisin valkoiseksi.
  • Tyhjä laatikko ei ole virheellinen.
• Keskiarvon laskeminen
  • Tehdään aina määrätyn tekstilaatikkomäärän (4) perusteella.
  • Tyhjän tekstilaatikon arvo lasketaan nollaksi.
  • Sivu ei vaihdu laskun yhteydessä, vaan tulos vaihdetaan dynaamisesti DOM:n avulla
  • Käyttäjä voi muuttaa tämän jälkeen arvoja ja laskea uuden tuloksen.

Taso 3

Tee tason 3:n mallikuvien mukainen laskuri, joka laskee 4 kuukauden ajalta kuinka monta kertaa on yhdellä kerralla keskimäärin bongattu lintuja.

• Mallitiedostot
• Virheentarkistukset kuten tasolla 1.
• Käyttäjä voi valita alasvetovalikosta kuinka monta bongauskertaa on yhden kuukauden aikana (1-9).
  • Kun valinta tehdään, poistuvat kaikki tällä hetkellä kirjoitetut luvut, ja niiden tilalle tulee tyhjiä tekstilaatikoita valittu määrä.
• Keskiarvon laskeminen
  • Tehdään kaikkien ruudulla näkyvien tekstilaatikoiden määrän perusteella (= 4 kuukautta kertaa valittu havaintojen määrä kuukaudessa).
  • Tyhjän tekstilaatikon arvo lasketaan nollaksi.
  • Tuloksessa saa olla enintään kaksi desimaalia.
  • Sivu ei vaihdu laskun yhteydessä, vaan tulos vaihdetaan dynaamisesti DOM:n avulla
  • Käyttäjä voi muuttaa tämän jälkeen arvoja ja laskea uuden tuloksen.

Taso 5

Tee tason 5 mallikuvien mukainen laskurisovellus, joka luo dynaamisesti täytettävät kuukaudet, laskee keskiarvot kuukausittain ja jossa kuukausittainen bongausmäärä voi vaihdella.

• Mallitiedostot
• Laskettavien kuukausien valinta:
  • Bongauslaskuissa huomioon otettavat kuukaudet voi valita valintaruuduilla.
  • Jos valinnan poistaa, niin kuukausi ja siihen liittyvät tekstilaatikot piilotetaan Tiedot-osasta. Samalla piilotetaan myös keskiarvon näyttäminen.
  • Jos valinnan laittaa takaisin päälle, niin näkyviin tulevat täytettävät tekstilaatikot ja kuukauteen liittyvä keskiarvon näyttö. Vanhat syötetyt tiedot tulevat myös näkyviin.
• Kuukausia pitää pystyä lisäämään helposti
  • Valintoja ja tekstilaatikoita ei saa kirjoittaa valmiiksi XHTML:ään vaan ne on luotava dynaamisesti JavaScriptillä.
  • Dynaamisen XHTML:n luomisen apuna voi käyttää DOMTool-työkalua.
  • Kuukausien nimet voi määritellä Javascript-taulukkoon:

    var kuukaudet = ["Tammikuu", "Helmikuu", "Maaliskuu",
     "Huhtikuu", "Toukokuu", "Kesäkuu"];

• Tietojen syöttö:
  • Virheentarkistukset kuten tasolla 1.
  • Tiedon syöttäminen tapahtuu siten, että kun käyttäjä täyttää kuukauden viimeisen laatikon ja siirtyy siitä pois, niin viereen ilmestyy tyhjä laatikko.
    • Näin ollen kuukausilla voi olla erilaisia bongausmääriä eikä käyttäjä tarvitse miettiä kukin kuukauden bongausmääriä.
    • Laatikon lisäämistä ei tarvitse tehdä, jos syötetty tieto on virheellinen.
  • Jos käyttäjä myöhemmin poistaa jostakin laatikosta luvun ja siirtyy pois editoimasta laatikkoa, niin tyhjä laatikko katoaa.
  • Viimeinen laatikko on siis aina tyhjä (ellei ole tullut virheitä).
• Keskiarvon laskeminen
  • Tehdään kuukausittain näkyville kuukausille, jos laatikoissa ei ole virheitä.
  • Keskiarvo on laskettava todellisten lukumäärien perusteella.
    • Jos käyttäjä on esim. syöttänyt maaliskuulle luvut 3,4,5,6 niin maaliskuun keskiarvo on 4.5.
    • Huomaa, että viimeistä tyhjää tekstilaatikkoa ei saa ottaa huomioon keskiarvon laskussa.
  • Tuloksissa saa olla enintään kaksi desimaalia.
  • Sivu ei vaihdu laskun yhteydessä, vaan tulos vaihdetaan dynaamisesti DOM:n avulla
  • Käyttäjä voi muuttaa tämän jälkeen arvoja ja laskea uuden tuloksen.