Taulukot

Taulukot ovat yleinen ohjelmointikielten rakenne. Taulukoihin voidaan tallennetaan kaikenlaisia tietoja: merkkijonoja, numeroita, kuvien nimiä, jopa HTML-sivun objekteja ja toisia taulukoita.

Taulukkoon yksittäiseen alkioon viitataan indeksinumeron avulla, joka kertoo kuinka mones alkio on kyseessä. Taulukon ensimmäinen alkio on indeksinumerolla nolla ja toinen indeksinumerolla 1 jne. Jos esimerkiksi olemme määritelleet taulukon

taulukko = ["alkio1","alkio2","alkio3","alkio4"];

niin taulukko[0] = "alkio1", taulukko[1] = "alkio2",...

Huomaa, että voimme viitata myös taulukon ulkopuolelle, vaikka taulukossa ei olisi indeksin antamaa solua. Tällöin ohjelma antaa virheilmoituksen tai arvon undefined.

<script language="JavaScript">

var nimitaulu = ["Pentti","Maija","Matti"];

function haeyksi(nro){

	//haetaan haluttu nimi taulusta
	return nimitaulu[nro];
}

function haeNimi(){

	//kysytään kuinka mones
	var mones = window.prompt("Anna järjestysnumero:","0");

	//haetaan nimi, muutetaan mones luvuksi kertomalla mones ensin 1:llä 
	var nimi = haeyksi(1*mones);
	//ilmoitetaan nimi
	window.alert(nimi);

}

</script>

<input type="button" value="Hae nimi" onClick="haeNimi();" />

Tyhjä taulukko ja taulukkoon lisääminen

Joskus tarvitsemme myös tyhjää taulukkoa, johon syöttää alkioita. Tyhjä taulukko esitellään käskyllä:

var taulunnimi = Array();

Tyhjään tauluun syöttäessä voimme käyttää apuna valmista funktiota, joka palauttaa taulukon pituuden:

var taulunpituus = taulunnimi.length;

<script language="JavaScript">

var etunimet = Array();

function lisaaNimi(){

	var uusinimi = window.prompt("Anna uusi nimi:");

	var ekatyhja = etunimet.length;
	etunimet[ekatyhja] = uusinimi;

}

function haeNimet(nro){

	var kaikki = "";

	for (var i=0 ; i < etunimet.length ; i=i+1){

		kaikki = kaikki + etunimet[i];
	};

	window.alert(kaikki);	
}

</script>

<input type="button" value="Lisää nimi" onClick="lisaaNimi();" />
<input type="button" value="Ilmoita nimet" onClick="haeNimet();" />

Esimerkissä esitellään aluksi tyhjä taulukko nimeltä etunimet. Funtiossa lisaaNimi kysytään ensin käyttäjältä uusi nimi. Seuraavalla rivillä kysytään taulukon pituus ja tallennamme sen muuttujaan ekatyhja. Koska taulukon indeksit alkavat nollasta, niin taulukon pituus on sama, kuin taulukon ensimmäisen vapaan alkion indeksi. Seuraavalla rivillä sijoitammekin uuden nimen kohtaan ekatyhja.

Funktiossa haeNimet() esittelemme aluksi tyhjän merkkijonon. For -lause käy läpi koko taulukon ja lisää löytyneet alkiot merkkijonoon. Lopuksi avaamme alert-ikkunan ja ilmoitamme saamamme merkkijonon.

Taulukoiden metodeja

Taulukon alkioiden nimeäminen

Joskus taulukon alkiot on mukava myös nimetä sijoittamisvaiheessa, jolloin voimme myös viitata alkioihin nimillä.
Olkoon nyt:

var lista = Array();

lista["nimi"] = "Matti Meikäläinen";
lista["syntymaaika"] = "21.3.1981";

jolloin window.alert(lista['nimi']); antaa tulokseksi Matti Meikäläinen ja
window.alert(lista['syntymaaika']); päivämäärän.

Jos yritämme viitata lista[0] -alkioon saamme virheilmoituksen: window.alert(lista[0]); .

Esimerkki

Tehdään esimerkki taulukoiden käytöstä. Tavoite on dia-show, jossa kuvat vaihtuvat nappia painamalla.

DiaShow

Ohjelmakoodi diashow-ohjelmalle:

<script language="JavaScript">

//listataan halutut kuvat
var kuvalista = ["Picture001.jpg","Picture002.jpg","Picture003.jpg","Picture004.jpg"];

//pidetään yllä paikka-muuttujaa, jossa nyt näkyvä kuva
var paikka = 0;


function eteenpain(){

	paikka = paikka + 1;		//halutaan seuraava kuva

	if (paikka >= kuvalista.length){	//jos mentiin yli viimeisen kuvan
		paikka = 0;			//siirrytään alkuun
	}

	//sijoitetaan kuva kuvat-kansiosta
	document.getElementById("kuvaikkuna").src = "kuvat/" + kuvalista[paikka];	

}

function taaksepain(){

	paikka = paikka - 1;	//halutaan edellinen kuva

	if (paikka < 0){			//jos mentiin alla ekan kuvan eli -1:een
		paikka = kuvalista.length - 1;	//siirrytään viimeiseen kuvaan
	}
	
	//sijoitetaan kuva kuvat-kansiosta
	document.getElementById("kuvaikkuna").src = "kuvat/" + kuvalista[paikka];	

}

</script>

<center>
<b>DiaShow</b> <br />
<img src="kuvat/Picture001.jpg"  height="300px" id="kuvaikkuna" />
<br />
<input type="button" value="<<<<" onClick="taaksepain();" />
<input type="button" value=">>>>" onClick="eteenpain();" />
</center>

Jatkokehityksen paikka: Tee kuvan alle div-elementti, jossa on kuvateksti.
Tee myös taulukko, jossa on jokaisen kuvan kuvateksti taulukoituna.
Lisää koodiin käskyt, jotka muuttavat kuvatekstin kuvan muuttuessa.