Джава скрипт установить: Установка JavaScript | JS: Настройка окружения

Установка базового программного обеспечения — Изучение веб-разработки

  • Обзор: Getting started with the web
  • Далее

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

  • Компьютер. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).
  • Текстовый редактор, чтобы писать код. Это может быть текстовый редактор (например, Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, или VIM) или гибридный редактор (например, Dreamweaver or WebStorm). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
  • Веб-браузеры, для тестирования кода. В настоящее время наиболее часто используемые браузеры это Firefox, Chrome, Opera, Safari, и Internet Explorer. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). Lynx, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.
  • Графический редактор, такие как The Gimp, Paint.NET, или Photoshop, чтобы создавать изображения для ваших веб-страниц.
  • Система контроля версий, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас Git является наиболее популярным инструментом контроля версий, и репозиторий кода Github, основанный на Git, также является очень популярным.
  • FTP программа, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе Cyberduck, Fetch, и FileZilla.
  • Система автоматизации, такая как Grunt или Gulp, для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов.
  • Шаблоны, библиотеки, фреймворки и т. д., чтобы ускорить написание общей функциональности.
  • А также некоторые другие инструменты!

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

Установка текстового редактора

У вас, наверное, уже есть базовый текстовый редактор на вашем компьютере. По умолчанию Windows включает Блокнот и Mac OS X поставляется с TextEdit. Linux дистрибутивы варьируются; Ubuntu поставляется с gedit по умолчанию.

Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с Visual Studio Code, который является бесплатным редактором, который предлагает предварительный просмотр и подсказки во время написания кода.

Установка современных веб-браузеров

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

  • Linux: Firefox, Chrome, Opera, Brave.
  • Windows: Firefox, Chrome, Opera, Internet Explorer, Brave (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер)
  • Mac: Firefox, Chrome, Opera, Safari, Brave (Safari поставляется с iOS и OS X по умолчанию)

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

Установка локального веб-сервера

Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье Как настроить локальный сервер для тестирования?

  • Обзор: Getting started with the web
  • Далее
  • Установка базового программного обеспечения
  • Каким должен быть ваш веб-сайт?
  • Работа с файлами
  • Основы HTML
  • Основы CSS
  • Основы JavaScript
  • Публикация вашего веб-сайта
  • Как работает Веб

Last modified: , by MDN contributors

Как добавить JavaScript на WordPress | REG.RU

В статье мы расскажем, как подключить скрипт JS в тему WordPress.

Что такое JavaScript

JavaScript — это скриптовый язык программирования. Его скрипты обрабатываются не на сервере, а прямо в браузере. Это позволяет добавлять новые функции без потери скорости сайта.

Скрипт JS встроен внутрь тега </script> — он позволяет отделить написанный код JavaScript от PHP:

<script type="text/javascript">
JavaScript code
</script>

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

Как добавить JavaScript на WordPress

Если вы хотите добавить JS в WordPress, выберите один из трёх способов:

  • с помощью плагина Shortcoder,
  • с помощью плагина Insert Headers and Footers,
  • с помощью изменения файла functions.php.

Выберите инструкцию, чтобы разрешить подключение скрипта WordPress.

С помощью плагина Shortcoder

Shortcoder — это плагин, с помощью которого можно создать блок кода элемента. После публикации создаётся специальный шаблон, который можно добавить на нужную вам страницу.

Чтобы установить Shortcoder:


  1. 1.

    Перейдите в админку.


  2. org/HowToStep»>
    2.

    Откройте раздел Плагины — Добавить новый:




  3. 3.

    В поисковой строке введите название плагина. Когда поиск отобразит результат, нажмите Установить:




  4. 4.

    Кликните Активировать:




  5. 5.

    В разделе «Shortcoder» нажмите Create shortcode:




  6. 6.

    На экране отобразится встроенный редактор. Он имеет три режима:

    • Text editor — для добавления простого текста,
    • Visual editor — для вёрстки небольшого элемента с текстом и изображением,
    • Code editor — для добавления скрипта. Рекомендуем использовать его.




  7. 7.

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

    Если скрипты для сайта WordPress добавлены и вы хотите сохранить готовый шаблон, нажмите Опубликовать:



Готовый шаблон вы сможете добавить на любую страницу через админку.

С помощью плагина Insert Headers and Footers

Insert Headers and Footers — это плагин, с помощью которого можно создать шаблон кода. В этом шаблоне можно обозначить, в какой части страницы должен отрабатываться скрипт.

