JavaScript dla początkujących: Interaktywne strony internetowe

Czym jest JavaScript i gdzie działa

JavaScript to język programowania, który sprawia, że strony internetowe stają się interaktywne i dynamiczne. Podczas gdy HTML definiuje strukturę strony, a CSS odpowiada za jej wygląd, JavaScript dodaje zachowanie — reagowanie na kliknięcia, walidację formularzy, animacje i aktualizację treści bez przeładowania strony.

JavaScript działa bezpośrednio w przeglądarce internetowej. Każda nowoczesna przeglądarka — Chrome, Firefox, Safari czy Edge — posiada wbudowany silnik JavaScript, który interpretuje i wykonuje kod. Dzięki środowisku Node.js JavaScript można również uruchamiać na serwerze, ale w tym artykule skupimy się na zastosowaniach w przeglądarce.

W tym przewodniku omówimy najważniejsze podstawy: zmienne, manipulację DOM oraz obsługę zdarzeń. Po lekturze będziesz wiedzieć, jak zacząć dodawać interaktywność do swoich stron internetowych.

Zmienne: let i const

Zmienne w JavaScript deklarujemy za pomocą słów kluczowych let i const. Słowo let służy do tworzenia zmiennych, których wartość może się zmieniać w trakcie działania programu. Z kolei const deklaruje stałe — wartości, które po przypisaniu nie mogą być nadpisane.

// Zmienna - wartość może się zmieniać
let wynik = 0;
wynik = 10;           // OK - let pozwala na zmianę

// Stała - wartość jest niezmienna
const nazwaStrony = "Moja witryna";
// nazwaStrony = "Inna"; // Błąd! const nie pozwala na zmianę

// Podstawowe typy danych
let imie = "Anna";          // string - tekst
let wiek = 25;               // number - liczba
let aktywny = true;          // boolean - wartość logiczna

console.log(`Użytkownik: ${imie}, wiek: ${wiek}`);
// Wynik: Użytkownik: Anna, wiek: 25

Zasada jest prosta: używaj const domyślnie, a let tylko wtedy, gdy wiesz, że wartość zmiennej będzie się zmieniać. Starsze słowo kluczowe var nadal działa, ale nie jest zalecane w nowoczesnym JavaScript ze względu na problemy z zakresem widoczności zmiennych.

Manipulacja DOM

DOM (Document Object Model) to reprezentacja strony HTML w postaci drzewa obiektów. JavaScript pozwala na dostęp do elementów strony i ich modyfikację w czasie rzeczywistym — bez przeładowania. To właśnie dzięki manipulacji DOM strony internetowe mogą dynamicznie zmieniać swoją treść i wygląd.

// Pobieranie elementu po ID
const naglowek = document.getElementById("tytul");

// Zmiana treści tekstowej
naglowek.textContent = "Nowy tytuł strony";

// Zmiana stylów CSS
naglowek.style.color = "#3fb950";
naglowek.style.fontSize = "2rem";

// Pobieranie wielu elementów
const akapity = document.querySelectorAll("p");

akapity.forEach(akapit => {
    akapit.style.lineHeight = "1.8";
});

Metoda getElementById() pobiera pojedynczy element na podstawie jego atrybutu id. Bardziej uniwersalna metoda querySelectorAll() pozwala znaleźć elementy za pomocą dowolnego selektora CSS — klas, tagów, a nawet zagnieżdżonych struktur. Właściwość textContent zmienia tekst elementu, a obiekt style umożliwia modyfikację dowolnej właściwości CSS.

Obsługa zdarzeń: addEventListener

Zdarzenia to akcje użytkownika lub przeglądarki: kliknięcie przycisku, najechanie myszką, wpisanie tekstu czy przewinięcie strony. JavaScript pozwala na nasłuchiwanie tych zdarzeń i reagowanie na nie za pomocą metody addEventListener().

// Obsługa kliknięcia przycisku
const przycisk = document.getElementById("btn");
const licznik = document.getElementById("licznik");
let klikniecia = 0;

przycisk.addEventListener("click", function() {
    klikniecia++;
    licznik.textContent = `Kliknięcia: ${klikniecia}`;
});

// Zmiana koloru po najechaniu myszką
const karta = document.querySelector(".karta");

karta.addEventListener("mouseenter", () => {
    karta.style.background = "#161b22";
});

karta.addEventListener("mouseleave", () => {
    karta.style.background = "transparent";
});

Metoda addEventListener() przyjmuje dwa argumenty: nazwę zdarzenia (np. "click", "mouseenter", "submit") oraz funkcję, która ma się wykonać po wystąpieniu zdarzenia. To podejście jest znacznie lepsze od starszych metod jak onclick, ponieważ pozwala przypisać wiele nasłuchiwaczy do jednego elementu.

Podsumowanie

JavaScript to fundament interaktywności w sieci. Poznałeś trzy kluczowe koncepcje: zmienne (let i const) do przechowywania danych, manipulację DOM do dynamicznej zmiany elementów strony oraz obsługę zdarzeń do reagowania na akcje użytkownika. Te trzy mechanizmy wystarczą, żeby zacząć tworzyć proste interaktywne komponenty.

Kolejnym krokiem w nauce JavaScript mogą być tablice i obiekty, praca z formularzami, zapytania do API za pomocą fetch() oraz asynchroniczność (async/await). Regularna praktyka i budowanie własnych projektów — nawet najprostszych — to najlepsza droga do opanowania tego języka.