Learning Log #7: JavaScript

Poniedziałek, 2 września, 21:40. Szkoła wróciła do normalnego rytmu dziś rano. Dom w końcu cichy. A ja siedzę i patrzę na przycisk na ekranie, który właśnie zmienił kolor po kliknięciu.

Brzmi banalnie, prawda? Przycisk zmienia kolor. Wielka rzecz.

Ale to JA to zrobiłam. Napisałam kod, który sprawił, że strona internetowa reaguje na to, co robi użytkownik. Nie odświeżam strony. Nie klikam linku. Element na ekranie po prostu… reaguje. Na żywo.

Po dwóch miesiącach mikroedukacji w wakacje (o czym pisałam w poprzednim wpisie) i powrocie do pełnego tempa we wrześniu, wreszcie dotarłam do tematu, na który czekałam najbardziej: manipulacja DOM i zdarzenia w JavaScript. To jest moment, w którym JavaScript przestaje być „kolejnym językiem do nauki” i staje się narzędziem, które tchnie życie w strony internetowe.

Dziś w Learning Log #7 pokażę Wam czym jest DOM, jak JavaScript nim manipuluje, czym są nasłuchiwacze zdarzeń, i opiszę te momenty „wow”, kiedy pierwszy raz zobaczyłam własny kod reagujący na kliknięcie myszką.

Czym jest DOM – wyjaśnienie które w końcu do mnie dotarło

Problem: rozumiałam składnię, ale nie rozumiałam koncepcji

Przez pierwsze tygodnie nauki JavaScript umiałam pisać pętle, funkcje, warunki – ale nie rozumiałam, jak to wszystko łączy się ze stroną internetową, którą widzę w przeglądarce.

To była luka, która blokowała mnie od tworzenia czegokolwiek realnego.

Wyjaśnienie które zadziałało – analogia z domem

DOM (Document Object Model, po polsku: obiektowy model dokumentu) to sposób, w jaki przeglądarka „widzi” stronę internetową – nie jako tekst HTML, ale jako strukturę drzewa obiektów, którymi można manipulować.

Analogia która mi pomogła:

Wyobraź sobie dom (budynek, nie stronę). HTML to plan architektoniczny domu – papierowy dokument opisujący, gdzie są ściany, drzwi, okna.

DOM to sam dom, zbudowany na podstawie tego planu – fizyczna struktura, którą można otworzyć, zamknąć, przemalować, przestawić meble.

HTML (plan):

html

<div id="salon">
    <button id="przycisk">Kliknij mnie</button>
    <p id="tekst">Witaj!</p>
</div>

DOM (dom zbudowany z planu): Przeglądarka tworzy strukturę drzewa:

document
  └── div#salon
        ├── button#przycisk
        └── p#tekst

JavaScript może wejść do tego „domu” i:

Otworzyć drzwi (znaleźć element)
Przemalować ścianę (zmienić styl)
Przestawić meble (zmienić strukturę)
Zainstalować dzwonek reagujący na naciśnięcie (dodać nasłuchiwacz zdarzenia)

Pierwsza manipulacja DOM – znajdowanie elementów

Podstawowe metody wyszukiwania elementów:

javascript

// Po ID (najczęściej używane)
const przycisk = document.getElementById('przycisk');

// Po klasie (może zwrócić wiele elementów)
const wszystkieKarty = document.getElementsByClassName('karta');

// Po selektorze CSS (najbardziej elastyczne)
const pierwszyPrzycisk = document.querySelector('.przycisk');
const wszystkiePrzyciski = document.querySelectorAll('.przycisk');

WTF moment #1: „Czekaj, mogę wyszukiwać elementy DOKŁADNIE tak samo jak w CSS?!”

To była pierwsza rzecz, która sprawiła, że JavaScript nagle „kliknął” (nie mylić z tym przyciskiem, o którym za chwilę). Znałam już selektory CSS z pracy z WordPressem. Nagle mogłam użyć tej samej wiedzy do wyszukiwania elementów w JavaScript.

Manipulacja DOM – zmienianie tego, co widać na ekranie

Zmiana tekstu

javascript

const naglowek = document.getElementById('naglowek');
naglowek.textContent = 'Nowy tekst!';

Pierwsza rzecz, którą zrobiłam: Zmiana powitania na stronie w zależności od pory dnia.

javascript

const godzina = new Date().getHours();
const powitanie = document.getElementById('powitanie');

if (godzina < 12) {
    powitanie.textContent = 'Dzień dobry!';
} else if (godzina < 18) {
    powitanie.textContent = 'Dzień dobry (popołudniu)!';
} else {
    powitanie.textContent = 'Dobry wieczór!';
}

