Wprowadzenie do javascript.

JavaScript (w skrócie JS) jest jednym z najważniejszych języków programowania w świecie web developmentu. Umożliwia dodawanie interaktywności i dynamicznych elementów do stron internetowych, a także tworzenie pełnoprawnych aplikacji webowych i serwerowych. W tym wykładzie wprowadzającym wyjaśnimy, czym jest JavaScript i do czego służy, jak można uruchamiać kod JS w różnych środowiskach, przedstawimy popularne narzędzia do pisania kodu, pokażemy jak korzystać z konsoli przeglądarki do testowania i debugowania, omówimy podstawy składni języka (zmienne, typy danych, komentarze itp.) oraz zaprezentujemy przykłady pierwszych prostych programów. Wykład jest skierowany zarówno do osób zupełnie początkujących, jak i tych, które miały już styczność z programowaniem w innych językach.

Czym jest JavaScript i do czego służy?

JavaScript to wysokopoziomowy język skryptowy i programowania, pierwotnie stworzony z myślą o stronach WWW. Pozwala tchnąć „życie” w statyczne strony – dzięki JS możemy tworzyć bogatą interaktywność i dynamicznie zmieniającą się zawartość stron internetowych​. Mówiąc prościej, za każdym razem gdy na stronie dzieje się coś więcej niż wyświetlanie statycznego tekstu i obrazów – np. formularz się waliduje w locie, menu się rozwija po najechaniu kursorem, wyświetla się animacja, pojawia się powiadomienie, ładują się nowe treści bez przeładowania strony – można być niemal pewnym, że stoi za tym JavaScript.

JavaScript jest językiem uruchamianym po stronie klienta (przeglądarki), co oznacza, że kod JS jest najczęściej wykonywany bezpośrednio w przeglądarce internetowej użytkownika. Dzięki temu strony mogą reagować na działania użytkownika w czasie rzeczywistym. JS jest integralną częścią tzw. „trylogii technologii webowych”: HTML dostarcza strukturę strony, CSS odpowiada za wygląd, a JavaScript za interaktywne zachowanie strony​.

Warto dodać, że choć JavaScript powstał z myślą o przeglądarkach (pierwsza wersja została stworzona w 1995 roku przez Brendana Eicha dla przeglądarki Netscape Navigator), to obecnie jest wykorzystywany znacznie szerzej. Dzięki platformie Node.js JavaScript działa również po stronie serwera, umożliwiając tworzenie aplikacji backendowych. Ponadto, istnieją rozwiązania pozwalające używać JS do budowy aplikacji mobilnych (np. React Native), aplikacji desktopowych (Electron) czy nawet programowania mikrokontrolerów (np. Espruino dla IoT). Niemniej jednak, podstawowym i najbardziej rozpowszechnionym zastosowaniem JS pozostaje frontend web development, czyli tworzenie interaktywnych stron i aplikacji internetowych uruchamianych w przeglądarce.

Podsumowując: JavaScript służy głównie do dodawania interaktywności stronom WWW, kontrolowania elementów multimedialnych, animacji, obsługi zdarzeń (np. kliknięcia przycisku) i komunikacji z serwerem w tle (AJAX/Fetch), co pozwala tworzyć nowoczesne, dynamiczne aplikacje webowe. Dzięki wszechstronności i ciągłemu rozwojowi ekosystemu, JavaScript stał się uniwersalnym językiem używanym zarówno na frontendzie, jak i coraz częściej na backendzie.

Sposoby uruchamiania skryptów JavaScript

JavaScript można uruchamiać na kilka sposobów, w zależności od środowiska, w jakim chcemy nasz kod wykonać. Omówimy dwie główne metody: uruchamianie skryptów w przeglądarce oraz w środowisku Node.js (poza przeglądarką).

Uruchamianie kodu JS w przeglądarce

