8

Lab. vježba

PROGRAMIRANJE ZA INTERNET
Upute za laboratorijske vježbe (izradio: Marin Bugarić, Frano Rezo)

Moderni JavaScript
 P R O G R A M I R A N J E Z A I N T E R N E T

Doseg varijabli
U prošloj vježbi smo se upoznali s definiranjem varijabli tako što bi ispred imena
varijable stavili ključnu riječ var :

var tekst = 'Hello World';

tekst = 'Nova vrijednost';

D O S E G ( S C O P E )
Kada neku varijablu deklariramo koristeći ključnu riječ var, onda ta varijabla može
imati dvije vrste dosega (eng. scope):
V A R I J A B L E
• Globalni doseg (eng. Global Scope) – sve varijable deklarirane VAN funkcije
imaju globalni doseg, tj. mogu su se koristiti u cijelom JavaScript kôdu.
var a = 5;
function mojaFunkcija() {
console.log(a); // Ispis je: 5
}
console.log(a); // Ispis je: 5

• Funkcijski doseg (eng. Function Scope) – sve varijable deklarirane UNUTAR

funkcije imaju funkcijski doseg, tj. ne mogu se koristiti van te funkcije.
function mojaFunkcija() {
var a = 5;
console.log(a); // Ispis je: 5
}
console.log(a); // Error

Od 2015. godine, odnosno od ES2015 verzije JavaScript-a (popularno zvane ES6),

uvedene su nove ključne riječi: let i const.

Uvođenje novih ključnih riječi se javlja zbog potrebe za korištenjem Block Scope
B L O K O V S K I
varijabli, tj. varijabli blokovskog dosega. To znači da se svaka varijabla deklarirana
D O S E G unutar nekog „bloka“ (blok označava dio kôda između vitičastih zagrada {} ) ne može
koristiti izvan tog bloka!.

1
 L E T
Niti jedna varijabla deklarirana s ključnom var ne može imati blokovski doseg, zbog
čega se umjesto nje koristi ključna riječ let koja ima blokovski doseg, a sva ostala
svojstva su joj jednaka kao i za var.
Primjer:
Deklaracija s var: Deklaracija s let:
if (true) { if (true) {
var a = 5; let a = 5;
} }
console.log(a); // Ispis je: 5 console.log(a); // Error

C O N S T
Uz ključnu riječ let, uvedena je i ključna riječ const. Varijabla deklarirana s ključnom
riječi const također ima blokovski doseg, ali za razliku od let, takve varijable ne mogu
mijenjati svoju početnu vrijednost, tj. samo jednom im pridijelimo vrijednost.
Primjer:

Deklaracija s const: Deklaracija s let:

const tekst = 'Hello World'; let tekst = 'Hello World';
tekst = 'Nova vrijednost'; tekst = 'Nova vrijednost';
// Error // Sve u redu

Arrow funkcija
U prošloj vježbi smo se također upoznali s definiranjem funkcija, tako što bi upotrijebili
ključnu riječ function, odabrali ime funkcije, definirali parametre i tijelo (kôd) funkcije.
Primjer:

Jedan način: Drugi način:

// Definiranje funkcije // Definiranje funkcije
function zbroj(a, b) { var zbroj = function(a, b) {
var z = a + b; var z = a + b;
return z; return z;
} };
// Poziv funkcije // Poziv funkcije
zbroj(5, 3); zbroj(5, 3);

2
 A R R O W
U već spomenutoj verziji JavaScript-a ES6, uveden je skraćeni način definiranja funkcije
pomoću tzv. „arrow“ funkcije (hrv. streličaste funkcije) koja je dobila naziv zbog svoje
F U N C T I O N
specifične sintakse (još se naziva i „fat arrow“ funkcija).
Primjer:

Normalna funkcija: „Arrow“ funkcija:

// Definiranje funkcije // Definiranje funkcije
var zbroj = function(a, b) { var zbroj = (a, b) => {
var z = a + b; var z = a + b;
return z; return z;
}; };
// Poziv funkcije // Poziv funkcije
zbroj(5, 3); zbroj(5, 3);

