W budowie
JavaScript w przeglądarce · Moduł 01

Podłączenie skryptu, okna dialogowe i konsola

Dołączanie pliku .js do dokumentu HTML, okna dialogowe alert i prompt, diagnostyka w konsoli oraz modyfikacja elementów.

  • 45 min
  • 16 slajdów
  • Notatki nauczyciela: N
  • Strona modułu: otwórz
Plan · 45 min

Co dziś robimy

  1. 12 minDołączanie pliku skryptu do dokumentu HTML Znacznik skryptu najczęściej umieszcza się na samym końcu sekcji <body> , tuż przed jej…
  2. 12 minOkna dialogowe alert i prompt alert(komunikat) — wyświetla modalne okno z informacją tekstową oraz przyciskiem OK.
  3. 12 minDiagnostyka programu w konsoli i obsługa błędów console.log() — zwykły wpis diagnostyczny: wartości zmiennych, wyniki obliczeń…
  4. 4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
  5. 5 minPodsumowanie bilet wyjściowy i zadanie domowe
Atom 1 z 3 · ~12 min

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 )…

  • 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…
Kod · atom 1 · ~3 min

HTML — podłączenie skryptu

  <h2 id="naglowek">Tekst początkowy</h2>
  <button id="przycisk" onclick="zmienTekst()">Kliknij mnie</button>
  <script src="skrypt.js"></script>
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

function zmienTekst() {
    const naglowek = document.getElementById("naglowek");
    naglowek.textContent = "Witaj w kursie JavaScript!";
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

W którym miejscu dokumentu HTML najczęściej umieszcza się znacznik dołączający zewnętrzny plik JavaScript?

Atom 2 z 3 · ~12 min

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.
  • prompt(pytanie, domyslnaWartosc) — wyświetla okno z pytaniem, jednoliniowym polem edycyjnym oraz przyciskami OK i Anuluj. Funkcja zwraca wpisany przez użytkownika tekst.
  • 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…
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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;
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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;
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

Jaka jest główna funkcja metody alert() w skrypcie wykonywanym po stronie przeglądarki?

Atom 3 z 3 · ~12 min

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 ).

  • 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…
  • 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…
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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");
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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");
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

W jakim celu programista wykorzystuje metodę console.log() podczas tworzenia aplikacji internetowej?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • Znacznik skryptu najczęściej umieszcza się na samym końcu sekcji <body> , tuż przed jej znacznikiem zamykającym </body> .
  • alert(komunikat) — wyświetla modalne okno z informacją tekstową oraz przyciskiem OK. Dopóki użytkownik nie zamknie okna, wykonywanie skryptu zostaje wstrzymane.
  • Ważne: console.warn() i console.error() tylko wypisują komunikat — nie zatrzymują skryptu.
Bilet wyjściowy: Jak JavaScript traktuje wielkość liter w nazwach zmiennych i wywołaniach funkcji?
Odpowiedź: b) Rozróżnia wielkość liter, więc różne wielkości to odrębne symbole
Hyżyk· Podłączenie skryptu, okna dialogowe i konsola moduł 1 / 1