Fragment kodu HTML z JavaScript spowoduje, że po kliknięciu przycisku
| <img src="obraz1.png"> <img src="obraz2.png" id="id1"> <button onclick="document.getElementById('id1').style.display='none'">Przycisk</button> |
Poprawna odpowiedź dotyczy ukrycia obrazu obraz2.png poprzez jego identyfikację za pomocą unikalnego atrybutu id. W kodzie HTML każdy element może być zidentyfikowany przez atrybut id, co pozwala na bezpośrednią manipulację jego własnościami w JavaScript. Funkcja document.getElementById służy do wyszukiwania elementu o podanym id w strukturze DOM dokumentu. Następnie, używając stylowania CSS poprzez właściwość style, możliwe jest zmienienie wartości display na 'none', co skutkuje ukryciem elementu w przeglądarce. Taka technika jest często wykorzystywana w interaktywnych aplikacjach webowych, gdzie użytkownik musi mieć możliwość dynamicznego manipulowania elementami interfejsu. Praktyka ta jest zgodna ze standardami W3C i pozwala na tworzenie responsywnych, przyjaznych użytkownikowi aplikacji. Dobrym przykładem zastosowania jest tworzenie galeria obrazów, gdzie tylko wybrane zdjęcia są wyświetlane w danym momencie. Taka funkcjonalność sprzyja również poprawie czytelności strony, ponieważ użytkownik może ukrywać i odkrywać treści według własnych potrzeb. Zrozumienie tego mechanizmu jest kluczowe dla każdego, kto chce budować nowoczesne strony internetowe z użyciem HTML, CSS i JavaScript.
Niepoprawne odpowiedzi wynikają z błędnego zrozumienia działania mechanizmu manipulacji DOM przy użyciu JavaScript. Pierwszym potencjalnym błędem jest założenie, że obraz1.png zostanie ukryty. Kod JavaScript wyraźnie odnosi się do elementu o id 'id1', co jednoznacznie wskazuje na obraz2.png. Tym samym jakiekolwiek operacje związane z obraz1.png są wykluczone, ponieważ ten obraz nie posiada przypisanego identyfikatora, który mógłby być użyty w skrypcie. Kolejne błędne założenie dotyczy zastąpienia jednego obrazu drugim. Aby taka operacja miała miejsce, kod musiałby modyfikować atrybut src jednego z elementów img, co w tym przypadku nie występuje. W obecnym fragmencie kodu zmiana atrybutu src nie jest implementowana, co rzutuje na to, że żaden obraz nie zostanie zamieniony. Typowy błąd logiczny polega tutaj na pomyleniu ukrywania elementu z jego modyfikacją lub zamianą. Błędne rozumienie również może wywodzić się z zakładania, że zmiana widoczności elementu automatycznie implikuje jego fizyczną zamianę, co nie jest prawdą w kontekście manipulacji DOM. Użytkownik powinien nauczyć się rozróżniać te operacje, aby unikać podobnych nieporozumień. Prawidłowe zrozumienie tych mechanizmów pozwala na efektywne projektowanie dynamicznych interfejsów użytkownika, które są zarówno funkcjonalne, jak i estetyczne. W rzeczywistości, operacje na DOM, takie jak ukrywanie elementów, są podstawą nowoczesnego web designu i powinny być dobrze zrozumiane przez każdego programistę webowego.