Kod

Jak uruchomić JavaScript: otwieranie kodu w przeglądarce, terminalu i wierszu poleceń

Jak uruchomić JavaScript: otwieranie kodu w przeglądarce, terminalu i wierszu poleceń

Kurs z zatrudnieniem: „Zawód Front-End Developer”

Dowiedz się więcej

Dlaczego istnieje tak wiele sposobów uruchamiania JavaScript

JavaScript został opracowany jako język programowania dla przeglądarek, aby dodać interaktywność do stron internetowych. Pozwala on elementom strony reagować na działania użytkownika, takie jak kliknięcia, a także wyświetlać powiadomienia, zmieniać kolory, style i tekst. Ten kod działa w całości w przeglądarce, a wszystkie jego funkcje są implementowane bezpośrednio na stronie internetowej, dzięki czemu korzystanie z niego jest bardziej dynamiczne i angażujące. JavaScript stał się podstawowym narzędziem do tworzenia nowoczesnych treści internetowych, usprawniając interakcje użytkowników ze stronami internetowymi i aplikacjami internetowymi.

JavaScript to interpretowany język programowania, który nie wymaga wstępnej kompilacji do pliku wykonywalnego. Przeglądarka najpierw analizuje skrypt, a następnie interpretuje go, kompilując powtarzające się fragmenty do kodu maszynowego w razie potrzeby. Pozwala to na natychmiastowy wgląd w wyniki wykonywania kodu, co czyni JavaScript popularnym językiem programowania stron internetowych. Ze względu na swoją interpretowaną naturę, JavaScript umożliwia szybką iterację i sprzężenie zwrotne, co jest szczególnie ważne dla programistów pracujących z dynamicznymi aplikacjami internetowymi.

Aby kod działał poprawnie w przeglądarce, wymagany jest silnik JavaScript. Chrome korzysta z silnika V8, Firefox ze SpiderMonkey, a Safari z JavaScriptCore. Silniki te obsługują wykonywanie kodu JavaScript, umożliwiając przeglądarkom interpretowanie i wykonywanie skryptów. Obsługują one różne funkcje, takie jak obsługa zdarzeń, manipulacja DOM i operacje asynchroniczne. Wydajne silniki JavaScript znacząco poprawiają wydajność aplikacji internetowych i komfort użytkowania.

  • Odczytują kod i budują wewnętrzne „drzewo” wszystkich instrukcji.
  • Kompilują często powtarzane sekcje w szybki kod maszynowy (nazywa się to kompilacją JIT, od Just-In-Time).
  • Przekazują polecenia do wykonania procesorowi komputera.

JavaScript, dzięki swojej prostocie i elastyczności, zyskał popularność nie tylko w tworzeniu aplikacji internetowych, ale także w wykonywaniu zadań poza przeglądarką. Ten język programowania jest aktywnie wykorzystywany do tworzenia logiki po stronie serwera, automatyzacji procesów, testowania i innych zadań. Aby uruchomić kod JavaScript poza przeglądarką, wymagane jest specjalne środowisko uruchomieniowe, które umożliwia wydajną i wygodną implementację tych funkcji.

W 2009 roku wydano Node.js – platformę wykorzystującą silnik V8, podobny do tego używanego w przeglądarce Chrome, ale działający poza nią. To wydarzenie stanowiło ważny kamień milowy w rozwoju JavaScript, który początkowo był językiem przeznaczonym wyłącznie do programowania front-end. Wraz z pojawieniem się Node.js, JavaScript stał się uniwersalnym narzędziem używanym zarówno po stronie klienta, jak i serwera. Platforma ta otworzyła nowe horyzonty w tworzeniu stron internetowych, aplikacji serwerowych i automatyzacji procesów, znacząco rozszerzając możliwości programistów i zwiększając wydajność tworzenia oprogramowania. Node.js stale się rozwija, zapewniając obsługę nowoczesnych standardów i bibliotek, co czyni go niezbędnym narzędziem we współczesnym programowaniu.

