JavaScript - DOM - zadania
- Praktyczne zadania
- Teoria
- Pomoce do ćwiczeń
Zadanie 1: Zmiana koloru tła przycisku po kliknięciu
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zadanie 1 – Zmiana Koloru</title>
<style>
/* Prosty styl dla przycisku, żeby był widoczny */
#mojPrzycisk {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
/* Początkowy kolor – szary */
background-color: ltgray;
}
</style>
</head>
<body>
<h3>Kliknij przycisk, aby zmienić jego kolor</h3>
<button id=”mojPrzycisk” onclick=”zmienKolor()”>Zmień mój kolor!</button>
<script>
// 3. JS (Logika): Definiujemy funkcję, która wykona zmianę
function zmienKolor() {
// a) JS (Pobranie): Łapiemy przycisk po jego ID
const przycisk = document.getElementById(„mojPrzycisk”);
// b) Modyfikacja: Zmieniamy styl CSS (background-color)
// Uwaga: W JS używamy CamelCase -> backgroundColor zamiast background-color
przycisk.style.backgroundColor = „gold”;
// Opcjonalnie: zmieniamy też kolor tekstu na przycisku
przycisk.style.color = „white”;
}
</script>
</body>
</html>
Dokładna analiza kodu:
<button id="mojPrzycisk" onclick="zmienKolor()">:id="mojPrzycisk": Nadajemy unikalną nazwę, żeby JS wiedział, o który przycisk chodzi.onclick="zmienKolor()": To jest „wyzwalacz”. Mówimy przeglądarce: „Gdy użytkownik kliknie ten przycisk, znajdź w skrypcie funkcję o nazwiezmienKolori ją uruchom”. Nawiasy()są obowiązkowe!
function zmienKolor() { ... }: To jest pojemnik na kod. Kod w środku klamerek{}wykona się tylko wtedy, gdy funkcja zostanie wywołana (czyli po kliknięciu).const przycisk = document.getElementById("mojPrzycisk");: Wewnątrz funkcji, pierwszą rzeczą jest stworzenie zmiennej (używamyconst, bo ten element się nie zmieni) i przypisanie do niej „złapanego” elementu HTML. Od teraz zmiennaprzyciskreprezentuje ten konkretny guzik.przycisk.style.backgroundColor = "gold";: Odwołujemy się do właściwości.stylenaszego obiektu. Następnie wybieramy właściwość CSS, którą chcemy zmienić. Pamiętamy o zasadzie CamelCase:background-color(CSS) zamienia się nabackgroundColor(JS).
Zadanie 2: Kopiowanie tekstu z pola do akapitu
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zadanie 2 – Kopiowanie Tekstu</title>
</head>
<body>
<h3>Wpisz coś i kliknij przycisk</h3>
<input type=”text” id=”poleTekstowe” placeholder=”Wpisz imię…”>
<button onclick=”kopiujTekst()”>Pokaż wynik</button>
<p id=”miejsceNaWynik”>Tutaj pojawi się wpisany tekst…</p>
<script>
// 3. JS (Logika): Funkcja kopiująca
function kopiujTekst() {
// a) JS (Pobranie): Łapiemy oba elementy: wejście i wyjście
const inputElement = document.getElementById(„poleTekstowe”);
const paragrafElement = document.getElementById(„miejsceNaWynik”);
// b) Pobranie danych: Wyciągamy to, co użytkownik wpisał (właściwość .value)
let wpisanyTekst = inputElement.value;
// c) Modyfikacja treści: Wstawiamy pobrany tekst do akapitu (właściwość .innerHTML)
paragrafElement.innerHTML = „Wpisano: <b>” + wpisanyTekst + „</b>”;
}
</script>
</body>
</html>
Dokładna analiza kodu:
inputElement.value: To jest kluczowy moment. Pola tekstowe (input) przechowują swoją treść we właściwości.value. Przypisujemy tę treść do zmiennejwpisanyTekst.paragrafElement.innerHTML = ...: Akapity (p), divy czy nagłówki nie mają.value. Ich treść znajduje się pomiędzy tagami. Aby ją zmienić, używamy.innerHTML.Łączenie tekstów (Konkatenacja): Używamy znaku
+, aby połączyć stały tekst („Wpisano: „) z wartością zmiennej. Możemy też wstrzykiwać znaczniki HTML (np.<b>), które przeglądarka zinterpretuje.
Zadanie 3: Prosty Kalkulator Dodawania (Konwersja Typów!)
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zadanie 3 – Dodawanie</title>
<style>
input { width: 50px; margin: 5px; }
</style>
</head>
<body>
<h3>Kalkulator Dodawania</h3>
<input type=”number” id=”liczbaA”> +
<input type=”number” id=”liczbaB”>
<button onclick=”dodajLiczby()”>=</button>
<p id=”wynikDodawania”>Wynik: </p>
<script>
function dodajLiczby() {
// a) Pobranie elementów
const inputA = document.getElementById(„liczbaA”);
const inputB = document.getElementById(„liczbaB”);
const wynikP = document.getElementById(„wynikDodawania”);
// b) Pobranie wartości (PAMIĘTAJ: to są tekstowe „stringi”!)
let wartoscA = inputA.value;
let wartoscB = inputB.value;
// c) BARDZO WAŻNE: Konwersja na liczby zmiennoprzecinkowe
// Bez tego „2” + „2” dałoby „22”
let liczba1 = parseFloat(wartoscA);
let liczba2 = parseFloat(wartoscB);
// d) Logika: Prawdziwe dodawanie matematyczne
let suma = liczba1 + liczba2;
// e) Wyświetlenie wyniku
wynikP.innerHTML = „Wynik: <b>” + suma + „</b>”;
}
</script>
</body>
</html>
Dokładna analiza kodu:
let wartoscA = inputA.value;: Choć input matype="number", JavaScript pobiera stamtąd dane jako tekst (np. „10”).parseFloat(wartoscA): To funkcja wbudowana w JS, która bierze tekst (np. „10.5”) i zamienia go na prawdziwą liczbę, na której można wykonywać operacje matematyczne. Jeśli uczniowie o tym zapomną, zamiast dodawać, będą „sklejać” wyrazy.parseFloatjest bezpieczniejszy niżparseInt, bo obsługuje też liczby z kropką dziesiętną (częste na egzaminach przy cenach lub wagach).
Zadanie 4: Pokazywanie i Ukrywanie elementu
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Zadanie 4 – Ukrywanie</title>
<style>
#blokTekstu {
width: 200px;
padding: 20px;
background-color: lightgreen;
border: 1px solid green;
/* Początkowo widoczny */
display: block;
}
</style>
</head>
<body>
<h3>Manipulacja widocznością</h3>
<div id=”blokTekstu”>To jest blok tekstu do ukrycia.</div>
<br>
<button onclick=”ukryjElement()”>Ukryj</button>
<button onclick=”pokazElement()”>Pokaż</button>
<script>
// Ta funkcja chowa element
function ukryjElement() {
// Zmieniamy styl display na 'none’ – element znika całkowicie
document.getElementById(„blokTekstu”).style.display = „none”;
}
// Ta funkcja pokazuje element
function pokazElement() {
// Zmieniamy styl display z powrotem na 'block’ (lub 'inline’ dla tekstu)
document.getElementById(„blokTekstu”).style.display = „block”;
}
</script>
</body>
</html>
Dokładna analiza kodu:
style.display = "none": W CSSdisplay: nonesprawia, że element znika ze strony i nie zajmuje już miejsca. Używamy tego w JS, aby dynamicznie chować komunikaty błędów, menu lub galerie.style.display = "block": Przywraca widoczność elementu blokowego.