Чтобы установить Insert Headers and Footers:


  1. 1.

    Перейдите в админку.



  2. 2.

    Откройте раздел Плагины — Добавить новый:




  3. 3.

    В поисковой строке укажите имя плагина. Когда поиск отобразит результат, кликните Установить:




  4. 4.

    Нажмите Активировать:




  5. 5.

    Перейдите в раздел Плагины — Установленные:




  6. 6.

    В списке найдите WP Headers and Footers и кликните Settings:



  7. org/HowToStep»>
    7.

    Скрипт можно вставить в один из трёх блоков:

    • Header — шапку сайта,
    • Body — тело сайта,
    • Footer — подвал сайта.Добавьте код в нужную часть страницы:


    WordPress: как подключить скрипт



  8. 8.

    Кликните Сохранить изменения:



С помощью изменения файла functions.php

ISPmanager

cPanel

Plesk


  1. 1.

    Кликните по файлу functions.php, наведите курсор на Редактировать и нажмите Открыть:




  2. 2.

    Добавьте код и сохраните изменения, нажав Ok:



  1. org/HowToStep»>
    1.

    Нажмите на functions.php и кликните Редактировать:




  2. 2.

    Добавьте скрипт и нажмите Сохранить изменения:



%% 1
Кликните по functions.php, как по ссылке:

%% 2
Добавьте код и сохраните данные:

Готово, вы разместили скрипт JS на сайте WordPress.

Помогла ли вам статья?

Да

2
раза уже
помогла

Установить React на Windows | Microsoft Узнайте

Редактировать

Твиттер

LinkedIn

Фейсбук

Электронное письмо

  • Статья
  • 2 минуты на чтение

В этом руководстве рассматривается установка React непосредственно в Windows с использованием набора инструментов create-react-app.

Мы рекомендуем следовать этим инструкциям, если вы новичок в React и просто заинтересованы в обучении. Если вы создаете одностраничное приложение (SPA), которое хотите использовать с командами или инструментами Bash и/или планируете развернуть на сервере Linux, мы рекомендуем вам установить приложение create-react-app в подсистеме Windows для Linux. (ВСЛ).

Для получения более общей информации о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (настольные приложения) см. обзор React.

Необходимые условия

  • Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+) или Windows 11
  • Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux (например, Ubuntu), и убедитесь, что он работает в режиме WSL 2. Вы можете проверить это, открыв PowerShell и введя: всл-л-в
  • Установите Node.js на WSL 2: в этих инструкциях для установки используется Node Version Manager (nvm), вам потребуется последняя версия NodeJS для запуска приложения create-react-app, а также последняя версия Node Package Manager (npm) . Точные требования к версии см. на веб-сайте Create React App.

Создайте свое приложение React

Чтобы установить полную цепочку инструментов React на WSL, мы рекомендуем использовать create-react-app:

  1. Откройте терминал (командная строка Windows или PowerShell).

  2. Создайте новую папку проекта: mkdir ReactProjects и войдите в этот каталог: cd ReactProjects .

  3. Установите React с помощью create-react-app, инструмента, который устанавливает все зависимости для создания и запуска полного приложения React.js:

     npx создать-реагировать-приложение мое-приложение
     

    Примечание

    npx — это средство запуска пакетов, используемое npm для выполнения пакетов вместо глобальной установки. По сути, он создает временную установку React, так что с каждым новым проектом вы используете самую последнюю версию React (а не ту версию, которая была текущей, когда вы выполняли глобальную установку выше). Использование средства запуска пакетов NPX для выполнения пакета также может помочь уменьшить загрязнение окружающей среды установкой большого количества пакетов на вашу машину.

  4. Сначала будет запрошено ваше разрешение на временную установку приложения create-react-app и связанных с ним пакетов. После завершения перейдите в новое приложение («my-app» или как вы его назовете): cd my-app .

  5. Запустите новое приложение React:

     н/мин старт
     

    Эта команда запустит сервер Node.js и запустит новое окно браузера, отображающее ваше приложение. Вы можете использовать Ctrl + c , чтобы остановить запуск приложения React в вашей командной строке.

    Примечание

    Приложение Create React включает конвейер сборки внешнего интерфейса с использованием Babel и веб-пакета, но не обрабатывает внутреннюю логику или базы данных. Если вы хотите создать серверный веб-сайт с React, который использует серверную часть Node.js, мы рекомендуем установить Next.js, а не эту установку приложения create-react-app, которая больше предназначена для одностраничных приложений. Вы также можете рассмотреть возможность установки Gatsby, если хотите создать статический контент-ориентированный веб-сайт.

  6. Когда вы будете готовы развернуть свое веб-приложение в рабочей среде, запуск npm run build создаст сборку вашего приложения в папке «build». Вы можете узнать больше в Руководстве пользователя приложения Create React.

