Node.js – это популярная открытая среда выполнения, которая может запускать JavaScript вне браузера при помощи механизма V8. Механизм V8 используется для обработки JavaScript в браузере Google Chrome. Среда Node обычно используется для разработки инструментов командной строки и веб-серверов.
Умея работать в Node.js, вы сможете писать код для фронтенда и бэкенда на одном языке. Так будет проще переключаться между контекстами. Кроме того, вы сможете использовать одни и те же библиотеки на фронтенде и бэкенде.
Благодаря поддержке асинхронного выполнения Node.js отлично справляется с задачами с высокой нагрузкой I/O, потому он отлично подходит для веб-разработки. Приложения реального времени (например, видео-стримы или приложения, которые непрерывно отправляют и получают данные) могут работать более эффективно, если написать их в Node.js.
В этом мануале вы узнаете, как написать свою первую программу в среде выполнения Node.js. Вы познакомитесь с некоторыми концепциями, специфичными для Node. Мы создадим программу, которая поможет пользователям проверять переменные среды в своей системе. Для этого мы научимся выводить строки на консоль, собирать пользовательский ввод и получать доступ к переменным среды.
Как запустить JavaScript + HTML код в Vs Code
Требования
- Установка Node.js (в данном мануале мы используем версию 10.16.0). Чтобы установить эту среду выполнения на macOS, обратитесь к мануалу Установка Node.js и настройка локальной среды разработки в macOS. Для Ubuntu выполните мануал Установка Node.js в Ubuntu 18.04 (рекомендуем устанавливать через PPA).
- Базовые навыки работы с JavaScript. Полезные руководства есть в нашем Информатории.
1: Вывод на консоль
Чтобы создать простейшую программу “Hello, World!”, откройте текстовый редактор (например, nano) и создайте новый файл:
В файл введите следующий код:
Объект console в Node.js предоставляет простые методы для записи в stdout, stderr или в любой другой поток Node.js (что в большинстве случаев является командной строкой). Метод log выводит в поток stdout, так что вы можете увидеть его в своей консоли.
В контексте Node.js потоки – это объекты, которые могут принимать (например поток stdout) или выводить данные (например сетевой сокет или файл). В случае потоков stdout и stderr любые отправленные им данные будут показаны в консоли. Одна из замечательных особенностей потоков заключается в том, что они легко перенаправляются, и вы можете, например, просто перенаправить вывод своей программы в файл.
Сохраните и закройте nano, нажав сочетание клавиш CTRL + X, при появлении запроса на сохранение файла нажмите Y. Теперь ваша программа готова к запуску.
2: Запуск программы
Чтобы запустить свою новую программу, используйте такую команду:
Программа hello.js запустится и выведет такой результат:
Интерпретатор Node.js прочитал файл и выполнил строку:
вызвав метод log глобального объекта console. Строка “Hello World” была передана в качестве аргумента функции log.
Уроки Javascript Как запустить ваш код
Кавычки необходимы в коде, чтобы определить границы строки, но в результате они не выводятся на экран.
Убедившись, что программа работает, мы можем сделать ее более интерактивной.
3: Получение пользовательского ввода с помощью аргументов командной строки
Каждый раз, когда вы запускаете программу Node.js «Hello, World!», она выдает один и тот же результат. Чтобы сделать программу более динамичной, давайте научим ее собирать информацию от пользователя и отображать ее на экране.
Инструменты командной строки обычно принимают различные аргументы, которые изменяют их поведение. Например, команда node с аргументом –version печатает установленную версию, а не запускает интерпретатор. На этом этапе мы научим код принимать пользовательский ввод с помощью аргументов командной строки.
Создайте новый файл arguments.js в nano:
Введите следующую строку:
Объект process – это глобальный объект Node.js, который содержит функции и данные, связанные с текущим запущенным процессом Node.js. Свойство argv – это массив строк, содержащий все аргументы командной строки, заданные программе.
Сохраните и закройте файл.
Теперь при запуске программы можно использовать аргументы:
node arguments.js hello world
Вы получите такой вывод:
[ ‘/usr/bin/node’,
‘/home/8host/first-program/arguments.js’,
‘hello’,
‘world’ ]
Первым аргументом в массиве process.argv всегда является местоположение двоичного файла Node.js, с помощью которого выполняется программа. Второй аргумент – это всегда местоположение запускаемого файла. Остальные аргументы – это то, что ввел пользователь, в данном случае hello и world.
Нас больше всего интересуют не те аргументы, которые по умолчанию предоставляет Node.js, а аргументы, введенные пользователем. Откройте файл arguments.js в редакторе:
Измените console.log (process.arg); таким образом:
Поскольку argv является массивом, вы можете использовать встроенный в JavaScript метод slice, который возвращает набор элементов. Используя функцию slice с аргументом 2, вы получаете все элементы argv, которые идут в массиве после второго элемента, то есть аргументы, введенные пользователем.
Перезапустите программу с помощью команды node и тех же аргументов, что и в прошлый раз:
node arguments.js hello world
Теперь вывод выглядит так:
Итак, программа может собирать пользовательские данные, давайте теперь научимся собирать данные из среды программы.
4: Доступ к переменным среды
Переменные среды – это данные типа «ключ-значение», хранящиеся вне программы и предоставляемые операционной системой. Как правило, они устанавливаются системой или пользователем и доступны всем запущенным процессам для конфигурации или определения состояния. Вы можете использовать объект process, чтобы получить доступ к переменным среды.
Используйте nano для создания нового файла environment.js:
Добавьте следующий код:
Объект env хранит все переменные среды, которые доступны, когда Node.js запускает программу.
Сохраните и закройте файл, а затем запустите файл environment.js с помощью команды node.
После запуска программы вы должны увидеть подобный вывод:
Имейте в виду, что многие переменные среды зависят от конфигурации и настроек вашей системы, и ваши выходные данные могут существенно отличаться от того, что вы видите здесь.
Вместо длинного списка переменных среды вам может потребоваться получить конкретную переменную. Давайте попробуем это сделать.
5: Доступ к конкретной переменной среды
На этом этапе мы научимся просматривать переменные среды с помощью глобального объекта process.env и выводить их значения на консоль.
Объект process.env выполняет простое сопоставление имен переменных среды и их значений, хранящихся в виде строк. Как и с другими объектами в JavaScript, вы получите доступ к отдельному свойству, ссылаясь на его имя в квадратных скобках.
Откройте файл environment.js для редактирования:
Измените console.log (process.env) так:
Сохраните файл и закройте файл. Теперь запустите программу environment.js:
Вывод теперь выглядит так:
Вместо того чтобы отображать весь объект, вы теперь выводите только свойство HOME для process.env, в котором хранится значение переменной $HOME.
Опять же, ваш вывод, вероятно, будет отличаться от того, что вы видите здесь, потому что он специфичен для вашей системы.
Теперь, когда вы можете извлекать конкретные переменные среды, вы можете улучшить свою программу: она может запрашивать у пользователя переменную, которую он хочет получить.
6: Извлечение аргумента в ответ на ввод пользователя
Давайте используем возможность чтения аргументов командной строки и переменных среды для создания утилиты, которая выводит значение переменной среды на экран.
С помощью nano создайте новый файл echo.js:
Добавьте следующий код:
const args = process.argv.slice(2);
console.log(process.env[args[0]]);
В первой строке echo.js в переменной args сохраняются все аргументы командной строки, предоставленные пользователем. Вторая строка отображает переменную среды, хранящуюся в первом элементе args, то есть первый аргумент командной строки, предоставленный пользователем.
Сохраните и закройте файл. Запустите программу:
node echo.js HOME
Аргумент HOME был сохранен в массиве args, который затем использовался для поиска значения в среде через объект process.env.
Теперь вы можете получить доступ к значению любой переменной среды в вашей системе. Чтобы убедиться в этом, попробуйте просмотреть следующие переменные: PWD, USER, PATH.
Получение отдельных переменных – это хорошо, но лучше бы позволить пользователям указывать количество переменных.
7: Просмотр нескольких переменных среды
В настоящее время приложение может выдавать только одну переменную среды за один раз. Было бы полезно научить программу принимать несколько аргументов командной строки и выводить соответствующие значения. Используйте nano, чтобы отредактировать echo.js:
Отредактируйте файл так:
const args = process.argv.slice(2);
args.forEach(arg => <
console.log(process.env[arg]);
>);
Метод forEach – это стандартный метод JavaScript для всех объектов массива. Он принимает функцию обратного вызова, которая используется при выполнении итерации по каждому элементу массива. Мы используем forEach для массива args, предоставляя ему функцию обратного вызова, которая выводит значение текущего аргумента в среде.
Сохраните и закройте файл. Теперь перезапустите программу с двумя аргументами:
node echo.js HOME PWD
Вы должны увидеть следующий вывод:
Функция forEach обеспечивает вывод каждого аргумента командной строки в массиве args.
Теперь программа может извлекать переменные, которые запрашивает пользователь. Осталось только разобраться с неверным пользовательским вводом.
8: Обработка неправильного пользовательского ввода
Попробуйте передать программе неправильный аргумент:
node echo.js HOME PWD NOT_DEFINED
Вывод будет выглядеть примерно так:
/home/8host
/home/8host/first-program
undefined
Первые две строки правильные, а последняя строка имеет значение undefined. В JavaScript неопределенное значение undefined означает, что переменной или свойству не было присвоено значение. Поскольку NOT_DEFINED не является допустимой переменной среды, ее значение отображается как undefined.
Лучше вместо этого показать пользователю сообщение об ошибке, если аргумент командной строки не найден в среде.
Отредактируйте код echo.js таким образом:
const args = process.argv.slice(2);
args.forEach(arg => let envVar = process.env[arg];
if (envVar === undefined) <
console.error(`Could not find «$» in environment`);
> else <
console.log(envVar);
>
>);
Как запустить JavaScript с помощью Node.js
Если вы только сели за изучение JavaScript, то у вас очень быстро возникнет вопрос: а как запустить код?
Простой скрипт можно запустить прямо в браузере. Большинство из них сегодня позволяют сделать это в пару кликов. Но возможностей браузера не хватит, если задача — разработка сложного приложения, работающего с базами данных и файлами. Здесь на помощь приходит Node.js.
Node.js — среда выполнения JavaScript-кода. Она создана на базе движка V8, который крутится в сердце браузера Chrome. Эта среда позволяет запускать JavaScript-сценарии в окружении операционной системы, а не браузера.
Кроме стандартных возможностей JavaScript, Node.js даёт инструменты для работы с сетью, вводом и выводом, файловой системой и не только. В придачу к среде идёт и пакетный менеджер npm, который позволяет разработчикам ставить сторонние пакеты в одну строку.
Разобраться с базовыми функциями будет просто, если вы уже знаете JavaScript или другой скриптовый язык.
Давайте попробуем
Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.
Введём простую команду:
>node —version
Результат, который мы получили:
v8.11.3
Готово! Среда успешно установлена и готова к действиям. Теперь запустить скрипт можно прямо в консоли, предварительно запустив node .
Рассмотрим пару простых примеров. По традиции выведем Hello world! :
console.log(‘Hello, world!’);
Вроде ничего неожиданного, кроме undefined в конце. Дело в том, что в JavaSсript функция всегда возвращает какое-то значение. Если автор функции опустил return , то считается, что она возвращает undefined . Именно это значение и выводит нам Node.js.
Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?
Node.js отлично справляется и с более сложными конструкциями, даже самостоятельно выстраивая лесенку. В случае обнаружения ошибки, он тут же сообщит об этом, остановив скрипт.
Например, случайно пропустим букву в команде:
Ну вот, всё необходимое для написания простых и компактных приложений есть. Но писать большое приложение на десятки строк кода в консоли будет не слишком-то удобно. Да и такой подход не сработает, если приложение разбито на несколько скриптов, лежащих в разных файлах.
Усложняем задачу
Попробуем перейти к чуть более продвинутому использованию среды.
Создайте на жёстком диске папку для проекта и положите туда ваш готовый скрипт. Назовите его index.js — так принято. Если под рукой скрипта нет, то возьмите цикл с выводом простого значения, с которого мы начали.
Для инициализации проекта необходимо создать файл package.json . Как это сделать?
Первый способ — открыть папку проекта в консоли и выполнить команду npm init . Это запустит инициализацию проекта. Пользователю предстоит ввести имя, версию и ряд других значений. Как результат, в папке проекта появится файл package.json .
Второй способ — самостоятельно создать текстовый файл, назвать его package.json и заполнить все необходимые поля. Файл будет представлением приложения, в котором содержится его имя, версия, авторы и зависимости. На данном этапе может выглядеть так:
Вопросы может вызвать поле scripts , и я уже подозреваю какие. Давайте разберёмся с ним.
Раздел содержит набор команд, которые можно будет использовать при работе с приложением. Создание стартового скрипта start считается правилом хорошего тона. Кроме того, это удобно: для запуска скрипта необходимо ввести команду npm start , находясь в папке проекта.
Воспринимайте npm start как синоним команды node index.js . Учитывая, что окно терминала встроено в большинство современных сред разработки, синоним помогает ускорить работу над приложением.
Но вводить команду постоянно — не слишком рациональное расходование времени. Давайте упростим себе жизнь.
- Находясь в папке проекта введём команду npm install express —save . Пакетный менеджер установит в папку компоненты фреймворка express , в котором содержатся необходимые компоненты для написания простого HTTP-сервера.
- После установки файл package.json изменится, в нём появится поле dependencies .
- Теперь создадим рядом в папке проекта новый файл static-file-server.js . В нём будет содержаться код сервера.
- Скопируйте в файл следующий код:
var express = require(‘express’), app = express(); app.set(‘port’, 8080); app.use(express.static(__dirname)); app.listen(app.get(‘port’), function() < console.log(‘Server started: http://localhost:’ + app.get(‘port’) + ‘/’); >);
«start»: «node static-file-server.js»
Подробнее про команды можно прочитать здесь.
Что мы сделали
Теперь при вводе команды npm start будет запускаться наш сервер, который будет обрабатывать всё содержимое нашего приложения.
Один раз запустив команду, мы всегда сможем получить актуальный результат выполнения скрипта, стоит только зайти на страницу localhost:8080/ .
Это было несложно. У Node.js есть много возможностей, о которых я расскажу позже, а научиться профессионально работать со средой вы сможете пройдя курс.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru
Основы JavaScript
JavaScript является очень мощным скриптовым языком программирования на стороне клиента. JavaScript используется в основном для улучшения взаимодействия пользователя с веб-страницей. Другими словами, вы можете сделать свою веб-страницу более живой и интерактивной с помощью JavaScript. JavaScript также широко используется в разработке игр и мобильных приложений.
В последние годы, JavaScript активно используется для разработки на стороне сервера благодаря появлению Node.js. Однако в этой статье мы будем рассматривать только клиентский JavaScript, который работает в браузере.
Как запустить JavaScript
Будучи языком сценариев, JavaScript не может работать сам по себе. За выполнение кода JavaScript отвечает браузер. Когда пользователь запрашивает HTML-страницу с JavaScript, скрипт отправляется в браузер, и браузер должен его обработать и выполнить. Основным преимуществом JavaScript является то, что все современные веб-браузеры поддерживают JavaScript.
Таким образом, вам не нужно беспокоиться о том, использует ли посетитель вашего сайта Internet Explorer, Google Chrome, Firefox или любой другой браузер. Кроме того, JavaScript работает в любой операционной системе, включая Windows, Linux или Mac.
Как писать код на JavaScript
Для начала вам понадобится редактор кода, для написания скриптов на JavaScript, и браузер — для обработки этого кода и отображения веб-страниц. Вы можете использовать любой популярный редактор код, например Visual Studio Code, Sublime Text, Atom или любой другой текстовый редактор, который вам понравится.
Вы можете использовать любой из установленных на вашем компьютере веб-браузеров, включая Google Chrome, Firefox, Microsoft Edge и т.д.
Простая программа на JavaScript
Для того чтобы написать программу на JavaScript, вы должны поместить весь свой код в теги (открывающий и закрывающий ). Это помогает вашему браузеру отличать код JavaScript от остального кода.
Однако, чаще используется другой способ. Вы пишете ваш код в отдельном файле и сохраняете его на жесткий диск. Далее, в HTML документе вы подключаете файл JavaScript с помощью тега .
Содержимое файла script.js:
Содержимое файла index.html:
Предполагается, что файлы index.html и script.js находятся в одной директории, иначе стоит указать полный путь до файла script.js относительно файла index.html
Теперь файл index.html в браузере. Если вы все сделали правильно, вы увидите всплывающее окно (alert box) в котором будет ваш текст.
Источник: dzen.ru