Linkki → Verkkosivut ja ohjelmointi → JavaScriptin perusteet
© Tekijät
Linkki → Verkkosivut ja ohjelmointi → JavaScriptin perusteet
© Tekijät
Tässä luvussa
Ohjelmoitaessa tietokoneelle annetaan tehtäväksi tehdä asioita tietyllä tavalla ja tietyssä järjestyksessä. Tämä on yhteistä kaikille ohjelmointikielille ja graafisille ohjelmointiympäristöille. Kun haluttu algoritmi eli luettelo asioista on tehty, on varsinainen ohjelmointi paljon helpompaa. Algoritmi on sarja toimenpiteitä, jotka suoritetaan tietyssä järjestyksessä. Esimerkiksi kouluun lähtemisen algoritmi voisi näyttää tältä:
Bussi saapuu pysäkille klo 8:10 ja kävely pysäkille kestää viisi minuuttia.
Kirjoita itsellesi algoritmi koulumatkalle. Koulumatka alkaa, kun astut kotiovesta ulos ja päättyy, kun astut koulun ovesta sisälle.
JavaScript on ohjelmointikieli, jota voidaan käyttää HTML:n ja CSS:n kanssa yhdessä verkkosivujen luomiseen. JavaScriptin avulla verkkosivulle voidaan lisätä toiminnallisuutta. JavaScriptiä voidaan käyttää myös pelien ohjelmoinnissa ja mobiilisovellusten luomisessa. JavaScriptiä kirjoitetaan tekstieditoriohjelmalla samaan tapaan kuin HTML:ää ja CSS:ää. JavaScript-ohjelmointikieltä ei pidä sekoittaa Java-ohjelmointikieleen.
JavaScript-koodia voidaan kirjoittaa myös suoraan HTML-tiedostoon joko sijoittamalla koodi head-elementin sisään tai
varsinaisen HTML-tiedoston sisältöön body-elementin sisään merkitsemällä JavaScript-koodi <script>- ja </script>-tageilla.
JavaScript-koodia varten kannattaa luoda oma tiedostonsa. JavaScript-tiedoston tunnistaa .js-tiedostopäätteestä. Erillinen JavaScript-tiedosto linkitetään HTML-tiedostoon lisäämällä head-elementin sisälle kutsurivi:
<script src="skripti.js"></script>
Kutsurivi voidaan joissain tapauksissa sijoittaa myös HTML-tiedostoon verkkosivun varsinaisen sisällön sekaan. Tällöin kutsu sijoitetaan tiedoston loppuun ennen </body>-tagia.
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 alustamisen yhteydessä tallentaa luku 25:
Koodiriviä kannattaa lukea oikealta vasemmalle: "Sijoitetaan arvo 25 muuttujaan ika."
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.
Joissain muissa ohjelmointikielissä muuttujan tyyppi tulee kertoa muuttujan alustamisen yhteydessä. Esimerkiksi 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ä.
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, jos kello näyttää tiettyä aikaa.
Tietokoneelle annetaan komento:
Tarkista kellonaika. Jos kello on vähemmän kuin 18.00, toivota kävijälle "Hyvää päivää!".
Koodina vastaava komento 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 jäädä toteutumatta, jolloin ehto on epätosi. Myös toteutumattomalle ehdolle voidaan määrittää toiminta. If-else-ehtolauseen avulla voidaan verkkosivulle lisätä esimerkiksi toiminta, jossa verkkosivun kävijä toivotetaan tervetulleeksi tietyn kellonajan mukaan.
Tietokoneelle annetaan komento:
Tarkista kellonaika. Jos kello on vähemmän kuin 18.00, toivota "Hyvää päivää!"
Muuten toivota "Hyvää iltaa!".
Koodina vastaava komento 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.
Tietokoneelle voidaan antaa komento:
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 komento 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 toiminta useamman kerran. Näin haluttu toiminta saadaan ohjelmoitua vähemmällä koodimäärällä 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
}
Alustuslausekkeena on 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, joka saa aikaan ohjelman tai verkkosivun jumiutumisen. Viimeisenä on kasvatus-/vähennyslauseke, joka määrittää, mitä kerran suoritetun toiminnan jälkeen tehdään. Toiminnan jälkeen yleensä kasvatetaan tai vähennetään alustuslausekkeessa määritettyä muuttujaa.
Tulostaminen tarkoittaa, että ohjelma koodataan tulostamaan toimintaansa eli näyttämään tekstiä tietokoneen ruudulla.
Alle on koodattu for-silmukkaa hyödyntäen laskuriohjelma, joka tulostaa luvut 0-10:
var luku = 0;
for (var i = 0; i < 11; i++) {
luku = i;
console.log(luku);
}
For-silmukkaa voidaan myös hyödyntää verkkosivujen tekemisessä. Jos silmukkaa ei käytetä, joudutaan jokainen kuva lisäämään HTML- tiedostoon yksitellen:
<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>
Kun lisääminen tehdään silmukan avulla, jokaista kuvaa ei tarvitse merkitä yksitellen. Tällöin lisättäviä kuvia voi olla useampi, jopa satoja, jolloin silmukan käyttö on entistä hyödyllisempää. Viiden kuvan lisääminen for-silmukkaa hyödyntäen koodataan seuraavasti:
Metodilla innerHTML voidaan muuttaa HTML-tiedostojen sisältöä.
Viereisessä esimerkissä kysytään ensin HTML-tiedostosta löytyvää tunnistetta "kuvat".
Tämän jälkeen määritetään tunnisteeseen liittyvä sisältö uudestaan. Esimerkissä tunnisteeseen liittyvä sisältö muutetaan
sijoittamalla silmukassa luodut kuviin liittyvät koodirivit uudeksi sisällöksi.
for (var i = 1; i < 6; i++) {
var kuvat += '<img src="kuva"' + i + '.jpg" alt="kuva' + i + '" />';
}
document.getElementById("kuvat").innerHTML = kuvat;
Ensimmäisellä koodirivillä 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 muuttujaan jokainen kuva yksitellen silmukan avulla, kuvan numero muuttuu aina välissä.
Viimeisellä koodirivillä sijoitetaan muuttujan kuvat 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
}
Kommentit ovat koodissa mukana olevia merkintöjä, joita ei suoriteta tai näytetä verkkosivulla. JavaScript- ohjelmointikielessä kommentti asetetaan kirjoittamalla kaksi kauttaviivaa peräkkäin (eli //) koodirivin eteen. Kommentoimalla voidaan selventää algoritmin toimintaa tai lisätä kommentteihin omia muistiinpanoja.
Alle on koodattu while-silmukkaa hyödyntäen laskuriohjelma, joka tulostaa luvut 0-10:
var i = 0; // Alusta muuttujan i arvoksi 0
while (i < 11) { // Toista niin kauan kun i:n arvo on alle 11
print.log(i); // Tulosta i:n arvo
i++; // Kasvata i:n arvoa yhdellä
}
// Muista testata ohjelman toiminta!
Minkä tahansa toistorakenteen voi toteuttaa sekä while- että for-silmukalla. For-silmukka sopii kuitenkin paremmin tilanteisiin, joissa toistojen lukumäärä on tiedossa.
Jatka verkkosivujesi työstämistä mallin ja alla olevien ohjeiden mukaisesti. Tehtävä koostuu kahdesta osiosta.
Tee verkkosivujesi etusivulle tervehdys, joka muuttuu kellonajan tuntien mukaan. Jos käyttäjä tulee verkkosivuillesi ennen klo 12, tervehdys on "Hyvää huomenta!". Jos taas käyttäjä tulee verkkosivuillesi ennen klo 18, tervehdys on "Hyvää päivää!". Jos kumpikaan edellisistä ehdoista ei täyty, tervehdys on "Hyvää iltaa!".
window.onload = function() {
}Kirjoita skripti.js-tiedostoon myöhemmin tulevat koodirivit aaltosulkujen sisään. Funktioita käsitellään tarkemmin JavaScriptin jatko-osassa.
<script src="skripti.js"></script>Tässä osiossa työstät vain skripti.js-tiedostoasi. Kirjoita koodia tiedostoon riveittäin tehtäväkohtien mukaisessa järjestyksessä.
tervehdys-niminen muuttuja sekä aikaNyt-niminen muuttuja.JavaScriptillä 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.
Aikaolion avulla voidaan kysyä aika tarkemmassa muodossa valmiilla metodeilla. Kellonajan tunteja voidaan
kysyä metodilla getHours. Metodilla saadaan tieto sen hetkisen ajan tunneista lukuna (0-23).
Kellonajan tuntien kysyminen aikaoliolta tapahtuu kirjoittamalla koodirivi:
aikaNyt.getHours();
Metodeita käsitellään tarkemmin JavaScriptin jatko-osassa.
tunti-niminen muuttuja.
Selvitä aikaolion ja valmiin metodin avulla tämänhetkisen ajan tunnit.
Sijoita tuntien kysyminen muuttujaan tunti.tunti ja sen arvoa. Sijoita ehtolauseen sisällä muuttujaan
tervehdys tietty tervehdys (esim. "Hyvää huomenta!").Lopuksi kellonajan tuntien mukainen tervehdys täytyy saada myös etusivu.html-tiedostosi otsikkoelementin sisällöksi eli näkymään verkkosivullasi.
Tämä tapahtuu metodilla innerHTML sekä hyödyntämällä etusivu.html-tiedostosi otsikon id:tä "tervehdys". Oikean tervehdyksen lisääminen
verkkosivulle tapahtuu kirjoittamalla koodirivi:
document.getElementById("tervehdys").innerHTML = tervehdys;