Najbardziej naturalnym środowiskiem dla JavaScriptu jest przeglądarka internetowa (Chrome, Firefox, Safari, Edge itp.). Istnieją dwie podstawowe drogi, aby wykonać kod JS w przeglądarce:

  • Osadzenie skryptu w kodzie HTML strony: W pliku HTML umieszczamy element <script> – to specjalny tag, który pozwala wstrzyknąć kod JavaScript do strony. Skrypt można wpisać bezpośrednio między otwierającym i zamykającym tagiem <script> (to tzw. skrypt wewnętrzny), albo odwołać się do zewnętrznego pliku .js poprzez atrybut src (to skrypt zewnętrzny). Przykład osadzenia wewnętrznego skryptu w HTML: 
 <!DOCTYPE html>
 <html lang="pl"> 
     <head> 
         <meta charset="UTF-8" />
         <title>Przykładowa strona</title> 
     </head> 
     <body>
         <h1>Witaj!</h1>
         <script> // Kod JavaScript 
             alert("Hello, world!");
         </script>
     </body>
    </html>
  • Gdy taka strona zostanie otwarta w przeglądarce, kod JavaScript wewnątrz <script> zostanie natychmiast wykonany – w tym przypadku wyświetli okienko alert z komunikatem „Hello, world!”. Zamiast umieszczać kod JS bezpośrednio w HTML, często lepiej jest odseparować go do pliku zewnętrznego (np. main.js) i załadować za pomocą <script src="main.js"></script>. Ułatwia to utrzymanie kodu i ponowne wykorzystanie skryptów.
  • Uruchamianie kodu w konsoli deweloperskiej przeglądarki: Wszystkie nowoczesne przeglądarki posiadają wbudowane narzędzia deweloperskie (DevTools), które zawierają konsolę JavaScript. Aby ją otworzyć, zazwyczaj naciskamy F12 lub Ctrl+Shift+I (Windows/Linux) lub Cmd+Opt+I (Mac) i przechodzimy do zakładki „Console”. W konsoli możemy wpisywać komendy JavaScript i wykonywać je bezpośrednio na aktualnie otwartej stronie. Konsola jest świetnym miejscem do szybkiego przetestowania fragmentu kodu lub sprawdzenia wartości zmiennych. Na przykład, możemy wpisać w konsoli: console.log(2 + 2); …i po naciśnięciu Enter przeglądarka od razu wyświetli wynik (w tym wypadku 4). Konsola pokaże też ewentualne błędy, jeśli spróbujemy wykonać kod zawierający błędy składni lub odwołania do nieistniejących zmiennych/obiektów. Konsola JavaScript to niezwykle przydatne narzędzie do debugowania – pozwala wykonywać kod na bieżąco w kontekście strony i raportuje napotkane błędy​. W kolejnej sekcji szerzej omówimy korzystanie z konsoli do testowania i debugowania.

Uruchamianie kodu JS w Node.js (poza przeglądarką)

JavaScript nie jest ograniczony tylko do przeglądarek. Node.js to środowisko uruchomieniowe, które pozwoliło wynieść JavaScript poza przeglądarki i uruchamiać go na serwerach czy komputerach lokalnych. Node.js wykorzystuje silnik V8 (ten sam, który napędza Chrome) do wykonywania kodu JS, ale dodaje też API niskopoziomowe (wejścia/wyjścia, system plików, sieć itp.), dzięki czemu za pomocą JavaScriptu można pisać aplikacje niezależne od przeglądarki.

W praktyce Node.js umożliwia wykonanie skryptu JavaScript bez potrzeby posiadania przeglądarki – np. z poziomu terminala. Mówi się, że Node to środowisko uruchomieniowe JavaScript poza przeglądarką, pozwalające odpalać skrypty na serwerze lub lokalnie na komputerze​. Aby skorzystać z Node.js, należy je najpierw zainstalować (dostępne na nodejs.org dla różnych systemów operacyjnych). Instalacja zazwyczaj zawiera również menedżer pakietów npm (Node Package Manager), ale na początek nie musimy się nim przejmować.

Po instalacji Node.js mamy kilka opcji uruchamiania kodu:

  • Interaktywnie (REPL): Wystarczy otworzyć terminal/wiersz poleceń i wpisać komendę node (bez żadnych argumentów). Uruchomi to tryb REPL (Read-Eval-Print Loop), gdzie możemy wpisywać polecenia JavaScript i natychmiast otrzymywać wyniki, podobnie jak w konsoli przeglądarki. Spróbuj wpisać w terminalu: 
