Przygotowanie środowiska do nauki JavaScript

Kod, który tworzą programiści to nic innego niż zwykły tekst, który jest napisany według odpowiednich reguł i z zachowaniem specyficznego dla danego języka programowania nazewnictwa.

Kod to inaczej zestaw instrukcji, który my jako programiści przekazujemy komputerowi aby wykonał nasze polecenia i zrobił to co chcemy. Następnie ten kod w przypadku języka JavaScript będzie Interpretowany czyli przeczytany, zrozumiany i zostaną wykonane zawarte w kodzie instrukcje.

Do tworzenia kodu JavaScript potrzebujemy narzędzia, które pozwoli nam tworzyć pliki tekstowe. Wiadomo, że z tekstem kojarzy się np. Word ale w tym przypadku to nie zadziała bo Word dodaje do tekstu dużo rzeczy od siebie a my potrzebujemy czystego tekstu, bez żadnych bajerów.

Przykładowo mógłbyś pisać kod w notatniku jeśli używasz Windowsa ale będzie to strasznie karkołomne i nieefektywne. O wiele lepszym rozwiązaniem będzie skorzystanie z narzędzi do tego przeznaczonych.

W przypadku tworzenia kodu JavaScript masz kilka możliwości:

• Zintegrowane środowisko programistyczne
• Przeglądarka WWW
• Edytory Online
• Praca w środowisku Node.js

Zintegrowane środowisko programistyczne (ang. IDE)

to specjalny program, który służy do tworzenia, uruchamiania i sprawdzania poprawności oraz naprawiania błędów w kodzie źródłowym. Jest to program jak każdy inny i programiści używają go do tworzenia kodu na co dzień.

Zazwyczaj gdy mówimy o IDE mamy na myśli taki kombajn do tworzenia kodu czyli wiele narzędzi w jednym. Nie chcę tutaj się rozdrabniać, który program jest Zintegrowanym środowiskiem programistycznym, a który edytorem kodu źródłowego bo te różnice wynikają z bardziej zaawansowanych zagadnień. Dlatego często nie mówimy zintegrowane środowisko programistyczne tylko edytor kodu źródłowego lub po prostu edytor, edytor tekstu. Te wszystkie nazwy będą oznaczały ten sam program.

Jeśli chcesz napisać kod to uruchamiasz IDE, tworzysz plik z wybranych rozszerzeniem np. .js, .html .css ….. Następnie uruchamiasz ten kod i w przypadku języków takich jak HTML, CSS, JavaScript, będziesz robił to w przeglądarce ponieważ są to technologie webowe.

Najlepszą opcją na start będzie pobranie i zainstalowanie edytora kodu źródłowego Visual Studio Code, który bardzo dobrze sprawdzi się do nauki programowania i wielu programistów na całym świecie korzysta z niego do codziennej pracy. Posiada on mnóstwo rozszerzeń, które ułatwiają codzienną pracę i rozwiązują wiele problemów za nas.

Mój bezpłatny kurs Visual Studio Code dla początkujących

Dodatkowo edytor będzie zaznaczał Twój kod różnymi kolorami, dzięki temu gdy pojawi się błąd to już na etapie pisania kodu edytor podkreśli Ci ten kawałek kodu i wyświetli komunikat, że coś tutaj nie gra.

Inna przydatne funkcjonalności to podpowiedzi podczas pisania kodu, automatyczne formatowanie kodu aby wyglądał ładnie i przejrzyście, automatyczne odświeżanie zawartości pliku w przeglądarce, za każdym razem gdy wprowadzisz jakieś zmiany i wiele wiele więcej.

Polecam od początku korzystać z narzędzi dedykowanych dla programistów, ponieważ dzięki temu już od pierwszych kroków korzystasz z takich samych narzędzi jak profesjonalni programiści i w trakcie nauki programowania równolegle uczysz się i poznajesz najważniejsze narzędzie w pracy programisty.

Przeglądarka WWW

Język JavaScript został stworzony w celu dodania życia do statycznych stron internetowych dlatego możesz również uruchamiać czysty kod JavaScript w przeglądarce.

