Linkki → Verkkosivut ja ohjelmointi → JavaScriptin jatko-osa
© Tekijät
Tässä luvussa
Ohjelmointitaitojen kehittyessä ohjelmista tulee laajempia ja samalla vaikeampia hahmottaa. Funktiot vähentävät toistoa koodissa ja jakavat ohjelman helposti hahmotettaviin osiin.
Olio-ohjelmoinnissa luodaan ja käytetään olioita (engl. object). Olio-ohjelmointia tukevia ohjelmointikieliä ovat JavaScriptin lisäksi esimerkiksi Java, C++, C# sekä Python.
Tapahtumankäsittelijöiden avulla verkkosivuille voidaan lisätä toiminnallisuutta. JavaScript-koodi saadaan reagoimaan verkkosivulla tapahtuviin muutoksiin.
JavaScript-koodissa voidaan luoda ja käyttää funktioita. Funktio on aliohjelma, joka suorittaa yhden tai useamman tehtävän samalla kertaa. Funktio täytyy alustaa eli esitellä ennen käyttöä. Funktio alustetaan syntaksilla:
function funktionNimi(/*parametrit*/) {
/* Suoritettavat lauseet */
}
Funktiota ei suoriteta heti ohjelman käynnistyessä, vaan vasta kun sitä kutsutaan. Funktiokutsun syntaksi on JavaScriptissä seuraavanlainen:
funktionNimi(/*parametrit*/);
Funktiolle välitetään tietoa käyttämällä syötteitä eli parametreja, joille asetetaan arvo kutsumisen yhteydessä. Parametreja voi olla yksi tai useampia. Alla olevassa esimerkissä funktio tulostaa sanan Moi ja lisää sen perään parametrina tuodun nimen. Sanan Moi jälkeen kannattaa kirjoittaa välilyönti.
function tervehdys (nimi) {
console.log("Moi " + nimi);
}
Funktiota kutsutaan:
tervehdys("Matti");
Funktio tulostaa: Moi Matti. Toisessa esimerkissä luodaan funktio kahdella parametrilla (etunimi ja syntymävuosi). Funktio laskee iän annetun syntymävuoden perusteella ja tulostaa nimen ja iän:
function nimiJaIka (nimi, syntymaVuosi) {
var aikaNyt = new Date;
var vuosiNyt = aikaNyt.getFullYear();
var ika = vuosiNyt-syntymaVuosi;
console.log(nimi + " " + ika);
}
Funktiota kutsutaan:
nimiJaIka("Matti", 1995);
Funktio tulostaa: Matti 24. Funktiokutsu voidaan toistaa eri parametreilla eli tässä tapauksessa eri nimellä ja iällä.
Harjoittele funktioiden käyttöä täällä. Tee tehtävät 1-4.
JavaScript on oliopohjainen ohjelmointikieli. Ohjelmoidessa voidaan luoda ja käyttää erilaisia
olioita eli objekteja. Olioilla voi olla erilaisia ominaisuuksia ja ominaisuuksista riippuvaisia
funktioita eli metodeja. Metodi voi esimerkiksi tulostaa tiedon olion
sisällöstä. Olion metodia kutsutaan 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"
}
}
Näin 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-ominaisuus sisältää funktion, joka palauttaa (return) olion etunimen. Kohta this.nimi[0] viittaa objektin henkilo
muuttujaan 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
HTML-event on jokin asia, joka tapahtuu HTML-elementille selaimen tai käyttäjän toimesta. Tapahtumia ovat esimerkiksi:
Tapahtumankäsittelijä (engl. event handler) reagoi tapahtumaan ja suorittaa ennalta määritellyn JavaScript-koodin.
Tapahtumankäsittelijän syntaksi on:
<elementti event="suoritettava JavaScript-koodi">
HTML-tiedostoon voidaan luoda button-elementti
(eli painike), joka sisältää tapahtumankäsittelijän onclick ja funktiokutsun.
<button onclick="naytaPvmJaKlo()">Näytä päivämäärä ja kellonaika</button>
Kutsua varten JavaScript-tiedostossa on funktio:
function naytaPvmJaKlo() {
document.getElementById("aika").innerHTML=Date();
}
Funktio palauttaa päivämäärän ja kellonajan "aika"-nimiseen elementtiin. Funktiota ei sijoiteta aiemmin opitun
window.onload = function() { } -lohkon sisälle, vaan funktio suoritetaan vasta painiketta painettaessa.
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-elementin arvo 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 verkkosivun näkymän täysin
Tehtävät