Podstawowy kurs języka JavaScript

Chcesz nauczyć się JavaScript w ciekawy i angażujący sposób? Zapraszamy na nasz kurs, który łączy naukę podstaw tego języka z tworzeniem prostej, ale wciągającej gry! Kurs jest przede wszystkim skierowany do uczestniczek programu Girls Go IT, ale także dla każdego, kto chce w ciekawy sposób poznać podstawy JavaScript. Wymagana jest umiejętność programowania w dowolnym innym języku, abyś posiadała znajomość podstawowych struktur używanych w programowaniu.

Podczas kursu nauczysz się podstaw składni JavaScript, manipulacji DOM, a na koniec zbudujesz grę "Łapanie Jabłek" przy użyciu biblioteki PixiJS. Po ukończeniu kursu będziesz umiała:

• pisać skrypty JavaScript od podstaw,
• wykorzystywać obiektowy model dokumentu (DOM) do manipulacji stroną,
• tworzyć gry 2D z użyciem PixiJS.

Link do filmiku na YouTube.

Spis treści

1. Środowisko pracy
2. Czysty JavaScript
3. Obiektowy Model Dokumentu
4. Gra w Łapanie Jabłek
5. Podsumowanie

1. Środowisko pracy

Nawigacja po kursie

Kurs składa się z kilku części (patrz spis treści), każda z nich jest na wydzielonym branchu wraz z utworzonym Pull Requestem. Dodatkowo, części podzielone są na zadania reprezentowane przez commity danej części kursu. W trakcji realizacji kurs, kursant powinien przechodzić przez poszczególne branche i commity, aby ostatecznie zrealizować wszystkie zadania. Kurs nie ma na celu nauki systemów wersjonowania kodu, jednak dla wygody kursantów, przedstawiamy potrzebne komendy do nawigacji po kursie:

Pierwszym krokiem jest sklonowanie repozutorium z kursem na lokalny komputer. W tym celu, należy wykonać komndę:

git clone https://github.com/Fundacja-Try-IT/kurs-javascript.git
cd motorola

Po sklonowaniu repozytorium znajdujemy się na branchu main, czyli głównym branchu repozytorium. Aby przejść do konkretnej części kursu, reprezentowanej przez oddzielny branch, należy wykonać komendę:

git checkout nazwa_brancha

Po przejściu na odpowiedni branch, możemy sprawdzić listę commitów, które reprezentują zadania do wykonania w danej części kursu. W tym celu, należy wykonać komendę:

git log

Każdy commit odpowiada konkretnemu zadaniu. Aby poruszać się między commitami (zadaniami) w obrębie danego brancha (części kursu), należy wykonać komendę:

git checkout id_commitu

Edytor kodu

Zalecanym edytorem kodu do realizacji zadań w kursie jest VS Code. Można go pobrać ze strony Visual Studio Code. Wspiera wszystkie popularne systemy operacyjne (Windows, Linux, MacOS).

Rozszerzenie "Live Server"

Aby uruchamiać pliki HTML z kodem JavaScript w przeglądarce, należy zainstalować rozszerzenie "Live Server", które umożliwia automatyczne przeładowywanie strony po zapisaniu zmian w pliku. W tym celu, należy:

• uruchomić VS Code
• przejść do zakładki Extensions i wyszukać rozszerzenie "Live Server"
• Zainstalować rozszerzenie

2. Czysty JavaScript

Pierwsza właściwa część kursu ma na celu zapoznać kursanta ze składnią języka JavaScript, podstawowymi instrukcjami oraz obsługi konsoli dewelopera JS w przeglądarce. Aby przejść do tej części kursu, należy wykonać komendę:

git checkout javascript

Konsola dewelopera

Aby wykonywać proste skrypty JS, zalecamy korzystanie z konsoli dewelopera w przeglądarce. Aby otworzyć konsolę dewelopera w polecanej przeglądarce Chrome, można użyć klawisza F12. Taka konsola, oprócz wyświetlania komunikatów i błędów, pozwala na interaktywne uruchamianie kodu JS (aby umożliwić wklejanie kodu do konsoli, należy zaznaczyć opcję allow pasting).

Zadanie domowe 1

Przeanalizuj zawartość strony internetowej https://www.tryit.org.pl/pl/. Zbadaj menu "O NAS" i sprawdź jak wygląda struktura tego elementu oraz pojawiającego się menu. Jakie id mają poszczególne elementy menu?

Rozwiązanie: przykładowe rozwiązanie znajduje się na branchu zadanie-domowe-1.

Nauka składni języka JavaScript

Mając dostęp do interaktywnej konsoli, możemy wykonać zadania z pliku main.js. Nawigujemy po kolejnych zdanaiach (commitach):

• commit 7cd7df6 Nauka wypisywania na ekran i tworzenia komentarzy
• commit 3e0432a Nauka używania zmiennych i operatorów
• commit 38cfa07 Nauka pisania prostych funkcji
• commit 8f58513 Nauka używania list i obiektów
• commit ade61ff Przykład z funkcją zwracającą obiekt
• commit 51272c8 Nauka pisania instrukcji warunkowych (if-else)
• commit 81fc398 Nauka pisania pętli (for, while)
• commit 184a76d Nauka tworzenia prostej klasy

Zadanie domowe 2

