Podstawy Programowania: Edytor kodu

0:00Kiedy mamy już zainstalowane środowisko

0:02node.js, które pozwoli nam uruchamiać język JavaScript to potrzebujemy jeszcze jednego

0:07niezbędnego w programowaniu narzędzia, a jest to edytor kodu, czyli właśnie taki

0:11edytor gdzie będziemy pisać kod źródłowy a następnie go uruchamiać.

0:15I ja będę w tym kursie wykorzystywał, co Tobie również polecam, edytor Visual Studio

0:19Code, który znajdziesz na stronie code.visualstudio.com

0:22Jest to darmowy edytor dostępny na Maca,

0:25Windowsa i Linuxa więc wystarczy, że tutaj sobie klikniesz pobierz, zainstalujesz taki edytor i

0:30go uruchomisz i będziesz mógł pracować razem ze mną.

0:33Mój edytor będzie wyglądał troszeczkę inaczej ale to za sprawą ustawień, bo w tym edytorze

0:38możesz zmienić jego wygląd, kolory, fonty itd.

0:42Więc mój będzie wyglądał trochę inaczej,

0:43ale to nie wpłynie w żaden sposób na to, w jaki sposób będziesz mógł razem ze mną

0:49krok po kroku wykonywać wszystkie polecenia.

0:51Swoją drogą na eduweb.pl dostępny jest mojego autorstwa kurs o Visual Studio Code, gdzie

0:57możesz się nauczyć bardzo dokładnej obsługi i konfiguracji tego edytora,

1:01natomiast w tym kursie nie będziemy w nim robić nic na tyle skomplikowanego, aby jakakolwiek

1:05wcześniejsza wiedza z tego zakresu była wymagana.

1:08Więc zainstaluj sobie ten edytor, po prostu go tutaj pobierając

1:12I następnie będziemy go mogli uruchomić. Ja sobie ten edytor teraz otworze. Visual

1:16Studio Code i będę chciał w nim otworzyć folder.

1:19Jak widzisz tutaj już ten folder jest

1:21otwarty, bo robiłem to wcześniej ale wystarczy że tutaj wybierzemy Open

1:25i mam taki folder na pulpicie jak kurs, który jest pusty.

1:28Otwieram sobie tam folder on się pojawia tutaj w sidebarze.

1:31Powiększe sobie ten edytor na pełny ekran i będę chciał teraz tutaj utworzyć nowy plik. Klikam

1:36prawym przyciskiem, wybieram New File i plik nazwiemy test.js.

1:40Wszystkie pliki źródłowe języka JavaScript,

1:43w którym będziemy pisać w tym kursie tworzymy z rozszerzeniem .js.

1:47Więc utworzyłem sobie teraz taki plik i wpisze tutaj dwie linijki kodu JavaScriptowego,

1:52później dokładnie wytłumaczę Ci w kolejnych lekcjach na czym taki kod polega,

1:56na razie chcę go tylko tutaj wpisać, aby

1:58pokazać Ci co możemy sobie skonfigurować w edytorze.

2:03Utworzyłem sobie pewną zmienną, próbuje ją nadpisać i nic się tutaj nie dzieje.

2:07Wydaje się, że ten kod jest poprawny, natomiast tak naprawdę nie jest i pokażę

2:10Ci jak możemy sprawić, żeby edytor podświetlał nam błędy.

2:13Możemy wpisać taki komentarz u góry jak ts_check i wtedy zauważ mamy tutaj takie

2:18podkreślenie i jak najadę to pokazuje mi taki komunikat błędu, nie będziemy go teraz

2:23tłumaczyć, ale ważne, że mój edytor pokazuje mi, że coś jest nie tak w kodzie, który

2:27napisałem. I teraz żebyśmy nie musieli w każdym pliku, który będziemy tworzyć w tym kursie

2:32wpisywać takiego komentarza to powiem Ci, że również możemy to ustawić globalnie.

2:37Jeżeli sobie przejdziemy w edytorze do preferencji do ustawień i

2:40tutaj wyszukamy czegoś takiego jak checkjs to znajdziemy tutaj takie oto ustawienie.

