Visoka škola strukovnih studija za informacione i komunikacione tehnologije Ispisivanje u dokumentu JavaScript, po oću DOM objekta document, ože da is

Visoka škola strukovnih studija za informacione i komunikacione tehnologije JavaScript, po oću DOM objekta document, ože da ispisuje sadržaj unutar vidljivog dela web stranica. JAVASCRIPT III deo Ova oguć ost je podrža a kroz četiri metoda: write(), writeln(), open() i close() od kojih se ajčešće koristi write(). Metod write() kao argument ože imati string ili promenljivu čiji sadržaj treba ispisati u web stranici. Školska 2017/18. Dr Nenad Kojić, dipl. inž. Milena Vesić, spec.stuk.inž. Danijela Nikitin, spec.stuk.inž. Nikola Mihajlović, spec.stuk.inž. Luka Lukić, struk. inž. 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> document.write Petrović ; <p>drugi tekst ispisan u HTML-u</p> </body> Metod write() kao argument ož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); <p>drugi tekst ispisan u HTML-u</p> </body>

Ispisivanje sa operatorom Primer: Pored jedne promenljive, oguće je koristiti i iše promenljivih sa nekim operatorom. Najčešće je to +, koji predstavlja konkatanaciju, nadovezivanje stringova, ili neki drugi operator koji se ože primeniti nad definisanim promenljivim. var ime = "Petar"; var prezime = "Petro ić"; document.write(ime + " " + prezime); var broj1 = 5; var broj2 = 12; document.write(broj1 + broj2); JavaScript ne analizira sadržaj stringa koji prosledi browser-u na ispisivanje tako da se umesto klasič og stri ga ože proslediti HTML kod Ovaj kod je sa aspekta JavaScript-a o iča 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>"); JavaScript će sadržaj etode u originalu proslediti browser-u na prikaz, ali će browser dobijanjem koda < >Petar Petro ić </ >, tekst Petar Petro ić prikazati boldovano

Ako se sada oguć ost metoda write() iskoristi za naprednije namene, npr. di a ičko pravljenje drop-down liste, zaključuje se da JavaScript ože u mnogome da automatizuje ruč o 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đuti otvoren tag option, sadržaj i zatvoren tag option, se ponavljaju. Kako smo pokazali rad sa petljama, kreiraće o 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 za rš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'>"); Princip funkcionisanja JavaScript-a for(indeks in gradovi){ document.write("<option>" + gradovi [ indeks ] + "</option>"); } document.write("</select>");

Princip funkcionisanja JavaScript-a Princip funkcionisanja JavaScript-a JavaScript koji je namenjen za realizaciju web aplikacija, kao svoje iz rš o okruže je ima ili browser (za klijentski skript) ili server (Node.js). Kada JavaScript dođe od web servera do klijenta, po oću http_request-a, browser taj kod prihvata i u prvoj fazi ga parsira što z ači da ro ser poz aje s u si taksu i pra ila upotre e o og jezika. Ukoliko postoji bilo koji problem prilikom parsiranja, kod se ne iz rša a i prijavljuje se greška. Ako su sva sintaksna pravila dobra, onda se taj kod prevodi u aši ski jezik koji je potreban raču aru da bi taj kod iz ršio i korisnik video neki konkretan efekat ili rezultat rada koda. Prilikom iz rša a ja koda, sistem kreira okruže je u kome se kod realizuje. To okruže je defi iš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 Upotreba lokalne i globalne promenljive Tako sve promenljive globalnog objekta window postaju globalne promenljive, i one su dostupne svim iži elementima DOM-a. Kako je ovo veza iz eđu objekta i njegovog svojstva definisanjem promenljive: var ime = Mila definisano je isto kao i da je kreirano svojstvo objekta window: window.ime = Mila "; 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 defi iše funkcija primer(), ona dobija poseban prostor za svoje iz rša a je i svoje promenljive, pa promenljiva koja je definisana unutar ove funkcije zitarica, postaje lokalna promenljiva, tj. dostupna samo ovoj funkciji unutar njenog okruže ja.

