Ohjelmointikoulu CodeBerryn “Aloittelijan opas” -sarjassa vastaamme kysymyksiiisi siitä, mikä ohjelmointikieli kannattaa valita, kuinka paljon tulet tienaamaan, mitä voit tehdä verkko-ohjelmoijana ja mistä aloittaa.

Haluaisitko oppia koodaamaan verkossa? Tule ja kokeile ensimmäisiä oppituntejamme maksutta Ohjelmointikoulu CodeBerryssä.

 

Mitä on JavaScript-ohjelmointi?

JavaScript on Netscapen kehittämä pääasiassa web-sivuilla käytettävä internetin kieli. Lähes kaikki selaimessasi näkyvät verkkosivustot käyttävät sitä jollakin tavalla käyttäjäkokemuksen parantamiseksi. Sen vuoksi JavaScript on ohjelmointikieli, joka on erittäin haluttu työkalu modernin ohjelmoijan työkalupakissa. Tälle joustavalle kielelle ei oikeastaan ole korvaajaa, jos haluat luoda mahtavia selainpohjaisia kokemuksia, jotka koukuttavat asiakkaita, yhteistyökumppaneita ja mahdollisia työntekijöitä.

Tahdotko toteuttaa verkkosivuston nopeasti kasvavalle koirien leluja myyvälle yrityksellesi? Tai haluatko luoda VR-kokemuksen siitä, millaista on vierailla anoppisi kotona joulupäivänä? Sinun täytyy opetella JavaScriptiä, jos haluat saavuttaa nämä jalot unelmat ja vielä enemmän.

Jos nämä asiat houkuttelevat sinua (tai istut kyllästyneenä töissä vessanpöntöllä), jatka lukemista päästäksesi jyvälle JavaScript-kielen perusteista, ja aloittaaksesi web-koodarin urasi!

Muuttujat

Muuttujat ovat mahtava lähtöpiste. Niihin koodarit tallentavat tietoja, joita ohjelma tarvitsee toimiakseen.

Muuttujat ovat kuin laatikoita, joihin voit lisätä tavaroita. Ohjelmoija voi luoda koodiin muuttujan, täyttää sen haluamillaan asioilla, ja käsitellä niitä myöhemmin. Tällä tavoin tiedot ovat saatavilla tarvittaessa.

Miten siis luon muuttujan koodissa?

Tällä tavoin:

var myCoolVariable;

Mitä hiivattia se tarkoittaa?

Hyvä kun kysyit. Rivi koostuu kahdesta osasta, jotka luovat yhdessä muuttujan. Puretaan se kahteen osaan:

• var
  • JavaScriptissä tämä on varattu sana. Kielessä on näitä varsin useita, ja kaikilla on niille omistetut tehtävät. Tämä kertoo ohjelmalle, että olet luomassa muuttujaa.

• myCoolVariable
  • Tämä on muuttujan tunniste, joka on yksinkertaisesti sen nimi. Se voi olla mitä tahansa, vaikkapa “kissa”, tai “lentokonesuihkuturbiinimekaanikkoaliupseerioppilas” (suosittelemme kuitenkin välttämään tällaisia nimiä).
  • Muuttujan tunnistetta käytetään viittaamaan muuttujaan myöhemmin sitä tarvittaessa. On hyvää koodauskäytäntöä nimetä muuttuja niin, että nimi kuvaa sen käyttötarkoitusta. Jos sinulla on muuttuja, joka sisältää ikäsi, voisit kutsua sitä nimellä myAge. Tee näin johdonmukaisesti, ja koodarikollegasi tulevat pitämään sinusta.

Siistiä, mutta mitä tehdä seuraavaksi?

Muistatko, että sanoin muuttujien olevan kuin laatikoita? Yläpuolinen koodi luo tämän laatikon, mutta emme ole laittaneet sen sisään vielä mitään. Tämä on seuraava askel. Puhutaan sitä ennen kuitenkin vähän tietotyypeistä.

Mikä kumma se on?

Tietotyypit kuvaavat muuttujien sisältämän tiedon tyyppejä. Useimmat ohjelmointikielet sisältävät näitä, ja jotkin kielet ovat erittäin tiukkoja niiden käytöstä. Niissä sinun on määriteltävä tarkasti alusta alkaen muuttujan tyyppi ja pysyttävä sitten samassa tyypissä.

