JavaScript

Modularno programiranje – eksterna sintaksa (AMD & CommonJS)

by

Uvod

Externe sintakse nisu JavaScript biblioteke, već odgovarajuće specifikacije i konvencije za definisanje modula. Eksterna sintaksa može da se koristi jedino uz pomoć modul loader-a koji joj „udahnu život“. Ako modul loader podržava sintaksu to znači da unutar sebe sadrži ugradjene metode koje su prethodno zamišljene da se koriste kroz odredjenu sintaksu.
Prednost korišćenja ovih eksternih sintaksi u odnosu na native ES5 modul patern je ta što ne zagadjuje globalni domen nazivima modula i što je omogućen rad dependencies menadžera.

  • Asynchronous Module Definition (AMD) kao što mu i samo ime kaže, podržava asihrono učitavanje modula što je pogodno za rad sa modulima u browser-u.
  • CommonJS učitava module sinhrono i zbog toga se najčešće koristi za rad sa modulima na serverskoj strani u okruženju node.js. Iako nije planiran za rad u browser-u, uz pomoć „modul bundler-a“ je moguće da prilagoditi CommonJS radu u browser-u.
  • Universal module definition (UMD) je kompatibilan i sa AMD i sa CommonJS definicijom i koristi se uglavnom ukoliko ima potrebe da se isti modul učitava na serveru i u browser-u.

OBJAŠNJENJE:
CommonJS, AMD ili UMD nisu JavaScript biblioteke. To su organizacije za standardizaciju, kao što je ECMA (definiše specifikaciju jezika za JavaScript) ili W3C (definiše JavaScript web API, kao što su DOM ili DOM događaji). Cilj CommonJS ili AMD sintaksi je definisanje API-ja za rad sa modulima.

Read more

Modularno programiranje sa ES5

by

Uvod

es5

ES5 verzija JavaScript-a nema podršku za module, ali bez obzira na to je moguće držeći se odredjenih principa napraviti aplikacije u maniru modularnog programiranja. Module sa svojim enkapsuliranim kodom kreiramo koristeći „Immediately-Invoked Function Expressions“ ili sa konstruktor funkcijom. API modula koji treba da bude javan jednostavno vratimo unutar funkcije sa rezervisanom reči return. Ovo je jednostavan šablon i može se primeniti bilo gde bez dodatnih biblioteka. U okviru jednog fajla je moguće definisati više modula.

Pored navedenih prednosti ovaj pristup ipak ima i svojih mana:

  • „zagadjivanje“ globalnog domena nazivima modula, mada je body modula skriven korišćenjem funkcija (IIFE) u lokalni domen.
  • „ručno“ odredjivanje redosleda učitavanja modula a redosled učitavanja modula može biti prilično komplikovan kod velikih i kompleksnih aplikacija.
  • nije moguće asihrono učitavanje

Ovi šabloni nisu savršeni i imaju svoje mane ali bez obzira na mane, kod je razumljiviji jer je bolje organizovan.

Read more

Uvod u modularno programiranje

by

Karakteristike modularnog programiranja

modularno programiranje kocka

Modularni koncept programiranja je trenutno jedan od najzastupljenijih koncepata u modernom programiranju sa Javascript-om. Zasniva se na razbijanju jedne velike aplikacije na manje, enkapsulirane, nezavisne delove koda – module. Cilj modularnosti jeste da se smanji kompleksnost prema principu „podeli pa vladaj“. Najznačajnije prednosti modularnog programiranja su:

  • preglednija i razumljivija aplikacija
  • lakše kontrolisanje domena promenjivih
  • sprečeno „zagadjenje globalnog domena“
  • ponovna upotrebljivost koda
  • mogućnost rada na istom projektu više različitih timova ili programera koji rade odvojene manje zadatke.
  • lakše debagovanje

Read more

Pregled ugradjenih dogadjaja u JS

by

Događaji sa mišom

Event Opis DOM
onclick The event occurs when the user clicks on an element 2
oncontextmenu The event occurs when the user right-clicks on an element to open a context menu 3
ondblclick The event occurs when the user double-clicks on an element 2
onmousedown The event occurs when the user presses a mouse button over an element 2
onmouseenter The event occurs when the pointer is moved onto an element 2
onmouseleave The event occurs when the pointer is moved out of an element 2
onmousemove The event occurs when the pointer is moving while it is over an element 2
onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children 2
onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its
children 		2
onmouseup The event occurs when a user releases a mouse button over an element 2

