jesteś tutaj
427
Programowanie asynchroniczne
Zaprzęgamy obiekt zdarzenia do pracy
Skoro już dowiedziałeś się trochę o zdarzeniach — a konkretnie o tym, jak obiekt zdarzenia
zostaje przekazany do procedury obsługi zdarzeń
click
— spróbujmy określić, jak
wykorzystać informacje zapisane w obiekcie zdarzenia do wyświetlenia na stronie obrazka
w normalnej postaci. Zaczniemy od ponownego przedstawienia kodu HTML strony.
function showAnswer(eventObj) {
var image = eventObj.target;
var name = image.id;
name = name + ”.jpg”;
image.src = name;
}
Właściwość target obiektu zdarzenia
jest referencją do obiektu elementu
reprezentującego kliknięty obrazek.
Możemy użyć właściwości id tego obiektu,
by pobrać nazwę obrazu w normalnej postaci.
Zwróć uwagę, że wartość atrybutu
id
każdego z obrazków odpowiada nazwie pliku zawierającej
normalną postać obrazu (z pominięciem rozszerzenia
.jpg). W takim razie, gdybyśmy mogli
odczytać wartość tego atrybutu, można by dodać do niej łańcuch
ĵMSJĵ
i uzyskać w ten
sposób pełną nazwę pliku. Kiedy już ją utworzymy, możemy zapisać ją we właściwości
src
odpowiedniego obrazka. Poniżej pokazujemy, jak to zrobić.
<!doctype html>
...
<body>
<img id=”zero” src=”zeroblur.jpg”>
<img id=”one” src=”oneblur.jpg”>
<img id=”two” src=”twoblur.jpg”>
<img id=”three” src=”threeblur.jpg”>
<img id=”four” src=”fourblur.jpg”>
<img id=”five” src=”fiveblur.jpg”>
</body>
</html>
Każdy z obrazków ma swój identyfikator,
który odpowiada nazwie pliku
zawierającego normalną postać obrazu.
A zatem normalna postać obrazka
o identyfikatorze „zero” jest zapisana
w pliku zero.jpg. Z kolei normalna
postać obrazka o identyfikatorze „one”
jest zapisana w pliku one.jpg itd.
To jest kod HTML strony.
W końcu uzyskaną nazwę pliku
zapisujemy we właściwości src.
Pamiętaj, że za każdym razem, gdy
klikniemy obrazek, do funkcji zostanie
przekazany obiekt zdarzenia.
Jak wiesz, po zmianie wartości właściwości src obrazka
przeglądarka natychmiast pobierze nowy obraz i wyświetli go
na stronie w miejscu poprzedniego.
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.
