Руководство. Node.js для начинающих

Если вы новичок в использовании Node.js, это руководство поможет вам начать с некоторых основ.

• Использование Node.js в Visual Studio Code
• Создание первого веб-приложения Node.js с помощью Express
• Знакомство с использованием модуля Node.js

Предварительные требования

• Установка Node.js в Windows или в подсистеме Windows для Linux.

Если вы впервые пробуете Node.js, рекомендуем выполнить установку непосредственно в Windows. Дополнительные сведения см. в статье Выбор между установкой Node.js в Windows и подсистеме Windows для Linux.

Использование Node.js в Visual Studio Code

Если вы еще не установили Visual Studio Code, вернитесь к предыдущему разделу предварительных требований и выполните действия по установке, связанные с Windows или WSL.

1. Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloNode , а затем введите каталог: cd HelloNode .
2. Создайте файл JavaScript с именем “app.js” и переменной с именем “msg” в: echo var msg > app.js
3. Откройте каталог и файл app.js в VS Code с помощью команды code . .
4. Добавьте простую строковую переменную (“Hello World”), а затем отправьте содержимое строки в консоль, введя его в файле “app.js”:

var msg = 'Hello World'; console.log(msg); 

Обратите внимание, что при вводе console в файл “app.js”, VS Code отображает поддерживаемые параметры, связанные с объектом console , который можно выбрать из использования IntelliSense. Попробуйте поэкспериментировать с Intellisense, используя другие объекты JavaScript.

Создание первого веб-приложения Node.js с помощью Express

Express — это простейшая, гибкая и оптимизированная платформа Node.js, упрощающая разработку веб-приложения, которое может обрабатывать различные типы запросов, например GET, PUT, POST и DELETE. Express поставляется с генератором приложений, который автоматически создает файловую архитектуру для приложения.

Чтобы создать проект с помощью Express.js, выполните следующие действия.

1. Откройте командную строку (командная строка, Powershell или любой другой вариант).
2. Создайте новую папку проекта: mkdir ExpressProjects и введите этот каталог: cd ExpressProjects
3. Используйте Express для создания шаблона проекта HelloWorld: npx express-generator HelloWorld –view=pug

Примечание Мы используем команду npx , чтобы выполнить пакет Node Express.js без фактической установки (или временно установить его в зависимости от того, как вы хотите его представить). Если вы попытаетесь использовать команду express или проверить установленную версию Express с помощью: express –version , вы получите ответ, о том, что Express не удается найти. Если вы хотите глобально установить Express, чтобы применять его на постоянной основе, используйте: npm install -g express-generator . Список пакетов, установленных npm, можно просмотреть с помощью npm list . Пакеты будут перечислены в соответствии с глубиной расположения (уровень глубины вложенных каталогов). Установленные пакеты будут расположены на уровне 0, зависимости пакетов — на уровне 1, другие зависимости —на уровне 2 и т. д. Дополнительные сведения см. в статье Различие между npx and npm на сайте StackOverflow.

• bin . Содержит исполняемый файл, который запускает приложение. Он запускает сервер (через порт 3000, если нет альтернативы) и настраивает базовую обработку ошибок.
• public . Содержит все общедоступные файлы, в том числе файлы JavaScript, каскадные таблицы стилей (CSS), файлы шрифтов, изображения и другие ресурсы, необходимые пользователям при подключении к вашему веб-сайту.
• routes . Содержит все обработчики маршрутов для приложения. В этой папке автоматически создаются два файла, index.js и users.js , которые служат примерами отделения конфигурации маршрутов вашего приложения.
• views . Содержит файлы, используемые модулем создания шаблонов. На платформе Express настроен поиск подходящего представления при вызове метода преобразования для просмотра. По умолчанию используется модуль создания шаблонов Jade, но он устарел по сравнению с Pug. Поэтому мы используем флаг –view для изменения модуля (шаблона) представления. Просмотреть параметры как флага –view , так и других флагов можно с помощью команды express –help .
• app.js . Начальная точка вашего приложения. Этот файл загружает все необходимые компоненты и начинает обслуживать запросы пользователей. Его можно назвать связующим компонентом, который объединяет все части.
• package.json . Содержит описание вашего проекта, диспетчер сценариев и манифест приложения. Его основная цель — отслеживать зависимости приложения и их соответствующие версии.

npm install 

npx cross-env DEBUG=HelloWorld:* npm start 