2:45Wystarczy sobie tutaj kliknąć i wybrać wartość true to zostanie wpisane

2:49tutaj po prawej stronie do naszych

2:50ustawień i możemy sobie zamknąć taką zakładkę.

2:53Od tej pory bez tego komentarza jak

2:55widzisz już nam podświetla błędy i będzie to dla nas bardzo bardzo przydatne.

2:59I w codziennej pracy i szczególnie podczas nauki programowania.

3:03Kolejną bardzo fajną rzeczą, którą chciałbym się pokazać, która będzie dla nas

3:06bardzo pomocna będzie pewien dodatek do tego edytora.

3:10Jeżeli przejdziemy sobie tutaj do Preferences i do Extensions to możemy w łatwy sposób

3:15zainstalować pewien dodatek, który nazywa się Quokka.

3:19I wystarczy sobie tutaj kliknąć Install i ten dodatek nam się zainstaluje.

3:25Poczekamy sobie chwilkę możemy zamknąć okno.

3:28Tutaj możemy wrócić do Explorera.

3:30Można to zrobić skrótem klawiaturowym,

3:32ja mam to ustawione na Command Shift E,

3:35ale możesz to również zrobić za pomocą View/Explorer,

3:38tutaj jest pokazany skrót klawiaturowy i

3:40wtedy będziemy widzieli oczywiście te pliki, które mamy w folderze kurs.

3:45Teraz jak zainstalowaliśmy ten dodatek to możemy go uruchomić dla tego konkretnego

3:49pliku. I robi się to z użyciem Command Palette na Macu jest to skrót Command Shift P.

3:55Uruchamia nam się taka paleta, na Windowsie będzie to Control Shift P.

3:59I tutaj wpiszemy sobie quokka i mamy coś takiego jak Start on Current File.

4:04Jeżeli to uruchomimy to nam się uruchomi

4:07właśnie Quokka. Tu się pokazało takie okienko

4:10u dołu, je możemy zamknąć chociaż za moment

4:13będziemy również z niego korzystać, a możemy spokojnie je zamknąć.

4:16Teraz co nam daje Quokka.

4:17Otóż Quokka po pierwsze jak widzisz pokazuje nam błędy, ale po drugie również

4:22pokazuje nam od razu jakby wynik naszego kodu.

4:24Czyli jeżeli bym tutaj napisał tylko zmienna wyświetliło mi to jedynkę. Tego

4:28tekstu nie da się zaznaczyć on się nie znajduje w naszym kodzie źródłowym, ale

4:32jest tutaj w formie takiej podpowiedzi. I to oznacza mniej więcej tyle, że będziemy

4:37mogli widzieć jaka jest wartość takiej zmiennej.

4:39Czy będziemy mogli wykonywać jakieś działania np.

4:41dwa plus dwa jak wpiszemy

4:43to powinno nam pokazać, gdybyśmy to zapisali do jakiejś zmiennej

4:47w ten sposób, to pokaże nam że jest to czwórka.

4:51To wszystko stanie się bardziej jasne w kolejnych lekcjach.

4:53Niemniej jednak to dzięki temu dodatkowi

4:55Quokka będziemy mogli od razu widzieć wynik tego co tutaj robimy.

5:00Kolejną rzeczą, którą będę chciał Ci pokazać to jest ustawienie tego nodemona,

5:05który zaistalowaliśmy w lekcji poprzedniej, więc będziemy chcieli sobie włączyć terminal.

5:09I tutaj należy przejść do View i następnie wybrać Terminal,

5:14pojawi się takie oto okienko. Można tutaj kliknąć

5:16prawym przyciskiem i wybrać Move Panel Right,

5:19ja to preferuję, żeby ten panel był po

5:21prawej stronie i otwiera nam się terminal, czy wiersz poleceń na Windowsie to będzie

5:26właśnie w tym folderze kurs, który mamy tutaj otwarty po tej stronie.

5:30I teraz żeby za bardzo Cię nie wystraszyć,

5:32tak naprawdę ja tutaj nie będę pokazywał nic co byłoby bardzo skomplikowane.