bash $ node > console.log("Witaj z Node.js!");

Po wciśnięciu Enter Node.js wykona podany kod i powinna pojawić się linijka z tekstem Witaj z Node.js!. Ten interaktywny tryb jest przydatny do szybkich testów.

  • Uruchamianie pliku .js: Bardziej typowym sposobem jest stworzenie pliku tekstowego z rozszerzeniem .js zawierającego nasz kod (np. skrypt.js), a następnie wykonanie go komendą node skrypt.js. Node przeczyta i wykona cały plik od początku do końca. W ten sposób możemy tworzyć skrypty i aplikacje w JS działające poza przeglądarką. Np. jeśli w pliku skrypt.js mamy: 
 console.log("To jest skrypt uruchomiony przez Node.js");

…to po wykonaniu w terminalu polecenia node skrypt.js zobaczymy w konsoli ten tekst.

Zastosowania Node.js: Dziś Node.js jest fundamentem dla wielu narzędzi developerskich i frameworków. Pozwala pisać w JavaScript nie tylko kod frontendowy, ale i tworzyć serwery (np. w frameworku Express), skrypty automatyzujące, narzędzia CLI, a nawet całe aplikacje desktopowe (przy użyciu Electron). W kontekście tego wykładu wystarczy zapamiętać, że Node.js umożliwia uruchomienie kodu JavaScript bez przeglądarki – na naszym własnym komputerze lub serwerze.

Popularne środowiska programistyczne do pracy z JavaScript

Do pisania kodu JavaScript w zasadzie wystarczy najprostszy edytor tekstu, ale aby praca była wygodna, warto skorzystać ze specjalistycznych edytorów lub środowisk IDE (Integrated Development Environment). Oto przegląd kilku najpopularniejszych środowisk programistycznych używanych przy JavaScript:

  • Visual Studio Code (VS Code): Darmowy, open-source’owy edytor od Microsoftu, dostępny na Windows, macOS i Linux. VS Code cieszy się ogromną popularnością wśród web deweloperów. Oferuje podświetlanie składni, automatyczne uzupełnianie kodu, integrację z systemem kontroli wersji Git, a także wbudowaną konsolę i debuger. Dzięki bogatemu ekosystemowi rozszerzeń (np. do formatowania kodu, lintingu, obsługi frameworków) można dostosować VS Code do własnych potrzeb. Świetnie sprawdza się do projektów JavaScriptowych (oraz TypeScriptowych) – wiele narzędzi frontendowych jest wręcz projektowanych z myślą o integracji z VS Code.
  • WebStorm: Zaawansowane środowisko IDE od firmy JetBrains, stworzone specjalnie do JavaScript i pokrewnych technologii (HTML, CSS, TypeScript, frameworki JS). WebStorm (dostępny na różne systemy) jest narzędziem komercyjnym (płatnym), ale oferuje bardzo rozbudowane funkcje: inteligentne podpowiedzi kodu, refaktoryzacje, inspekcje błędów na bieżąco, zintegrowany debugger, narzędzia do testów jednostkowych, wsparcie dla popularnych frameworków (React, Angular, Node, etc.). Dla studentów i projektów open-source bywa dostępny bezpłatnie. Jeśli ktoś potrzebuje „kombajnu” do dużych projektów JS/TS, WebStorm jest wart rozważenia.
  • CodePen: Jest to internetowy edytor kodu (tzw. online code playground), dostępny przez przeglądarkę na stronie codepen.io. Umożliwia tworzenie i dzielenie się małymi projektami webowymi zwanymi Pens. W jednym Penie możemy napisać kod HTML, CSS i JS, a wynik jest od razu renderowany po prawej stronie ekranu. CodePen jest świetny do eksperymentów, prototypowania frontendu, dzielenia się przykładami z innymi (np. na forach) lub tworzenia małych demonstracji. Wersja darmowa pozwala tworzyć projekty publiczne, płatna daje dodatkowe możliwości (projekty prywatne, współpraca w czasie rzeczywistym itp.).
  • JSFiddle: Podobny koncept do CodePen, dostępny na jsfiddle.net. Również pozwala szybko uruchomić kod HTML/CSS/JS w przeglądarce i zobaczyć wynik. Interfejs jest skromny – mamy okienka na HTML, CSS, JavaScript i konsolę wynikową. JSFiddle bywa często używany do dzielenia się fragmentami kodu przy zadawaniu pytań (np. na forach czy Stack Overflow) – można tam łatwo zademonstrować problem lub rozwiązanie. Nie wymaga logowania do stworzenia prostego fiddle, wystarczy wejść na stronę i pisać kod. Istnieją też inne podobne narzędzia online (np. JSBin, CodeSandbox, StackBlitz), ale CodePen i JSFiddle należą do najstarszych i najpopularniejszych.

