Обзор технологий JavaScript

В то время как HTML определяет структуру и содержимое веб-страницы, а CSS устанавливает форматирование и внешний вид, JavaScript добавляет интерактивность на веб-страницу и создает насыщенные веб-приложения.

Однако зонтичный термин "JavaScript" в контексте веб-браузера включает несколько совершенно разных элементов. Один из них — основной язык (ECMAScript), другой — набор веб-API, включая DOM (Document Object Model).

JavaScript, основной язык (ECMAScript)

Основной язык JavaScript стандартизирован комитетом ECMA TC39 как язык под названием ECMAScript. "ECMAScript" — это термин для языкового стандарта, но "ECMAScript" и "JavaScript" можно использовать как взаимозаменяемые.

Этот основной язык также используется в небраузерных средах, например, в Node.js.

Что входит в область ECMAScript?

Среди прочего, ECMAScript определяет:

• Синтаксис языка (правила разбора, ключевые слова, потоки управления, инициализация литералов объектов, ...)
• Механизмы обработки ошибок (throw, try...catch, возможность создавать пользовательские типы Error)
• Типы (boolean, number, string, function, object, ...)
• Механизм наследования на основе прототипов
• Встроенные объекты и функции, включая JSON, Math, методы Array, parseInt, decodeURI и т. д.
• Строгий режим
• Система модулей
• Базовая модель памяти

Процесс стандартизации

Редакции ECMAScript утверждаются и публикуются в качестве стандарта Генеральной Ассамблеей ECMA ежегодно. Вся разработка ведется публично на GitHub-организации Ecma TC39, где размещаются предложения, официальный текст спецификации и заметки совещаний.

До 6-й редакции ECMAScript (известной как ES6) спецификации публиковались раз в несколько лет и обычно назывались по основным номерам версий — ES3, ES5 и т. д. После ES6 спецификация называется по году публикации — ES2017, ES2018 и т. д. ES6 синонимично ES2015. ESNext — это динамическое имя, относящееся к следующей версии на момент написания. Функции ESNext более корректно называть предложениями, поскольку, по определению, спецификация еще не финализирована.

Текущий утвержденный комитетом снимок ECMA-262 доступен в формате PDF и HTML на странице спецификации языка ECMA-262 Ecma International. ECMA-262 и ECMA-402 постоянно поддерживаются и обновляются редакторами спецификаций; веб-сайт TC39 размещает последние актуальные версии ECMA-262 и ECMA-402.

Новые языковые функции, включая введение нового синтаксиса и API, а также пересмотр существующего поведения, обсуждаются в форме предложений. Каждое предложение проходит 4-этапный процесс и обычно реализуется движками JavaScript на этапе 3 или 4, становясь доступным для общественности.

См. статью ECMAScript в Википедии для получения дополнительной информации об истории ECMAScript.

API интернационализации

Спецификация ECMAScript Internationalization API является дополнением к Спецификации языка ECMAScript, также стандартизированной Ecma TC39. API интернационализации предоставляет функции сортировки (сравнение строк), форматирования чисел и форматирования дат и времени для JavaScript-приложений, позволяя приложениям выбирать язык и адаптировать функциональность к своим потребностям. Первоначальный стандарт был одобрен в декабре 2012 года; статус реализации в браузерах отслеживается в документации объекта Intl. Спецификация интернационализации в настоящее время также ратифицируется ежегодно, и браузеры постоянно улучшают ее реализацию.

Связанные ресурсы

Существует множество способов, которыми вы можете участвовать или просто отслеживать текущую работу над Спецификацией языка ECMAScript, Спецификацией API интернационализации ECMAScript и связанными с ними ресурсами:

• Репозиторий спецификации языка ECMAScript
• Репозиторий спецификации API интернационализации ECMAScript
• Репозиторий предложений ECMAScript
• Репозиторий набора тестов совместимости ECMAScript
• Заметки совещаний TC39
• Обсуждение спецификации ECMAScript; текущий список рассылки
• Обсуждение спецификации ECMAScript; исторические архивы списка рассылки (до марта 2021 г.)

API DOM

WebIDL

Спецификация WebIDL обеспечивает связь между технологиями DOM и ECMAScript.

Ядро DOM

Document Object Model (DOM) — это кроссплатформенная, независимая от языка конвенция для представления объектов в документах HTML, XHTML и XML и взаимодействия с ними. Объекты в дереве DOM могут быть адресованы и изменены с помощью методов объектов. В настоящее время спецификация ядра DOM поддерживается WHATWG (заменившей версию W3C). Она определяет не зависящие от языка интерфейсы, которые абстрагируют документы HTML и XML как объекты, а также определяет механизмы для манипулирования этой абстракцией. Это включает: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget и другие.

С точки зрения ECMAScript, объекты, определенные в спецификации DOM, называются "хост-объектами".

HTML DOM

HTML, язык разметки веба, специфицирован в терминах DOM. Слой поверх абстрактных концепций, определенных в DOM Core, HTML также определяет смысл элементов. HTML DOM включает такие вещи, как свойство className у HTML-элементов или API, такие как Document.body.

Спецификация HTML также определяет ограничения для документов; например, она требует, чтобы все дочерние элементы элемента <ul>, представляющего неупорядоченный список, были элементами <li>, поскольку они представляют собой элементы списка. В целом, она также запрещает использование элементов и атрибутов, не определенных в стандарте.

Ищете объект Document, объект Window и другие элементы DOM? Прочтите документацию DOM.

Другие заметные API

