Prototipsko nasledjivanje

Uvod

Prototipsko nasledjivanje (eng. prototypal inheritance) je vrsta nasledjivanja gde objekat nasledjuje svojstva direktno od drugog objekta (ne od nekogo šablona tj. klase). Postoje dva osnovna mehanizma koji omogućavaju prototipsko nasledjivanje:

  1. Concatenative inheritance
    Ovaj proces se zasniva na direktnom kopiranju svojstva jednog ili više objekata u novi objekat. Treba napomenuti da je za kopiranje svojstva neophodno da enumerable deskriptor svojstva bude setovan na true. Ovaj mehanizam je prihvaćen i sa standardom ES2015, uz pomoć metode „Object.assign()“.
  2. Prototipsko delegiranje
    Ovaj proces se zasniva se na principu da se svojstva i metode nasledjuju kroz „lanac povezanih prototype objekata“ (eng. „prototype chain“).

NAPOMENA:
Uokviru standarda ES2015 je predstavljena syntax-a za kreiranje objekata preko klasa, medjutim to je samo estetska promena jer se u pozadini sav posao oko nasledivanja izvršava prema prethodno pomenutom mehanizmu „prototipsko delegiranje“.

Read more

AJAX sa plain JavaScript-om

Uvod

ajax

Ajax je skraćenica od „Asinhroni JavaScript + XML“ (iako se danas uglavnom koristi JSON), a predstavlja grupu tehnologija namenjenu za dinamičko kreiranje Web stranica. Korišćenjem AJAX-a poboljšavamo kvalitet interkativnosti sa korisnikom, uz želju da što više liči na desktop aplikacije (prema brzini interakcije). Ideja na kojoj se zasniva Ajax jeste da se stranica na kojoj se odvija Web aplikacija učita samo jednom, a da se svaka dalja komunikacija sa serverom izvršava asinhrono bez blokiranja interfejsa i bez ponovnog učitavanja čitave stranice. Asinhrono ponašanje podrazumeva da nakon interakcije korisnika sa interfejsom, zahtev ka serveru prihvata JavaScript i XMLHttpRequest objekat, koji u pozadini šalje zahteve serveru a prikazujući rezultate kada budu raspoloživi, dok korisnik u međuvremenu može da nastavi sa radom.

Ajax nije bez mana, budući da se Ajax stranice dinamički generišu najveći problem za sajtove je optimizacija za pretraživače. Pretraživači često ne mogu dobro da protumače sajt, što dovodi do problema u indeksiranju sajtova. Sličan problem postoji i sa alatima za analizu posećenosti stranica, jer korisnik može ceo dan da provede na jednoj Ajax stranici, a klasični alati za analizu posećenosti će to protumačiti kao jedno prikazivanje stranice.

Read more

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