Javascript

Mureakuha

Loikkaa: valikkoon, hakuun

Sisällysluettelo

[muokkaa]

Taustaa

JavaScript on Netscape Communications Corporationin kehittämä pääasiassa WWW-ympäristössä käytettävä komentosarjakieli. JavaScriptin tärkein sovellus on mahdollisuus lisätä Web-sivuille dynaamista toiminnallisuutta. JavaScriptin nykymuoto on protyyppi-oliopohjainen komentosarjakieli, jonka syntaksi perustuu löyhästi C-ohjelmointikieleen. JavaScript tukee mm. dynaamisia taulukoita, virheiden käsittelyä, klosuureja ja "säännöllisiä lausekkeita".

JavaScriptin kehitti alun perin Netscapen Brendan Eich nimellä Mocha. Nimi muutettiin LiveScriptiksi ja viimein markkinointisyistä JavaScriptiksi. Java-ohjelmointikielen kanssa JavaScriptillä ei perussyntaksin lisäksi ole kuitenkaan juurikaan yhteistä.

Viimeisin kielen määrittely on JavaScript 1.7 vuodelta 2006, jota vastaan standardi ECMA-262 Edition 3. Standardoitua JavaScriptiä nimitetäänkin nimellä ECMAScript. Useat selaimet tukevan standardin lisäksi lisätoiminnallisuutta, kuten Mozilla-selainten E4X, joka on XML:n käsittelyyn erikoistunut kielen laajennus (standardi ECMA-357).

EcmaScriptin editio 4 tähtää "JavaScript 2.0":n, joka normaalistaisi kieltä monelta osaa. Tällaisia uudistuksia olisivat mm. luokat ja nimiavaruudet , ja nykyään kovasti muodissa oleva "valinnainen staattinen tyypitys". Standardi tosin on ollut työn alla jo vuodesta 1999, eikä sen valmistumisesta, tai valmistumisen ajankohdasta ole varmaa tietoa.

[muokkaa]

JavaScriptin käytöstä

Koska JavaScript suoritetaan selaimessa, liittyy sen käyttöön tiettyjä "eettisiä ongelmia": palvelimella ajettavat CGI:t toimivat joka alustalla jokseenkin samalla tavalla, mutta eri selainperheillä tuntuu edelleen olevan hyvin erilaisia käsityksiä, tai ei käsitystä laisinkaan, JavaScriptistä.

Lisäksi, koska JS käsitetään laajalti "nopeaksi ja likaiseksi" tavaksi lisätä sivuilleen turhaa toiminnallisuutta, "silmän ruokaa", "kelloja ja pillejä" tai vielä pahempaa, mainoksia, on osa ihmisistä on ottanut selaimistaan koko scriptin tai ainakin osan sen ominaisuuksista pois päältä. Toisaalta useimmissa sokeiden selaimissa sitä ei tueta laisinkaan, tai tuki on vajavainen, kattaen lähinnä kielen versioiden 1,0-1,2 lomakkeenkäsittelyominaisuuksia. Myös erilaiset mainosten blokkaajat voivat estää skriptiäsi toimimasta oikein.

Siksipä hiemankin kotisivuja vakavammissa projekteissa on aina suuri päätös, mihin ja miten tärkeään toiminnallisuuteen JS:ää uskaltaa ja on kannattavaa käyttää. Jokatapauksessa koodi on testattava huolella mahdollisimman usealla alustalla.

[muokkaa]

Kenelle JavaScript?

JS kuuluu web-ohjelmoijan yleissivistykseen, eikä sen opetteleminen Javan, tai C++:n pohjalta paljoa teetäkään. Ensimmäiseksi ohjelmointikieleksi se on sekä hyvä että huono vaihtoehto. Hyvä siinä mielessä, että se on suhteellisen yksinkertainen ja helppo oppia. Syntaksiltaan se muistuttaa "oikeita ohjelmointikieliä", (C++:aa ja Javaa), luoden sekä ohjelmointikokemusta, että hyvän ponnahduslaudan näiden kielten myöhempään opetteluun.

Toisaalta asia voidaan ajatella myös siltä kannalta, että rajoittuneisuutensa takia JS:n hyötykäyttö vaatii ohjelmointitekniikan ennestään hyvää hallintaa. Jokatapauksessa sillä ei yksistään, ilman php:tä, perl:iä, tms. tee juuri mitään.