• Функции setTimeout() и setInterval() впервые были специфицированы в интерфейсе Window в HTML Standard.
• XMLHttpRequest позволяет отправлять асинхронные HTTP-запросы.
• API Fetch предоставляет более удобную абстракцию для сетевых запросов.
• CSS Object Model абстрагирует CSS-правила в объекты.
• WebWorkers позволяет выполнять параллельные вычисления.
• WebSockets обеспечивает низкоуровневую двустороннюю связь.
• Canvas 2D Context — это API для рисования на <canvas>.
• Интерфейс WebAssembly предоставляет утилиты для взаимодействия между JavaScript-кодом и модулями WebAssembly.

Небраузерные среды (например, Node.js) часто не имеют DOM API, поскольку они не взаимодействуют с документами, но при этом обычно реализуют многие веб-API, такие как fetch() и setTimeout().

Реализации JavaScript

Движки JavaScript, используемые в современных веб-браузерах, включают:

• SpiderMonkey от Mozilla, используемый в Firefox, Servo и Flow. Другие небраузерные применения включают MongoDB, CouchDB и многое другое. Это был первый в истории движок JavaScript, созданный Бренданом Эйхом в Netscape.
• V8 от Google, используемый в Chrome и браузерах на основе Chromium, таких как Opera, Edge и Brave. Другие небраузерные применения включают Node.js, Deno, Electron и многое другое.
• JavaScriptCore от Apple (также известный как SquirrelFish/Nitro), используемый в Safari и других браузерах на основе WebKit. Другие небраузерные применения включают Bun.
• LibJS, используемый в Ladybird.

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

• Carakan, использовавшийся в Opera до того, как он стал браузером на основе Chromium.
• Chakra от Microsoft, использовавшийся в Internet Explorer (хотя язык, который он реализует, формально называется "JScript" во избежание проблем с товарными знаками). Ранние версии Edge использовали другой движок JavaScript, ошибочно также называемый Chakra, прежде чем он стал браузером на основе Chromium.

Некоторые движки JavaScript, специально разработанные для небраузерных целей, включают:

• Engine262, написанный на JavaScript и предназначенный в основном как эталонная реализация языка.
• Hermes от Meta, оптимизированный для React Native.
• Rhino от Mozilla, написанный на Java.
• GraalJS от Oracle, написанный на Java и построенный на основе GraalVM.
• Moddable XS, предназначенный для IoT/встраиваемых систем.
• QuickJS, предназначенный быть маленьким и легким.

Движки JavaScript предоставляют публичный API, который разработчики приложений могут использовать для интеграции JavaScript в свое программное обеспечение. Безусловно, самой распространенной хост-средой для JavaScript являются веб-браузеры. Веб-браузеры обычно используют публичный API для создания хост-объектов, ответственных за отражение DOM в JavaScript.

Другим распространенным применением JavaScript является язык сценариев на стороне сервера (веб-сервера). Веб-сервер JavaScript предоставляет хост-объекты, представляющие объекты HTTP-запроса и ответа, которые затем могут быть изменены JavaScript-программой для динамической генерации веб-страниц. Node.js является популярным примером этого.

Оболочки

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

Автономные оболочки JavaScript

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

• Node.js — Node.js — это платформа для легкого создания быстрых, масштабируемых сетевых приложений.
• ShellJS — переносимые команды Unix-оболочки для Node.js.

Браузерные оболочки JavaScript

Следующие оболочки JavaScript запускают код через движок JavaScript браузера.

• Firefox имеет встроенную консоль JavaScript, которая поддерживает многострочное редактирование.
• Babel REPL — браузерная REPL для экспериментов с будущим JavaScript.
• TypeScript playground — браузерная песочница для экспериментов как с новыми функциями JavaScript (через компилятор tsc), так и с синтаксисом TypeScript.

Инструменты и ресурсы

Полезные инструменты для написания и отладки вашего JavaScript-кода.

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

Консоль разработчика, Профайлер JavaScript, Отладчик и многое другое.

Изучение JavaScript

Отличный ресурс для начинающих веб-разработчиков — изучайте JavaScript в интерактивной среде с короткими уроками и интерактивными тестами, под руководством автоматизированной оценки. Первые 40 уроков бесплатны, а полный курс доступен за небольшую единовременную плату.

TogetherJS

Сотрудничество — это просто. Добавив TogetherJS на свой сайт, вы позволите пользователям помогать друг другу на веб-сайте в реальном времени!

Stack Overflow

Вопросы Stack Overflow с тегом "JavaScript".

JSFiddle

Редактируйте JavaScript, CSS и HTML и получайте результаты в реальном времени. Используйте внешние ресурсы и сотрудничайте с вашей командой онлайн.

Plunker

Plunker — это онлайн-сообщество для создания, совместной работы и обмена вашими идеями веб-разработки. Редактируйте свои файлы JavaScript, CSS и HTML и получайте результаты и структуру файлов в реальном времени.

JS Bin

JS Bin — это инструмент отладки для совместной веб-разработки с открытым исходным кодом.

CodePen

CodePen — это еще один инструмент для совместной веб-разработки, используемый как песочница с мгновенным результатом.

StackBlitz

StackBlitz — это еще одна онлайн-песочница/инструмент отладки, которая может размещать и развертывать полнофункциональные приложения с использованием React, Angular и т. д.

RunJS

RunJS — это десктопный инструмент-песочница/черновик, который предоставляет результаты в реальном времени и доступ как к API Node, так и к API браузера.