Курс по JavaScript для начинающих: Модуль 1. Введение в JavaScript. Урок 4. Настройка окружения для разработки на JavaScript

Введение

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

Установка Visual Studio Code

Visual Studio Code (VS Code) — это бесплатный редактор кода, который поддерживает множество языков программирования, включая JavaScript. Он обладает множеством функций, таких как автодополнение кода, подсветка синтаксиса и отладка.

Шаги по установке VS Code:

1. Перейдите на официальный сайт Visual Studio Code.
2. Нажмите на кнопку “Download for Windows” (или для вашей операционной системы).
3. После завершения загрузки запустите установочный файл и следуйте инструкциям установщика.

Настройка Visual Studio Code

После установки VS Code, давайте настроим его для работы с JavaScript.

Установка расширений:

1. Откройте VS Code.
2. Нажмите на значок расширений (иконка кубика в левой боковой панели).
3. В поисковой строке введите следующие расширения и установите их:

• ESLint: для анализа кода и выявления ошибок.
• Prettier — Code formatter: для автоматического форматирования кода.
• JavaScript (ES6) code snippets: для автодополнения кода.

Настройка Prettier:

1. Перейдите в меню File > Preferences > Settings.
2. В поисковой строке введите “Format On Save” и поставьте галочку рядом с Editor: Format On Save.

Настройка браузера для разработки

Для выполнения и отладки JavaScript-кода мы будем использовать браузер Google Chrome, так как он обладает мощными инструментами разработчика.

Шаги по установке Google Chrome:

1. Перейдите на официальный сайт Google Chrome.
2. Нажмите на кнопку “Download Chrome” и следуйте инструкциям установщика.

Ознакомление с инструментами разработчика в браузере

Инструменты разработчика (DevTools) в Google Chrome позволяют просматривать и отлаживать HTML, CSS и JavaScript-код. Давайте подробно рассмотрим, как получить доступ к консоли разработчика и использовать её для выполнения JavaScript-кода.

Способы открытия консоли разработчика:

1. Использование контекстного меню:

• Откройте Google Chrome.
• Перейдите на любую веб-страницу.
• Нажмите правой кнопкой мыши на странице и выберите Просмотр кода или Inspect.

2. Использование горячих клавиш:

• На Windows/Linux: Нажмите Ctrl + Shift + I или F12.
• На macOS: Нажмите Cmd + Option + I.

3. Использование меню браузера:

• Нажмите на три точки в правом верхнем углу браузера (Меню).
• Выберите Дополнительные инструменты (More Tools).
• Выберите Инструменты разработчика (Developer Tools).