Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

JavaScript-kielen alkeet - osa 1

Sisällysluettelo

  1. Mitä on JavaScript?
  2. Kommentointi
  3. JavaScriptin perustietotyypit
    1. Numerot
    2. Merkkijonot
    3. Totuusarvot
    4. Erikoisarvot
  4. Muuttujat
    1. Muuttujien nimeäminen
    2. Varatut sanat
    3. Muuttujien esittely ja alustaminen
    4. Esimerkkejä muuttujista
    5. Muuttujien vaikutusalue
  5. Lauseet
  6. Lausekkeet
  7. Perusoperaattorit
    1. Aritmeettiset operaattorit
    2. Sijoitusoperaattorit
    3. Vertailuoperaattorit
    4. Loogiset operaattorit
    5. Operaattorien suoritusjärjestys

Mitä on JavaScript?

JavaScript (tästä edes JS) on Netscapen kehittämä oliopohjainen ohjelmointikieli, jota modernit selaimet yleisesti tukevat. JS on nimensä mukaisesti ns. scriptikieli, jonka koodi tulkitaan, eli sitä ei erikseen käännetä omaksi ohjelmakseen ennen suorittamista, kuten sovellusohjelmointikielissä. JS tarvitsee toimiakseen isäntäympäristön, kuten selaimen, jonka JS-tulkki suorittaa koodin rivi kerrallaan. JS:n vahvuus on sen käyttöjärjestelmäriippumattomuudessa, keveydessä, tehokkuudessa, sekä sen yksinkertaisessa ja vapaamuotoisessa syntaksissa.

JS-koodin tuottamiseen riittää mikä tahansa editori, sillä koodi koostuu pelkästä tekstistä. Tämä teksti taas muodostuu yleisistä ohjelmointikielien perusrakenteista, joita lähdemme tässä seuraavaksi käsittelemään. Johdannossa JavaScriptin käyttöön Web-sivuilla käsitellään JS-koodin liittämistä Web-dokumenttiin.

Kommentointi

Kommentti (comment) on ihmisen luettavaksi tarkoitettua tekstiä koodin seassa. Kommentit ovat koodin tekijän merkintöjä, jotka selkeyttävät tai selittävät koodia, sekä tekijälle itselleen, että mahdollisille ulkopuolisille koodin päivittäjille. Kommentoinnin päätarkoitus on säästää työtä, mutta myös jotkut ohjelmat voivat käyttää kommentteja hyväkseen. JS-tulkki kuitenkin ohittaa kaikki kommentit käsittelemättä niitä ollenkaan.

Kommentointia tullaan käyttämään ensimmäisten esimerkkien yhteydessä, joten on syytä esitellä tämä tärkeä osa ohjelmointia heti alkuun. JS tukee, sekä moni-, että yksirivistä kommentointitapaa:

/* Tämä on monirivinen kommentti, joka alkaa
   kauttaviiva-asteriski yhdistelmällä ja
   päättyy asteriski-kauttaviiva-yhdistelmään.  */

/********************************************
 * Moniriviset kommentit kannattaa muotoilla,
 * esim. sisennyksillä,
 * jotta niiden lukeminen helpottuisi.
 ********************************************/         

// Kauttaviivapari taas on yksirivinen kommentti.

// Kohdatessaan kauttaviivaparin JS-tulkki ohittaa
// kyseisen rivin loput merkit
// ja siirtyy seuraavalle riville.
// Katso alempana merkkijonojen koodiesimerkkiä.

JavaScriptin perustietotyypit

JS tuntee seuraavat perustietotyypit:

Numerot

Numeroita (numbers) ovat positiiviset ja negatiiviset:

Numerot merkitään koodiin sellaisenaan.

Merkkijonot

Merkkijonot (strings) koostuvat merkeistä, yleensä tavallisesta tekstistä ja mahdollisesti erikoismerkeistä (escape characters), mutta kaikki Unicode-merkit ovat sallittuja. Merkkijonot kirjoitetaan, joko (kaksihipsuisten) lainausmerkkien, tai (yksihipsuisten) heittomerkkien sisälle. Esimerkkejä merkkijonoista:

"Lainausmerkit määrittelevät merkkijonon rajat." 
'Heittomerkit määrittelevät merkkijonon rajat.' 
'7' // tämäkin on nyt merkkijono
""  // tyhjä merkkijono (zero-length string)

Merkkijonot voivat sisältää myös merkkausta, jolloin merkkauskielen sisältämät lainausmerkit voivat aiheuttaa harmeja. Yhdenmukaisuus- ja yhteensopivuussyistä kannattaa käyttää heittomerkkejä JS-merkkijonojen rajoina, koska useimmiten merkkauskielessä käytetään lainausmerkkejä. Esimerkiksi seuraavassa koodissa merkkijonon sisältämät lainausmerkit eivät sekoitu merkkijonon rajoina toimiviin heittomerkkeihin:

'<h3 title="Esimerkki">Suositus</h3>'

Joskus tämä järjestyskään ei riitä ja silloin joudutaan turvautumaan erikoismerkkeihin (escape characters), joilla on erikoismerkitys merkkijonoissa:

'<h3 title="Esimerkki">O\'Haran suositus</h3>'

Ilman erikoismerkkinä toimivaa kenoviivaa JS-käsittelijä olisi päättänyt esimerkin merkkijonon O-kirjaimeen. Nyt kenoviiva poistaa heittomerkin erikoismerkityksen, eikä ohjelmavirhettä synny. Yleisiä erikoismerkkejä ovat:

Totuusarvot

Näitä loogisia arvoja (Boolean values) on vain kaksi:

Totuusarvoja käytetään vertailuissa.

Erikoisarvot

JS tuntee kaksi erikoisarvotyyppiä:

Vertailuissa erikoisarvotyypit evaluoituvat epätosiksi (false).

Muuttujat

Muuttuja (variable) on ohjelmoijan itsensä nimittämä tiedon tallennuspaikka tietokoneen muistissa. Muuttujat mahdollistavat tietojen käsittelyn ja ohjelman suoritusaikaisen muuttamisen näiden symbolisien nimien perusteella.

Esimerkiksi ohjelma, joka laskee jakolaskun käyttäjän antamilla luvuilla, tarvitsee muuttujia ainakin tallentamaan käyttäjän syöttämät luvut, jotta laskutoimitus mahdollistuisi. Yleensä myös jakolaskun tuloskin tallennetaan muuttujaan.

JS-muuttujien tietotyyppiä ei erikseen määritellä. Muuttujien arvojen tietotyyppiäkin voidaan vaihtaa dynaamisesti, ohjelman suorituksen aikana.

Muuttujien nimeäminen

Jotta JS-käsittelijä erottaisi eri muuttujat toisistaan, niille on annettava tunnisteet, eli nimet, jotka erottavat ne kaikista muista muuttujista.

Tunnisteet kannattaa nimetä siten, että ne helpottavat koodin ylläpitoa, eli sen luettavuutta ja ymmärrettävyyttä. Edellä mainitussa esimerkkiohjelmassa muuttujien nimet olisivat siis jaettava, jakaja ja osamäärä, sillä nykyisin skandinaavisia merkkejä ei tarvitse enää välttää.

Muuttujien nimet (identifiers) tulee alkaa kirjaimella, alaviivalla tai dollarimerkillä ja ne saavat vielä edellisten merkkien lisäksi sisältää numeroita. Nimeämisessä tulee huomioida että JS on merkkiriippuvainen, eli isot- ja pienaakkoset ovat eri merkkejä.

Varatut sanat

JS käsittää joukon varattuja sanoja (reserved words), joita ei saa käyttää tunnisteina, eli muuttujien, funktioiden, metodien, eikä olioiden nimissä. Varatut sanat ovat ohjelmarakenteissa käytettyjä avainsanoja, joista jotkut on vasta varattu tulevaa käyttöä varten.

JavaScriptin varatut sanat
  • abstract
  • boolean
  • break
  • byte
  • case
  • catch
  • char
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • double
  • else
  • enum
  • export
  • extends
  • false
  • final
  • finally
  • float
  • for
  • function
  • goto
  • if
  • implements
  • import
  • in
  • instanceof
  • int
  • interface
  • long
  • native
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • short
  • static
  • super
  • switch
  • synchronized
  • this
  • throw
  • throws
  • transient
  • true
  • try
  • typeof
  • var
  • void
  • volatile
  • while
  • with

