JAVASCRIPT III deo · pripada DOM objektu window , i tretira se kao globalni ... svojih roditelja , dok roditeljski Scope ne vidi promenljive Äsvoje dece ³ Ako pogledamo VOHGHüL

JAVASCRIPT III 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

Ispisivanje u dokumentu

JavaScript, pomoću DOM objekta document, može da ispisuje sadržaj unutar vidljivog dela web stranica.

Ova mogućnost je podržana kroz četiri metoda: write(), writeln(), open() i close() od kojih se najčešće koristi write().

Metod write() kao argument može imati string ili promenljivu čiji sadržaj treba ispisati u web stranici.

Ovaj sadržaj se korisniku prikazuje na mestu na kome se nalazi linija koda document.write() u odnosu na prethodne ili naredne linije koda.


Primer:

<body>

<h1>Tekst ispisan u HTML-u</h1>

<script type="text/javascript">

document.write(“Petrović”); </script>

<p>Drugi tekst ispisan u HTML-u</p>

</body>


Metod write() kao argument može imati string ili

promenljivu čiji sadržaj treba ispisati u web stranici.

<body>

<h1>Tekst ispisan u HTML-u</h1>


var ime = "Petar";

document.write(ime);

</script>

<p>Drugi tekst ispisan u HTML-u</p>

</body>

Ispisivanje sa operatorom

Pored jedne promenljive, moguće je koristiti i više

promenljivih sa nekim operatorom.

Najčešće je to +, koji predstavlja konkatanaciju,

nadovezivanje stringova, ili neki drugi operator koji se može

primeniti nad definisanim promenljivim.


Primer:


var ime = "Petar";

var prezime = "Petrović";

document.write(ime + " " + prezime);

var broj1 = 5;

var broj2 = 12;

document.write(broj1 + broj2);

</script>


JavaScript ne analizira sadržaj stringa koji prosledi browser-

u na ispisivanje tako da se umesto klasičnog stringa može proslediti HTML kod

Ovaj kod je sa aspekta JavaScript-a običan string, ali

njegovim ispisivanjem u browser-u, browser prepoznaje

HTML tagove i interpretira ih u skladu sa standardnim

pravilima.


Primer


document.write("<b>Petar Petrović </b>");

</script>

JavaScript će sadržaj metode u originalu proslediti browser-u

na prikaz, ali će browser dobijanjem koda <b>Petar Petrović </b>, tekst Petar Petrović prikazati boldovano


Ako se sada mogućnost metoda write() iskoristi za

naprednije namene, npr. dinamičko pravljenje drop-down

liste, zaključuje se da JavaScript može u mnogome da

automatizuje ručno pisanje HTML koda.

Ako se analizira HTML kod drop-down liste, zaključuje se da

prva i poslednja linija koda, tj. otvaranje i zatvaranje taga

select su vrlo jedinstveni.

Međutim otvoren tag option, sadržaj i zatvoren tag option,

se ponavljaju.


Kako smo pokazali rad sa petljama, kreiraćemo petlju koja

će u svakoj iteraciji rada ispisivati jedan option element, i

unutar njega upisati podatak iz niza.

Za ovo će se iskoristiti for-in petlja, koja u sebi ima samo

jednu liniju koda, za ispis elementa option.

Pre petlje, kao i po završetku iste, potrebno je ispisati u

jednoj liniji koda otvoren tj. zatvoren tag select.


Primer ispisivanja drop down liste


var gradovi = new Array("Beograd", "Kragujevac", "Niš");

document.write("<select name='gradovi'>");

for(indeks in gradovi){

document.write("<option>" + gradovi [ indeks ] + "</option>");

}

document.write("</select>");

</script>

Princip funkcionisanja

JavaScript-a

Princip funkcionisanja JavaScript-a

JavaScript koji je namenjen za realizaciju web aplikacija, kao svoje izvršno okruženje ima ili browser (za klijentski skript) ili server (Node.js).

Kada JavaScript dođe od web servera do klijenta, pomoću http_request-a, browser taj kod prihvata i u prvoj fazi ga parsira što znači da browser poznaje svu sintaksu i pravila upotrebe ovog jezika.

