JavaScript - DOM

Pobieranie elementów ze strony (DOM)

Zanim JavaScript cokolwiek zrobi z Twoją stroną (zmieni kolor, odczyta wpisaną liczbę), musi najpierw „złapać” odpowiedni element HTML. Służy do tego DOM (Document Object Model), czyli reprezentacja Twojego kodu HTML w postaci drzewa, które JavaScript rozumie.

Główne metody:

• document.getElementById("nazwa_id")

  • Jak działa: Szuka w HTML-u elementu, który ma konkretne id. Ponieważ id na stronie musi być unikalne, zawsze zwraca dokładnie jeden element.

  • Kiedy używać: Zawsze, gdy element w HTML ma nadane id. To najpewniejszy i najczęstszy sposób na egzaminie.

• document.querySelector("selektor_css")

  • Jak działa: Działa dokładnie tak samo jak selektory w CSS. Możesz podać klasę (.moja-klasa), tag (div) lub id (#moje-id). Zwraca pierwszy napotkany element pasujący do wzorca.

  • Kiedy używać: Kiedy element nie ma id, ale ma np. specyficzną klasę.

Przykład:

// HTML: <div id=”wynik”></div>
const poleWyniku = document.getElementById(„wynik”);

Odczytywanie danych z formularzy (Inputów)

Kiedy już „złapiemy” element (np. pole tekstowe <input>), chcemy dowiedzieć się, co użytkownik w nim wpisał. Używamy do tego właściwości .value lub .checked.

• .value (dla pól tekstowych, liczbowych, haseł, list rozwijanych <select>): Wyciąga zawartość wpisaną/wybraną przez użytkownika.

• .checked (dla pól typu checkbox i radio): Nie zwraca tekstu, ale wartość logiczną: true (jeśli pole jest zaznaczone) lub false (jeśli nie jest).

Przykład:

// HTML: <input type=”number” id=”cena”>
// HTML: <input type=”checkbox” id=”regulamin”>

let wpisanaCena = document.getElementById(„cena”).value;
let czyZaakceptowano = document.getElementById(„regulamin”).checked;

Konwersja typów (BARDZO WAŻNE)

Złota zasada: Wszystko, co pobierzesz z inputa za pomocą .value, dla JavaScriptu jest Zawsze Tekstem (Stringiem). Nawet jeśli input ma type="number" i wpiszesz w niego 15.

Jeśli pobierzesz „10” i „5” i spróbujesz je dodać ("10" + "5"), JavaScript je sklei i otrzymasz "105". Aby móc wykonywać obliczenia matematyczne, musisz zamienić ten tekst na prawdziwą liczbę.

Jak to zrobić:

• parseInt(zmienna) – zamienia tekst na liczbę całkowitą (odcina to, co po przecinku).

• parseFloat(zmienna) – zamienia tekst na liczbę zmiennoprzecinkową (zachowuje ułamki).

Przykład:

let tekstCena = document.getElementById(„cena”).value; // np. „150.50”
let liczbaCena = parseFloat(tekstCena); // teraz to prawdziwe 150.50

// Można to zapisać krócej w jednej linijce:
let waga = parseFloat(document.getElementById(„waga”).value);

Rodzaje typów w JS:

Modyfikacja treści na stronie

Kiedy już pobierzesz dane, przeliczysz je (np. pomnożysz cenę przez ilość), musisz wyświetlić wynik użytkownikowi na stronie (nie w konsoli, nie w wyskakującym okienku alert(), tylko bezpośrednio w HTML).

Służy do tego właściwość .innerHTML. Zastępuje ona wszystko, co znajduje się pomiędzy tagami otwierającym i zamykającym danego elementu.

Przykład:

// HTML: <p id=”komunikat”>Tutaj pojawi się wynik</p>

let koszt = 200;
document.getElementById(„komunikat”).innerHTML = „Całkowity koszt to: ” + koszt + ” zł”;

// Do .innerHTML można też wstrzykiwać znaczniki HTML!
document.getElementById(„komunikat”).innerHTML = „<b>” + koszt + ” zł</b>”;

Modyfikacja stylów CSS przez JS

JavaScript potrafi dynamicznie zmieniać wygląd strony, modyfikując style CSS w locie. Odwołujemy się do właściwości .style danego elementu.

Uwaga na nazewnictwo (CamelCase): W CSS nazwy dwuczłonowe piszemy z myślnikiem (np. background-color, font-size). W JavaScripcie myślnik oznacza odejmowanie, więc nazwy właściwości piszemy w formacie camelCase (łączymy słowa i powiększamy pierwszą literę kolejnego słowa) – backgroundColor, fontSize.

Przykład:

// HTML: <div id=”kwadrat”></div>

let mojKwadrat = document.getElementById(„kwadrat”);

mojKwadrat.style.backgroundColor = „red”; // Zmienia kolor tła na czerwony
mojKwadrat.style.fontSize = „20px”; // Zmienia wielkość czcionki
mojKwadrat.style.display = „none”; // Ukrywa element całkowicie

Zdarzenia (Events)

Zdarzenia to „wyzwalacze”. Mówią przeglądarce: Zrób coś, KIEDY użytkownik wykona jakąś akcję. Na egzaminie INF.03 najprościej i najszybciej jest przypisywać zdarzenia bezpośrednio w kodzie HTML jako atrybuty.

Najważniejsze zdarzenia na egzaminie:

• onclick – uruchamia się po kliknięciu myszką (np. w przycisk).

• onchange – uruchamia się, gdy wartość się zmieni i użytkownik „wyjdzie” z pola (np. po wybraniu innej opcji z listy rozwijanej <select>).

• oninput – uruchamia się przy każdym wpisanym znaku z klawiatury.

Przykład w HTML:

<button onclick=”oblicz()”>Oblicz koszt</button>

Funkcje

Funkcja to nazwany blok kodu, który grupuje wszystkie powyższe operacje. Kod wewnątrz funkcji nie wykona się sam z siebie w momencie załadowania strony – czeka cierpliwie, aż go „wywołasz” (najczęściej za pomocą Zdarzenia, np. kliknięcia w przycisk).

Tworzymy ją za pomocą słowa kluczowego function.

Jak wygląda kompletny proces w jednej funkcji:

function obliczKoszty() {
// 1 & 2. Pobieramy wpisaną wartość
let pobranyTekst = document.getElementById(„iloscDni”).value;

// 3. Konwertujemy tekst na liczbę
let dni = parseInt(pobranyTekst);

// Obliczenia (np. 100 zł za dzień)
let wynik = dni * 100;

// 4. Modyfikujemy treść na stronie, żeby pokazać wynik
document.getElementById(„wynikKoncowy”).innerHTML = „Koszt wycieczki: ” + wynik + ” PLN”;

// 5. Zmieniamy kolor tekstu na zielony
document.getElementById(„wynikKoncowy”).style.color = „green”;
}

Teraz przechodzimy z teorii do praktyki wykonujemy zadania znajdujące się >>TUTAJ<<