JavaScript od podstaw — pierwsza lekcja z ćwiczeniami

Na stronie szkolnego koła chcesz pokazać, ile minut zajmą cztery spotkania po 45 minut. Można wpisać wynik ręcznie, ale wtedy po zmianie planu trzeba go ponownie policzyć. W tej lekcji obliczenie wykona JavaScript, a przeglądarka wyświetli rezultat w przygotowanym akapicie.

Scenariusz obejmuje 45 minut i zakłada znajomość podstaw HTML. Poznasz konsolę, deklarowanie zmiennych i odczytywanie prostych błędów. Na koniec połączysz skrypt ze stroną. Obsługę przycisków i formularzy zostawiamy na osobne zajęcia.

Co przygotować?

Potrzebujesz przeglądarki oraz edytora zwykłego tekstu. Rozpakuj projekt z sekcji materiałów. Folder start zawiera index.html i app.js. Otwórz HTML w przeglądarce oraz oba pliki w edytorze. Ten projekt działa lokalnie bez serwera, instalowania Node.js i zakładania konta.

Jeśli uczeń nie zna jeszcze struktury dokumentu, zacznij od pierwszej lekcji HTML. JavaScript uruchamiany w przeglądarce może zmieniać zawartość dokumentu. To inna rola niż HTML, który opisuje jego strukturę, i CSS, który określa wygląd.

Cele i plan lekcji

Po zajęciach uczeń potrafi uruchomić skrypt, znaleźć jego wynik w konsoli, zapisać obliczenie przy użyciu zmiennych oraz pokazać wynik na stronie.

Konsolę znajdziesz w narzędziach deweloperskich przeglądarki, zwykle otwieranych klawiszem F12 lub z menu przeglądarki. Przejdź do zakładki „Console” lub „Konsola”. W tej lekcji zapisujemy kod w swoim pliku — nie trzeba wklejać go bezpośrednio do konsoli.

Pierwszy komunikat w konsoli

W app.js wpisz:

console.log("Zaczynamy spotkanie koła!");
console.log(4 * 45);

Zapisz plik i odśwież stronę. Konsola powinna pokazać zdanie oraz 180. Jeśli wynik się nie pojawia, sprawdź, czy otwierasz stronę z tego samego folderu, w którym edytujesz skrypt.

Projekt HTML podłącza skrypt przez:

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

src wskazuje plik JavaScript. Dla tego zewnętrznego skryptu defer odracza wykonanie do zakończenia parsowania HTML, dzięki czemu przygotowany element strony będzie już dostępny. Nazwy plików i wielkość liter powinny zgadzać się dokładnie.

Zmienne i pierwsze obliczenie

Zastąp zawartość skryptu:

const nazwaKola = "Odkrywcy";
const liczbaSpotkan = 4;
const minutySpotkania = 45;
const razemMinut = liczbaSpotkan * minutySpotkania;

console.log(nazwaKola);
console.log(razemMinut);

const deklaruje zmienną, do której nie można ponownie przypisać wartości. Nadal możesz zmienić liczbę w pliku i uruchomić cały skrypt od nowa. Jeśli wartość ma być przypisywana ponownie podczas jednego wykonania programu, użyj let.

W tym projekcie wszystkie dane ustalamy przed obliczeniem, więc wystarczy const. Znak = oznacza przypisanie, a * mnożenie. Nazwy opisują znaczenie danych i ułatwiają sprawdzanie wyniku.

Uważaj na cudzysłowy: 4 + 2 daje liczbę 6, natomiast "4" + "2" daje tekst 42. Operator + może dodawać liczby albo łączyć tekst. Na tej lekcji liczby zapisujemy bez cudzysłowów.

Pokaż wynik na stronie

W przygotowanym HTML znajduje się akapit:

<p id="wynik" aria-live="polite">Tutaj pojawi się wynik.</p>

Na końcu skryptu dopisz:

const wynik = document.querySelector("#wynik");
wynik.textContent = nazwaKola + ": " + razemMinut + " minut zajęć";

