Interaktivne stranice sa

javascriptom - 2 dio.

Programski alati u tehničkom pisanju

dr. sc. Alma Šećerbegović, docent
Sadržaj
JavaScript - ponavljanje

JavaScript - nizovi i funkcije

JavaScript - eventHandler-i
var, let, const
Deklarišite tri varijable u Javascript-u korištenjem različitih ključnih riječi:

➔ Varijabla

var x = 15;

➔ Varijabla unutar bloka

let fruit = 'banana';

➔ Konstanta unutar bloka (ne može joj se dodijeliti ponovo vrijednost)

const isHungry = true;

Nizovi
Nizovi su tipa Object koji se koriste za kreiranje liste podataka.

//Kreira prazan niz

let list = [];

let groceries = ['milk', 'cocoa puffs'];

groceries[1] = 'Nesquick';

➔ Indeksiranje počinje od 0
➔ “Mutable” - može se promijeniti nakon kreiranja
➔ Dužina se dobija preko length atributa (nije funkcija)
Prolazak kroz niz sa petljom
Moguće je koristiti for petlju za prolazak kroz sve elemente niza

let groceries = ['milk', 'cocoa puffs', 'tea'];

for (let i = 0; i < groceries.length; i++) {

console.log(groceries[i]);
}

Ili moguće je koristiti notaciju (vidi detaljnije na mdn):

(intuitivno: for svaki element of lista)

for (let item of groceries) {

console.log(item);
}
Mape - tip object // Kreira prazan objekat
➔ Svaki JavaScript objekat je u
osnovi kolekcija parova const prices = {};
osobina-vrijednost.
const scores = {
➔ Moguće je kreirati mapu
tako što će se kreirati 'Adnan': 14,
varijabla tipa Object.
'Emir': 19,

'Elvira': 11

};

console.log(scores['Elvira']);
MAPE // Ovo je isti kod kao na prethodnom
slide-u

const prices = {};

Nije neophodno pri kreiranju const scores = {
objekata stavljati navodnike
za ključeve jer će JavaScript Adnan: 14,
sam interpretirati ključeve Emir: 19,
kao stringove.
Elvira: 11

};

console.log(scores['Elvira']);
MAPe const scores = {

Adnan: 14,
Postoje dva načina kako se može
Emir: 19,
pristupiti vrijednosti ključa:
Elvira: 11
1. objectName[property]
2. objectName.property };

(2 samo funkcioniše ako je ključ console.log(scores['Elvira']

);
string)
console.log(scores.Emir);
MAPE const scores = {

Adnan: 14,
Kako bi dali novi ključ mapi, Emir: 19,
potrebno je definirati njegovo
Elvira: 11
ime i dodijeliti mu vrijednost.
};

scores.Ishak = 20;

let name = 'Hamza';

scores[name] = 16;

console.log(scores);
MAPE const scores = {

Za uklanjanje ključa, koristiti funkciju Adnan: 14,

delete Emir: 19,

Elvira: 11

};

scores.Ishak = 20;

let name = 'Hamza';

scores[name] = 16;

delete scores.Adnan;

console.log(scores);
Mapa
Prolazak kroz mapu korištenje for...in petlje (vidi detaljnije na mdn):

(intuitivno: for svaki kljuc in mapi)