Дополнительные ресурсы

  • Документы React
  • Создать документы приложения React
  • Должен ли я устанавливать Windows или подсистему Windows для Linux (WSL)?
  • Установить Next.js
  • Установить Гэтсби
  • Установите React Native для Windows
  • Установите NodeJS в Windows
  • Установите NodeJS на WSL
  • Попробуйте руководство: Использование React в Visual Studio Code
  • Попробуйте путь обучения React

Обратная связь

Отправить и просмотреть отзыв для

Этот продукт

Эта страница

Просмотреть все отзывы о странице

Настройте NodeJS на родной Windows

Редактировать

Твиттер

LinkedIn

Фейсбук

Электронное письмо

  • Статья
  • 7 минут на чтение

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

Примечание

Если вы используете Node.js профессионально, для вас важны скорость работы и совместимость системных вызовов, вы хотите запускать контейнеры Docker, которые используют рабочие пространства Linux и избегают необходимости поддерживать сценарии сборки Linux и Windows, или просто предпочитаете использовать Bash командной строки, затем установите Node.js в подсистеме Windows для Linux (точнее, WSL 2).

Установка nvm-windows, node.js и npm

Помимо выбора установки в Windows или WSL, при установке Node.js можно выбрать дополнительные варианты. Мы рекомендуем использовать диспетчер версий, так как версии меняются очень быстро. Скорее всего, вам придется переключаться между несколькими версиями Node. js в зависимости от потребностей различных проектов, над которыми вы работаете. Node Version Manager, чаще называемый nvm, — это самый популярный способ установки нескольких версий Node.js, но он доступен только для Mac/Linux и не поддерживается в Windows. Вместо этого мы рекомендуем установить nvm-windows, а затем использовать его для установки Node.js и диспетчера пакетов Node (npm). Существуют альтернативные менеджеры версий, которые также рассматриваются в следующем разделе.

Важно

Всегда рекомендуется удалить все существующие установки Node.js или npm из вашей операционной системы перед установкой диспетчера версий, поскольку различные типы установки могут привести к странным и запутанным конфликтам. Это включает в себя удаление любых существующих каталогов установки nodejs (например, «C:\Program Files\nodejs»), которые могут остаться. Сгенерированная символическая ссылка NVM не перезапишет существующий (даже пустой) установочный каталог. Справку по удалению предыдущих установок см. в разделе Как полностью удалить node.js из Windows.)

Предупреждение

NVM предназначена для установки для каждого пользователя и вызова для каждой оболочки. Он не предназначен для общих ящиков разработчика или серверов сборки с несколькими агентами сборки. NVM работает с использованием символической ссылки. Использование nvm в общих сценариях создает проблему, потому что эта ссылка указывает на папку данных приложения пользователя, поэтому, если пользователь x запускает nvm use lts , ссылка укажет node для всего окна на папку данных приложения. Если пользователь y запускает node или npm, он будет направлен на запуск файлов под учетной записью пользователя x, а в случае npm -g , они будут изменять файлы x, что по умолчанию запрещено. Таким образом, nvm прописывается только для одной коробки разработчика. Это касается и серверов сборки. Если два агента сборки находятся на одной и той же виртуальной машине/коробке, они могут конкурировать и вызывать странное поведение в сборках.

  1. Следуйте инструкциям по установке в репозитории windows-nvm. Мы рекомендуем использовать установщик, но если у вас есть более глубокое понимание ваших потребностей, вы можете рассмотреть возможность ручной установки. Программа установки укажет вам на страницу выпусков самой последней версии.

  2. Загрузите файл nvm-setup.zip для самой последней версии.

  3. После загрузки откройте zip-файл, затем откройте файл nvm-setup.exe.

  4. Мастер установки Setup-NVM-for-Windows проведет вас через этапы установки, включая выбор каталога, в который будут установлены как nvm-windows, так и Node.js.

  5. После завершения установки. Откройте PowerShell (рекомендуется открывать с повышенными правами администратора) и попробуйте использовать windows-nvm, чтобы вывести список установленных версий Node (на данный момент их не должно быть): нвм лс

  6. Установите текущую версию Node. js (для тестирования новейших улучшений функций, но с большей вероятностью будут проблемы, чем в версии LTS): nvm установить последнюю версию

  7. Установите последнюю стабильную версию LTS Node.js (рекомендуется), сначала посмотрев номер текущей версии LTS: nvm list available , а затем установив номер версии LTS: nvm install <версия> (заменив <версия> номером, то есть: nvm install 12.14.0 ).

  8. Список установленных версий Node: nvm ls …теперь вы должны увидеть в списке две версии, которые вы только что установили.

  9. После установки необходимых вам номеров версий Node.js выберите нужную версию, введя: nvm use <версия> (заменив <версия> с номером, то есть: nvm используйте 12.9.0 ).

Предупреждение