Sposoby uruchamiania JavaScript

Programy, które mogą wykonywać kod JavaScript, nazywane są środowiskami wykonawczymi. Istnieją dwa główne typy środowisk JavaScript: przeglądarki i serwera. Środowiska przeglądarki umożliwiają wykonywanie kodu bezpośrednio w przeglądarce internetowej, zapewniając interakcję ze stronami internetowymi. Środowiska po stronie serwera, takie jak Node.js, umożliwiają uruchamianie JavaScript poza przeglądarką, rozszerzając możliwości programistyczne i umożliwiając tworzenie skalowalnych aplikacji internetowych.

JavaScript w przeglądarce odpowiada za interaktywność i dynamiczne zachowanie witryny internetowej. Można go używać do dodawania animacji, reagowania na działania użytkownika, zarządzania zawartością strony i tworzenia okien pop-up. Ten język programowania poprawia komfort użytkowania, czyniąc strony internetowe bardziej żywymi i angażującymi. JavaScript może również współdziałać z HTML i CSS, otwierając ogromne możliwości tworzenia nowoczesnych aplikacji internetowych.

Oprócz wykorzystania w przeglądarce, JavaScript jest szeroko stosowany w środowisku uruchomieniowym Node.js. W tym środowisku język ten jest używany do wykonywania różnorodnych zadań, takich jak praca z systemem plików, obsługa żądań sieciowych, interakcja z bazami danych i automatyzacja procesów. Ten typ kodu jest powszechnie nazywany JavaScript po stronie serwera. Może on jednak działać nie tylko na serwerach, ale także na zwykłych komputerach, co czyni go wszechstronnym narzędziem dla programistów.

Znajomość środowiska uruchomieniowego kodu jest kluczowa dla programistów. Niektóre funkcje są dostępne wyłącznie w przeglądarce, podczas gdy inne są dostępne tylko w Node.js. Niewłaściwe użycie tych funkcji może powodować błędy w programie. Dlatego ważne jest, aby jasno zrozumieć, gdzie i jak kod będzie wykonywany.

Najczęstsze metody to:

  • Za pośrednictwem konsoli programisty w przeglądarce.
  • Użycie oddzielnego pliku .js dołączonego do strony.
  • Użycie edytora kodu, takiego jak Visual Studio Code. Środowisko wykonawcze Node.js można do niego łatwo podłączyć.

Istnieje wiele środowisk online do pracy z JavaScript, HTML i CSS. Platformy te umożliwiają programistom i początkującym testowanie i debugowanie kodu w czasie rzeczywistym, bez konieczności instalowania dodatkowych narzędzi. Popularne przykłady takich środowisk to CodePen, JSFiddle i Repl.it. Narzędzia te zapewniają wygodne interfejsy do pisania, edycji i wizualizacji kodu, a także możliwość udostępniania projektów innym użytkownikom. Korzystanie ze środowisk online znacznie upraszcza proces nauki i tworzenia aplikacji internetowych, pozwalając skupić się na procesie twórczym i doskonaleniu umiejętności programowania.

  • codepen.io
  • jsfiddle.net
  • flems.io
  • codesandbox.io
  • jsbin.com
  • replit.com

Projekty edukacyjne i dzielenie się kodem z podobnie myślącymi osobami często wiążą się z wykorzystaniem takich narzędzi. Nie będziemy się nad nimi rozwodzić, ponieważ są intuicyjne i łatwe do nauczenia.

Jak uruchomić JavaScript w przeglądarce

Najpopularniejszym sposobem uruchamiania JavaScript w przeglądarce jest umieszczenie kodu wewnątrz znacznika <script>. Ta metoda pozwala na integrację skryptów bezpośrednio z dokumentem HTML, zapewniając ich wykonanie po załadowaniu strony. Używanie znacznika <script> Tag można zaimplementować w sekcji <head> lub <body> dokumentu HTML. Umieszczenie skryptu w sekcji <head> umożliwia jego załadowanie przed wyświetleniem zawartości strony, a dodanie go do sekcji <body> gwarantuje, że cały kod HTML zostanie załadowany przed wykonaniem JavaScript, co może poprawić wydajność.