Ukoliko postoji bilo koji problem prilikom parsiranja, kod se ne izvršava i prijavljuje se greška. Ako su sva sintaksna pravila dobra, onda se taj kod prevodi u mašinski jezik koji je potreban računaru da bi taj kod izvršio i korisnik video neki konkretan efekat ili rezultat rada koda.

Princip funkcionisanja JavaScript-a

Prilikom izvršavanja koda, sistem kreira okruženje u kome se

kod realizuje.

To okruženje definiše oblast delovanja i prostor u kome su

pojedine promenljive dostupne za pojedine delove koda

Tako, ako se kreira neki kod, bilo gde van funkcije, taj kod

pripada DOM objektu window, i tretira se kao globalni

objekat.

Upotreba lokalne i globalne promenljive

Tako sve promenljive globalnog objekta window postaju

globalne promenljive, i one su dostupne svim „nižim“ elementima DOM-a.

Kako je ovo veza između objekta i njegovog svojstva

definisanjem promenljive:

var ime = “Milan”

definisano je isto kao i da je kreirano svojstvo objekta

window:

window.ime = “Milan";


Ukoliko je kod napisan unutar funkcije, onda se za tu

funkciju pravi poseban prostor u kome se skladište njene

promenljive, tako da njene promenljive nisu vidljive u

globalnom prostoru, i njih nazivamo lokalnim

promenljivima.

Ako se definiše funkcija primer(), ona dobija poseban

prostor za svoje izvršavanje i svoje promenljive, pa

promenljiva koja je definisana unutar ove funkcije zitarica,

postaje lokalna promenljiva, tj. dostupna samo ovoj funkciji

unutar njenog okruženja.


Ako se unutar funkcije ispiše sadržaj globalne i lokalne

promenljive, to će biti regularno jer je globalna promenljiva

ime, dostupna i unutar lokalnog prostora funkcije.

Međutim, ako se izvan funkcije ispisuje sadržaj obe

pomenute promenljive, doći će do greške, jer će promenljiva

ime biti dostupna, ali promenljiva zitarica nije dostupna u

globalnom prostoru, jer je van tela funkcije u kojoj je

kreirana.


Primer:


var ime = "Milan";

function primer(){

var zitarica = "ovas";

console.log(ime + " voli " + zitarica);

}

primer();


</script>

Princip funkcionisanja Scope-a

Termin Scope, ukazuje na prostor unutar koga su kreirane

promenljive dostupne.

U JavaScript-u samo funkcija kreira novi Scope, dok u

nekim drugim jezicima to mogu da urade: for, while, if...

Ukoliko funkcija, unutar svog koda, kreira novu funkciju, ta

nova funkcija takođe kreira Scope.

Takođe, nova funkcija ima roditeljsku funkciju unutar koje je

kreirana, i to je vrlo bitno Scope.


Ugnježdavanje funkcija kreira se Scope chain, tj. niz

Scope-ova

Ovo pravilo je jednostavno: uvek „dete“ funkcija, tj. dete

Scope može da pristupi svojim promenljivima i promenljivima

svojih roditelja, dok roditeljski Scope ne vidi promenljive

„svoje dece“.

Ako pogledamo sledeći kod, za njega možemo da napravimo

grafički prikaz Scope-ova u odnosu na kreirane funkcije i

tako definišemo koja funkcija ima pristup kom Scope-u

Primer funkcionisanja Scope-a


var ime = "Milan";

function primer(){

var zitarica = "ovas";


primer1();

function primer1(){

var dodatak = "med";

console.log(ime + " voli " + zitarica + " i " + dodatak); }

}

primer();

function primer2(){

var vreme = "proleće";

console.log(ime + " voli " + vreme); }

primer2();

console.log(ime + " voli " + zitarica + " u " + vreme);

</script>


Na sledećoj slici je definisano koji prostor vidi koje

promenljive, pa se još jednom naglašava da globalni

prostor vidi samo promenljivu ime, koja je u njemu i

definisana, dok scope funkcije primer1(), vidi promenljivu

