Programowanie w JavaScript Rusz głową!

jesteś tutaj

439

Programowanie asynchroniczne

Jazda testowa z licznikiem czasu

To nie był zbyt długi fragment kodu do dodania, a jednak wprowadził znaczące zmiany w

sposobie działania gry. Teraz, kiedy klikniesz obrazek, przeglądarka w niewidoczny sposób

(przy wykorzystaniu licznika czasu) zaczyna odliczać, kiedy powinna wywołać funkcję

reblur

,

która ponownie wyświetli na stronie nieostrą wersję obrazu. Zwróć uwagę na

asynchroniczny

charakter działania aplikacji — to Ty decydujesz, kiedy klikniesz obrazek, jednak fragmenty

kodu aplikacji są wykonywane w różnym czasie, zależnie do generowanych zdarzeń

click

oraz zdarzeń generowanych przez liczniki czasu. Nie ma żadnego superalgorytmu sterującego

działaniem gry, kontrolującego, jak kod zostanie wykonany i kiedy; jest tylko kilka

niewielkich fragmentów kodu, które przygotowują obsługę zdarzeń, a następnie je obsługują.

Teraz, kiedy klikniemy

obrazek, zostanie

wyświetlony w normalnej

postaci, a następnie po

upływie dwóch sekund

ponownie zostanie

podmieniony na swoją

nieostrą wersję.

Dobrze przetestuj tę aplikację,

klikając kilka obrazków w krótkim

okresie czasu. Czy zawsze

wszystko działa prawidłowo?

Zajrzyj ponownie do kodu

i spróbuj się trochę zastanowić

nad tym, w jaki sposób

przeglądarka przechowuje

informacje o wszystkich obrazkach,

które trzeba podmienić.

P

: Czy do funkcji obsługującej licznik

czasu, określanej przy użyciu funkcji

setTimeout

, mogę przekazać tylko

jeden argument?

O

:

Nie, możesz ich przekazać dowolnie

wiele: żaden, jeden lub kilka.

P

: A co z obiektem zdarzenia?

Dlaczego nie jest przekazywany do

funkcji określanej przez wywołanie

setTimeout

?

O

:

Obiekt zdarzenia jest zazwyczaj

używany w procedurach obsługi zdarzeń

związanych z DOM. Funkcja VHW7LPHRXW

nie przekazuje takiego obiektu do określanej

przez siebie funkcji obsługi, gdyż nie jest

ona skojarzona z żadnym konkretnym

elementem.

P

: Funkcja

showAnswer

obsługuje

zdarzenia, a mimo to tworzy nową

procedurę obsługi zdarzeń,

reblur

?

Czy to jest prawidłowe rozwiązanie?

O

:

Zauważyłeś to. W praktyce, w języku

JavaScript takie rozwiązania są spotykane

dosyć często. Jest całkowicie normalne, że

kod jakiejś procedury obsługi zdarzeń określa

procedury obsługi innych zdarzeń. Właśnie

taki styl tworzenia aplikacji określiliśmy na

początku tego rozdziału nazwą

programowanie

asynchroniczne

. Do utworzenia gry w obrazy

nie napisaliśmy algorytmu działającego

liniowo od początku do końca. Zamiast tego

przygotowaliśmy procedury obsługi, które

umożliwiają prowadzenie gry w momencie

generowania zdarzeń. Prześledź, co się

dzieje po kliknięciu kilku różnych obrazków

oraz przyjrzyj się różnym wywołaniom

wykonywanym w celu wyświetlenia normalnej

i nieostrej wersji obrazu.

P

: A zatem istnieją zdarzenia związane

z elementami DOM, z licznikami czasu…

Czy dużo jest takich rodzajów zdarzeń?

O

:

Wiele zdarzeń powszechnie używanych

w języku JavaScript to zdarzenia związane

z elementami DOM (takie jak zdarzenia

click) lub z licznikami czasu (tworzone

przy użyciu funkcji VHW7LPHRXW

oraz VHW,QWHUYDO). Istnieją także

zdarzenia związane z konkretnymi API,

np. generowane przez mechanizmy

geolokalizacji, LocalStorage, zdarzenia

wątków roboczych itd. (Więcej informacji

o nich znajdziesz w książce

HTML5. Rusz

głową!

). I w końcu istnieje także cała

grupa zdarzeń związanych z operacjami

wejścia-wyjścia, np. zdarzenie informujące

o odebraniu danych przy użyciu obiektu

;PO+WWS5HTXHVW (także o nim możesz

przeczytać w książce

HTML5. Rusz głową!

)

lub gniazd sieciowych (ang.

Web Sockets

).

głupie pytania

Nie istnieją

440

Rozdział 9.

Stosowanie zdarzenia mouseover

Cześć Panowie,

użytkownicy komputerów

stacjonarnych chcieliby mieć możliwość

wyświetlenia normalnej wersji obrazu

poprzez przesunięcie nad nim wskaźnika

myszy. Czy możecie zaimplementować

coś takiego?

Judyta:

Aby zaimplementować taką możliwość, trzeba będzie skorzystać ze zdarzenia

mouseover

. Jego procedurę obsługi można dodać do dowolnego elementu, używając

właściwości

onmouseover

:

myElement.onmouseover = myHandler;

Judyta:

Oprócz niego istnieje także zdarzenie

mouseout

, które informuje, kiedy wskaźnik

myszy został usunięty z obszaru elementu. Do określania procedury obsługi tego zdarzenia

służy właściwość

onmouseout

.

Ćwiczenie

Przerób kod aplikacji w taki sposób, by normalna wersja obrazu była

wyświetlana po umieszczeniu w jego obszarze wskaźnika myszy oraz by po

usunięciu wskaźnika z obszaru obrazka ponownie była wyświetlana jego

nieostra wersja. Nie zapomnij przetestować kodu oraz porównać swojego

rozwiązania z naszym, zamieszczonym pod koniec rozdziału.

Tutaj zapisz kod JavaScript.

jesteś tutaj

441

Programowanie asynchroniczne

Ćwiczenie

<!doctype html>

<html lang=”pl”>

<head>

<meta charset=”utf-8”>

<title>Nie zmieniaj mojej wielkoĂci, mam ïaskotki!</title>

<script>

function resize() {

var element = document.getElementById(”display”);

element.innerHTML = element.innerHTML + ” To ïaskocze!”;

}

</script>

</head>

<body>

<p id=”display”>

Cokolwiek robisz, nie zmieniaj wielkoĂci okna! Ostrzegam!

</p>

<script>

window.onresize = resize;

</script>

</body>

</html>

Tutaj zapisz swoje notatki dotyczące sposobu

działania kodu Judyty. Jakie zdarzenia są w nim

wykorzystywane? W jaki sposób jest określana ich

procedura obsługi? I w końcu kiedy te zdarzenia są

generowane? Nie ograniczaj się do samych notatek

— wypróbuj działanie aplikacji w przeglądarce.

Po zakończeniu gry w obrazki Judyta napisała prostą aplikację z myślą

o zbliżającym się, cotygodniowym spotkaniu zespołu. Zaplanowała mały

konkurs. Wygra go osoba, która pierwsza opisze działanie jej kodu.

Kto wygra ten konkurs? Kuba, Józek, Franek? A może Ty?