Как запустить файл js

Обновлено: 24.11.2024

Эта часть руководства посвящена ядру JavaScript, самому языку.

Но нам нужна рабочая среда для запуска наших скриптов, а так как эта книга находится в Интернете, браузер является хорошим выбором. Мы сведем к минимуму количество специфичных для браузера команд (например, alert ), чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). В следующей части руководства мы сосредоточимся на JavaScript в браузере.

Итак, сначала давайте посмотрим, как мы прикрепляем скрипт к веб-странице. Для серверных сред (таких как Node.js) вы можете выполнить скрипт с помощью команды, например "node my.js" .

Тег «скрипт»

Программы JavaScript можно вставлять практически в любое место HTML-документа с помощью этого тега.

Вы можете запустить пример, нажав кнопку "Воспроизвести" в правом верхнем углу окна выше.

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

Современная разметка

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

Атрибут типа: type=…>

Старый стандарт HTML, HTML4, требовал, чтобы сценарий имел тип . Обычно это было type="text/javascript" . Это больше не требуется. Кроме того, современный стандарт HTML полностью изменил значение этого атрибута. Теперь его можно использовать для модулей JavaScript. Но это сложная тема, мы поговорим о модулях в другой части руководства.

Атрибут языка: language=…>

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

Комментарии до и после скриптов.

В очень древних книгах и руководствах вы можете найти комментарии внутри тегов, например:

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

Чтобы пройти этот курс, вам необходимо знать, как и где вы запускаете код JavaScript. У вас есть несколько вариантов запуска вашего первого приветственного программирования:

Откройте редактор и создайте файл с именем index.js .

Как запустить JavaScript из командной строки

Запуск программы JS из командной строки обрабатывается NodeJS. Начните с установки NodeJS на локальный компьютер, если это необходимо.

Теперь просто откройте командную строку в том же каталоге, где находится созданный вами скрипт index.js (VS Code сделает это автоматически с помощью встроенного терминала).

Как запустить JavaScript из браузера

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

Запуск скрипта из HTML-файла

Теперь просто откройте этот HTML-файл на локальном компьютере и откройте консоль разработчика (следующий шаг), чтобы увидеть результат.

Проверить консоль браузера

В Chrome вы можете открыть консоль разработчика, нажав Ctrl+Shift+J (Windows) или Ctrl+Option+J (Mac), или вручную из меню настроек, выбрав Дополнительные инструменты -> Инструменты разработчика. Консоль позволяет запускать код в браузере подобно тому, как

Вывод консоли браузера в Chrome

Запуск JavaScript с фреймворком

Стоит отметить, что такие фреймворки, как React, Angular, Svelte и т. д., автоматически позаботятся о создании и запуске вашего приложения и предоставят инструменты и шаги для выполнения кода, специфичные для фреймворка. В реальном мире вы, скорее всего, будете использовать инструменты, предоставляемые платформой, для запуска кода, а не базовые методы, показанные в этом разделе.

Запуск JavaScript в песочнице

В этом курсе StackBlitz используется для запуска примеров кода JS в изолированной программной среде в браузере. Это отличный способ поделиться быстрыми демонстрациями и репродукциями выпусков 💡.

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

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

  1. Клиентский JavaScript
  2. Серверный JavaScript
  3. Интерфейс командной строки

Клиентский JavaScript

  • Код JavaScript, выполняемый в веб-браузере, называется клиентским JavaScript.
  • Клиентский JS изначально использовался для добавления интерактивности на веб-сайты; например, нажатие кнопки "Отправить" в форме отправляет данные формы на сервер.
  • Тег на вашей HTML-странице используется для написания кода JavScript на стороне клиента, который позже выполняется браузером.

Серверный JavaScript

  • Когда вы запускаете код JS вне браузера на веб-сервере, он становится серверным JavaScript.
  • JS на стороне сервера обычно используется для написания внутренней логики вашего веб-приложения; например, вы можете проверить, соответствует ли пароль пользователя сохраненному паролю БД.
  • Вы можете запускать серверный JavaScript с помощью любого интерфейса командной строки.

Но что такое интерфейс командной строки, также известный как терминал?

