Samouczek Node.js: Hello world

Jak napisać swój pierwszy program w Node.js

Ten samouczek pomoże Ci rozpocząć pracę z Node.js. Wyjaśnia, co jest potrzebne do napisania pierwszego programu w Node.js, skąd pobrać niezbędne narzędzia, jak je zainstalować i jak napisać swój pierwszy program „Hello world”. Jeśli nigdy wcześniej nie pisałeś programu w JavaScript, to jest miejsce, od którego warto zacząć.

Co to jest Node.js

Node.js to otwartoźródłowe, wieloplatformowe środowisko uruchomieniowe, które wykonuje kod JavaScript poza przeglądarką internetową. Node.js pozwala programistom używać JavaScript do pisania narzędzi wiersza poleceń oraz do skryptów po stronie serwera — uruchamiania skryptów po stronie serwera w celu generowania dynamicznej zawartości strony internetowej, zanim strona zostanie wysłana do przeglądarki użytkownika.

Co to jest błąd składniowy?

Błąd składniowy oznacza „Nie rozumiem”. Jeśli rozmawiasz z kimś po angielsku, a ta osoba nie rozumie, co mówisz, odpowie „Nie rozumiem”. Jeśli rozmawiasz z komputerem w JavaScript, a komputer nie rozumie, co mówisz, odpowie „Błąd składniowy”.

Co to jest Visual Studio Code

Visual Studio Code to edytor tekstu, który pomaga w procesie pisania kodu JavaScript. Jest to zwykły edytor tekstu, ale oferuje podświetlanie składni, które pomaga identyfikować funkcje, zmienne, klasy i wszystko inne, co może różnić się od zwykłego tekstu.

Co to jest program „Hello world” w Node.js

Program „Hello world” to najprostszy program, który możesz napisać. Po prostu wyświetla zdanie: Hello world na ekranie komputera. Program „Hello World” to pierwszy program, który programiści piszą w każdym języku programowania.

Wymagania wstępne

Oto, czego potrzebujesz, aby rozpocząć. Aby napisać swój pierwszy program komputerowy w JavaScript, potrzebujesz komputera z systemem Windows, Visual Studio Code, Node.js oraz przykładowego kodu przedstawionego poniżej.

  • Komputer z systemem Windows 10 lub 11
  • Visual Studio Code
  • Node.js
  • Przykładowy projekt Ozeki Hello World

Krok 1 - Pobierz Visual Studio Code

Visual Studio Code

W tym pierwszym filmie pokażemy Ci, jak pobrać Visual Studio Code. To prosty proces; nie będziesz miał trudności z jego wykonaniem. Film zaczyna się od odwiedzenia następującego adresu URL: https://code.visualstudio.com/download/. Wykonanie kroków doprowadzi Cię do momentu, gdy będziesz miał instalator na swoim komputerze. Od tego momentu możesz rozpocząć proces instalacji.

Wideo 1 - Jak pobrać Visual Studio Code (Samouczek wideo)

Wybierz opcję dla systemu Windows

Aby mieć instalator kompatybilny z systemem Windows, wybierz opcję odpowiednią dla Windows 7, 8, 10. Znajduje się ona pod logo Windows (Rysunek 1). Teraz Twoja przeglądarka rozpocznie proces pobierania, a Ty będziesz miał instalator gotowy do uruchomienia w mgnieniu oka.

pobierz visual studio code
Rysunek 1 - Pobierz Visual Studio Code

Krok 2 - Pobierz Node.js

Node.js

Cel tego filmu to pokazanie, jak możesz pobrać Node.js na swój komputer. Film rozpocznie się od odwiedzenia strony pobierania Node.js. Samouczek przeprowadzi Cię przez proces aż do momentu zainstalowania środowiska uruchomieniowego. Film trwa nieco ponad minutę i zawiera wszystkie informacje potrzebne do ukończenia procesu. Możesz pobrać Node.js z następującego adresu URL: https://nodejs.org/en/download/current/

