Funktiot

Yleisesti funktion tarkoitus on suorittaa jokin yksittäinen tehtävä tai tehtäväjoukko, esimerkiksi laskea tulos, muuttaa jokin sivun ominaisuus jne. Funktiot antavat siis ohjelmoijalle uusia mahdollisuuksia suunnitella ohjelman toimintaa, sekä jäsentää ja selkiyttää koodia.

Funktio suoritetaan aina kutsumalla funktiota nimellä. Dokumentissä kutsuttavat funktiot täytyy sijoittaa sellaiseen kohtaan dokumenttiä, että funktion kutsu tapahtuu vasta sen kohdan jälkeen, mihin funktio on kirjoitettu (dokumentin alusta lukien).

Funktiokutsu voidaan laittaa joko JavaScript-koodin sisälle tai tapahtumafunktion yhteyteen. Alla esimerkki, jossa funktiota kutsutaan tapahtumafunktion sisällä.

<script language="JavaScript">

function muutatitle(){
	document.title = "Testi";
}

</script>

<input type="button" value="Muuttaa sivun titlen" 
	onClick="muutatitle();">
   	

Yllä olevassa esimerkissä napin tapahtumafunktio onClick kutsuu nappia painettaessa funktiota nimeltä muutatitle().
Itse funktion koodi on sijoitettu napin yläpuolelle script-osioon.

Yleisesti funktiot ovat seuraavaa muotoa:

function funktion_nimi(parametrit){

	...tähän kirjoitetaan käskyt
	
	viimeiselle riville tulee palautusarvo, jos sellainen tarpeen:

	return jotain
}		

Pakollisena osiona on funktion_nimi -kohta, jonka voi valita itse. Nimi on syytä pitää yhtenäisenä ilman välilyöntejä tai ääkkösiä. Parametreillä tarkoitetaan muuttujia, joilla välitetään arvoja funktion käyttöön. Näitä muuttujia voi olla yksi tai useampia (jos useita, ne erotellaan pilkulla). Parametrit ovat vaihtoehtoisia, mutta jos parametrejä ei ole, täytyy kuitenkin funktiokutsussa kirjoittaa sulkeet () nimen perään.

Parametrejä, jotka määritellään funktion nimiosan sulkeisiin muuttujan niminä, käsitellään funktion sisällä paikallisina muuttujina. Jos olet siis nimennyt samannimisen muuttujan jossain muualla, niin sen arvo ei muutu funktion sisäisin käskyin, eikä funktion ulkopuolinen samanniminen muuttuja vaikuta funktion sisälle. Yleensä kannattaa kuitenkin välttää muuttujan nimeämistä kahdesti eri merkityksessä, koska se yleensä aiheuttaa vain sekaannusta omassa ohjelmoinnissa. Paikallisuus tarkoittaa myös sitä, että funktiokutsussa mahdollisesti olevat muuttujat eivät tarvitse olla samannimisiä, kuin funktion nimiossa olevat.

Esimerkki parametrien käytöstä

<script language="JavaScript">

function muutavari(vari1, vari2){
	
	var ikkuna = document.getElementById("xxx");
	ikkuna.style.color = vari1;
	ikkuna.style.backgroundColor = vari2;	
}

</script>

<div id="xxx">Jotain tekstiä</div>

<input type="button" value="Muuta väriä" 
	onClick="muutavari('#00ff00','#0000ff');" />

Esimerkissä on ensin määritelty funktio, jossa on kaksi parametriä: vari1 ja vari2 (pilkulla erotettuna). Funktio hakee ensin dokumentistä objektin "xxx" ja tallentaa sen muuttujaan nimeltä ikkuna. Tämän jälkeen ikkunassa olevan objektin tekstin väri muutetaan siihen, mikä saadaan parametristä nimeltä vari1 ja ikkunassa olevan objektin taustaväri muutetaan väriksi, joka saadaan parametristä vari2.

Scriptin alla on div-objekti, joka on nimetty id:llä "xxx" ja sen alla on nappi, jonka tapahtumafunktioon onClick on laitettu funktiokutsu. Funktiokutsussa sulkeiden sisällä on määritelty kaksi parametriä: '#00ff00' ja '#0000ff'. Ensimmäisestä tulee funktion sisällä vari1 ja toisesta vari2. Tärkeänä seikkana on huomata, että koska onClick-tapahtumafunktion tapahtumat ovat kaksinkertaisten lainausmerkkien sisällä, niin merkkijonoja lähetettäessä parametreinä on ne ympäröitävä yksinkertaisilla lainausmerkeillä.

Funktion return -ominaisuus

Funktiot voivat myös palauttaa arvon. Funktio palauttaa arvon, joka on kirjoitettu return käskyn jälkeen. Return käsky laitetaan funktion viimeiseksi käskyksi.

<script language="JavaScript">

function plus(eka, toka){

	var tulos = eka + toka;	
	return tulos;
}

function laskelasku(){

	var eka = 1*document.laskin.luku1.value;
	var toka = 1*document.laskin.luku2.value;

	var tulos = plus(eka, toka);

	document.laskin.vastaus.value = tulos;
}

</script>

<form name="laskin">

	<input type="text" value="1" name="luku1" />
	<input type="text" value="1" name="luku2" />
	<br />
	<input type="button" value="+" onClick="laskelasku();" />
	<br />
	<input type="text" name="vastaus" size="40" />

</form>

Esimerkissä on ensimmäisenä määritelty plus-funktio, joka saa parametrinä kaksi arvoa: eka ja toka. Funktio laskee nämä kaksi luku yhteen ja palauttaa tuloksen.

Toinen funktio nimeltä laskelasku() hakee kahdella ensimmäisellä rivillä arvot laskin-nimisen lomakkeen luku1 ja luku2 -kentistä. Tämän jälkeen nämä luvut lähetetään plus-funktioon, joka palauttaa yhteenlaskun tuloksen muuttujaan nimeltä tulos. Lopuksi funktion kirjoittaa tulos-nimisen muuttujan arvon laskimen vastaus-kenttään.