Osaamattomissa käsissä JavaScript harvoin parantaa sivuja, pikemminkin päinvastoin: Moi, tervetuloa ekoille sivuilleni. ... Kerroppa nimesi. ... Terve, -nimi-!

[muokkaa]

Syntaksi

[muokkaa]

Koodin upottaminen html:ään

Koodia voidaan upottaa (x)html-sivulle sijoittamalla koodi <script>-elementtiin. Lisäksi elementille annetaan languageparametri, joka kertoo mikä kieli on kyseessä. languageparametrin yleisin arvo on "JavaScript", mutta sille voidaan määrittää myös käytettävä versio esim. "JavaScript1.4". 

<html>
  <head>
    <title>Javascriptiä</title>
 
    <script language="JavaScript" SRC="tiedostonimi.js"> </script>
    <!-- Edellä oleva rivi lukee javascript koodin tiedostonimi.js-tiedostosta -->
 
    <script language="JavaScript">
      //tähän sitten voitaisiin sijoittaa koodia.
      //Yleensä tässä esitellään funktioita
    </script>
  <head>
  <body>
    <script language="JavaScript">
      //tähän sitten voitaisiin sijoittaa koodia,
      //joka voi tulostaa suoraan tekstiä tai tehdä muuta kivaa.
    </script>
  </body>
</html>
[muokkaa]

No script

<noscript>-elementtiin voidaan sijoittaa tulostettavaa tekstiä, joka halutaan näytettävän niillä selaimilla, joissa ei ole javascriptiä käytössä.

[muokkaa]

Skriptin suoritus sivua ladattaessa

Jos skripti suoritetaan sivua ladattaessa (käytännössä tarkoittaa sitä, että funktiota EI laukaista onload-tapahtuman käsittelijällä), seuraa siitä muutamia seikkoja.

  • Jos esim. yritetään perinteisesti pistenotaatiolla viitata taulukkoon, tai kuvaan, tai DOM:lla mihin tahansa elementtiin, joka on ladattavalla sivulla suoritettavaa skriptiä alempana, ei skripti löydä sitä, ja syntyy virhe. HTML-parserihan ei ole vielä ehtinyt tulkita kyseisiä tageja.
  • Document.write()-metodi tas toimii pelkästään sivua ladattaessa suoritettavissa skripteissä. Sen toimintaperiaate kun on yksinkertaisesti vain "lennossa" syöttää sille parametreina annetut muuttujat sellaisenaan sivua lataavalle HTML-parserille. Jos metodia käyttää latauksen jälkeen suoritettavissa skripteissä, käynnistyy parseri uudelleen, jolloin koko aiemmin ladattu HTML-dokumentti pyyhiytyy pois, ja jäljelle jää vain document-writellä syötetty teksti.
[muokkaa]

Opereettorit

[muokkaa]

Asetuslause

JavaScriptissä asetuslauseen operaattorina käytetään yhtäsuuruusmerkkiä ( = ). Asetuslause luetaan siten, että operaattorin oikealla vasemmalla puolella on muuttuja, ja oikealla puolella asetattava arvo (vaikkapa merkkijona, tai kutsuttava funktio).

  • Kikkailusta tykkäävä voi antaa monelle muuttujalle saman arvon seuraavasti niputtamalla: 
var a,b,c,d;
a = b = c = d = 4;
ducument.write(a+" "+b+" "+c+" "+d); //kirjoittaa 4 4 4 4 
 
[muokkaa]

Aritmeettiset sekä lisäys ja vähennys operaattorit

Aritmeettisilla operaattoreilla suoritetaan perus-laskutoimitukset. Vaikeampiin juttuihin, kuten potensseihin ja juuriin ei ole "sokeroitua" notaatiota, vaan pitää käyttää math-valmisluokan metodeita. ...Ja vaikeimmat jutut joutuu implementoimaan itse.

aritmeettiset peraattorit
OperaattorimerkitysLyhennysmerkintämerkitys
+ yhteenlasku* += Muuttujan arvoon lisätään
- vähennyslasku -= Muuttujan arvosta vähennetään
* kertolasku *= Muuttujan arvo kerrotaan
/ jakolasku /= Muuttujan arvo jaetaan
% jakojäännös %= Muuttujan arvo korvataan sen jakojäännöksellä


