Przejdź do treści
JavaScript od podstawModuł 1 · lekcja 1 z 3
Za darmo4 min czytania

Moduł 1 · Pierwsze kroki z JavaScriptem

Czym jest JavaScript i gdzie działa

Po tej lekcji wyjaśnisz, czym jest JavaScript, gdzie działa i czym różni się od Javy. Poznasz też przykład, który poprowadzi Cię przez cały kurs: prostą aplikację zamówień dla kawiarni w Poznaniu.

Czym jest JavaScript

JavaScript to język programowania, który rozumie każda współczesna przeglądarka. Gdy na stronie sklepu klikasz „Dodaj do koszyka” i licznik produktów zmienia się bez przeładowania strony, prawie zawsze odpowiada za to właśnie JavaScript. HTML opisuje, co jest na stronie (nagłówki, przyciski, formularze), CSS decyduje, jak to wygląda, a JavaScript sprawia, że strona reaguje na Twoje działania.

Język jest opisany w standardzie ECMA-262, który rozwija organizacja Ecma International. Pierwsza edycja standardu ukazała się w czerwcu 1997 roku. Stan na październik 2026: najnowsza jest 17. edycja, czyli ECMAScript 2026, opublikowana w czerwcu 2026. Nowa edycja wychodzi co roku, więc nazwy typu ES2020 czy ES2024 oznaczają po prostu kolejne roczniki standardu. Dla Ciebie jako początkującej osoby wynika z tego jedna praktyczna rzecz: gdy czytasz poradnik, sprawdź jego datę. Kod sprzed dekady zwykle nadal działa, ale często da się go dziś napisać krócej i bezpieczniej.

Słowo „JavaScript” i „ECMAScript” w codziennej pracy oznaczają to samo. ECMAScript to nazwa standardu, JavaScript to nazwa, której używają wszyscy, od dokumentacji przeglądarek po ogłoszenia o pracę.

Gdzie wykonuje się kod JavaScript

Kod JavaScript nie działa „sam z siebie”. Potrzebuje silnika, czyli programu, który czyta Twój kod i wykonuje go krok po kroku. Najważniejsze silniki to V8 (Chrome, Edge), SpiderMonkey (Firefox) i JavaScriptCore (Safari).

Gdzie działa JavaScript

Stan na październik 2026. Źródło: MDN, Ecma International.

W przeglądarce JavaScript ma dostęp do strony: może odczytać, co wpisałeś w formularz, zmienić tekst przycisku albo pobrać dane z internetu. Nie ma natomiast swobodnego dostępu do plików na Twoim dysku. To celowe ograniczenie, które chroni Cię przed złośliwymi stronami.

Node.js to środowisko, które uruchamia ten sam język poza przeglądarką, na przykład w terminalu albo na serwerze. Stan na październik 2026: wersja Node.js 24 ma status LTS (długoterminowe wsparcie), a Node.js 26 to wersja Current. Do nauki i do projektów, które mają działać latami, wybieraj wersję LTS. W tym kursie większość pracy wykonasz w przeglądarce, a Node.js przyda Ci się w module o narzędziach i testach.

Warto zapamiętać podział: sam język (zmienne, funkcje, pętle) jest wszędzie taki sam, a różnią się dodatki, które daje środowisko. Funkcja fetch do pobierania danych działa i w przeglądarce, i w nowych wersjach Node.js, ale document, czyli dostęp do strony, istnieje tylko w przeglądarce.

JavaScript to nie Java

Nazwy są podobne, ale to dwa różne języki. Java to język kompilowany do kodu pośredniego, ze ścisłymi typami, popularny w systemach bankowych i aplikacjach na Androida. JavaScript wykonuje się bezpośrednio w przeglądarce, a typ zmiennej może się w nim zmieniać w trakcie działania programu. Jeśli w ogłoszeniu o pracę dla front-end developera widzisz „JS”, chodzi o JavaScript. Jeśli widzisz „Java, Spring”, chodzi o zupełnie inną technologię.

JavaScript i Java w skrócie