querySelector wyszukuje element zgodny z selektorem. #wynik oznacza element o identyfikatorze wynik. Przypisanie do textContent zmienia tekst akapitu. Po odświeżeniu zobaczysz „Odkrywcy: 180 minut zajęć”.

Na razie potraktuj te dwie instrukcje jako prosty sposób wyświetlenia wyniku. Szczegółową pracę z DOM poznasz później. Jeśli elementu nie ma, querySelector zwróci null, a próba ustawienia jego właściwości zakończy się błędem. Sprawdź wtedy zgodność id i obecność defer.

Trzy zadania

Zadanie 1. Nowa grupa. Zmień nazwę koła na „Twórcy stron”. Zaktualizowany komunikat ma być widoczny w konsoli i w akapicie, bez ręcznego wpisywania go w HTML.

Zadanie 2. Krótsze spotkania. Ustaw pięć spotkań po 30 minut. Oblicz wynik ze zmiennych. Oczekiwany czas zajęć wynosi 150 minut.

Zadanie 3. Przygotowanie. Dodaj jednorazowo 15 minut przygotowania całego cyklu. Zapisz sumę w osobnej zmiennej. Wyświetl na stronie tekst „Twórcy stron: 165 minut z przygotowaniem”.

Dla chętnych: ustaw dwa spotkania po 60 minut i przewidź nowy wynik z przygotowaniem. Powinno wyjść 135 minut. Wyjaśnij, dlaczego przygotowania nie mnożymy przez liczbę spotkań.

Rozwiązanie i testy

const nazwaKola = "Twórcy stron";
const liczbaSpotkan = 5;
const minutySpotkania = 30;
const przygotowanie = 15;
const razemMinut = liczbaSpotkan * minutySpotkania;
const razemZPrzygotowaniem = razemMinut + przygotowanie;

console.log(nazwaKola);
console.log(razemMinut);
const wynik = document.querySelector("#wynik");
wynik.textContent = nazwaKola + ": " + razemZPrzygotowaniem + " minut z przygotowaniem";

Przetestuj także jeden blok 45 minut z przygotowaniem 15 minut: wynik powinien wynosić 60. Za każdym razem zmieniaj dane źródłowe, zapisuj plik i odświeżaj stronę. Nie poprawiaj gotowego wyniku na sztywno.

Jak znaleźć błąd?

Zacznij od pierwszego komunikatu o błędzie. Następne mogą być skutkiem tego samego problemu. Konsola pokazuje zwykle również nazwę pliku i numer wiersza.

Pytania kontrolne i ocena

1. Gdzie działa JavaScript w tym projekcie? W przeglądarce ucznia.
2. Czy można ponownie przypisać wartość do const? Nie; do zmiennego przypisania służy let.
3. Czy console.log sam zmienia akapit? Nie, wyświetla wynik w konsoli. Akapit zmieniamy przez textContent.

Punktacja: działający skrypt i konsola — 2 pkt; własna nazwa koła — 1 pkt; obliczenie 150 minut ze zmiennych — 2 pkt; dodanie przygotowania — 2 pkt; wynik w akapicie — 2 pkt; sprawdzenie drugiego zestawu danych — 1 pkt. Razem 10 punktów.

Pobierz projekt JavaScript

• Pakiet JavaScript: projekt startowy, rozwiązanie i karta pracy
• Karta pracy ucznia do druku
• Zobacz działające rozwiązanie

W folderach start i rozwiazanie są osobne pary plików HTML i JS. Rozpakuj archiwum przed rozpoczęciem pracy. Klucz jest publiczny i służy nauce.

Kolejne lekcje JavaScript

Następne tematy to typy danych, warunki i funkcje, a potem zdarzenia oraz formularze. Kurs JavaScript TablicaPro zawiera materiały do prowadzenia kolejnych zajęć z klasą.

Składnię zmiennych i typów omawia dokumentacja JavaScript w MDN. Dla porównania sposobu wykonywania kodu zobacz też pierwszą lekcję PHP.