Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Kod JavaScript aktywowany przez kliknięcie przycisku ma na celu<img id="i1" src="obraz1.gif">
<button onclick="document.getElementById('i1').src='obraz2.gif'">
test</button>
<img id="i1" src="obraz1.gif">
<button onclick="document.getElementById('i1').src='obraz2.gif'">
test</button>Odpowiedzi
Informacja zwrotna
Kod JavaScript w przedstawionym przykładzie został zaprogramowany w celu zamiany źródła obrazu na nowe po naciśnięciu przycisku. Gdy użytkownik kliknie na przycisk, wywołuje on funkcję, która zmienia atrybut 'src' elementu <img> z 'obraz1.gif' na 'obraz2.gif'. Jest to typowy sposób manipulacji elementami DOM w JavaScript, co jest fundamentalnym elementem programowania interakcji na stronach internetowych. Takie podejście jest zgodne z najlepszymi praktykami w zakresie programowania front-end, ponieważ pozwala na dynamiczne zmiany na stronie bez konieczności przeładowania całej strony. Przykładem praktycznego zastosowania może być użycie tego typu kodu w aplikacjach webowych, gdzie użytkownik może interaktywnie zmieniać widok, na przykład w galeriach zdjęć, grach przeglądarkowych czy aplikacjach do nauki. Zrozumienie tej techniki jest kluczowe dla każdego programisty front-end, ponieważ efektywne wykorzystanie JavaScript do manipulacji DOM jest jednym z podstawowych narzędzi w budowie nowoczesnych aplikacji webowych.
Wybór odpowiedzi, która sugeruje ukrycie obraz2.gif, jest niepoprawny, ponieważ kod nie ma na celu ukrywania żadnego obrazu, lecz zmienia źródło istniejącego elementu <img>. Ukrycie obrazu wymagałoby zastosowania stylów CSS lub manipulacji atrybutem 'style', co nie znajduje zastosowania w tym przypadku. Odpowiedź mówiąca o zmianie stylu obrazu o id i1 również jest błędna, ponieważ w opisie nie możemy zauważyć żadnej operacji związanej z modyfikacją stylów elementu, a jedynie z jego źródłem. Z kolei wyświetlenie obraz2.gif obok obraz1.gif sugerowałoby dodanie nowego elementu <img> do DOM, co jest sprzeczne z tym, co przedstawia kod. W tym przypadku operacja polega na bezpośredniej zamianie jednego źródła na drugie, co jest powszechnie stosowaną praktyką w programowaniu interakcji w JavaScript. Kluczową koncepcją, którą należy zrozumieć, jest to, że manipulacje DOM są często używane do wprowadzania zmian w przedstawieniu treści na stronie w odpowiedzi na działania użytkownika. Dlatego, przekonanie, że zmiany stylów lub dodanie nowych elementów są równoważne z operacją zamiany źródeł obrazów, prowadzi do mylnych wniosków, które mogą skutkować nieefektywnym lub błędnym kodowaniem w przyszłości.