događaji (events) · 2018. 3. 25. · nekoliko strategija za izmjenu html elemenata kroz js: 1....
TRANSCRIPT
3/20/2018
1
Događaji (Events)
Programiranje vođeno događajima
Najveći dio JavaScript koda u browser-ima je event-driven:
kod se ne izvršava odmah već se izvršava kao reakcija na
neki događaj (tzv. Event-driven programming).
Click Me!
Primjer:
Dat je UI element preko
koga se vrši interakcija sa
korisnikom.
3/20/2018
2
Click Me!
Programiranje vođeno događajima
Najveći dio JavaScript koda u browser-ima je event-driven:
Kod se ne izvršava odmah već se izvršava kao reakcija na
neki događaj.
Kada korisnik klikne na dugme...
Programiranje vođeno događajima
Najveći dio JavaScript koda u browser-ima je event-driven:
Kod se ne izvršava odmah već se izvršava kao reakcija na
neki događaj.
Click Me!
EVENT!
...dugme emituje događaj ("event“)
koji je neka vrsta objave da se nešto
dogodilo.
3/20/2018
3
Programiranje vođeno događajima
Najveći dio JavaScript koda u browser-ima je event-driven:
Kod se ne izvršava odmah već se izvršava kao reakcija na
neki događaj.
Click Me!
EVENT! function onClick() {
...
}
Svaka funkcija koja osluškuje (listening) taj događaj
se izvršava. Ta funkcija se zove "event handler."
Još neki HTML elementi
Buttons:
Single-line text input:
Multi-line text input:
3/20/2018
4
Upotreba event listener-a
Štampajmo poruku "Clicked" na Console kada korosnik
pritisne dato dugme:
Moramo doadti event listener dugmetu...
Kako komuniciramo sa HTML elementima u jeziku
JavaScript?
DOM
Svaki element na stranici je dostupan u JavaScript kpodu
preko DOM: Document Object Model
- DOM je drvo čiji čvorovi
odgovaraju HTML elementima
na stranici.
- Možemo modifikovati,
dodavati i brisati čvorove iz
DOM-a, i tako mijenati,
dodadvzi i brisati
odgovarajuće elemente
stranice.
3/20/2018
5
DOM
DOM je drvo čiji čvorovi predstavljaju HTML elemente na
stranici.
- JS kod može istraživati čvorove da vidi stanje elementa- (npr. da pročitamo što je korsnik unio u tekstualno polje)
- JS kod moće mijenjati atribute čvorova da bi mijenjao
atribute elemenata- (npr. promjena stila ili sadžaja taga <h1>)
- JS kod može dodavati elemente u stranicu i uklanjati
elemente sa stranice dodavanjme i uklanjanjem
čvorova iz DOM
Pristup DOM objektima
Pristup objektu koji odgovara HTML elementu obavlja se pozivom
funkcije querySelector ::
document.querySelector('css selector');- Vraća prvi element koji odgovara datom CSS selektoru
Ili pomoću funkcije querySelectorAll :
document.querySelectorAll('css selector');- Vraća sve elemente koji odgovaraju datom CSS selektoru.
3/20/2018
6
Pristup DOM objektima
// Returns the DOM object for the HTML element
// with id="button", or null if none exists.
let element = document.querySelector('#button');
// Returns a list of DOM objects containing all
// elements that have a "quote" class AND all
// elements that have a "comment" class.
let elementList =
document.querySelectorAll('.quote, .comment');
Dodavanje event listener-a
Svaki DOM objekat ima sljedeću funkciju :
addEventListener(event name, function name);
- event name je string koji predstavlja ime JavaScript
event kojeg osluškujete
- najčešće: click, focus, blur, itd
- function name je ime funkcije koju želite da izvršite kad
se događaj ostvari (event fires)
3/20/2018
7
Uklanjanje event listener-a
Da zaustavimo osluškivanje događaja koristimo
removeEventListener:
removeEventListener(event name, function name);
- event name je string koji predstavlja ime JavaScript
event kojeg ne želite više da osluškujete
- function name je ime funkcije koju ne želimo dalje da
izvršavamo kad se desi događaj
3/20/2018
8
Greška! Zašto?
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
3/20/2018
9
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
3/20/2018
10
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
function onClick() {
console.log('clicked');
}
const button = document.querySelector('button');
button.addEventListener('click', onClick);
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
function onClick() {
console.log('clicked');
}
const button = document.querySelector('button');
button.addEventListener('click', onClick);
3/20/2018
11
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
function onClick() {
console.log('clicked');
}
const button = document.querySelector('button');
button.addEventListener('click', onClick);
Mi smo na <script> tagu, koji je na početku dokumenta
… pa <button> nam nije trenutno dostupan.
<head>
<title>CS 193X</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
function onClick() {
console.log('clicked');
}
const button = document.querySelector('button');
button.addEventListener('click', onClick);
Ovaj poziv querySelector vraća null, pa ne možemo da
pozovemo addEventListener nad null.
3/20/2018
12
Upotreba defer
Možemo dodati atribut defer u script tag tako da se
JavaScript kod ne izvršava dok se ne učita cio DOM (mdn):
<script src="script.js" defer></script>
Upotreba defer
Možemo dodati atribut defer u script tag tako da se
JavaScript kod ne izvršava dok se ne učita cio DOM (mdn):
<script src="script.js" defer></script>
Drugi old-school načini da da ovo uradite (bolje nemojte):
- Staviti <script> tag na dno stranice
- Osluškivati "load" događaj na objektu window
Ima mnogo primjera na vebu koji koriste ove zastarjele
tehnike.
3/20/2018
13
Log poruke nisu baš zanimljive...
3/20/2018
14
Kako da ostvarimo interakciju sa stranicom?
Tehničke pojedinosti
DOM objekti koje dobijemo pozivom querySelector i
querySelectorAll imaju sljedeće tipove:
- Svaki DOM ćvor ima opšti tip Node (interface)
- Element implementira Node interface
- Svaki HTML element ima posebnu klasu izvedenu iz
Element npr. HTMLImageElement
3/20/2018
15
Svojstva DOM objekta
Možemo pristupiti atributima HTML elementa preko
svojstva (engl. property, field) DOM objekta
const image =
document.querySelector('img');
image.src = 'new-picture.png';
Neki izuzeci :
- Ne možemo doći do atributa class pomoću
object.class
Atributi i DOM svojstva
Skoro svaki atribut HTML elementa predstavlja svojstvo
(engl. property) odgovarajućeg DOM objekta...
HTML
<img src="puppy.png" />
JavaScript
const element = document.querySelector('img');
element.src = 'bear.png';
(Ali uvijek provjerite specifikaciju jezika JavaScript. U ovom
primjeru provjerite HTMLImageElement.)
3/20/2018
16
Dodavanje i uklanjanje klase
Možete kontrolisati classes primjenjene na HTML element
pomoću classList.add i classList.remove:
const image =
document.querySelector('img');
// Adds a CSS class called "active".
image.classList.add('active');
// Removes a CSS class called "hidden".
image.classList.remove('hidden');
(More on classList)
Primjer: poklon
Pogledajte na CodePen -mnogo bolje izgleda!
3/20/2018
17
Dva puta pronalazi isti element...
Ovo nije baš najsrećnije rješenje.
Q: Postoji li način da ga popravimo?
Dva puta pronalazi isti element...
Ovo nije baš najsrećnije rješenje.
Q: Postoji li način da ga popravimo?
CodePen
3/20/2018
18
Event.currentTarget
Element Event se predaje listeneru kao parametar:
Svojstvo currentTarget je referenca na objekat koji je
zakačen za događaj, u ovom primjeru to je <img> Element
kojem dodajemo listener.
Postoji i Event.target
(Napomena: Event ima dvije verzije target-a:
- event.target: element koji je kliknut / "dispatched
the event" (može biti potomak target-a)
- event.currentTarget: element za koji je originalni
event handler bio zakačen)
3/20/2018
19
Primjer: Present
Sada pokušajmo da promijenimo tekst kada se poklon “otvori”...
Neka svojstva objekta Element
Svojstvo Opis
id Vrijednost atributa id elementa, kao string
innerHTMLHTML između otvarajućeg i zatvarajućeg taga elementa, kao string
textContentTekstualni sadržaj ćvora i njegovih potomaka (nasljeđuje se od Node)
classList Objekat koji sadrži klase primjenjene na element
Možda možemo prilagoditi
textContent!CodePen
3/20/2018
20
Selektujemo element h1 i postavimo njegov textContent
da bi promijenili što se prikazuje u h1. (CodePen)
Drugi pristup:Promjena elemenata
3/20/2018
21
Dodavanje elemenata kroz DOM
Možemo dinamički kreirati elemente i dodavati ih na
stranicu pomoću createElement i appendChild:
document.createElement(tag string)
element.appendChild(element);
Eelemnt se može dodati i pomoću innerHTML, ali to
predstavlja sigurnosni rizik (security risk)
// Try not to use innerHTML like this:
element.innerHTML = '<h1>Hooray!</h1>';
Uklanjanje elemenata kroz DOM
Možemo ukloniti elemente iz DOM-a pozivom metoda
remove() na DOM objektu:
element.remove();
Postavljanje svojstva innerHTML nekog elementa na
prazan string je dobar način uklanjanja svih čvorova koji
predstavljau djecu roditeljskog čvora:
// This is fine and poses no security risk.
element.innerHTML = '';
3/20/2018
22
CodePen
Tekst se mijenja brže od učitavanja slike.
Q: Kako da popravimo ovaj efekat?
3/20/2018
23
display: none;
Postoji još jedna korisna vrijednost za display:
display: block;
display: inline;
display: inline-block;
display: flex;
display: none;
display: none; isključuje iscrtavanje (rendering)
elementa i njegove djece. Ponaša se kao element uopšte
nije u dokumentu...
display: none;
Postoji još jedna korisna vrijednost za display:
display: block;
display: inline;
display: inline-block;
display: flex;
display: none;
display: none; isključuje iscrtavanje (rendering)
elementa i njegove djece. Ponaša se kao element uopšte
nije u dokumentu...
... ali se sadržaj (kao što su slike) i dalje učitava.
3/20/2018
24
Možemo dodati oba pogleda u HTML,
ali jedna da bude sakriven …
(CodePen)
Sada možemo mijenjati stanje prikaza kontejnera
dodavanjem/uklanjanjem sakrivene klase.
(CodePen)
3/20/2018
25
Pregled
Nekoliko strategija za izmjenu HTML elemenata kroz JS:
1. Promjena sadržaja postojećeg HTML elementa na stranici:
- Dobro za proste izmjene teksta
2. Dodati elemente pomoću createElement i appendChild
- Neophodno ako dodajemo promjenljiv broj elemenata
3. Stavimo sve “poglede" u HTML, ali sakrijemo one neaktivne,
pa mijenjamo stanje display po potrebi.
- Dobro ako unaprijed znamo koje elemente želimo da
prikazujemo
- Može se korostiti zajedno sa (1) i/ili (2)