Tieto- ja viestintätekniikan käyttötaito 2.0 → Verkkosivut ja ohjelmointi
© TvtDok
Tässä luvussa
JavaScript on ohjelmointikieli, jota voidaan käyttää HTML:n ja CSS:n kanssa yhdessä verkkosivuja luotaessa. JavaScriptin avulla voidaan verkkosivulle lisätä toiminnallisuutta. JavaScriptiä voidaan käyttää myös pelien ohjelmoinnissa ja mobiilisovellusten luomisessa. JavaScript-ohjelmointikieltä ei tule sekoittaa Java-ohjelmointikieleen.
JavaScript-koodia varten kannattaa luoda oma tiedostonsa. JavaScript-tiedoston tunnistaa .js-tiedostopäätteestä.
JavaScript-koodia voidaan kirjoittaa myös suoraan HTML-tiedostoon joko sijoittamalla JavaScript-koodi <head>- ja </head>
-tagin väliin tai varsinaisen HTML-tiedoston sisällön sekaan <body>- ja </body> -tagin väliin merkitsemällä
JavaScript-koodi <script>- ja </script> -tagilla. Jos JavaScript-koodin kutsurivi sijoitetaan HTML-tiedostoon varsinaisen
sivun sisällön sekaan, se sijoitetaan mahdollisimman loppuun tiedostossa, mutta kuitenkin ennen </body>-tagia.
Sijoitus tehdään tiedoston loppuun siksi, että ennen JavaScript-koodin suorittamista ehditään luomaan verkkosivulle kaikki tarvittavat elementit.
Joissain muissa ohjelmointikielissä muuttujan tyyppi tulee kertoa muuttujan määrittelyssä. Esim. C#-ohjelmointikielessä muuttuja alustetaan näin:
int ika = 25;
Muuttujalle ika määritetään tyyppi int eli kokonaisluku. Muita muuttujatyyppejä ovat char (kirjaimet), string (kirjainjono), boolean (totuusarvo,
jolloin muuttuja saa arvon true tai false) ja long (liukuluku/desimaaliluku). JavaScriptillä ohjelmoitaessa tyyppimäärityksiä ei kuitenkaan tarvitse tehdä.
Muuttuja on tietokoneen muistista varattu alue, johon voidaan tallentaa tietoa. Muuttuja alustetaan (eli kerrotaan tietokoneelle,
että muistista varataan alue) tunnisteella var. Alustamisen lisäksi muuttajaan tallennetaan jokin arvo. Esimerkiksi muuttujaan ika
voidaan heti muuttujan julistamisen yhteydessä tallentaa luku 25:
var ika = 25;
Muuttuja voidaan myös alustaa aiemmin alustettujen muuttujien avulla:
var vanhempi = ika + 20;
Tällöin muuttujan vanhempi arvo olisi 25+20 eli 45.
Suorien komentojen lisäksi ohjelmoinnissa voidaan määrittää toimintoja erilaisilla ehdoilla. Ehtojen käyttäminen tapahtuu if-, else ja if-else-ehtolauseilla.
If-ehtolause:
If-ehtolauseen avulla voidaan verkkosivulle lisätä esimerkiksi toiminta, jossa verkkosivun kävijä toivotetaan tervetulleeksi
tietyn kellonajan mukaan. Tällöin tietokoneen pitää tehdä toiminta:
Tarkista kellonaika. Jos kello on vähemmän kuin 18.00, toivota kävijälle "Hyvää päivää!".
Koodina vastaava toiminta näyttää tältä:
if (kello < 18:00) {
tervehdys = "Hyvää päivää!";
}
Ehtona toiminnassa on siis tietty kellonaika ja toiminnan toteutumiseksi tämän ehdon täytyy toteutua eli olla tosi.
If-else-ehtolause:
Tarkistettava ehto voi myös jäädä toteutumatta, jolloin ehto on epätosi. Myös toteutumattomalle ehdolle voidaan määritellä toiminta.
Tämä voidaan toteuttaa If-else-ehtolauseen avulla:
Tarkista kellonaika. Jos kello on vähemmän kuin 18.00, toivota "Hyvää päivää!"
Muuten toivota "Hyvää iltaa!".
Koodina vastaava toiminta näyttää tältä:
if (kello < 18:00) {
tervehdys = "Hyvää päivää!";
} else {
tervehdys = Hyvää iltaa!";
}
If-else-ehtolauseella voidaan määritellä myös useampi vaihtoehtoinen toiminta:
Tarkista kellonaika. Jos kello on vähemmän kuin 11.00, toivota "Hyvää huomenta!".
Muuten jos kello on vähemmän kuin 20.00, toivota "Hyvää päivää!".
Muuten toivota "Hyvää iltaa!".
Koodina vastaava toiminta näyttää tältä:
if (kello < 11:00) {
tervehdys = "Hyvää huomenta!";
} else if (kello < 20:00) {
tervehdys = "Hyvää päivää!";
} else {
tervehdys = "Hyvää iltaa!";
}
Silmukoita käyttämällä voidaan toistaa sama koodi useamman kerran. Näin haluttu toiminta saadaan ohjelmoitua lyhyemmällä koodilla ja tehokkaammin. Silmukoita voidaan tehdä for- ja while-silmukoilla.
For-silmukka:
For-silmukassa tiettyä toimintaa toistetaan niin kauan kuin tietty ehto on tosi.
For-silmukan syntaksi on seuraavanlainen:
for (alustuslauseke; ehtolauseke; kasvatus-/vähennyslauseke) {
toiminta
}
Joskus ohjelmoitaessa eteen tulee tilanne, jolloin kirjoitettua koodiriviä ei tarvitakaan ja se halutaan poistaa. Koodirivi halutaan kuitenkin säilyttää tiedostossa tallessa esimerkiksi myöhempää käyttöä varten. Tällaisten koodirivien säilöminen on helpointa tehdä kommentoimalla koodirivi piiloon. JavaScript- ohjelmointikielessä kommentti asetetaan kirjoittamalla kaksi kauttaviivaa peräkkäin (eli //) koodirivin eteen. Kommentoimalla voidaan myös tarkentaa koodin lukijalle esimerkiksi algoritmin toimintaa, kuten while-silmukan esimerkissä on tehty.
Alustuslausekkeena on yleisesti muuttujan arvon asettaminen. Ehtolausekkeena on ehto, jonka mukaan silmukka jatkaa toimintaansa. Ehtolausekkeen tulee olla sellainen, että silmukan suoritus päättyy jossain vaiheessa tai muuten tuloksena on ikuinen silmukka. Viimeisenä on kasvatus-/vähennyslauseke, joka määrittää, mitä suoritetun toiminnan jälkeen tehdään. Toiminnan jälkeen yleensä kasvatetaan tai vähennetään alustuslausekkeessa määritettyä muuttujaa.
Tehdään laskuri, joka tulostaa luvut 0-10 väliltä:
var luku = 0;
for (var i = 0; i<11; i++) {
luku = i;
console.log(luku);
}
Silmukkaa voidaan myös hyödyntää verkkosivujen tekemisessä. Sen sijaan, että lisätään kuvia useaan kertaan HTML-koodina
<div class="kuvat">
<img src="kuva1.jpg" alt="kuva1" />
<img src="kuva2.jpg" alt="kuva2" />
<img src="kuva3.jpg" alt="kuva3" />
<img src="kuva4.jpg" alt="kuva4" />
<img src="kuva5.jpg" alt="kuva5" />
</div>
voidaan lisääminen tehdä silmukan avulla. Kuvia voisi olla useampi, jopa satoja, jolloin silmukan käyttö olisi vielä hyödyllisempää. Koska edellisessä esimerkissä lisättäviä kuvia on viisi, voidaan tehdä silmukka, joka toistuu viisi kertaa:
for (var i = 1; i < 6; i++) {
var kuvat += '<img src="kuva"' + i + '.jpg" alt="kuva' + i + '" />';
}
document.getElementById.innerHTML("kuvat") = kuvat;
Ensimmäisellä rivillä alustetaan silmukka. Ensin asetetaan muuttujan arvoksi 1, sitten ehdoksi, että muuttujan arvo on pienempi kuin 6 ja lopuksi jokaisella kierroksella kasvatetaan muuttujaa yhdellä.
Toisella koodirivillä lisätään jokainen kuva yksitellen silmukan avulla, kuvan numero muuttuu aina välissä.
Silmukan ulkopuolella sijoitetaan kuvat-muuttujan sisältö HTML-elementtiin, jonka tunniste on "kuvat".
While-silmukka:
Myös while-silmukassa tiettyä toimintaa toistetaan niin kauan kuin tietty ehto on tosi.
While-silmukan syntaksi on kuitenkin erilainen kuin for-silmukan:
while (ehto) {
toiminta, joka suoritetaan ehdon ollessa tosi
}
esimerkiksi
var i=0; // alustetaan muuttuja i:n arvoksi nolla
while (i<5) { // kun i on pienempi kuin 5
print.log(i); // tulosta konsoliin i
i++; // kasvata i:n arvoa yhdellä
}
Tee aiemmissa luvuissa työstämille kotisivuillesi etusivulle tervehdys, joka muuttuu kellonajan mukaan. Jos käyttäjä tulee kotisivuille ennen keskipäivää, tervehdys on "Hyvää huomenta!". Jos taas käyttäjä tulee kotisivuille ennen klo 18, tervehdys on "Hyvää päivää!". Jos kumpikaan edellisistä ehdoista ei täyty, tervehdys on "Hyvää iltaa!".
tervehdys-niminen muuttuja sekä aikaNyt-niminen muuttuja. Tallenna tiedosto ja linkitä se
HTML-tiedostoosi
lisäämällä HTML-tiedoston head-osioon <script type="text/javascript" src="" ></script> -koodirivi.
Sijoita src-attribuutiin JavaScript-tiedostosi nimi, esim. skripti.js.
JavaScriptissä saadaan tieto tämän hetkisestä ajasta aikaolion avulla. Aikaolio palauttaa ajan seuraavassa tekstimuodossa:
Mon Dec 03 2018 12:00:21 GMT +0200 (EET)
eli viikonpäivä kuukausi päivänumero vuosi kellonaika aikavyöhyke.
Uuden aikaolion luominen tapahtuu kirjoittamalla koodirivi:
new Date();
aikaNyt-muuttujaan.
Aikaolion avulla voidaan myös kysyä aika tarkemmassa muodossa valmiilla metodeilla. Pelkkiä tunteja voidaan
kysyä metodilla getHours, jolloin saadaan tieto sen hetkisen ajan tunneista numerona (0-23).
Tuntien kysyminen tapahtuu kirjoittamalla koodirivi:
aikaNyt.getHours();
tunti-niminen muuttuja.
Selvitä aikaolion avulla tämän hetkisen ajan tunnit.
Sijoita tuntien kysyminen tunti-muuttujaan.tunti-muuttujaa ja sen arvoa.tervehdys-muuttujaan.
Sijoita sitten tervehdys-muuttuja aiemmin esitellyllä innerHTML-metodilla HTML-tiedostoosi hyödyntäen otsikon id:tä "tervehdys".