Muuttujien esittely ja alustaminen

JS-muuttujat esitellään (luodaan) var-avainsanalla. Avainsanan käyttö ei aina ole pakollista, mutta se on aina sallittua ja suositeltavaa:

//esitellään muuttuja nimellä laskuri:
var laskuri; //mikä on muuttujan arvo nyt?

JS myös sallii muuttujien alustamisen niiden esittelyn yhteydessä. Alustaminen tarkoittaa jonkun tiedon sijoittamista muuttujaan:

//esitellään laskuri niminen muuttuja ja alustetaan sen arvoksi nolla:
var laskuri = 0;

Yhdessä var-lauseessa voidaan esitellä ja/tai alustaa useampi pilkulla erotettu muuttuja.

Esimerkkejä muuttujista

Seuraavassa muutamia esimerkkejä pätevistä ja pätemättömistä muuttujien määrittelyistä:

// Laillisia muuttujamäärittelyjä:
var $keskiarvo = 4.2;         // arvo on tietotyyppiä numero
var URL_prefix = 'http://';  // arvo on tietotyyppiä merkkijono
var _javaTuki = false;      // arvo on tietotyyppiä totuusarvo
var Super;                 // arvo on tietotyyppiä undefined
var S123 = null;          // arvo on tietotyyppiä null

// Laittomia muuttujamäärittelyjä:

var munLuku = 1,2;
var 007 = 'Bond';
var mun luku = '7'; 
var super;

Mieti miksi yllä olevat määrittelyt ovat laittomia. Vastaukset on lisätty lauseiden yhteyteen TITLE-attribuutilla.

Muuttujien vaikutusalue

Muuttujien vaikutusalueita on kaksi:

Tässä oletetaan, että muuttujat on esitelty asianmukaisesti var-avainsanalla.

Lauseet

Lause (statement) on yleensä omalle rivilleen kirjoitettava yksittäinen toiminto ohjelmassa. Analogia ihmiskieleen: lause yhdistää kieliopilliset elementit yhdeksi ajatukseksi. JS-syntaksi sallii lauseiden päättämisen rivinvaihdolla, mutta useastakin syystä kannattaa merkitä lauseiden päättyminen eksplisiittisesti, eli puolipisteellä:

var MunLuku = 666 //implisiittinen lauseen päättyminen
var MunLuku = 666; //eksplisiittinen lauseen päättyminen

Lauseita voidaan ryhmitellä lohkoiksi (blocks). Lauselohko on yhden tai useamman lauseen sisältävä eroteltu kokonaisuus, jota käytetään muun muassa silmukoissa ja funktioissa. Lauselohkot merkitään aaltosulkumerkeillä:

{ //lohko alkaa
  //lause tai lauseet lohkon sisällä;
} //lohko päättyy

Myös lausekkeet ovat lauseita:

Lausekkeet

Lauseke (expression) on mikä tahansa yhdistelmä muuttujia, operaattoreita, tietotyyppejä ja lausekkeita, joka tuottaa yksittäisen tuloksen, kuten numeron, merkkijonon, tai totuusarvon. Lausekkeet voidaan jakaa kahteen tyyppiin:

3 * 4      // operaattorilauseke tuottaa tuloksen 12
Tulos=3*4 // sijoitusoperaattorilauseke sijoittaa tuloksen muuttujaan

Jälkimmäisessä esimerkissä esiintyy kaksi numeerista operandia (luvut 3 ja 4), kaksi erityyppistä operaattoria, aritmeettinen- (*) ja sijoitusoperaattori (=), sekä yksi muuttuja (Tulos).

Perusoperaattorit

Operaattori (operator) on symbolinen merkki tai merkkiyhdistelmä lausekkeessa, joka suorittaa tietyn toimenpiteen. Käsittelemme tässä JS:n yleisempiä operaattorityyppejä ja niihin kuuluvia operaattoreja.

Aritmeettiset operaattorit