5:36Chcę Ci pokazać tylko jedną rzecz, otóż jak możemy wykonywać plik JavaScriptowy. Bo tutaj

5:40stworzyliśmy sobie plik, w którym napisaliśmy kod źródłowy, ale tak jak

5:44wspomniałem to jest tylko tekst i chcemy żeby ten tekst został wykonany przez

5:48komputer. Żeby coś tak naprawdę się stało. Więc musimy sobie taki plik uruchomić. I

5:53normalnie mając środowisko node możemy wpisać node i podać nazwę tego pliku czyli

5:58test.js. Node nam wykona ten plik i zakończy. W tym pliku

6:02nic takiego się nie działo ale możemy tutaj z pewnej komendy skorzystać,

6:06będę to tłumaczył w kolejnych lekcjach taki jak console.log aby wynik np.

6:11tego dodawania wypisać w konsoli,

6:12quokka już nam tutaj podpowiada bardzo fajnie że jest to 4, więc od razu to

6:16widzimy bez uruchamiania pliku, ale będę chciał również pokazać Ci jak te

6:20pliki uruchamiać. Więc plik muszę oczywiście zapisać Command S lub Control S

6:24i jak jeszcze raz tutaj wpiszemy node test.js to jak widzisz teraz zostało to wpisane 4.

6:30Z tym że jeżeli będziemy coś zmieniać w tym pliku to za każdym razem musimy

6:33przejść tutaj do terminala i od nowa wykonać node test.js.

6:37Nie jest to super wygodne.

6:38W większości przypadków nam tutaj ten dodatek Quokka będzie już pokazywał wynik ale nie

6:43zawsze, więc będziemy chcieli te programy oczywiście uruchamiać. I nodemon, którego

6:47zainstalowaliśmy w lekcji poprzedniej pozwoli nam wpisać coś takiego

6:51nodemon -q, to po to żeby tutaj zbyt wiele w terminalu się nie pojawiało komunikatów,

6:56które nie są dla nas istotne i następnie wpisujemy test.js.

7:00Znowu się nam wykonało pokazało nam się 4 ale to co jest fajne to jak

7:04cokolwiek zmienimy w tym pliku i go zapiszemy, np. zrobię tutaj 2+5, zapisze

7:09plik to nodemon automatycznie wykonuje ten plik od nowa i pokazuje nam wynik, czyli to co

7:14zrobiliśmy tutaj, wypisanie przez console.log. A więc z jednej strony do Quokka

7:19jako takie narzędzie, które szybko nam będzie pokazywać

7:21co tutaj się dzieje w naszym kodzie, czyli jaki jest wynik a z drugiej strony prawdziwe

7:26uruchomienie tego pliku. To uruchomienie to jest właśnie za pomocą nodemona

7:31pod spodem jest uruchamiany node czyli platforma do wykonywania języka JavaScript.

7:36I w tym kursie będziemy się starali mieć otwarty i terminal tutaj po prawej stronie,

7:40no i oczywiście tutaj zainstalowany ten dodatek Quokka, aby można było pewne

7:44rzeczy zobaczyć bez wpisywania tego console.log. Bo zauważ że jak tutaj napiszę res,

7:48czyli jakby się odwołuje do tego co tutaj

7:50zrobiłem, pokazuje mi od razu 7, natomiast w terminalu nigdzie się to nie pokaże bo

7:55nigdzie nie powiedzieliśmy, że chcemy coś wypisać na ekranie.

7:59Nie martw się jeżeli na razie to się wydaje zagmatwane bo będziemy po kolei w

8:03kolejnych lekcjach każdą linijkę tłumaczyć.

8:05Ważne jest po prostu to, że tutaj piszemy

8:07kod źródłowy, który jak zapiszemy plik to jest uruchamiane na naszym komputerze

8:12i jego rezultaty widzimy tutaj w terminalu a Quokka, czyli ten dodatek,

8:16to jest tylko takie narzędzie, które pozwoli nam na szybko podglądać tutaj bez

8:20zapisywania tego pliku, bez tak naprawdę uruchamiania go

8:23jaki byłby wynik gdybyśmy ten plik uruchomili.