Javaskripti sissejuhatus

Javaskript

HTML lehe kasutajaga suhtlemisvõimeliseks muutmiseks saab kasutada javaskripti. Tema abil saab kasutaja poolt tekstiväljadesse ja mujale sisestatud andmeid töödelda, reageerida hiire liigutustele ja vahetada pilte. Javaskript võimaldab ka olemasolevate andmete põhjal uusi lehekülgi kokku panna. Kuna tegemist on intepreteeritava keelega (s.t. brauser loeb ja täidab tekstina kirjutatud korraldusi), siis toimib javaskript suhteliselt aeglaselt. Samas kuna javaskripti programmid on enamasti lühikesed ning nad kasutavad juba varem valmistatud ning optimeeritud tervikkäsklusi, siis intepretaatori töökiirus programmi kulgu oluliselt ei mõjuta. Samuti käivitub Javaskripti intepretaator suhteliselt kiiresti.

Javaskripti programmilõigud kirjutatakse HTML teksti <script> ning </script> vahele. Samuti saab programmilõike tööle panna sündmuste toimumisel (näiteks lehekülje avanemine, hiirevajutus nupul, hiire sisenemine pildi piirkonda jne. ). Lihtsaim Javaskriptipoolne tervitus näeks välja järgmine:

<html><head><title>Tervitus</title></head>

<body>

document.writeln("Tere");

</script>

</body></html>

Liitmisülesannete loomine

Näitena lehekülg, mis enese loomisel kirjutab sinna kakskümmend liitmisülesannet liidetavate väärtustega kuni kümneni. Nagu java, nii ka javaskripti puhul loob käsk Math.random() juhusliku arvu 0 ja 1 vahel. Korrutades selle kümnega ning ümardades täisosaks saabki juhusliku arvu nulli ja kümne vahel.

document.writeln(Math.round(10*Math.random())+"+"+

Math.round(10*Math.random())+"="

);

</script>

Kahe arvu vahele tuleb plussmärk, tehte lõppu võrdusmärk ning <br> tähistab reavahetust ja \n HTMLi koodis järgmisele reale minekut. <script> on tavaline lehe osa nagu muudki ning vajaduse korral saab nii enne kui pärast teda leheküljele kirjutada.

<html><head><title>Liitmine</title></head>

<body>

<h2>Liitmisülesanded</h2>

for(i=0; i<20; i++){

document.writeln(Math.round(10*Math.random())+"+"+

Math.round(10*Math.random())+"=<br>\n"

);

}

</script>

</body></html>

Skripti sisselugemine

Järgnevalt üksikasjalikum seletus skriptijupi töö kohta. Nii nagu <title> ja </title> vahele käib lehe ülaserva pealkiri, nii <script> ja </script> vahele brauseris täidetav programmikood. Algselt oligi selliselt käivitatavaks keeleks vaid Javaskript, kuid aegamööda on sarnase kasutusega keeli juurde tulnud ning keele või versiooni saab kindlaks määrata. Siin näites võiks kirjutada ka <script language=“Javascript”> , kui kasutada aga Microsofti loodud VBScripti, siis tuleks programmikoodi algusesse <script language="VBScript">. Kui kasutada mõne kõrgema versiooni käske, mida vanemad brauserid ei mõista, siis tuleb kirjutada <script language="Javascript1.2">. Sellisel juhul kui brauser vastavat versiooni ei tunne, jätab ta vastava programmilõigu tähele panemata.

Eraldi fail

Skripti on võimalik sisse lugeda ka eraldi failist. See näeks välja nii:

</script>

Failis oleksid siis need samad käsud, mis muidu lehe sees. Brauser lihtsalt paigutab nad lehe lugemise esitamise käigus sinna kohale. Selline lugemine aitab muuta pikki skripte sisaldavat HTML lehte lühemaks, samuti võimaldab ühte skripti mitmes kohas kasutada, ilma et teda peaks mitmesse kohta kopeerima. Nõndamoodi saab ka vigu kergemini parandada, sest kord tehtud parandused kajastuvad kõikjal ning avastatud viga pole vaja teistes tekstides eraldi parandada. Kuigi - kui selle eraldiseisva programmikesega midagi peaks juhtuma, siis on rivist väljas kõik lehed mis teda kasutavad. Samuti peab kopeerimisel hoolitsema, et see failike ikka kaasa saaks. Samuti on Internet Exploreril mõnikord probleeme selliselt esitatud lõikude sisselugemisel.