Wideo 2 - Jak pobrać Node.js (Samouczek wideo)

Strona pobierania Node.js

Na Rysunku 2 możesz zobaczyć stronę pobierania środowiska uruchomieniowego Node.js. Widoczne są różne opcje metod instalacji. W tym przypadku wybierz wersję odpowiednią dla swojego systemu operacyjnego. Dla większości osób właściwą opcją będzie Windows Installer.

Rysunek 2 - Pobierz Node.js

Krok 3 - Zainstaluj Visual Studio Code

Aby napisać swój pierwszy program w Node.js, będziesz potrzebować edytora tekstu, takiego jak Visual Studio Code. W poniższym filmie możesz zobaczyć, jak zainstalować Visual Studio Code na swoim komputerze. Film rozpocznie się od odwiedzenia strony pobierania środowiska programistycznego Visual Studio. Zakończy się gotowym do użycia pobranym instalatorem. W trakcie procesu dowiesz się, którą opcję pobierania należy wybrać. Warto obejrzeć ten film, ponieważ po jego obejrzeniu będziesz w stanie pobrać Visual Studio Code w dowolnym momencie. Film trwa tylko minutę, ale zawiera wszystkie potrzebne informacje.

Wideo 3 - Jak zainstalować Visual Studio Code (Samouczek wideo)

Krok 4 - Instalacja Node.js

Aby napisać swój pierwszy program w Node.js, musisz zainstalować środowisko uruchomieniowe Node.js. Poniższy film pokazuje, jak można przeprowadzić tę instalację. Rozpocznie się od instalatora na twoim komputerze. Pod koniec filmu program będzie już zainstalowany. Proces jest prosty, a film bardzo szczegółowy. Nie będziesz miał problemu z jego śledzeniem.

Wideo 4 - Jak zainstalować Node.js (Samouczek wideo)

Aby sprawdzić, czy Node.js jest zainstalowany, musisz otworzyć Wiersz polecenia.

  1. Otwórz menu Start
  2. Wpisz „cmd” w polu wyszukiwania
  3. Kliknij Enter
  4. Pojawi się czarne okno
  5. Wpisz w terminalu kod z (Kod 1)

node -v
	

Kod 1 - Sprawdzanie, czy Node.js jest zainstalowany

Testowanie Node.js

Aby sprawdzić, czy Node.js jest zainstalowany na twoim komputerze, musisz otworzyć wiersz polecenia i wpisać powyższy kod. Wyświetli on numer wersji środowiska uruchomieniowego, jeśli jest ono poprawnie zainstalowane (Rysunek 3).

Rysunek 3 - Testowanie, czy Node.js jest zainstalowany

Po tych krokach możemy kontynuować naszą podróż, aby napisać nasz pierwszy program „Hello world!” w JavaScript i uruchomić go w środowisku Node.js.

Krok 5 - Konfiguracja środowiska

Musimy utworzyć folder do przechowywania naszych kodów. Możemy to zrobić przed uruchomieniem Visual Studio Code, ale możemy też to zrobić podczas otwierania folderu.

W Visual Studio Code mamy możliwość posiadania terminala wewnątrz programu, więc skonfigurujemy terminal wewnątrz programu.

Poniższy film pokaże ci, jak utworzyć nowy projekt w Visual Studio Code. W trakcie procesu utworzysz nowy folder dla projektu. Film trwa tylko 52 sekundy i jest bardzo szczegółowy. Nauczysz się procesu, oglądając film.

Wideo 5 - Jak skonfigurować nasze środowisko (Samouczek wideo)

Tworzenie nowego pliku w Visual Studio Code

Na Rysunku 4 możesz zobaczyć, który przycisk należy nacisnąć, aby utworzyć nowy plik wewnątrz projektu. Otworzy się pole tekstowe pod przyciskiem, gdzie należy podać nazwę projektu. Po nazwaniu projektu zobaczysz, że sekcja edytora kodu się zmieniła. Teraz możesz zacząć wpisywać kod, a będzie on zapisywany w projekcie.

