Przejdź do treści
{ }Pracownia Web

Temat 01 · 2 × 45 minINF.03

Czym jest JavaScript i gdzie żyje

HTML układa treść strony, CSS nadaje jej wygląd, a JavaScript sprawia, że strona reaguje: liczy, sprawdza, zmienia tekst po kliknięciu, pokazuje i ukrywa elementy. To jedyny język programowania, który każda przeglądarka rozumie bez instalowania czegokolwiek. W tej lekcji przygotujesz narzędzia, uruchomisz pierwszy skrypt na trzy sposoby i nauczysz się czytać komunikaty o błędach – umiejętność, bez której każda kolejna lekcja będzie frustrująca.

Trzy warstwy strony i dwa miejsca wykonywania kodu

Każda strona internetowa składa się z trzech warstw. HTML to struktura i treść (nagłówki, akapity, przyciski, pola formularza). CSS to wygląd (kolory, odstępy, układ). JavaScript to zachowanie: co ma się stać, gdy użytkownik kliknie, wpisze tekst albo najedzie myszą. Bez JavaScriptu strona jest jak plakat – ładna, ale martwa.

Kod strony może wykonywać się w dwóch miejscach. Kod po stronie klienta działa w przeglądarce użytkownika, już po pobraniu strony – to JavaScript. Kod po stronie serwera działa na komputerze, z którego pobierasz stronę – w PHP, Pythonie albo Node.js – i to on rozmawia z bazą danych, sprawdza hasła i generuje HTML, który dopiero trafia do przeglądarki.

Schemat: po lewej przeglądarka z warstwami HTML, CSS i JavaScript, po prawej serwer z PHP lub Node.js, bazą danych i plikami strony. Strzałka żądania biegnie od przeglądarki do serwera, strzałka odpowiedzi wraca z gotowym HTML, CSS i JS.
Rys. 1. JavaScript z tego kursu wykonuje się w przeglądarce, po lewej stronie schematu. Serwer tylko wysyła plik ze skryptem.

Ta różnica wraca na egzaminie pisemnym. Pytanie brzmi zwykle: „które zadanie można wykonać wyłącznie po stronie klienta?”. Odpowiedź: to, co dzieje się natychmiast, bez odsyłania danych na serwer – np. sprawdzanie poprawności pola formularza w czasie rzeczywistym, zmiana koloru po kliknięciu, pokazanie ukrytego bloku. Zapis do bazy danych, logowanie użytkownika czy wysłanie e-maila to zawsze serwer.

ZadanieGdzieDlaczego
Podświetlenie pola, gdy wpisany e-mail nie ma @klient (JS)reakcja natychmiastowa, dane nie opuszczają przeglądarki
Pokaż/ukryj menu po kliknięciuklient (JS)zmiana wyglądu strony, która już jest załadowana
Obliczenie kosztu z pól formularza i wypisanie pod przyciskiemklient (JS)typowe zadanie praktyczne INF.03
Sprawdzenie loginu i hasła w bazieserwer (PHP)baza danych i hasła są na serwerze, nie w przeglądarce
Zapisanie zamówieniaserwer (PHP)dane muszą być trwałe i wspólne dla wszystkich użytkowników

Narzędzie nr 1: konsola w przeglądarce

Zanim napiszesz jakikolwiek plik, poznaj konsolę. To okno wbudowane w każdą przeglądarkę, w którym możesz wpisywać kod JavaScript i natychmiast widzieć wynik. Otwórz je na dowolnej stronie:

  • F12 albo Ctrl + Shift + I (Chrome, Edge, Firefox, Opera) – otwiera narzędzia deweloperskie (DevTools); kliknij zakładkę Konsola (Console),
  • Ctrl + Shift + J (Chrome, Edge) lub Ctrl + Shift + K (Firefox) – od razu konsola,
  • na Macu: Cmd + Option + J,
  • albo prawy przycisk myszy na stronie → Zbadaj (Inspect).

