Kirjoittaja: MikaBug (2007).
⚠ Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi. ⚠
Komentorakenteet ovat tärkeä osa jokaista ohjelmointikieltä. Niiden avulla voidaan muuttaa koodin suorittamista käyttäjän valintojen tai muuttujien arvojen mukaan. Hyvin usein on myös tarve tehdä silmukoita, joissa tiettyä asiaa toistetaan useita kertoja peräkkäin.
Komentorakenteiden toiminta perustuu siihen, että tarkistetaan, onko jokin ehto tosi (true, nollasta poikkeava luku) vai epätosi (false, nolla). Jos ehto on tosi, suoritetaan määritellyt lauseet, muuten ei. Silmukkarakenteissa taas silmukkaa kierretään niin kauan, kuin ehto on tosi.
Yleensä ehto on muuttujien tai lausekkeiden vertailua keskenään. Jos vertailu pitää paikkansa, ehto on tosi, mutta jos se ei pidä paikkaansa, tulee ehdoksi epätosi.
JavaScriptin vertailuoperaattorit ovat seuraavat (a ja b ovat aiemmin määriteltyjä muuttujia):
| MERKINTÄ | TARKOITUS |
|---|---|
| a == b | a on yhtä suuri kuin b |
| a != b | a ei ole yhtä suuri kuin b |
| a < b | a on pienempi kuin b |
| a > b | a on suurempi kuin b |
| a <= b | a on pienempi tai yhtäsuuri kuin b |
| a >= b | a on suurempi tai yhtäsuuri kuin b |
Ehtoja voi yhdistellä ja-operaattorilla && sekä tai-operaattorilla ||. ja-operaattoria käytettäessä molempien / kaikkien ehtojen täytyy olla tosia, tai-operaattoria käytettäessä riittää että toinen / jokin ehdoista on tosi.
// Ehto on tosi, jos a on yhtä kuin b JA a on pienempi kuin c: a == b && a < c // Ehto on tosi, jos a on erisuuri kuin b TAI c on suurempi kuin d: a != b || c > d
Lisäksi on olemassa ei-operaatio !, joka kääntää toden lauseen epätodeksi ja päinvastoin.
// Ehto on tosi, jos a on erisuuri kuin b: !(a == b) // Ehto on tosi, jos a on pienempi tai yhtäsuuri kuin b: !(a > b)
Seuraavassa on esimerkkejä tosista ja epätosista lauseista:
| LAUSE | TOTUUSARVO |
|---|---|
6 == 2 + 5 – 1 | tosi |
17 < 18 | tosi |
3 > 5 | epätosi |
14 <= 14 | tosi |
"heikki" == "erkki" | epätosi |
4 != 5 | tosi |
2 < 3 && 21 <= 34 | tosi |
Seuraavaksi käydään läpi JavaScriptin vertailurakenteet (if-else, switch) sekä silmukkarakenteet (while, do-while, for), joissa hyödynnetään edellä opeteltuja asioita.
if-lauseessa tutkitaan, onko annettu ehto tosi, ja jos on, suoritetaan määritellyt lauseet. Alla on esimerkki yksinkertaisesta if-lauseesta.
if(ehto)
{
lause_1;
lause_2;
lause_n;
}Jos ehdon jälkeen tulee vain yksi suoritettava lause, voidaan aaltosulut jättää pois. Tällöin if-lause näyttää tällaiselta:
if(ehto) lause;
Mikäli ehto on tosi, suoritetaan ehdon jälkeen tulevat lauseet. Lauseet päättyvät normaaliin tapaan puolipisteeseen.
Jos ehto ei ole tosi, voidaan suorittaa vaihtoehtoinen lause lisäämällä se else-komennolla if-lauseeseen.
if(ehto) lause; else lause_v; // lause_v suoritetaan, jos ehto ei ole tosi
if-else-lauseella voidaan tutkia myös useampia ehtoja ja suorittaa lauseet, joiden kohdalla ehto on tosi.
if(ehto1)
{
// lauseet_1
}
else if(ehto2)
{
// lauseet_2
}
else
{
// lauseet_v
}Jos ehto1 on tosi, suoritetaan lauseet_1. Muutoin tutkitaan, onko ehto2 tosi, ja jos on, suoritetaan lauseet_2. Jos myös ehto2 on epätosi, suoritetaan lauseet_v.
Seuraavassa on esimerkki skriptistä, jossa kysytään käyttäjältä ikä ja sen perusteella tulostetaan ikää vastaava teksti.
<script type="text/javascript">
var ika;
ika = prompt("Kirjoita ikäsi allaolevaan kenttään.", "Ikä");
document.write("Olet ");
if(ika < 10) // Jos ika on alle 10
document.write("lapsi");
else if(ika < 20) // Jos ika on alle 20
document.write("nuori");
else if(ika < 30) // Jos ika on alle 30
document.write("aikuinen");
else if(ika < 50) // Jos ika on alle 50
document.write("keski-ikäinen");
else // Jos ika on 50 tai yli
document.write("vanhus");
</script>Ei kovin fiksu skripti, mutta valaisee toivottavasti if-lauseen toimintaa.
switch-lauseessa useita arvoja verrataan ehtona olevaan muuttujaan tai lausekkeeseen. Saman voi tehdä if-else-rakenteella, mutta switch-lausetta käyttämällä koodista tulee selkeämpi.
switch(lauseke)
{
case arvo_1:
Lause_1;
break;
case arvo_2:
Lause_2;
break;
case arvo_3:
Lause_3;
break;
default:
Lause_v;
}Jos lausekkeen arvo on arvo_1, suoritetaan Lause_1, jos lausekkeen arvo on arvo_2, suoritetaan Lause_2 jne. Jokaisen case-haaran päättää break-komento, joka katkaisee switch-lauseen suorittamisen heti, kun ehto täyttyy (muuten saatettaisiin suorittaa useampia case-haaroja). Jos yhdenkään case-haaran arvo ei täsmää ehtona olevaan lausekkeeseen, suoritetaan default-haara.
var luku = 21;
switch(luku)
{
case 14:
alert("Luku on 14");
break;
case 21:
alert("Luku on 21");
break;
default:
alert("Luku on joku muu");
}Yllä olevassa yksinkertaisessa skriptissä verrataan jokaisen case-haaran arvoa luku-muuttujan arvoon. Tässä tapauksessa suoritetaan toinen haara eli tulostetaan alert-ikkunaan teksti "Luku on 21".
while-silmukkaa toistetaan niin kauan, kuin ehto on tosi.
while(ehto)
{
lause_1;
lause_2;
lause_n;
}Seuraavassa esimerkissä tulostetaan luvut 0 – 9 omille riveilleen.
<script type="text/javascript">
var i = 0;
while(i < 10) // Toistetaan silmukkaa niin kauan kun i < 10
{
document.write("Luku " + i + "<br>");
i++; // Lisätään i:n arvoa joka kierros yhdellä
}
</script>Silmukan alussa muuttujan i arvo on 0. Tällöin ehto on tietysti tosi, koska nolla on pienempi kuin kymmenen. Silmukassa tulostetaan i:n arvo ja lisätään sitä yhdellä. Näin i:n arvoksi tulee 1 ja ehto on yhä tosi, koska 1 on pienempi kuin 10. Kun silmukkaa on kierretty riittävän monta kertaa, tulee i:n arvoksi 10, jolloin ehto muuttuu epätodeksi, koska 10 ei ole pienempi kuin 10. Tällöin silmukan toistaminen loppuu.
Kannattaa huomata, että while-lauseessa ehto tarkistetaan heti lauseen alussa, jolloin silmukassa olevia lauseita ei välttämättä suoriteta kertaakaan, mikäli ehto ei koskaan tule todeksi. Seuraavana esiteltävässä do-while-silmukassa lauseet suoritetaan aina vähintään kerran.
Alla lyhyesti do-while-silmukan rakenne.
do
{
// Täällä olevat lauseet suoritetaan vähintään kerran.
}
while(ehto)do-while silmukkaa käytettäessä lauseet suoritetaan aina vähintään kerran. Vasta sitten tarkistetaan, onko ehto tosi. Jos on, jatketaan lauseiden suorittamista, kunnes ehto tulee epätodeksi.
for-silmukkaa käytetään, kun tiedetään etukäteen, montako kertaa silmukkaa pitää kiertää. for-silmukkaan kuuluu laskurimuuttujan alustaminen, ehdon vertailu sekä laskurimuuttujan arvon kasvattaminen tai vähentäminen.
var i; // Määritellään ensin laskurimuuttuja i
// for-lauseessa alustetaan muuttuja, katsotaan onko ehto vielä tosi ja päivitetään laskurimuuttujaa:
for(i = 0; i < 10; i++)
{
Lause_1;
Lause_2;
Lause_n;
}Ensin for-lauseen sulkujen sisälle kirjoitetaan laskurimuuttujan alustus i = 0;. Tämä asettaa i:n arvoksi nollan, mutta muuttujan voi alustaa muullakin luvulla kuin nollalla. Tämän jälkeen tulee puolipiste, jota seuraa vertailulauseke i < 10;. Jos vertailulauseke on tosi, silmukan kiertämistä jatketaan. Mikäli se on epätosi, poistutaan silmukasta. Vertailulausekkeen jälkeen tulee puolipiste ja laskurimuuttujan päivittäminen i++ eli yleensä muuttujan arvon kasvattaminen tai vähentäminen yhdellä.
Laskurimuuttujan voi alustaa myös silmukan ulkopuolella, mutta silti for-silmukkaan on laitettava puolipiste ennen vertailulauseketta.
var i = 5;
for(; i < 10; i++)
{ ... }Seuraavaksi tulee esimerkkikoodi, jossa on sovellettu aiemmin opittuja asioita. Taulukkoon on tallennettu neljän kaupungin nimet, jotka tulostetaan for-silmukan avulla.
<script type="text/javascript">
var kaupungit = new Array("Pori", "Vantaa", "Kemi", "Oulu");
var i;
for(i = 0; i < kaupungit.length; i++)
document.write(i + 1 + ". kaupunki on " + kaupungit[i] + "<br>");
</script>Huomaa, että taulukon solujen määrä lasketaan suoraan for-silmukan suluissa length-ominaisuuden avulla. Saatuun lukuun verrataan i-muuttujan senhetkistä arvoa. Silmukkaa kierretään niin kauan, kuin soluja on jäljellä eli i on pienempi kuin solujen määrä.
Skriptin toiminta pitäisi muuten olla melko helppo ymmärtää aiemmin opittujen asioiden perusteella. Huomaa, että tulostuksessa muuttujaan i on lisätty luku 1, jotta kaupunkien järjestysnumerointi menisi 1...4 eikä 0...3.
Esimerkiksi assosiatiivisten taulukoiden (Opas 2 - muuttujat ja taulukot) tietojen läpikäyminen onnistuu helposti for-in-silmukan avulla. Koska tällaisessa taulukossa indeksit eivät yleensä ole numeroita nollasta ylöspäin, tavallista for-silmukkaa ei voida käyttää.
<script type="text/javascript">
var maat = {Suomi: "Helsinki", Ruotsi: "Tukholma", Ranska: "Pariisi"};
for(var i in maat)
document.write("Maan " + i + " pääkaupunki on " + maat[i]);
</script>Assosiatiivisen taulukon määrittelyn pitäisi olla tuttu asia. for-in-silmukassa luodaan ensin muuttuja i. Avainsanan in jälkeen tulee läpikäytävän taulukon nimi. Suoritettavat lauseet tulevat normaaliin tapaan aaltosulkujen { } väliin, paitsi jos lauseita on vain yksi.
Jokaisella silmukan kierroksella muuttuja i saa arvokseen kohdalla olevan solun indeksin. Esimerkiksi ensimmäisellä kierroksella on i:n arvo "Suomi", toisella kierroksella "Ruotsi" jne. Silmukkaa kierretään niin kauan, kuin taulukossa on soluja jäljellä.
Toisinaan voi olla tarpeellista keskeyttää silmukan kiertäminen ennen, kuin ehto muuttuu epätodeksi. Tällöin voidaan käyttää break- tai continue-komentoa. break hyppää kokonaan ulos silmukasta, kun taas continue aloittaa uuden kierroksen suorittamatta loppuja silmukan lauseita.
<script type="text/javascript">
var i = 0;
while(i < 10)
{
document.write(i + "<br>");
i++;
if(i == 5) // Jos i on 5, lopetetaan silmukan suorittaminen.
break;
}
</script>Yllä olevaa silmukkaa kierrettäisiin muuten kymmenen kertaa, mutta silmukkaan lisätty if-lause ja break-komento keskeyttävät silmukan, kun laskurimuuttujan i arvoksi on tullut 5.
Alla vielä esimerkki continue-komennon käytöstä.
<script type="text/javascript">
var i = 0;
while(i < 10)
{
document.write(i + "<br>");
i++;
continue;
document.write("Tätä ei koskaan tulosteta");
}
</script>Yllä olevassa koodissa continue-komennon jälkeen tulevia koodirivejä ei koskaan suoriteta, vaan continuen jälkeen aloitetaan heti uusi kierros.
Ehto- ja silmukkarakenteet ovat hyvin tärkeitä alueita ohjelmoinnissa, joten tämän oppaan sisältö pitäisi jokaisen hallita hyvin. Jos olet aiemmin ohjelmoinut esimerkiksi C:llä, C++:lla tai PHP:llä, kyseiset asiat ovat varmasti tuttuja jo näistä kielistä. Seuraavassa oppaassa selvitetään, mikä on funktio, ja opetellaan tekemään omia funktioita.
Kiitos tästä oppaasta! Kerrankin joku on kertonut oleellisia asioita näin lyhyessä muodossa, eikä pitkästi, kuten opaskirjoissa aina selitetään.
Tämän pohjalta on hyvä aloittaa javascript-ohjelmointi! Itsekin kiinnostuin tämän oppaan ansiosta ohjelmoimaan javascriptiä :P
Hienoa kuulla! :) Tarkoitus onkin kirjoittaa mahdollisimman selkeästi ja kansantajuisesti. Ja siten, että uuteen kieleen olisi mahdollisimman helppo päästä sisälle.
Päh, luulin että tässä käsiteltäisiin jotain muutakin kuin ohjelmoinnin alkeita, mielestäni turhaa laittaa esim if/for/while juttuja JS-oppaaseen... voisi tehdä ihan oman oppaan noitten käyttöön, kieliriippumattomasti, ja keskittyä javascript oppaassa javascriptin omiin kikkoihin, esim elementtien sisällön muokkaamiseen jne.
Oppaita on tulossa vielä 6 tai 7 lisää. Näissä on mukana mm. lomaketiedon ja merkkijonojen käsittelyä. Omasta mielestäni komentorakenteet kuuluvat jokaisen ohjelmointikielen oppaaseen, vaikka niissä toki paljon yhteneväisyyttä onkin.
En olekkaan huomannut tätä opasta aikaisemmin, pitänee katsoa paremmalla ajalla, niin voisi ehkä oppia javascriptiä. Vaikkakaan en taida paljoa kostua näistä perusteista. Mutta odotellaan näitä jatko-osia ;)
Juu tosiaan vielä tarvitaan ainakin tuo lomaketietojen käsittely, eli miten tarkistetaan että email kohdassa on todella sähköpostiosoite jne. Lisäksi tietty muut html sorkkimiset. (välkkyvä tausta... siitähä me kaikki tykätää)
Todella hyvä opas! Opin tästä paljon!
Lomaketietojen käsittely julkaistaan aivan tässä lähiaikoina. Siinä ei (ainakaan vielä) ole varsinaista sähköpostivarmistusta, mutta merkkijonojen käsittelystä on tulossa oma oppaansa, jossa käytäviä asioita soveltaen kyllä onnistuu koodailemaan mailiosoitteen tarkistavan skriptin. Ehkä lisäilen sen tuohon lomakeoppaaseenkin. Samoin taustavärin muuttamiset on tulossa seuraavissa oppaissa.
Gamehouse: Hieno kuulla, että oppaista on ollut hyötyä. Ja paljon uutta on vielä tulossa seuraavissa oppaissa.
Jos osaa esimerkiksi VB.NET:iä niin monet merkkijono funktiot ovat sieltä tuttuja ja toisinpäin.
Esimerkiksi teksti.substring(), teksti.contains() jne.
No siis niille jotka sanovat, että tyhmää kun on vaan alkeet, sanon, että tämä on JavaScript-perusopas.
Niinhän tämä on :) Mutta ei kannata lannistua vielä kenenkään, sillä tulossa on monta opasta, joissa kyllä tulee vielä reippaasti tietoa JavaScriptistä.
Mitenkä tehdään ikkuna, jossa kysytään vaikka nimee ja salasanaa, kun avaat omat sivusi. Näitten ohjeiden perusteella olis vaivatonta tehdä kirjautumisikkuna, jossa nimi- ja salasanakenttiin annettuja muuttujien arvoja verrattais ennalta koodiin kirjoitettuihin nimeen ja salasanaan. Kuulostaa kumminkin erittäin huonolta ratkasulta, että sivun lähdekoodistaa sais selville nämä tiedot. Vai tarvitaanko siihen skriptiä(php?), joka vertaa annettuja tietoja kokonaan toisella palvelimella oleviin tietoihin.
Tämmösillä oppailla nimenomaan alottelijankin on helppo alotella ja kiinnostua oikeesti asiasta menettämättä mielenkkintoa heti ensimmäisen tunnin jälkeen. Mahtavat oppaat kaikinpuolin ja mahtavat sivut kokonaisuudessaankin!
Uskoakseni JavaScriptillä ei kummoista kirjautumista pysty tekemään, PHP:llä se sen sijaan onnistuu melko helpostikin. PHP:ssä on käytössä myös md5-funktio, jolla voi muuttaa selkokielisen salasanan kirjaimista ja numeroista muodostuvaksi merkkijonoksi, josta alkuperäistä salasanaa ei pysty selvittämään. Muutenkin PHP:llä pystyy tallentamaan esim. palvelimella olevaan tiedostoon (tai tietokantaan) tunnukset, joihin ei silloin kuka tahansa pääse käsiksi.
JavaScriptillä ei kannata kirjautumista tehdä. Korkeintaan voi toteuttaa hienosti toimivan käyttöliittymän, kunhan pitää huolen siitä että kirjautuminen onnistuu myös silloin kun JavaScript on pois toiminnasta. Palvelimella täytyy kuitenkin varmistaa että tiedot täsmäävät. Juuri se seikka mikä tekee JavaScriptistä käyttökelvottoman kirjautumisiin.
PHP:ssa ja MySQL:n kanssa toimiessa salasanat saa näppärästi PASSWORD-funktiolla, en ulkomuistista muista mitä käyttää silloin salasanan suojaamiseen, mutta eipä sitä tarvitse miettiä kun aina tietokantakutsuja tehdessä heittää salasanan PASSWORDin lävitse, silloin kun vahvistuksia tarvitsee tehdä. Tämä tietty on makuasia, ja voihan sitä pistää suojausta tuplanakin MD5:n kanssa (vaikka hyödyllisyys meneekin sitten vähän kyseenalaiseksi).
Joo selvä kiitoksia.
lainaus:
i < kaupungit.length
Eikö ton pitäis olla että i on pienempi tai yhtä suuri kuin kaupungit.length
Taulukon koon ilmoittava kaupungit.length palauttaa solujen lukumäärän, eli 4. Solujen indeksit menevät kuitenkin 0...3, eli silmukkaa on kierrettävä niin kauan, kuin i on pienempi kuin 4. Eli kolmeen saakka. Tällöin kaikki kaupungit on tulostettu. Jos ehtona olisi pienempi tai yhtäsuuri, yritettäisiin silmukassa viitata viimeisenä taulukon soluun kaupungit[4], mutta tällaista soluahan siinä ei edes ole.
Sama sitten pätee nollapohjaisiin taulukkomuuttujiin ohjelmointikielestä riippumatta. Ja on myös hyvin kätevää ohjelmoinnin kannalta.
Koodin luettavuuden parannusehdotus:
document.write( (i + 1) + ". kaupunki on "
Niimpä olikin. Mikä siinä on ideana, että noi solut alkaa taulukossa nollasta? Ainakin näin muutaman tunnin aihetta opiskelleena luulis, että tommonen käytäntö aiheuttais vaan ongelmia :D Nojoo... täytyy vaan totutella.
Kuvitellaan vaikka että haluat käyttää yksiulotteista taulukkomuuttujaa kaksiulotteisesti. Useimmista ohjelmointikielistä löytyy modulo eli jakojäännös ( http://en.wikipedia.org/wiki/Modulo_operation ) sekä tietysti jako-operaattori. Näillä saa kätevästi laskettua esimerkiksi juuri X ja Y -sijainnit taulukkomuuttujassa.
0 1 2 3 4 5 6 7 8
Rivin leveys on 3, joten selvitetään X ja Y -sijainnit tässä taulukossa vaikka indeksille 4.
var width = 3;
var height = 3;
var indeksi = 4;
var x = indeksi % width;
var y = parseInt(indeksi / width);
alert(x + ' x ' + y);
var indeksi = y * width + x;
alert('Indeksi on ' + indeksi);Jos toimisimme yksipohjaisen taulukon kanssa, joutuisimme joka välissä suorittamaan ylimääräisen laskutoimituksen.
Lisäksi on esimerkiksi oletuksena lukumuuttujien arvo on nolla, joten siitä on kätevä lähteä liikkelle ilman että tarvitsee erikseen merkitä muuttujan arvoksi nolla (joskin tämä nyt juuri JavaScriptissä ei ole niin oleellista kun muuttujan arvon voi määrittää samalla kun muuttujan määrittää). Kun luo taulukkomuuttujan, niin ensimmäisen elementin indeksi on yllättäen taas se nolla.
Nollapohjaiset taulukot ovat usein myös nopeampia laskea, vaikkakin joidenkin kielten kääntäjät osaavat automaattisesti optimoida myös muulla pohjalla toimivat taulukot.
Ajan mittaan kyllä huomaa, että nollapohjaiset ovat varsin ylivoimaisia yksipohjaisiin verrattuna, kun oppii hieman mitä erinäköisempiä kikkoja ja alkaa kiinnittää huomiota siihen, että saa koodin toimimaan mahdollisimman kevyesti ja saa siitä eleganttia, toisinsanoen välttää turhanpäiväisiä laskutoimituksia ja pitää koodin siistinä ja simppelinä :)
Väärin:
lainaus:
// Ehto on tosi, jos a on erisuuri kuin b:
!a == b
Todellisuudessa ehto on tosi, jos a:n not-arvo on yhtäsuuri kuin b. Jotta kommentissa ilmaistu asia toteutuisi, pitäisi kirjoittaa !(a == b).
Esimerkki !0 == 3 on epätosi vaikka 0 on selvästi erisuuri kuin 3.
Suoritusjärjestys olisi aina syytä muistaa, jos ei muista niin sulkuja saa käyttää. ! on suoritusjärjestyksessä tasolla 4, kun == on tasolla 9.
Ja se seuraava esimerkki (!a > b) on myös samalla tavalla väärin.
Hyvä huomio, kiitoksia!
Korjattu.
Eikös tämä:
var i;
for(i = 0; i < 10; i++)
{
Lause_1;
}ole ihan sama asia kuin tämä? :
var i;
i = 0;
while(i < 10)
{
Lause_1;
i++;
}Mikä tarkoitus on sitten for silmukan olemassaololla?
Molemmat kelpaavat, mutta for-silmukkaa käytetään silloin, kun ennalta tiedetään, kuinka monta kierrosta silmukkaa on tarkoitus kiertää. Käytännössä for-silmukan voi korvata while-silmukalla, mutta monesti for-silmukan käyttö on selkeämpää ja ainakin parempien ohjelmointitapojen mukaista.
Ookkei, kiitos tiedosta! On kyllä todella hienoja oppaita. En ole ikinä mitään HTML/CSS:ää suurempaa 'ohjelmoinut', enkä tajua mitään javascriptistä minkään muiden oppaiden avulla, mutta tämä opas on hyvin selvä ja ymmärettävä!
Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.