Aby zwiększyć wydajność, możesz użyć atrybutów takich jak «defer» lub «async», które kontrolują kolejność wykonywania skryptów i ładują je asynchronicznie. Prawidłowe i optymalne wykorzystanie JavaScript w przeglądarce pomaga poprawić doświadczenia użytkownika i ogólną wydajność strony internetowej.

Czytanie jest ważną częścią naszego życia, ponieważ rozwija zdolności umysłowe, poszerza horyzonty i wzbogaca słownictwo. Książki, artykuły i inne materiały pomagają nam zdobywać nową wiedzę i rozumieć otaczający nas świat. Regularne czytanie poprawia koncentrację i uwagę oraz redukuje stres. Czytanie rozwija również krytyczne myślenie i umiejętności analityczne. Nie przegap okazji do czytania; wybieraj różnorodne gatunki i tematy, aby uczynić czytanie edukacyjnym i angażującym. Włącz czytanie do swojej codziennej praktyki, aby w pełni je wykorzystać.

Narzędzia programistyczne przeglądarki Google Chrome to zaawansowany zestaw funkcji przeznaczonych dla programistów i projektantów stron internetowych. Umożliwiają one analizowanie stron internetowych, debugowanie JavaScript, edycję kodu HTML i CSS w czasie rzeczywistym oraz ocenę wydajności witryny. Narzędzia te umożliwiają przeglądanie i modyfikowanie elementów DOM, monitorowanie żądań sieciowych i analizowanie czasu ładowania stron, pomagając w optymalizacji aplikacji internetowych. Narzędzia programistyczne oferują również funkcje do testowania responsywności i wydajności, co czyni je niezbędnymi podczas tworzenia nowoczesnych stron internetowych. Korzystanie z tych narzędzi pomaga poprawić jakość kodu i komfort użytkownika.

Otwarcie konsoli to ważny krok dla programistów i użytkowników, którzy chcą wchodzić w głębszą interakcję ze stronami internetowymi. Konsola umożliwia wykonywanie kodu JavaScript, debugowanie aplikacji i uzyskiwanie informacji o błędach. Aby otworzyć konsolę w przeglądarce, wykonaj następujące kroki: W przeglądarce Google Chrome naciśnij klawisz F12 lub użyj kombinacji klawiszy Ctrl + Shift + I (Cmd + Option + I na komputerze Mac), a następnie przejdź do karty Konsola. W przeglądarce Mozilla Firefox naciśnij klawisz F12 lub użyj kombinacji klawiszy Ctrl + Shift + K (Cmd + Option + K na komputerze Mac). Proces przebiega podobnie w przeglądarkach Microsoft Edge i Safari. Umiejętność otwierania konsoli pozwala na efektywną pracę nad tworzeniem stron internetowych, testowaniem skryptów i optymalizacją interfejsu użytkownika.

Otwórz przeglądarkę internetową, taką jak Chrome, Firefox lub inną, której wolisz używać do przeglądania stron internetowych.

Aby otworzyć narzędzia programistyczne, naciśnij klawisz F12 lub skrót klawiaturowy Ctrl + Shift + I (dla użytkowników komputerów Mac: Cmd + Option + I). W Safari należy najpierw włączyć tryb programisty w Preferencjach, a następnie użyć skrótu klawiaturowego ⌘ + Option + I, aby uzyskać dostęp do narzędzi.

Przejdź do zakładki „Konsola”.

Konsola przeglądarki będzie działać na stronie witryny, na której została otwarta. Jeśli chcesz rozpocząć pracę na pustej stronie, po prostu wpisz „about:blank” w pasku adresu. Umożliwi to uruchamianie poleceń i testowanie kodu bez ładowania zawartości.