Wpisz 2 + 2 i naciśnij Enter – zobaczysz 4. Wpisz "Ala" + "Nowak" – zobaczysz "AlaNowak". Konsola oblicza wyrażenie i pokazuje jego wartość. To najszybszy sposób, żeby sprawdzić, jak działa jakaś operacja, bez tworzenia pliku.

W tym kursie bloki kodu z przyciskiem Uruchom działają jak taka konsola. Spróbuj:

konsola.js
console.log(2 + 2);
console.log("Ala" + " " + "Nowak");
console.log(10 / 4);
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

Zakładki DevTools, które będą ci potrzebne w kursie:

ZakładkaDo czego służy
Konsola (Console)wyniki console.log, komunikaty o błędach, wpisywanie kodu „na żywo”
Elementy (Elements / Inspektor)podgląd HTML i CSS strony takiej, jaką widzi przeglądarka – także po zmianach wykonanych przez JavaScript
Źródła (Sources / Debugger)zatrzymywanie skryptu w wybranej linii i podgląd zmiennych – lekcja Okna dialogowe, konsola i debugger

Narzędzie nr 2: edytor kodu

Pliki stron piszesz w edytorze z podświetlaniem składni. Polecany: Visual Studio Code (bezpłatny, Windows/macOS/Linux). Alternatywy: Notepad++, Sublime Text. Nie używaj Worda ani Notatnika – pierwszy dodaje niewidoczne formatowanie, drugi nie pokazuje numerów linii ani błędów.

Pierwsze kroki w VS Code:

  1. Zainstaluj VS Code i (opcjonalnie) rozszerzenie Polish Language Pack.
  2. Utwórz folder, np. js-kurs, i otwórz go: Plik → Otwórz folder. Pracuj zawsze w folderze, nie na pojedynczych plikach – wtedy ścieżki do skryptów i obrazków działają tak samo jak na egzaminie.
  3. Nowy plik index.html. Wpisz ! i naciśnij Tab – wbudowany Emmet wstawi szkielet HTML.
  4. Zainstaluj rozszerzenie Live Server: prawy przycisk na pliku HTML → Open with Live Server. Strona odświeża się sama po każdym zapisie. Bez rozszerzenia też jest dobrze – po prostu otwórz plik HTML dwukrotnym kliknięciem i po zmianach naciśnij F5 w przeglądarce.
  5. Włącz automatyczny zapis (Plik → Automatyczne zapisywanie) albo nabierz nawyku Ctrl + S. Najczęstszy „błąd”, który widzą uczniowie: skrypt nie działa, bo plik nie został zapisany.

Dołączanie skryptu do strony

JavaScript wchodzi do strony przez znacznik <script>. Są trzy sposoby, które musisz znać i rozpoznawać.

Sposób 1: skrypt w treści strony (inline)

Kod wpisujesz bezpośrednio między <script> a </script>. Najczęściej umieszcza się go na końcu <body> – wtedy wszystkie elementy strony już istnieją, gdy skrypt zaczyna działać.

index.html
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Pierwszy skrypt</title>
</head>
<body>
  <h1>Moja strona</h1>
  <p>Otwórz konsolę (F12), żeby zobaczyć komunikat.</p>

  <script>
    console.log("Strona załadowana!");
  </script>
</body>
</html>

Sposób 2: skrypt w osobnym pliku (src)

Kod trafia do pliku z rozszerzeniem .js, a strona wskazuje go atrybutem src. Tak porządkuje się większe projekty i tak najczęściej wygląda to w pytaniach egzaminacyjnych.

index.html
<body>
  <h1>Moja strona</h1>
  <script src="skrypt.js"></script>
</body>
skrypt.js
console.log("Komunikat z osobnego pliku");

