Opasarkisto: JavaScript-perusopas: Osa 2 - Muuttujat ja taulukot

Ohjelman suorituksen aikana on usein tarve tallentaa erilaista tietoa muistiin. Esimerkiksi laskutoimituksen tulos tai lomakkeen tekstikentän sisältö on saatava talteen jatkokäsittelyä varten. Tällaiset tiedot sijoitetaan ohjelmointikielissä muuttujiin, joihin viitataan yksilöllisellä nimellä. Jos taas on tallennettava useita toisiinsa liittyviä arvoja, voidaan käyttää taulukoita. Taulukossa saman nimen alle sijoitetaan useita arvoja, joihin viitataan indekseillä. JavaScriptissä uusi muuttuja luodaan komennolla var ja taulukko komennolla new Array().

Muuttujan määritteleminen

Seuraavassa esimerkissä määritellään muutamia muuttujia. Muuttujaan voi sijoittaa haluamansa alkuarvon suoraan määrittelyn yhteydessä (muuttujan alustaminen) tai sen voi tehdä vasta myöhemmin koodissa.

Muuttujaan sijoitetaan arvo JavaScriptin sijoitusoperaattorilla yhtäsuuruusmerkillä =.

// Määritellään uusi muuttuja nimeltä "auto":
var auto;

// Määritellään ika-muuttuja ja annetaan sille arvoksi 21:
var ika = 21;

// Määritellään nimi-muuttuja ja sijoitetaan siihen merkkijono "Erkki":
var nimi = "Erkki";

// Sijoitetaan aiemmin määriteltyyn muuttujaan merkkijono "Volvo":
auto = "Volvo";

JavaScriptissä ohjelmoijan ei tarvitse huolehtia muuttujien tyypeistä. Muuttujan tyyppi määräytyy siihen sijoitettavan tiedon mukaan. Jos muuttujaan sijoitetaan luku 21, tulee muuttujan tyypiksi lukumuuttuja Number (paitsi jos luku on lainausmerkeissä). Sen sijaan lainausmerkeissä oleva teksti "Erkki" tekee muuttujasta merkkijonomuuttujan String. Jos lukumuuttujaan sijoitetaan merkkijono, muuttuu muuttujan tyyppi automaattisesti merkkijonomuuttujaksi.

Alla vielä esimerkkejä erityyppisistä muuttujista.

// Lukumuuttuja Number:
var luku = 14;

// Toinen Number-tyyppinen muuttuja:
var luku2 = 1.5;

// Merkkijonomuuttuja String:
var teksti = "Jotain tekstiä";

// Myös tämä on merkkijonomuuttuja:
var numero = "165";

Muuttujan nimi voi sisältää kirjaimia a...z, A...Z ja numeroita 0...9, mutta nimi ei saa alkaa numerolla. Nimissä voi käyttää dollarimerkkiä ($) sekä alaviivaa, ja ne voivat alkaa alaviivalla. Isot ja pienet kirjaimet tulkitaan eri merkeiksi. Nimi ei myöskään saa olla JavaScriptin varattu sana, esimerkiksi for, while tai if.

Tyyppimuunnokset

Muuttujan tyyppiä voi muuttaa kahden funktion avulla. Muunnos merkkijonosta luvuksi onnistuu Number-funktiolla, jolle viedään parametrina muunnettava merkkijono tai muuttuja. Parametri-käsite tulee tutuksi funktioista kertovassa oppaassa. Muunnos luvusta merkkijonoksi tapahtuu String-funktiolla, jolle viedään parametrina muunnettava lukuarvo.

// Tämä muuttuja on merkkijonomuuttuja, koska arvo on lainausmerkeissä:
var numero = "21";

// Muunnetaan merkkijonomuuttuja lukumuuttujaksi:
numero = Number(numero);

// Tämä muuttuja on lukumuuttuja:
var luku = 28;

// Muunnetaan se merkkijonomuuttujaksi:
luku = String(luku);

Muuttujan tyypin saa selville typeof-funktiolla.

var luku = 45;
document.write(typeof(luku));	// Tulostaa "number"

var nimi = "Pekka";
document.write(typeof(nimi));	// Tulostaa "string"

Lukumuuttuja palauttaa arvon "number", merkkijonomuuttuja arvon "string" ja taulukko arvon "object".

Muuttujien tulostaminen

Muuttujan sisältämän arvon voi tulostaa helpoimmillaan näin:

// Määritellään muuttuja luku ja annetaan arvoksi 20:
var luku = 20;

// Tulostetaan luku-muuttujan arvo (20):
document.write(luku);