Skriptitu brauser

Mõned brauserid (näiteks lynx) ei suuda üldse järgida Javaskripti käske. Nende tarvis loodi <noscript> element. Siinsete ülesannete puhul võiks lehekülg näha välja nii:

</script>

3+2=

4+5=

</noscript>

Sellisel juhul jäävad skriptitu brauseri puhul ülesanded küll alati samaks, kuid nad on siiski olemas, muul juhul puuduksid need sootuks, sest programmi puudumisel jääb ka tema tulemus nägemata.

Et ka selliste brauserite tarvis programmi abil lehti luua, on loodud teistsugused vahendid nagu näiteks PHP, ASP, CGI, JSP, kus vajalik lõpptulemus arvutatakse välja serveris ning brauseri ülesandeks on vaid seda kasutajale näidata.

Andmete talletamine

Muutujate deklareerimine Javaskriptis on vabatahtlik. Talle võib rahumeeli omistada töö käigus väärtuse, muretsemata, kas arvuti sellenimelist muutujat juba tunneb või mitte. Kui vastavanimelist muutujat varem polnud, siis see luuakse, vastasel juhul asendatakse vana väärtus uuega.

Ka andmetüüpidega käiakse küllalt vabalt ringi. Vastavalt omistatavale väärtusele ennustab intepretaator tüübi. Nii vabastatakse koodi kirjutaja mõtlemisest, kas tegemist on teksti või arvu või millegi muuga, kuid eks igal asjal ole omad head ja vead.

Sisemiselt on siiski andmetüübid olemas. Sellest sõltub, kuidas andmetega edaspidi käitutakse. Algul tähtsamateks tüüpideks on arv (näiteks 16.5) ja sõne(nt. "kapsas"). Ka tunneb intepretaator tõeväärtust (true/false), tühiväärtuseks on null (väikeste tähtedega), omistamata väärtust tähistab undefined ning struktuurseks tüübiks on massiiv ja muud mitmesugused objektid.

Kui avaldises asuvad sõne ja arv kõrvuti, siis võimalusel käisitletakse mõlemat osapoolt sõnena. Mõned näited:

avaldis tulemus

25+5 30

"25"+5 255

"25"+5+5 2555

eval("25")+5 30

"25"-5 20

"25"-"5" 20

25+5+"5" 305

Lahutamise puhul muudetakse võimaluse korral ka sõned arvudeks, sest sellist tehet sõnede puhul olemas pole. Viimase avaldise väärtuseks on 305, kuna kõigepealt liidetakse vasakult paremale kokku 25+5 ning saadakse 30. Sellele tulemusele lisatakse omakorda sõne "5" mis annabki kokku "305".

Väärtuste esitamine

Täisarve saab lisaks tavalisele kümnendesitusele sisestada ka kaheksand- ning kuueteistkümnendsüsteemis. Esimesel juhul tuleb numbri ette kirjutada 0, teisel 0x. Nii et siin (nagu mujalgi sarnase esitusega keeltes) on 14, 016 ja 0xE samaväärsed. Viimaseid läheb siiski vaja vaid eriolukordades nagu näiteks bititöötlus .

Reaalarve saab vajadusel esitada mantissi ja järguga ehk näiteks 1.73e5, mis lahtiseletatult tähendab 1,73 korda 10 viiendas astmes. Kümne aste võib olla negatiivne ning komaeelse üksiku nulli võib soovi korral ära jätta, seega on Javaskripti intepretaatori jaoks loetav ka .25e-2 , mis on sama kui 0.0025.

Jutumärgid

Sõne võib olla nii ühe- kui kahekordsete jutumärkide vahel, nii et samaväärsed on 'kass' ja "kass". Vaid alguses ja lõpus peab sama eraldaja olema. Mitmed eradajad on tarvilikud näiteks kohtades, kus ühed märgid tähistavad kogu käivitatavat käsku, teised aga trükitavat sõnet.

