JavaScript – mięśnie strony

Samo potrzebne mięso do egzaminu, nic więcej.

Dodaj interaktywność do swoich stron: obsługa zdarzeń, manipulacja DOM, walidacja formularzy, praca z tablicami i funkcjami.

Kurs JavaScript – Ożyw swoją stronę!

Masz już strukturę (HTML) i wygląd (CSS). Czas dodać zachowanie! JavaScript (JS) to język programowania, który pozwala na dodanie interaktywności do Twojej strony. Walidacja formularzy, dynamiczne zmiany treści, animacje, slidery – to wszystko dzieje się dzięki JS.

Ciekawostka

Język JavaScript został stworzony przez Brendana Eicha w 1995 roku w zaledwie 10 dni. Początkowo nosił nazwę LiveScript, ale później zmieniono ją na JavaScript, aby odnieść się do popularności języka Java. Nie jest związany z JAVĄ: Pomimo podobieństw składniowych i nazwy, JavaScript nie jest językiem programowania Java.

1. Pierwsze Kroki, czyli Gdzie Jest Ten Przycisk „START”?

1.1. Trzej Muszkieterowie Webdevu

Pomyśl o stronie jak o budowie domu. HTML to gołe mury i fundamenty. CSS to farba na ścianach, meble i stylowe dodatki. A JavaScript? To cała instalacja elektryczna, hydraulika i inteligentny system zarządzania domem. To on sprawia, że po wciśnięciu włącznika zapala się światło. Bez niego masz tylko ładną, ale bezużyteczną makietę.

1.2. Jak i GDZIE Podłączyć Ten Cały JavaScript?

Praktyka bojowa: Zapomnij o pisaniu JS w pliku HTML. Jesteśmy profesjonalistami! Tworzymy osobny plik skrypt.js i podłączamy go JEDNĄ magiczną linijką. Ale jej lokalizacja to świętość! HTML

<!DOCTYPE html>
<html>
<head>
    </head>
<body>
    <script src="skrypt.js"></script>
</body>
</html>

Dlaczego to takie ważne? Przeglądarka to sumienny, ale niezbyt bystry pracownik – czyta kod od góry do dołu. Jeśli dasz jej skrypt na początku, spróbuje ona znaleźć przycisk, który… jeszcze nie istnieje! Efekt? Błąd i załamanie nerwowe. Dając skrypt na końcu, masz pewność, że cała „scena” jest już gotowa na przyjęcie swojego reżysera (czyli Twojego kodu JS).

1.3. Konsola – Twój Pokój Zwierzeń i Detektor Kłamstw

Teoria: Każda przeglądarka ma wbudowane narzędzia dla deweloperów (F12), a w nich zakładkę „Konsola”. To Twój najlepszy przyjaciel. To tutaj JavaScript będzie krzyczał, gdy coś mu się nie spodoba, i to tutaj możesz kazać mu „mówić”, co akurat robi.

Praktyka: Otwórz konsolę (F12) i w pliku skrypt.js napisz:

console.log("Halo, Ziemia! Czy mnie słychać?");
console.log("2 + 2 =", 2 + 2);

let tajnyAgent = "Agent 007";
console.log("Kto jest na służbie? ", tajnyAgent);

// ZAWSZE sprawdzaj konsolę, gdy coś nie działa. To pierwszy krok diagnostyki!

Mini-ćwiczenie: Stwórz zmienną mocSilnika i przypisz jej jakąś dużą liczbę. Wypisz ją w konsoli razem z tekstem „Moc silnika wynosi: … KM”.

2. Fundamenty, czyli Klocki LEGO dla Programisty

2.1. Zmienne let vs Stałe const – Elastyczność kontra Bezpieczeństwo

Pomyśl o let jak o tablicy wyników w trakcie meczu – jej wartość ciągle się zmienia. const to data Twoich urodzin – jest ustalona raz na zawsze i próba jej zmiany byłaby… dziwna (i w JS skończyłaby się błędem).

Złota zasada: Zawsze zaczynaj od const. Jeśli okaże się, że wartość musi się zmienić, wtedy i tylko wtedy zmień const na let. Twoje przyszłe „ja” Ci za to podziękuje.

2.2. Typy Danych i Szablony Tekstowe

