Mis on
Javascript ja milleks teda kasutada.
Javascript on NETSCAPE poolt koostatud scripti keel. Javascript on välja
töötatud iteraktiivsete WWW lehekülgede koostamiseks, samuti erinevate WWW
lahenduste realiseerimiseks. Javasripti kasutamine koos DHTML sündmustega
(events) võimaldab muuta WWW lehekülje dünaamiliseks. Valdavalt kasutatakse
Javascripti kliendipoolsete (client side) lahenduste realiseerimiseks, kuid
Javascripti abil saab kirjutada ka serveris töötavaid rakendusi. Javascripti pole
vaja kompileerida, kui teda kasutatakse kliendi-poolsetes rakendustes. Siit
tuleneb ka Javascripti kasutamise mugavus ja lihtsus võrreldes
programmeerimiskeelega Java. Java programmikood tuleb kompileerida sõltumata
sellest kas seda soovitakse kasutada kliendi arvutis või serveris.
Programmeerimiskeeltes Javascript ja Java on palju sarnast (operaatorid,
põhilausete süntaks jne.) aga ka palju põhimõttelisi erinevusi (eespool
mainitud erinevused kasutamisel, sisse-ehitatud klassid, mida javas on
oluliselt rohkem, jne.). Javascripti kliendipoolseks kasutamiseks piisab väga
vähesest: sirvija ei tohi olla päris iganenud (Netscape Navigator alates 2.0-st
ja Microsoft Internet Explorer alates 3.0-st). Muidugi tuleb igasse kiiresti
arenevasse programmeerimiskeelde juurde järjest uusi täiendusi, parandusi, mis
võivad vajavada ka uuemat sirvijat. Antud konspektis on toodud erinevate
teemade korral sageli näiteid kasutades vormide elemente. Silmas on peetud
vormide keskset osa klient-serveri
rakenduste koostamisel, mis on keerukamad ja ei sobi õppimise
alustamiseks. Kõigepealt tutvume vormi elementide ja nende atribuutidega, õpime
kontrollima ja kasutama atribuutide väärtusi. Need teadmised on aluseks
keerukamate klient-serveri lahenduste õppimiseks.
Kliendi poolseid scripte (javascript, vbscript, tcl) lisatakse HTML
dokumenti elemendi SCRIPT abil. Seega javascripti kood tuleb kirjutada tagide
<script>.....</script> vahele. Et tegemist on just javascriptiga
saab ära näidata atribuudi language abil
<script
language="javascipt"> ..........
või atribuudi type abil
<script
type ="text/javascript"> .......
W3C ametlik dokumentatsioon (v.t. HTML 4.01) soovitab kasutada type
atribuuti, paraku aga ei toeta kõik sirvijad seda. Näide: kirjutame javascripti
abil HTML leheküljele teksti Hello World!
<html>
<head>
<title>Pealkiri</title>
</head>
<body>
<script
language="JavaScript">
document.write("Hello World!")
</script>
</body>
</html>
Antud näites lisati javascript dokumendi body ossa. Tegelikult lisatakse
Javascript enamasti dokumendi päisesse (<head>...</head> tagide
vahele). Vahe on selles, et päisesse lisatud kood täidetakse enne body sisu
täitmist. Seega, kui Javascripti abil lisatakse midagi HTML leheküljele ilma
DHTML sündmusi kasutamata, siis tuleb lisada Javascripti kood vastavasse kohta
body-s. Kõik Javascriptiga koostatud funktsioonid ja DHTML abil käivitatav
Javascipt on mõistlik lisada päisesse. Sellega hoiame ära vead, mis on tingitud
defineerimata või väärtustamata muutujate (objektide, klasside) kasuta-misest.
Välise s.t. eraldi failis asuva Javascripti lisamiseks HTML dokumenti tuleb
kasutada atribuuti SRC, mille abil saame määrata Javascripti failile vastava
URL-i . Näide:
<script language="JavaScript" src="tere.js">
</script>
Nagu näeme näitest on javascripti faili laiendiks js. Juhuks kui mõni sirvija (näiteks käsurida kasutav) ei toeta
kliendipoolset scripti on olemas element NOSCRIPT. Seega tagide
<noscript> ......</noscript> vahel on võimalik selgitada mida teeb
vastav javascript või kust ja kuidas laadida maha scripte teotavad sirvijad
jne.
Andmetüübid.
Muutujad. Nähtavuspiirkond.
Andmetüübid:
Javascript võimaldab kasutada järgmisi tüüpe andmeid:
·
numbrid s.t. 23 , 37.978 , 2.2E-10 (see on 2.2*10-10) jne.
·
stringid -
järjestatud sümbolite jada jutumärkides
(s.t. "tere")
stringide sees kasutatakse eritähendusega sümboleid
\n - reavahetus
\t -
tabulatsioon
\' - apostroof
\" -
jutumärgid
\\ -
kaldkriips
\b - backspace
\f -
form feed
\r - carriage return
·
loogilised väärtused
- väärtus on kas true (õige) või false (vale)
·
null - eriline
võtmesõna, mis tähendab nullväärtust.
·
määramata
(undefined). kõrgema taseme objekti atribuut, millel esialgu pole väärtust.
Kuupäevade kirjeldamiseks saab kasutada Date objekti ja tema meetodeid.
Muutujad:
Muutuja nimi algab tähega või alakriipsuga (näiteks _aa) ja võib sisaldada
numbreid. Muutuja nimes eristatakse suuri ja väikesi tähti. st muutujad x ja X
on kaks erinevat muutujat.
Muutujaid saab deklareerida kasutades võtmesõna var
var x (lihtsalt deklareerime muutuja x, kasutades võtmesõna
var)
var x = 7 (deklareerime ja väärtustame muutuja x,
kasutades võtmesõna var)
ja samuti võtmesõna var ära jättes.
x = "ai" (deklareerime ja väärtustame muutuja x, kasutamata
võtmesõna var).
NB: Kui mingi muutuja on deklareeritud väljaspool funktsioone
(s.t. globaalne muutuja ), siis sama nimega muutuja deklareerimiseks
funktsiooni sees peab kasutama võtmesõna var.
Javasript on dünaamiline programmeerimiskeel, seetõttu pole vaja kasutajal ära näidata andmete tüüpi muutuja jaoks.
Stringi ja arvu liitmisel operaatoritega "+" või "+=" teisendatakse arv stringiks.
näited:
var x = "Boing"+747 korral saame x
väärtuseks "Boing747"
var y =
"63"+3 korral saame y väärtuseks
"633"
Teiste operaatorite korral Javascript ei teisenda arvu stringiks
näide:
var z = "63"-3 korral saame z
väärtuseks 60
Muutujate nähtavuspiirkond:
Globaalsed muutujad s.t. muutujad mis on deklareeritud väljaspool
funktsioone on nähtavad kogu dokumendis. Lokaalsed muutujad s.t. muutujad, mis
on deklareeritud funktsiooni sees on nähtavad sama funktsiooni sees.
Operaatorid
Aritmeetika:
+ liitmine
- a) lahutamine
(kui 2 operandi).
b) ühe operandi korral on tulemuseks negatiivne operand
* korrutamine
/ jagamine
% jääk näide: 8 % 3 annab tulemuseks 2
++ suurendamine
ühe võrra enne või pärast omistamist
näide1: olgu x väärtus esialgu 5. y = x++ tulemusena
omistatakse y-le väärtus 5 ja alles
seejärel suurendatakse x-i 1 võrra s.t. x saab väärtuseks 6.
näide
2: olgu x väärtus esialgu 5. y
= ++x tulemusena suurendatakse kõigepealt x-i 1 võrra s.t. x saab väärtuseks 6
ja seejärel omistatakse y-le väärtus 6.
-- vähendamine ühe
võrra enne või pärast omistamist
näide1: olgu x väärtus esialgu 5. y = x-- tulemusena
omistatakse y-le väärtus 5 ja alles
seejärel vähendatakse x-i 1 võrra s.t. x saab väärtuseks 4.
näide
2: olgu x väärtus esialgu 5. y
= --x tulemusena vähendatakse kõigepealt x-i 1 võrra s.t. x saab väärtuseks 4
ja seejärel omistatakse y-le väärtus 4.
Võrdlemine:
== "võrdus",
tõene kui operandid on võrdsed
!= "mittevõrdus",
tõene kui operandid ei ole võrdsed
> "suurem",
tõene kui vasak operand on suurem paramast
>= "suurem
võrdne", tõene kui vasak operand on paramast suurem või võrdne paremaga.
< "väiksem",
tõene kui vasak operand on väiksem paramast
<= "väiksem
võrdne", tõene kui vasak operand on väiksem paramast või
võrdne paremaga.
Loogika:
&& "loogiline jaa", tõene kui mõlemad
operandid on tõesed.
näide: if
(x>5 && y>10) ....... kui mõlemad tingimused täidetud
|| "loogiline või", tõene kui vähemalt üks operand on
tõene.
näide: if
(x>5 || y>10) .......kui vähemalt 1 kahest tingimusest täidetud
! "loogiline eitus", muudab operandi tõese väärtuse
vääraks ja vastupidi.
näide: kui x=false
siis !x väärtus on true
Stringid (string - sümbolite jada jutumärkide vahel)
+ "stringide liitmine". Liidab 2 stringi.
näide: kui x="Euro", y="2002" siis
z=x+y korral saame z väärtuseks "Euro2002"
+= Liidab 2 stingi ja omistab väärtuse esimesele stringile.
näide: kui
x="Euro", y="2002" siis x+=y korral saame x väärtuseks
"Euro2002"
Omistamine:
= parempoollse operandi väärtus omistatakse vasakul olevale
muutujale
+= parempoollse operandi väärtus liidetakse vasakul olevale
muutujale ja tulemus omistatakse vasakul olevale muutujale.
näide: x+=3
on samaväärne x=x+3
-= x-=3 on samaväärne x=x-3
*= x*=3 on samaväärne x=x*3
/= x/=3 on samaväärne x=x/3
&= omistab kahe operandi "loogilise
jaa" tulemuse esimesele operandile
näide:
x&=y korral omistatakse x&&y väärtus x-le.
|= omistab kahe operandi "loogilise või" tulemuse
esimesele operandile
näide: x|=y
korral omistatakse x||y väärtus x-le.
Spetsiaalsed operaatorid:
?: see on if then else lause lühivorm
näide: z = (x>y) ?
x : y
kui x>y omistatakse z-le x väärtus, vastasel juhul y
väärtus
, kasutatakse juhul kui ühe avaldise
asemel on vaja täita mitut avaldist
näide: for (var i=1,
j=1; i<5; i++)
typeof väljastab operandi tüübi
näited: kasutada võib sulgudega s.t. typeof (operand) või
ilma s.t. typeof operand
var x=7 typeof
x tulemuseks saame number
var a="Hello World" typeof a tulemuseks
saame string
var kuup=new Date() typeof
kuup tulemuseks saame object
p=true typeof
p tulemuseks saame boolean
void määrab avaldise mis väärtustatakse, seejuures ei
tagastata tulemust (funktsioonide korral tagastatakse sageli ka tulemus või
tulemused).
näide: <a
href="javascript:void(document.form.submit())"> saada vorm
</a>
delete Kustutab objekti omaduse (atribuudi) või ühe elemendi
massiivist
näited: delete
objetinimi.omadus
delete objektinimi[indeks]
delete omadus
this Võtmesõna, mida kasutatakse viitamiseks vaadeldavale
(momendil kasutatavale ) objektile
näide : <input type="password"
name="pw" onChange="test(this)">
new new abil saame luua uue instantsi nii kasutaja poolt
defineeritud kui Javascripti sisseehitatud objektidele
näide1:
var kuup=new Date() (javascripti sisseehitatud objektidele)
näide2:
algul
defineerime objekti president
function president(riik, nimi, vanus)
{this.riik=riik
this.nimi=nimi
this.vanus=vanus}
ja seejärel lisame new
abil uue instantsi (s.t. konkreetse presidendi)
Meri = new president ("Eesti" , "Lennart
Meri", 70)
märkus: vaadeldava kursuse
materjalidest on välja jäetud biti operaatorid.
Javascripti
laused
Javascripti lauseks on iga Javascripti avaldis. Lausete eraldamiseks
kasutatakse java scriptis semikoolonit, kuid üldjuhul pole nõutav. Üks lause
võib olla kirjutatud mitmele reale. Samuti võib kirjutada ühele reale mitu
javascripti lauset, eraldades need semi-koolonitega (antud juhul on semikoolon
kohustuslik). Lausete blokid esitatakse loogilistes sulgudes.
NB: Kõik mis on esitatud nurksulgudes pole kohustuslik.
Kommentaarid :
// üherealise kommentaari
esitamiseks kasutatakse kahte kaldkriipsu
/* mitmerealine kommentaar algab
sümbolitega "/*" ja
lõpeb sümbolitega "*/" */
Tingimuslikud
laused:
if else lause:
if
(tingimus)
{laused, mis täidetakse kui tingimus on
täidetud}
[else
{ laused, mis täidetakse kui
tingimus ei ole täidetud }]
Et, selle lause else osa on esitatud nurksulgudes, siis võib see osa ka
puududa.
Näide 1:
var x=5; y=11;
if
(x>y)
{z = x; document.write("x on suurem kui y")}
else
{z = y; document.write("y on suurem kui x")}
document.write("<br>suurema
muutuja väärtus on "+z)
Näide 2: (vormiga seotud)
<script language="javascript">
function valik(){
if (document.vorm1.chb1.checked)
{document.write("Häh, kellele nad ei meeldiks");}
else
{document.write("Näete milline
naistevihkaja Te olete! kes oleks võinud seda arvata");}
}
</script>
switch lause: (kasutatakse juhul
kui on palju üksteist välistavaid võimalusi)
switch (avaldis){
case märgend1 :
lause1;
break;
case
märgend2 :
lause2;
break;
...
[default : vaikimisilause;]}
Kui avaldise väärtus on võrdne mingi märgendiga, siis täidetakse sellele
märgendile järgnev lause ja jätkatakse programmi täitmist switch lause tagant.
Kui aga avaldise väärtus ei võrdu ühegi märgendiga siis täidetakse võtmesõnale
default ärgnev lause (juhul kui see on olemas). Ka viimasel juhul jätkatakse
programmi täitmist switch lause tagant.
Näide 1:
var seade=window.prompt("Valige kettaseade")
switch (seade){
case 'A': case 'a':
document.write("<br> valitud kettaseade on flopiseade");
break;
case 'C': case 'c':
document.write("<br> valitud
kettaseade on kõvaketas ");
break;
case 'E': case 'e':
document.write( "<br> valitud
kettaseade on CD ROM");
break;
default:
document.write( "<br>
kettaseade on valitud valesti");
}
for lause
for lauset on mugav kasutada juhul kui on teada tsükli tüitmise kordade arv
(loomulikult võib see arv olla muutuja või atribuut ).
for
([algväärtus-avaldis ]; [tingimus]; [muutmise avaldis])
{
igal tsükli sammul täidetavad laused
}
Näide 1:
for (i=1; i<11; i++)
document.write("i="+i+" i ruudus="+i*i+"<br>")
Märkus: loogilised sulud võib
ära jätta kui nende vahel on ainult üks lause.
Näide 2:
Kasutame mitme muutuja samaaegset intsialiseerimist, samuti suurendamist
ja vähendamist:
for (var i=0, j=9; i<j; i++, j-- ){
document.write("<br> i =
"+i);
document.write( " j = "+j);
}
Näide 3: (kasutades vormi)
Antud näites muudetakse
esialgu rippmenüüst tehtud valik vastupidiseks. Esimene osa
koodist tuleb (javascript) tuleb lisada HTML dokumendi päisesse, teine osa
(vorm) body elemendi sisse.
<SCRIPT
language="javascript">
function invert(valik)
{ for (var i=0; i < valik.options.length; i++)
{
if (valik.options[i].selected==true)
valik.options[i].selected=false
else
valik.options[i].selected=true
}
}
</SCRIPT>
<FORM NAME="vorm">
Nupule vajutus muudab tehtud valiku vastupidiseks:
<br>mitme programmeerimiskeele korraga valimiseks kasutage
"Ctrl" nuppu<BR>
<SELECT NAME="progkeeled" MULTIPLE size="6">
<OPTION value=”Javascript” SELECTED> Javascript
<OPTION value=”Java”> Java
<OPTION value=”PHP”> PHP
<OPTION value=” Phyton”> Phyton
<OPTION value=”ASP”> ASP
<OPTION value=”TCL”> TCL
</SELECT><P>
<INPUT TYPE="button" VALUE="vastupidine
valik!" onClick="invert(document.vorm.progkeeled)">
</FORM>
while lause
While lauset on mugav kasutada
tsükli juhtimiseks ka juhul, kui tsükli sisu täimiste arv pole teada (isegi
muutujana) vaid on määratud kõige erinevat laadi keerukate tingimus-tega. Kõigepealt kontrollitakse tingimuse täidetust
ja seejärel täidetakse tsükli sisu.
while (tingimus)
{
laused, mis täidetakse kui on täidetud tingimus
}
Näide 1:
i = 20
j = 1
while ( i > j
) {
i -= 2; j += 2;
document.write("i="+i+" j="+j+"<br>");
}
Näide 2:
Selle näites on teatud
blokk leheküljest esialgu peidetud, pärast õige salasõna sisestamist
muutub see nähtavaks. Näite kood on pikk kuna on tehtud eraldi lahendused Netscape
ja IE jaoks. Esimene osa näitest tuleb
lisada HTML dokumendi päisesse ja teine elemendi body sisse. WWW leheküljel
pole küll otseslt seda salakoodi näha, kui on vajadus osa infot peita, siis
tuleb kasutada keerukamaid lahendusi. Antud näite eesmärk on while tsükli
selgitamine.
<script
language="javascript">
function
passww(){
var
salas="999111";
var
vastus="";
if
(document.layers) {document.Teht.visibility='hide';}
if
(document.all) {Teht.style.visibility='hidden';}
while (vastus!=salas)
{
vastus=prompt("Palun
sisestage salasõna","")}
if
(document.layers) {document.Teht.visibility='show';}
if
(document.all) {Teht.style.visibility='visible';}
}
</script>
<body onload="passww()" >
<br><br>
<div name="Teht"
ID="Teht"><blockquote>Siin lehel on väga salajane
materjal</blockquote>
</div>
</body>
Lihtsaim viis mingi
lehekülje pisutki paremaks peitmiseks on kasutada asukoha määramise objekti,
sellisel juhul asendame päisesse mineva koodi järgmisega.
<script language="javascript">
function passww(){
var vastus="";
vastus=prompt("Palun sisestage
salasõna","");
location.href=vastus}
</script>
do...while lause
Kõigepealt täidetakse tsükli sisu ja seejärel
kontrollitakse tingimuse täidetust. Seega tsükli sisu täidetakse vähemalt üks
kord, mis ongi erinevuseks while ja do while lausete vahel.
do {
laused, mis täidetakse kui on täidetud nõutav tingimus
}
while (tingimus);
Näide 1:
i=1
do {
i+=5;
document.write("<br>i="+i);
}
while(i<20);
label lause
Label ehk märgend võimaldab identifitseerida ükskõik millise javascripti
lause, millele see märgend on lisatud.
Näiteks on mugav identifitseerida märgendi abil mingi tsükkel ja kasutada hiljem märgendit selle tsükli
katkestamiseks või jätkamiseks (laused break ja continue).
label:
lause
Näide 1:
kenakohake:
while (passww!=pw) {
funktsioon(); }
break lause
Kasutatakse tsükli, switch lause või label lause katkestamiseks. Katkestab
kõige sisemise tsükli või switch lause ja annab juhtimise tsüklile (switch
lausele) järgnevale lausele.
Süntaks on:
1. break
2. break label
Näide 1.
Esimene osa näitest tuleb lisada HTML dokumendi päisesse teine body sisse
<script
language="javascript">
function katkestame() {
var k=1;
while(k<100) {
if (k==5)
break
k++;
}
return k; }
</script>
<a href="#" onclick="alert('k viimane vaartus on '+katkestame())" target="">break naide</a>
Selles
näites katkestatakse konkreetse märgendiga tähistatud tsükli lauset. Proovige
vahetada välimisele ja sisemisele tsüklile vastavaid märgendeid (margend1 ja
margend2) break lauses ja võrrelge tehtavat tööd.
function katkestame() {
var k=1;i=1;
margend1:
while(k<10) {
j=k+i;
margend2:
while (i<5){
v=4*i+2*j;
if (i==2)
break margend2;
i++;
}
k++
}
return v
}
continue lause
1. continue
2. continue label
1. Kui continue lauset kasutatakse while või for lause sees, siis
katkestatakse tsükli sisu täitmine continue lausele vastavas kohas ja
jätkatakse while või for lause täitmist järgmise iteratsiooniga. Teisiti öeldes
:antud ringil jäetakse tsükli sisu täitmine pooleli ja minnakse järgmisele
ringile.
2. Kui continue-le järgneb label siis, jätkatakse antud märgendiga
tähistatud lause täitmist järgmise iteratsiooniga. Viimasel juhul peab continue
asuma tsükli sees mis on märgendiga tähistatud.
Näide 1:
Kui k väärtus on 2 siis antud funktsioonis ei jätkata lause document.write(k+"<br>") täitmisega
vaid minnakse while tsükli järgmist iteratsiooni täitma, s.t. k saab
väärtuse 3.
function katkestame() {
var k=0;
while(k<6) {
k++;
if(k==2)
continue
document.write(k+"<br>")
}
}
Objekt orienteeritud
programmeerimine – OOP
Klassidel ja prototüüpidel
põhinevad OOP keeled.
Klassidel põhinevad OOP
keeled tuginevad kahe erineva mõiste kasutamisele: klass ja instants.
Klass - abstraktne mõiste, defineerib kõik selle klassi
objektide omadused ja meetodid (funktsioonid). Konkreetseid objekte ei
defineeri.
Instants – üks klassi liige. Konkreetne objekt. Näide:
Klassiks on arvuti, instantsiks (objektiks) minu arvuti.
Prototüübil põhinevad
keeled nagu JavaScript ei erista klasse ja instantse. Olemas on ainult objektid.
Uue objekti loomiseks ja initsialiseerimiseks kasutatakse prototüübi objekti
(sisu poolest vastab see klassile). Lisaks saab defineerida igale objektile
ainult talle kuuluvaid omadusi.
Klassidel põhinevates
OOP keeltes defineeritakse klassid, mis sisaldavad ka spetsiaalseid funktsioone
instantside loomiseks ja initsialiseerimiseks – konstruktoreid. JavaScriptis
võib kasutada konstruktorina suvalisi funktsioone. Uus objekt luuakse kasutades
new operaatorit koos konstruktoriga.
Alustame objektide omaduste kasutamise kirjeldamisest kuna objektide
loomine sisaldab ka objekti omaduste defineerimist. JavaScriptis saame
objektide omadusi kasutada kujul:
objekti_nimi.omaduse_nimi
Näide: Vaatleme objekti minu_pc.
Omadusi lisame järgmiselt
minu_pc.kiirus=1300
minu_pc.aasta=2002
minu_pc.mudel=”AMD”
minu_pc.hdd=20
Samaväärselt võib kasutada ka indekselementide massiivi
minu_pc[“kiirus”]=1300
minu_pc[“aasta”]=2002
minu_pc[“mudel”]=”AMD”
minu_pc[“hdd”]=20
Viimast varianti on
mugav kasutada objekti kõigi omaduste hulgast konkreetse omaduse otsimiseks või
kõigi omaduste kasutamiseks. Siinkohal rõhutame, et isegi ühe prototüübi
objekti abil loodud objektidel saab olla erinev arv omadusi (või sama arv, aga
mitte täielikult kattuvaid omadusi), kuna on olemas võimalus omaduste
lisamiseks konkreetsele objektile.
Klassidel põhinevates
keeltes on objektide täpselt need omadused, mis on klassi definitsiooniga
määratud.
Näiteks teeme funktsiooni, mis kuvab kõik objekti omadused ja nende väärtused
function
kuva_om (obj, obj_nimi){
var tulemus=””
for (var i in obj)
tulemus+=obj_nimi+”.”+i+”=”+obj[i]+”\n”;
return tulemus }
Kasutame kujul:
kuva_om(minu_pc,
“minu_pc”)
Objekti loomine
Objekti loomine
konstruktori abil
a) Koostame konstruktori funktsiooni
b) Loome uue objekti operaatori new ja konstruktori funktsiooni abil
Teeme konstruktori objekti pc jaoks
function
pc(kiirus, aasta, mudel, hdd) {
this.kiirus=kiirus
this.aasta=aasta
this.mudel=mudel
this.hdd=hdd
}
Loome mõne uue objekti
minu_pc=new
pc (1300,2002,”AMD”,20)
teine_pc=new
pc (1500,2002,”Pentium4”,40)
Objekti omaduseks võib
olla teine objekt:
function isik(nimi, vanus) {
this.nimi=nimi
this.vanus=vanus
}
hugo=new isik(“Hugo
Herilane”, 25)
Teeme uuesti funktsiooni
pc lisades omaniku omaduse
function
pc(kiirus, aasta, mudel, hdd,omanik) {
this.kiirus=kiirus
this.aasta=aasta
this.mudel=mudel
this.hdd=hdd
this.omanik=omanik
}
Loome uue objekti:
teine_pc=new
pc (1500,2002,”Pentium4”,40,hugo)
Arvuti teine_pc omaniku
nime saame kätte nõnda:
teine_pc.omanik.nimi
Lisame arvutile teine_pc
veel paar omadust.
teine_pc.ram=256
teine_pc.videok=64
Need omadused ja
väärtused ei mõju arvutile minu_pc
Omadusi saab defineerida
ka teisiti: kasutades nimede asemel indekseid
minu_pc[1]=1300
minu_pc[2]=2002
Viimasel juhul tuleb
omadusi ka vastavalt kasutada
minu_pc[1] jne.
Süntaks on:
objekti_nimi={omadus1:väärtus1,
omadus2:väärtus2,… omadusN:väärtusN }
Näide 1:
minu_pc={kiirus:1300,
aasta:2002, mudel:”AMD”,hdd:20}
Objekte võime luua ka tingimuslikult:
if
(tingimus) uus_pc={……………}
Näide 2: üheks
omaduseks (omanik ) on objekt
teine_pc={kiirus:1500,
aasta:2002, mudel:”Pentium4”,hdd:20, omanik:{nimi:”HugoHerilane”,vanus:25}}
Meetod on objektiga seotud
funktsioon.
Meetodi defineerimiseks kirjutame kõigepealt
meetodile vastava funktsiooni nagu iga tavalise funktsiooni.
Seejärel seome tehtud funktsiooni objektiga
kasutades järgmist süntaksit:
objekti_nimi.meetodi_nimi=funktsiooni_nimi
Siin objekti_nimi on juba olemasoleva
objekti nimi,
meetodi_nimi on meie poolt valitud
nimi meetodi jaoks,
funktsiooni_nimi
on antud meetodile vastava funktsiooni nimi.
Meetodit same kasutada koos objektiga kujul:
objekti_nimi.meetodi_nimi(parameetrid)
Antud juhul defineerisime meetodi ainult konkreetse objekti jaoks.
Seda võiks vaadelda kui javascripti (prototüübil põhineva keele)
lisavõimalust.
Tegelikult kasutatakse enamasti meetodite defineerimist prototüübi
objekti jaoks.
Viimasel juhul lisatakse meetodi definitsioon prototüübi objekti
konstruktori funktsiooni.
Näide: Teeme funktsiooni kuva_pc()
eespool defineeritud objekti pc jaoks:
function
kuva_pc(){
var tulemus=”Arvuti omadused:
”+this.kiirus+” ”+this.aasta+” ”+this.mudel+” ”+this.hdd
document.write(tulemus)
}
Rõhutame, et
võtmesõna “this” kasutamise abil viitame objektile, mille meetodit kasutame.
Teeme funktsioonist kuva_pc() objekti pc meetodi:
function pc(kiirus, aasta, mudel, hdd,omanik) {
this.kiirus=kiirus
this.aasta=aasta
this.mudel=mudel
this.hdd=hdd
this.omanik=omanik
this.kuvapc=kuva_pc
}
Loome uue objekti, mille
prototüübi objektiks on pc:
arvuti=new pc (1700,2002,”Pentium4”,60,hugo)
Kasutame äsja
defineeritud meetodit:
arvuti.kuva_pc()
Tegelikult on võimalik lisada omadusi või meetodid ka olemasolevale
prototüübi objektile kasutades süntaksit kujul
objekti_nimi.prototype.meetodi_nimi=funktsiooni_nimi
Näiteks objekti pc korral saame
pc.prototype.uus_meetod=fn_uus
Selle
võimalusega tutvume lähemalt funktsioonide peatükis
with lause
with lause abil
määratakse vaikimisi object, mida with lause sees kasutatakse. Nii saame
kasutada with abil määratud objekti atribuute, objektile endale viitamata
(saavutatakse lühidus)
Näide:
var r=2;
with(Math)
{Valem=r*cos(PI)+sin(PI/4); }
for ... in
lause
Antud
muutujale tehakse iteratsioon üle kogu objekti atribuutide (omaduste).
for (muutuja in object) {
laused mis täidetakse kõigi objekti
atribuutide (omaduste) jaoks}
Näide:
a) koostame konstruktori funktsiooni
function person(eesnimi,perenimi,vanus) {
this.eesnimi=eesnimi;
this.perenimi=perenimi;
this.vanus=vanus; }
b) loome 2 objekti (teele ja joosep)
teele=new person("Teele","Raja",21);
joosep=new person("Joosep","Toots",23)
Nüüd koostame funktsiooni propert, mis tagastab objekti
atribuudid (omadused) koos nende väärtustega.
function propert(obj, obj_name) {
var result = ""
for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "\n"
return result
}
Funktsiooni
poole võib pöörduda näiteks järgmiselt (nii toome objeti atribuudid ja nende
väärtused alert aknasse)
<a href="#" onclick="alert(propert(teele,'teele'))">objekti omadused</a>
delete lause
Kustutab
objekti, objekti atribuudi (omaduse) või siis teatud massiivi elemendi.
1.
delete
objektinimi
2.
delete
objektinimi.artibuudinimi
3.
delete
objektinimi[indeks]
4.
atribuut see juht on kasutatav ainult
with lause sees
Näide 1: kustutame eespool näites kasutatud objekti
delete
teele
Näide 2: kustutame eespool näites kasutatud objekti
atribuudi
delete
teele.vanus
Näide 3: Kustutame ühe massivi elemendi
kõigepealt
defineerime massivi ar
ar=new Array("yks","kaks","kolm")
siis
kustutame massivi teise elemendi (esim,esimese elemendi indeks on 0 mitte 1)
delete ar[1]
massivi
ar teise elemendi väärtuseks saab nüüd undefined
document.write(ar)
Luuakse
objekti Array konstruktori poolt
1.
new Array(massivi pikkus)
2.
new Array(element0, element1,............elementN)
3.
new
Array() tehakse massiiv pikkusega null,hiljem lisatakse
elemendid
Näide 1:
moodustame
4-ja elemendiga arvud massivi ja seejärel väärtustame elemendid
NB. esimese elemendi indeks on null mitte üks.
arvud=new Array(4)
arvud[0]=3
arvud[1]=4
arvud[2]=7
arvud[3]=1
document.write(arvud)
Näide 2:
Moodutame massiivi koos elementide väärtustamisega
ar=new Array("yks","kaks","kolm")
muudame massiivi esimese elemendi väärtuse ühe asemel one-ks
ar[0]="one"
Näide 3:
Teeme tühja massivi (pikkus null), seejärel väärtustame (lisame) massiivi
0-nda ja 10-nda elemendi. Uurime kui pikk on nüüd massiiv kasutades objekti
Array omadust length.
myar = new Array()
myar[0] = "esimene"
myar[10] = "viimane"
document.writeln(myar.length)
Objekt Array meetodid on:
concat(massiiv) – Ühendatakse 2 massiivi, tagastatakse uus massiiv.
Esialgset massiivi ei muudeta. Näide:
massiiv1=new Array("eesti","lati","leedu")
massiiv2=new Array("hiina","india","jaapan")
y=massiiv1.concat(massiiv2)
document.write(y+"<br>")
join(eraldaja) – ühendab massiivi elemendid stringiks, kasutades argumendi
abil etteantud eraldajat. Näide:
document.write(massiiv1.join()+"<br>")
document.write(massiiv1.join(" * ")+"<br>")
document.write(massiiv1.join(" + ")+"<br>")
pop() – eemaldab esialgsest massiivist viimase
elemendi, lisaks tagastab tulemusena selle eemaldatud elemendi. Näide: ( IE5 ei
saa tehtud, NS6 teeb ära)
z=massiiv1.pop()
document.write(massiiv1+"<br>")
document.write(y+"<br>")
push(el1,el2,el3……..,elN) – Lisab
esialgse massivi lõppu ühe või rohkem elementi ja lisaks tagastab tulemusena
viimase lisatud elemendi. Näide: : ( IE5 ei saa tehtud, NS6 teeb kuidagi )
mt=massiiv1.push("soome","taani","norra","rootsi")
document.write("massiiv
pärast lisamist "+massiiv1+"<br>")
document.write("viimane
lisatud element "+mt+"<br>")
reverse() – Transponeerib massivi elemendid. Esimene
element läheb viimaseks, viimane esimeseks jne. Näide:
uus=new Array("yks","kaks","kolm")
document.write(uus+"<br>")
uus.reverse()
document.write(uus+"<br>")
shift() – Eemaldab esialgsest massiivist esimese
elemendi, lisaks tagastab tulemusena selle eemaldatud elemendi. Näide: ( IE5 ei
saa tehtud, NS6 teeb ära)
uus=new Array("yks","kaks","kolm")
aa=uus.shift()
document.write("eemaldasime
esimese elemendi: "+uus+"<br>")
document.write("eemaldatud
element: "+aa+"<br>")
slice(ind1,ind2)
– Esialgset massiivi ei
muuda. Tagastab tulemusena massiivi, mis on saadud
esialgsest massiivist alates elemendist indeksiga ind1 kuni elemendini ind2.
Element indeksiga ind1 võetakse uude massiivi, aga element indeksiga ind2 jääb
juba välja. Kui argumenti ind2 pole antud siis võetakse elemente kuni massivi
lõpuni
Näide:
me=new Array("eesti","lati","leedu","soome","rootsi")
ve=me.slice(1,4)
document.write("eemaldatud
elemendid on: "+ve+"<br>")
splice(i,k,el1,….,elN)
– Esialgsest massiivist
eemaldab k elementi alates
elemendist indeksiga i. Samasse
kohta massiivis lisab uued elemendid el1,….,elN.
Lisaks tagastab tulemusena massiivi, milles on eemaldatud elemendid.
Näide: ( IE5 ei saa tehtud, NS6 teeb ära)
me=new Array("eesti","lati","leedu","soome","rootsi")
document.write("esialgne
massiiv oli: "+me+"<br>")
re=me.splice(2,2,"norra","taani")
document.write("esialgsest
massiivist saime: "+me+"<br>")
document.write("eemaldatud
elemendid on: "+re+"<br>")
sort(võrdlusfn) – Kui argumenti pole antud, siis järjestab esialgse massiivi leksiko-graafilises järjestuses.
Kui argument on antud siis kasutab seda võrdlusfunktsioonina järjestamisel.
Näide
aq=new Array("rootsi","lati","leedu","soome","rootsi","eesti")
aq.sort()
document.write("järjestatud
massiiv : "+aq+"<br>")
toString() – Esialgset
masiivi ei muuda. Tagastab tulemusena stringi, mis saadakse masiivi elementide
järjestusest kasutades eraldajana koma. Näide:
bq=new Array("rootsi","lati","leedu","soome","rootsi","eesti")
sq=bq.toString()
document.write("teeme
stringiks : "+sq+"<br>")
document.write(typeof
sq+"<br>")
unshift(el1,….,elN)
– Lisab ühe või enam elementi
esialgse massiivi algusse, lisaks tagastab massivi uue pikkuse. Näide: ( IE5 ei saa tehtud, NS6 teeb ära)
cq=new Array("rootsi","lati")
document.write("esialgne
massiiv: "+cq+"<br>")
dq=cq.unshift("kreeka","itaalia")
document.write("
massiivpärast lisamist: "+cq+"<br>")
document.write("
massiivi uus pikkus: "+dq+"<br>")
Date objekt
Kuupäeva objekti Date saame kasutada
kujul:
1. new
Date()
Kui argumente pole antud siis koostab Date objekt käesoleva kuupäeva
Näide
kuup=new Date()
document.write(kuup+"<br>")
2. new
Date("kuu kuupäev, aasta tunnid: minutid:sekundid ")
näide:
jaanituli
= new Date("july 24,2001 19:00:00")
document.write(jaanituli+"<br>")
seega sulgudes olevad argumendid on stringid
3. new
Date(aastaarv, kuu number, kuupäev)
näide:
kokkutulek= new Date(2001,08,17)
document.write(kokkutulek+"<br>")
NB : Siin on argumendid numbrilised ja kuid loetakse alates nullindast kuni 11-ndani, s.t. jaanuar 0-s kuu ja
detsember on 11-nes kuu.
4. . new
Date(aastaarv, kuu number, kuupäev, tunnid,minutid,sekundid)
näide:
synka = new Date(2001,08,17,17,15,0)
document.write(synka+"<br>")
Kui osa argumente on puudu (pole ette antud), siis need argumendid saavad
väärtuseks 0.
Kuupäevad enne 01.01.1970 00:00:00 pole lubatud.
Date objekti meetodid: siinkohal teeme näite ühe pikema rakendusena,
kasutades valdavat enamust meetoditest esitades vaheldumisi programmi koodi
ja kommentaare. Kõigepealt kirjeldame
meetodeid.
getDate()
– tagastab kuupäeva
(täisarvuna 1 kuni 31)
getDay() – tagastab nädalapäeva numrina, kus 0 vastab pühapäevale,
1 esmaspäevale jne.
getHours()
– tagastab tunnid täisarvuna
(0 kuni 23)
getMinutes()
– tagastab minutid täisarvuna
(0 kuni 59)
getMonth()
– tagastab kuu täisarvuna. NB
0 kuni 11 mitte aga 1 kuni 12.
getSeconds()
– tagastab sekundid
täisarvuna (0 kuni 59)
getTime()
– tagastab kuupäeva
millisekundites alates ajast 1 jaanuar 1970 00:00:00.
getTimezoneOffset()
– tagastab ajavahe kohaliku
aja ja Greenwichi aja vahel
getYear()
– tagastab aastarvu. Kui
kuupäeva aasta on vahemikus 1900 ja 1999 siis tagastatakse aastaarv
kahekohalisena (aastarv-1900). Kui kuupäeva aasta on alla 1900 või üle 1999
siis tagastatakse aasta neljakohalisena.
parse
– tagastab kuupäeva
millisekundites alates ajast 1 jaanuar 1970 00:00:00.
setDate(päev)
– muudab kuupäeva võrdseks
etteantud argumendiga
setHours(tunnid)
– muudab tunnid võrdseks
etteantud argumendiga
setMinutes(minutid)
– muudab minutid võrdseks
etteantud argumendiga
setMonth(kuu)
– muudab kuu võrdseks
etteantud argumendiga
setSeconds(sekundid)
– muudab sekundid võrdseks etteantud
argumendiga
setTime(kuupäev
millisekundites) – muudab
tunnid võrdseks etteantud argumendiga
setYear(aasta)
– muudab aastad võrdseks
etteantud argumendiga, juhul kui argument antakse kahekohalisena liidetakse
sellele 1900.
toGMTString(kuupäev)
– tagastab kuupäeva stringina
Greenwich-i ajaga.
toLocaleString(kuupäev)
– tagastab kuupäeva stringina
kohaliku ajaga.
UTC() –
tagastab kuupäeva
millisekundites alates ajast 1 jaanuar 1970 00:00:00 Greenwhich-i aja järgi.
Näide:
neli
erinevat võimalust kuupäeva objekti tegemiseks:
document.write("Neli
erinevat võimalust kuupäeva objekti tegemiseks, tulemus on samas
formaadis<br>")
kuup=new Date()
document.write(kuup+"<br>")
jaanipaev = new Date("july 24,2001 19:00:00")
document.write(jaanipaev+"<br>")
kokkutulek= new Date(2001,06,07)
document.write(kokkutulek+"<br>")
T_synka = new Date(2001,06,17,17,15,0)
document.write(T_synka+"<br>")
moodustame uue objekti (isendi) tana, milleks on tänane (käesolev) kuupäev
tana = new Date()
väljastame
tulemuse, ameerika pärase muidugi nagu arvata võis uue operatsioonisüsteemi ja
õigesti määratud ajatsooni korral võib tuleb parem tulemus
document.write("<br>tänane kuupäev: "+tana+"<br>")
teisendame
kuupäeva stringiks (täpsemalt GMT stringiks)
strG=tana.toGMTString()
väljastame
tulemuse
document.write("tänane kuupäev GMT stringina: "+strG+"<br>")
normaalsem, järjekord läks nagu euroopalikumaks, aga...
uus jama GMT (Greenwich ) aeg on mittesobiv meie jaoks.
Vähe
sellest, et kell on vale, see teisendus stringiks sõltub tugevasti
operatsioonisüsteemist.
Tagatipuks ingliskeelsed päeva ja kuunimed.
Teisendame
kuupäeva lokaalseks stringiks. (kohalik aeg)
strL=tana.toLocaleString()
väljastame tulemuse
document.write("tänane kuupäev lokaalse stringina:
"+strL+"<br>")
Jälle ameerikalik järjestus. Lisaks võivad ka seda stringi eri platvormid
erinevalt kujutada.
Enamuses
süsteemides peaks see siiski sobima
Kindlaim
(operatsioonisüsteemidest sõltumatu) lahendus eestipärase kuupäeva saamiseks on
koostada see ise kasutades objekti Date meetodeid. Selleks on ka teine põhjus,
nimelt nii saame selgeks enamiku objekti Date meetodite kasutamise.
kasutades
getDay meetodit leiame nädalapäeva
nadalapaev=tana.getDay()
väljastame tulemuse
document.write("Nädalapäev: "+nadalapaev+"<br>")
Nagu näeme tagastatakse nädalapäev täisarvuna, kui
on soov (vajadus) esitada nädala-päev sõnana võib selle teisenduse teha näiteks
switch lause abil. See on sobiv ülesanne switch lause kasutusoskuse
kinnistamiseks. Ülesannet saab pisut keerukamaks teha lisades eesti või inglise
keele valiku. Kasutades getDate
meetodit leiame kuupäeva
kuupaev=tana.getDate()
väljastame tulemuse
document.write("kuupäev:
"+kuupaev+"<br>")
kasutades getMonth meetodit leiame kuu
kuu=tana.getMonth()
väljastame tulemuse
document.write("kuu: "+kuu+"<br>")
NB nagu teada (karta oli) on kuu väärtus nihkes. Tuletame meelde et Jaanuar oli
0-s jne. Kui tahame väljastada eestipärast tulemust siis: lisame kuunumbrile
ühe, soovil (vajadusel) teisendame switch lause abil kuu sõnaks. Paneme objekti
tana kuu numbri normaalseks kasutades meetodit setMonth
tana.setMonth(tana.getMonth()+1)
kuu=tana.getMonth()
Kasutades getYear meetodit leiame aasta
aasta=tana.getYear()
Väljastame tulemuse
document.write("aasta: "+aasta+"<br>")
Paneme kokku kuupäeva(s.t. päev.kuu.aasta) valides
eraldajateks puktid ja väljastame tulemuse
document.write("isetehtud
kuupäev: "+kuupaev+"."+kuu+"."+aasta+"<br>")
Läheb kah, aga soovi korral võime lisada nullid ette
päevale ja kuule juhul, kui nad on väiksemad kümnest ja väljastada tulemuse
uuesti
if (kuu<10) kuu="0"+kuu;
if (kuupaev<10) kuupaev="0"+kuupaev;
minukuupaev=kuupaev+"."+kuu+"."+aasta
document.write("isetehtud
ilusake: "+minukuupaev+"<br>")
nagu eespool öeldud saab siia ette lisada nädalapäeva
(tehes selle switch lausega)
samuti võib kuu teisendada sõnaliseks kui vajalikuks peetakse.
teeme veel ühe näpuharjutuse, paneme ise kokku kellaaja kasutades getHours, getMinutes
ja getSeconds meetoteid, eraldajaks valime siin kooloni
tunnid=tana.getHours()
if (tunnid<10) tunnid="0"+tunnid;
minutid=tana.getMinutes()
if (minutid<10) minutid="0"+minutid;
sekundid=tana.getSeconds()
if (sekundid<10) sekundid="0"+sekundid;
kellaaeg=tunnid+":"+minutid+":"+sekundid
document.write("kellaaeg:
"+kellaaeg+"<br>")
kui Date objekt on juba tehtud, aga on vajadus muuta tema mingeid väärtusi,
siis same kasutada meetoteid setDate, setHours, setMinutes, setMonth,
setSeconds setTime ja setYear.
NB: osutub, et javascript oskab lisatavaid suurusi ümber teisendada s.t. kui me
suurendame näiteks tunde 48 võrra siis muutub kuupäev 2 võrra suuremaks, kui
lisame 365 päeva minnakse õigesti üle järgmisse aastasse jne. Sageli on vajadus
mingit tähtaega muuta konkreetselt teatud päevade, tundide jne. võrra ja vanemates keeltes teisendati aeg
sekunditesse, lisati sekundites vajalik hulk aega ning teisendati tagasi.
Javascriptis saame
lihtsamalt hakkama, aga see pole siiski javascripti manualis ametlikult välja
pakutud
(eeldatakse näiteks päevi vahemikus 1 kuni 31).
Näitena muudame algul tunde,
näitame tulemust ja seejärel päevi, näitame tulemust
document.write("kuupäev enne
tundide lisamist: "+tana+"<br>")
tana.setHours(tana.getHours()+72)
document.write("kuupäev pärast
tundide lisamist: "+tana+"<br>")
tana.setDate(tana.getDate()+365)
document.write("kuupäev pärast
päevade lisamist: "+tana+"<br>")
Kasutades getTime meetodit vaatame kuidas
kuupäev millisekundites välja näeb
document.write("kuupäev
sekundites: "+tana.getTime()+"<br>")
Sarnase tulemuse saame kasutades parse meetodit, siin
tuleb argumendina anda ette kuupäev Stringi kujul
document.write("proovime parse
meetodit: "+Date.parse("2
june,2001")+"<br>")
Funktsioone on tulnud juba üsna palju kasutada kuna neil on sedavõrd keskne
koht programmeerimiskeeles. Siiani oleme kasutanud funktsioone kujul:
function
funktsiooni_nimi(argumendid) {
javascripti laused, mis on
funktsiooni sisuks
[return
tagastatav tulemus]
}
Näide:
function setBGColor() {
document.bgColor='blue'
}
Funktsioone saab kasutada ka kujul:
new Function (argument1,
...,argumentN, funktsiooni sisu)
Argumendid (pole kohustuslikud) esitatakse stringi kujul (näiteks
"x"). Ka funktsiooni sisu (javascripti laused) esitatakse stringi
kujul.
Näide:
var setBGColor = new Function
("document.bgColor='blue'")
Nagu näeme omistatakse funktsioon sellel juhul muutujale (objektile).
Selle funktsiooni objekti kasutamiseks on mitmeid mooduseid, mida oleme
juba eelnevalt kasutanud. Näiteks:
if (tingimus) {setBGColor()}
või
<input type="button" value="muuda värvi"
onClick="setBGColor()">
Põhierinevus kahe esituse vahel: Esimesel juhul on setBGColor funktsiooni
nimi. Teisel juhul on setBGColor muutuja, mille väärtuseks on viit
funktsioonile.
Objekti function olulisemad omadused
arguments
– argumendid, mis
funktsioonile antakse (võivad puududa) . Tegelikult on võimalik funktsiooni
igale argumendile omistada funktsiooni poole pöördumisel massiiv.
Argumentide tegeliku arvu saab teada kasutades meetodit arguments.length.
Näide:
Koostame
funktsiooni abil HTML loendi, jättes
loendi tüübi (u-nummerdamata,
o-nummerdatud) funktsiooni argumendiks.
function loend(tyyp){
document.write("<"+ tyyp+"L>")
for (var i=1; i<loend.arguments.length;i++){
document.write("<LI>"+loend.arguments[i])}
document.write("</"+ tyyp+"L>")
}
loend("O","yks","kaks","kolm")
arity
– vastupidiselt
arguments.length väärtusele näitab arity mitut argumenti funktsioon eeldab.
Näide nende mõistete täpsustamiseks:
function addnum(x,y){
document.write("tegelik fn poole pöördumisel kasutatav
argumentide arv: "+arguments.length+"<br>")
z=x+y
document.write("fn kolmas argument on: "+arguments[2]+"<br>")
}
document.write("fn poolt eeldatav argumentide arv:
"+addnum.arity+"<br>")
addnum(3,4,9)
Nagu näeme on arity väline
funktsiooni suhtes (kasutame väljaspool funktsiooni ennast).
Märkus: IE 5 ei suuda arity väärtust näidata , NS 6 saab hakkama.
caller – näitab milline funktsioon kutsus välja vaadeldava
funktsiooni. Juhul kui antud funktsioon pole välja kutsutud teiste
funktsioonide poolt, aga javascripti programmi kõrgema taseme enda poolt
(dokumendi päisest või body-st), siis saab caller
väärtuse null.
Näide:
function fn(){
if (fn.caller==null)
alert("antud funktsioon on kutsutud välja
javascripti enda poolt!")
else
alert("see funtsioon on välja kutsutud "+fn.caller+" poolt")
}
fn()
Märkus: IE 5 kipub näitama
väljakutsuvat funktsiooni koos sisuga, NS 6 saab hakkama ainult siis kui
väljakutsujaks on kõrgema taseme javascripti programm.
prototype
– kasutatakse omaduste või
meetodite lisamiseks olemasolevale prototüübi objektile (klassile). Täpsustame,
et omadused või meetodid lisatakse konstruktor-
funktsiooni prototüübile järgmiselt:
kontruktorfunktsiooni_nimi.prtotype.nimi=väärtus
nimi tähendab omaduse või meetodi nime ja väärtud omaduse või meetodi
väärtust. Väärtus tehakse enamasti funktsioone kasutades.
Näide:
Lisame
String objektile uue meetodi, mille argumendiks on täisarv ja mis kordab stingi
argumendi väärtuse arv korda. Kõigepealt koostame funktsiooni, mis selle töö
ära teeb
function kordastringi(n){
var x="", y=this.toString()
while(--n>=0) x+=y
return x
}
Seejärel seome fuktsiooni objektiga String
String.prototype.korda=kordastringi
Uurime kas ja kuidas asi toimib
Teeme kaks stringi
st1=new String("tere ")
st2= new String("bye ")
ja rakendame
meie enda tehtud meetodit
document.write(st1.korda(5)+"<br>")
document.write(st2.korda(5)+"<br>")
Meie poolt
tehtud meetod korda töötab ka objektidega mis pole koostatud String
konstruktori poolt. Anname ette argumendi stringina jutumärkides ja lisame meie
tehtud meetodi
document.write("tore on ".korda(4))
Objekti function
meetod toString() – esitab
objekti function stringi kujul.
NB: See meetod on olemas igal objektil, mitte ainult function objektil
Näide:
Kasutame juba eespol tehtud objekti person ja väljastame selle stringi
kujul.
function person(eesnimi,perenimi,vanus) {
this.eesnimi=eesnimi;
this.perenimi=perenimi;
this.vanus=vanus; }
document.write(person.toString()+"<br>")
Object objekt - Primitiivne javascripti objekti tüüp. Object jaoks defineeritud meetodid on
olemas kõigil javascripti objektidel.
Omadused:
Constructor
– määrab ära funktsiooni, mis
koostab objektide prototüübi. Selle omaduse väärtuseks on viit funktsioonile endale
(mitte funktsiooni nimi). Kõik objektid pärivad kontruktori omadused oma
prototüübilt:
Kui obj = new Object, siis tema kontruktor
on : obj.constructor==Object
Kui aga ar = new Array, siis tema
kontruktor on : ar.constructor==Array
Näide:
teeme prototüübi objekti koer ja seda tüüpi objekti (isendi) minukoer.
Vaatame millised on objekti minukoer konstruktori omadused:
function koer(nimi) {
this.nimi=nimi
}
minukoer=new koer("Laika")
document.write("objekti minukoer kontruktor on: "+minukoer.constructor+"<br>")
prototype – kasutatakse omaduste või meetodite lisamiseks
olemasolevale objektile (klassile).
Objekti Object
meetodid (
nagu eespool mainitud on Object jaoks defineeritud meetodid olemas kõigil javascripti objektidel):
eval(string)
– väärtustab stringi vastavalt tema sisule
Näide:
väärtustame stringi mis sisaldab muutujate nimesid
x=986
y="3*x+7"
z=eval(y)
document.write("y= "+y+"<br>")
document.write("z= "+z+"<br>")
toString()
– esitab objekti function
stringi kujul. see meetod on olemas igal objektil ja ta kutsutakse välja
automaatselt kui on vajadus esitada object stringi kujul. Kasutamise näide on
toodud eespool (v.t. objekti Function)
Lisame siiski, et numbriliste väärtuste esitamise korral stringina võib
kasutada täisarvulist argumenti vahemikus 2 kuni 16, mis määrab numbrilise
stringi esitamise viisi.
Näiteks 10 tähendab esitamist kümnendarvuna (kasutatakse vaikimisi kui seda
argumenti pole antud) ja 2 tähendab binaarset esitust s.t.
Kui x = 9 siis
x.toString(10) annab tulemuseks
9
x.toString(2) annab tulemuseks
1001
watch(omadus,
funktsioon) -
kui omaduse väärtus muutub siis täidab funktsiooni, mis on talle teise
argumendina ette antud.
unwatch(omadus) – kõrvaldab vaatluspunkti, mis on watch meetodiga peale
pandud.
valueOf()
- tagastab objekti primitiivse väärtuse.
Number objekt - objekt numbrite esitamiseks. Saame rakendada selle objekti meetodeid, et
kasutada positiivset ja negatiivset lõpmatust, ka numbrite maksimaalset ja
minimaalset väärtust. Samuti saame kontrollida kas muutuja on numbriline.
suurim=Number.MAX_VALUE
vahim= Number.MIN_VALUE
posit_lopmatus=Number.POSITIVE_INFINITY
negat_lopmatus=Number.NEGATIVE_INFINITY
pole_arv= Number.NON
Math objekt
– objekt matemaatiliste
konstantide (objekti math omadused) ja funktsioonide (objekti math meetodid)
kasutamiseks.
Näited:
Math.PI objekti
Math omadus, tagastab 3.14159.......
Math.cos(x) objekti
Math meetod, tagastab cos(x) väärtuse
Omadused:
E - arv e (2.718....)
LN10 - naturaallogaritm kümnest (2.302...)
LN2 -
naturaallogaritm kahest (0.693...)
LOG10E - kümnendlogaritm e-st (0.434..)
LOG2E - kahendlogaritm e-st (1.442..)
PI - pii (3.14159...)
SQRT2 - ruutjuur kahest (0.707..)
SQRT1_2 - ruutjuur arvust ½ (1.414...)
Meetodid:
abs(x) - absoluutväärtus
acos(x) -
arkuskoossiinus
asin(x) -
arkussiinus
atan(x) - arkustangens
atan2(x,y) - nurk radiaanides x-telje positiivse suuna
ja punkti (x,y) vahel
ceil(x) - tagastab vähima täisarvu
mis on antud arvust suurem või võrdne
cos(x) - koossiinus
exp(x) - eksponent
floor(x) - tagastab suurima täisarvu mis on antud
arvust väiksem või võrdne
log(x) -
naturaallogaritm
max(x,y) - maksimum kahest arvust
min(x,y) - minimum kahest arvust
pow(x,y) - astendamine
random() - tagastab juhusliku suuruse
round(x) - ümardamine lähimaks täisarvuks
sin(x) - siinus
sqrt(x) - ruutjuur
tan(x) - tangens
String objekt – objekt stringi kirjeldamiseks, tema omaduste ja
meetodite kasutamiseks.
Kõigepealt selgitame stringi literaali ja stringi objekti erinevust:
a=”3+7” //
stringi literaal
b=new String(“3+7”) //
stringi objekt
eval(a) //
tulemuseks saame 10
eval(b) //
tulemuseks saame “3+7”
Objekti String
omadused:
length – tagastab stringi pikkuse
Objekti String
meetodid:
big() -
määratakse HTML-i big font
blink() -
HTML-s vilkuma panek, enamus sirvijaid seda enam ei toeta
bold() -
määratakse HTML-i bold font (rasvane kiri)
italics() - string
esitataksekse kaldkirja
small() - string
esitataksekse väiketähtedega
strike() - string
esitataksekse mahatõmmatult (läbijoonitud)
sub() - string
esitataksekse alaindeksina
sup() - string esitataksekse
ülaindeksina
toLowerCase() - string esitataksekse väikeste tähtedega
toUpperCase() - string
esitataksekse suurte tähtedega
fixed() -
string fikseeritud fondiga (nagu TT tagide vahel HTML-is)
fontcolor(“värv”) - fondi värv
fontsize(n) - fondi
suurus
ancor(“nimi”) - teeb HTML ankru
link(URL) - HTML
link
charAt(i) - sümbol
indeksiga määratud positsioonil
charCodeAt(i) - indeksiga
määratud positsioonil oleva sümboli ISO-Latin-1 kood
substr(i1,L) - tagastatakse
alamstring alates etteantud positsioonist etteantud pikkusega
substring(i1,i2)- tagastatakse alamstring etteantud positsioonide vahel
concat(str) - ühendatakse 2
stringi, tagastatakse uus string, esialgset
muutmata.
fromCharCode(n1,...nk) -
teisendab ISO-Latin-1 koodi stringiks
indexOf(str,
alates indeksist) - alamstringi asukoha määramiseks esialgses
stringis (esimese esinemise positsioon)
lastIndexOf(str,
alates indeksist) - alamstringi asukoha määramiseks esialgses
stringis (viimase esinemise positsioon)
match(avaldis) - kasutatakse
avaldise otsimiseks stringis
replace(avaldis,str) - kasutatakse avaldise otsimiseks ja asendamiseks
stringis
search(avaldis) - kasutatakse avaldise otsimiseks stringis
slice(i1,i2) - esialgset stringi ei muuda, tagastab tulemusena stringi, mis on saadud esialgsest
stringist alates elemendist indeksiga ind1 kuni elemendini ind2.
split(eraldaja) - jaotab
stringi alamstringideks kasutades etteantud eraldajat ja saadud alamstringide
maksimaalset piirarvu
Näide 1:
Omadus length. Fondiga seotud meetodid.
var a="Kena kevadet";
document.write(a);
document.write("<br>stringi pikkus on: "+a.length);
document.write("<br>rakendame stringile
meetodit big: "+a.big());
document.write("<br>rakendame stringile
meetodit small: "+a.small());
document.write("<br>rakendame stringile
meetodit bold: "+a.bold());
document.write("<br>rakendame stringile
meetodit italics: "+a.italics());
document.write("<br>alaindeks: x"+"i".sub());
document.write("<br>ülaindeks: x"+"n".sup());
document.write("<br>teisendame kõik tähed
stringis väiketähtedeks:"+a.toLowerCase());
document.write("<br>teisendame tähed stringis
suurteks tähtedeks: "+a.toUpperCase());
b=a.italics()
document.write("<br>meetod italics ja
fondisuurus 6: "+b.fontsize(6));
document.write("<br>meetod italics ja
fondivärv: "+b.fontcolor("blue"));
Näide 2: Etteantud positsiooniga sümboli leidmine
stringist. Stringide liitmine.
document.write("<br>sümbol viiendal
positsioonil stringis: "+a.charAt(5));
document.write("<br>viiendal positsioonil oleva
sümboli kood: "+a.charCodeAt(5));
document.write("<br>sümbolite koodide
teisendamine sümboliteks: " + String.fromCharCode(65,66));
c=" ja rõõmsat suve"
document.write("<br>liidame stringid: "+ a.concat(c));
Näide 3: Leiame alamstringi esinemiste arvu stringis (indexOf() meetod)
jutt="päike paistab, päike soojendab, päike
annab energiat"
loend=0
koht=jutt.indexOf("päike")
while(koht!=-1){
loend++
koht=jutt.indexOf("päike",koht+1)
}
document.write("<br>Alamstring \”päike\” asub
stringis "+loend+" korda");
Näide 4: Asendame alamstringi (sõna) esialgses stringis
Lisame päisesse
funktsiooni vaheta_str()
function vaheta_str(vana_str, uus_str, alg_str){
for (var k=0;k<alg_str.length;k++){
if (alg_str.substring(k,k+vana_str.length)==vana_str){
alg_str=alg_str.substring(0,k)+uus_str+alg_str.substring(k+vana_str.length,alg_str.length)}
}
return alg_str
}
ja body ossa selle funtsiooni väljakutsumise
text="Soovitav on kasutada IE5.0-li, just
IE5.0 annab lisavõimalusi.IE5.0 asub...."
document.write("<br> vahetame
alamstringi\"IE5.0\" välja \"IE6.0\"vastu: "+ vaheta_str("IE5.0","IE6.0",text));
Näide 5: Ankrud ja lingid
javascripti abil.
HTML koodi
<a
name=”S_MK”> Suusatamise
maailma karikasari</a>
saab
asendada javascriptiga
document.write("Suusatamise maailma kasrikasari".anchor("S_MK"))
Nii tehtud ankrule saab ka lingi teha javascripti abil:
document.write("Suusatamise maailma karikasari".link("#S_MK"))
RegExp objekt
RegExp on avaldis,
mis koosneb tekstist ja lippudest selle teksti käsitlemise määramiseks.
RegExp kasutamise
eesmärk on paindlik avaldise otsimine stringis. RegExp on pärit
programmeerimiskeelest Perl.
a) RegExp kasutamine literaali kujul
/tekst/lipud
b) RegExp kasutamine konstrukro funktsiooni abil
New RegExp(“tekst”,”lipud”)
Lippude väärtuseks
saab olla:
g - globaalne vastavus (vaadeldakse
kõiki avaldise esinemisi)
i -
ei arvestata suurte ja väikeste tähtede erinevust (näiteks k=K)
otsimisel
gi (või ig)- globaalne vastavus, ei
arvestata suurte ja väikeste tähtede erinevust
RegExp avaldistes on
palju eritähendusega sümboleid, samuti on RegExp avaldisel mitmeid omadusi ja
meetoteid millega me siinkohal lähemalt ei tutvu. Samas toome selgitava näite
RegExp avaldise kasutamisest
Näide: Päisesse lisame funktsiooni info()
function info(x) {
re_avald = /(\w+)\s(\d+)/;
re_avald.exec(x.value);
window.alert(RegExp.$1 + " on " + RegExp.$2+" aastat vana"); }
ja body ossa selle
funktsiooni kasutamise
<form
name="vorm1">
<input type="text" name="lahter1" onChange="info(this);">
</form>
Dokumendi body-s
olev vorm on kursuse HTML-i käsitlevas
osas detailselt vaadeldud.
Lühiduse eesmärgil
oleme valinud funktsiooni argumendiks this s.t. viida aktiivsele objektile
(seega vaadeldavale tekstiväljale).
Vaatleme veidi lähemalt RegExp avaldise sisu. Välimised kaldkriipsud on
RegExp avaldise tunnuseks (literaali kuju ehk juht a)).
\w tähendab tähte või numbrit (A..Za..z0..9).
+ märk tähendab eelneva sümboli (antud
juhul siis suvalise tähe või numbri) esinemist 1 või enam korda (seni kuni pole
enam täht või sümbol)
\s tähendab eraldajat (tühik, tabulatsioon jne. )
Seega kokku saame
kaks tätedest või numbritest koosnevat sõna mille vahel on eraldaja.
Sulge kasutatakse
alamstringide eraldamiseks ja salvestamiseks omaduste väärtusteks (näiteks
$1..$9 väärtuseks).
RegExp
avaldistes kasutatavad erisümbolid:
\ |
a)
Näitamiseks, et järgmine sümbol on
eritähenduslik, juhul kui seda sümbolit käsitletakse üldjuhul literaalina. Näiteks avaldis /n/ vastab ‘n’-le, aga
/\n/ vastab reavahetusele. b)
Näitamiseks, et järgmine sümbol pole
eritähenduslik, juhul kui seda sümbolit käsitletakse üldjuhul
eritähenduslikuna. Näiteks * on erisümbol, mis tähendab eelneva sümboli 0 või
enam korda esinemist. /a*/ on seega 0 või rohkem a tähte. Kui on aga vaja
kirjutada avaldisse ‘a*’, siis kasutame kuju
/a\*/ . |
^ |
Vastavust kontrollitakse ainult rea alguses.
/^a/ esineb stringis “alus” aga ei esine stringis “salus” |
$ |
Vastavust kontrollitakse ainult rea lõpus. /a$/
esineb stringis “jala” aga ei esine stringis “jalad” |
* |
Eelneva sümboli
esinemine 0 või enam korda. |
+ |
Eelneva sümboli
esinemine 1 või enam korda. |
? |
Eelneva sümboli
esinemine 0 või 1 korda. |
. |
Punkt sümboli ees
vastab suvalisele sümbolile antud sümboli ees välja arvatud reavahetus. /.a/ |
(x) |
vastab 'x'-le, aga
lisaks salvestatakse and järgmise veel mittekasutusel oleva omaduse
väärtuseks ($1…$9). Sulgudesse pandud alamstringe saab kätte ka massiivi
elementidena (näide: av=/a(b+)(a)/ig; massiiv=av.exec(“aBBa”); ) . Nüüd on massiiv[1]=”BB”
ja massiiv[2]=a. Nullinda elemendi väärtuseks on viimati esinenud vastavus
(antud juhul aBBa). Massiivi elementide arv pole piiratud, samas omadustena
hoitakse viimast üheksat. |
x|y |
Vastab 'x'-le või 'y'-le. |
{arv} |
Arv on positiivne
täisarv. Vastab eelneva sümboli esinemisele täpselt arv korda. |
{arv,} |
Arv on positiivne
täisarv. Vastab eelneva sümboli esinemisele antud arv korda või rohkem. |
{n,m} |
|
[xyz] |
Sümbolite hulk.
Suvaline sümbol sellest hulgast tagab vastavuse. /[abc]/esineb stringis
“karu” (konkreetselt esineb sümbol ‘a’). Järjestikuste sümbolite korral võib
kasutada ka poolitamise märki. [cdefgh] on samaväärne [c-h]. |
[^xyz] |
Keelatud sümbolite
hulk. [^abcd] vstab esialgselt (esimene esinemine) sümbolile ‘v’ stringis
”adavere” ja sümbolile ‘i’stringis “abi” aga ei esine stringis “abba” . |
[\b] |
backspace |
\b |
Sõna piiraja |
\B |
Mitte sõnapiiraja
(kõik sellest erinev).
|
\cX |
X on
kontrollsümbol stringis. |
\d |
Vastab numbrile.
Samaväärne on |
\D |
Mitte arv.
Samaväärne on
|
\f |
Formfeed |
\n |
Reavahetus |
\r |
Rea algusse |
\s |
Eraldaja
tühik(ud), kaasa arvatud reavahetus, tabulatsioon . Samaväärne on |
\S |
Tühikust erinev
sümbol (üks). Samaväärne
|
\t |
Tabulatsioon |
\v |
Vertikaalne
tabulatsioon |
\w |
Suvaline number
või täht. Samaväärne on |
\W |
Mitte number ega
täht. Samaväärne on |
\n |
Arv on positiivne
täisarv. Tagasiviit viimasele alamstringile, mis vastab n sulule (loetakse
vaskpoolseid sulge). |
\ooctal |
|
Omadused:
$1.......$9 - omadused, mille väärtuseks on avaldises
sulgudesse pandud alamstringid. Säilivad 9 viimast sulgudes alamstringi.
Näide:
avaldis = /(\w+)\s(\w+)/;
str1 = "Kaspar Kartmatu";
str2=str.replace(avaldis, "$2, $1");
document.write(str2)
input või $_ ($_ on lühem tähistus omadusele input) – string millega
avaldist võrdleme
multiline või $* (lühend) - kui
selle omaduse väärtus on true, siis otsitakse vastete mitmelt realt vastasel
juhul katkestatakse võrdlus rea lõpus
lastMach või $& (lühend) -
viimane avaldise vaste stringis (globaalne võrdlus)
lastParen või $+ (lühend) -
viimase sulgudes olevas alamstringi vaste stringis
leftContext või $` (lühend) -
alamstring, mis eelneb viimasele vastele
rightContext või $’ (lühend) -
alamstring, mis järgneb viimasele vastele
global -
otsitakse kõiki vasteid (avaldise esinemisi stringis)
ignoreCase -
ei eristata suuri ja väikesi tähti võrdlemisel
lastIndex - indeks, millest
alustada järgnevat võrdlust (eelmisele leitud vastele järgneva sümboli
indeks)
source - avaldise tekst (kood)
Meetodid:
avaldise_nimi.compile(avaldis,lipud)- kompileerib avaldise (lipud
on eespool toodud)
avaldise_nimi.test(str) - täidab avaldise ja argumendiks oleva stringi
võrdluse, tagastab true kui leiab ja false kui ei leia avaldist stringis
avaldise_nimi.exec(str) - täidab avaldise ja argumendiks oleva stringi
võrdluse, kui leiab vastavuse, siis tagastab massiivi ja muudab avaldise
objekti omadusi. Kui ei leia avaldist stringis tagastab null.
võib kasutada ka lühemat vormi avaldise_nimi(str)
Näide:
avaldis=/a(b+)(a)/ig;
tulem = avaldis.exec("caBBahgdak");
antud avaldise ja argumenduks oleva stringi
võrdlemise tulemusena tehakse massiiv tulem, mis sisaldab antud juhul 3-me
elementi.
tulem=[aBBa, BB, a]
objekti tulem
omadustel on nüüd väärtused:
tulem.index=1 //esimese
vaste alguse indeks stringis (algab 0-st)
tulem.input=”caBBahgdak” // esialgne string
tulem[0]=aBBa //
viimane vaste
tulem[1]=BB //
esimene sulgudes olev alamstring
tulem[2]=a //
teine sulgudes olev alamstring
avaldise objekti omaduste väärtused on:
avaldis.lastIndex=5 // indeks millest alustada järgmist
otsimist
avaldis.ignoreCase=true // kasutati lippu i
avaldis.global=true // kasutati lippu g
avaldis.source=a(b+)(a) // avaldise tekst
objekti RegExp
omadustel on nüüd väärtused:
RegExp.lastMatch=aBBa // viimane
vaste
RegExp.leftContext=c // viimasele vastele
eelnev alamstring
RegExp.rightContext=hgdak // viimasele vastele järgnev alamstring
RegExp.$1=BB // esimene sulgudes olev
alamstring
RegExp.$2=a // teine
sulgudes olev alamstring
RegExp.lastParen=a // viimane sulgudes
olev alamstring
7.8. Window objekt
Windows objekt on kõrgem taseme objekt objektide
location, history ja document suhtes.
Javascript teeb window objekti iga body või frame
(samuti frameset) elemendi jaoks. Lisaks saame luua uusi aknaid kasutades
meetodit open().
Omadused:
closed - määarab kas aken on suletud
defaultStatus - vaikimisi teksti määramiseks olekuribale
document - sisaldab informatsiooni käesoleva dokumendi kohta,
võimaldab kasutada meetodeid HTML väljundi jaoks (document.write jne.)
frames - raamide massiiv, võimaldab pöörduda konkreetse raami
poole.
history - sisaldab infot antud aknas kasutadud URL-de kohta.
innerHeight - akna sisemuse kõrgus (pikimõõt pixelites)
innerWidth - akna sisemuse laius (ristimõõt pixelites)
length - raamide arv aknas
location - saame käeaoleva URL-i
locationbar - sirvija akna asukoha riba kirjeldamiseks
menubar - sirvija akna menüü riba kirjeldamiseks
name - akna ühene nimi (identifikaator)
opener - määrab akna nime, kohu dokument loeti, kui kasutati
meetodit windows.open
outerHeight - akna kõrgus
(pikimõõt pixelites, välimine)
outerWidth - akna laius
(ristimõõt pixelites, välimine)
pageXOffset - määrab lehekülje x-koordinaadi akna sisu vasaku ülanurga
suhtes. See omadus on vajalik omaduste scrollTo ja scrollBy kasutamiseks.
pageYOffset - määrab lehekülje y-koordinaadi akna sisu vasaku ülanurga
suhtes. See omadus on vajalik omaduste scrollTo ja scrollBy kasutamiseks.
parent-Sünonüüm raamile või aknale, mille frameset element
sisaldab vaadeldavat akent.
personalbar - sirvija akna personal riba (kataloogide riba)
scrollbars- sirvija akna kerimise ribad
self- käesoleva (aktiivse) akna sünonüüm
status- määrab olekuriba teadete prioriteedi
statusbar - sirvija akna olekuriba
toolbar - sirvija akna tööriistariba
top- kõige eespool (ülal) oleva sirvija akna sünonüüm
window - käesoleva (aktiivse) akna sünonüüm
Meetodid:
alert(teade)- avab alert dialoogi akna (koos OK nupuga)
back() - üks samm tagasi (eelmisele URL-le) kõige eespoololevas
(ülemises) aknas
blur() - eemaldab fokusseerimise etteantud objektilt
captureEvents(event) - Määrab akna või dokumendi teatud tüüpi sündmusi
käsitlema
clearInterval(intervalD) - lõpetab setInterval tegevuse
clearTimeout(timeoutID) - lõpetab setTimeout tegevuse
close() - suleb akna
confirm(“küsimus”) - avab dialoogiakna kus on teade ja kaks valikut:OK ja
Cancel
enableExternalCapture() - võimaldab käsitleda erinevatest kohtadest (serveritest)
loetud lehekülgede sündmusi.
disableExternalCapture() - tühistab enableExternalCapture tegevuse
find(string, casesensitive,
bachward)- leiab antud aknast
etteantud teksti stringi, parameetrid pole kohustuslikud
focus()- fokusseerib etteantud objekti
history.forward() - loeb sisse järgmise URL-i (ajaloost-history list)
handleEvent(event) - määrab etteantud
sündmuse käsitlemise
home() - loeb sisse sirvijas määratud antud kasutajale vaikimisi
(avamiseks) määratud lehekülje
moveBy(horizontal,vertical)
- liigutab akent etteantud
pixelite võrra
moveTo(horizontal,vertical)
- viib akna asendisse, mis
on määratud etteantud vasaku ülanurga koordinaatidega
open(URL, akna_nimi,
akna_parameetrid) - avab uue sirvija
akna
print() - trükib akna või raami sisu
prompt(teade,
vaikimisi_väärtus) -
avab dialoogi akna, kus on teade ja teksti sisestamise rida
releaseEvents(event_tüüp) -
antud sündmuste käsitluse lõpetamine aknas
resizeBy(horizontal,vertical)
- muudab akna suurust,
täpsemalt muudab alumise parema nurga asukohta etteantud määral
resizeTo(outerWith,outerHeight)
- muudab akna suurust
etteantud välimise piki- ja ristimõõduni.
scroll() - kerib akent etteantud koordinaadini
scrollBy(horizontal,vertical)
- kerib akna nähtavat osa
etteantud määral
scrollTo(x_koordinaat,y_koordinaat)
- kerib akna nähtavat osa
etteantud koordinaadini nii et etteantud punkt paigutub akna vasakusse ülanurka
setInterval(avaldis,
millisekundid) - väärtustab avaldise
või funktsiooni iga etteantud aja (millisekundites) järel. Seda meetodit saame
kasutada ka kujul:
setInterval(funktsiooni_nimi,
millisekundid,arg1,...argn). Siin arg1..argn on funkt-siooni argumendid (pole
kohustuslikud)
setTimeout(avaldis,
millisekundid) - väärtustab avaldise
või funktsiooni etteantud aja (millisekundites) järel ühe korra. Seda meetodit
saame kasutada ka kujul:
setTimeout(funktsiooni_nimi,
millisekundid,arg1,...argn) .
stop() - peatab antud mahalaadimise
Näide: Avame uue sirvija akna, lugedes sinna dokumendi nimega
aknasisu.html, mis on open meetodi juures esimeseks argumendiks. Teiseks
argumendiks on akna nimi, valime momendil aken1. Kolmandaks argumendiks on
string, mis sisaldab erinevaid akna omadusi koos väärtustega, kusjuures
omadused on eraldatud komadega ja
tühikuid ei kasutata.
kui kasutame järgmisi omadusi
width=400 laiuseks
400 pixelit
heigth=200 pikkuseks 100 pixelit
menubar=yes menüüriba on olemas
resizable=yes akna suurus on muudetav (näiteks
hiire abil)
toolbar=yes tööriistariba on olemas
status=yes olekuriba on olemas
scrollbars=yes kerimisriba on olemas
titlebar=no pealkirjariba pole
screenX=200 akna
kaugus ekraani vasakust servast
screenY=200 akna
kaugus ekraani ülemisest servast
saame tulemuseks:
window.open('akensisu.html','aken1','width=400,height=200,
screenX=200, screenY=200,menubar=yes,resizable=no,toolbar=yes,status=yes,scrollbars=yes,
titlebar=no')
avame sellise akna näiteks viite abil:
<a
href="#"onclick="window.open('akensisu.html','aken1','width=400,height=100,
screenX=200,screenY=200,menubar=yes,resizable=no,toolbar=yes,status=yes,scrollbars=yes,titlebar=no');">
avame akna </a>
Osutub et IE 5.0 ei oska kasuta atribuute (omadusi) screenX, screenY kasutada. Seetõttu
kasutame window meetodit moveTo, mille abil nihutame
akend nii, et ülemise vasaku nurga koordinaatideks saab (200,200). Seejärel
kasutame window meetodit moveBy: teeme vormi elemendi input abil nupud akna
nihutamiseks. Veel lisame nupu akna sulgemiseks (akent saab sulgeda ka paremast
ülanurgast ristikest valides)
päisesse lisame funtsiooni akna sulgemiseks
function closeIt(){
window.close();
}
akna nihutamine
<form >
<input type="button" value="paremale"
onClick="self.moveBy(20,0);">
<input type="button" value="vasakule"
onClick="self.moveBy(-20,0);">
<input type="button" value="alla" onClick="self.moveBy(0,20);">
<input type="button" value="yles"
onClick="self.moveBy(0,-20);">
<br><br>
akna sulgemine
<input type="button" value="Sulgeme akna"
onclick="closeIt()">
</form>
Ülesanne: teha
teadete aken (jättes URL tühjaks), kirjutada sinna paar teadet (document.write())
ja sulgeda teadete aken.
7.9. Location objekt
Location
objekt kirjeldab täielikku (kogu) URL-li mis on seotud window objektiga. Iga
location objekti omadus kirjeldab teatud osa URL-ist. Location objekte saame
kätte windows objekti omaduste kaudu.
Omadused:
href - kogu
URL
protocol - määrab protokolli
tüübi, (näiteks http)
host - määrab IP
aardessi (host ja domain nimed)
hostname - määrab host:port osa
URL-ist
port - määrab pordi
pathname - määrab kataloogi
hash - määrab ankru
search -
määrab päringud, see on ? algav URL osa
kui argumendi väärtus on true, siis tehakse
tingimusteta HTTP GET serverist. Vaikimisi see pole nii. Kui midagi pole
muudetud siis loetaksesageli cache mälust
replace(“URL”) - loeb uue URL-i muutmata history
väärtust
Näide 1:
window.location.href=”http://www.neti.ee”
selle asemel võib kasutatda ka lühemat kuju
window.location=”http://www.neti.ee”
Näide 2: avame ühte aknasse mingi dokumendi, teeme
teadete akna kuhu kirjutame eelneva dokumendi objekti location omadusi (href,
jne)
w1=window.open("http://infoseek.go.com/WW/NS/Titles?qt=RFC+1738+&col=WW")
wteade=window.open('','teadete_aken','width=400,height=300')
wteade.document.writeln("w1.location.href= "+w1.location.href+"<P>")
Ülesanne: Lähtudes näitest 2 väljastada teadete aknasse
location objekti omadused.
7.10. History objekt
History
objekt kujutab endast URL-ide massiivi (mida klient külastas). Saadakse kätte
windows objekti history omaduse kaudu.
Omadused:
current -
määrab antud hetke URL-I
length - URL-ide arv
history massiivis
next -
järgmine URL (kus käidi ja tuldi tagasi)
previous -
eelmine URL
Meetodid:
back() -
loeb sisse eelmise URL-li
forward() -
loeb järgmise eelmise URL-li
go(“URL”) -
loeb URL-li history massiiivist vastavalt argumendi väärtusele
meetodit go võib kasutada ka kujul:
go(arv) -
arv on positiivne täisarv edasiliikumiseks ja negatiivne täisarv
tagasiliikumiseks
Näide:
history.go(-2) //liigume 2 sammu tagasi
w5.history.back() // aknas w5 üks samm tagasi
7.11. Screen objekt
Monitori
(videokaardi) määrangute teadasaamiseks kasutame objekti screen.
Omadused:
height - kõrgus
width - laius
colorDepth - värvide sügavus
pixeDepth - värvi resolutsioon (bitti pikseli kohta)
availHeight - kasutale kättesaadav kõrgus (osa ruumi läheb
süsteemile)
availWidth - kasutale kättesaadav laius (osa ruumi läheb
süsteemile)
Näide:
Uurime hetkel kasutatava ekraani (videokaardi) määranguid
document.write("Laius: "+screen.width+"<br>")
document.write("Kõrgus: "+screen.height+"<br>")
document.write("Värvid: "+screen.colorDepth+"<br>")
document.write("kasutajale kättesaadav kõrgus: "+screen.availHeight+"<br>")
document.write("kasutajale
kättesaadav laius: "+screen.availWidth+"<br>")
7.12. Document objekt
Dokument objekt võimaldab:
Juurdepääsu kõigile
lehekülje elementidele
Uuendada, muuta lehekülge
Kasutada sündmusi (event)
Muuta lehekülje sisu
Dokument objekt sisaldab infot dokumendi kohta ja
võimaldab väljastada HTML teksti-i (document.write, document.writeln abil).
Aktiivses aknas paikneva dikumendi korral võib objekti window.document asemel
kasutada lihtsalt document. Document objekt luuakse koos body elemendiga.
Objekt document omadused:
URL - String, mis määrab dokumendi URL-i täies
mahus
Näide
1: omaduse URL kasutamine
document.write(document.URL)
document.URL="http://www.neti.ee/"
w1=window.open("http://www.php.ee/",'PHP_info','width=400,height=400')
Kui soovime äsja tehtud
aknasse lugeda uut dokumenti, siis võime kirjutada
a) w1.location.href=”URL”
või
b) w1.document.URL =”URL”
Tegelikult on nende kahe variandi vahel erinevus.
Esimesel juhul loetakse aknasse uus dokument, aga teisel juhul omistatakse
olemasoleva dokumendile uusURL. Ja loomulikult ei õnnestu kasutajal muuta
näiteks www.neti.ee jne. dokumentide URL väärtusi. Uue dokumendi saate aga
alati aknasse lugeda sõltumatasellest, mis seal enne oli.
lastModified - kuupäev ja aeg, millal dokumenti viimati
muudeti
Näide
2: omaduse lastModified kasutamine
document.write("Viimati muudetud: "+document.lastModified+"<br>")
vm= new Date(document.lastModified) // kuupäeva kujule
document.write("Viimati muudetud: "+vm+"<br>")
Teisendasime
document.lastModified väärtuse kuupäeva tüüpi objektiks. Eespool (punkt 7.2)
vaatlesime detailselt, kuidas kuupäeva eestipäraselt esitada sõltumata
kasutatavast operatsioonisüsteemist.
Valdav enamus objekti document omadusi tagavad
juurdepääsu lehekülje elementidele
images - dokumendi piltide massiiv
Näide 3: Dokumendis oleva esimese pildi saame kätte
nii
document.images[0]
Juhul, kui selle pildi tegemisel määratakse id või
name atribuut,
<img src=”ilus.gif” name=”pilt1”>
siis saame seda ka kasutada juurdepääsuks
document.pilt1
Viimane variant on konkreetsem ja loetavam, aga
teatud juhtudel (soovime läbi vaadata kõiki elemente) on programmeerimisel
mugav kasutada ka esimest varianti: näiteks select lause valikute
läbivaatamiseks jne. Muudame stiili abil pildi asukohta:
<img src="delfi.gif" name="pilt1" style="position:absolute;left:10;top:10">
<br><br><br>
<a href="#" onclick="document.pilt1.style.pixelLeft-=100;"> 100 pixelit vasakule</a>
<br>
<a href="#" onclick="document.pilt1.style.pixelLeft+=100;"> 100 pixelit paremale </a> <br>
<a href="#" onclick="
document.images[0].style.pixelTop-=50;"> 50 pixelit üles</a> <br>
<a href="#" onclick=’ document.
images[“pilt1”].style.pixelTop+=50;’> 50 pixelit
alla</a>
Nagu näeme viimasest viitest on veel kolmas moodus
juurdepääsuks lehekülje elemendile
document. images[“pilt1”]
Tegelikult võime IE exploreri korral ka sõna document ära jätta document.pilt1.style.pixelLeft asemel pilt1.style.pixelLeft
Netscape-s tuleb kasutada stiile kujul
document.pilt1.left-=100
või document.images[0].left-=100
või document.images[“pilt1”].left
-=100
Netscape-s peab kasutama sõna document, ei tohi lisada style ning pixelLeft asemel on left. Sarnaselt toimitakse ka teiste stiili
omaduste korral (pixelTop asel top jne.). Üks võimalus rakenduse
realiseerimiseks nii IE-s kui Netscape-s on kontrollida funktsioonis milline on
sirvija ja realiseerida hargnemislausete abil (if, switch) erinevad javascripti koodid. Vastavad näited toome
hiljem (animatsiooni tegemisel). Mõlemas sirvijas on lehekülje elementidele
ühesugune juurdepääs, kui me ei kasuta stiili omadusi, aga kasutame vahetult
“dokumendi puud” :
document.vorm1.text7.value, document.vorm5.chbox9.checked jne.
Objekti document omadusi
anchors - dokumendi ankrute massiiv
applets - dokumendi applettide massiiv
embeds - dokumendi plug in objektide massiiv
forms -
dokumendi vormide massiiv
layers -
dokumendi kihtide massiiv (vananenud omadus)
links - dokumendi linkide massiiv
plugins - dokumendi plug in objektide massiiv
saame kasutada analoogiliselt omadusele images.
Omadus
formname - vormi nimi
on olemas ainult nime omava vormidel
domain - määrab serveri domeeni (võrgu
alampiirkonna) nime
referrer - string, mis määrab väljakutsuva
dokumendi URL-i
cookie - määrab kliendipoolse “küpsise”
Järgmisi omadusi saame kasutada ka dokumenti
muutmiseks
title - string, mille väärtuseks on
dokumendi pealkiri
linkColor - lingi värv (HTML-s määratakse atribuudiga
LINK)
vlinkColor - külastatud lingi värv (HTML-s määratakse
atribuudiga VLINK)
alinkColor -
aktiivse lingi värv (HTML-s määratakse
atribuudiga ALINK)
bgColor - tausta värv (HTML-s määratakse atribuudiga
BGCOLOR)
fgColor - teksti värv (HTML-s määratakse atribuudiga
TEXT)
Nende omaduste kasutamine on väga lihtne
(document.bgColor=”green” jne.),
keerulisem on omaduse cookie kasutamine.
Näide 4 : Teeme kliendipoolse “küpsise”
Kliendipoolse cookie kasutamise eesmärk on
informatsiooni säilitamine kliendi arvutis.
Teeme ühes dokumendis (yks.html) cookie, mille
väärtuseks on vormi abil sisestatud eesnimi ja sugu. Kõigepealt teeme kuupäeva
objekti (lopp_aeg), mille väärtuseks valime käesolev aeg +1 kuu. Seejärel
paneme cookie paika funktsiooni teeme_cookie() abil
<head>
<title>Untitled</title>
<script
language="javascript" >
document.bgColor="#7df9ec"
lopp_aeg=new Date();
lopp_aeg.setMonth(lopp_aeg.getMonth()+1)
eesnimi="";
sex="";
function teeme_cookie()
{
eesnimi=document.vormike.eesnimi.value
for (i=0; i<document.vormike.sex.length; i++){
if(document.vormike.sex[i].checked)
sex=document.vormike.sex[i].value }
document.cookie="nimi="+eesnimi+";expires="+lopp_aeg.toGMTString()
document.cookie="sex="+sex+";expires="+lopp_aeg.toGMTString()
}
</script> </head>
Nagu näha tuleb cookie
kehtivuse aeg anda ette GMT stringi kujul, kuid vastav meetod on string
objektil olemas.
Sama dokumendi body osas on
vorm kuhu nime ja soo valiku täidame
<form name="vormike">
<p>Sisestage Eeesnimi:
<input type="text" name="eesnimi"><br>
<input type="radio" name="sex" value="Pr.">Naine
<input type="radio" name="sex" value="Hr.">Mees<br>
<a href="kaks.html" onclick="teeme_cookie();">
Järgmine lehekülg, millel kasutame cookie abil salvestatud infot </a>
</p> </form>
Dokumendis “kaks.html” kasutame cookie sisu.
Väljastame akna staatuse ribale tervituse võttes cookie seest eesnime(sisestati
eelmise dokumendi form elemdi abil) ja soo valiku. Esialgu jagame cookie
maasiiviks kasutades eraldajana semikoolonit (string objekti meetod split).
Saame kaks massiivi elementi millest esimene vastab nimele ja teine soole.
Seejärel jagame saadud massiivi elemendid omakorda massiivideks kasutades
eraldajana võrdusmärki. Nii saame kätte nime ja soo väärtused, mille väljastame
akna staatuse ribale
<head>
<title>Cookie kasutamine
</title>
<script language="javascript">
function kasuta_cookiet(){
if (document.cookie!="")
{ c0=document.cookie.split(";")[0];
c1=document.cookie.split(";")[1];
nimi=c0.split("=")[1]
hr_pr=c1.split("=")[1]
}
window.status="Tere "+hr_pr+nimi
}
</script>
</head>
Märgime, et pole oluline kas
dokument “kaks.html” avatakse viida abil dokumendist “yks.html” või kuidagi
teisiti ikkagi same kasutada kehtivat (s.t. kehtivuse aeg pole ümber)
cookiet. Kui on soov cookie-t tühistada, siis võib teha samade parameetritega
cookie panes expires väärtuseks antud hetkest vanema aja. Antud näiteabi saime
teada kuidas infot salvastada kliendi arvutisse cookie abil ja kuidas infot
cookie-st kätte saada. Me salvestasime info ühes dokumendis cookie abil ja
kasutasime teises. Samahästi võime salvestadada mingit serverist saadud
informatsiooni (andmebaasist või failist), et seda teatud aja jooksul kasutada.
Objekt document meetodid:
write(avaldis) - HTML teksti (avaldiste) kirjutamiseks
etteantud aknasse
writeln(avaldis) -
HTML teksti (avaldiste) kirjutamiseks etteantud aknasse koos järgva
reavahetusega
open() -
väljundvoo avamiseks write ja writeln jaoks
close() -
väljundvoo sulgeseks, write ja writeln täitmine forseeritakse
captureEvents(events) -
document käsitleb etteantud sündmusi (event)
handleEvent(event) -
document käsitleb etteantud sündmust (event)
routeEvent(event) -
sündmus (event) läbib sündmuste heirarhia
releaseEvents(events) -
sündmuste (events) käsitlemine lõpeb
getSelection() - tagastab stringi, mille
sisuks on märgitud (valitud) tekst
7.
Klient-server rakendused
Vaatamata asjaolule, et valdavalt kasutatakse Javascripti kliendipoolsete (client
side) lahenduste realiseerimiseks on väga oluline tutvuda klient-serveri
rakendustega. Muidu on raske saada ülevaadet klient – serveri vahelisest
suhtlemisest, mis kogu WWW aluseks. Et serveripoolne javascripti kasutamine
pole kuigi populaarne (on võimalik, aga nõuab Netscape LiveWire-t), siis
kasutame serveris PHP programmi. PHP keelel on väga palju sarnasusi
Javascriptiga. PHP keele õppimisega selle kursuse raames sisuliselt me ei
tegele, selgitame vaid vajaminevaid lauseid (konstruktsioone). Eeldame, et
apache server ja PHP on installeeritud serverisse mida te kasutate. Juhul kui
pole on võimalik apache ja samuti PHP internetist maha laadida (tasuta
tarkvara) ning installeerida näiteks kliendi arvutisse(operatsioonisüsteem
unix, Nt või win2000). Sellisel juhul on teil server ja klient füüsiliselt
samas arvutis aga see ei takista klient serveri rakenduste koostamist. Üks väga
lihtne võimalus on installeerida phptriad (apache+php+mysql), mis ei vaja
konfigu-reerimist ja töötab ka Win98-s ja WinMe-s.
Näide 1: Salvestame vormi väljad serverisse faili.
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.v60{position:absolute;left:60}
</style>
</head>
<body bgcolor="#f8a9fe">
<?php
$faili_nimi="andmed1.txt";
if($kontroll==” Y”){
$str=$nimi."\t".$vanus."\t".$email."\n";
$f1=fopen($faili_nimi, 'a+');
if($f1!=0){
fwrite($f1,$str);
fclose($f1);
}
}
?>
<form action="andm_faili.php">
Nimi: <span class="v60"><input type="text" name="nimi"></span><br>
Vanus: <span class="v60"><input type="text" name="vanus"></span><br>
E-mail: <span class="v60"><input type="text" name="email"></span><br>
<input type="hidden" name="kontroll" value="Y"><br>
<input type="submit" value="Saada
salvestamiseks">
</form>
</body>
</html>
Kuna
vormi enda tegemine on eelnevast tuttav , siis uueks on tagide <?php ja
?> vahele java php kood. Nagu näha on PHP-s iga muutuja esimeseks sümboliks
$. Muutuja $kontroll abil kontrollitakse kas lehekülg avatakse vormi täitmise
tulemusena (siis on vaja lisada vormi sisu faili) või lihtsalt sisestades URL
(andmeid pole vaja salvestada). Punkti kasutame muutujate liitmiseks üheks
stringiks (konkatenatsioon). Fail avatakse käsuga fopen, esimeseks argumendiks
on faili nime sisaldav muutuja, teiseks string, mis määrab faili kasutamise
tingimused
a+ tähendab, et fail avatakse lugemiseks ja
kirjutamiseks (lisamiseks), aktiivse asukohaga faili lõpus. Kui vastava nimega
faili pole olemas, siis tehakse tühi fail.
Stringi
kirjutamiseks faili kasutame fwrite käsku (string on teine argument). Fail
suletakse fclose abil.
Näide 2: Loeme serveris olevast failist andmed ja kuvame nad lihtsalt
ekraanile.
Et dokumendi päise osa (head) on sama, mis eelmises näites siis tome ainult
body sisu.
<body bgcolor="#f8a9fe">
<?php
$faili_nimi="andmed1.txt";
if($kontroll=="Y"){
$f1=fopen($faili_nimi, 'r');
if($f1!=0){
while($rida=fscanf($f1,"%s\t%s\t%s\n")){
list($nimi,$vanus,$email)=$rida;
echo "nimi=".$nimi." vanus=".$vanus."
email: ".$email."<br>";
}
fclose($f1);
}
}
?>
<form name="vorm" action="andm_failist1.php">
<input type="hidden" name="kontroll" value="Y"><br>
<input type="submit" value="Andmed failist
ekraanile">
</form>
</body>
Failist lugemine toimub käsuga
fscanf, kus esimeseks argumendiks on faili nime sisaldav muutuja ja teiseks
formaadistring. %s tähendab stringi tüüpi muutujat, \t on tabulatsioon ja \n on
reavahetus. Tulemuseks same massiivi nimega $rida. Käsuga list eraldame
muutujad massiivist: $nimi saab esimese elemendi väärtuse, $vanus teise jne.
Tulemused väljastame käsu echo abil.
Näide 3: Loeme serveris olevast failist andmed ja kuvame nad lihtsalt
ekraanile. Seekord kasutame failist lugemiseks käsku fgetcsv, loeme count käsu
abil igale reale vastava muutujate (elementide) arvu kokku ning väljastame
ekraanile
<body bgcolor="#f8a9fe">
<?php
$faili_nimi="andmed1.txt";
if($kontroll=="Y"){
$f1=fopen($faili_nimi, 'r');
if($f1!=0){
while($rida=fgetcsv($f1,500,' ')){
$arv=count($rida);
for($i=0;$i<$arv;$i++)
echo $rida[$i]."\t";
echo "<br>"; }
fclose($f1);
}
}
?>
<form name="vorm" action="andm_failist1a.php">
<input type="hidden" name="kontroll" value="Y"><br>
<input type="submit" value="Andmed failist
ekraanile">
</form>
</body>
Näide 4: Kui on vaja mõne php
muutuja väärtust kasutada formi elemendi sees, siis võib vastavasse kohta
kirjutada php programmi lõigu. Näiteks kui meil on vaja muutuja $nimi
algväärtusena kasutada eelmisel korral serverisse saadetud väärtust (või muuud
serverist võetud väärtust) siis toimime nii
<input type="text" name="nimi" value=”<?php echo $nimi; ?>”>