Kliendipoolse JavaScript'i lühikonspekt (0)

14
Kliendipoolse JavaScript 'i lühikonspekt
Sissejuhatus JavaScript'i 1
1. JavaScript'i olemus 1
2. JavaScript'i versioonid 3
Tuum-JavaScript 3
1. Leksikaalne ehitus 3
2. Andmetüübid 4
3. Muutujad 4
4. Avaldised ja operaatorid 5
6. Funktsioonid 8
7. Objektid 8
8. Jadad 9
1. Veebibrauseri programmeerimiskeskkond 9
2. JavaScript'i lisamine HTML dokumenti 10
3. JavaScript'i programmi täitmine 13
Õpetus eeldab lugejalt baasteadmisi HTML-keelest ning elementaarseid teadmisi veebist ja selle töötamisprintsiipidest.
Konspekt koosneb kolmest osast:

• "Sissejuhatus JavaScript'i", tutvustab lühidalt JavaScript'i olemust. Kirjeldatakse JavaScript'i keele osasid ja on toodud tabel, kus on näha, milliste Netscape brauseri versioonidel töötavad erinevad JavaScript'i versioonid.
  
• "Tuum-JavaScript", kirjeldab JavaScript'i keele süntaksit.
  
• "JavaScript veebibrauseris e. kliendipoolne JavaScript", annab ülevaate, kuidas JavaScript töötab veebibrauseris. Selgitatakse, kuidas töötab veebibrauseri programmeerimiskeskond, kuidas JavaScript'i lisada HTML dokumenti ning kuidas toimib JavaScript'i programmi täitmine.
  

Sissejuhatus JavaScript'i

Esimene lahendus veebilehekülgede koostamiseks oli HTML (HyperText Markup Language ). HTML võimaldas veebilehekülgede autoritel koostada struktureerituid lehekülgi tekstiga , piltidega ja linkidega, staatilise informatsiooni edastamiseks. Kuna veebi populaarsus kasvas, ei piisanud enam tava-HTML'st, tekkis vajadus suurema dünaamilisuse järele - vajadus interaktiivse suhtlemise järele klientidega. Üks lihtsamaid programmeerimiskeeli interaktiivse veebilehe koostamiseks on kliendipoolne JavaScript (client-side JavaScript).
Kliendipoolne JavaScript on loodud Netscape Communications Corp. poolt, mis lasti turule 1995 aasta detsembris algse nimega LiveScript (mis muudeti ümber turunduslikel põhjustel).

1. JavaScript'i olemus

JavaScript on objekt-orienteeritud võimalustega programmeerimiskeel, mille abil on lihtne luua interaktiivseid veebi-lehekülgi.Ta on interpreteeritav, mis tähendab, et erinevalt paljudest teistest programmeerimiskeeltest ei ole JavaScript'i koodi vaja eelnevalt kompilleerida, skript käivitub koheselt veebilehekülje üleslaadimisel. Ta on sisseehitatud brauserisse ja töötab koos HTML'ga.
JavaScript'i keel koosneb kolmest osast: tuum-JavaScript (core JavaScript), kliendipoolne JavaScript (client-side JavaScript) ja serveripoolne JavaScript ( server -sideJavaScript).
Tuum-JavaScript koosneb kolmest põhiobjektidest ( Array , Date , Math) ning programmeerimiskeele põhielementidest, milleks on operaatorid (+, -, /, *,, jne), kontrollstruktuurid (continue, break, jt.) ja laused (if... else , switch, while , do...while, for, jt). Kliendipoolne JavaScript ja serveripoolne JavaScript kasutavad samu tuum-JavaScript'i programmeerimiskeele põhielemente. Joonisel 1 on näha millistest JavaScript'i keele osadest koosneb kliendipoolne ja serveripoolne JavaScript.
Joonis 1. JavaScript'i keele osad.
Kliendipoolne JavaScript'i programm kirjutatakse HTML dokumeti (kuidas programmi HTML dokumenti kirjutada vaatleme hiljem). Interpretaator, mis kliendipoolset skripti tõlgendab e. interpreteerib asub veebibrauseris. Kui brauser (või klient) nõuab lehekülje avamist , mille HTML dokument sisaldab kliendipoolset JavaScript'i programmi, saadab server nõutava lehekülje sisu. Kliendile edastatakse HTML'i tulemus, mille kuvamist brauseriaknasse alustakse dokumendi algusest ning dokumendis sisalduvad JavaScript'i programmid interpreteeritakse selles järjekorras nagu nad HTML dokumendis esinevad. Kliendipoolne JavaScript täiendab põhi JavaScript'i lisades objekte, et kontrollida brauserit ja tema dokumendi objekti mudelit (DOM). Kliendipoolsete laienduste abil saab HTML vormi (form) lisada elemente ja reageerida kasutaja sündmustele nagu hiire klik , vormi sisend (form input) ja lehe navigatsioon .
Serveripoolne JavaScript kirjutatakse samuti HTML teksti. Dokumendis sisalduva serveripoolse Java - Script 'i programmi täidab server ja saadab tulemusdokumendi tagasi kliendile. Serveripoose JavaScript'i abil on võimalik suhelda relatsiooniliste andmebaasidega, saab jagada informatsiooni kasutajate vahel, on võimalik ligipääseda serveri failisüsteemi. HTML leheküljed, mis sisaldavad serveripoolseid JavaScript'e võivad sisaldada ka kliendipoolseid JavaScript'e. Rohkem informatsiooni serveripoolse JavaScript'i kohta leiab aadressilt: [ http://developer.netscape.com/docs/manuals/index.html?content=javascript.html ]

