Cross Domain DATA Request

Definicija

Cross Domain Data Request predstavlja specifičan zahtev za podacima, jer se podaci ne nalaze na domenu (protokolu ili portu) odakle potiče i sam zahtev.

cors

Podrazumevano ponašanje servera je da ne dozvoljavaju pristup podacima sa drugih servera, a glavni razlog ove zabrane je mogućnosti da se vrše napredni zahtevi (POST, PUT i DELETE itd.) koji mogu dovesti do raznih bezbednosnih problema. Stoga su i AJAX zahtevi podrazumevano zabranjeni, a to ogranicenje je poznato pod nazivom the same origin policy (srp. polisa zajedničkog porekla).
Medjutim neke vrste resursa ipak ne podležu ovoj zabrani, jer im pregledači podrazumevano dozvoljavaju pristup. Resurse koji se ne nalaze na domenu odakle potiče i sam zahtev je dozvoljeno pozvati jedino kroz „src“ ili „href“ atribute sledećih HTML elemenata: <script>, <img>, <video>, <iframe>.

Postoje rešenja i za zahteve kod kojih važi zabrana „the same origin policy„, ali to podrazumeva korišćenje specifičnih mehanizama. Upravo o tim mehanizmima je reč u ovom članku.

Read more

Princip rada asinhronog JavaScript-a

Uvod Pri sinhronom izvršavanju operacija, trenutna operacija mora da se završi da bi naredna počela da se izvršava. Dok kod asihronog izvršavanja, operacije ne čekaju jedna drugu da se izvrše, nego se izvršavaju istovremeno. Generalno u većini slučajeva sinhronomi procesi nisu problem jer su kompjuteri veoma brzi pa se sve operacije izvršavaju skoro instant. Medjutim … Read more

JS snippets u radu sa DOM-om

Uvod

U ovome članku sam pokušao da sakupim JavaScript isečke koda (eng. code snippets), koji mogu biti korisni u svakodnevnom radu sa DOM-om. Skoro svi snippet-i su napisani u dve verzije, koristeći samo plain JavaScript ili uz pomoć jQuery biblioteke.

js iseci koda - code snippets

Document Ready

U sledećim primerima je prikazan „event listener“ koji čeka trenutak kada je DOM učitan da bi JavScript mogao sa njim da manipuliše. Isto bi se dobilo kada bi JavaScript kod stavili na kraj body-ja tj. ispred samog zatvarajućeg taga „body“.



Document Load

Dogadjaj load se „okida“ tek kad se učita cela stranica sa svim CSS stilovima, slikama



Read more

(Ne)moguće greške u JavaScript-u

Uvod

javascript error

JavaScript je specifičan programski jezik i u poredjenju sa drugim jezicima ponekad probleme rešava na drugačiji način od očekivanog, ali to ne znači da je taj način i pogrešan. Iza svake „čudne“ odluke vezane za sintaksu jezika stoji dobar razlog zbog čega je tim koji radi na razvoju JavaScript-a baš nju izabrao. Da bi se razumele specifičnosti jezika potrebno je temeljno proučiti sintaksu i principe rada jezika. Postoji jedan manji broj nelogičnosti koje i dalje ne mogu tako lako da „svarim“, ali niko nije savršen pa tako ni JavaScript. Smatra se da programeri koji dodju u kontakt sa JavaScript-om kao drugim jezikom imaju malo više problema da se prilagode, jer očekuju iste principe kao u svom omiljenom programskom jeziku ali i ih ovde ne nalaze. U ovom članku sam sakupio potencijalne (ne)iznudjene greške koje može da napravi običan JavaScript smrtnik. Članak će se redovno ažurirati kako budem grešio 🙂

Read more

Pregled objekata ugradjenih u okruženje (Browser & node)

Uvod

js this

JavaScript je skriptni jezik „smešten“ u neki kontejner koji mu omogućava rad (pročitaj više o JS okruženju u članku JS okruženje). Taj kontejner (browser ili node.js) sadrži objekte koji omogućavaju komunikaciju JavaScript-a sa spoljnim svetom. Ti objekti su poznati pod nazivom „external API“ ili „Web API“. Spisak svih Web API-ja možete pogledati na stranici https://developer.mozilla.org/en-US/docs/Web/API. U naredno delu sam pokušao da okupim na jednom mestu najčešće korišćene objekte i njihove metode i svojsva.