Uwaga: Niezależnie od wyboru edytora/IDE, ważne jest komfortowe środowisko pracy. Początkujący mogą zacząć od VS Code (ze względu na prostotę i popularność) lub nawet od edytorów online, by nie konfigurować nic lokalnie. W miarę rozwoju umiejętności warto poznać debugowanie w edytorze, integrację z systemem kontroli wersji i inne usprawnienia, jakie dają te narzędzia.

Korzystanie z konsoli przeglądarki do testowania i debugowania kodu

Konsola przeglądarki (JavaScript console) to jedno z pierwszych narzędzi, po jakie sięgają programiści JS podczas nauki i codziennej pracy. Jak już wspomnieliśmy, konsola pozwala wpisywać polecenia JavaScript i wykonywać je na bieżąco na załadowanej stronie. Przydaje się to nie tylko do eksperymentowania z kodem, ale też do wyszukiwania błędów (debugowania).

Aby otworzyć konsolę, użyj narzędzi deweloperskich przeglądarki: zazwyczaj w menu przeglądarki znajdziesz opcję typu „Developer Tools” / „Narzędzia dla programistów”, lub skorzystaj z skrótów (F12, Ctrl+Shift+I, a czasem bezpośrednio Ctrl+Shift+J aby od razu przejść do konsoli w Chrome). Po otwarciu DevTools przejdź do zakładki Console. Zobaczysz tam bieżące logi, ostrzeżenia i błędy ze strony, a na dole wiersz, w którym możesz wpisywać komendy.

Do czego służy konsola?

  • Wyświetlanie komunikatów i wartości: Możesz użyć funkcji console.log() do wypisania informacji w konsoli. Np. jeśli strona ładuje jakiś skrypt, w kodzie możesz dodać console.log("Skrypt załadowany poprawnie") – gdy otworzysz konsolę, zobaczysz ten komunikat, co potwierdzi działanie skryptu. To podstawowa metoda debugowania przez logi. Możesz też wypisywać wartości zmiennych, wyniki obliczeń itp., żeby sprawdzić, czy program działa zgodnie z oczekiwaniami.
  • Informowanie o błędach: Jeśli w kodzie JS na stronie wystąpi błąd (np. literówka, odwołanie do zmiennej, która nie istnieje, błąd składni), przeglądarka automatycznie wyświetli komunikat błędu w konsoli (zwykle na czerwono), podając przybliżoną przyczynę i numer linii w kodzie, gdzie wystąpił błąd. Czytając te komunikaty, możesz zorientować się, co poszło nie tak. Często błędy mogą brzmieć tajemniczo, ale nawet początkujący z czasem uczą się je interpretować i namierzać problem.
  • Interaktywne testowanie kodu: Konsola działa jak tryb REPL – możesz wpisywać pojedyncze polecenia JS i od razu zobaczyć wynik. To świetny sposób, by np. przetestować jak działa dana funkcja wbudowana języka lub metoda API przeglądarki. Możesz też manipulować DOM (strukturą strony) na żywo: np. wpisać document.body.style.backgroundColor = "yellow" i od razu zobaczyć, jak strona zmienia tło na żółte.
  • Debugowanie z zatrzymywaniem kodu: Konsola jest częścią większego zestawu narzędzi. W zakładce Sources (Chrome) lub Debugger (Firefox) możesz otworzyć pliki JS załadowane na stronie i ustawiać breakpointy (punkty przerwania). Kiedy wykonanie kodu dojdzie do punktu przerwania, zostanie wstrzymane, a Ty możesz krokowo śledzić, jak kod się wykonuje, sprawdzać wartości zmiennych w danym momencie itp. To bardziej zaawansowana technika debugowania, która pozwala dogłębnie przeanalizować działanie skryptu. Na początek jednak sama konsola i komunikaty z console.log() często wystarczają.

