JavaScript

Mis on JavaScript

JavaScript on skriptimiskeel, mille juured pärinevad ECMAScript keelest. JavaScripti ei maksa segi ajada Javaga. Kuigi nad on paljuski sarnased, on nad siiski erinevad. See skriptimiskeel leiab enim kasutust veebis kasutaja brauseris käivitatava skriptina. Seda keelt kasutatakse ka väljaspool brauserit, näiteks PDF dokumentides ja ka näiteks Windowsi desktopil kuvatavates vidinates (kellad, kalendrid, aku mahutavuse kuvajad jms).

Javascript...

• loodi, et lisada interaktiivsust HTML lehtedele
• on skriptimiskeel
• on interpreteeritav keel (seda ei kompileerita)
• lisatakse veebilehe koodi
• on litsentsivaba, seda võivad kõik kasutada

Tööriistad

Oli aegu, mil JavaScripti oli raske kirjutada, sest puudusid arvestatavad vahendid veaotsinguks. Tänapäeval on enamus brauseritel selleks vahendid olemas.

Google Chrome - Menu -> Tools -> Developer Tools

Firefox - Laiendusena installeeritav Firebug

Opera - Menu -> Page -> Developer Tools

Kuhu mis ja kuidas

JavaScript algab ja lõppeb script tag'iga (tagiks nimetatakse HTML keeles kõiksugu elemente).

<script>
// javascripti kood
</script>

Kuigi eelnev kood töötab, nõuab validaator (standard internetis validator.w3.org, et kõik brauserid mõistaksid lehte sama moodi) type parameetri olemasolu.

<script type="text/javascript">
// javascripti kood
</script>

Validaator tahab pahatihti analüüsida ka script tag'ide vahel olevat infot, mistõttu tuleks see tema eest pigem peita. HTML validaator on siiski HTML validaator. Selleks on järgmine nipp:

<script type="text/javascript">
<!-- //

// javascripti kood

// -->
</script>

Internet Explorer 8.0 nõuab endiselt iga rea lõppu semikoolonit (;), mis teiste brauserite puhul enam rusikareegel ei ole.

Sisu kommenteerimine

JavaScripti koodi kommenteerimine järgid teiste keelte üldtavasid.

<script type="text/javascript">

// See on kommentaar, mida koodis kuvatakse kuid javascripti käivitamisel ei rakendata

// alert( 'Tere maailm!' );

/* See on mitme realine kommentaar

   funktsiooni alert( 'Tere maailm!' ) ei käivitata, sest ta kuulub kommentaari sisse */

</script>

Muutujad

JavaScriptis ei ole muutujate ees tähiseid. Muutujate tüüpe erinevalt defineerima ei pea. Omistamise hetkel omistatakse muutujale vastavalt väärtusele tema tüüp.

Tüübid on järgmised:

<script type="text/javascript">

muutuja = "Tere maailm!"; // tekstiline väärtus
muutuja = 24.7            // komaga arv
muutuja = 2010            // täisarv
muutuja = true            // tõene või väär
muutuja = null            // muutujal pole mingit väärtust
muutuja = []              // massiiv
muutuja = {}              // objekt (räsi massiiv)

</script>

Muutujatega tehteid tehes peab arvestama, et JavaScript võib neid valesti mõista. Näiteks võib arvu 20 defineerida nii numbrimiselt kui tekstiliselt.

<script type="text/javascript">

a = 10;
b = "20";

c = a + b // c väärtus on 1020

</script>

Kui vaja stringist arv teha, siis kasutame funktsiooni parseInt.

<script type="text/javascript">

a = 10;
b = "20";

c = parseInt(a) + parseInt(b) // c väärtus on 30

</script>

Objekt on see, mis teeb JavaScriptist võimsa skriptimiskeele. Objekt võib endas hoida palju rohkem infot, kui näiteks massiiv. Massiivis on jada väärtuseid, mille indeksid algavad nullist ja lõppevad kohal n.

<script type="text/javascript">

kes = ["mina", "sina", "tema", "meie", "teie", "nemad"]

alert( kes[0] ) // "mina"
alert( kes[2] ) // "tema"

