Tervetuloa ohjelmoimaan! Käymme aluksi läpi ohjelmoinnin alkeita, jotka johdattavat sinut pelin tekemiseen. Opettelemme Javascript-ohjelmointikieltä -- se on kieli, joka on tarkoitettu selaimessa ajettavien ohjelmien tekemiseen.
Eräs tärkeimmistä ohjelmoinnin perustaidoista on oppia tulostamaan tekstiä näytölle. Javascriptissä tulostus onnistuu komennolla console.log("Tulostettava asia");.
Lainausmerkit tulostettavan lauseen ympärillä tarkoittavat, että tulostettava asia on tekstiä.
Harjoitellaan tulostamista. Alla on tyhjä ohjelman runko. Ohjelmassa oleva rivi // Kirjoita ohjelmasi tähän alle on kommenttirivi, jota tietokone ei ota huomioon ohjelmaa suoritettaessa. Lisää kommenttirivin alle komento, joka tulostaa nimesi ja suorita ohjelma. Ohjelman tulostus voi olla vaikka: Essi Esimerkki.
Usein haluamme käyttää tietoa useammassa paikassa. Jotta tämä olisi mahdollista haluamme jonkin tavan säilöä tietoa, jotta siihen pääsee myöhemmin käsiksi. Ohjelmoinnissa voimme ottaa tietoa talteen muuttujiin. Muuttujat toimivat samaan tapaan kuin matematiikassa. Matematiikassa voisi olla esimerkiksi yhtälöt x = 3 ja y = x + 2, joissa x ja y olisivat muuttujia. Tällöin tietäisimme, että y = 3 + 2 = 5. Jos taas vaihdettaisiin, että x = 5, tietäisimme että y = 7.
Ennen kuin syvennytään tarkemmin muuttujiin kokeillaan mitä niillä voi tehdä. Alla on yksinkertainen peli, jossa pelaajan on tarkoitus kerätä alaspäin tippuvia rubiineja. Liikkuminen tapahtuu nuolinäppäimillä. Kokeile peliä painamalla Käynnistä-painiketta.
Kuten huomasit, peli on tällä hetkellä hankalahko, koska rubiinit tippuvat nopeasti ja pallo liikkuu hitaasti. Yritetään tehdä pelistä hieman helpompi.
Kuten ehkä jo huomasit, peli koostuu useammasta tiedostosta. Tiedostoa voi vaihtaa painamalla tiedoston nimeä. Mene tiedostoon update.js. Kokeile, mitä käy jos vaihdat riveillä 2 ja 3 olevia numeroita 250 ja 500 joiksikin muiksi numeroiksi ja muutoksen jälkeen painat run-painiketta. Helpottuuko peli, jos vaihdat numeroiden arvot päittäin?
Toisin kuin matematiikassa, ohjelmoinnissa muuttujan arvo voi olla myös jotain muuta kuin lukuja, esimerkiksi merkkijonoja (englanniksi string). Merkkijonot ovat mitä tahansa kirjaimista tai merkeistä koostuvia lauseita tai sanoja. Ohjelmoinnissa muuttujien käyttö on hyödyllistä muun muassa siksi, ettei samaa lukuarvoa tarvitse toistaa ohjelmakoodissa aina kun sitä tarvitaan.
Ohjelmoinnissa muuttujat pitää luoda eli alustaa (englanniksi initialize) ennen kuin niitä voi käyttää. JavaScriptissä muuttujat alustetaan kirjoittamalla var muuttujanNimi = muuttujanArvo;. Aluksi määritellään, että nyt luodaan uusi muuttuja kirjoittamalla sana 'var' (tulee sanasta variable). Seuraavaksi määritellään muuttujalle nimi. Muuttujan nimessä ei saa olla välilyöntejä, minkä takia muuttujat yleensä nimetään ns. camelCasella. CamelCasessa lauseen ensimmäinen kirjain kirjoitetaan pienellä, minkä jälkeen jokaisen muun sanan ensimmäinen kirjain kirjoitetaan isolla kirjaimella ja muut pienellä. Esimerkiksi lause "ohjelmointi on kivaa" kirjoitettaisiin camelCasessa "ohjelmointiOnKivaa". Yhtäsuuruus-merkillä annetaan muuttujalle arvo, ja itse arvo kirjoitetaan yhtäsuuruus-merkin oikealle puolelle. Jokainen JavaScript-koodirivi pitää vielä lopettaa puolipisteellä. Merkkijonon sisältävän muuttujan voi alustaa kirjoittamalla var merkkijono = "Terve, mitä kuuluu?";. Huomaa, että merkkijono-tyylisiä muuttujia alustaessa pitää käyttää lainausmerkkejä muuttujan arvon ympärillä.
Harjoitellaan seuraavaksi hiukan muuttujien käyttöä. Tässä tehtävässä luodaan aluksi muuttuja etunimi, johon talletetaan merkkijono. Sen jälkeen tulostetaan etunimi näytölle. Tehtäväpohjassa on valmiiksi kirjoitettu muuttujan etunimi tulostus: console.log(etunimi);. Tehtävänäsi on lisätä tiedoston ensimmäiselle riville muuttujan alustus eli luonti. Tässä ja useissa myöhemmissä tehtävistä osa koodista on lukittu ja voit editoida vain vapaita alueita. Lukitun alueen tunnistaa harmaasta taustaväristä, kun taas lukitsemattoman alueen taustaväri on valkoinen.
Näytölle pitäisi ilmestyä muutujalle annettu arvo, esim. oma etunimesi.
Tehdään seuraavaksi yksinkertainen laskuri. Tässä tehtävässä luodaan aluksi kaksi muuttujaa a ja b, joihin talletetaan lukuja. Sen jälkeen tulostetaan lukujen summa näytölle. Tehtäväpohjassa on tällä kertaa vain kommentit, jotka kertovat mitä jokaisella rivillä pitäisi tehdä. Kirjoita rivit käyttäen hyödyksi yhteenlasku-esimerkkiä ja edellisen tehtävän muuttujan tulostusta.
Jos annat luvuille esim. arvot 5 ja 2, pitäisi näytölle tulostua luku 7.
Tässä tehtävässä pääset muokkaamaan ensimmäisestä tehtävästä tuttua peliä. Pelissä on kuitenkin muutama muuttujiin liittyvä virhe. Löydä muuttujien virheet ja korjaa ne. Katso tarvittaessa apua ensimmäisestä tehtävästä tai editorin alla olevista vihjeistä.
Peli toimii samalla tavalla kuin ensimmäisessä tehtävässä.
Kumpikin virhe löytyy tiedostosta update.js. Ensimmäinen virhe on, että palkkien tippumisnopeus on väärä. Toinen virhe on, että pallo liikkuu väärään suuntaan nuolinäppäimistä.
Muuttujilla voidaan tehdä operaatioita. Operaatiot ovat erilaisia toimintoja. Numeroilla ne mahdollistavat esimerkiksi muuttujien yhteenlaskun, vähennyslaskun, kertolaskun ja jakolaskun. Lukujen laskutoimitukset toimivat täysin samalla tavalla kuin matematiikassa. Esimerkiksi:
console.log(5 + 2); // tulostaa luvun 7
console.log(5 - 7); // tulostaa luvun -2
console.log(2 * 6); // tulostaa luvun 12
console.log(8 / 4); // tulostaa luvun 2
Operaattoreilla voidaan myös yhdistää merkkijonoja. Se onnistuu ketjuttamalla halutut merkkijonot +-operattorilla, kuten yhteenlaskussa. Esimerkki:
console.log("Hei" + ", mitä kuuluu?"); // tulostaa "Hei, mitä kuuluu?"
Alla olevassa tehtäväpohjassa on alustettu kaksi muuttujaa a ja b. Tässä tehtävässä tehdään näillä muuttujilla laskutoimituksia. Tee joku laskutoimitus, jonka tulos on 30.
Lista on objekti, joka voi sisältää useita useita eri objekteja. Tyhjä lista luodaan merkinnällä var lista = [];. Listan sisällä voi olla muita objekteja. Merkintä var lista = [1, 2, 3, 4]; luo uuden listan, jonka sisällä on numerot 1, 2, 3 ja 4. Listoihin voi laittaan kaikentyyppisiä objekteja, kuten vaikka sanoja. Koodi var lista = ["JavaScript", "Ohjelmointi"]; luo listan, jonka sisällä on merkkjonot "JavaScript" ja "Ohjelmointi".
Listaan voi myös laittaa muiden objektien arvoja. Koodi:
var a = 1;
var b = 3;
var c = "kissa";
var lista = [a, b, c];
luo uuden taulukon, jonka sisältö on 1, 3 ja kissa. Voimme merkitä tälläistä listaa merkinnällä [1, 3, "kissa"].
Muuta alla olevaa tehtäväpohjaa siten, että muuttujan lista sisältö on [1, 2, "listat", "ovat", "hauskoja!"];
Listojen luonti sujuu melko näppärästi, mutta usein ohjelmoinnissa haluamme muokata listoja jotenkin. Olisi hyvä jos voisimme lisätä alkioita listaan, ottaa niitä pois ja niin edelleen.
Olemassa olevan listan loppuun voidaan lisätä uusi alkio komennolla lista.push(lisättävä_alkio);. Jos haluamme vaikka lisätä listaan numeron 3, se onnistuu koodilla: lista.push(3);. Alla olevan koodin suorituksen jälkeen listan sisältö on [3, 7, 4]:
var lista = [3];
lista.push(7); // Listan sisältö on nyt [3, 7]
lista.push(4); // Listan sisältö on nyt [3, 7, 4]Tehtävä: Alla olevassa tehtäväpohjassa on luotu lista, jonka sisältö on 4. Lisää listan loppuun alkiota niin, että listan sisällöksi tulee 4, 5, 6.
Nyt pystymme luomaan listoja ja lisäämään niiden loppuun alkiota. Valitettavasti kuitenkin tämä ei aina riitä. Tietyissä tilanteissa voitaisiin haluta lisätä alkioita listan alkuun. Javascriptissä on onneksi ratkaisu tähän ongelmaan. Koodi lista.unshift(lisättävä_alkio) tomii samalla tavalla kuin lista.push, mutta se lisää alkiota listan alkuun eikä loppuun. Alla oleva koodi luo listan, jonka sisältö on [9, 5, 1].
var lista = [1];
lista.unshift(5); // Listan sisältö on nyt [5, 1]
lista.unshift(9); // Listan sisältö on nyt [9, 5, 1]Tehtävä: Alla olevassa tehtäväpohjassa on luotu lista, jonka sisältö on 4. Lisää listan alkuun alkiota niin, että listan sisällöksi tulee 2, 3, 4.
Voimme myös haluta poistaa listasta alkiota. Kuten varmaan jo edellisistä tehtävistä arvasitkin, voimme poistaa alkiota joko listan alusta tai listan lopusta. Koodi lista.pop() poistaa elementin listan lopusta ja koodi lista.shift() poistaa listan ensimmäisen alkion.
Tehtävä: Poista listan alusta kaksi elementtiä ja lopusta yksi elementti. Mikä tulee tulokseksi?
Yllä olevassa materiaalissa kaikki koodi suoritettiin heti, kun suoritus osuu koodin kohdalle. Haluamme kuitenkin usein siirtää koodin suoritusta tulevaisuuteen johonkin tiettyyn tapahtumaan. Tätä varten on olemassa funktiot. Funktioilla määritellään ohjelmakoodia, joka suoritetaan myöhemmin.
Funktio määritellään kirjoittamalla function funktionNimi() { koodi }. Esimerkiksi voitaisiin määritellä funktio, joka tulostaa tervehdyksen.
function tervehdi() {
console.log("Terve!");
}
Kun haluamme suorittaa aikaisemmin määritellyn funktion, joudumme kutsumaan sitä. Kutsuminen onnistuu koodilla: kutsutavanFunktionNimi();. Esimerkiksi yllä olevaa tervehdys-funktiota kutsuttaisiin kirjoittamalla tervehdi();. Funktion kutsuminen suorittaa sen sisällä määritellyn koodin. Esimerkiksi alla oleva koodi tulostaisi kahdesti "Terve!".
tervehdi(); // Tulostaa "Terve!"
tervehdi(); // Tulostaa "Terve!"Tehtävä: Alla on määritelty funktio. Kutsu sitä.
Usein halutaan, että ohjelman sisäinen tila vaikuttaa ohjelman suoritukseen. Voitaisiin esimerkiksi haluta, että ohjelma tulostaa erilaisen tulosteen riippuen jonkin muuttujan arvosta. Esimerkiksi alla oleva ohjelma tulostaa eri tekstin riippuen muuttujan ika arvosta.
var ika = 14;
if (ika < 18) { // Jos ikä on alle 18, suoritetaan aaltosulkeiden sisällä eli if-lohkossa oleva koodi
console.log("Olet alaikäinen!");
} else { // Muuten suoritetaan else-lohkossa oleva koodi
console.log("Olet täysi-ikäinen!");
}
Koodin ehdollinen suoritus onnistuu if-avainsanan avulla. If-ehtolauseen rakenne on if ( ehto ) { koodi, joka suoritetaan ehdon ollessa tosi }. Eli if-avainsanan jälkeen laitetaan jonkin ehto, jonka totuutta tarkastellaan ja sen jälkeen kirjoitetaan aaltosulkuihin koodi, joka tulee suorittaa ehdon ollesssa tosi. If-ehtolauseen jälkeen voi halutessaan kirjoittaa perään else-lohkon kuten yllä olevassa esimerkissä. Else-lohko suoritetaan siinä tapauksessa, että ehto ei ole tosi.
Jotta voimme käyttää edellä esiteltyjä ehtolauseita, meidän täytyy osata kirjoittaa joitain ehtoja niille. Eräs yksinkertainen ehto on yhtäsuuruden vertailu. Se onnistuu merkinnällä ==. Ehtolauseen if (muuttuja == toinenMuuttuja ) { koodi } koodi suoritetaan, jos muuttuja ja toinenMuuttuja sisältävät saman arvon.
Luvuilla voimme yhtäsuuruuden lisäksi tarkastella niiden suuruuksia. Voimme esimerkiksi tarkistaa, onko luku pienempi tai suurempi kuin toinen luku. Suuruuden vertailu onnisttuu operaattoreilla <, >, <= ja >=. Operaattorit < ja > eivät ota yhtäsuuruutta huomioon kun taas operaattorit <= ja >= ottavat.
Seuraavassa koodinpätkässä ehto on totta, joten vain if-lohkon sisällä oleva koodi suoritetaan:
var luku = 8;
var toinenLuku = 7;
if (luku >= toinenLuku) {
// If-lohko, joka suoritetaan
} else {
// Else-lohko, jota ei suoriteta
}Seuraavassa koodinpätkässä ehto on epätosi ja vain else:n sisällä oleva koodi suoritetaan:
var luku = 6;
var toinenLuku = 7;
if (luku >= toinenLuku) {
// If-lohko, jota ei suoriteta
} else {
// Else-lohko, joka suoritetaan
}Tehtävä: Muuta muuttujan a arvoa niin, että tehtävässä oleva ehto on totta. Tulostuksen pitäisi siis olla "Totta".