Siirry sivun sisältöön Avut CSS HTML JS Wp

JavaScript-kielen alkeet - osa 1

Sisällysluettelo

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

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 vapaamuotoista 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:

• kokonaisluvut - jotka on helpointa kirjoittaa tutussa kymmenjärjestelmämuodossa (esim. 7)
• liukuluvut - joissa desimaalierottimena on piste (esim. -7.0)

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:

• \n - rivinvaihto
• \t - sarkain
• \' - heittomerkki
• \" - lainausmerkki
• \\ - kenoviiva

Totuusarvot

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

• true (tosi)
• false (epätosi)

Totuusarvoja käytetään vertailuissa.

Erikoisarvot

Muuttujilla on kaksi erikoisarvotyyppiä:

• muuttuja on tyyppiä undefined (määrittelemätön) tilanteissa, joissa muuttuja on luotu, mutta sille ei ole määritetty arvoa
• muuttuja on tyyppiä null (pätemätön) tilanteissa, joissa muuttujan arvo on epäkäypä

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.

Muuttujien nimeäminen

Muuttujien nimet (identifiers) tulee alkaa kirjaimella, alaviivalla tai dollarimerkillä ja ne saavat vielä edellisten merkkien lisäksi sisältää numeroita. Skandinaaviset kirjaimet ovat teoriassa sallittuja, mutta yhteensopivuussyistä kannattaa käyttää vain ASCII-kirjaimia (A-Z, a-z). Muuttujat kannattaa kuitenkin nimetä niin, että ne helpottavat koodin luettavuutta ja ymmärrettävyyttä.

Varatut sanat

Edellisten rajoitusten lisäksi JS käsittää joukon varattuja sanoja (reserved words), joita ei saa käyttää 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;

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;

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:

• globaali muuttuja - funktion ulkopuolella esitelty muuttuja, jonka arvo on käytettävissä ja muunneltavissa ilman rajoituksia
• lokaali muuttuja - funktion sisäpuolella esitelty muuttuja, jonka arvo on käytettävissä ja muunneltavissa ainoastaan funktiossa itsessään

Lauseet

Lause (statement) on 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 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:

• operaattorilausekkeet - yksinkertaisesti vain tuottavat tuloksen
• sijoitusoperaattorilausekkeet - sijoittavat tuloksen muuttujaan

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:

• binäärisiin operaattoreihin - laskutoimitus suoritetaan kahden operandin välillä, jolloin operandeina toimivat luvut ja/tai lukuarvon sisältävät muuttujat
• unaarisiin operaattoreihin - laskutoimitus suoritetaan yhdelle operandille, jolloin operandina toimii lukuarvon sisältävä muuttuja

Sijoitusoperaattorit

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

Vertailuoperaattorit

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

Loogiset operaattorit

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

Osmo Saarikumpu