Õppejõud: Jaagup Kippar

Toimumise aeg: sügissemester 2000

Java programmeerimise põhikursus.

Loengute plaan

Aine ning vahendite ülevaade. HTML.

Javaskript: võimalused, süntaks, näited.

Java: eesmärgid, süntaks. Rakend.

Liht-ja struktuurandmetüübid. Massiivid.

Klass, isend, liides, pärimine.

Erindid ja nende töötlemine.

Graafikakomponendid, teated, kuularid.

Failide kasutamine, vood.

Interneti vahendid Javas.

Lõimed, sünkroniseerimine.

Trükkimine. Muusika, MIDI.

Servlet, JSP, CGI, ASP, PHP.

Joonistamisvahendid, Graphics2D.

Kopeerimine, andmete vedamine, Swing

Aja arvutamine. Komponendid, oad.

Lisavõimalused, kokkuvõte.

HTML

Aadressil http://www.ut.ee/~ajaeger/sisu.html asub Tartu Ülikooli HTML konspekt. Sealt saab sissejuhatava materjali. Juurde mõnede näidetega kokkuvõte.

HTML formaadis saab teksti sisse lisada teksti vormimiseks juhtkäske. Erinevalt mitmetest teistest vormindamisstandarditest (näiteks Wordi dokument) kasutatakse HTMLis vaid tekstisümboleid. Selles formaadis teksti luua ning kontrollida saab iga tekstiredaktoriga.

HTML lehe “blankett” näeb välja järgmine:

<HTML><HEAD><TITLE>PEALKIRI</TITLE></HEAD>

<BODY>

Tekst ise ... (ja kogu muu kraam, mida lehekülje peal soovitakse näha, nt. loetelud, rakendid ja tabelid)

</BODY>

</HTML>

Nagu näha, on juhtkäsud märkide < ja > vahel. Näiteks <TITLE> tähistab pealkirja algust ning </TITLE> pealkirja lõppu. Rasvase kirja alguseks on <B>, lõpuks </B>, kursiivi puhul vastavalt <I> ja </I>. Tabeli algust tähistab <TABLE>, rea algust <TR> ning lahtri algust <TD> , näiteks:

<TABLE>

<TR><TD>Juhan <TD> 5

<TR><TD>Juku <TD> 4

</TABLE>

annab tulemuseks tabeli mille esimeses veerus on nimed Juhan ja Juku ning teises numbrid 5 ja 4.

Reavahetust märgib <BR> ning lõiguvahetust (veidi suurem vahe) <P>. Joone üle lehe tõmbab <HR>.

Nummerdatud loetelu (Ordered List)

<OL>

<LI>Juhan

<LI>Juku

<LI>Sass

</OL>

Nummerdamata loetelu (Unordered List)

<UL>

<LI>Porgand

<LI>Kapsas

<LI>Kaalikas

</UL>

Pilt lehel näeb välja

s.t. SRC väli näitab, kus URL-i peal näidatav pilt asub. Juhul kui pilt asub HTML-tekstiga samas kataloogis, piisab vaid failinime kirjutamisest. Lisaks SRC-väljale saab HEIGHT ja WIDTH väljadega määrata pildi kõrgust ja laiust.

Viite tegemisel tuleb märkida viite sihtkoht ning teksti osa, millele vajutades viide avatakse. Näiteks nii saab teha viite Tallinna Pedagoogikaülikooli <a href=http://www.tpu.ee>avalehele</a>. Sõna "avalehele" on selle tulemusena brauseris teisevärviline (harilikult sinine). Kui soovida viidata failile samas kataloogis, tuleb viite href-kohale panna vaid failinimi. Soovi korral saab viidata ka sama teksti sees teisele kohale, seda kasutatakse enamasti pikkade tekstide puhul.

Raamid

Brauseri akna saab jaotada raamideks ning iga raami sisse panna eraldi dokumendi. Selleks tuleb lehe <head> osas märkida, et leht on jaotatud raamideks ning öelda, millisest failist millise raami sisu tuleb võtta. <frameset cols="40%, 60%"> tähendab et leht on jaotatud kaheks veeruks (cols ehk columns), esimene raam võtab 40% ning teine 60% brauseri laiusest. Kui tahta ekraan ridadena osadeks jagada, tuleks cols asemele kirjutada rows.

<html><head><title>Pildiraam</title>

</frameset>

</head></html>

Lehele saab panna ka enam kui kaks raami. Kui tahta lihtsalt kolm raami kõrvuti panna, siis piisab, kui kirjutada <frameset cols="40%, 20%, 40%"> ning allpoole kõigi kolme raami URLid. Keerukama kujunduse vajadusel saab aga hakata loodud raame omakorda raamideks jaotama, s.t, et ühe <frameset> sees on veel omakorda teine <frameset>. Järgnevas näites jagatakse aken kõigepealt kaheks reaks - ülemise suuruseks 70 ning alumise suuruseks 30%. Siis tehakse ülemine omakorda kaheks veeruks, esimesele laiuseks 40% ning teisele 60.