2. JavaScript'i versioonid

Kuna JavaScript-i on aegade jooksul uuendatud ja täiendatud, siis on saadaval erinevaid JavaScript-i versioone, mis ei tööta kõigi brauseritega. Järgnevas tabelis on näha, milliseid erinevaid Client-Side JavaScript-i versioone toetavad Netscape Navigator-i ja Microsoft Internet Explorer -i erinevad versioonid.
JavaScript-i versioon
Netscape Navigator
Microsoft Internet Explorer
JavaScript 1.0
Netscape Navigator 2.0
Microsoft Internet Explorer 3.0
JavaScript 1.1
Netscape Navigator 3.0
 
JavaScript 1.2
Netscape Navigator 4.0-4.05
Microsoft Internet Explorer 4.0
JavaScript 1.3
Netscape Navigator 4.06-4.5
 
JavaScript 1.5
Netscape Navigator 6.0
Microsoft Internet Explorer 6.0
Põhjalikumat informatsiooni erinevat JavaScript'i versioonide kohta leiate esileheküljelt, punkti alt "Kasulikud leheküljed" Dokumentatsioonide alt.

Tuum-JavaScript

Igal programmeerimiskeelel on oma reeglistik, kuidas programmi kirjutada. Järgnev peatükk annab ülevaate, milline on JavaScript'i leksikaalne ehitus ja millised on selle programmeerimiskeele elemendid.

1. Leksikaalne ehitus

Programmeerimiskeele leksikaalne ehitus määrab ära elementaarsed reeglid, kuidas kirjutada programmi koodi konkreetses keeles, antud juhul on keeleks JavaScript.
Näiteks, kuidas tuleb kirja panna muutujaid, milliseid märke kasutatakse kommentaaride märkimiseks, kuidas on üks programmi avaldis või lause eraldatud teisest.
JavaScript on tõstutundlik, mis tähendab ,et keele reserveeritud sõnade, muutujate, funktsiooni nimede kirjutamisel on oluline suur ja väike täht.
Näiteks reserveeritud sõna while, peab kirjutama väikeste tähtedega "while", mitte "While" või "WHILE".
Mittekohustuslik semikoolon. JavaScripti avaldsitele tavaliselt järgneb semikoolon (;) nagu ka programmeerimiskeeltes C, C++ ja Java. Semikooloni abil eristatatakse üksteisest avaldisi ja lauseid .
JavaScriptis ei ole semikooloni kirjutamine alati vajalik. Näiteks kui avaldised või laused on kirjutatud eraldi reale siis ei ole semikoolonit vaja, järgneva koodi võib kirjutada ka ilma semikooloniteta:
x = 1;
y = 6;
Aga kui avaldised või laused on kirjutatud üksteise järgi, siis on semikooloni kirjutamine vajalik:
x = 1; y = 6;
Kommentaarid. Tekst peale märke // kuni rea lõpuni, loetakse kommentaariks , mida JavaScript ignoreerib. Kommentaar on programmeerija enda jaoks. Teine kommentaaride märkimise võimalus on kirjutada kommentaar märkide /* ja */ vahele.
//Ühe realine kommentaar.
/*Samuti kommentaar*/
x = 4; //kommentaar
y = 5;
* Mitme realine
* kommentaar
Reserveeritud sõnad. Reserveeritud sõnad on sõnad, mida ei tohi kasutada muutujate ega funktsioonide nimedena, oma JavaScript'i programmis . Need on sõnad, millel on JavaScript'il kindel tähendus. Näiteks nagu if, else, for, var, function , jne. Põhjalikumat informatsiooni nede sõnade kohta saate Netscape'i veebileheküljelt mõne JavaScripti versiooni dokumentatsioonist, kus on olemas eraldi peatükk "Resreved words ".

