1. Wstęp teoretyczny
Na poprzednich zajęciach poznaliśmy zmienne, instrukcje warunkowe i funkcje. Teraz będziemy utrwalać te umiejętności poprzez praktyczne ćwiczenia.
Ważne elementy, które warto pamiętać:
- document.getElementById(„…”) – pozwala odwołać się do elementu strony (np. pola tekstowego lub paragrafu).
- innerHTML – umożliwia zmianę treści elementu na stronie.
- value – umożliwia odwołanie się do wartosci w elemencie.
- Math.random() – generuje losową liczbę od 0 do 1.
- Math.floor() – zaokrągla liczbę w dół (np. przy losowaniu liczb całkowitych).
2. Krótkie przykłady
Przykład 1 – prosty komunikat po kliknięciu
<button onclick="funkcja()">Kliknij mnie</button> - przypisanie funkcji do przycisku
function powitanie() {
- tworzenie funkcji
}
alert("Cześć! Miło Cię widzieć!"); - prosty alert
let numery = ["raz", "dwa", "trzy"]; - deklarowanie tablicy
let numer = numery[0]; - przypisanie pierwszego elementu tablicy do zmiennej
document.body.style.fontSize = "200px"; - odwołanie sie do stylów ciała strony i zmiana rozmiaru tekstu3. Zadania dla uczniów
Zadanie 1 (łatwiejsze)
Stwórz stronę z przyciskiem, który po kliknięciu wyświetli w okienku alert dowolny żart, cytat albo krótką sentencję.
Zadanie 2
Napisz stronę, która losuje liczbę od 1 do 50 i wyświetla ją w paragrafie na stronie.
Zadanie 3
Zrób stronę z przyciskiem „Zmień kolor tła”, kolor wybierzesz z listy rozwijanej, a po kliknięciu przycisku kolor tła ma się zmienić biały, niebieski, różowy, szary.
Zadanie 4
Stwórz stronę z przyciskiem „Losowe imię”, który po kliknięciu wylosuje jedno imię z listy (np. Kasia, Tomek, Ola, Piotr) i wyświetli je na stronie.
Zadanie 5 (dla chętnych)
Utwórz stronę z przyciskiem „Rzut kostką”, który losowo pokaże liczbę oczek od 1 do 6 jako alert.