JavaScript

Chrome DevTools

by

Uvod

chrome devtools

U ovome članku je napravljen pregled specijalizovanih alata u okviru „Chrome“ browsera, pod nazivom „DevTools“. Chrome DevTools su nezamenjivi set alatki namenjeni web developerima kao pomoć u svakodnevnom radu. Kroz DevTools je omogućen pregled HTML stranice i rad sa DOM elementima, kao i pristup svim CSS svojstvima elemenata.
U ovom paketu alata je naručita pažnja posvećena delu za debagovanje JavaScript koda. Koristeći ovoj alat je omogućeno definisanje raznih načina prekidanja izvršavanja progamskog koda (tzv. breakpoint), što znatno olakšava rad web developerima pri otklanjanju bagova na vebsajtovima. Pri svakom prekidu je omogućen uvid u vrednosti promenjiva kao i njenih oblasti definisanosti.
Pored ovoga postoje sekcije vezane za praćenje performansi web aplikacije, kao i pregled razmene podadaka izmedju klijenta i servera.

Read more

Tipovi podataka u JavaScriptu

by

Podela tipova podataka

tipovi podataka u javascriptu

U okviru JavaScript-a ima 7 vrsta podataka. Podaci mogu da se podele u dve grupe:
a) Podaci koji čuvaju primitivni tip vrednosti:

  • 1) string
  • 2) number
  • 3) boolean
  • 4) undefined
  • 5) null
  • 6) symbol (ES2015)

b) Podaci koji čuvaju referentni tip vrednosti:

  • 7) objekat
    • array
    • Map (ES2015)
    • WeekMap (ES2015)
    • Set (ES2015)
    • WeekSet (ES2015)

Read more

npm & yarn osnove

by

Uvod

npm vs yarn

Package manager je alat zadužen da automatizuje procese vezane za rad sa paketima. Softverski paketi se nalaze u arhivnim fajlovima, i svaki paket sadrži meta-data koji opisuju dati softver (kao što je naziv softvera, verzija i lista svih dependencies).
Najčešća primena package manager-a je kod instaliranja paketa i njihovih dependecies. Package manager eliminiše potrebu za ručnim instaliranjem softvera. Pored toga package manager može da se bavi ažuriranjem, konfigurisanjem i na kraju uklanjanjem svih tih komponenti.

Najveći package menadžer je npm, koji je primarno pravljen za node.js (serversko) okruženje, stoga da bi radio u browser-u potrebno je da se pored njega koristi module bundler (browserify ili webpack). Yarn package manager je „novi klinac je u gradu“, facebook-ovo čedo, može da koristi sve npm pakete i ima veoma sličnu sintaksu ali se smatra da brže izvršava naredbe od npm-a.

Read more

JS snippets razno (tips & tricks)

by

Pozajmljivanje metode iz drugog objekta

Metode call, apply i bind se koriste da definišu značenje rezervisane reči this, medjutim to nam takodje omogućava da sa promenom značenja „this“ objekat može da „pozajmi“ metodu drugog objekata, kao u sledećem primeru:

Čest je slučaj da se pozamljuje neka od metoda Array-a koji su ugradjenih u njegov prototype objekat.

Na ovaj način smo pozajmili Array-ovu metodu slice nekom objektu.

Read more

Simbioza JavaScripta i njegovog okruženja

by

Uvod

asnhorni JS okruzenje

JavaScript je skriptni jezik, stoga je neophodno da se „smesti“ u neki kontejner koji bi mu omogućio rad, taj kontejner se zove JS Runtime Environment (srp. okruženje). Postoje dva tipa okruženja: browser (za rad na klijentu) i node.js (za rad na serveru). Runtime Environment čine :

  1. JS Engine/Runtime
    • Heap
    • Stack
  2. External API
  3. Queue
  4. Event loop

OBJAŠNJENJE:
JavaScript je „single thread“ programski jezik i on sam ne može da izvršava više istovremenih paralelnih radnji. Ipak izvršavanje više paralelnih radnji (tzv. asihrono izvršavanje) je moguće uz medjusobnu saradnju JavaScript-a i njegovog okruženja. Više o ovome prolitajte u članku „Princip rada asinhronog JavaScript-a“.

Read more

Promise (osnove)

by

Uvod


pyramid of doom

U JavaScript-u postoji izraz za deo koda sa ugnježdenim callback funkcijama pod nazivom „callback hell“ ili „pyramid of doom“. Debagovanje takvog programskog koda pa čak i samo razumevanje je veoma otežano. Sa ES2015 standardom je došla nova syntax-a pod nazivom „promise“ (srp. obećanje), koja sa svojim API-jem obezbedjuje bolji i pregledniji način za organizovanje callback funkcija. Ovo se naručito primećuje u radu sa asinhronim operacijama jer sa promisima sintaksa veoma liči na standardnu sinhronu sintaksu.

Primer – „callback hell“

Najpoznatija i najčešća primena callback funkcija je „hendlovanje“ akcija nakon izvršenog dogadjaja. Upravo je „hendlovanje“ medjusobno zavisnih dogadjaja najčešće uzrok „callback hell-a“. U ovom primeru je prikazan izgled takvog koda:

Read more

Klase u JavaScript-u

by

Uvod

Klase u javascript-u

Klase u JavaScript-u su samo drugačiji način predstavljanja konstruktorske funkcije i metoda iz „prototype objekata“, ali bez suštinske promene samog mehanizama nasledjivanja. Pozadina nasledjivanje klasa je poznati mehanizam „delegiranje metoda“ kroz „prototype lanac nasledjivanja“.
U JavaScript-u rezervisana reč „class“ samo ukazuje na to da je upitanju specijalna vrsta funkcije, koja za razliku od obične funkcije ne može da se pozove (invoke), nego se jedino može koristiti uz rezervisanu reč „new“.
Ova funkcionalnost je ubačena u jezik sa ES2015 standardom, sa namerom da poboljša čitljivost i olakša pisanje objektno orjentisanih programa. Pri definisanju izgleda sinktakse dizajneri standarda su se vodili idejom da naprave takvu sinktaksu koja će ličiti na sinktaksu većine „klasnih“ jezika“, i tako pomoći programerima koji već programiraju u nekom „klasnom“ jeziku“ da lakše usvoje JavaScript sinktaksu.
Ako u narednim primerima uporedimo delove koda pisane različitim sintaksama, možemo uočiti da je bolja čitljivost klasne sintakse u odnosu na ES5 sintaksu:

Primer: ES5 sintaksa

Primer: Klasna sintaksa

Izgled klase je veoma sličan sintaksi kreiranja objekta prema ES5 standardu, mada je čitljiviji zbog manje redova i izbačenih nepotrebnih delova:

NAPOMENA:
Za razliku od drugih „klasnih jezika“, kreiranje objekata u Javascript-u (čak i kada se koriste klase) nije statičko tj. nije nepromenjivo nakon deklarisanja objekta. U JavaScript-u objekat nakon instanciranja ostaje „vezan“ za klasu, svojim „prototype objektom“ preko lanca nasledjivanja. Stoga, ukoliko naknadno dodamo ili promenimo neku metodu u samoj klasi, tu promenu će osetiti svaki objekat instanciran na osnovu te klase.

Read more

Prototipsko nasledjivanje

by

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

by

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