Download presentation
Presentation is loading. Please wait.
1
JavaScript kalbos apžvalga
V.Jasiūnas
2
Kas yra JavaScript? JavaScript yra interpretuojama objektiškai orientuota kalba, kuri gali būti naudojama tinklalapių interaktyvumui padidinti. Svarbu skirti JavaScript ir Sun Microsystems sukurtą JAVA programavimo kalbą. Tai visai skirtingos kalbos. JAVA yra išsami programavimo kalba, kuri gali būti panaudota tiek www, tiek savarankiškoms taikomosioms programoms kurti. JavaScript yra tik nedidelė aprašomoji (scripting) kalba, tarnaujanti kaip www naršyklės priedas. JavaScript kilo iš Netscape kompanijoje sukurtos aprašymo kalbos, pavadintos LiveScript. Kai kurių bazinių jos elementų sintaksė ir struktūra panaši į JAVA. Šių panašumų dėka 1995 metais Sun oficialiai pripažino šią kalbą ir tam pažymėti Netscape pervadino LiveScript į JavaScript.
3
JavaScript kalbos privalumai (1)
Lyginant su tokiomis programavimo kalbomis kaip JAVA, JavaScript nėra galingas įrankis. Tačiau tam tikrais atvejais jis yra patogus ir turi keletą privalumų prieš kitas, galingesnes kalbas. Trumpas kūrimo laikas - tokie objektai kaip dialogo langeliai, formos ir generuotas HTML kodas yra apdorojami www naršyklėje. Lengva išmokti - JavaScript santykinai paprasta ir todėl lengvai išmokstama kalba, ypač tiems, kas turi šiek tiek programavimo patirties.
4
JavaScript kalbos privalumai (2)
Nepriklausoma nuo platformos - daugumą programavimo kalbų kompiliatorių pritaiko tik tam tikros operacinės sistemos. Kadangi JavaScript yra interpretuojama kalba, jos kodą vykdo www naršyklė. Tai daro JavaScript nepriklausomą nuo naudojamos kompiuterinės platformos. Programos dydis - JavaScript programos paprastai yra žymiai mažesnės nei kompiliuojamos programos. Parsisiuntimo laikas - kadangi JavaScript programos paprastai yra www tinklalapio dalis, jos nereikalauja atskiro prisijungimo prie interneto.
5
JavaScript kalbos objekto modelis
JavaScript objektiškai orientuota (objektine) kalba vadinama gana laisvai. Terminas „objektiškai orientuota“ yra vienas dažniausiai naudojamų kompiuterių industrijoje, juo dažnai ir piktnaudžiaujama. Daug kalbų vadinamos objektinėmis, bet tik keletas iš jų tokios yra iš tikrųjų. Dauguma šios rūšies kalbų yra arba iš dalies objektinės, arba tarpinės tarp objektiškai orientuotų ir procedūrinių kalbų.
6
Objektiškai orientuotos kalbos
Jų pagrindą sudaro objektai. Objektai naudojami informacijos organizavimui. Kiekvienas objektas turi eilę savo savybių (atributų) bei eilę metodų, kuriuos naudojant galima manipuliuoti kiekvienos objektų klasės savybėmis. Tai Jus trikdo? Galima pridurti dar ir tą faktą, kad kiekvienam objektui jūs galite sukurti daug konkrečių realizacijų ir kad kiekvienas objektas gali turėti objektus-tėvus ir objektus-vaikus, o objektai-vaikai gali paveldėti iš objektų-tėvų, ir jūs turėtumėt...
7
Procedūrinės programavimo kalbos
Tai yra tokios kalbos kaip C, Pascal, COBOL, BASIC ir FORTRAN. Jose informacija (duomenys) ir procedūros yra atskirtos. JavaScript negali būti vadinama procedūrine kalba, ji yra objektiškai orientuota, bet ne pilna šio termino prasme. JavaScript palaiko objektus, savybes ir metodus. Taip pat galima kurti objektų realizacijas (pavyzdžius), tačiau JavaScript'e nėra klasių sistemos. Tad JavaScript nepalaiko ir paveldėjimo. JavaScript naudoja objektiškai orientuotą modelį, atsisakydama sudėtingų šio modelio dalių. Todėl ji yra labai lengvai išmokstama ir suprantama. Iš esmės galima rašyti JavaScript programas ir labai mažai žinant apie objektus.
8
Kur patenka JavaScript'o kodas
JavaScript'o programos yra įtrauktos į HTML dokumentus. Tam naudojamas <script> </script> žymėmis išskirtas konteineris. Tokiu būdu paprasčiausiai viskas, kas yra tarp šių dviejų žymių, traktuojama kaip JavaScript programos dalis. <script type="text/javascript"> Čia eina JavaScript kodas </script> Šiame pavyzdyje taip pat apibrėžiamas kalbos atributas, nurodantis ne tik JavaScript kalbą palaikančioms naršyklėms, kokios kalbos kodas čia pateiktas. Šis konteineris gali būti bet kurioje jūsų HTML failo vietoje. Kodo vieta paprastai yra tarp <head> </head> žymių, nors kartais aprašai (scripts), kad būtų efektyvūs, turi būti tam tikroje konkrečioje HTML dokumento vietoje. Tai matysime pirmajame pavyzdyje 2.3 sekcijoje. Be to, viename www dokumente gali būti kelios JavaScript programos. Kiekviena jų turi būti atskirame <script> </script> konteineryje.
9
Nepalaikančios naršyklės
Nors JavaScript yra plačiai paplitusi ir jau betampanti standartine www aprašų kalba, žinoma yra naršyklių, kurios jos nepalaiko. Tokios yra senos naršyklės, dar tebenaudojamos daugelio žmonių ir organizacijų. Šios naršyklės ignoruos žymes <script> ir </script>, o tarp jų esantį JavaScript kodą traktuos kaip įprastą HTML tekstą, pateikdamos jį kaip www dokumento dalį. Norint to išvengti, galima <script> </script> konteinerio turinį pakomentuoti taip: <script type="text/javascript"> <!-- Hide the JavaScript from non-supporting browsers Čia eina JavaScript kodas // Stop hiding the JavaScript code --> </script> Nepalaikančioms naršyklėms tai atrodys kaip komentaro žymė (kurio turinys bus ignoruojamas) ir dvi nepažįstamos žymės (kurios taip pat ignoruojamos). Naršyklės, kurios palaiko <script></ script> konteinerį, žino šią gudrybę ir ignoruos komentaro žymę, turinį traktuodamos kaip vykdymui skirtas komandas.
10
Pirmasis JavaScript scenarijus
Šalia pateiktas HTML dokumentas turi savyje paprastą JavaScript kodą. Viskas ką pastarasis daro, tai išveda į ekraną vieną teksto eilutę. Šiame pavyzdyje nėra jokių niuansų, jis tik iliustruoja, kaip JavaScript kodas yra įterpiamas į standartinį HTML dokumentą. <html> <head> <title>My first JavaScript</title> </head> <body> <h1 >Welcome to my Web Page</h1 > <hr> The next line of text is generated by JavaScript!<br> <script type="text/javascript"> <!-- hide the JavaScript document.writeln("Hello World!"); // Unhide the rest --> </script> </body> </html> Taip pat galite pastebėti, kad jis vykdomas pradedant nuo tos pozicijos, kurioje yra pats kodas, ir HTML tekstas prieš tai ir po to yra nepakeičiamas.
11
Komentarai Jūsų kode (1)
Kaip ir kitose programavimo kalbose, gera programavimo praktika laikomas kodo komentavimas. Tai leidžia trumpai charakterizuoti tam tikros kodo dalies funkcijas, nurodyti galimus pasikeitimus bei pateikti kitą svarbią informaciją. Tokie komentarai nematomi www tinklalapyje, bet gali labai praversti ateityje, kai Jūs ar kas nors kitas turės peržiūrėti ir modifikuoti šį kodą.
12
Komentarai Jūsų kode (2)
Yra daug būdų komentarams įdėti. Pačiame HTML dokumente <!-- --> žymėmis apibrėžtas konteineris leidžia patalpinti į jį Jūsų komentarą. JavaScript prideda dar du metodus. Pirmas naudoja du pasviruosius brūkšnius eilutės pradžioje, kaip parodyta čia: // tai yra JavaScript komentaras!
13
Komentarai Jūsų kode (3)
Antrasis pasiskolintas iš C programavimo kalbos ir atrodo taip: /* Tai yra ne vienos eilutės JavaScript komentaras */ Jūs patys galite pasirinkti kokį metodą naudoti. Galima tik patarti, kad pirmasis būdas tinka vienos eilutės komentarui, o antrasis leidžia pateikti daug komentaro teksto eilučių.
14
JavaScript komandų sintaksė
Bazinė komandos konstrukcija JavaScript kalboje - tai vienos eilutės komanda ar išraiška, kuri baigiasi kabliataškiu. Pavyzdžiui, mūsų pirmame kodo pavyzdyje buvo tokia kodo eilutė, kuri išveda tekstą „Hello World“: document.writeln("Hello World!"); Tai gerai žinoma tiems, kas anksčiau buvo susidūręs su C ar C+ + programavimo kalbomis. Čia mes turime objektą, pavadintą "document" (kitaip kalbant mes kažką darysime savo www dokumentui) ir šio objekto metodą, pavadinta writeln (t.y, išvesti į ekraną). Toliau pateikta informacija, perduodama metodui (mūsų atveju - tai tekstas, kuris turi būti išvestas). Punktuacijos ženklai paprasčiausiai atskiria kiekvieną šios komandos dalį. Pirma, taškas skiria objektą (document) ir jo metodą (writeln), o toliau skliaustuose pateikiamas šio metodo parametras. Kadangi šiuo atveju parametras yra simbolių eilutės tipo, jo reikšmė pateikta kabutėse. Galiausiai komanda baigiasi kabliataškiu. Čia mes pasinaudojame egzistuojančio objekto egzistuojančiu metodu. JavaScript turi daug tokių įdėtų standartinių objektų ir būtent su jais mes ir dirbsime šiame kurse. Be abejo, Jūs tai pat galite sukurti savo naujus objektus ir apibrėžti jų savybes bei metodus, bet tai jau yra už šio kurso ribų.
15
Komandų blokai Komandų blokai naudojami atskirų komandų grupavimui. Jie paprastai naudojami su kitomis programinėmis konstrukcijomis, tokiomis kaip sąlygos ir ciklai (aprašyti toliau). Komandų blokai apima komandas, kurios įeina į grupę. Tam naudojami riestiniai (figūriniai) skliaustai. Atkreipkite dėmesį į tai, kad tai ne tie patys skliaustai, kuriuose nurodomi parametrai. { Čia eina JavaScript kodas }
16
Teksto išvedimas Viena standartinių visų programavimo kalbų operacija, tai teksto išvedimas į ekraną. JavaScript kalboje naudojami du pagrindiniai išvedimo metodai, abu labai panašūs. Mes jau esame susipažinę su pirmuoju metodu − writeln. Kitas metodas vadinasi write. Abu jie priklauso objektui document. Jų naudojimo pavyzdys galėtų būti toks: <script type="text/javascript"> document.writeln("The quick brown fox"); document.write("jumped over the lazy dog"); </script> Vienintelis skirtumas tarp jų yra tas, kad writeln metodas išveda visą eilutę iki pabaigos ir perveda ekrano žymeklį į kitos eilutės pradžią, o write tęsia tos pačios eilutės išvedimą. Tačiau, www naršyklės paprastai ignoruoja eilutės pabaigas. Todėl tam, kad matytumėt writeln efektą, reikėtų visą kodą sutalpinti tarp žymių <pre> </pre>. Tai būtų nurodymas naršyklei rodyti jau suformatuotą tekstą ir šiuo atveju bus išvestos dvi atskiros eilutės.
17
HTML dokumento išvedimas
Mes išnagrinėjome teksto išvedimą į ekraną ir pamatėme, kad tekstas traktuojamas kaip įprastas HTML kodas. Tai sukelia, pavyzdžiui, eilutės pabaigos ignoravimo efektą, nebent mes naudosime HTML gairę <pre> </pre>. Taigi, kaip galima būtų įtakoti formatą, kuriame JavaScript išveda informaciją į ekraną? Panagrinėkime tokį pavyzdį: <script type="text/javascript"> document.write("<h1>Pirmasis mano puslapis</h1>"); document.write("<hr>Sveiki aplankę mano tinklalapį<p>"); document.write("<table border=2>"); document.write("<tr><td>A</td><td>B</td></tr>"); document.write("<tr><td>C</td><td>D</td></tr>"); document.write("</table>"); </script> Čia write metodas panaudotas daug kartų. Tai daroma tik vaizdingumo dėlei. Šis kodas galėtų būti perrašytas naudojant tik vieną write metodą ir sujungiant visą išvedamą tekstą į vieną simbolių eilutę. Kadangi www naršyklės interpretuoja JavaScript programas kaip HTML kodą, mes galime pasinaudoti šia savybe pateikti naršyklei tai, ką ji nori, būtent HTML. Tai leidžia mums išvesti bet kokią HTML konstrukciją. Pateiktame pavyzdyje išvedamas tiek paprastas HTML tekstas, tiek lentelė. Šis pavyzdys iliustruoja kaip JavaScript gali būti panaudotas generuojant ne tik atskirą teksto fragmentą, bet ir vientisą HTML dokumentą.
18
Dialogo langeliai Paprastumas, su kuriuo galima sudaryti dialogo langelius, yra iš tikrųjų labai galinga JavaScript kalbos savybė. Išbandykite žemiau pateiktą kodą: <html> <head> <title>Dialog Boxes</title> </head> <body> <script type="text/javascript"> alert("You are about to enter Bob's Web site... be humble!"); </script> <h1>Bob'sWebsite</h1> <hr> Welcome to Bob's Web site... </body> </html> Kai šis dokumentas yra kraunamas, atsiranda įspėjamasis (alert) dialogo langelis. Uždarius šį langelį bus patektas visas likęs tinklalapio tekstas, alert metodas išveda dialogo langelį, kuriame rodomas metodo parametrų laukelyje specifikuotas tekstas. Langelis taip pat turi OK mygtuką ir yra rodomas tol, kol vartotojas ne paspaus šio mygtuko. Kai tai atsitiks, dialogo langelis užsidarys ir JavaScript kodas bus vykdomas toliau.
19
Įvedimo dialogas Kita naudojama JavaScript dialogo forma yra įvedimo (prompt) dialogas. Jis panašus į alert dialogą. prompt("This is Bob's Web site, enter your name...","Fred"); Prompt dialogo langelis prašo vartotoją įvesti tam tikrą informaciją į pateikiamą įvedimo laukelį. Šis metodas turi du argumentus. Pirmojo argumento reikšmė - tai tekstas, rodomas langelyje. Antrasis argumentas - tai pradinė įvedamos informacijos reikšmė.
Similar presentations