Lisäys ja vähennys operaattorit
++ Muuttujan arvoon lisätään yksi
-- Muuttujan arvosta vähennetään yksi

JavaScript noudattaa peruslaskujärjestystä: suunta on vasemmalta oikealle, ensin jako ja kerolaskut. Normaalin elämän tapaan poikkeukset tähän järjestykseen voidaan esittää sulkeilla.

  • Yhteenlasku-operaattoreita + ja += käytetään myös merkkijonojen katenointiin. Siksi, jos merkkijonomuotoiselle muuttujalle halutaan suorittaa yhteenlasku, on se muutettava numeromuotoon parseInt() -metodilla. Muilla operaatiolla muutos on automaattinen.
  • Operaattoreita ++ ja -- saa käyttää vain yksinään, ei siis osana aritmeettisia lausekkeita.

Huomaa kuitenkin seuraava syntaktinen seikka: 

var a=3;
var b=a++;
document.write(a + " ja " + b);

Edellinen kirjoittaisi seuraavasti: 4 ja 3. Jos siis b:n arvoksi olisi halutta antaa a+1, sen arvoksi olisi annettu a+1, EI a++. Media:Esimerkki.ogg

[muokkaa]

Vertailu operaattorit

Palauttavat totuusarvon sen mukaan, onko väite totta.

operaattoriväite
== yhtäsuuri
 != erisuuri tai eri tyyppiä
<= suurempi tai yhtä suuri
< suurempi
>= pienempi tai yhtä suuri
> pienempi
=== yhtäsuuri ja samaa tyyppiä
 !== erisuuruiset, tai jos saman suuruiset, niin eri tyyppiä
[muokkaa]

Loogiset operaattorit

Loogisilla operaattoreilla väitteitä voidaan niputtaa seuraavasti:

Loogiset operaattorit
&& ja -operaattori (molempien oltava totta)
|| tai -operaattori (jomman kumman oltava totta)
 ! vertailun, tai totuusarvon eteen laitettuna kääntää totuusarvon


Läpikäyntijärjestys on vasemmalta oikealle. Sulkeita voidaan käyttää, jos siitä halutaan poiketa.

[muokkaa]

Muuttujat esitellään paikallisiksi var-määreellä

var a=3
var b="merkkijono"

Useita muuttujien "esittelyitä" voidaan niputtaa seuraavalla tavalla, pilkkua käyttäen. 

var a=3,b="merkkijono"
[muokkaa]

Puolipiste, rivin vaihto, tyhjä tila.

  • Puolipisteellä erotetaan kaksi samalle riville kirjoitettua lausetta, muulloin sen käyttö on valinnaista.
  • Yleensä rivin vaihtoa käytetään erottamaan lauseet toisistaan. Riviä ei saa vaihtaa kesken lauseen tai lausekkeen. Ainoa poikkeus tähän on, että merkkijono voidaan katkaista takakenoviivaa käyttäen seuraavasti: 
document.write("hei \
maailma")
  • Tyhjällä tilalla on syntaktinen merkitys silloin, kun nimi erotetaan määreistä, mm. seuraavissa tilanteissa: var, new ja function. Muulloin sen käyttö, tai käyttämättömyys on vapaa valintaista.

Esimerkkejä: 

var a;
function b() {...}
new Date
[muokkaa]

Kommentointi

//yhden rivin kommentt
 
/*monirivinen
kommentti*/
  • HUOM! Monirivisen kommentin sisällä ei saa olla toista monirivistä kommenttia.
[muokkaa]

Muuttujat

JavaScript on heikosti tyypitetty kieli. Tämä tarkoittaa, ettei muuttujia tarvitse välttämättä esitellä, ja muuttujassa voi sijaita minkä tahansa perustyypin arvo, muuttujan arvo voi myös vaihtua kesken ohjelman. JavaScriptin perustyypit ovat:

  • numero
  • merkkijono
  • taulukko
  • olio
  • totuusarvot true ja false JavaScript käsittää tavallisina merkkijonoina, vaikka niitä voidaankin käsitellä ilman lainausmerkkejä.

