JavaScript

JavaScript służy do tworzenia interaktywnych stron, na przykład rozwijanych menu, formularzy sprawdzających dane czy treści aktualizowanych bez przeładowania strony. Działa też na serwerach dzięki Node.js i napędza wiele aplikacji mobilnych i desktopowych. Każda nowoczesna przeglądarka natywnie uruchamia JavaScript.

JavaScript i Java to dwa odrębne języki programowania, które łączy tylko część nazwy. JavaScript działa głównie w przeglądarkach i jest typowany dynamicznie, a Java jest typowana statycznie i kompilowana do kodu bajtowego dla maszyny wirtualnej Javy. Podobna nazwa wynikała z decyzji marketingowej w latach 90.

DOM, czyli Document Object Model, to drzewo obiektów, które przeglądarka buduje ze strony HTML, aby JavaScript mógł ją odczytywać i zmieniać. Przez DOM JavaScript wyszukuje elementy, zmienia tekst, dodaje klasy i tworzy nowe elementy. Każda widoczna zmiana, jaką skrypt wprowadza na stronie, przechodzi przez DOM.

JavaScript dodajesz do strony HTML znacznikiem script, wpisując kod bezpośrednio w nim albo wskazując osobny plik JavaScript w atrybucie src. Umieszczenie znacznika script na końcu body lub dodanie atrybutu defer pozwala najpierw wczytać HTML. Osobne pliki JavaScript łatwiej buforować i utrzymywać.

W JavaScript let i const mają zasięg blokowy, a var ma zasięg funkcji i można ją deklarować ponownie. Zmiennej const nie można przypisać na nowo, choć obiekt zapisany w const nadal może zmieniać się w środku. Nowoczesny JavaScript domyślnie używa const, let wtedy, gdy wartość musi się zmieniać, i unika var.

Zdarzenia w JavaScript to sygnały wysyłane przez przeglądarkę, gdy coś się dzieje, na przykład kliknięcie, naciśnięcie klawisza, wysłanie formularza lub zakończenie ładowania strony. Skrypt reaguje na zdarzenie, podpinając funkcję nasłuchującą za pomocą addEventListener. Dzięki nasłuchiwaczom zdarzeń strona reaguje na działania użytkownika.

Delegowanie zdarzeń w JavaScript polega na podpięciu jednego nasłuchiwacza do elementu nadrzędnego zamiast osobnego nasłuchiwacza do każdego elementu podrzędnego. Nasłuchiwacz sprawdza cel zdarzenia, aby ustalić, który element kliknięto. Delegowanie zużywa mniej pamięci i działa też dla elementów dodanych do strony później.

Dane z API pobierasz w JavaScript funkcją fetch, a treść odpowiedzi odczytujesz jej metodą json. Fetch zwraca obietnicę, więc kod zwykle czeka na wynik za pomocą async i await. Sprawdzanie statusu odpowiedzi i przechwytywanie błędów sprawia, że strona działa dalej, gdy zawiedzie sieć.

Obietnica, czyli Promise, to w JavaScript obiekt reprezentujący wartość, która będzie gotowa później, na przykład wynik żądania sieciowego. Obietnica może być oczekująca, spełniona lub odrzucona. Kod reaguje na wynik za pomocą then i catch albo async i await.

Async i await pozwalają w JavaScript czekać na obietnicę w sposób, który czyta się jak zwykły kod krok po kroku. Funkcja oznaczona jako async zawsze zwraca obietnicę, a await wstrzymuje tę funkcję, dopóki obietnica się nie rozstrzygnie. Błędy w funkcjach async obsługuje się zwykłym blokiem try i catch.

ES6, nazywany też ECMAScript 2015, to duża aktualizacja standardu języka JavaScript z 2015 roku. ES6 dodał let i const, funkcje strzałkowe, klasy, literały szablonowe, destrukturyzację, moduły i obietnice. Każda nowoczesna przeglądarka obsługuje ES6, a od tamtej pory co roku dochodzą nowe funkcje języka.

Funkcje strzałkowe to w JavaScript krótszy sposób zapisu funkcji ze składnią =>. Funkcja strzałkowa nie ma własnego this, więc this zachowuje wartość z otaczającego kodu. Funkcje strzałkowe często stosuje się w krótkich wywołaniach zwrotnych, na przykład przekazywanych do map i filter.

JSON, czyli JavaScript Object Notation, to tekstowy format do przechowywania i wymiany danych w postaci kluczy i wartości. JavaScript zamienia obiekt na tekst JSON za pomocą JSON.stringify, a tekst JSON z powrotem na obiekt za pomocą JSON.parse. Większość webowych API wysyła i odbiera dane w formacie JSON.