Ważne szczegóły:

  • Znacznik <script> zawsze ma znacznik zamykający </script>, nawet gdy jest pusty. Zapis <script src="skrypt.js" /> nie zadziała poprawnie.
  • Gdy jest src, kod wpisany między znacznikami jest ignorowany. Jedno albo drugie.
  • Ścieżka jest względna do pliku HTML: src="js/skrypt.js" to podfolder js.
  • Atrybut type="text/javascript" jest zbędny – w HTML5 JavaScript jest domyślny. Spotkasz go w starszych arkuszach, nie szkodzi.

Sposób 3: skrypt w <head> z atrybutem defer

Jeżeli chcesz trzymać <script> w <head>, dodaj defer. Przeglądarka pobierze plik od razu, ale wykona go dopiero po wczytaniu całego HTML. Efekt jest taki sam, jak przy skrypcie na końcu <body>.

index.html
<head>
  <meta charset="UTF-8">
  <script src="skrypt.js" defer></script>
</head>
<body>
  <button id="przycisk">Kliknij</button>
</body>

defer działa tylko dla skryptów z src; przy kodzie inline jest ignorowany. Pokrewny atrybut async wykonuje skrypt natychmiast po pobraniu, w nieprzewidywalnym momencie – do skryptów, które dotykają elementów strony, się nie nadaje.

ZapisKiedy się wykonaKiedy używać
<script>…</script> na końcu <body>po zbudowaniu elementów stronykrótkie skrypty, zadania egzaminacyjne
<script src="plik.js"></script> na końcu <body>jak wyżejwiększy kod w osobnym pliku
<script src="plik.js" defer></script> w <head>po wczytaniu całego HTMLporządek: wszystkie zasoby w <head>
<script src="plik.js"></script> w <head> bez defernatychmiast, zanim powstanie <body>tylko kod, który nie dotyka elementów strony
Sprawdź się

Który zapis poprawnie dołącza do strony zewnętrzny plik ze skryptem?

Pierwsza interakcja: przycisk, który pisze do konsoli

Poniżej plac zabaw: HTML, CSS i JS w jednym miejscu, z podglądem i konsolą. Kliknij Uruchom, potem przycisk w podglądzie i obserwuj konsolę pod spodem. Zapis onclick="…" to atrybut HTML, który wykonuje kod po kliknięciu – tak zapisują zdarzenia materiały CKE. Pełną obsługę zdarzeń poznasz w lekcji Zdarzenia myszy i klawiatury.

Przycisk piszący do konsoli
<button onclick="console.log('Działa!')">Sprawdź</button>
<p>Kliknij przycisk i spójrz do konsoli poniżej.</p>
Podgląd

Zmień tekst w console.log('…') i uruchom ponownie. Zwróć uwagę na cudzysłowy: atrybut HTML używa "…", więc napis wewnątrz skryptu dostał '…'. Gdybyś użył dwa razy ", przeglądarka zamknęłaby atrybut za wcześnie.

console.log – twoje okno na kod

console.log(…) wypisuje w konsoli to, co dostanie w nawiasach. Możesz podać kilka wartości oddzielonych przecinkami – wypisze je w jednej linii rozdzielone spacją. To podstawowe narzędzie testowania: gdy wynik jest zły, wypisujesz wartości po drodze i patrzysz, w którym miejscu przestają się zgadzać.

log.js
console.log("Jedna wartość");
console.log("Kilka", "wartości", 2026);
console.log("Cena:", 19.99, "zł");
console.log(7 * 8);
console.warn("Ostrzeżenie: to tylko test");
console.error("Błąd: tak wygląda komunikat o błędzie");
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

console.warn i console.error wypisują to samo, ale na żółto i czerwono – przeglądarka pozwala je filtrować. console.table(…) pokazuje tablice i obiekty jako tabelę – wrócisz do niego w lekcji o tablicach.

Sprawdź się

Programista chce podczas testów zobaczyć wartość zmiennej cena w konsoli przeglądarki. Której instrukcji użyje?

Komentarze

Komentarz to tekst w kodzie, który przeglądarka pomija. Służy do wyjaśniania, co robi fragment, i do tymczasowego wyłączania kodu.