Pamiętaj, że konsola nie gryzie – warto mieć ją otwartą podczas tworzenia strony i obserwować na bieżąco, czy nie pojawiają się błędy. Można też wykorzystywać ją jako „piaskownicę” do nauki: pisząc drobne fragmenty kodu i patrząc, co się stanie.

Podstawy składni języka JavaScript

Przejdźmy teraz do omówienia podstawowej składni JavaScript – czyli jak piszemy kod w tym języku. Jeśli masz doświadczenie z innymi językami programowania, wiele rzeczy wyda Ci się znajomych (składnia JS czerpie m.in. z C/Java). Dla zupełnie początkujących będzie to pierwsze spotkanie z konkretnymi regułami zapisu kodu. Omówimy: instrukcje i bloki, średniki, komentarze, zmienne (var, let, const) oraz podstawowe typy danych.

Instrukcje i nawiasy klamrowe

Pojedyncze polecenie w JavaScript nazywamy instrukcją (ang. statement). Instrukcje są wykonywane przez interpreter (silnik JS) kolejno, od góry do dołu skryptu. Każdą instrukcję zwykle zapisujemy w oddzielnej linii i zazwyczaj kończymy średnikiem ; (o roli średników więcej za chwilę). Przykładem instrukcji może być np. przypisanie wartości do zmiennej albo wywołanie funkcji:

 x = 5;               // instrukcja przypisania console.log(x * 2);  // instrukcja wywołania funkcji console.log