W konsoli pojawi się migający kursor. Wpisz:

Naciśnij Enter, a wynik zostanie natychmiast wyświetlony.

Podczas próby wklejenia skopiowanego kodu do konsoli przeglądarki może wystąpić błąd związany z polityką bezpieczeństwa. W takim przypadku wpisz polecenie „allow pasting” w konsoli. Ten krok umożliwi Ci pomyślne wklejenie kodu i kontynuowanie pracy.

Aby zmienić schemat kolorów ulubionej witryny, otwórz konsolę przeglądarki. W tym celu naciśnij klawisz F12 lub użyj skrótu klawiaturowego Ctrl+Shift+I. Następnie wprowadź następujący kod:

Konsola przeglądarki zapewnia doskonały sposób na szybkie uruchamianie kodu i debugowanie go. Służy jako poligon doświadczalny, gdzie można testować hipotezy i eksperymentować z różnymi fragmentami kodu. Na przykład, jeśli przygotowujesz się do rozmowy kwalifikacyjnej i chcesz odświeżyć składnię obiektów, po prostu naciśnij klawisz F12 i wpisz potrzebny kod. Pozwala to efektywnie wykorzystać czas i skupić się na nauce kluczowych aspektów programowania. Eksperymentowanie z elementami stron internetowych to ważny krok w nauce tworzenia stron internetowych. Jeśli uczysz się podstaw HTML, CSS i JavaScript, ćwiczenie z elementami stron pomoże Ci lepiej zrozumieć ich właściwości i metody. Zastosowanie wiedzy teoretycznej w praktyce pozwoli Ci utrwalić swoje umiejętności i stać się bardziej biegłym w tworzeniu stron internetowych. Użyj różnych narzędzi do debugowania i testowania, aby zobaczyć, jak zmiany w kodzie wpływają na wygląd i funkcjonalność strony. Ten proces pomoże Ci rozwinąć kreatywność i pewność siebie w pracy z technologiami internetowymi. Czy tworzysz stronę internetową i chcesz wprowadzić zmiany w kodzie? Zanim rozpoczniesz edycję, upewnij się, że Twoje działania są spójne z ogólnymi celami projektu. Pomoże Ci to uniknąć błędów i poprawić wydajność Twojej witryny. Właściwe podejście do zmian w kodzie nie tylko poprawi funkcjonalność, ale także zoptymalizuje witrynę pod kątem wyszukiwarek, co jest ważne dla przyciągania użytkowników. Przed wprowadzeniem jakichkolwiek zmian zaleca się analizę aktualnego stanu witryny, aby określić, które aspekty wymagają dostosowania.

Spróbuj użyć poniższego kodu:

Debugowanie kodu to ważny etap w rozwoju oprogramowania. Jeśli musisz przetestować konkretną funkcję w swoim projekcie, możesz wywołać ją bezpośrednio z konsoli. Pozwala to na szybkie sprawdzenie funkcjonalności i identyfikację błędów, co znacznie przyspiesza proces rozwoju i poprawia jakość kodu. Korzystanie z konsoli do testowania funkcji pomaga programistom efektywnie pracować z kodem i wcześnie rozwiązywać problemy.

Twoja konsola wyświetla teraz komunikaty o błędach wraz z opisami. Regularnie sprawdzaj konsolę, aby szybko reagować na potencjalne problemy. Pomoże Ci to utrzymać witrynę w dobrym stanie i poprawić jej wydajność.

Jak uruchamiać JavaScript w Visual Studio Code

Node.js to środowisko wykonawcze dla JavaScript po stronie serwera, które nie posiada graficznego interfejsu. W przeciwieństwie do aplikacji przeglądarkowych, Node.js nie posiada okien, przycisków ani dokumentów HTML, co czyni go idealnym do zadań po stronie serwera. Interakcja z Node.js odbywa się za pośrednictwem wiersza poleceń lub terminala systemu operacyjnego. Chociaż praca z wierszem poleceń może wydawać się skomplikowana, możemy uprościć ten proces, integrując Node.js z popularnym edytorem kodu Visual Studio Code. Ta integracja znacząco usprawni proces tworzenia oprogramowania, umożliwiając programistom łatwe zarządzanie projektami i szybkie wykonywanie poleceń.