Совет Часть DEBUG=myapp:* приведенной выше команды означает, что вы указываете Node.js включить ведение журнала в целях отладки. Не забудьте заменить “myapp” именем своего приложения. Имя приложения можно найти в файле package.json в свойстве “name”. Использование npx cross-env устанавливает переменную среды DEBUG в любом терминале, но ее также можно задать с помощью конкретного терминала. Команда npm start сообщает npm о необходимости запуска скриптов в файле package.json .

Теперь вы можете просмотреть работающее приложение, открыв веб-браузер и перейдя по адресу: localhost:3000

Теперь, когда приложение HelloWorld Express выполняется локально в браузере, попробуйте внести изменения, открыв папку “views” в каталоге проекта и выбрав файл “index.pug”. После открытия измените h1= title на h1= “Hello World!” и выберите Сохранить (Ctrl+S). Просмотрите изменения, обновив URL-адрес localhost:3000 в веб-браузере.

Чтобы отключить запуск приложения Express, в окне терминала введите: Ctrl+C

Знакомство с использованием модуля Node.js

Node.js включает в себя средства для разработки серверных веб-приложений. Некоторые из них встроены, а многие другие доступны с помощью npm. Эти модули позволяют выполнять множество задач.

Средство	Назначение
GM, sharp	Обработка изображений, в том числе редактирование, изменение размера, сжатие и т. д. непосредственно в коде JavaScript
PDFKit	Создание PDF
validator.js	Проверка строк
imagemin, UglifyJS2	Минификация
spritesmith	Создание листа Sprite
winston	Ведение журнала
commander.js	Создание приложений командной строки

Сведения об операционной системе вашего компьютера можно получить с помощью встроенного модуля ОС.

1. В командной строке откройте интерфейс командной строки Node.js. После входа вы увидите подсказку > , сообщающую вам, что вы используете Node.js: node
2. Чтобы определить операционную систему, используемую в данный момент (которая должна возвращать ответ, сообщающий о том, что вы работаете под Windows), введите: os.platform()
3. Чтобы проверить архитектуру ЦП, введите: os.arch()
4. Чтобы просмотреть доступные в системе процессоры, введите: os.cpus()
5. Оставьте интерфейс командной строки Node.js, введя .exit или дважды нажав CTRL+C.

Совет Вы можете использовать модуль OS Node.js, чтобы проверить платформу и вернуть переменную для конкретной платформы: Win32/.bat for Windows development, darwin/.sh для Mac/unix, Linux, SunOS, и т. д (например, var isWin = process.platform === “win32”; ).

Для чего используется JavaScript?

Программирование и разработка

На чтение 6 мин Просмотров 1.2к. Опубликовано 22.01.2021

JavaScript используется для разработки интерактивных веб-приложений. JavaScript может включать интерактивные изображения, карусели и формы. Язык можно использовать с внутренними фреймворками, такими какNode.js для управления механизмами веб-страницы, такими как обработка форм и платежи.

JavaScript — одна из трёх фундаментальных технологий, лежащих в основе веб-приложений. Если вы новичок, вы можете спросить себя, что такое язык программирования JavaScript.

Прежде чем вы начнёте учиться программировать с использованием JavaScript, важно понять его потенциальное использование. Это даст вам лучшее представление о том, является ли изучение JavaScript для вас хорошей инвестицией с учётом ваших долгосрочных карьерных целей и устремлений.

В этом руководстве мы покажем вам цели JavaScript и исследуем основные ситуации, в которых вы могли бы использовать эту технологию программирования.

Что такое JavaScript?

Каждый раз, когда вы видите веб-страницу, которая не только отображает контент, вы можете поспорить, что JavaScript работает в фоновом режиме.

JavaScript позволяет сделать веб-сайт более интерактивным, от автоматического обновления содержимого до создания анимированной графики и изменения размеров элементов на веб-странице.

HTML и CSS позволяют определять структуру веб-страницы и её стиль соответственно. Это два других языка, которые используются для создания веб-сайтов. Однако, если вы хотите сделать сайт интерактивным и добавить контент, который обновляется динамически, вам необходимо использовать JavaScript.

Для чего используется JavaScript?

Теперь, когда мы изучили основы JavaScript, давайте займёмся вопросом: для чего используется язык программирования JavaScript?

Хотя JavaScript может быть самым известным для интерфейсной веб-разработки, он имеет множество применений помимо веб-разработки. Интерфейс — это часть веб-сайта, которую видит пользователь. Давайте разберём четыре основных использования языка программирования JavaScript.

Читайте также: Асинхронное программирование для начинающих с использованием Async / Await в C #

1. Front End веб-разработка

Используя JavaScript, вы можете добавлять динамические функции, такие как изменение текста и содержимого, а также изображений, размер которых изменяется в соответствии с размером веб-сайта. Это изменения взаимодействия с пользователем, что означает, что они видны пользователю и тому, как он использует сайт в своём веб-браузере.

