Yhteenveto

Ajatellaan esimerkiksi tilannetta, että haluaisimme tallentaa kaupunkien nimiä ohjelmassa. Jos käyttäisimme muuttujia, niin silloin jokaiselle nimelle tarvittaisiin oma muuttujansa. Se ei ole kovinkaan järkevää, jos tallennettavia nimiä on paljon. On parempi tallentaa nimet listaan tai taulukkoon. Puhumme tällöin taulukkomuuttujasta. Scratch-ohjelmassa kohdassa: Muuttujat, on toiminto: Tee lista, jota napsauttamalla voidaan luoda tyhjä taulukko ja antaa sille nimi.

Jonka jälkeen ”lisää listaan” komennolla voidaan luotuun taulukkoon lisätä nimiä, joita tallennetaan taulukon soluihin. Scratch:ssä solut numeroidaan järjestyksessä: 1,2,3 jne. Näihin numeroituihin soluihin voidaan viitata, kun tulostamme taulukon sisällön. Kun ohjelma, loppuu, niin lopuksi tyhjennämme taulukon sisällön.

Katsotaan kuinka sama asia tehdään P5.js-koodin avulla.

function setup() {
  createCanvas(400, 400);      // Ikkunan koko 400 x 400
  fill(0);                     // Tekstin väri musta
  textSize(30);                // Tekstin koko 30
}

function draw() {
  background(220);             // Tyhjennä tausta ja väritä se vaalean harmaaksi
  var Kaupungit = [];          // Luodaan tyhjä taulukko
  Kaupungit[0] = "Helsinki";   // Sijoitetaan ensimmäiseen soluun (= 0. solu) teksti: "Helsinki" 
  Kaupungit[1] = "Tampere";    // Sijoitetaan toiseen soluun (= 1. solu) teksti: "Tampere"
  Kaupungit[2] = "Turku";      // Sijoitetaan kolmanteen soluun (= 2. solu) teksti: "Turku"
  text(Kaupungit[0],50,100);   // Tulostetaan taulukon: Kaupungit, solun: 0, sisältö paikkaan: 50 oikealle, 100 alas 
  text(Kaupungit[1],50,150);   // Tulostetaan taulukon: Kaupungit, solun: 1, sisältö paikkaan: 50 oikealle, 150 alas
  text(Kaupungit[2],50,200);   // Tulostetaan taulukon: Kaupungit, solun: 2, sisältö paikkaan: 50 oikealle, 200 alas
}

Kun ajamme ohjelman, niin se tulostaa seuraavaa.

Kun vertaamme koodia Scratch-ohjelman koodiin, niin huomaamme, että taulukon solujen numerointi lähtee P5.js ohjelmassa nollasta, joka on yleinen käytäntö ohjelmointiympäristöissä. Nollas-solu on yleensä ensimmäinen solu. Yllä oleva koodi voidaan lisäksi lyhentää seuraavasti.

function setup() {
  createCanvas(400, 400);  // Ikkunan koko 400 x 400
  fill(0);                 // Tekstin väri musta
  textSize(30);            // Tekstin koko 30
}

function draw() {
  background(220);                                   // Taustaväri harmaa
  var Kaupungit = ["Helsinki", "Tampere", "Turku"];  // Luodaan Kaupungit-taulukko
  for (var a=0; a < Kaupungit.length; a++) {         // Käydään läpi taulukon solut for-silmukan avulla
    text(Kaupungit[a],50,100+a*50);                  // Tulosta solun sisältö
  }                                                  // Lopeta for-silmukka
}

Taulukon määrittely ja tallennettavien tietojen sijoitukset soluihin voidaan tehdä samalla rivillä. Samoin taulukon tulostus voidaan kätevästi hoitaa for-silmukan avulla. For-silmukassa lähdetään aina 0:sta, joka on myös ensimmäisen solun sisältö. Samoin ehdossa a < Kapungit.length; ei saa käyttää yhtä suuruus merkkiä. Vaikka soluja on a kappaletta, niin viimeisen solun  numero on a-1.

Kuinka jo määritellystä taulukosta voidaan joko lisätä tai poistaa tietoa taulukosta. Katsotaan asiaa esimerkkien avulla. Olkoon meillä aluksi taulukko, johon on tallennettu kaupunkien nimet: ”Helsinki”, ”Tampere” ja ”Turku”.

Taulukon määrittely ja komento	Taulukon sisältö muutoksen jälkeen	Merkitys
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit[1] = ”Joensuu”;		Komento korvaa valitun solun sisällön uudella tiedolla. Koska Tampere on solussa numero 1, niin siksi 1 solun sisältö muuttuu Tampereesta Joensuuksi.
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit.push(”Joensuu”);		Komento: push(Tieto); lisää taulukon loppuun uuden solun ja sijoittaa siihen annetun tiedon.
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit.shift();		Komento: shift(); poistaa taulukosta ensimmäisen solun sisältöineen.
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit.pop();		Komento: pop(); poistaa taulukosta viimeisen solun sisältöineen.
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit.splice(1,0,”Joensuu”);		Komennossa splice(1,0,”Joensuu”); 1 tarkoittaa valittua solua, 0 tarkoittaa kuinka monta solua poistetaan valitusta solusta eteenpäin ”Joensuu” on uusi lisättävä tieto valittuun soluun, muut solut siirtyvät eteenpäin.
var Kaupungit = [”Helsinki”, ”Tampere”, ”Turku”]; Kaupungit.splice(1,1);		Komennossa splice(1,1); 1 tarkoittaa valittua solua 1 tarkoittaa kuinka monta solua poistetaan lukien valitusta solusta Helsinki on solussa numero 0, Tampere on solussa numero 1 ja Turku on solussa numero 2. Komento splice(1,1) poistaa siis Tampereen taulukosta.

Komennoilla push, shift, pop ja splice voidaan hallita tiedon lisäykset ja poistot taulukosta. Nämä ovat samat komennot kuin JavaScript ohjelmassa. Voit katsoa lisätietoa JavaScript:in taulukon muokkauskomennoista tästä:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array