Dodatkowe materiały do ​​nauki:

Node.js: Kompletny przewodnik dla początkujących

Node.js to potężne środowisko do tworzenia aplikacji JavaScript po stronie serwera. Umożliwia programistom tworzenie wydajnych i skalowalnych aplikacji dzięki asynchronicznemu przetwarzaniu danych i architekturze sterowanej zdarzeniami. W tym przewodniku dla początkujących omówimy podstawowe koncepcje i funkcje Node.js, a także kroki, które należy wykonać, aby rozpocząć pracę.

Pierwszym krokiem jest instalacja Node.js na komputerze. Najnowszą wersję można pobrać z oficjalnej strony internetowej. Instalacja obejmuje również npm, menedżera pakietów, który znacznie ułatwia pracę z bibliotekami i modułami.

Po zainstalowaniu możesz przetestować Node.js, uruchamiając polecenie w terminalu. Zapewni to poprawną instalację. Następnym krokiem jest utworzenie prostej aplikacji. Pomoże Ci to zapoznać się z podstawową składnią i strukturą projektu.

Node.js wykorzystuje architekturę modułową, która pozwala podzielić kod na mniejsze moduły, ułatwiając jego utrzymanie i testowanie. Możesz używać wbudowanych modułów, takich jak http, do tworzenia serwerów WWW lub dołączać biblioteki innych firm za pomocą npm.

Upewnij się, że znasz podstawy pracy z funkcjami asynchronicznymi i obietnicami, ponieważ są one kluczowe dla efektywnego korzystania z Node.js. Praca z bazami danych, tworzenie interfejsów API RESTful i zarządzanie sesjami to tylko niektóre z tematów, które możesz opanować na bardziej zaawansowanym poziomie.

Wniosek: Node.js to doskonały wybór dla programistów, którzy chcą tworzyć nowoczesne aplikacje internetowe. Pozwala on tworzyć zarówno proste, jak i złożone rozwiązania, wykorzystując potężny zestaw narzędzi JavaScript. Zacznij uczyć się Node.js już dziś i poszerz swoje horyzonty w tworzeniu stron internetowych.

Przejdź do https://nodejs.org i otwórz sekcję „Downloads”. Znajdziesz tam dwie wersje Node.js: LTS i Current. Wybierz tę, która odpowiada Twoim potrzebom. LTS (Long Term Support) jest zalecana dla stabilnych aplikacji, natomiast Current zawiera najnowsze aktualizacje i funkcje, odpowiednie dla tych, którzy chcą wykorzystać najnowsze możliwości platformy. Upewnij się, że wybrałeś wersję zgodną z Twoim systemem operacyjnym. Pobierz plik instalacyjny i postępuj zgodnie z instrukcjami, aby dokończyć instalację.

  • LTS to wersja stabilna.
  • Aktualna wersja to najnowsza wersja z nowymi funkcjami; może być niestabilna.

Do zastosowań profesjonalnych zalecamy korzystanie z wersji LTS. Zapewnia ona stabilność i długoterminowe wsparcie, co jest szczególnie ważne w przypadku projektów biznesowych i poważnych projektów. Korzystanie z LTS pozwala uniknąć ryzyka związanego z częstymi aktualizacjami i zmianami funkcjonalności, gwarantując niezawodność i bezpieczeństwo aplikacji.

Wybierz swój system operacyjny i postępuj zgodnie z instrukcjami, aby zapewnić prawidłową instalację i konfigurację.