Вот несколько примеров изменений внешнего интерфейса, которые вы можете внести на веб-сайт с помощью JavaScript:

• Отображение информации при нажатии кнопки.
• Создайте раскрывающееся меню, которое активируется при нажатии.
• Разрешить пользователю увеличивать или уменьшать изображение.
• Показать серию вкладок на веб-сайте.
• Отображение анимации на сайте.
• Воспроизведение аудио или видео на веб-странице.

2. Серверная веб-разработка

Вы также можете использовать JavaScript в сочетании с такими инструментами, как Node.js, для программирования на стороне сервера. Бэкэнд относится к закулисному коду, который заставляет веб-сайт работать на веб-сервере.

Например, вы можете использовать JavaScript с Node.js для сохранения данных формы в базе данных. Серверная часть JavaScript может обрабатывать платежи, сохранять сообщения пользователей и выполнять любую другую закулисную работу, необходимую для выполнения веб-сайта.

3. Разработка мобильных приложений

Традиционно мобильные приложения разрабатывались с использованием языков, специфичных для операционной системы. Например, Swift используется для iOS, а Java используется для мобильной разработки Android . Однако в последние годы было разработано несколько технологий, позволяющих создавать мобильные приложения с использованием языка программирования JavaScript.

React Native — один из примеров таких фреймворков. Он позволяет использовать JavaScript и React для создания приложения, работающего на мобильном устройстве. Phonegap, поддерживаемый Adobe, позволяет создавать мобильные приложения с использованием веб-технологий. Angular и Vue — это ещё несколько фреймворков, которые вы можете использовать для этой цели.

4. Разработка игр

JavaScript используется в онлайн-играх. Многие из этих игр являются простыми платформенными играми, потому что JavaScript не так эффективен для создания игр, как другие языки. В Интернете вы найдёте множество онлайн-игр, таких как Cookie Clicker, работающих на JavaScript.

Читайте также: Начало работы с таблицами HTML

Существует множество ограничений на создание браузерной игры с использованием JavaScript. Но, тем не менее, этот язык часто используется разработчиками игр для создания простых игр. Сам по себе JavaScript не очень хорошо масштабируется, если вы хотите создавать большие игры.

Например, многие из компьютерных игр, в которые сегодня играют старшеклассники, созданы с использованием JavaScript. Преимущество использования JavaScript для базовой разработки игр заключается в том, что вы можете создать что-то, что будет работать в браузере. Таким образом, пользователю не нужно ничего скачивать, чтобы игра заработала.

Зачем нам нужен JavaScript?

JavaScript повсюду в Интернете — от него никуда не деться. Фактически, эта самая веб-страница использует JavaScript несколькими способами для отображения своего содержимого. Например, поле для комментариев в нашем блоге работает на JavaScript — когда вы нажимаете, чтобы отправить комментарий, запускается функция JavaScript.

Чтобы помочь вам лучше понять, как используется JavaScript, мы покажем несколько примеров компаний, которые его используют.

1. PayPal

PayPal использует JavaScript с самого начала (опять же, потому что он важен для всех веб-сайтов). Тем не менее, компания онлайн-платежей также экспериментировала с такими инструментами, как Node.JS, для поддержки своих веб-приложений.

PayPal зашла так далеко, что создала собственную версию платформы Express JavaScript, которую они назвали Kraken JS . Это показывает, насколько PayPal использует JavaScript.

2. Walmart

Веб-приложение Walmart изначально основывалось на языке программирования Java . Однако, когда её сайт начал расти, компания поняла, что ей нужно что-то более эффективное.

В результате Walmart принял Node.JS. Сегодня сайт, который отображается на Walmart.com, использует Node.js для обслуживания веб-страниц.

3. Facebook

Facebook, гигант социальных сетей, использует в своих проектах JavaScript.

А также Facebook отвечал за создание React , который по сей день остаётся одной из самых популярных библиотек JavaScript в мире. React настолько популярен, что его используют компании, от CloudFlare до BBC.

Читайте также: 5 главных причин изучить JavaScript

Он использует React для разработки веб-версий платформ Instagram и WhatsApp. Это показывает, насколько Facebook полагается на JavaScript.

4. Netflix

Netflix начал использовать Java для своего веб-приложения. Однако инженеры Netflix решили, что внесение изменений на их сайт с помощью Java заняло слишком много времени. В результате они решили искать другую технологию для работы сайта.

