JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest JavaScript?

JavaScript (w skrócie JS) to skryptowy język programowania, używany głównie do tworzenia interaktywnych elementów stron internetowych. Kod JavaScript wykonuje się najczęściej po stronie klienta — w przeglądarce użytkownika — bez konieczności wysyłania danych na serwer.

Infografika przedstawiająca działanie JavaScript w przeglądarce: użytkownik wchodzi w interakcję z formularzem, JavaScript reaguje na zdarzenia i może wykonać walidację, zmienić treść HTML lub style CSS bez wysyłania danych na serwer.

W kontekście egzaminu INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych) JavaScript jest najczęściej kojarzony z obsługą zdarzeń, modyfikacją elementów HTML poprzez DOM, walidacją formularzy oraz dynamiczną zmianą treści strony.

Charakterystyczne cechy JavaScript

działa po stronie klienta (w przeglądarce) — w przeciwieństwie do PHP, Pythona czy Ruby, które działają po stronie serwera,
zmienne deklaruje się słowem kluczowym var, let lub const,
instrukcje kończą się średnikiem ; (choć w wielu przypadkach jest opcjonalny),
komentarze rozpoczynają się od // (jednoliniowe) lub /* */ (wieloliniowe),
jest językiem o dynamicznym typowaniu — typ zmiennej ustala się automatycznie na podstawie wartości,
kod może być umieszczony bezpośrednio w pliku HTML (w znacznikach <script>) lub w osobnym pliku .js.

Do czego służy JavaScript na stronie?

JavaScript umożliwia m.in.:

sprawdzanie poprawności danych w formularzu w przeglądarce użytkownika,
reagowanie na zdarzenia — kliknięcia, wpisywanie tekstu, najechanie myszką,
zmianę zawartości elementów HTML (np. tekstu w akapicie),
zmianę stylów CSS z poziomu skryptu,
komunikację z serwerem bez przeładowania strony (AJAX, fetch),
obsługę animacji i interaktywnych komponentów.

JavaScript a PHP — kluczowe rozróżnienie

To najczęstsze pytanie egzaminacyjne dotyczące JavaScript:

JavaScript	PHP
Działa po stronie klienta (w przeglądarce)	Działa po stronie serwera
Kod widoczny w źródle strony	Kod ukryty przed użytkownikiem
Walidacja formularza w locie	Walidacja przed zapisem do bazy
Nie wymaga serwera do uruchomienia	Wymaga interpretera PHP na serwerze
Reaguje na zdarzenia użytkownika	Generuje treść HTML przed wysłaniem

Jeśli pytanie dotyczy sprawdzania formularza po stronie klienta, poprawną odpowiedzią jest JavaScript. Jeśli po stronie serwera — PHP (lub inny język serwerowy).

Przykład — walidacja formularza

<form onsubmit="return sprawdzFormularz()">
  <input type="text" id="imie">
  <button type="submit">Wyślij</button>
</form>

<script>
function sprawdzFormularz() {
  const imie = document.getElementById("imie").value;
  if (imie === "") {
    alert("Wpisz imię");
    return false;
  }
  return true;
}
</script>

W tym przykładzie formularz nie zostanie wysłany, jeśli pole imienia jest puste — funkcja zwraca false i blokuje wysłanie.

Gdzie umieszczać kod JavaScript?

Kod JavaScript w dokumencie HTML można umieścić w trzech miejscach:

1. W sekcji `<head>`

<head>
    <script>
        function powitanie() {
            alert("Witaj!");
        }
    </script>
</head>

2. W sekcji `<body>` (najczęściej na końcu)

<body>
    <p>Treść strony</p>
    <script>
        console.log("Strona załadowana");
    </script>
</body>

3. W osobnym pliku zewnętrznym `.js`

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

Wszystkie trzy lokalizacje są dopuszczalne — to częste pytanie testowe. Najlepszą praktyką jest jednak umieszczanie skryptów na końcu <body> lub w pliku zewnętrznym z atrybutem defer, aby strona ładowała się szybciej.