ime, kao globalnu, promenjivu zitarica, kao promenljivu

njegovog roditelja i svoju lokalnu promenljivu dodatak.

Ovakav pristup je opis termina Scope chain, kojim scope-ovi

imaju pristup promenljivima koji su definisani unutar njih i

njihovih roditelja, dok obrnuto ne važi.



Sledeći korak je objašnjenje promenljivih sa istim imenom u

različitim scope-ovima

Ako se prethodni kod modifikuje sa jednom linijom koda

var ime = "Ana";

Kojom se u funkciji primer() dodaje nova promenljiva ime,

postavlja se pitanje gde će se njen uticaj pojaviti.

Ovo treba posmatrati jedino kroz aspekt scope-ova. Njen

uticaj će biti samo tamo gde je njen scope.

Princip funkcionisanja Scope-a <script type="text/javascript">

var ime = "Milan";

function primer(){

var ime = "Ana"; var zitarica = "ovas";


primer1();

function primer1(){

var dodatak = "med";

console.log(ime + " voli " + zitarica + " i " + dodatak); }

}

primer();

function primer2(){

var vreme = "proleće";

console.log(ime + " voli " + vreme); }

primer2();

console.log(ime + " voli " + zitarica + " u " + vreme);

</script>


To znači da će prilikom ispisa, unutar funkcije primer() i

primer1(), promenljiva ime imati vrednost Ana, jer je tu

oblast njenog delovanja.

Ovaj prostor je dobio novu promenljivu ime pomoću var, sa

vrednošću Ana, i sada je ovo nova lokalna promenljiva

Van scope-a u kome deluje funkcija primer(), sadržaj Ana ne

postoji i to je slučaj sa ispisom u funkciji primer2(), gde se

ispisuje promenljiva ime, koja pripada globalnom scope-u, sa

svojim sadržajem Milan.


Da je na istom mestu napisana ova linija koda:

ime = "Ana";

Tada bi situacija bila potpuno drugačija. U ovom slučaju, nema reči var, pa nema kreiranja nove promenljive, nego se

pristupa postojećoj promenljivoj ime, koja je globalna, i sada

se u nju upisuje nova vrednost tj. vrednost Ana.

Kako je promenljiva ime globalna, ona se nalazi u scope-u

funkcije primer, i ona ima pravo da joj pristupi i modifikuje.


Modifikacija se odnosi na globalnu promenljivu pa je njena

promena izvršila uticaj na sva mesta gde se ova promenljiva

poziva, a to je u ovom slučaju i scope funkcije primer2. Tako

će sada kod ispisa biti prikazano:

Metode za rad sa

datumom i vremenom

Metode za rad sa datumom i vremenom

U JavaScript-u postoji mogućnost dohvatanja informacije o svim

detaljima vezanim za sistemski datum i vreme (dan, sat, minut,

godina, mesec, ime dana, vremenska zona, PM/AM, itd.).

Rad sa ovim podacima može se posmatrati kroz dva pravca

delovanja: njihovo dohvatanje (get) i postavljanje (set).

Pomoću new Date(); pravi se objekat klase Date i dohvata se

celokupan zapis, sa svim detaljima o sistemskom datumu i

vremenu.

Smeštanjem svih ovih podataka u lokalnu promenljivu, i primenom

posebnih metoda (npr. getHours()), izdvajaju se pojedinačne

informacije od značaja (broj sati, dan, godina, broj minuta, itd.).

Npr, koliko je trenutno sati dobijamo pomoću:

var datum = new Date();

var sat = datum.getHours();

Spisak metoda za rad sa vremenom

Za rad sa vremenom najčešće koristimo:

getHours() - vraća broj sati (0-23)

getMinutes() - vraća broj minuta (0-59)

getSeconds() - vraća broj sekundi (0-59)

getMilliseconds() - vraća broj millisekundi (0-999)

now() - vraća broj milisekundi počev od Januara 1970. do sada

getTime() - vraća broj milisekundi od Januara 1970. do zadatog

datuma

Spisak metoda za rad sa datumom

Za rad sa datumima i danima, najčešće koristimo:

