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.

Pildid

Tekstis olevaid pilte saab javaskripti abil vahetada. Lehekülje loomisel luuakse seal paiknevatest piltidest massiiv, nii et document.images[0] tähistab esimest pilti, document.images[1] teist jne. Klassil Image on mitu atribuuti. Mõnda neist (nagu kõrgus ja laius) saab vaid lugeda, kuid parameetrit src, mis sisaldab pildi URLi, saab vajadusel muuta. Niimoodi pilte vahetades saab luua illusiooni liikumisest, samuti, nagu järgnevas näites näha, võib vahetada pilti siis, kui temale hiirega peale minna. Hiire liikumisele on võimeline reageerima viide <a href= …>, kui hiir satub viitele, näidatakse pilti failist pilt2.gif, hiire väljumisel failist pilt1.gif. Pildi juurde on border=0 kirjutatud seepärast, et et pildi ümber sinist ranti ei tekiks. Kuna tegemist on viite alla kuuluva teksti osaga, siis tekiks tema ümber muidu joon, et oleks näha, et sinna vajutades kuhugi jõuda saab. Kuna siin näiteks ei soovi ma hiirega viitele vajutamisele lehekülge vahetada, siis on viiteks pandud selle sama faili aadress ehk Pilt1.html.

<html><head><title>Pildi muutmine</title></head>

<body>

<a href="Pilt1.html"

onmouseover="document.images[0].src='pilt2.gif';"

onmouseout="document.images[0].src='pilt1.gif';">

</body>

</html>

Pilte saab ka automaatselt vahetuma panna. Järgnevas dokumendis on kaks pilti ning funktsioon vaheta vahetab nad omavahel. Muutuja olek näitab kumba pidi pildid on ning igal korral muudetakse selle muutuja väärtus. Käsklus window.setTimeout("vaheta()", 500); ütleb, et 500 millisekundi pärast kutsutakse välja meetod vaheta(). Siin juhul tähendab see, et sama funktsioon palub objektil window ennast uuesti poole sekundi pärast välja kutsuda ning tulemuseks on, et meetod kutsub end pidevalt välja ning iga poole sekundi tagant vahetatakse pildid.

<html><head><title>Pildi muutmine</title>

var olek=0;

function vaheta(){

if(olek==0){

document.images[0].src='pilt1.gif';

document.images[1].src='pilt2.gif';

} else{

document.images[0].src='pilt2.gif';

document.images[1].src='pilt1.gif';

}

if(olek==0) olek=1; else olek=0;

window.setTimeout("vaheta()", 500);

}

</script>

</head>

<img src=pilt1.gif>   Tervitus!   <img src=pilt2.gif>

</h1></center>

</body>

</html>

Kui pilte soovitakse järjest panna enam ehk näidatav kino on pikem, sel juhul võib pildid massiivi paigutada ning massiivi elementidena on neid kergem soovitud järjestuses kätte saada. Massiivi elemendid võib kohe loomisel ette anda, sellisel juhul paigutatakse need sinna üksteise järele, nii et esimese indeksiks saab 0. Järgnev programm on nii koostatud, et korduvasse seeriasse piltide lisamiseks või eemaldamiseks tuleb lihtsalt sobivad pildid massiivi alles jätta ning neid seal siis järjekorras näidataksegi.

Muutuja nr hoiab eneses pildi numbrit, mida parajasti näidatakse. Funktsiooni "edasi" iga väljakutsumise korral leitakse uus näidatava pildi järjekorranumber ning seejärel kuvatakse vastav pilt ekraanile.

document.pilt1.src=pildid[nr];

tulemusena määratakse pilt1-ks nimetatud pildi andmete lugemise failiks massiivis pildid kohal nr leiduv failinimi. Esimestel kordadel, kui vastav fail pole veel võrku pidi kohale loetud, võib pildi näitamine veidi aega võtta, kuni andmed pärale jõuavad. Järgmise ringi puhul aga on andmed juba kohalikus arvutis ning pildi näitamine ei tohiks kuigi palju aega võtta.

Pildi järjekorranumbrit arvutatakse nii, et numbrit suurendatakse iga sammu juures ühe võrra. Kui ollakse viimasest pildist mööda läinud, siis alustatakse taas algusest, et pildist 0. Tingimuse (++nr>=pildid.length) juures suurendatakse kõigepealt muutuja nr väärtust ühe võrra ning alles siis hakatase väärtusi võrdlema. ++ muutuja ees tähendab, et väärtust suurendatakse enne, kui tema väärtusega midagi peale hakatakse. Oleks ++ taga, sel juhul kõigepealt kasutataks muutuja väärtust arvutustes ning alles pärast muu tegevuse lõppu suurendatakse seda. Massiivi pikkus pildid.length näitab elementide arvu selles. Kui praeguses näites on massiivis pildid neli elementi, siis pildid.length väärtuseks on neli, olgugi, et esimese elemendi järjekorranumber on null ning viimase oma kolm.

Käsklus setInterval('edasi();', 500); dokumendi laadimise juures tähendab, et pärast lehe saabumist hakatakse alamprogrammi "edasi" välja kutsuma iga viiesaja millisekundi tagant. Nõndamoodi vahetubki iga natukese aja tagant pilt ning meile tundub, nagu meie silme ees toimuks väikene etendus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Piltide vahetamine</title>

var pildid=new Array("sinine.gif", "punane.gif", "kollane.gif", "roheline.gif");

var nr=0;

function edasi(){

if(++nr>=pildid.length)nr=0;

document.pilt1.src=pildid[nr];

}

</script>

</head>

<h2>Piltide vahetamine</h2>

</center>

</body></html>

Ühe koha peal pilte vahetades saab oma silmade ette väiksese filmilõigu. Veidi juhtkäske rakendades või juhuarve kasutades võib seda filmilõiku ka veidi muuta, luues pildid mitmest võimalikust liikumisharust ning neid mingi omale või arvutile teada oleva algoritmi abil järjestades. Nii võib luua vaikselt hõõguvast lõkkest, mis iga natukese, kuid ettearvamatu aja tagant korraks heledamaks lahvatab. Samuti võib kujutada teel jalutajat, kellele augud, palgid ja muud konarused mõne aja tagant ette satuvad ning kelle tee näib kogu aja muutuvat. Veel mõtet edasi arendades võib tee tasapisi seda siledamaks minna, kui kaugele kasutaja muude tegevustega, näiteks lehe peal paiknevate ülesannete lahendamisega jõudnud on.

Lehe peal paiknevaid pilte võib mitu olla. Sel juhul muutub vahetamine paindlikumaks, korraga saab muuta väiksemat ala, ilma suuremal pinnal muutusi tegemata. Kui eelmises näites peab iga juhu tarvis uus pilt olema, siis väikeste piltide puhul võib paari pilti kombineerides juba soovitud tulemuse saada. Kõik mustvalged kujutised on põhimõtteliselt võimalik ekraanile manada kahe pildi abil – üks must ja teine valge. Ning kummagi suuruseks piisab ühest punktist, pildile ette antavate laiuse ja kõrgusega saab neid lihtsalt sobivasse suurusesse venitada. Samuti kui soovin kedagi või midagi ekraanil liikuma panna, siis esimesel juhul peaks iga asukoha tarvis eri pilt olema, mitme pildi puhul aga võib seda lihtsalt parajas kohas välja näidata.

Alljärgnevas näites liigub roheline silm kollastest ristkülikutest koosneva ringi peal. Jõudnud oma liikumisega ühte serva, põrkab ta sealt tagasi. Programm on taas koostatud nii, et alguses paiknevate parameetrite (pildifailide nimed, piltide laius, kõrgus, arv) järgi määratuna toimib kogu ülejäänud osa nii, et soovitava andmete muutmise puhul piisab muutusest vaid alguses, ka ülejäänud koodi mõistmata peaks tulemus vastama kasutaja ootustele. Sarnaselt on maailmas võrku üles pandud hulgaliselt näiteid, kust enesele lõike kopeerides võib päris ilusaid ja kasulikke lehti kokku panna, ilma, et programmeerimise poolest peaks oluliselt enam muret tundma kui hoolitsema, et ühendatud lõigud omavahel hästi läbi saaksid ning üksteisega tülli ei läheks.

Muutuja nr näitab teistest erineva pildi järjekorranumbrit. Iga järgmise pildivahetuse juures muudetakse seda numbrit niipalju, kui muutuja "samm" ette näeb. Nii on teisevärviline pilt igal korral uue koha peal ning peakski tekkima illusioon liikumisest. Servast tagasipöördumine on kirjutatud veidi pikemalt kui hädapärast tarvis arvestades, et liikumine toimiks ka ühest suuremate sammude korral. Enne iga joonistamist ja astumist kontrollitakse, et ega eraldi näidatava pildi järjekorranumber servale liiga lähedale jõudnud pole. Kui selgub, et järgneva astutava sammuga jõutaks lubatud piiridest välja, siis keeratakse sammu suund selliseks, et astutaks servast eemale. Absoluutväärtus on pööramisel arvesse võetud seetõttu, et pikemate sammude, sammu pikkuse või asukoha mujalt määratava muutumise puhul võib tekkida olukord, kus asukoht on juba enne suuna arvutamist lubatud piiridest väljas, suund aga juba õigele poole keeratud. Kui tahta veidi koodi lihtsustada, siis siin näiteks võiks absoluutväärtuse asendada lihtsalt miinusmärgiga, ehk põrgates vastu serva keeratakse suund vastupidiseks. Keerukamatel juhtudel võib aga selline lihtsustus maksta kätte avastusega, et liikuja jääbki lubatu ning lubatava piiri peale põrkama.

Igal korral enne uue asukoha välja arvutamist pannakse endise erivärvilise pildi asemele tagasi tavapilt, et me ekraani peal paiknev liikuja ikka üksikuks jääks ning soovimatult paljunema ei hakkaks. Loodus tühja kohta ei salli ning kui jätaksime rohelise eelmise asukoha peale kollase kasti joonistamata, siis jääks sinna paratamatult roheline ning uude kohta tekiks ikkagi sinna määratud roheline.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Liikuva silmaga joon</title>

var tavapilt="kollane.gif";

var eripilt="roheline.gif";

var piltidearv=20, pildilaius=15, pildikorgus=8;

var nr=0, samm=1;

function edasi(){

if(nr+samm>=piltidearv)samm=-Math.abs(samm);

if(nr+samm<0)samm=Math.abs(samm);

document.images[nr].src=tavapilt;

nr=nr+samm;

document.images[nr].src=eripilt;

}

</script>

</head>

<h2>Liikuva silmaga joon</h2>

for(var i=0; i<piltidearv; i++){

document.write("<img src="+tavapilt+" height="+pildikorgus+" width="+pildilaius+">");

}

</script>

</center>

</body></html>

Kui soovida korraga liikuma panna mitu täpikest, sellisel juhul tuleks igaühe puhul meelde jätta asukoht, kus see parajasti paikneb, enne uut joonistusringi asendada kõik kohad taustapiltidega ning seejärel joonistada iga uus ruuduke temale määratud kohta. Kuhugile pole kirjutatud, et pildid peavad asetsema ühes reas. Neid võib rahus paigutada tabelisse või üksteise alla, kuid lihtsalt tuleb meeles pidada või välja arvutada, millises kohas parajasti millise numbriga pilt asub.

Hiirevajutus pildile

Pildil enesel standardi järele hiirevajutamise peale reageerimise võimalust pole. Küll aga lisaks selline vahend lehe paindlikkust ning väikeste kavaluste abil saab sarnase olukorra lausa mitmel moel korraldada. Kui pilt muuta viiteks, siis õnnestub selle kaudu nii avada teisi lehti, kui muudki moodi kasutajat rõõmustada. Kaarti kasutades pildi piirkonnad tundlikuks muutes võib lausa iga pildi piirkonna peale oma tegevuse siduda.

Ankru juurde kuulvad lisaks enimkasutatud lehe avamise võimalusele (href=... ) veel alamprogrammide käivitamise kohad nii hiire sisenemise, hiire väljumise kui vajutuse tarvis, vastavalt siis onMouseOver, onMouseOut ja onClick. Viimasel juhul kaasneb harilikult ka viite avamine, kuid kui käskluse lõpul teatada "return false;", siis jäetakse teisele lehele suundumine katki ning täidetakse käsklused, mis vajutamise juurde kuuluvad. Nagu all näha, vahetatakse kollane pilt hiirevajutuse puhul rohelise vastu.

<html><head><title>Vajutamisel muutuv pilt</title></head>

<body>

<a href='' onClick='document.pilt1.src="roheline.gif";return false;'><img

src="kollane.gif" height=20 width=20 name="pilt1" border=0></a>

</body></html>

Järgnevalt veidi pikem näide, mida soovi korral annab kasutada nii õpetava kaardi, hiirevajutusi nõudva mängu kui lihtsalt rõõmsa ekraaniilustuse põhjana. Kollase tausta peal muutub pilt, millesse siseneti roheliseks ning millele vajutati punaseks. Pildilt lahkudes pannakse vana kollane taust taas tagasi. Kui siit tuttavaid vajutuse püüdmisi edasi arendada, siis ei peaks kuigi raske olema kokku panna mäng, kus kasutaja peab ümberpööratud kaartide seast sobivaid paare otsima.

