Programowanie w JavaScript Rusz głową!

jesteś tutaj

421

Programowanie asynchroniczne

Teraz musimy przypisać tę samą procedurę obsługi

zdarzeń do właściwości onclick każdego obrazka

Na naszej stronie znajduje się więcej obrazków. Obecnie możesz jednak kliknąć tylko

pierwszy z nich (przedstawiający

Mona Lisę), aby zobaczyć jego normalną postać.

A co ze wszystkimi pozostałymi?

Oczywiście

moglibyśmy napisać osobne procedury obsługi dla każdego obrazka, jednak

z wcześniejszych rozważań już wiesz, że byłoby to uciążliwym marnotrawstwem kodu.

Spójrz na kod przedstawiony poniżej.

window.onload = init;

function init() {

var image0 = document.getElementById(”zero”);

image0.onclick = showImageZero;

var image1 = document.getElementById(”one”);

image1.onclick = showImageOne;

...

}

function showImageZero() {

var image = document.getElementById(”zero”);

image.src = ”zero.jpg”;

}

function showImageOne() {

var image = document.getElementById(”one”);

image.src = ”one.jpg”;

}

...

Każdy element obrazka umieszczony

na stronie możemy pobrać

i przypisać mu odrębną funkcję

obsługującą zdarzenia click.

Musielibyśmy zrobić to sześć razy,

choć tutaj pokazaliśmy kod tylko

dla dwóch elementów.

Dodatkowo potrzebowalibyśmy

sześciu funkcji obsługujących

zdarzenia, po jednej dla każdego

obrazka na stronie.

Tu znalazłyby się kody dla

pozostałych czterech obrazków.

Tutaj musielibyśmy podać cztery dodatkowe funkcje.

WYSIL

SZARE KOMÓRKI

Jakie są wady pisania odrębnych funkcji obsługujących zdarzenia dla

poszczególnych obrazków? Zaznacz wszystkie, które według Ciebie są

uzasadnione.

Dużo powtarzającego się kodu.

Generuje dużo kodu.

Trudno je uogólnić, by operowały na

dowolnej liczbie obrazków.

Gdybyśmy musieli zmienić kod w jednej funkcji,

najprawdopodobniej musielibyśmy to także

zrobić we wszystkich pozostałych.

Utrudnia to śledzenie wszystkich obrazków

i procedur ich obsługi.

Utrudnia innym programistom pracę nad kodem.