getDate() - vraća broj dana u mesecu (1-31)

getMonth() - vraća broj meseci (0-11)

getFullYear() - vraća tekuću godinu

getDay() - vraća broj dan u nedelji (0-6)

Posebnu pažnju treba obratiti na broj meseci u godini (getMonth()),

jer se vraća broj u intervalu 0-11, što je drugačije od naše

svakodnevne komunikacije koja je bazirana na intervalu 1-12, pa

dobijenu vrednost treba uvećati za jedan da bi se dobila naša

notacija meseca.

Sa druge strane, broj dana u nedelji (getDay()) je u intervalu 0-6, gde

0 ukazuje na nedelju, 1 na ponedeljak dok 6 ukazuje na subotu.

Metode sa UTC

Za skoro sve definisane metode postoje i njihovi “dvojnici” za

dobijanje informacija u skladu sa tzv. Universal Time

(univerzalno kompjutersko vreme).

Imena ovih metoda imaju UTC između reči get i onoga što se

traži, pa tako imamo:

getUTCDate(),

getUTCDay(),

getUTCHours() itd.

Primer dohvatanja datuma

Ako pretpostavimo da se naredni kod pokreće u nedelju 6.8.2017. u

19:21:05 tada imamo sledeći rezultat: <script type="text/javascript">


var datum_dan = datum.getDate();

document.write("Sada je datum: " + datum_dan + "<br/>");

var dan = datum.getDay();

document.write("Sada je redni broj dana u nedelji: " + dan + "<br/>");

var mesec = datum.getMonth();

document.write("Sada je redni broj meseca: " + mesec + "<br/>");

var godina = datum.getFullYear();

document.write("Sada je godina: " + godina + "<br/>");

var sat = datum.getHours();

document.write("Sada je sati: " + sat + "<br/>");

var minut = datum.getMinutes();

document.write("Sada je minuta: " + minut + "<br/>");

var sekund = datum.getSeconds();

document.write("Sada je sekundi: " + sekund + "<br/>");

</script>

Metode za setovanje datuma i vremena

Prefiks get u svim navedenim metodama ukazuje da se radi o

dohvatanju podataka sa klijentskog računara, onakvim kako se kod

klijenta nalaze.

Za skoro sve navedene metode može se koristiti prefiks set umesto

get sa ciljem da se vreme koje je dobijeno promeni na željenu

vrednost tj. setuje na željenu vrednost koja je na nivou koda.

Tako imamo: setDate(), setMonth(), setFullYear(), setHours(),

setMinutes(),setSeconds(),setTime(),setYear(), setUTCHours(),

setUTCMinutes(), setUTCMonth(), setUTCFullYear()...

Primer setovanja datuma

Ako pretpostavimo da se dati kod pokreće u nedelju 6.8.2017. u

19:33:23 tada imamo sledeći rezultat:



datum.setDate(5);

datum.setHours(18);

document.write(datum);

</script>

Metode za rad sa

stringovima i brojevima

Metode za rad sa stringovima

Konverzija u velika ili mala slova:

toUpperCase()

toLowerCase()


var ime = "Pera";

var x = "MIKA".toLowerCase() ;

var y = ime.toLowerCase();

var z = ime.toUpperCase();

console.log(x); // ispisuje mika

console.log(y); //ispisuje pera

console.log(z); // ispisuje PERA

</script>


Određivanje dužine stringa:

length

Svojstvo length se koristi za određivanje dužine stringa koja je

realan broj karaktera koji se u stringu nalazi, pa se broje počev od

jedan.


var a="Pera";

var b="Mika Mikić";

var x = a.length ;

var y = b.length ;

console.log(x); // ispisuje 4

console.log(y); // ispisuje 10

</script>


Određivanje karaktera unutar stringa na osnovu pozicije:

charAt()

Metod charAt() dohvata karakter koji se nalazi na određenoj poziciji u stringu.

Elementi niza se numerišu počev od vrednosti 0.


var a="Pera Perić";

var x = a.charAt(2);

var y = a.charAt(9);

console.log(x); // ispisuje r

console.log(y); // ispisuje ć

</script>


