Podstawy JavaScript

Krótki przewodnik po najważniejszych elementach JavaScript: czym jest ten język, jak wygląda jego składnia, jak dołączać skrypty do HTML oraz jak działają zmienne, typy danych i operatory.

🔹 Skrypty po stronie klienta

JavaScript to język programowania wykonywany po stronie przeglądarki (klienta). Umożliwia:

  • szybką reakcję na działania użytkownika (kliknięcia, wpisywanie tekstu),
  • walidację formularzy bez przeładowania strony,
  • dynamiczne zmiany treści, stylów i struktury strony,
  • tworzenie interaktywnych elementów – menu, galerie, gry, aplikacje webowe.

Skrypty klienckie działają bez ciągłego odwoływania się do serwera, dzięki czemu interfejs może być bardzo responsywny.

🔹 Struktura i składnia JavaScript

Każdy program składa się z instrukcji wykonywanych po kolei. W JavaScript warto pamiętać o:

  • średnikach ; na końcu instrukcji (zalecane),
  • nawiasach klamrowych { }, które wyznaczają bloki kodu (ciało funkcji, pętli, instrukcji warunkowych),
  • komentarzach jednoliniowych i wieloliniowych.

Przykład składni:

// Komentarz jednoliniowy

/*
Komentarz
wieloliniowy
*/

// Przykładowa funkcja
function przywitaj() {
    alert("Witaj na stronie!");
}

🔹 Dołączanie skryptów do HTML

Aby przeglądarka mogła wykonać JavaScript, trzeba go dołączyć do dokumentu HTML.

1. Skrypt wewnętrzny (w tym samym pliku HTML)

<script>
    alert("To jest skrypt wewnętrzny");
</script>

2. Skrypt zewnętrzny (w osobnym pliku .js)

Plik: skrypt.js

alert("To jest skrypt zewnętrzny");

W pliku HTML:

<script src="skrypt.js"></script>

Najczęściej umieszczamy znaczniki <script> tuż przed zamknięciem </body>, żeby najpierw załadować cały HTML, a potem skrypty.

🔹 Komunikaty i okna dialogowe

JavaScript ma kilka prostych funkcji do interakcji z użytkownikiem za pomocą okien dialogowych:

alert("To jest alert!");           // okno z komunikatem
confirm("Czy chcesz kontynuować?");  // OK / Anuluj, zwraca true/false
prompt("Jak masz na imię?");         // okno z polem tekstowym, zwraca wpisany tekst

Te okna blokują działanie strony do czasu, aż użytkownik je zamknie, dlatego w nowoczesnych interfejsach używa się ich oszczędnie.

🔹 Zmienne i typy danych

Zmienna to „pudełko” na dane. W JavaScript najczęściej używa się:

let imie = "Anna";        // zmienna o zasięgu blokowym
const wiek = 18;           // stała – nie można przypisać nowej wartości
var kolor = "niebieski";   // starszy sposób deklaracji (unika się go w nowym kodzie)

Podstawowe typy danych:

  • string – tekst, np. "Hello"
  • number – liczby całkowite i zmiennoprzecinkowe, np. 5, 3.14
  • boolean – wartości logiczne: true lub false
  • null – celowy brak wartości
  • undefined – zmienna zadeklarowana, ale bez przypisanej wartości
  • object, array, function – złożone struktury danych i funkcje.

🔹 Operatory

Operatory arytmetyczne:

+    // dodawanie
-    // odejmowanie
*    // mnożenie
/    // dzielenie
%    // reszta z dzielenia
**   // potęgowanie

Operatory przypisania:

=     // zwykłe przypisanie
+=    // dodaj i przypisz (x += 2 oznacza x = x + 2)
-=    // odejmij i przypisz
*=    // pomnóż i przypisz
/=    // podziel i przypisz

Operatory porównania:

==    // porównanie wartości (z rzutowaniem typów – raczej NIE używać)
===   // porównanie wartości i typu (zalecane)
!=    // różne wartości
!==   // różne wartości lub typy
> < >= <=   // porównania liczbowe

Operatory logiczne:

&&   // „i” logiczne – oba warunki muszą być prawdziwe
||   // „lub” logiczne – wystarczy, że jeden warunek jest prawdziwy
!    // negacja – odwraca wartość logiczną