← Wróć do spisu ← Wróć na pulpit
Materiał edukacyjny · Informatyka JavaScript w przeglądarce · Moduł 01

MODUŁ 01

Podłączenie skryptu, okna dialogowe i konsola

PPrezentacja dla nauczyciela

W tym module poznasz podstawy osadzania JavaScriptu w dokumentach HTML: prawidłowe dołączanie zewnętrznego pliku skryptu, natychmiastową komunikację z użytkownikiem za pomocą okien dialogowych alert() i prompt() oraz techniki badania stanu programu w konsoli przeglądarki.

Dołączanie pliku skryptu do dokumentu HTML

JavaScript w aplikacjach internetowych odpowiada za logikę i interakcję z użytkownikiem po stronie przeglądarki. Standardową i najbardziej przejrzystą praktyką jest zapisywanie skryptu w osobnym pliku z rozszerzeniem .js (np. skrypt.js) oraz dołączanie go do dokumentu HTML za pomocą znacznika <script> z atrybutem src.

Znacznik skryptu najczęściej umieszcza się na samym końcu sekcji <body>, tuż przed jej znacznikiem zamykającym </body>. Dzięki temu przeglądarka najpierw wczytuje i renderuje wszystkie elementy interfejsu (nagłówki, formularze, przyciski), a dopiero potem uruchamia kod, który może się do nich bezpiecznie odwoływać.

W poniższym przykładzie przycisk wywołuje funkcję zmienTekst() zdefiniowaną w pliku skrypt.js. Zmodyfikuj wyświetlany tekst w edytorze kodu, a następnie kliknij Uruchom (▶), by zobaczyć działanie w oknie podglądu:

function zmienTekst() {
    const naglowek = document.getElementById("naglowek");
    naglowek.textContent = "Witaj w kursie JavaScript!";
}
1. W którym miejscu dokumentu HTML najczęściej umieszcza się znacznik dołączający zewnętrzny plik JavaScript?
2. Jaki atrybut znacznika script wskazuje ścieżkę do zewnętrznego pliku ze skryptem JavaScript?
3. Dlaczego zaleca się zapisywanie kodu JavaScript w osobnym pliku z rozszerzeniem js zamiast w kodzie HTML?

Okna dialogowe alert i prompt

Przeglądarka internetowa udostępnia wbudowane metody pozwalające na bezpośrednią wymianę informacji z użytkownikiem bez konieczności natychmiastowego budowania rozbudowanych formularzy:

  • alert(komunikat) — wyświetla modalne okno z informacją tekstową oraz przyciskiem OK. Dopóki użytkownik nie zamknie okna, wykonywanie skryptu zostaje wstrzymane. Metoda ta doskonale sprawdza się do wyświetlania pilnych ostrzeżeń, komunikatów walidacji lub potwierdzeń wykonania operacji (np. wysłania zamówienia).
  • prompt(pytanie, domyslnaWartosc) — wyświetla okno z pytaniem, jednoliniowym polem edycyjnym oraz przyciskami OK i Anuluj. Funkcja zwraca wpisany przez użytkownika tekst. Jeżeli użytkownik kliknie Anuluj lub zamknie okno, funkcja zwróci wartość null. Drugi parametr jest opcjonalny i pozwala wstępnie wypełnić pole domyślną propozycją odpowiedzi.

Poniższy przykład pobiera imię użytkownika za pomocą funkcji prompt(), wyświetla powiadomienie przez alert(), a następnie wypisuje potwierdzenie bezpośrednio w elemencie strony.

Zmień w edytorze domyślny tekst skryptu i przetestuj interakcję:

function powitajUzytkownika() {
    const imie = prompt("Podaj swoje imię:", "Uczeń");
    alert("Witaj na platformie, " + imie + "!");
    const komunikat = document.getElementById("komunikat");
    komunikat.textContent = "Zalogowano użytkownika: " + imie;
}
4. Jaka jest główna funkcja metody alert() w skrypcie wykonywanym po stronie przeglądarki?
5. Jaki typ wartości zwraca metoda prompt() po kliknięciu przez użytkownika przycisku Anuluj?
6. Do czego służy opcjonalny drugi argument przekazywany do wywołania metody prompt()?