Przed rozpoczęciem upewnij się, że wszystkie funkcje działają poprawnie. Aby to zrobić, otwórz terminal.

  • Windows: Naciśnij klawisze Win + R, wpisz cmd i naciśnij Enter.
  • macOS: Naciśnij klawisze Cmd + spacja, wpisz Terminal i naciśnij Enter.
  • Linux: Naciśnij klawisze Ctrl + Alt + T.

Wprowadź polecenie, aby wykonać zadanie.

Wydanie nowej wersji Node.js, takiej jak v22.15.1, oznacza, że ​​platforma działa poprawnie. Aktualizacje Node.js zapewniają poprawę wydajności, poprawki błędów i nowe funkcje, dzięki czemu tworzenie aplikacji jest bardziej wydajne. Bądź na bieżąco, aby w pełni wykorzystać najnowszą wersję Node.js i poprawić stabilność i bezpieczeństwo swoich projektów.

Node.js można używać w terminalu systemu operacyjnego, gdzie testowaliśmy jego instalację, ale dla niektórych użytkowników może to być trudne. Wygodniejszą opcją jest zintegrowanie Node.js z edytorem kodu z interfejsem graficznym. Jednym z najpopularniejszych edytorów oferujących tę możliwość jest Visual Studio Code (VS Code). Edytor ten pozwala na komfortową pracę z Node.js, oferując wiele funkcji upraszczających programowanie i zarządzanie projektami.

Czytanie jest również przydatne do rozwijania umiejętności i poszerzania horyzontów. Pomaga poprawić koncentrację i pamięć oraz sprzyja dogłębnemu zrozumieniu różnych tematów. Czytanie różnorodnej literatury, w tym artykułów naukowych, beletrystyki i publikacji specjalistycznych, wzbogaca słownictwo i rozwija krytyczne myślenie. Zanurzając się w świat książek, nie tylko poszerzasz swoją wiedzę, ale także zyskujesz możliwość spojrzenia na świat z różnych perspektyw. Różnorodność gatunków i stylów pozwala każdemu znaleźć coś dla siebie. Znaczenia czytania nie można przecenić w dzisiejszym świecie, w którym informacja odgrywa kluczową rolę w rozwoju osobistym i zawodowym.

Visual Studio Code: Kompletny przewodnik

Visual Studio Code (VS Code) to zaawansowany edytor kodu, który oferuje programistom szereg funkcji usprawniających pracę. To narzędzie obsługuje różne języki programowania i posiada szeroką gamę rozszerzeń, dzięki czemu można je dostosować do konkretnych potrzeb projektu.

Instalacja Visual Studio Code jest prosta i intuicyjna. Najnowszą wersję edytora można pobrać z oficjalnej strony internetowej i zainstalować w systemie Windows, macOS lub Linux. Po instalacji warto zapoznać się z interfejsem, który zawiera pasek narzędzi, pasek boczny do nawigacji po plikach oraz obszar edycji kodu.

Jedną z kluczowych funkcji VS Code jest obsługa rozszerzeń. Można instalować wtyczki, aby dodawać nowe języki, motywy, lintery i inne narzędzia. To znacznie rozszerza funkcjonalność edytora i pozwala dostosować go do własnych preferencji.

Integracja z systemami kontroli wersji, takimi jak Git, sprawia, że ​​VS Code jest wygodnym narzędziem do pracy zespołowej. Podstawowe operacje na repozytoriach można wykonywać bezpośrednio z edytora, co upraszcza proces tworzenia.

Warto również zwrócić uwagę na wbudowane narzędzia do debugowania, które pozwalają szybko znaleźć i naprawić błędy w kodzie. Za pomocą paneli debugowania możesz ustawiać punkty przerwania, monitorować zmienne i przeglądać stos wywołań.

Aby zwiększyć produktywność w VS Code, możesz używać skrótów klawiaturowych, które umożliwiają szybkie przełączanie się między plikami, uruchamianie poleceń i dostosowywanie edytora do własnych potrzeb.

