Zajęcia -Tomasz Sadowski

Projekt: Interaktywna strona internetowa

Podczas tej lekcji stworzymy prostą stronę internetową z dynamicznymi funkcjonalnościami. Projekt będzie rozwijany w 6 mniejszych krokach, tak aby każdy z nich wprowadzał nowe zagadnienia.

Ćwiczenie 1: Przygotowanie struktury strony

Cel: Uczniowie nauczą się, jak stworzyć stronę HTML jako bazę dla JavaScript.

Tworzenie pliku HTML

Otwórz edytor kodu (np. Visual Studio Code).
Utwórz nowy plik o nazwie index.html.

Wklej poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Interaktywna Strona</title>
</head>
<body>
    <h1 id="welcome">Witaj na mojej stronie!</h1>
    <p>Kliknij poniższy przycisk, aby zmienić powitanie:</p>
    <button onclick="changeGreeting()">Zmień Powitanie</button>
    <script src="script.js"></script>
</body>
</html>

Tworzenie pliku JavaScript

Utwórz nowy plik o nazwie script.js.

Dodaj do niego kod:

function changeGreeting() {
    document.getElementById("welcome").innerText = "Witaj ponownie!";
}

Wyjaśnienie kodu
- HTML:
  - <h1> i <p> to elementy wyświetlające tekst na stronie.
  - <button>: Przycisk, który wywołuje funkcję changeGreeting().
- JavaScript:
  - document.getElementById("welcome"): Znajduje element HTML o identyfikatorze welcome.
  - innerText: Zmienia tekst wewnątrz tego elementu.
Testowanie: Otwórz plik index.html w przeglądarce. Kliknięcie przycisku powinno zmienić tekst powitania.

Ćwiczenie 2: Zmiana koloru tła

Cel: Uczniowie nauczą się zmieniać style CSS za pomocą JavaScript.

Dodaj nową sekcję do index.html:

<section>
    <h2>Zmiana Koloru Tła</h2>
    <button onclick="changeColor('red')">Czerwony</button>
    <button onclick="changeColor('blue')">Niebieski</button>
    <button onclick="changeColor('green')">Zielony</button>
</section>

Zaktualizuj script.js:

function changeColor(color) {
    document.body.style.backgroundColor = color;
}

Wyjaśnienie kodu:
- document.body.style.backgroundColor: Zmienia kolor tła całej strony.
- Argument color w funkcji pozwala ustawić dowolny kolor.

Ćwiczenie 3: Walidacja formularza

Cel: Uczniowie nauczą się sprawdzać poprawność danych w formularzu.

Dodaj nową sekcję do index.html:

<section>
    <h2>Formularz Kontaktowy</h2>
    <form onsubmit="return validateForm()">
        <label for="name">Imię:</label>
        <input type="text" id="name">
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email">
        <br>
        <button type="submit">Wyślij</button>
    </form>
</section>

Zaktualizuj script.js:

function validateForm() {
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;

    if (!name || !email) {
        alert("Uzupełnij wszystkie pola!");
        return false;
    }
    alert("Formularz został wysłany!");
    return true;
}

Ćwiczenie 4: Dodawanie wiadomości

Cel: Uczniowie nauczą się dodawać elementy do strony dynamicznie.

Dodaj nową sekcję do index.html:

<section>
    <h2>Dynamiczne Wiadomości</h2>
    <input type="text" id="message" placeholder="Wpisz wiadomość">
    <button onclick="addMessage()">Dodaj Wiadomość</button>
    <ul id="messages"></ul>
</section>

Zaktualizuj script.js:

function addMessage() {
    const message = document.getElementById("message").value;
    if (!message) {
        alert("Wpisz wiadomość!");
        return;
    }
    const list = document.getElementById("messages");
    const listItem = document.createElement("li");
    listItem.innerText = message;
    list.appendChild(listItem);
}

Ćwiczenie 5: Zegar w czasie rzeczywistym

Cel: Uczniowie nauczą się aktualizować zawartość strony w czasie rzeczywistym.

Dodaj nową sekcję do index.html:

<section>
    <h2>Aktualny Czas</h2>
    <div id="clock"></div>
</section>

