По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.
JavaScript(диалект ECMAScript) — это высокоуровневый, динамичный, мультипарадигменный, объектно-ориентированный, основанный на прототипе, слабо типизированный и интерпретируемый язык, традиционно используемый для написания сценариев на стороне клиента в веб-браузерах. JavaScript также можно запускать вне браузера с помощью таких фреймворков, как Node.js, Nashorn, Wakanda или Google Apps Script. Несмотря на название, он не имеет отношения к языку программирования Javaи имеет лишь внешнее сходство.
Задавая вопрос JavaScript, вы должны:
- Отладьте свой код JavaScript (см. Creativebloq, MDN, Google < / a>, & MSDN).
- Изолируйте проблемный код и воспроизведите его в фрагменте кода переполнения стека.или во внешней онлайн-среде, такой какJSFiddle,JS Bin< /a>илиPasteBin(не забудьте также включить код в сам вопрос). По возможности предпочтительнее использовать фрагменты кода Stack Overflow, а не внешние сайты.
- Если используется библиотека или инфраструктура, пометьте вопрос соответствующими тегами: jquery для jQuery, prototypejsдля Prototype, mootoolsдля MooTools и т. д. Однако, если инфраструктура не используется или не нужна, не включайте эти теги.
- Если проблема на стороне клиента, укажите, в каком браузере возникли проблемы с кодом, и какие сообщения об ошибках, если таковые имеются, были выданы браузером. Используйте Инструменты разработчика для вашего браузера (см. «Полезные инструменты» ниже), чтобы увидеть эти сообщения. Если вопрос касается браузера, используйте теги firefox, google-chrome, internet-explorer, opera, safari, microsoft-edge, opera-miniи т. д.
- Помечайте вопрос как cssили html, если вы спрашиваете о проблеме, касающейся комбинации один из тех, у кого JavaScript, и на него можно было ответить только информацией, конкретно касающейся этих предметов
Примечание. Если не включен также тег для платформы или библиотеки, на вопросы с тегом javascriptожидается ответ на чистом JavaScript.
О JavaScript
JavaScript работает практически во всех операционных системах, а движок включен в основные веб-браузеры. Разработано в 1995 году Бренданом Эйхомв Netscape Communications, изначально он назывался LiveScript, но был переименован в JavaScript из-за дружеских отношений Netscape с Sun Microsystems(создатели Java) в то время.
Также доступны автономные движки или интерпретаторы JavaScript, в том числе:
- Spidermonkeyот Mozilla — это первый движок JavaScript, когда-либо написанный и используемый в настоящее время в Mozilla Firefox.
- Механизм JavaScript Google, Chrome V8, используемый в Google Chrome и Chromium.
- Google Apps Script, облачный / серверный интерпретатор, обеспечивающий программный «макроподобный» контроль над службами и документами Служб Google.
- Node.js, созданный на основе V8, платформы, которая позволяет писать серверные приложения на JavaScript.
- Windows включает JScript, вариант JavaScript в Windows Script Host.
- Chakra, ответвление JScript, разработано Microsoft и используется в Edge;
- Mozilla также предлагает Rhinoреализацию встроенной в JavaScript Java, которая обычно встраивается в Java-приложения для предоставления сценариев конечным пользователям.
- WebKit (кроме проекта Chromium) реализует движок JavaScriptCore.
- ActionScript(первоначально производный отHyperTalk) теперь является диалектом ECMAScript и использует множество API-интерфейсов ECMAScript.
- Duktape Embeddable, переносимыйдвижок ECMAScriptна C с небольшим объемом памяти.
- Wakanda, фреймворк, IDE и сервер, построенные на V8 с поддержкой серверного JavaScript.
- Meteor: приложение Meteor представляет собой сочетание клиентского JavaScript, который запускается внутри веб-браузера или мобильного приложения PhoneGap, и серверного JavaScript, который запускается на сервере Meteor внутри контейнера Node.js. (согласно документации Meteor).
- Nashorn, механизм JavaScript, разработанный на языке программирования Java на основе машины Да Винчи (JSR 292).
Сеть разработчиков Mozillaсодержит высококачественные документация по JavaScript.
JavaScript обычно используется для управления объектной моделью документа(DOM) иКаскадные таблицы стилей(CSS) в браузере. Это позволяет создавать сценарии пользовательского интерфейса, анимацию, автоматизацию, проверку на стороне клиента и многое другое.
С недавним появлением таких платформ, как Node.js, JavaScript теперь можно использовать для написания серверных приложений. Кроме того, он также используется в средах, которые не основаны на веб-технологиях, таких как PDF-документы, браузеры для конкретных сайтов, виджеты рабочего стола и т. д.
Номенклатура
Хотя он был разработан под названием Mocha, этот язык был официально назван LiveScript, когда он впервые был выпущен в бета-версиях Netscape Navigator 2.0 в сентябре 1995 года, но он был переименован в JavaScript, когда он был развернут в браузере Netscape версии 2.0B3.
Изменение названия с LiveScript на JavaScript примерно совпало с добавлением Netscape поддержки технологии Java в свой веб-браузер Netscape Navigator. Окончательный выбор имени вызвал путаницу, создав впечатление, что этот язык был побочным продуктом языка программирования Java, и этот выбор был охарактеризован Netscape как маркетинговая уловка, направленная на придание престижа JavaScript за счет связи (если только в названии) с что было тогда горячим, новым языком веб-программирования.
Люди часто используют термин JavaScript неформально. Язык и термин произошли от Netscape. ECMAScript, JavaScript и JScript - это термины, которые легко спутать.
ECMAScriptбыл разработан как стандартизация Netscape's JavaScriptи самостоятельно разработанная Microsoft JScript. Каноническим справочником является спецификация языка ECMAScript® 2015. Хотя JavaScript и JScript стремятся быть совместимыми с ECMAScript, они также предоставляют дополнительные функции (и другие отклонения) не описывается в спецификациях ECMA. Существуют и другие реализацииECMAScript.
Сегодня различия для тех, кто использует JavaScript, ничтожны; люди обычно не различают варианты JavaScript и JScript от ECMAScript.
Версии ECMAScript
Большинство современных браузеров реализуют JavaScript на основе спецификации ECMAScript 6, хотя некоторые из них не реализуют некоторые функции ES6. Однако более старые браузеры, такие как Internet Explorer 8, реализуют спецификацию ECMAScript 3, которая не содержит таких функций, как Function.prototype.bind
или даже JSON.parse
, среди прочих. Вы можете ознакомиться с текущей поддержкой браузерамифункций ES6.
Текущая версия ECMAScript — ECMAScript 12, известная как ECMAScript 2021, опубликованная в июне 2021 года.
Пример кода JavaScript
Этот сценарий отображает "Hello World" в браузере, когда веб-сайт, на котором он содержится, завершает загрузку..
window.onload = function() {
alert('Hello World!');
};
Изучение JavaScript
- EloquentJavaScript: современное введение в программирование.
- Вы не знаете JS: подробная серия книг, охватывающая все основные темы.
- Руководство MDN по JavaScript: подробное руководство по JavaScript в сети разработчиков Mozilla.
- quirksmode.org — JavaScript: хорошее введение в JavaScript и другие технологии, используемые в браузере (например, DOM).
- Учебник по JavaScript: книга по чистому JavaScript, охватывающая почти все.
- Учебное пособие по JavaScript и примеры кода: руководство по чистому JavaScript и примеры кода для решения реальных проблем, возникающих в JavaScript.
- Базовые навыки JavaScript. Введение, охватывающее основные основы программирования.
- quirksmode.org | Введение в события: исчерпывающее описание различных типов обработки событий. Включает в себя обзор различных способов присоединения обработчиков событий и идентифицирует причуды между другими браузерами. Обязательно к прочтению, если вы хотите понять обработку событий.
- W3C Wiki | Основы JavaScript, DOM: полный список ссылок на учебные материалы W3C.
- Отладка JavaScript для начинающих: отличное введение в отладку JavaScript. Обязательно к прочтению!
- Современный JavaScript: разработка и дизайн: современное руководство по изучению JavaScript с использованием практических примеров и подходы, которые следует использовать сегодня.
- Изучение продвинутого JavaScript. Набор интерактивных упражнений, которые помогут вам пройти через некоторые фундаментальные концепции JavaScript.
- Руководство по стилю JavaScript: простое руководство, которое дает представление о стиле кода JavaScript.
- Нули в JavaScript: легко проверить, что возвращается при сравнении любых двух значений.
- JavaScript.RU: центральный JavaScript-ресурс для русскоязычного сообщества.
- JavaScript на польском языке: популярный сайт о JavaScript на польском языке.
- Отличный JS: коллекция отличных библиотек JavaScript для браузера, ресурсов и блестящих вещей для начинающих и опытных программистов.
Интерактивное обучение JavaScript
- Codecademy | JavaScript. Изучите основы JavaScript и динамического программирования.
- Udacity | Языки программирования. Ключевые понятия включают определение и обработку допустимых строк, предложений и структур программы.
- Code School. Изучите основы JavaScript и динамического программирования.
- Khan Academy: узнайте об анимации JavaScript.
- Кодовые войны: изучите шаблоны и тренируйтесь с помощью викторин, опубликованных участниками сообщества.
Бесплатные книги по программированию JavaScript
- JavaScript Крокфорда
- Красноречивый JavaScript
- Вы не знаете JS
- Основные шаблоны проектирования JavaScript и jQuery для начинающих
- Основы JavaScript
- Основы jQuery (начинается с основ JavaScript)
- Руководство по JavaScript для Mozilla Developer Network
- Изучение шаблонов дизайна JavaScript - Адди Османи
- Шаблоны для крупномасштабной разработки JavaScript - Адди Османи
- JS Books - Бесплатные книги JavaScript
Видео
- Библиотека YUI
- Канал AngularJS
- LearnCode.academy
- Инструменты разработчика Google Chrome
- Кодексшкол JavaScript
Безопасность
JavaScript и DOM предоставляют злоумышленникам возможность доставлять сценарии, которые выполняются на клиентском компьютере, через Интернет. Разработчики браузеров ограничивают этот риск двумя ограничениями. Во-первых, сценарии запускаются в изолированной программной среде, где они могут выполнять только действия, связанные с Интернетом, но не задачи программирования общего назначения, такие как создание файлов. Во-вторых, сценарии ограничены политикой одного происхождения: сценарии с одного веб-сайта не имеют доступа к такой информации, как имена пользователей, пароли или файлы cookie, отправленные на другой сайт. Большинство ошибок безопасности, связанных с JavaScript, являются нарушением либо политики одного источника, либо «песочницы».
Политика безопасности контента — это основной метод обеспечения того, чтобы на веб-странице выполнялся только доверенный код.
Атаки с использованием межсайтового скриптинга (XSS) — это попытки украсть данные или нанести вред веб-сайту с помощью JavaScript.
Полезные инструменты
- Инструменты разработчика браузера
- Firefox Developer Edition
- Инструменты разработчика Firefox(документация)
- Инструменты разработчикадля Internet Explorer
- Инструменты разработчика Chromeдля Chrome
- Веб-инспектордля Safari
- Способы предоставления живых демо
- Фрагментыдля включения живых демонстраций в вопросы (рекомендуется, так как он интегрирован в Stack Overflow)
- JSFiddleдля тестирования фрагментов (онлайн)
- Plunkerдля тестирования фрагментов (онлайн)
- JSBin< /a>для тестирования фрагментов (онлайн/офлайн)
- CodePenдля тестирования фрагментов (онлайн)
- Liveweaveдля тестирования фрагментов (онлайн)
- Обнаружение ошибок и лучшие практики тестирования
- Форматирование кода
- Минификация кода
- Производительность Benchmarking Playground
Мудрость от переполнения стека
- Что должен знать каждый программист JavaScript?
- Скрытые возможности JavaScript?
- Как работают JavaScript-закрытия?
- Возвращаемое значение из функции с вызовом Ajax
- var functionName = function () {} против функции functionName () {}
- JavaScript: в чем разница между функцией и классом
- Статические переменные в JavaScript
- Как работает конструкция (function () {}) () и почему люди ее используют?
- Какова область применения переменных в JavaScript?
- Что означает этот символ в JavaScript?
- Как я могу отладить мой код JavaScript?
- Что возвращают методы querySelectorAll и getElementsBy *?
- Какой оператор равенства (== vs ===) следует использовать в сравнениях JavaScript?
Полезные ссылки
- Ссылка в Википедии
- Собственные JavaScript-эквиваленты методов jQuery
- Справочник MDN JavaScript
- W3C DOM Core, HTML, событияи таблицы совместимости CSSиз https://www.quirksmode.org/
- JSLintинструмент качества кода от Дуглас Крокфорд( и JSHint- управляемая сообществом ветвь оригинала)
- Минифайеры / обфускаторы кода: / packer /, YUI Compressor, Компилятор Google Closure, UglifyJS
- Форматировщик кода / деобфускатор: JSBeautifier
- Идиомы и ошибки: округление, Объект Date, Объект Number, Цепочка областей видимости
- JavaScript Garden
- FAQ по comp.lang.javascript: очень обширное руководство по особенностям JavaScript, созданное Usenet's comp.lang.javascript
- ECMA 262-5 Online: HTML-версия спецификации ECMAScript 5.
- Аннотированный ES5: аннотированный и гиперссылочный HTML-производный спецификации ECMAScript 5.
- HTML ECMAScript 6 спецификация.
- Матрица поддержки ECMAScript: подробный список возможностей для реализации ECMAScript.
- Таблица совместимости ES6
- JavaScript Weekly: бесплатный еженедельный бюллетень, куратор которого Питер Купер
- Node Weekly: бесплатный еженедельный бюллетень
- Приоритет оператора: таблица приоритетов и ассоциативности операторов
- Поддержка Opera Mini для JavaScript: способ работы JavaScript в Opera Mini, веб-браузере, используемом люди, которым необходимо оптимизировать просмотр ресурсов
- https://nodeschool.ioПримеры для практики здесь:https:/ /github.com/workshopper/javascripting
- Сравнительная таблица JS: полная таблица знака равенства в JavaScript
Часто задаваемые вопросы
Найдите ответы на некоторые из наиболее часто задаваемых вопросов о JavaScript и связанных технологиях ниже.
В: У меня есть эта структура JSON. Как я могу получить доступ к свойству x.y.z
? A:Как получить доступ и обработать вложенные объекты, массивы или JSON?
В: Я добавляю события в цикл for, но все обработчики делают одно и то же. Почему? A:Закрытие JavaScript внутри циклов — простой практический пример
В: Я хочу сравнить что-то с несколькими значениями. Есть ли простой способ сделать это? A:Краткий способ сравнения нескольких значений
В: Как настроить правильное наследование? A:Объекты не наследуют функции-прототипы
В: Как работают замыкания JavaScript? A:Как работают замыкания JavaScript?
В: ПочемуsetTimeout()
внутриfor
цикла всегда используется последнее значение? A:setTimeout в цикле for не печатает последовательные значения
В: Как вернуть ответ на AJAX-вызов из функции? A:Как вернуть ответ на асинхронный вызов?
В: Почему мои обработчики, подключенные к циклу, работают некорректно и что с этим делать? A:Javascript: динамически генерировать обработчик
Вопрос. Как получить значения строки запроса? A:Как я могу получить значения строки запроса в JavaScript?
В: Что делаетuse strict
в JavaScript? A:Что делает «использовать строгое» действие в JavaScript и в чем причина этого?
Q: Как я могу сделать страницу перенаправления в jQuery/JavaScript? A:Как перенаправить на другую веб-страницу? а>
Q: Как отсортировать массив объектов по значению свойства? A:Сортировка массива объектов по строковому значению свойства
В: Как мне извлечь значение свойства в виде массива из массива объектов? A: из массива объектов, извлечь значение свойства в виде массива
В: Позже я добавляю элементы с помощью JavaScript или jQuery и добавляю события, но они не запускаются. Почему? О: Вам может понадобиться делегирование событий.
Вопрос. Как сохранить только те элементы массива, которые соответствуют определенному условию? A:Как можно Я сохраняю только те элементы массива, которые соответствуют определенному условию?
В: Как я могу отлаживать свой код JavaScript? A:Как я могу отлаживать свой код JavaScript?
В: Что означает этот символ в JavaScript? A:Что означает этот символ в JavaScript?
Дополнительная информация
- Википедия на JavaScript
- MDN - учить JavaScript
- Создатель JavaScript, Брендан Эйх, объясняет происхождение