Alamprogramm varvivahetus paigutab etteantud rea ja veeruga pildile kolmanda parameetrina ette antud failinimes paikneva sisu. Praegu kasutatakse sama alamprogrammi nii hiirevajutuse kui sisenemiste-väljumiste tarvis, kuid see on tehtud vaid lühiduse mõttes ning ei pruugi muudes rakendustes sugugi nii olla. Jällegi on püütud koodi muudetavad osad paigutada etteotsa ning osalt seetõttu on tagumine pool võibolla suhteliselt lühikeseks ja kirjuks muutunud, kuid loodetavasti on sellest mõningase mõtlemise tulemusena siiski võimalik aru saada. Pilte kirjutatakse järjest ilma tühikuteta üksteise järgi, et nad ekraanil moodustaksid ühtlase välja. Iga rea lõppu tuleb reavahetus, et järgmised pildid taas rea algusest peale hakkaksid. Nii sündmuste onClick, onMouseOver kui onMouseOut puhul kutsutakse välja funktsioon varvivahetus, igal korral aga antakse sinna ette eri värv. Rea ja veeru järgi arvutatakse tagasi pildi järjekorranumber ning sinna sisse määratud värv pannaksegi. Read ja veerud algavad nullist, iga järgneva rea puhul lisatakse numbrile ette rida*veergudearv, see tähendab, et kui tegemist on näiteks pinnaga, kus viis pilti reas, siis esimese rea esimene element oleks number 0, järgmise puhul aga juba viie võrra suurem (ehk 5). Kirjutatav rida

" onClick=\"return varvivahetus("+rida+", "+veerg+", '"+pilt1+"');\""

oleks lahtiseletatult järgmine. Üldiselt paigutatakse jutumärkide vahele välja kirjutatav tekst, kuid kui soovitakse teksti enese sees jutumärki väljastada, tuleb see esitada kujul \" , kus langjoon jutumärgi ees varjestab selle ning laseb rahumeeli tavalise jutumärgina lehele trükkida. Üks konkreetne rida võiks sellisel puhul tulla näiteks

onClick="return varvivahetus(3, 2, 'punane.gif');"

