Lekcja JavaScript: Praca z formularzami, zdarzeniami i manipulacja DOM

Cele lekcji

Po zakończeniu lekcji uczeń:

Rozumie jak pobierać wartości z pól formularza (np. input type=”text” i checkbox).
Umie przypisywać dane do pól tekstowych (innerHTML) i atrybutów obrazów (src).
Stosuje instrukcje warunkowe if, else.
Rozróżnia i stosuje obsługę zdarzeń onclick i addEventListener.
Potrafi dynamicznie tworzyć ciągi znaków (np. nazwę pliku graficznego).

Wstęp teoretyczny

1. Model DOM (Document Object Model)

DOM to struktura drzewa, która reprezentuje elementy HTML jako obiekty JavaScript. Możemy je pobierać, modyfikować, ukrywać, zmieniać style i reagować na interakcje użytkownika.

2. Pobieranie danych z formularzy

Świetnie! Rozwińmy zagadnienie pobierania danych z formularzy w JavaScript o dodatkowe przypadki i dokładniejsze wyjaśnienia. To bardzo ważny temat nie tylko na egzaminie zawodowym INF.03, ale też w codziennej pracy z interfejsami użytkownika w aplikacjach webowych.

2.1. Pola tekstowe (input type=”text”, „email”, „number”, itd.)

Pola tekstowe są najczęściej używanymi polami w formularzach. Dane z takich pól pobieramy za pomocą właściwości .value.

<input type="text" id="imie" placeholder="Podaj imię" />
<input type="email" id="email" placeholder="Podaj e-mail" />
<input type="number" id="wiek" placeholder="Podaj wiek" />

let imie = document.getElementById("imie").value;
let email = document.getElementById("email").value;
let wiek = parseInt(document.getElementById("wiek").value);

📌 Uwaga: Domyślnie value zawsze zwraca wartość jako tekst (string). Jeśli potrzebujesz liczby, użyj parseInt() lub parseFloat().

2.2. Checkbox – pole wyboru (input type=”checkbox”)

Checkbox zwraca true (jeśli zaznaczony) lub false (jeśli nie).

<input type="checkbox" id="zgoda" /> Akceptuję regulamin

let czyZaznaczone = document.getElementById("zgoda").checked;

2.3. Radio – wybór jednej opcji z wielu (input type=”radio”)

Radia działają w grupach (ta sama name) i tylko jeden może być zaznaczony. Isnieją proste dwie metody na sprawdzenie wartości radio:

<form id="formularz">
      <input type="radio" name="plec" value="kobieta" /> Kobieta
      <input type="radio" name="plec" value="mezczyzna" />
      Mężczyzna
      <button type="button" onclick="pobierzPlec()">Sprawdź płeć</button>
    </form>
    <script>
      function pobierzPlec() {
        let plec = document.forms["formularz"].elements["plec"].value;
        console.log("Wybrana płeć:", plec);
      }

    </script>

<form id="formularz">
      <input id="kobieta" type="radio" name="plec" value="kobieta" /> Kobieta
      <input id="mezczyzna" type="radio" name="plec" value="mezczyzna" />
      Mężczyzna
      <button type="button" onclick="pobierzPlec()">Sprawdź płeć</button>
    </form>
    <script>
      function pobierzPlec2() {
        if (document.getElementById("kobieta").checked) {
          console.log("Wybrano: kobieta");
        } else if (document.getElementById("mezczyzna").checked) {
          console.log("Wybrano: mężczyzna");
        } else {
          console.log("Nie wybrano nic");
        }
      }
    </script>

2.4. Select – lista rozwijana (select)

<select id="miasto">
  <option value="warszawa">Warszawa</option>
  <option value="krakow">Kraków</option>
</select>

let wybraneMiasto = document.getElementById("miasto").value; // "warszawa"

Jeśli chcesz uzyskać też tekst wybranej opcji:

let select = document.getElementById("miasto");
let tekstOpcji = select.options[select.selectedIndex].text; // "Warszawa"

2.5. Textarea – większe pole tekstowe

<textarea id="opis" rows="4" cols="30">Wpisz opis...</textarea>

let opis = document.getElementById("opis").value;

2.6. Przykład – Pobieranie wszystkich danych z formularza

<form id="formularz">
  <input type="text" id="imie" placeholder="Imię" />
  <input type="number" id="wiek" placeholder="Wiek" />
  <input type="checkbox" id="newsletter" /> Zapisz mnie do newslettera<br />
  <input type="radio" name="plec" value="kobieta" /> Kobieta
  <input type="radio" name="plec" value="mezczyzna" /> Mężczyzna<br />
  <select id="miasto">
    <option value="wroclaw">Wrocław</option>
    <option value="gdansk">Gdańsk</option>
  </select>
<br />
  <textarea id="komentarz">Twój komentarz</textarea>
<br />
  <button type="button" onclick="pobierzDane()">Wyślij</button>
</form>