Porównanie uproszczone, na potrzeby wyboru ścieżki nauki.

Przykład, który poprowadzi Cię przez kurs

Żeby nauka nie była zbiorem oderwanych od siebie przykładów, przez cały kurs budujesz jedną aplikację. Kawiarnia „Ziarenko” z Poznania (firma fikcyjna) chce prostej strony do przyjmowania zamówień na wynos. Klient wybiera napoje z menu, aplikacja liczy sumę w złotych, pokazuje ją w euro dla turystów według kursu NBP, zapamiętuje koszyk po zamknięciu karty i sprawdza, czy formularz jest dobrze wypełniony.

Każdy moduł dokłada jeden element tej aplikacji:

  • moduł 1: zmienne i obliczenia, na przykład cena latte razy liczba sztuk;
  • moduł 2: warunki, pętle i funkcje, na przykład rabat dla stałych klientów;
  • moduł 3: tablice i obiekty, czyli menu i koszyk;
  • moduł 4: strona, przyciski i formularz;
  • moduł 5: pobieranie kursu euro z API Narodowego Banku Polskiego;
  • moduł 6: moduły, testy i bezpieczeństwo;
  • moduł 7: projekt końcowy, czyli złożenie całości.

Do każdego modułu dostajesz pliki ćwiczeniowe w zakładce materiałów kursu: szablon do uzupełnienia i rozwiązanie do porównania. Wszystkie lekcje są tekstowe, więc możesz kopiować kod prosto z lekcji do edytora.

Najważniejsze w 3 punktach

  1. JavaScript to język opisany w standardzie ECMA-262; stan na październik 2026 najnowsza edycja to ECMAScript 2026.
  2. Kod wykonuje silnik w przeglądarce albo w Node.js; język jest wspólny, a dodatki, jak dostęp do strony czy plików, zależą od środowiska.
  3. JavaScript i Java to różne języki; w kursie budujesz jedną aplikację zamówień kawiarni krok po kroku.

Źródła

Materiały do pobrania

Pliki do ćwiczeń są dostępne w abonamencie.

  • Pierwszy skrypt: strona z app.js, rachunek w Node.js i typy danychModuł 1: index.html i app.js (lekcja 2), rachunek.js (lekcja 2), typy.js (lekcja 3), rozwiązania ćwiczeń2 KBDostępne w abonamencie
  • Rabaty, utarg z soboty i funkcje kawiarni z testamiModuł 2: m2_warunki.js, m2_petle.js, m2_funkcje.js (lekcje 1 do 3), szablony z testami i rozwiązania3 KBDostępne w abonamencie
  • Menu jako tablica, zamówienie w JSON i kwoty w złotychModuł 3: m3_menu.js, m3_obiekty.js, m3_formatowanie.js (grosze, Intl pl-PL, sortowanie po polsku) + rozwiązania5 KBDostępne w abonamencie
  • Menu na stronie, formularz zamówienia i koszyk w localStorageModuł 4: katalogi m4_menu, m4_formularz, m4_koszyk (HTML, CSS, JS) + rozwiązania9 KBDostępne w abonamencie
  • Kursy walut z API NBP i obsługa błędówModuł 5: m5_kursy/kursy.js (fetch, async/await, Promise.all), m5_bledy/bledy.js (response.ok, limit czasu) + rozwiązania4 KBDostępne w abonamencie
  • Moduły ES, testy node:test i przegląd bezpieczeństwaModuł 6: m6_moduly (podział aplikacji, package.json), m6_testy (funkcja z błędem do znalezienia), m6_bezpieczenstwo (5 problemów) + rozwiązania9 KBDostępne w abonamencie
  • Projekt końcowy: aplikacja zamówień kawiarni ZiarenkoModuł 7: PLAN.md i przykład, szablon start/ oraz rozwiązanie z 10 testami i README.md15 KBDostępne w abonamencie

Następna: Konsola, edytor i pierwszy skrypt

20 lekcji, pliki i certyfikat w abonamencie.

Program kursu

Karta wymagana · anulujesz jednym kliknięciem · Mam już konto