2. Andmetüübid

JavaScript lubab töötada kolme andmetüübiga, milleks on arvtüübid ( numbers ), sõned ( string ) ja tõevaartused (boolean).
Arvtüübid. JavaScript's ei eristata eraldi täis arve ja uju-punkt arve nagu seda tehakse C-s ja Javas-s. Kõik numbrid on esitatud uju-punkt arvudena.
Sõne on järjestik tähtedest, numbrimärkidest, kirjavahemärkidest jne. Sõne on andmetüüp teksti esitamiseks . Igas sõnes asuvale sümbolile (tähele, numbrile, kirjavahemärgile) vastab üks täisarvuline number e. järjekorranumber, mida nimetatakse indeksiks. Indekseid hakkatakse lugema alates nullist. Sõne pikkuseks on sümbolite arv sõnes.
Tõeväärtus. Arvtüübi ja sõne andmetüübil on võimalike väärtuste arv lõpmatu. Tõeväärtuse andmetüübil on ainult kaks võimalikku väärtust, milleks on true ja false , kas midagi on tõene (true) või väär (false).
Tõeväärtus on tavaliselt mõne võrdluse tulemus. Näiteks:
x == 1
See kood testib, kas muutuja x väärtus on võrdne 1-ga. Kui on võrde ühega siis tõeväärtuse väärtuseks on true. Kui ei ole 1-ga võrdne, siis on võrdluse tulemuseks false.
Tõeväärtusi kasutatakse tavaliselt JavaScript'i kontrollstruktuurides. Näiteks if/else lauses :
if (x == 3)
y = y + 1;
else
x = x + 1;
Kood kontrollib, kas x võrdub 3-ga. Kui võrdub siis võrdluse (x == 3) väärtuseks on true ning y -i väärtus suureneb ühe võrra. Vastasel juhul saab võrdlus (x == 3) väärtuseks false (x ei võrdu 3-ga) ning sel juhul suurendatakse x -i väätrust 1 võrra.

3. Muutujad

Muutuja on nimi, mis on ühendatud andme väärtusega; ütleme, et muutuja "salvestab" või "sisaldab" väärtust. Muutujate abil saab programmis andmeid säilitada ja nendega manipuleerida . Näiteks järgmise reaga omistatakse muutujale i väärtuseks 2:
i = 2;
ning järgmise reaga liidetakse muutujale i arv 3 ja omistatakse see uuele muutujale nimega summa, mille väärtuseks saab 5:
summa = i + 3;
Muutuja deklareeimine. Enne muutuja kasutamist JavaScript'i programmis, tuleb see eelnevalt deklareerida. Muutujaid deklareeritakse reserveeritud sõnaga var, näiteks:
var i;
var summa;
Muutujaid võib deklareerida ka sama var sõnaga:
var i, summa;
Muutuja deklareerimisel võib samas ka muutujale omistada väärtuse:
var i = O;
var tekst = "tere";
Defineerimata muutujad. On kahte liiki defineerimata muutujaid. Üks liik defineerimata muutujaid on sellised, mis ei ole kunagi deklareeritud . Sellise muutuja lugemine tekitab vea. Kui aga deklareerimata muutujale omistada väärtus, siis deklareeritakse ka muutuja ja viga ei teki.
alert(x); //Kasutades deklareerimata muutujat tekib viga.
x = 7; //Deklareerimata muutujale omistatakse väärtus ja seega deklareeritakse ka muutuja.
Teist liiki defineerimata muutujad on muutujad, mis on deklareeritud, kuid millele ei ole omistatud väärtust.
var x; //Deklareeitakse muutuja, mille väärtus on määramata.

