Opasarkisto: JavaScript-perusopas: Osa 5 - Funktiot

Funktio on liuta ohjelmalauseita koottuna yhden nimen alle. Funktioiden käyttö selkeyttää ja lyhentää koodia ja tekee virheenkorjauksesta helpompaa, kun muutokset täytyy tehdä vain yhteen paikkaan koodissa. Yleensä funktio suorittaa jonkin tietyn toiminnon, esimerkiksi tulostaa parametrina välitetyn tekstin, ja sitä voi kutsua aina, kun kyseistä toimintoa tarvitaan.

Funktion määrittely

Funktio määritellään JavaScriptissä komennolla function. Funktion nimeen pätevät samat säännöt kuin muuttujien nimeämisessä. Nimen perään tulee kaarisulut, joiden väliin tulevat mahdolliset parametrit. Varsinainen suoritettava koodi tulee aaltosulkujen väliin.

<script type="text/javascript">

// Funktion määrittely:
function EkaFunktio()
{
	document.write("Tämä tulostuu vasta kun funktiota kutsutaan.");
}

// Funktiokutsu:
EkaFunktio();

</script>

Yllä on määritelty funktio nimeltä EkaFunktio, jolle ei viedä yhtään parametria. Kutsuttaessa funktiota se tulostaa pätkän tekstiä. Funktion kutsu muodostuu funktion nimestä ja suluista, ja se päättyy puolipisteeseen.

Parametrit

Funktiolle voidaan viedä parametreja eli tietoa, joka vaikuttaa funktion toimintaan. Tällöin funktion nimen perässä olevien sulkujen väliin kirjoitetaan parametrien nimet pilkulla erotettuna.

<script type="text/javascript">

// Määritellään funktio ja sille kaksi parametria:
function Henkilotieto(nimi, ika)
{
	document.write("Nimeni on " + nimi + " ja olen " + ika + "-vuotta vanha.<br>");
}

// Kutsutaan funktiota eri parametreilla:
Henkilotieto("Anssi", 18);
Henkilotieto("Suvi", 23);

</script>

Huomaa, että parametreina annettavat nimet on kirjoitettava lainausmerkkeihin. Parametrit voivat tietysti olla myös muuttujia.

Funktiolle voi viedä myös vaihtelevan määrän parametreja. Parametrien määrän saa selville lauseella funktion_nimi.arguments.length. Näin funktio voi suorittaa eri toimenpiteitä sen mukaan, montako parametria sille viedään.

<script type="text/javascript">

function MuunnaYksikko(eurot, kurssi)
{
var muunnettu = 0;

	if(MuunnaYksikko.arguments.length == 1)
	{
		muunnettu = eurot * 5.94573;
		alert(eurot + " euroa on " + muunnettu + " markkaa.");
	}

	if(MuunnaYksikko.arguments.length == 2)
	{
		muunnettu = eurot * kurssi;
		alert(eurot + " euroa on antamallasi kurssilla " + muunnettu);
	}
}

// Viedään funktiolle parametrina markoiksi muunnettava eurosumma:
MuunnaYksikko(4);

// Viedään funktiolle parametreinä muunnettava eurosumma ja Englannin punnan kurssi:
MuunnaYksikko(12, 0.68);
</script>

Yllä oleva skripti muuntaa parametrina annettavan eurosumman oletuksena markoiksi, mikäli parametreja viedään funktiolle vain yksi. Vaihtoehtoisesti funktiolle voidaan viedä toisena parametrina haluttu kurssi, jolloin eurosumma muutetaan kurssin mukaiseksi. Lopuksi uuden kurssin mukainen rahasumma näytetään viesti-ikkunassa.

Paluuarvo

Funktio voi palauttaa yhden arvon return–komennolla. Seuraavassa esimerkissä funktiolle viedään parametreina kaksi lukua, ja funktio palauttaa näiden lukujen summan.

<script type="text/javascript">

function Summa(luku1, luku2)
{
	var summa = luku1 + luku2;

	// Funktio palauttaa summa-muuttujan arvon:
	return summa;
}

var tulos = 0;

// Funktion palauttama arvo sijoitetaan tulos-muuttujaan:
tulos = Summa(3, 6);

document.write("Lukujen summa on " + tulos);

</script>

Yllä olevassa koodissa ei pitäisi olla muuta uutta kuin return summa;, joka palauttaa summa-muuttujassa olevan arvon tulos-muuttujaan. Funktion suoritus päättyy välittömästi return-lauseeseen, vaikka sen jälkeen tulisi vielä ohjelmalauseita.

Skriptin voisi kirjoittaa lyhyemmin myös näin:

<script type="text/javascript">

function Summa(luku1, luku2)
{
	var summa = luku1 + luku2;
	return summa;
}

document.write("Lukujen summa on " + Summa(3, 6));

</script>

Funktion sisällä eli aaltosulkujen { } välissä määritellyt muuttujat ovat paikallisia muuttujia ja käytössä vain funktion sisällä. Sen sijaan sulkujen ulkopuolella määritellyt muuttujat ovat globaaleja, ja niitä voi käyttää missä tahansa kohdassa koodia.

Tähän mennessä opituilla taidoilla voimme tehdä jo jotain hyödyllistäkin. Seuraavissa esimerkeissä tulee myös pari uutta asiaa JavaScriptistä.

