Siirry sisältöön

JavaScript

Wikikirjastosta
PD
PD
Huomio: Tämä kirja on lisensoitu public domain - eli PD-lisenssillä. Muokatessasi tätä sivua lisensoit muokkauksesi tällä lisenssillä. Mikäli et halua tai voi hyväksyä lisenssiä älä muokkaa sivua. Lisätietoja on sivulla Wikikirjasto:Tekijänoikeudet.
Tämä kirja perustuu ECMAn suositukseen ECMAScript Language Specification 3rd edition (200-07-19)
Lisäksi käytetään Mozillan virallista JavaScript-dokumentaatiota.

Wikipedia
Wikipedia
Wikipedia-tietosanakirjassa on artikkeli aiheesta:

JavaScript (tästä eteenpäin JS) on yleinen komentosarja- eli skriptikieli. Sitä käytetään erityisesti WWWssä. JavaScript on laajennettu versio ECMAn standardoimasta ECMAScript-nimisestä komentosarjakielestä.

Ominaispiirteitä

[muokkaa | muokkaa wikitekstiä]

JS oliopohjainen komentokieli. JS-tiedostoa kutsutaan skriptiksi, koska sen koodia ei erikseen käännetä (compilation) omaksi ohjelmakseen ennen suorittamista vaan se tulkitaan (interpretation). JS tarvitsee toimiakseen isäntäympäristön, jonka JS-tulkki suorittaa koodin rivi kerrallaan. JS on käyttöjärjestelmäriippumattomaton ja sen syntaksi on varsin yksinkertainen ja vapaamuotoinen.

Tyypillinen käyttökohde on toiminnallisuuden lisääminen HTML-sivuihin. Tällöin isäntäohjelma on WWW-selain (tästedes puhutaan selaimesta). JS:llä tehdään niin selainskriptejä (client-side scripting) kuin palvelinskriptejä (server-side scripting).

Perussääntöjä

[muokkaa | muokkaa wikitekstiä]
  • Se mikä voidaan tehdä merkkauskielellä tulisi tehdä merkkauskielellä.
  • JS on case-sensitive eli a on eri asia kuin A.
  • JS ohittaa ylimääräiset välilyönnit:
nimi="Herne";
nimi = "Herne";
toimivat identtisesti.