JavaScript ei kuitenkaan toimi aivan näin. Voit luoda tietyn tyyppisen muuttujan JavaScriptissä ja muuttaa sitä jälkeenpäin helposti, sillä muuttujien arvoja ja tyyppejä voi muuttaa milloin tahansa. Jes!

Tässä on muutamia JavaScriptistä löytyviä tietotyyppejä:

• Number
  • Number (luku) määrittelee muuttujan, jolla on lukuarvo. Tämän tyyppiset muuttujat voivat teoreettisesti sisältää arvoja -äärettömästä +äärettömään. Se voi sisältää myös arvon NaN, joka tarkoittaa “Not a Number”. Tämä on seurausta siitä, kun olet sekoittanut jotakin ja poloinen JavaScript on mennyt hämilleen.
• String
  • String (merkkijono) määrittelee muuttujan, joka sisältää tekstiä kuten “Hei”, “Näkemiin” tai “Ärrän kierrän ympäri orren”.

• Boolean
  • Boolean (totuusarvo) määrittelee muuttujan, jonka arvo voi olla true (tosi) tai false (epätosi). Tätä tietotyyppiä käytetään usein päätösten tekemiseen koodissa. Ollako vaiko eikö olla? Booleanit kertovat vastauksen.

On olemassa myös muita tietotyyppejä, ja voit klikata tästä jos haluat lukea niistä lisää.

Muuttujan arvon asettaminen

Katsotaan miten muuttujiin voi tallentaa tietoa. Seuraavat koodinpätkät tekevät juuri niin.

myCoolVariable = 10;
myCoolVariable = ‘moi’;
myCoolVariable = true;

Yllä olevassa koodissa määritellään muuttujan myCoolVariable arvo kolme kertaa: kerran Numeeriseen arvoon (10), kerran String -tyypin merkkijonoksi (‘moi’) ja kolmannella kerralla  Boolean -totuusarvoksi (true eli tosi).

Muuttujan luominen ja arvon asettaminen samanaikaisesti

On myös mahdollista luoda ja määritellä arvo muuttujalle yhdellä koodirivillä. Se tapahtuu näin:

var myCoolVariable = 10;

Tässä luomme muuttujan myCoolVariable ja annamme sille arvon 10. Eikö ole hienoa?

Muuttujaan viittaaminen myöhemmin

Muuttujien luominen ja arvojen määritteleminen on mahtavaa. Niiden todellinen teho paljastuu kuitenkin vasta kun ne ovat käytössä. Miten se tapahtuu? Tunnisteen avulla tietenkin.

var myCoolVariable = 10;
var myCoolVariableDouble = myCoolVariable + myCoolVariable;

Tässä luomme muuttujan myCoolVariable ja annamme sille arvon 10.

Sen jälkeen luomme toisen muuttujan myCoolVariableDouble ja asetamme sen arvoksi kahden myCoolVariablen summan.

Nyt myCoolVariableDouble arvo on 20 ja meillä on ohjelmassamme kaksi muuttujaa. Kaksi!

Kaiva kamera esiin, iskä!

Se riittää muuttujista

Olemme käsitelleet muuttujien perusteet: niiden luomisen, arvon asettamisen ja niihin viittaamisen. JavaScript-ohjelmointi on kuitenkin paljon muuttujia enemmän. Nyt voimme siirtyä isompiin ja parempiin asioihin, kuten if-lauseisiin!

If-lauseet

Muuttujat on nyt opeteltu, mutta miten teemme niiden avulla mahtavia juttuja? Yksi keinoista on if-lauseiden käyttäminen.

If-lause on tapa, jolla koodari voi luoda ohjelmaansa päätösten ohjaamaa logiikkaa. Se tarkoittaa, että voimme kertoa ohjelmillemme että niiden täytyy tehdä jotakin tietyn ehdon mukaan. Katsotaan esimerkkiä:

If (10 > 20) {
  // Suorita tämä koodi
} else {
  // Suorita tämä koodi
}

{} eli aaltosulkeet määrittelevät koodiblokin. Jotkin JavaScriptin työkalut, kuten if-lause, vaativat nämä merkit erottamaan blokkia muusta koodista.

Avataan tätä hieman:

• if
  • Tämä on seuraava varattu sana. Se kertoo ohjelmalle, että sitä seuraava koodi on if-lauseen sisällä.

