JavaScript

Allikas: Kuutõrvaja
Redaktsioon seisuga 14. jaanuar 2011, kell 11:44 kasutajalt Drakan (arutelu | kaastöö) (→‎Funktsioonid)

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

Eeldused

Kuna selles artiklis kirjeldatakse ennekõike brauserites kasutatavaid võimalusi, võiks artikkli lugejal olla vähemalt baasteadmised HTML ja XHTML keeltest ja nende võimalustest.

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.

JavaScript ei pea tingimata olema veebi lehekülje sees. Selleks võib teha täiesti eraldi js laiendiga tekstifaili ja viidata viimasele veebilehe päisest script tag'i kasutades: 

<html>
<head>
  <script src="fail_kus_sees_on_javascript.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

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.

JavaScript on CASE SENSITIVE, ehk siis tehakse vahet suurel ja väikesel tähel. Muutujate ja funktsioonide defineerimisel tasub seda meeles pidada!

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

Tihti on vaja uurida ja jälgida, miks üks või teine osa programmist ei toimi. Selleks vaja teada saada, mis väärtused on mingil hetkel mingil muutujal.

Alert

Ü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!

Konsool

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>

try..catch

Kui on segaseid veateateid, siis on võimalik ka viga "kinni püüda". 

<script type="text/javascript">

try
{
  // js kood
}
catch(err)
{
  // vea puhul tee seda
}

</script>

Näide: 

<script type="text/javascript">

function message()
{
  try
  {
    echo("midagi");
  }
  catch(err)
  {
    alert("Leiti viga\n\n" + err.description); // "undefined"
  }
}

message();

</script>

Try plokis olev echo peaks olema funktsioon? Veateade ütleb aga "undefined". Selge, defineerimata!

Throw

See meetod lubab luua erandeid. Kui kasutada seda koos try..catch meetodiga, saab luua viisakaid veateateid. 

<script type="text/javascript">

var x=prompt("Sisesta number 0..10 :"); // küsime kasutajalt numbri

try
{ 
  if(x>10) // kui x on suurem kui 10
  {
    throw "Err1"; // tekitame vea Err1
  }
  else if(x<0) // kui x on väiksem kui 0
  {
    throw "Err2"; // tekitame vea Err2
  }
  else if(isNaN(x)) // kui x pole number
  {
    throw "Err3"; // tekitame vea Err3
  }
}
catch(er) // Püüame vea kinni
{
  if(er=="Err1") // kui viga oli Err1
  {
    alert("Viga! Number liiga suur!"); 
  }
  if(er=="Err2") // kui viga oli Err2
  {
    alert("Viga! Number liiga väike!");
  }
  if(er=="Err3") // kui viga oli Err3
  {
    alert("Viga! Tegu pole numbriga");
  }
}

</script>

Aritmeetilised tehted

Eeldades, et y=5 

 Tehe   Kirjeldus        Näide   Tulemus
 +      Liitmine         x=y+2   x=7
 -      Lahutamine       x=y-2   x=3
 *      Korrutamine      x=y*2   x=10
 /      Jagamine         x=y/2   x=2.5
 %      Modulus (jääk)   x=y%2   x=1
 ++     Suurendamine     x=y++   x=6
 --     Vähendamine      x=y--   x=4

<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>

Väärtuste omistamised

Eeldades, et x=10 ja y=5, siis: 

 Tehe   Näide   Samaväärne   Tulemus
 =      x=y                  x=5
 +=     x+=y    x=x+y        x=15
 -=     x-=y    x=x-y        x=5
 *=     x*=y    x=x*y        x=50
 /=     x/=y    x=x/y        x=2
 %=     x%=y    x=x%y        x=0

Kui see tabel tekitab segadust, siis kirjuta enda jaoks tehted pikemalt välja.

Võrdlused

Eeldades, et x=5, siis: 

 Tehe    Kirjeldus                          Näide
 ==      on võrdne                          x==8    on väär
 ===     on täpselt sama (väärtus ja tüüp)  x===5   on tõene
                                            x==="5" on väär
 !=      ei ole võrdne                      x!=8    on tõene
 >       on suurem kui                      x>8     on väär
 <       on väisem kui                      x<8     on tõene

>= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true

Plokid

JavaScripti käsud saab grupeerida plokkidesse. Plokk algab ja lõppeb loogelise suluga { ja }. Plokke kasutatakse selleks, et teatud käske täidetaks korraga. Näited on järgmises lõigus...

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>

Kuna pole teada, mitu käsku täidetakse esimese tingimuse plokis, on kasutatud { ja } märki. Kui ploki sees on vaid üks käsk, võib ka { ja } ära jätta. Näiteks: 

<script type="text/javascript">

if ( tingimus1 )

  alert( "Esimene tingimus" );

else if ( tingimus2 )

  alert( "Teine tingimus" );

else

  alert( "Kolmas tingimus" );

</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>

On ka lühem (vähem ennast kordav) viis sama tulemuse saamiseks: 

<script type="text/javascript">

// muutuja = tingimus ? tõene : väär
// tingimus ? tõene : väär

arv = -3;

alert( arv + (arv >= -9 && arv <= 9 ? " kuulub" : " 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>

for..in

<script type="text/javascript">

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

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

</script>

switch

Switch on IF tingimusele vägagi sarnane, kuid tihti lühemalt kirjutatav. 

<script type="text/javascript">

switch(n)
{
  case 1:
    // tee esimest
    break;
  case 2:
    // tee teist
    break;
  default:
    // kui ükski eelmistest ei sobinud, tee kolmandat
}

</script>

Kas on juba nädala lõpp? 

<script type="text/javascript">

var d=new Date();
p2ev=d.getDay();

switch(p2ev)
{
  case 5:
    alert( "Reede" );
    break;
  case 6:
    alert( "Laupäev" );
    break;
  case 0:
    alert( "Pühapäev" );
    break;
  default:
    alert( "Tuleks juba nädalavahetus!" );
}

</script>

Funktsioonid

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

<script type="text/javascript">

function funktsiooninimi( muutuja1, muutuja2, muutujaX )
{
  // js kood
}

</script>

Muutujad (muutuja1, muutuja2 jne) on funktsiooni sisendargumendid. Märgid { ja } defineerivad funktsiooni alguse ja lõpu. Kui sisendargumentideta funktsioonil on sulud () peale funktsiooni nime.

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>

Funktsioonid ei pea tingimata midagi väljastama. Nad võivad ka töödeldud andmed tagastada. Selleks on return. 

<script type="text/javascript">

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

  summa = a + b;
  return "Arvude " + a + " ja " + b + " summa on " + summa;
}

funktsiooni_tagastatud_v22rtus = liida(10,20);
 
alert( funktsiooni_tagastatud_v22rtus ); // "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>

Sündmused (Events)

Tänu JavaScriptile on võimalik luua dünaamilisi veebilehekülgi. Sündmused on toimingud, mida JavaScript saab jälgida.

  • hiireklikk
  • veebilehe või pildi laadimine
  • hiire liigutamine üle teatud elemendi
  • vormi väljal klikkimine
  • vormi postitamine
  • klahvivajutus

onLoad ja onUnload

onLoad käivitatakse, kui kasutaja tuleb lehele. onUnload aga siis, kui kasutaja sulgeb lehe.

onLoad leiab Enamasti kasutust statistika tegemiseks või brauseri tüübi määramiseks. onUnload aga küpsise kustutamiseks kasutaja arvutist.

onFocus, onBlur ja onChange

Neid kasutatakse ennekõike vormide juures.

onFocus - kui element saab fookuse. onBlur - kui element kaotab fookuse. onChange - kui elemendi väärtus muutub

onSubmit

Kuna see funktsioon käivitiatakse enne vormi postitust, on see hea viis kontrollimaks, kas kõik väljad on täidetud ja et andmed oleksid korrektselt sisestatud.

onMouseOver ja onMouseOut

Nende funktsioonidega saab teha näiteks animeeritud nuppe, või muuta lehel olevate elementide stiile omadusi jpm. 

<a href="http://www.eenet.ee" onmouseover="alert('onMouseOver event!'); return false;">EENet</a>
Pärit leheküljelt "https://kuutorvaja.eenet.ee/w/index.php?title=JavaScript&oldid=23478"