JS-tulkki ohittaa kaikki kommentit. Kommentoinnilla voidaan estää siten myös koodin toimintaan. Yksirivinen kommentti alkaa kahdella kauttaviivalla (//) ja päättyy automaattisesti rivin loppuun.

//yksirivinen kommentti

yksirivinen kommentti voidaan lisätä myös koodia sisältävän rivin loppuun:

window.alert('Hei maailma!'); //yksirivinen kommentti

Monirivinen kommentti sijoitetaan kauttaviiva-asteriski ja asteriski-kauttaviiva (/* ja */) -merkkiyhdistelmien väliin.

/* Monirivinen kommentti alkaa
   kauttaviiva-asteriski -yhdistelmällä ja
   päättyy asteriski-kauttaviiva -yhdistelmään.  */
/*************************************
 * Tälläisellä lisämuotoilulla voidaan
 * helpottaa kommenttien lukemista
 * ja nostaa esille tärkeitä tietoja.
 *************************************/

JSn lisääminen XHTML-tiedostoon

[muokkaa | muokkaa wikitekstiä]

Skriptejä voidaan sijoittaa joko head- tai body-elementtiin tai molempiin.

Linkittämällä ulkoinen js-tiedosto

[muokkaa | muokkaa wikitekstiä]
<script
 type="text/javascript"
 charset="iso-8859-1"
 src="javaskripti.js">
</script>

missä

<script
avaa skriptien tuontiin tarkoitetun script-elementin
type="text/javascript"
määrittelee tuotavaksi JS-skriptin
charset="iso-8859-1"
määrittelee skriptin merkistöksi iso-8859-1:n
src="heips.js"
määrittää JS-skriptin sijainnin ja nimen

Elementille ei anneta sisältöä.

</script>
sulkee skriptin tuonnin

Upottamalla JS-koodin XHTML-tiedostoon

[muokkaa | muokkaa wikitekstiä]
<script type="text/javascript" xml:space="preserve">
//<![CDATA[ merkataan koodi XHTML-yhteensopivaksi

window.alert('Hei maailma!');

// CDATA-merkintä loppuu!]]>
</script>

missä:

<script type="text/javascript" xml:space="preserve">
avaa skriptin. Pakollinen type-attribuutti määrittelee tässä annettavaksi JS-skriptin. xml:space-attribuutin arvo "preserve" pyytää XML-ohjelmia säilyttämään koodissa tyhjän tilan.
//<![CDATA[
merkitsee skripti-koodin XHTML-yhteensopivaksi
window.alert('Hei maailma!');
on yksinkertainen JS-ohjelma ja

window.alert

on eräs yksittäinen JS-komento
// !]]>
CDATA-merkintä loppuu
</script>
päättää skriptin

Upottamalla koodi tapahtuma-attribuuttiin

[muokkaa | muokkaa wikitekstiä]
<p onclick="window.alert('Hei maailma!');">
Tämä on esimerkkikoodi elementistä,
johon on yhdistetty tapahtuma-attribuutti.</p>
<p onclick="window.alert('Hei maailma!');">
aloittaa p-elementin ja määrittelee sille toiminta-attribuutin onclick ja toiminta-attribuutille JS-koodin window.alert('Hei maailma!'); suoritettavaksi

Muuttuja (variable) on ohjelmoijan nimittämä tiedon tallennuspaikka. Muuttujalla on nimi ja se sisältää arvon, joka voi olla numero, merkkijono, tauluko tai olio. Muuttujan nimellä (identifiers) on seuraavat vaatimukset:

  • yhteensopivuussyistä saa sisältää vain ASCII-kirjaimia (A-Z, a-z) ja numeroita (0-9).
  • tulee alkaa kirjaimella tai alaviivalla (_).
  • ei saa olla varattu sana eli avainsana

Muuttujat kannattaa nimetä niin, että se helpottaa koodin luettavuutta ja ymmärrettävyyttä. Standardissa JavaScriptissä muuttujilla ei ole niihin kiinnitettyä tyyppiä, joten mikä tahansa arvo voidaan tallentaa mihin tahansa muuttujaan. Koska nimi ei saa sisältää välilyöntiä (lasketaan merkiksi) merkitään sanayhdistelmät yleensä siten että uusisana on versaalilla tai siten että sanojen välissä on alaviiva eli sanaYhdistelma tai sana_yhdistelma.

Muuttujien esittely ja alustaminen

[muokkaa | muokkaa wikitekstiä]

JS-muuttujat esitellään (luodaan) (declare) var-avainsanalla (variable). Avainsanan käyttö ei aina ole pakollista, mutta se on aina sallittua ja suositeltavaa. Huomioitavaa on, että jos var-avainsanaa ei käytetä, muuttuja on aina globaali.

//esitellään muuttuja nimeltä puuttuja
var puuttuja;

JS sallii muuttujien alustamisen niiden esittelyn yhteydessä. Alustaminen tarkoittaa arvon sijoittamista muuttujaan:

//esitellään muuttuja nimeltä puuttuja ja alustetaan sen arvoksi 0
var puuttuja = 0;
//esitellään muuttuja nimeltä puuttuja ja alustetaan sen arvoksi "teksti"
var puuttuja = "teksti";

Tekstiä sisältävä arvo tulee laittaa aina lainausmerkkeihin.

Muuttujien vaikutusalue riippuus siitä missä ne julistetaan. 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 var-avainsanalla esitelty muuttuja, jonka arvo on käytettävissä ja muunneltavissa ainoastaan kyseisen funktion sisällä.
x = 0; // globaali muuttuja, ei-suositeltava tapa
var y = 'Hei!'; // toinen globaali muuttuja, suositeltava tapa
 
function f(){
  var z = 'Näkemiin!'; // lokaali muuttuja
  tusina = 12; // globaali muuttuja, koska var-avainsanaa ei käytetty
}
// z-muuttuja ei enää ole käytettävissä, mutta x, y, ja tusina ovat

Varatut sanat eli avainsanat

[muokkaa | muokkaa wikitekstiä]

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.

JSn 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

Perustietotyypit

[muokkaa | muokkaa wikitekstiä]

Luvut (numbers) merkitään koodiin sellaisenaan. Kaikki luvut ovat IEEE-754 -standardin mukaisia liukulukuja.

Merkkijono (string) on kirjaimia sisältävä merkkirimpsu tai sellaiseksi merkitty numerorimpsu. Se merkitään lainausmerkeillä.

"Tämä on merkkijono."
teksti merkkijonona
"2"
numerokin voidaan merkitä merkkijonoksi
""
tyhjä merkkijono (zero-length string)
'merkkijono'
myös heittomerkkejä voidaan käyttää

Merkkijonoa voidaan käsitellä osin taulukkona eli sen kutakin merkkiä indeksoituna elementtinä käyttäen charAt() -metodilla.

var puuttuja = "Painos"; // määritellään muuttuja nimeltä puuttuja ja annetaan sille arvoksi "Painos"
var kirjain = puuttuja.charAt(0); // määritellään muuttuja kirjain ja annetaan sille arvoksi puuttuja-muuttujan 0. kirjain eli P

Muokkaaminen ei kuitenkaan ole mahdollista merkki kerrallaan.

Totuusarvoja (Boolean) käytetään vertailuoperaattoreissa. Niitä on kaksi:

true
tosi
false
epätosi

Arvo on "tyhjä".

Arvo on "määrittelemätön".

Olio (object) on rakenne, joka muodostuu ominaisuuksista (properties) ja metodeista (methods).

Ominaisuus on olioon liittyvä yksinkertainen muuttuja tai toinen olio.

var teksti="Hei maailma!"; // määritellään muuttujalle teksti arvoksi merkkijono-olio Hei maailma!
document.write(teksti.length); // tulostetaan teksti-muuttujan merkkijono-olion pituus

Edellisen tulos olisi 12.

Metodi on oliolle suoritettava funktio.

var teksti="Hei maailma!"; // määritellään muuttujalle teksti arvoksi merkkijono-olio Hei maailma!
document.write(teksti.toUpperCase()); //tulostetaan teksti-muuttujan arvo merkkijono-olio versaaliksi

Tulos olisi HEI MAAILMA!

JSn valmiiksi määriteltyjä perusolioita ovat:

String
merkkijono
Date
päiväys
Array
taulukko
Boolean
totuusarvo
Math
mahdollistaa peruslaskentaoperaatioita
ei tarvitse määritellä ennen käyttöä
RegExp
määrittää mitä etsitään tekstistä

Olion käyttäminen

[muokkaa | muokkaa wikitekstiä]

Olion yksittäiseen ominaisuuteen viitataan seuraavasti:

olio.ominaisuus

Olion yksittäiseen ominaisuuteen asetetaan arvo ja jos ominaisuutta ei aiemmin ollut samalla luodaan olioon uusi ominaisuus seuraavasti:

olio.ominaisuus = "arvo";
// tai vastaavalla syntaksilla kuin taulukoissa
olio["ominaisuus"] = "arvo";

Olion määrittely

[muokkaa | muokkaa wikitekstiä]

Ominaisuuden määrittely

[muokkaa | muokkaa wikitekstiä]

Oliomäärittelyllä (initialiser) oliolle annetaan määrittelyn yhteydessä myös arvot:

henkilo = {
  etunimi: "Matti", sukunimi: "Meikäläinen",
  osoite: { katuosoite: "Kuja 1", postinumero: 12345 }
}

henkilo on määriteltävä olio, etunimi, sukunimi ovat ominaisuuksia ja niillä on arvot "Matti" ja "Meikäläinen". osoite on henkilo-olion aliolio ja sillä on ominaisuudet katuosoite ja postinumero, ja niillä on arvot "Kuja 1" ja 12345.

Konstruktorilla (constructor) luodaan ensin olio, jolle sitten luodaan yksittäisiä instansseja (instance). Instanssi luodaan avainsanalla new.

// osoitteen konstruktori
function osoite(katuosoite, postinumero) {
  this.katuosoite = katuosoite;
  this.postinumero = postinumero;
}
 
// henkilön konstruktori
function henkilo(etunimi, sukunimi, osoite) {
  this.etunimi = etunimi;
  this.sukunimi = sukunimi;
  this.osoite = osoite;
}
 
// määritellään instanssi osoite-oliolle
var meikalainen_osoite = new osoite("Kuja 1", 12345);
// määritellään instanssi henkilo, jossa käytetään myös instanssia meikalainen_osoite
var matti = new henkilo("Matti", "Meikäläinen", meikalainen_osoite);
var teija = new henkilo("Teija", "Meikäläinen o.s. Teikäläinen", meikalainen_osoite); /*samalle oliolle voidaan nyt
luoda useampia instansseja*/

Metodin määrittely

[muokkaa | muokkaa wikitekstiä]

Metodi asetetaan oliolle tarkalleen samalla syntaksilla kuin ominaisuuskin. Aluksi määritellään metodin toteuttava funktio. Metodi sijoitetaan sitten olioon joko suoraan tai konstruktorin sisällä. Avainsana this ilmoittaa että kyseessä on olion ominaisuus ei pelkästään kyseisen funktion muuttuja.

Luodaan metodeina käytettävät funktiot:

// henkilo-olion muuntaminen yhdeksi merkkijonoksi
function henkilo_merkkijonoksi() {
  var henkilo = this.etunimi + " " + this.sukunimi;
  return henkilo;
}
// osoite-olion muuntaminen yhdeksi merkkijonoksi
function osoite_merkkijonoksi() {
  var osoite = this.katuosoite + ", " + this.postinumero;
  return osoite;
}

Luodaan oliot:

// osoitteen rakenninfunktio
function osoite(katuosoite, postinumero) {
  this.katuosoite = katuosoite;
  this.postinumero = postinumero;
  this.merkkijonoksi = osoite_merkkijonoksi; // metodin sijoitus olioon
}
// henkilön rakenninfunktio
function henkilo(etunimi, sukunimi, osoite) {
  this.etunimi = etunimi;
  this.sukunimi = sukunimi;
  this.osoite = osoite;
  this.merkkijonoksi = henkilo_merkkijonoksi; // metodin sijoitus olioon
}

Instanssien määrittely:

// määritellään instanssi osoite-oliolle
var meikalainen_osoite = new osoite("Kuja 1", 12345);
// määritellään instanssi matti, jossa käytetään myös instanssia meikalainen_osoite
var matti = new henkilo("Matti", "Meikäläinen", meikalainen_osoite);

Metodin käyttöesimerkki:

document.write(matti.merkkijonoksi() + "<br />" + matti.osoite.merkkijonoksi());

tuottaisi

Matti Meikäläinen
Kuja 1, 12345

Olion tuhoaminen

[muokkaa | muokkaa wikitekstiä]

Olio tuhotaan avainsanalla delete:

delete olio;

Tuhoaminen jättää jälkeen muuttujan olio, jonka arvo on undefined eli on kuin sitä ei olisi ollutkaan.

with-rakenteella voi lyhentää koodia, jos peräkkäin käytetään paljon saman olion ominaisuuksia ja metodeja.

with (olio) {
  lause;
}

Esimerkki:

var ala, tilavuus;
var r = 10;
  with (Math) {
    ala = PI * r * r;
    tilavuus = (4 / 3) * PI * r * r * r;
    document.write(round(ala) + "<br />");
    document.write(round(tilavuus));
  }

Ilman with-rakennetta jokaiseen PI- ja round-kutsuun tulisi laittaa alkuun "Math.".

Taulukko (array) on tietorakenne, jossa on useita muuttujia indeksoituna eli se on kokoelma muuttujia. JS:ssä indeksointi alkaa nollasta ja sitä seuraa 1 jne. Taulukko on myös olio.

Taulukkoon viittaaminen

[muokkaa | muokkaa wikitekstiä]

Taulukon yksittäiseen muuttujaan viitataan seuraavasti:

taulukko[0]; // viittaus 0. indeksiin

Taulukon määrittely

[muokkaa | muokkaa wikitekstiä]

Taulukon määrittelyssä muuttujan arvoksi annetaan array-olion instanssi. Taulukon määrittelyyn on useita tapoja:

//new-avainsanalla
var taulukko = new Array(arvo0,arvo1,arvo2,arvo3); // taulukko, jonka pituus on 4 ja jossa on 4 muuttujaa
//new-avainsanalla tyhjä taulukko
var taulukko = new Array(4);         // tyhjä taulukko, jonka pituus on 4
//new-avainsanalla muuttuja kerralla
var mycars = new Array(3); 
mycars[0]="arvo0";
mycars[1]="arvo1";
mycars[2]="arvo2";
mycars[3]="arvo3";
// []-notaatiolla
var taulukko = [arvo0,arvo1,arvo2,arvo3]

Jos muuttuja jätetään määrittelemättä se saa arvoksi undefined.

// []-notaatiolla
var taulukko = [arvo0,,arvo2,arvo3] //1. muuttuja saa arvoksi undefined

Vain määritellyt alkiot käyttävät muistia. Antamalla taulukko[10] = 'jotain' ja taulukko[57] = 'jotainmuuta' käyttää muistia vain näille kahdelle elementille, vaikka taulukon pituus on silti 58.

Taulukkoon voi määritellä myös moniulotteista dataa.

var kissat = [
  { vari: "ruskea", koko: "suuri" }, // 0. indeksi
  { vari: "musta", koko: "pieni" } // 1. indeksi
];
console.log(kissat[0]["koko"]); // tulostaa konsoliin "suuri"

Funktio (function) on nimetty koodilohko, joka suoritetaan vain sitä kutsuttaessa eli se on aliohjelma.

Funktio muodostetaan seuraavasti:

function nimi(parametri1, parametri2, ..., parametriN) {
  koodi;
}
nimi
on funktion nimi, jolla sitä kutsutaan
parametri1, parametri2, ..., parametriN
ovat funktion parametreja

Funktiota kutsutaan seuraavasti:

funktio() // funktio, joka ei saa parametreja
nimi(parametri1, parametri2) // funktio, joka saa kaksi parametria

Mikäli funktion halutaan palauttavan jotain, tulee käyttää return-lausetta

function tulo(a, b) {
  x = a * b;
  return x;
}

Em. funktion palautus saadaan seuraavasti:

kertolaskunTulos = tulo(2, 3); // kertolaskunTulos-muuttuja saa arvokseen tulo-funktion palauttaman arvon (tässä tapauksessa 6)

Erikoismerkit

[muokkaa | muokkaa wikitekstiä]

Erikoismerkkejä käytetään esimerkiksi XHTML-koodin kanssa mahdollisissa ristiriitatilanteissa.

\n
rivinvaihto
\t
sarkain
\'
heittomerkki (')
\"
lainausmerkki (")
\\
kenoviiva (\)

Lause (statement) JSssä on käsky selaimelle suorittaa jokin toiminto. Se on muotoa:

window.alert("Hei maailma!");

missä

window.alert
on JS-komento, tarkemmin window-olion alert-metodi
"Hei maailma!"
on komennon arvo
;
on lauseen päättävä merkki

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

  • operaattorilauseke tuottaa jonkin tuloksen
  • sijoitusoperaattorilauseke sijoittaa tuloksen muuttujaan
1 + 2      // operaattorilauseke tuottaa tuloksen 3
summa=1+2 // sijoitusoperaattorilauseke sijoittaa tuloksen muuttujaan

Myös lauseke on lause.

Lohko (block) on lauseiden kokonaisuus.

{
window.alert("1.");
window.alert("2.");
window.alert("ja 3. kerta.");
}

Perusoperaattorit

[muokkaa | muokkaa wikitekstiä]

Aritmeettiset operaattorit

[muokkaa | muokkaa wikitekstiä]

Aritmeettisillä operaattoreilla suoritetaan aritmeettisiä operaatioita muuttujia ja/tai arvojen välillä. Lisäksi +-operaattorilla voidaan yhdistää merkkijonoja.

Aritmeettiset operaattorit
Operaattori Kuvaus Esimerkki, kun y = 5
Merkintä Tulos
+ Lisäys x=y+2 x=7
- Vähennys x=y-2 x=3
* Kerto x=y*2 x=10
/ Jako x=y/2 x=2.5
% Jakojäännös x=y%2 x=1
++ Lisäys x=++y x=6
-- Vähennys x=--y x=4

Sijoitusperaattorit

[muokkaa | muokkaa wikitekstiä]

Sijoitusoperaattoreilla sijoitetaan muuttujiin arvoja.

Sijoitusoperaattorit
Operaattori Esimerkki, kun x = 10 ja y = 5
Merkintä Vastaava merkintä Tulos
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

Vertailuoperaattorit

[muokkaa | muokkaa wikitekstiä]

Vertailuoperaattoreilla vertaillaan muuttujien ja arvojen yhtäläisyyttä ja eroavuutta.

Vertailuoperaattorit
Operaattori Kuvaus Esimerkki, kun x = 5
Merkintä Tulos
== on yhtäkuin x==8 epätosi
=== on täsmälleen yhtä kuin (arvo ja tyyppi samat) x===5 tosi
x==="5" epätosi
!= ei ole yhtä kuin x!=8 tosi
> on suurempi kuin x>8 epätosi
< on pienempi kuin x<8 tosi
>= on suurempi tai yhtä suuri kuin x>=8 epätosi
<= on vähemmän tai yhtä suuri kuin x<=8 tosi

Loogiset operaattorit

[muokkaa | muokkaa wikitekstiä]

Loogisilla operaattoreilla voidaan yhdistää vertailuja.

Loogiset operaattorit
Operaattori Kuvaus Esimerkki, kun x=6 ja y=3
Merkintä Tulos
&& ja x < 10 && y > 1 tosi
|| tai x==5 || y==5 epätosi
! ei !(x==y) tosi

Ehdollinen operaattori

[muokkaa | muokkaa wikitekstiä]

Ehdollisella operaattorilla voidaan määrittää muuttujalle arvo tietyn ehdon mukaan muodossa:

puuttuja=(ehto)?ehtotosi:ehtoepatosi;

missä

puuttuja
on määriteltävä muuttuja
ehto
on vertailulauseke
ehtotosi
ehtoepatosi

Ohjainrakenteet

[muokkaa | muokkaa wikitekstiä]

Ehtorakenteet

[muokkaa | muokkaa wikitekstiä]

if ... else if ... else

[muokkaa | muokkaa wikitekstiä]

if toistaa koodin mikäli ehto toteutuu.

if (ehto) {
  lause1
} else if (ehto2) {
  lause2
} else {
  lause3
}

else if ei ole pakollinen, kuten ei myöskään else. else if-lauseita voi olla myös useita.

Esimerkki:

var lampotila = 24;
if (lampotila >= 25) {
  document.write("Onpa kuuma!");
} else if (lampotila >= 15) {
  document.write("Sopivan lämmintä!");
} else if (lampotila >= 0) {
  document.write("No, ei ole ainakaan pakkasta.");
} else {
  document.write("Kannattaa pukeutua lämpimästi!");
}

switch toistaa annetuista vaihtoehtoisista koodeista sen, jolle annettu tunnus täsmää lausekkeen kanssa. break-avainsanaa tarvitaan katkaisemaan koodin suorittaminen, sillä muuten koodin suoritus jatkuisi oikeasta arvosta loppuun saakka.

switch (lauseke) {
  case arvo1:
    lause1;
    break;
  case arvo2:
    lause2;
    break;
  ...
  default:
    oletuslause;
}

Esimerkki:

var luku = 3;
switch (luku) {
  case 1:
    document.write("Luku on 1 eikä 2 tai jotain muuta.");
    break;
  case 2:
    document.write("Luku on 2 eikä 1 tai jotain muuta.");
    break;
  default:
    document.write("Luku ei ole 1 eikä 2 vaan jotain muuta.");
}

Toistorakenteet

[muokkaa | muokkaa wikitekstiä]

break-avainsana katkaisee silmukan suorittamisen. continue-avainsana katkaisee meneillään olevan silmukan ja jatkaa seuraavasta arvosta.

for toistaa koodia niin pitkään kuin ehto toteutuu. for-rakenteella koodia voidaan toistaa haluttu määrä kertoja.

for (alustus; ehto; jatko) {
  lause;
}

Esimerkki:

for (i = 0; i < 4; i++) {
  document.write(i);
}

while toistaa koodia niin pitkään kuin ehto on voimassa.

while (ehto) {
  lause;
}

Esimerkki:

var i=0;
while (i<=4) {
  document.write(i);
  i=i+1;
}

do while toistaa ensin koodin kerran ja sitten niin pitkään kuin ehto on voimassa

do {
  lause;
}

while (ehto)

Esimerkki:

var i = 0;
do {
  document.write(i);
  i = i + 1;
}
while (i < 0);

for in rakenteella voidaan käydä läpi taulukon tai olion muuttujia.

for (muuttuja in olio) {
  lause;
}

Esimerkki:

var merkit = [];
merkit[0] = "Asteriski";
merkit[1] = "Heittomerkki";
merkit[2] = "Lainausmerkki";

for (x in merkit) {
  document.write(merkit[x] + "<br />");
}

forEach toimii taulukoille samalla tavalla kuin for ... in.

Esimerkki:

var arvosanat = [2, 3, 4, 1, 5, 4, 3];
arvosanat.forEach(arvosana => {
  document.write(arvosana + "\n");
});

Ponnahduslaatikot

[muokkaa | muokkaa wikitekstiä]

Ponnahduslaatikko on sivua ladattaessa tai toiminnolla ruudulle tulostettava laatikko, joka pysäyttää koodin suorittamisen kunnes käyttäjä kuittaa sen.

Huomautuslaatikko

[muokkaa | muokkaa wikitekstiä]

Huomautuslaatikko (alert box) vaatii käyttäjän kuittauksen eli "OK"-painikkeen klikkauksen. Sitä käytetään huomauttamaan käyttäjää jostain asiasta.

alert("sometext");

Vahvistuslaatikko

[muokkaa | muokkaa wikitekstiä]

Vahvistuslaatikko (confirm box) vaatii käyttäjän kuittauksen, joka hyväksynnän ("OK") tai hylkäämisen ("Cancel"). Sitä käytetään, kun halutaan käyttäjältä vastauksena joko kyllä tai ei. "OK" palauttaa arvon true ja "Cancel" arvon false.

confirm("sometext");

Kyselylaatikko

[muokkaa | muokkaa wikitekstiä]

Kyselylaatikko (prompt box) pyytää käyttäjää syöttämää merkkejä ja hyväksymään tai hylkäämään sen. Sitä käytetään kun käyttäjältä halutaan jotain tietoa. Kyselylaatikossa on painikkeet "OK" ja "Cancel". "OK" palauttaa syötetyn merkkijonon ja "Cancel" arvon null.

prompt("sometext","oletusarvo");