Muuttujia yhdistellään plus (+)-operaattorilla. Näin muuttujien arvoja voidaan tulostaa merkkijonojen väliin. document.write-metodin yhteydessä merkkijonoja ja muuttujia voidaan yhdistellä myös kirjoittamalla ne peräkkäin pilkuin erotettuna.

var ika = 24;
var nimi = "Su" + "vi";

document.write("Naisen nimi on " + nimi + " ja hän on " + ika + " vuotta vanha.");

var auto = "BMW";
var vari = "punainen";

document.write("Hänellä on ", auto, "-merkkinen auto joka on väriltään ", vari, ".");

Peruslaskutoimitusten tekeminen

Peruslaskutoimitukset onnistuvat helposti käyttämällä + (yhteen), - (vähennys), * (kerto), / (jako) ja % (jakojäännös) -laskutoimituksia. Monimutkaisempia laskutoimituksia varten JavaScriptissä on Math-olio.

Seuraavassa on muutama esimerkki edellä mainituista laskutoimituksista luvuilla ja muuttujilla. Tarvittaessa laskujärjestyksen muuttamiseen voi käyttää sulkuja.

var luku1 = 5;
var luku2 = 8;
var tulos;

// Yhteenlasku:
tulos = 17 + 3;		// tulos = 20
tulos = luku1 + luku2;	// tulos = 13

// Vähennyslasku:
tulos = 48 - 19;	// tulos = 29
tulos = luku2 - luku1;	// tulos = 3

// Kertolasku:
tulos = 5 * 6;		// tulos = 30
tulos = luku1 * luku2;	// tulos = 40

// Jakolasku:
tulos = 10 / 2;		// tulos = 5;
tulos = luku2 / luku1;	// tulos = 2,666...

// Jakojäännös:
tulos = 10 % 5;		// tulos = 0;
tulos = luku2 % luku1;	// tulos = 3

Varsinkin silmukkarakenteissa täytyy usein lisätä tai vähentää muuttujan arvoa yhdellä jokaisella silmukan kierroksella. Tämä tapahtuu helposti seuraavanlaisten operaattoreiden avulla.

var i = 5;

// Lisätään i-muuttujan arvoa yhdellä:
i++;

// Vähennetään i-muuttujan arvoa yhdellä:
i--;

Silmukkarakenteet käydään läpi opassarjan myöhemmissä osissa. Alla vielä pieni esimerkki edellisten operaattoreiden käytöstä.

var a = 2;
var b = 5;

// Lisätään a:n arvoa yhdellä:
a++;

// Vähennetään b:n arvoa yhdellä:
b--;

document.write("Operaattorin käytön jälkeen a on " + a + " ja b on " + b); //a = 3, b = 4

Muuttujan näkyvyysalue

Muuttujan näkyvyysalueella tarkoitetaan koodin osaa, josta käsin muuttujaan voidaan viitata, toisin sanoen lukea sen arvo tai muuttaa sitä. Jos muuttuja määritellään koodilohkon sisällä, sitä kutsutaan paikalliseksi muuttujaksi. Paikallisen muuttujan näkyvyysalue on lohko, jossa se on määritelty. Koodilohko rajataan aaltosuluilla ({ ja }).

Muuttuja, joka määritellään koodilohkojen ulkopuolella, on käytössä missä tahansa kohtaa koodissa, ja sitä kutsutaan globaaliksi muuttujaksi.

Seuraavassa esimerkissä on määritelty oma Nayta-funktio selventämään paikallisen muuttujan näkyvyysaluetta. Funktioista on tulossa myöhemmin kokonaan oma opas.

// Määritellään globaali muuttuja luku_1:
var luku_1 = 17;

function Nayta()
{
	// Tässä määritellään kaksi paikallista muuttujaa:
	var luku_2 = 14;
	var luku_3 = 57;

	// Onnistuu, muuttuja on globaali:
	document.write(luku_1);
}

// Ei onnistu, muuttuja on paikallinen:
document.write(luku_2);

Merkkijonon pituuden määrittäminen

Merkkijonoja käsitellään String-olioiden avulla. String-olion ominaisuuden length avulla saadaan selville merkkijonon pituus.

var merkkijono = "JavaScript-ohjelmointia";
var pituus = 0;

pituus = merkkijono.length;

document.write("Merkkijonon pituus on ", pituus);

Ominaisuus length erotetaan merkkijonomuuttujasta pisteellä (.). Merkkijonon pituus sijoitetaan pituus-muuttujaan ja tulostetaan selaimeen tutulla tavalla.

Myöhemmin on tulossa lisää esimerkkejä merkkijonojen käsittelystä. Samoin olioita käydään läpi tarkemmin vasta tulevissa oppaissa.

Taulukot