Zaktualizuj script.js:

function showTime() {
    const now = new Date();
    document.getElementById("clock").innerText = now.toLocaleTimeString();
}

setInterval(showTime, 1000);

Ćwiczenie 6: Dodanie stylów CSS

Cel: Uczniowie nauczą się łączyć JavaScript z CSS.

Dodaj do index.html link do stylów:

<link rel="stylesheet" href="style.css">

Utwórz plik style.css i dodaj style dla dynamicznych elementów.

Przydatne linki

Seria Ćwiczeń: Tworzenie Interaktywnej Strony z JavaScript

Poniżej znajduje się seria ćwiczeń, które prowadzą uczniów przez proces tworzenia interaktywnej strony internetowej. Zadania są podzielone na mniejsze kroki i łączą się w spójny projekt.

Ćwiczenie 1: Struktura strony HTML

Stwórz podstawowy szkielet strony internetowej z sekcjami, które będą używane w dalszych ćwiczeniach.

Utwórz plik index.html.
Dodaj następujące sekcje:
- Nagłówek z tytułem strony.
- Sekcję powitania z tekstem i przyciskiem.
- Sekcję, w której użytkownik może wpisać swoje imię i wyświetlić spersonalizowane powitanie.
Połącz stronę z plikiem JavaScript (script.js) za pomocą znacznika <script>.

Ćwiczenie 2: Zmiana treści strony za pomocą JavaScript

Dodaj funkcjonalność, dzięki której po kliknięciu przycisku w sekcji powitania, tekst w nagłówku zmienia się na inny.

W pliku script.js napisz funkcję, która zmienia treść w nagłówku.
Powiąż przycisk w HTML z funkcją w JavaScript.

Ćwiczenie 3: Dynamiczna zmiana kolorów

Dodaj przyciski umożliwiające użytkownikowi zmianę koloru tła strony.

Utwórz w HTML trzy przyciski, np. "Czerwony", "Zielony", "Niebieski".
W JavaScript napisz funkcję, która zmienia kolor tła na wybrany.
Powiąż każdy przycisk z odpowiednim kolorem.

Ćwiczenie 4: Interaktywny formularz

Dodaj formularz, który sprawdza, czy użytkownik wypełnił wszystkie pola przed wysłaniem.

W HTML utwórz formularz z polami: imię, e-mail, wiadomość.
Dodaj przycisk "Wyślij".
W JavaScript napisz funkcję, która sprawdza, czy wszystkie pola są wypełnione. Jeśli nie, wyświetl alert z informacją.

Ćwiczenie 5: Dodawanie listy wiadomości

Utwórz sekcję, w której użytkownik może wpisywać wiadomości i dodawać je do listy na stronie.

W HTML dodaj pole tekstowe, przycisk "Dodaj" i pustą listę (<ul>).
W JavaScript napisz funkcję, która:
- Pobiera tekst z pola.
- Dodaje wpis jako nowy element listy.
- Wyświetla alert, jeśli pole tekstowe jest puste.

Ćwiczenie 6: Dynamiczny zegar

Dodaj na stronie zegar, który będzie wyświetlał aktualny czas w czasie rzeczywistym.

W HTML utwórz pusty element (np. <div>), w którym będzie wyświetlany czas.
W JavaScript napisz funkcję, która aktualizuje czas co sekundę.
Użyj funkcji setInterval, aby zegar działał automatycznie.

Ćwiczenie 7: Style CSS dla elementów dynamicznych

Dodaj style do projektu, aby strona wyglądała atrakcyjnie.

Utwórz plik style.css i połącz go z index.html.
Dodaj style dla:
- Nagłówków.
- Listy wiadomości.
- Przycisków (np. zmiana koloru po najechaniu myszką).

Instrukcje końcowe

Po ukończeniu wszystkich ćwiczeń uczniowie stworzą stronę, która zawiera:

Interaktywny nagłówek.
Zmienne kolory tła.
Walidację formularza.
Dodawanie i wyświetlanie wiadomości.
Zegar w czasie rzeczywistym.

Projekt końcowy: Spójna, interaktywna strona internetowa z dynamicznymi elementami sterowanymi przez JavaScript.