Доступ запрещен Проблема в nvm-windows версии 1.1.9, версия узла переключения требует повышенных прав Powershell (запуск от имени администратора). Во избежание этой проблемы рекомендуется использовать версию 1.1.7.

  1. Чтобы изменить версию Node.js, которую вы хотите использовать для проекта, создайте новый каталог проекта mkdir NodeTest и войдите в каталог cd NodeTest , затем введите nvm используйте <версия> , заменив <версия> номером версии, который вы хотели бы использовать (например, v10.16.3`).

  2. Проверьте, какая версия npm установлена ​​с помощью: npm --version , этот номер версии автоматически изменится на любую версию npm, связанную с вашей текущей версией Node.js.

Альтернативные менеджеры версий

Хотя windows-nvm в настоящее время является самым популярным менеджером версий для узла, есть альтернативы, которые стоит рассмотреть:

  • nvs (переключатель версий узла) — это кроссплатформенная альтернатива nvm с возможностью интеграции с VS Code.

  • Volta — новый менеджер версий от команды LinkedIn, который заявляет об улучшенной скорости и кросс-платформенной поддержке.

Чтобы установить Volta в качестве менеджера версий (а не windows-nvm), перейдите к разделу Установка Windows их руководства по началу работы, затем загрузите и запустите установщик Windows, следуя инструкциям по установке.

Важно

Перед установкой Volta убедитесь, что на вашем компьютере с Windows включен режим разработчика.

Дополнительные сведения об использовании Volta для установки нескольких версий Node.js в Windows см. в документации Volta.

Установить Visual Studio Code

Мы рекомендуем установить Visual Studio Code, а также пакет расширения Node.js для разработки с помощью Node.js в Windows. Установите их все или выберите те, которые кажутся вам наиболее полезными.

Чтобы установить пакет расширений Node.js:

  1. Откройте окно Extensions (Ctrl+Shift+X) в VS Code.
  2. В поле поиска в верхней части окна «Расширения» введите: «Пакет расширений узла» (или имя любого расширения, которое вы ищете).
  3. Выбрать Установить . После установки ваше расширение появится в папке «Enabled» вашего окна Extensions . Вы можете отключить, удалить или настроить параметры, щелкнув значок шестеренки рядом с описанием вашего нового расширения.

Несколько дополнительных расширений, которые вы, возможно, захотите рассмотреть, включают:

  • Отладчик для Chrome: после того, как вы закончите разработку на стороне сервера с помощью Node.js, вам нужно будет разработать и протестировать клиентскую часть. Это расширение интегрирует ваш редактор VS Code со службой отладки браузера Chrome, что делает работу более эффективной.
  • Раскладки клавиш из других редакторов: эти расширения могут помочь вашей среде чувствовать себя как дома, если вы переходите с другого текстового редактора (например, Atom, Sublime, Vim, eMacs, Notepad++ и т. д.).
  • Settings Sync: позволяет синхронизировать настройки VS Code в разных установках с помощью GitHub. Если вы работаете на разных машинах, это помогает поддерживать единообразие вашей среды на них.

Альтернативные редакторы кода

Если вы предпочитаете использовать редактор кода или IDE, отличный от Visual Studio Code, для среды разработки Node.js также подойдут следующие варианты:

  • IntelliJ IDEA
  • Возвышенный текст
  • Атом
  • Кронштейны
  • Блокнот++

Установите Git

Если вы планируете сотрудничать с другими или размещать свой проект на сайте с открытым исходным кодом (например, GitHub), VS Code поддерживает управление версиями с помощью Git. Вкладка «Управление версиями» в VS Code отслеживает все ваши изменения и содержит стандартные команды Git (добавить, зафиксировать, отправить, извлечь), встроенные прямо в пользовательский интерфейс. Сначала вам нужно установить Git для включения панели управления исходным кодом.

  1. Загрузите и установите Git для Windows с веб-сайта git-scm.

  2. Включен мастер установки, который задаст вам ряд вопросов о настройках вашей установки Git. Мы рекомендуем использовать все настройки по умолчанию, если у вас нет особой причины что-то менять.

  3. Если вы никогда раньше не работали с Git, руководства GitHub помогут вам начать работу.

  4. Мы рекомендуем добавить файл .gitignore в ваши проекты Node. Вот стандартный шаблон GitHub gitignore для Node.js.

Использование подсистемы Windows для Linux в рабочей среде

Использование Node.js непосредственно в Windows отлично подходит для изучения и экспериментирования с тем, что вы можете делать. Когда вы будете готовы создавать готовые к работе веб-приложения, которые обычно развертываются на сервере под управлением Linux, мы рекомендуем использовать подсистему Windows для Linux версии 2 (WSL 2) для разработки веб-приложений Node.js. Многие пакеты и платформы Node.js созданы с учетом среды *nix, и большинство приложений Node.