Lisäksi on merkkijonomuotoisia erikoistyyppejä:

  • NaN, eli "not a anumber" -ei numero. Palautetaan jos merkkijonoa yritetään käyttää aritmeettississä operaatiotiossa.
  • undefined -muutttujan arvoa ei ole määrielty. Esim: var a;document.write(a) kirjoittaisi näytölle undefined.
  • null annetaan, jos "muuttujalle on määritelty arvo, mutta sitä ei ole olemassa". Ehkä yleisimmin siihen törmää skripteissä, joissa käsitellään yhtä, tai useampaa lapsi-ikkunaa pää-ikkunasta käsin. Pääikkunan skriptissä käyttäjän sulkemaa ikkunaa esittävän olion arvo olisi tämän jälkeen null.

Kun muuttujalle annetaan arvo, kerrotaan sille sen tyyppi siten, että merkkijono on aina lainausmerkeissä, numero ei ole. Totuusarvo voidaan esittää sekä lainausmerkeillä, että ilman.

  • Jos muuttujalle yritetään antaa merkkijonoa ilman lainusmerkkejä, luulee JavaScript, että muuttujan arvoksi yritetään asettaa merkkijonon nimistä muuttujaa (jota siis mitä todennäköisimmin ei ole olemassa), ja nostaa virheen.

Heikosta tyypityksestä seuraa, että mikä javassa kirjoitettaisiin näin: 

int a; //kokonaisluku-tyyppinen muuttuja esitellään
a = 3; //sille annetaan kokonaisluku-tyypin arvo
//tai 
String b = "tämä on javaa"; //merkkijono-olio esitellään ja sille annetaan merkkijonotyypin arvo 
 

kirjoitetaan JS:ssä näin: 

var a; //muuttuja a esitellään "paikalliseksi muuttujaksi"
a = 3 //sille annetaan numero-tyypin arvo
var b = "tämä on JavaScriptiä" // muuttuja b esitellään paikalliseksi ja arvoksi annetaan merkkijono 
 

Se tarkoittaa myös sitä, että JavaScriptissä muuttujien tyyppiä voidaan vaihtaa vapaasti kesken suorituksen: 

var a = 3 //numero
var b = "Nythän rajusti irroitellaan!" //merkkijono
a = b;

Javassa sama temppu ei onnistuisi. JavaScript sallii myös saman nimisen muutujan uudelleen esittelyn saman skriptin/näkyvyysalueen/funktion sisällä, tällöin vain ensimmäinen arvo korvataan viimeisimmällä. 

var a = 3;
var a = 4;
document.write(a); //kirjoittaa 4, kuten pitääkin 
 
[muokkaa]

Näkyvyydestä

Eräs JS:n parjatuimpia ominaisuuksia ovat tavat, joilla se käsittelee muuttujien näkyvyyttä. Joka on kuullut, että JavaScriptin pitäisi olla heikosti tyypitetty kieli, saattaa ihmetellä, miksi jokaisen käyttöön otettu muuttuja silti hankalan näköisesti esitellään var-määreellä. Syy siihen on, että jos niin ei tehtäisi, jopa funktion sisällä (jossa useimmat muuttujat sijaitsevat) olevat var-määreettömät muuttujat muuttuvat funktion suorituksen jälkeen globaaleiksi, eli niiden arvo näkyy ja on muutettavissa kaikkialta skriptissa! Tämä on "ominaisuus", jonka kanssa vain on opittava elämään.

Siksipä tämä koodi on JS:ssä täysin oikein: 

function funktio(){
...
a = "Tämä teksti näkyy!"; 
...
}
 
funktio();//kutsutaan funktiota
document.write(a);

Tästä syystä var-määreen käyttö kannattaa ottaa tavaksi.

Siis:

  • var-määre salaa muuttujaa näkymästä hierarkissa alemmille funktioille (niille jotka ovat funktion kutsuneet), kuitenkin funktiosta kutsutuissa funktioissa muuttuja näkyy.
  • Jos muuttuja ei ole minkään funktion sisällä, näkyy se koko web-sivun kaikissa skripteissä.
  • Jos on funktion sisällä on jonkin globaalin muuttujan kanssa saman niminen, var-määreellä merkitty muuttuja, JS valitsee (luonnollisesti) funktion sisällä olevan. HUOM! Jos määre puuttu, tulkitsee JS sen siten, että globaalin muuttujan arvoa muutetaan. Rautalangasta väännettynä: 