Wiele języków (np. C, Java, C#) używa nawiasów klamrowych { ... } do oznaczania bloków kodu, takich jak ciało funkcji, pętli czy warunku. JavaScript robi dokładnie tak samo. Nawiasy klamrowe grupują zestaw instrukcji, które mają być traktowane jako całość w pewnym kontekście. Na przykład składnia funkcji w JS to:

 function nazwaFunkcji() 
 {    // ciało funkcji - blok kodu w nawiasach klamrowych      
     console.log("To jest funkcja");
 }

Tutaj wszystko, co jest wpisane między { a } stanowi blok wykonywany przy wywołaniu nazwaFunkcji(). Podobnie jest z instrukcjami warunkowymi if/else, pętlami for, while itp.:

 if (warunek) {
    // blok kodu wykonany jeśli warunek jest true
    ...
 } else {
    // blok kodu wykonany jeśli warunek jest false
    ...
 }

Jeżeli blok kodu zawiera tylko jedną instrukcję, JavaScript pozwala pominąć { }, ale zaleca się ich używanie zawsze dla czytelności. Nawiasy klamrowe nie są używane do oznaczania zakresu funkcji (jak np. w Pythonie wcięcia) – tutaj tylko one wyznaczają początek i koniec bloku.

Średniki w JavaScript

W JavaScript poszczególne instrukcje najczęściej kończymy średnikiem ;. Jednak warto wiedzieć, że składnia JS nie wymaga zawsze stawiania średnika w nowej linii – interpreter potrafi domyślnie rozpoznać koniec instrukcji, gdy jest ona zakończona znakiem nowej linii. Mechanizm ten nazywa się automatycznym wstawianiem średników (ASI, Automatic Semicolon Insertion). Przykładowo, ten kod zadziała mimo braku średników:

 let a = 1
 let b = 2
 console.log(a + b)

Dlaczego więc używamy średników? Istnieją pewne subtelne przypadki, gdzie ich brak może spowodować nieoczekiwane zachowanie interpretera, dlatego powszechnie przyjętą najlepszą praktyką jest stawianie średnika na końcu każdej instrukcji​. To sprawia, że kod jest jednoznaczny i mniej podatny na błędy wynikające z ASI. Średniki są też konieczne, jeśli chcemy zapisać wiele instrukcji w jednej linii (choć akurat tego się raczej unika dla czytelności).

Podsumowując: można pisać kod JavaScript bez średników na końcu linii, ale dla bezpieczeństwa i czytelności lepiej je zawsze dodawać.

Przykład poprawnego kodu ze średnikami:

 let x = 10;
 x = x + 5;
 console.log(x);

Komentarze w kodzie

Komentarze służą do umieszczania w kodzie notatek, opisów działania lub tymczasowego wyłączania fragmentów kodu. JavaScript przejmuje składnię komentarzy z języka C/C++ (oraz wielu innych):

  • Komentarz jednolinijkowy: zaczyna się od //. Wszystko od tych dwóch ukośników do końca linii zostanie zignorowane przez interpreter.
  • Komentarz blokowy (wiele linii): zaczyna się od /* i kończy */. Wszystko pomiędzy tymi znakami jest traktowane jako komentarz.

Przykłady:

 // To jest komentarz jednolinijkowy

 /* 
   To jest komentarz blokowy.
   Może obejmować wiele linii.
 */

Warto pamiętać, że komentarzy blokowych nie da się zagnieżdżać (nie można otworzyć nowego /* wewnątrz już istniejącego komentarza blokowego, bo pierwszy napotkany */ zamknie cały komentarz). Komentarze nie wpływają na działanie programu – są pomijane podczas wykonywania.

Dobre praktyki:

  • Używaj komentarzy, by wyjaśnić trudniejsze fragmenty kodu lub założenia, ale nie pisz oczywistości. Kod powinien być czytelny sam z siebie, a komentarzami uzupełniamy to, czego z kodu od razu nie widać.
  • Możesz też czasem „wyłączyć” kawałek kodu, komentując go na czas testów (choć lepszym podejściem jest użycie systemu kontroli wersji lub funkcjonalności debuggera).\

Przykłady pierwszych programów w JavaScript

Na koniec zobaczmy kilka prostych przykładów programów w JavaScript wraz z omówieniem. Możesz je uruchomić samodzielnie – albo w konsoli przeglądarki, albo zapisując do pliku .html/.js i odpalając w przeglądarce lub Node.js (z pewnymi różnicami wskazanymi poniżej).

Przykład 1: „Hello, World!” – nasz pierwszy kod

Tradycyjnym pierwszym programem w prawie każdym języku jest wyświetlenie słynnego „Hello, World!”. Zrobimy to za pomocą JavaScript na dwa sposoby:

a) W konsoli (przeglądarki lub Node.js):

 console.log("Hello, World!");

Ta linijka spowoduje wypisanie tekstu Hello, World! w konsoli. Jeśli uruchomisz ją w przeglądarce (np. wpisując w konsoli devtools), zobaczysz komunikat w oknie konsoli. Jeśli uruchomisz przez Node (np. jako plik hello.js i polecenie node hello.js), tekst pojawi się w terminalu. Funkcja console.log() to podstawowy sposób wypisywania czegokolwiek w JavaScript.

b) Jako alert w przeglądarce:

 alert("Hello, World!");

Ten wariant wykorzystuje funkcję alert() dostępną w przeglądarce – spowoduje on wyświetlenie wyskakującego okienka z podanym tekstem. Uwaga: alert nie zadziała w Node.js (tam nie ma okien przeglądarki). Ale jeśli osadzisz ten kod w tagu <script> na stronie i otworzysz stronę, zobaczysz wyskakujące okno. To prosty sposób na komunikat dla użytkownika.

Omówienie: Obie powyższe techniki robią to samo – prezentują użytkownikowi napis. W praktyce console.log jest częściej używane przez programistów do debugowania, a interakcji z użytkownikiem dokonuje się poprzez manipulowanie DOM (dodawanie elementów do strony) zamiast alertów. Jednak alert jest szybki i prosty, więc do testów bywa wykorzystywany.

Przykład 2: Prosta interakcja z użytkownikiem