Näiteks: eval("document.writeln('kuku')");

Langjoone abil saab lisada sõnesse erisümboleid. \n tähistab reavahetust, \t tabulaatorit, \' ühe- ning \" kahekordset jutumärki, \\ langjoont ennast. Nii et c:\temp ekraanile manamiseks tuleb kirjutada document.writeln("c:\\temp");. Kolmekohalise numbrina langjoone taga saab anda edasi Latin-1 kodeeringus sümboleid vastavalt koodile, \u järel neljakohaline number tähistab unicode väärtust.

Massiiv

Massiiv tuleb kõigepealt luua, seejärel saab temasse elemente paigutada. Näide:

kalad=new Array();

kalad[0]="koha";

kalad[1]="siig";

Massiivi loomisel võib sulgudes ette anda selle esialgse suuruse.

Muutujad

Muutuja luuakse, kui temale omistatakse väärtus. Samuti võib muutuja luua, deklareerides ta käsuga var. Kui sel juhul väärtust ei omistata, saab muutuja väärtuseks undefined. Kord loodud muutuja on kasutatav kõikjal üle lehe. Teistelt lehtedelt saab selle muutuja poole pöörduda vastavat lehte ümbritseva akna kaudu. Kui muutuja deklareerida alamprogrammis käsuga var, siis saab teda kasutada vaid selle funktsiooni sees, mujal on ta nähtamatu. Selliselt on võimalik eri alamprogrammides kasutada sama nimega muutujat (näiteks i-d tsükliloendurina), muretsemata, et need üksteist segama hakkaksid. Muutuja nimi peab algama tähe või alljoonega ning tohib sisaldada ka numbreid.

Tehtemärgid, operaatorid

Harilikud tehtemärgid on +, -, *, /, kusjuures erinevalt näiteks Javast tähistab jagamismärk alati murdarvulist jagamist, s.t. 5/2 tulemuseks on 2.5. Jäägi annab %, ehk 5%2=1.

Enamkasutatavate toimingute tarvis on loodud mitmeid lihtsustusi. Muutuja väärtuse suurendamiseks ühe võrra tuleb tema järele kirjutada 2 plussi. Seega lõigu

x=5;

x++;

document.writeln(x);

tulemusena kirjutatakse välja kuus. Sama tulemuse saaks, kui x++ asemele kirjutada

x=x+1, mis ongi tavaline pikem kirjutuskuju. Kuid sama soovi saab väljendada ka

x+=1 abil ning siin lõigus annaks sama tulemuse ka

++x;

Kui x=x+1 asemel võib kirjutada x+=1, siis analoogiliselt sobib x=x-1 asemele x-=1. Iseenesest küllalt pisike ja tähtsusetu võimalus, kuid paljude omistuste ning pikkade muutujate nimede korral muudab kirjutusvaeva vähemaks, kuigi esialgu võib kirjutuspildi segamini lüüa. Samuti töötavad ka nt. x*=3 ja x/=2 ning x%=2 korrutamise, jagamise ning jäägi võtmise juures.

Suurendus ja vähendus

Eelnevalt oli kirjas, et käsk x++ suurendab muutuja x väärtust ühe võrra. Sarnaselt vähendab x-- x-i väärtust ühe võrra. Neid käske võib kasutada ka teiste käskude sees:

var x=3;

document.writeln(x++);

kirjutab välja 3 ja 4. Nagu näha, siin kõigepealt loetakse välimise käsu tarbeks muutuja väärtus ning alles seejärel suurendatakse muutuja väärtust ühe võrra. Ka teistsugune võimalus on olemas, et algul suurendatakse muutuja väärtust ja alles siis küsitakse see. Selleks tuleb plussid (või miinused) kirjutada muutuja ette. Nii et

var x=3;

document.writeln(x++);

document.writeln(++x);

kirjutab välja 3 ja 5.

Valik

Võrdlusi kasutatakse enamasti tingimuslausete juures, kuid ka mujal, kus on vaja vastust tõene või väär. Näide:

if(vanus<12){

document.writeln("osta lapsepilet");

}

Tõeväärtust saab vajadusel säilitada ka muutujas

