Tehtäväsarja 2

Pisteiden asettelu koordinaatistoon

Piirtäminen näppäimistöllä

Tällä viikolla tehtävät keskittyvät piirtämiseen. Harjoitellaan aluksi piirtämistä nuolinäppäinten avulla.

Nuolinäppäimillä piirto

Tehtävä: Kokeile piirtää tässä tehtävässä jotakin nuolinäppäimillä

Edellisessä tehtävässä käyttäjä joutuu itse kertomaan ohjelmalle, mihin ohjelman pitää piirtää seuraavaksi. Eräs ohjelmoinnin perusideoista on automatisoida asioiden tekemistä. Tietokoneelle halutaan antaa komentoja ilman, että ihmisen pitää erikseen kertoa jokainen komento.

Katsomalla edellisen tehtävän koodia tiedostossa update.js huomataan, että nuolinäppäinten painaminen kutsui ohjelmassa valmiiksi määriteltyä funktiota liiku. Seuraavissa tehtävissä päästään antamaan komentoja nuolinäppäinten sijaan ohjelmallisesti eli kutsumalla funktioita.

Piirtäminen ohjelmallisesti

Tehtävä: Kokeile antaa ohjelmalle komentoja ylos(), alas(), oikealle() ja vasemmalle() ja piirrä niiden avulla kuvioita piirtoalustalle. Voit kirjoittaa komennot funktion lueKomennot() sisälle.

Neliön piirtäminen

Portaiden piirtäminen

Muurin piirtäminen

Monessa edellisistä piirtotehtävistä tuli väistämättä paljon toistuvaa koodia. Esimerkiksi portaikon piirtämisessä koodi näytti luultavasti suunnilleen tältä:

ylos();
ylos();
oikealle();
oikealle();
ylos();
ylos();
oikealle();
oikealle();
ylos();
ylos();
oikealle();
oikealle();
ylos();
ylos();
oikealle();
oikealle();

Koodissa on siis 4 riviä jokaista porrasta kohti. Jos portaikossa olisi 100 porrasta, koodin pituus olisi jo 400 riviä! Ohjelmoinnissa on kuitenkin keinoja välttää toistuvaa koodia. Opetellaan seuraavaksi toistolause, jota kutsutaan while-silmukaksi.

While-silmukka

While-silmukka toimii hiukan samalla tavalla kuin ensimmäisessä tehtäväsarjassa harjoitellut ehtolauseet. While-silmukka määritellään kirjoittamalla while(ehto) { // suoritettava koodi niin kauan, kun ehto on voimassa } Kuten if-lauseessa, myös while-loopissa pitää aina olla ehto. Ehto tarkistetaan jokaisen koodin suorituksen jälkeen.

Alla on esimerkki while-silmukasta:

while(true) {
  console.log("Tervehdys!");
}

Yllä oleva koodi tulostaisi loputtomasti lausetta "Tervehdys!". Loputtomuus johtuu siitä, että ehto true on aina voimassa. Selaimessa ikuinen silmukka ei toimi, vaan jäädyttää välilehden. Voit testata tätä tulevissa tehtävissä, jos uskallat. Ongelman voi korjata sulkemalla välilehden ja avaamalla materiaalin uudessa välilehdessä. Huom! Menetät tehdyn työn, jos joudut sulkemaan välilehden.

Indeksi-muuttuja

Jotta while-silmukan suoritus loppuisi joskus, käytetään usein ns. indeksi-muuttujaa. Tämän muuttujan tarkoituksena on tallentaa nykyisen kierroksen numero ja lopettaa while-silmukan suoritus, kun kierrosluku on tarpeeksi suuri. Indeksi-muuttujan arvoa pitää muistaa kasvattaa aina while-silmukan sisällä, jotta sen arvo kasvaa. While-silmukan loppuun voidaan lisätä if-lause, jossa tarkistetaan, pitääkö silmukan suoritus lopettaa. Silmukan suorituksen voi lopettaa break -komennolla. Alla esimerkki indeksi-muuttujan käytöstä while-silmukan kanssa:

var indeksi = 1;
while(true) {
  console.log("Tervehdys!");  // Tulostetaan tervehdys
  indeksi = indeksi + 1;      // Lisätään indeksin arvoa
  if (indeksi > 50) {         // Tarkistetaan, pitäisikö silmukan suoritus lopetetaan
    break;                    // Lopetetaan silmukan suoritus, jos indeksi oli tarpeeksi suuri
  }
}

Yllä oleva koodi tulostaisi lauseen "Tervehdys!" 50 kertaa.

Pitkät portaat

Vapaa piirtäminen silmukassa

Tehtävä: Voit tässä tehtävässä vapaasti testata, mitä tapahtuu, jos laitat komentoja ylos(), alas(), oikealle() ja vasemmalle() silmukan sisään eri määriä ja eri järjestyksessä.

Listat ja indeksi

Tehtäväsarjassa 1 tutustuttiin listoihin, niiden luontiin, niiden loppuun tai alkuun lisäämiseen ja lopusta tai alusta poistamiseen.

Indeksin käyttö on myös hyödyllistä listojen kanssa, koska sillä voi viitata tiettyyn objektiin listassa. Listassa voidaan ajatella olevan numerointi, joka alkaa nollasta. Tämän ansiosta listan ensimmäistä alkiota voi käyttää kirjoittamalla lista[0]. Listan toista alkiota voi vastaavasti käyttää kirjoittamalla lista[1] ja niin edelleen.

Alla esimerkki koodista, joka tulostaa yksitellen kaikki listan alkiot:

var lista = [1, 3, 3, 7];
var indeksi = 0;
while(true) {
  console.log(lista[indeksi]);        // Tulostetaan listan alkio indeksin kohdalta
  indeksi = indeksi + 1;              // Kasvatetaan indeksiä
  if (indeksi >= lista.length) {      // Tarkistetaan, pitääkö silmukan suoritus lopettaa.
    break;                            // Lopetetaan silmukan suoritus, jos indeksi oli tarpeeksi suuri
  }
}

Huomioi yllä olevassa koodissa, että indeksin arvon tarkistuksessa on yhtäsuuruus mukana. Tämä johtuu siitä, että indeksointi alkaa nollasta - jos listan koko on 4, lista[4] viittaisi listan viidenteen alkioon, jota ei ole olemassa.

Listan alkioiden lukumäärän laskeminen

Tehtävä: Laske listan alkioiden lukumäärä käyttämällä while-silmukkaa ja valmista lukumaara-muuttujaa. Tuloksen pitäisi olla 74.

Listan alkioiden summan laskeminen

Tehtävä: Laske listan alkioiden summa käyttämällä while-silmukkaa ja valmista summa-muuttujaa. Tuloksen pitäisi olla 1337.

Listan alkioiden keskiarvon laskeminen

Tehtävä: Laske listan alkioiden keskiarvo. Keskiarvon laskemisessa on hyötyä edellisistä kahdesta tehtävistä. Keskiarvon kaava on (Alkioiden summa) / (Alkioiden lukumäärä). Osaatko tehdä tehtävän käyttämällä vain yhtä while-silmukkaa? Tuloksen pitäisi olla noin 18.