kes[8] = "Toomas" // sisestame massiivi uue väärtuse kohale 9

alert( kes[8] ) // "Toomas"

alert( kes[10] ) // undefined e. defineerimata

</script>

Räsi massiiv lubab indeksina kasutada sõne (string).

<script type="text/javascript">

taibu = { mina: "tean", sina: "tahad teada", nemad: "ei tea", 99: "muud tegelased" }

alert( taibu['mina'] ) // "tean"
alert( taibu.mina )    // "tean"

alert( taibu.99 )      // SyntaxError: Unexpected number

alert( taibu[99] )     // "muud tegelased"

</script>

// taibu.mina saab kasutada, sest indeksis olev sõne algab tähega ning mitte numbriga. Numbrilise indeksi puhul tuleb number panna kandilistese sulgudesse.

Debugimine

Üks lihtsamaid viise midagi ekraainle saada, on alert funktsioon.

<script type="text/javascript">

alert( 'Tere maailm!' );

</script>

Kui alert funktsioon paigutada tsüklisse (for, while jms), mis mingil põhjusel tsüklist välja ei taha tulla, siis kaob tuju neid "ok" nuppe klikkida juba esimestel sekunditel, nii et ettevaatust!

Teine meetod kiireks väljundiks on console.log. See kirjutab väljundi konsooli (eelpool nimetatud developer tool on abiks), ning tavakasutaja ei pruugi neid üldse näha.

<script type="text/javascript">

console.log( "Rida konsoolis." );

</script>

Aritmeetilised tehted

<script type="text/javascript">

a = 5;
b = 7.5;

c = a + b;

alert( c ); // 12.5

</script>

Mis siis, kui meil on muutuja(id), mida me soovime väljastada koos tekstiga?

<script type="text/javascript">

a = 5;
b = 7.5;

c = a + b;

alert( "Arvude " + a + " ja " + b + " summa on " + c ); // "Arvude 5 ja 7.5 summa on 12.5"

</script>

Juhtstruktuurid

Skripti käigu suunamiseks kasutatakse juhtstruktuure, mis valivad järneva tegevuse vastavalt seatud tingimustele. Tingimusi esitatakse võrdlustehete <, >, <=, >=, ==, != ja <> abil.

Loogelisi sulge ({ ja }) kasutatakse käskude grupeerimiseks ühte plokki.

if

IF konstruktsiooni abil saab valida kahe (või rohkema) võimaliku tegevuse vahel sõltuvalt tingimus(t)e täidetusest.

<script type="text/javascript">

if ( tingimus1 ) {
  // tee esimest värki
}
else if ( tingimus2 ) {
  // tee teist värki
}
else {
  // kui teisi variante polnud, siis tee kolmandat
}

</script>

Võrdleme omavahel kahte arvu:

<script type="text/javascript">

a = 5;
b = 6;

if (a > b) 
{
  alert( a + " on suurem kui " + b );
} 
else 
{
  alert( a + " on väiksem või võrdne arvuga " + b );
}

</script>

IF konstruktsioonil võib olla mitu argumenti, mida ühendatakse omavahel jaatuse või eitusega. Näiteks kontrollime, kas muutuja arv kuulub vahemikku -9 ja 9 kaasa arvatud.

<script type="text/javascript">

arv = -3;

if (arv >= -9 && arv <= 9) 
{
  alert( arv + " kuulub arvude vahemikku -9..9" );
} 
else 
{
  alert( arv + " ei kuulu arvude vahemikku -9..9" );
}

</script>

Kui mõlemad tingimused peavad olema tõesed, siis kasutame nende ühendamiseks && (AND). Kui tõene peab olema vaid üks neist, siis märki || (OR). Lubatud on ka eituse kasutus, mille puhul pannakse muutuja ette hüüumärk (!), näiteks:

<script type="text/javascript">

permission = false;

if ( !permission ) {
  alert( "Sul pole selleks volitusi!" );
}

</script>

Kui if ( true ) käivitaks alert funktsiooni, siis meie puhul teeb seda ka if (not true).

Pange tähele, et else ei ole kohustuslik. Kui seda pole defineeritud, siis teistel juhtudel ei võeta midagi ette.