<html><head><title>Pildiraam</title>

</frameset>

</frameset>

</head></html>

Kui raamidele nimed anda, siis saab teksti sees määrata, millise raami tekst viite vajutamise tulemusena vahetub.

<html><head><title>Sisukorraga aken</title>

</frameset>

</head></html>

Kui dokumendi päiseosas öelda, millisesse aknasse või raami on viited suunatud (siin näites <base target=tekst>), siis saab näiteks sisukorrast peatükke teisele lehele välja kutsuda ilma, et sisukord sellest ise paigast läheks. Päises olev base target määrab sihtkoha kogu lehe viidetele, soovi korral saab aga iga viite puhul eraldi määrata, kuhu see suunatud on.

<body>

<h3>Sisukord</h3>

<ul>

<li><a href=Liitmine3.html>Nupuga liitmine</a>

<li><a href=Liitmine3a.html>Nuputa liitmine</a>

<li><a href=Raam2.html>Hulk aknaid</a>

<li><a href=Korrutustabel.html target=sisukord>Viide samasse aknasse</a>

</ul>

</body></html>

Standard

Hoolitsemaks, et kirjutatud HTML tekst oleks brauseritele üheselt mõistetav, tuleks kinni pidada W3C poolt pakutavast ning täiendatavast standardist. Sageli tundub mugav konkreetsele brauserile midagi vaid sellele omaste vahenditega selgeks teha. Samuti läheksid näited standardit jälgides mõnikord pikemaks, kuid samas on reeglitest kinni pidamise puhul lootust, et koostatud leht mitme vahendi abil loetav on. Oma lehe vastavust standardile saab kontrollida abivahendiga aadressilt http://validator.w3.org , mis leiab üles ühildumatud käsud ning soovitab, millega neid asendada. Standardi järgi tuleb HTML lehe algusse kirjutada keele versioon, milles vastav leht koostatud on. Enamikus selle konspekti näidetes pole sellest nõudest kinni peetud. Nii määraks näiteks dokumendi esimene rida

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

lehe olevat HTML-i versioonis 3.2.

HTML-lehe võimalusi on enamgi. Lehele saab komponentidena panna Java rakendeid, video, muusika. Saab avada eraldi aknaid ning määrata nendes toimuvat. Lähemat infot saab aadressilt http://developer.netscape.com ning ka igalt muult huvitavalt veebilehelt. Kui mõne lehe puhul tekib küsimus, kuidas ta tehtud on, siis HTML-kujul lehte saab vaadata brauseri view source valiku abil.

Javaskript

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

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

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

<body>

document.writeln("Tere");

</script>

</body></html>

Liitmisülesannete loomine

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

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

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

);

</script>

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

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

<body>

<h2>Liitmisülesanded</h2>

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

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

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

);

}

</script>

</body></html>

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.

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.

Suurendus ja vähendus

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.

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

var x=3;

document.writeln(x++);

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

var x=3;

document.writeln(x++);

document.writeln(++x);

kirjutab välja 3 ja 5.

Valik

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

if(vanus<12){

document.writeln("osta lapsepilet");

}

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

vanus=10;

laps=(vanus<12);

if (laps) {

document.writeln("osta lapsepilet");

}

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

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

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

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

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

(vanus>13) // suurem

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

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

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

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

if(vanus<12) {

document.writeln("Osta lapsepilet");

}

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

if(vanus<12){

document.writeln("Osta lapsepilet");

} else {

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

}

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

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

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

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

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

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

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

või

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

või ka

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

Tsüklid

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

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

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

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

<body>

i=0;

while(i<10){

document.write("a");

i++;

}

</script>

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

document.write("b");

}

</script>

i=0;

do{

document.write("c");

i++;

}while(i<10);

</script>

</body>

</html>

Alamprogramm

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

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

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

function looYlesanne(){

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

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

);

}

</script>

</head>

<body>

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

looYlesanne();

}

</script>

</body></html>

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

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

function liida(a, b){

return a+b;

}

Selliselt loodud funktsiooni võib kasutada nii nagu muidki.

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

Vormid ja väljad

Dokumenti väljade (tekstivälja, tekstiala, märkeruudu, nupu, valiku) paigutamiseks tuleb dokumendi sisse luua (vähemalt üks) vorm. <form name=arvutus> loob vormi ning paneb talle nimeks arvutus, et saaksime tema poole nimega pöörduda. Vormi lõpetab </form>. Vormi sisse saab elemente paigutada nagu siin näidatud: <input type=text> loob tekstivälja, muude sinna sisse pandavate parameetritega saame tema omadusi määrata.

