JavaScript

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.

---

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ä

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.

Käyttö

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ä

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

Kommentointi

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

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

Linkittämällä ulkoinen js-tiedosto

<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

<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

<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

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

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.

Vaikutusalue

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

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

Luvut

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

Merkkijono

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.

Totuusarvot

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

true

tosi

false

epätosi

null

Arvo on "tyhjä".

undefined

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

Olio

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!

Perusolioita

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

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

Ominaisuuden määrittely

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

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

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-rakenne

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

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

Taulukon yksittäiseen muuttujaan viitataan seuraavasti:

taulukko[0]; // viittaus 0. indeksiin

Taulukon määrittely

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

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

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

\n

rivinvaihto

\t

sarkain

\'

heittomerkki (')

\"

lainausmerkki (")

\\

kenoviiva (\)

Lause

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

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

Lohko (block) on lauseiden kokonaisuus.

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

Perusoperaattorit

Aritmeettiset operaattorit

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

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

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

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

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

Ehtorakenteet

if ... else if ... else

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

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

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

for

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

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

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

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

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

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

Huomautuslaatikko

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

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

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");