function pobierzDane() {
  let imie = document.getElementById("imie").value;
  let wiek = document.getElementById("wiek").value;
  let newsletter = document.getElementById("newsletter").checked;
  let plec = document.forms["formularz"].elements["plec"].value;
  let miasto = document.getElementById("miasto").value;
  let komentarz = document.getElementById("komentarz").value;

  console.log("Imię:", imie);
  console.log("Wiek:", wiek);
  console.log("Newsletter:", newsletter);
  console.log("Płeć:", plec);
  console.log("Miasto:", miasto);
  console.log("Komentarz:", komentarz);
}

3. Zapisywanie danych do elementów HTML (rozszerzenie)

3.1. Zmiana treści tekstowej — `innerHTML` i `innerText`

Aby zmienić tekst w elemencie HTML (np. paragrafie, nagłówku, divie), używamy właściwości:

innerHTML – umożliwia wstawianie również kodu HTML
innerText – wstawia tylko tekst (ignoruje HTML)

Przykład 1 – paragraf z komunikatem:

<p id="komunikat">Tutaj pojawi się tekst...</p>

document.getElementById("komunikat").innerHTML = "Witaj, uczniu!";

Możemy też dynamicznie dodać pogrubienie lub inny znacznik HTML:

document.getElementById("komunikat").innerHTML = "<strong>To ważna wiadomość!</strong>";

Kiedy używać `innerText`?

Jeśli chcesz uniknąć interpretowania HTML (np. użytkownik wpisuje dane), używaj innerText.

3.2. Zmiana obrazków — `src`

Do zmiany obrazka służy właściwość .src. Możesz do niej przypisać dowolną ścieżkę (np. URL lub nazwę pliku lokalnego).

Przykład 2 – zmiana zdjęcia:

<img id="zdjecie" src="zdj1_duze.jpg" />

let numer = 2;
document.getElementById("zdjecie").src = `zdj${numer}_duze.jpg`;