Napiszemy krótki skrypt, który zapyta użytkownika o imię, a następnie pozdrowi go po imieniu. Wykorzystamy do tego funkcję prompt() do pobrania danych i znany już alert() do wyświetlenia wyniku. Ten kod należy uruchomić w przeglądarce (np. w konsoli na dowolnej stronie lub we własnej stronie HTML):

 const name = prompt("Jak masz na imię?");  // otwiera okienko prompt i zapisuje wpisany tekst
 alert("Witaj, " + name + "!");             // wyświetla powitanie z podanym imieniem

Objaśnienie: Funkcja prompt() otwiera okno dialogowe z polem tekstowym, zadając użytkownikowi pytanie (tu: „Jak masz na imię?”). Zwraca ona tekst wpisany przez użytkownika (lub null, jeśli użytkownik anulował). My zapisujemy tę wartość do zmiennej name (używamy const, bo nie planujemy zmieniać tej zmiennej – imię raz podane zostaje). Następnie alert() wyświetla kolejne okienko z powitaniem. Jeśli np. użytkownik wpisał „Jan”, alert pokaże „Witaj, Jan!”. Ten przykład pokazuje podstawy interakcji: wejście (input) od użytkownika i wyjście (output) w postaci komunikatu. W środku mamy operację łączenia stringów: "Witaj, " + name + "!". Można by to samo osiągnąć za pomocą template string: `Witaj, ${name}!` – co bywa czytelniejsze.

Przykład 3: Instrukcja warunkowa i pętla

Na koniec trochę „programistycznej” logiki – sprawdzimy warunek i użyjemy pętli. Ten przykład zademonstruje użycie zmiennych, instrukcji if...else oraz pętli for. Możesz go uruchomić w dowolnym środowisku (przeglądarka Node.js – w tym kodzie nie używamy funkcji specyficznych dla przeglądarki):

 let n = 5;  // możemy zmienić tę wartość do testów

 // Sprawdźmy, czy n jest liczbą parzystą czy nieparzystą:
 if (n % 2 === 0) {
     console.log(n + " jest liczbą parzystą.");
 } else {
     console.log(n + " jest liczbą nieparzystą.");
 }

 // Teraz wypiszmy kolejne liczby od 1 do n w pętli:
 for (let i = 1; i <= n; i++) {
    console.log("Liczba " + i);
 }

Objaśnienie: Najpierw deklarujemy zmienną n i przypisujemy jej pewną wartość liczbową (tutaj 5). Następnie używamy instrukcji if do sprawdzenia reszty z dzielenia n przez 2 (n % 2). Operator % daje resztę modulo, więc jeśli n % 2 === 0, oznacza to, że n jest podzielne przez 2 (czyli parzyste). Używamy potrójnego równa się === do porównania — jest to ścisłe porównanie, zalecane w JS zamiast podwójnego == (które dokonuje niejawnych konwersji typów). W zależności od wyniku warunku, wypisujemy w konsoli informację, czy liczba jest parzysta, czy nieparzysta.

Druga część kodu to pętla for, która wykona się dla i od 1 do n. W każdej iteracji wypisujemy w konsoli „Liczba X”, gdzie X to kolejny numer. Dla n = 5 zobaczymy więc kolejno: „Liczba 1”, „Liczba 2”, …, „Liczba 5”. Ten fragment demonstruje użycie pętli oraz konkatenację stringów z liczbami (JavaScript sam konwertuje liczbę i do stringa, gdy używamy operatora + z łańcuchem tekstowym).

To tylko kilka prostych przykładów, ale już pokazują one istotne elementy JavaScriptu: pracę z danymi (zmienne, typy), interakcję z otoczeniem (konsola, okienka dialogowe), sterowanie przepływem programu (warunki, pętle). JavaScript oferuje oczywiście znacznie więcej – od tworzenia własnych funkcji, poprzez operacje na tablicach i obiektach, programowanie obiektowe, aż po zaawansowane koncepty jak asynchroniczność (obietnice, async/await) czy moduły. Jednak opanowanie podstaw składni jest pierwszym krokiem, by móc pisać cokolwiek użytecznego.