Поскольку JavaScript не является компилируемым языком, нам не нужны какие-либо специальные инструменты разработки JavaScript для написания и развертывания приложений JavaScript.
Аналогично, нам не нужно специальное серверное программное обеспечение для запуска приложений JavaScript. Поэтому возможности создания кодов JavaScript практически безграничны.
Мы можем писать код JavaScript в любом текстовом редакторе (Блокноте) или в мощных интегрированных средах разработки (IDE), таких как Visual Studio и Eclipse IDE.
Из трех вариантов мы будем использовать Visual Studio Code в качестве среды разработки IDE на протяжении всего обучения по JavaScript для практического объяснения примеров программ JavaScript.
Но мы обсудим все три подхода по одному в дальнейших уроках, так что вы можете использовать один из всех трех подходов по своему усмотрению. В конечном счете, вы должны использовать тот инструмент, с которым вам удобнее всего.
Прежде чем приступить к написанию кода JavaScript в Visual Studio Code, мы узнаем, как загрузить и установить последнюю версию Visual Studio Code с веб-сайта компании, а затем настроить ее.
- Как загрузить и установить Microsoft Visual Studio Code для JavaScript
- Лучшие расширения Javascript для Visual Studio Code
- Как написать программу JavaScript в Visual Studio Code?
- Как запустить JavaScript в редакторе кода Visual Studio?
- Как найти ошибку в коде JavaScript с помощью консоли?
- Как создать и разместить внешний файл JavaScript с помощью Visual Studio?
Как загрузить и установить Microsoft Visual Studio Code для JavaScript
Visual Studio Code — это легкий, но самый мощный автономный редактор исходного кода, работающий на вашем рабочем столе. Он доступен для Windows, macOS и Linux.
Он поставляется со встроенной поддержкой JavaScript, TypeScript и Node.js, а также имеет различные типы расширений для других языков программирования (таких как C++, C#, Java, Python, PHP, Go) и сред выполнения (таких как.NET и Unity).
Теперь мы собираемся загрузить код Visual Studio в качестве среды разработки IDE для программы JavaScript. Для загрузки и установки кода Visual Studio выполните следующие шаги:
Шаг 1: Загрузите Visual Studio Code по этой ссылке: Visual Studio Code
Выберите последнюю стабильную версию кода Visual Studio и убедитесь, что если у вас 64-разрядная машина, то выберите 64-разрядную Visual Studio.
Шаг 2: После загрузки VSCodeUserSetup.exe в вашу компьютерную систему нажмите на VSCodeUserSetup.exe и установите приложение Visual Studio Code. Проверьте лицензионное соглашение и нажмите кнопку Далее, как показано ниже на снимке экрана.
Шаг 3: Выберите следующие параметры, а затем нажмите кнопку «Далее», как показано на снимке экрана ниже.
После нажатия кнопки Далее снова нажмите кнопку Установить. Редактор кода Microsoft Visual Studio начнет установку на ваш компьютер. Затем нажмите кнопку Готово.
Шаг 4: Теперь щелкните значок Visual Studio, чтобы открыть редактор кода Visual Studio на рабочем столе. Редактор кода Visual Studio покажет вам «Приветственное сообщение и список изменений, произошедших в последней версии». Закройте все из них.
Теперь мы установим несколько полезных расширений для JavaScript в редактор кода Visual Studio.
Лучшие расширения Javascript для Visual Studio Code
Редактор кода Microsoft Visual Studio поддерживает различные функции для разработки JavaScript и Node.js. Эти функции являются встроенными основными функциями, такими как отладка, IntelliSense, навигация по коду и т. д.
В дополнение к этим основным функциям мы также можем установить многочисленные мощные расширения, чтобы добавить важные функции в VS Code для написания и развертывания кодов приложений JavaScript.
Чтобы найти расширения JavaScript, щелкните значок «Расширение» на левой боковой панели VS Code и просто введите JavaScript в строке поиска представления расширений.
Кроме того, вы также можете найти расширения JavaScript, написав теги: «tag:javascript» в строке поиска в соответствии с вашими требованиями.
Для JavaScript мы установим следующие мощные расширения JavaScript в VS Code по одному. Они следующие:
- Фрагменты кода JavaScript (ES6)
- Живой сервер
- Автоматическое переименование тега
- Подсветка парных скобок
- Проверка орфографии кода
- Цветовая подсветка синтаксиса
- Подсветка ошибок
- FTP-простой
Все эти расширения являются рекомендуемыми расширениями для кодирования JavaScript. Чтобы установить вышеуказанное расширение, просто нажмите кнопку установки расширения. Расширение начнет установку. Повторите для всех.
Прежде чем приступить к установке расширений, вы также можете прочитать описания и обзоры и решить, какое расширение подходит вам лучше всего.
Как написать программу JavaScript в Visual Studio Code?
После установки всех рекомендуемых расширений, теперь мы создадим веб-проект в VS code и напишем простой код программы на JavaScript.
Чтобы написать код JavaScript с помощью редактора кода Visual Studio, просто выполните следующие действия:
Шаг 1: Создайте папку с именем JavaScript Project на диске C.
Шаг 2: Откройте редактор кода VS на вашем компьютере и перейдите в меню Файл > Открыть папку и выберите папку проекта JavaScript, которую вы создали на диске C. Теперь вы увидите проект JavaScript со множеством опций в коде VS.
Шаг 3: Нажмите кнопку «Новый файл», введите FirstJSProgram.html и нажмите кнопку Enter, как показано на снимке экрана ниже.
Теперь в правой части редактора кода VS вы увидите HTML-страницу FirstJSProgram.html, на которой мы будем писать код JavaScript.
Чтобы написать код JavaScript на странице HTML, просто введите «!» (Эммет) и нажмите кнопку ввода. Посмотрите на скриншот ниже, чтобы лучше понять.
Шаг 4: Теперь напишите следующий фрагмент кода JavaScript внутри тегов body.
<script>
document.write("This is my first JavaScript program in Visual Studio Code");
</script>
После того, как код JS написан, сохраните его с помощью Ctrl+S. На следующем этапе мы узнаем, как запустить фрагмент кода HTML в Visual Studio Code.
Как запустить JavaScript в редакторе кода Visual Studio?
Мы можем запустить код скрипта в коде Visual Studio с помощью Live Server. Live Server откроет веб-страницу на локальном сервере с помощью вашего браузера по умолчанию, где мы сможем увидеть вывод программы.
Чтобы запустить фрагмент кода, щелкните правой кнопкой мыши и выберите опцию «Открыть с Live Server» и подождите некоторое время. Откроется браузер по умолчанию и отобразит следующий вывод.
Output:
This is my first JavaScript program in Visual Studio Code
Как найти ошибку в коде JavaScript с помощью консоли?
Мы можем найти ошибки в коде JavaScript, используя консоль в браузере. Когда вы запустите HTML-страницу с помощью Live-сервера, на котором вы создали HTML-страницу в коде Visual Studio, Live-сервер откроет ваш браузер по умолчанию, где вы увидите вывод.
Используя консоль браузера по умолчанию, вы также можете найти ошибки в коде JavaScript. Чтобы найти ошибки в скрипте, просто щелкните правой кнопкой мыши на веб-странице и выберите опцию inspect element.
Вкладка откроется в боковой панели или ниже в браузере по умолчанию, где вам нужно нажать на консоль. Какая бы ошибка ни возникла в коде, вы можете наблюдать за ошибками и исправлять их в редакторе кода VS.
Я рекомендую использовать Google Chrome в качестве браузера по умолчанию, поскольку его консоль очень мощная.
Давайте возьмем пример программы, где мы найдем ошибки в коде с помощью консоли браузера. Напишите следующий код между открывающим тегом <body> и закрывающим тегом </body> в редакторе и запустите с помощью живого сервера. Затем перейдите в консоль и проверьте ошибку в коде.
Код программы:
<body>
<script>
if(true)
{
let x = 20;
document.write(x);
}
document.write(x); // Uncaught ReferenceError: x is not defined
</script>
</body>
Я порекомендую вам настроить редактор кода VS, браузер по умолчанию и консоль вместе (параллельно). Эта настройка поможет вам одновременно видеть вывод и ошибки в коде.
Как создать и разместить внешний файл JavaScript с помощью Visual Studio?
Сначала мы создадим внешний файл JavaScript с помощью Visual Studio, а затем поместим его на страницу FirstJSProgram.html.
Чтобы создать внешний файл JavaScript в Visual Studio, просто выполните следующие простые шаги:
Шаг 1: Нажмите «Новый файл» и введите имя «myScript.js» в появившемся диалоговом окне, а затем нажмите Enter.
Шаг 2: Откроется страница myScript с расширением.js, где мы напишем следующий фрагмент кода.
document.write("Creating an external file for JavaScript using Visual Studio");
Теперь сохраните его с помощью Ctrl+S.
Теперь мы поместим внешний файл JavaScript на новую HTML-страницу с именем «myFirstScript».
Шаг 1: Чтобы создать страницу myFirstScript, просто выполните те же действия, которые мы делали ранее.
Шаг 2: Поместите следующий код в открывающий тег <body> и закрывающий тег </body> HTML-страницы myFirstScript в коде Visual Studio.
<body>
<script src = "myScript.js"></script> // Here, src is an attribute of script tag.
</body>
Шаг 3: Теперь сохраните его и запустите код, используя живой сервер. Мы получим следующий вывод, как показано ниже.
Output:
Creating an external file for JavaScript using Visual Studio
В этом уроке мы объяснили все важные шаги, связанные с тем, как писать код JavaScript в Visual Studio Code. Мы надеемся, что вы поняли, как создавать и запускать код JavaScript в Visual Studio Code. Оставайтесь с нами в следующем уроке, где мы научимся создавать и запускать код JavaScript с помощью Eclipse IDE. Спасибо за чтение!!!