komentarze.js
// Komentarz jednoliniowy: od dwóch ukośników do końca linii.
console.log("To się wykona"); // komentarz może być też za instrukcją

/* Komentarz blokowy
   może zajmować
   kilka linii. */
console.log("To też");

// console.log("A to nie – jest zakomentowane");
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

Czego nie używać:

  • # – to komentarz w PHP, Pythonie i Bashu. W JavaScripcie # to błąd składni (poza specjalnym użyciem w klasach).
  • <!-- --> – to komentarz HTML. Wewnątrz <script> nie zadziała tak, jak oczekujesz.

W VS Code skrót Ctrl + / dodaje lub zdejmuje // z zaznaczonych linii – przydaje się do szybkiego wyłączania fragmentu podczas szukania błędu.

Komentarze są w podstawie programowej (INF.03.5.7.1 „stosuje komentarze w kodzie źródłowym programu”). Na egzaminie praktycznym nie ma za nie osobnego kryterium, ale krótki komentarz nad funkcją pomaga egzaminatorowi, który przy niedziałającym skrypcie ocenia twój kod źródłowy.

Sprawdź się

Który zapis jest poprawnym komentarzem jednoliniowym w JavaScripcie?

Czytanie komunikatów o błędach

Błąd w JavaScripcie nie jest katastrofą – jest informacją. Przeglądarka pisze w konsoli na czerwono, co się stało i gdzie. Komunikat ma zawsze tę samą budowę:

Tekst
Uncaught ReferenceError: cena is not defined
    at skrypt.js:3
  1. Uncaught – błąd nie został obsłużony (normalne w prostych skryptach).
  2. Typ błędu – ReferenceError, TypeError, SyntaxError. Już sam typ mówi, czego szukać.
  3. Treść – po angielsku, krótko: cena is not defined („cena nie jest zdefiniowana”).
  4. Plik i linia – skrypt.js:3. W Chrome kliknięcie w ten link otwiera kod w zakładce Źródła na właściwej linii.

Trzy typy błędów, które będą ci towarzyszyć przez cały kurs:

SyntaxError – kod jest źle „napisany”

Brak nawiasu, cudzysłowu, przecinka. Przeglądarka nie może nawet zacząć wykonywać skryptu – nie wykona się ani jedna linia, także te poprawne. Na egzaminie to najgroźniejszy błąd: przepadają wszystkie kryteria sprawdzane „na żywo”.