JavaScript musi wiedzieć, czy ma do czynienia z tekstem (String), liczbą (Number) czy prawdą/fałszem (Boolean).

Game Changer – Szablony Tekstowe: Zapomnij o łączeniu tekstu za pomocą plusów jak w epoce kamienia łupanego: "Imię: " + imie + ", wiek: " + wiek. Używaj grawisów (`) – to czytelniejsze i potężniejsze!

const gracz = "Neo";
const punkty = 9999;
const wiadomosc = `Gracz ${gracz} osiągnął ${punkty} punktów. Matrix jest jego!`;
console.log(wiadomosc);

Ciekawostka: null vs undefined. Jaka jest różnica? Pomyśl o portfelu. undefined oznacza, że w ogóle nie masz portfela. null oznacza, że masz portfel, ale świadomie go opróżniłeś i jest pusty.

2.3. Operatory – Matematyka i Logika dla Twojego Kodu

PUŁAPKA EGZAMINACYJNA: == kontra ===

== (luźne porównanie): Pyta „czy wartości są podobne?”. Dla niego liczba 5 i tekst "5" to to samo. To jak porównywanie jabłka z obrazkiem jabłka. Może prowadzić do nieoczekiwanych błędów.
=== (ścisłe porównanie): Pyta „czy wartość ORAZ typ są identyczne?”. Dla niego 5 i "5" to dwie RÓŻNE rzeczy. ZAWSZE UŻYWAJ TEGO OPERATORA, chyba że masz naprawdę, naprawdę dobry powód, żeby tego nie robić (a na początku nie masz).

console.log(5 == "5");   // true (WTF?!)
console.log(5 === "5");  // false (Tak trzymać!)
console.log(5 === 5);    // true (O to chodziło!)

Operatory Logiczne && (i) oraz || (lub): Służą do tworzenia bardziej złożonych warunków.

&& (i): Oba warunki muszą być prawdziwe. czyJestPrad && czyWlaczonyPrzycisk
|| (lub): Wystarczy, że jeden warunek jest prawdziwy. jestSobota || jestNiedziela

3. Kontrola Przepływu – Naucz Swój Kod Myśleć!

3.1. if / else – Bramkarz w Klubie Twojego Kodu

Instrukcja if to selekcjoner. Sprawdza warunek. Jeśli jest true – wpuszcza do jednego bloku kodu. Jeśli nie, else kieruje do innego. Dzięki temu Twój kod może reagować adekwatnie do sytuacji.

const iloscPaliwa = 15; // w procentach

if (iloscPaliwa > 50) {
    console.log("Możesz jechać na wakacje. Pełen luz.");
} else if (iloscPaliwa > 10) {
    console.log("Lepiej poszukaj stacji benzynowej w okolicy.");
} else {
    console.log("ALARM! Jedziesz na oparach! Zjeżdżaj na pobocze!");
}

3.2. Pętle – Zmuś Komputer do Nudnej Roboty

- for – Sierżant Musztry: Idealna, gdy wiesz, ile kroków ma zrobić żołnierz. „Żołnierzu, zrób 10 pompek!”.
  // Pętla odliczy od 10 do 1 przed startem rakiety for (let i = 10; i > 0; i--) { console.log(i); } console.log("LIFTOFF! 🚀");
- while – Uparty Strażnik: Stoi na warcie i wykonuje zadanie, dopóki warunek jest spełniony. „Sprawdzaj pogodę co godzinę, dopóki nie przestanie padać”.
- UWAGA! Nieskończona pętla (np. while(true)) to czarna dziura, która wessie całą moc Twojej przeglądarki i zmusi Cię do jej zamknięcia. Upewnij się, że warunek pętli kiedyś się skończy!

4. Organizacja Kodu – Koniec z Bałaganem!

4.1. Funkcje – Twoje Prywatne Fabryki Kodu

Funkcja to przepis na ciasto. Zamiast za każdym razem od nowa szukać składników i kroków, po prostu mówisz: „zrób ciasto według przepisu 'Szarlotka'”. Możesz jej nawet podać inne składniki (parametry), np. „zrób to samo ciasto, ale z gruszkami”.

Nowoczesne Funkcje Strzałkowe (=>): Są krótsze, czytelniejsze i są standardem we współczesnym JS. Przyzwyczajaj się do nich od razu!

// Klasyczna funkcja
function sumaKlasyczna(a, b) {
    return a + b;
}
// Funkcja strzałkowa - ta sama moc, mniej pisania!
const sumaNowoczesna = (a, b) => a + b;

console.log("Wynik:", sumaNowoczesna(10, 20)); // 30

4.2. Tablice i Ich Supermoce (Metody)

Tablica to Twoja szafa z ponumerowanymi szufladami. Ale to nie wszystko! Ta szafa ma wbudowane roboty (metody), które potrafią za Ciebie sortować, filtrować i transformować jej zawartość.

NA EGZAMINIE MUSISZ TO WIEDZIEĆ:
Iteracja po tablicy za pomocą .forEach() jest znacznie czytelniejsza niż klasyczna pętla for.

const uczestnicy = ["Ania", "Tomek", "Kasia", "Piotrek"];

uczestnicy.forEach((uczestnik, index) => {
    console.log(`Miejsce ${index + 1}: ${uczestnik}`);
});

.map() i .filter() – Fabryka i Selekcjoner:

.map() bierze każdego uczestnika i tworzy nową tablicę po jakiejś transformacji. Np. zamienia wszystkich na wielkie litery.
.filter() bierze wszystkich uczestników i tworzy nową tablicę, ale tylko z tymi, którzy spełniają warunek. Np. tylko z imionami dłuższymi niż 4 litery.

5. DOM – Pilot do Sterowania Twoją Stroną

5.1. Chwytanie Elementów – Jak Złapać Coś, Czego Nie Widać?

Szwajcarski scyzoryk: querySelector() i querySelectorAll(). Te dwie metody pozwalają znaleźć elementy za pomocą tych samych selektorów, których używasz w CSS! querySelector łapie pierwszy napotkany element. querySelectorAll łapie wszystkie i zwraca je jako listę.

// Złap JEDEN element z klasą .hero-button
const heroButton = document.querySelector('.hero-button');
// Złap WSZYSTKIE linki w stopce
const footerLinks = document.querySelectorAll('footer .link');

5.2. Manipulacja Wyglądem – classList kontra .style

ZASADA ZŁOTEGO MŁOTKA: Nie wal w ścianę młotkiem, jeśli możesz powiesić obrazek na haczyku.

element.style.color = 'red': To walenie młotkiem. Zmieniasz styl bezpośrednio w JS, robiąc bałagan. Trudno to potem śledzić i nadpisywać.
element.classList.add('klasa-bledu'): To wieszanie na haczyku. W CSS masz zdefiniowaną klasę .klasa-bledu { color: red; border: 1px solid red; }. W JS tylko dodajesz lub usuwasz tę klasę. Jest czysto, logicznie i łatwo zarządzać wyglądem w jednym miejscu (pliku CSS). To jest jedyny słuszny sposób na egzaminie!

5.3. Zdarzenia – Jak Nauczyć Stronę Słuchać?

addEventListener('nazwa-zdarzenia', funkcja): To jest Twoje ucho. Mówisz elementowi: „słuchaj, i jak tylko ktoś w Ciebie kliknie (’click’), to natychmiast uruchom tę funkcję!”.

PUŁAPKA EGZAMINACYJNA: event.preventDefault()

Kiedy użytkownik klika type="submit" w formularzu, domyślną akcją przeglądarki jest próba wysłania go i przeładowanie strony. To zniszczy cały Twój kod JS!
event.preventDefault() to Twój hamulec awaryjny. To pierwsza linijka, jaką piszesz w funkcji obsługującej formularz. Mówi ona przeglądarce: „Hej, spokojnie! Wiem, co robię. Nie przeładowuj strony, ja się tym zajmę.”

const formularz = document.querySelector('#moj-formularz');

formularz.addEventListener('submit', (event) => {
    event.preventDefault(); // ZAWSZE PIERWSZA!
    console.log("Formularz zatrzymany! Teraz mogę go zwalidować.");
    // ... reszta logiki ...
});

event.target – Kto narobił hałasu? Gdy masz wiele przycisków w jednym kontenerze i jeden „nasłuchiwacz” na kontenerze, event.target powie Ci, który konkretnie przycisk został kliknięty. Niezwykle potężne!

Vademecum INF.03