Kuigi võib eraldajana kasutada nii ühe- (') kui kahekordseid (") jutumärke, et pääsenud siin mitte langjoone kasutamisest, sest kui on vaja eristada nii programmi poolt väljastatavaid käske, onClick-i puhul käivitatavat funktsiooni ning failinime, mida kannab muutuja pilt1, siis kolme sorti jutumärke lihtsalt javaskriptis pole.

<html><head><title>Vajutamisel muutuv pilt</title>

var ridadearv=10, veergudearv=10;

var pilt1="punane.gif", pilt2="kollane.gif", pilt3="roheline.gif";

function varvivahetus(rida, veerg, sisu){

document.images[rida*veergudearv+veerg].src=sisu;

return false;

}

</script>

</head>

<body>

for(var rida=0; rida<ridadearv; rida++){

for(var veerg=0; veerg<veergudearv; veerg++){

document.write("<a href=''"+

" onClick=\"return varvivahetus("+rida+", "+veerg+", '"+pilt1+"');\""+

" onMouseOver=\"return varvivahetus("+rida+", "+veerg+", '"+pilt3+"');\""+

" onMouseOut=\"return varvivahetus("+rida+", "+veerg+", '"+pilt2+"');\""+

"><img src="+pilt2+" height=20, width=20 border=0></a>");

}

document.write("<br>");

}

</script>

</body></html>

Hiirevajutuse koordinaadid

Nagu mitmed muud kujundusega seotud vahendid, nii ka hiire asukoha määramine on seiluriti erinev. Kui soovitakse üheaegselt toime tulla mitme brauseri keskkonnas, siis tuleb tähelepanu pöörata, millisel juhul kuidas andmeid püüda. Järgnev näide töötab vaid Netscapes.

Kõigepealt öeldakse brauserile, milliste teadetega üldse tegelda tuleb. Kui kasutaja vastavaid andmeid ei vaja, siis pole mõistlik ka seiluri energiat nende püüdmisele raisata. Edasi määratakse alamprogramm, mis vastavale sündmusele reageerimisega tegelema peab. Netscapes on korraldatud nii, et alamprogrammile antakse parameetrina objekt, kelle parameetrite kaudu saab teada sündmuse toimumise asukoha.

<html><head><title>Hiire koordinaadid</title>

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=naitaKoordinaate;

function naitaKoordinaate(syndmus){

alert("Hiir vajutati kohal "+syndmus.pageX+

", "+syndmus.pageY);

}

</script>

</head>

<body>

Head vajutamist!

</body>

</html>

Kui soovida mitme seiluriga hakkama saada, siis üheks võimaluseks on kindlaks teha, millise brauseriga parajasti tegemist on. Siin näites on reageerimise eeltingimuseks seatud Javascript1.2 toetus ning edaspidi käitutakse Internet Exploreriga ühtviisi, ülejäänutega teisiti. Objekti window.navigator parameeter userAgent näitab brauseri tüüpi ning kui selles leidub MSIE, siis tõenäoliselt on tegemist Microsofti soovide järgi tegutseva tootega. Seal saadakse andmed hiire asukoha kohta objektist event ning sündmuste püüdmise registreerimist pole vaja.

<html><head><title>Hiire koordinaadid liikumisel</title>

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

if(kasIE){

document.onmousemove=hiireliikumineIE;

} else {

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=hiireliikumine;

}

function hiireliikumineIE(){

document.tekstikastivorm.koordinaadid.value=

event.x+", "+event.y;

}

function hiireliikumine(syndmus){

document.tekstikastivorm.koordinaadid.value=

syndmus.pageX+", "+syndmus.pageY;

}

</script>

</head>

<body>

Head liigutamist!

</form>

</body>

</html>

Muusika

Lihtsalt loo saab mängima panna, kui öelda, millisest failist selle tarvis andmed võtta. Ekraanile ilmub soovitud suuruses juhtpult, kus saab soovitud hetkel lugu mängida või mängimist katkestada.

<body>

</body></html>

Kui parameetrile loop anda väärtus –1, siis peaks kordusmängimine kestma igavesti. Kui kord jõutakse loo lõppu, siis alustatakse taas algusest. Hidden ütleb, et juhtpult on varjatud ning kasutajal ei õnnestu mängivast loost muidu lahti saada, kui sellelt lehelt lihtsalt lahkuda. Kui aga lugu meeldib, siis pole tarvis sellega kiirustada.

<body>

Pala mängitakse kogu lehel olemise aja, juhtnupud peidetud

</body></html>

Programmi koha pealt tähtsamaks käsuks on võimalus javaskripti abil määrata, millal lugu alustada või lõpetada. Kui siin vaid vajutamise peale hakatakse mängima, siis võib ju päris lehel lasta soovikohaseid kõlle just siis, kui selleks õige aeg avaneb.

<body>

<form>

</form>

</body></html>

Sisseehitatud objektid ja funktsioonid

Javaskript on üldpõhimõtetelt objektorienteeritud keel, seetõttu enamiku vahendeid leiab vaid objektide sisse kapseldatuna. Siiski on võimalik kümmetkonda käsklust tarvitada ilma otse objekti ehk isendit loomata või olemas oleva klassi poole pöördumata. Enamkasutatavad neist:

parseInt püüab muuta etteantud väärtuse täisarvuks, antagu see sinna ette siis teksti või numbrina. Nii parseInt(3), parseInt(3.14), parseInt("3"), parseInt("3.14") annavad tulemuseks arvu 3. Samuti teevad seda parseInt("3. klass") kui parseInt("3 õpilast"). Reaalarvu puhul saadakse täisarv lihtsalt murdosa äralõikamise teel, nii et parseInt(5.9) tulemuseks on 5. Teksti puhul hakatakse algusotsast sümboleid lugema ning kuni on tegemist numbritega, seni arvatakse tulemus kokku üheks arvuks. Kui aga tuleb sümbol, millele arvulist väärtust ei anna omistada, siis etteantud sõnet enam edasi ei vaadata ning tulemus väljastatakse teksti ees leidunud numbrite põhjal. Kui tulemust pole võimalik arvuks muuta väljastatakse väärtus NaN ehk Not a Number. Nõnda tulebki, et parseInt("3 õpilast") annab kokku 3, samuti parseInt(" 3 õpilast"), sest algul paiknevaid tühikuid ei arvestata, parseInt("õpilane") aga NaN, sest esimene täht "õ" ei anna kuidagi end kümnendsüsteemis numbriks muuta ning nii ei jää alamprogrammil muud üle kui kasutajale teatada, et tegemist pole numbriga. Samuti on tulemuseks NaN, kui käsule ette sööta tühisõne "", false või true. Kuigi näiteks C-keeles tähistatakse false=0 ning true=1, siis siin on parseInt(true) vastuseks NaN. Kaheksand- ning kuueteistkümnendsüsteemiga saab parseInt samuti hakkama, tunnusedki samad. Kaheksandsüsteemi numbril peab ees olema 0, kuueteistkümnendsüsteemi omal 0X. Nii on parseInt("014") väärtuseks 12, samuti parseInt("014dd") juures, sest järgnevaid tähti lihtsalt ei loeta, kuna neid ei anna vastavas süsteemis arvuks muuta. parseInt(014dd) annab veateate, sest siis tekib parameetriks arusaamatu kombinatsioon, mis pole ei tekst ega number ning millega intepretaator ei oska midagi mõistlikku peale hakata. Kuueteistkümnendsüsteemi puhul aga osatakse f ning sellest tähestikus eespool olevad sümbolid ilusti tõlkida ning väärtus saadakse kätte. parseInt(0x14) annab 20, samuti parseInt("0x14"). Kui kirjutada parseInt("0x14dd"), on tulemuseks 5341.

parseFloat töötab analoogiliselt, st., et seni kuni sinna ette antud teksti algusest leitakse käsule arusaadavaid numbreid, niikaua kogutakse väljastatavat väärtust. parseFloat("3.14 ja veel pool") annab tulemuseks 3.14. parseFloat("xxx") aga teatab NaN, sest etteantud sõnet ei anna ka mitte reaalarvuks muundada. Kaheksand- ning kuueteistkümnendsüsteemi eritunnused siin ei tööta, parseFloat("014") annab tulemuseks 14 ning parseFloat("0x14") väljastab nulli. Seevastu saab aga kümne astet määrata. parseFloat("15E2") annab tulemuseks 1500 ning parseFloat("15E-1") 1.5.

isNaN väljastab true, kui etteantud väärtus pole teisendatav numbriks. Selle abil saab näiteks uurida, kas kasutaja sisestas korrektse arvu.

<html><head><title>Numbri küsimine</title></head>

<body>

var nr=prompt("Palun täisarv", "");

while(isNaN(nr)){

nr=prompt(nr+" pole arv. Proovi uuesti", "5");

}

for(var i=0; i<nr; i++){

document.writeln("Tere!<br>");

}

</script>

</body></html>

escape ning unescape aitavad, kui on vaja andmeid URL-i kaudu üle kanda või muul moel liigutada, kus kasutada tohib vaid täppideta tähti ning protsendimärki. escape teisendab kõik parajasti sobimatud sümbolid kuueteistkümnendkoodi ning unescape abil saab jälle esialgse oleku tagasi. Näiteks escape("õpilane") annab tulemuseks %F5pilane ning unescape("%F5pilane") = õpilane. Lahtiseletatult F5 on kuueteistkümnendsüsteemis 245 (mis ongi õ kood), protsendimärk ees näitab, et järgnevad kaks sümbolit tuleb kuueteistkümnendkoodis arvuks lugeda. escape("15% väävelhape!") on 15%25%20v%E4%E4velhape%21 , ka protsendimärk ise edastatase kuueteistkümnendkoodi kaudu. Kuueteistkümnendsüsteemi 20 ehk kümnendsüsteemi 32 on tühiku kood, neid tuleb pikemate tekstide kodeerimisel küllalt sageli ette.

eval-nimeline funktsioon täidab hulga ülesandeid, mille kordasaatmiseks mõnes kompileeritavas programmeerimiskeeles tuleb sadu ja tuhandeid ridu kirjutada. Sinna parameetriks antud sõnet käsitletakse programmi tekstina ning lastakse intepretaatoril see tööle panna. Nii võib välja arvutada kasutaja sisestatud avaldiste väärtusi, samuti käivitada etteantud nimega alamprogramme või arvata tükkides kokku muutuja nimesid.

<body>

var a=3, b=5;

var avaldis=prompt("Palun f(a, b)", "2*a+b");

var tulemus=eval(avaldis);

alert(tulemus);

</script>

</body></html>

teatab meile rõõmsalt sisestatud avaldise väärtuse.

function sisestamine(){

var nr=prompt("Lahtri nr", 1);

var sisu=prompt("Sisestatav tekst ", ":-)");

eval("window.document.vorm1.tekst"+nr+".value='"+sisu+"'");

}

</script>

</head>

<body>

</form>

</body></html>

juures antakse eval'ile ette käsklus, kus tal tuleb vastavalt etteantud numbrile paigutada tekst sobivasse tekstivälja ning nagu katse näitas, sai käsklus sellega hakkama.

Sisseehitatud objektide loetelu

Järgnevad sisseehitatud objektid koos oma käskudega peaksid kasutatavad olema kõikjal, kus Javaskriptiga tegemist tuleb.

Array	Massiiv
Boolean	Tõeväärtus
Date	Aeg
Function	Alamprogramm
Math	Arvutused
Number	Numbrid
Object	Objektide üldised omadused
RegExp	Regulaaravaldised, sõnetöötlus
String	Sõne uurimine

Massiiv (Array)

Siin ei pea iga meeles hoitava väärtuse tarvis uut muutuja nime välja mõtlema, piisab elementide hulgale nime panekust ning pärast järjekorranumbri järgi välja kutsumisest. Nii võib ühte ritta seada õpilaste nimesid, pikkusi või sünniaastaid. Peab vaid teada olema, mitmenda elemendiga meil parajasti tegemist on. Uue massiivi saab luua käsuga new Array(), nii nagu järgnevas näites on

var riigid=new Array();

Selle tulemusena luuakse massiiv nimega riigid, milles pole ühtegi elementi. Massiivi pikkust näitab tema juurde kuuluv muutuja nimega length. Kui annan käskluse

document.writeln("riike on "+riigid.length+"<br>");

siis trükitakse välja massiivi pikkus ehk mitu riiki on riikidemassiivis. Kui sinna pole ühtegi nime paigutatud, siis on ka massiiv tühi ning tema elementide arv on 0. Soovides massiivi andmeid lisada, tuleb lihtsalt vastava koha peale väärtus paigutada. Javaskripti massiivi esimene element on alati järjekorranumbriga 0 nii nagu mõnes muuski keeles, näiteks C-s. Pärit on selline lugemine aegadest, kus programmide kirjutamine oli tihedamalt mäluaadressidega seotud ning massivi algkoht tähistas ühtlasi esimese elemendi asukohta, iga järgmise elemendi leidmiseks tuli aga vastav arv korda elementide pikkus mäluaadressi paremale kolida. Javaskripti juures enam aadresside arvutamine takistuseks ei ole, kuid harjunud kirjutuskuju võeti siiagi üle. Elemendi (riigi) lisamiseks kirjutan

riigid[0]="Soome";

Selle tulemusena pannakse esimeseks elemendiks ehk kohale 0 väärtus "Soome" ning massiivi pikkus ehk riigid.length saab väärtuseks 1. Kui kirjutan

riigid[1]="Rootsi";

, siis pannakse jällegi üks element otsa ning riikidemassiivi pikkuseks saab 2. Soovides massiivi elemendid järjestikku välja trükkida, võib luua tsükli, mis ükshaaval iga väärtuse ette võtab ning temaga soovitud toimingu teeb. Kui panna muutuja algväärtuseks 0, iga ringi juures suurendada muutuja väärtust ühe võrra ning lõpetada siis kui ollakse möödunud viimasest elemendist, siis ongi kõik riigid läbi käidud ning ekraanile trükitud. Nagu all näites Taani puhul näha, ei pea massiivile elemente alati järjest lisama. Üldiselt on see mõistlik ning harva läheb vaja olukordi, kus loetelu mõni element tuleb tühjaks jätta, kuid tühjaks jätmise võimaluse keel siiski pakub. Kui algul olid olemas riigid number 0 ja 1 ning nüüd lisasime 3-e, siis automaatselt suurendatakse massiivi pikkus neljale elemendile nii et vahepeal puudu olevale kohale 2 antakse väärtuseks undefined.

<html><head><title>Massiiv</title></head>

<body>

var riigid=new Array();

document.writeln("riike on "+riigid.length+"<br>");

riigid[0]="Soome";

document.writeln("riike on "+riigid.length+"<br>");

riigid[1]="Rootsi";

document.writeln("riike on "+riigid.length+":<br>");

for(var i=0; i<riigid.length; i++){

document.writeln(i+". "+riigid[i]+"<br>");

}

riigid[3]="Taani";

document.writeln("riike on "+riigid.length+":<br>");

for(var i=0; i<riigid.length; i++){

document.writeln(i+". "+riigid[i]+"<br>");

}

</script>

</body></html>

Väljatrükk:

riike on 0

riike on 1

riike on 2:

0. Soome

1. Rootsi

riike on 4:

0. Soome

1. Rootsi

2. undefined

3. Taani

Juhul kui kohe algul määrata massiivi pikkus käsuga

var riigid=new Array(4);

, siis luuakse nelja elemendiga massiiv, mille igal kohal on väärtus undefined. Kuhu seejärel riigi nimi pannakse sinna jääb see püsima, muud kohad aga on ikka täidetud sisuga undefined. Eelnenud programmi väljatrükk kohe algselt neljaelemendilise massiivi korral on

riike on 4

riike on 4:

0. Soome

1. Rootsi

2. undefined

3. undefined

riike on 4:

0. Soome

1. Rootsi

2. undefined

3. Taani

Algväärtustamine

Kui juba algul on teada, millised väärtused massiivi paigutatakse, siis võib need ette anda kas nurksulgude vahel või siis parameetritena new Array sulgude sees. Nii loetakse massiivi pikkuseks etteantud elementide arv ning järjekorras läheb iga väärtus ilusasti oma kohale.

<html><head><title>Massiiv</title></head>

<body>

puud=["kask", "kuusk", "saar"]

document.writeln("Puu nr. 1 on "+puud[1]+"<br>");

koerad=new Array("Muri", "Pontu", "Polli", "Muki");

document.writeln("Koeri on kokku "+koerad.length+

". Koer nr. 1 on "+koerad[1]);

</script>

</body></html>

Kahemõõtmeline massiiv

Kui kasutada tabelina paiknevaid andmeid, siis üherealisest massiivist ei aita. Iga väärtuse leidmiseks on vaja teada, millises reas ning millises veerus see asub. Nii on järgmiseks näiteks olevas tunniplaanis, kus teada saamiseks millisesse tundi minna, tuleb otsida nii päeva kui tunni järjekorranumbri järgi. Javaskriptis kohe algselt loodavat kahemõõtmelist massiivi pole, kuid kuna massiivi elementideks võivad samuti olla massiivid, siis pole tabelina paikneva teabe meelde jätmine kuigi keeruline. Ühe päeva tunnid on päevade massiivi üheks elemendiks. Kõigepealt kirjutan

var tunniplaan=new Array(5);

, et oleks iga päeva andmeid kuhugi panna. Edasi

tunniplaan[0]=new Array("Matemaatika", "Kehaline kasvatus", "Loodusõpetus");

loob kõigepealt kolmeelemendilise massiivi tundide nimedega ning paigutab siis selle tunniplaani-nimelise massiivi esimeseks elemendiks. Kui nõnda talitada ka järgmiste päevade andmetega, siis tulemuseks on kahemõõtmeline ainenimede massiiv, kus ridadeks on päevad ning veergudeks tundide numbrid.

<html><head><title>Tunniplaan</title>

var tunniplaan=new Array(5);

tunniplaan[0]=new Array("Matemaatika", "Kehaline kasvatus", "Loodusõpetus");

tunniplaan[1]=new Array("Maateadus", "Emakeel", "Laulmine", "Kirjandus");

tunniplaan[2]=new Array("Kunstiõpetus", "Rütmika", "Ajalugu");

tunniplaan[3]=new Array("Matemaatika", "Emakeel", "Kirjandus");

tunniplaan[4]=new Array("Ajalugu", "Laulmine");

var nadalapaevad=new Array(

"esmaspäev", "teisipäev", "kolmapäev", "neljapäev", "reede"

);

var maxtundidearv=tunniplaan[0].length;

for(var i=1; i<tunniplaan.length; i++){

if(tunniplaan[i].length>maxtundidearv)maxtundidearv=tunniplaan[i].length;

}

function naitaTunninimi(){

if(tunniplaan[document.vorm1.paev.selectedIndex].length>

document.vorm1.tund.selectedIndex){

document.vorm1.tunninimi.value=

tunniplaan[document.vorm1.paev.selectedIndex][document.vorm1.tund.selectedIndex];

} else {

document.vorm1.tunninimi.value="Koolipäev läbi";

}

</script>

</head>

for(var i=0; i<nadalapaevad.length; i++){

document.writeln("<option>"+nadalapaevad[i]);

}

</script>

</select>

for(var i=0; i<maxtundidearv; i++){

document.writeln("<option>"+(i+1));

}

</script>

</select>. tund:

</form>

</body></html>

Andmete väljastamine

Andmete hulga kasvades pole sageli mõtet kõiki neid nähtavalt lehele välja trükkida, kasutajal võib neist vaja minna vaid tühist osa. Kui aga lehte lugev arvuti või sideliinid liialt üle koormatud pole, siis mõnekümne kilobaidi teabe kohale vedamine pole kuigi suur probleem. Võrreldes piltide mahtudega jääb teksti hulk enamasti tugevasti väiksemaks. Kui kasutaja soovi järele veel vajalik teave massi hulgast aidatakse üles leida, siis peaks tulemus päris hea olema. Eeltoodud tunniplaaninäites hoitakse andmeid kahemõõtmelises massiivis ning kasutajal lastakse valida, millise päeva mitmenda tunni nime ta soovib vaadata. Andmete sisestamine on päises ühes kohas koos, need võib soovi korral kas või eraldi failist sisse lugeda. Kui mõni tund lisatakse, eemaldatakse või muudetakse, siis piisab, kui see muutus sisse viia andmete kirjeldamise juures. Ülejäänud programm juba ise püüab vastavalt uuele olukorrale käituda. Ka nädalapäevade nimed on pandud massiivi. Nii on võimalik kergesti ka laupäev koos sellele vastavate tundidega lisada või programm suisa teise keelde tõlkida ilma, et käsujada sisusse kuigivõrd süvenema peaks. Suurim tundide arv päevas leitakse järgneva käsulõigu abil:

var maxtundidearv=tunniplaan[0].length;

for(var i=1; i<tunniplaan.length; i++){

if(tunniplaan[i].length>maxtundidearv)maxtundidearv=tunniplaan[i].length;

}

Kõigepealt jäetakse meelde, palju oli tunde esimesel päeval. Edasi vaadatakse järgemööda kõik järgnevad päevad läbi ning juhul kui sealt leitakse mõni päev, kus tunde enam kui siiamaani meelde jäetud väärtuses, siis pannakse leitud arv suurimana kirja. Selliselt toimides on lõpuks teada, palju võib ühel päeval tunde olla ning kui lähteandmetesse tekib hästi pikk päev, siis teatakse valikmenüüsse ka vastavad numbrid lisada. Kui aga tundide arv kahaneb, siis ei jää üleliigne number kasutaja silma alla teda häirima.

for(var i=0; i<maxtundidearv; i++){

document.writeln("<option>"+(i+1));

}

Niisuguse tsükli abil kirjutatakse valikuid just nii palju kui maxtundidearv näitab. Arvutus (i+1) on väärtuse leidmiseks tarvilik seepärast, et kui i esimene väärtus on 0 ja suurim väärtus maxtundidearv-1 nagu massiivielementide ja menüüelementide järjekorranumbrite lugemisel tavaks on, siis kasutaja näeks tavapärast ühega algavat tundide järjekorda tuleb indeksile üks juurde liita.

Tunni nime näitamisel kontrollitakse kõigepealt, kas vastaval päeval üldse märgitud arvu tunde on. Kuna rippmenüü näitab suurimat nädalas leitud tundide arvu päevas, siis võib kergesti juhtuda, et tegelikult kolme tunniga päeval otsitakse viiendat tundi. Et kasutaja ette ei satuks massiivi olematut elementi tähistav "undefined", selleks kontrollitakse tundide arvu ning küsitava tunni vastavust. Leides, et soovitakse lõppenud päeva järel veel tarkust taga nõudma minna teatatakse otsijale rõõmsalt, et koolipäev on läbi.

function naitaTunninimi(){

if(tunniplaan[document.vorm1.paev.selectedIndex].length>

document.vorm1.tund.selectedIndex){

document.vorm1.tunninimi.value=

tunniplaan[document.vorm1.paev.selectedIndex][document.vorm1.tund.selectedIndex];

} else {

document.vorm1.tunninimi.value="Koolipäev läbi";

}

Paljas tunninime näitamise funktsiooni loomine iseeenesest ei too veel kasutaja ette soovitud väärtust. Ilma eraldi märkimata võib proovida tunde valida kuitahes kaua, lahendust pakkuva tekstivälja sisse ei ilmu midagi. Kui mõlema rippmenüü juurde kirjutada, et valiku muutumisel tunninime näidata tuleb, siis on lootust, et kasutaja silma alla ka vastus jõuab.

Et lehe avamisel ei tunduks nagu esmaspäeva esimene tund suisa puuduks, siis tuleks ka algul valikute olekutele vastavat väärtust näidata ning selleks sobib sama juba vastavaks otstarbeks loodud alamprogramm.

Andmete talletamine ei pruugi piirduda kahemõõtmelise massiiviga ning ka tulemusteks tuleb edastada enamjaolt rohkemat kui üht sõna. Kui tuleks lisaks päevale ja tunnile määrata ka klass mille tunninime otsitakse, siis tuleks lihtsalt üks massiiv juurde luua, mille iga element tähistaks ühele klassile vastavat tunniplaani. Nii võib tunni otsimiseks lisada veel ühe rippmenüü, millega määrata, millise klassi tunniga peaks tegemist olema. Kui aga soovida kõikide klasside reedeseid tunde või ühe klassi kõiki tunde, siis jääb tekstivälja võimalustest väheks. Tuleb kasutada kas tekstiala ning tühikutega otsitavad väärtused loetavalt paika lükata või lausa iga päringu tarvis aken avada, kus vastused ilusasti tabelina kirjas on.

Sortimine

Elementide järjekorda seadmine on javaskriptis lihtsaks tehtud. Kui mul on loodud kolmeelemendiline massiiv nimega sonad, siis sealsete sõnade tähestiku järjekorda seadmiseks piisab käsust

sonad.sort();

Rittaseadmise aluseks arvestatakse, mis tulemus saadakse "on suurem kui (>)" märgi abil. Kuna a on tähestikus eespool kui s, on võrratus "sai">"allveelaev" tõene. Arvud saadakse niimoodi ilusti ritta, kuid kuna sõnedel võetakse tähestiku aluseks paiknemine kooditabelis, siis eesti täpitähtedega sõnade rittaseadmisel tekib probleeme. "õ" koodiks on 245, "ä" koodiks 228, kuid viimane peaks esimesest taga pool paiknema. Et meile soovitavat tulemust saada tuleks oma alamprogramm kirjutada, mis hoolitseks, et sõnade võrdlemisel õigeid tulemusi saadaks. Näiteks on toodud lihtsam võrdlusfunktsioon, mis määrab nende järjekorra sõltuvalt sõnade pikkusest. Funktsioon peab väljastama nullist suurema arvu, kui esimene etteantud parameeter on alamprogrammile antud käskude järgi suurem kui teine ning nullist väiksema arvu, kui esimene parameeter peaks teisest väiksem olema. Etteantud tingimuse järgi võrdsuse korral peab alamprogramm väljastama nulli. Sarnaselt etteantud alamprogrammi järgi võrdlemist esineb ka teistes programmeerimiskeeltes, näiteks C ja Java. Sõnapikkuste võrdlemiseks on

function lyhemEtte(s1, s2){

return s1.length-s2.length;

}

mis lahutab esimese sõna pikkusest teise sõna pikkuse. Nagu näha, on funktsioonile ette antud tingimused täidetud: kui esimene on pikem, jääb tulemus üle nulli. Kui teine pikem siis alla ning ühepikkuste sõnade puhul on pikkuste vahe 0.

<html><head><title>Sortimine</title>

var sonad=new Array();

sonad[0]="kala";

sonad[1]="sai";

sonad[2]="allveelaev";

function lyhemEtte(s1, s2){

return s1.length-s2.length;

}

</script>

</head><body>

Sõnad: <br>

for(var i=0; i<sonad.length; i++){

document.writeln(sonad[i]+"<br>");

}

document.writeln("<p>Sorteeritult:<br>");

sonad.sort();

for(var i=0; i<sonad.length; i++){

document.writeln(sonad[i]+"<br>");

}

document.writeln("<p>Pikkuse järgi sorteeritult:<br>");

sonad.sort(lyhemEtte);

for(var i=0; i<sonad.length; i++){

document.writeln(sonad[i]+"<br>");

}

</script>

</body></html>

Ning töö väljund.

Sõnad:
kala
sai
allveelaev

Sorteeritult:
allveelaev
kala
sai

Pikkuse järgi sorteeritult:
sai
kala
allveelaev

Liitmine, pööramine ja sõneks muutmine

Kaks massiivi ühendab meetod concat. Tulemusena luuakse uus massiiv, mille alguses on esimese ning lõpus teise massiivi elemendid. join väljastab massiivi elemendid sõnena, pannes elemendid üksteise järele ritta ning nende vahele parameetrina antud sõne. Siin näites eraldatakse nimed semikooloni ning tühikuga. slice võimaldab võtta massiivist välja osa ning sellest koostada uus massiiv. Määratakse algindeks (kaasa arvatud) ning lõpuindeks (välja arvatud), millised elemendid uude massiivi üle kanda. Kui lõpuindeksit ei panda, siis kopeeritakse väärtused uude massiivi alates algindeksist kuni algse massiivi lõpuni. All näites pole slice juurde määratud ei uue massivi nime kuhu andmed panna ega lisatud join käsklust, mis andmed sõneks muundaks. Siis võetakse ette massiivi sisemine võime väljatrükil elemendid üksteise järele komadega eraldatult paigutada. Kui sooviksin keskmistest lastest eraldi massiivi koostada, siis võiksin kirjutada

var keskmised=lapsed.slice(1, 5);

<html><head><title>Massiiv</title></head>

<body>

<h3>Massiivi andmete liitmine, ühendamine ja pööramine</h3>

var poisid=new Array("Jüri", "Ants", "Siim");

var tydrukud=new Array("Mari", "Kati", "Triinu");

var lapsed=poisid.concat(tydrukud);

document.writeln("Metsas suusatavad: "+lapsed.join("; ")+"<br>"+

"Tagasi tulid nad järjekorras: "+lapsed.reverse().join(", ")+"<br>"+

"Keskmised olid :"+lapsed.slice(2, 4));

</script>

</body></html>

Väljund:

Metsas suusatavad: Jüri; Ants; Siim; Mari; Kati; Triinu

Tagasi tulid nad järjekorras: Triinu, Kati, Mari, Siim, Ants, Jüri

Keskmised olid :Mari,Siim

Aeg (Date)

Kuupäeva ning kellaaja küsimiseks ja ka muudeks ajaarvutusteks on Javaskriptis klass Date. Kui kirjutada

var praegu=new Date();

, siis luuakse kuupäevatüüpi isend ning omistatakse see muutujale nimega praegu. Tühjade sulgudega loodud Date saab enese sisse tekkimise hetkel olnud aja. Aega hoitakse objektis ühe suure numbrina ehk millisekundite arvuna alatest 1. jaanuarist 1970. Esmapilgul võib selline aja hoidmise viis kahtlane tunduda, kuid nii on kergem üksikuid aegu mälus hoida ja omavahel võrrelda ning arvutile ei valmista kuigi palju raskusi kasutaja soovi korral sellest tekkinud ühest pikast numbrist soovitud komponente nagu päev, kuu, aasta, tunnid, minutid ja sekundid kätte saada.

<html><head><title>Kuupäev</title></head>

<body>

var praegu=new Date();

document.writeln("Täna on "+praegu.getDate()+"."+(praegu.getMonth()+1)+"<br>");

document.writeln("Kell on "+praegu.getHours()+":"+praegu.getMinutes()+

":"+praegu.getSeconds()+"<br>");

</script>

</body></html>

Muud väärtused tulevad nii nagu ikka inimesed kasutavad, st., et esimese kuupäeva puhul väljastatakse number 1 ning pool tundi on 30 minutit. Kuude ning nädalapäevade juures aga on arvestatud massiivide abil väärtuse tekstiks muundamist ning seetõttu hakkavad nende väärtused nullist. Seega jaanuari puhul väljastab getMonth() 0-i, veebruari puhul ühe jne. Nädal hakkab peale pühapäevast nagu keeleloojate kodumaal tavaks ning pühapäevale vastab 0, esmaspäevale 1 kuni laupäev=6-ni välja. Nagu alt näitest näha, annab niimoodi ilusti kuude ja päevade nimetused sõnadega asendada. Aasta annab mõni seilur korralikult neljakohalisena, aga näiteks vanemad Netscape versioonid väljastavad aastanumbreid kaugusena aastast 1900. Siis tuleb, et 1989=89 ning 1993=93, kuid et 2001 puhul antakse välja 101, selle peale kirjutajad ei tulnud mitte, kes see ikka nii pika aja peale ette mõtleb. Et ekraani peal tulemus arusaadaval kujul paistaks, sellepärast tuleks aastanumbrite puhul ennustada, millise sajandi aastaarvuga on tegemist ning siis vajaduse korral algsele väärtusele 1900 juurde liita, et Gregoriaani kalendri järgi sobilik number välja paistaks.

Aegade vahet saab leida, kui koostada kummagi ajahetke tarvis suurest paugust (01.01.70) aega näitav number ning siis suuremast väiksem lahutada. Kui soovin teada aasta 2001 algusele vastavat hetke, siis loon ajaobjekti andes talle ette aasta, kuu ja päeva.

var aastaalgus=new Date(2001, 0, 1);

Lahutades praegusest ajatemplist aastaalgusele vastava ajatempli väärtuse, saab tulemuseks nende kahe hetke vahe millisekundites. Edasi võib seda väärtust töödeldes muuta ta parasjagu vajalikeks suurusteks.

var vahe=praegu.getTime()-aastaalgus.getTime();

Millisekundite sekunditeks tõlkimiseks piisab nende jagamisest tuhandega. Tahtes millisekundeid arvutada päevadeks tuleb algne väärtus jagada millisekundite arvuga päevas. Et korraga annab sellist suurt arvu nuputada, siis võib kokku korrutada millisekundid sekundis (1000), sekundid minutis (60), minutid tunnis (60) ning tunnid päevas(24).

var paevi=vahe/(1000*60*60*24);

<html><head><title>Kuupäev</title>

var nadalapaevad=new Array(

"pühapäev", "esmaspäev", "teisipäev", "kolmapäev",

"neljapäev", "reede", "laupäev"

);

var kuud=new Array(

"jaanuar", "veebruar", "märts", "aprill", "mai", "juuni",

"juuli", "august", "september", "oktoober", "november", "detseber"

);

</script>

</head>

<body>

var praegu=new Date();

var aasta=praegu.getYear();

if(aasta<1900)aasta=aasta+1900;

document.writeln("Arvuti teatab ajaks"+praegu.toLocaleString()+"<br>");

document.writeln("Ise kokku pannes tuleb "+

nadalapaevad[praegu.getDay()]+", "+praegu.getDate()+". "+

kuud[praegu.getMonth()]+" aastal "+aasta+"<br>"

);

var aastaalgus=new Date(aasta, 0, 1);

var vahe=praegu.getTime()-aastaalgus.getTime();

var paevi=vahe/(1000*60*60*24);

document.writeln("Aasta algusest on möödunud "+vahe/1000+

" sekundit ehk "+paevi+" päeva. <br>Täna on aasta "+

(parseInt(paevi)+1)+". päev.");

</script>

</body></html>

Mõõta saab ka lühemaid ajavahemikke. Kui on vaja teada, kaua kulus kasutaja andmete otsimiseks või ülesannete lahendamiseks aega, võib lihtsalt jätta meelde algaja ja lõppaja, leida nende vahel olevad millisekundid ning väärtus ongi käes. Nüüd on juba programmi mure, mis sellega edasi teha. Kui soovida veebilehele panna tiksuma kella, siis piisab, kui luua alamprogramm, mis jooksva aja masinalt küsib ja sealt kellaaja kuhugi tekstivälja joonistab. Kui funktsioon panna käivituma korra sekundis, siis täidabki see kella ülesandeid.

Regulaaravaldised

Paari sõnetöötlusfunktsiooniga on võimalik kõik tekstidega ettevõetavad toimingud korda saata. Kui on võimalik sõna tähtedeks jagada ning igaühe väärtust eraldi teada saada ning muuta, siis ei jää midagi tegemata sellepärast et pole võimalik teha. Lihtsalt mõni ülesanne võtab rohkem aega kui teine. Korduvate olukordade tarvis saab enesele abiks kirjutada alamprogramme, mis võivad mõnikord edaspidist tööd palju kordi lihtsustada. Selliseks tekstianalüüsi abiks on loodud objekt RegExp. Selle kaudu õnnestub kontrollida, kas lause vastab etteantud mallile. Samuti annab regulaaravaldisega eraldada edaspidiseks kasutamiseks mallis ettemääratud lauseosi. Nõnda võib suhteliselt kerge vaevaga korjata lausest välja näiteks numbrid või suure tähega algavad sõnad. Ega vastava alamprogrammigi kirjutamine ületamatu vaev ei tohiks olla, kuid malli abil soovitud kuju ette andes on meil kergemini võimalik vajadusel andmete kuju muuta ilma, et peaksime selleks kümneid ja sadu koodiridu ümber kirjutama. Universaalse malli järele lauset kontrolliva alamprogrammi kirjutamine oleks aga küllalt suur töö ning võime rahul olla, et meie eest on selle keegi juba ära teinud.

Sõne vastavus mallile

Järgnevas näites kontrollitakse, kas nimes sisaldub täht a. Selle tarvis luuaks kõigepealt regulaaravaldise tüüpi objekt nimega r, kuhu antakse sulgudes ette mall, millele vastavust edaspidi kontrollida. Kuna mall esitatakse sõnena, siis on sellel jutumärgid ümber. Mallis nurksulgude vahel paiknev a tähendab, et kui hiljem tahaks mõni lause avaldisele vastata, siis peab lauses leiduma a. Kus kohal lauses ning kas üks või mitu tükki, see pole oluline. Küll aga peab tegemist olema väikese a-ga, sest suur- ja väiketähti eristatakse, kui just pole avaldis tõstutundetuks määratud.

<html><head><title>Regulaaravaldis</title></head>

<body>

var r=new RegExp("a");

var nimi="Mati";

if(r.test(nimi)){

alert("Nimes "+nimi+" on a");

}

</script>

</body>

Avaldise ehituse kirjeldamiseks on mõniteist sümbolit/kombinatsiooni, mõned neist:

Selgitus	Avaldis	Sobiv sõne
* tähistab 0 või enam korda eelnevat tähte	jä*r	jäääär
+ tähistab 0 või enam korda eelnevat tähte	jä+r	jäääär
? tähistab 0 või 1 korda eelnevat tähte	Kat?i	Kai
Tähe korduse määramine	jä{2,4}r	jäääär
Täpselt 4 ä-d	jä{4}r	jäääär
Vähemalt 2 ä-d	jä{2,}	jäääär
Sisaldab a-tähte	a	Mati
Sisaldab teksti "ala"	ala	jalake
Sisaldab "ala" või "eri"	ala\|eri	herilane
Sisaldab n-i võid t-d	[nt]	Mati
Sisaldab vähemalt üht tähte vahemikust n-v	[n-v]	Mati
Sisaldab l-i või tähe vahemikust n-v	[n-vl]	Maali
Rida algab a-ga	^a	apelsin
Rida lõpeb t-ga	t$	salat
Kaks sõna	\\w+\\s\\w+	Sinine taevas

\d ehk [0-9] tähistab numbrit, \D ehk [^0-9] tähistab mittenumbrit. Nurksulgude sees vastab rõhumärgile ^ eitus, mujal sõna algus. \w tähistab suvalist sõnas leiduvat tähte, \s sõnavahet. Näites on sõna tarvis kirjutatud \\w+ . Kaks langjoont on algul, kuna Javaskriptis on \ erisümbol teiste märkide edasiandmiseks, \\ tähistab ühte langjoont. Kuna + näitas, et vastav täht esineb vähemalt ühe korra, siis vastabki väjendile \\w+ sõna.

Asendamine

Tekstis ühe sõne asendamiseks teisega võib kasutada RegExp'i võimalusi. Sõne käsk replace asendab lauses avaldisele vastanud lõigu etteantud sõnega.

<html><head><title>Regulaaravaldis</title></head>

<body>

var r=new RegExp("kass");

lause1="Üks kass läks üle silla";

lause2=lause1.replace(r, "koer");

document.writeln(lause2);

</script>

</body></html>

Töö tulemuseks oli

Üks koer läks üle silla

Kui asendatavaid lõike on rohkem kui üks, siis tuleb märkida, et asendus toimuks kogu etteantud lause ulatuses. RegExp'i loomisel tuleb konstruktorisse kirjutada lisaks "g" (globaalne). Kui soovitakse, et avaldises ei eristataks suur- ja väiketähti, siis tuleks märkida parameetriks "gi" (i=ignore case).

<html><head><title>Regulaaravaldis</title></head>

<body>

var r=new RegExp("kass", "g");

lause1="Üks kass läks üle silla, see kass oli tume.";

lause2=lause1.replace(r, "koer");

document.writeln(lause2);

</script>

</body></html>

Koodilõik väljastas

Üks koer läks üle silla, see koer oli tume.

Jäänuks asenduses g märkimata

var r=new RegExp("kass");'

siis tulnuks asenduse tulemusel lause

Üks koer läks üle silla, see kass oli tume.

Soovides esialgset lauset põhjalikumalt ümber tõsta või sealt sootuks üksikuid osi tarvitada, siis tuleb mallis meeldejäetav osa ümarsulgudesse paigutada ning pärast asenduse juures saab dollari ja järjenumbriga vastava lõigu kätte. Esimene sobinud lõik on $1, järgmine $2 jne. All näites jäetakse meelde esimene sõnale järgnev number. \\w+ annab sõna, \\s sõnavahe ning seejärel ([0-9]*) teatab et järgnevad 0 kuni mitu numbrit tuleb meelde jätta.

<html><head><title>Regulaaravaldis</title></head>

<body>

Sulgude vahel olev jäetakse meelde<br>

var r=new RegExp("\\w+\\s([0-9]*)\\s\\w+");

lause1="Kõik 31 kassi";

lause2=lause1.replace(r, "Esimene number lauses on $1");

document.writeln(lause2);

</script>

</body></html>

Vastavuste kogumine massiivi

Järgnevale mallile "(\\d)[\\s\\w]*(\\d)" vastavad kaks ühekohalist numbrit, mille vahel on suvaline hulk tähti või tühikuid. Näites etteantud lause "1 ja 3" vastab sellele tingimusele täiesti. Numbrid on sulgude vahel ning jäetakse seega meelde. Avaldise test kontrollib kõigepealt, kas etteantud lause sobis malliga. Sobimatuse korral loobutakse analüüsist ning teatatakse mittevastavusest kuna sel juhul nagunii ei õnnestu avaldisest soovitut kätte saada ning parem on soovimatutest veateadetest hoiduda. RegExp'i käsk exec võtab andmeteks parameetrina etteantud lause ning avaldises ümarsulgudes paiknevatele märkidele vastavad sümbolid või lõigud paigutatakse massiivi elementideks. Kõige esimesele kohale (järjekorranumbriga 0) pannakse esialgsest lausest avaldisele vastanud lõik (praegusel juhul kogu lause). Edaspidi iga elemendi väärtuseks saab järgemööda ümarsulgudes paiknevatele malliosadele vastavad väärtused.

<html><head><title>Regulaaravaldis</title></head>

<body>

Sulgude vahel olev jäetakse meelde<br>

var r=new RegExp("(\\d)[\\s\\w]*(\\d)");

lause1="1 ja 3";

if(r.test(lause1)){

numbrid=r.exec(lause1);

document.writeln("Massiivis " + numbrid.length+" elementi<br>");

for(var i=0;i<numbrid.length;i++){

document.writeln(i+". "+numbrid[i]+"<br>");

}

} else {

document.writeln("Lause ei vasta avaldisele");

}

</script>

</body></html>

Töö tulemus:

Sulgude vahel olev jäetakse meelde

Massiivis 3 elementi

0. 1 ja 3

1. 1

2. 3

Lauses võib avaldisele vastavaid lõike leiduda rohkem kui 1. Kui soovida ka tagumistest vastavustest omale vajalikke lõike välja valida, siis tuleb avaldis globaalseks märkida ning sealt sama lause kohta mitmel korral vastavusi küsida. Avaldise väli lastIndex näitab, kui kaugele (mitmenda märgini) lauset analüüsides jõuti. Järgmise analüüsi (exec) korral jätkatakse uurimist sellest kohast edasi.

Klassi RegExp väljad leftContext ning rightContext näitavad, milline osa algsest lausest jäi seekordsel uurimisel vaatluse alt välja. Kuna siin määratakse, et avaldisele vastav osa peab algama numbriga, siis jääb algul olev sõna "numbrid" uuringu alt välja ning omistatakse muutujale leftContext. Kuna esimene vastavus lõpeb numbriga 3, siis kogu ülejäänud tekst "ning 2 ja 4 meeldivad" jääb uuringust välja ning omistatakse muutujale rightContext. Uue uuringu puhul näitab lastIndex kohta kust alustada ning selleks tulebki parasjagu kogu tekst, mis eelmisel korral paremalt poolt välja jäi. Nüüd algab mallile sobiv koht numbriga 2 ning lõpeb numbriga 4, see jääb vaskult välja (ja omistatakse muutujale leftContext) sõna "ning" ja paremale jääb vaatamata "meeldivad" ning sellest kohast muutuja lastIndex kaasabil alustatakse järgmisel korral vastavuse otsimist. Siis enam avaldisele vastavat lõiku algsest lausest ei leita, sest sõna "meeldivad" ei sisalda numbreid. Uuringu (exec) väljastatavale massiivile antakse tühiväärtus null ning nüüd on juba programmeerija mure hoolitseda, et olematust kohast väärtusi ei hakataks võtma.

<html><head><title>Regulaaravaldis</title></head>

<body>

<h3>Numbripaaride eraldamine lausest</h3>

var r=new RegExp("(\\d)[\\sa-zõäöü]*(\\d)", "g");

lause1="numbrid 1 ja 3 ning 2 ja 4 meeldivad.";

numbrid=r.exec(lause1);

document.writeln(

"Sisend: "+numbrid.input+"<br>"+

"Võrdluskujund: " +r.source+"<br>"+

"Tõstutundetu: " +r.ignoreCase+"<br>"+

"Globaalne otsing: " +r.global+"<br>"

);

while (numbrid!=null){ //kuni leitakse vasteid

document.writeln("<p>"+

"Algus: " +numbrid.index+"<br>"+

"Ots: " +r.lastIndex+"<br>"+

"Vasakult eraldi: " +RegExp.leftContext+"<br>"+

"Paremalt eraldi: " +RegExp.rightContext+"<br>"+

"Viimati leiti: " +RegExp.lastMatch+"<br>"+

"Viimane kujund: " +RegExp.lastParen+"<br>"+

"Massiivis " + numbrid.length+" elementi:<br>"

);

for(var i=0;i<numbrid.length;i++){

document.writeln(i+". "+numbrid[i]+"<br>");

}

numbrid=r.exec(lause1);

}

</script>

</body></html>

Töö tulemus:

Numbripaaride eraldamine lausest

Sisend: numbrid 1 ja 3 ning 2 ja 4 meeldivad.

Võrdluskujund: (\d)[\sa-zõäöü]*(\d)

Tõstutundetu: false

Globaalne otsing: true

Algus: 8

Ots: 14

Vasakult eraldi: numbrid

Paremalt eraldi: ning 2 ja 4 meeldivad.

Viimati leiti: 1 ja 3

Viimane kujund: 3

Massiivis 3 elementi:

0. 1 ja 3

1. 1

2. 3

Algus: 20

Ots: 26

Vasakult eraldi: ning

Paremalt eraldi: meeldivad.

Viimati leiti: 2 ja 4

Viimane kujund: 4

Massiivis 3 elementi:

0. 2 ja 4

1. 2

2. 4

Isendid

Andmetega hõlpsamalt toime tulemiseks neid grupeeritakse. Kui on palju sarnaseid andmeid nagu laste nimesid või autode kiirusi, sellisel juhul võib need panna massiivi ning sealt järjekorranumbri abil kätte saada. Kui aga on vaja korraga vaja meeles pidada nii laste nimesid kui sünniaastaid, sellisel juhul läheb nendega toimimine keerukamaks. On täiesti võimalik luua nii nimede kui sünniaegade tarvis eraldi massiivid ning hoolitseda, et näiteks viiendale vanusele vastaks viies sünniaeg. Kui soovida mõnda last nimekirja lisada või sealt kõrvaldada, siis tuleb see muutus lihtsalt mõlemas massiivis teha. Tunnuste lisandudes tuleb sellisel juhul ka massiive juurde.

Teiseks võimaluseks on ühe isendi (lapse) kohta käivad andmed ühisesse kesta koguda. Sellisel juhul ei teki ohtu, et väikese eksimuse tõttu võiksid nimi ning sünniaeg teineteisest lahku minna. Samuti on ühe lapse ümber paigutamine kergem. Lihtsaim võimalus andmeid ühte kesta paigutada on allpool. Kokku soovin paigutada andmed palli kohta: mustri ning raadiuse. Et edaspidi saaksin nende talletatud andmete poole pöörduda, selleks loon muutuja p1. Kui soovin loodud isendi ühe välja (näiteks raadiuse) andmeid pärida, siis kirjutan esiteks muutuja nime, välja nime ning nende vahele panen punkti. Kui tahan raadiuse väärtust muuta, siis võiksin kirjutada p1.raadius=27.

<html><head><title>Isendid</title></head>

<body>

p1={muster:"Triibuline", raadius:32};

alert(p1.raadius);

</script>

</body>

</html>

Alamprogramm isendi loomiseks

Eeltoodud kirjaviis on hea, kui mul on vaja teha üks või paar isendit. Kui aga on neid vaja luua hulgem, siis tuleks teha alamprogramm isendite loomiseks. See aitab hoolitseda, et isendid tuleksid samade väljadega, mitte et kusagil kirjutan raadiuse kogemata ühe a-ga. Selliselt on võimalik isendi loomisel tema väljade väärtusi kontrollida või välja arvutada, samuti võib edaspidi niimoodi hakata ühe isendi põhjal teisi koostama.

Siin tehakse alamprogramm palli andmeid sisaldava isendi loomiseks. Funktsiooni sees this'i külge pandud muutujad jäävad edaspidi selle isendi omadeks, mis selle alamprogrammi abil loodi.

<html><head><title>Isendid</title></head>

<body>

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

}

p1=new Pall1();

alert(p1.raadius);

</script>

</body>

</html>

Omaduste pärimine

Isendi loomisel võib aluseks võtta teise isendi ning oma tüübi juures hakata siis sellele tunnuseid lisama. Käsklus Pall2.prototype=new Pall1(); tähendab, et Pall2 abil isendite loomisel võetakse aluseks Pall1 eksemplar ning hakatakse selle koopiale uusi tunnuseid lisama. Alati ei pea lisama, neid võib ka muuta või lihtsalt samaks jätta. Sellisel juhul on teine objekt esimese koopia.

Koopia puhul on mõlema isendi väljade väärtused võrdsed. Lisaks on olemas ka selline võimalus, et kaks muutujat osutavad ühele isendile. Sellisel juhul on isendi väljade jaoks mälus vaid üks koht, kus neid hoitakse. Mõlema muutuja (ehk osuti) kaudu loetakse neid ühest kohast ning kui ühe muutuja kaudu raadiust muuta, siis selgub, et ka teise muutuja poolt vaadatav raadius on oma väärtust vahetanud. Selline olukord tekiks näiteks juhul, kui kirjutaksin

a=new Pall1();

b=a;

Kui nüüd määran, et

b.raadius=20;

siis käsuga

alert(a.raadius);

väljastataks mulle samuti 20, ehkki algul sai a oma raadiuse väärtuseks 32, nii kui talle loomisel anti. Järgnevas näites aga kasutatakse Pall2 loomisel Pall1 koopiat. See tähendab, et iga uue isendi tegemisel funktsioon Pall2 abil kõigepealt luuaks mälus uus ruum, kuhu kopeeritakse Pall1 isendi väljade andmed ning alles seejärel hakatakse sinna lisama välju ja väärtusi, mis Pall2-le juurde tulevad. Sellisel juhul, kui ma Pall2 väljade väärtusi muudan, ei mõju see kuidagi sellele objektile, mille põhjal ta on tehtud.

<html><head><title>Isendid</title>

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

}

Pall2.prototype=new Pall1();

function Pall2(){

this.taust="Roheline";

}

</script>

</head>

<body>

p2=new Pall2();

alert(p2.raadius);

p2.raadius=10;

p1=new Pall1();

alert(p1.raadius);

</script>

</body>

</html>

Lisaks andmetele oskused

Pikka aega kasutati sellist kapseldamist vaid andmete kompaktsemaks säilitamiseks ning töötlemise lihtsustamiseks. Siis aga avastati, et isenditest võib enam kasu olla, kui talle lisaks andmetele veel ka oskusi ehk alamprogramme külge panna. Kui isendid nõndamoodi targaks teha, siis saab selle arvel ülejäänud programmi lihtsamaks teha. Sisuliselt on võimalik kusagil isenditele mõeldud alamprogrammid valmis teha, neid hoida ja vajadusel kasutada, kuid tunduvalt mugavam on ütelda aknale, et ta end kinni paneks, kui et hakata selleks vastavat alamprogrammide teeki otsima, kust siis soovitud alamprogrammile akna muutuja ette andes selle ristküliku samuti saaks ekraanilt ära koristada. All näites lisatakse Pall1-he loomisel alamprogramm raadiuse teatamiseks. Niimoodi võin paluda loodud isendil raadius teatada, ilma et peaksin ise hoolitsema, kuidas see käiks. Alamprogramm tuleb kõigepealt valmis teha ning siis saab määrata, millise nimega see isendi külge panna. Nimed võivad kokku langeda, kuid võivad ka erineda.

<html><head><title>Isendid</title>

function tutvustaRaadius(){

alert("Raadius on "+this.raadius);

}

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

this.teataRaadius=tutvustaRaadius;

}

