JavaScript ja DHTML

Esittely

Tässä materiaalissa käsitellään JavaScript-ohjelmointikielen käyttöä dynaamisten HTML-sivujen rakentamisessa. Materiaali on pintapuolisesti muokattu versio kurssimateriaalista. Verkkomateriaalina siinä on pljon parantamisen varaa.

Tarkoituksena on keskittyä itse JavaScript-kieleen ja dokumentin rakenteen kuvaamiseen DOM:in avulla. Siksi pääpaino on kielen perusteissa.

Sisältö

1. Peruskäsitteet:
   • DHTML, dynaaminen HTML
   • DOM, document-object model
   • skriptikielet
   • JavaScript, edut ja haitat
   • JavaScriptin vaihtoehdot
2. JavaScript-kielen perusteet:
   • ensimmäinen ohjelma
   • JavaScript HTML-sivulla
   • muuttujat ja arvot
   • lauseet ja lausekkeet
   • funktiot
   • tapahtumat
3. JavaScript-kielen edistyneitä piirteitä:
   • oliot
   • taulukot
   • regex-lausekkeet
   • tietojen tarkistus
4. DOM ja DHTML:
   • DHTML-esimerkkejä
   • dokumentin rakenne
   • dokumentin muokkaaminen
   • ...

Materiaalia

• JavaScript Documentation (Netscape)
• DOM HTML Element Cross Reference
• JScript Documentation (MSDN)
• DHTML reference (Microsoft)
• W3Schools JavaScript
• W3Schools DHTML

Tehtäviä

Harjoitustehtävät toimivat tässä lähinnäö esimerkkeinä. Jos haluat oppia JavaScriptiä mahdollisimman hyvin, kokeile tehtäviä ensin itse.

Perusteita

Tehtävissä tarvitaan tiedostoa urltool.js, jonka avulla voi tutkia urlissa lähetettyjä parametreja. Esimerkiksi urlissa

http://www.foo.com/test?param1=123&param2=value

on kaksi parametria param1 ja param2.

Huom: Toimii vain, jos sivu on avattu URLin avulla. Explorer avaa paikallisia tiedostoja joskun muulla tavalla, eikä ym. funktio toimi. Siinä tapauksessa avaa tiedosto väkisin URLin avulla kirjoittamalla osoitekenttään esim. "file:///D:/polku/tiedosto.html".

Tehtävät:

1. Tee Javascriptin avulla sivu, jolla tulostat kahden URLissa annetun parametrin arvot muodossa:

   param1 = 123
   param2 = value

   Vastaus.

2. Tee sivu, joka tutkii urlissa annetun parametrin koodi arvon. Jos arvo on 1234, sivulle kirjoitetaan "Koodi on oikein!", muussa tapauksessa sivulle kirjoitetaan "Koodi on väärin!".
   Vastaus.
3. Tee sivu, joka tulostaa alekkain numerot 1 - n, jossa n annetaan urlissa parametrina.
   Vastaus.
4. Ei pakollinen. Tee sivu, jossa näkyy kaksiulotteisena taulukkona ns. webbivärejä (joissa punainen, vihreä ja sininen) saavat arvoja 00, 33, 66, 99, CC). Yksi väreistä annetaan urlissa parametrina (esim. red=33).
   Vastaus.

Dokumentti ja merkkijonot

1. Tee sivu, joka sisältää lomakkeen, jossa on tekstikenttä ja yksi painike "Tarkista". Painikkeen osoittaminen avaa näkyville viestidialogin (alert), jossa lukee "Koodi on oikein!", jos tekstikentässä on "1234". Muussa tapauksessa dialogissa lukee "Koodi on väärin!". Anna lomakkeelle nimeksi (name-attribuutilla) "tarkistus" ja tekstikentälle "koodi", niin voit viitata siihen kirjoittamalla document.tarkistus.koodi.value.
   Vastaus.