Efekt na ekranie: Odświeżam stronę – tekst się zmienia w zależności od tego, o której godzinie to robię. Proste, ale to był mój pierwszy prawdziwy moment „wow”.

Zmiana stylu (CSS przez JavaScript)

javascript

const przycisk = document.getElementById('przycisk');
przycisk.style.backgroundColor = 'niebieski';
przycisk.style.color = 'biały';
przycisk.style.padding = '10px 20px';

Zmiana klasy (lepsza praktyka niż zmiana pojedynczych stylów):

javascript

const karta = document.querySelector('.karta');
karta.classList.add('podswietlona');
karta.classList.remove('nieaktywna');
karta.classList.toggle('rozwiniety'); // dodaje jeśli nie ma, usuwa jeśli jest

Dlaczego classList jest lepsze niż bezpośrednie zmienianie style:

Bezpośrednia zmiana stylu (element.style.color = 'red') miesza logikę JavaScript ze stylowaniem CSS. Lepsza praktyka to przygotowanie klas CSS wcześniej (np. .aktywny { color: red; }) i dodawanie/usuwanie tych klas przez JavaScript.

Tworzenie nowych elementów dynamicznie

To była kolejna rzecz, która mnie zachwyciła – możliwość tworzenia całkowicie nowych elementów HTML za pomocą kodu, bez wcześniejszego pisania ich w pliku HTML.

javascript

function dodajZadanie(tresc) {
// Tworzę nowy element
    const nowyElement = document.createElement('li');
    nowyElement.textContent = tresc;
    nowyElement.classList.add('zadanie');

// Dodaję go do listy na stronie
    const lista = document.getElementById('listaZadan');
    lista.appendChild(nowyElement);
}

dodajZadanie('Nauczyć się manipulacji DOM');
dodajZadanie('Zbudować listę zadań');

WTF moment #2: „Mogę tworzyć elementy które nigdy nie istniały w oryginalnym HTML?!”

To otworzyło mi drzwi do zrozumienia, jak działają aplikacje typu lista zadań, komentarze dodawane na żywo, czy dynamiczne galerie zdjęć.

Zdarzenia (events) – jak strona reaguje na użytkownika

Czym są zdarzenia

Zdarzenie to sygnał, że coś się wydarzyło na stronie – kliknięcie, najechanie myszką, wpisanie tekstu, przewinięcie strony, załadowanie się dokumentu.

Nasłuchiwacz zdarzenia (event listener) to fragment kodu, który „czeka” na konkretne zdarzenie i uruchamia się, kiedy ono nastąpi.

Pierwszy nasłuchiwacz zdarzenia – moment przełomowy

javascript

const przycisk = document.getElementById('przycisk');

przycisk.addEventListener('click', function() {
    console.log('Kliknięto przycisk!');
});

To był moment, o którym pisałam na początku posta. Kliknęłam przycisk w przeglądarce, i w konsoli pojawił się mój tekst. Coś, co napisałam, zareagowało na moje działanie w czasie rzeczywistym.

Rozwinięcie do praktycznego przykładu – zmiana koloru po kliknięciu:

javascript

const przycisk = document.getElementById('przycisk');
let jestAktywny = false;

przycisk.addEventListener('click', function() {
    jestAktywny = !jestAktywny; // odwrócenie wartości logicznej

    if (jestAktywny) {
        przycisk.style.backgroundColor = 'zielony';
        przycisk.textContent = 'Aktywne!';
    } else {
        przycisk.style.backgroundColor = 'szary';
        przycisk.textContent = 'Kliknij mnie';
    }
});

Rodzaje zdarzeń które poznałam

Zdarzenia myszy:

javascript

element.addEventListener('click', funkcja);        // kliknięcie
element.addEventListener('mouseover', funkcja);     // najechanie myszką
element.addEventListener('mouseout', funkcja);      // zjechanie myszką
element.addEventListener('dblclick', funkcja);      // podwójne kliknięcie

Zdarzenia klawiatury:

javascript

element.addEventListener('keydown', funkcja);       // naciśnięcie klawisza
element.addEventListener('keyup', funkcja);          // puszczenie klawisza

Zdarzenia formularzy:

javascript

formularz.addEventListener('submit', funkcja);       // wysłanie formularza
input.addEventListener('input', funkcja);             // zmiana wartości podczas pisania
input.addEventListener('change', funkcja);            // zmiana wartości (po opuszczeniu pola)

Zdarzenia strony:

javascript

window.addEventListener('load', funkcja);             // strona się załadowała
window.addEventListener('scroll', funkcja);            // przewinięcie strony
window.addEventListener('resize', funk