</script>

</head>

<body>

p1=new Pall1();

p1.teataRaadius();

</script>

</body>

</html>

Kui alamprogrammiga (objektorienteeritud terminoloogias meetodiga) isend on teiste isendite loomisel prototüübiks, siis saavad need uued ka selle meetodi omale kaasa. Siin kuigi Pall2 loomisel talle ühtegi meetodit külge ei panda, võtab ta kaasa kõik oma prototüübi omadused ja oskused, koos sellega ka meetodi raadiuse teatamiseks. Nii saangi loodud Pall2-lt raadiuse teatamist küsida.

<html><head><title>Isendid</title>

function tutvustaRaadius(){

alert("Raadius on "+this.raadius);

}

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

this.teataRaadius=tutvustaRaadius;

}

Pall2.prototype=new Pall1();

function Pall2(){

this.taust="Roheline";

}

</script>

</head>

<body>

p2=new Pall2();

p2.teataRaadius();

</script>

</body>

</html>

Alamprogramme saab üksteise seest välja kutsuda. Meetod tutvustaEnnast kutsub teataRaadius’e. Algses kontekstis oleks tegemist veaga, sest kui tutvustaEnnast käima tõmmata, siis pole tal seda teataRaadius’t kusagilt võtta. Kui aga nad pärast isendite loomist on oma kohtadele asetunud, siis asi toimib. Kõigepealt paigutatakse tutvustaRaadius Pall1-te teataRaadius’e nime all. Kui nüüd Pall1 isend määratakse Pall2-he prototüübiks, siis loodavale Pall2-le tuleb teataRaadius automaatselt kaasa. Pall2 meetodiks tutvusta võetakse tutvustaEnnast kood. Kui see käima pannakse ning sealjuures selle sees teataRaadius välja kutsutakse, siis on see täiesti võimalik, sest Pall2 isendi jaoks this.teataRaadius on täiesti olemas. See on tema enda teataRaadius, mille ta on prototüübiks võetud Pall1 kaudu saanud. Nii kutsutaksegi välja teataRaadius, mille sisuks tegelikult on ennist loodud tutvustaRaadius ning mis oma töö tulemusena teatab, et raadius on 32.