Komentarze w JavaScript

// komentarz jednoliniowy
/* komentarz
   wieloliniowy */

Komentarz w JavaScript zaczyna się od // (jednoliniowy) lub jest objęty parą /* */ (wieloliniowy) — taka sama składnia jak w PHP, C czy Javie.

Zmienne i typy danych

Deklaracja zmiennych

W JavaScript zmienną deklaruje się słowem kluczowym var, let lub const:

var x = 10;        // tradycyjny zapis
let y = 20;        // nowoczesny (od ES6)
const PI = 3.14;   // stała — nie można zmienić wartości

Dynamiczne typowanie

JavaScript jest językiem o dynamicznym typowaniu — typ zmiennej ustala się automatycznie na podstawie przypisanej wartości. To bardzo częste źródło pytań egzaminacyjnych:

var x = true;     // typ: boolean
var y = "true";   // typ: string (napis "true", a nie wartość logiczna!)
var z = 42;       // typ: number
var w = 3.14;     // typ: number (nie ma osobnego "float")
var v = null;     // typ: object
var u;            // typ: undefined

Uwaga: var x = true to wartość logiczna (boolean), a var y = "true" to napis (string). Cudzysłowy zmieniają wszystko — to ulubiony haczyk CKE.

Typy danych w JavaScript

number — liczby całkowite i zmiennoprzecinkowe (np. 42, 3.14, -5),
string — napisy w cudzysłowach lub apostrofach ("tekst", 'tekst'),
boolean — wartości logiczne true i false,
null — celowy brak wartości,
undefined — wartość niezdefiniowana,
object — obiekty (w tym tablice),
function — funkcje.

Zapis liczb w różnych systemach

To wyjątkowo częste pytanie egzaminacyjne:

var dziesietna  = 322;      // system dziesiętny
var szesnastkowa = 0x142;   // system szesnastkowy (= 322 dziesiętnie)
var osemkowa = 0o502;       // system ósemkowy
var binarna = 0b101000010;  // system binarny

Liczba 0x142 w skrypcie JavaScript to zapis w systemie szesnastkowym (hexadecymalnym). Prefiks 0x jednoznacznie wskazuje na ten system.

Wartość NaN

NaN (Not a Number) to specjalna wartość, którą JavaScript zwraca, gdy próbuje wykonać operację arytmetyczną na nie-liczbie:

var wynik = "abc" * 2;     // NaN — mnożenie napisu przez liczbę
var inne = parseInt("xyz"); // NaN — próba konwersji nie-liczby

Operatory

Operatory arytmetyczne

var a = 10 + 3;  // 13 — dodawanie
var b = 10 - 3;  // 7  — odejmowanie
var c = 10 * 3;  // 30 — mnożenie
var d = 10 / 3;  // 3.333... — dzielenie
var e = 10 % 3;  // 1  — reszta z dzielenia (modulo)

Inkrementacja i dekrementacja

To jedno z najczęstszych zagadnień egzaminacyjnych:

var x = 5;
x++;        // post-inkrementacja — x = 6
++x;        // pre-inkrementacja  — x = 7
x--;        // post-dekrementacja — x = 6
--x;        // pre-dekrementacja  — x = 5

Zapis zmienna++ jest równoważny zapisowi zmienna = zmienna + 1 oraz skróconemu zmienna += 1.

Różnica między pre- a post-inkrementacją:

var a = 5;
var b = a--;   // b = 5 (najpierw przypisanie, potem dekrementacja)
a *= 3;        // a = 12 (po dekrementacji a = 4, potem * 3)

W powyższym przykładzie: b przyjmie wartość 5, a a po wszystkich operacjach — 12.

Operatory porównania

==   // równe wartością (porównuje z konwersją typów)
===  // równe wartością i typem (porównanie ścisłe)
!=   // różne
!==  // różne wartością lub typem
>, <, >=, <=   // większe, mniejsze, większe lub równe, mniejsze lub równe