Podsumowując, Visual Studio Code to wszechstronny i wydajny edytor kodu, odpowiedni zarówno dla początkujących, jak i profesjonalnych programistów. Jego opcje dostosowywania, obsługa rozszerzeń i integracja z systemami kontroli wersji sprawiają, że jest to doskonały wybór dla nowoczesnych projektów.

Zainstaluj Visual Studio Code, potężne narzędzie do tworzenia oprogramowania. Ten edytor obsługuje wiele języków programowania i oferuje różnorodne funkcje, takie jak podświetlanie składni, uzupełnianie kodu i integracja z systemami kontroli wersji. Visual Studio Code jest dostępny na różnych platformach, w tym Windows, macOS i Linux, co czyni go wszechstronnym wyborem dla programistów. Pobierz i zainstaluj Visual Studio Code z oficjalnej strony internetowej, aby zacząć korzystać ze wszystkich jego funkcji w swoich projektach.

Przejdź do sekcji rozszerzeń, naciskając Ctrl + Shift + X lub wybierając odpowiednią pozycję na pasku menu po lewej stronie.

Znajdź i zainstaluj rozszerzenie Code Runner dla swojego środowiska programistycznego. To rozszerzenie umożliwia szybkie uruchamianie kodu w różnych językach programowania, znacznie upraszczając proces testowania i debugowania. Zainstaluj go za pośrednictwem sklepu IDE, aby zwiększyć swoją produktywność i przyspieszyć przepływy pracy.

Zrzut ekranu: Visual Studio Code / Skillbox Media

Utwórz nowy dokument. Ten krok jest niezbędny, aby rozpocząć. Nowy dokument pozwoli Ci uporządkować informacje, uporządkować dane i efektywnie zarządzać treścią. Zacznij od wyboru odpowiedniego formatu, który spełni Twoje potrzeby i cele. Zwróć uwagę na ustawienia dokumentu, takie jak rozmiar strony, orientacja i czcionki, aby zapewnić łatwość użytkowania i czytelność. Pamiętaj o regularnym zapisywaniu zmian, aby zapobiec utracie danych. Prawidłowa organizacja nowego dokumentu pomoże Ci osiągnąć sukces w Twoich projektach.

W prawym dolnym rogu ekranu znajdź przycisk zmiany języka i wybierz język programowania JavaScript.

Zrzut ekranu: Visual Studio Code / Skillbox Multimedia

Wprowadź dowolny kod w odpowiedniej zakładce, na przykład poniższy:

Aby zrusyfikować edytor, otwórz sekcję Rozszerzenia (naciśnij Ctrl + Shift + X w systemie Windows/Linux lub Cmd + Shift + X na komputerze Mac). W pasku wyszukiwania wpisz „Pakiet języka rosyjskiego”, zainstaluj go i ponownie uruchom edytor. Po wykonaniu tej czynności interfejs będzie w języku rosyjskim.

Aby zmienić motyw, otwórz paletę poleceń, naciskając Ctrl + Shift + P (na komputerze Mac: ⇧ + ⌘ + P). Wpisz „Motyw kolorów”, wybierz żądany motyw z listy i naciśnij Enter. W ten sposób możesz łatwo zmienić wygląd edytora, wybierając odpowiednie schematy kolorów dla wygodniejszej pracy.

Instalowanie wtyczek w sekcji Rozszerzenia (Ctrl + Shift + X / Cmd + Shift + X) umożliwia znalezienie i zainstalowanie przydatnych rozszerzeń. Te rozszerzenia obejmują funkcje od podświetlania składni po funkcje autouzupełniania i fragmenty kodu, znacząco usprawniając proces tworzenia i edycji kodu. Korzystanie z wtyczek może zwiększyć produktywność i sprawić, że praca z tekstem będzie wygodniejsza i wydajniejsza.

Ćwiczenie: Uruchamianie kodu na różne sposoby