Vormi elementidega sündmuste toimumisel saab sinna külge siduda programmilõike. Siin näites arvutatakse nupule vajutamisel kahe esimese tekstiväljas paikneva arvu summa ning paigutatakse see väärtus kolmandasse tekstivälja. eval on javaskripti tänuväärt funktsioon. Siin ta muudab väljale kirjutatud teksti arvuks, kuid ta oskab kokku arvutada igasuguseid avaldisi. Juhul kui me teda siin ei kasutaks, liidaks javaskripti intepretaator kokku tekstiväljades paiknevad tähed ning näiteks 3+2 tulemuseks oleks 32.

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

<body>

<input type=text name=liidetav1 size=5> +

<input type=text name=liidetav2 size=5> =

<input type=button value=" OK "

onClick="arvutus.summa.value=

eval(arvutus.liidetav1.value)+

eval(arvutus.liidetav2.value);">

</form>

</body></html>

Nagu eespool mainitud saab alamprogramme kirjeldada dokumendi päises. Nüüd kui soovin et ükskõik kumma tekstivälja sisu muutmisel arvutatakse summa uuesti, piisab mul vaid käskida tekstivälja sisu muutmisel välja kutsuda arvutamise alamprogramm. Sündmusi, mille puhul on võimalik midagi käima panna, on päris palju. onChange käivitatakse, kuid valiku või tekstivälja sisu on muudetud (mõnikord oodatakse käivitamisel ka fookuse kadumist sellelt elemendilt). onClick kävivitub nupule või viitele vajutamisel. onFocus fookuse saabumisel, onKeyDown, onKeyPress, onKeyUp klahvi vastava sündmuse puhul, onLoad ja onUnload dokumendi laadimisel ja sealt lahkumisel, onMove või onResize akna liigutamisel, onMouseOver ja onMouseOut viite piirkonda sisenemisel või sealt lahkumisel.

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

function arvuta(){

document.arvutus.summa.value=

eval(document.arvutus.liidetav1.value)+

eval(document.arvutus.liidetav2.value);

}

</script>

</head>

<body>

<input type=text name=liidetav1 onChange=arvuta() size=5> +

<input type=text name=liidetav2 onChange=arvuta() size=5> =

</form>

</body></html>

Aknad

Javaskript võimaldab aknaid avada ja sulgeda ning nende sisu määrata. Näikteks skriptis käsklus window.open(http://www.neti.ee); avab vastava lehekülje eraldi aknas. Kui meetodisse panna kolm parameetrit, siis esimene tähendab faili/URLi asukohta, kust leheküljele andmed võetakse, teine annab leheküljele nime, et talle saaks nime kaudu osutada ning kolmandasse sõnesse saab rodus üksteise järgi kirjutada parameetrid, mida akna loomisel arvestatakse.

Loodud aknasse saab ka programmil lasta kirjutada. Selleks on vaja akna loomisel muutujasse kinni püüda osuti aknale, et tema abil saaks hiljem akna dokumendi kirjutada. Nii java kui javaskripti korral on funktsiooni poolt väljastatava muutuja kasutamine vabatahtlik, kasutamata jätmist ei loeta veaks.

Javaskriptis ei pea muutujaid deklareerima, kuid näiteks kehtivuspiirkonna määratlemiseks võib seda var käsuga teha. Muutuja tüüpi ei saa määrata, seda teeb intepretaator automaatselt.

<html><head><title>Korrutustabeli loomine</title>

function korrutustabel(rida, veerg){

var aken=window.open(

"", "Tabeliaken",

"height=200,width=200,resizable=yes"

);

aken.document.writeln(

"<html><head><title>Korrutustabeli aken</title></head>\n"+

"<body>\n <table>"

);

for(i=1; i<=rida; i++){

aken.document.write("<tr>");

for(j=1; j<=veerg; j++){

aken.document.write("<td> "+i*j);

}

aken.document.writeln();

}

aken.document.writeln("</table>\n</body></html>");

aken.document.close();

}

</script>

</head>

<body>

<h2>Korrutustabeli loomise lehekülg</h2>

<form>

<table>

<tr><td> Ridade arv <td> <input type=text size=5>

<tr><td> Veergude arv <td> <input type=text size=5>

<input type=button value=" OK "

onClick="korrutustabel(

document.forms[0].elements[0].value,

document.forms[0].elements[1].value

);">

</table>

</form>

</body></html>

Pildid

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

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

<body>

<a href="Pilt1.html"

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

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

</body>

</html>

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

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

var olek=0;

function vaheta(){

if(olek==0){

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

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

} else{

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

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

}

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

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

}

</script>

</head>

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

</h1></center>

</body>

</html>

Sisukord

Loengute plaan 1

HTML........... 1

Raamid..... 2

Standard.. 2

Javaskript..... 3

Liitmisülesannete loomine.... 3

Andmete talletamine 3

Väärtuste esitamine. 4

Jutumärgid 4

Massiiv.... 4

Tehtemärgid, operaatorid.................. 4

Suurendus ja vähendus.................. 4

Valik......... 5

Tsüklid..... 6

Alamprogramm............ 6

Aknad...... 8

Sisukord........... 9