Kirjautuminen

Haku

Tehtävät

Opasarkisto: JavaScript-perusopas: Osa 5 - Funktiot

  1. Osa 1 - Perusteet
  2. Osa 2 - Muuttujat ja taulukot
  3. Osa 3 - Tapahtumankäsittelijät ja informaatioikkunat
  4. Osa 4 - Komentorakenteet
  5. Osa 5 - Funktiot
  6. Osa 6 - Lomakkeiden käsittely
  7. Osa 7 - Merkkijonojen käsittely
  8. Osa 8 - Ominaisuudet
  9. Osa 9 - Matemaattiset laskutoimitukset
  10. Osa 10 - Olio-ohjelmointi
  11. Osa 11 - Käytännön sovelluksia

Kirjoittaja: MikaBug. Vuosi: 2007.

Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi.

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:

KOMENTOKUVAUS
toolbarTyökaluvalikon näyttö päällä / pois
statusTilarivin näyttö päällä / pois
resizableMäärittää voiko ikkunan kokoa säätää
locationOsoitekentän näyttö päällä / pois
menubarMenupalkin näyttö päällä / pois
directoriesTiedostovalikon näyttö päällä / pois
scrollbarsVierityspalkkien näyttö päällä / pois

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.


Kommentit

temu92 [20.08.2007 12:01:29]

Lainaa #

Good job. Nyt seuraavaks saadaan kaikki hienot sivut joissa on kans popuppi mainokset :D nooh, ehkä ei kuitenkaa

Ceox [13.11.2007 19:39:40]

Lainaa #

Mitens tuon ikkunan saa suljettua buttonista painamalla?

MikaBug [13.11.2007 19:43:24]

Lainaa #

Kutsutaan vain buttonissa SuljeIkkuna-funktiota (oppaan viimeinen esimerkki):

<input type="button" value="Sulje ikkuna" onclick="SuljeIkkuna()">

Ceox [14.11.2007 14:57:56]

Lainaa #

Eipä tuo juuri toiminut ainakaan Firefoxissa Internet Explorer nyt tunnisti tuon.

Taic [21.11.2009 00:09:48]

Lainaa #

Osaisiko joku kertoa miten saan laskurini valittamaan jos joku antaa jotain mitä ei kuuluisi antaa arvoksi sivuillani olevalle laskurille? Eli jos hän antaa esim desimaaleja niin voisi tulla teksti "Ei desimaalilukuja!" ja jos annetaan kirjaimia(tai merkkejä), niin voisi sanoa "Vain numeroita, kiitos!" Tulisiko jotain että jos käyttäjän antama arvo on nimeltään esimerkiksi annettunumero1, niin
if (annettunumero1 (jotain)
uusinumeto = "Ei desimaalilukuja!"
Tai vastaavaa? Vai olenko ihan hakoteillä?:D jokatapauksessa jokin kiva ratkaisu olisi kiva:)

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta