Ensikosketus ohjelmointiin Tällä tunnilla luodaan ensimmäinen oma ohjelmamme. Tähän hyödynnetään Touch Develop -ympäristön kilpikonnaohjelmointikirjastoa. Tutoriaalissa opitaan kilpikonnahahmoa ruudulla ohjastaen, miten koodia kirjoitetaan ja mitä sillä voi saada aikaan. Osaamistavoitteet Tunnin päätteeksi oppilas ymmärtää seuraavat asiat: Ohjelmointi on yksinkertaisimmillaan ohjeiden antamista tietokoneelle koodin muodossa. Koodin sisältämien komentojen ja ohjelman toiminnan välillä on suora yhteys. Käskymuotoisessa ohjelmoinnissa tietokone suorittaa sille annettuja ohjeita järjestyksessä ja rivi kerrallaan. Komennoille annettavat arvot säätelevät niiden suoritusta. Ohjelmoinnissa voidaan toistaa komentoja toistorakenteella. Komentoja kilpikonnalle Kilpikonnaohjelmapohjan saa käyttöönsä osoitteesta http://tdev.ly/hrinav. Linkin avauduttua muokkaustilaan pääsee painamalla ensin pientä valkoista ja sitten isoa oranssia edit-nappia. Eteemme avautuu pätkä valmista koodia. Katsotaan, mitä koodi tekee, kun käskemme tietokonetta suorittamaan sen sisältämän ohjeen. Painetaan play-ikonilla varustettua run main -nappia: kilpikonna liikkuu 200 askelta ylöspäin. Kilpikonnaohjelman alku. Katsotaan nyt, mitä valmiiksi annettuja komentoja ohjelmamme sisältää: Vihreä script-sanalla alkava rivi kertoo ohjemamme nimen (special turtle). Violetti function main () -palikka tarkoittaa pääohjelmaa. Kaikki koodi sen sisällä muodostaa varsinaisen ohjelmamme. Ohjelma loppuu end function -riviin. Vihreä koodirivi, jolla lukee turtle forward(200) komentaa tietokonetta liikuttamaan kilpikonnaa 200 askelta eteenpäin. Se on siis ainoa rivi koodissa, joka todella saa aikaan jotain!
Lisätään ohjelmaan uusi kokonaan oma koodirivimme, jolla komennamme kilpikonnaa kääntymään vasemmalle. Klikataan turtle forward(200) -riviä ja painetaan alempaa vasemmalle ilmestyvistä plus-merkeistä. Klikattaessa koodiriviä, sen vasemmalle puolelle ilmestyy kaksi plus-merkkiä, joilla voidaan lisätä uusia rivejä. Valitaan alhaalle ilmestyvistä laatikoista ensin turtle eli kilpikonna ja sitten left turn eli vasemmalle kääntyminen. Touch Develop täydentää käännöksen suuruudeksi automaattisesti 90 astetta. Run main -nappi on näiden vaiheiden jälkeen kadonnut, mutta sen saa takaisin näkyviin painamalla taaksepäin osoittavaa dismiss-nuolta. Kun run main -nappi on saatu näkyviin, klikkaamme sitä suorittaaksemme ohjelman uudelleen. Kilpikonnan pitäisi nyt kulkea eteenpäin ja kääntyä 90 astetta vasemmalle. Tästä napista run main -napin saa takaisin näkyviin Asetetaan tämän jälkeen kilpikonnan kynälle uusi väri. Luodaan uusi rivi ja valitaan laatikoista turtle ja komento set pen color. Touch Develop täydentää väriksi automaattisesti colors random eli satunnaisen värin. Testataan run main -napilla ohjelman toimintaa. Huomataan, että kilpikonnan väri vaihtuu, mutta viivan väri ei. Tämä johtuu siitä, että tietokone suorittaa komentoja järjestyksessä. Kynän värin vaihtaminen on viimeisenä koodissa, ja värinvaihdos astuu voimaan vasta tämän komennon jälkeen piirretyille viivoille.
Tehdään siis vielä uusi rivi ja liikutetaan kilpikonnaa eteenpäin komennolla turtle forward(200). Painetaan run main -nappia ja huomataan, että kilpikonnan piirtämän toinen viiva todella saa satunnaisen värin. Jokaisella run main -napin painalluksella viiva saa uuden satunnaisen värin. Kokeile! Seuraavaksi tehtävänämme on selvittää, miten kilpikonnan saisi kulkemaan täyden neliön. Vihje: tähän tarvitaan juuri opittuja turtle forward ja turtle left turn -komentoja. Käyttämällä turtle forward ja turtle left turn -komentoja voimme saada aikaiseksi neliön! Kun neliö on valmis, voi ohjelmaan kokeilla piirrellä myös muunlaisia kuvioita. Antamalla koodiin lisää komentoja ja muokkaamalla niiden lukuarvoja syntyy erilaisia lopputuloksia! Toistoa ja vauhtia Kun olemme saaneet neliön valmiiksi ja kokeilleet aiemmin opittuja komentoja kylliksemme, voimme harjoitella uutena asiana ohjeiden toistamista! Tehdään ohjelman loppuun uusi rivi ja valitaan ylimmältä riviltä komentojen joukosta for-laatikko. For-laatikko luo meille sinisen for-toistorakenteen eli toiselta nimeltään for-silmukan. Forsilmukka käskee tietokonetta toistamaan sille annettuja ohjeita. Kokeillaan esimerkin vuoksi luoda ohjelmaamme toinen neliö. Tätä varten eteenpäin liikkumista ja kääntymistä on toistettava neljä kertaa.
Tämä for-silmukka toistaisi sen sisälle asetettuja ohjeita viisi kertaa. For-silmukalle voidaan kertoa, montako kertaa ohjeita halutaan toistaa. Vaihdetaan numeron 5 tilalle toistojen määräksi numero 4. Tämän jälkeen klikataan do nothing -palikkaa ja lisätään forsilmukan sisälle komento turtle forward(100). Testataan! Lopputuloksesta huomataan, että kilpikonnan on myös käännyttävä. Käännytään tällä kertaa kuitenkin vasemman sijaan oikealle komennolla turtle right turn(90). Tämä for-silmukka toistaa eteenpäin liikkumista ja kääntymistä. Tuloksena on toinen neliö, joka on edellistä pienempi, koska turtle forward -komennon arvoksi annettiin 100 200:n sijaan! Koska kilpikonnan hidas liikkuminen alkaa jo kyllästyttää, annetaan sille lisää vauhtia. Jotta kilpikonna olisi nopeampi heti ohjelman käynnistyessä, on vauhtia kasvatettava heti koodin alussa. Klikataan ensimmäistä turtle forward -riviä koodissamme. Painetaan sen jälkeen ylempää vasemmalle ilmestyvistä plus-napeista. Klikataan ylintä turtle forward -riviä koodissamme ja painetaan ylempää plus-nappia, jotta saamme uuden rivin aivan koodimme alkuun Valitaan uudelle riville komentolaatikoista turtle. Kilpikonnan komentojen joukosta ei löydy valmiiksi vauhdin asettamiskomentoa, mutta se voidaan kirjoittaa Search-kenttään. Komennon nimi on set speed.
Kun rivi on valmis, asetetaan kilpikonnalle uusi vauhti kirjoittamalla jokin luku turtle set speed -komennon sulkujen sisään. Antamalla jonkin ison luvun, kilpikonnan vauhti kasvaa hurjaksi! Hypnoottisia kuvioita Ohjelmamme lopuksi haluamme piirtää kilpikonnallamme ruudulle neliömäisen spiraalin. Spiraalissa jokainen suora viiva eli jana on toista hieman pidempi. Kokeillaan saada aikaiseksi jotain tällaista mutta hienompaa! Sovitaan, että haluamme janoja spiraaliin sata kappaletta. Tähän tarvitsemme toistorakennetta. Lisätään siis koodimme loppuun uusi for-silmukka ja annetaan sen toistojen määräksi 100! Tämä for-silmukka toistaisi sille annettavia komentoja 100 kertaa. Spiraalin toteuttamiseksi tarvitsemme ainakin kääntymiskomennon. Käsketään kilpikonnaa kääntymään vasemmalle suorassa kulmassa. Lisätään siis for-silmukan sisälle komento turtle left turn(90). Testataan ja huomataan, ettei aikaansaannoksemme muistuta aivan vielä spiraalia. Neliömäisen spiraalin voimme toteuttaa siten, että liikumme eteenpäin jokaista spiraalin janaa kohden kymmenen askelta. Lisätään for-silmukan sisään komento turtle forward(10). Testataan lopputulosta ja huomataan, ettei tuloksena ole vieläkään spiraali vaan päällekkäisiä neliöitä. Spiraalin janojen pituuden täytyykin kasvaa. Sovitaan, että jokaisen janan kohdalla edetään kuusi askelta enemmän kuin edellisen janan kohdalla. Tähän voimme käyttää kuuden kertotaulua.
Spiraalin lyhin jana on 10 askelta. Kaikki sitä seuraavat janat ovat kuusi askelta pidempiä kuin edellinen. Tietokoneella kirjoitettaessa kertomerkki on *. For-silmukan kirjain j ilmoittaa, montako kertaa silmukan ohjeita on ohjelmassa kullakin hetkellä toistettu: Ensimmäisellä for-silmukan toistolla j saa arvon 0. Toisella toistolla se saa arvon 1. Kolmannella arvon 2. Neljännellä arvon 3. Ja niin edespäin aina 99:ään eli yhtä sataa pienempään asti. Jokaista silmukan toistoa vastaa ohjelmassa yksi spiraalin jana. Kirjain j kertoo, monesko toisto on menossa. Tämä kirjain voi joskus olla myös esimerkiksi i tai k. Koska j:n arvo kasvaa tasaisesti, voimme kertolaskulla 6 * j käydä läpi kuuden kertotaulun aina 0:sta 99:ään. 6 * j tarkoittaa nimittäin, että ensimmäisellä toistolla lasketaan kertolasku 6 * 0, seuraavalla 6 * 1, sitä seuraavalla 6 * 2 ja niin edespäin aina 6 * 99:ään asti. Täydennetään kilpikonnaa for-silmukan sisällä liikuttava komento siis muotoon turtle forward(10 + 6 * j). Seurauksena jokainen spiraalin jana on vähintään kymmenen askelta pitkä mutta lisäksi kuusi askelta pidempi kuin edellinen jana. Testataan, mitä nyt tapahtuu! Nyt olemme saaneet aikaiseksi neliömäisen spiraalimme!
Voimme muokata vielä vasemmalle kääntymistä siten, että käännymmekin hieman yli suoran kulman. Vaihdetaan for-silmukan sisältä komennon turtle left turn astelukemaksi 90:n sijaan 91. Näin saamme spiraalistamme hieman vinoon kaartuvan. Asettamalla kääntymisen kulmaksi 91 astetta spiraali kaartuukin vinoon! Lopuksi voimme tehdä spiraalistamme värikkäämmän. Lisätään for-silmukan sisään kolmanneksi komennoksi turtle set pen color(colors random). Näin spiraalin jokainen jana saa oman satunnaisen värin! Lisäämällä turtle set pen color -komennon for-silmukkaan, saamme väriä spiraaliimme! Kun ohjelmamme on valmis, voimme muokata sitä. Helpointa on aloittaa vaihtamalla lukuarvoja viimeisestä for-silmukasta. Allaoleva lopputulos on saatu aikaan seuraavin muutoksin: Vaihdetaan toistojen määrä 100:sta 1000:ksi Vaihdetaan pienimmän janan pituus 10:stä 1:ksi ja määrätään janojen kasvaminen noudattamaan kuuden kertotaulun sijaan kahden kertotaulua. Asetetaan käännöksen kulmaksi 91:n sijaan 120. Tämä kuvio on saatu aikaan muuttamalla for-silmukan sisältämiä lukuarvoja!
Koodiin voi myös lisätä omia komentoja. Jälleen suurin vaikutus on komennoilla, jotka asetetaan viimeisen for-silmukan sisään, koska niitä toistetaan silloin monta kertaa. Tämä lopputulos on saatu aikaan lisäämällä for-silmukkaan komento turtle stamp.
Kokokoamme valmis koodi. Koko ohjelma on myös tutkittavissa täällä.