Read more

Dogadjaji u JavaScript-u

Uvod

Događaji su pojave, koje su najčešće rezultat nečega što korisnik uradi (klik mišem, klik na tastaturi, drag and drop….), mada mogu biti izazvane i od strane sistema, browsera… Registrovanje dogadjaja na nekom HTML elementu podrazumeva vezivanje osluškivača dogadjaja (eng. event listener) za HTML elemenat i definisanje posledice tog događaja. Event listener nakon izvršenog dogadjaja poziva na akciju obrađivače događaja (eng. event handler). Event handler je callback funkcija koja se aktivira kao posledica nekog dogadjaja.

Read more

Petlje i iteracije u JavaScript-u

Standardne petlje

petlja

Često se javlja potreba da se unutar programa neke linije koda izvršavaju više puta. Ovaj način izvršavanja se ostvaraju pomoću odgovarajućih upravljačkih struktura. Petlje i iteracije su osnovni gradivni element svakog programa. Standardne petlje se javljaju manje više u istom obliku u skoro svim programskim jezicima. Najkorišćenija je „for petlja“. Posebnu pažnju treba obratiti na while petlje jer postoji mogućnost da petlja usled lošeg izbora uslova postane beskonačna.

„while“ petlja

While izraz se izvršava sve dok je uslov TRUE, a ukoliko nije onda se izlazi iz petlje. Ovaj tip petlje se najčešće koristi kada se ne zna tačan broj izvšenja petlje. U slučaju da uslov na samom početku nije ispunjen, petlja se ne izvršava ni jednom. Pre ulaska u petlju vrši se inicijalizacija promenljivih koje će biti korišćene bilo u uslovu, bilo u telu petlje. U telu petlje se nalazu kod koji formira uslov za ostanak u petlji.

Ovaj tip je nazvan „pre-test loop“ jer se uslov izvršava pre bloka sa izrazom.

Read more

Šta su JavaScript closure?

Definicija i karakteristike

closure in debiger

Poznata je činjenica da kada se završi funkcija, sve njene lokalne promenljive pokupi garbage collector i one prestaju da postoje u memoriji. Medjutim to nije slučaj za funkciju koja unutar sebe sadrži closure funkciju.

Closure su funkcije koje imaju pristup promenjivima koje se nalaze u domenu druge funkcije. Ovo se najčešće postiže ugradjivanjem funkcije unutar druge funkcije (čime se definiše „scope chain“), nakon čega closure dobija sposobnost da zapamti referencu na promenjive iz parent domena.

Treba napomenuti da se promenjive spoljne funkcije ne brišu po izvršavanju same funkcije, već se čuvaju u memoriji da bi bile dostupne closure funkciji. Nakon izvršenja closure funkcije, zatvara se i spoljna funkcija (odatle i naziv „closure„). Dok god se closure ne izvrše, JavaScript će čuvati i potrebne promenjive iz domena drugih funkcija, stoga one zauzimaju više memorije nego obične funkcije. Preterano korišćenje closure može da dovede do povećenja potrošnje memorije. Najnoviji JavaScript engine uspevaju da delimično oslobode zarobljenu memoriju, ali je i dalje stoji preporuka da se bude pažljiv pri korišćenju closure.

U sklopu debuger-a ugradjenog u browseru, može da se vidi closure izraz i koja je vrednost pormenjive „zapamćena“ (pogledaj sliku).

Primer standardne closure f-je

Funkcija b() je ugnježdena unutar funkcije a() i duž „scope chain“ potražuje promenjivu iz funkcije a(), stoga je ona klasičan primer closure funkcije.

Nije svaka ugnježdena funkcija i closure

Ukoliko unutrašnja funkcija ne koristi promenjivu iz spoljnih funkcija u kojim se nalazi (duž „scope chain“), to onda nije closure. Pogledaj naredni primer:

Closure pamti promenjive iz spoljne funkcije čak iako je spoljna fukcija izvršena