vanus=10;

laps=(vanus<12);

if (laps) {

document.writeln("osta lapsepilet");

}

Sellest on kasu, kui võrdlus on pikk ja seda tahetakse välja arvutada tingimuslausest eraldi. Samuti on mõistlik võrdluse tulemust säilitada muutujas, juhul, kui seda läheb tarvis mitmes kohas.

Kontrollimaks, kas kaks väärtust on võrdsed, tuleb kasutada kahte võrdusmärki.

(vanus==13) //kas vanus on võrdne kolmeteistkümnega

(vanus>=13) //kas vanus on suurem või võrdne kolmeteistkümnega

(vanus<=13) //väiksem või võrdne

(vanus>13) // suurem

(vanus!=13) // tulemus on tõene juhul, kui vanus pole kolmteist.

Võrdlemise korral teisendatakse võimaluse korral väärtused samasse tüüpi ning näiteks (3=="3") annab tulemuseks tõese väärtuse. Et sama arvulise väärtuse kuid erineva tüübiga andmeid erinevaks lugeda, selleks on Javaskripti uuematesse versioonidesse lisatud kolme võrdusmärgiga võrdlus, mis annab tõese vastuse vaid juhul kui nii muutujate tüüp kui sisu on sama, seega (3==="3") annab väära tulemuse. Ka eitus on sarnane, (3!=="3") annab tõese väärtuse.

Tingimusi saab grupeerida nagu näiteks, et nimi on Priit ja vanus on väiksem kui 12. Javaskriptis näeks see välja, et ((nimi=="Priit") && (vanus<12)). Või jaoks tuleb kirjutada || ning sulgudega hoolitseda, et õiged asjad omavahel kokku käiksid.

If-lause abil saab mingi tegevuse panna toimuma vaid tingimuse sobivuse korral. Näiteks:

if(vanus<12) {

document.writeln("Osta lapsepilet");

}

Vajaduse korral saab lisada else-osa, mis täidetakse, kui tingimus pole täidetud:

if(vanus<12){

document.writeln("Osta lapsepilet");

} else {

document.writeln("Osta täispilet");

}

Tingimuse alla kuuluva üksiku käsu ümbert võib (kuid ei pruugi ning koodi loetavuse huvides pole enamasti soovitav) käsugruppi ümbritsevad sulud ära võtta.

if(vanus<12) document.writeln("Osta lapsepilet");

else document.writeln("Osta täispilet");

Tingimuslausest on ka lühem variant, nn. ternaarne operaator kujul

(tingimus)? tegevus_tõesel_juhul : tegevus_muul_juhul. Näiteks:

tyyp=(vanus<12)?"lapse":"täis";

document.writeln("Osta "+tyyp+"pilet.");

või

(vanus<12)?document.writeln("Osta lapsepilet"):document.writeln("Osta täispilet");

või ka

document.writeln("Osta "+((vanus<12)?"lapse":"täis")+"pilet");

Tsüklid

Tsüklite ehk silmuste abil saab tegevusi korduvalt esile kutsuda. Näiteks soovitakse midagi kirjutada kümme korda või paluda senikaua ülesandele vastata, kuni tulemus sobib. While-tsükli puhul kontrollitakse iga kord tsükli alguses, et kas seda on vaja läbida. Jõudnud tsükli lõppu, minnakse uuesti algusse ja kontrollitakse, kas läbitud käsud tuleb uuesti ette võtta. Ringist pääseb minema alles siis, kui päises oleva tingimuse väärtuseks on väär. Kui juhtub, et sellist väärtust sinna ei teki (näiteks kui järgnevas näites unustataks tsükliloendurit suurendada), sel juhul programm jääbki tsüklisse (ning siin muudkui kirjutaks a-sid).

Sama tulemuse saab for-tsükli abil veidi lühemalt kirja panna. for-i päises semikoolonite vahel olevast kolmest käsust täidetakse esimest tsüklisse sisenemist (enamasti algväärtustatakse tsüklimuutuja(d)). Keskmise tingimuse järgi otsustatakse, kas tsükli sisu on vaja täita. Kolmas käsk täidetakse alati pärast tsükli sisu läbimist, siin näites suurendatakse tsüklimuutuja väärtust.