Upotreba lokalne i globalne promenljive Upotreba lokalne i globalne promenljive 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đuti, 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(); console.log(ime + " voli " + zitarica); 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, o a funkcija ima roditeljsku funkciju unutar koje je kreirana, i to je vrlo bitno Scope. Ug ježda a je funkcija kreira se Scope chain, tj. niz Scope-ova Ovo pravilo je jednostavno: uvek dete funkcija, tj. dete Scope ože da pristupi svojim promenljivima i promenljivima svojih roditelja, dok roditeljski Scope ne vidi promenljive svoje dece. Ako pogledamo sledeći kod, za njega ože o da napravimo grafički prikaz Scope-ova u odnosu na kreirane funkcije i tako defi iše o koja funkcija ima pristup kom Scope-u

Primer funkcionisanja Scope-a var ime = "Milan"; function primer(){ var zitarica = "ovas"; console.log(ime + " voli " + zitarica); 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); Na sledećoj sli i je defi isa o koji prostor vidi koje promenljive, pa se još jednom aglaša a 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 aži. Sledeći korak je o jaš je je promenljivih sa istim imenom u različiti 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.

Metode za rad sa datumom i vremenom Metode za rad sa datumom i vremenom U JavaScript-u postoji oguć ost 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 ože se posmatrati kroz dva pravca delovanja: njihovo dohvatanje (get) i postavljanje (set). Po oću new Date(); pravi se objekat klase Date i dohvata se celokupan zapis, sa svim detaljima o sistemskom datumu i vremenu. S ešta je svih ovih podataka u lokalnu promenljivu, i primenom posebnih metoda (npr. gethours()), izdvajaju se pojedi ač e informacije od z ačaja (broj sati, dan, godina, broj minuta, itd.). Npr, koliko je trenutno sati dobijamo po oću: var datum = new Date(); var sat = datum.gethours(); Spisak metoda za rad sa vremenom Spisak metoda za rad sa datumom Za rad sa vremenom ajčešće koristimo: gethours() - raća broj sati (0-23) getminutes() - raća broj minuta (0-59) getseconds() - raća broj sekundi (0-59) getmilliseconds() - raća broj millisekundi (0-999) now() - vraća broj milisekundi poče od Januara 1970. do sada gettime() - raća broj milisekundi od Januara 1970. do zadatog datuma Za rad sa datumima i danima, ajčešće koristimo: getdate() - raća broj dana u mesecu (1-31) getmonth() - raća broj meseci (0-11) getfullyear() - raća tekuću godinu getday() - raća broj dan u nedelji (0-6) Posebnu paž ju treba obratiti na broj meseci u godini (getmonth()), jer se vraća broj u intervalu 0-11, što je drugačije od aše svakodnevne komunikacije koja je bazirana na intervalu 1-12, pa dobijenu vrednost treba uvećati za jedan da bi se dobila aš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 Primer dohvatanja datuma 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 iz eđu reči get i onoga što se traži, pa tako imamo: getutcdate(), getutcday(), getutchours() itd. Ako pretpostavimo da se naredni kod pokreće u nedelju 6.8.2017. u 19:21:05 tada imamo sledeći rezultat: var datum = new Date(); 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/>"); Metode za setovanje datuma i vremena Primer setovanja datuma Prefiks get u svim navedenim metodama ukazuje da se radi o dohvatanju podataka sa klijentskog raču ara, onakvim kako se kod klijenta nalaze. Za skoro sve navedene metode ože se koristiti prefiks set umesto get sa ciljem da se vreme koje je dobijeno promeni na želje u 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()... Ako pretpostavimo da se dati kod pokreće u nedelju 6.8.2017. u 19:33:23 tada imamo sledeći rezultat: var datum = new Date(); datum.setdate(5); datum.sethours(18); document.write(datum);

