javascript ii deo...sistemski dijalozi ± prompt() vizuelno se prikazuje u formi posebnog prozora,...

JavaScript II deo

Dr Nenad Kojić, dipl. inž.

Milena Vesić, spec .stuk.inž.

Danijela Nikitin, spec .stuk.inž.

Školska 2017/18. Nikola Mihajlović, spec .stuk.inž.

Luka Lukić, struk. inž.

Visoka škola strukovnih studija za informacione

i komunikacione tehnologije

Rad sa DOM-om

DOM predstavlja skraćenicu od Document Object Model i

predstavlja jednu vrstu plana organizacije svih objekata koji se

nalaze na web strani.

DOM je API (Application Programming Interface) za XML koji je

proširen i za korišćenje HTML-a.

DOM se kreira od strane browser-a i omogućava browser-u, ali i

programerima, da razumeju, povežu, prozovu i kasnije pristupe

elementima stranice sa ciljem da pročitaju ili modifikuju neko

njegovo svojstvo ili vrednost.

DOM omogućava kompletan i intuitivan pristup elementima

strane, po redosledu njihove pripadnosti nadređenim elementima

tj. roditeljskim tagovima. Tako kažemo da kod pristupa i rada sa

DOM-om primenjujemo hijerarhijski pristup objektima stranice.

Rad sa DOM-om

Na vrhu hijerarhije nalazi se objekat window

koji reprezentuje kompletan sadržaj web strane

Svaki HTML dokument koji se učita u window

postaje document object

Ovaj objekat je najbitniji jer će on u sebi

sadržati veliki broj drugih objekata koji

pripadaju HTML kodu. On će biti

najkorišćeniji kod primena script-a jer će se

skriptom prozivati pojedini objekti unutar

document object-a i dalje nad njima primenjivati određene akcije. Iz

tog razloga veliki broj narednih linija JavaScript koda će početi sa

rečju document.

Form object ukazuje na sve što se nalazi unutar taga form.

Rad sa DOM-om

Sve što se napiše unutar web strane dobija svoje mesto u DOM-u,

i unutar hijerarhije se njegova pozicija jednoznačno može locirati.

Skriptu je omogućeno da pristupi i modifikuje svaki objekat unutar

DOM-a.

Svaki element strane, kao što je tag, sadržaj taga, ugnježdenost tagova i njihov međusobni odnos postaju vrlo opisni i intuitivno

povezani, da su vrlo pogodni za kasnije primene skript-a.

Sistemski dijalozi – alert()

Sistemski dijalog je mogućnost browser-a da korisniku prikaže

određeni sadržaj pomoću tri metoda: alert(), prompt() i confirm().

Ovo su ugrađene stavke browser-a i ne može se mnogo uticati na

način i dizajn prikaza, već samo na sadržaj. Ovi dijalozi se realizuju u formi posebnih prozora, sa međusobnim

razlikama, pružajući i programeru i korisniku specifične

mogućnosti. Metod alert() – omogućava da se definisani sadržaj prikaže

korisniku u formu posebnog prozora kao oblik obaveštenja. Kada

browser naiđe na ovu liniju koda, prikazuje poseban grafički prozor, i obustavlja svu dalju realizaciju koda, koji se nalazi u

nastavku listinga. Obustava se završava kada korisnik klikne na

taster OK, koji se automatski generiše ili na X čime zatvara taj

prozor. Sadržaj koji se korisniku prikazuje je argument metoda

alert().

Sistemski dijalozi – alert()

<html>

<head>

<script type="text/javascript">

alert("Ovo je prvi metod alert!");

alert("DRUGI");

</script>

</head>

<body> </body>

</html>

Sistemski dijalozi – prompt()

Vizuelno se prikazuje u formi posebnog prozora, ali sada pored

inicijalnog teksta, koji je imao i metod alert(), nudi i tekstualno polje

za unos korisničkog sadržaja.

Kako je u ovom tekstualnom polju moguće uneti inicijalno ispisan

tekst, on se definiše kao drugi argument, po redosledu pisanja,

unutar metoda prompt().

Tako je sintaksa ovog metoda:

prompt("argument1","argument2");

argument1 - predstavlja poruku koja se prikazuje korisniku

argument2 - predstavlja tekst koji se korisniku inicijalno pojavljuje

u text polju

Sistemski dijalozi – prompt()


