Zajęcia -Tomasz Sadowski

Lekcja 1: Wprowadzenie do JavaScript w projektowaniu stron internetowych

Cel lekcji:

Zrozumienie, czym jest JavaScript i jakie ma zastosowania w projektowaniu stron internetowych.
Poznanie podstawowej składni JavaScript oraz sposobu integracji z HTML i CSS.

Część teoretyczna

1. Co to jest JavaScript?

JavaScript (JS) to język programowania używany do dodawania interaktywności i dynamicznych funkcji do stron internetowych. W połączeniu z HTML (struktura) i CSS (stylizacja), JavaScript pozwala na tworzenie:

Interaktywnych przycisków i menu,
Dynamicznie aktualizowanych treści,
Walidacji formularzy,
Animacji,
Gier i zaawansowanych aplikacji webowych.

2. Jak JavaScript współpracuje z HTML i CSS?

HTML: Definiuje strukturę strony.
CSS: Odpowiada za wygląd i styl.
JavaScript: Dodaje interaktywność i logikę.

Przykład:

HTML tworzy przycisk.
CSS nadaje mu kolor i kształt.
JavaScript sprawia, że po kliknięciu przycisk wykonuje jakąś akcję (np. zmienia kolor strony).

3. Gdzie umieszcza się JavaScript?

JavaScript można umieścić:

Wewnątrz HTML (inline):

<button onclick="alert('Cześć!')">Kliknij mnie</button>

W sekcji <script> w HTML:

<script>
    alert('Cześć, świecie!');
</script>

W zewnętrznym pliku .js:
Plik script.js:

console.log('To jest zewnętrzny plik JavaScript.');

HTML:

<script src="script.js"></script>

4. Podstawowa składnia JavaScript

Zmienne: Przechowują dane.

let imie = "Jan";
const wiek = 25;
var miasto = "Warszawa";

Instrukcje warunkowe: Wykonują różne akcje w zależności od warunków.

if (wiek >= 18) {
    console.log("Jesteś pełnoletni.");
} else {
    console.log("Nie jesteś pełnoletni.");
}

Funkcje: Bloki kodu, które wykonują określone zadania.

function przywitaj() {
    console.log("Witaj, użytkowniku!");
}
przywitaj(); // Wywołanie funkcji

Część praktyczna przykładowa

Ćwiczenie 1: Twój pierwszy skrypt JavaScript

Utwórz plik HTML z prostym tekstem i przyciskiem:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Witaj w JavaScript</title>
</head>
<body>
    <h1>JavaScript na Twojej stronie</h1>
    <button onclick="przywitaj()">Kliknij mnie!</button>
    <script>
        function przywitaj() {
            alert("Cześć! To Twój pierwszy skrypt JavaScript.");
        }
    </script>
</body>
</html>

Ćwiczenie 2: Zmiana stylu elementu za pomocą JavaScript

Utwórz prostą stronę HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zmiana koloru</title>
    <style>
        h1 {
            text-align: center;
        }
        .kolor {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="naglowek">Kliknij przycisk, aby zmienić mój kolor!</h1>
    <button onclick="zmienKolor()">Zmień kolor</button>
    <script>
        function zmienKolor() {
            let naglowek = document.getElementById("naglowek");
            naglowek.style.color = "red";
        }
    </script>
</body>
</html>

Ćwiczenie 3: Walidacja formularza

Stwórz formularz w HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Walidacja formularza</title>
</head>
<body>
    <form id="formularz">
        <label for="nazwa">Podaj swoje imię:</label>
        <input type="text" id="nazwa">
        <button type="button" onclick="sprawdz()">Wyślij</button>
    </form>
    <script>
        function sprawdz() {
            let nazwa = document.getElementById("nazwa").value;
            if (nazwa === "") {
                alert("Imię nie może być puste!");
            } else {
                alert(`Witaj, ${nazwa}!`);
            }
        }
    </script>
</body>
</html>

Podsumowanie lekcji

Po tej lekcji uczniowie:

Wiedzą, czym jest JavaScript i jakie ma zastosowanie.
Potrafią dodać prosty skrypt JavaScript do strony HTML.
Rozumieją podstawowe elementy składni języka: zmienne, funkcje, instrukcje warunkowe.
Potrafią zastosować JavaScript do prostych działań, takich jak wyświetlenie alertu, zmiana stylów czy walidacja formularzy.