4. Avaldised ja operaatorid

Avaldise mõiste selgitamiseks toome mõned näited. Lihtsamad avaldised on literaalid (mõni konkreetne väärtus, näiteks mõni sõne või arv) või muutuja nimi:
56 // arvuline literaal
false // loogikaväärtuse literaal
x // muutuja x
Kahe esimese ehk konstantse avaldise väärtuseks on konstant ise. Muutuja väärtuseks on väärtus, mis on omistatud vastavale muutujale. Järgmine rida on samuti avaldis:
x + 56
Selle avaldise väärtuseks on avaldiste x ja 56 väärtuste summa.
Operaator on avaldises arvutuslikku tehet tähistav märk. JavaScript'i operaatorid on sarnased Java ja C keele operaatoritega.
Aritmeetika operaatorid. Aritmeetilised operaatorid on:
+ - liitmine ja sõnesidurdus;
- - lahutamine;
* - korrutamine;
/ - jagamine;
% - jäägi leidmine;
++ - järel- või eel-ühikusuurendamine;
-- - järel- või eel-ühikuvähendamine.
Võrdsus operaatorid. Operaatorid, mis võrdlevad avaldiste väärtuste võrdsust ning tagastavad tõeväärtustüüpi väärtuse (true või false) olenevalt võrdluse tulemusest. Nendeks operaatoriteks on:
== - võrdub (kahe avaldise väärtuse võrdsuse kontrollimiseks);
!= - ei võrdu (eelmise vastand);
Võrdlusoperaatorid. Operaatorid, mis võrdlevad avaldiste väärtuseid ning tagastavad tõeväärtustüüpi väärtuse (true või false) olenevalt võrdluse tulemusest. Võrdlusoperaatorid on:
> - on suurem, kui;
= - on suurem või võrdne.
Loogilised operaatorid. Neid operaatoreid kasutatakse sageli koos võrdlusoperaatoritega, ühendamaks liit-võrdlusi, mis sisaldavad rohkem kui ühte avaldist , mida tavaliselt kasutatakse if, while ja for lausetes . Tagastatakse tõeväärtustüüpi väärtus (true või false). Loogilised operaatorid on:
&& - loogiline "ja" (true, kui mõlemad väärtused on tõesed);
|| - loogiline "või" (true, kui vähemalt üks väärtustest on tõene);
! - loogiline "ei" (pöörab operandi väärtuse vastupidiseks).
5. Laused
JavaScripti programm koosneb lausetest, mis tavaliselt lõppevad semikooloniga. Kui laused on kirjutatud eraldi ridadele, siis semikooloni kirjutamine pole vajalik. Kuid on hea harjumus kirjutada semikoolon iga lausese lõppu.
Vaatleme erinevaid lauseid ja nende süntakseid.
if lause. if lause on kontroll lause, mis lubab JavaScript'il lause sooritamist tigimuslikult. Sel lausel on kaks kuju. Esiteks:
if (tingimusavaldis)
lause1
tingimusavaldiseks on võrdlus, mille väärtuseks on kas true või false. Kui võrdluse tulemus on tõene siis on väärtuseks true ja täidetakse lause1. Vastasel juhul on tingimusavaldise väärtuseks false ning lauset lause1 ei täideta. Näiteks:
if (x == 0) // Kui muutuja x väärtus on 0,
x = 1; // siis omistada x -i väärtuseks 1.
Kui lauseid on rohkem kui üks, siis tuleb asetada need loogeliset sulgude vahele:
if (tingimusavaldis);
Olem võib sisaldada mitut JavaScript'i lauset, mida eraldatakse semikoolinitega. HTML teksti läbimisel olem asendatakse tema väärtusega. JavaScript'i olemi väärtuseks on selle olemi viimase JavaScript'i lause või avaldise väärtus, mis on konverteeritud sõneks. JavaScript'i olemit toetavad versioonid alates JavaScript 1.1'st.