syntax-error.js
console.log("Witaj";
// Uncaught SyntaxError: missing ) after argument list
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

ReferenceError – używasz nazwy, która nie istnieje

Najczęściej literówka w nazwie zmiennej lub funkcji albo użycie zmiennej przed jej utworzeniem.

reference-error.js
let cena = 100;
console.log("Cena:", cenna);
// Uncaught ReferenceError: cenna is not defined
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

TypeError – robisz coś, czego dana wartość nie potrafi

Wywołanie czegoś, co nie jest funkcją (literówka w nazwie metody), albo odwołanie do właściwości czegoś, co jest null – bo np. element o podanym id nie istnieje.

type-error.js
console.lgo("Witaj");
// Uncaught TypeError: console.lgo is not a function
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

Strategia, gdy skrypt „nie działa”:

  1. Otwórz konsolę (F12). Jeśli jest czerwony komunikat – przeczytaj typ i treść, kliknij numer linii.
  2. Jeśli konsola jest pusta, a nic się nie dzieje – sprawdź, czy skrypt w ogóle jest dołączony (ścieżka w src, zakładka Sieć/Network pokaże 404) i czy plik został zapisany.
  3. Dodaj console.log("tu jestem") na początku skryptu i w kluczowych miejscach. Zobaczysz, jak daleko dochodzi wykonanie.
  4. Popraw pierwszy błąd i odśwież (F5). Kolejne komunikaty często są skutkiem pierwszego.
Sprawdź się

W konsoli pojawił się komunikat Uncaught ReferenceError: pokazWynik is not defined. Co jest najbardziej prawdopodobną przyczyną?

Jak wygląda stanowisko egzaminacyjne

Na części praktycznej INF.03 pracujesz 150 minut na komputerze, który według wykazu wyposażenia CKE na lata 2024–2026 jest zabezpieczony przed fizycznym dostępem do sieci i internetu. Na komputerze masz:

  • aktualną przeglądarkę (Edge, Chrome, Firefox lub Opera) – więc let, const i wszystkie nowoczesne konstrukcje działają,
  • edytor z podświetlaniem składni bez funkcji WYSIWYG – np. Visual Studio Code lub Notepad++; nie ma wizualnych kreatorów stron,
  • pakiet XAMPP (Apache, MySQL/MariaDB, PHP, phpMyAdmin) – do części bazodanowej i PHP,
  • zwykle także program graficzny do przygotowania obrazów.

Konsekwencje dla JavaScriptu:

  • Zero bibliotek. Nie ma jQuery, nie ma Reacta, nie ma CDN. Piszesz czysty („vanilla”) JavaScript z pamięci. Dlatego ten kurs uczy czystego JS, a biblioteki pokazuje dopiero na końcu.
  • Zero dokumentacji online. Jedyna pomoc to tabela „Wybrane pola i metody modelu DOM języka JavaScript” dołączona do arkusza. Nazwy metod musisz znać.
  • Konsola jest. Przeglądarka ma DevTools – używaj F12 na egzaminie tak samo jak na lekcji, to nie jest zabronione.
  • Pracę zapisujesz w folderze nazwanym twoim numerem zdającego, a w pliku przeglądarka.txt wpisujesz nazwę przeglądarki, w której testowałeś stronę. Zrzuty ekranu (dla części bazodanowej) muszą być pełnoekranowe, z paskiem zadań.
  • Zdający nie wie z góry, czy wylosuje wariant ze skryptem JavaScript, czy z PHP – w sesjach 2024–2026 wariantów JS było od 3 do 6 na 12. Trzeba umieć oba.

Na egzaminie

Ściąga

SkładniaCo robiPrzykład
<script>…</script>skrypt w treści strony, zwykle na końcu <body><script>console.log("start");</script>
<script src="plik.js"></script>skrypt z osobnego pliku; znacznik zamykający obowiązkowy<script src="js/app.js"></script>
<script src="plik.js" defer></script>w <head>, wykona się po wczytaniu HTML–
console.log(a, b)wypisuje wartości w konsoli, rozdzielone spacjąconsole.log("Suma:", 7)
console.warn(x), console.error(x)to samo, na żółto / czerwonoconsole.error("Brak danych")
// tekstkomentarz do końca liniilet n = 5; // liczba sztuk
/* tekst */komentarz blokowy, wiele linii/* TODO: walidacja */
F12, Ctrl+Shift+Iotwiera DevToolszakładka Konsola
Ctrl+Shift+J / Ctrl+Shift+Kkonsola w Chrome, Edge / Firefox–
SyntaxErrorbłąd zapisu – nic się nie wykonabrak ) lub "
ReferenceError: x is not definednieistniejąca nazwa (literówka)cenna zamiast cena
TypeError: … is not a function / … of nullzła metoda lub element nie znalezionyconsole.lgo, brak id

Zadania

Zadanie 1
łatwe

Trzy sposoby na jeden komunikat

Utwórz folder lekcja01 i w nim plik index.html ze szkieletem HTML (w VS Code: ! + Tab) i nagłówkiem <h1>Lekcja 1</h1>. Spraw, aby po otwarciu strony w konsoli pojawił się napis Działa!, kolejno na trzy sposoby – po każdym sprawdź w konsoli (F12), że komunikat jest:

  1. skrypt wpisany bezpośrednio na końcu <body>,
  2. skrypt w pliku skrypt.js dołączonym na końcu <body>,
  3. ten sam plik dołączony w <head> z atrybutem defer.
