(np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo \"Wynik: \" . $wynik . \" zł\";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wyrażenie 5 === \"5\" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę"},{"@type":"Answer","text":"Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy"},{"@type":"Answer","text":"W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $"}]},{"@type":"Question","position":30,"name":"Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.","comment":{"@type":"Comment","text":"Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`!"}},"suggestedAnswer":[{"@type":"Answer","text":"Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY"},{"@type":"Answer","text":"Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep"},{"@type":"Answer","text":"Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika"}]},{"@type":"Question","position":31,"name":"Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `\u003chtml>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.","comment":{"@type":"Comment","text":"Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**."}},"suggestedAnswer":[{"@type":"Answer","text":"position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie"},{"@type":"Answer","text":"Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static"},{"@type":"Answer","text":"Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute"}]},{"@type":"Question","position":32,"name":"Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`\u003cinput>`, `\u003cselect>`) i wstawić wynik do akapitu lub bloku `\u003cdiv>`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`\u003cinput>`, `\u003cselect>`, `\u003ctextarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `\u003cinput type=\"checkbox\">` lub `type=\"radio\"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`\u003cp>`, `\u003cdiv>`, `\u003cspan>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).","comment":{"@type":"Comment","text":"Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`\"2\" + \"3\" = \"23\"`)!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wartość pola \u003cinput> odczytuje się właściwością .innerHTML, a zawartość bloku \u003cdiv> właściwością .value"},{"@type":"Answer","text":"Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML"},{"@type":"Answer","text":"Właściwość .value na polu \u003cinput type=\"number\"> zwraca zawsze zmienną typu number, a nie string"}]}]}
CKE Egzamin Zawodowy INF.03 — Bazy danych SQL (MySQL/MariaDB), PHP, JavaScript (DOM), HTML5 i CSS3
32 pytania z kwalifikacji zawodowej INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych): semantyczny HTML5, formularze, kaskadowe arkusze stylów CSS3 (specyficzność, Box Model, Flexbox, Grid, RWD), programowanie klienckie w JavaScript (DOM, zdarzenia, obiekt Math), programowanie serwerowe w PHP (mysqli/PDO, sesje, ciasteczka, obsługa plików, bezpieczeństwo SQL Injection/XSS/CSRF, WCAG 2.1) oraz relacyjne bazy danych MySQL/MariaDB (SELECT, JOIN, GROUP BY, HAVING, DDL/DML/DCL i normalizacja 1NF–3NF).
Jak działa model pudełkowy (Box Model) w CSS3 i czym różni się właściwość `box-sizing: content-box` (domyślna) od `box-sizing: border-box`?
Na model pudełkowy elementu składają się od środka: zawartość (`content`: `width` × `height`), dopełnienie wewnętrzne (`padding` — odstęp między treścią a obramowaniem, przyjmuje tło elementu), obramowanie (`border`) oraz margines zewnętrzny (`margin` — przezroczysty odstęp od sąsiednich elementów). W domyślnym `content-box` podana szerokość `width` dotyczy samej treści (całkowita szerokość to `width + padding + border`), natomiast w `border-box` właściwości `padding` i `border` są wliczane do zadeklarowanego `width`.
Skrócony zapis `margin` / `padding`: 1 wartość = wszystkie strony; 2 wartości (`10px 20px`) = `góra/dół` oraz `lewo/prawo` (np. `margin: 0 auto` centruje blok o zadanej szerokości w poziomie!); 4 wartości = zgodnie z ruchem wskazówek zegara: `góra prawo dół lewo`.
Padding to zewnętrzny przezroczysty odstęp od sąsiednich bloków, a margin to odstęp wewnętrzny przyjmujący kolor tła
Zapis margin: 10px 20px ustawia 10px z lewej i prawej strony oraz 20px z góry i z dołu
Właściwość margin: auto wyśrodkowuje tekst wewnątrz akapitu zamiast właściwości text-align: center
Na model pudełkowy elementu składają się od środka: zawartość (`content`: `width` × `height`), dopełnienie wewnętrzne (`padding` — odstęp między treścią a obramowaniem, przyjmuje tło elementu), obramowanie (`border`) oraz margines zewnętrzny (`margin` — przezroczysty odstęp od sąsiednich elementów). W domyślnym `content-box` podana szerokość `width` dotyczy samej treści (całkowita szerokość to `width + padding + border`), natomiast w `border-box` właściwości `padding` i `border` są wliczane do zadeklarowanego `width`.
2
Jak w SQL (`CREATE TABLE` oraz `ALTER TABLE`) definiuje się klucz główny (`PRIMARY KEY` z `AUTO_INCREMENT`), klucz obcy (`FOREIGN KEY ... REFERENCES ...`) oraz więzy integralności (`NOT NULL`, `UNIQUE`, `DEFAULT`, `CHECK`)?
W `CREATE TABLE`: `id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY`, `email VARCHAR(100) NOT NULL UNIQUE`, `aktywny BOOLEAN DEFAULT 1`, a klucz obcy: `klient_id INT UNSIGNED, FOREIGN KEY (klient_id) REFERENCES klienci(id) ON DELETE CASCADE`. Modyfikacja istniejącej tabeli przez `ALTER TABLE`: dodanie kolumny `ALTER TABLE towary ADD COLUMN rabat INT DEFAULT 0;`, zmiana typu `ALTER TABLE towary MODIFY COLUMN nazwa VARCHAR(150) NOT NULL;`, usunięcie kolumny `ALTER TABLE towary DROP COLUMN rabat;`.
Klucz główny (`PRIMARY KEY`) jednoznacznie identyfikuje każdy wiersz tabeli, może być tylko jeden w tabeli (choć może składać się z kilku kolumn jako klucz złożony) i z definicji wymusza `NOT NULL` oraz `UNIQUE`. Natomiast kluczy kandydujących `UNIQUE` w tabeli może być wiele i dopuszczają one wartość `NULL`.
Nową kolumnę do istniejącej tabeli dodaje się poleceniem UPDATE TABLE towary INSERT COLUMN rabat INT
W jednej tabeli może istnieć wiele kluczy głównych PRIMARY KEY, ale tylko jeden klucz UNIQUE
W `CREATE TABLE`: `id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY`, `email VARCHAR(100) NOT NULL UNIQUE`, `aktywny BOOLEAN DEFAULT 1`, a klucz obcy: `klient_id INT UNSIGNED, FOREIGN KEY (klient_id) REFERENCES klienci(id) ON DELETE CASCADE`. Modyfikacja istniejącej tabeli przez `ALTER TABLE`: dodanie kolumny `ALTER TABLE towary ADD COLUMN rabat INT DEFAULT 0;`, zmiana typu `ALTER TABLE towary MODIFY COLUMN nazwa VARCHAR(150) NOT NULL;`, usunięcie kolumny `ALTER TABLE towary DROP COLUMN rabat;`.
Kolumna z ograniczeniem PRIMARY KEY może przyjmować wartość NULL, jeśli nie ma ustawionego AUTO_INCREMENT
3
Jaka jest obowiązkowa kolejność klauzul w zapytaniu `SELECT` w języku SQL i czym różni się filtrowanie w klauzuli `WHERE` od filtrowania w klauzuli `HAVING`?
Obowiązkowa kolejność klauzul w składni SQL to: `SELECT ... FROM ... JOIN ... ON ... WHERE ... GROUP BY ... HAVING ... ORDER BY ... LIMIT ...`. Klauzula **`WHERE`** filtruje pojedyncze wiersze **PRZED** grupowaniem i nie może zawierać funkcji agregujących (`COUNT`, `SUM`, `AVG`, `MIN`, `MAX`), natomiast klauzula **`HAVING`** filtruje już zagregowane grupy **PO** wykonaniu `GROUP BY` i pozwala na warunki z funkcjami agregującymi (np. `HAVING COUNT(*) > 5` lub `HAVING AVG(cena) >= 100`).
Domyślnym kierunkiem sortowania w `ORDER BY kolumna` jest porządek rosnący (**`ASC`**); aby posortować malejąco, należy jawnie dopisać słowo kluczowe **`DESC`**.
Kolejność to SELECT -> FROM -> GROUP BY -> WHERE -> HAVING -> ORDER BY, a w WHERE można używać funkcji COUNT() i AVG()
Klauzula HAVING może być używana zamiast WHERE do filtrowania wierszy przed połączeniem tabel JOIN
Obowiązkowa kolejność klauzul w składni SQL to: `SELECT ... FROM ... JOIN ... ON ... WHERE ... GROUP BY ... HAVING ... ORDER BY ... LIMIT ...`. Klauzula **`WHERE`** filtruje pojedyncze wiersze **PRZED** grupowaniem i nie może zawierać funkcji agregujących (`COUNT`, `SUM`, `AVG`, `MIN`, `MAX`), natomiast klauzula **`HAVING`** filtruje już zagregowane grupy **PO** wykonaniu `GROUP BY` i pozwala na warunki z funkcjami agregującymi (np. `HAVING COUNT(*) > 5` lub `HAVING AVG(cena) >= 100`).
Domyślnym porządkiem sortowania w klauzuli ORDER BY jest porządek malejący (DESC)
4
Jakie jest działanie i składnia instrukcji `INSERT INTO`, `UPDATE` oraz `DELETE` w języku SQL i co się stanie w przypadku pominięcia klauzuli `WHERE` w `UPDATE` lub `DELETE`?
Dodawanie wiersza: `INSERT INTO tabela (kol1, kol2) VALUES ('wart1', 10);`. Aktualizacja wierszy: `UPDATE tabela SET kol1 = 'nowa', kol2 = kol2 + 1 WHERE id = 5;`. Usuwanie wierszy: `DELETE FROM tabela WHERE id = 5;`. Pominięcie klauzuli `WHERE` w poleceniu `UPDATE` spowoduje nadpisanie wartości we **WSZYSTKICH wierszach tabeli**, a pominięcie `WHERE` w poleceniu `DELETE FROM tabela;` usunie **wszystkie wiersze z tabeli**!
Częsty błąd składniowy w SQL: w poleceniu `DELETE FROM tabela WHERE ...` NIE pisze się gwiazdki `*` po słowie `DELETE`! Ponadto `DELETE FROM tabela` usuwa wiersze jeden po drugim i nie resetuje licznika `AUTO_INCREMENT`, natomiast `TRUNCATE TABLE tabela` (DDL) szybko opróżnia tabelę i resetuje `AUTO_INCREMENT` do 1.
Składnia aktualizacji to UPDATE INTO tabela VALUES (...) WHERE id = 5, a usuwania to DELETE * FROM tabela WHERE id = 5
Polecenie DELETE FROM tabela resetuje licznik AUTO_INCREMENT do 1 tak samo jak TRUNCATE TABLE
W poleceniu DELETE po słowie DELETE należy obowiązkowo wpisać gwiazdkę: DELETE * FROM tabela
Dodawanie wiersza: `INSERT INTO tabela (kol1, kol2) VALUES ('wart1', 10);`. Aktualizacja wierszy: `UPDATE tabela SET kol1 = 'nowa', kol2 = kol2 + 1 WHERE id = 5;`. Usuwanie wierszy: `DELETE FROM tabela WHERE id = 5;`. Pominięcie klauzuli `WHERE` w poleceniu `UPDATE` spowoduje nadpisanie wartości we **WSZYSTKICH wierszach tabeli**, a pominięcie `WHERE` w poleceniu `DELETE FROM tabela;` usunie **wszystkie wiersze z tabeli**!
5
Jak w języku PHP obsługiwać pliki na serwerze (`fopen`, `fgets`, `fwrite`, `fclose`, `file_get_contents`, `file_put_contents`) oraz dołączać zewnętrzne pliki skryptów (`include`, `require`, `include_once`, `require_once`)?
Dołączanie plików PHP: `include 'plik.php';` w razie braku pliku generuje ostrzeżenie (`E_WARNING`) i kontynuuje wykonywanie skryptu, natomiast **`require 'plik.php';`** (oraz `require_once`) w razie braku pliku generuje błąd krytyczny (`E_COMPILE_ERROR`) i natychmiast zatrzymuje skrypt. Operacje na plikach: `fopen('dane.txt', 'r')` (`'r'` – odczyt, `'w'` – zapis z nadpisaniem od zera, `'a'` – dopisywanie na końcu pliku), odczyt linii w pętli `while (!feof($plik)) { $linia = fgets($plik); }`, zapis `fwrite($plik, $tekst)` oraz zamknięcie `fclose($plik)`.
Do fizycznego usunięcia pliku z dysku w języku PHP służy funkcja **`unlink('plik.txt')`**, natomiast do sprawdzenia, czy plik istnieje — funkcja **`file_exists('plik.txt')`**.
Brak pliku w instrukcji include powoduje natychmiastowe zatrzymanie skryptu błędem krytycznym, a w require tylko ostrzeżenie
Otwarcie pliku w trybie fopen('log.txt', 'w') dopisuje nowe dane na samym końcu pliku bez usuwania wcześniejszej zawartości
Dołączanie plików PHP: `include 'plik.php';` w razie braku pliku generuje ostrzeżenie (`E_WARNING`) i kontynuuje wykonywanie skryptu, natomiast **`require 'plik.php';`** (oraz `require_once`) w razie braku pliku generuje błąd krytyczny (`E_COMPILE_ERROR`) i natychmiast zatrzymuje skrypt. Operacje na plikach: `fopen('dane.txt', 'r')` (`'r'` – odczyt, `'w'` – zapis z nadpisaniem od zera, `'a'` – dopisywanie na końcu pliku), odczyt linii w pętli `while (!feof($plik)) { $linia = fgets($plik); }`, zapis `fwrite($plik, $tekst)` oraz zamknięcie `fclose($plik)`.
Funkcja fclose() usuwa plik fizycznie z dysku twardego serwera
6
Jak w dokumencie HTML5 poprawnie dołączyć zewnętrzny arkusz stylów CSS, zewnętrzny skrypt JavaScript oraz ustawić kodowanie znaków UTF-8 i ikonę strony (favicon) zgodnie z wymogami CKE INF.03?
W sekcji `<head>` umieszcza się: kodowanie `<meta charset="UTF-8">`, arkusz stylów `<link rel="stylesheet" href="styl.css">`, ikonę strony `<link rel="icon" href="obraz.png">` (lub `rel="shortcut icon"`), natomiast zewnętrzny plik JavaScript dołącza się znacznikiem `<script src="skrypt.js"></script>` (w `<head>` z atrybutem `defer` lub przed zamknięciem `</body>`).
Bardzo częsty błąd na egzaminie praktycznym INF.03: znacznik `<script src="..."></script>` MUSI posiadać znacznik zamykający `</script>`, a w `<link rel="stylesheet" href="styl.css">` atrybutem wskazującym plik jest `href`, a nie `src`!
Arkusz CSS dołącza się znacznikiem <style src="styl.css">, a skrypt JS znacznikiem <link rel="script" href="skrypt.js">
Znacznik <script src="skrypt.js" /> jest elementem pustym i nie wymaga znacznika zamykającego </script>
Kodowanie UTF-8 ustawia się w sekcji <body> za pomocą atrybutu <body encoding="UTF-8">
W sekcji `<head>` umieszcza się: kodowanie `<meta charset="UTF-8">`, arkusz stylów `<link rel="stylesheet" href="styl.css">`, ikonę strony `<link rel="icon" href="obraz.png">` (lub `rel="shortcut icon"`), natomiast zewnętrzny plik JavaScript dołącza się znacznikiem `<script src="skrypt.js"></script>` (w `<head>` z atrybutem `defer` lub przed zamknięciem `</body>`).
7
Jak w języku PHP połączyć się z bazą danych MySQL/MariaDB za pomocą rozszerzenia `mysqli` (w stylu proceduralnym i obiektowym), wykonać zapytanie `SELECT`, pobrać wiersze w pętli `while` i zamknąć połączenie?
Styl proceduralny (najczęstszy w arkuszach INF.03): (1) połączenie: `$conn = mysqli_connect('localhost', 'root', '', 'nazwa_bazy');`, (2) zapytanie: `$wynik = mysqli_query($conn, $sql);`, (3) iteracja po wierszach: `while ($wiersz = mysqli_fetch_row($wynik))` (indeksy liczbowe `$wiersz[0]`) lub `mysqli_fetch_assoc($wynik)` (klucze po nazwach kolumn `$wiersz['imie']`) lub `mysqli_fetch_array($wynik)`, (4) zamknięcie połączenia: `mysqli_close($conn);` (w stylu obiektowym: `new mysqli(...)`, `$conn->query($sql)`, `$wynik->fetch_assoc()`, `$conn->close()`).
Uwaga na kolejność argumentów w `mysqli_query($conn, $sql)`: pierwszym argumentem w stylu proceduralnym `mysqli` jest ZAWSZE obiekt połączenia `$conn`, a drugim łańcuch zapytania `$sql`! (Odwrotnie niż w usuniętym przed laty rozszerzeniu `mysql_query`).
W PHP 8.x do łączenia z MySQL używa się funkcji mysql_connect() oraz mysql_fetch_row()
Styl proceduralny (najczęstszy w arkuszach INF.03): (1) połączenie: `$conn = mysqli_connect('localhost', 'root', '', 'nazwa_bazy');`, (2) zapytanie: `$wynik = mysqli_query($conn, $sql);`, (3) iteracja po wierszach: `while ($wiersz = mysqli_fetch_row($wynik))` (indeksy liczbowe `$wiersz[0]`) lub `mysqli_fetch_assoc($wynik)` (klucze po nazwach kolumn `$wiersz['imie']`) lub `mysqli_fetch_array($wynik)`, (4) zamknięcie połączenia: `mysqli_close($conn);` (w stylu obiektowym: `new mysqli(...)`, `$conn->query($sql)`, `$wynik->fetch_assoc()`, `$conn->close()`).
Funkcja mysqli_fetch_row() zwraca tablicę asocjacyjną indeksowaną wyłącznie nazwami kolumn tabeli
W mysqli_query() pierwszym argumentem jest zawsze tekst zapytania SQL, a drugim identyfikator połączenia $conn
8
Jak oblicza się specyficzność (priorytet) selektorów w kaskadowych arkuszach stylów CSS3 i co oznaczają kombinatory `A B`, `A > B`, `A + B` oraz `A ~ B`?
Waga (specyficzność) w CSS od najwyższej: (1) styl wpisany bezpośrednio w atrybucie `style="..."` (1,0,0,0), (2) selektor identyfikatora `#id` (0,1,0,0), (3) selektor klasy `.klasa`, atrybutu `[type="text"]` i pseudoklasy `:hover` (0,0,1,0), (4) selektor znacznika `p`, `div` i pseudoelementu `::before` (0,0,0,1); selektor uniwersalny `*` ma wagę 0. Kombinatory: `A B` (potomek dowolnego stopnia wewnątrz A), `A > B` (bezpośrednie dziecko elementu A), `A + B` (bezpośredni sąsiad — pierwszy element B zaraz po A), `A ~ B` (wszyscy bracia B występujący po A).
W arkuszach egzaminacyjnych INF.03 bardzo często pojawia się wymóg ostylowania odnośników lub wierszy tabeli po najechaniu kursorem myszy (`a:hover`, `tr:hover`) oraz obrazów wewnątrz konkretnego bloku (`#lewy img`).
Selektor znacznika (np. div) ma wyższy priorytet niż selektor klasy (.blok) oraz identyfikatora (#baner)
Waga (specyficzność) w CSS od najwyższej: (1) styl wpisany bezpośrednio w atrybucie `style="..."` (1,0,0,0), (2) selektor identyfikatora `#id` (0,1,0,0), (3) selektor klasy `.klasa`, atrybutu `[type="text"]` i pseudoklasy `:hover` (0,0,1,0), (4) selektor znacznika `p`, `div` i pseudoelementu `::before` (0,0,0,1); selektor uniwersalny `*` ma wagę 0. Kombinatory: `A B` (potomek dowolnego stopnia wewnątrz A), `A > B` (bezpośrednie dziecko elementu A), `A + B` (bezpośredni sąsiad — pierwszy element B zaraz po A), `A ~ B` (wszyscy bracia B występujący po A).
Kombinator div > p wybiera wyłącznie akapity znajdujące się poza znacznikiem div
Pseudoklasa :hover działa tylko wtedy, gdy jest zapisana po podwójnym dwukropku ::hover
9
Jak w języku JavaScript dynamicznie zmienić styl CSS elementu, podmienić klasę CSS lub zmienić obrazek (`src` i `alt`) po kliknięciu przycisku?
Styl inline modyfikuje się przez obiekt `.style` z nazwami właściwości w notacji **camelCase**, np. `el.style.backgroundColor = 'red'`, `el.style.fontSize = '20px'`, `el.style.color = '#ffffff'`. Klasy CSS modyfikuje się przez `el.classList.add('aktywny')`, `el.classList.remove('ukryty')` lub `el.classList.toggle('ciemny')`. Atrybut obrazu zmienia się bezpośrednio: `obraz.src = 'nowy.jpg'` oraz `obraz.alt = 'Opis'`.
Obsługę zdarzenia kliknięcia w zadaniach INF.03 można podpiąć w HTML atrybutem `onclick="oblicz()"` albo w skrypcie JS metodą `przycisk.addEventListener('click', oblicz)`.
W JavaScript właściwości CSS z myślnikiem zapisuje się identycznie jak w CSS: el.style.background-color = 'red'
Aby zmienić kolor tekstu w JavaScript, używa się właściwości el.style.fontColor = 'blue'
Zdarzenie kliknięcia w HTML zapisuje się atrybutem onpress="funkcja()"
Styl inline modyfikuje się przez obiekt `.style` z nazwami właściwości w notacji **camelCase**, np. `el.style.backgroundColor = 'red'`, `el.style.fontSize = '20px'`, `el.style.color = '#ffffff'`. Klasy CSS modyfikuje się przez `el.classList.add('aktywny')`, `el.classList.remove('ukryty')` lub `el.classList.toggle('ciemny')`. Atrybut obrazu zmienia się bezpośrednio: `obraz.src = 'nowy.jpg'` oraz `obraz.alt = 'Opis'`.
10
Do czego służą programy `mysqldump` oraz `mysql` (oraz zakładka Eksport/Import w phpMyAdmin) podczas wykonywania kopii zapasowej i odtwarzania bazy danych na egzaminie praktycznym INF.03?
Narzędzie wiersza poleceń **`mysqldump`** służy do wykonywania logicznej kopii zapasowej (eksportu struktury i danych do pliku `.sql`), np. `mysqldump -u root -p nazwa_bazy > kopia.sql`. Program kliencki **`mysql`** służy do wykonywania zapytań oraz importu bazy danych z pliku skryptowego `.sql`: `mysql -u root -p nazwa_bazy < kopia.sql` (w konsoli interaktywnej SQL import wykonuje się też poleceniem `SOURCE sciezka/do/pliku.sql;`).
Praktyczna wskazówka na egzamin INF.03: na początku zadania egzaminacyjnego należy w phpMyAdmin (lub konsoli) najpierw utworzyć bazę danych o nazwie dokładnie takiej, jakiej wymaga arkusz (z kolacją `utf8_unicode_ci` lub `utf8mb4_polish_ci`), kliknąć tę bazę na liście po lewej stronie i dopiero wtedy przejść do zakładki **Import**, aby wczytać dostarczony przez CKE plik `baza.sql`!
Polecenie mysqldump służy do importowania pliku .sql do bazy, a mysql > kopia.sql służy do eksportu bazy
Plik .sql wyeksportowany przez mysqldump jest plikiem binarnym, którego nie można otworzyć w edytorze tekstu
Narzędzie wiersza poleceń **`mysqldump`** służy do wykonywania logicznej kopii zapasowej (eksportu struktury i danych do pliku `.sql`), np. `mysqldump -u root -p nazwa_bazy > kopia.sql`. Program kliencki **`mysql`** służy do wykonywania zapytań oraz importu bazy danych z pliku skryptowego `.sql`: `mysql -u root -p nazwa_bazy < kopia.sql` (w konsoli interaktywnej SQL import wykonuje się też poleceniem `SOURCE sciezka/do/pliku.sql;`).
Przed zaimportowaniem tabeli w phpMyAdmin nie trzeba tworzyć ani wybierać żadnej bazy danych, jeśli plik .sql nie zawiera instrukcji CREATE DATABASE
11
Jak w CSS3 ułożyć trzy bloki obok siebie w jednym wierszu za pomocą modułu Flexbox (`display: flex`), klasycznego opływania (`float: left`) lub siatki CSS Grid (`display: grid`)?
(1) **Flexbox** (najwygodniejszy w INF.03): na kontenerze-rodzicu (np. `main`) ustawiamy `display: flex;` (domyślny kierunek `flex-direction: row;` układa dzieci obok siebie; wyrównanie w osi głównej to `justify-content`, a w osi poprzecznej `align-items`). (2) **Float**: na każdym z bloków potomnych ustawiamy `float: left;` oraz szerokości sumujące się do ≤ 100% (np. `30%`, `40%`, `30%`), a na stopce `clear: both;`. (3) **CSS Grid**: na rodzicu `display: grid; grid-template-columns: 30% 40% 30%;`.
Jeśli w zadaniu INF.03 układ kolumnowy budujesz za pomocą `float: left`, bezwzględnie pamiętaj o dodaniu `clear: both;` w selektorze `footer`, w przeciwnym razie stopka „wjedzie” pod kolumny!
(1) **Flexbox** (najwygodniejszy w INF.03): na kontenerze-rodzicu (np. `main`) ustawiamy `display: flex;` (domyślny kierunek `flex-direction: row;` układa dzieci obok siebie; wyrównanie w osi głównej to `justify-content`, a w osi poprzecznej `align-items`). (2) **Float**: na każdym z bloków potomnych ustawiamy `float: left;` oraz szerokości sumujące się do ≤ 100% (np. `30%`, `40%`, `30%`), a na stopce `clear: both;`. (3) **CSS Grid**: na rodzicu `display: grid; grid-template-columns: 30% 40% 30%;`.
Właściwość display: flex nadaje się bezpośrednio każdemu z trzech bloków podrzędnych, a nie ich wspólnemu rodzicowi
Po użyciu float: left na blokach głównych stopka <footer> automatycznie układa się poniżej nich bez użycia clear: both
W Flexboxie właściwość flex-direction: column układa elementy obok siebie w poziomie
12
Jakie znaczniki semantyczne języka HTML5 budują typowy układ strony w zadaniach praktycznych egzaminu zawodowego CKE INF.03 i czym różni się element blokowy (`<div>`, `<p>`, `<section>`) od liniowego (`<span>`, `<a>`, `<img>`)?
Semantyczny szkielet strony w INF.03 tworzą znaczniki: `<header>` (baner nagłówkowy), `<nav>` (nawigacja / menu), `<main>` (główna zawartość podzielona na `<section>` i `<article>`), `<aside>` (panel boczny) oraz `<footer>` (stopka z autorem/numerem zdającego). Elementy blokowe (`display: block`) zaczynają się od nowej linii i zajmują domyślnie 100% szerokości rodzica, natomiast elementy liniowe (`display: inline`) układają się w jednym wierszu obok siebie i zajmują tyle miejsca, ile ich zawartość.
W HTML5 atrybut `id` musi być unikalny w obrębie całego dokumentu (w CSS odwołujemy się do niego przez `#id`, a w JS przez `document.getElementById('id')`), natomiast atrybut `class` może być przypisany wielu elementom (`.klasa`).
Znaczniki <span> i <a> są elementami blokowymi, natomiast <div>, <header> i <footer> są elementami liniowymi
Semantyczny szkielet strony w INF.03 tworzą znaczniki: `<header>` (baner nagłówkowy), `<nav>` (nawigacja / menu), `<main>` (główna zawartość podzielona na `<section>` i `<article>`), `<aside>` (panel boczny) oraz `<footer>` (stopka z autorem/numerem zdającego). Elementy blokowe (`display: block`) zaczynają się od nowej linii i zajmują domyślnie 100% szerokości rodzica, natomiast elementy liniowe (`display: inline`) układają się w jednym wierszu obok siebie i zajmują tyle miejsca, ile ich zawartość.
Znacznik <head> służy do wyświetlania widocznego baneru nagłówkowego na górze strony internetowej
W języku HTML5 atrybut id może powtarzać się wielokrotnie na tej samej stronie dla różnych elementów
13
Jak w języku PHP bezpiecznie wykonywać zapytania z danymi od użytkownika (ochrona przed SQL Injection za pomocą Prepared Statements w `mysqli` / `PDO`) oraz do czego służą funkcje `isset()` i `!empty()`?
Funkcja `isset($_POST['pole'])` sprawdza, czy zmienna istnieje i nie jest równa `null`, a `!empty($_POST['pole'])` sprawdza dodatkowo, czy nie jest pustym ciągiem `""`. Aby całkowicie zabezpieczyć zapytanie przed **SQL Injection**, stosuje się instrukcje przygotowane (**Prepared Statements**): `$stmt = $conn->prepare('SELECT id, nazwa FROM towary WHERE cena < ? AND kategoria = ?');`, bindowanie parametrów `$stmt->bind_param('ds', $cena, $kat);` (`i` – integer, `d` – double, `s` – string) oraz `$stmt->execute();`.
Bardzo częsta pułapka w PHP na egzaminie INF.03: gdy użytkownik kliknie przycisk „Wyślij” pozostawiając puste pole `<input type="text" name="imie">`, zmienna `$_POST['imie']` ISTNIEJE i ma wartość `""`, więc `isset($_POST['imie'])` zwróci **`true`**! Aby sprawdzić, czy użytkownik faktycznie coś wpisał, należy użyć `!empty($_POST['imie'])`.
Funkcja isset() sprawdza, czy pole tekstowe formularza nie zostało wysłane jako pusty ciąg znaków ""
Funkcja `isset($_POST['pole'])` sprawdza, czy zmienna istnieje i nie jest równa `null`, a `!empty($_POST['pole'])` sprawdza dodatkowo, czy nie jest pustym ciągiem `""`. Aby całkowicie zabezpieczyć zapytanie przed **SQL Injection**, stosuje się instrukcje przygotowane (**Prepared Statements**): `$stmt = $conn->prepare('SELECT id, nazwa FROM towary WHERE cena < ? AND kategoria = ?');`, bindowanie parametrów `$stmt->bind_param('ds', $cena, $kat);` (`i` – integer, `d` – double, `s` – string) oraz `$stmt->execute();`.
Wysłanie pustego pola tekstowego <input type="text" name="login"> powoduje, że isset($_POST['login']) zwraca false
Zastosowanie metody POST zamiast GET w formularzu HTML automatycznie chroni bazę danych przed atakiem SQL Injection
14
Na czym polega pierwsza (1NF), druga (2NF) oraz trzecia postać normalna (3NF) w procesie normalizacji relacyjnych baz danych i jak realizuje się relację wiele-do-wielu (N:M)?
**1NF**: wszystkie wartości atrybutów są atomowe (niepodzielne — brak wielu wartości lub list w jednej komórce), brak powtarzających się grup kolumn i każdy wiersz jest jednoznacznie identyfikowany kluczem głównym. **2NF**: tabela jest w 1NF oraz każdy atrybut niekluczowy jest **w pełni funkcyjnie zależny od CAŁEGO klucza głównego** (brak częściowych zależności od fragmentu klucza złożonego). **3NF**: tabela jest w 2NF oraz brak **przechodnich zależności funkcyjnych** (żaden atrybut niekluczowy nie zależy od innego atrybutu niekluczowego, np. nazwa miasta nie powinna zależeć od kodu pocztowego w tabeli klientów). Relację **wiele-do-wielu (N:M)** realizuje się za pomocą **dodatkowej tabeli pośredniczącej (łączącej)** zawierającej klucze obce do obu tabel głównych.
Ważna własność teoretyczna: jeżeli tabela jest w **1NF** i jej klucz główny jest **pojedynczą kolumną** (nie jest kluczem złożonym), to tabela ta jest automatycznie również w **2NF**!
1NF usuwa zależności przechodnie między kolumnami niekluczowymi, a relację N:M tworzy się bez tabeli pośredniczącej
Tabela z pojedynczym (prostym) kluczem głównym będąca w 1NF może naruszać drugą postać normalną (2NF)
Celem normalizacji bazy danych jest maksymalne zwiększenie redundancji (nadmiarowości) danych w jednej tabeli
**1NF**: wszystkie wartości atrybutów są atomowe (niepodzielne — brak wielu wartości lub list w jednej komórce), brak powtarzających się grup kolumn i każdy wiersz jest jednoznacznie identyfikowany kluczem głównym. **2NF**: tabela jest w 1NF oraz każdy atrybut niekluczowy jest **w pełni funkcyjnie zależny od CAŁEGO klucza głównego** (brak częściowych zależności od fragmentu klucza złożonego). **3NF**: tabela jest w 2NF oraz brak **przechodnich zależności funkcyjnych** (żaden atrybut niekluczowy nie zależy od innego atrybutu niekluczowego, np. nazwa miasta nie powinna zależeć od kodu pocztowego w tabeli klientów). Relację **wiele-do-wielu (N:M)** realizuje się za pomocą **dodatkowej tabeli pośredniczącej (łączącej)** zawierającej klucze obce do obu tabel głównych.
15
Jakie zasady dostępności cyfrowej (WCAG 2.1 — Web Content Accessibility Guidelines) są sprawdzane na egzaminie zawodowym INF.03 i INF.04?
Standard WCAG opiera się na 4 filarach (**POUR**: **P**erceivable — Postrzegalność, **O**perable — Funkcjonalność, **U**nderstandable — Zrozumiałość, **R**obust — Solidność). W praktyce kodu HTML/CSS oznacza to: obowiązkowy atrybut **`alt`** w każdym znaczniku `<img>`, deklarację języka dokumentu `<html lang="pl">`, powiązanie każdego pola formularza z etykietą `<label for="...">`, logiczną hierarchię nagłówków (`<h1>` -> `<h2>` -> `<h3>`), pełną obsługę nawigacji samą klawiaturą (`Tab`, widoczny `:focus`) oraz odpowiedni kontrast kolorystyczny tekstu do tła (**minimum 4.5:1** dla normalnego tekstu na poziomie **AA** oraz 7:1 na poziomie AAA).
Trzy poziomy zgodności z WCAG to od podstawowego do najwyższego: **A**, **AA** (standard prawnie wymagany dla podmiotów publicznych w Polsce i UE) oraz **AAA**.
Minimalny wymagany kontrast tekstu na poziomie WCAG AA wynosi 1.5:1, a atrybut alt w obrazkach jest niezalecany
Standard WCAG opiera się na 4 filarach (**POUR**: **P**erceivable — Postrzegalność, **O**perable — Funkcjonalność, **U**nderstandable — Zrozumiałość, **R**obust — Solidność). W praktyce kodu HTML/CSS oznacza to: obowiązkowy atrybut **`alt`** w każdym znaczniku `<img>`, deklarację języka dokumentu `<html lang="pl">`, powiązanie każdego pola formularza z etykietą `<label for="...">`, logiczną hierarchię nagłówków (`<h1>` -> `<h2>` -> `<h3>`), pełną obsługę nawigacji samą klawiaturą (`Tab`, widoczny `:focus`) oraz odpowiedni kontrast kolorystyczny tekstu do tła (**minimum 4.5:1** dla normalnego tekstu na poziomie **AA** oraz 7:1 na poziomie AAA).
Zgodnie z WCAG informacje na stronie powinny być przekazywane wyłącznie za pomocą samego koloru (np. czerwona ramka bez komunikatu tekstowego)
Poziom A jest najwyższym i najbardziej rygorystycznym poziomem dostępności WCAG, wyższym niż AAA
16
Jak w CSS3 tworzy się responsywne strony internetowe (RWD — Responsive Web Design) za pomocą zapytań o media (`@media`) oraz jednostek względnych (`%`, `vw`, `vh`, `rem`, `em`)?
Responsywność wymaga w sekcji `<head>` znacznika `<meta name="viewport" content="width=device-width, initial-scale=1.0">` oraz reguł `@media`, np. `@media screen and (max-width: 768px) { ... }` (styl aplikowany, gdy szerokość ekranu jest ≤ 768 px) lub `@media (min-width: 1024px) { ... }`. Jednostki względne: `%` (procent wymiaru rodzica), `vw` / `vh` (1% szerokości / wysokości okna przeglądarki — viewportu), `em` (wielokrotność rozmiaru czcionki elementu/rodzica), `rem` (wielokrotność rozmiaru czcionki elementu głównego `<html>`).
W zadaniach INF.03 często pojawia się wymóg ukrycia lub zmiany układu bloków dla mniejszych rozdzielczości za pomocą `@media (max-width: 800px) { main { flex-direction: column; } }`.
Reguła @media (max-width: 600px) stosuje podane style wyłącznie na ekranach o szerokości większej niż 600 pikseli
Responsywność wymaga w sekcji `<head>` znacznika `<meta name="viewport" content="width=device-width, initial-scale=1.0">` oraz reguł `@media`, np. `@media screen and (max-width: 768px) { ... }` (styl aplikowany, gdy szerokość ekranu jest ≤ 768 px) lub `@media (min-width: 1024px) { ... }`. Jednostki względne: `%` (procent wymiaru rodzica), `vw` / `vh` (1% szerokości / wysokości okna przeglądarki — viewportu), `em` (wielokrotność rozmiaru czcionki elementu/rodzica), `rem` (wielokrotność rozmiaru czcionki elementu głównego `<html>`).
Jednostka 100vh oznacza zawsze 100 pikseli wysokości na urządzeniach mobilnych
Zapytania @media można pisać wyłącznie w osobnym pliku JavaScript, a nie w pliku .css
17
Jakie znaczenie mają własności transakcji bazodanowych określane akronimem ACID (Atomicity, Consistency, Isolation, Durability)?
**Atomicity (Atomowość / Niepodzielność)**: transakcja wykonuje się w całości albo wcale („wszystko albo nic” — `COMMIT` zatwierdza całość, `ROLLBACK` cofa wszystkie operacje). **Consistency (Spójność)**: transakcja przeprowadza bazę z jednego stanu spójnego (spełniającego wszystkie więzy integralności) w inny stan spójny. **Isolation (Izolacja)**: współbieżnie wykonywane transakcje są od siebie odseparowane i nie zakłócają swoich wyników pośrednich. **Durability (Trwałość)**: po zatwierdzeniu transakcji (`COMMIT`) jej skutki są trwale zapisane nawet w razie awarii zasilania lub restartu serwera.
W MySQL/MariaDB domyślnym silnikiem składowania obsługującym transakcje **ACID**, blokowanie na poziomie wierszy oraz klucze obce (**FOREIGN KEY**) jest **InnoDB** (natomiast starszy silnik **MyISAM** nie obsługuje ani transakcji, ani kluczy obcych).
Atomicity oznacza, że każda kolumna zawiera wartości atomowe (1NF), a Durability oznacza brak limitu rozmiaru bazy
Silnik tabel MyISAM w MySQL w pełni obsługuje transakcje ACID oraz klucze obce, w przeciwieństwie do silnika InnoDB
**Atomicity (Atomowość / Niepodzielność)**: transakcja wykonuje się w całości albo wcale („wszystko albo nic” — `COMMIT` zatwierdza całość, `ROLLBACK` cofa wszystkie operacje). **Consistency (Spójność)**: transakcja przeprowadza bazę z jednego stanu spójnego (spełniającego wszystkie więzy integralności) w inny stan spójny. **Isolation (Izolacja)**: współbieżnie wykonywane transakcje są od siebie odseparowane i nie zakłócają swoich wyników pośrednich. **Durability (Trwałość)**: po zatwierdzeniu transakcji (`COMMIT`) jej skutki są trwale zapisane nawet w razie awarii zasilania lub restartu serwera.
Polecenie ROLLBACK trwale zatwierdza zmiany wprowadzone w bieżącej transakcji
18
Jak działają funkcje agregujące `COUNT()`, `SUM()`, `AVG()`, `MIN()`, `MAX()` oraz funkcje tekstowe i daty (`CONCAT()`, `SUBSTRING()`, `UPPER()`, `LOWER()`, `ROUND()`, `NOW()`, `CURDATE()`, `YEAR()`) w SQL?
`COUNT(*)` zlicza wszystkie wiersze w grupie (łącznie z wierszami zawierającymi `NULL`), natomiast `COUNT(kolumna)` zlicza tylko wiersze, w których dana kolumna ma wartość różną od `NULL` (`COUNT(DISTINCT kol)` zlicza wartości unikalne). `SUM`, `AVG`, `MIN`, `MAX` obliczają sumę, średnią, minimum i maksimum (ignorując `NULL`). `CONCAT(imie, ' ', nazwisko)` łączy napisy, `ROUND(liczba, 2)` zaokrągla do 2 miejsc po przecinku, `CURDATE()` zwraca bieżącą datę (`RRRR-MM-DD`), a `YEAR(data)` wyciąga z daty sam rok.
Uwaga na egzamin INF.03: w MySQL/MariaDB operator `+` między dwoma napisami próbuje dodać je jako liczby (co dla tekstów daje `0`), dlatego do łączenia napisów w zapytaniu SQL używa się funkcji **`CONCAT(kol1, ' ', kol2)`**!
Funkcja COUNT(*) pomija wszystkie wiersze, w których jakakolwiek kolumna ma wartość NULL
Do łączenia imienia i nazwiska ze spacją w standardowym MySQL używa się operatora plusa: SELECT imie + ' ' + nazwisko
`COUNT(*)` zlicza wszystkie wiersze w grupie (łącznie z wierszami zawierającymi `NULL`), natomiast `COUNT(kolumna)` zlicza tylko wiersze, w których dana kolumna ma wartość różną od `NULL` (`COUNT(DISTINCT kol)` zlicza wartości unikalne). `SUM`, `AVG`, `MIN`, `MAX` obliczają sumę, średnią, minimum i maksimum (ignorując `NULL`). `CONCAT(imie, ' ', nazwisko)` łączy napisy, `ROUND(liczba, 2)` zaokrągla do 2 miejsc po przecinku, `CURDATE()` zwraca bieżącą datę (`RRRR-MM-DD`), a `YEAR(data)` wyciąga z daty sam rok.
Funkcja AVG(cena) traktuje wiersze z wartością NULL jako zera, obniżając średnią arytmetyczną
19
Jak w języku PHP utworzyć, odczytać i usunąć ciasteczko (cookie) oraz jak zainicjować i obsłużyć sesję użytkownika (`$_SESSION`)?
**Ciasteczko (przechowywane po stronie przeglądarki klienta)**: tworzenie `setcookie('nazwa', 'wartosc', time() + 3600);` (ważne przez 1 godzinę = 3600 s), odczyt z tablicy superglobalnej `$_COOKIE['nazwa']`, usunięcie przez ustawienie czasu w przeszłości `setcookie('nazwa', '', time() - 3600);`. **Sesja (przechowywana po stronie serwera)**: na samym początku skryptu należy wywołać `session_start();`, dane zapisuje i odczytuje się w tablicy `$_SESSION['uzytkownik'] = 'Jan';`, a sesję kończy przez `session_unset();` i `session_destroy();`.
W zadaniach INF.03 z licznikiem odwiedzin lub komunikatem „Dzień dobry / Witaj ponownie” pamiętaj, że trzeci argument `setcookie()` to znacznik czasu uniksowego wygaśnięcia (`time() + 3600` dla 1 godziny, `time() + 7200` dla 2 godzin) i że ciasteczko pojawia się w `$_COOKIE` dopiero przy kolejnym żądaniu HTTP (odświeżeniu strony).
Dane z tablicy $_SESSION są zapisywane w pliku tekstowym na dysku użytkownika, a ciasteczka tworzy się funkcją create_cookie()
W trzecim argumencie funkcji setcookie() podaje się wyłącznie liczbę sekund (np. 3600) bez dodawania bieżącego czasu time()
**Ciasteczko (przechowywane po stronie przeglądarki klienta)**: tworzenie `setcookie('nazwa', 'wartosc', time() + 3600);` (ważne przez 1 godzinę = 3600 s), odczyt z tablicy superglobalnej `$_COOKIE['nazwa']`, usunięcie przez ustawienie czasu w przeszłości `setcookie('nazwa', '', time() - 3600);`. **Sesja (przechowywana po stronie serwera)**: na samym początku skryptu należy wywołać `session_start();`, dane zapisuje i odczytuje się w tablicy `$_SESSION['uzytkownik'] = 'Jan';`, a sesję kończy przez `session_unset();` i `session_destroy();`.
Wartość ustawiona przez setcookie() jest natychmiast dostępna w tablicy $_COOKIE w tym samym przebiegu skryptu bez przeładowania strony
20
Na jakie podgrupy dzielą się instrukcje języka SQL: `DDL`, `DML`, `DQL` oraz `DCL` i jakie polecenia należą do każdej z nich?
**DDL (Data Definition Language — definiowanie struktury bazy)**: `CREATE`, `ALTER`, `DROP`, `TRUNCATE`, `RENAME`. **DML (Data Manipulation Language — manipulowanie danymi w tabelach)**: `INSERT`, `UPDATE`, `DELETE`. **DQL (Data Query Language — odpytywanie danych)**: `SELECT`. **DCL (Data Control Language — kontrola uprawnień)**: `GRANT`, `REVOKE` (oraz TCL do transakcji: `COMMIT`, `ROLLBACK`, `SAVEPOINT`).
Rozróżnienie między `ALTER TABLE` (DDL — zmiana struktury tabeli, np. dodanie kolumny) a `UPDATE` (DML — zmiana wartości danych w istniejących wierszach) oraz między `DROP` / `TRUNCATE` (DDL) a `DELETE` (DML) to pewniak na części pisemnej INF.03.
Polecenie SELECT należy do grupy DDL, a polecenia CREATE TABLE i ALTER TABLE należą do grupy DML
**DDL (Data Definition Language — definiowanie struktury bazy)**: `CREATE`, `ALTER`, `DROP`, `TRUNCATE`, `RENAME`. **DML (Data Manipulation Language — manipulowanie danymi w tabelach)**: `INSERT`, `UPDATE`, `DELETE`. **DQL (Data Query Language — odpytywanie danych)**: `SELECT`. **DCL (Data Control Language — kontrola uprawnień)**: `GRANT`, `REVOKE` (oraz TCL do transakcji: `COMMIT`, `ROLLBACK`, `SAVEPOINT`).
Polecenie UPDATE służy do zmiany typu kolumny w tabeli, natomiast ALTER TABLE służy do zmiany wartości w wierszach
Polecenie REVOKE należy do grupy DML i służy do cofania ostatniego polecenia INSERT
21
Jak w HTML5 zbudować tabelę z komórkami scalonymi w poziomie i w pionie oraz listę numerowaną, punktowaną i definicyjną?
Tabelę tworzy znacznik `<table>` z wierszami `<tr>`, komórkami nagłówkowymi `<th>` i komórkami danych `<td>`. Scalanie komórek w poziomie (przez kilka kolumn) realizuje atrybut `colspan="n"`, a scalanie w pionie (przez kilka wierszy) atrybut `rowspan="n"`. Lista punktowana (nieuporządkowana) to `<ul>` z elementami `<li>`, lista numerowana (uporządkowana) to `<ol>` z elementami `<li>`, a lista definicyjna to `<dl>` zawierająca pojęcia `<dt>` i opisy `<dd>`.
Pamiętaj: po dodaniu `colspan="2"` w pierwszym `<td>` należy usunąć sąsiedni znacznik `<td>` w tym wierszu, aby łączna liczba kolumn w wierszu się zgadzała.
Atrybut colspan scala komórki w pionie, a rowspan scala komórki w poziomie; listę numerowaną tworzy znacznik <ul>
Wiersze tabeli oznacza się znacznikiem <tc>, a kolumny znacznikiem <trow>
Scalając 2 komórki w poziomie za pomocą colspan="2", w tym samym wierszu pozostawia się obie pierwotne komórki <td>
Tabelę tworzy znacznik `<table>` z wierszami `<tr>`, komórkami nagłówkowymi `<th>` i komórkami danych `<td>`. Scalanie komórek w poziomie (przez kilka kolumn) realizuje atrybut `colspan="n"`, a scalanie w pionie (przez kilka wierszy) atrybut `rowspan="n"`. Lista punktowana (nieuporządkowana) to `<ul>` z elementami `<li>`, lista numerowana (uporządkowana) to `<ol>` z elementami `<li>`, a lista definicyjna to `<dl>` zawierająca pojęcia `<dt>` i opisy `<dd>`.
22
Jak działają operatory `BETWEEN ... AND ...`, `IN (...)`, `LIKE` (ze znakami wieloznacznymi `%` oraz `_`) oraz sprawdzanie wartości pustych `IS NULL` / `IS NOT NULL` w SQL?
`BETWEEN a AND b` sprawdza przynależność do przedziału domkniętego obustronnie (`>= a AND <= b`). `IN (w1, w2, w3)` sprawdza, czy wartość należy do podanego zbioru. W operatorze wzorca tekstowego `LIKE`: znak procentu **`%`** zastępuje dowolny ciąg znaków (także pusty — 0, 1 lub więcej znaków), a znak podkreślenia **`_`** zastępuje dokładnie **jeden dowolny znak**. Wartości `NULL` (brak wartości) nigdy nie porównuje się znakiem `= NULL` ani `!= NULL`, lecz wyłącznie operatorami **`IS NULL`** oraz **`IS NOT NULL`**.
Wzorzec `LIKE 'A_'` dopasuje wyłącznie wyrazy dwuliterowe zaczynające się na `A` (np. `AS`, `ul`), natomiast wszystkie wyrazy zaczynające się na `A` o dowolnej długości dopasuje wzorzec `LIKE 'A%'`.
W operatorze LIKE gwiazdka * zastępuje dowolny ciąg znaków, znak ? zastępuje jeden znak, a wartości puste sprawdza się warunkiem kolumna = NULL
Operator BETWEEN 10 AND 20 nie uwzględnia wartości brzegowych 10 oraz 20
Wzorzec LIKE 'A_' wyszuka wszystkie wyrazy zaczynające się na literę A o dowolnej długości
`BETWEEN a AND b` sprawdza przynależność do przedziału domkniętego obustronnie (`>= a AND <= b`). `IN (w1, w2, w3)` sprawdza, czy wartość należy do podanego zbioru. W operatorze wzorca tekstowego `LIKE`: znak procentu **`%`** zastępuje dowolny ciąg znaków (także pusty — 0, 1 lub więcej znaków), a znak podkreślenia **`_`** zastępuje dokładnie **jeden dowolny znak**. Wartości `NULL` (brak wartości) nigdy nie porównuje się znakiem `= NULL` ani `!= NULL`, lecz wyłącznie operatorami **`IS NULL`** oraz **`IS NOT NULL`**.
23
Czym różnią się złączenia tabel `INNER JOIN`, `LEFT JOIN` (`LEFT OUTER JOIN`) oraz `RIGHT JOIN` (`RIGHT OUTER JOIN`) w bazach danych MySQL/MariaDB?
**`INNER JOIN` (złączenie wewnętrzne)**: zwraca tylko te wiersze, dla których warunek złączenia (`ON a.klucz = b.klucz`) jest spełniony w OBU łączonych tabelach. **`LEFT JOIN` (złączenie zewnętrzne lewostronne)**: zwraca WSZYSTKIE wiersze z tabeli po lewej stronie (wymienionej w `FROM`) oraz dopasowane wiersze z tabeli prawej, a w przypadku braku dopasowania wstawia w kolumnach tabeli prawej wartości `NULL`. **`RIGHT JOIN`**: zwraca wszystkie wiersze z tabeli prawej oraz dopasowane z lewej (lub `NULL` przy braku dopasowania).
Aby w SQL znaleźć rekordy z tabeli lewej, które NIE mają żadnych powiązanych rekordów w tabeli prawej (np. klientów bez żadnego zamówienia), stosuje się wzorzec: `SELECT k.* FROM klienci k LEFT JOIN zamowienia z ON k.id = z.klient_id WHERE z.id IS NULL;`.
INNER JOIN zwraca wszystkie wiersze z obu tabel, uzupełniając brakujące powiązania wartościami NULL
Zapis FROM klienci, zamowienia bez klauzuli WHERE wykonuje złączenie INNER JOIN po kluczu głównym
**`INNER JOIN` (złączenie wewnętrzne)**: zwraca tylko te wiersze, dla których warunek złączenia (`ON a.klucz = b.klucz`) jest spełniony w OBU łączonych tabelach. **`LEFT JOIN` (złączenie zewnętrzne lewostronne)**: zwraca WSZYSTKIE wiersze z tabeli po lewej stronie (wymienionej w `FROM`) oraz dopasowane wiersze z tabeli prawej, a w przypadku braku dopasowania wstawia w kolumnach tabeli prawej wartości `NULL`. **`RIGHT JOIN`**: zwraca wszystkie wiersze z tabeli prawej oraz dopasowane z lewej (lub `NULL` przy braku dopasowania).
W MySQL nie można połączyć ze sobą więcej niż dwóch tabel w jednym zapytaniu SELECT
24
Na czym polega atak XSS (Cross-Site Scripting) oraz CSRF (Cross-Site Request Forgery) w aplikacjach internetowych i jak się przed nimi bronić w PHP i JavaScript?
**XSS (Cross-Site Scripting)** polega na wstrzyknięciu złośliwego kodu JavaScript (np. `<script>...</script>`) przez formularz lub parametr URL, który następnie zostaje wykonany w przeglądarce innych użytkowników odwiedzających stronę; obroną w PHP jest filtrowanie wyjścia funkcją **`htmlspecialchars($tekst, ENT_QUOTES, 'UTF-8')`** (zamieniającą `<`, `>`, `"`, `'` na encje HTML `<`, `>`) oraz stosowanie `.textContent` zamiast `.innerHTML` w JS. **CSRF (Cross-Site Request Forgery)** wymusza wykonanie nieautoryzowanej akcji w imieniu zalogowanego użytkownika; obroną są jednorazowe **tokeny CSRF** w formularzach oraz atrybut ciasteczka `SameSite=Strict` / `Lax`.
Do bezpiecznego przechowywania haseł użytkowników w bazie danych w języku PHP NIE stosuje się już przestarzałego `md5()` ani `sha1()`, lecz natywną funkcję **`password_hash($haslo, PASSWORD_DEFAULT)`** (korzystającą z algorytmu bcrypt/Argon2 z losową solą) oraz weryfikację przez **`password_verify($podane_haslo, $hash_z_bazy)`**.
Atak XSS polega na wstrzyknięciu złośliwego zapytania SQL bezpośrednio do bazy danych MySQL
Funkcja htmlspecialchars() służy do szyfrowania haseł użytkowników w bazie danych zamiast password_hash()
**XSS (Cross-Site Scripting)** polega na wstrzyknięciu złośliwego kodu JavaScript (np. `<script>...</script>`) przez formularz lub parametr URL, który następnie zostaje wykonany w przeglądarce innych użytkowników odwiedzających stronę; obroną w PHP jest filtrowanie wyjścia funkcją **`htmlspecialchars($tekst, ENT_QUOTES, 'UTF-8')`** (zamieniającą `<`, `>`, `"`, `'` na encje HTML `<`, `>`) oraz stosowanie `.textContent` zamiast `.innerHTML` w JS. **CSRF (Cross-Site Request Forgery)** wymusza wykonanie nieautoryzowanej akcji w imieniu zalogowanego użytkownika; obroną są jednorazowe **tokeny CSRF** w formularzach oraz atrybut ciasteczka `SameSite=Strict` / `Lax`.
Stosowanie protokołu HTTPS automatycznie eliminuje podatność aplikacji na ataki XSS oraz SQL Injection
25
Czym różni się metoda `GET` od metody `POST` w formularzu HTML (`<form action="skrypt.php" method="...">`) i jak powiązać etykietę `<label>` z polem `<input>`?
Metoda **GET** dołącza dane formularza w sposób jawny do adresu URL po znaku zapytania (`?pole1=wartosc1&pole2=wartosc2`), ma ograniczoną długość i służy do pobierania/filtrowania danych (w PHP tablica `$_GET`). Metoda **POST** przesyła dane w ciele (body) żądania HTTP (niewidoczne w pasku adresu), nie ma limitu długości URL, obsługuje przesyłanie plików (`enctype="multipart/form-data"`) i służy do logowania oraz modyfikacji bazy danych (w PHP tablica `$_POST`). Etykietę `<label for="id_pola">` wiąże się z atrybutem `id` pola `<input id="id_pola" name="nazwa_dla_php">`.
Kluczowe rozróżnienie w INF.03: JavaScript (`getElementById`) szuka elementu po atrybucie **`id`**, natomiast serwer PHP (`$_POST['...']`, `$_GET['...']`) odbiera dane wyłącznie z pól posiadających atrybut **`name`**!
Metoda GET ukrywa hasła w ciele żądania HTTP, a metoda POST dokleja wszystkie pola formularza do paska adresu URL
Skrypt PHP odczytuje przesłane dane formularza na podstawie atrybutu id znacznika <input>, a nie atrybutu name
Aby przesłać formularz do skryptu PHP, przycisk musi mieć typ <button type="button"> zamiast <button type="submit">
Metoda **GET** dołącza dane formularza w sposób jawny do adresu URL po znaku zapytania (`?pole1=wartosc1&pole2=wartosc2`), ma ograniczoną długość i służy do pobierania/filtrowania danych (w PHP tablica `$_GET`). Metoda **POST** przesyła dane w ciele (body) żądania HTTP (niewidoczne w pasku adresu), nie ma limitu długości URL, obsługuje przesyłanie plików (`enctype="multipart/form-data"`) i służy do logowania oraz modyfikacji bazy danych (w PHP tablica `$_POST`). Etykietę `<label for="id_pola">` wiąże się z atrybutem `id` pola `<input id="id_pola" name="nazwa_dla_php">`.
26
Jak działa obiekt `Math` oraz praca z tablicami (`Array`) i ciągami znaków (`String`) w języku JavaScript w zadaniach egzaminacyjnych INF.03?
Obiekt `Math`: `Math.round(x)` (zaokrąglenie matematyczne do najbliższej całkowitej), `Math.ceil(x)` (zaokrąglenie w górę — np. przy liczeniu puszek farby lub paczek płytek potrzebnych do pomalowania/wyłożenia powierzchni!), `Math.floor(x)` (zaokrąglenie w dół), `Math.sqrt(x)` (pierwiastek), `Math.pow(x, y)` lub `x ** y` (potęga), `Math.random()` (losowa z od 0 (włącznie) do 1 (wyłącznie)). Na liczbie metoda `liczba.toFixed(2)` formatuje wynik do 2 miejsc po przecinku. Na tablicach: `.push()` (dodaje na koniec), `.pop()` (usuwa z końca), `.length` (długość tablicy lub napisu).
W zadaniach praktycznych CKE INF.03 typu „Oblicz ile puszek farby (lub opakowań paneli) potrzeba na pomalowanie powierzchni” zawsze należy użyć **`Math.ceil(powierzchnia / wydajnosc_puszki)`**, ponieważ nie można kupić ułamkowej części puszki, a zaokrąglenie w dół spowodowałoby brak materiału!
Funkcja Math.ceil(4.1) zwraca wartość 4, a Math.floor(4.9) zwraca wartość 5
Długość tablicy i ciągu znaków w JavaScript sprawdza się wywołaniem metody tablica.count()
Obiekt `Math`: `Math.round(x)` (zaokrąglenie matematyczne do najbliższej całkowitej), `Math.ceil(x)` (zaokrąglenie w górę — np. przy liczeniu puszek farby lub paczek płytek potrzebnych do pomalowania/wyłożenia powierzchni!), `Math.floor(x)` (zaokrąglenie w dół), `Math.sqrt(x)` (pierwiastek), `Math.pow(x, y)` lub `x ** y` (potęga), `Math.random()` (losowa z od 0 (włącznie) do 1 (wyłącznie)). Na liczbie metoda `liczba.toFixed(2)` formatuje wynik do 2 miejsc po przecinku. Na tablicach: `.push()` (dodaje na koniec), `.pop()` (usuwa z końca), `.length` (długość tablicy lub napisu).
Funkcja Math.random() zwraca domyślnie liczbę całkowitą z przedziału od 1 do 100
27
Jakie kody stanu odpowiedzi protokołu HTTP (`200`, `301`, `302`, `304`, `400`, `401`, `403`, `404`, `500`, `502`, `503`) powinien znać zdający egzamin INF.03 i INF.04?
Klasy kodów HTTP: **2xx (Sukces)**: `200 OK` (żądanie wykonane pomyślnie), `201 Created`; **3xx (Przekierowania)**: `301 Moved Permanently` (stałe przekierowanie), `302 Found` (tymczasowe przekierowanie), `304 Not Modified` (pobrano z pamięci podręcznej przeglądarki); **4xx (Błąd po stronie klienta)**: `400 Bad Request`, `401 Unauthorized` (brak uwierzytelnienia), `403 Forbidden` (brak uprawnień dostępu do zasobu mimo znanego żądania), `404 Not Found` (nie znaleziono zasobu pod podanym URL); **5xx (Błąd po stronie serwera)**: `500 Internal Server Error` (błąd wewnętrzny serwera/skryptu PHP), `502 Bad Gateway`, `503 Service Unavailable`.
Gdy w pakiecie XAMPP (Apache + PHP) skrypt PHP zawiera błąd krytyczny lub na serwerze brakuje uprawnień do katalogu, przeglądarka otrzymuje odpowiednio kod `500` lub `403`, a gdy wpiszemy błędną nazwę pliku w pasku adresu lub w atrybucie `action` formularza — kod `404`.
Kod 404 oznacza błąd wewnętrzny skryptu PHP po stronie serwera, a kod 500 oznacza nieistniejący adres URL
Kod 403 oznacza przekierowanie na inną stronę, a kod 301 oznacza błąd autoryzacji
Kody z grupy 4xx oznaczają awarię sprzętową serwera bazy danych
Klasy kodów HTTP: **2xx (Sukces)**: `200 OK` (żądanie wykonane pomyślnie), `201 Created`; **3xx (Przekierowania)**: `301 Moved Permanently` (stałe przekierowanie), `302 Found` (tymczasowe przekierowanie), `304 Not Modified` (pobrano z pamięci podręcznej przeglądarki); **4xx (Błąd po stronie klienta)**: `400 Bad Request`, `401 Unauthorized` (brak uwierzytelnienia), `403 Forbidden` (brak uprawnień dostępu do zasobu mimo znanego żądania), `404 Not Found` (nie znaleziono zasobu pod podanym URL); **5xx (Błąd po stronie serwera)**: `500 Internal Server Error` (błąd wewnętrzny serwera/skryptu PHP), `502 Bad Gateway`, `503 Service Unavailable`.
28
Jak w SQL tworzyć widoki (`CREATE VIEW`), podzapytania (`Subqueries`) oraz łączyć wyniki dwóch zapytań operatorem `UNION` vs `UNION ALL`?
**Widok (`VIEW`)** to zapisane w bazie nazwane zapytanie `SELECT` zachowujące się jak wirtualna tabela: `CREATE VIEW widok_aktywnych AS SELECT imie, nazwisko FROM klienci WHERE aktywny = 1;`. **Podzapytanie** to zapytanie zagnieżdżone w nawiasach wewnątrz innego zapytania (np. `SELECT nazwa, cena FROM towary WHERE cena > (SELECT AVG(cena) FROM towary);`). Operator **`UNION`** łączy wyniki dwóch zapytań (o tej samej liczbie i zgodnych typach kolumn) i **usuwa duplikaty wierszy**, natomiast **`UNION ALL`** łączy wyniki bez usuwania duplikatów (działa szybciej).
W zadaniach egzaminacyjnych INF.03 podzapytania są niezbędne wtedy, gdy chcemy wypisać wiersze o wartości maksymalnej/minimalnej lub większej od średniej bez użycia `LIMIT 1`, np. `SELECT imie, pensja FROM pracownicy WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);`.
Operator UNION pozostawia wszystkie zduplikowane wiersze, natomiast UNION ALL usuwa duplikaty
Widok utworzony przez CREATE VIEW kopiuje fizycznie wszystkie dane do nowej tabeli na dysku i nie widzi późniejszych zmian w tabeli źródłowej
W zapytaniach łączonych operatorem UNION liczba kolumn w pierwszym i drugim SELECT może być dowolnie różna
**Widok (`VIEW`)** to zapisane w bazie nazwane zapytanie `SELECT` zachowujące się jak wirtualna tabela: `CREATE VIEW widok_aktywnych AS SELECT imie, nazwisko FROM klienci WHERE aktywny = 1;`. **Podzapytanie** to zapytanie zagnieżdżone w nawiasach wewnątrz innego zapytania (np. `SELECT nazwa, cena FROM towary WHERE cena > (SELECT AVG(cena) FROM towary);`). Operator **`UNION`** łączy wyniki dwóch zapytań (o tej samej liczbie i zgodnych typach kolumn) i **usuwa duplikaty wierszy**, natomiast **`UNION ALL`** łączy wyniki bez usuwania duplikatów (działa szybciej).
29
Czym różni się operator porównania luźnego `==` od operatora porównania ścisłego `===` w językach JavaScript oraz PHP i jak działają pętle `for`, `while`, `do...while` oraz `foreach`?
Operator `==` porównuje same wartości po wykonaniu niejawnej konwersji typów (koercji, np. `5 == "5"` daje `true`, `0 == false` daje `true`), natomiast operator ścisłego porównania **`===`** sprawdza zarówno **wartość, jak i typ danych** bez konwersji (`5 === "5"` daje `false`, podobnie `!==`). Pętla `while` sprawdza warunek przed pierwszym obrotem (może wykonać się 0 razy), a `do { ... } while (warunek);` sprawdza warunek na końcu (wykona się **co najmniej 1 raz**). W PHP pętla `foreach ($tablica as $klucz => $wartosc)` służy do wygodnej iteracji po tablicach.
W języku PHP wszystkie nazwy zmiennych zaczynają się od znaku dolara `
CKE Egzamin Zawodowy INF.03 — Bazy danych SQL (MySQL/MariaDB), PHP, JavaScript (DOM), HTML5 i CSS3 — Flashcards & Practice Quiz | Flashcards World
(np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo \"Wynik: \" . $wynik . \" zł\";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wyrażenie 5 === \"5\" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę"},{"@type":"Answer","text":"Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy"},{"@type":"Answer","text":"W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $"}]},{"@type":"Question","position":30,"name":"Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.","comment":{"@type":"Comment","text":"Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`!"}},"suggestedAnswer":[{"@type":"Answer","text":"Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY"},{"@type":"Answer","text":"Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep"},{"@type":"Answer","text":"Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika"}]},{"@type":"Question","position":31,"name":"Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `\u003chtml>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.","comment":{"@type":"Comment","text":"Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**."}},"suggestedAnswer":[{"@type":"Answer","text":"position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie"},{"@type":"Answer","text":"Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static"},{"@type":"Answer","text":"Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute"}]},{"@type":"Question","position":32,"name":"Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`\u003cinput>`, `\u003cselect>`) i wstawić wynik do akapitu lub bloku `\u003cdiv>`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`\u003cinput>`, `\u003cselect>`, `\u003ctextarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `\u003cinput type=\"checkbox\">` lub `type=\"radio\"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`\u003cp>`, `\u003cdiv>`, `\u003cspan>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).","comment":{"@type":"Comment","text":"Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`\"2\" + \"3\" = \"23\"`)!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wartość pola \u003cinput> odczytuje się właściwością .innerHTML, a zawartość bloku \u003cdiv> właściwością .value"},{"@type":"Answer","text":"Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML"},{"@type":"Answer","text":"Właściwość .value na polu \u003cinput type=\"number\"> zwraca zawsze zmienną typu number, a nie string"}]}]}
(np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo "Wynik: " . $wynik . " zł";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``!
Wyrażenie 5 === "5" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę
Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy
Operator `==` porównuje same wartości po wykonaniu niejawnej konwersji typów (koercji, np. `5 == "5"` daje `true`, `0 == false` daje `true`), natomiast operator ścisłego porównania **`===`** sprawdza zarówno **wartość, jak i typ danych** bez konwersji (`5 === "5"` daje `false`, podobnie `!==`). Pętla `while` sprawdza warunek przed pierwszym obrotem (może wykonać się 0 razy), a `do { ... } while (warunek);` sprawdza warunek na końcu (wykona się **co najmniej 1 raz**). W PHP pętla `foreach ($tablica as $klucz => $wartosc)` służy do wygodnej iteracji po tablicach.
W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $
30
Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`?
Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.
Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`!
Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY
Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep
Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.
Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika
31
Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`?
`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `<html>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.
Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**.
position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie
Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static
Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute
`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `<html>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.
32
Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`<input>`, `<select>`) i wstawić wynik do akapitu lub bloku `<div>`?
Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`<input>`, `<select>`, `<textarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `<input type="checkbox">` lub `type="radio"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`<p>`, `<div>`, `<span>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).
Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`"2" + "3" = "23"`)!
Wartość pola <input> odczytuje się właściwością .innerHTML, a zawartość bloku <div> właściwością .value
Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`<input>`, `<select>`, `<textarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `<input type="checkbox">` lub `type="radio"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`<p>`, `<div>`, `<span>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).
Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML
Właściwość .value na polu <input type="number"> zwraca zawsze zmienną typu number, a nie string
CKE Egzamin Zawodowy INF.03 — Bazy danych SQL (MySQL/MariaDB), PHP, JavaScript (DOM), HTML5 i CSS3 — Flashcards & Practice Quiz | Flashcards World
(np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo \"Wynik: \" . $wynik . \" zł\";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wyrażenie 5 === \"5\" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę"},{"@type":"Answer","text":"Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy"},{"@type":"Answer","text":"W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $"}]},{"@type":"Question","position":30,"name":"Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.","comment":{"@type":"Comment","text":"Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`!"}},"suggestedAnswer":[{"@type":"Answer","text":"Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY"},{"@type":"Answer","text":"Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep"},{"@type":"Answer","text":"Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika"}]},{"@type":"Question","position":31,"name":"Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `\u003chtml>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.","comment":{"@type":"Comment","text":"Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**."}},"suggestedAnswer":[{"@type":"Answer","text":"position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie"},{"@type":"Answer","text":"Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static"},{"@type":"Answer","text":"Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute"}]},{"@type":"Question","position":32,"name":"Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`\u003cinput>`, `\u003cselect>`) i wstawić wynik do akapitu lub bloku `\u003cdiv>`?","eduQuestionType":"Multiple choice","acceptedAnswer":{"@type":"Answer","text":"Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`\u003cinput>`, `\u003cselect>`, `\u003ctextarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `\u003cinput type=\"checkbox\">` lub `type=\"radio\"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`\u003cp>`, `\u003cdiv>`, `\u003cspan>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).","comment":{"@type":"Comment","text":"Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`\"2\" + \"3\" = \"23\"`)!"}},"suggestedAnswer":[{"@type":"Answer","text":"Wartość pola \u003cinput> odczytuje się właściwością .innerHTML, a zawartość bloku \u003cdiv> właściwością .value"},{"@type":"Answer","text":"Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML"},{"@type":"Answer","text":"Właściwość .value na polu \u003cinput type=\"number\"> zwraca zawsze zmienną typu number, a nie string"}]}]}
(np. `$liczba = 10;`), a operatorem łączenia (konkatenacji) ciągów znaków w PHP jest **kropka `.`** (np. `echo \"Wynik: \" . $wynik . \" zł\";`), podczas gdy w JavaScript do łączenia napisów służy plus `+` lub literały szablonowe `` `Wynik: ${wynik} zł` ``!","other_answers":["Wyrażenie 5 === \"5\" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę","Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy","W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $"],"answers":[{"answer":"Wyrażenie 5 === \"5\" w JavaScript i PHP zwraca wartość true, ponieważ obie strony reprezentują piątkę","isCorrect":false},{"answer":"Pętla while zawsze wykonuje swoje ciało przynajmniej jeden raz, nawet gdy warunek od początku jest fałszywy","isCorrect":false},{"answer":"Operator `==` porównuje same wartości po wykonaniu niejawnej konwersji typów (koercji, np. `5 == \"5\"` daje `true`, `0 == false` daje `true`), natomiast operator ścisłego porównania **`===`** sprawdza zarówno **wartość, jak i typ danych** bez konwersji (`5 === \"5\"` daje `false`, podobnie `!==`). Pętla `while` sprawdza warunek przed pierwszym obrotem (może wykonać się 0 razy), a `do { ... } while (warunek);` sprawdza warunek na końcu (wykona się **co najmniej 1 raz**). W PHP pętla `foreach ($tablica as $klucz => $wartosc)` służy do wygodnej iteracji po tablicach.","isCorrect":true},{"answer":"W języku PHP zmienne deklaruje się słowem kluczowym let lub const bez znaku dolara $","isCorrect":false}],"created_at":"2026-11-11T20:27:38.806086Z","updated_at":"2026-11-11T20:27:38.806086Z"},{"id":"card_dcd1a5394e83efee98457c4d7f14f1e879da29b615d8677ca8bd88846feb7c11","set_id":"ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da","front":"Jak w systemie MySQL/MariaDB utworzyć nowego użytkownika, nadać mu uprawnienia za pomocą polecenia `GRANT` oraz odebrać uprawnienia za pomocą `REVOKE`?","back":"Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.","examples":"Zwróć uwagę na przyimki w języku DCL sprawdzane na egzaminie INF.03: `GRANT ... ON baza.tabela **TO** 'user'@'host'`, natomiast `REVOKE ... ON baza.tabela **FROM** 'user'@'host'`!","other_answers":["Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY","Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep","Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika"],"answers":[{"answer":"Uprawnienia nadaje się poleceniem ALLOW SELECT ON sklep.* FOR 'anna'@'localhost', a odbiera poleceniem DENY","isCorrect":false},{"answer":"Zapis ON *.sklep oznacza wszystkie tabele w bazie danych o nazwie sklep","isCorrect":false},{"answer":"Tworzenie użytkownika: `CREATE USER 'anna'@'localhost' IDENTIFIED BY 'Haslo123!';`. Nadawanie uprawnień: `GRANT SELECT, INSERT, UPDATE ON sklep.* TO 'anna'@'localhost';` (lub wszystkie uprawnienia do jednej tabeli: `GRANT ALL PRIVILEGES ON sklep.towary TO 'anna'@'localhost';`). Odbieranie uprawnień: `REVOKE UPDATE ON sklep.* FROM 'anna'@'localhost';`. Usuwanie konta użytkownika: `DROP USER 'anna'@'localhost';`.","isCorrect":true},{"answer":"Polecenie DROP USER usuwa wszystkie tabele w bazie danych, które zostały utworzone przez tego użytkownika","isCorrect":false}],"created_at":"2026-11-11T20:27:38.806086Z","updated_at":"2026-11-11T20:27:38.806086Z"},{"id":"card_df1c4eac9658a75e11196e7dab8e51a6c9bc4403c61b9b09b59ee2fbaf8e820e","set_id":"ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da","front":"Czym różni się pozycjonowanie elementów w CSS3: `position: static`, `relative`, `absolute`, `fixed` oraz `sticky`?","back":"`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `\u003chtml>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.","examples":"Aby wypozycjonować element potomny (`position: absolute; right: 10px; bottom: 10px;`) wewnątrz konkretnego kontenera nadrzędnego, temu kontenerowi nadrzędnemu nadaje się właściwość **`position: relative;`**.","other_answers":["position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie","Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static","Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute"],"answers":[{"answer":"position: absolute pozycjonuje element zawsze względem okna przeglądarki i blokuje jego przewijanie","isCorrect":false},{"answer":"Właściwość z-index określająca kolejność nakładania warstw działa również na elementach z domyślnym position: static","isCorrect":false},{"answer":"Element z position: relative zwalnia zajmowane przez siebie miejsce w dokumencie tak samo jak position: absolute","isCorrect":false},{"answer":"`static` (domyślne): element w normalnym przepływie dokumentu (właściwości `top`, `left`, `z-index` nie działają). `relative`: element przesunięty względem swojej własnej pierwotnej pozycji, ale nadal zajmuje swoje pierwotne miejsce w układzie. `absolute`: element wyjęty z normalnego przepływu i pozycjonowany względem najbliższego przodka mającego pozycję inną niż `static` (lub względem `\u003chtml>`, jeśli takiego przodka brak). `fixed`: wyjęty z przepływu i przytwierdzony na stałe względem okna przeglądarki (viewportu — nie przesuwa się przy przewijaniu strony). `sticky`: zachowuje się jak `relative` do momentu osiągnięcia progu przewijania (np. `top: 0`), po czym przykleja się jak `fixed`.","isCorrect":true}],"created_at":"2026-11-11T20:27:38.806086Z","updated_at":"2026-11-11T20:27:38.806086Z"},{"id":"card_eca33372fa3dd795083a7c15e2fb6dfcbc40529fdbdf221008dff77dc624ccff","set_id":"ed2b8431-5bbc-47ce-a34c-2dcfb34cc5da","front":"Jak w języku JavaScript pobrać referencję do elementu DOM, odczytać wartość wpisaną przez użytkownika do pola formularza (`\u003cinput>`, `\u003cselect>`) i wstawić wynik do akapitu lub bloku `\u003cdiv>`?","back":"Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`\u003cinput>`, `\u003cselect>`, `\u003ctextarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `\u003cinput type=\"checkbox\">` lub `type=\"radio\"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`\u003cp>`, `\u003cdiv>`, `\u003cspan>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).","examples":"Bardzo ważna pułapka w JavaScript na egzaminie INF.03: `element.value` ZAWSZE zwraca ciąg znaków (`string`)! Dlatego przed dodawaniem dwóch liczb z pól formularza należy skonwertować je funkcją `Number(pole.value)`, `parseInt(pole.value, 10)` lub `parseFloat(pole.value)` — inaczej operator `+` wykona konkatenację napisów (`\"2\" + \"3\" = \"23\"`)!","other_answers":["Wartość pola \u003cinput> odczytuje się właściwością .innerHTML, a zawartość bloku \u003cdiv> właściwością .value","Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML","Właściwość .value na polu \u003cinput type=\"number\"> zwraca zawsze zmienną typu number, a nie string"],"answers":[{"answer":"Wartość pola \u003cinput> odczytuje się właściwością .innerHTML, a zawartość bloku \u003cdiv> właściwością .value","isCorrect":false},{"answer":"Element pobiera się metodą `document.getElementById('id')` lub `document.querySelector('#id')`. Wartość z pola formularza (`\u003cinput>`, `\u003cselect>`, `\u003ctextarea>`) odczytuje się przez właściwość `.value` (a dla pola wyboru `\u003cinput type=\"checkbox\">` lub `type=\"radio\"` stan zaznaczenia sprawdza się przez `.checked` zwracające `true`/`false`). Wynik do elementu HTML (`\u003cp>`, `\u003cdiv>`, `\u003cspan>`) zapisuje się przez `.innerHTML = ...` (interpretuje znaczniki HTML) lub `.textContent = ...` / `.innerText = ...` (czysty tekst).","isCorrect":true},{"answer":"Metoda document.getElementsByClassName('klasa') zwraca pojedynczy element, na którym można bezpośrednio wywołać .innerHTML","isCorrect":false},{"answer":"Właściwość .value na polu \u003cinput type=\"number\"> zwraca zawsze zmienną typu number, a nie string","isCorrect":false}],"created_at":"2026-11-11T20:27:38.806086Z","updated_at":"2026-11-11T20:27:38.806086Z"}]}