var a = "moi";
function testi1(){
  var a = "hei"; //"Jep, jep. Uusi paikallinen muuttuja nimeltä a"
  document.write(a); //kirjoittaa "hei"
}
testi1();
document.write(a);//kirjoittaa "moi"
 
var b = "moi";
function testi2(){
  b = "hei"; //"Ohjelmoija varmaan haluaa muuttaa b:n arvoa, koska ei käytä var-määrettä"
  document.write(a); //kirjoittaa "hei"
}
testi2();
document.write(b); //kirjoittaa "hei" 
 

Toinen seikka on, että JS:ssä kaikki, jopa eri script-määreissä olevat skriptit ovat samassa nimiavaruudessa. Tämä tarkoittaa, että skriptistä a voitaisiin aivan helposti kutsua skriptin b funktiota, se tarkoittaa myös sitä, että jos a:ssa ja b:ssä on saman niminen, minkään toisen funktion, tai olion sisään suojaamaton, funktio, korvataan järjestyksessä ensin esitelty funktio viimeisimmällä, samoin, kuin muuttujienkin tapauksessa. Tämä voi aiheittaa virheitä. Näin voi toisinaan käydä kun sivuille liitetään "kolmansien osapuolten" tekemää koodia.

Turvallisinta tietenkin, josa vain mahdollista, on sijoittaa koko koodi yhteen suureen, kerran sivua ladattaessa kutsuttavaan funktioon ja käyttää sen sisällä jokaisessa muuttujassa var-määrettä. Koodi-spefisille html-elementeille olisi annettava mahdollisimman yksilöllinen ID.

[muokkaa]

Ohjausrakenteet

[muokkaa]

Ehtolauseet

Ehtolause suoritetaan, "siihen mennään", mikäli sille sulkeissa annettu ehto on tosi. (Ks. loogiset peraattorit ja vertailu operaattorit.)

[muokkaa]

if

Eli siis perus-ehtolause monien muiden ohella myös JavaScriptissä. 

<script type="text/javascript">
//Kirjoittaa Lounasaika, kun kello on 11
 
var d=new Date()
var time=d.getHours()
 
if (time==11) 
{
document.write("<b>Lounasaika</b>")
}
</script>
[muokkaa]

if-else

If-lauseen else haaran on oltava heti if-lauseen jälkeen. Se määrittelee, mitä tehdään, jos ehto ei ole tosi. (Kuten lähes jokaisessa muussakin kielessä.) 

<script type="text/javascript">
//Sama kuin edellinen, mutta nyt ilmoittaa myös, jos lounasaika ei ole.
 
var d=new Date()
var time=d.getHours()
 
if (time==11) 
{
document.write("<b>Lounasaika :D</b>")
}
else 
{
document.write("<b>Ei-lounasaika :(</b>")
}
</script>
[muokkaa]

?-operaattori

Syntaksi: 

(ehto)? jos-totta-aseta-arvoksi-tämä : jos-valetta-aseta-arvoksi-tämä

Ehdollinen lauseke -operaattori on tuo C:stä niin ikään peritty toisinaan kätevä lyhennysmerkintä. Nimensä mukaan sitä käytetään lausekkeissa, eli silloin, ja vain silloin kun jollekin annetaan jokin arvo, tällöin lauseke-operaattorilla voidaan suorittaa valinta kahden asetettavan arvon välillä. Edellinen lounasaika -ehto voitaisiin siten kirjoittaa myös näin: 

var d=new Date();
var time=d.getHours();
 
document.write((d==11)? "<b>Lounasaika :D</b>" : "<b>Ei-lounasaika :(</b>" );

Tämä on yksi niistä rakenteista, joilla joidenkin mielestä koodista tulee vaikealukuista. Käytä siis harkiten!

[muokkaa]

switch

Jos samalla muuttujalla, tai funktion palautusarvolla voi olla useampia arvoja, joiden pohjalta valinta tehdään, voidaan useita valintoja elegantisti niputtaa switch-lausella: 

switch(muuttuja/funktio) {
  case <sen mahdollinen arvo> : //jos muuttujan arvo on tämä, niin:
    ... //tee jotain
    break; //lopeta
  case <toinen mahdollinen arvo> : //jatkuen samaa rataa
    ...
    break;
  default: //jos muuttujan arvo ei ollut mikään edellisistä, niin
    ... //tee jotain
}

