Podstawy JavaScriptu na przykładzie działającego przycisku

Przycisk na stronie wygląda poprawnie, ale po kliknięciu nic się nie dzieje. Najczęściej brakuje połączenia między kodem JavaScript a elementem strony, choć czasem skrypt działa, zanim przeglądarka zdąży wczytać przycisk. Właśnie w takich drobiazgach podstawy języka szybko przestają być teorią.

Wybierz const domyślnie, a let wtedy, gdy zmienna ma dostać nową wartość

Gdy kod zaczyna gromadzić dane, szybko pojawia się pytanie, czy użyć const, czy let. Ja przyjmuję prostą zasadę: deklaruję przez const, dopóki ponowne przypisanie nie jest potrzebne, a po let sięgam przy liczniku, stanie formularza lub wyniku, który będzie się zmieniać.

const nazwa = "Kurs";
let licznik = 0;

licznik = licznik + 1;

W obu przypadkach zmienna widoczna jest w obrębie bloku, czyli fragmentu kodu ujętego w nawiasy klamrowe. Starsze var ma inny zasięg i może prowadzić do zaskoczeń, dlatego jego obecność w starszym kursie nie oznacza, że trzeba go wybierać w nowym kodzie.

const nie zamraża zawartości tablicy ani obiektu. Blokuje ponowne przypisanie samej zmiennej, więc ten przykład jest poprawny:

const ustawienia = { motyw: "jasny" };
ustawienia.motyw = "ciemny";

Jeśli chcesz zmienić przypisaną wartość, użyj let; jeśli zmieniasz właściwość obiektu, const nadal może pasować. To rozróżnienie oszczędza czasu, gdy kod zaczyna przechowywać więcej niż pojedyncze teksty i liczby.

Porównuj wartości przez ===, bo JavaScript potrafi zmienić ich typ

W formularzu pole tekstowe może zwrócić napis "5", mimo że ekran pokazuje cyfrę. W JavaScript napis i liczba to różne typy, a operator === sprawdza jednocześnie wartość i typ, dzięki czemu porównanie jest przewidywalniejsze.

console.log("5" === 5); // false
console.log("5" == 5);  // true

Drugi operator, ==, próbuje dopasować typy przed porównaniem. Takie automatyczne przekształcenie potrafi zaskoczyć, dlatego w typowym kodzie początkującej osoby lepiej zacząć od === i jawnie zamienić dane, jeśli naprawdę jest to potrzebne.

Podstawowy zestaw typów obejmuje między innymi string dla tekstu, number dla liczb, boolean dla wartości logicznych, a także null i undefined. Tablice i obiekty grupują dane, na przykład nazwy produktów oraz ich ceny; specyfikacja ECMAScript 2025 opisuje język, na którym opierają się współczesne przeglądarki.

Gdy wynik porównania wygląda dziwnie, najpierw sprawdź, co faktycznie znajduje się w zmiennej, używając console.log(). Czytaj wartość razem z jej typem, bo podobny wygląd w polu tekstowym nie gwarantuje podobnego zachowania w warunku.

Funkcja i warunek zamieniają dane w działanie

Sama zmienna nie zmieni strony. Potrzebujesz instrukcji, która podejmie decyzję, oraz funkcji, która wykona powiązane zadanie, gdy nadejdzie właściwy moment.

function przywitaj(imie) {
  if (imie) {
    return `Cześć, ${imie}!`;
  }

  return "Wpisz imię.";
}

console.log(przywitaj("Ala"));

Parametr imie przekazuje funkcji dane, a return oddaje wynik do dalszego wykorzystania. Instrukcja if sprawdza warunek; jeśli trzeba obsłużyć kilka przypadków, można dodać else albo kolejne else if.

Pętle, takie jak for, wykonują podobne instrukcje dla kolejnych elementów. Przy liście produktów funkcja może obliczyć cenę dla każdego wpisu, ale na początek lepiej przejść przez krótką tablicę niż od razu budować rozbudowany mechanizm.

DOM łączy kod z przyciskiem, polem i tekstem na stronie

DOM to obiektowa reprezentacja dokumentu HTML, którą JavaScript może odczytywać i zmieniać. Żeby przycisk zareagował, trzeba najpierw znaleźć go w dokumencie, a potem podpiąć funkcję do zdarzenia kliknięcia.

const przycisk = document.querySelector("#zmienTekst");
const komunikat = document.querySelector("#komunikat");

przycisk.addEventListener("click", () => {
  komunikat.textContent = "Gotowe";
});

querySelector() wybiera element pasujący do selektora CSS, a addEventListener() uruchamia przekazaną funkcję po wskazanym zdarzeniu. W tym przykładzie kliknięcie podmienia tekst w elemencie o identyfikatorze komunikat.

Jeśli przeglądarka zgłasza, że nie może odczytać właściwości elementu, selektor mógł niczego nie znaleźć. Bywa też, że skrypt uruchomił się przed wczytaniem HTML. Moduł JavaScript oznaczony type="module" jest domyślnie odroczony, ale przy zwykłym skrypcie trzeba zadbać o jego położenie lub moment uruchomienia.

Swoją drogą, moduł otwarty bezpośrednio jako plik lokalny może nie działać tak samo jak strona uruchomiona przez serwer, ponieważ przeglądarka stosuje ograniczenia bezpieczeństwa. Dokumentacja MDN opisuje ten problem dla modułów i wskazuje, że do ich testowania potrzebny jest serwer. Gdy import działa po wdrożeniu, a lokalnie zawodzi, sprawdź sposób uruchamiania strony, zanim zaczniesz zmieniać sam kod.

Błąd w konsoli podpowiada, od czego zacząć poprawkę

Czerwony komunikat w narzędziach deweloperskich nie musi oznaczać, że cały program jest do wyrzucenia. Najpierw ustal, czy przeglądarka nie rozumie składni, nie znajduje elementu, czy otrzymała dane innego typu.

Dokumentacja MDN JavaScript Guide porządkuje materiał od składni i typów po funkcje, moduły oraz bardziej zaawansowane mechanizmy. Nie trzeba opanować całego języka przed napisaniem pierwszej interakcji na stronie; lepiej dodawać pojęcia wtedy, gdy rozwiązują zauważony problem.

Uważam, że najczytelniejszy pierwszy projekt to krótka strona z jednym polem, jednym przyciskiem i jednym wynikiem. Gdy działa, dodaj warunek, walidację i obsługę błędnych danych, a każda nowa podstawa od razu znajdzie zastosowanie.

Pierwszy działający przycisk daje dobry punkt startu

Wystarczy, że kod pobierze wartość z pola, sprawdzi ją i pokaże wynik po kliknięciu. Taki mały przepływ obejmuje zmienną, funkcję, warunek, zdarzenie i DOM, czyli podstawy, które przydadzą się w wielu aplikacjach webowych.

Gdy coś się zatnie, sprawdź komunikat w konsoli i rozbij działanie na mniejsze kroki. Najpierw upewnij się, że element istnieje, potem sprawdź dane, a dopiero na końcu logikę - dzięki temu błąd przestaje wyglądać jak zagadka.