Bardzo ważna różnica:

5 == "5"   // true  — konwersja typu, porównuje wartości
5 === "5"  // false — różne typy (number vs string)

Wyrażenie document.write(5 === '5') wypisze false — bo lewa strona to liczba, prawa to napis.

Operatory logiczne

&&   // koniunkcja (AND)
||   // alternatywa (OR)
!    // negacja (NOT)

Instrukcje warunkowe

if / else

if (wiek >= 18) {
    console.log("Pełnoletni");
} else if (wiek >= 13) {
    console.log("Nastolatek");
} else {
    console.log("Dziecko");
}

Warunki złożone — częste pytanie egzaminacyjne

Zadanie: zapisać warunek, który będzie prawdziwy, gdy zmienna a jest dowolną liczbą naturalną dodatnią (bez zera) lub zmienna b przyjmie wartość z określonego zakresu.

if (a > 0 && Number.isInteger(a) || (b >= 10 && b <= 20)) {
    // warunek spełniony
}

Zadanie: sprawdzić, czy zmienne a oraz b są większe od zera, przy czym b jest mniejsze od a:

if (a > 0 && b > 0 && b < a) {
    // warunek spełniony
}

Klucz to rozróżnienie && (oba muszą być spełnione) od || (wystarczy jeden).

Operator warunkowy (ternary)

var status = (wiek >= 18) ? "pełnoletni" : "niepełnoletni";

Pętle

Pętla for

for (var i = 0; i < 10; i++) {
    console.log(i);
}

Wypisanie sześciu kolejnych liczb parzystych

Klasyczne zadanie egzaminacyjne — należy wskazać poprawną pętlę:

for (var i = 2; i <= 12; i += 2) {
    console.log(i);
}
// Wypisze: 2, 4, 6, 8, 10, 12

Alternatywne poprawne zapisy:

for (var i = 0; i < 6; i++) {
    console.log(i * 2 + 2);
}

Pętla while

var i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

Pętla do-while

var i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

Różnica: while sprawdza warunek przed wykonaniem ciała, do-while — po. do-while wykona się więc zawsze co najmniej raz.

Funkcje

Funkcja w JavaScript to blok kodu wykonywany na żądanie. Deklaruje się ją słowem kluczowym function:

function dodaj(a, b) {
    return a + b;
}

var wynik = dodaj(5, 3);   // wynik = 8

Walidacja długości tekstu — przykład egzaminacyjny

function czytajImie() {
    var imie = null;
    do {
        imie = prompt("Podaj imię:");
        if (imie.length < 3) {
            alert("Wprowadzony tekst jest niepoprawny");
        }
    } while (imie.length < 3);
    return imie;
}

Funkcja pyta użytkownika o imię i powtarza pytanie, dopóki nie zostanie podany napis o długości co najmniej 3 znaków.

Funkcje dialogowe

JavaScript udostępnia trzy podstawowe funkcje interakcji z użytkownikiem:

alert("tekst") — wyświetla komunikat,
prompt("pytanie") — pyta o wartość, zwraca napis (lub null przy anulowaniu),
confirm("pytanie") — pyta o potwierdzenie, zwraca true lub false.

Sposoby wypisywania tekstu w JavaScript

To częste pytanie egzaminacyjne. Wypisać tekst można na cztery sposoby:

document.write("tekst");        // do dokumentu HTML
console.log("tekst");           // do konsoli przeglądarki
alert("tekst");                 // w oknie dialogowym
document.getElementById("x").innerHTML = "tekst";  // do elementu HTML

Funkcją, której NIE ma w JavaScript, jest np. echo (to PHP) lub print() w znaczeniu wypisywania (w JS print() otwiera okno drukowania).

DOM — operacje na elementach HTML

DOM (Document Object Model) to obiektowa reprezentacja dokumentu HTML — to dzięki niemu JavaScript może modyfikować zawartość strony.