Сегодня Netflix в значительной степени использует фреймворк Node.Js. Эта внутренняя структура позволяет компании эффективно отображать контент на своём веб-сайте. Переход на Node.Js также позволил им снизить нагрузку на свои серверы, тем самым повысив эффективность своих услуг.

5. Uber

Uber необходимо обрабатывать миллионы запросов каждый день от водителей и клиентов. Компании необходимо работать с высокомасштабируемыми технологиями, которые имеют высокую скорость итераций.

Uber использует Node.Js и JavaScript для эффективной обработки запросов драйверов на своей платформе. Важная часть того, почему Uber выбрала Node.Js, — это асинхронные функции, которые упрощают отправку данных.

Заключение: для чего используется JavaScript?

JavaScript — это, прежде всего, технология веб-разработки, но это гораздо больше. Вы можете использовать JavaScript для разработки интерфейсных и серверных веб-приложений. JavaScript часто используется для создания простых браузерных игр. Вы также можете использовать JavaScript для создания мобильных приложений.

JavaScript — популярный язык. Он часто используется в сочетании со сторонними фреймворками, такими как React, Ember, Node.JS, Vue, Angular и другими инструментами. Эти инструменты предоставляют ряд встроенных функций, расширяющих возможности использования инфраструктуры JavaScript.

Если вы интересуетесь веб-разработкой, вам определённо стоит научиться JavaScript!

ЧИТАЙТЕ ТАКЖЕ:

• 7 концепций JavaScript, которые должен знать каждый веб-разработчик.
• 5 главных причин изучить JavaScript.

Учебник. Создание приложения Node.js и Express в Visual Studio

Область применения:Visual StudioVisual Studio для Mac Visual Studio Code

Из этой статьи вы узнаете, как использовать Visual Studio для создания простого веб-приложения Node.js, использующего платформу Express.

Прежде чем приступить к работе, изучите краткий список вопросов и ответов, который познакомит вас с некоторыми основными понятиями.

• Что такое Node.js? Node.js — это серверная среда выполнения JavaScript, выполняющая код JavaScript.
• Что такое npm? Диспетчер пакетов упрощает использование библиотек исходного кода и предоставление общего доступа к ним Node.js. npm —это стандартный диспетчер пакетов Node.js. Диспетчер пакетов npm упрощает установку, обновление и удаление библиотек.
• Что такое Express? Express — это серверная платформа веб-приложений, которую использует Node.js для создания веб-приложений. При использовании Express существует множество различных способов создания пользовательского интерфейса. Реализация, приведенная в этом руководстве, использует обработчик шаблонов по умолчанию генератора приложений Express, называемый Pug, для отрисовки внешнего интерфейса.

Предварительные требования

Обязательно установите следующие компоненты:

