Tieto- ja viestintätekniikan käyttötaito 2.0 → Verkkosivut ja ohjelmointi
© TvtDok
Tässä luvussa
Funktioita käyttämällä voidaan useampi samalla kertaa suoritettava komentojen sarja nimetä yhdeksi kokonaisuudeksi. Funktiota voidaan käyttää silloin, kun sitä tarvitaan. Kun funktiota halutaan käyttää, täytyy sitä kutsua. Funktio käyttää syötteitä eli parametrejä, joille asetetaan arvo kutsumisen yhteydessä. Parametrejä voi olla yksi tai useampia. Funktiokutsun syntaksi on JavaScriptissä seuraavanlainen:
funktionNimi(parametri1, parametri 2);
Esimerkiksi suorakulmion pinta-alan laskemiseen voidaan tehdä funktio, joka saa parametreinä suorakulmion pituuden ja leveyden, ja niitä hyödyntäen funktio tulostaa suorakulmion pinta-alan:
function suorakulmionPintaAla (pituus, leveys) {
var ala = pituus * leveys;
tulosta (ala);
}
Tätä funktiota kutsutaan esimerkiksi arvoilla pituus=2 ja leveys=5, se palauttaaa suorakulmion pinta-alan eli 2 * 5 eli 10.
Harjoittele funktioiden käyttöä TIM-ohjelmointiympäristössä.
JavaScript on oliopohjainen ohjelmointikieli. Tämä tarkoittaa sitä, että ohjelmoidessa voidaan luoda erilaisia
olioita eli objekteja. Olioille voidaan luoda erilaisia ominaisuuksia ja ominaisuuksista riippuvaisia
funktioita eli metodeja. Olio voi suorittaa metodin. Metodi voi siis esimerkiksi tulostaa tiedon olion
sisällöstä. Kun metodi halutaan ottaa käyttöön, kutsutaan sitä syntaksilla: olio.metodi();.
Alla on esimerkki oliosta, joka on nimetty nimellä henkilo:
var henkilo = {
nimi: ['Matti', 'Meikäläinen'],
syntymaaika: date(1995, 4, 28),
paino: 67,
pituus: 175,
tervehtii: function() {
return 'Moi! Olen ' + this.nimi[0] + '.';
},
vaatteet: {
paita: "t-paita",
housut: "farkut"
}
}
Nyt siis kokoelma erilaisia ominaisuuksia (nimi, syntymaaika, paino ja pituus) on
tallennettu oliomuotoisesti muuttujaan henkilo.
Henkilon ominaisuus
nimi on tallennettu taulukkona, jossa ensimmäisellä paikalla taulukossa on etunimi ja
toisella sukunimi. Huomaa, että taulukossa indeksointi eli taulukon solujen numerointi
alkaa nollasta. Toisin sanoen ensimmäinen taulukon solu on kohdassa 0, toinen kohdassa 1 jne.
Lisäksi henkilon ominaisuuteen vaatteet
on tallennettu sisäkkäinen olio, jolla on ominaisuudet paita ja housut.
Tervehtimis-ominaisuudessa on return-kohdan jälkeen tulostus 'Moi! Olen ' + this.nimi[0] + '.'.
Kohta this viittaa siis objektiin, johon kyseinen ominaisuus kuuluu: tässä tapauksessa siis muuttujaan henkilo.
this.nimi[0] viittaa siis muuttujan henkilön objektiin nimi, kohdassa 0, eli "Matti".
Olion ominaisuuksiin pääsee käsiksi seuraavasti:
henkilo.nimi[1] // palauttaa Meikäläinen
henkilo.paino // palauttaa arvon 67
henkilo.tervehtii() // palauttaa "Moi! Olen Matti."
henkilo.vaatteet.paita // palauttaa arvon t-paita
Harjoittele olioiden tekoa TIM-ohjelmointiympäristössä.
Toiminnallisuuden lisääminen verkkosivulle JavaScriptin avulla tapahtuu erilaisten event-käsittelijöiden avulla. HTML-tiedostoon voidaan esimerkiksi luoda button-elementti (eli painike), johon sisällytetään event-käsittelijä funktiokutsulla. Kun painiketta napautetaan, saadaan näkyville päivämäärä:
<button onclick="naytaPvmJaKlo()">Näytä päivämäärä ja kellonaika</button>
Tätä varten JavaScript-tiedostossa olisi funktio:
function naytaPvmJaKlo() {
document.getElementById('demo').innerHTML=Date();
}
JavaScriptille on tyypillistä, että komennon kohteen tarkentaminen tapahtuu komennon edetessä. Esim.
document.getElementById("terve").style.fontSize = "3em";
Tällöin jokaisen pisteen vasemmalla puolella olevalta objektilta kysytään pisteen oikealla puolella olevaa ominaisuutta. Tässä tapauksessa dokumentilta pyydetään elementti id:n perusteella, jonka tyyliä muutetaan fonttikoon osalta.
onchange HTML-dokumentti on muuttunut
onclick Käyttäjä klikkaa HTML-elementtiä
onmouseover Käyttäjä kuljettaa hiiren elementin päälle
onmouseout Käyttäjä kuljettaa hiiren elementin päältä pois
onkeydown Käyttäjä painaa näppäimistöstä näppäintä
onload Kun selain on ladannut näkymän täysin