JavaScript events
JavaScript može pratiti različite događaje (eng. events) na web stranici. Neki od
najčešćih su: klik mišom, prelazak mišom, pritisak tipke, scroll, drag & drop i sl.

Na bilo koji element je moguće dodati referencu na neki od tih događaja, pa je tako
najčešća praksa pratiti klik na neko dugme (eng. button) na web stranici, što se u
JavaScript-u zapisuje na sljedeći način:

Jedan način (koristeći „arrow“ funkciju):

// Dohvati <button> po id-u
let buttonElement = document.getElementById('moj-button');
// Dodaj mu referencu na klik i proslijedi "e" --> event objekt
buttonElement.addEventListener('click', (e) => {
// Dohvati kliknuti <button>
let clickedButton = e.currentTarget;
// Ispiši njegov tekstualni sadržaj pomoću alert-a
alert('Sadržaj kliknutog button-a: ' + clickedButton.textContent);
});

Drugi način (koristeći normalnu funkciju):

// Dohvati <button> po id-u
let buttonElement = document.getElementById('moj-button');
// Dodaj mu referencu na klik događaj i pozovi funkciju
buttonElement.addEventListener('click', handleClick);
function handleClick(e) {
// Dohvati kliknuti <button>
let clickedButton = e.currentTarget;
// Ispiši njegov tekstualni sadržaj pomoću alert-a
alert('Sadržaj kliknutog button-a: ' + clickedButton.textContent);
}

3
JavaScript DOM manipulacija
DOM – Document Object Model je HTML standard koji nam omogućava dohvaćanje,
mijenjanje, dodavanje i brisanje HTML elemenata.

Također, JavaScript može koristiti DOM za kreiranje, brisanje i uređivanje HTML

elemenata. Jedan dio uređivanja, odnosno mijenjanja pojedinih elemenata smo radili u
prošloj vježbi, a u nastavku je primjer kreiranja paragrafa (<p>), dodavanja atributa i
teksta tom paragrafu i na kraju umetanje paragrafa u <div> element:

// Dohvatimo <div> element s id-om "main-container"

let container = document.querySelector('div#main-container');

// Kreiramo prazan <p> element

let noviParagraf = document.createElement('p');
// Dodamo mu "id" atribut
noviParagraf.setAttribute('id', 'paragraf1');
// Dodamo mu tekst
noviParagraf.textContent = 'Tekst unutar paragrafa';

// Ubacimo novi kreirani <p> u <div id="main-container"></div>

container.appendChild(noviParagraf);

4
Zadaci
Pripremiti radni direktorij/mapu za vježbu 8 kao i u prethodnim vježbama. Nakon preuzetih resursa,
nastaviti kroz sljedeće zadatke koristeći JavaScript kôd:

• Kreirati vanjski JavaScript dokument „skripta.js“ unutar mape js (kreirati ju) i omogućiti njegovo
korištenje unutar index.html-a.
• JavaScript:
1. Dodati referencu na klik na žutu „shopping-card“ ikonu. Klikom na nju bi se trebala
dodati/brisati klasa 'active' elementu s id-om „shopping-side-menu“.
2. Definirati početnu vrijednost broja narudžbi u žuti krug pokraj „shopping“ ikone. Kreirati
funkciju koja će inkrementirati taj broj za jedan kad se pozove.
3. Dohvatiti sve button-e unutar pizza kartica i dodati im reference na klik.
4. Kreirati funkciju „handleButtonClick“ koja će prepoznati na koji se button kliknulo, dohvatiti
naziv pizze i njenu cijenu iz kartice čiji se button kliknuo, te spremiti te vrijednosti u objekt.
5. Kreirati funkciju „createNewShopItem“ koja treba kao parametar primati prethodno kreirani
objekt. Ova funkcija treba kreirati sljedeći HTML element koji će biti popunjen s podacima iz
objekta (naziv i cijena pizze):

<div class="shopping-item">
<h3>Pancetta</h3>
<div class="description">
<div class="cijena">
<small>Cijena:</small>
<p>24,00</p>
</div>
<div class="kolicina">
<small>Količina:</small>
<p>1</p>
</div>
</div>
</div>

6. Novi kreirani HTML element ubaciti u „shopping-side-menu“.