• Visual Studio 2022 версии 17.4 или более поздней с установленной рабочей нагрузкой ASP.NET и веб-разработка . Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Средства>Получить средства и компоненты. , после чего запустится Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.
• npm (https://www.npmjs.com/), который входит в состав Node.js
• npx (https://www.npmjs.com/package/npx).

Создание приложения

1. В окне запуска (чтобы открыть его, щелкните Файл>Окно запуска) выберите Создание нового проекта.
2. Выполните поиск по запросу Express в строке поиска в верхней части и выберите Приложение JavaScript Express.
3. Присвойте имена проекту и решению.

Просмотр свойств проекта

Параметры проекта по умолчанию позволяют выполнить сборку и отладку проекта. Но если вам нужно изменить параметры, щелкните правой кнопкой мыши проект в Обозреватель решений, выберите Свойства, а затем перейдите в раздел Сборка или Отладка.

Файл launch.json хранит параметры запуска, связанные с кнопкой Запуск на панели инструментов отладки. В настоящее время файл launch.json должен находиться в папке .vscode.

Сборка проекта

Выберите Сборка>Собрать решение для сборки проекта.

Запуск приложения

Нажмите клавишу F5 или кнопку Запуск в верхней части окна, чтобы открыть командную строку.

• npm, выполняющая команду node ./bin/www

Проверьте наличие в консоли сообщений, например сообщения с указанием обновить версию Node.js.

Затем должно появиться базовое приложение Express.

Отладка приложения

Теперь мы рассмотрим несколько способов отладки приложения.

Во-первых, если приложение все еще работает, нажмите клавиши SHIFT+F5 или нажмите красную кнопку остановки в верхней части окна, чтобы остановить текущий сеанс. Вы можете заметить, что при остановке сеанса браузер, отображающий приложение, закроется окно командной строки, в котором выполняется процесс Node. На данный момент закройте все затяжные командные строки. Далее в этой статье описано, почему может потребоваться оставить процесс Node запущенным.

Отладка процесса Node

В раскрывающемся списке рядом с кнопкой Пуск вы увидите следующие параметры запуска:

• localhost (Edge)
• localhost (Chrome)
• Отладка Dev Env
• Запуск узла и браузера

Выберите параметр Запустить узел и браузер . Теперь, прежде чем нажать клавишу F5 или снова нажать кнопку Пуск , установите точку останова вindex.js (в папке routes ), выбрав левый желоб перед следующей строкой кода: res.render(‘index’, < title: 'Express' >);

Вы также можете поместить курсор на строку кода и нажать клавишу F9 , чтобы переключить точку останова для этой строки.

Затем нажмите клавишу F5 или выберите Отладка>Начать отладку , чтобы отладить приложение.

Вы увидите, что отладчик приостанавливается в только что заданной точке останова. Пока работа приостановлена, вы можете проверить состояние приложения. При наведении указателя мыши на переменные можно изучить их свойства.

Завершив проверку состояния, нажмите клавишу F5 , чтобы продолжить, и приложение должно загрузиться должным образом.

На этот раз, если вы нажмете кнопку stop, вы заметите, что окна браузера и командной строки закроются. Чтобы понять причину, ознакомьтесь с файлом launch.json.

Общие сведения о файле launch.json

Файл launch.json в настоящее время находится в папке .vscode . Если папка VSCODE не отображается в Обозреватель решений, выберите Показать все файлы.

Если вы работали с Visual Studio Code ранее, файл launch.json будет выглядеть знакомым. Файл launch.json здесь работает практически так же, как и в Visual Studio Code для обозначения конфигураций запуска, используемых для отладки. Каждая запись указывает один или несколько целевых объектов для отладки.

Первые две записи являются записями браузера, и они должны выглядеть примерно так:

 < "name": "localhost (Edge)", "type": "edge", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" >, < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public" > 

В приведенных выше записях видно, что type для задан тип браузера. При запуске только с типом браузера в качестве единственного целевого объекта отладки Visual Studio будет отлаживать только процесс внешнего браузера, а процесс Node будет запущен без присоединенного отладчика, а это означает, что все точки останова, заданные в процессе Node , не будут привязаны.

После остановки сеанса процесс Node также продолжит выполняться. Он намеренно остается запущенным, когда браузер является целевым объектом отладки, так как если работа выполняется исключительно на интерфейсном интерфейсе, непрерывное выполнение внутреннего процесса упрощает рабочий процесс разработки.

В начале этого раздела вы закрыли затяжное окно командной строки, чтобы задать точки останова в процессе Node. Чтобы процесс Node был отлаживаемым, его необходимо перезапустить с присоединенным отладчиком. Если не отлаживаемый процесс Узла остается запущенным, попытка запустить процесс узла в режиме отладки (без перенастройки порта) завершится ошибкой.

В настоящее edge время и chrome являются единственными поддерживаемыми типами браузеров для отладки.

Третья запись в файле launch.json указывает node в качестве типа отладки и должна выглядеть примерно так:

 < "name": "Debug Dev Env", "type": "node", "request": "launch", "cwd": "$/bin", "program": "$/bin/www", "stopOnEntry": true > 

Эта запись запустит только процесс Node в режиме отладки. Браузер не будет запущен.

Четвертая запись, указанная в файле launch.json*, представляет собой следующую составную конфигурацию запуска.

Эта составная конфигурация аналогична составной конфигурации запуска vscode, и ее выбор позволяет выполнять отладку как внешнего интерфейса, так и серверной части. Вы видите, что он просто ссылается на отдельные конфигурации запуска для процессов Node и браузера.

Существует множество других атрибутов, которые можно использовать в конфигурации запуска. Например, можно скрыть конфигурацию в раскрывающемся списке, но по-прежнему иметь возможность ссылаться на нее hidden , задав атрибуту в объекте presentation значение true .

 < "name": "localhost (Chrome)", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "$\\public", "presentation": < "hidden": true >> 

Щелкните Параметры , чтобы получить список атрибутов, которые можно использовать для улучшения отладки. Обратите внимание, что на данный момент поддерживаются только конфигурации запуска . Любая попытка использовать конфигурацию присоединения приведет к сбою развертывания.

При подготовке материала использовались источники:
https://learn.microsoft.com/ru-ru/windows/dev-environment/javascript/nodejs-beginners-tutorial
https://bestprogrammer.ru/programmirovanie-i-razrabotka/dlya-chego-ispolzuetsya-javascript
https://learn.microsoft.com/ru-ru/visualstudio/javascript/tutorial-nodejs?view=vs-2022