DOM API - рад са догађајима¶
Већина динамичких клијентских веб-апликација подразумева да постоји некаква реакција на корисникову интеракцију са веб-страницом. Неки примери интеракције корисника са веб-страницом и одговарајуће реакције веб-странице могу бити:
Корисник кликће на дугме и веб-страница приказује (претходно сакривену) навигацију са стране.
Корисник попуњава поље формулара и веб-страница проверава коректност уноса.
Корисник кликће на дугме за подношење формулара и веб-страница проверава коректност свих унетих података пре слања.
Корисник превлачи једну од слика из галерије слике и веб-страница мења редослед приказивања слика.
Корисник прелази курсором миша преко текста и веб-страница повећава величину фонта тог текста.
Када се нека од ових (и њима сличних) интеракција догоди на веб-страници, кажемо да се окида догађај (event). Сваки HTML елемент дефинише скуп догађаја који се може окинути над њиме. На пример, већина HTML елемената подржава догађај „click” који се окида када корисник кликне на тај елемент. Слично њему, постоје и догађаји „mouseenter” и „mouseleave” који се окидају када корисник пређе курсором миша преко елемента (први се окида први пут када се курсор нађе преко елемента, а други се окида први пут када курсор напусти елемент). Са друге стране, поља формулара могу имати неке себи-својствене догађаје као што је догађај „change” који се окида када корисник промени вредност неког поља.
Напомена: Интерфејс Element дефинише велики број ових догађаја. Међутим, и интерфејс HTMLElement садржи неке корисне догађаје. Корисно је да проучиш документацију ових интерфејса и да упознаш њихове догађаје. Покушај да пронађеш називе догађаја који представљају честе интеракције које ти имаш са веб-апликацијама.
Имплементирање функционалности када се окине неки догађај је веома једноставно. Сваки HTML елемент дефинише метод addEventListener који користиш у ту сврху. Овај метод има два параметра: назив догађаја (ниска) и функцију која ће бити извршена када се тај догађај окине.
Пример: На веб-страници се налази дугме „Кликни ме!“. Напиши JavaScript програм који у конзоли исписује поруку „Клик!“ када корисник кликне на дугме.
Веома је важно да разумеш како JavaScript интерпретер извршава код из претходног примера. Примети да се, одмах по отварању веб-странице, у конзоли исписује порука „Крај кода!“, а да се порука „Клик!“ из функције klikni_me не исписује. Тек када кликнеш на дугме „Кликни ме!“, функција klikni_me се извршава и исписује се жељена порука. Другим речима, JavaScript интерпретер неће извршити код из прослеђене функције у тренутку позива метода addEventListener (за разлику од тога да позовеш функцију), већ само онда када се наведени догађај (у овом задатку, „click”) окине над елементом над којим је овај метод позван. Ово можеш да разумеш као да позив метода addEventListener само каже JavaScript интерпретеру да запамти функцију која му се прослеђује (уз одговарајући догађај), а да ће њено позивање доћи тек касније (када се тај догађај окине).
Провежбај ово понашање кроз наредне задатке.
Задатак: На веб-страници се налази слика угашене светиљке и два дугмета: „укључи“ и „искључи“. Напиши JavaScript програм који кликом на прво дугме мења фотографију на упаљену светиљку, а кликом на друго дугме мења фотографију на угашену светиљку.
<!-- Poglavlje4/39/index.html -->
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8">
<title>JavaScript задатак - сијалица</title>
</head>
<body>
<img id="sijalica" src="./ugasena_sijalica.png" height="300">
<script src="index.js"></script>
</body>
</html>
/* Poglavlje4/39/index.js */
let sijalica_je_ugasena = true;
function na_klik_sijalice() {
const sijalica = document.getElementById("sijalica");
if (sijalica_je_ugasena) {
sijalica.src = "./upaljena_sijalica.png";
} else {
sijalica.src = "./ugasena_sijalica.png";
}
sijalica_je_ugasena = !sijalica_je_ugasena;
}
const sijalica = document.getElementById("sijalica");
if (sijalica !== null) {
sijalica.addEventListener("click", na_klik_sijalice);
} else {
console.log("Не постоји слика са идентификатором: sijalica");
}
Задатак: На веб-страници се налазе два једнолинијска текстуална поља: „први број“ и „други број“, четири ексклузивна дугмета са основним аритметичким операцијама: „+“ (сабирањем), „-“ (одузимањем), „“* (множењем) и „/“ (дељењем), обично дугме „Израчунај“ и пасус са текстом „Резултат“. Напиши JavaScript програм који кликом на дугме „Израчунај“ чита бројевне вредности из једнолинијских текстуалних поља, а затим у пасус уписује резултат извршавања одабране аритметичке операције.
Задатак: На веб-страници се налази текстуални садржај величине текста \(10pt\). Напиши JavaScript програм који, када корисник преже курсором преко текста, увећава величину фонта тог текста на \(14pt\). Приликом „напуштања“ текста, програм треба да врати величину текста на претходну.
Напомена: Постоји и метод removeEventListener који се користи да уклони функцију која је регистрована методом addEventListener. Обе функције имају идентичне параметре који се морају поклопити (као и чвор-објекат над којим се позивају) како би се уклонила исправна функција. Овај метод наводимо како бисмо ти скренули пажњу на његово постојање, али уклањање функција којима се реагује на догађаје је релативно ретка операција у развоја веб-апликација, те се нећемо удубљивати у функционисање овог метода.
Документацију за метод можеш пронаћи на адреси https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Као што ћеш приметити, овај метод је веома моћан и ми смо у овој лекцији тек окрзнули функционалности које нам он пружа. Ипак, оно што си научио ће ти бити довољно да имплементираш велики број динамичких клијентских веб-апликација.