Aritmeettiset operaattorit ovat laskutoimituksia suorittavia operaattoreita, jotka palauttavat yksittäisen numeerisen arvon. Nämä operaattorit jaetaan:

Aritmeettisia operaattoreita
Operaattori Kuvaus Esimerkki, jossa Tulos-muuttujan arvo on 12
Binäärisiä operaattoreita
+ Yhteenlasku. Poikkeuksellinen, koska ketjuttaa myös merkkijonoja. Tulos+5 /*Palauttaa muuttujan arvon ja luvun summan (17).*/
- Vähennyslasku. Tulos-5 /*Palauttaa muuttujan arvon vähennettynä luvulla (7).*/
* Kertolasku. Tulos*5 /*Palauttaa muuttujan arvon kerrottuna luvulla (60).*/
/ Jakolasku. Palauttaa tuloksen liukulukuna. Tulos/5 /*Palauttaa muuttujan arvon jaettuna luvulla (2.4).*/
% Jakojäännös. Tulos%5 /*Palauttaa muuttujan arvon ja luvun jakojäännöksen (2).*/
Unaarisia operaattoreita
++muuttuja Esilisäysoperaattori. Lisää arvoa yhdellä. ++Tulos /*Palauttaa muuttujan arvon lisättynä yhdellä (13).*/
muuttuja++ Jälkilisäysoperaattori. Lisää arvoa yhdellä. Tulos++ /*Palauttaa muuttujan arvon (12), jonka jälkeen lisää sitä yhdellä (13).*/
--muuttuja Esivähennysoperaattori. Vähentää arvoa yhdellä. --Tulos /*Palauttaa muuttujan arvon vähennettynä yhdellä (11).*/
muuttuja-- Jälkivähennysoperaattori. Vähentää arvoa yhdellä. Tulos-- /*Palauttaa muuttujan arvon (12), jonka jälkeen vähentää sitä yhdellä (11).*/
-muuttuja Negaatio. -Tulos /*Palauttaa muuttujan arvon käänteisenä (-12).*/

Huomioi että lisäysoperaattori (+) suorittaa ketjutuksen (katenoinnin, yhteenliittämisen), mikäli toinen operandi on merkkijono, eli:

2 + '2' // operaattorilauseke tuottaa tuloksen '22'

Tässä siis numeerinen operandi muunnetaan automaattisesti merkkijonoksi ja lauseke tuottaa merkkijonon. Muut aritmeettiset operaattorit taas pyrkivät muuttamaan merkkijonot numeroiksi:

"2" - '2' // operaattorilauseke tuottaa tuloksen 0

Sijoitusoperaattorit

Sijoitusoperaattorit sijoittavat oikeanpuolisen operandin (tai lausekkeen) arvon vasemmanpuoliseen operandiin (muuttujaan). Kaikki sijoitusoperaattorit ovat perussijoitusoperaattorin (=) ja aritmeettisten operaattoreiden lyhenteitä.

Sijoitusoperaattoreita
Operaattori Kuvaus Esimerkki, jossa Tulos-muuttujan arvo on 12
= Perussijoitusoperaattori. Tulos=Tulos /* Sijoittaa oikeanpuolisen operandin arvon vasemmanpuoliseen operandiin(12).*/
+= Yhteenlaskusijoitusoperaattori. Yhdistää myös merkkijonoja. Tulos+=5 /*Sama kuin: Tulos = Tulos + 5 (17).*/
-= Vähennyslaskusijoitusoperaattori. Tulos-=5 /*Sama kuin: Tulos = Tulos - 5 (7).*/
*= Kertolaskusijoitusoperaattori. Tulos*=5 /*Sama kuin: Tulos = Tulos * 5 (60).*/
/= Jakolaskusijoitusoperaattori. Palauttaa tuloksen liukulukuna. Tulos/=5 /*Sama kuin: Tulos = Tulos / 5 (2.4).*/
%= Jakojäännössijoitusoperaattori. Tulos%=5 /*Sama kuin: Tulos = Tulos % 5 (2).*/

Vertailuoperaattorit

Vertailuoperaattorit vertailevat operandejansa ja palauttavat totuusarvon (true tai false) vertailun perusteella.

