JavaScript: Instalacja środowiska

0:00W tym rozdziale zajmiemy się środowiskiem

0:02Node.js, ale nie będziemy go omawiać w taki sposób, żeby np.

0:06wykonywać kod serwerowy, bo do tego potrzebowalibyśmy osobnego kursu

0:10i taki kurs jest już na eduweb.pl, ale będę chciał Ci pokazać jak można wykorzystać Node.js

0:15do tego, aby uruchamiać narzędzia, które wspomagają naszą pracę z front-endem,

0:19czyli z językiem JavaScript dla przeglądarek internetowych.

0:23Bo okazuje się, że z użyciem Node można

0:25tworzyć różne rozwiązania i zostało stworzonych mnóstwo takich ciekawych

0:29narzędzi, które pozwalają nam wydajniej pracować z kodem JavaScript.

0:33Na początek będziemy potrzebowali

0:34zainstalować sobie środowisko i przejdziemy na stronę nodejs.org

0:38i wystarczy, że sobie pobierzesz tutaj klikając ten duży przycisk wersję LTS.

0:43I w momencie jak Ty oglądasz ten kurs, tutaj może być inna wersja niż u mnie.

0:46Niemniej jednak pobierz sobie tą wersję LTS, czyli Long Term Support.

0:50Ona ma po prostu długoterminowe wsparcie.

0:53Nie będę pokazywał jak to zainstalować, bo

0:54zarówno na Macu jak i na Windowsie to jest standardowy instalator, gdzie po prostu

0:58klikasz next i zostaw wszystkie domyślne opcje,

1:00nic tam po prostu nie przestawiaj.

1:02Na pewno sobie z tym poradzisz.

1:04No i teraz po zainstalowaniu takiego środowiska potrzebujemy przejść sobie do

1:08terminala, żeby sprawdzić czy Node zainstalowało się poprawnie.

1:12Ja korzystam z terminala wbudowanego w

1:14VS Code, więc polecam Ci również to zrobić.

1:17A więc jeżeli mamy tutaj edytor,

1:18wystarczy, że przejdziemy do View i następnie do Terminal, otworzy nam się z

1:22boku, albo tutaj u dołu może Ci się otworzyć takie oto okienko.

1:25Jeżeli nigdy z tego nie korzystałeś chociaż może pewnie to widziałeś np.

1:29w Windowsie jest coś takiego jak wiersz polecenia.

1:31To jest mniej więcej to samo, tylko otwiera się tutaj.

1:33Na Macu mamy aplikację Terminal, a tutaj jest to po prostu wbudowane VS Code, ale

1:37pod spodem korzysta właśnie z tych systemowych rozwiązań.

1:40I jeżeli Node.js uda się poprawnie

1:42zainstalować, to po wpisaniu node-v zwróci nam wersję Node.js.

1:46Jeżeli otrzymasz tutaj jakiś błąd, że takie polecenie nie istnieje, to po tej

1:51instalacji koniecznie jeszcze zrestartuj system.

1:54Jeżeli natomiast tutaj wersja zostanie zwrócona, to znaczy, że wszystko jest ok.

1:58No i drugie narzędzie, które razem z Node się zainstaluje to jest npm.

2:01Też możemy sprawdzić jego wersję

2:03i dzięki temu wiemy, że ono jest dostępne i działa.

2:05I tym narzędziem zajmiemy się w lekcji kolejnej.

2:08Skoro zatem mamy już Node.js, to ja w tym kursie kilkukrotnie wspominałem, że jest

2:12to nic innego jak platforma uruchomieniowe dla języka JavaScript.

2:16Czyli my do tej pory uruchamialiśmy nasze

2:17skrypty w środowisku przeglądarki internetowej

2:20a teraz pokażę Ci, że możemy również uruchamiać skrypty z użyciem Node.

2:24Ale zanim to zrobimy to pokażę Ci, że jak

2:26wpiszemy samo node to zostaniemy przeniesieni do takiej specjalnej konsoli.

2:30Jest to taki interfejs Repl, w którym

2:32możemy uruchamiać kod JavaScript. Czyli tak samo jak w przeglądarce

2:35mieliśmy konsolę, w której czasami sobie coś eksperymentowaliśmy w tym kursie

2:39podobnie tutaj możemy sobie wykonywać kod

2:41JavaScript, na przykład utworzyć jakąś stałą, powiedzmy number,