All on väljakutse läinud lühemaks. Kui ennist kirjutasin

p2=new Pall2();

p2.teataRaadius();

siis kõigepealt loodi Pall2 isend ning temale juurdepääsuks muutuja p2. Järgmise käsuga pöörduti loodud isendi poole muutuja kaudu ning paluti sel pallil oma raadius teatada. Kui aga kirjutan

new Pall2().tutvusta();

, siis tähendab see, et funktsiooni Pall2 abil luuakse uus isend. Funktsioonist väljunud osuti (ehk isendi mälus paiknemise andmete) abil saadetakse sinna teade et käivitatagu meetod tutvusta. Et selle kood on sama, mis meetodil tutvustaEnnast, siis näeme andmeid nii raadiuse, mustri kui tausta kohta.

<html><head><title>Isendid</title>

function tutvustaRaadius(){

alert("Raadius on "+this.raadius);

}

function tutvustaEnnast(){

this.teataRaadius();

alert("Muster on "+this.muster+" ning taust "+this.taust);

}

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

this.teataRaadius=tutvustaRaadius;

}

Pall2.prototype=new Pall1();

function Pall2(){

this.taust="Roheline";

this.tutvusta=tutvustaEnnast;

}

</script>

</head>

<body>

new Pall2().tutvusta();

