INF.03 · JavaScript

Wprowadzenie do JavaScript i pierwszy skrypt

Najpierw zobacz efekt, potem zajrzyj do kodu

Kod → próba → wniosek
DOM i zdarzenia
Własny projekt

Po tej lekcji: Uruchomisz własny plik HTML z zewnętrznym JavaScriptem i odnajdziesz błąd w konsoli.

Po co JavaScript?

Masz przycisk „Pokaż opis”. Chcesz, żeby po kliknięciu pojawiła się informacja bez odświeżania strony. HTML opisuje elementy, CSS ich wygląd, a JavaScript wykonuje instrukcje i może zmieniać stronę. HTML i CSS też mają zachowania, np. formularze, details i :hover; JS daje programowalne reguły. Nie myl JavaScript z Javą. JS działa także poza przeglądarką, ale tutaj ćwiczymy stronę klienta.

Trzy pliki, jedna strona

Utwórz folder pierwsza-strona. Zapisz w nim index.html i skrypt.js dokładnie pod tymi nazwami, bez ukrytego .txt. Połącz pliki przez <script src="skrypt.js" defer></script> w head. Zewnętrzny skrypt z defer wykona się po odczytaniu HTML, przed DOMContentLoaded. Ścieżka jest liczona względem dokumentu. Nie dodawaj defer do zwykłego skryptu inline z oczekiwaniem tego samego efektu.

Konsola nie jest treścią strony

Otwórz index.html w przeglądarce. F12 → Console pokaże console.log; tekst na stronie zmienia textContent. W Sources ustaw punkt przerwania na instrukcji zmiany tekstu, kliknij przycisk i sprawdź wartość zmiennej. Network pomaga znaleźć 404 przy błędnej ścieżce. Zapisz plik, odśwież stronę. JavaScript rozróżnia wielkość liter; literówka w nazwie to zwykle ReferenceError, błędny znak — SyntaxError. Średniki zapisuj konsekwentnie, choć język w niektórych miejscach wstawia je automatycznie.

Najpierw krótki przykład, potem cały projekt

Każdy krótki przykład uruchamiaj osobno: w oddzielnym pliku skrypt.js lub na nowej pustej stronie. Nie doklejaj kilku przykładów z tym samym const do jednego pliku, bo ponowna deklaracja tej samej nazwy jest błędem. Przykłady konsolowe pokażą wynik w F12 → Console. Przy przykładach DOM najpierw utwórz wskazane elementy HTML i podłącz skrypt z defer. Fragment wymagający gotowego projektu jest tak oznaczony — wykonuj go w jego kontekście, nie jako pustą stronę.

HTML znajduje przycisk dopiero po odczytaniu dokumentu

Utwórz dwa pliki w jednym folderze. W index.html wstaw do head zewnętrzny script z defer, a do body <button id="pokaz">Pokaż</button><p id="wynik"></p>. Kod niżej zapisz w skrypt.js. Nie wklejaj znaczników script do pliku .js.

Podstawowa forma: <script src="skrypt.js" defer></script> w head pliku HTML

podlaczenie.jsjavascript

const przycisk = document.querySelector('#pokaz');
const wynik = document.querySelector('#wynik');
przycisk.addEventListener('click', () => {
    wynik.textContent = 'Witaj w kinie!';
});

document reprezentuje dokument. querySelector przyjmuje selektor CSS; #pokaz oznacza id="pokaz", a wynikiem jest znaleziony element.
const tworzy nazwaną zmienną bez ponownego przypisania. Kropka wybiera metodę lub właściwość obiektu, np. przycisk.addEventListener.
addEventListener dostaje nazwę zdarzenia i funkcję. () => { ... } to funkcja bez własnych argumentów, uruchamiana dopiero po kliknięciu.
textContent jest właściwością tekstu elementu. Przypisanie nowego napisu zastępuje tekst akapitu. Po otwarciu strony jeszcze nic się nie zmienia — trzeba kliknąć.

console.log a wynik na stronie

Konsola jest narzędziem programisty. Wypisanie do niej informacji nie dodaje akapitu do strony.

Podstawowa forma: console.log(wartosc1, wartosc2);

console.jsjavascript

const nazwa = 'Kino szkolne';
let odwiedziny = 0;
odwiedziny = odwiedziny + 1;
console.log(nazwa);
console.log(odwiedziny);

Wynik

Kino szkolne
1

console.log jest wywołaniem metody obiektu console; nawiasy obejmują dane do wypisania.
let pozwala przypisać nową wartość: odczytujemy 0, dodajemy 1 i zapisujemy 1.
Napisy zapisujesz w cudzysłowie, nazwę zmiennej bez niego. console.log("nazwa") wypisałoby nazwę, nie jej zawartość.

Sprawdź w działaniu

Sprawdź mechanizm na działającym przykładzie

Zmień dane, przewidź wynik i wykonaj próbę. To działający JavaScript tego modelu, nie interpreter dowolnego wklejonego kodu.

HTML w body pliku index.html

index.htmlhtml

<button id="pokaz" type="button">Pokaż</button>
<p id="wynik"></p>

Prześledź kod, potem zmień jedną rzecz

skrypt.jsjavascript

const nazwaSerwisu = "Kino szkolne";
let liczbaKlikniec = 0;
console.log("Witaj w " + nazwaSerwisu);
document.querySelector("#pokaz").addEventListener("click", () => {
    liczbaKlikniec += 1;
    document.querySelector("#wynik").textContent = `Kliknięcia: ${liczbaKlikniec}`;
});

Odtwórz przykład u siebie

Zapisz pokazany JavaScript w skrypt.js, a HTML w body zwykłego dokumentu z <!doctype html>, lang="pl", meta charset="UTF-8" i tytułem. W head podłącz <script src="skrypt.js" defer></script>. Przykłady z samym console.log możesz wykonać też w konsoli własnej pustej strony. Nie wklejaj nieznanych skryptów do konsoli zalogowanych serwisów. F12 → Console: sprawdź błędy; Sources: ustaw breakpoint, obejrzyj zmienne i przejdź krokowo.

Ćwiczenie z pomocą · samodzielna praca

Twoja próba

Zmień nazwę serwisu i komunikat. Kliknij trzy razy. Na stronie ma być 3, w konsoli nazwa.

Oczekiwany rezultat

Zapisz: dane → przewidywany wynik → wynik próby → wyjaśnienie.

Potrzebujesz pomocy? Rozwiązuj krok po kroku.

Krok 1 — pokaż podpowiedź

Zacznij od działającego przykładu i przewidź wynik bez uruchamiania.

Krok 2 — pokaż podpowiedź

Zmień jedną instrukcję lub jedną wartość. Obejrzyj Console i stan DOM.

Krok 3 — pokaż podpowiedź

Dodaj przypadek pusty albo graniczny. Jeśli wynik jest inny, ustaw breakpoint.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Podsumowanie

Co warto zapamiętać

Uruchomisz własny plik HTML z zewnętrznym JavaScriptem i odnajdziesz błąd w konsoli.
Umiesz wskazać przyczynę wyniku w kodzie i sprawdzić przypadek graniczny.
Quiz i dodatkowe zadania są w biurku; kod ocenia nauczyciel.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →

Źródła i dalsza nauka