JavaScript ja DOM

Käsitellään JavaScriptin ja DOM:nkäyttöä WWW-sovelluksissa.

Luentotaltiointi

Ongelmia videon katselussa?

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:

Operaattorit

Käytössä on normaalit aritmeettiset ja vertailuoperaattorit.

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"];

Assiosiatiivisia taulukoita (nimi-arvo-pareja) voi tehdä seuraavasti:

var lampo["jkl"] = -6;
var saatilat = {
  jämsä: "Aurinkoinen";
  äänekoski: "Pilvipoutaa";
};

Funktiot

Toimii kuten PHP:ssa. Funktion voi esitellä seuraavasti:

function summaa(x,y) {
  return (x + y);
}

summaa = function(x,y) {
  return (x + y);
}

Huomioitavaa:

Oliot

JavaScriptissä omia olioita voidaan luoda seuraavasti:

// konstruktori-funktio
function Koordinaatti(x,y) {
  this.x = x;
  this.y = y;
}

// Koordinaatin public-metodi
Koordinaatti.prototype.normi = function() {
  return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
}

var piste = new Koordinaatti(1,2);
piste.normi();

Private-attribuutteja ja -metodeja on mahdollista luoda pienellä vaivalla.

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. Kts. validointiesimerkki.

Esimerkki ei toimi IE:llä, koska sen tapahtumien rekisteröintimalli toimii erilailla kuin W3C:n standardi. Tapahtumien rekisteröintiin on olemassa funktioita, jotka korjaavat selaimien väliset erot:

Selaimien välillä on muitakin yhteensopivuusongelmia, joten samalla vaivalla kannattaa ottaa käyttöön jokin kirjasto, joka hoitaa likaisen työn.

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.

Hyvä rakenne - otsikkotasot löytyvätHuono rakenne - ei otsikkotasoja ja liian syvä Xetor-ohjelman rakennenäkymä

Kukin elementti ja teksti muodostavat dokumenttipuuhun Node-tyypin olion.

JavaScript kytkeytyy DOM:iin mm. seuraavien olioiden ja metodien kautta:

Elementtien saanti

Elementtien lisääminen ja poistaminen

Elementtien arvot

Lisätietoa

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, asiaa tarkemmin käsitellään luennolla 16.

Huomioitavaa

Javascriptin ja DOMin käytössä tulee huomioida seuraavat asiat:

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/sovellukset/luennot/luento15/
© Jukka Mäntylä (jmantyla@mit.jyu.fi)< http://www.iki.fi/jmantyla/>
2006-04-25 16:04:39