Tätäkin rakennetta tarvitaan oikeastaan aika harvoin sen rajoitusten vuoksi; huomattavasti useammin joudutaan kirjoittamaan monia if-else-lauseita sisäkkäin. (C:n tekstipohjaisissa paina x tehdäksesi y -hoputteissa switch oli mitä kätevin, ja siihen tarkoitukseen se varmaan alunperin kehitettiinkin.) Vaikkapa suuren ohjelman virheiden käsittelijä voitaisiin kuitenkin tehdä muun muassa näin: 

try{
  ... //jotain vaarallista
}
catch(err){
  var a; //puolipakollisesti (lue näkyvyydestä lisää) "esitellään" muuttuja a
  switch(err.name) { //case-lauseiden testattavaksi pyydetään error-oliolta sen nimi
    case "EvalError": //onko se EvalError?
      a = "virhe käytettäessä eval() -funktiota"; //jos on, tee näin
      break; //"anna jo periksi, kaikki tehtävissä oleva on tehty"
    case "SyntaxError"://jne.
      a = "syntaksivirhe";
      break;
    case "ReferenceError":
      a = "lähdevirhe";
      break;
    case "RangeError":
      a = "virhe muuttujan arvossa";
      break;
    case "TypeError":
      a = "tyyppivirhe";
      break;
    case "URIError":
      a = "virhe URI:a koodattaessa";
      break; 
    default: //mitä; ei mikään tunnetuista virhetyypeistä?
      a = "tuntematon virhe"; //-tee silloin näin
  }
  alert("Ohjelmassa on tapahtunut " + a + " ja sen toiminta lopetetaan.\n\n" + err);
}

Huomaa break -komennot jokaisen casen jälkeen. Kuten arvattavissa on, sen avulla käsketään ohjelmaa hyppäämään suoraan lauseen loppuun. Jos esimerkiksi edellisestä koodistamme puuttuisi "TypeError":in jälkeinen break, ohjelman suoritus siirtyisi suoraan seuraavaan kohtaan, "URIError":iin, ja a:n arvoksi tulisi virheellisesti "virhe URI:a kodattaessa".

Nimensä mukaisesti defaultilla määritellään "defaultti", oletusarvoisen, toiminta, joka suoritetaan, mikä yksikään case-lause ei natsaa.

[muokkaa]

Silmukat

Silmukoilla saadaan aikaan toistoa. Silmukkaa toistetaan niin kauan kuin sen ehto on tosi. (Taas ks. loogoset ja vertailu operaattorit)

[muokkaa]

for

Javascriptin for-silmukka on samanlainen syntaksiltaan, kuin C:ssä tai Javassa.

For-silmukoiden yleisin käyttökohde on erilaiset taulukot, sillä for-silmukan avulla voidaan käydä taulukkoa läpi hyödyntämällä incrementtiä. 

for(increment-muuttuja,toinen muuttuja; ehto;incrementin muutos,toinen muutos,jne.)

Increment-muuttujia voidaan esitellä useampiakin, ja toisin kuin C:ssä, voivat ne olla eri tyyppi, vaikkapa numero ja taulukko. Erottimena käytetään pilkkua.

For-silmukkaa suoritetaan niin kauan kuin ehto on tosi.

Incrementin muutoksen ei tarvitse olla ++ tai --. Se voi olla myös kertolasku tai muu matemaattinen lauseke. Huom! Rivien säästäminen tekemällä incrementissä muutakin, kuin luuppilaskurin kohottamista on äärimmäisen rumaa ohjelmointityyliä!

Muista poiketen päättymätön silmukka voidaan tehdä forilla myös jättämällä ehtokohta kokonaan tyhjäksi. Muissa silmukoissaha ehdoksi annetaan siolloin loogisesti true, tyyliin while(true). 

for(var i=0; i<10; i++)
{
   document.write("Tervehdys Mureakuhalainen! <br />");
}

Edeltävä koodi tulostaisi tekstin kymmenen kertaa.

[muokkaa]

while