Taulukot ovat tapa tallentaa useita toisiinsa liittyviä muuttujia saman nimen alle. Tieto tallentuu taulukossa soluihin, joihin viitataan indekseillä. Ensimmäisen solun indeksi on 0. Uusi taulukko luodaan new Array()-komennolla. Ensiksi perehdymme yksiulotteisen taulukon luomiseen ja käyttöön.

// Luodaan uusi taulukko "nimet":
var nimet = new Array();

// Sijoitetaan ensimmäiseen soluun merkkijono "Suvi":
nimet[0] = "Suvi";

// Ja toiseen soluun "Heikki":
nimet[1] = "Heikki";

// Taulukkoon voi lisätä nimiä haluamansa määrän...
nimet[2] = "Katja";

Nyt meillä on nimet-niminen taulukko, jossa on kolme solua indekseillä 0...2. Kuhunkin soluun on sijoitettu merkkijono. Halutun tiedon tulostaminen tapahtuu viittaamalla siihen indeksillä.

// Suvi:
document.write(nimet[0]);

// Heikki:
document.write(nimet[1]);

// Katja, voidaan käyttää myös laskutoimituksia indeksissä:
document.write(nimet[5-3]);

// Indeksinä voi olla tietysti myös muuttuja:
var indeksi = 2;
document.write(nimet[indeksi]);

Taulukkoon voidaan sijoittaa arvot tarvittaessa heti luontivaiheessa, jolloin ne saavat automaattisesti indeksit nollasta ylöspäin. Taulukon koon (solujen määrän) saa selville length-ominaisuudella.

// Sijoitetaan arvot taulukkoon samalla kun luomme sen:
var kaupungit = new Array("Helsinki", "Tampere", "Vantaa", "Kuopio");

// Tulostetaan Vantaa:
document.write(kaupungit[2]);

// Sijoitetaan Tampere muuttujaan "city":
var city = kaupungit[1];

// Muutetaan Kuopio Jyväskyläksi:
kaupungit[3] = "Jyväskylä";

// Selvitetään taulukon koko:
var koko = kaupungit.length;

document.write("Taulukossa on " + koko + " solua.");

Taulukon koon voi määrittää luontivaiheessa syntaksilla var taulukko = new Array(8). Tämä luo kahdeksansoluisen taulukon, jonka indeksit menevät 0...7. Taulukon voi määritellä myös ilman new Array()-komentoa:

var taulukko = ["Rovaniemi", "Kokkola", "Tampere"];

Kannattaa myös huomata, että toisinaan yksiulotteisista taulukoista käytetään nimitystä vektori. Kyse on kuitenkin samasta asiasta.

Assosiatiiviset taulukot

Taulukon soluun on mahdollista viitata myös merkkijonotyyppisellä indeksillä. Tällöin puhutaan assosiatiivisesta taulukosta. Seuraavassa skriptissä on sijoitettu assosiatiiviseen taulukkoon maiden pääkaupunkien nimiä, joihin viitataan maiden nimillä. Assosiatiivista taulukkoa voi käyttää myös, mikäli haluaa indeksinumeroinnin menevän "0, 1, 2...n" sijasta vaikkapa "18, 60, 100".

var maat = {Suomi: "Helsinki", Ruotsi: "Tukholma", Ranska: "Pariisi"};

document.write("Ranskan pääkaupunki on " + maat["Ranska"]);

var lukuja = {18: "kahdeksantoista", 60: "kuusikymmentä", 100: "sata"};

document.write("Täysi-ikisyyden raja on " + lukuja[18] + " vuotta");

Opassarjan neljännessa osassa perehdytään komentorakenteisiin, joihin kuuluvan for-in-silmukan avulla assosiatiivisen taulukon tiedot pystyy käymään helposti läpi.

Moniulotteiset taulukot

Yksiulotteisilla taulukoilla on vain yksi ulottuvuus, johon viitataan indeksinumerolla. Yksiulotteisessa taulukossa voi siis ajatella olevan useita sarakkeita, mutta vain yksi rivi (KUVA 1). Moniulotteisilla taulukoilla puolestaan on useita ulottuvuuksia, joihin viitataan niiden omilla indekseillä. Esimerkiksi kaksiulotteisen taulukon voidaan ajatella koostuvan useasta rivistä ja sarakkeesta. Toisella indeksillä viitataan riveihin ja toisella sarakkeisiin (KUVA 2).

Seuraavassa skriptissä luodaan kaksiulotteinen taulukko, johon sijoitetaan henkilöiden nimiä. Taulukossa on kolme riviä ja neljä saraketta.

<script type = "text/javascript">

// Luodaan taulukko henkilot, jossa on kolme solua:
var henkilot = new Array(3);