for

for-konstruktsiooni abil saab täita sama plokki kontrollitud arv kordi. Viie kordne kordus koos konsooli kuvamisega:

<script type="text/javascript">

for ( i = 1; i <= 5; i++)
{
  console.log( i );
}

</script>

i++ on samaväärne kui i = i+1. Muutuja i väärtust suurendatakse ühe võrra!

while

While konstruktsiooni puhul täidetakse plokki seni, kuni tingimus on tõene. Kirjutame konsooli arvud ühest viieni välja ka while'i abil.

<script type="text/javascript">

i = 1;
while (i <= 5) 
{
  console.log( i++ );
}

</script>

foreach

Otseselt sellist funktsiooni ei eksisteeri, kuid on olemas alternatiiv.

<script type="text/javascript">

var nimed = ["Toomas", "Kati", "Maret"];

for(var i in nimed)
{
  alert( nimed[i] );
}

</script>

Funktsioonid

Kõiksugustes programmeerimis- ja skriptimiskeeltes tuleks end võimalikult vähe koodi kirjutamisel korrata. Selleks on loodud funktsioonid.

Tekitame näiteks funktsiooni liida(), mille sisendargumentideks on kaks arvu ning funktsioon kuvab ekraanile nende kahe arvu summa.

<script type="text/javascript">

function liida( a, b) 
{
  summa = a + b;
  alert( "Arvude " + a + " ja " + b + " summa on " + summa );
}
 
liida(10, 15);    // "Arvude 10 ja 15 summa on 25"
liida(20, 14.75); // "Arvude 20 ja 14.75 summa on 34.75"

liida();          // "Arvude undefined ja undefined summa on NaN"

</script>

Kui käivitada funktsioon ilma sisendargumentideta, on nii a kui b väärtus undefined. Kui a ja b omavahel kokku liita, siis on väärtuseks NaN ehk Not a Number. Sellised juhused tuleks eos välistada, et kasutaja ei saaks puudulikke vastuseid.

Lisame funktsiooni sisse muutujate a ja b kontrolli. Kui need pole defineeritud, väljume funktsioonist.

<script type="text/javascript">

function liida( a, b) 
{
  if ( typeof a == "undefined" || typeof b == "undefined" ) return;

  summa = a + b;
  alert( "Arvude " + a + " ja " + b + " summa on " + summa );
}
 
liida();      // Funktsioon ei väljasta mitte midagi!
liida(10,20); // "Arvude 10 ja 20 summa on 30"

</script>

Kasutajalt info küsimine

Mis kasu on kogu sellest värgist, kui me teame kõiki arve mida me kokku liidame, eks? Aga mis siis, kui kasutaja sisestab meil arvu, mida liita/korrutada või teha nendega ka midagi kolmandat?

Väärtuse küsimine

<script type="text/javascript">

sisend = prompt( "Palun sisesta üks arv: " ); // Laseme kasutajal sisestada arvu

arv = parseInt( sisend ); // teeme sisendist numbri

if ( isNaN( arv ) ) // kui meie sisendist tehtud arv pole number (on hoopis NaN), väljastame teate
{
  alert( "Sai ju öeldud, et sisesta arv. Sina aga sisestasid: " + sisend );
}
else if (arv == 0) // kui arv on 0
{
  alert( "Arv " + arv + " on null." );
} 
else if ( arv > 0 ) // kui arv on suurem nullist
{
  alert( "Arv " + arv + " on nullist suurem." );
}
else // teistel juhtudel on ta väisem nullist
{
  alert( "Arv " + arv + " on nullist väiksem." );
}

</script>

Prompt meetod lubab määrata ka vaikimisi arvu, mis kuvatakse sisendaknas:

<script type="text/javascript">

sisend = prompt( "Palun sisesta üks arv: ", 10 );

</script>

Kinnituse küsimimine

<script type="text/javascript">

sisend = confirm( "Suuname su EENeti kodulehele?" ); // true või false

if ( sisend ) // kui sisend on true e. tõene
{
  location.replace( "http://www.eenet.ee" ); // muudame aadressireal aadressi
}

</script>