Linkki-maskottihenkilön kuva

Verkkosivut ja ohjelmointi

JavaScriptin perusteet

Tässä luvussa

  • opit ymmärtämään ohjelmoinnin perusperiaatteet.
  • opit ohjelmoimaan koodia kirjoittamalla.
  • opit JavaScript-ohjelmointikieltä.

Mitä ohjelmointi on?

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.

  1. Tarkista kellonaika.
  2. Jos kello on 8:00 tai enemmän, lähde pysäkille.
  3. Muuten ota vielä rennosti.

Harjoitustehtävä: Oma algoritmi

Kirjoita itsellesi algoritmi koulumatkalle. Koulumatka alkaa, kun astut kotiovesta ulos ja päättyy, kun astut koulun ovesta sisälle.

JavaScript

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-koodin sijoittaminen

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.

JavaScriptin linkittäminen verkkosivulle

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.

Ohjelmoinnin peruspalikat

Muuttujat

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:

Koodirivin lukeminen

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.

Harjoitustehtävä TIM-ohjelmointiympäristössä

Tee tehtävä muuttujista (tehtävä 1) täällä.

Muuttujan tyyppi

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ä.

Ehtolauseet

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!"; }

Harjoitustehtävä TIM-ohjelmointiympäristössä

Tee tehtävät ehtolauseista (tehtävät 2 ja 3) täällä.

Silmukat

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

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:

innerHTML

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 }

Kommentointi

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.

Harjoitustehtävä TIM-ohjelmointiympäristössä

Tee tehtävät silmukoista (tehtävät 4 ja 5) täällä.


Projektitehtävä

Omat verkkosivut

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!".

JavaScript-tiedoston luominen ja sen linkittäminen verkkosivulle

  1. Tee verkkosivujesi etusivu.html-tiedostoon tyhjä otsikkoelementti, jolle annat tunnisteen eli id:n "tervehdys".
  2. Luo uusi JavaScript-tiedosto ja anna sille nimeksi skripti.js. Tallenna tiedosto samaan kansioon kuin etusivu.html-tiedostosi.
  3. Skripti.js-tiedostoon täytyy lisätä funktio, joka lataa verkkosivun kaiken sisällön ennen JavaScriptillä aikaansaadun toiminnan lisäämistä verkkosivulle. Lisää siis skripti.js-tiedostoon ensimmäiseksi koodiriviksi:
    window.onload = function() { }

Kirjoita skripti.js-tiedostoon myöhemmin tulevat koodirivit aaltosulkujen sisään. Funktioita käsitellään tarkemmin JavaScriptin jatko-osassa.

  1. Linkitä skripti.js-tiedosto verkkosivuillesi lisäämällä etusivu.html-tiedoston head-osioon koodirivi:
    <script src="skripti.js"></script>

Tervehdys kellonajan tuntien mukaan

Tässä osiossa työstät vain skripti.js-tiedostoasi. Kirjoita koodia tiedostoon riveittäin tehtäväkohtien mukaisessa järjestyksessä.

  1. Alusta tiedostoon 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();
  1. Luo tiedostoon uusi aikaolio, jonka sijoitat muuttujaan 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.

  1. Alusta tiedostoon tunti-niminen muuttuja. Selvitä aikaolion ja valmiin metodin avulla tämänhetkisen ajan tunnit. Sijoita tuntien kysyminen muuttujaan tunti.
  2. Kirjoita tiedostoon if-else-ehtolause, jolla määrität verkkosivuilla näkyvän tervehdyksen. Käytä ehtolauseessa hyväksi muuttujaa 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;
  1. Lisää tiedoston viimeiseksi koodiriviksi metodi, jolla saat tämänhetkisen kellonajan tuntien mukaisen tervehdyksen näkymään verkkosivullasi.
  2. Testaa vielä verkkosivujesi toiminta. Näkyykö verkkosivulla kellonajan mukainen tervehdys?

Yhteenveto