Događaji sa tastaturom

Event Opis DOM
onkeydown The event occurs when the user is pressing a key 2
onkeypress The event occurs when the user presses a key 2
onkeyup The event occurs when the user releases a key 2

Read more

Pregled svojstava event objekta

by

Uvod Kada god se desi neki dogadjaj (eng. event), javascript smešta sve relevantne podatke vezane za dogadjaj u „event objekat“, npr. gde je bio mouse pointer, kojim dugmetom je kliknuto, koji element je kliknut… Ovaj objekat se uvek prosledjuje callback funkciji, pa stoga callback funkcija ima pristup svim podacima smeštenim u njemu. Podacima pristupamo preko … Read more

Metode za rad sa nizovima

by

Array.from()

Korišćenjem metode „from()“ možemo od „array-like“ ili „iterable“ napraviti niz:

Read more

Pregled novih JavaScript standarda

by

Spisak novosti U ovome tekstu su izlistane sve novine koje su došle u sklopu novih JavaScript standarda, a obradjene su na sajltu webprogramiranje.org kroz različite članke: Standard Novina Članak ES2015 Novi način deklarisanja promenjivih sa ključnim rečima let & const „let & const“ ES2015 Jednostavno definisanje podrazumevanih vrednosti parametara funukcije „Podrazumevane vrednosti parametara funkcije“ ES2015 … Read more

Šta je hoisting?

by

Uvod

js this

Često se pogrešno misli da je JavaScript interpretiran programski jezik koji se interpretira tj. direktno izvršava red po red bez prethodnog kompajliranja (prevodjenja jezika na mašinski jezik). Medjutim JavaScript je programski jezik koji se kompajlira pri izvršenju koda („on the fly„). JavaScript kod se kompajlira svaki put pri izvršenju koda, tako da kvalitet i brzina odziva JavaScripta kao jezika najviše zavisi od efikasnosti Javascript engine koji vrši kompajliranje.

Hoisting promenjive

Deklarisanje i definisanje promenjive su dva različita postupka. „Deklaracija promenjive“ je postupak stvaranja promenjive, tada se definiše ime promenjive i obezbedjuje prostor za njeno skladištenje, dok je „definisanje promenjive“ postupak kada se promenjivoj dodeljuje neka vrednost koja se smešta u prostor za skladištenje.

Hoisting deklarisane promenjive

Deklaracija promenjive se izvršava pri kompajliranju koda, što znači da se pre izvršenja i jednog reda koda prvo deklarišu promenjive. U okviru JavaScript-a postoji specijalna rezervisana reč „var“ koja se koristi da deklariše promenjivu. Pošto se deklaracija promenjive dešava pre izvršavanja bilo kog dela koda sledi da je to isto kao da su promenjive deklarisane na početku koda, ovaj princip se naziva „hoisting“ (srp. dizanje).

Read more

Scope (oblast definisanosti promenjive)

by

Definicija

js this

Pojam „scope“ (oblast definisanosti promenjive) je vezan za pojam promenjive i predstavlja deo programskog koda u kojoj je neka promenjiva dostupna. Osnovna karakteristika oblasti definisanosti je granica te oblasti. Promenjivoj se može pristupiti samo ukoliko je potražujemo u okviru njene oblasti definisanosti tj. ne može se pristupiti promenjivoj ukoliko se nalazimo izvan scope-a.

Treba napomenuti da „scope“ nije isto što i „context“. Ova dva pojma se često mešaju jer imaju neke sličnosti ali treba znati da je pojam „scope“ je osobina promenjive, dok je „context“ osobina programskog koda. Tokom izvršavanja, program prolazi (ulazi i izlazi) kroz različite oblasti definisanosti promenjive (scope), a promenjive su tada ili u „context-u“ ili ne. „Contex“ je sličan oblasti definisanosti jer takodje zavisi od pozicije u programu („lexical context“) ili vremena izvršavanja koda („execution context“).

Read more

1001 način kreiranja objekata u JavaScriptu

by

new Object()

Jedan od najosnovnijih načina je kreiranje praznog objekta sa rezervisanom reči new na osnovu ugradjene konstruktorske funkcije Object(), a zatim pojedinačno dodavati svojstava.

Read more