Okna dialogowe, konsola, document.write i debugger

Twój skrypt musi jakoś rozmawiać ze światem: pokazać wynik, zapytać o liczbę, powiedzieć „coś poszło nie tak”. Zanim w następnych lekcjach zaczniesz wypisywać wyniki do elementów strony, poznasz cztery najstarsze kanały – okna dialogowe alert/prompt/confirm, konsolę, document.write – oraz najważniejsze narzędzie każdego programisty: debugger w przeglądarce. Podstawa programowa INF.03 wymaga wprost, żebyś umiał „stosować debugger w przeglądarce internetowej” (INF.03.5.6.4), a w testach pisemnych pytania o prompt i console.log wracają co kilka sesji.

Trzy okna dialogowe

Przeglądarka ma trzy wbudowane funkcje otwierające małe okno modalne (modal) – takie, które blokuje stronę do czasu zamknięcia. Są brzydkie i nie da się ich ostylować, ale są najszybszym sposobem na test.

W placu zabaw okna działają naprawdę – kliknij przyciski w podglądzie.

<button id="btnAlert">alert</button>
<button id="btnPrompt">prompt</button>
<button id="btnConfirm">confirm</button>
<p id="wynik">Kliknij przycisk i obserwuj, co zwraca funkcja.</p>

const wynik = document.getElementById('wynik');

document.getElementById('btnAlert').addEventListener('click', () => {
  const zwrot = alert('Cześć! To jest alert.');
  wynik.textContent = 'alert zwrócił: ' + zwrot;          // undefined
});

document.getElementById('btnPrompt').addEventListener('click', () => {
  const imie = prompt('Jak masz na imię?', 'Ala');
  wynik.textContent = 'prompt zwrócił: ' + imie + ' (typ: ' + typeof imie + ')';
});

document.getElementById('btnConfirm').addEventListener('click', () => {
  const zgoda = confirm('Usunąć wszystkie dane?');
  wynik.textContent = 'confirm zwrócił: ' + zgoda + ' (typ: ' + typeof zgoda + ')';
});

Zwróć uwagę na typeof: prompt zwraca string nawet wtedy, gdy wpiszesz cyfry, a po Anuluj – object (bo typeof null to "object", jak pamiętasz z lekcji Zmienne i typy danych).

prompt zwraca napis – zawsze konwertuj

var liczba = prompt('Podaj liczbę:');
alert(liczba + 3);

To ten sam problem, który w części praktycznej dotyczy input.value – dane od użytkownika są tekstem. Konwertuj funkcjami z lekcji Liczby, operatory i konwersja typów:

<button id="start">Policz pole prostokąta</button>
<p id="wynik"></p>

document.getElementById('start').addEventListener('click', () => {
  const a = parseFloat(prompt('Długość boku a (m):'));
  const b = parseFloat(prompt('Długość boku b (m):'));

  if (isNaN(a) || isNaN(b)) {
    document.getElementById('wynik').textContent = 'Wprowadź poprawne dane.';
    return;
  }
  document.getElementById('wynik').textContent = 'Pole: ' + a * b + ' m²';
});

confirm do decyzji tak/nie

confirm zwraca boolean, więc pasuje prosto do if:

<button id="usun">Usuń notatkę</button>
<p id="notatka">To jest moja notatka.</p>

document.getElementById('usun').addEventListener('click', () => {
  if (confirm('Na pewno usunąć notatkę?')) {
    document.getElementById('notatka').textContent = '(notatka usunięta)';
  }
});

Konsola: console.*

Konsolę poznałeś w lekcji Czym jest JavaScript. Teraz dokładniej – bo to główne narzędzie do podglądania, co dzieje się w skrypcie. Otwierasz ją klawiszem F12 (zakładka Console) albo skrótem Ctrl+Shift+J (Windows/Linux) lub Cmd+Option+J (macOS).

const cena = 19.99;
const sztuk = 3;

console.log('Cena:', cena, 'Sztuk:', sztuk);  // kilka argumentów – oddzielone spacją
console.log(`Razem: ${(cena * sztuk).toFixed(2)} zł`);
console.info('Informacja – wygląda jak log');
console.warn('Ostrzeżenie – żółte tło w DevTools');
console.error('Błąd – czerwone tło i ślad stosu');

const koszyk = [
  { produkt: 'Zeszyt', cena: 4.5 },
  { produkt: 'Długopis', cena: 2 },
];
console.table(koszyk);  // czytelna tabela dla tablicy obiektów

Kilka argumentów w console.log to lepszy pomysł niż sklejanie plusem: obiekty i tablice zostają „klikalne”, a liczby nie zmieniają się w napisy. Do poznania przydadzą się jeszcze console.clear() (czyści konsolę) i console.group('nazwa') / console.groupEnd() (zwijane grupy wpisów).

