JavaScript: Wybór narzędzi

0:00Zanim zaczniemy poznawanie języka JavaScript, chciałbym krótko powiedzieć Ci

0:03o tym, z jakich narzędzi ja będę korzystał w tym kursie.

0:06Jeżeli chcesz, żeby wszystko u Ciebie przebiegało podobnie, to polecam Ci

0:10korzystanie również z tych narzędzi. A więc jako edytor kodu

0:13ja wykorzystuję Visual Studio Code, który znajdziesz pod takim adresem.

0:17Tutaj wystarczy sobie kliknąć Download,

0:18powinna być zaznaczona wersja dla Twojego systemu operacyjnego,

0:21również można tutaj wybrać oczywiście ten system i zainstalować sobie taki edytor.

0:26Przejdźmy sobie teraz do tego edytora.

0:28U mnie on wygląda tak, bo już sobie

0:29skonfigurowałem jego wygląd, więc u Ciebie może wyglądać delikatnie inaczej, ale

0:33wszystko będzie działać dokładnie tak samo.

0:35I teraz będziemy chcieli sobie zainstalować jeszcze jeden fajny dodatek

0:38do tego edytora, więc możemy przejść tutaj do View i następnie do panelu Extensions

0:44i wyszukać sobie dodatku, który nazywa się Live Server.

0:48Ja już go zainstalowałem.

0:49Ten dodatek wygląda tak.

0:51W tym miejscu wystarczy, że klikniesz install.

0:53Ja go zainstalowałem więc widzę tutaj

0:55uninstall. I po zainstalowaniu takiego Live Serwera,

0:58jeżeli będziemy mieli tutaj otwarty jakiś katalog, a poszczególne katalogi będziesz

1:02znajdował w plikach źródłowych będziesz widział na czym ja

1:04tutaj pracuje, to wystarczy, że wciśniemy sobie w tym edytorze Command shift p na Macu albo

1:10Control shift P na Windowsie i wpiszemy Live Server: Open with Live Server.

1:15I to sprawi, że taki serwer uruchomi się np.

1:18na porcie 5500

1:19jeśli będzie wolny, automatycznie otworzy Ci się przeglądarka internetowa

1:23i będziemy tutaj mieli właśnie te katalogi.

1:26I wystarczy, że taki katalog klikniemy i

1:28zauważ wczyta się właśnie nasza strona internetowa, którą mamy w tym miejscu.

1:32I jeszcze jedno narzędzie, z którego będziemy korzystać.

1:35Jest to Chrome DevTools w przeglądarce Chrome.

1:37Mi właśnie otworzyła się przeglądarka Chrome bo

1:39z niej korzystam.

1:40Jeżeli w dowolnym miejscu kliknę prawym

1:42przyciskiem i wybiorę inspect albo w wersji polskiej zbadaj

1:46pojawi nam się taki panel u dołu strony lub z boku,

1:49tutaj można zmieniać jego położenie

1:51I w tym panelu będziemy nie tylko

1:52podglądać tutaj drzewo DOM, o którym będziemy potem mówić w kursie, ale także w konsoli

1:57będziemy mogli wykonywać język JavaScript. A więc język JavaScript, o którym będziemy

2:02się uczyć w tym kursie, jest możliwy do wykonywania bezpośrednio w tym miejscu,

2:06zatem możemy tutaj sobie zrobić jakąś najprostszą operację w stylu 2+2

2:10i zobaczyć jej wynik. Ale także kiedy w naszych skryptach będziemy korzystać z

2:14pewnego obiektu konsoli, to tutaj będą pojawiać się te komunikaty.

2:19Zatem przed każdą lekcją pamiętaj o tym,

2:21aby uruchomić sobie Live Server, jeżeli jeszcze tego nie zrobiłeś.

2:24I tutaj u dołu będziesz widział

2:26czy ten serwer jest uruchamiany tutaj gdzie widzisz port 5 5 0 0.

2:30Można go zatrzymać albo po prostu

2:31wyłączając edytor, albo wciskając raz jeszcze Command shift P na Macu lub Control

2:36shift P na Windowsie i wpisując Live Server i wybierając Stop Live Server.

2:41Wtedy on przestanie działać.

2:42Niemniej jednak wystarczy, że zamkniesz edytor. A więc przed każdą lekcją taki

2:45Live Server należy sobie uruchomić i przejść tutaj do odpowiedniego katalogu,

2:50następnie otwórz sobie również ten panel

2:52Chrome DevTools, bo na nim w każdej lekcji będziemy pracować.

2:56No i ostatnią rzeczą, którą chciałbym Ci pokazać to jest pewna rzecz konfiguracji VS Code,

3:00która sprawi, że błędy w języku JavaScript będą podświetlane.

3:04Wystarczy, że przejdziemy sobie do ustawień

3:06znowu wciskając Command Shift P lub Control Shift P i wpisując Open settings

3:12I tutaj tą wersję gdzie jest napisane JSON.

3:14Jak coś takiego sobie otworzymy to wyszukasz sobie tutaj tscheck

3:18i mamy taką linijkę jak js/ts.implicitProjectConfig.checkJs false

3:24zaznacz to i wybierz true.

3:26To zostanie przekopiowane tutaj do Twoich ustawień.

3:28I to wystarczy, abyśmy w plikach

3:30JavaScript widzieli podświetlanie błędów, które mogą się tam pojawić.

3:34To na pewno przyda nam się, żeby szybko wyłapać błędy zanim przejdziemy do

3:38przeglądarki i zobaczymy, że coś nie działa.

3:40To zatem tyle jeżeli chodzi o narzędzia.

3:42W kolejnej lekcji zobaczysz już jak

3:44wstawić pierwszy skrypt na stronę internetową.