Pokaż rozwiązanie
index.html (wersja 3 – defer)
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Lekcja 1</title>
  <!-- wersja 3: plik w head, wykona się po wczytaniu strony -->
  <script src="skrypt.js" defer></script>
</head>
<body>
  <h1>Lekcja 1</h1>

  <!-- wersja 1: kod bezpośrednio w stronie -->
  <!-- <script>console.log("Działa!");</script> -->

  <!-- wersja 2: ten sam plik na końcu body -->
  <!-- <script src="skrypt.js"></script> -->
</body>
</html>
skrypt.js
// Lekcja 1 – pierwszy skrypt w osobnym pliku
console.log("Działa!");

Wersje 1 i 2 zostały zakomentowane komentarzem HTML, żeby nie wypisywać komunikatu trzy razy. Jeśli zostawisz wszystkie trzy, w konsoli zobaczysz Działa! trzy razy (niektóre przeglądarki sklejają identyczne komunikaty i pokazują obok licznik 3).

Zadanie 2
łatwe

Trzy błędy do znalezienia

Poniższy skrypt zawiera trzy błędy – po jednym z każdego typu: SyntaxError, ReferenceError, TypeError. Wklej go do pliku, otwórz konsolę i poprawiaj po jednym błędzie, odświeżając stronę po każdej poprawce. Zapisz w komentarzu nad każdą linią, jaki komunikat zobaczyłeś.