Poznato je da se nakon korišćenja naredbe return prekida izvršenje funkcije i postojanje njenih promenjivih u privremenoj memoriji. Medjutim „Closure“ pamti promenjive iz spoljne funkcije čak iako je vratila neku vrednost sa return.

Closure „pamti“ referencu na koju ukazuje promenjiva

Kada se kaže da „closure funkcija“ ima pristup promenjivoj pod tim se misli da ima pristup odredjenom mestu u memoriji na koju ukazuje ta promenjiva tj. njenoj referenci u trenutku pozivanja „clousure funkcije„. Ukoliko se na tom mestu u memoriji tj. referenci menja vrednost, clousure će uvek uzeti najnoviju trenutnu vrednost. U narednom primeru se vidi kako unutrasnja funkcija „pamti“ referencu i koristi trenutnu vrednost u memoriji.

Redeklarisanje promenjive

Ako nakon definisanja clousure, promenjivoj koja je potrebna closure dodelimo neku drugu referencu (mesto u memoriji koje čuva neku vrednost), clousure će da koristi referencu koja je bila u opticaju u trenutku definisanja clousure. U sledećem primeru, funkcija sayHello() u trenutku definisanja „pamti“ referencu na globalnu promenjivu „myName“ („Dragoljub“). Pa iako „myName“ menja referencu koja sada sadrži vrednost „Marko“, closure i dalje koristi vrednost „Dragoljub“.

Medjutim to ne znači da closure pamti prvu definisanu vrednost neke promenjive, već pamti definisanu vrednost promenjive u trenutku definisanja closure. Pa tako u sledećem primeru funkcija vraća „Marko“

NAPOMENA:
Kada se koristi ključna reč „new“ za kreiranje objekta unutar neke spoljne funkcije, TO NE KREIRA CLOSURE i nova funkcija nema referencu na lokalnu promenjivu spoljne fukncije kao closure.

Read more

Eksponencijalni operator **

Sintaksa operatora Sve do ES2016 standarda u JavaScriptu nije postojao eksponencijalni operator, već se koristila metoda Math.pow. Sada operator „**“ vraća rezultat stepenovanja osnove (prvi operand) sa eksponentom (drugim operandom): <strong>x<sup>y</sup></strong> = Math.pow(x, y) = <strong>x**y</strong> Primer

Primer Pored ovo standardnog operatora možemo da ga koristim uz operator „=“:

NAPOMENA: U JavaScriptu nije dozvoljeno pisati tzv. dvosmisleni kod, … Read more

Modularno programiranje sa ES6

Karakteristike ES6 modula

es6 modul

Sa novom verzijom JavaScript-a ES6 dolazi integrisana podrška za modularno programiranje.

  • Podržava module koji se smeštaju u datoteke – jedan modul po datoteci
  • Moduli su jedinstveni primerci, svaki modul se izvršava samo jednom (singleton model).
  • ES6 moduli mogu da rade i sinhrono i asihrono.
  • Podržava „cyclic dependencies“.
  • Sintaksa je još kompaktnija od CommonJS
  • ES moduli imaju statičku strukturu. Pošto je struktura modula nepromenjiva, često je dovoljno da se pregleda kod i shvati šta se gde importuje. Ovo nije slučaj kod dinamičke strukture, gde je često potrebno da se kod izvrši da bi se videlo šta se importuje. Eventualne greške mogu da se nadju i u vreme kompajliranja (sa modul bundler-om), jer se sve radnje vezane za import i export modula odredjuju u tom trenutku.
  • Svi uvezeni elementi su nepromenjivi iz modula koji importuje. Svaka operacija dodeljivanja vrednosti uveženom elementu bi prouzrokovala grešku (TypeError).
  • ES6 se ne pravi kopiju svojstva već deli vezu na to svojstvo. Ovo važi čak i za deljenje primitivnih svojstava („broj“ ili „string“). U narednom primeru vidimo da ukoliko matični modul promeni vrednost deljenog svojstva (promena je izvršena metodom iz matičnog modula!), modul koji je importovao to svojsto „vidi“ tu promenu.
    PRIMER
    proracun.js

    main.js

    Importujemo sve elemente koji su eksportovani iz modula „proracun.js“

    Ako bi se sada koristila promenjiva „brojač“ u nekom „trećem“ modulu imala bi vrednost 2.

Read more