Metode za rad sa stringovima i brojevima 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 Određi a je duži e stringa: length Određi a je karaktera unutar stringa na osnovu pozicije: charat() Svojstvo length se koristi za određi a je duži e stringa koja je realan broj karaktera koji se u stringu nalazi, pa se broje poče 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 Metod charat() dohvata karakter koji se nalazi na određe oj poziciji u stringu. Elementi niza se u erišu poče 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 ć

Određi a je pozicije datog stringa u eće stringu: indexof() Ovaj metod će pro aći prvo pojavljivanje datog stringa, unutar ećeg stringa, i vratiti poziciju prvog karaktera za traže i string. Ukoliko traže og stringa ili karaktera nema ratić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(y); // ispisuje 1 console.log(z); // ispisuje 2 Metod lastindexof() radi pretragu na isti ači kao metod indexof(), ali poče od kraja stringa pa prema početku. I metod indexof() i lastindexof() pronalaskom prvog traže og karaktera ili stringa prekidaju svoj rad i ispisuju rezultat. Ukoliko se ne želi ogra ičiti samo na prvo tj. poslednje pojavljivanje stringa u reči, oguće je, u oba metoda, staviti drugi argument koji će definisati od koje pozicije se kreće u traže je zadatog stringa. var a = "Pera ide rado u skolu"; var x = a.indexof("a", 5) ; var y = a.lastindexof("o", 19) ; console.log(x); //ispisuje se 10 console.log(y); //ispisuje se 18 Isecanje dela stringa iz eć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če od pozicije x a u duži i od y karaktera, koristi se metod substr(x,y). U ko ač i skup ulazi karakter sa prve pozicije, ali ne i poslednji. Metodi substring i slice su skoro ide tič i. var a = "Pera ide rado u skolu"; var x = a.substring(5,7); var y = a.substr(5,2); console.log(x); // ispisuje id console.log(y); // ispisuje id Zamena stringa sa drugim stringom replace() Ovaj metod ima dva argumenta, prvi koji defi iše šta treba pro aći, i drugi koji defi iše či e pro ađe o treba zameniti. var a = "Pera ide rado u skolu"; var x = a.replace("rado", "često"); console.log(x);

Metode za rad sa brojevima Podela stringa u formu niza: split() Ovaj metod originalni string secka u odnosu na neki definisani separator, pri če u se separator gubi a svi dobijeni delići stringa se s eštaju u posebne elemente niza. var a = "Pera ide rado u skolu"; var x = a.split("a"); console.log(x); Najčešće se koriste karakteristič e ate atičke funkcije ili funkcije koje su pogodne za obradu u raču arsko sistemu. Zato se često koristi objekat Math, i njemu pripadajući metodi. Generisanje slučaj og broja: random() Ovaj metod služi za slučaj o generisanje broja u intervalu [0-1]. var a = Math.random(); console.log(a); // npr. 0.6351390991512158 Metode za rad sa brojevima Metode za rad sa brojevima Određi a je 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 console.log(y); // ispisuje 97 Zaokruži a je decimalnog broja na aj liži ceo broj: round() var x = Math.round(4.7); var y = Math.round(4.4); console.log(x); // ispisuje 5 console.log(y); // ispisuje 4 Zaokruži a je decimalnog broja na prvi iši ceo broj: ceil() var x = Math.ceil(4.7); console.log(x); // ispisuje 5

Metode za rad sa brojevima Zaokruži a je decimalnog broja na prvi iži ceo broj: floor() var x = Math.floor(4.7); console.log(x); // ispisuje 4 Primenom ovih metoda ože se dobiti veliki spektar realno potrebnih funkcionalnosti. Visoka škola strukovnih studija za informacione i komunikacione tehnologije JAVASCRIPT var x = Math.floor(Math.random() * 11); console.log(x); // ispisuje slučaja broj u intervalu od [0-10] Školska 2017/18. Dr Nenad Kojić, dipl. inž. Milena Vesić, spec.stuk.inž. Danijela Nikitin, spec.stuk.inž. Nikola Mihajlović, spec.stuk.inž. Luka Lukić, struk. inž.