</script>

</body>

</html>

Prototüübi abil võib oskusi juurde and ka juba olemasolevatele tüüpidele. Kui prototüübile lisada funktsioon, siis edaspidi vastavat tüüpi isenditel on selline oskus juba sünnist saati kaasas olemas. Siin tehakse funktsioon valjastaLoeteluna, mis eeldab, et ta on haagitud massiivi külge ning saab küsida nii iseenese juurde kuuluvaid elemente kui nende üldarvu. Enese vahendite juurde pöördumiseks on võtmesõna this. Algselt luuakse funktsioon valjastaLoeteluna ning hiljem määratakse samad käsud massiivi prototüübi külge sõnaga valjasta, mille nime alt siis edaspidi saab konkreetsete loodud massiivide juures seda välja kutsuda. Alamprogramm väljastab massiivi elemendid nummerdamata loeteluna.

<html><head><title>Lisaoskustega massiiv</title>

function valjastaLoeteluna(){

document.writeln("<ul>");

for(var i=0; i<this.length; i++){

document.writeln(" <li>"+this[i]);

}

document.writeln("</ul>");

}

Array.prototype.valjasta=valjastaLoeteluna;

</script>

</head>

<body>

<h3>Lisaoskustega massiiv</h3>

var poisid=new Array("Juku", "Mati", "Kalle");

poisid.valjasta();

</script>

</body></html>

Ülekate

Olgugi, et Pall2-le saabub teataRaadius Pall1 kaudu ning esimene ei peaks selle oskuse üle muret tundma ja võiks rahus omandatud oskusega piirduda, ei pruugi sellest talle piisata. Sellisel juhul võib Pall2 vastava oskuse omal uuesti määrata ning siis ei kutsuta välja enam endist tutvustaRaadius’t vaid hoopis palju suursugusem tutvustaRaadius2. Siin on ta vaid näite pärast, kuidas saab meetodit üle katta (niisugune on termin selle kohta), kuid objektorienteeritud andmete puhul on selline kasutamine sagedane. Nii saab näiteks massiivi kokku panna hulga inimesi esindavaid isendeid. Igaühel on oma nimi ja palk, kuid olles pärit eri riikidest, käib nende tulumaksu arvutamine erinevalt. Nii võib teha alul valmis alamprogrammi lihtsalt inimese loomiseks. Seejärel kasutades inimese isendit prototüübina, saab luua nii Eesti, Soome kui Saksamaa kodaniku. Kui edasi iga inimese andmed nimekirjast vastava kesta järgi massiivi panna, mille kodanik ta on, siis tulumaksu teada saamiseks ei pea enam kodakondsust uurima vaid saab usaldada vastava isendi poolt toodud andmeid.

<html><head><title>Isendid</title>

function tutvustaRaadius(){

alert("Raadius on "+this.raadius);

}

function tutvustaRaadius2(){

alert("Olen suur ja ilus ning mu raadius on "+this.raadius);

}

function tutvustaEnnast(){

this.teataRaadius();

alert("Muster on "+this.muster+" ning taust "+this.taust);

}

function Pall1(){

this.muster="Triibuline";

this.raadius=32;

this.teataRaadius=tutvustaRaadius;

}

Pall2.prototype=new Pall1();

function Pall2(){

this.taust="Roheline";

this.tutvusta=tutvustaEnnast;

this.teataRaadius=tutvustaRaadius2;

}

</script>

</head>

<body>

new Pall2().tutvusta();

</script>

</body>

</html>

Et kirjutusvaeva vähendada, on Javaskripti loodud with-lause. Selle kasutamisel ei pea isendi omaduste kasutamiseks muutuja nime ette kirjutama vaid intepretaator oskab ise arvestada, millise isendi tunnuseid nüüd kasutada tuleb.

<html><head><title>Isendid</title>

function Pall1(muster1, raadius1){

this.muster=muster1;

this.raadius=raadius1;

}

</script>

</head>

<body>

p1=new Pall1("Ruuduline", 25);

p2=new Pall1("Triibuline", 15);

with(p1){

alert(muster);

}

with(p2){

alert(muster+" raadiusega "+raadius);

}

</script>

</body>

</html>

Kihid

Soovides osa andmeid paigutada muust lehekülje ehitusest sõltumatult, võib need kirjutada eraldi kihile. Nõnda võib paigutada teksti kohale, kuhu seda muidu küllalt raske liigutada on. Samuti annab sedasi lehe peal osa andmeid peita või näidata just siis, kui see parajasti tundub vajalik olema. Kihid aitavad üle mitmestki kohast, kus muidu kipuvad HTMLi vahendid kitsaks jääma, kuid lehtede koostamisel peab pidevalt arvestama, et vanemad või tekstipõhised seilurid ei saa kihtidega hakkama ning nende tarvis tuleb teave esitada nii, et kasutaja ka sealtkaudu oma tarkuse kätte saaks.

Üks võimalus mitmetes seilurites töötav kiht luua on luua div-plokk, kuhu style-atribuudi sisse kirjutada kihi asukoht lehel. kui position oleks absolute asemel relative, siis ei arvestataks asukohta mitte lehe vasakult ülevalt nurgast vaid suhtelisena sellest kohast, kus div-plokk muidu asuks. Absoluutsete koordinaatidega on aga enamasti kergem hakkama saada.

<body>

<h3>DIV-i abil loodud kiht</h3>

</body></html>

Menüü

Küllalt levinud on kihtide kasutamine sobival hetkel nähtavaks muutuva menüü tarvis. Selleks võib kihi algul rahulikult valmis teha ning ainult selleks ajaks nähtavale tuua, kui kasutaja sellest midagi valima peab. Kihtide peitmine ning näitamine käib brauseriti erinevalt. Siin näites eeldatakse kihtidega tegelemiseks Javascript1.2-te ning seiluritest Netscape Navigatorit või Microsofti Internet Explorerit. Tõeväärtusmuutuja kasIE näitab, kas tegemist on Internet Exporeriga, muul juhul eeldatakse (tegelikult liialdatud eeldusega), et tegemist on Netscape Navigatoriga. window.navigator.userAgent annab välja sõne, mis tutvustab brauseri tüüpi ja versiooni. Juhul kui tekstist leitakse alamsõne MSIE, arvatakse, et tegemist on Internet Exploreriga. IE puhul asub enamik dokumendi kaudu kättesaadavaid objekte massiivis document.all, nii ka siin loodud kiht; Netscape puhul pääseb kihtidele ligi massiivi document.layers kaudu. Mõlemas massiivis võib elemendi poole ka nime abil pöörduda. Kihile sai nimi pandud div-ploki parameetri id abil. Nii menüü näitamiseks kui peitmiseks on loodud eraldi alamprogramm. Menüü avatakse käsu "Ava menüü" piirkonda sisenemisel või sellele vajutamisel. Sulgeda saab menüü vajutades tema alumisele reale "Menüü kinni". Elementide paigutamine tabelisse on hea lihtne võimalus nende üksteise alla ritta seadmiseks.

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