document.getElementById()

Najpopularniejsza metoda — zwraca element o podanym id:

var element = document.getElementById("nazwa");

Funkcja document.getElementById() służy do uzyskania dostępu do elementu HTML o określonym identyfikatorze.

Modyfikacja zawartości elementu

document.getElementById("naglowek").innerHTML = "Nowy tytuł";
document.getElementById("akapit").innerText = "Czysty tekst";
document.getElementById("link").href = "https://example.com";

Dostęp do pierwszego elementu danego typu

Aby odwołać się do pierwszego akapitu w dokumencie HTML:

document.getElementsByTagName("p")[0]
// lub:
document.querySelector("p")

getElementsByTagName zwraca kolekcję elementów — pierwszy ma indeks [0].

Modyfikacja stylów CSS

document.getElementById("box").style.color = "red";
document.getElementById("box").style.backgroundColor = "yellow";
document.getElementById("box").style.fontSize = "20px";

Obiekty i tablice

Obiekty

Obiekt w JavaScript to kolekcja par klucz : wartość:

var osoba = {
    imie: "Anna",
    nazwisko: "Kowalska",
    rok_urodzenia: 1985
};

Do właściwości obiektu można odwołać się na dwa sposoby:

osoba.nazwisko       // "Kowalska" — notacja kropkowa
osoba["nazwisko"]    // "Kowalska" — notacja nawiasowa

Obiekty z metodami

Obiekt może zawierać nie tylko właściwości (dane), ale także metody (funkcje):

var obj1 = {
    czescUlamkowa: 10,
    czescCalkowita: 20,
    oblicz: function() {
        return this.czescCalkowita + this.czescUlamkowa / 100;
    }
};

W powyższym obiekcie czescUlamkowa i czescCalkowita to właściwości, a oblicz — metoda.

Tablice

Tablica to specjalny obiekt, w którym wartości są indeksowane liczbami od 0:

var imiona = ["Anna", "Bartek", "Agata", "Damian"];
console.log(imiona[2]);   // "Agata"
console.log(imiona.length); // 4

Aby odwołać się do imienia „Agata” w powyższej tablicy, należy użyć zapisu imiona[2] — indeksowanie zaczyna się od 0, nie od 1.

Tworzenie obiektu konstruktorem

Zapis:

var napis1 = new Napis();

ma na celu utworzenie nowego obiektu klasy (konstruktora) Napis. Operator new wywołuje konstruktor i zwraca nowy obiekt.

Obiekty wbudowane

JavaScript udostępnia kilka predefiniowanych obiektów — najczęstsze tematy pytań to Math i Date.

Math — operacje matematyczne

Math.pow(2, 8);    // 256 — potęgowanie (2 do potęgi 8)
Math.sqrt(16);     // 4   — pierwiastek kwadratowy
Math.abs(-7);      // 7   — wartość bezwzględna
Math.round(3.7);   // 4   — zaokrąglenie
Math.floor(3.9);   // 3   — zaokrąglenie w dół
Math.ceil(3.1);    // 4   — zaokrąglenie w górę
Math.random();     // liczba losowa z przedziału [0, 1)
Math.max(1, 5, 3); // 5
Math.min(1, 5, 3); // 1
Math.PI;           // 3.141592653589793

Funkcja Math.pow(podstawa, wykładnik) służy do obliczania potęgi. To częste pytanie egzaminacyjne.

Date — obsługa dat

var dzis = new Date();
dzis.getFullYear();    // np. 2026 — pełny rok
dzis.getMonth();       // 0–11 (uwaga: styczeń to 0!)
dzis.getDate();        // 1–31 — dzień miesiąca
dzis.getDay();         // 0–6 (0 = niedziela)
dzis.getHours();       // 0–23
dzis.getMinutes();     // 0–59
dzis.getSeconds();     // 0–59
dzis.getTime();        // liczba milisekund od 1.01.1970

