Введение в JavaScript

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

Зачем нужно

JavaScript — единственный язык, который браузер понимает нативно. Без него веб-страницы статичны: нельзя обработать клик, отправить форму без перезагрузки, анимировать элементы. Сегодня JS используется не только в браузере, но и на сервере (Node.js), в мобильных приложениях (React Native), десктопе (Electron) и даже в IoT.

Где используется

  • Фронтенд — интерактивность сайтов, SPA (React, Vue, Angular)
  • Бэкенд — серверные приложения (Node.js, Deno, Bun)
  • Мобильная разработка — React Native, Ionic
  • Десктоп — Electron (VS Code, Discord)
  • Геймдев — Phaser, Three.js
  • Автоматизация — скрипты, боты, n8n workflow

Предпосылки

Базовое понимание HTML и CSS. Понимание что такое программирование.

Краткая история

Рождение (1995)

Brendan Eich создал JavaScript за 10 дней в Netscape. Первоначальное название — Mocha, потом LiveScript, и наконец JavaScript (маркетинговый ход — Java была популярна).

Стандартизация (1997)

ECMAScript (ES) — официальный стандарт языка. ECMA-262 — спецификация.

Ключевые версии

Версия Год Ключевые фичи
ES3 1999 try/catch, регулярные выражения
ES5 2009 strict mode, JSON, Array methods
ES6/ES2015 2015 let/const, arrow functions, classes, Promise, modules
ES2017 2017 async/await, Object.entries()
ES2020 2020 optional chaining, nullish coalescing, BigInt
ES2022 2022 top-level await, .at, Object.hasOwn
ES2023 2023 Array findLast, toSorted, toReversed
ES2024 2024 Promise.withResolvers, groupBy

Где выполняется JavaScript

В браузере

Каждый браузер имеет JavaScript-движок:

  • V8 — Chrome, Edge, Opera
  • SpiderMonkey — Firefox
  • JavaScriptCore — Safari
<!-- Inline скрипт -->
<script>
  console.log('Привет из inline скрипта!');
</script>

<!-- Внешний файл (рекомендуется) -->
<script src="app.js"></script>

<!-- С атрибутами загрузки -->
<script src="app.js" defer></script>  <!-- после парсинга HTML -->
<script src="app.js" async></script>  <!-- параллельно парсингу -->

На сервере (Node.js)

# Установка Node.js -> https://nodejs.org
node --version   # проверка версии

# Запуск файла
node app.js

# REPL (интерактивный режим)
node
> 2 + 2
4

Разница браузер vs Node.js

// В браузере есть:
window        // глобальный объект
document      // DOM
localStorage  // хранилище

// В Node.js есть:
global        // глобальный объект (или globalThis)
process       // информация о процессе
__dirname     // путь к директории
require     // подключение модулей (CommonJS)

Первая программа

// Вывод в консоль
console.log('Hello, World!');

// Переменные
let name = 'JavaScript';
const year = 1995;

// Функция
function greet(language) {
  return `${language} создан в ${year} году`;
}

console.log(greet(name)); // "JavaScript создан в 1995 году"

Подключение к HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница с JS</title>
</head>
<body>
  <h1 id="title">Заголовок</h1>
  <button id="btn">Нажми меня</button>

  <!-- Всегда подключай скрипты перед </body> или используй defer -->
  <script>
    const btn = document.getElementById('btn');
    const title = document.getElementById('title');

    btn.addEventListener('click', () => {
      title.textContent = 'JavaScript работает!';
    });
  </script>
</body>
</html>

Инструменты разработчика

Консоль браузера

  • Chrome: F12 или Ctrl+Shift+J
  • Firefox: F12 или Ctrl+Shift+K
// Основные методы консоли
console.log('Обычное сообщение');
console.warn('Предупреждение');
console.error('Ошибка');
console.table([{a: 1}, {a: 2}]);

Частые ошибки

  1. Забыл <script> подключить — код просто не выполнится
  2. Скрипт до DOM — элементы ещё не созданы, querySelector вернёт null. Решение: defer или скрипт перед </body>
  3. Путаница JS и Java — это совершенно разные языки
  4. Не открыл консоль — ошибки есть, но их не видно

Практика

  1. Создай HTML-файл и подключи внешний JS-файл
  2. Выведи в консоль своё имя, возраст и текущую дату
  3. Создай кнопку, которая по клику меняет цвет фона страницы
  4. Попробуй запустить JS-файл через Node.js

Связанные темы

Ресурсы

🎓 Источник: 💻 Семинар Базовый синтаксис языка JavaScript

  • 📅 0000-00-00 · YouTube
  • Тезисы: базовая грамматика JS — литералы, операторы, statements, expressions, control flow. Эти кирпичики не зависят от платформы (Node/Browser), всё это ECMAScript

🎓 Источник: 💻 Базовый синтаксис JavaScript

  • 📅 2018-09-17 · YouTube
  • Тезисы: базовый синтаксис на семинаре — типы, переменные, условия, циклы, функции. Демонстрация что один и тот же код работает в браузере и Node.js одинаково

🎓 Источник: 👶 JavaScript для начинающих 1. Введение

  • 📅 2021-10-02 · YouTube
  • Тезисы: JS придумал Брендан Айк за 10 дней в 1995 для Netscape. ECMAScript — стандарт. Современный JS живёт в браузере (V8/SpiderMonkey/JSC) и на сервере (Node.js/Deno/Bun)

🎓 Источник: 💫 JavaScript 2024 — 2025 українською для початківців

  • 📅 2024-01-02 · YouTube
  • Тезисы: актуальный обзор JS 2024-2025. Чему учиться: ES2015-2024, async/await, modules, classes. Чего избегать: var, callback hell, classical OOP в чистом виде

⚡ Источник: ⎡spec05⎦ Почему JavaScript оказался самым непонятым языком · AsForJS

  • 📅 2024-03-10 · YouTube
  • Тезисы: JS имеет высокую сложность семантики (Reference Type, abstract operations, host hooks), но это скрыто за простым синтаксисом. Поэтому много мифов