Uvod u JavaScript
JavaScript je skript jezik koji se koristi prvenstveno za dodavanje interaktivnosti na web stranice. Omogućava da se manipuliše sadržajem, stilom i ponašanjem stranica, kao i da se komunicira sa serverom bez ponovnog učitavanja stranice. Za razliku od HTML-a i CSS-a, koji definišu strukturu i izgled stranice, JavaScript upravlja funkcionalnošću i interaktivnošću.
Kada se koristi sa klijentske strane, JavaScript ne može da stoji sam za sebe, već treba da je "uglavljen" u HTML dokument.
Osnovne karakteristike JavaScript-a:
- Izvršava se na klijentskoj strani: JavaScript se najčešće izvršava u web pretraživaču, što znači da korisnici mogu interagovati sa web stranicama u realnom vremenu. Ovo omogućava brze reakcije na akcije korisnika bez potrebe za slanjem podataka na server.
- Interaktivnost: JavaScript omogućava kreiranje interaktivnih elemenata kao što su dugmad, obrasci i meniji. Na primer, da prikažete ili sakrijete sadržaj kada korisnik klikne na dugme.
- Podrška u svim modernim browserima: JavaScript je univerzalan jezik za sve browsere (Chrome, Firefox, Safari, Edge).
...
Minimalni zahtevi:
Za pisanje bilo kakvog softvera nam je potreban code editor i kompajler ili interpreter izabranog jezika. Po potrebi, ovome se mogu dodati i drugi alati. U slučaju JavaScripta, poželjno je još koristiti i debugger, da bi mogli po potrebi da u nekom momentu zaustavimo izvršavanje programa (za proveru vrednosti promenljivih u tom trenutku).
Bilo kakav računar dolazi u obzir (ako može da na njemu radi Word, radiće i ovo), sa bilo kojim operativnim sistemom.
Imate izbor: koristiti programe koji su instalirani na računaru ili koristiti online alate. I jedno i drugo će raditi posao.
Online radna okruženja su web sajtovi sa jednostavnim editorom i okruženjem za izvrđavanje koda. Svi se ponašaju slično: imate mesto gde se piše kod, deo gde se od izvršava, a možda da se podeli sa drugim korisnicima. Neki od popularnijih online alata za vežbanje (html, css, javascript i pregled rezultata):
Lokalna razvojna okruženja su programi na lokalnom računaru - u slučaju JavaScripta, za početak nam je potreban editor za pisanje koda, interpreter i debugger.
Kao editor za pisanje koda ćemo zasad koristiti VS Code (radiće bilo koji tekst editor)
Interpreter proverava da li ima grešaka u kodu a nakon toga izvršava program instrukciju po instrukciju. Izbor interpretera zavisi od toga za šta se piše kod. Koliko god bi za naše potrebe radio bilo koji interpreter, koristićemo web browser. Svaki web browser u sebi već ima ugrađen JavaScript engine (interpreter). Preporuka za naše časove su ili Chrome ili Firefox.
Debugger ja alat kojim se može usporiti rad programa ili u potpunosti ga zaustaviti, izvoditi instrukcije korak po korak i analizirati stanje programa u bilo kojem momentu. Svi moderni web browseri u sebi imaju i razvojne alate (developer tools). U toku normalnog rada oni se ne vide, a omogućavanje njihovog rada se obično vrši u podešavanjima samog web browsera. U zavisnosti od web browsera, tamo se mogu naći na primer
- inspector - za npr. analizu pojedinih HTML elemenata
- JavaScript Console - prvenstveno za ispis grešaka, raznih poruka, ali mogu da se izvršavaju i JS komande
- debugger - prikaz vrednosti promenljivih, pauziranje koda i izvršavanje instrukciju poinstrukciju, ...
Developer tools se najkraće omogućava sa desni klik -> Inspect, ili sa tastature (za IE ili Edge je F12, a za većinu ostalih ctrl+shift+I), mada može da se ide u podešavanja web browsera koja se razlikuju od browsera do browsera, pa čak i među različitim verzijama iste vrste browsera.
...
Prvi JavaScript kod:
Da biste koristili JavaScript u HTML stranici, morate ga integrisati unutar <script> tagova. Pogledajmo jednostavan primer:
<!DOCTYPE html>
<html>
<head>
<title>Prvi JavaScript primer</title>
</head>
<body>
<h1>Dobrodošli u JavaScript svet!</h1>
<button onclick="prikaziPoruku()">Klikni me!</button>
<script>
function prikaziPoruku() {
alert("Ovo je vaš prvi JavaScript program!");
}
</script>
</body>
</html>
Objašnjenje primera:
<script>tag: JavaScript kod se smešta unutar ovih tagova, koji mogu biti pozicionirani unutar<head>ili<body>tagova.- Funkcija
prikaziPoruku(): Definiše se funkcija koja prikazuje poruku korisniku pomoću funkcijealert(). - Događaj
onclick: Dugme koristionclickdogađaj da pozove funkcijuprikaziPoruku()kada se dugme klikne.
Gde se smešta JavaScript kod?
JavaScript može biti smešten na nekoliko mesta:
- U okviru HTML tagova: Kao što smo videli u prethodnom primeru, JavaScript kod se može smeštati direktno unutar HTML taga (samo ako je ekstremno kratak kod).
- Unutrašnji JavaScript: Kod unutar
<script>tagova može se nalaziti bilo gde unutar HTML dokumenta. - Spoljni JavaScript fajl: Kod može biti smešten u poseban
.jsfajl koji se učitava u HTML dokument pomoću<script src="ime_fajla.js"></script>. Na primer:
<script src="skripta.js"></script>
Između ovih tagova se ne piše kod, a umesto putanje ka fajlu u src se može postaviti i link do JS fajla.
Kada se izvršava JavaScript program?
JavaScript će da se izvrši u onom trenutku kada web browser naiđe na njega!
Ako se gleda sa strane korisnika: kada se u web browser učitava web stranica, zajedno sa njom se učitava i kod koji treba da se izvrši. Deo web browsera je i interpreter koji je potreban za izvršavanje tog koda.
HTML se od strane web browsera čita linija po linija. Script tag se izvršava u onom momentu kada browser naiđe na njega, a često se kaže i da se parsira (engl. parsing - formalna analiza koda od strane računara u cilju razumevanja njegove struktura).
<script> tagovi mogu da se ubace u <head> ili bilo gde u <body>. Možemo da imamo koliko god hoćemo <script> parova tagova, kao što možemo i da uključimo koliko god hoćemo različitih eksternih JS fajlova.
Program na web stranici nam služi da bismo nešto radili sa elementima stranice. Znači da nam je jako važno da naš program može pristupiti HTML elementima. Međutim, ako web browser naiđe na JavaScript pre nego što HTML elementi "dođu na red" - program neće moći da radi sa njima.
Zbog toga se ponekad zahteva da se <script> ubaci na sam kraj stranice. Drugo rešenje ovog problema bi bilo "izolovanje" programa unutar funkcija (funkcije se ne izvršavaju dok se ne pozovu), a početni poziv se dešava kao obrada događaja kompletnog učitavanja stranice.
Ako se unutar <script> tagova dodaje veza ka spoljašnjim JS fajlovima, moguće je promeniti ponašanje korišćenjem atributa "defer" ili "async":
defer - znači da će skripta da se izvrši tek kada se cela stranica učita
async - znači da se skripta izvršava odmah, ali u paraleli sa parsiranjem ostatka stranice
Uloga JavaScript konzole:
JavaScript konzola je alat unutar web browsera koji omogućava programerima da testiraju kod, dobiju povratne informacije i prate greške.
Ispis neke vrednosti u konzoli je jedan od načina da dobijemo neki rezultat iz JavaScript programa. Ovakav ispis nije namenjen krajnjim korisnicima naše web aplikacije. U normalnim okolnostima korisnici nikada ne otvaraju konzolu, niti bi trebalo da imaju potrebu za tim. Konzola se koristi da bismo isprobavali svoje programe, tražili greške, analizirali rad web aplikacije, ...
U Chrome-u, konzola se može otvoriti desnim klikom na stranicu, zatim izborom opcije "Inspect" i odlaskom na karticu "Console". Na primer, ako unesete sledeći kod u konzolu:
console.log("Dobrodošli u JavaScript!");
Rezultat će biti ispis ove poruke direktno u konzoli.
Neki specijalizovani načini ispisa u konzoli:
U konzoli postoje još tri vrste običnog ispisa, kada želimo da naglasimo da je neki ispis informacija, upozorenje ili poruka o grešci:
console.info([izraz1], [izraz2], ...);
console.warn([izraz1], [izraz2], ...);
console.error([izraz1], [izraz2], ...);Sem toga, postoji i metod assert koji prestavlja ispis sa proverom uslova - zadaje se izraz koji se proverava i poruka. Ako izraz nije ispunjen (netačno) tada se ispisuje poruke:
console.assert([izraz], [poruka]);Vežba:
- Kreirajte HTML stranicu sa JavaScript kodom koji prikazuje poruku prilikom klika na dugme.
- Eksperimentišite sa pozicioniranjem JavaScript koda na različita mesta u HTML dokumentu.
- Pokušajte da koristite console.log() funkciju za ispis poruka u JavaScript konzoli.
about:blank .. Ovo je pseuso adresa koja "govori" web browseru da generiše i učita minimalnu praznu HTML stranicu. Console Zat> ili >> iza čega klikće kursor) - tu kucati naredbe console.log ....