Wszystkie powyższe metody są powiązane z predefiniowanym obiektem Date.

Zdarzenia i obsługa formularzy

JavaScript pozwala reagować na zdarzenia — czyli akcje użytkownika.

Najczęstsze zdarzenia

Zdarzenie	Kiedy zachodzi
`onclick`	kliknięcie elementu
`onsubmit`	wysłanie formularza
`onchange`	zmiana wartości pola
`oninput` / `onkeyup`	wpisywanie znaku w polu tekstowym
`onmouseover`	najechanie kursorem
`onload`	załadowanie strony
`onfocus` / `onblur`	wejście / wyjście z pola

Aktywacja funkcji przy wpisywaniu znaku

Aby funkcja JavaScript była wywoływana za każdym razem, gdy użytkownik wpisze znak w polu tekstowym, należy użyć zdarzenia onkeyup (lub nowszego oninput):

<input type="text" id="szukaj" onkeyup="filtruj()">

<script>
function filtruj() {
    var tekst = document.getElementById("szukaj").value;
    console.log("Wpisano:", tekst);
}
</script>

Walidacja formularza po stronie klienta

Sprawdzanie poprawności wypełnienia formularza po stronie klienta powinno być wykonane w JavaScript — to najczęstsze pytanie egzaminacyjne z tej dziedziny.

<form onsubmit="return waliduj()">
    <input type="text" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}">
    <input type="text" id="telefon" pattern="[0-9]{9}">
    <button type="submit">Wyślij</button>
</form>

Wzorzec walidacji (pattern) dla pola "nazwa"

Wzorzec walidacji pola tekstowego można dokumentować na dwa sposoby — bezpośrednio w HTML (pattern) lub w skrypcie JavaScript przy użyciu wyrażeń regularnych:

<input type="text" id="nazwa" pattern="[A-Za-z]{3,20}">

var wzorzec = /^[A-Za-z]{3,20}$/;
var nazwa = document.getElementById("nazwa").value;
if (wzorzec.test(nazwa)) {
    // poprawna
}

Co warto zapamiętać na egzamin INF.03

Krótkie podsumowanie najczęstszych zagadnień z JavaScript na egzaminie:

JavaScript działa po stronie klienta (w przeglądarce) — PHP, Python, Ruby działają po stronie serwera.
Walidacja formularza po stronie klienta to zawsze JavaScript, po stronie serwera — PHP.
Aby uruchomić aplikację po stronie klienta, używamy JavaScript.
Kod JavaScript w HTML można umieścić w <head>, <body> lub w pliku zewnętrznym — wszystkie trzy są poprawne.
Komentarze rozpoczynają się od // (jednoliniowe) lub /* */ (wieloliniowe).
var x = true to boolean, var x = "true" to string — cudzysłowy są kluczowe.
Typ boolean w JS może przyjmować wartości true lub false.
Liczba 0x142 to zapis w systemie szesnastkowym (hex).
NaN pojawia się przy próbie operacji arytmetycznej na nie-liczbach.
zmienna++ jest równoważne zmienna += 1 oraz zmienna = zmienna + 1.
=== porównuje wartość i typ, == — tylko wartość z konwersją.
document.getElementById() zwraca element HTML o podanym id.
Math.pow(a, b) oblicza a do potęgi b.
new Obiekt() tworzy nowy obiekt danej klasy (przez konstruktor).
Tablice indeksowane są od 0 — imiona[2] to trzeci element.
Do właściwości obiektu odwołujemy się obj.wlasciwosc lub obj["wlasciwosc"].
onkeyup / oninput to zdarzenie wywoływane przy wpisywaniu znaku w polu.
onsubmit to zdarzenie wywoływane przy wysłaniu formularza.
Sposoby wypisywania tekstu: document.write, console.log, alert, innerHTML — echo to PHP, nie JavaScript.
Metody getFullYear(), getMonth(), getDate() należą do obiektu Date.