Eli siis se tuttu ja turvallinen yleis-silmukka, vaikka käytännössä foria usein suositaankin sen edellä. Toiminta on samanlainen kuin forissa, mutta ilman syntaksisokeria laskurimuuttujalle ja sen kohottamiselle. 

while(ehto)...

Siten edellinen koodi jouduttaisiin toteuttamaan while-silmukalla seuraavasti: 

var i=0;
while(i<10)
{
   document.write("Tervehdys Mureakuhalainen! <br />");
   i++;
}
[muokkaa]

do-while

Toisinaan (muttei kylläkään usein) tulee tilanteita, joissa jokin asia pitäisi tehdä vähintään kerran, mutta suorituskertojen maksimimäärää ei tiedetä. Tähän tarkoitukseen on do-while silmukka, jossa suoritusehto tarkistetaan vasta silmukan lopussa. 

do{
...
}while(ehto);

Esimerkkikoodimme tehtäisiin siis näin: 

var i=0;
do{
   document.write("Tervehdys Mureakuhalainen! <br />");
   i++;
}while(i<10);
[muokkaa]

for-in

Kyseinen silmukka on nopeampi tapa taulukon tai olion tietokenttien läpikäymiseen. 

for(<muuttuja> in <taulukko>)

Tässä silmukassa siis kierretään niin monta kertaa kun taulukossa (tai oliossa) on tietokenttiä. Jokaisella kierroksella "muuttuja" saa arvokseen seuraavan tietokentän, jolle silmukan sisällä voidaan tehdä, mitä sille sitten ikinä tehdäänkin. Rajoituksensa sillä on mm. että taulukko voidaan käydä läpi vain alusta loppuun päin.

[muokkaa]

Muita rekanteita

[muokkaa]

break ja continue

Valitettavasti JavaScript on yksi niitä juuriltaan, raa'asta raudasta, rekistereistä ja niiden välisistä hyppykäskyistä, hairahtuneita kieliä, joiden mielestä kaikki on esitettävä ihmisystävällisesti, "rakenteisella tavalla", siksi goton kaltaista absoluuttusta hyppyä ei sallita. Kuitenkin monien muiden ohessa myös JS karsii käytännön pakosta rakenteisuuden ihannetta silmukoiden kohdalla, breakin ja continuen muodossa.

  • Silmukan rungon sisällä oleva "break" kertoo ohjelmalle, että silmukan suoritus lopetetaan välittämösti. Näin voi paeta myös "ikuisista simukoista".
  • continue taas jättää lopun silmukan rungosta käymättä läpi ja siirtyy suoraan ehdon tarkistukseen.

Molemmat rakenteet toimivat kaikissa rakenteellisissa silmukoissa, myös for/in:issä. Kuitenkaan muullalla, kuten tavallisessa if-else -ehtolauseissa niitä ei voi käyttää, ei myöskään funktioissa. (Eli siis esimerkiksi, break <funktion nimi> on kielletty!)

Näillä rakenteilla on eräs äärimmäisen tärkeä ja hyödyllinen ominaisuus, jolla koodin kirjoittaminen yksinkertaistuu toisinaan huomattavasti: silmukoille voidaan antaa nimi. Tämä tulee kyseeseen silloin, kuin monimutkaisessa algoritmissa on silmukoita monta sisäkkäin, ja kun tämä "rakenteellinen hyppykäsky" täytyisi ulottaa hierarkiassa käytävää silmukkaa alempiin silmukoihin asti. Tällöin break, tai continue käskyjen jälkeen voidaan ilmaista sen silmukan nimi, johon käsky halutaan ulottaa.

Nimi silmukalle annetaan seuraavalla syntaksilla: (Huomioi kaksoispiste!) 

silmukan_nimi : for(;;) {//mikä tahansa muukin silmukkarakenne siis käy   
  ...
  for(;;){
  ...
  break silmukan_nimi; //tämä käsky ulottuu hierarkiassa alaspäin!
  }
}
[muokkaa]

with

With on JS:n ja Visual Basicin erikoisuus. Sillä voidaan "standardoida" olioon viittaus. Toisinaan, vaikkapa pitkiä DOM-rutiineja tehtäessä, tai samaa oliota toistuvati käytettäessä sillä voidaan säästää muutamia merkkejä, muuta merkitystä sillä ei ole.

Syntaksi: 

