JavaScript w przeglądarce · Moduł 14

Próba przekrojowa i diagnostyka błędów

Metodyka pracy ze specyfikacją zadania, analiza wejście-przetwarzanie-wynik, debugowanie w konsoli przeglądarki oraz kompleksowy konfigurator.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minMetodyka pracy i analiza wymagań skryptu Identyfikacja wejść i wyjść: Wypisz wszystkie elementy formularza, z których skrypt…
12 minDiagnozowanie błędów i praca z konsolą TypeError: Cannot read properties of null (reading 'value') — metoda getElementById()…
12 minKompleksowa integracja formularza i interfejsu Pobiera i weryfikuje dane klienta — w razie pustego pola wyświetla ostrzeżenie (np. przez…
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

Metodyka pracy i analiza wymagań skryptu

Sukces przy tworzeniu skryptów przeglądarkowych opiera się na zdyscyplinowanej i powtarzalnej metodyce pracy. Zamiast pisać od razu cały, rozbudowany program, warto podzielić realizację na cztery przejrzyste etapy:

Identyfikacja wejść i wyjść: Wypisz wszystkie elementy formularza, z których skrypt będzie czytać dane, oraz elementy DOM, w których wyświetlisz wyniki.
Implementacja warunków i szczegółów: Dodaj naliczanie rabatów, sprawdzanie pól wyboru oraz walidację danych wejściowych.

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

function przeliczPizze() {
  const rozmiarCena = Number(document.getElementById('rozmiarPizzy').value);
  const kodPromo = document.getElementById('kodPromo').value.trim().toUpperCase();
  const czyDostawa = document.getElementById('opcjaDostawa').checked;
  const wynik = document.getElementById('podsumowaniePizzy');

  let koszt = rozmiarCena;

  if (czyDostawa) {
    koszt += 8;
  }

  if (kodPromo === 'PIZZA10') {
    koszt = koszt * 0.90;
    wynik.textContent = 'Cena po rabacie: ' + koszt.toFixed(2) + ' zł (kod aktywny)';
  } else {
    wynik.textContent = 'Do zapłaty: ' + koszt.toFixed(2) + ' zł';
  }
}

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

function przeliczPizze() {
  const rozmiarCena = Number(document.getElementById('rozmiarPizzy').value);
  const kodPromo = document.getElementById('kodPromo').value.trim().toUpperCase();
  const czyDostawa = document.getElementById('opcjaDostawa').checked;
  const wynik = document.getElementById('podsumowaniePizzy');

  let koszt = rozmiarCena;

  if (czyDostawa) {
    koszt += 8;
  }

  if (kodPromo === 'PIZZA10') {
    koszt = koszt * 0.90;
    wynik.textContent = 'Cena po rabacie: ' + koszt.toFixed(2) + ' zł (kod aktywny)';
  } else {
    wynik.textContent = 'Do zapłaty: ' + koszt.toFixed(2) + ' zł';
  }
}

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Jaki jest zalecany pierwszy krok podczas implementacji skryptu na podstawie specyfikacji zadania?

Atom 2 z 3 · ~12 min

Diagnozowanie błędów i praca z konsolą

Gdy strona nie reaguje na kliknięcie przycisku lub wyświetla nieoczekiwane wyniki, pierwszym miejscem inspekcji powinna być zawsze konsola narzędzi deweloperskich przeglądarki (skrót klawiszowy F12 lub Ctrl + Shift + I ).

TypeError: Cannot read properties of null (reading 'value') — metoda getElementById() zwróciła null . Oznacza to literówkę w identyfikatorze, brak elementu w kodzie HTML…
Niezamierzone sklejenie tekstu zamiast dodawania (np. "50" + "20" = "5020" ) — brak jawnej konwersji za pomocą Number() .
Sprawdzanie stanu checkboxa przez pole.value zamiast właściwości pole.checked .
ReferenceError: nazwaFunkcji is not defined — literówka w nazwie funkcji w atrybucie onclick lub niepodłączony plik <script src="..."> .

Notatki dla nauczyciela

12 min Gdy strona nie reaguje na kliknięcie przycisku lub wyświetla nieoczekiwane wyniki, pierwszym miejscem inspekcji powinna być zawsze konsola narzędzi deweloperskich przeglądarki (skrót klawiszowy F12 lub Ctrl + Shift + I ).

Na co uważać:

Gdy strona nie reaguje na kliknięcie przycisku lub wyświetla nieoczekiwane wyniki, pierwszym miejscem inspekcji powinna być zawsze konsola narzędzi deweloperskich przeglądarki (skrót…
Do śledzenia wartości zmiennych w trakcie działania skryptu używaj metody console.log('Wartość:', zmienna) . Po poprawieniu kodu w pliku zawsze odśwież stronę w przeglądarce przed ponownym…

Pytanie kontrolne: Co najczęściej oznacza komunikat błędu TypeError: Cannot read properties of null w konsoli przeglądarki?

Odpowiedź: d) Że silnik JavaScript nie odnalazł w dokumencie elementu o podanym identyfikatorze

Kod · atom 2 · ~3 min

HTML — podłączenie skryptu

  <label>Kwota lokaty (zł):<br><input id="kwotaLokaty" type="number" value="5000"></label><br>
  <label>Oprocentowanie roczne (%):<br><input id="procentRoczny" type="number" value="6.5" step="0.1"></label><br>
  <button onclick="diagnozujIKalkuluj()">Oblicz zysk po roku</button>
  <p id="wynikOdsetek"></p>
  <script src="skrypt.js"></script>

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

function diagnozujIKalkuluj() {
  const poleLokaty = document.getElementById('kwotaLokaty');
  const poleProcent = document.getElementById('procentRoczny');
  const wynik = document.getElementById('wynikOdsetek');

  console.log('Sprawdzanie pól formularza:', poleLokaty, poleProcent);

  if (!poleLokaty || !poleProcent) {
    console.error('Błąd: nie znaleziono elementów formularza w drzewie DOM!');
    return;
  }

  const kwota = Number(poleLokaty.value);
  const procent = Number(poleProcent.value);

  console.log('Pobrane wartości liczbowe:', { kwota: kwota, procent: procent });

  if (isNaN(kwota) || kwota <= 0 || isNaN(procent) || procent <= 0) {
    wynik.textContent = 'Błąd: podaj poprawne wartości liczbowe większe od zera.';
    wynik.style.color = '#dc2626';
    return;
  }

  const zysk = kwota * (procent / 100);
  console.log('Wyliczony roczny zysk:', zysk);

  wynik.textContent = 'Roczny zysk z lokaty: ' + zysk.toFixed(2) + ' zł';
  wynik.style.color = '#16a34a';
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

Co najczęściej oznacza komunikat błędu TypeError: Cannot read properties of null w konsoli przeglądarki?

Atom 3 z 3 · ~12 min

Kompleksowa integracja formularza i interfejsu

Praktyczne zadania ze skryptów przeglądarkowych rzadko ograniczają się do jednego elementu. Zwykle wymagają skoordynowania kilku kontrolek różnych typów: listy rozwijanej, przycisków radiowych, pól wyboru oraz pól tekstowych z walidacją…

Pobiera i weryfikuje dane klienta — w razie pustego pola wyświetla ostrzeżenie (np. przez alert() ) i natychmiast przerywa działanie instrukcją return ,
Pobiera cenę bazową wybranej opcji z elementu <select> ,
Odczytuje wartość zaznaczonego przycisku radiowego za pomocą selektora :checked ,
Sprawdza stan dodatkowych pól typu checkbox za pomocą właściwości checked i dolicza opcjonalne koszty,

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

function finalizujKonfiguracje() {
  const imie = document.getElementById('klientImie').value.trim();
  const podsumowanie = document.getElementById('podsumowanieZestawu');

  if (imie === '') {
    alert('Błąd: Podaj imię zamawiającego!');
    podsumowanie.textContent = 'Proszę uzupełnić brakujące imię klienta.';
    podsumowanie.style.color = '#dc2626';
    return;
  }

  const cenaProcesora = Number(document.getElementById('procesorSelect').value);
  const zaznaczonyRam = document.querySelector('input[name="ramWybor"]:checked');
  const cenaRam = Number(zaznaczonyRam.value);
  const montaz = document.getElementById('montazSprzetu');

  let razem = cenaProcesora + cenaRam;

  if (montaz.checked) {
    razem += Number(montaz.value);
  }

  alert('Dziękujemy ' + imie + '! Zamówienie zostało zarejestrowane.');

  podsumowanie.innerHTML = 'Klient: ' + imie + '
' +
    'Koszt zestawu: ' + razem.toFixed(2) + ' zł (w tym montaż: ' +
    (montaz.checked ? 'TAK' : 'NIE') + ')';
  podsumowanie.style.color = '#16a34a';
}

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

function finalizujKonfiguracje() {
  const imie = document.getElementById('klientImie').value.trim();
  const podsumowanie = document.getElementById('podsumowanieZestawu');

  if (imie === '') {
    alert('Błąd: Podaj imię zamawiającego!');
    podsumowanie.textContent = 'Proszę uzupełnić brakujące imię klienta.';
    podsumowanie.style.color = '#dc2626';
    return;
  }

  const cenaProcesora = Number(document.getElementById('procesorSelect').value);
  const zaznaczonyRam = document.querySelector('input[name="ramWybor"]:checked');
  const cenaRam = Number(zaznaczonyRam.value);
  const montaz = document.getElementById('montazSprzetu');

  let razem = cenaProcesora + cenaRam;

  if (montaz.checked) {
    razem += Number(montaz.value);
  }

  alert('Dziękujemy ' + imie + '! Zamówienie zostało zarejestrowane.');

  podsumowanie.innerHTML = 'Klient: ' + imie + '
' +
    'Koszt zestawu: ' + razem.toFixed(2) + ' zł (w tym montaż: ' +
    (montaz.checked ? 'TAK' : 'NIE') + ')';
  podsumowanie.style.color = '#16a34a';
}

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

W jaki sposób zabezpieczyć kompleksowy kalkulator przed błędnym wejściem z pola imię klienta?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Identyfikacja wejść i wyjść: Wypisz wszystkie elementy formularza, z których skrypt będzie czytać dane, oraz elementy DOM, w których wyświetlisz wyniki.
Gdy strona nie reaguje na kliknięcie przycisku lub wyświetla nieoczekiwane wyniki, pierwszym miejscem inspekcji powinna być zawsze konsola narzędzi…
Pobiera i weryfikuje dane klienta — w razie pustego pola wyświetla ostrzeżenie (np. przez alert() ) i natychmiast przerywa działanie instrukcją return ,

Bilet wyjściowy: Jaki jest cel sformatowania końcowej wyceny zamówienia za pomocą kwota.toFixed(2)?
Odpowiedź: b) Zapewnienie stałego formatu walutowego z dwoma miejscami po przecinku w interfejsie