SandboxOne

~/nauka programowania od podstaw

Piaskownica

~/front-end/javascript-pierwsze-kroki.md

JavaScript w przeglądarce: zmienne, funkcje i praca z DOM

Tomasz WronaTomasz Wrona 6 min czytania akt.
8,7/10258 ocen
Podświetlana klawiatura w ciemności z dłońmi na klawiszach
Podświetlana klawiatura w ciemności z dłońmi na klawiszach.

JavaScript to język, który ożywia strony internetowe: reaguje na kliknięcia, zmienia treść bez przeładowania i komunikuje się z serwerami. Do nauki nie potrzebujesz niczego poza przeglądarką. W tym artykule poznasz fundamenty języka i napiszesz pierwszy interaktywny element.

Konsola: Twój pierwszy plac zabaw

Otwórz dowolną stronę, naciśnij F12 i przejdź do zakładki „Console”. Właśnie uruchomiłeś interpreter JavaScriptu. Wpisz 2 + 2 i naciśnij Enter – dostaniesz wynik natychmiast. Konsola świetnie nadaje się do eksperymentów: sprawdzisz w niej, jak działa funkcja, zanim wpiszesz ją do pliku.

Najważniejsze polecenie na początek to console.log(). Wypisuje wartość w konsoli i pozwala podejrzeć, co dzieje się w programie. Doświadczeni programiści też go używają, więc nie wstydź się rozsiewać go po kodzie podczas nauki.

Osoba pracująca przy starym terminalu z tekstowym interfejsem
Konsola to rozmowa z komputerem – dziś prowadzimy ją w narzędziach przeglądarki.

Poza konsolą przeglądarka oferuje zakładkę „Sources”, w której możesz zatrzymać wykonywanie programu w wybranej linii i krok po kroku obserwować wartości zmiennych. To tak zwany debugger. Na początek wystarczy wiedzieć, że istnieje, i że słowo debugger wpisane w kodzie zatrzyma program w tym miejscu, gdy narzędzia deweloperskie są otwarte.

Pamiętaj, że JavaScript działa dziś nie tylko w przeglądarce. Dzięki środowisku Node.js ten sam język służy do pisania serwerów, narzędzi wiersza poleceń i skryptów automatyzujących pracę. Nauka w przeglądarce to jednak najprostszy start, bo od razu widzisz efekty na ekranie i nie musisz niczego instalować ani konfigurować.

Zmienne i typy danych

Zmienna to nazwana szufladka na wartość. W nowoczesnym JavaScripcie tworzysz ją słowem const, gdy wartość się nie zmieni, albo let, gdy będziesz ją nadpisywać. Starsze słowo var ma nieintuicyjne zachowanie i lepiej go unikać.

zmienne.jsJavaScript
const miasto = "Kraków";
let liczbaLekcji = 3;
liczbaLekcji = liczbaLekcji + 1;
 
console.log(miasto, liczbaLekcji); // Kraków 4
TypPrzykładDo czego
string"Kraków"tekst
number42, 3.14liczby całkowite i ułamki
booleantrue, falseprawda lub fałsz w warunkach
array["html", "css"]uporządkowana lista wartości
object{ imie: "Ola" }zbiór nazwanych właściwości

Zwróć uwagę na porównania. Operator === sprawdza wartość i typ, a == próbuje po cichu konwertować typy, co prowadzi do zaskakujących wyników, na przykład "0" == false daje prawdę. Używaj zawsze potrójnego znaku równości.

Funkcje i warunki

Funkcja to fragment kodu z nazwą, który możesz uruchamiać wielokrotnie. Przyjmuje parametry i zwraca wynik. Dobra funkcja robi jedną rzecz i ma nazwę, która to opisuje, najlepiej z czasownikiem na początku.

ocena.jsJavaScript
function opiszWynik(punkty) {
  if (punkty >= 50) {
    return "Zaliczone!";
  } else {
    return "Spróbuj jeszcze raz.";
  }
}
 
console.log(opiszWynik(72));

Instrukcja if sprawdza warunek i wykonuje kod tylko wtedy, gdy jest spełniony. Gałąź else obsługuje pozostałe przypadki. Zauważ, że funkcja zwraca tekst zamiast go wypisywać – dzięki temu możesz użyć wyniku w dowolnym miejscu: w konsoli, na stronie czy w teście.