function naitaMenyy(){

if(kasIE){

document.all["kiht1"].style.visibility="visible";

} else {

document.layers["kiht1"].visibility="show";

}

function peidaMenyy(){

if(kasIE){

document.all["kiht1"].style.visibility="hidden";

} else {

document.layers["kiht1"].visibility="hide";

}

</script>

</head>

<body>

<h3>Väljahüppav menüü</h3>

<a href='javascript:naitaMenyy();' onmouseover='naitaMenyy();'>Ava menüü</a><p>

<tr><td><a href='javascript:peidaMenyy();'>Menüü kinni</a></td>

</table>

</div>

</body></html>

Koos hiirega liikuv kiht

Et kihi asukohta saab lehe lahtiolekuajal määrata, see teeb kihtidest küllalt väljendusrikka vahendi nii kasutajakeskkonna kujundamiseks kui andmete esitamiseks. Samade vahenditega on loodud aga ka lehed, kus abiinfonupp või reklaamiviide pidevalt kõige nähtavamasse kohta silma alla ilmub ning lausa kutsub ennast vajutama. Netscape all võib kihile asukoha määramiseks otse muutjatele left ning top väärtused omistada ning kiht liigub etteantud kohta. IE puhul on samalaadseteks kohtadeks style.left ning style.top. Kui eelnevalt hiire sündmustega seotut meelde tuletada, siis IE puhul võis hiire asukohta teada saada objektist event väljadelt x ja y. Netscape puhul antakse hiire koordinaadid document.onmousemove'le reageerima määratud funktsiooni esimeseks parameetriks ning x ja y koordinaatidele vastavad selle objekti väljad pageX ning pageY. All näites liigub kihi vasak ülemine nurk koos hiirega. Programm iseenesest on lihtne: iga hiire liikumise teate peale antakse kihile korraldus samasse kohta liikuda.

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

if(!kasIE) document.captureEvents(Event.MOUSEMOVE);

function hiireliikumine(syndmus){

if(kasIE){

document.all["kiht1"].style.left=event.x;

document.all["kiht1"].style.top=event.y;

} else {

document.layers["kiht1"].left=syndmus.pageX;

document.layers["kiht1"].top=syndmus.pageY;

}

document.onmousemove=hiireliikumine;

</script>

</head>

<body >

<h3>Koos hiirega liikuv kiht</h3>

</table>

</div>

</body></html>

Hiire järgi lohisev kiht

Nii reklaamide kui abiinfo puhul võib pidevalt koos hiirega liikuv kiht tüütuks muutuda ning häirib teksti lugemist, juhul, kui kasutaja soovib hiirega rida ajada. Samuti ei õnnestu hiirega kihil oleva viite peale vajutada, sest proovides hiirega kihi keskele jõuda, lükkab programm ette kihi vasaku serva ning ilusast viite avamisest ei tule midagi välja. Kui aga kiht liigub hiire taga mõningase viivitusega, sellisel juhul ei jää ta pidevalt vaatevälja ette ning ka kihi peal olevaid viiteid on tabada võimalik, sest kihi asukoha muutus algab alles mõni aeg pärast hiire liigutust. Järgnevas näites jäetakse meelde 20 hiire vahepealset asukohta ning alles nende elementide täitumisel hakkatakse algusest elemente kustutama, kihti esimese elemendi kohale nihutama ning ülejäänud elemente massiivis ühe koha võrra alguse poole tõstma.

var kasIE=false;

var sammudearv=20;

var sammud=new Array();

var alustatud=false;

var x=0, y=0;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

if(!kasIE) document.captureEvents(Event.MOUSEMOVE);

function samm(ux, uy){

this.x=ux;

this.y=uy;

}

function lisaSamm(uussamm){

sammud[sammudearv-1]=uussamm;

}

function nihutaSammud(){

for(var i=0; i<sammudearv-1; i++){

sammud[i]=sammud[i+1];

}

function nihutaKiht(){

if(kasIE){

document.all["kiht1"].style.left=sammud[0].x;

document.all["kiht1"].style.top=sammud[0].y;

} else {

document.layers["kiht1"].left=sammud[0].x;

document.layers["kiht1"].top=sammud[0].y;

}

function algvaartustaKohad(){

for(var i=0; i<sammudearv; i++){

sammud[i]=new samm(x, y);

}

function hiireliikumine(syndmus){

if(kasIE){

x=event.x;

y=event.y;

} else {

x=syndmus.pageX;

y=syndmus.pageY;

}

if(!alustatud){

algvaartustaKohad();

alustatud=true;

if(kasIE){

document.all["kiht1"].style.visibility="visible";

} else {

document.layers["kiht1"].visibility="show";

}

setInterval("liiguta();", 100);

}

liiguta();

}

function liiguta(){

nihutaKiht();

nihutaSammud();

lisaSamm(new samm(x, y));

window.status=x+" "+y;

}

document.onmousemove=hiireliikumine;

</script>

</head>

<body >

<h3>Hiire järgi liikuv kiht</h3>

</table>

</div>

</body></html>

Lehe servadest tagasi põrkav kiht

Nii nagu võib kihti hiire järgi liikuma panna, samuti saab kihile ka muul moel öelda, millal ta kus peab asuma. Nii kaunistamise, tähelepanu äratamise kui mõnel juhul ka lehe materjali illustreerimise eesmärgil saab kihte liigutades kasutajale soovitud sõnumit edasi anda. Kui tahta, et mõni lehe piirkond jääks enam tähelepanu alla, siis võib panna ringiliikuvad väikesed kihid sinna poole koonduma. Soovides füüsikateemalisel lehel tutvustada keha liikumise trajektoori, saab panna kihi soovitud rada pidi liikuma. Kuna arvutiekraanil koosneb liikumine lihtsalt üksteisele järgnevatest paigal seisvatest piltidest, siis arvutades eelnevalt või liikumise ajal välja, kus kiht väikese viivituse järel peab asuma, ongi võimalik kasutaja silma ette manada selline liikumine, mida lehe looja tarvilikuks peab. Kui on tegemist pidevalt korduva samal rajal liikumisega, siis on mõistlik algul liikumise punktid välja arvutada ning edaspidi iga järgmise sammu juures lihtsalt massiivist vaadata, kus kiht peaks asuma. Kui aga vana teed ei korrata või on tee pikk ning välja arvutamine lihtne, siis võib iga sammu juures asukoha meelde jäetud parameetrite järgi uuesti leida ning kihi sinna koha peale paigutada. Nii on tehtud ka järgnevas näites, kus kiht liigub sirgjoones ning dokumendi servani jõudes põrkab sellest servast tagasi. Muutujad kiirusx ning kiirusy näitavad vastava telje suunas tehtava sammu pikkust iga järjekordse sammu ajal. Kuna teljed on risti, siis servast põrkamisel muutub servaga ristunud telje suunas liikumise kiirus vastupidiseks, servaga paralleelese telje suunas liikumise kiirus aga ei muutu. Füüsikatundides räägitakse, et kui keha osaleb korraga mitmes liikumises, siis üks teineteist ei sega. Siin on õpitud tarkus otseselt näha: võib vaadata nagu oleks tegemist kahe täiesti sõltumatu liikumisega. Üks ülalt alla ning teine vasakult paremale. Kui kiht põrkab vastu akna vasakut serva, siis horisontaalse liikumise suund muutub vastupidiseks, vertikaalne liikumine jätkub aga samasuguse hooga nagu ennist.

Kiiruse telgedesuunalised komponendid võetakse algul juhuslikud, et igal lehe uuel avamisel hakkaks kiht liikuma isemoodi.

var kiirus=10;

kiirusx=2*kiirus*Math.random()-kiirus

saab kiirusx omale väärtuse vahemikust -10 kuni +10, muutuja kiirus näitab arvutatava x-telje suunalise kiiruse absoluutväärtuse maksimaalset suurust. 2*kiirus*Math.random() annab tulemuse 0-20 (ehk nullist kahekordse kiiruseni kuna kiirus on siin 10 ning Math.random() väljastab väärtuse 0-1) ning sealt kiirus (praegu 10) maha lahutades tulebki võimalik kiirusx'i väärtus kiiruse ning -kiiruse vahele.

Serva lähedale jõudmisel keeraktakse vastava telje suunalise kiiruse märk selliseks, et järgmise sammuga hakkab kiht taas servast eemalduma. Nõnda saab panna põrkamisel kihi akna suurust arvestama.

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

if(!kasIE) document.captureEvents(Event.MOUSEMOVE);

var kiirus=10;

var x=100, y=100, kiirusx=2*kiirus*Math.random()-kiirus,

kiirusy=2*kiirus*Math.random()-kiirus;

var kihilaius=40, kihikorgus=50;

function liiguta(){

if(kasIE){

document.all["kiht1"].style.left=x;

document.all["kiht1"].style.top=y;

} else {

document.layers["kiht1"].left=x;

document.layers["kiht1"].top=y;

}

x=x+kiirusx;

y=y+kiirusy;

if(x>((kasIE)? document.body.clientWidth : window.innerWidth)-kihilaius)kiirusx=-Math.abs(kiirusx);

if(y>((kasIE)? document.body.clientHeight: window.innerHeight)-kihikorgus)kiirusy=-Math.abs(kiirusy);

if(x<5)kiirusx=Math.abs(kiirusx);

if(y<5)kiirusy=Math.abs(kiirusy);

}

</script>

</head>

<h3>Akna sees põrkav kiht</h3>

Liikumise piirkond muutub akna suuruse muutumisel.

</table>

</div>

</body></html>

Kerimisel paigale jääv kiht

Kihil paiknev abiteave soovitakse mõnikord kasutaja silma alla jätta ka juhul, kui viimane oma lehte kerib. Üheks võimaluseks on sisukorra ning abi tarvis teha eraldi raam ning keritav tekst jätta teise. Kui aga ei soovita selleks ekraanilt eraldi tükki röövida, siis aitab kiht. Netscape puhul window.pageXOffset ning IE puhul document.body.scrollTop näitavad, kui palju on lehte algse asendiga võrreldes allapoole keritud. Kui selle järgi ka kihti vastavalt allapoole sättida, siis paistabki ekraanil välja, nagu kiht paikneks kerimisel samas kohas.

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

function paiguta(){

if(kasIE){

document.all["kiht1"].style.left=document.body.scrollLeft+100;

document.all["kiht1"].style.top=document.body.scrollTop+100;

} else {

document.layers["kiht1"].left=window.pageXOffset+100;

document.layers["kiht1"].top=window.pageYOffset+100;

}

</script>

</head>

<body >

<h3>Kerimisel paigale jääv kiht</h3>

</table>

</div>

//luuakse pikk tekst

for(var i=0; i<1000; i++){

document.writeln("I<br>");

}

setInterval("paiguta()", 100);

</script>

</body></html>

Kerimisel paika nihkuv kiht

Eelmises näites kerimise korral kiht kas püsib ilusti koha peal või joonistusprobleemide korral hakkab veidi hüppama ja vilkuma. Veidi sujuvama väljanägemise saab anda, lastes kihti algul koos lehega kerida ning siis tasapisi taas aknal oma kohale "sõita". Siin näites liigutakse iga sammuga soovitud punktile poole lähemale. Nii toimub liikumine algul kiiresti (et kerimise käigus kiht silma alt väga kaugele ei kaoks), hiljem aga liigub abiteabekiht rahulikult aeglustades omale eraldatud koha poole kuni lõpuks seiskub.

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

var uusx=0, uusy=0, nihkex=0, nihkey=0;

var x=0, y=0, vanax=0, vanay=0;

function paiguta(){

if(kasIE){

document.all["kiht1"].style.left=x;

document.all["kiht1"].style.top=y;

nihkex=0.5*nihkex+0.5*document.body.scrollLeft;

nihkey=0.5*nihkey+0.5*document.body.scrollTop;

x=nihkex+document.body.clientWidth/2;

y=nihkey+document.body.clientHeight/2;

} else {

document.layers["kiht1"].left=x;

document.layers["kiht1"].top=y;

nihkex=0.5*nihkex+0.5*window.pageXOffset;

nihkey=0.5*nihkey+0.5*window.pageYOffset;

x=nihkex+window.innerWidth/2;

y=nihkey+window.innerHeight/2;

}

</script>

</head>

<body >

<h3>Kiht nihkub akna keskele</h3>

<form>

</form>

</table>

</div>

//luuakse pikk tekst

for(var i=0; i<500; i++){

document.writeln("I<br>");

}

for(var i=0; i<500; i++){

document.write("-");

}

</script>

</body></html>

Küpsised

Javaskripti abil on võimalik hoida kasutaja masinas küpsiseid ehk sõnesid, millel on nimi ja kehtivusaeg. Neid kasutatakse näiteks elektronkaubamajas kasutaja ostukorvis olevate asjade meelespidamisel, kuid nende abil saab teha ka näiteks ühe masina külastuskordade loenduri nagu siin. Kui masinast vastavanimelist küpsist ei leita, siis öeldakse, et ta on masinas esimest korda. Vastasel juhul loetakse küpsise väärtusest külastuse järjekorranumber ning järgmise korra tarvis suurendatakse seda ühe

võrra.

Küpsise salvestab korraldus, kus muutujale document.cookie omistatakse sõne, mis sisaldab eneses nii küpsise nime, väärtuse kui andmed, kaua seda oleks mõistlik masinas talletada. Küpsisele antav väärtus võib välja näha

kylastusteArv=23; expires=Sun, 09 Jul 2000 17:01:44 GMT

ning omistuskäsk oli

document.cookie=kypsiseNimi+"="+sisu+hoiuajasone;

Küpsiseid tuleb kätte saamisel lugeda pikast sõnest, mis võib välja näha näiteks

kylastusteArv=11; Tervitus=Hei; algus=a

Otsitud küpsise leiab sealt nime ning sellele järgneva võrdusmärgi abil.

<html><head><title>Kohalik loendur</title>

var hoiupaevadeArv=100;

var kypsiseNimi="kylastusteArv";

function loeKypsis(){

kypsisteSone=document.cookie;

alg=kypsisteSone.indexOf(kypsiseNimi+"=");

if(alg<0)return "";

ots=kypsisteSone.indexOf(" ", alg+1);

if(ots<0)ots=kypsisteSone.length;

return kypsisteSone.substring(

alg+kypsiseNimi.length+1, ots);

}

function kirjutaKypsis(sisu){

hoiuaeg=new Date();

hoiuaeg.setTime((new Date()).getTime()+

hoiupaevadeArv*24*60*60*1000);

hoiuajasone="; expires="+hoiuaeg.toGMTString();

document.cookie=kypsiseNimi+"="+sisu+hoiuajasone;

}

</script>

</head>

<body>

Tere vaataja! <br>

nr=loeKypsis();

if(nr=="")nr=0;

nr=eval(nr)+1;

kirjutaKypsis(nr);

document.writeln("Oled sellel lehel "+nr+

". korda. ");

</script>

</body></html>

Stiililehed

HTML-i sisse oli kujundamise tarvis sisse ehitatud mituteist käsklust, kuid nendest tundus ikka väheks jääma. Et uute käskluste lisamine keelt keerukamaks ei muudaks ning et õnnestuks siiski kuidagi lehe sisulist osa ning kujundust lahus hoida, selleks loodi stiililehed. Olemasolevatele elementidele saab omadusi juurde anda või muuta.

All näites luuakse elemendi P (paragraph) alla kolm klassi: pealkiri, luuletus ning autor. Soovides allpool määrata, et kujundus tuleb vastava klassi järgi seada, tuleb ploki alustamisel lihtsalt sisse kirjutada, millise klassi vormingut soovitakse lõigule külge panna.

teatab, et määrangud tuleb võtta klassist p.autor, kus kirjelduses oli määratud taandreaks 0.5 cm.

Allpool on toodud valikulised näited stiililehtede käsklustest, millega saavad hakkama nii Netscape Navigator kui Internet Explorer. W3C on välja töötanud hulga rohkem käsklusi ning tasapisi võib loota, et seilurid neid üha enam toetama hakkavad.

text-align määrab teksti vasakule, keskele, paremale või rööpjoondatult (justify). HTML 4.0 kirjelduses soovitatakse teksti joondamisel kasutatada stiililehte, mitte vastavaid HTMLi käske. Värvi saab punasest, rohelisest ja sinisest kokku segada nii kuueteistkümnendsüsteemis (# ja igale värvile 2 sümbolit) kui kümnendsüsteemi arvudena 0-255.

Ploki serva jäetavat tühja ruumi saab määrata sõnaga margin algavate käsklustega. Nagu inglise keelest tuleb, nii tähistab left vasakut, top ülemist, right paremat ning bottom alumist äärt.

Kasutatavaid mõõtühikuid on hulga. Sentimeetrid - cm, millimeetrid - mm, tollid - in, punktid (1/72 tolli) - pt, pica'd (12 punkti) pc, pikslid - px, fondi määratud kõrgus - em, x-tähe kõrgus - ex. Seilurid püüavad tekste etteantud suuruses ja värvides näidata, kuid mõnel tuleb see välja paremini, mõnel halvemini.

<html><head><title>CSS-kujundus</title>

<style>

p.pealkiri{

text-align: center;

color: #003355; /* rgb(0, 255, 100) */

text-decoration: underline;

/* line-though (läbi), none*/

text-transform: uppercase;

/* lowercase, capitalize (suured algustähed) */

font-size: 25px; /* 150% */

font-family: times;

font-weight: 1200; /* normal, bold, 300 */

}

p.luuletus{

margin-left: 1cm;

margin-top: 5px;

margin-right: 3cm;

margin-bottom: 1cm;

line-height: 12px;

/* kui 0, siis kirjutatakse read üksteise peale*/

}

p.autor{

text-indent: 0.5cm; /* Taandrida */

}

</style>

</head>

<body>

<p class="pealkiri">Kodulaul</p>

Mis on kodu, kus on kodu, kus on kodu koht?<br>

Kodu lõhn on eriline, kodu värv ja maik.

Kodu on nii imeline tavaline paik.

</p>

Juhan Viiding

</p>

</body>

</html>

Mitmest lehest koosneva ühesuguse kujundusega veebisaidi puhul on mõistlik kirjutada css-käsud eraldi faili ning need siis sobivast kohast igal korral sisse lugeda. Niimoodi pääseb igakordsest lisatippimisest või kopeerimisest, vea korral on kergem ühes kohas parandada ning kui soovitakse saidile uus kujundus anda, siis piisab vaid ühes kohas muudatuste sisseviimisest. Välise stiililehe sisselugemiseks tuleb päises anda käsk kujul

, kus href-atribuudis määratakse fail, kust stiilileht sisse lugeda. Stiililehefail on tavaline tekstifail, kus üksteise järgi on kirja pandud elementidele või klassidele vastavad stiilid nii nagu ülal näiteski märgendite <style> ja </style> vahel. Stiili võib määrata ka otse elemendi algusmärgi juures, sinna tuleb lisada atribuut style.

Sellise määrangu prioriteet on kõrgeim (muudab varasemad samale elemendile kehtinud määrangud ümber). Järgneb lehe päises kirjeldatu ning kõige madalama prioriteediga on välisest failist sisseloetud stiilikirjeldus.

Andmete edastamine aadressireal

Nii nagu võib otsingumootorisse saata andmeid saadava lehe sisu määramiseks, nii ka õnnestub ühelt staatiliselt veebilehelt teisele andmeid edastada. Nõnda ei pea kõiki tarvilikke omadusi ühe lehe sisse kirjutama ega kopeerima, vaid võib mitmed arvutamise ja kujundamisega seotud seigad jätta selleks otstarbeks eraldi tehtud lehtede hooleks. Selline teenusepakkumise süsteem on küll enam levinud serveriga seotud rakenduste puhul, kuid sarnaselt võivad ka veebilehed üksteisele oma võimalusi välja pakkuda. Kui alamprogrammid aitavad ühel lehel käske tegevusteks grupeerida ning objektid üksikuid alamoskusi tervikuks kokku liita, siis sarnaselt objektile võib terviklikku probleemi lahendust pakkuda ka vastavaks otstarbeks koostatud veebileht, millele antavate parameetrite järgi väljastatakse sobiv tulemus.

Veebilehele saab andmeid saata aadressireal failinimele järgneva küsimärgi järel. Kui soovida näiteks saata failile tervitaja.html tervitamiseks nimi Juku, siis tuleks väljakutsel aadressiks kirjutada tervitaja.html?Juku . Saadetud "Juku" saab leht kätte, küsides muutuja window.location.search väärtust. Et kõrvaltvaatajal ning testimisel oleks selgem, milliste andmetega tegu ning et saaks saadetavaid väärtusi üksteisest eristada, selleks on kokku lepitud standard, kus eri andmed eraldatakse ampersandiga (&), igal parameetril on nimi ja väärtus, mis eraldatakse tühikuga. Kõik andmed peale madalakoodiliste tähtede ning mõningate sümbolite saadetakse kolmetäheliseks kodeeritud kujul, kus esimeseks sümboliks on % ning järgmised 2 tähistavad kuueteistkümnendsüsteemis sümboli koodi. Nii et kui soovin, et lehelt tervitataks viieteistkümneaastast Jüri, siis tuleks andmed saata kujul tervitaja.html?nimi=J%FCri&vanus=15 . Lisaks eeltoodule on juba varasemast ajast sellisel saatmisel asendatud tühikud plussmärkidega. Kuna plussid kodeeritakse erisümbolitena ning tühikud on plussidena, siis on neid siiski võimalik üksteisest eristada.

Alljärgnev leht soovib oma parameetriteks korgus'e ja laius'e ning joonistab ekraanile vastava suurusega ristküliku (taustavärviga tabeli).

var rida=window.location.search;

küsib sõnena lehele saadetud andmed. Kui saadud tekst algas küsimärgiga (oli kaasa haaratud faili nime ning andmeid eraldav sümbol), siis võetakse see eest ära ehk jäetakse allest osa, mis on küsimärgist taga pool.

if(rida.charAt(0)=="?")rida=rida.substring(1);

Andmete kätte saamiseks võib saadud sõnet ka rahumeeli niisama analüüsima hakata, kuid allpool on püütud veidi mitmekülgsem näide koostada, kus peaks kerge olema mitmesuguseid andmeid eraldada.

var parameetrid=rida.split("&");

jagab rea &-de kohalt juppideks ning iga lõigu paigutab väljastava massiivi üheks elemendiks. Nii saab pärastpoole iga saadetud parameetrit kergesti eraldi uurida.

var pluss=/\+/g;

loob regulaaravaldise, millega plusmärgid tühikutega asendamise eesmärgil sõnest ära tunda. Langjoon plussi ees on vajalik, kuna muul juhul loetaks seda erisümbolina. Täht g tähistab global'it, ehk tulevase asenduse korral tuleks ära vahetada kõik plussmärgid. Järgnev alamprogramm peaks väljastama etteantud parameetri nimele vastava väärtuse. Lapatakse läbi kogu massiiv. Kui leitakse element mis vastab küsitule, siis väljastatakse selle väärtus. replace asendab plussid tühikutega ning unescape tõlgib kolmekohalise koodiga antud sümbolid ühebaidilisteks. Sobiva parameetri puudumisel jõutakse tsüklist välja ning returniga tagastatakse tühisõne märgiks et vastava parameetri väärtust ei leitud.

<html><head><title>Joonistaja</title>

var rida=window.location.search;

if(rida.charAt(0)=="?")rida=rida.substring(1);

var parameetrid=rida.split("&");

var pluss=/\+/g; //plussi tähistav regulaaravaldis

function kysiParameeter(nimi){

for(var i=0; i<parameetrid.length; i++){

if(parameetrid[i].indexOf(nimi+"=")==0){

var tulemus=

parameetrid[i].substring(nimi.length+1);

tulemus=tulemus.replace(pluss, " ");

return unescape(tulemus);

}

return "";

}

</script>

</head>

<body>

document.writeln("<table width='"+kysiParameeter('laius')+

"' height='"+kysiParameeter('korgus')+

"' bgcolor='green'><tr><td> &nbsp </td></tr></table>");

</script>

</body>

</html>

Loodud lehe teenust võib otse paluda, kirjutades viiteks näiteks

file:/c%7C/user/jaagup/0104/k1/html/joonistaja.html?laius=23&korgus=43

, aadressirea parameetritena aga saadetakse ka vormi elementide sarnasel standardkujul nagu ennist kirjeldatud. Vormi kaudu on kasutajalt kergem andmeid kätte saada. Piisab vaid paigutada ekraanile tekstiväljad ja submit-nupp ning sellele vajutamisel saadetaksegi andmed formi action-atribuudis määratud sihtkohta.

<html><head><title>Joonistusandmed</title></head>

<body>

<h3>Ristküliku joonistamine</h2>

<table>

<tr><td>Laius: </td>

<tr><td>Kõrgus: </td>

</table>

</form>

</body></html>

Bitioperatsioonid

Andmeid säilitatakse ja töödeldakse baitidena ning iga bait koosteb kaheksast vähimast infoühikust ehk bitist. Neid suudab arvuti küllalt kiiresti töödelda ning vahel meile täiesti piisab ühebitisest infost (näiteks, et kas tegemist oli õige vastusega). Suurte andmete talletamise puhul aitab mõnikord bitikaupa hoidmine märgatavalt ruumi kokku hoida. Täisarvude bittidega tegelemiseks on loodud hulga operaatoreid. Numbrid säilitatakse kahendsüsteemis nt. 1=1, 2=10, 3=11, 4=100 jne. Ning kahte arvu bitikaupa võrreldes võrreldakse nende vastavaid bitte. Bitikaupa jaatusel jäetakse alles need bitid, mis mõlemal lähtenumbril on ühed, seega 5&3 tulemuseks on 1, kuna 101 ja 011 puhul on vaid viimane mõlemal 1. See jääb alles ning tulemuseks on 001 ehk üks. Bitikaupa või on nagu muidugi tingimus või, s.t. alles jääb see bitt, mis vähemalt ühel lähteandmel on 1. Kui bitikaupa ja-d tähistas &, siis võid tähistab |. Ning 5|3 annab tulemuseks 7, sest 101 ja 011 annavad kokku 111, mis ongi seitse. Välistav või ehk ^ on tõene, kui vastavad bitid on erinevad. Nii annab 5^3 tulemuseks 6, sest 101 ja 011 erinevad bitid on 110 ehk 6. Tilde ~ keerab arvus bitid vastupidiseks, s.t. seal, kus enne oli 0, sinna tuleb 1 ning endise ühe asemele null. Nii et ~5 peaks olema 2, sest 101 tagurpidi on 010. ~5 peale aga kirjutatakse välja hoopiski -6, sest ~ keerab ühtedeks ka enne viit olevad endised nullid ning märgibiti. Ning tulemuseks ongi negatiivne arv. Et eesseisvatest ühtedest vabaneda, võib kirjutada (~5)&7, mis lahtiseletatult tähendab, et kõigepealt keeratakse tagurpidi viie bitid ning siis jäetakse alles vaid need, mis kattuvad seitsme omadega. Kuna seitse on kahendsüsteemis 111, siis jäävad alles vaid kolm viimast bitti (~101=010) ning neid me soovisimegi.

Numbri sees saab bitte nihutada. >> abil paremale ning << abil vasakule. 5>>2 annab tulemuseks ühe, sest 101-te kaks kohta paremale lükates tuleb kokku 001 ehk 1, eeldades, et vasakult tulevad nullid juurde. 5<<2 annab 20 ehk 10100 (16+4). Kui soovida näiteks tsükli abil bitid ükshaaval kätte saada, siis sobib järgmine moodus

var arv=100;

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

document.write(arv&1);

arv=arv>>1;

}

Tõsi küll, see näide kirjutab arvu bitid tagant ette, s.t. alustab vähimast ning läheb suurema poole.