JavaScript

Język programowania uruchamiany głównie w przeglądarce, który dodaje stronom interaktywność. Dziś działa też po stronie serwera dzięki Node.js.

JavaScript to język programowania, który ożywia strony internetowe — reaguje na kliknięcia, waliduje formularze, podmienia treść bez przeładowania strony i obsługuje praktycznie wszystko, co na stronie się rusza. Razem z HTML (struktura) i CSS (wygląd) tworzy trójkę technologii, na których stoi cały front-end. Co ważne: JavaScript to nie Java — łączy je głównie nazwa i mylące marketingowe decyzje z 1995 roku. To dwa zupełnie różne języki.

Jak to działa

Każda przeglądarka ma wbudowany silnik JavaScript, który wykonuje Twój kod — w Chrome to V8, w Firefoksie SpiderMonkey, w Safari JavaScriptCore. Kiedy strona się ładuje, silnik czyta Twój skrypt i pozwala mu sięgać do DOM (Document Object Model), czyli drzewiastej reprezentacji strony. Dzięki temu możesz znaleźć przycisk, podpiąć pod niego zdarzenie i zmienić zawartość strony w locie.

JavaScript jest standaryzowany jako ECMAScript. Przełomem był ES6 (ECMAScript 2015), który wprowadził let, const, funkcje strzałkowe i klasy. Od tamtej pory standard dostaje nową wersję co roku. Od 2009 roku, dzięki środowisku Node.js (też na silniku V8), ten sam język działa też po stronie serwera — możesz pisać API, narzędzia CLI czy całe backendy bez przeglądarki.

Przykład z praktyki

Załóżmy, że chcesz, by kliknięcie przycisku zmieniało nagłówek. W przeglądarce wygląda to tak:

  • const btn = document.querySelector('#start');
  • btn.addEventListener('click', () => { document.title = 'Klik!'; });

Po stronie serwera z Node.js zaczynasz zwykle od zainicjowania projektu komendą npm init -y, a potem dokładasz biblioteki przez npm install. Uruchomienie skryptu to po prostu node app.js. Ten sam język, dwa różne światy.

Częste pułapki

Na początku najbardziej zaskakuje porównywanie wartości. Operator == robi niejawną konwersję typów, przez co '5' == 5 zwraca true. Dlatego używaj === (porównanie bez konwersji) — oszczędzi Ci to godzin debugowania. Druga klasyczna mina to asynchroniczność: JavaScript nie czeka na zapytanie do serwera, więc bez async/await albo Promise zobaczysz undefined tam, gdzie spodziewasz się danych.

Mit do obalenia: „JavaScript to język tylko dla amatorów”. Dziś napiszesz w nim aplikacje webowe (React, Vue), mobilne (React Native), desktopowe (Electron — tak działa m.in. VS Code) i serwery. Warto też znać TypeScript — nadbudówkę dodającą statyczne typowanie, standard w poważniejszych projektach.

Pojęcia powiązane: HTML, CSS, DOM, ECMAScript, Node.js, TypeScript, npm, framework (React, Vue, Angular), API, JSON.