Uuden ikkunan avaaminen

Seuraavaksi ohjelmoidaan skripti, joka avaa pienen popup-ikkunan selaimeen, kun sivu latautuu. Tällaisia käytetään joillakin sivuilla mainostamiseen, ja kannattaa ottaa huomioon, että popup-ikkunat saattavat enemmän ärsyttää käyttäjää kuin olla hyödyksi. Popup-ikkunat voi olla myös estetty selaimen asetuksista.

<html>

<head>

<title>PopUp-ikkuna</title>

<script type="text/javascript">

// Määritellään funktio PopUp():
function PopUp()
{
	window.open("mainos.html", "Mainos", config="height=300,width=350");
}

</script>

</head>

// Kutsutaan funktiota heti kun sivu latautuu:
<body onload="PopUp()">

</body>

</html>

Ensin skriptissä luodaan funktio PopUp, jolle ei viedä yhtään parametria. Funktion tehtävä on aukaista uusi ikkuna. Uuden ikkunan avaaminen tapahtuu window.open–metodilla. window on olio ja open metodi eli se, mitä pitää tehdä. Ensimmäinen metodin parametri määrittää ikkunaan avattavan HTML-tiedoston (tai miksikäs ei PHP-tiedoston). Toinen parametri on ikkunan nimi. Kolmannella parametrilla pystytään vaikuttamaan ikkunan ulkoasuun. Tässä tapauksessa ikkunan leveydeksi (width) määritellään 350 pikseliä ja korkeudeksi (height) 300 pikseliä.

window.open("URL_osoite", "Ikkunan_nimi", config="asetukset");

Body-elementin sisällä kutsutaan funktiota onload-tapahtumankäsittelijällä <body onload = "PopUp()">, eli funktion suoritus käynnistyy heti, kun sivu latautuu selaimeen.

Popup-ikkunaan avautuva sisältö on siis tehtävä omaan HTML- tai PHP-tiedostoon, jonka URL-osoite määritellään window.open-komennon ensimmäiseksi parametriksi.

Muita ikkunan ulkoasuun vaikuttavia config-asetuksia ovat:

Asetukset ovat päällä / pois -tyyppisiä, päällä on 1 ja pois on 0. Jos haluamme ikkunaan vierityspalkit, mutta emme halua, että ikkunan kokoa voi säätää, se määritellään seuraavalla tavalla:

config="width=350,height=300,scrollbars=1,resizable=0"

Uuden ikkunan saa avattua myös yhden HTML- tai PHP-tiedoston avulla. Tällöin avautuvan ikkunan sisältö kirjoitetaan samaan tiedostoon, josta käsin ikkuna avataan.

<html>

<head>

<title>PopUp-ikkuna</title>

<script type="text/javascript">

// Määritellään funktio PopUp():
function PopUp()
{
	var UusiIkkuna = window.open("", "Mainos", config="height=300,width=350");
	UusiIkkuna.document.write("<html>");
	UusiIkkuna.document.write("<head>");
	UusiIkkuna.document.write("<title>Uusi ikkuna</title>");
	UusiIkkuna.document.write("</head><body>");
	UusiIkkuna.document.write("<h1>Uuden sivun sisältö</h1>");
	UusiIkkuna.document.write("<p>kirjoitetaan tähän</p>");
	UusiIkkuna.document.write("</body></html>");
}

</script>

</head>

// Kutsutaan funktiota heti kun sivu latautuu:
<body onload="PopUp()">

</body>

</html>

Ensin luodaan muuttuja UusiIkkuna, johon sijoitetaan uuden ikkunan aukaiseva komento parametreineen. Ensimmäinen parametri on nyt tyhjä (""), jolloin sivun sisältöä ei haeta toisesta tiedostosta. Uudelle sivulle kirjoitetaan lauseella UusiIkkuna.document.write("<html>");, eli sivu muodostetaan kirjoittamalla sivun sisältö lainausmerkkien väliin.

Ikkunan sulkeminen

Kun ikkuna on avattu, olisi se myös hyvä saada suljettua. Se onnistuu tietysti ikkunan oikean yläkulman ruksipainikkeella, mutta JavaScriptissä on myös oma metodi tätä varten. Seuraavassa esimerkissä ikkuna suljetaan napsauttamalla linkkiä.

<script type="text/javascript">

function SuljeIkkuna()
{
self.close();
}
</script>
...			// Tähän väliin tulevat normaalit HTML-koodit

<a href="#" onclick="SuljeIkkuna()">Sulje ikkuna</a>
...

Yllä oleva koodi pitäisi olla tuttua lukuun ottamatta self.close-komentoa, joka yksinkertaisesti sulkee ikkunan. self on olio, joka viittaa aktiivisena olevaan ikkunaan, close on metodi, joka sulkee sen. Saman voi tehdä ilman erillistä funktion määrittelyä seuraavalla tavalla:

<a href="#" onclick="self.close()">Sulje ikkuna</a>

Yhteenveto

Nyt alkavat kielen perusasiat olla käsitelty: muuttujat, taulukot, ehtolauseet ja silmukat sekä funktiot. Seuraavassa oppaassa opettelemme käyttämään JavaScriptiä lomakkeiden tietojen lukemiseen ja tarkistamiseen.