var unetitekst = prompt("Unesite ime i pritisnite OK!","Ime

korisnika");

console.log(unetitekst);

</script>

Za razliku od metoda alert(), sadržaj koji korisnik unese se

„prihvata“ u neku promenljivu JavaScript-a.

Sistemski dijalozi – confirm()

Vizuelno se prikazuje u formi posebnog prozora, ali pored

inicijalnog teksta koji je imao i metod alert() i tastera OK, nudi i

taster Cancel.

Ovaj metod se koristi za postavljanje pitanja i vraća logičku

vrednost true ili false u zavisnosti na koji taster je korisnik kliknuo.

U slučaju da se prozor samo zatvori vratiće se takođe false.


var unetitekst = confirm("Da li je ovo bilo jasno?");

console.log(unetitekst);

</script>

Kontrole toka i petlje

If-else kontrola toka

Opšta sintaksa:

if (uslov) { šta se radi; ... }

else { šta se radi; ... }

Primer upotrebe:


var unos = prompt("Koji je dan nakon ponedeljka?");

if(unos=="utorak")

{alert("Tačno!");}

else

{alert("Netačno");}

</script>


If-else if-else kontrola toka

Opšta sintaksa:

if (uslov) { šta se radi; ... }

else if { šta se radi; ... }

else { šta se radi; ... }

Primer upotrebe: <script type="text/javascript">

var unos = prompt("Unesite ceo broj veći od 10 a manji od 15?");

var broj = parseInt(unos);

if(unos<=10)

{alert("Unet je manji broj!");}

else if (unos>=15)

{alert("Unet je veći broj!");}

else

{alert("Unet je ispravan broj!");}

</script>


switch kontrola toka

Opšta sintaksa:

switch(x)

{ case a: šta se radi; break;

case b: šta se radi; break;

default: šta se radi; }

Primer upotrebe: <script type="text/javascript">

var boja= prompt("Navesti jednu od boja koja se nalazi na srpskoj zastavi?");

switch (boja){

case "crvena": alert("Tačno!"); break;

case "plava": alert("Tačno!"); break;

case "bela": alert("Tačno!"); break;

default: alert("Što pre to naučite!"); } </script>


for petlja

Opšta sintaksa:

for (inicijalizacija; uslov; izraz nakon ciklusa petlje)

{šta se radi;}

Primer upotrebe:


for (var i = 1; i <= 8; i++){

alert("Vrednost promenljive: i = " + i);

}

</script>


for-in petlja

Opšta sintaksa:

for (indeks in iskaz)

{ šta se radi...; }

Primer upotrebe:


var niz = ["a", "b", "c", "d", "e"];

for (var element in niz){

console.log(element);

console.log(niz[element]);

}

</script>


while petlja

Opšta sintaksa:

while (uslov)

{ šta se radi...; }

Primer upotrebe:


var i=1;

while(i<=8){


i=i+1;

}

</script>


do-while petlja

Opšta sintaksa:

do{

šta se radi...; }

while (uslov);

Primer upotrebe:


var i=1;

do{


i=i+1;

}

while(i<=8)

</script>


break i continue

I break i continue služe za kontrolu izvršavanja broja iteracija neke

petlje. Break forsira trenutni prekid tj. izlaz iz petlje, dok continue

izlazi iz trenutne iteracije petlje, ali se dalje iteracije nastavljaju,

onoliko puta koliko petlja to predviđa.

Primer upotrebe:


var broj = 0;

for (var i=1; i < 10; i++) {

if (i % 3 == 0) { break; }

broj++;

}

alert(broj);

</script>

Primer upotrebe:


var broj = 0;

for (var i=1; i < 10; i++) {

if (i % 3 == 0) { continue; }

broj++;

}

alert(broj);

</script>

Rad sa funkcijama

Funkcije predstavljaju vrlo pogodan oblik pisanja koda, svaki put

kada je potrebno iste ili slične linije koda napisati više puta.

Svaka funkcija mora imati ime, koje se kasnije poziva, i

započinje rezervisanom rečju function.

Ukoliko funkcija nema ulazne podatke, tj. argumente, pored

imena funkcije piše se (). Ukoliko ih ima, onda se oni navode

međusobno razdvojeni zarezom unutar ().

Nakon toga ide telo funkcije, koje se piše unutar zagrada { }, i

sadrži sve linije koda i logiku koju funkcija treba da realizuje.

Ukoliko funkcija treba da vrati neki sadržaj tj. rezultat svog rada,

koristi se rezervisana reč return iza koje ide promenljiva, čija

vrednost se vraća onome ko je pozvao funkciju

Rad sa funkcijama

Tako se funkcija, koja se zove obavestenje, i koja u telu ima metod

alert() definiše kao:

function obavestenje()

{ alert (“Tekst na prozoru za obavestenje”); }

Funkcija se poziva po njenom imenu, tj.

obaveštenje();

i tada se izvršava na mestu gde je pozvana.

Rad sa funkcijama

Drugi način je da se pozove pomoću događaja, u ovom slučaju

klikom na taster, kada se poziva i izvršava svaki put kada se klikne

na taster. <html>

<head>




</script>

</head>

<body>

<script type="text/javascript"> obavestenje(); </script>

<input type="button" value="Pozovi f-ju" onclick="obavestenje();" />

</body>

</html>

Rad sa funkcijama

Ukoliko funkcija ima ulazne argumente, onda se prilikom njenog

pozivanja moraju navesti vrednosti predviđenih argumenata, koji

se redom dodeljuju imenima argumenata definisanih prilikom

definisanja funkcije. <html>

<head>




</script>

</head>

<body>

<script type="text/javascript"> srednjaVrednost(3, 5, 7); </script>

<input type="button" value="Pozovi f-ju" onclick="srednjaVrednost(3, 5,7);" />

</body></html>

Rad sa funkcijama

Kada se funkcija poziva sa ciljem da vrati rezultat njenog rada,

potrebno je pre njenog pozivanja napraviti promenljivu u koju će se

vrednost, koju funkcija vrati, skladištiti.

<html>

<head>




</script>

</head>

<body>


var broj=srednjaVrednost(3, 5, 7);

alert(broj);

</script>

</body>

</html>

Rad sa funkcijama

Dozvoljeno je i korišćenje funkcije koja može imati

proizvoljan i nedefinisan broj argumenata.

Prilikom definisanja piše se bez argumenata, ali se prilikom

njenog pozivanja, argumenti navode.

Da bi se u telu funkcije znalo koji i koliko argumenata je

definisano prilikom pozivanja funkcije, koristi se svojstvo

length i pristup nizu arguments, da bi se pristupilo svim

argumentima.

Rad sa funkcijama

<html>

<head>


function proba() {

if(arguments.length == 1) {

alert(arguments[0] + 1); }

else if (arguments.length == 2) {

alert(arguments[0] + arguments[1]

+ 1); }

else if (arguments.length == 3) {

alert(arguments[0] + arguments[1]

+ arguments[2] + 1); }

}

</script>

</head>

<body>


proba(2);

proba(2,3);

proba(2,3,4);

</script>

</body>

</html>

Rad sa nizovima

U promenljivima moguće je smestiti samo jedan sadržaj. npr. var osoba = "Petar";

Niz je struktura podataka koja omogućava da se u jednoj

promenljivoj smesti više različitih sadržaja.

Jedan niz može da zameni više promenljivih gde se svakoj

pojedinačnoj vrednosti može pristupiti, promeniti i izbrisati, kao i sa

klasičnim promenljivima.

Umesto tri promenljive koje opisuju jednu osobu

var osobaIme = "Petar";

var osobaPrezime = "Petar";

var osobaGrad = "Kragujevac";

Rad sa nizovima

Možemo da kreiramo niz osoba upotrebom uglastih zagrada, i u

njega stavimo iste ove podatke:

var osoba = ["Petar", "Petrovic", "Kragujevac"];

Drugi način je upotrebom new Array().

var osoba = new Array("Petar", "Petrovic", "Kragujevac");

U oba slučaja kreirana je jedna promenljiva, osoba, koja je u

formi niza i ima po tri podatka tipa string kao svoje elemente.

Pozicija prvog elementa niza, tj. njegov indeks je 0, drugog 1

i tako redom.

Rad sa nizovima

Pristup drugom elementu niza, dohvatanje i štampanje

njegove vrednosti:



console.log(osoba[1]);

</script>

Rad sa nizovima

Upisivanje nove vrednosti u niz prozivanjem imena niza i

indeksa niza, u zavisnosti od pozicije gde se želi upisati sadržaj.



osoba[3]="Srbija";

console.log(osoba);

</script>

Rad sa nizovima

Na isti način i postojećem elementu se može zameniti sadržaj.



osoba[3]="Srbija";

osoba[0]="Pera";

console.log(osoba);

</script>

Rad sa nizovima

Niz može imati sadržaje elemenata koji su različitih tipova.

Tako se dodavanjem novih elementa, koji su tipa number i

boolean, neće prijaviti greška.



osoba[3]=1990;

osoba[4]=true;

console.log(osoba);

</script>

Rad sa nizovima

Kreiranje dva niza i dodela vrednosti njihovim elementima na

različite načine.

Kod prvog niza, dodela je urađena nakon kreiranja niza, a

kod drugog, prilikom kreiranja niza.


var niz1 = new Array(7);

niz1[0] = "Ponedeljak";

niz1[1] = "Utorak";

niz1[2] = "Sreda";

niz1[3] = "Četvrtak";

niz1[4] = "Petak";

niz1[5] = "Subota";

niz1[6] = "Nedelja";

var niz2 = new Array("3","2","5","1","4");

niz2[0]= 99;

niz2[3]= niz1[6];

niz2[5]="Novi element niza 2";

console.log(niz2);

</script>

Rad sa nizovima

Izračunavanje dužine niza, tj. broja elemenata niza, lako se rešava

primenom svojstva length.


var niz1 = new Array(7);

niz1[0] = "Ponedeljak";

niz1[1] = "Utorak";

niz1[2] = "Sreda";

niz1[3] = "Četvrtak";

niz1[4] = "Petak";

niz1[5] = "Subota";

niz1[6] = "Nedelja";

console.log(niz1.length); // ispisuje 7

</script>

Rad sa nizovima

Dodavanje novog elementa niza moguće je uraditi i metodom

push() bez potrebe da se prethodno računa dužina niza da odredi

poziciju prvog sledećeg slobodnog elementa niza.


var niz2 = new Array("3","2","5","1","4");

niz2.push("8");

console.log(niz2);

</script>

Rad sa nizovima

Kako push() dodaje novi element niza na poslednje mesto, tako

metod unshift() dodaje element niza na prvo mesto:


var niz2 = new Array("3","2","5","1","4");

niz2.unshift("0");

console.log(niz2);

</script>

Rad sa nizovima

Brisanje elemenata niza je moguće primenom metoda shift(), za

brisanje prvog elementa, i pop(), za brisanje poslednjeg elementa.


var niz2 = new Array("3","2","5","1","4");

niz2.unshift("0");

niz2.shift();

niz2.pop();

console.log(niz2);

</script>

Rad sa nizovima

Metod sort() vrši sortiranje svih elemenata niza u odnosu na

njihov sadržaj, od manje ka većoj vrednosti.


var niz2 = new Array("3","2","5","1","4");

var sortirani = niz2.sort();

console.log(sortirani);

</script>

Rad sa nizovima

U primeru, for petljom će se pristupiti svakom elementu niza, i u

svakoj iteraciji ispisati pozicija elementa kome se pristupilo, preko

promenljive i, i sadržaj tog elementa niza.


var niz2 = new Array("3","2","5","1","4");

for(var i=0; i<niz2.length; i++){

console.log("Element na poziciji " + i + " ima sadržaj " + niz2[i]);

}

</script>

Rad sa nizovima

Pored for petlje, za potrebe prolaska kroz elemente niza može se

koristiti i for-in petlja.


var imena = new Array("Milena", "Marko", "Nenad", "Ana");

for(indeks in imena){

console.log(imena[indeks]);

}

</script>

Rad sa nizovima

Definisana su dva niza, USDrzave i datumPristupanja.

Oni imaju istu dužinu, i u prvom se nalaze države u USA a u

drugom godine njihovog pristupanja.

Pozicija države u prvom nizu odgovara poziciji godini pristupanja

za tu državu u drugom.

Od korisnika se pomoću prompt() traži da unese ime države za

koju želi da dobije godinu pristupanja.

Zatim se pomoću for petlje, prolazi kroz sve elemente prvog niza,

u kome je spisak država, i pomoću if se pita da li trenutni element

niza ima vrednost kao uneti korisnički sadržaj.

Rad sa nizovima

<html>

<head>


var USDrzave = new Array(51);

USDrzave[0] = "Alabama";

USDrzave[1] = "Alaska";

USDrzave[2] = "Arizona";

USDrzave[3] = "Arkansas";

USDrzave[50] = "Wyoming";

var datumPristupanja = new Array(51);

datumPristupanja[0] = 1819;





var unetaDrzava = prompt("Unesite ime države da bi dobili datum njenog

pristupanja");

for ( var i = 0; i < USDrzave.length; i++) {

if (USDrzave[i] == unetaDrzava) {break;}

}

alert("Za drzavu " + unetaDrzava + "datum pristupanja je" + datumPristupanja[i] );

</script>

</head>

<body></body></html>

JAVASCRIPT…

Dr Nenad Kojić, dipl. inž.

Milena Vesić, spec .stuk.inž.

Danijela Nikitin, spec .stuk.inž.

Školska 2017/18. Nikola Mihajlović, spec .stuk.inž.

Luka Lukić, struk. inž.

Visoka škola strukovnih studija za informacione

i komunikacione tehnologije

javascript ii deo...sistemski dijalozi ± prompt() vizuelno se prikazuje u formi posebnog prozora,...

Documents