W ramach ćwiczeń wydrukujmy frazę „Hello, world!” w różnych środowiskach. Napisz i wykonaj prosty skrypt JavaScript w trzech środowiskach: w przeglądarce, w Node.js i w konsoli programisty. To ćwiczenie pomoże Ci opanować podstawy JavaScript i zrozumieć, jak uruchamiać kod w różnych środowiskach. Wyświetlanie tekstu w tych środowiskach pozwala zobaczyć, jak działa JavaScript i jak można go używać do tworzenia interaktywnych aplikacji internetowych.

Aby utworzyć plik HTML zawierający JavaScript i wyświetlający komunikat „Hello, world!”, wykonaj następujące kroki:

Najpierw utwórz nowy dokument HTML. Wewnątrz sekcji <head> Dodaj link do zewnętrznego pliku JavaScript. Następnie w tagu <body> użyj JavaScript, aby wyświetlić komunikat. Przykładowy kod:

«`html
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Przykład JavaScript</title>
<script src=»script.js» defer></script>
</head>
<body>
</body>
</html>
«`

Teraz utwórz plik script.js i dodaj do niego następujący kod:

«`javascript
document.addEventListener(‘DOMContentLoaded’, () => {
alert(‘Witaj, świecie!’);
});
«`

Po wykonaniu tych kroków, gdy otworzysz plik HTML w przeglądarce, zobaczysz wyskakujące okienko z komunikatem „Witaj, świecie!” Ten prosty przykład pokazuje, jak dodać JavaScript do kodu HTML i wykorzystać go do interakcji z użytkownikiem.

Utwórz plik o nazwie hello.js w Node.js, który będzie wyświetlał na konsoli komunikat „Witaj, świecie! (Node.js)”. Aby to zrobić, otwórz edytor tekstu, wpisz podany kod i zapisz plik. Następnie uruchom go w terminalu za pomocą polecenia node hello.js. To prosty przykład demonstrujący działanie Node.js i sposób wyświetlania komunikatów na konsoli.

Możesz uruchomić polecenie w konsoli programistycznej przeglądarki, które wyświetli frazę „Witaj, świecie!”. Aby to zrobić, otwórz konsolę programistyczną, dostępną z menu przeglądarki, i wpisz odpowiednie polecenie. To prosty sposób na przetestowanie wykonania kodu JavaScript i natychmiastowe wyświetlenie wyniku w oknie konsoli.

Wnioski

JavaScript można uruchamiać zarówno w przeglądarce, jak i poza nią, korzystając z platform takich jak Node.js, Deno i Bun. Wybór środowiska wykonawczego determinuje dostępne funkcje i funkcje JavaScript. W przeglądarce internetowej kod oddziałuje z obiektowym modelem dokumentu (DOM) i interfejsem użytkownika, umożliwiając tworzenie dynamicznych stron internetowych. W Node.js kod ma dostęp do systemu plików i może wysyłać żądania sieciowe, co czyni go idealnym rozwiązaniem do tworzenia aplikacji po stronie serwera. Zrozumienie specyfiki każdego środowiska wykonawczego jest kluczem do efektywnego wykorzystania JavaScript w różnych projektach.

Efektywna praca z JavaScript wymaga uwzględnienia specyfiki każdego środowiska wykonawczego. Zrozumienie tych funkcji pozwala zoptymalizować kod i poprawić interoperacyjność na różnych platformach. Każde środowisko, niezależnie od tego, czy jest to przeglądarka, czy platforma serwerowa, ma swoje unikalne cechy i ograniczenia, które należy wziąć pod uwagę, aby osiągnąć wysoką wydajność i stabilność aplikacji.

Przydatne materiały

  • Pętla zdarzeń przeglądarki: zadania mikro i makro, stos wywołań, kolejka renderowania: układ, malowanie, kompozycja — artykuł o pętli zdarzeń, kolejności wykonywania kodu i sposobach jej optymalizacji przez programistów.
  • Najlepsze praktyki Node.js — największy zbiór najlepszych praktyk dotyczących pracy z Node.js: wzorce architektoniczne, przydatne wskazówki i wiele więcej.