JavaScript-opas

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA v.2008

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi jo tänään. IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Olioiden luominen JavaScriptissä

Useimpien ohjelmointikielten tapaan myös JavaScript tukee olioajattelua, vaikkei olekaan täysiverinen oliokieli. Yksinkertaistettuna olio voidaan ajatella jonkin asian kantailmentymänä tai yleistyksenä. Esimerkiksi Keijon Audi, Miikan Opel tai Vesan Lada ovat kaikki ilmentymiä oliosta henkilöauto, joka puolestaan voi olla olion ajoneuvo ilmentymä.

Oliopohjaisesta ajattelutavasta saavutetaan suurimmat hyödyt olioiden kapseloinnista ja periyttämisestä. Edellä mainitussa esimerkissä tiedämme, että oliolla ajoneuvo on ominaisuus nopeusyksikkö (esim. km/h) ja autolla ominaisuus väri. Kun luomme autosta uutta ilmentymää, esimerkiksi "Keijon autoa" voimme hyödyntää jo olemassa olevia ominaisuuksia. Sen sijaan että kirjoittaisimme tarvittavaa koodia uudelleen, määrittelemme olion ilmentymälle vain joukon arvoja.

Kuten aina ohjelmoidessa, joudumme tekemään muutostöitä. Oliomalli mahdollistaa sen, että muutokset voidaan tehdä keskitetysti yhdessä oliossa. Jos esimerkiksi haluamme vaihtaa kaikkien ajoneuvojen ominaisuuden nopeusyksikkö arvoksi m/s, ei meidän tarvitse käydä lävitse kaikkia ajoneuvon ilmentymiä, vaan ainoastaan muokata oliota ajoneuvo.

Olio määritellään kirjoittamalla funktio, joka määrittelee olion tyypin:


Function OlionTyyppi(argumentit) {
// olion ominaisuudet ja metodiviittaukset tänne
}

Olion määrittelyssä törmäämme uuteen asiaan: this-osoittimeen. Sen avulla voidaan välittää "olio itse" toiselle oliolle (Huom. JavaScriptin this-osoitin toimii hyvin pitkälti samalla tavoin kuin Javankin this-osoitin). Hyvä esimerkki this-osoittimen käytöstä on perinteinen HTML:n lomake: mikäli haluamme välittää kyseessä olevan lomakkeen jollekin funktiolle voimme viitata siihen esimerkiksi onclick-tapahtumassa seuraavasti:


<input type="button" onclick="validoi(this.form);"/>

Nyt meillä onkin kaikki tarvittava tieto ensimmäisen oliomme luomiseksi. Seuraavassa esimerkissä luomme olion Auto ja sille metodin Näytätiedot(), joka tulostaa perustiedot Auto-olion ilmentymistä.

Ensimmäiseksi lähdetään liikkeelle Auto-olion perustamisesta. Haluamme säilöä Auto-olioon tiettyjä ominaisuuksia, kuten merkin, mallin, omistajan, auton värin sekä mahdollisen kuvan. Nämä tiedot välitämme oliolle argumentteina. This-osoittimen avulla määräämme tiedon koskemaan "itse oliota".


// luodaan Auto-olio
function Auto(tyyppi, malli, omistaja,vari,kuva) {
	this.tyyppi = tyyppi;
	this.malli = malli;
	this.omistaja = omistaja;
	this.vari = vari;
	this.kuva = kuva;
}

Olion ilmentymä luodaan komennolla new:


// luodaan pari uutta ilmentymaa
var KeijonAuto = new Auto("Ford","Escort","Keijo", "CobaltBlue","kuva2.gif");
var MiikanAuto = new Auto("Mercedes","Benz","Miikka","Silver","kuva1.gif");

Tutustu artikkelin muihin osiin:
»»» JavaScript »»» Olioiden luominen
»»» JavaScript »»» Olioiden luominen pt.2

JavaScript-opas

Olioiden luominen JavaScriptissä

Tallenna tämä sivu kirjanmerkkeihin!