Osa 1 – JavaScriptin alkeet

1.1 HTML ja tagit

Sinunhan piti ohjelmoida Javascriptiä, joten miksi tämän osan otsikko on HTML ja tagit? HTML on kieli, jolla erilaiset elementit näytetään ohjelmassa. Elementtejä ovat esimerkiksi teksti, kuva tai painike, jotka näkyvät ohjelmassa. HTML-elementit koodataan käyttämällä tageja.

Tutkitaan seuraavaksi, miten tekstielementti koodataan ohjelmaan. Tekstielementtiä käytetään, kun sivulla näytetään tekstiä. Tekstinä voidaan pitää mitä vain lauseen ja yhden kirjaimen välillä. Tekstielementti alkaa tagilla <p> ja loppuu tagiin </p>. Esimerkiksi lause “Mikä sinun nimesi on?” näyttää koodissa tekstielementtinä seuraavalta: <p>Mikä sinun nimesi on?</p>.

Erilaisten elementtien muoto on aina sama. Ne alkavat jollakin tagillä ja loppuvat tagiin, jossa on mukana kauttamerkki: /. Tämä tarkoittaa sitä, että kun ohjelmaan tehdään painike, se kirjoitetaan <button> tagien sisälle ja painike-elementti koodissa on <button>Painike</button>. Huomaatko miten koodissa on taas aloitus- ja lopetustagit, vain tagien teksti vaihtuu?

1.2 Mikä ihmeen JavaScript?

HTML-koodilla erilaiset HTML-elementit tulivat näkyviin ohjelmassa. JavaScript-koodi kirjoitetaan myös HTML-elementin sisälle. JavaScript-elementti käyttää <script>-tagiä eli JavaScript-koodi kirjoitetaan ympäristöön, joka alkaa tagilla <script> ja loppuu tagiin </script>. JavaScriptiä siis kirjoitetaan skriptielementin sisälle, joka on script-tyyppinen HTML-elementti.

<script>
    //JavaScript-koodi kirjoitetaan tänne
</script>

Koska skriptielementti on vain yhden tyyppinen HTML-elementti, myös muunlaisia HTML-elementtejä voidaan kirjoittaa ohjelmaan.

Alussa mainittiin, että HTML-elementit saavat sisällön näkymään ohjelmassa. Skriptielementti on erityinen siinä mielessä, että se ei varsinaisesti tuo mitään näkyviin ohjelmaan. Skriptielementtiin kirjoitetaan toiminnallisuutta, jota käytetään ohjelmassa.

Ensimmäinen komento: alert()

JavaScript-komennolla alert() tulostetaan tekstiä näytölle. Tulostaminen on vanha sana, joka periytyy ajalta jolloin näyttöjen sijasta käytettiin kirjoittimia. Nykyään tulostaminen tarkoittaa tekstin näyttämistä näytöllä.

Tulostettava teksti kirjoitetaan sulkujen sisään ja ympäröidään vielä lainausmerkeillä: "". Tulostuskomento kokonaisuudessaan on siis muotoa alert("Heissulivei Maailma!"). Laitetaan koodi vielä <script>-tagien sisälle ja saamme valmiiksi ensimmäisen JavaScript-ohjelman.

<script>
    alert("Heissulivei Maailma!")
</script>

1.3 Uusi komento prompt()

JavaScript-komento prompt() näyttää ohjelmassa samanlaisen ikkunan kuin alert() komentokin, mutta tällä kertaa ikkunassa on myös kenttä, johon ohjelman käyttäjä voi kirjoittaa jonkin vastauksen. Kun käyttäjä klikkaa “OK”, syöttää prompt-elementti vastauksen ohjelmalle. Kirjoittamalla yksinkertaisen ohjelman

<script>
    prompt()
</script>

ikkuna aukeaa.

Kun prompt()-komennon sisälle kirjoitetaan lainausmerkkien sisälle merkkijono, niin teksti tulostuu näytölle syötekentän yläpuolelle:

<script>
    prompt("Hei! Mikä sinun nimesi on?")
</script>

Jotta syötteellä voidaan tehdä jotain hyödyllistä, täytyy se tallettaa muuttujaan. Lisätään komennon prompt("Hei! Mikä sinun nimesi on?") alkuun vielä muuttujan määrittely:

<script>
    var nimi = prompt("Hei! Mikä sinun nimesi on?")
</script>