Alates Javaskripti versioonist 1.2 tuli juurde do .. while tsükkel, kus jätkamise vajadust kontrollitakse pärast tsükli läbimist. Sellisel juhul täidetakse tsüklis olevad käsud korra ka juhul, kui tingimus on väär. Sellist tsüklit on hea kasutada inimeselt vastuse pärimisel. Näiteks programm ei välju tsüklist enne, kui ta on numbrilise väärtuse oma sünniaasta kohale sisestanud.

<html><head><title>Tsüklid</title></head>

<body>

i=0;

while(i<10){

document.write("a");

i++;

}

</script>

for(i=0; i<10; i++){

document.write("b");

}

</script>

i=0;

do{

document.write("c");

i++;

}while(i<10);

</script>

</body>

</html>

Objekti omaduste läbi lappamiseks on for .. in tsükkel, mille abil saab ükshaaval kõik vastava objekti omadused kätte ning siis on nendega võimalik midagi ette võtta.

var koer=new Object();

koer.vanus=12;

koer.nimi="Muri";

for(omadus in koer){

document.writeln("Koera "+omadus+" on "+koer[omadus]+"<br>");

}

</script>

</body></html>

trükib välja

Koera vanus on 12

Koera nimi on Muri

Alamprogramm

Alamprogrammiks on käskude komplekt, mida saab eraldi välja kutsuda. Nende abil saab programmi põhiosa lühendada ja selgemaks muuta, eraldades pikemad omaette tegevused mujale ning jättes peaprogrammi vaid ühe käsu nende täitmiseks. Javaskriptis nimetatakse kõiki alamprogramme funktsioonideks. Näiteks Pascalis ja Visual Basicus nimetatakse funktsioonideks vaid neid alamprogramme, mis väljastavad midagi (nagu näiteks siinuse funktsioon). Alljärgnev alamprogramm oleks Pascalis protseduur ja Visual Basicus sub.

Alamprogrammid saab päises eraldi välja tuua ning sellisel juhul saab neid lehe seest välja kutsuda. Siin näites on päises funktsioon ehk alamprogramm looYlesanne, mis oma tegevuse tulemusena kirjutab lehele ühe ühekohaliste liidetavatega liitmisülesande.

<html><head><title>Liitmine</title>

function looYlesanne(){

document.writeln(Math.round(10*Math.random())+"+"+

Math.round(10*Math.random())+"=<br>\n"

);

}

</script>

</head>

<body>

for(i=0; i<20; i++){

looYlesanne();

}

</script>

</body></html>

Teoreetiliselt on lubatud alamprogramme ka lehe sees kirjeldada, kuid sel juhul pole kindel, kas tarvitamise ajaks see juba mällu laetud on.

Alamprogrammile võib ette anda parameetreid, neid saab funktsioon oma töös kasutada. Funktrsioon liida ootab kahte parameetrit ning väljastab nende summa.

function liida(a, b){

return a+b;

}

Selliselt loodud funktsiooni võib kasutada nii nagu muidki.

document.writeln(liida(3, 2));

Javaskriptis pole funktsiooni parameetrite arv ega tüübid määratud. Lihtsalt välja kutsudes tuleb arvestada, et etteantud parameetrid sobiksid. Muul juhul saame soovimatu tulemuse või veateate. Lisaks funktsiooni päises olevatele muutujate nimedele saame edastatud parameetreid lugeda ka massiivist nimega arguments. Esimene võimalus on lihtsalt veidi inimlikum. Kui aga parameetrite arv pole teada, siis tuleb neid paratamatult massiivist lugeda. Järgnevas näites funktsioon seo ühendab parameetritena antud väärtused üheks pikaks sõneks, pannes üksikute osade vahele eraldaja. Eraldajat oodatakse funktsiooni esimese argumendina, ühendatavad sõnad riburadapidi tema järel. Nii näiteks käsk

rida=seo(", ", "üks", "kaks","kolm");

peaks andma muutuja rida väärtuseks "üks, kaks, kolm".