2:45przypisać tu wartość 2 i powiedzieć powiedzmy number razy 10.

2:49Jak widzisz, kod JavaScript jest tutaj

2:50wykonywany natomiast zupełnie poza środowiskiem przeglądarki internetowej

2:54i też niech nie zmyli Cię to, że jesteśmy w edytorze VS Code.

2:57My nie uruchamiamy tego JavaScriptu w VS Code tylko z użyciem node w terminalu.

3:02A w VS Code mamy tylko taką nakładkę na ten właśnie terminal.

3:06Czyli tutaj możesz sobie eksperymentować z kodem JavaScript,

3:08ale jak już też wspominałem w tym kursie,

3:10fakt, że jesteśmy w innym środowisku niż przeglądarka sprawia, że nie mamy np.

3:14obiektu window,

3:15mamy za to inne obiekty, które są specyficzne dla środowiska Node. I to

3:19właśnie różni sam język JavaScript, który i w przeglądarce będzie działał tak samo

3:24i tutaj w node od tego co nam oferuje dana platforma w przeglądarce np.

3:28mamy window czy document, który pozwala nam tworzyć nowe elementy itd.

3:32W Node tego nie mam, bo nie pracujemy zupełnie ze środowiskiem przeglądarki internetowej.

3:36Tutaj z kolei będziemy mieli na przykład moduły i funkcje, które pozwolą nam

3:39odczytywać i tworzyć pliki na dysku komputera.

3:43W przeglądarce nie moglibyśmy napisać skryptu, który zapisałby dowolny plik np.

3:47na pulpicie użytkownika, bo wtedy

3:48moglibyśmy tworzyć wirusy i ktoś gdyby wszedł na taką stronę to nawet by nie

3:52wiedział, że my mu na dysku zapisujemy jakiś plik.

3:54Natomiast z użyciem Node.js ten kod się wykonuje na komputerze albo na serwerze

3:59i jak najbardziej możemy tworzyć i zapisywać

4:01pliki. I wszystko to robimy z użyciem języka JavaScript, ale jak widzisz w dwóch

4:05różnych środowiskach. Będę chciał teraz z tego wyjść.

4:08Piszemy kropka i następnie exit i ten terminal sobie tutaj zostawimy,

4:12ja go tylko wyczyszczę i w katalogu, który mamy

4:14tutaj będę chciał utworzyć plik JavaScript,

4:16jego nazwa jest dowolna, ale jego nazwa index.js. I ten plik będziemy chcieli nie

4:20podłączać do przeglądarki internetowej, ale uruchomić z użyciem node.

4:24Więc jeżeli sobie tutaj wpiszemy console.log, które też w Node.js jest dostępne.

4:28Witaj świecie.

4:30I teraz ten plik będę chciał uruchomić to

4:32będąc tutaj VS Code otworzył mi się w katalogu kurs, jak wpiszę sobie ls albo na

4:37windowsie dir to zobaczę tutaj folder Instalacja środowiska.

4:40Musimy do niego przejść wpisując cd instalacja-środowiska

4:44I teraz jak wpiszę ls albo dir na windowsie widzę ten plik index.

4:48Jeżeli teraz wpiszemy Node i wskażemy na ten plik index.js to Node po prostu

4:53wykona cały ten plik. I zobacz, zobaczyliśmy w konsoli

4:56Witaj świecie.

4:57No i właśnie o to nam chodziło.

4:58Możemy pisać jakieś skrypty

5:00JavaScript korzystając z Node i następnie w

5:02ten sposób je uruchamiać zupełnie poza przeglądarką internetową.

5:06Być może pamiętasz, jak w tym kursie

5:08mówiłem o globalnym obiekcie, w którym w przeglądarce było Window.

5:11Mówiłem wtedy, że w Node takim obiektem jest obiekt Global.

5:14Czyli mamy coś takiego jak global,

5:16możemy sobie go wyświetlić, znowu

5:17tutaj wpiszę node index,

5:18wykonamy ten skrypt.

5:20Tutaj nam się będą jakieś pokazywać

5:21rzeczy, które nie do końca może od razu są czytelne, ale mamy tutaj jak widzisz np.

5:26clearInterval, clearTimeout, setInterval, setTimeout,

5:29to są te rzeczy, które też Ci pokazywałem

5:30i jak widzisz w Node też są dostępne. I wtedy

5:33wspominałem jeszcze, że ustandaryzowano global i window

5:37mówiąc czy w zasadzie wstawiając do

