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>

�<script>

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

� <script>

�� 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 src=liitmised.js>

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

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

�<script>

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

� <script>

�� function looYlesanne(){

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

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

�� );

�� }

� </script>

</head>

<body>

� <script>

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

� <script>

�� 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';">

�<img src=pilt1.gif border=0></a>

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

�<script>

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

�� <center> <h1>

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

� <script>

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

� <img src="sinine.gif" height=100 width=100 name="pilt1">

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

� <script>

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

�<script>

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

� <script>

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

� <script>

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

� <script>

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

� <script language="Javascript1.2">

�� 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 name=tekstikastivorm>

�� <input type=text name=koordinaadid size=10>

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

� <embed src=spacemusic.au height=70 width=150>

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

� <embed src=spacemusic.au autostart=true loop=-1 hidden=true>

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

� <embed src=spacemusic.au hidden=true autostart=false>

� <form>

�� <input type="button" value="M�ngi pala"� onClick="document.embeds[0].play();">

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

� <script>

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

� <script>

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

� <script>

�� 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 name="vorm1">

�� <input type="text" name="tekst1">

�� <input type="text" name="tekst2"><br>

�� <input type="text" name="tekst3">

�� <input type="Button" value="Sisesta" onClick="sisestamine();">

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

� <script>

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

� <script language=Javascript1.2>

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

� <script>

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

� <select name="paev" onChange="naitaTunninimi();">

�� <script>

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

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

�� }

�� </script>

� </select>

�

� <select name="tund" onChange="naitaTunninimi();">

�� <script>

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

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

�� }

�� </script>

� </select>. tund:

� <input type="text" name="tunninimi">

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

�<script>

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

�<script>

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

� <script>

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

<body>

�<script>

�� 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);

� <script>

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

�<script>

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

� <script>

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

�<script>

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

�<script>

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

�<script� LANGUAGE="JavaScript1.2">

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

�<script language="JavaScript1.2">

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

�<script� language="JavaScript1.2">

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

�� <script>

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

�� <script>

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

� <script>

�� function Pall1(){

�� this.muster="Triibuline";

�� this.raadius=32;

�� }

��

�� Pall2.prototype=new Pall1();

�� function Pall2(){

�� this.taust="Roheline";

�� }

� </script>

</head>

�<body>

�� <script>

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

� <script>

�� function tutvustaRaadius(){

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

�� }

�� function Pall1(){

�� this.muster="Triibuline";

�� this.raadius=32;

�� this.teataRaadius=tutvustaRaadius;

�� }

��

� </script>

</head>

�<body>

�� <script>

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

� <script>

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

�� <script>

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

� <script>

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

�� <script>

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

�<script>

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

� <script>

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

� <script>

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

�� <script>

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

� <script>

�� function Pall1(muster1, raadius1){

�� this.muster=muster1;

�� this.raadius=raadius1;

�� }��

� </script>

</head>

�<body>

�� <script>

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

� <div id="kiht1" style="position:absolute; left:100; top:200;">Kuku</div>

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

� <script language="Javascript1.2">

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

� <div id="kiht1" style="position:absolute; left:100; top:200; visibility:hidden;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a href="http://www.tpu.ee">TPU</a></td>

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

� <script language="Javascript1.2">

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

�<div id="kiht1" style="position:absolute; left:100; top:10;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a href="http://www.tpu.ee">TPU</a></td>

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

� <script language="Javascript1.2">

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

�<div id="kiht1" style="position:absolute; left:100; top:10; visibility:hidden;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a� href="http://www.tpu.ee">TPU</a></td>

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

� <script language="Javascript1.2">

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

�<div id="kiht1" style="position:absolute; left:100; top:100;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a class="tavaline" href="http://www.tpu.ee">TPU</a></td>

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

� <script language="Javascript1.2">

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

�<div id="kiht1" style="position:absolute; left:100; top:100;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a href="http://www.tpu.ee">TPU</a></td>

�� </table>

�</div>

�<script>

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

� <script language="Javascript1.2">

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

�� <input type=button onClick='setInterval("paiguta()", 100);'>

� </form>

�<div id="kiht1" style="position:absolute; left:100; top:100;">

�� <table bgcolor="yellow">

�� <tr><td><a href="http://www.neti.ee">Neti</a></td>

�� <tr><td><a href="http://www.tpu.ee">TPU</a></td>

�� </table>

�</div>

�<script>

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

�<script>

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

� <script>

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

� <p class="luuletus">

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

� <p class="autor">

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

�� <script>

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

�� <script>��

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

�<form action="joonistaja.html">

� <h3>Ristk�liku joonistamine</h2>

� <table>

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

�� <td><input type="text" name="laius" ></td></tr>

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

�� <td><input type="text" name="korgus"></td></tr>

� </table>

� <input type="submit" value="Saada andmed">

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