Argumentide massiiv arguments algab nullist nagu iga muugi massiiv Javaskriptis (ja Javas ja C-s); arguments.length näitab argumentide arvu. See massiiv dubleerib päisesse antud parameetreid. Tema kaudu saab teada, palju tegelikult parameetreid edastati. Samuti saab sealtkaudu kätte ka need väärtused, mille jaoks parameetreid ei jätku. Kuna massiiv arguments dubleerib päisesse antavaid parameetreid, siis põhimõtteliselt võiks funktsiooni sees kasutada muutuja "eraldaja" asemel arguments[0], kuid praegune variant peaks siiski loetavam olema.

<html><head><title>Muutuvate parameetrite arvuga funktsioon</title>

function seo(eraldaja) {

tulemus=arguments[1];

for (var i=2; i<arguments.length; i++) {

tulemus += eraldaja + arguments[i];

}

return tulemus;

}

</script>

<body>

document.writeln(seo(" - ", "ema", "isa", "laps"));

</script>

</body></html>

Sõnetöötlus

Kümnekonna sõnetöötluseks loodud käsuga õnnestub pea kõik tekstidega läbi viidavad operatsioonid läbi viia. Javaskripti valdkonnast tulenevalt tuleb enamasti kontrollida kasutaja sisestatud andmete õigsust, samuti töödelda andmeid ning anda nendest kokkuvõte või süntees välja. Tähtsamad sõnetöötlusfunktsioonid on näha järgnevas näites.

<html><head><title>Sõne töötlemise vahendeid</title></head>

<body>

lause="Juku tuli koolist";

document.writeln("Lause on: "+lause+"<br>");

document.writeln("Lause pikkus on "+ lause.length + " tähte<br>");

document.writeln("Lause algab tähega "+lause.charAt(0)+"<br>");

document.writeln("Sõna kool hakkab tähest nr "+lause.indexOf("kool")+"<br>");

document.writeln("Tähed 5-9 moodustavad kokku sõna "+lause.substring(5, 9));

</script>

</body></html>

Omadus length näitab pikkust (tähtede arvu), sel pole sulge taga, kuna on tegemist muutuja, mitte alamprogrammiga. Käsklus charAt võimaldab küsida soovitud kohal paikneva tähe. Tähti hakatakse lugema alates nullist. Pea sarnaselt saab sõnest tükki eraldada käsuga substring. Seal tuleb määrata nii koht, kust lugemisega alata kui tähe number, mille eest lõpetada. Kui lauset vaadata kui tähtede linti, siis andmete väljavõtmiseks sealt lõigatakse see nagu vasakult poolt välja. Nii, et kui soovin lausest kahte esimest tähte, siis tuleb kirjutada lause.substring(0, 2). Tähed number 0 ja 1 on sisse arvatud, 2 välja arvatud.

Alamsõnet otsitakse käsuga indexOf. Tulemusena väljastatakse number, mis näitab mitmendast tähest alates lauses algab parameetrina etteantud sõne. Juhul, kui vastavat tähekombinatsiooni ei leita, väljastatakse –1. Nii saab ka kontrollida, kas leidub lauses otsitud tähte/sõna või mitte. Otsitav sõne võib olla ka vaid ühe tähe pikkune, sel juhul lihtsalt saab teada, kas vastavat tähte lauses leidub. Lisaks võib käsule anda parameetri, mitmendast tähest alates üldse otsima hakatakse. Muul juhul juhtub, et saame teada vaid otsitava lõigu esimese asukoha lauses. Kui kirjutame aga "maletaja".indexOf("a", 3), peaksime vastuseks saama 5, sest tähest 3 ("e") alates järgmine a tuleb kohal 5.

Edasised ettevõtmised õnnestub teha juba tuntud käskude abil. Näiteks kui on vaja teada, kas sisestatud lauses leidub vähemalt kolm numbrit, siis peaksime algul ühes sõnes kirjeldama, millised tähed on numbrid. Edaspidi võib uuritavast lausest ükshaaval tähti välja võtta, kontrollida, millised neist leiduvad numbrite sõnes ning lugeda arv kokku. Kui oleks vaja stringe numbriteks muundada, siis selleks aitavad meetodid eval, parseInt ning parseFloat.