Wprowadzenie do JavaScript i pierwszy skrypt

Po co się tego uczymy?

HTML i CSS budują stronę, ale to JavaScript sprawia, że strona ŻYJE — reaguje na kliknięcia, sprawdza formularze, dynamicznie zmienia treść bez przeładowania strony. To pierwszy krok w kierunku prawdziwie interaktywnego serwisu.

Teoria

HTML daje stronie strukturę, CSS — wygląd, ale obie te technologie są STATYCZNE — nie reagują same z siebie na kliknięcia czy wpisywany tekst. Do tego służy JavaScript — jedyny język programowania, który każda przeglądarka rozumie natywnie, bez instalowania czegokolwiek.

JavaScript umieszcza się w dokumencie HTML na dwa sposoby: wewnątrz znacznika <script> (bezpośrednio w kodzie strony) albo w osobnym pliku .js podłączonym przez <script src="skrypt.js"></script> — ta druga metoda jest lepsza w większych projektach, tak jak zewnętrzny plik CSS.

Do zapisywania danych w zmiennych służą trzy słowa kluczowe: let (zmienna, której wartość może się zmienić), const (stała — wartość ustawiana raz i niezmienna) i przestarzałe var (unikaj go — ma nieintuicyjne zasady widoczności zmiennej). Zasada w praktyce: używaj const domyślnie, a let tylko tam, gdzie wartość faktycznie musi się zmieniać.

console.log(...) wypisuje wartość do konsoli przeglądarki (F12 → zakładka Console) — to podstawowe narzędzie do sprawdzania, co dzieje się w Twoim kodzie, odpowiednik echo w PHP.

Schemat

HTML (struktura)  +  CSS (wygląd)  +  JavaScript (zachowanie)
       |                  |                    |
       └──────────────────┴────────────────────┘
                           |
                  strona w przeglądarce,
              która reaguje na działania użytkownika

Przykład z życia

Każde okienko z ostrzeżeniem, każdy licznik znaków w polu tekstowym, każde dynamiczne pokazywanie/ukrywanie fragmentu strony bez jej przeładowania — to działanie JavaScript.

Kod (JavaScript)

<script>
    // stała - wartość się nie zmieni
    const nazwaSerwisu = "Serwis filmowy";

    // zmienna - wartość może się zmieniać
    let liczbaOdwiedzin = ;
    liczbaOdwiedzin = liczbaOdwiedzin + 1;

    console.log("Witaj w " + nazwaSerwisu);
    console.log("Liczba odwiedzin: " + liczbaOdwiedzin);

    // alert() pokazuje okienko z komunikatem w przeglądarce
    alert("Strona załadowana poprawnie!");
</script>

Komentarz i wyjaśnienie kodu

Zwróć uwagę na operator + użyty do "sklejania" tekstu ze zmienną (konkatenacja) — działa podobnie jak w PHP, choć PHP zwykle używa do tego kropki. console.log() nie pokazuje niczego na samej stronie — wynik widać tylko w narzędziach deweloperskich przeglądarki (klawisz F12), dlatego jest to narzędzie do debugowania, nie do komunikacji z użytkownikiem (do tego służy np. zmiana treści elementu HTML — Lekcja 6).

Ćwiczenie samodzielne

Otwórz konsolę przeglądarki (F12) na dowolnej stronie i wypisz przez console.log() swoje imię zapisane w stałej.

Plac zabaw — wypróbuj online

Poniższy kod wykonuje się od razu w Twojej przeglądarce — nic nie trzeba instalować. Zmień kod i kliknij „Uruchom”.

JAVASCRIPT

Zadania do pracy własnej

Zadeklaruj dwie zmienne (imię i wiek) i wypisz przez console.log() zdanie łączące obie wartości.
Napisz skrypt obliczający sumę i różnicę dwóch liczb zapisanych w stałych, wypisując oba wyniki do konsoli.
Zbuduj skrypt symulujący "licznik odwiedzin" strony serwisu filmowego — zmienna zaczyna od 0, jest zwiększana trzy razy w kodzie (symulując trzy odwiedziny), a na końcu wypisywana zarówno przez console.log(), jak i przez alert().

Typowe błędy

Częsty błąd to próba zmiany wartości zmiennej zadeklarowanej jako const — JavaScript zgłosi błąd ("Assignment to constant variable"), bo const celowo blokuje ponowne przypisanie. Drugi błąd: zapomnienie średnika na końcu instrukcji — JavaScript zwykle "wybacza" ten brak, ale prowadzi to do trudnych do znalezienia błędów w bardziej złożonym kodzie. Trzeci: mylenie = (przypisanie wartości) z ==/=== (porównanie, Lekcja 2).

Nawiązanie do egzaminu zawodowego

To bezpośrednia realizacja efektu INF.03.5.3.1 z podstawy programowej: "programuje w języku JavaScript" — pierwszy, najbardziej podstawowy punkt całej jednostki "Programuje skrypty wykonywane po stronie klienta".