Polecam korzystać z 2 przeglądarek- Chrome i Firefox. Są one najpopularniejsze i najlepsze do nauki frontendu. W przeglądarce mamy taką specjalną strefę, która nazywa się narzędziami deweloperskimi. Żeby je uruchomić używamy albo klawisza F12 albo klikamy prawym przyciskiem myszy gdziekolwiek w przeglądarce i wybieramy ostatnią opcję czyli zbadaj.

Są tam różne zakładki, do których przejdziemy w późniejszym etapie ale zaczynamy od zakładki console, lub konsola.

Konsola to miejsce gdzie wyświetlane są informacje na temat tego co dzieje się na obecnej stronie i o czym powinien wiedzieć programista.

W konsoli można wpisać praktycznie wszystkie polecenia napisane w języku JavaScript. Dodatkowo w związku z tym, że jesteśmy już w przeglądarce to w konsoli mamy dostęp do wszystkich funkcjonalności udostępnianych przez przeglądarkę internetową, co oczywiście daje dodatkowe możliwości.

Za każdym razem gdy wpiszemy coś w konsoli to żeby uruchomić ten kod wciskamy enter, który zatwierdza wprowadzone polecenie. Jeśli chcesz przejść do kolejnej linii ale bez zatwierdzania polecenia bo na przykład piszesz kod na kilka linijek to użyj skrótu klawiszowego Shift + Enter. Jeśli w trakcie wpisywania kodu zobaczysz, że konsola podpowiada Ci składnię to żeby zatwierdzić tę propozycję konsoli wciśnij tab.

Aby przekonać się, że wszystko jest okej i wiesz jak korzystać z konsoli w przeglądarce to wpisz następujące polecenie:

console.log(‘Hello World!’);

a następnie wybierz enter. Powinien pojawić się napis Hello World! w kolejnej linijce.

Pierwsze koty za płoty bo napisałeś pierwszą linijkę kodu w języku JavaScript.

Jeśli zastanawia Cię dlaczego dodatkowo w konsoli pojawił się napis "undefined" to nic się nie martw, wszystko działa w porządku i jest to dodatkowa funkcjonalność konsoli - automatycznie wypisuje wartość ostatniej instrukcji. Na tę chwilę nie będziemy zagłębiać się w szczegóły tylko porozmawiamy o tym później.

Konsola w przeglądarce jest przydatna ale zazwyczaj będziesz jej używał w celu debugowania lub sprawdzania różnych rzeczy a nie na zasadzie pisania kodu. Wynika to z tego, że takie pisanie kodu nie jest wydaje i dużo lepszą opcją są dedykowane narzędzia takie jak edytory kodu źródłowego. Zazwyczaj kod będziesz pisał w edytorze kodu a następnie uruchamiał w przeglądarce i często będziesz korzystał z konsoli żeby wyświetlić sobie różne rzeczy.

Edytory Online

Czasem będziesz chciał coś sprawdzić na szybko lub po prostu nie będziesz miał komputera pod ręką a mimo wszystko chciałbyś uruchomić kod. W takich przypadkach najlepszą opcją będzie skorzystanie z edytorów typu online ponieważ nie musisz niczego instalować i możesz uruchomić kod a nawet całą aplikację nawet na telefonie czy tablecie. Narzędzie, z którego będe korzystał to Stackblitz. Mozna powiedzieć, że to taki wypasiony edytor kodu źródłowego, którego możesz używać w przeglądarce. Działa na prawdę imponująco szybko i dzięki niemu możesz współdzielić kod oraz robić extra rzeczy. Przekonasz się sam jakim jest super narzędziem gdy na dalszych etapach tego kursu, będziesz z niego korzystać.

Daje on olbrzymie możliwości i wszystkie zawarte w tym kursie przykłady będziesz mógł zobaczyć w działającym środowisku. Narzędzia tego typu świetnie sprawdzają się w celu zademonstrowania kodu, pracy z innymi no i nauki programowania. W przypadku różnych edytorów, kod może być uruchamiany w inny sposób a tutaj będziemy mieli wszystko ujednolicone i łatwe do przyswajania.