• (10 > 20)
  • Tämä osa on ehto. Ohjelma arvioi sitä ja valitsee tuloksen pohjalta mitä tehdä seuraavaksi. Ehdon tulos on aina Boolean-arvo, eli tosi tai epätosi.
  • Jos arvo on tosi, if-lause suorittaa ehdon jälkeen tulevan koodin.
  • Jos arvo on epätosi, tällöin else-blokin sisällä oleva koodi suoritetaan. Niin tapahtuu tässä esimerkissä, sillä 10 ei ole suurempi kuin 20.

• else
  • Tämä on toinen JavaScriptin avainsana. Se määrittelee koodin, joka suoritetaan jos ehto ei toteudu eli se on epätosi. else-blokin lisääminen ei ole pakollista. Jos lisäät sen, luot if else -lauseen.

Toivottavasti nyt on selvää, miksi meidän täytyy käyttää if-lauseen kanssa aaltosulkeita {}. Ilman koodiblokin rajoja ei olisi selvää, mitä koodia ohjelman tulee suorittaa ehdon toteutumisen perusteella.

If-lauseet ovat yksi monimutkaisten ohjelmien tärkeimmistä rakennuspalikoista. Näiden oppiminen kunnolla on tarpeen, jos tähtäät kilpailukykyiseksi JavaScript-koodariksi.

Silmukat

Javascript-koodin silmukat ovat seuraava tärkeä työkalu. Kuten nimi antaa olettaa, silmukka suorittaa koodia kerta toisensa jälkeen, kunnes ehto tulee täyteen. On olemassa muutamia erilaisia silmukoita, mutta tarkastelemme nyt niistä kahta. Jätän myös muutaman linkin, jos haluat jatkaa opiskelua.

For-silmukka

Katsomme ensin for-silmukkaa. Tässä on esimerkki:

var numberOfIterations = 10;
for (var i = 0; i < numberOfIterations; i++) {
  // tee jotakin 10 kertaa
}

 

Tämä saattaa näyttää monimutkaiselta verrattuna aiempiin asioihin, mutta se on varsin suoraviivaista kun hoksaat mistä siinä on kyse. Käydään esimerkki läpi osa kerrallaan:

• var numberOfIterations = 10
  • Tällä koodirivillä luodaan muuttuja ja määritellään sen arvo.

• for (var i = 0; i < numberOfIterations; i++)
  • for
    • Seuraava varattu sana, joka kertoo ohjelmalle että haluat kirjoittaa for-silmukan.
  • var i = 0
    • Luo ja määrittelee uuden muuttujan arvon. Tämä on erikoistapaus, sillä luomme sen for-silmukan sisällä. Se tarkoittaa, että muuttuja on olemassa vain for-silmukan suorittamisen ajan. Kun silmukka päättää työnsä, muuttuja heitetään bittiavaruuteen, hyvästi muuttuja!
  • i < numberOfIterations
    • Tämä rivi kertoo for-silmukalle, että sen tulee toimia vain niin kauan kun i on pienempi kuin muuttujan numberOfIterations arvo (10).
  • i++
    • Viimeinen rivi kertoo for-silmukalle, että jokaisen iteraation lopussa i:n arvoon täytyy lisätä 1.

Toivon, että voit nyt varsin helposti käsittää for-silmukan toiminnan. Se luo väliaikaisen muuttujan (i), jonka avulla seurataan silmukan iteraatioiden määrää. Se määrittelee ehdon iteroinnin jatkamiselle (vain silloin kun i < jokin arvo) ja sen jälkeen se määrittelee, mitä i:n arvoon lisätään jokaisella iteraatiolla (tässä tapauksessa +1, mutta se voisi olla mitä tahansa).

For-silmukka on tietenkin hyvä sellaisiin tapauksiin, kun tiedät miten monta kertaa haluat suorittaa pätkän koodia. Mutta mitä jos et tiedä? Silloin while-silmukka astuu estradille.

While-silmukka

While-silmukka on yksinkertaisempi kuin for-silmukka. Se ottaa ehdon ja suorittaa sitä, kunnes ehto on epätosi. Tässä on esimerkki:

var shouldKeepRunning = true;
while (shouldKeepRunning) {
  // Suorita koodia
  shouldKeepRunning = false;
}

• while
  • Kerromme ohjelmalle, että olemme kirjoittamassa while-silmukkaa.

