Download presentation
Presentation is loading. Please wait.
1
Internet programiranje
JavaScript osnove Internet programiranje
2
Uvod Java vs. JavaScript
Java je veoma moćan i kompleksan programski jezik visokog nivoa. JavaScript je skript jezik koji omogućava web developerima/dizajnerima da naprave mnogo funkcionalnije i dinamičnije web sajtove.
3
JavaScript JavaScript dodaje interaktivnost web stranama.
JavaScript se izvršava na klijentskoj strani. JavaScript je interpreterski jezik – izvršava se bez prethodnog kompajliranja. Šta je potrebno za kreiranje koda u JavaScript jeziku? Proveriti da li je u browser-u čekirana opcija JavaScript Enabled.
4
Šta sve može JavaScript?
Ubacuje dinamički tekst u HTML stranu Reaguje na događaje (events) Čita i menja sadržaj HTML elemenata Prikazuje poruke upozorenja (alert messages) Prikazuje pop-up prozore Kreira dinamičke drop-down menije Omogućava validaciju formi Detektuje korisnikov browser Koristi cookie-je
5
JavaScript istorijat Zvanično ime je ECMAScript.
Izumeo ga je Brandan Eich u Netscape-u (sa Navigatorom 2.0) . ECMA organizacija je razvila ECMA-262 koji je postao standard. Od godine podržavaju ga svi browseri. Još uvek je u fazi razvoja.
6
Kako... u JavaScript-u? HTML tag <script> se koristi za ubacivanje JavaScript koda u HTML kod Primer: <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>
7
Šta je sa browserima koji ne podržavaju JavaScript?
Oni će prikazati skript kao sadržaj stranice, a da bi se to izbeglo potrebno je napisati sledeći kod: <html> <body> <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script> </body> </html>
8
JavaScript gde…? U zavisnosti kad hoćete da se izvrši JavaScript kod možete ga postaviti: Prilikom učitavanja strane – tag <body> Kada se izvrši neki događaj – tag <head> Neki skript prilikom učitavanja strane, a neki kad korisnik izvrši na neki događaj Kada želimo da se isti JavaScript kod izvrši na nekoliko strana – u poseban fajl
9
JavaScript gde…? Ako se skript postavi u odeljak body – izvršiće se prilikom učitavanja strane i generisaće sadržaj stranice. <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>
10
JavaScript gde…? Ako se skript postavi u odeljak head – izvršiće se onda kada se pozove ili kada ga pozove neki događaj <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>
11
JavaScript gde…? Može se postaviti neograničen broj skriptova u dokument, tako da se može koristiti i body i head odeljak. <html> <head> <script type="text/javascript"> .... </script> </head> <body> <script type="text/javascript"> .... </script> </body>
12
JavaScript gde…? Da se ne bi skriptovi pisali na svakoj strani, a koriste se isti, potrebno ih je zapisati u poseban fajl koji ima ekstenziju .js i pozivati ga po potrebi. <html> <head> <script type="text/javascript" src=“mojskript.js"></script> </head> <body> </body> </html> U eksternom fajlu ne sme se pojavljivati tag <script> samo JavaScript kod.
13
JavaScript code JavaScript naredbe se izvršavaju u browseru.
Svaka JavaScript naredba se završava sa ; JavaScript naredbe mogu biti grupisane u blokove naredbi i tada se stavljaju u zagrade { }. JavaScript – case sensitive. JavaScript komentari: // - komentar za jednu liniju koda /* komentar za više linija koda*/ Komentari se koriste za blokiranje izvršavanja naredbi (u slučaju da browser ne podržava JS)
14
JavaScript code JavaScript promenljive se mogu, a i ne moraju deklarisati. Deklaracija promenljivih se vrši ključnom rečju var iza koje se navodi ime promenljive. Dodela vrednosti promenljivoj može da se izvrši odmah nakon deklaracije, a može i kasnije. Tip podatka koje će imati promenljiva se ne navode. var x=5; var carname="Volvo"; x=5; carname="Volvo";
15
JavaScript code Aritmetički operatori + Addition x=y+2 x=7 Ako je y=5
- Subtraction x=y-2 x=3 * Multiplication x=y*2 x=10 / Division x=y/2 x=2.5 % Modulus x=y%2 x=1 ++ Increment x=++y x=6 -- Decrement x=--y x=4 Ako je y=5
16
JavaScript code Operatori za dodelu vrednosti = x=y x=5
+= x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 Ako je x=10 i y=5
17
JavaScript code Operatori poređenja Ako je x=5
== is equal to x==8 is false === is exactly equal to x===5 is true x==="5" is false != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true Ako je x=5
18
JavaScript code Logički operatori
&& and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true Uslovni operator variablename = (condition) ? value1 : value2 Ako je x=6 i y=3
19
Ako saberete broj i string rezultat će biti string
JavaScript code + operator se koristi nad stringovima za konkatenaciju x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); Ako saberete broj i string rezultat će biti string
20
JavaScript - uslovne naredbe
Pružaju mogućnost izmene toka izvršavanja programa, u zavisnosti od konkretne logičke vrednosti izraza. Varijante uslovnih naredbi: if statement if...else statement switch statement
21
Primer if naredbe <script type="text/javascript"> var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } </script>
22
Primer if...else naredbe <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>
23
Primer ugnežđene if...else naredbe
<script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("<b>Good morning</b>"); } else if (time>=10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script>
24
Primer switch naredbe <script type="text/javascript"> var d=new Date(); theDay=d.getDay(); switch (theDay) {case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!");} </script>
25
JavaScript - petlje Omogućavaju da se određeni delovi koda više puta izvršavaju (poznat broj puta, dok je uslov zadovoljen...). Kod se izvršava kroz iteracije. Postoje: for loops while loops do..while loops
26
Primer for petlje <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
27
Primer while petlje <html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html>
28
Primer do...while petlje <html> <body> <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html>
29
Primer break naredbe <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
30
Primer continue naredbe
<html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
31
JavaScript funkcije Funkcijama se nazivaju blokovi naredbi koji se pozivaju i izvršavaju kao celina. Podaci neophodni za njihovo izvršavanje mogu im se proslediti kao parametri. Funkcije mogu da vraćaju vrednosti, ali to se od njih ne zahteva uvek. Funkcije moraju biti definisane, pre nego što se mogu koristiti . Definicija funkcije se, obično, smešta u zaglavlje HTML dokumenta, iako takav postupak nije obavezan.
32
function ime_funkcije(p1, p2, ..., pn) { naredbe }
Sintaksa definisanja funkcije je sledeća: function ime_funkcije(p1, p2, ..., pn) { naredbe } Ključna reč function mora se pisati malim slovima. Funkcija će se izvršiti kada se desi neki događaj ili kada se pozove. Funkcija se može pozvati bilo gde unutar strane. Funkcije koje treba da vrate neku vrednost moraju koristiti naredbu return. Promenljive koje se deklarišu u funkciji – lokalne promenljive. Primer Primer
33
Primer funkcije koja vraća vrednost
<html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> document.write(product(4,3)); </body> </html>
34
<HTML> <HEAD> <TITLE>Global and Local Variables</TITLE> <SCRIPT LANGUAGE="JavaScript"> function displaySquared(y) {var x = y * y; document.write(x+"<BR>") } </SCRIPT> </HEAD> <BODY> for(x=0;x<10;++x) displaySquared(x) </BODY> </HTML>
35
JavaScript Pop-up prozori
JavaScript ima tri vrste pop-up prozora: Alert box, Confirm box, Prompt box.
36
Alert pop-up prozor Koristimo ga kada želimo da budemo sigurni da je informacija prosleđena korisniku. Kada se pojavi alert box, korisnik treba da klikne na "OK" da bi nastavio dalji rad. Sintaksa alert("sometext");
37
Primer Alert Box <html> <head> <script type="text/javascript"> function show_alert() { alert("I am an alert box!");} </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> </html>
38
Confirm pop-up prozor Koristimo kada korisnik treba da verifikuje ili prihvati nešto. Kada se pojavi confirm box, korisnik treba da klikne ili na “OK” ili na “Cancel” da bi nastavio rad. Ako izabere “OK”, confirm box vraća vrednost true. Ako klikne na “Cancel”, vraća false. Sintaksa confirm("sometext");
39
Primer Confirm Box <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button"); if (r==true) { document.write("You pressed OK!"); } else { document.write("You pressed Cancel!"); }} </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>
40
Prompt pop-up prozor Koristimo kada želimo da korisnik unese vrednost pre nego što pristupi strani. Kada se pojavi prompt box, korisnik treba da unese vrednost, a zatim da klikne na "OK" ili "Cancel" da bi nastavio sa radom. Ako korisnik klikne na "OK" prompt box vraća unetu vrednost, a ako klikne na "Cancel" vraća null. Sintaksa prompt("sometext","defaultvalue");
41
Primer Confirm Box <html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }} </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html>
42
JavaScript Objects JavaScript je objektno orijentisan jezik.
Omogućava da se definišu sopstveni objekti i kreiraju novi tipovi podataka. Objekat je specijalan tip podataka koji ima svoje properties (osobine) i metode. Properties opisuju osobine objekta i svaka osobina ima neku vrednost. Metode su akcije koje objekat može da primeni.
43
JavaScript Objects Primer (osobina): var txt="Hello world!"; document.write(txt.length); Primer (metoda): var txt="Hello world!"; document.write(txt.toUpperCase()); 12 HELLO WORLD!
44
JavaScript Objects Objekti i njegove osobine(metode) se obično referenciraju korišćenjem tačke između objekta i njegove osobine(metode). document.write("This is a test.") Postoji i druga notacija document ["write"] ("This is a test.")
46
Postoje dva glavna tipa JavaScript objekata:
Language Objects –objekti na nivou JavaScript jezika i nezavisni su od drugih objekata. Navigator Objects – objekti na strani klijentskog browsera. Primer: alert("An error occurred!"); window.alert("An error occurred!"); this.alert("An error occurred!"); Osim gore pomenutih postoje i objekti kreirani od strane programera.
47
Generalno objekti se kreiraju sledećom sintaksom:
name = new Object(); Primer: ratings = new Array(6,9,8,4,5,7,8,10); var home = new String("Residence"); var futdate = new Date(); var num1 = new Number(); var string = "This is a test.“;
48
JavaScript Array Object
Array objekat se koristi da uskladišti više vrednosti u jednu promenljivu. Array objekat se može definisati na 3 načina: 1: var myCars=new Array(); myCars[0]=“Audi"; myCars[1]="Volvo"; myCars[2]="BMW"; 2: var myCars=new Array(“Audi","Volvo","BMW"); 3: var myCars=[“Audi","Volvo","BMW"]; Ako se kao vrednosti u nizu odrede brojevi ili true/false vrednosti, tip nizovne promenljive će biti Number ili Boolean, umesto String
49
Pristup pojedinim elementima niza vrši se navođenjem imena niza i indeksa. Broj indeksa počinje od O. document.write(myCars[O]); myCars[O]="Opel"; Audi Opel
50
<html> <body> <script type="text/javascript"> var mycars = new Array(); mycars[0] = “Audi"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br />"); } </script> </body> </html>
51
<html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = “Audi"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "<br />"); } </script> </body> </html>
52
Array Object Methods concat() metoda se koristi da spoji 2 ili više nizova. Ova metoda ne menja postojeći niz, već vraća kopiju spojenih nizova. Sintaksa array.concat(array2, array3, ..., arrayX);
53
Concat() <script type="text/javascript"> var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); </script> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script>
54
join() join() metoda udružuje sve lemente niza u strin i vraća string.
Elementi su odvojeni separatorom. Default separator je zarez (,). Sintaksa array.join(separator)
55
join() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.join() + "<br />"); document.write(fruits.join("+") + "<br />"); document.write(fruits.join(" and ")); </script>
56
pop() pop() metoda uklanja poslednji element u nizu i vraća taj element. Ova metoda menja dužinu niza (length). Sintaksa array.pop() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.pop() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.pop() + "<br />"); document.write(fruits); </script>
57
push() push() metoda dodaje novi element na kraj niza i vraća novu dužinu niza. Ova metoda menja dužinu niza (length). Sintaksa array.push(element1, element2, ..., elementX) <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.push("Kiwi") + "<br />"); document.write(fruits.push("Lemon","Pineapple") + "<br />"); document.write(fruits); </script>
58
reverse() reverse() metoda okreće poredak elemenata u nizu (poslednji element je prvi, prvi element je poslednji). Ova metoda menja originalan niz. Sintaksa array.reverse() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.reverse()); </script>
59
shift() shift() metoda uklanja prvi element niza i vraća taj element.
Ova metoda menja dužinu niza. Sintaksa array.shift() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.shift() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.shift() + "<br />"); document.write(fruits); </script>
60
slice() slice() metoda selektuje deo niza i vraća novi niz.
Originalni niz se ne menja. Sintaksa array.slice(start, end) start - obavezan. Broj koji određuje odakle da krene selekcija. Prvi element ima indeks O. Mogu se koristiti negativni brojevi ako se hoće selekcija koja ide od kraja niza. end - proizvoljan. Broj koji određuje gde se završava selekcija. Ako se izostavi, tada metoda selektuje sve od startne pozicije do kraja niza.
61
slice() <script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.slice(0,1) + "<br />"); document.write(fruits.slice(1) + "<br />"); document.write(fruits.slice(-2) + "<br />"); document.write(fruits); </script>
62
sort() sort() metoda sortira sve elemente niza.
Ova metoda menja originalni niz. Sintaksa array.sort(sortfunc) sortfunc – parametar koji određuje redosled sortiranja. Default vrednost je alphabetically i ascending. Brojevi neće biti korektno sortirani (npr. 40 dolazi pre 5). Zato se koristi funkcija koja poredi brojeve.
63
sort() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.sort()); </script> <script type="text/javascript"> function sortNumber(a,b) { return a - b; } var n = ["10", "5", "40", "25", "100", "1"]; document.write(n.sort(sortNumber)); </script>
64
splice() splice() metoda dodaje/ili uklanja elemente niza i vraća uklonjen element. Ova metoda menja originalni niz. Sintaksa array.splice(index,howmany,element1,.....,elementX) index– obavezan parametar koji određuje sa koje pozicije da se doda ili ukloni element. howmany – obavezan parametar određuje broj elemenata koje treba ukloniti, ako je postavljen na O ne uklanja se nijedan element. Ako se navede neki element od elemenata element1,.....,elementX - on će biti dodat nizu.
65
splice() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Removed: " + fruits.splice(2,0,"Lemon") + "<br />"); document.write(fruits); </script> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Removed: " + fruits.splice(2,1,"Lemon") + "<br />"); document.write(fruits); </script>
66
toString() toString() metoda konvertuje niz u string.
String koji se dobije odvaja elemente niza zarezom. Sintaksa array.toString() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.toString()); </script>
67
unshift() unshift() metoda dodaje nove elemente nizu počevši od početka niza, vraća novu dužinu niza. Ova metoda menja dužinu niza. Sintaksa array.unshift(element1,element2, ..., elementX) unshift() metoda vraća undefined u Internet Exploreru!
68
unshift() <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.unshift("Kiwi") + "<br />"); document.write(fruits.unshift("Lemon","Pineapple") + "<br />"); document.write(fruits); </script>
69
JavaScript String Object
string objekat se koristi za manipulaciju sa određenim delom teksta. var txt="Hello world!"; document.write(txt.length); var txt="Hello world!"; document.write(txt.toUpperCase()); 12 HELLO WORLD!
70
JavaScript Date Object
Date objekat se koristi da radi sa datumima i vremenima. Date objekat se kreira sa konstruktorom Date(). new Date(); //trenutni datum i vreme new Date(milliseconds); //datum u millisekundama počev od //1970/01/01 new Date(dateString); new Date(year, month, day, hours, minutes, seconds, milliseconds) ; Kada se objekat Date kreira, određene metode omogućavaju rad sa datumom i vremenom.
71
JavaScript Date Object
Svi datumi se računaju u milisekundama počev od 01. Januara, :00:00 Universal Time (UTC) i to tako da dan sadrži 86,400,000 milisekundi. today = new Date(); d1 = new Date("October 13, :13:00"); d2 = new Date(79,5,24); d3 = new Date(79,5,24,11,33,0);
72
Poređenje dva datuma var myDate=new Date(); myDate.setFullYear(2010,0,14); var today = new Date(); if (myDate>today) { alert("Today is before 14th January 2010"); } else { alert("Today is after 14th January 2010");
73
JavaScript Math Object
Objekat Math omogućava da se izvršavaju matematički zadaci. var pi_value=Math.PI; var sqrt_value=Math.sqrt(16); Math nije konstruktor. Sve osobine i metode objekta Math koriste se korišćenejm ključne reči Math, bez kreiranja objekta.
74
Matematičke konstante
JavaScript obezbeđuje 8 matematičkih konstanti kojima se može pristupati preko Math objekta. Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E
75
Matematičke metode document.write(Math.round(4.7));
document.write(Math.random()); vraća slučajan broj između 0 i 1 document.write(Math.floor(Math.random()*11)); vraća slučajan broj između 0 i 10
76
JavaScript Navigator Object
Navigator objekat sadrži informacije o browseru posetioca strane (ime browsera, verzija...) Koristi se u svrhu kreiranja web stranica koje će biti dovoljno “pametne” da se ponašaju na jedan način za neke browsere, a na drugi način za neke druge browsere. Neke od osobina (properties) Navigator objekta su: appName – čuva ime browsera, appVersion – čuva, pored ostalog, verziju browsera.
77
<html> <body> <script type="text/javascript"> var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); document.write("Browser name: "+ browser); document.write("<br />"); document.write("Browser version: "+ version); </script> </body> </html>
78
function detectBrowser() { var browser=navigator.appName;
<html> <head> <script type="text/javascript"> function detectBrowser() { var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) { alert("Your browser is good enough!"); } else { alert("It's time to upgrade your browser!"); } } </script> </head> <body onload="detectBrowser()"> </body> </html>
79
Napisati JavaScript funkciju koja koristi sledeće osobine Navigator objekta:
appCodeName platform cookieEnabled browserLanguage systemLanguage userLanguage
80
Šta je Cookie (kolačić)?
Cookie je promenljiva koja se čuva na korisnikovom računaru. Svaki put kada isti računar zatraži stranicu u browseru, šalje se i cookie na server. JavaScript omogućava kreiranje i preuzimanje vrednosti iz promenljive cookie. Rad sa cookie-jima zahteva: Funkciju koja će da čita cookie (ako postoji), Funkciju koja će da zapamti cookie, Funkciju koja će da obriše cookie.
81
Primeri korišćenja cookie-ja
Name cookie – Prvi put kada posetilac pristupi nekoj web stranici u kojoj mora popuniti podatke o svom imenu, ti podaci će se sačuvati u cookie-ju. Kada sledeći put posetilac poseti tu istu web stranciu, dobiće pozdravnu poruku npr. "Welcome John Doe!" . Ime posetioca se preuzme iz sačuvane vrednosti cookie-ja. Password cookie – Kao i u prethodnom slučaju, ako se uključi opcija Save password, podaci o lozinki posetioca će se sačuvati u cookie-ju, tako da posetilac sledeći put kad pristupi toj strani neće morati ponovo kucati lozinku. Date cookie – U cookie-ju se takođe može sačuvati trenutni datum kada je posetilac posetio stranu, čime se može obezbediti poruka tipa "Your last visit was on Tuesday August 11, 2005!“.
82
Prvo je potrebno kreirati funkciju koja će sačuvati ime posetioca u varijabli cookie.
function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }
83
Zatim kreiramo funkciju koja proverava da li je cookie poslat
function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }
84
Na kraju kreiramo funkciju koja šalje pozdravnu poruku
function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } } }
85
JavaScript Form Validation
JavaScript može da služi za validaciju podataka u HTML formama pre slanja na server. Podaci koju mogu da se ispitaju su tipa: Ako je korisnik zaboravio da popuni neko obavezno polje, Ako je korisnik uneo “pogrešnu” adresu, Ako je korisnik uneo pogrešan datum, Ako je korisnik uneo tekstualni podatak na mestu gde se očekuje numerička vrednost.
86
Validacija obaveznog polja function validate_required(field,alerttxt) { with (field) if (value==null||value=="") alert(alerttxt);return false; } else return true; }}
87
Validacija pravilno napisane adrese function validate_ (field,alerttxt) { with (field) dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} }
88
JavaScript Animation JavaScript se koristi da kreira animirane sličice promenom slika koje reaguju na različite događaje. <a href=" target="_blank"> <img border= "0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>
89
<script type="text/javascript"> function mouseOver() { document
<script type="text/javascript"> function mouseOver() { document.getElementById("b1").src ="b_blue.gif"; } function mouseOut() document.getElementById("b1").src ="b_pink.gif"; </script>
90
JavaScript Timing Events
JavaScript može da se izvršava u određenim vremenskim intervalima (timing events). Koristimo dve metode: setTimeout() – izvršiće kod za zadati vremenski period clearTimeout() – otkazaće postavljeno vreme za koje treba da se izvrši kod Obe metode su metode HTML DOM Window objekta.
91
setTimeout() Sintaksa
var t=setTimeout("javascript statement",milliseconds); Prvi parametar je string koji sadrži JavaScript naredbu npr. "alert('5 seconds!')“ ili poziv neke funkcije "alertMsg()". Drugi parametar određuje za koliko milisekundi treba da se izvrši JavaScript naredba. (1000 milisekundi = 1 sekund) Ova metoda vraća vrednost u promenljivu t koja služi da se otkaže postavljeno vreme u metodi setTimeout().
92
clearTimeout() Sintaksa clearTimeout(setTimeout_variable)
setTimeout_variable je promenljiva koja je inicijalizovana pozivom metode setTimeout() u kojoj se nalazi vraćena vrednost nakon izvršenja metode. U prethodnom primeru clearTimeout(t) – uklanja postavljeno vreme metodom setTimeout()
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.