Huomaatko eron edelliseen koodiin? prompt()-komennon eteen on lisätty var nimi =, joka määrittelee nimi-nimisen muuttujan ja yhtäsuuruus-merkki asettaa tälle nimi-muuttujalle arvon.

Kun yhdistetään prompt()-komento ja alert()-komento, ohjelma pystyy käyttämään käyttäjän syötteitä toiminnassaan. Muuttujaa nimi voi käyttää alert()-komennossa.

<script>
    var nimi = prompt("Hei! Mikä sinun nimesi on?")
    alert("Hei "+ nimi + "!")
</script>

1.4 Rakennuspalikka: Muuttujat

prompt()-komennon yhteydessä esiteltiin muuttuja, jolle annettiin nimeksi nimi. Muuttujat ovat ohjelman eräänlaisia rakennuspalikoita. Muuttujat antavat tiedolle nimen, jonka jälkeen muuttujan arvoa voidaan käyttää annetun muuttujan nimen perusteella.

Muuttujan nimen päättää ohjelmoija – eli sinä. On kuitenkin hyvä, jos muuttujan nimi on sen käyttötarkoitusta kuvaava. Esimerkiksi ikä ja nimi kannattaa tallettaa muuttujiin, joiden nimet ovat ikä ja nimi.

Tiedät jo ainakin yhden tavan asettaa muuttujan arvon. prompt()-komennon yhteydessä muuttujan arvoksi asetettiin käyttäjän syöte. Tämä onnistui käyttämällä yhtäsuuruusmerkkiä muuttujan nimen jälkeen. Muuttujalle voidaan antaa arvo myös asettamalla haluttu arvo yhtäsuuruusmerkin oikealle puolelle. Esimerkiksi muuttuja nimeltä ikä, jonka arvo on 12, määritetään kirjoittamalla koodiin var ikä = 12 ja muuttuja, jonka nimi on nimi ja arvo Milla, määritetään var nimi = "Milla". var-sanaa käytetään, kun muuttuja määritellään ensimmäisen kerran.

Muuttujien arvoa voidaan vaihtaa määrittämällä uudelleen saman niminen muuttuja, mutta tällä kertaa uudella arvolla ilman var-sanaa. Esimerkiksi, jos olemme koodissa määritelleet muuttujan var nimi = "Milla", niin kirjoittamalla koodiin nimi = "Pekka" vaihtaa muuttujan nimi arvoksi "Pekka".

Lukumuuttujat

Muuttujia, joiden arvoksi on asetettu luku, voidaan käyttää matemaattisissa laskutoimituksissa kuten tavallisia lukuja. Esimerkiksi kahdelle lukumuuttujalle voidaan suorittaa tavalliseen tapaan yhteen-, vähennys-, kerto- tai jakolasku.

var a = 12
var b = 6
var yhteensa = a+b
var erotus = a-b
var tulo = a*b
var osamäärä = a/b

Tällöin muuttujien arvoksi asetetaan yhtäsuuruusmerkin oikealla puolella olevan laskutoimituksen tulos. Tietokone siis näkee edellisen esimerkin laskutoimitukset niin, että a:n tilalle laitetaan aina 12 ja b:n tilalle 6. Lopputulos lasketaan näiden perusteella:

var a = 12
var b = 6
var yhteensa = 12+6
var erotus = 12-6
var tulo = 12*6
var osamäärä = 12/6

Tekstimuuttujat

Kun muuttujan arvoksi asetetaan tekstiä, teksti tulee laittaa lainausmerkkien "" sisälle. Tekstimuuttujia voidaan yhdistää käyttämällä plus-merkkiä: +.

var nimi = "Milla"
var lempiruoka = "makaronilaatikko"
var koira = "Papu"
var uusiNimi = nimi + koira

Esimerkin uusiNimi-muuttujan arvo saadaan yhdistämällä nimi- ja koira-muuttujien arvo. Näin ollen uusiNimi-muuttujan arvo on "MillaPapu".

Yhdistetään muuttujat

Lukumuuttujan yhdistäminen tekstimuuttujaan tapahtuu plusmerkillä. Kun luvun laittaa keskelle tekstiä, pitää sen molemmille puolille laittaa plusmerkit.

var yhteenlasku = 6 + 6
var teksti = "Nimeni on Milla ja olen " + yhteenlasku + " vuotta vanha."

Kysymyksiä

2.4 Yhteenveto komennoista