Alates versioonist JavaScript 1.2 võib JavaScript'i olemit kasutada HTML komnetaari süntaksiga, mida nimetatakse tingimuskommentaariks. Kui olemi avaldise väärtus on tõene (true), siis ignoreeritakse kommentaare ja läbitakse komentaari sisu. Kui avaldise väärtus on väär (false), siis tõlgentatakse komentaare kommentaarina ja ignoreeritakse komentaari sisu. Tingimuskommentaari abil saab kirjutada JavaScript'i koodi, mis käivitub ainult platvormil, mis seda koodi toetab. Näiteks, all olev skript käivitub ainult siis, kui navigator. platform omadus on võrdne sõnega "win95" (st. kui töötatakse Windows 95 brauseril):

Erinevad brauserid ja erinevad brauseri versioonid tunnistavad erinevaid JavaScript'i versioone. Vanemad brauserid, kes üldse JavaScript'i ei tunnista, ei tunnista märgendeid. Brauser lihtsalt ignoreerib neid ja väljastatab kogu skripti koodi tavalise tekstina veebilehele. Selle vältimiseks tuleb kogu skript kirjutada HTML kommentaari märkide vahele.
HTML kommentaari märgid ei mõjuta skripti interpreteerimist, kui on tegu brauseriga, mis tunnistab skripti märgendeid. Sel juhul kuuluvad HTML kommentaari märgid skripti sisusse ja kuna JavaScript'l on komentaaride märkimiseks omad tähised, seega skripti koodi interpreteerimisel HTML kommentaari märke ei arvestata.

3. JavaScript'i programmi täitmine

Eelmises osas näidati seitse võimalust, kuidas JavaScript'i programmi lisada HTML faili. Selles osas vaatleme, kuidas HTML teksti sisestatud JavaScript'i interpretaatori poolt teostatakse. JavaScript'i laused, mis asuvad ja märgendite vahel täidetakse selles järjekoorras nagu nad esinevad HTML failis. Kui failis on rohkem, kui üks skript, siis täidetakse need samuti selles järjekorras nagu nad failis esinevad. Sama reegel kehtib skriptide kohta, mis HTML tekstis on eraldi failidena SRC atribuudiga.
Skripti täitmine toimub veebibrauseri HTML töötlemis (parrsimis) protsessis. Kui skript asub HTML dokumendi päises, siis selle skripti täitmisel ei ole veel defineeritud skripte, mis asuvad dokumendi põhiosas (). See tähendab, et JavaScript'i objektid, mis on kuuluvad dokumendi põhiosa sisusse (nt. Form) ei ole veel loodud ja päises olev skript ei saa nende objektidega manipuleerida. JavaScript'i laused, mis on ja märgendite vahel, täidetakse samamoodi nagu lauseid, mis asuvad märgendites.
Programmeerija enda defineeritud funktsioonide puhul tuleb tähelepanna, et need oleks defineeritud enne, kui neid esile kutsutakse (käivitatakse). Samuti peab tähelepanema, et funktsiooni ei hakata täitma enne, kui funktsioonis kasutatavad muutujad, objektid, jne. eksisteerivad.
JavaScript'i programmilõik, mis on javascript: URL'na ei täideta enne, kui on laetud dokument, mis seda URL'i sisaldab.Sageli javascript: URL'd võrduvad sündmuskäsitlejatega ja töötavad koos sündmusekäsitlejaga. Neid programmilõike võidakse käivitada enne, kui dokument täielikult laetud. Sel juhul peab tähelepanema, et see programmilõik ei sisalda objekte (või funktsioone), mis ei ole veel defineeritud.
JavaScript'i olemid, mis on kasutatud HTML atribuudi väärtusena või tingimuskommentaari osana, väärtustatakse HTML töötlemisprotsessi osana. Juhul, kui olemis olev JavaScript'i programmilõigu väärtus saab HTML teksi osaks, sõltub HTML töötlemisprotsess JavaScript'i interpretaatorist.
14