1. Wstęp teoretyczny
W poprzedniej lekcji poznaliśmy, do czego służy JavaScript. Teraz przejdziemy do podstaw programowania, czyli:
- zmienne – służą do przechowywania danych, np. liczby, tekstu.
- operatory – np. dodawanie (+), odejmowanie (-), porównanie (==, >, <).
- instrukcje warunkowe – pozwalają sprawdzać, czy warunek jest spełniony.
- funkcje – to fragmenty kodu, które można wielokrotnie uruchamiać.
JavaScript sprawia, że strona staje się bardziej interaktywna, a użytkownik może „rozmawiać” ze stroną – wprowadzać dane, naciskać przyciski, dostawać odpowiedzi.
2. Przykłady
Przykład 1 – zmienne i operacje
<!DOCTYPE html>
<html>
<head>
<title>Zmienne w JS</title>
</head>
<body>
<script>
let imie = "Anna";
let wiek = 16;
document.write("Cześć, mam na imię " + imie + " i mam " + wiek + " lat.");
</script>
</body>
</html>Efekt: Na stronie wyświetli się tekst z użyciem zmiennych.
Przykład 2 – instrukcja warunkowa
<!DOCTYPE html>
<html>
<head>
<title>Instrukcje warunkowe</title>
</head>
<body>
<script>
let liczba = 10;
if (liczba > 5) {
alert("Liczba jest większa niż 5!");
} else {
alert("Liczba jest mniejsza lub równa 5.");
}
</script>
</body>
</html>Efekt: Program sprawdza wartość liczby i wyświetla odpowiedni komunikat.
Przykład 3 – funkcja sprawdzająca wiek
<!DOCTYPE html>
<html>
<head>
<title>Sprawdzanie wieku</title>
</head>
<body>
<input id="wiek" type="number" placeholder="Podaj swój wiek">
<button onclick="sprawdz()">Sprawdź</button>
<p id="wynik"></p>
<script>
function sprawdz() {
let w = Number(document.getElementById("wiek").value);
if (w >= 18) {
document.getElementById("wynik").innerHTML = "Jesteś pełnoletni!";
} else {
document.getElementById("wynik").innerHTML = "Jesteś niepełnoletni.";
}
}
</script>
</body>
</html>Efekt: Po wpisaniu wieku i kliknięciu przycisku, na stronie wyświetli się odpowiedni komunikat.
Przykład 4 – prosty licznik kliknięć
<!DOCTYPE html>
<html>
<head>
<title>Licznik</title>
</head>
<body>
<button onclick="zwieksz()">Kliknij mnie</button>
<p id="licznik">Kliknięcia: 0</p>
<script>
let liczbaKlikniec = 0;
function zwieksz() {
liczbaKlikniec++;
document.getElementById("licznik").innerHTML = "Kliknięcia: " + liczbaKlikniec;
}
</script>
</body>
</html>Efekt: Każde kliknięcie przycisku zwiększa licznik na stronie.
3. Zadania dla uczniów
Zadanie 1
Napisz stronę, na której użytkownik wpisze swoje imię w polu tekstowym, a po kliknięciu przycisku pojawi się komunikat: „Witaj, [imię użytkownika]!”
Zadanie 2
Napisz program, który poprosi użytkownika o podanie liczby i sprawdzi, czy liczba jest parzysta czy nieparzysta.
Zadanie 3
Stwórz prostą stronę z przyciskiem „Losuj liczbę”. Po kliknięciu na stronie ma pojawić się losowa liczba od 1 do 10.
Zadanie 4
Zaprojektuj stronę, która liczy pole prostokąta. Użytkownik podaje długość i szerokość, a program wyświetla wynik.
Zadanie 5 (dla chętnych)
Zrób stronę z przyciskiem „Zmień kolor tła”, który losowo wybierze jeden z trzech kolorów (np. czerwony, zielony, niebieski).