Vertailuoperaattorit
Operaattori Kuvaus Esimerkki, jossa Tulos-muuttujan arvo on 12
== Löysä yhtäläisyysoperaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos=='12' /*Palauttaa arvon true (luku 12 vastaa merkkijonoa '12').*/
!= Löysä erilaisuusoperaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos!='12' /*Palauttaa arvon false (luku 12 vastaa merkkijonoa '12').*/
=== Tiukka yhtäläisyysoperaattori. Ei tyyppimuunnosta. Tulos==='12' /*Palauttaa arvon false (luku 12 ei vastaa merkkijonoa '12').*/
!== Tiukka erilaisuusoperaattori. Ei tyyppimuunnosta. Tulos!=='12' /*Palauttaa arvon true (luku 12 ei vastaa merkkijonoa '12').*/
> Suurempi kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos>'12' /*Palauttaa arvon false (luku 12 ei ole suurempi kuin merkkijono '12').*/
< Pienempi kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos<'12' /*Palauttaa arvon false (luku 12 ei ole pienempi kuin merkkijono '12').*/
>= Suurempi tai yhtä suuri kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos>='12' /*Palauttaa arvon true (luku 12 on yhtä suuri kuin merkkijono '12').*/
<= Pienempi tai yhtä suuri kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos<='12' /*Palauttaa arvon true (luku 12 on yhtä suuri kuin merkkijono '12').*/

Loogiset operaattorit

Tyypillisesti loogisia operaattoreita käytetään totuusarvoilla vertailuissa, jolloin ne myös palauttavat totuusarvon.

Loogiset operaattorit (totuusarvoilla)
Operaattori Kuvaus Esimerkki, jossa Tulos-muuttujan arvo on 12
Binääriset operaattorit
&& Looginen "ja" -operaattori. Palauttaa true-arvon, mikäli kummatkin operandit evaluoituvat tosiksi, muuten palauttaa false-arvon. -Tulos < 0 && Tulos <= 11 /*Palauttaa false-arvon, sillä toinen lauseke on epätosi.*/
|| Looginen "tai" -operaattori. Palauttaa true-arvon, mikäli vähintään toinen operandi evaluoituu todeksi, muuten palauttaa false-arvon. -Tulos < 0 || Tulos <= 11 /*Palauttaa true-arvon, sillä ensimmäinen lauseke on tosi.*/
Unaarinen operaattori
! Looginen "ei" -operaattori. Palauttaa käänteisen totuusarvon. !Tulos <= 11 /*Palauttaa true-arvon, sillä ilman operaattoria lauseke on epätosi.*/

Operaattorien suoritusjärjestys

Usein lausekkeiden evaluoinneissa nousee esille kysymys operaattorien suoritusjärjestyksestä. Esimerkiksi yksinkertaisessa kahden operaattorin lausekkeessa:

12 - 9 / 3;

Kysymys kuuluu: kumpi suoritetaan ensin, vähennys- vai jakolasku? Toisin sanoen:

(12 - 9) / 3; // tuloksena 1

//tai:

12 - (9 / 3); // tuloksena 9

Kysymys ratkaistaan antamalla operaattoreille prioriteettijärjestys (tässä pienin ensin):

  1. unaarinen negaatio (-), lisäys (++), vähennys (--)
  2. kerto-, jako- ja jakojäännöslaskut
  3. yhteen- ja vähennyslasku
  4. suhteelliset vertailuoperaattorit
  5. yhtäläisyys/erilaisuus vertailuoperaattorit
  6. loogiset operaattorit
  7. sijoitusoperaattorit

Lausekkeen evaluointi suoritetaan vasemmalta oikealle, mikäli operaattoreilla on sama prioriteettijärjestys. Kaarisuluilla taas ohitetaan prioriteetti. Esimerkiksi seuraavassa evaluoidaan lauseke jonka arvo sijoitetaan muuttujaan:

var keskiarvo = (luku1 + luku2) / 2;

Kaarisulkujen käytöllä varmistat toivotun evaluointijärjestyksen ja selkeytät koodin luettavuutta.

Osmo Saarikumpu

yksi taso ylös