Карта сайта

Урок 2: Установка и настройка среды разработки для JavaScript’а

/Уроки по JavaScript/Урок 2: Установка и настройка среды разработки для JavaScript’а
Урок 2: Установка и настройка среды разработки для JavaScript’а
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы продолжим наше путешествие в мир JavaScript. В первом уроке мы разобрались, что такое JavaScript и где он применяется. Теперь пришло время перейти к практике. Научимся настраивать среду разработки, писать код, работать с консолью браузера и создадим свой первый «Hello, World!».

Как писать код JavaScript

Перед тем как начать программировать, нам нужно подготовить «рабочее место». Для JavaScript есть множество инструментов, но я покажу самые простые и эффективные.

1. Выбор редактора кода

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

  • Visual Studio Code (VS Code) — бесплатный, мощный и популярный редактор от Microsoft.
  • Sublime Text — легкий и быстрый, подходит для новичков.
  • WebStorm — платный, но очень продвинутый инструмент для профессионалов.

Установка VS Code:

  1. Перейдите на сайт code.visualstudio.com.
  2. Скачайте версию для вашей ОС (Windows, macOS, Linux).
  3. Запустите установщик и следуйте инструкциям.

После установки откройте редактор. Советую сразу установить расширения для удобства:

  • Live Server — запускает локальный сервер для предпросмотра HTML/CSS/JS.
  • Prettier — автоматически форматирует код.

2. Создаем первый файл

  1. Создайте папку для проекта, например, js-course.
  2. Откройте эту папку в VS Code через меню File → Open Folder.
  3. Создайте файл index.html и файл script.js.

Подключение JavaScript к HTML:
В файле index.html добавьте:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый JS-проект</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <!-- Подключаем JS-файл -->
    <script src="script.js"></script>
</body>
</html>

Теперь весь код в script.js будет выполняться при открытии страницы.

Знакомство с консолью браузера (DevTools)

Консоль браузера это инструмент, где можно выполнять JavaScript-код, отлаживать программы и просматривать ошибки. Открыть её можно в любом браузере (Chrome, Firefox, Edge) сочетанием клавиш:

  • Windows/Linux: Ctrl + Shift + J или F12.
  • macOS: Cmd + Option + J.

Что умеет консоль?

  1. Вывод информации:
    Команда console.log() выводит данные в консоль. Например:

    console.log("Это мое первое сообщение в консоли!");

    Это особенно полезно для отладки: вы можете проверить значения переменных или отследить выполнение кода.

  2. Выполнение кода «на лету»:
    В консоли можно писать JS-код прямо сейчас. Например:

    let sum = 2 + 2;
console.log(sum); // Выведет 4
  3. Просмотр ошибок:
    Если ваш код содержит ошибки, консоль укажет на них. Например, если вы забудете закрыть кавычки, появится сообщение: Uncaught SyntaxError: Invalid or unexpected token.

Попробуйте выполнить следующие команды в консоле:

console.log("Привет, " + "Максим!");
alert("Добро пожаловать на курс!");
document.body.style.backgroundColor = "lightblue";

Первый «Hello, World!»

Традиционно первый код в программировании это вывод фразы «Hello, World!». Сделаем это двумя способами.

Способ 1: Через консоль браузера

Откройте консоль и введите:

console.log("Hello, World!");

Вы сразу увидите результат. Это самый быстрый способ проверить код.

Способ 2: Через HTML-страницу

  1. В файле script.js напишите: 
    alert("Hello, World!");
  2. Откройте index.html в браузере. Появится всплывающее окно с текстом.

Что здесь происходит?

  • alert() — функция, которая отображает диалоговое окно.
  • console.log() — функция для вывода в консоль.

Практические задачи

Закрепим материал на примерах. Решите задачи по порядку.

Задача 1: Вывод приветствия

Напишите код в script.js, который выводит в консоль фразу:

console.log("Меня зовут [Ваше имя], и я изучаю JavaScript!");

Задача 2: Изменение страницы

Добавьте код в script.js, который меняет заголовок страницы (<h1>) на «Я программирую на JS!».
Подсказка:

document.querySelector("h1").textContent = "Я программирую на JS!";

Итоги урока

Сегодня мы сделали огромный шаг:

  • Установили редактор кода VS Code.
  • Научились подключать JavaScript к HTML.
  • Освоили работу с консолью браузера.
  • Написали первый «Hello, World!».

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

Полный курс «JavaScript для начинающих» доступен здесь:
https://max-gabov.ru/javascript-dlya-nachinaushih