Lekcja 4

Lekcja 4 – Manipulacja DOM: Zamień Internet w Swój Własny Plac Zabaw 🎢✨

Witamy na Lekcji 4! Dziś nauczymy się, jak używać JavaScript, aby sprawić, że strony internetowe zaczną reagować na twoje polecenia. Wyobraź sobie, że JavaScript to magiczna różdżka, a ty jesteś czarodziejem, który może dodawać tekst, przyciski, a nawet sprawić, że elementy będą znikać — zero zaklęć, tylko kod!

Przygotowanie Placu: Instalacja VS Code i Caddy

Aby poczuć się jak prawdziwy programista, musimy przygotować nasze stanowisko pracy. Zainstalujemy VS Code jako naszą kwaterę główną do kodowania i Caddy jako serwer lokalny, abyśmy mogli widzieć nasze aktualizacje na żywo (tak, teraz będziesz własnym mini-adminem).

Instalacja VS Code: Zajrzyj do mojego posta o instalacji VS Code.
Instalacja Caddy: Postępuj zgodnie z instrukcjami w poście o instalacji Caddy.

Teraz, gdy mamy wszystko gotowe, utwórzmy folder projektu i dodajmy magiczne pliki, które przekształcimy w interaktywną stronę internetową.

Tworzenie Projektu i Ustawienia Plików

Utwórz folder projektu (np. DOM_Project) w łatwo dostępnym miejscu. Tak, jeszcze jeden krok bliżej do tytułu „Programisty”!
```
mkdir DOM_Project
cd DOM_Project
```

Utwórz plik HTML. W folderze projektu utwórz plik o nazwie index.html — będzie to nasza „świątynia HTML”, gdzie wydarzy się cała magia:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plac Zabaw DOM</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #message-container { margin-top: 20px; }
    </style>
</head>
<body>
    <h1 id="main-heading">Cześć, DOM!</h1>
    <button id="add-message-btn">Dodaj Wiadomość</button>
    <div id="message-container"></div>
    <input type="text" id="task-input" placeholder="Wpisz zadanie" />
    <button id="add-task-btn">Dodaj Zadanie</button>
    <ul id="task-list"></ul>

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

Utwórz plik JavaScript. W tym samym folderze stwórz plik script.js, w którym napiszemy nasz magiczny kod JavaScript.

Teraz, gdy projekt jest skonfigurowany, czas go ożywić!

Uruchamianie Serwera Lokalnego z Caddy

Upewnij się, że jesteś w folderze DOM_Project, i uruchom Caddy, aby odpalić projekt:
```
caddy file-server --listen :8080
```

Teraz twój projekt jest dostępny pod adresem http://localhost:8080. Czujesz ciepło? To twój lokalny serwer, który czeka na twoją magię JavaScript!

Odświeżenie Strony: Kiedy F5 To Za Mało

Czasem F5 to za mało, gdy pracujesz nad projektem, a przeglądarka uparcie pokazuje starą wersję. Spróbuj Ctrl + F5 — ta specjalna kombinacja czyści pamięć podręczną i przeładowuje stronę, dając ci najnowszą wersję wszystkiego.

Pisanie JavaScript do Manipulacji DOM

Teraz, gdy mamy HTML, zacznijmy przekształcać go w coś bardziej dynamicznego. Czas na JavaScript!

Krok 1: Wybór i Wyświetlenie Elementu w Konsoli

Zanim zaczniemy kontrolować elementy, musimy je znaleźć. Zacznijmy od nagłówka.

W script.js dodaj poniższy kod, aby wybrać nagłówek i wyświetlić go w konsoli:

let heading = document.getElementById("main-heading");
console.log(heading); // Wypisujemy nagłówek w konsoli na przywitanie przeglądarki!

Otwórz stronę w przeglądarce i konsolę programisty (F12 lub Ctrl + Shift + J) — powinieneś zobaczyć nagłówek w konsoli. Gratulacje, znalazłeś swój pierwszy element DOM!

Krok 2: Zmiana Zawartości Elementu

Teraz zmieńmy tekst nagłówka, aby nadać mu trochę charakteru.

Dodaj poniższy kod:

heading.textContent = "Witamy na Placu Zabaw DOM!";

Odśwież stronę — nagłówek powinien teraz mówić coś nowego. To tak, jakby nagłówek mówił ci: „Tak, jestem pod twoją kontrolą!”

Krok 3: Dodawanie Nowych Elementów na Stronie

Dodajmy nowy paragraf z krótką wiadomością od JavaScript.

W script.js dodaj kod, aby stworzyć i dodać nowy element:

let newParagraph = document.createElement("p");
newParagraph.textContent = "To nowy paragraf dodany za pomocą JavaScript!";
document.body.appendChild(newParagraph);

Odśwież stronę, a zobaczysz nowy paragraf. To jak zostawienie małej notki na swojej stronie, tylko dla siebie!

Krok 4: Dodawanie Stylu do Elementów

Prawdziwy czarodziej wie, jak dodać styl do swoich kreacji. Sprawmy, aby nagłówek wyróżniał się trochę bardziej.

W script.js dodaj poniższy kod:

heading.style.color = "blue";
heading.style.fontSize = "3em";
heading.style.fontFamily = "Comic Sans MS";

Odśwież stronę — teraz nagłówek wygląda jak gotowy na konwent komiksów!

Krok 5: Dodawanie Interaktywności za Pomocą Zdarzeń

Czym byłby czarodziej bez interaktywnych efektów? Dodajmy przycisk, który po kliknięciu tworzy wiadomość.

Upewnij się, że w index.html znajduje się przycisk z id="add-message-btn".

W script.js dodaj ten kod:

let addButton = document.getElementById("add-message-btn");
addButton.addEventListener("click", function() {
    let message = document.createElement("p");
    message.textContent = "Brawo, zostałeś Czarodziejem JavaScript!";
    document.getElementById("message-container").appendChild(message);
});

Teraz za każdym razem, gdy klikniesz przycisk, pojawi się nowa wiadomość. To jak zostawienie sobie małych gratulacji!

Co Dalej?

Świetna robota! Teraz jesteś oficjalnie mistrzem manipulacji DOM. Na następnej lekcji dodamy jeszcze więcej magii, pracując ze zdarzeniami, aby strony stały się naprawdę interaktywne.

Do zobaczenia w Lekcji 5 – Magia Zdarzeń: Ożywiamy Strony Internetowe!

Teraz idź i zamień internet w swój osobisty plac zabaw! 🎠