function tekst() { var h = location.hostname; document.getElementById("info").innerHTML = h; } Przedstawiona funkcja, zapisana językiem JavaScript,...
function tekst() { var h = location.hostname; document.getElementById("info").innerHTML = h; }Przedstawiona funkcja, zapisana językiem JavaScript, ma za zadanie
A. wyświetlić w elemencie o id = "info" adres hosta wskazany pierwszym odnośnikiem.
B. wyświetlić na przycisku lokalizację hosta, a po jego wciśnięciu umożliwić przejście do wskazanej lokalizacji.
C. umożliwić przejście do wskazanej lokalizacji hosta.
D. wyświetlić w elemencie o id = "info" nazwę hosta, z którego pochodzi wyświetlona strona.
Pytanie z egzaminu CKE, czerwiec 2022 (arkusz E.14-SG-22.06).
Ta funkcja robi dokładnie to, co opisuje odpowiedź: pobiera nazwę hosta bieżącej strony i wpisuje ją do elementu o id „info”. Warto rozbić kod na kawałki. Instrukcja var h = location.hostname; korzysta z obiektu location, który w przeglądarce opisuje aktualny adres dokumentu. Właściwość hostname zwraca samą nazwę hosta, czyli np. localhost, www.example.com albo szkola.edu.pl, bez protokołu https://, bez ścieżki, portu i parametrów adresu. Potem document.getElementById('info') wyszukuje w strukturze DOM element mający id równe info, a przypisanie do innerHTML powoduje wstawienie tam pobranej wartości. W praktyce można tego użyć np. do pokazania użytkownikowi, z jakiej domeny działa aplikacja, do prostych komunikatów diagnostycznych albo w panelu administracyjnym. Moim zdaniem lepszą praktyką przy zwykłym tekście byłoby użycie textContent zamiast innerHTML, bo nie interpretujemy wtedy treści jako HTML i zmniejszamy ryzyko problemów z bezpieczeństwem. Sama logika odpowiedzi jest jednak jasna: chodzi o nazwę hosta aktualnie wyświetlonej strony.
W tym kodzie łatwo pomylić kilka rzeczy, bo nazwy location i hostname kojarzą się z adresem oraz przechodzeniem między stronami. Trzeba jednak pamiętać, że samo odczytanie location.hostname nie wykonuje żadnego przekierowania. Przeglądarka tylko udostępnia informację o bieżącym adresie strony. Do zmiany lokalizacji używałoby się raczej przypisania do location.href, metody location.assign() albo location.replace(), a tutaj tego w ogóle nie ma. Funkcja niczego nie otwiera i nie przenosi użytkownika pod inny adres.
Nie ma też w tym fragmencie żadnego przycisku ani obsługi kliknięcia. Kod może oczywiście zostać wywołany po kliknięciu przycisku, jeśli gdzieś w HTML podpięto zdarzenie onclick lub addEventListener, ale z samej funkcji to nie wynika. Ona tylko pobiera tekstową wartość i wstawia ją do elementu strony. Podobnie błędne jest założenie, że chodzi o host wskazany pierwszym odnośnikiem. Do analizy linków potrzebne byłoby odwołanie do elementów a, np. przez document.querySelector('a') albo getElementsByTagName('a'), a tu występuje wyłącznie globalny obiekt location, czyli adres aktualnego dokumentu.
Typowy błąd myślowy polega na traktowaniu słowa „location” jak komendy wykonującej przejście. W JavaScript obiekty i właściwości często tylko przechowują dane. Dopiero konkretna operacja, na przykład zmiana href, powoduje nawigację. Warto też zauważyć, że innerHTML modyfikuje zawartość elementu w DOM, więc wynik działania funkcji będzie widoczny dokładnie tam, gdzie w HTML znajduje się element z id „info”. Jeśli taki element nie istnieje, pojawi się błąd przy próbie ustawienia innerHTML na wartości null. To drobiazg, ale w prawdziwych projektach bardzo praktyczny.
Nie ma też w tym fragmencie żadnego przycisku ani obsługi kliknięcia. Kod może oczywiście zostać wywołany po kliknięciu przycisku, jeśli gdzieś w HTML podpięto zdarzenie onclick lub addEventListener, ale z samej funkcji to nie wynika. Ona tylko pobiera tekstową wartość i wstawia ją do elementu strony. Podobnie błędne jest założenie, że chodzi o host wskazany pierwszym odnośnikiem. Do analizy linków potrzebne byłoby odwołanie do elementów a, np. przez document.querySelector('a') albo getElementsByTagName('a'), a tu występuje wyłącznie globalny obiekt location, czyli adres aktualnego dokumentu.
Typowy błąd myślowy polega na traktowaniu słowa „location” jak komendy wykonującej przejście. W JavaScript obiekty i właściwości często tylko przechowują dane. Dopiero konkretna operacja, na przykład zmiana href, powoduje nawigację. Warto też zauważyć, że innerHTML modyfikuje zawartość elementu w DOM, więc wynik działania funkcji będzie widoczny dokładnie tam, gdzie w HTML znajduje się element z id „info”. Jeśli taki element nie istnieje, pojawi się błąd przy próbie ustawienia innerHTML na wartości null. To drobiazg, ale w prawdziwych projektach bardzo praktyczny.