Tutaj wykorzystujemy tzw. template string (backticki `), żeby w prosty sposób wstawić zmienną do ciągu tekstowego. Taka składnia jest bardzo przydatna:

let imie = "Kasia";
document.getElementById("komunikat").innerHTML = `Witaj, ${imie}!`;

3.3. Zmiana atrybutów — `setAttribute()`

Czasami potrzebujesz zmienić inne atrybuty, np. alt, title, href, class.

document.getElementById("zdjecie").setAttribute("alt", "Nowy opis obrazka");
document.getElementById("link").setAttribute("href", "https://nowy-adres.pl");

3.4. Zmiana klas i stylów — `className`, `style`

Zmiana klasy CSS:

document.getElementById("komunikat").className = "blad";

Zmiana stylu bezpośrednio:

document.getElementById("komunikat").style.color = "red";
document.getElementById("komunikat").style.fontWeight = "bold";

3.5. Przykład praktyczny (do ćwiczenia)

<input type="number" id="nr" min="1" max="5">
<button onclick="zmienZdjecie()">Zmień zdjęcie</button>

<img id="galeria" src="zdj1_duze.jpg" />

function zmienZdjecie() {
  let numer = document.getElementById("nr").value;
  document.getElementById("galeria").src = `zdj${numer}_duze.jpg`;
}

4. Instrukcje warunkowe

W JavaScript warunki sprawdzamy np. tak:

if (warunek) {
  // kod jeśli prawda
} else {
  // kod jeśli fałsz
}

Przykład:

if (zaznaczone) {
  alert("Dziękujemy za zgodę!");
} else {
  alert("Musisz zaznaczyć zgodę.");
}

5. Obsługa zdarzeń – onclick i addEventListener + funkcje

onclick w HTML:

<button onclick="wyswietl()">Kliknij</button>

onclick w JS:

document.getElementById("przycisk").onclick = wyswietl;

addEventListener (zalecane w nowoczesnym kodzie):

document.getElementById("przycisk").addEventListener("click", wyswietl);

Przykład praktyczny: Formularz kontaktowy z walidacją

HTML:

<input type="text" id="imie" placeholder="Imię" />
<input type="text" id="nazwisko" placeholder="Nazwisko" />
<textarea id="zgloszenie" placeholder="Wpisz swoją sprawę"></textarea>
<input type="checkbox" id="regulamin" />
<label for="regulamin">Zapoznałem się z regulaminem</label>
<button id="przeslij">Prześlij</button>

<br />
<p id="komunikat"></p>

JavaScript:

document.getElementById("przeslij").addEventListener("click", function () {
  let imie = document.getElementById("imie").value.toUpperCase();
  let nazwisko = document.getElementById("nazwisko").value.toUpperCase();
  let zgloszenie = document.getElementById("zgloszenie").value;
  let zaakceptowano = document.getElementById("regulamin").checked;
  let paragraf = document.getElementById("komunikat");

  if (!zaakceptowano) {
    paragraf.innerHTML = "Musisz zapoznać się z regulaminem.";
    paragraf.style.color = "red";
  } else {
    paragraf.innerHTML = `${imie} ${nazwisko}<br/>Treść Twojej sprawy: ${zgloszenie}`;
    paragraf.style.color = "navy";
  }
});

Zadanie z egzaminu INF.03 – Galeria zdjęć

Użytkownik może:

Kliknąć w miniaturkę zdjęcia → duże zdjęcie się zmienia
Kliknąć „Next” → zdjęcie następne
Kliknąć „Prev” → zdjęcie poprzednie
Obrazów jest 5, zmieniają się cyklicznie (1→5, 5→1)

JavaScript:

<img
      id="aktywneZdjecie"
      src="zdjecie1.jpg"
      alt="Aktywne zdjęcie"
      width="400"
    />

    <div id="miniatury">
      <img
        src="zdjecie1.jpg"
        class="miniatura"
        data-nr="1"
        width="80"
        onclick="wyswietlZdjecie(1)"
      />
      <img
        src="zdjecie2.jpg"
        class="miniatura"
        data-nr="2"
        width="80"
        onclick="wyswietlZdjecie(2)"
      />
      <img
        src="zdjecie3.jpg"
        class="miniatura"
        data-nr="3"
        width="80"
        onclick="wyswietlZdjecie(3)"
      />
      <img
        src="zdjecie4.jpg"
        class="miniatura"
        data-nr="4"
        width="80"
        onclick="wyswietlZdjecie(4)"
      />
      <img
        src="zdjecie5.jpg"
        class="miniatura"
        data-nr="5"
        width="80"
        onclick="wyswietlZdjecie(5)"
      />
    </div>

    <button id="poprzednie" onclick="poprzednieZdjecie()">prev</button>
    <button id="nastepne" onclick="nastepneZdjecie()">next</button>
    <script>
      let numerAktywnegoZdjecia = 1;

      function wyswietlZdjecie(numer) {
        document.getElementById("aktywneZdjecie").src =
          "zdjecie" + numer + ".jpg";
        numerAktywnegoZdjecia = numer;
      }

      function poprzednieZdjecie() {
        let nowyNumer = numerAktywnegoZdjecia - 1;
        if (nowyNumer < 1) {
          nowyNumer = 5;
        }
        wyswietlZdjecie(nowyNumer);
      }

      function nastepneZdjecie() {
        let nowyNumer = numerAktywnegoZdjecia + 1;
        if (nowyNumer > 5) {
          nowyNumer = 1;
        }
        wyswietlZdjecie(nowyNumer);
      }
    </script>

Przydatne funkcje i obiekty

liczbaDziesietna == „” – jego zadaniem jest sprawdzenie, czy zmienne mają tą samą wartosc
liczbaDziesietna === „” – jego zadaniem jest sprawdzenie, czy zmienne mają ten sam typ i wartosc
isNaN(a) – funkcja prawdzająca czy zmienna jest liczbą
Number(a) – zamienienie zmiennej na liczbę
Math.abs(a)) – wartość bezwzględna z a
Math.floor(a) – zaokrąglenie liczby w dół

Skrypty do opracowania:

– JS1 – przeliczanie

- petla z algorytmem przeliczającym
```js
while (liczba > 0) {
        binarny = (liczba % 2) + binarny;
        licznik++;

        if (licznik % 4 === 0 && liczba >= 2) {
          binarny = " " + binarny;
        }

        liczba = Math.floor(liczba / 2);
      }
```

Lekcja JavaScript: Praca z formularzami, zdarzeniami i manipulacja DOM

Cele lekcji

Wstęp teoretyczny

1. Model DOM (Document Object Model)

2. Pobieranie danych z formularzy

2.1. Pola tekstowe (input type=”text”, „email”, „number”, itd.)

2.2. Checkbox – pole wyboru (input type=”checkbox”)

2.3. Radio – wybór jednej opcji z wielu (input type=”radio”)

2.4. Select – lista rozwijana (select)

2.5. Textarea – większe pole tekstowe

2.6. Przykład – Pobieranie wszystkich danych z formularza

3. Zapisywanie danych do elementów HTML (rozszerzenie)

3.1. Zmiana treści tekstowej — innerHTML i innerText

Przykład 1 – paragraf z komunikatem:

Kiedy używać innerText?

3.2. Zmiana obrazków — src

Przykład 2 – zmiana zdjęcia:

3.3. Zmiana atrybutów — setAttribute()

3.4. Zmiana klas i stylów — className, style

3.5. Przykład praktyczny (do ćwiczenia)

4. Instrukcje warunkowe

5. Obsługa zdarzeń – onclick i addEventListener + funkcje

Przykład praktyczny: Formularz kontaktowy z walidacją

HTML:

JavaScript:

Zadanie z egzaminu INF.03 – Galeria zdjęć

JavaScript:

Przydatne funkcje i obiekty

Skrypty do opracowania:

– JS1 – przeliczanie

– JS2 – klasyk

– JS3 – klasyk

– JS4 – klasyk

– JS5 – filtry

– JS6 – czat trudne

– JS7 – znikajace fromularze

– JS8 – rejestracja

– JS9 – prostrza galeria

– [JS]()

– [JS]()

– [JS]()

– [JS]()

3.1. Zmiana treści tekstowej — `innerHTML` i `innerText`

Kiedy używać `innerText`?

3.2. Zmiana obrazków — `src`

3.3. Zmiana atrybutów — `setAttribute()`

3.4. Zmiana klas i stylów — `className`, `style`