Давайте посмотрим, как запускать JavaScript в этих популярных CLI:

Запуск JavaScript в терминале

Выполнение JavaScript в Терминале состоит из двух шагов:

  1. Установка Node.js.
  2. Доступ к Node.js в терминале/командной строке.
  3. Запуск JS-файла с помощью узла.

Установка Node.js

Проверка Node.js в терминале/командной строке

Чтобы открыть терминал в macOS:

  1. Откройте панель поиска Spotlight (Cmd+Пробел).
  2. Введите Терминал: у него есть значок, как показано ниже — откройте его.
  3. После открытия введите следующую команду:

Если вы видите подобный вывод, Node.js версии 14.15.3 установлен успешно.

Написание кода JS

  1. Создайте новый файл index.js на рабочем столе или в папке.
  2. Давайте напишем код!

А теперь запустим!

Запуск JavaScript в терминале/командной строке

  1. Перейдите к «Пути к рабочему столу» в терминале/командной строке:
    1. Чтобы запустить файл JavaScript с помощью Node.js, введите:
      1. Если вы видите вывод, как показано ниже, поздравляем! Вы успешно запускаете файл JavaScript в терминале/командной строке:

      Передача аргументов времени выполнения в Node.js

      Как и в браузере, мы используем формы для передачи пользовательских значений в наш JavaScript. Если вы хотите передать значения времени выполнения, вы можете использовать process.argv[2]

      В терминале/командной строке введите:

      Заключение

      Node.js упрощает запуск кода JavaScript в вашем терминале/командной строке и открывает двери новых возможностей для веб-разработчика.

      Подписаться

      Категории

      Последние записи

      Компания General Assembly – пионер в сфере образования и трансформации карьеры, специализирующаяся на самых востребованных на сегодняшний день навыках. Являясь ведущим поставщиком услуг по обучению, подбору персонала и карьерному росту, мы создаем процветающее сообщество профессионалов, занимающихся любимым делом.

      Космическая академия Генеральной Ассамблеи
      НОМЕР ACRA UEN: 201524437R
      Период регистрации ERF: 8 сентября 2015 г. – 7 сентября 2016 г.

      Код отлично работает в окне консоли, но как указать путь в среде Windows.

      в Unix, я думаю, отображается $ node hello.js

      Я новичок в Node.js. Пожалуйста, поправьте меня, если я делаю что-то не так.

      > узел C:\abc\zyx\hello.js ---- не работает

      > C:\abc\zyx\hello.js -- не работает

      ОБНОВЛЕНИЕ1:

      Добавлен node.exe в папку, где находится файл hello.js.
      Добавлен путь к папке c:\abc\zyx\, и я получаю сообщение об ошибке

      ReferenceError: приветствие не определено

      просмотреть содержимое hello.js

      ОБНОВЛЕНИЕ 2:

      До сих пор я пробовал все эти версии, и ни одна из них не работает. Может быть, я делаю что-то совершенно неправильно.

      См. мою файловую структуру

      РЕШЕНО. Вместо запуска node.exe попробуйте запустить в командной строке следующий параметр, и это сработало.

      Не могли бы вы предоставить немного больше информации? Насколько мне известно, официальной ноды для Windows не существует, поскольку объявление о запуске переноса было сделано всего несколько недель назад. Используете ли вы node.js под Cygwin или есть какие-то другие разветвления окон узлов (если они есть, я не слышал об этом). РЕДАКТИРОВАТЬ: я не знал, что доступна предварительная сборка. Приношу свои извинения.

      я не знаю, что такое c:>, но из командной строки, как вы сказали, мне помогло "узел c:\users\me\desktop\helloworld.js".

      У меня были те же проблемы, что и у вас, это забавно, потому что даже сегодня, в 2016 году, я нашел десятки руководств, пытающихся научить nodejs, но ни один из них не учит шаг за шагом, как запускать основную команду, кроме '$ node filename.js '. Я не могу понять, как все предполагают, что нам нужно использовать для этого корневую папку. Кто использует корень диска для размещения файлов?

      17 ответов 17

      Вот и все. Это было сделано в Windows XP.

      Это ужасно, НЕ копируйте исполняемый файл узла в корень жесткого диска. Вот для чего предназначены пути, см. ответ @kcbanner. Кроме того, установка Node в Windows поставляется с командной строкой Node.js, в которой уже правильно заданы пути, если вы не хотите изменять системный путь.

      @joshperry - Я думаю, вы немного упускаете суть. Вопрос был сильно отредактирован по сравнению с оригиналом, но основная проблема, с которой столкнулась ОП, заключалась в том, что они пытались выполнить файл из REPL. Ничто в моем ответе не предназначено как решение для долгосрочной установки, и это даже не подразумевается. Инструкции настолько просты, что иллюстрируют разницу между выполнением файла .js и открытием REPL.

      Установите файл MSI: перейдите в установленный каталог C:\Program Files\nodejs из командной строки n

      C:\>cd C:\Program Files\nodejs введите..

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

      Убедитесь, что каталог с node.exe находится в вашем PATH . Затем вы сможете запустить node path_to_js_file.js .

      Я добавил node.exe в папку, где находится файл hello.js. Также добавил путь к папке c:\abc\zyx\ и получаю ошибку

      О, понятно. Это похоже на проблему внутри вашего файла hello.js. Опубликуйте содержимое этого файла

      еще один простой способ

      1. загрузите nodejs в свою систему
      2. откройте блокнот и напишите команду js "console.log('Hello World');"
      3. сохраните файл как hello.js, желательно в том же месте, что и nodejs
      4. открыть командную строку и перейти к местоположению, где находится nodejs
        c:\program files\nodejs
      5. и запустите команду из такого места, как c:\program files\nodejs>node hello.js
      6. если файл js находится в другом месте, укажите путь к файлу c:\program files\nodejs>путь к узлу\hello.js

      Я установил узел для Windows. Когда я ищу node.js в меню «Пуск» Windows 7, появляется командная строка node.js. Если вы запустите эту специальную командную строку, вы можете установить что угодно в любом месте, не устанавливая путь или копируя node.exe везде.

      WinXp: я создал файл .bat

      Для этого просто запустите my_program.bat из проводника или в окне cmd

      Перейдите к cmd и введите: node "C:\Path\To\File\Sample.js"

      Windows/CMD не знает, где находится файл узла. Вы можете ввести вручную:

      каждый раз, когда вы открываете новое приглашение cmd.exe

      ИЛИ (в Windows 10),

      1. щелкните правой кнопкой мыши Этот компьютер -> свойства .
      2. Нажмите «Дополнительные параметры системы» -> «Переменные среды» (внизу справа).
      3. Выберите «Путь» и нажмите «Изменить» .
      4. Нажмите "Создать" и введите C:\Program Files\nodejs.
      5. Перезагрузитесь, и вы сможете запускать узел из любого каталога.

      Проблема заключалась в том, что вы открыли реплику Node.js, в то время как все автоматически предполагали, что вы находитесь в командной строке. Для чего вы можете запустить файл javascript из repl с помощью команды .load. Например:

      Эту же команду можно также использовать в командной строке, если вы сначала запускаете узел в командной строке, вводя узел без аргументов (при условии, что узел находится в PATH).

      Я нахожу удивительным, что 1) все предположили, что вы находитесь в командной строке, а не в repl, 2) кажется, никто не знает о .load и 3) это имеет 273 голоса, что доказывает, что многие другие node.js новички также сбиты с толку.

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

      Поэтому сначала нам нужно установить его, поэтому откройте эту ссылку, чтобы загрузить среду выполнения NodeJs. Затем откройте загруженный файл .exe и установите его в своей системе глобально. Если он уже установлен в вашей системе, вы можете пропустить этот шаг.

      Теперь мы можем запускать код js в терминале, так что давайте приступим.

      Пример 1. Запуск сценария JS из командной строки

      Оглавление

      Сначала создайте новый файл JavaScript и назовите его «helloworld.js». Вы можете просто использовать любой текстовый редактор, который у вас есть, или, если у вас установлен код Visual Studio, используйте его. Главное здесь — убедиться, что вы называете файл с расширением .js.

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

      Когда вы запускаете приведенный выше код непосредственно в браузере, вывод будет таким: Меня зовут и возраст: Правосудие 20. Проверьте также, Java или JavaScript: что лучше?

      Шаги для запуска кода js в терминале

      • Откройте командную строку или терминал, введя cmd в поле системного поиска. Вы можете открыть его как администратор или нет.

      откройте командную строку для запуска js-скрипта

      • Используйте cd, чтобы перейти к пути, по которому вы сохранили указанный выше файл. Если вы проигнорируете этот шаг, это не сработает, потому что ваша система не может найти путь к файлу js.
      • Затем просто введите "node helloworld.js" и нажмите Enter. Если вы сохранили файл под другим именем, используйте это имя. Вы должны увидеть и вывести «Меня зовут и возраст — Правосудие 20», напечатанное на терминале, если все прошло успешно. Вы можете проверить изображение ниже и выполнить шаги, которые я использовал для запуска файла.

      запустить файл js из терминала

      Пример 2. Запуск файла Js в терминале со средой выполнения NodeJs.

      Давайте сделаем еще один простой пример: создайте файл js и назовите его «дополнение.js», скопируйте и вставьте в файл приведенную ниже функцию сложения двух чисел.

      Вы уверены, что понимаете, что происходит в приведенном выше сценарии? Это просто функция, которая складывает любые два числа, переданные в функцию, и выводит результат.

      Теперь ваша очередь, следуйте описанному выше подходу, который я использовал в первом примере, чтобы запустить этот файл в терминале. Помните, что имя файла — «addition.js», и не забудьте сначала перейти по этому пути.

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

      Как запустить файл JavaScript в HTML?

      JavaScript – это интерпретируемый язык, разработанный для обеспечения интерактивности веб-страниц. Это не язык программирования высокого уровня, как JAVA и C++, но это не значит, что он бесполезен, вы можете использовать JavaScript для разработки как интерфейсных, так и серверных приложений с помощью NodeJ.

      JavaScript в основном используется в веб-разработке, особенно на стороне клиента. Например, предположим, что у вас есть кнопка на странице, и вы хотите, чтобы что-то происходило при ее нажатии. Ну, вы не можете использовать для этого C++ или JAVA, это работа JavaScript. Если это понятно, давайте посмотрим, как мы можем запустить скрипт js с помощью HTML.

      • Выполнение встроенного HTML-кода Javascript

      При таком подходе вы можете поместить код JavaScript в заголовок или перед закрывающим тегом body вашего HTML-файла. Для хорошей производительности и для того, чтобы элементы Dom загружались до js, рекомендуется вставлять его прямо перед закрывающим тегом body.

      Пример. Создайте новый файл .html, скопируйте и вставьте в него приведенный ниже код. Обратите внимание, где тег размещен аккуратно.

      1. Выполнить внешний файл JavaScript в HTML

      Если вы собираетесь разрабатывать большое приложение, в котором будет много кода, я рекомендую вам использовать этот подход. Это лучший вариант, который поможет вам поддерживать чистоту и порядок. Здесь вместо того, чтобы помещать все ваши сценарии JS в один и тот же файл HTML, давайте сделаем что-то другое. Идея состоит в том, чтобы отделить код js от HTML. Короче говоря, мы создадим внешний файл js и свяжем его с нашим HTML.

      Пример. Создайте файл JavaScript, назовите его «myexternal.js» и поместите в него приведенный ниже код.

      Создайте другой файл и назовите его index.html. Скопируйте и вставьте в него приведенный ниже код, но будьте очень внимательны.

      Если вы внимательно посмотрите на приведенный выше код, то увидите, что в открывающем теге "" есть атрибут "src", который указывает на наш файл JavaScript. Это просто означает, что мы делаем наш файл сценария доступным для элемента HTML Dom, чтобы мы могли получить к ним дополнительный доступ, чтобы сделать нашу страницу интерактивной. Это все, что вам нужно сделать, вы можете открыть файл в браузере, и вы должны увидеть всплывающее предупреждение. Я думаю, вы теперь хорошо поняли вопрос? Как запустить файл JavaScript?

      Включая JavaScript — HTML и CSS

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

      А как насчет CSS? Можете ли вы напрямую связать с ним файл JS?

      Короткий ответ: нет, вы можете использовать JavaScript для написания CSS для стилизации вашего элемента Dom, выполнив что-то вроде:

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

      Разница в выполнении JavaScript на стороне сервера и на стороне клиента

      Основной целью JavaScript было помочь сделать веб-страницы интерактивными. Но разработчики очень усердно работали над созданием фреймворка под названием «Node.Js», который интерпретирует JavaScript на сервере. Так в чем именно разница между ними? Ну, если JS запускается в браузере, то это клиентский скрипт, а если он запускается в терминале, то это серверный скрипт.

      Если вы помните, вы знаете, что мы выполнили наш первый скрипт в командной строке с помощью Node.js. Мы не связывали его ни с одним файлом HTML, но смогли успешно его запустить. Почему? Он работает на терминале как сервер. А как насчет последних двух примеров, которые запускаются в браузере? Это клиентский JavaScript, и мы не можем запустить его как серверный скрипт.

      Это дает вам возможность решить, хотите ли вы сосредоточиться на разработке интерфейса, серверной части или полного стека JS.

      Как запустить файл js в браузере?

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

      В этом случае вы можете открыть «инструмент проверки», который доступен почти во всех браузерах, включая Chrome и Mozilla Firefox. Нажав на консоль, вы можете увидеть, что не так, и предпринять необходимые шаги для исправления ошибки. Консоль также дает вам возможность напрямую писать в ней любой код JavaScript. Я лично предпочитаю делать это, так как я могу выделить свой элемент Dom и посмотреть, на какой из них я могу ссылаться непосредственно для отладки.

      Многие IDE, такие как код Visual Studio, и Atom также позволяют напрямую выполнять код JavaScript. В частности, в VS-Code есть встроенный терминал, который вы можете использовать. Он также имеет популярные расширения для предварительного просмотра HTML-страниц, связанных с файлами js, напрямую, без использования браузера.

      Заключение. Принципы запуска файлов JavaScript

      Вы прошли очень долгий путь и действительно многому научились в этом руководстве. Как я постоянно говорю, я хочу для вас самого лучшего, так что продолжайте практиковаться, и вы освоите все. И всегда помните об этом всякий раз, когда решите чему-то научиться: «Никто не гений, все дело в обучении. Если кто-то кажется вам гением, это просто означает, что он научился большему, чем вы».

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

      Например, вы знаете, что говорят, что если вы понимаете объект, значит, вы понимаете JavaScript, верно? Почему, потому что все в JS — это почти объект. Допустим, вы не потратили время на глубокое понимание объекта. Спросите себя, как вы будете использовать данные JSON с сервера?

      Поэтому мой маленький совет: не торопитесь и изучите все, что сможете. Кодирование — это не соревнование, основная цель кодирования — решение проблем. Поэтому ключ в том, чтобы выяснить некоторые проблемы, существующие в вашей среде, и посмотреть, как вы можете решить их с помощью своих навыков программирования. И, как гласит поговорка ведущих технических специалистов, «вы зарабатываете в зависимости от доли решаемых вами проблем». Это хорошо известно любому старшему разработчику, и именно это ежедневно побуждает его не отказываться от своих навыков.

      Это небольшой совет для вас. Если оно вам нравится или у вас есть какие-либо дополнения к этому руководству, сообщите мне об этом в поле для комментариев ниже.

      Теперь вы научились запускать файлы JavaScript в терминале и в HTML. Есть одна важная вещь, которую вы должны знать, она очень полезна, и вас обязательно спросят об этом на любом из ваших технических интервью. Разница между исходным кодом и объектным кодом — это действительно очень важная концепция, которую вам нужно понять. Большинство рекрутеров задают вопросы об этом, чтобы проверить ваши основы программирования. В противном случае вы будете считаться неопытным, нажмите на нее и не торопитесь, чтобы изучить все пошаговые руководства, которые я предоставил.

      Читайте также: