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ä pt.2

Olion ominaisuuksiin päästään käsiksi viittaamalla syntaksilla:


Olio.ominaisuus

Esimerkiksi:


// haetaan tieto auton omistajasta
document.write ("Auton omistaja on " + KeijonAuto.omistaja);
document.write ("<br>");

// vaihdetaan auton varia
KeijonAuto.vari = "sininen";
var uusivari = KeijonAuto.vari
document.write ("Auton uusi väri on "+ uusivari);

Metodi on jotain mitä olio voi tehdä tai suorittaa. Metodi muodostetaan samalla tavoin kuin oliokin, eli käyttämällä function()- komentoa. Kun metodi halutaan ottaa käyttöön, kutsutaan sitä syntaksilla:


Olio.metodi();

Mikäli lisäämme Auto-olioon metodin, joka tulostaa keskeiset tiedot, kirjoittaisimme esimerkiksi seuraavanlaisen koodin:


function Naytatiedot(tyyppi,malli,kuva){
	document.write("Merkki:" + tyyppi + "<br>");
	document.write("Malli: " + malli + "<br>");
	document.write("Kuva: <img src='kuvat/" + kuva + "'><br>");
	document.write ("<hr>");
}

Ja yhdistäminen Auto-olioon tapahtuu lisäämällä se olioon itseensä this-osoittimen avulla:


this.tiedot = Naytatiedot(tyyppi,malli,kuva);

Kokonaisuudessaan kirjoittamamme koodi näyttää siis tältä:


<script type="text/javascript">
<!--

// 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;
	this.tiedot = Naytatiedot(tyyppi,malli,kuva); 
}


// ja sille metodi NaytaTiedot
function Naytatiedot(tyyppi,malli,kuva){
	document.write("Merkki:" + tyyppi + "<br>");
	document.write("Malli: " + malli + "<br>");
	document.write("Kuva: <img src='kuvat/" + kuva + "'><br>");
	document.write ("<hr>");
}


// luodaan pari uutta ilmentymaa

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

//-->
</script>

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

JavaScript-opas

Olioiden luominen JavaScriptissä pt.2

Tallenna tämä sivu kirjanmerkkeihin!