5:39specyfikacji taką stałą globalną, która nazywa się globalThis

5:43i tu możemy sobie porównać czy global to jest to samo co globalThis, uruchommy to,

5:48jak widzisz jest zwrócone true, czyli tak. I w przeglądarce też mamy globalThis, ale

5:52ono kieruje na window, co też Ci już wcześniej pokazywałem.

5:56Na koniec chcę Ci pokazać praktyczny przykład, że z użyciem Node rzeczywiście

6:00możemy zrobić coś innego niż w przeglądarce, czyli np.

6:03w tym katalogu tutaj zapisać sobie jakiś plik.

6:06W tym celu musimy sobie pobrać moduł i Node.js

6:08korzysta z takiego systemu modułów, który nazywa się require.js

6:12i wygląda to tak, że utworzę sobie stałą, którą nazwę fs,

6:16mogę ją nazwać jak chcę i następnie mamy taką globalną funkcję require, w której

6:20podajemy jaki moduł Node.js chcemy sobie wczytać. I te moduły są wbudowane.

6:24Chcemy wczytać moduł o nazwie fs jak File

6:26System i będę chciał teraz z niego skorzystać.

6:30Jeżeli byśmy sobie przeszli do przeglądarki i tutaj do dokumentacji do tej wersji

6:36to możemy sobie zobaczyć, że mamy tutaj wszystko dokładnie opisane i File System

6:39jak wejdziemy to znajdziemy coś takiego jak np.

6:42może wyszukam write file i chcemy właśnie z tej funkcji skorzystać.

6:47Tutaj jest przykład jak z niej korzystać, ale ja Ci to teraz również pokażę.

6:51Czyli możemy napisać fs.writeFile w ten sposób i następnie podać ścieżkę do

6:56pliku gdzie go chcemy zapisać. Więc chcemy go zapisać w tym samym katalogu.

7:00I mamy taką specjalną zmienną, która się nazywa dirname z dwoma podkreślnikami.

7:04Ona nam zwraca jakby pełną ścieżkę do katalogu,

7:07w którym jest ten plik index.js, czyli właśnie tutaj.

7:10I następnie do tej ścieżki chcemy dokleić nazwę pliku, który nazwę hello.txt,

7:14następnie przekazuje się tutaj tekst, który chcemy wstawić do tego pliku np.

7:19Witaj świecie,

7:20i następnie jest taka funkcja, która się wykona

7:22kiedy ten plik się uda albo nie uda

7:25zapisać. Może na chwilę zamknę terminal i ta funkcja otrzyma obiekt błędu.

7:29Jeżeli będzie błąd możemy sobie sprawdzić.

7:31Jeżeli error to w konsoli możemy

7:33wyświetlić po prostu wystąpił błąd i przekazać sobie ten error żeby go

7:39podejrzeć, a w przeciwnym wypadku możemy tutaj napisać zapisano plik. I zobacz.

7:47My się cały czas posługujemy językiem

7:49JavaScript, ale korzystamy z jakiegoś API, które w przeglądarce nie byłoby dostępne.

7:53Czyli jest jakiś obiekt fs,

7:55po kropce odwołujemy się do metody writeFile,

7:57mamy jakąś specjalną zmienną, która nam pozwala odczytać aktualny katalog itd.

8:02I teraz jak wrócę do terminala i wykonam

8:03ten plik czyli node index.js zobacz co się stało.

8:08Mamy tutaj plik hello.txt, którego przed momentem nie było.

8:11I w nim jest napisane Witaj świecie.

8:14Tym przykładem chciałem Ci po prostu pokazać, że Node.js

8:16działa zupełnie poza przeglądarką internetową i oferuje inne możliwości.

8:20Niemniej jednak jeżeli chodzi o syntax,

8:22o zapis, to cały czas posługujemy się znanym nam już językiem JavaScript i wszystkie

8:27wbudowane w języku JavaScript funkcje i mechanizmy będą tutaj dostępne,

8:31natomiast aby tworzyć ciekawe rozwiązania,

8:32będziemy bardzo mocno korzystać z tego API, które oferuje nam dane środowisko.

8:37Czyli w przeglądarce internetowej będziemy

8:39pracować z Obiektowym Modelem Dokumentu, a w przypadku Node np.

8:42z takim modułem jak File System,

8:44ale tych modułów jak mogłeś zobaczyć w dokumentacji jest znacznie więcej.