• (shouldKeepRunning)
  • Tämä on ehto. Silmukan suorittamista jatketaan niin kauan, kun muuttujan shouldKeepRunning arvo on true. Voisimme kirjoittaa ehdoksi myös shouldKeepRunning == true, mutta tämä on siitä lyhennetty versio.

JavaScriptissa merkeillä == verrataan kahta arvoa, kun taas = asettaa arvon muuttujalle. Jos kirjoitat if (10 == 20), sanot oikeastaan “jos 10 on yhtä suuri kuin 20”.

Tämä silmukka suoritetaan vain kerran, sillä asetamme välittömästi ensimmäisellä iteraatiolla muuttujan shouldKeepRunning arvoksi false. Toimivassa koodissa se näyttää käyttäjälle hieman erilaiselta, mutta aina on varmistettava, että silmukka loppuu jossakin pisteessä. Emme halua aiheuttaa globaalia katastrofia!

Käsittelemme tässä vain nämä kaksi silmukkaa, mutta jos haluat lukea aiheesta lisää, voit tsekata tämän linkin.

Funktiot

Kaikki opettelemamme työkalut ovat mahtavia lyhyitä, juoksevia skriptejä varten, mutta mitä jos haluamme kirjoittaa suurempia ohjelmia joissa on tarve suorittaa samoja koodin pätkiä kerta toisensa jälkeen? Emme tietenkään halua jatkuvasti kopioida ja liittää uudelleen käytettävää koodia. Funktiot ovat olemassa juuri tätä varten.

Funktiot ovat uudelleenkäytettäviä koodinpätkiä. Tässä on taas esimerkki:

function doSomething(argumentOne, argumentTwo) {
  // tee jotain
}

Osiin purettuna saamme:

• function
  • Seuraava JavaScriptin avainsana.

• doSomething
  • Tämä on funktion tunniste. Aivan kuten muuttujan tunniste, se antaa meille mahdollisuuden viitata funktioon myöhemmin.

• (argumentOne, argumentTwo)
  • Sulkeiden sisällä oleva koodi on argumenttien lista. Kaksi sanaa argumentOne ja argumentTwo toimivat muuttujina funktiossa, ja niitä voidaan käyttää sellaisinaan. Katsomme pian miten muuttujat määritellään.

Mitä tahansa function -blokin sisällä olevaa koodia voidaan suorittaa niin monesti kuin halutaan kutsumalla funktiota. Tässä on esimerkki siitä:

doSomething(10, 20);

Käytämme funktion tunnistetta doSomething ja syötämme sille kaksi arvoa, 10 ja 20. Nämä argumentit sijoitetaan funktion agumentteihin argumentOne ja argumentTwo. Järjestyksellä on merkitystä, eli argumentOne saa arvokseen 10, ja argumentTwo puolestaan 20.

Funktiot toimivat muuttujien tavoin siinä mielessä, että voit viitata funktioon vain kyseisen blokin ja sen lapsien sisällä. Jos sinulla on esimerkiksi if-lauseen sisällä luotu funktio, et voi käyttää sitä if-lauseen aaltosulkeiden ulkopuolella.

Funktiot ovat äärimmäisen tärkeitä työkaluja jos haluat luoda monitahoisia ja dynaamisia ohjelmia, joten niiden harjoitteleminen on tärkeää. Lisätietoja aiheesta löydät täältä.

Yhteenveto

Olemme käyneet tässä artikkelissa läpi joitakin JavaScript-ohjelmoinnin perusteista, mutta opittavaa on vielä paljon, jotta voisit todella valjastaa JavaScriptin käyttöön. Koodaus on käytännöllinen taito, jonka voi oppia kunnolla vain harjoittelemalla.

On paljon palveluita, jotka auttavat sinua opiskelussa, kuten CodeAcademy, CodeSchool, Pluralsight ja tietenkin Codeberry! Toivomme, että tämä Javascript-opas auttaa sinua, ja voit käyttää opasta taitojesi kertaamiseen tulevaisuudessa. Onnea koodausurallesi!

 

Ohjelmointikoulu CodeBerryn “Aloittelijan opas” -sarjassa vastaamme kysymyksiiisi siitä, mikä ohjelmointikieli kannattaa valita, kuinka paljon tulet tienaamaan, mitä voit tehdä verkko-ohjelmoijana ja mistä aloittaa.

Haluaisitko oppia koodaamaan verkossa? Tule ja kokeile ensimmäisiä oppituntejamme maksutta Ohjelmointikoulu CodeBerryssä.