Debugowanie przez console.log

Najprostsza technika szukania błędu: wypisujesz wartości zmiennych w kluczowych miejscach i porównujesz z tym, czego się spodziewałeś.

function liczbaPuszek(powierzchnia) {
  const puszki = powierzchnia / 4;
  console.log('powierzchnia =', powierzchnia, 'puszki =', puszki); // podgląd
  return Math.ceil(puszki);
}

console.log(liczbaPuszek('18'));  // "18" / 4 = 4.5 → 5  (dzielenie konwertuje napis)
console.log(liczbaPuszek(16));    // 4

Pamiętaj, żeby przed oddaniem pracy usunąć tymczasowe console.log – albo przynajmniej nie wypisywać nimi wyniku, którego arkusz żąda w akapicie.

document.write – dialekt egzaminacyjny

document.write(tekst) wstawia tekst (również znaczniki HTML) do dokumentu w miejscu, w którym stoi skrypt, podczas ładowania strony. Materiały CKE używają go chętnie, bo to jedna linijka bez żadnego HTML.

<script>
document.write(Date());
</script>

<h1>Sklep</h1>
<script>
  document.write('<p>Dzisiaj jest: ' + Date() + '</p>');
  document.write('<p>2 + 3 = ' + (2 + 3) + '</p>');
</script>
<p>Ten akapit jest już w HTML.</p>

Dwie rzeczy, które musisz o nim wiedzieć:

1. Wywołany po załadowaniu strony (np. w obsłudze kliknięcia) najpierw kasuje całą dotychczasową zawartość dokumentu, a potem wpisuje tekst. W skryptach ładowanych z atrybutem async jest ignorowany (konsola pokazuje ostrzeżenie).
2. Nie pozwala wskazać miejsca – nie da się nim wpisać wyniku „w akapicie pod przyciskiem”, czego wymagają arkusze praktyczne.

<h1>Galeria</h1>
<p>Dużo ważnej treści…</p>
<button onclick="document.write('Wynik: 42')">Pokaż wynik</button>

Kliknij przycisk – cała strona znika. Dlatego document.write czytasz w testach, ale we własnym kodzie zastępujesz go element.textContent lub innerHTML (następna lekcja).

Gdzie ma trafić wynik?

Arkusz praktyczny zawsze precyzuje miejsce: „w paragrafie pod przyciskiem”, „w konsoli”, „w oknie dialogowym”. Egzaminator sprawdza to osobnym kryterium – wynik w alert, gdy miał być w akapicie, to utracony punkt.

Błędy w konsoli: jak je czytać

Gdy skrypt się wywali, konsola pokazuje czerwony wpis. Nie zamykaj go – to najlepsza wskazówka, jaką dostaniesz. Każdy komunikat ma trzy części:

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at oblicz (raty.html:18:46)
    at HTMLButtonElement.onclick (raty.html:9:36)

• Typ błędu – TypeError, ReferenceError, SyntaxError, RangeError.
• Treść – co dokładnie się nie udało: tu „próbowano odczytać value z null”.
• Ślad stosu (stack trace) – gdzie: funkcja oblicz, plik raty.html, linia 18, znak 46; niżej – kto ją wywołał. Kliknięcie w raty.html:18 otwiera tę linię w panelu Sources.

Najczęstsze trzy błędy początkującego i ich przyczyny:

// ReferenceError: zmienna lub funkcja o takiej nazwie nie istnieje
// (literówka w nazwie, zła wielkość liter, brak deklaracji)
const koszt = 10;
console.log(Koszt); // ReferenceError: Koszt is not defined

// TypeError: operacja na niewłaściwym typie – najczęściej null/undefined
// (getElementById nie znalazł elementu: literówka w id albo skrypt uruchomiony przed HTML)
const element = null;              // tak wygląda wynik getElementById('zleId')
console.log(element.value);        // TypeError: Cannot read properties of null (reading 'value')