bledy.js
let imie = "Ola";
let wiek = 17;
console.log("Imię:", imei);
console.lgo("Wiek:", wiek);
console.log("Za rok:", wiek + 1;
Pokaż rozwiązanie

Kolejność, w jakiej przeglądarka zgłosi błędy, ma znaczenie: najpierw SyntaxError (linia 5), bo przez niego nie wykona się nic. Dopiero po jego poprawieniu zobaczysz ReferenceError (linia 3), a po nim TypeError (linia 4).

bledy.js (poprawiony)
let imie = "Ola";
let wiek = 17;
// było: imei → Uncaught ReferenceError: imei is not defined
console.log("Imię:", imie);
// było: console.lgo → Uncaught TypeError: console.lgo is not a function
console.log("Wiek:", wiek);
// było: brak ) → Uncaught SyntaxError: missing ) after argument list
console.log("Za rok:", wiek + 1);
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik
Zadanie 3
średnie

Co pokaże konsola?

Bez uruchamiania zapisz, co dokładnie (linia po linii) wypisze poniższy kod. Potem uruchom i porównaj. Jeśli coś się nie zgadza, wyjaśnij sobie dlaczego.

przewidz.js
console.log("Start");
// console.log("Krok 1");
console.log("Krok", 2);
/* console.log("Krok 3");
console.log("Krok 4"); */
console.log("Krok " + 5);
console.log(2 + 3, "2" + "3");
console.log("Koniec"); // console.log("Naprawdę koniec");
Pokaż rozwiązanie
przewidz.js
console.log("Start");
// console.log("Krok 1");
console.log("Krok", 2);
/* console.log("Krok 3");
console.log("Krok 4"); */
console.log("Krok " + 5);
console.log(2 + 3, "2" + "3");
console.log("Koniec"); // console.log("Naprawdę koniec");
Konsola
Kliknij „Uruchom”, aby zobaczyć wynik

Wynik: Start, Krok 2, Krok 5, 5 23, Koniec. Kroki 1, 3, 4 i „Naprawdę koniec” są w komentarzach. "Krok", 2 to dwa argumenty rozdzielone spacją, "Krok " + 5 to jeden sklejony napis. 2 + 3 to dodawanie liczb, a "2" + "3" skleja napisy w 23 – do tej pułapki wrócisz w lekcji Liczby i operatory.

Zadanie 4
średniejak na INF.03

Strona startowa jak na egzaminie

Przygotuj folder o nazwie 12345678 (na egzaminie – twój numer zdającego). W nim:

  • plik start.html z nagłówkiem <h1>Panel klienta</h1>, akapitem z tekstem Kliknij przycisk i sprawdź konsolę. i przyciskiem z napisem Sprawdź,
  • plik skrypt.js dołączony do strony tak, aby znajdował się w <head> i wykonał się dopiero po wczytaniu strony,
  • kliknięcie przycisku wypisuje w konsoli dokładnie: Skrypt działa poprawnie.,
  • na początku skrypt.js komentarz blokowy z nazwą strony i twoim imieniem,
  • plik przeglądarka.txt z nazwą przeglądarki, w której testowałeś stronę.

Kryteria oceny (zero-jedynkowe, w stylu „Zasad oceniania” CKE):

  1. Strona start.html zawiera <meta charset="UTF-8">, nagłówek, akapit i przycisk o podanych treściach.
  2. Skrypt znajduje się w osobnym pliku skrypt.js, dołączonym w sekcji <head> z atrybutem defer.
  3. Po kliknięciu przycisku w konsoli pojawia się tekst Skrypt działa poprawnie. (z kropką) – sprawdzane w przeglądarce.
  4. Plik skrypt.js rozpoczyna się komentarzem blokowym.
  5. W folderze znajduje się plik przeglądarka.txt z nazwą przeglądarki.
  6. Konsola po załadowaniu strony nie zawiera żadnego czerwonego komunikatu o błędzie.
Pokaż rozwiązanie
start.html
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Panel klienta</title>
  <script src="skrypt.js" defer></script>
</head>
<body>
  <h1>Panel klienta</h1>
  <p>Kliknij przycisk i sprawdź konsolę.</p>
  <button onclick="console.log('Skrypt działa poprawnie.')">Sprawdź</button>
</body>
</html>
skrypt.js
/* Panel klienta – lekcja 1
   Autor: Jan Kowalski */
console.log("Strona wczytana, skrypt gotowy.");
przeglądarka.txt
Google Chrome

Komentarz do rozwiązania: sam console.log po kliknięciu siedzi w atrybucie onclick – to wystarcza, póki nie znasz funkcji. W lekcji Funkcje przeniesiesz ten kod do skrypt.js jako function sprawdz() {…} i wywołasz onclick="sprawdz()", a w lekcji o zdarzeniach poznasz addEventListener. Kryterium 6 sprawdzasz tak, jak egzaminator: otwierasz stronę, F12, patrzysz, czy konsola jest czysta.

Test powtórkowy

Test powtórkowy

Format jak w części pisemnej INF.03: 4 odpowiedzi, 1 poprawna.

0/0poprawnych
Sprawdź się

Które zadanie na stronie internetowej może być wykonane wyłącznie po stronie klienta?

Sprawdź się

Aby dołączyć do dokumentu HTML skrypt zapisany w pliku skrypt.js, należy użyć zapisu

Sprawdź się

W języku JavaScript komentarz jednoliniowy rozpoczyna się od znaków

Sprawdź się

Co wypisze poniższy kod w konsoli?

var liczba = 7;
// console.log(liczba);
console.log("liczba");
Sprawdź się

Programista testuje skrypt i chce zobaczyć wartość zmiennej suma w narzędziach deweloperskich przeglądarki. Użyje w tym celu instrukcji

Sprawdź się

Skrypt umieszczony w sekcji head ma odwoływać się do elementów strony. Który atrybut znacznika script sprawi, że wykona się dopiero po wczytaniu całego dokumentu HTML?

Sprawdź się

Po otwarciu strony w konsoli pojawił się komunikat Uncaught SyntaxError: missing ) after argument list. Co to oznacza dla pozostałej części skryptu?

Sprawdź się

Który zapis zawiera literówkę i spowoduje błąd TypeError: … is not a function?

Sprawdź się

Zgodnie z wykazem wyposażenia stanowisk na egzaminie INF.03 komputer zdającego

Sprawdź się

Co wypisze w konsoli poniższy kod?

console.log("Suma:", 2 + 3);