Osa 5 - Funktiot

Funktio eli aliohjelma on koodin osa, joka voidaan suorittaa tarvittaessa. Funktion koodia ei siis suoriteta heti. Olemme jo nähneet funktioita osassa 3, jossa tutustuttiin tapahtumakäsittelijöihin. Ne nimittäin ovat funktioita.

Funktioita käytetään javascriptissä monilla eri tavoilla ja ne voivat näyttää erilaisilta. Yleisesti ottaen funktiot voidaan jakaa kahteen luokkaan: nuolifunktoihin, jotka tunnistaa nuolesta =>, ja avainsanafunktioihin, jotka tunnistaa avainsanasta function.

Alla on esimerkkejä funktiosta, joihin tutustutaan tässä luvussa.

// Tapahtumakäsittelijä:

teksti.onclick = () => {
    alert("Hei siellä!")
}

// Ajastin:

setTimeout(() => {
    alert("Yllätys!")
}, 5000)

// Toistettu funktio:

setInterval(() => {
    alert("Hei taas!")
}, 5000)

// Nimetty funktio:

function liikutaYlös() {
    hahmo.y -= 1
}

// Piirtofunktio:

function piirrä() {
    piirtäjä.clearRect(0, 0, 300, 150)    
    piirtäjä.fillRect(hahmo.x, hahmo.y, 10, 10)

    requestAnimationFrame(piirrä)
}
requestAnimationFrame(piirrä)

Tapahtumäkäsittelijät – kertaus

Tapahtumankäsittelijöihin tutustuttiin jo kolmannessa luvussa. Ne ovat funktioita, jotka suoritetaan kun ennalta määritetty tapahtuma tapahtuu. Esimerkiksi napin painaminen ja hiiren liikuttaminen ovat tapahtumia.

Ajastimet

Ajastettu funktio suoritetaan, kun ohjelman käynnistämisestä on kulunut määritellyn verran aikaa. Esimerkiksi jos ohjelman halutaan tulostavan viiden sekunnin kuluttua suorituksen aloittamisesta alert("Yllätys!"), niin ajastettu funktio eli setTimeout funktio näyttää seuraavalta

setTimeout(() => {
    alert("Yllätys!")
}, 5000)

Ajastettu funktio saattaa näyttää hieman hämmentävältä. Siinä on kuitenkin havaittavissa nuoli =>, kuten tapahtumankäsittelijässä. Tutkitaan miten funktio kirjoitetaan. Aluksi aloitetaan funktion nimellä, joka on setTimeout. Lisätään nimen perään sulut, jolloin saamme funktion näyttämään seuraavalta

setTimeout()

Tämä näyttää tavalliselta komennolta. Kirjoitetaan sulkujen sisälle nuolifunktio () => { }.

setTimeout(() => { })

Kirjoitusasu on hieman epäselvä, joten lisätään aaltosulkeiden { } sisälle tyhjärivi. Tyhjän rivin saa painamalla kaksi kertaa Enter-näppäintä aaltosulkeiden sisällä.

setTimeout(() => { 

})

Aaltosulkeiden sisälle kirjoitetaan myös komento tai komennot, jotka halutaan suorittaa, kun ajastimen aika on kulunut. Kirjoitetaan aaltosulkeiden sisään komento alert("Yllätys!"), jolloin ohjelma tulostaa “Yllätys!”.

setTimeout(() => { 
  alert("Yllätys!")
})

setTimeout-funktiolle ei ole vielä määritelty aikaa, jonka jälkeen alert()-komento tapahtuu. Lisätään viimeisen aaltosulkeen jälkeen pilkku ja aika. Aika määritetään millisekuntteina. Tämä tarkoittaa, että esimerkin 5000 tarkoittaa viittä tuhatta millisekunttia, joka on yhtäsuurta kuin viisi sekunttia.

setTimeout(() => { 
  alert("Yllätys!")
}, 5000)

Tämä funktio siis tulostaa viiden sekunin kuluttua ohjelman käynnistymisestä näytölle tekstin Yllätys!.

Ajastetun funktion voi laittaa tapahtumakäsittelijän sisälle, jolloin se suoritetaan tietyn ajan kuluttua tapahtumasta:

5.3 Toistetut funktiot

Toistettu funktio suoritetaan loputtomasti tietyllä tahdilla. Toistetun funktion kutsuminen näyttää aivan ajastetun funktion kutsulta, mutta siinä käytetään setInterval-komentoa.

setInterval(() => {
	
}, 1000)

Toistetussa funktiossa suoritettava koodi menee tuttuun tapaan aaltosulkeiden sisälle, viimeisen aaltosulkeen jälkeen on pilkku ja pilkun jälkeen määritetään, kuinka usein funktio toistetaan. Esimerkiksi 1000 ms = 1 s, joten esimerkissä olevaa funktiota toistetaan yhden sekunnin välein.

5.4 Nimetyt funktiot

Ajastimet, toistetut funktiot ja tapahtumankäsittelijät suoritetaan automaattisesti silloin, kun jotain tapahtuu, tai tietyn ajan päästä. Nimetty funktio eroaa näistä funktioista siten, että koodissa pitää kutsua funktiota, jotta se suoritetaan. Jotta voisimme kutsua funktiota, täytyy sille antaa nimi, jolla funktiota kutsutaan. Siksi kutsumme tämän tyyppisiä funktioita nimetyiksi funktioiksi. Nimetyn funktion rakenne on seuraava

function funktionNimi() {
    
}

Ensin kirjoitetaan avainsana function, josta tunnistetaan, että kysessä on funktio. Tämän jälkeen kirjoitetaan funktion nimi. Esimerkissä funktion nimi on funktionNimi, mutta se voi olla mitä ohjelmoija päättää keksiä. Funktion nimen jälkeen kijroitetaan sulut, jonka jälkeen kirjoitetaan aaltosulut. Aaltosulkeiden sisään tulee koodi, joka suoritetaan funktiota kutsuttaessa. Nimetyt funktiot ovat kuten muuttujia, mutta niillä voidaan tehdä paljon enemmän asioita

Kysymyksiä