Viikkotehtävä 7 - Javascript ja DOM

• Taso 1
• Taso 3
• Taso 5

Treenataan dokumenttipuun käsittelyä Javascript-kielen ja DOMin avulla. Tehdään VT3:sta tuttu painopudotussovellus Javascriptillä siten, että se toimii suoraan selaimessa.

Yhteiset vaatimukset:

• Tehtävä on palautettava maanantaina 14.4.2008 klo 12.00 mennessä.
• 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.
• Pohjaksi annettuja XHTML-sivuja ei saa muokata muuten kuin ohjelmallisesti Javascript-ohjelmointikielellä.
• XHTML-sivuun saa tehdä muutoksia vain standardien DOM-operaatioiden avulla, eli esim. innerHTML-funktiota ei saa käyttää.
• 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.
• Valmiin ohjelman pitää toimia Firefox 2 -selaimella, muista selaimista ei tarvitse toistaiseksi välittää (Firefoxissa on standardinmukaisin DOM-tuki).
• Dynaamisen XHTML:n luomisen apuna voi käyttää tarvittaessa DOMTool-työkalua.

Taso 1

• Toteuta mallikuvien mukainen painon muutosten keskiarvon laskusovellus.
  • Alku
  • Loppu
• Käytä valmista XHTML-pohjaa.
• Ohjelman ei tarvitse tehdä virhetarkistuksia.
• Ohjelmaa voi ilman sivun uudelleenlataamista käyttää monta kertaa peräkkäin.
• Keskiarvo ilmoitetaan tarkkana arvona ja muut tulokset lähimmäksi kokonaisluvuksi pyöristettyinä.

Taso 3

Tee mallikuvien mukainen laskuri, joka laskee kunkin henkilön painon muutoksen taulukkoon ja niistä muutosten keskiarvon.

• Mallitiedostot:
  • Tiedon syöttö ja virheentarkistukset
  • Tulokset
  • XHTML-pohja
• Painoksi kelpaa kokonaisluku tai desimaaliluku.
• Painon on oltava vähintään 40 kg ja enintään 300 kg.
• Tekstiä ei saa hyväksyä painoksi.
• Tyhjää painotietoa ei hyväksytä.
• Nimi ei saa olla tyhjä.
• Virheellisesti täytetyn kentän ulkoasu pitää muuttaa poikkeavaksi mallikuvan tapaan heti kentästä poistuttaessa.
• Keskiarvo ilmoitetaan yhden desimaalin tarkkuudelle pyöristettynä ja muut tulokset lähimmäksi kokonaisluvuksi pyöristettyinä.
• Käyttäjä voi tuloksen saatuaan muuttaa arvoja ja laskea uuden tuloksen.
• Lomakkeen luominen on tehtävä seuraavien javascript-määritysten pohjalta:

  var lkm = 4;
  var kuukaudet = ["Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu"];

Taso 5

Tee mallikuvien mukainen painopudotuksien laskusovellus, jossa voi valita kuinka montaa henkilöä seurataan ja monenko kuukauden ajan. Tuloksissa näytetään henkilöiden painojen kokonaismuutokset, kaavio muutoksista kuukausittain ja kokonaismuutosten keskiarvo.

• Mallit:
  • Alku
  • Lomake
  • Virheet
  • Tulokset
  • XHTML-pohja
• Seurattavat kuukaudet valitaan listasta ja henkilöiden määrä syötetään tekstikenttään. Näiden tietojen perusteella luodaan oikeaa kokoa oleva kyselylomake. Henkilömäärää ja valittuja kuukausia voi muuttaa milloin tahansa jolloin luodaan uusi lomake mahdollisen aiemman tilalle.
• Virheentarkistukset kuten tasolla 3, mutta nyt on virheilmoitus myös ilmoitettava virheellisen syöttökentän vieressä. Lisäksi pitää tarkistaa, että kahden peräkkäisen mittausajankohdan välinen painomuutos ei ole yli 20kg. laske-painike saa olla aktiivinen vasta kun kaikissa lomakekentissä on kelvollinen syöte.
• Painojen muutokset henkilöittäin ja muutosten keskiarvo lasketaan ja ilmoitetaan kuten tasolla 3. Tämän lisäksi syötettyjen painojen perusteella luodaan mallin mukainen kaavio, joka kuvaa henkilöiden painojen muutoksia.
  • Tee mallikuvaa vastaava kaavio käyttäen Flotr-Javascript-kirjastoa.