JavaScript ja DOM
- Luentotaltiointi
- JavaScript-tiedoston linkittäminen
- Syntaksi
- XHTML Events
- Document Object Model (DOM)
- Esimerkkejä
- Tehtävä
Käsitellään JavaScriptin ja DOM:nkäyttöä WWW-sovelluksissa.
JavaScript-tiedoston linkittäminen
script
-elementillä head-osassa:
<script type="text/javascript" src="jokutiedosto.js"></script>
Syntaksi
Javascriptin syntaksista kannattaa lukea seuraavia lähteitä:
Tässä on oleellisimmat syntaktiset erot esim. Javaan ja PHP:hen verrattuna:
Ympäristö
JavaScriptiä suoritetaan määrätyssä ympäristössä, joka voi olla esimerkiksi selaimessa. JavaScript ei itsessään määrittele, miten tietoa voidaan syöttää tai tulostaa, vaan se tarjoaa ainoastaan tiedon käsittelymekanismit. Tiedon syöttö ja vasteiden anto tehdään käyttäen XHTML:ää ja DOM:ia.
Muuttujat
JavaScript on heikosti tyypitetty kieli. Muuttujien tyyppi määräytyy siis arvon perusteella. Muuttujat esitellään seuraavasti:
var x = 1.0; var s = "Diiba daaba"; totuus = true; // globaali muuttuja, näkyy kaikissa funktioissa
Huomioi seuraavaa:
- Liukulukujen tarkkuus n.15 desimaalia.
0.2 + 0.1111 = 0.31110000000000004
Tulos on pyöristettävä sopivaan tarkkuuteen. - Muuttujan näkyvyys on rajoittuu funktion sisälle, jos muuttuja esitellään var-etuliitteellä
- Muuttujalla voi olla myös muutama erikoisarvo:
- NaN - not a number
- Infinity ja -Infinity - äärettömyydet
- null - viittaus tyhjään
- undefined - arvoa ei määritelty
Operaattorit
Käytössä on normaalit aritmeettiset ja vertailuoperaattorit.
- 0, tyhjä merkkijono, NaN, null ja undefined ovat loogisissa operaatioissa totuusarvoltaan false, kaikki muut true
- !! antaa muuttujan totuusarvon
- Matemaattisia operaatioita varten on olemassa globaali objekti Math
- === tarkistaa ovatko saman arvoiset ja samaa tyyppiä
Merkkijonot
Merkkijonot ovat olioita, joilla mm. seuraavia metodeja:
Merkkijonoja voi operoida seuraavilla operaattoreilla:
- +
- Liittää merkkijonot yhteen
- < > <= >= ==
- Vertailee aakkosjärjestystä
- s[n]
- Antaa merkkijonon s n:nnen kirjaimen
Merkkijonojen tyyppien muunnoksiin on olemassa muutama globaali funktio:
Taulukot
Taulukko luodaan Array-oliolla
var paikat = new Array(); paikat[0] = "Jämsä"; paikat[1] = "Äänekoski";
tai hakasulkeilla:
var paikat = ["Jämsä", "Äänekoski"];
- Taulukon indeksinä on aina numero.
- Taulukon viimeistä seuraavan indeksin saa taulukko.length -metodilla.
Assiosiatiivisia taulukoita (nimi-arvo-pareja) voi tehdä seuraavasti:
var lampo["jkl"] = -6; var saatilat = { jämsä: "Aurinkoinen"; äänekoski: "Pilvipoutaa"; };
- Assiosiatiivisia taulukoita ei voi käydä läpi foreach-tyylisesti!
Funktiot
Funktion voi esitellä seuraavasti:
function summaa(x,y) { return (x + y); }
Huomioitavaa:
- Funktiota voi kutsua ylimääräisillä parametreilla kuten PHP:ssa. Kaikki funktion saamat parametrit voi käydä läpi arguments-taulukolla.
Ohjausrakenteet
Javascriptissä on normaalit ohjausrakenteet:
XHTML Events
Javascript-funktioiden suoritus kytketään tiettyyn tapahtumaan, esimerkiksi kun sivu on ladattu tai käyttäjä tekee jotain. XHTML-elementeille voi antaa ominaisuuksia, jotka liittyvät tiettyyn tapahtumaan. Ominaisuuden arvoksi annetaan haluttu funktio. Esim.
<input onchange="laske_arvosana()" id="vt1" size="3" maxlength="3" value="0" />
Seuraavasta dokumentissa on lista tapahtumista selitteineen:
Tapahtumia ei kannata määrätä kiinteästi, sillä kaikissa selaimissa ei ole JavaScript-tukea. Parempi tapa on määrätä ominaisuudet yhdessä funktiossa, joka suoritetaan sivujen latauksen yhteydessä:
window.onload = function() { for(var i=1;i<=10;i++) { document.getElementById("vt" + i).addEventListener("change", laske_arvosana, false); } }
Tästä on myös sekin etu, että rekistöidyssä funktiossa saa viitattua tapahtuman aiheuttaneeseen elementtiin this-muuttujan avulla.
Document Object Model (DOM)
DOM on standardi, jonka avulla voidaan manipuloida dynaamisesti dokumenttipuuta.
Dokumentin rakennetta voi tutkia puumaisena hierarkisena rakenteena esimerkiksi XetorjEdit-editorin Structure Browserista tai Mozilla-selaimen DOM Inspectorilla. DOM Inspector löytyy Mozillasta valikosta Tools | Web Development | DOM Inspector. Amaya:ssa dokumentin rakenteen saa näkyviin View | Show structure.
Kukin elementti ja teksti muodostavat dokumenttipuuhun Node-tyypin olion.
JavaScript kytkeytyy DOM:iin mm. seuraavien olioiden ja metodien kautta:
Elementtien saanti
-
document.getElementById(id)
document.documentElement
document.body
-
element.getElementsByTagName(name)
element.parentNode
element.firstChild
element.lastChild
element.childNodes
Elementtien lisääminen ja poistaminen
-
document.createElement(name)
document.createTextNode(data)
-
element.appendChild(node)
element.insertBefore(node)
element.removeChild(node)
element.innerHTML - ei kuulu standardiin
Elementtien arvot
-
element.setAttribute(name, value)
-
element.getAttribute(name)
element.className
element.style
document.defaultView.getComputedStyle(element,pseudoelement).getPropertyValue(stylename)
Lisätietoa
- Gecko DOM Reference
- W3C DOM
- DOM HTML - HTML-elementtien erityisominaisuudet
Esimerkkejä
Esimerkeissä käytetään W3C:n DOM -spesifikaation metodeja ja attribuutteja, jotka toimivat Firefoxissa, mutta eivät välttämättä toimi IE:llä. Yhteensopivuus hoidetaan sopivalla JavaScript-kirjastolla:
esimerkkejä:
- Elementin luonti ja lisäys puuhun
- Laskuri
Tehtävä
- Käynnistä Firefox-selain. Toteuta seuraava tehtävä Firefoxissa käyttäen W3C:n DOM-rajapintaa.
- Tallenna käyttöösi valmis dokumenttipohja
- Avaa dokumenttipohja firefoxiin
- Avaa näkyville myös Firefoxin Javascript-konsoli (Tools|Javascript console) johon tulevat mahdolliset virheilmoitukset.
- Avaa avuksesi yhteenlasku.js, WWW-sovellukset-kurssin javascript-demotehtävä, Gecko DOM Reference- ja A re-introduction to JavaScript -dokumentit.
- Luo haluamallasi editorilla keskiarvo.js-tiedosto. Kaikkiin toimintoihin kannattaa katsoa mallia yhteenlasku.js- ja yhteenlasku.html-tiedostoista.
- Lisää javascriptillä kysy-painikkeelle oma käsittelijä. Kokeile esim alert-funktiolla toimiiko käsittelijäsi.
- Luo käsittelijässä käyttäjän syötteen ilmoittama määrä tekstikenttiä ja näiden perään Laske-painike.
- Aseta Laske-painikkeelle käsittelijä, joka laskee käyttäjän syötteiden keskiarvon. Käsittelijä myös tarkistaa syötteiden oikeellisuuden. Annetut arvosanat saavat olla 4-10 väliltä. Jos mukana on virheellisiä syötteitä ei keskiarvoa lasketa vaan virheellinen syöttökenttä merkitään punaisella rajalla. Jos virheitä ei ole niin käsittelijä laskee keskiarvon ja ilmoittaa sen syötteiden perässä.
- Havainnollista syötettyjä arvosanoja luomalla jokaista arvosanaa varten väripalkka (vrt. yhteenlaskun palkki) ja sijoita palkit näytölle siististi vierekkäin. Lisää viimeiseksi palkiksi keskiarvopalkki, joka eroaa väriltään muista palkeista.