280
Rozdział 6.
Przeglądarka i procedury obsługi zdarzeń
Ty mówisz: „przeglądarka”,
ja mówię: „wywołanie zwrotne”
Zastanówmy się nieco dokładniej nad sposobem działania właściwości
onload
, gdyż korzysta
ona z popularnego wzorca, który jest bardzo często wykorzystywany w języku JavaScript.
Załóżmy, że niebawem ma zajść jakieś duże i ważne wydarzenie, o którym
koniecznie
chcemy wiedzieć. Załóżmy, że chodzi nam o wydarzenie „strona została w całości wczytana”.
Powszechnie stosowanym sposobem radzenia sobie z takimi sytuacjami jest wykorzystanie
wywołania zwrotnego (ang. callback), nazywanego także procedurą obsługi zdarzeń.
Wywołania zwrotne działają w następujący sposób: najpierw do obiektu, który „wie”
o zdarzeniu, przekazujemy funkcję. Kiedy zdarzenie zajdzie, obiekt przekaże o tym informację
zwrotną, wywołując podaną funkcję. Przekonasz się, że wzorzec ten jest w języku JavaScript
używany powszechnie do obsługi bardzo wielu zdarzeń.
Hej,
przeglądarko, zanim
zrobię, co do mnie należy,
poczekam, aż zakończysz
wczytywanie strony.
Czemu tak
siedzisz i się obijasz…
Dalej, przekaż mi funkcję
zwrotną, a ja ją wywołam,
kiedy skończę.
Nie
ma sprawy…
Oto ona, nazywa
się init.
Wywołanie zwrotne
albo, jeśli wolisz,
procedura obsługi
zdarzeń.
Przeglądarka,
a bardziej konkretnie
obiekt window.
jesteś tutaj
281
Interakcja ze stronami WWW
Mam ją! Zapisałem
ją we właściwości onload,
więc na pewno o niej nie
zapomnę…
1LHFRSyĮQLHM
Hej,
przeglądarko… Dzięki,
że nie zapomniałaś wywołać
funkcji init. Wszystko poszło
jak po maśle!
0HWRGDLQLWMHVWZ\ZRâ\ZDQDL]RVWDMHZ\NRQDQD
A kiedy funkcja init zostanie
wywołana, zauważymy, że
zawartość strony uległa
zmianie!
Ech… To była ciężka
robota, ale w końcu udało się
wczytać stronę. No dobra, zobaczmy
teraz… Muszę wywołać dowolną funkcję,
do której odwołuje się moja właściwość
onload. Dobrze, mam ją — to funkcja
init. Wywołujemy init!
282
Rozdział 6.
Rozmyślania o funkcjach i procedurach obsługi zdarzeń
Ciekawe. Mogę zatem
używać funkcji, by gromadzić kod,
który zostanie wykonany później, kiedy
zajdzie jakieś zdarzenie. A jakie inne
rodzaje zdarzeń mogę w taki sposób
obsługiwać?
Masz rację, istnieje wiele rodzajów zdarzeń,
które możesz obsługiwać, jeśli tylko będziesz
nimi zainteresowany.
Niektóre zdarzenia, takie jak
onload
, są generowane przez przeglądarkę, natomiast inne
pojawiają się podczas interakcji użytkownika ze stroną lub
nawet są generowane przez sam kod JavaScript.
Zobaczyłeś już przykład zdarzenia „strona została w całości
wczytana”, które można obsługiwać, określając wartość
właściwości
onload
obiektu
ZLQGRZ
. Można także tworzyć
procedury obsługi zdarzeń obsługujące takie zdarzenia
jak „wywołaj tę funkcję po pięciu sekundach” lub „usługa
sieciowa przesłała jakieś dane, musimy teraz z nimi coś
zrobić” albo „użytkownik kliknął przycisk i musimy teraz
zrobić coś z informacjami podanymi w formularzu”. Takich
zdarzeń jest całkiem sporo. Wszystkie te zdarzenia są
powszechnie używane podczas tworzenia stron, które
działają raczej jak aplikacje, a nie statyczne dokumenty
(bo w końcu, kto by ich chciał). To, co przedstawiliśmy,
to jedynie pobieżny rzut oka na zdarzenia i procedury
ich obsługi, jednak dalej w tej książce poświęcimy im
znacznie więcej czasu i uwagi, gdyż odgrywają one bardzo
ważną rolę w rozwiązaniach tworzonych z użyciem języka
JavaScript.
jesteś tutaj
283
Interakcja ze stronami WWW
<!doctype html>
<html lang=”pl”>
<head>
<title>Moja lista odtwarzania</title>
<meta charset=”utf-8”>
<script>
____________ addSongs() {
var song1 = document.______________(”________”);
var _____ = _______________________(”________”);
var _____ = ________.getElementById(”________”);
________.innerHTML = ”Smutne zamszowe ïañcuchy, Elvisa Pagelya”;
__________________ = ”Wielkie obiekty w ogniu, -erryijego -SON Lewisa”;
song3.____________ = ”Pierwszy wiersz kodu, -ohnnyijego -avaScripta”;
}
window.___________ = ____________;
</script>
</head>
<body>
<h1>Moja niesamowita lista odtwarzania</h1>
<ul id=”playlist”>
<li id=”song1”></li>
<li id=”song2”></li>
<li id=”song3”></li>
</ul>
</body>
</html>
Kiedy już uruchomisz
skrypt, wygenerowana
przez niego strona
powinna wyglądać tak.
Uzupełnij puste miejsca
odpowiednim kodem, który
wyświetli listę utworów.
To jest kod
HTML strony.
A to jest nasz skrypt. Jego kod powinien
wypełnić listę piosenek umieszczoną
w elemencie <ul>.
To jest pusta lista piosenek.
Powyższy kod JavaScript powinien
określić zawartość każdego
z pustych elementów <li>.
Poniżej przedstawiliśmy kod HTML listy odtwarzania, z tym że na liście
nie ma żadnych piosenek. Twoim zadaniem jest uzupełnienie kodu
JavaScript tak, by dodać piosenki do listy. Uzupełnij puste miejsca kodem
JavaScript, który wykona zadanie. Sprawdź rozwiązanie zadania, które
podaliśmy pod koniec rozdziału.
Zaostrz ołówek
Get Programowanie w JavaScript Rusz głową! now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