Diagnostyka programu w konsoli i obsługa błędów

Niezbędnym narzędziem każdego programisty jest konsola przeglądarki internetowej (dostępna w Narzędziach deweloperskich po naciśnięciu klawisza F12 lub skrótu Ctrl+Shift+I). Za pomocą metody console.log() można wypisywać dowolne informacje diagnostyczne: wartości zmiennych, wyniki pośrednich obliczeń czy komunikaty kontrolne informujące, czy funkcja w ogóle została wywołana.

W przeciwieństwie do alert(), wywołanie console.log() nie wstrzymuje działania programu i nie zakłóca odbioru strony przez użytkownika. Metoda ta przyjmuje dowolną liczbę argumentów rozdzielonych przecinkami, co pozwala czytelnie łączyć etykiety tekstowe z wartościami liczbowymi.

Konsola rozróżnia poziomy komunikatów. Każdy poziom ma inny kolor i inną ikonę, a w Narzędziach deweloperskich można filtrować wpisy według poziomu. Do dyspozycji są cztery podstawowe metody obiektu console:

  • console.log() — zwykły wpis diagnostyczny: wartości zmiennych, wyniki obliczeń, informacja, że kod dotarł do danego miejsca.
  • console.info() — komunikat informacyjny; w większości przeglądarek wygląda tak samo jak wpis z console.log().
  • console.warn() — ostrzeżenie, wyświetlane na żółto z ikoną trójkąta. Sygnalizuje sytuację, która nie jest błędem, ale wymaga uwagi: pracę na wersji demonstracyjnej, brak danych opcjonalnych, nieaktualne ustawienie.
  • console.error() — błąd, wyświetlany na czerwono. Zgłaszamy nim rzeczy, które nie powinny się zdarzyć: brak połączenia, nieprawidłową odpowiedź, element nieznaleziony w dokumencie.

Ważne: console.warn() i console.error() tylko wypisują komunikat — nie zatrzymują skryptu. Można więc zgłosić problem i wykonywać dalsze polecenia. Inaczej działa nieprzechwycony wyjątek, który przerywa wykonywanie kodu.

Podczas pisania skryptów w konsoli pojawiają się również automatyczne komunikaty o błędach. Dwa najczęstsze z nich to:

  • ReferenceError — próba użycia zmiennej lub wywołania funkcji, która nie została zadeklarowana. Najczęstszą przyczyną jest literówka w nazwie (pamiętaj, że w JavaScripcie wielkość liter ma kluczowe znaczenie — mojaZmienna i MojaZmienna to dwa różne identyfikatory).
  • TypeError — próba wykonania niedozwolonej operacji na danym typie, na przykład wywołanie metody na wartości null (częsty przypadek, gdy document.getElementById() nie znajdzie w dokumencie podanego identyfikatora).

W edytorze poniżej przetestuj działanie czterech metod konsoli. Kliknij Uruchom (▶), a następnie przycisk Wyślij dane do konsoli w podglądzie — wpisy pojawią się w sekcji wyjścia pod edytorem.

function wykonajLogi() {
    const produkt = "Monitor 24 cale";
    const cena = 450;
    const rabat = 0.1;
    const cenaPoRabacie = cena * (1 - rabat);

    console.log("Wybrany produkt:", produkt);
    console.info("Cena początkowa:", cena, "zł");
    console.log("Cena po rabacie:", cenaPoRabacie, "zł");

    // ostrzeżenie: działanie jest możliwe, ale warto zwrócić na coś uwagę
    console.warn("Uwaga: to wersja demonstracyjna sklepu");

    // błąd: coś, co nie powinno się zdarzyć podczas normalnej pracy
    console.error("Błąd: nie udało się pobrać ceny z serwera");
}
7. W jakim celu programista wykorzystuje metodę console.log() podczas tworzenia aplikacji internetowej?
8. Co oznacza błąd typu ReferenceError wyświetlany w konsoli przeglądarki internetowej?
9. Jak JavaScript traktuje wielkość liter w nazwach zmiennych i wywołaniach funkcji?

Ćwiczenia

Materiały edukacyjne Hyżyk · JavaScript pod kątem INF.03 · Moduł 01