// SyntaxError: kod nie da się nawet sparsować – skrypt NIE uruchomi się wcale
function oblicz() {
  const a = 5
  if (a > 3 {          // Chrome: SyntaxError: Unexpected token '{' (Firefox: missing ) after condition)
    alert('duże');
  }
}

SyntaxError jest najgroźniejszy na egzaminie: jeden brakujący nawias wyłącza cały skrypt, a egzaminator może wtedy zaliczyć tylko kryteria sprawdzane w kodzie źródłowym. Zawsze po napisaniu skryptu odśwież stronę i spójrz na konsolę – pusta konsola to pierwszy test.

Debugger w Chrome DevTools krok po kroku

console.log wystarcza do małych skryptów. Debugger pozwala zatrzymać program w dowolnej linii i obejrzeć wszystkie zmienne bez dopisywania czegokolwiek. Opis dotyczy Chrome i Edge (identyczne DevTools); w Firefoksie panel nazywa się Debugger i działa tak samo.

Zapisz ten plik jako raty.html i otwórz w przeglądarce. Skrypt ma celowo zepsuty wynik.

<!DOCTYPE html>
<html lang="pl">
<head><meta charset="UTF-8"><title>Raty</title></head>
<body>
  <label>Cena kursu: <input type="number" id="cena" value="3000"></label>
  <label>Liczba rat: <input type="number" id="raty" value="10"></label>
  <label>Dopłata: <input type="number" id="doplata" value="200"></label>
  <button onclick="oblicz()">Oblicz</button>
  <p id="wynik"></p>

  <script>
    function oblicz() {
      const cena = document.getElementById('cena').value;
      const raty = document.getElementById('raty').value;
      const doplata = document.getElementById('doplata').value;
      const razem = cena + doplata;
      const rata = razem / raty;
      document.getElementById('wynik').textContent = 'Rata: ' + rata + ' zł';
    }
  </script>
</body>
</html>

Spodziewasz się raty 320 zł, a wychodzi 300020. Znajdźmy przyczynę debuggerem.

1. Otwórz DevTools – F12 albo prawy przycisk na stronie → „Zbadaj” (Inspect). Przejdź do panelu Sources (w polskiej wersji „Źródła”).
2. Znajdź plik – w drzewie po lewej (karta Page) kliknij raty.html. Kod pojawi się w edytorze na środku. Skrót: Ctrl+P i wpisanie nazwy pliku.
3. Ustaw breakpoint (punkt zatrzymania) – kliknij numer linii z const razem = cena + doplata;. Numer podświetli się na niebiesko. Lista punktów pojawia się po prawej w sekcji Breakpoints.
4. Uruchom skrypt – kliknij na stronie „Oblicz”. Przeglądarka zatrzyma się na tej linii (podświetlona), a nad stroną pojawi się napis „Paused in debugger”. Kod w tej linii jeszcze się nie wykonał.
5. Obejrzyj zmienne – w sekcji Scope po prawej, pod Local, widzisz cena: "3000", doplata: "200", raty: "10". Cudzysłowy zdradzają problem: to napisy, nie liczby. Możesz też najechać kursorem na nazwę zmiennej w kodzie.
6. Wykonaj jeden krok – przycisk Step over next function call (F10) albo Step (F9) wykonuje bieżącą linię i zatrzymuje się na następnej. Teraz w Scope widzisz razem: "3000200" – sklejenie napisów.
7. Dodaj wyrażenie do Watch – w sekcji Watch kliknij plus i wpisz Number(cena) + Number(doplata). Debugger pokaże 3200 – czyli to, czego potrzebujesz. Watch przelicza wyrażenie przy każdym kroku.
8. Wznów – Resume script execution (F8) wykonuje resztę do kolejnego breakpointu lub do końca. Napraw kod: const razem = Number(cena) + Number(doplata); (albo parseFloat). Zapisz, odśwież stronę i sprawdź ponownie.

Pozostałe przyciski na pasku nad sekcjami:

Dodatkowo:

• Call Stack – lista funkcji, które doprowadziły do bieżącej linii (tu: oblicz wywołana z onclick). Kliknięcie przenosi do tej funkcji.
• Konsola podczas pauzy – naciśnij Esc, by otworzyć konsolę pod kodem; wpisane wyrażenia (np. typeof cena) liczą się w kontekście zatrzymanej funkcji.
• Pause on uncaught exceptions – pole wyboru w sekcji Breakpoints; debugger zatrzyma się dokładnie w linii, która rzuciła błąd.
• Breakpoint warunkowy – prawy przycisk na numerze linii → „Add conditional breakpoint…”, np. raty == 0 – zatrzymanie tylko wtedy, gdy warunek jest prawdziwy. Opcja „Add logpoint…” wypisuje wyrażenie do konsoli bez zatrzymywania, czyli console.log bez zmiany kodu.

Instrukcja debugger;

Breakpoint możesz też wpisać w kodzie – słowo debugger; zatrzymuje skrypt w tym miejscu, ale tylko gdy DevTools są otwarte. Bez nich przeglądarka je ignoruje.

function oblicz() {
  const cena = document.getElementById('cena').value;
  debugger;            // tu zatrzyma się debugger (gdy F12 jest otwarte)
  // …
}

Przed oddaniem pracy usuń wszystkie debugger; – zapomniane zatrzymanie u egzaminatora z otwartą konsolą to zamrożona strona.

Na egzaminie

Ściąga

Zadania

<button id="start">Start</button>

document.getElementById('start').addEventListener('click', () => {
  const imie = prompt('Jak masz na imię?');
  if (imie === null) {                 // Anuluj → null
    alert('Przerwano ankietę.');
    return;
  }
  const rok = parseInt(prompt('W którym roku się urodziłeś/aś?'));
  const wiek = new Date().getFullYear() - rok;   // napis → liczba, potem odejmowanie
  const lubi = confirm('Lubisz JavaScript?');    // true / false

  alert(`${imie}, masz ${wiek} lat. Lubisz JavaScript: ${lubi ? 'tak' : 'nie'}`);
});

<button id="graj">Graj</button>
<p id="wynik"></p>

const wynik = document.getElementById('wynik');

function graj() {
  const wylosowana = Math.floor(Math.random() * 10) + 1;
  let proby = 0;
  let odp;

  do {
    odp = prompt('Zgadnij liczbę od 1 do 10:');
    if (odp === null) {                 // Anuluj kończy grę
      wynik.textContent = 'Gra przerwana';
      return;
    }
    const liczba = parseInt(odp);
    proby++;
    if (liczba < wylosowana) alert('Za mało');
    else if (liczba > wylosowana) alert('Za dużo');
  } while (parseInt(odp) !== wylosowana);

  wynik.textContent = `Trafiono w ${proby} próbach`;
  if (confirm('Jeszcze raz?')) graj();
}

document.getElementById('graj').addEventListener('click', graj);

<input type="text" id="imie" placeholder="Imię">
<input type="text" id="nazwisko" placeholder="Nazwisko">
<input type="password" id="haslo1" placeholder="Hasło">
<input type="password" id="haslo2" placeholder="Powtórz hasło">
<button onclick="zatwierdz()">Zatwierdź</button>

<input type="text" id="imie" placeholder="Imię">
<input type="text" id="nazwisko" placeholder="Nazwisko"><br>
<input type="password" id="haslo1" placeholder="Hasło">
<input type="password" id="haslo2" placeholder="Powtórz hasło"><br>
<button onclick="zatwierdz()">Zatwierdź</button>

input { margin: 4px 0; padding: 6px; }

function zatwierdz() {
  // kryterium 2 – pobranie danych z kontrolek
  const imie = document.getElementById('imie').value;
  const nazwisko = document.getElementById('nazwisko').value;
  const haslo = document.getElementById('haslo1').value;
  const powtorzenie = document.getElementById('haslo2').value;

  if (haslo !== powtorzenie) {                    // kryterium 3
    alert('Podane hasła różnią się.');            // kryterium 4 – okno dialogowe
  } else {
    console.log('Witaj ' + imie + ' ' + nazwisko); // kryterium 5 – konsola
  }
}

<!DOCTYPE html>
<html lang="pl">
<head><meta charset="UTF-8"><title>Zakupy</title></head>
<body>
  <label>Cena: <input type="number" id="cena" value="20"></label>
  <label>Sztuk: <input type="number" id="sztuk" value="4"></label>
  <label>Kod rabatowy: <input type="text" id="kod" value="UCZEN"></label>
  <button onclick="policz()">Policz</button>
  <p id="wynik"></p>
  <script>
    function policz() {
      const cena = document.getElementById('cena').value;
      const sztuk = document.getElementById('sztuk').value;
      let kod = document.getElementById('kodRabatowy').value;
      let suma = cena * sztuk;
      if (kod = 'UCZEN') {
        suma = suma * 0.9;
      }
      document.getElementById('wynik').textContent = 'Do zapłaty: ' + suma + ' zł';
    }
  </script>
</body>
</html>

<label>Cena: <input type="number" id="cena" value="20"></label>
<label>Sztuk: <input type="number" id="sztuk" value="4"></label>
<label>Kod rabatowy: <input type="text" id="kod" value="UCZEN"></label>
<button onclick="policz()">Policz</button>
<p id="wynik"></p>

function policz() {
  const cena = Number(document.getElementById('cena').value);   // napis → liczba
  const sztuk = Number(document.getElementById('sztuk').value);
  const kod = document.getElementById('kod').value;              // poprawne id
  let suma = cena * sztuk;
  if (kod === 'UCZEN') {                                         // porównanie, nie przypisanie
    suma = suma * 0.9;
  }
  document.getElementById('wynik').textContent = 'Do zapłaty: ' + suma + ' zł';
}

Test powtórkowy

var x = prompt('Podaj liczbę');
document.write(typeof x);

<script>
document.write(Date());
</script>

var a = prompt('Liczba:');
var b = Number(a) * 2;
alert(a + b);