with(olio){
  olionMetodi();
  olion_tietokenttä = "...";
  muuttuja = olionToinenMetodi();
  //jne.
}

Siten esimerkiksi kanooninen DOM -apa liittää dokumenttiin tekstiä voitaisiin "lyhentää" näin: 

<span id="anchor_point"></span>
<script type="text/JavaScript">
  with(document){ //tässä viitataan document-olioon molempien alla olevien metodien puolesta
    a = getElementById("anchor_point"); 
    b = createTextNode("Hoi, sie maailma!"); 
  }
  a.appendChild(b);
</script>

Edellisessä tapauksessa siis säästettiin merkkejä huikeat kaksi kappaletta. Siksi with onkin käytännössä aika harvinainen rakenne, joka yleensä vain mutkistaa koodia tuottamatta mitään oikeaa ajan, saati aivokapasiteetin säästöä. Käytä harkiten!

[muokkaa]

Funktiot

[muokkaa]

Oman funktion tekeminen

[muokkaa]

Taulukkojen käyttäminen

[muokkaa]

Teksti

Tekstin käsitteleminen on javascriptissä pyritty tekemään helpoksi. 

var etunimi = 'Kalle';
var sukunimi = "Gurunen";
var kokonimi = etunimi + " " + sukunimi;

Huom! kuten huomaat tekstin liittämiseksi käytetään matemaattista +-operaattoria. Tästä seuraa se että yhteenlaskettaessa lukuja pitää molempien olla lukuja muuten javascript liittää muuttujat yhteen tekstin tavoin. Muiden matemaattisten operaattoreiden kanssa ei ole tätä ongelmaa.

Erikoismerkkejä voidaan tulostaa, kun niiden eteen laitetaan kenoviiva. Esim. \" tulostaa lainausmerkin ja \' hipsunn. Mikäli teksti on sijoitettu hipsujen sisään voidaan sinne sijoittaa lainausmerkki ilman kenoviivaa ja toisinpäin. Muita erikoismerkkejä on

\nrivinvaihto
\t tabulaattori
\\ yksi kenoviiva

Huom! \n ja \t ei muuta sivun sisältöä body-elementin sisällä, ellei koodi ole ole sijoittu myös pre-elementin sisään.

[muokkaa]

Olio-ohjelmointi

[muokkaa]

Ajax

[muokkaa]

XMLHTTPRequest

Jotta saadaan tehtyä Ajax-sovelluksia, niin tarvitaan XMLHTTPRequest-olio. Tämän luominen on hieman hankalaa, johtuen selainten erilaisuudesta. XMLHTTPRequest-olion on aikoinaan kehittänyt Microsoft, toteuttaessaan Outlookin selainversiota. Microsoft käyttää omaa ActiveX-tekniikkaa, kun taas muut selainvalmistajat käyttävät omaa javascript-luokkaa. 

<html>
<body>
 
<script type="text/javascript">
function ajaxFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Selaimesi ei tue AJAXia!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.lomake.aika.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","aika.php",true);
    xmlHttp.send(null);
  }
</script>
 
<form name="lomake">
Nimi: <input type="text"
onkeyup="ajaxFunction();" name="kayttajanNimi" />
Aika: <input type="text" name="aika" />
</form>
 
</body>
</html>
[muokkaa]

Yleisimmät kirjastot

[muokkaa]

DOM Malli

DOM on w3c:n yritys standardoida eri selainvalmistajien eriävät syntaksit sivujen latauksen jälkeisiin muutoksiin.

[muokkaa]

Taulukot

[muokkaa]

Aika

[muokkaa]

Tekstin käsittely

[muokkaa]

Aiheesta muualla


Tämä artikkeli on alun perin kopioitu Wikipediasta. Sen sisältö julkaistaan GDFL-lisenssin alaisena:
Tämän dokumentin kopiointi, levittäminen sekä muokkaaminen on sallittua GNU Free Documentation Licensen version 1.2 tai uudemman Free Software Foundationin julkaiseman version mukaisesti, ilman muuttumattomuuslauseketta tai kansitekstejä. Tätä koskee vastuuvapaus.
Kopio lisenssistä (englanniksi) löytyy täältä.
Haettu osoitteesta http://wiki.mureakuha.com/wiki/Javascript
Henkilökohtaiset työkalut