Određivanje pozicije datog stringa u većem stringu:

indexOf()

Ovaj metod će pronaći prvo pojavljivanje datog stringa, unutar

većeg stringa, i vratiti poziciju prvog karaktera za traženi string.

Ukoliko traženog stringa ili karaktera nema vratiće se vrednost -1.


var a = "Pera ide rado u skolu";

var x = a.indexOf("z") ;

var y = a.indexOf("e") ;

var z = a.indexOf("ra") ;

console.log(x); // ispisuje -1


console.log(z); // ispisuje 2

</script>


Metod lastIndexOf() radi pretragu na isti način kao metod

indexOf(), ali počev od kraja stringa pa prema početku.

I metod indexOf() i lastIndexOf() pronalaskom prvog traženog

karaktera ili stringa prekidaju svoj rad i ispisuju rezultat.

Ukoliko se ne želi ograničiti samo na prvo tj. poslednje

pojavljivanje stringa u reči, moguće je, u oba metoda, staviti drugi

argument koji će definisati od koje pozicije se kreće u traženje

zadatog stringa.



var x = a.indexOf("a", 5) ;

var y = a.lastIndexOf("o", 19) ;

console.log(x); //ispisuje se 10

console.log(y); //ispisuje se 18

</script>


Isecanje dela stringa iz većeg stringa:

substring(), slice(), substr()

Za isecanje grupe karaktera od pozicije x do pozicije y koristimo

metod substring(x,y).

Za isecanje grupe karaktera, počev od pozicije x a u dužini od y

karaktera, koristi se metod substr(x,y).

U konačni skup ulazi karakter sa prve pozicije, ali ne i poslednji.

Metodi substring i slice su skoro identični. <script type="text/javascript">


var x = a.substring(5,7);

var y = a.substr(5,2);

console.log(x); // ispisuje id

console.log(y); // ispisuje id

</script>


Zamena stringa sa drugim stringom

replace()

Ovaj metod ima dva argumenta, prvi koji definiše šta treba

pronaći, i drugi koji definiše čime pronađeno treba zameniti.



var x = a.replace("rado", "često");

console.log(x);

</script>


Podela stringa u formu niza:

split()

Ovaj metod originalni string „secka“ u odnosu na neki definisani

separator, pri čemu se separator „gubi“ a svi dobijeni delići stringa

se smeštaju u posebne elemente niza.



var x = a.split("a");

console.log(x);

</script>

Metode za rad sa brojevima

Najčešće se koriste karakteristične matematičke funkcije ili

funkcije koje su pogodne za obradu u računarskom sistemu.

Zato se često koristi objekat Math, i njemu pripadajući metodi.

Generisanje slučajnog broja:

random()

Ovaj metod služi za slučajno generisanje broja u intervalu [0-1].


var a = Math.random();

console.log(a); // npr. 0.6351390991512158

</script>


Određivanje maksimalne i minimalne vrednosti skupa:

min() i max()

Ove metode pronalaze minimalnu i maksimalnu vrednost u skupu

argumenata.


var x = Math.min(0, 97, 8, 34, 44, -14, -1);

var y = Math.max(0, 97, 8, 34, 44, -14, -1);

console.log(x); // ispisuje -14


</script>


Zaokruživanje decimalnog broja na najbliži ceo broj:

round()


var x = Math.round(4.7);

var y = Math.round(4.4);



</script>

Zaokruživanje decimalnog broja na prvi viši ceo broj:

ceil()


var x = Math.ceil(4.7);


</script>


Zaokruživanje decimalnog broja na prvi niži ceo broj:

floor()


var x = Math.floor(4.7);


</script>

Primenom ovih metoda može se dobiti veliki spektar realno

potrebnih funkcionalnosti.


var x = Math.floor(Math.random() * 11);

console.log(x); // ispisuje slučajan broj u intervalu od [0-10]

</script>

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

Documents

JAVASCRIPT III deo · pripada DOM objektu window , i tretira se kao globalni ... svojih roditelja , dok roditeljski Scope ne vidi promenljive Äsvoje dece ³ Ako pogledamo VOHGHüL