JavaScript łatwo zacząć, bo początkującym wystarczy przeglądarka i edytor tekstu. Trudniejsze rzeczy przychodzą później, na przykład kod asynchroniczny, zasięg zmiennych i liczne narzędzia wokół języka. Większość uczących się buduje przydatne interaktywne strony po kilku tygodniach regularnej praktyki.

Tak, nauka czystego JavaScript przed React lub Vue znacznie ułatwia zrozumienie obu frameworków. Oba opierają się na podstawowych funkcjach JavaScript, takich jak funkcje, tablice, obiekty, moduły i obietnice. Programiści znający podstawy potrafią też debugować kod frameworka, zamiast zgadywać.

TypeScript to JavaScript z dodanymi typami statycznymi, rozwijany przez Microsoft i kompilowany do zwykłego JavaScript. Typy pozwalają edytorowi kodu wyłapać wiele błędów, zanim kod zostanie uruchomiony. TypeScript jest popularny w dużych projektach, w których wielu programistów pracuje na wspólnym kodzie.

Strony z JavaScript przyspieszysz, wysyłając mniej kodu JavaScript, wczytując skrypty z atrybutem defer lub async i dzieląc duże paczki tak, by każda strona ładowała tylko to, czego potrzebuje. Minifikacja i kompresja plików zmniejszają rozmiar pobierania. Przenoszenie ciężkiej pracy poza główny wątek sprawia, że strona szybko reaguje na kliknięcia i pisanie.

W JavaScript === porównuje zarówno wartość, jak i typ, a == przed porównaniem konwertuje typy. Na przykład 0 == "0" daje true, ale 0 === "0" daje false. Używanie === pozwala uniknąć zaskakujących wyników i jest standardową zasadą w nowoczesnym kodzie JavaScript.

Moduły JavaScript to osobne pliki, które eksportują funkcje lub wartości i importują to, czego potrzebują, z innych plików. Moduły porządkują kod, eliminują zmienne globalne i ułatwiają utrzymanie dużych projektów. Przeglądarki wczytują moduł przez znacznik script z atrybutem type ustawionym na module.

JavaScript debugujesz w przeglądarce za pomocą narzędzi deweloperskich, otwieranych klawiszem F12 lub przez kliknięcie prawym przyciskiem na stronie i wybranie Zbadaj. Konsola pokazuje błędy i wypisane wartości, a panel Sources pozwala ustawiać punkty przerwania i przechodzić przez kod linijka po linijce. Panel Network pokazuje każde żądanie strony i odpowiedź na nie.

Pętla zdarzeń to mechanizm, który pozwala jednowątkowemu JavaScript obsługiwać wiele zadań bez zawieszania się. Powolne operacje, takie jak timery i żądania sieciowe, czekają w tle, a pętla zdarzeń uruchamia każde zakończone wywołanie zwrotne, gdy stos wywołań jest pusty. Długo działający kod nadal blokuje pętlę zdarzeń, dlatego ciężkie pętle sprawiają, że strona przestaje reagować.

Tak, JavaScript działa na serwerze dzięki środowiskom takim jak Node.js, Deno i Bun. Serwerowy JavaScript może budować API, czytać pliki i łączyć się z bazami danych. Jeden język w przeglądarce i na serwerze pozwala zespołowi współdzielić kod i umiejętności.

Bezpieczeństwo kodu JavaScript zapewnisz, nigdy nie wstawiając niezaufanego tekstu na stronę przez innerHTML, ponownie walidując wszystkie dane na serwerze i trzymając sekrety poza kodem frontendu. Wszystko, co trafia do przeglądarki, użytkownicy mogą odczytać, łącznie z kluczami API. Content Security Policy i aktualne zależności blokują wiele typowych ataków.

W JavaScript localStorage przechowuje dane tylko w przeglądarce, a ciasteczka są wysyłane na serwer z każdym żądaniem. LocalStorage mieści więcej danych i nadaje się do ustawień, takich jak wybrany motyw. Ciasteczka oznaczone jako HttpOnly i Secure są bezpieczniejszym miejscem na sesje logowania, bo skrypty nie mogą ich odczytać.

Łatwy w utrzymaniu kod JavaScript piszesz za pomocą małych funkcji, czytelnych nazw, modułów, spójnego formatowania i lintera, takiego jak ESLint. Unikaj zmiennych globalnych i oddzielaj kod zmieniający DOM od kodu obsługującego dane. Testy automatyczne sprawiają, że późniejsze zmiany są bezpieczne.