Trening JavaScript DOM – Egzamin INF.03

1. Blok Identyfikatorów (ID)

Wartości w polach wejściowych:

Liczba A (id="liczba-a"): Liczba B (id="liczba-b"): Przycisk (id="btn-oblicz") Przycisk (id="btn-zmien-kolor")

2. Blok Klas i List (.produkt, .cena, .wazne)

• Chleb – cena: 4.50 zł
• Mleko 3.2% – cena: 3.80 zł
• Masło ekstra – cena: 7.20 zł
• Ser żółty – cena: 6.50 zł

3. Pola wyboru (name, checked)

Wybór języka (name="jezyk"):

Opcje dodatkowe (name="opcje"):

4. Tabela danych (tabela-uczniow, td, tr)

Lp.	Uczeń	Ocena
1	Jan Kowalski	5
2	Anna Nowak	6
3	Piotr Wiśniewski	4
4	Zofia Lewandowska	5

Zadania do wpisania w konsoli

Wpisuj w konsoli podane polecenia krok po kroku i sprawdzaj efekty na stronie!

• Zadanie 1: Odczytanie wartości pól i zapis do bloku wyniku getElementById .value .innerHTML

  Wpisz w konsoli kod, który pobierze wartości z pól #liczba-a i #liczba-b, zsumuje je (używając parseFloat) i wpisze wynik do elementu o id wynik-id.

  Rozwiązanie do wklejenia w konsoli

  let a = parseFloat(document.getElementById('liczba-a').value);
  let b = parseFloat(document.getElementById('liczba-b').value);
  document.getElementById('wynik-id').innerHTML = "Suma wynosi: " + (a + b);

• Zadanie 2: Dynamiczna zmiana stylów CSS querySelector .style

  Wpisz polecenie za pomocą querySelector, które zmieni kolor tła bloku #wynik-id na zielony (#27ae60), a kolor czcionki na biały (white).

  Rozwiązanie do wklejenia w konsoli

  let box = document.querySelector('#wynik-id');
  box.style.backgroundColor = '#27ae60';
  box.style.color = 'white';

• Zadanie 3: Praca z kolekcją HTMLCollection getElementsByClassName pętla for

  Pobierz wszystkie elementy z klasą cena za pomocą getElementsByClassName. W pętli for zsumuj ich zawartość tekstową (parseFloat(el.textContent)) i wyświetl sumę w bloku #wynik-ceny.

  Rozwiązanie do wklejenia w konsoli

  let ceny = document.getElementsByClassName('cena');
  let suma = 0;
  for (let i = 0; i < ceny.length; i++) {
      suma += parseFloat(ceny[i].textContent);
  }
  document.getElementById('wynik-ceny').textContent = "Łączna cena: " + suma.toFixed(2) + " zł";

• Zadanie 4: Iteracja po NodeList i przełączanie klas querySelectorAll .forEach classList.toggle

  Wybierz wszystkie elementy listy mające klasę wazne za pomocą querySelectorAll('#lista-zakupow li.wazne') i za pomocą metody .forEach() dodaj im klasę podswietlenie.

  Rozwiązanie do wklejenia w konsoli

  document.querySelectorAll('#lista-zakupow li.wazne').forEach(el => {
      el.classList.toggle('podswietlenie');
  });

• Zadanie 5: Odczyt zaznaczonego radio i checkboxów querySelector(':checked') querySelectorAll

  1. Sprawdź, który radiobutton o nazwie jezyk jest zaznaczony.
  2. Pobierz wszystkie zaznaczone checkboxy o nazwie opcje i wypisz ich wartości do bloku #wynik-opcje.

  Rozwiązanie do wklejenia w konsoli

  let jezyk = document.querySelector('input[name="jezyk"]:checked').value;
  let opcje = [];
  document.querySelectorAll('input[name="opcje"]:checked').forEach(cb => opcje.push(cb.value));
  
  document.getElementById('wynik-opcje').innerHTML = 
      "Język: <b>" + jezyk + "</b><br>Opcje: <b>" + opcje.join(", ") + "</b>";

• Zadanie 6: Średnia ocen z tabeli querySelectorAll tabela td

  Pobierz wszystkie komórki tabeli z klasą ocena (#tabela-uczniow td.ocena), policz średnią arytmetyczną i wpisz ją do bloku #wynik-tabela.

  Rozwiązanie do wklejenia w konsoli

  let oceny = document.querySelectorAll('#tabela-uczniow td.ocena');
  let sumaOcen = 0;
  oceny.forEach(td => sumaOcen += parseFloat(td.textContent));
  let srednia = (sumaOcen / oceny.length).toFixed(2);
  
  document.getElementById('wynik-tabela').textContent = "Średnia ocen klasy: " + srednia;

• Zadanie 7: Podpięcie zdarzenia (EventListener) z poziomu konsoli addEventListener zdarzenie click

  Przycisk #btn-oblicz nie ma żadnej akcji! Wpisz w konsoli kod, który podepnie pod niego funkcję obliczającą sumę przy każdym kliknięciu myszą.

  Rozwiązanie do wklejenia w konsoli

  document.getElementById('btn-oblicz').addEventListener('click', function() {
      let a = parseFloat(document.getElementById('liczba-a').value) || 0;
      let b = parseFloat(document.getElementById('liczba-b').value) || 0;
      document.getElementById('wynik-id').textContent = "Kliknięto przycisk! Suma: " + (a + b);
  });

• Zadanie 8: Szybkie testy typów zwracanych danych w konsoli console.dir() HTMLCollection vs NodeList

  Wpisz po kolei w konsoli poniższe linijki i zobacz różnicę w podglądzie obiektów:

  console.dir(document.getElementById('blok-id'));
  console.log(document.getElementsByTagName('td'));      // HTMLCollection
  console.log(document.querySelectorAll('td'));          // NodeList
  console.log(document.getElementsByName('jezyk'));       // NodeList