for (key in object) {

// … uradi nesto sa object[key]

for (let name in scores) {

console.log(name + ' je dobio ' + scores[name] +

‘bodova’);

}
Događaji (EVENTS)
Event-driven programiranje
Većina JavaScript koda koja se izvršava u browser-u je bazirana
na događajima tzv. event-driven:
Kod se ne izvršava odmah, već nakon određenog događaja.

Primjer:

Probaj ako smiješ? Evo jednog UI elementa sa

kojim korisnik može imati
interakciju.
Event-driven PROGRAMIRANJE
Većina JavaScript koda koja se izvršava u browser-u je bazirana
na događajima tzv. event-driven:
Kod se ne izvršava odmah, već nakon određenog događaja.

Probaj ako smiješ?

Kada korisnik klikne na dugme

Event-driven programming
Većina JavaScript koda koja se izvršava u browser-u je bazirana
na događajima tzv. event-driven:
Kod se ne izvršava odmah, već nakon određenog događaja.

DOGAĐAJ!

Probaj ako smiješ?

… dugme emitira "event," ili događaj, koji

je u osnovi obavještenje da se nešto
interesantno dogodilo.
Event-driven programming
Većina JavaScript koda koja se izvršava u browser-u je bazirana
na događajima tzv. event-driven:
Kod se ne izvršava odmah, već nakon određenog događaja.
DOGAĐAJ!
function onClick() {
...
Probaj ako smiješ?
}

Bilo koja funkcija koja osluškuje taj

događaj se sada izvršava. Ova funkcija se
naziva "event handler."
Malo nešto drugo
Idemo naučiti neke od
input HTML elemenata
Još neki html elementi
Button:

Tekstualno polje u jednoj liniji:

Tekstualno polje u više linija:

Korištenje event listener-a
Hajde da probamo ispisati “Pritisnuto!” na Web console-i svaki
put kada korisnik pritisne dugme.

Potrebno je da dodamo event listener na dugme.

Pitanje: Kako pristupamo HTML

elementima iz Javascripta?
DOM - document object model
Svakom elementu unutar HTML dokumenta možemo pristupiti
u Javascriptu preko DOM-a: Document Object Modela.
DOM
DOM je stablo objekata čvora koji odgovaraju HTML elementima
na stranici.

➔ JS kôd može ispitati ove čvorove kako bi vidio stanje

elementa (npr. da biste dobili ono što je korisnik upisao u
okvir za tekst)
➔ JS kôd može uređivati atribute ovih čvorova kako bi
promijenio atribute elementa (npr. za prebacivanje stila ili za
promjenu sadržaja oznake <h1>)
➔ JS kôd može dodavati elemente i uklanjati elemente s web
stranice dodavanjem i uklanjanjem čvorova iz DOM-a
Kako pristupamo
DOM objektima iz
Javascripta?
Dobijanje DOM objekata
Da bi mogli pristupiti HTML elementima, prvo ih moramo pronaći.
Postoji više funkcija od kojih se najčešće koriste:
➔ document.getElementById - ako znamo id HTML elementa
➔ document.getElementsByTagName - ako znamo ime tag-a HTML elementa
➔ document.getElementsByClassName - ako znamo klasu HTML elementa
➔ document.querySelector - ako znamo CSS selektor i vraća nam prvi element koji
odgovara tome
➔ document.querySelectorAll - ako znamo CSS selektor i vraća nam sve elemente koji
odgovaraju tom CSS selektoru
Dobijanje DOM objekata
Dodavanje event listener-a
Svaki DOM objekt ima definiran sljedeći metod:

addEventListener(event name, function name);

- event name je string JavaScript događaja koji se osluškuje
- Najčešći su: click, focus, blur, i dr.

- function name je ime JavaScript funkcije koja će se izvršiti

kad se događaj desi
Uklanjanje event listener-a
Kako bi prestali osluškivati događaj, potrebno je pozvati funkciju
removeEventListener:

removeEventListener(event name, function name);

- event name je string od JavaScript događaja koji se prestaje

osluškivati
- function name je ime JavaScript funkcije za koju ne želimo
da se više izvršava nakon što se ovaj događaj desi
Greška! Zašto?
<head>
<title>Zdravo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<head>
<title>Zdravo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<head>
<title>Zdravo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<head>
<title>Zdravo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
function onClick() {
console.log(“Pritisnuto!”);
}

const dugme = document.getElementbyId('dugme');

dugme.addEventListener('click', onClick);
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head> function onClick() {
console.log(“Pritisnuto!”);
}

const dugme = document.getElementbyId('dugme');

dugme.addEventListener('click', onClick);
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head> function onClick() {
console.log(“Pritisnuto!”);
}

const dugme = document.getElementbyId('dugme');

dugme.addEventListener('click', onClick);

Tek smo unutar <script> tag-a, što je na vrhu dokumenta

tako da <button> element još nije kreiran u HTML-u.
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head> function onClick() {
console.log(“Pritisnuto!”);
}

const dugme = document.getElementById('dugme');

dugme.addEventListener('click', onClick);

Prema tome, getElementyById vraća null vrijednost jer ne postoji id

sa vrijednosti dugme. Null elementu nije moguće dodijeliti event
listener.
Upotreba defer
Moguće je koristiti atribut defer tako da se Javascript kod neće
izvršavati dok se DOM ne kreira (mdn):

<script src="script.js" defer></script>

UPOTREBA defer
Moguće je koristiti atribut defer tako da se Javascript kod neće
izvršavati dok se DOM ne kreira (mdn):

<script src="script.js" defer></script>

Stari način rješavanja ovog problema (nemojte ovo raditi):

- Stavljanje <script> tag-a na dno stranice

Ispis u terminalu i
nije tako
zanimljiv
Kako da vršimo
interakciju sa
stranicom?
Nekoliko dodatnih detalja
DOM objekti koji se dobiju od querySelector-a and
querySelectorAll-a imaju sljedeće tipove:

- Svaki DOM čvor je generalnog tipa Node (interface)

- Element implementira Node interface

- Svaki HTML element ima Element izvedenu klasu

Atributi i DOM osobine
Svaki atribut HTML elementa je u osnovi osobina
njegovog respektivnog DOM objekta

HTML
<img src="puppy.png" />
JavaScript
const element = document.querySelector('img');
element.src = 'bear.png';
Dodavanje i uklanjanje klasa
Moguće je kontrolirati koje se klase primjenjuju na
HTML elemente korištenjem metoda classList.add i
classList.remove:

const image = document.querySelector('img');

// Dodati CSS klasu "active".

image.classList.add('active');

// Ukloniti CSS klasu "hidden".

image.classList.remove('hidden');
Primjer: POklon
1. Napraviti HTML stranicu sa sljedećim
izgledom (tekst + slika)
2. Klikom na sliku potrebno je da se
prikaže druga slika sa otvorenim
poklonom
Primjer: POklon
Element se dva puta deklariše

Ponavljanje!!!

Q: Možemo li ovo popraviti?

Element se dva puta deklariše
Event.currentTarget
Event element se proslijeđuje listener-u kao
parametar:

currentTarget atribut je referenca na objekat koji je u

vezi sa događajem (event-om) - u ovom slučaju <img>
element je taj koji se povezuje sa klikom.
Primjer: POklon

Bilo bi lijepo promijeniti

tekst kada se klikne na
sliku
Atributi objekta Element
Atribut Opis

id Vrijednost id atributa element, kao string

“sirovi” HTML kod između početnih i krajnjih tagova elementa,
innerHTML
kao string
textContent Tekstualni sadržaj čvora i njegovih nasljednika

classList Objekt koji sadrži klase koje se primjenjuju na element

Probajte primjeniti
textContent!
Možemo izabrati h1 element i postaviti njegov
textContent atribut (CodePen)
Još jedan pristup:
mijenjanje
elemenata
Dodavanje elemenata preko dom-a
Moguće je dinamički kreirati elemente i dodavati ih uz pomoć metoda
createElement i appendChild:

document.createElement(tag string)

element.appendChild(element);

// Ovo nemojte koristiti

element.innerHTML = '<h1>Juupi!</h1>';
Uklanjanje elemenata uz pomoć DOM-a
Moguće je i ukloniti elemente uz pomoć metoda remove():

element.remove();

Postavljenje innerHTML atributa elementa na prazan string je dobar

način uklanjanje svih nasljednika (children) od roditeljskog čvora (parent
node):

// Ovo je ok

element.innerHTML = '';
Zadatak
Izmjeniti funkciju otvori poklon tako da se kreiraju novi
elementi - naslov h1 i slika img, čiji sadržaj odgovara kada
je otvoren poklon. Koristiti komandu
document.createElement(tag string)

Zatim dodati nove element unutar div-a container korištenjem

komande element.appendChild(element);
function otvoriPoklon(event) {
const noviNaslov = document.createElement('h1');
noviNaslov.textContent = 'Hooray!';
const novaSlika = document.createElement('img');
novaSlika.src =
'https://media.giphy.com/media/27ppQUOxe7KlG/giphy.gif';
const container = document.querySelector('#container');
container.innerHTML = '';
container.appendChild(noviNaslov);
container.appendChild(novaSlika);
}

const image = document.querySelector('img');

image.addEventListener('click', otvoriPoklon);
Tekst se promijeni brže od slike.

Q: Kako možemo ovo riješiti?

display: none;
Postoji jedan CSS atribut display:

display: block;

display: inline;

display: inline-block;

display: flex;

display: none;

display: none; isključi prikaz elemenata - kao da ga nema nikako

 <div id="poklon-zatvoren">
<h1>Klikni za poklon:</h1>
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1083533/gift-icon.png" />
</div>
<div id="poklon-otvoren" class="hidden">
<h1>Juupi!</h1>
<img src="https://media.giphy.com/media/27ppQUOxe7KlG/giphy.gif" />
</div>
function otvoriPoklon(event) {
const image = event.currentTarget;
image.removeEventListener('click', otvoriPoklon);

const poklonOtvoren = document.querySelector('#poklon-otvoren');

const poklonZatvoren = document.querySelector('#poklon-zatvoren');
poklonZatvoren.classList.add('hidden');
poklonOtvoren.classList.remove('hidden');
}
const image = document.querySelector('#poklon-zatvoren img');
image.addEventListener('click', otvoriPoklon);
Zaključak
Kako promjeniti HTML sadržaj iz JS-a:

1. Promjeniti sadržaj postojećih HTML elemenata na stranici:

- Dobro za jednostavno ažuriranje teksta

2. Dodati elemente uz pomoć createElement i appendChild

- Potrebno ako dodajete određeni broj elemenata

3. Postaviti sve prikaze u HTML-u ali neaktivne sakriti, te onda

prikazivati kako je potrebno.

- Dobro kada unaprijed znate koje ćete elemente prikazivati

- Može se koristiti zajedno sa (1) i/ili (2)
Zadatak
<!DOCTYPE html>
<html lang="en"> <ol>
<head>
<li class="first">one</li>
<meta charset="UTF-8">
<li class="second">two</li>
<title>Document </title>
<li class="third">three</li>
</head>
</ol>
<body>
</section>
<div class="header">
<div class="footer">
</div>
</div>
<section id="container ">
</body>
<ul>
</html>
<li class="first">one</li>
<li class="second">two</li>
<li class="third">three</li>
</ul>
Zadatak
Napraviti sljedeću HTML
stranicu.

Klikom na dugme, potrebno

je ispisati koliko ima
stavki u listi.
Zadatak
<body>

<p>

Upravo smo <b>počeli</b> novi <b>zadatak</b> kako bi <b>studenti</b>

koji žele da rade sa <b>JavaScript</b> zadacima mogli unaprijediti
svoje <b>JavaScript</b> vještine.

</p>

</body>