2. Selainikkunassa olevan sivun voi kirjoittaa kokonaan uudestaan kutsumalla aluksi document.open(). Tämän jälkeen sivu kirjoitetaan peräkkäisillä document.write()- tai document.writeln-kutsuilla. Tee sivu, jossa on aluksi kolme painiketta. Jokaisen painikkeen osoittaminen kirjoittaa sivun uudestaan eri tavalla. Vaihtoehtoisten sivujen sisällöllä ei ole tehtävän kannalta merkitystä.
   Vastaus.
3. Tutki JavaScript-oppaasta merkkijonoluokan (String) metodeita. Tee sivu, joka esittelee metodeista ainakin kaksi. Sivulla on kaksi tekstikenttää ja kaksi painiketta. Käyttäjä kirjoittaa merkkijonon ensimmäiseen tekstikenttään. Painikkeen osoittaminen suorittaa esiteltävän metodin annetulle merkkijonolle ja laittaa tuloksena syntyneen uuden merkkijonon toiseen tekstikenttään. Kummallekin esiteltävälle metodille on siis oma painike.

Regex ja DOM

1. Ylimääräinen: Tee regex-lauseke, joka sopii XML-tagiin. Testaa lauseketta Regex-koneella. Huomaa, että kurssilla ei ole opetettu XML:ää. joten tämä on todellakin ylimääräinen.
   Vastaus:

   <([a-z]+)([ ]+([a-z0-9]+)="(([^"]|\\")*)")*[ ]*/?>|</([a-z]*)>

2. Tee HTML-sivu, jossa on monirivinen tekstikenttä (textarea) ja painike "Lisää". Painikkeen klikkaaminen avaa "prompt" -dialogin, johon käyttäjä voi kirjoittaa merkkijonon. Dialogin hyväksymisen jälkeen kijoitettu teksti siirtyy tekstikenttään uudeksi riviksi. Jos käyttäjä painaa "Cancel" -painiketta, tekstikenttään ei tule mitään.
   Vastaus.
3. Muuta edellistä sivua siten, että lisätyt rivit tulevat tekstikenttään aakkosjärjestykseen.
   Vastaus.
4. Monilla sivuilla on nykyisin (ärsyttävä) ominaisuus avata erillisiä pikkuikkunoita, joissa on kaikenlaisia mainoksia. Meidänkin on siis osattava tämä tekniikka. Tee sivu, jota avattaessa syntyy myös tällainen pikku-ikkuna, jossa on pieni kuvitteellinen mainos. Tee pikkuikkunasta kiinteän kokoinen ja jätä siitä pois kaikki ylimäääräinen.
   Vastaus.
5. Esimerkissä flyover.html käytettiin ns. flyover-kuvia, jotka muuttuvat, kun hiiri siirretään niiden päälle. Tee sivu, jossa on lista, jonka bulletit ovat tällaisia muuttuvia kuvia.
   Vastaus.

DHTML-temppuja

1. Tee HTML-sivu, jossa on linkkejä (vähintään kolme kappaletta). Kun hiiri viedään linkin ylle, ilmestyy sivulle linkkien viereen linkin kohdetta esittelevä kuva. Jokaisesta linkistä ilmestyy erilainen kuva. Kuvat tulevat aina samaan kohtaa sivua.
   Vastaus.
2. Esimerkkinä annettu outline toimii vain Explorerissa. Yritä muuttaa se toimimaan myös Netscape 6:ssa.
   Vastaus.
   Vaihtoehtoinen vastaus.
3. Muuta esimerkkiä Valikko 1 niin, että valikko avautuu sivun vasemmasta laidasta. Valikko avautuu pientä kuvaa (ei painiketta) osoittamalla ja sulkeutuu vastaavasti valikossa näkyvää pientä kuvaa osoittamalla.
   Vastaus.
4. Muuta edellistä niin, että valikko sulkeutuu, kun hiiri siirtyy pois sen päältä.
   Vastaus.