Rysunek 4 - Tworzenie nowego pliku w Visual Studio Code

Tworzenie nowego terminala

Aby uruchomić swój pierwszy program, będziesz potrzebować terminala. Będziesz mógł użyć terminala, aby zobaczyć wynik swojego programu. Aby go utworzyć, kliknij przycisk Terminal znajdujący się w pasku menu Visual Studio Code. Tam znajdziesz przycisk Nowy Terminal. Ten przycisk utworzy terminal, w którym możesz uruchomić swój program. (Rysunek 5)

Rysunek 5 - Tworzenie nowego terminala w Visual Studio Code

Krok 6 - Napisz swój program „Hello world” w JavaScript

Pierwszym programem, który piszesz w dowolnym języku programowania, jest program „Hello world”. Jego jedynym celem jest wyświetlenie tekstu „Hello world” na ekranie komputera. W tym przykładzie program zawiera tylko jedną linię: console.log("Hello world!"); i ta linia zwróci „Hello world!” na ekran.

console.log("Hello world!");
	

Kod 2 - Kod, który wyświetli „Hello world!” w konsoli

Pisanie skryptu „Hello World” (Samouczek wideo)

Celem poniższego filmu jest pomoc w napisaniu twojego pierwszego programu. Jak w większości przypadków, pierwszym programem, który napiszemy, będzie program „Hello World”. Po prostu wyświetli on „Hello World” w konsoli. Film rozpocznie się od pustej sekcji edytora kodu i zakończy gotowym programem. Film jest krótki, ale bardzo szczegółowy. Trwa tylko 14 sekund. Nie będziesz miał problemu z jego zrozumieniem.

Wideo 6 - Jak napisać skrypt „Hello world!” (Samouczek wideo)

Krok 7 - Uruchamianie kodu w terminalu

Aby uruchomić swój kod, musisz otworzyć terminal i wpisać następujący kod:

//Jeśli nazwałeś swój plik inaczej, powinieneś zastąpić część „helloWorld” tą nazwą
node helloWorld.js
	

Kod 3 - Wykona kod helloWorld.js

Spowoduje to przetłumaczenie twojego kodu JavaScript, a słowa wewnątrz nawiasów console.log(); zostaną wyświetlone w twoim terminalu.

Krok 8 - Co się stanie, jeśli popełnię błąd w JavaScript

Visual Studio Code ma wbudowane wykrywanie błędów składniowych, więc jeśli popełnisz błąd w swoim kodzie JavaScript, IDE go wykryje i wyświetli wśród problemów. Jeśli w twoim kodzie jest błąd i go uruchomisz, błąd zostanie również wyświetlony w terminalu. W następnym filmie zobaczysz, jak to wygląda. Dowiesz się, jak wygląda sytuacja, gdy popełnisz literówkę w kodzie. Nauczysz się również, jak poprawić błąd. Film trwa tylko 48 sekund i zawiera wszystkie informacje potrzebne do wykonania procesu. Nie będziesz miał problemu z wykonaniem kroków.

Wideo 7 - Jak popełnić błąd składniowy, a następnie go naprawić (Samouczek wideo)

Błędy w kodzie

Na Rysunku 6 możesz zobaczyć, jak wygląda sytuacja, gdy popełnisz literówkę w kodzie. Możesz zobaczyć powiadomienie o błędzie w liście projektów, w terminalu oraz w edytorze kodu. To sprawia, że poprawianie błędów jest bardzo proste. Pamiętaj, aby poprawić błędy i ponownie uruchomić program.

Rysunek 6 - Błąd w kodzie JavaScript w Visual Studio Code

Podsumowanie

Teraz, gdy ukończyłeś pięć prostych kroków opisanych powyżej, zrobiłeś pierwszy krok w kierunku zostania programistą Node.js. Ten program może wydawać się prosty i może nie robić wiele, ale tak zaczynają się wielkie rzeczy. Kolejnym krokiem w twojej podróży edukacyjnej będzie tworzenie żądania HTTP.

More information