// Luodaan henkilot-taulukon ensimmäiseen soluun uusi nelisoluinen taulukko:
henkilot[0] = new Array(4);

// Ja toiseen ja kolmanteen soluun myös:
henkilot[1] = new Array(4);
henkilot[2] = new Array(4);

// Sijoitetaan arvot ensimmäisen rivin soluihin:
henkilot[0][0] = "Matti";
henkilot[0][1] = "Seppo";
henkilot[0][2] = "Antti";
henkilot[0][3] = "Seija";

// Sijoitetaan arvot toisen rivin soluihin:
henkilot[1][0] = "Hanna";
henkilot[1][1] = "Anniina";
henkilot[1][2] = "Anna";
henkilot[1][3] = "Aarne";

// Sijoitetaan arvot kolmannen rivin soluihin:
henkilot[2][0] = "Kauko";
henkilot[2][1] = "Päivi";
henkilot[2][2] = "Sami";
henkilot[2][3] = "Heikki";


// Tulostetaan taulukosta pari arvoa:

document.write("Ensimmäisen rivin ensimmäinen sarake: " + henkilot[0][0]);	//Tulostaa: Matti

document.write("Toisen rivin kolmas sarake: " + henkilot[1][2]);	// Tulostaa: Anna

</script>

Kaksiulotteinen taulukko voi näyttää aluksi vaikealta verrattuna yksiulotteiseen taulukkoon. Käydäänpä skripti läpi ja katsotaan, kuinka se toimii. Ensin luodaan kolmesoluinen henkilot-niminen taulukko. Taulukko sisältää siis indeksit 0...2. Indeksi 0 viittaa taulukon ensimmäiseen soluun, johon luodaan uusi taulukko komennolla henkilot[0] = new Array(4);. Eli solun sisälle tulee uusi neljä solua sisältävä taulukko. Sama tehdään myös henkilot-taulukon toiseen ja kolmanteen soluun.

Nyt meillä on siis henkilot-niminen kaksiulotteinen taulukko, jossa on kolme riviä ja neljä saraketta, yhteensä 12 solua. Näihin soluihin voidaan sijoittaa lukuja tai merkkijonoja samalla tavalla kuin yksiulotteiseen taulukkoon. Soluun viitataan syntaksilla henkilot[rivi][sarake], jossa muuttuja rivi viittaa taulukon riveihin ja muuttuja sarake sarakkeisiin. Näin taulukon ensimmäisen solun viittaus on henkilot[0][0] ja siihen sijoitetaan arvo tutulla sijoitusoperaattorilla: henkilot[0][0] = "Matti";. Vastaavasti toisen rivin kolmanteen sarakkeeseen arvo sijoitetaan lauseella: taulukko[1][2] = "Anna";. Muista, että rivien ja sarakkeiden numerointi alkaa nollasta.

Solujen sisällön tulostaminen tapahtuu lauseella: document.write(henkilot[rivi][sarake]); eli esimerkiksi document.write(henkilot[2][1]);.

Seuraavissa oppaissa tullaan käsittelemään for-silmukka, jonka avulla moniulotteisen taulukon tietojen käsittely käy näppärästi. Alla on esimerkki taulukon solujen läpikäymisestä ja tulostamisesta for-silmukalla. Voit palata tähän esimerkkiin, kun olet opiskellut silmukkarakenteet.

// i on rivien ja j sarakkeiden indeksi:
for(var i = 0; i < 3; i++)
{
	for(var j = 0; j < 4; j++)
	{
		document.write(henkilot[i][j] + " ");
	}

	document.write("<br>");
}

Olemassa on myös vaihtoehtoinen tapa luoda kaksiulotteinen taulukko:

var taulukko = [["Esko", "Sari", "Hannu"], ["Kalle", "Raija", "Oskari"], ["Akseli", "Reetta", "Reijo"]];

document.write(taulukko[0][0]);		// Esko
document.write(taulukko[1][2]);		// Oskari
document.write(taulukko[2][2]);		// Reijo

Vastaavalla tavalla luodaan kolme- tai useampiulotteisia taulukoita, mutta niiden käyttö on melko harvinaista, eikä niitä käsitellä tässä opassarjassa.

Yhteenveto

Tämän oppaan läpikäymisen jälkeen lukijan tulisi osata luoda uusia muuttujia, ymmärtää niiden käyttötarkoitus ja sijoittaa muuttujiin erityyppistä tietoa (lukuja ja tekstiä). Myös peruslaskutoimitukset muuttujilla ja luvuilla tulisi hallita sekä taulukoiden luominen ja käyttötarkoitus ymmärtää. Seuraavassa oppaassa perehdytään yhteen JavaScriptin tärkeimmistä alueista, tapahtumankäsittelijöihin.