Napisz funkcję, której argumentami jest imię i wiek użytkownika. Funkcja powinna zwracać obiekt z imieniem i wiekiem, a także informację o tym czy użytkownik jest dorosły oraz czy jego wiek jest liczbą parzystą. Następnie utwórz listę z 5 imionami i napisz pętlę, która przechodzi po wszystkich elementach listy. W każdej iteracji podaj imię użytkownika i wylosuj wiek. Jeśli wiek użytkownika jest parzysty, wypisz jego dane na ekran.

Podpowiedź: poniżej znajduje się funkcja, która pozwala wylosować liczbę całkowitą z zadanego przedziału:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

Rozwiązanie: przykładowe rozwiązanie znajduje się na branchu zadanie-domowe-2.

Więcej informacji

Gdzie szukać więcej informacji:

• The Modern JavaScript Tutorial
• w3schools

Zadanie domowe 3

W dokumentacji JavaScript znajdź informacje o typach zmiennych, takich jak liczby, łańcuchy znaków (string), wartości logiczne (bool), null czy undefined. Zwróć uwagę na konwersję typów, która może występować automatycznie podczas porównywania zmiennych. Następnie napisz kilka instrukcji warunkowych, które pokazują różnicę między operatorem porównania (==) i ścisłego porównania (===). Porównaj liczby z łańcuchami znaków, wartości logiczne z liczbami, null z undefined, a także obiekty. W każdym przypadku użyj zarówno operatora ==, jak i ===, aby zobaczyć różnice.

Rozwiązanie: przykładowe rozwiązanie znajduje się na branchu zadanie-domowe-3.

3. Obiektowy Model Dokumentu

Obiektowy Model Dokumentu (ang. Document Object Model, DOM) to reprezentacja dokumentu HTML w postaci drzewa obiektów. Pozwala na manipulację zawartością strony internetowej za pomocą języka JavaScript. Aby przejść do tej części kursu, należy wykonać komendę:

git checkout dom

Praca z DOM

W tej części, kursant poznaje DOM poprzez następujące zadania:

• commit 4670d72 Szablon strony
• commit d21c68a Nauka wyświetlania alertów i okienek dialogowych
• commit a2bb84a Nauka manipulowania elementami
• commit 0ab84d5 Nauka reagowania na akcje użytkownika
• commit 035d1b0 Nauka ustawiania opóźnień czasowych (timeouts)
• commit 11b6d58 Nauka ustawiania interwałów

Zadanie domowe 4

Zmień kolor pudełka na jasnozielony, jeśli liczba kliknięć jest parzysta, a w przeciwnym przypadku zmień kolor na czerwony.

Rozwiązanie: przykładowe rozwiązanie znajduje się na branchu zadanie-domowe-4.

4. Gra w Łapanie Jabłek

Ostatnia część kursu to zebranie wszystkich dotychczasowych umiejętności w jednym projekcie - grze w łapanie jabłek. Aby przejść do tej części kursu, należy wykonać komendę:

git checkout czesc-4

PixiJS

PixiJS to biblioteka JavaScript, która ułatwia tworzenie gier i animacji 2D w przeglądarce. Działa jak zestaw narzędzi, które pozwalają rysować, animować i dodawać interakcje do elementów graficznych, takich jak obrazki czy kształty. Wykorzystamy PixiJS do stworzyć gry, w której postać poruszają się po planszy, reagują na kliknięcia klawiaturą, a wszystko wygląda atrakcyjnie i działa płynnie. Wykorzystywane elementy biblioteki PixiJS będziemy tłumaczyć na bieżąco, w trakcie tworzenia gry.

Jeśli chcesz dowiedzieć się więcej o PixiJS, zapraszamy do zapoznania się z literaturą:

• Dokumentacja PixiJS
• Interaktywny samouczek

Projektowanie gry

W tej części kursu, kursant poznaje podstawy tworzenia gier w PixiJS poprzez projekt gry w łapanie jabłek. Zadania składające się na projekt:

• commit 80a16f8 Materiały do budowy gry
• commit 62b27b1 Dodanie skryptów PixiJS
• commit 20427d9 Stworzenie aplikacji PixiJS
• commit 26758ef Dodanie pierwszego zasobu (gracz.png) i stworzenie gracza
• commit d407ef9 Załadowanie i dodanie tła
• commit 9d71622 Sterowanie klawiaturą
• commit da20a06 Spadające obiekty
• commit 4e4c131 Aktualizacja pozycji spadających obiektów
• commit aad9b86 Wykrywanie kolizji
• commit 2e792cf Wyświetlanie wyniku i liczby żyć
• commit 89c03f8 Ładowanie i dodawanie dźwięków
• commit e1de4ed Zwiększanie trudności gry z czasem

Zadanie domowe 5

1. Zmień teksturę gracza w zależności od ruchu (twarz w lewo lub w prawo).
   Podpowiedź: obiekt można odbić lustrzanie przez ustawienie ujemnej skali.
2. Dodaj wiatr - spraw, aby jabłka spadały krzywo (pamiętaj, że jabłka nie mogą wyjść poza ekran!)
3. Dodaj restart (naciśnij spację na początku i po zakończeniu gry)
4. Dodaj tablicę wyników (pokaż 3 najlepsze wyniki na ekranie końca gry)

Rozwiązanie: przykładowe rozwiązania znajdują się na branchu zadanie-domowe-5.

5. Podsumowanie

Gratulacje! Ukończyłaś podstawowy kurs języka JavaScript. Teraz powinieneś znać podstawy składni języka, umieć pracować z DOM, a także tworzyć proste gry w PixiJS. Jeśli masz jakieś pytania, uwagi lub sugestie, napisz do nas!