Tobie polecam przepisywać ten kod i uruchamiać samodzielnie we własnym edytorze kodu źródłowego, ponieważ to w nim będziesz pisał kod na co dzień. Jeśli chcesz oczywiście możesz te przykłady modyfikowac i od razu będziesz widział resultat wykonania twojego kodu.

Ja zdecydowałem się zastosować taki edytor online żeby ułatwić Ci naukę i bez względu na to z jakiego urządzenia i systemu korzystasz, w przedstawionych przykładach znajdziesz działający kod, którym możesz dodatkowo bawić się i go modyfikować. Czyli możesz go dowolnie zmieniać, modyfikować i testować różne opcje bez konieczności doinstalowywania czegokolwiek.

Praca w środowisku Node.js

Node.js to środowisko uruchomieniowe języka JavaScript. Czyli umożliwia nam uruchamianie skryptów napisanych w języku JavaScript. Zazwyczaj Node.js kojarzy nam się z backendem czyli specjalnym serwerem, na którym może być zainstalowany i może tam wykonywać kod JavaScript.

Node.js może być wykorzystywany w różnych aplikacjach, w tym serwerach internetowych, narzędziach wiersza poleceń, aplikacjach desktopowych, a nawet robotyce. Jest powszechnie używany do tworzenia skalowalnych aplikacji sieciowych ze względu na jego zdolność do obsługi dużej liczby jednoczesnych połączeń o wysokiej przepustowości. Ponadto Node.js jest często wykorzystywany w aplikacjach internetowych działających w czasie rzeczywistym, aplikacjach do czatowania i aplikacjach do przesyłania strumieniowego.

Żeby zainstalować środowisko Node.js na lokalnym komputerze wchodzimy na stronę nodejs.org i po wybraniu właściwego systemu operacyjnego i wersji Node z oznaczeniem LTS czyli Long term Support pobieramy go na nasz komputer. Następnie uruchamiamy instalację przez kliknięcie lewym przyciskiem myszy na pobrany plik. Przechodzimy całą instalację z ustawieniami domyślnymi.

Dodatkowo wraz z Node.js-em pobraliśmy na nasz komputer aplikację konsolową npm. Jest to specjalny menadżer pakietów czyli różnych skryptów i mini aplikacji napisanych w JavaScript.

Takie skrypty udostępniane są przez społeczność na zasadach open source i możesz je wszystkie znaleźć na stronie npmjs.com. Dostępne są one dla każdego i praktycznie każdego dnia będziesz korzystał z npm do instalowania różnych skryptów ale także do uruchamiania własnych.

Po zainstalowaniu środowiska Node.js uruchamiamy wiersz poleceń, czyli w wyszukiwarce wpisujesz wiersz poleceń albo uruchamiasz terminal w edytorze kodu źródłowego i wpisujesz polecenie node -v.

Te polecenie powinno wyświetlić informację o zainstalowanej wersji Node na Twoim komputerze.

W przypadku gdy będziesz chciał uruchomić kod JavaScript będziemy używali polecenia node a następnie nazwa pliku który chcemy uruchomić.

Czyli przykładowo jeśli ten plik który chcesz uruchomić znajduje się w tym folderze, w którym jesteś obecnie to wpisujesz polecenie

node nazwa-pliku.js

W przypadku gdy plik, który chcesz uruchomić z kodem JavaScript będzie w innym miejscu projektu, czyli na przykład w innym folderze to najpierw podajesz polecenie node i wskazujesz ścieżkę do tego pliku czyli np. node ./katalog/plik.js

Jak widzisz masz sporo możliwości uruchamiania kodu JavaScript. W tym kursie będziemy uruchamiać kod JavaScript na różne sposoby i Tobie polecam również korzystać z Edytora Kodu Źródłowego i w nim pisać kod. Dzięki temu będziemy mogli uruchomić kod zarówno w przeglądarce za pomocą różnych wtyczek do VS Code jak i uruchamiać kod w Node.js za pomocą terminala.