Warto znać też krótszy zapis funkcji, tak zwaną funkcję strzałkową. Zamiast słowa function używasz strzałki =>, co przydaje się szczególnie przy krótkich funkcjach przekazywanych jako argument, na przykład do obsługi kliknięcia. Na początku nie musisz jednak stosować jej wszędzie. Ważniejsze jest, żeby każda funkcja miała jasno określone zadanie, przemyślane parametry i nazwę, która za pół roku nadal będzie dla Ciebie zrozumiała. Dobry test: jeśli opis działania funkcji wymaga słowa „i”, prawdopodobnie robi ona za dużo i warto ją podzielić na dwie mniejsze.

DOM i zdarzenia: licznik kliknięć

DOM to drzewo obiektów, które przeglądarka buduje z Twojego HTML. JavaScript może je czytać i modyfikować. Połączmy wszystko w mały, działający przykład – przycisk, który liczy kliknięcia:

licznik.jsJavaScript
const przycisk = document.querySelector("#licznik");
let klikniecia = 0;
 
przycisk.addEventListener("click", () => {
  klikniecia++;
  przycisk.textContent = `Kliknięto ${klikniecia} razy`;
});

Metoda querySelector odnajduje element tak samo, jak selektor w CSS. Metoda addEventListener rejestruje funkcję, która uruchomi się przy każdym kliknięciu. Zmiana textContent aktualizuje tekst na stronie. Te trzy operacje – znajdź, nasłuchuj, zmień – stanowią podstawę niemal każdej interakcji w interfejsach webowych.

Umieść skrypt na końcu <body> albo dodaj do znacznika <script> atrybut defer. W przeciwnym razie kod może się uruchomić, zanim przeglądarka zbuduje przycisk, i querySelector zwróci null.

Tablice i pętle: praca na wielu danych

Programy rzadko operują na jednej wartości. Lista zadań, koszyk w sklepie czy wyniki wyszukiwania to zbiory danych, które najczęściej przechowujesz w tablicach. Do przechodzenia po nich służą pętle, ale nowoczesny JavaScript oferuje wygodniejsze metody.

Metoda forEach wykonuje funkcję dla każdego elementu. Metoda filter zwraca nową tablicę tylko z elementami spełniającymi warunek, a map przekształca każdy element w coś innego, na przykład listę nazw w listę elementów HTML. Te trzy metody pokrywają ogromną część codziennej pracy front-end developera.

Przy nauce tablic ćwicz na danych, które znasz: listach zakupów, ulubionych filmach czy przystankach tramwajowych w swoim mieście. Znajomy kontekst sprawia, że łatwiej zauważyć, kiedy wynik jest błędny.

Jak czytać błędy zamiast się ich bać

Czerwony komunikat w konsoli nie jest porażką, tylko wskazówką. Zawiera typ błędu, opis i numer linii. Najczęstsze błędy początkujących to:

  • ReferenceError – używasz zmiennej, której nie zadeklarowano, często przez literówkę w nazwie.
  • TypeError: Cannot read properties of null – próbujesz odczytać coś z elementu, którego querySelector nie znalazł.
  • SyntaxError – brakuje nawiasu, cudzysłowu lub przecinka; spójrz na linię wskazaną w komunikacie i tę przed nią.
  • undefined zamiast wyniku – funkcja nie ma instrukcji return albo wywołujesz ją bez nawiasów.

Gdy utkniesz, skopiuj dokładny komunikat błędu do wyszukiwarki. Prawie na pewno ktoś miał ten sam problem. Zanim jednak wkleisz cudze rozwiązanie, upewnij się, że rozumiesz, dlaczego działa.

Mężczyzna w ciemnym pokoju przy monitorze z edytorem
Czytanie komunikatów o błędach to umiejętność, która oszczędza godziny.

Najczęstsze pytania

Czy JavaScript i Java to ten sam język?

Nie. Mimo podobnej nazwy to zupełnie różne języki o innym przeznaczeniu i składni. Podobieństwo nazw to efekt marketingu z lat dziewięćdziesiątych.

Czy muszę znać HTML i CSS przed JavaScriptem?

Warto znać przynajmniej podstawy. JavaScript w przeglądarce operuje na elementach HTML i klasach CSS, więc bez nich trudno zobaczyć efekty swojej pracy.

Kiedy uczyć się frameworków, takich jak React?

Gdy swobodnie korzystasz z funkcji, tablic, obiektów i zdarzeń DOM oraz zbudowałeś kilka małych projektów w czystym JavaScripcie. Zwykle to od trzech do sześciu miesięcy regularnej nauki.

javascriptdomzdarzeniakonsola
Wróć do archiwum

// czytaj dalej