Для чего в веб страницах используют javascript

Введение в JavaScript

Из этой статьи вы узнаете что такое JavaScript и его историю. Также настроите окружение для начала работы и напишите простой скрипт.

Что такое JavaScript?

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

Это определение может немного запутать новичков, так что уточним некоторые части определения:

Код написанный на этом языке, преобразовывается в машинные инструкции и выполняется построчно, для этого используется специальная программа — интерпретатор. Это позволяет, при наличии соответствующего интерпретатора, запускать данный код на любой платформе (компьютере, телефоне, SmartTV и т.д.). Более подробно об интерпретации Вы можете прочитать тут.
Язык является высокоуровневым, это означает что язык располагает более простыми и удобным для программиста инструкциями. Хотя такие языки немного уступают по гибкости и производельности низкоуровневым, они позволяет писать более понятный для человека код, соответственно, увеличивая скорость написания кода
Более подробно о языках разного уровня тут.

Зачем нужен JavaScript?

В 1995 году компании Netscape для их браузера потребовался эффективный язык программирования для написания простых скриптов для веб-сайтов. Язык должен был быть легким и понятным для широкого круга пользователей. В результате всего этого (очень советую почитать историю по ссылке) появился язык JavaScript. Важное замечание, несмотря на свое название, язык не имеет никакого отношения к другому популярному языку программирования Java.

Автором языка является Брендан Айк, который в том время являлся инженером компании Netscape. Более подробно о нем можно прочитать тут в этой статье.

С момента его создания в 1995 году JavaScript очень сильно изменился, и занял лидирующие позиции в интернете. Сейчас JavaScript используется практически в каждом сайте или веб приложении, и давно перестал быть языков для написания “простых скриптов”.

Помимо этого на JavaScript пишутся приложения для Android и iOS, window, unix-подобных операционных систем, например популярное приложение Instagram написано на JavaScript фреймворке под названием React Native.

Стандарт ECMAScript

В 1996 году было принято решение стандартизировать язык. К тому времени скрипты, написанные на JavaScript, использовались на очень большом количестве сайтов. Стандартизацией занималась ассоциация ECMA.

ECMA — ассоциация, созданная в 1961 году с целью стандартизации информационных и коммуникационных систем

Для разработки стандарта была сформирована рабочая группа TC-39. Эта группа действует и по сей день, продолжая улучшать язык.

В 1997 году работа над стандартом была закончена, он получил имя ECMA-262. Язык был назван ECMAScript, так как название JavaScript не могло быть использовано из-за проблем с торговой маркой Java (раньше надо было думать -_-).

Современные стандарты

Последняя версия стандарта ECMAScript 8, но самыми популярным на данный момент являются ES5 и ES6.

Пятая версия была выпущена в 2009 году, язык был серьезно улучшен по сравнении с третьей версией. Версия пять вышла сразу после третей, четвертая версия была пропущена так как разработчики поставили перед собой слишком грандиозные планы, многие из которых шли вразрез с концепцией языка. По этой причине было принято решение сразу перейти к разработке пятой версии.

В 2015 году вышла шестая ECMAScript, которую так же часто называют ECMAScript-2015. Язык получил множество нового функционала, в том числе встроенную модульную систему, которая позволяет разбивать код на небольшие компоненты, которые можно повторно использовать в различных программах и файлах.

ES6 имеет более удобный и компактный синтаксис чем пятая версия, но к сожалению на данный момент еще не имеет полную поддержку всех браузеров. То есть код написанный на ES6 не будет работать у пользователей со старыми браузерами, но стоит заметить что это ограничение возможно обойти.

Что такое JavaScript?

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

Необходимые навыки:	Базовая компьютерная грамотность, знание основ HTML и CSS.
Цели:	Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.

Определение высокого уровня

JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

— это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу. — это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид. язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.

Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

И наконец, добавим немного JavaScript для придания динамического поведения:

Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

JavaScript может делать намного больше — давайте выясним это более детально.

Так что же он действительно может делать?

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

Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной name .
Операции над фрагментами текстов (известными в программировании как «строки»). В примере выше мы брали строку «Player 1: » и присоединили её к значению переменной name для получения полного текста, например: »Player 1: Chris».
Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали click (en-US) событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
И многое другое!

Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

API — это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства — гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.

Они обычно делятся на две категории.

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:

API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples.
Аудио и видео API, такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)

Примечание: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей, для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

По умолчанию сторонние API-интерфейсы не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера:

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

Примечание: Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.

Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

Что JavaScript делает на вашей странице?

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

Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).

Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.

Безопасность браузера

Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются «средами исполнения») — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.

Примечание: Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.

Последовательность выполнения JavaScript

Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются «функции») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — TypeError: para is undefined . Это значит, что объект para ещё не существует и вы не можете добавить к нему обнаружение событий.

Примечание: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

Интерпретируемый против компилируемого кода

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

С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

Серверный против клиентского кода

Вы так же можете услышать термины серверный и клиентский код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о клиентском JavaScript.

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

Слово динамический используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

Как добавить JavaScript на вашу страницу?

JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы <link> для внешних стилей и <style> для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент <script> . Давайте узнаем, как это работает.

Внутренний JavaScript

Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.
Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head> :

Примечание: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как .html файл? Добавили ли ваш <script> элемент после тэга </body> ? Ввели ли вы JavaScript именно так, как показано? JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

Внешний JavaScript

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.

Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его script.js — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
Замените ваш текущий элемент <script> на следующий:

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

Инлайновые JavaScript обработчики

Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:

Вы можете попробовать эту версию в нашей демонстрации ниже:

Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент <button> содержит встроенный обработчик onclick , который запускает функцию при нажатии кнопки.

Но пожалуйста, не делайте этого. Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут onclick=»createParagraph()» к каждой кнопке, к которой вы хотите подключить JavaScript.

Использование чистой JavaScript конструкции, позволит вам выбрать все кнопки, используя одну команду. Код, который можно использовали для этой цели, выглядит следующим образом:

Это может выглядеть немного длиннее, чем атрибут onclick , но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.

Примечание: Попробуйте отредактировать вашу версию apply-javascript.html и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

Стратегии загрузки скриптов

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

Выводы

Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.

JavaScript может показаться немного пугающим в данным момент, но не переживайте — в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы погрузимся непосредственно в практику, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.

JavaScript

JavaScript — предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript — фирмой Netscape Communication Corporation. Первоначальное название — LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript — объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).

Тег <script>

Сценарий JavaScript встраивается в HTML-документ с помощью тега <script>.

Пример

Текст сценария оформляется как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа «/«, т.к. некоторые браузеры рассматривает строку, состоящую только из символов «—>«, как ошибочную.

В первом примере для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка «Привет!». Строка закрывается символом «;«, которым отделяются друг от друга все операторы JavaScript.

Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку «Привет!». При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.

Для указания что скрипт вынесен в отдельный файл используется следующий код:

Для ускорения загрузки страницы можно разрешить браузеру загружать скрипты паралельно с остальным кодом. Для указания паралельной неблокирующей загрузки скриптов используется атрибут async=»async» или defer=»defer» :

В обоих случаях скрипты, помеченные как async или defer, начинают незамедлительно скачиваться, не вызывая при этом остановок парсера, причем оба скрипта поддерживают onload обработчик, позволяющий вызвать те или иные события, когда скрипт будет загружен. Каждый скрипт, помеченный async, будет выполнен в тот момент, когда для это появится возможность после его полной загрузки, но до того как будет выброшено событие о загрузке window. Это означает, что такие скрипты скорее всего будут выполнены не в том порядке, в котором они указаны на странице. А вот наличие defer скриптов гарантирует, что как они указаны, так они и будут загружаться. Их выполнение начнется после завершения работы парсера, но до появления события DOMContentLoaded.

Будьте внимательны и осторожны при неблокирующей загрузке, т.к. использовать функции из такого js-файла можно только после полной загрузки DOM-модели и всех скриптов. Т.к. браузер, если это позволит сервер, будет кешировать загружаемые внешние файлы, то при первом вызове функции будут доступны только после полной загрузки, а при обновлении страницы, т.к. браузер возьмет файл из кеша — сразу. И отлавить такую ошибку будет непросто.

Можно сокращать написание:

Имейте в виду, что JavaScript различает строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript — через backgroundColor.

Пример

Цвет фона объекта меняется с белого на красный при наведении на объект мыши:

Переменные в JavaScript

Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript: abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanseof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, sinchronized, switch, this, throw, throws, transient, true, try, typeof, var, void, wich.

Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.

Числа.
Логические значения. Могут принимать значение true и false.
Строки. Последовательность символов, заключенная в одинарные или в двойные кавычки. Строка, ограниченная одинарными кавычками может содержать двойные кавычки, а строка, ограниченная двойными кавычками, может содержать одинарные кавычки.

Для определения типа переменной можно использовать typeof,

document.write — используется для вывода результата в текущей поток вывода браузера.

Для проверки существования переменной можно использовать одну из следующих конструкций:

В современном javascript лучше писать:

Использовать просто if(var) нельзя, так как доступ к неопределенной переменной вызовет ошибку. В некоторых источниках рекомендуют использовать if(window.var), но так проверять тоже нельзя, т.к. переменная может быть, но иметь значение false.

Число преобразуется в строку автоматически. Например:

В строку можно вставить специальные символы:

\’	Одинарная кавычка
\”	Двойная кавычка
\\	Обратная косая черта
\n	Переход на новую строку
\r	Возврат каретки
\t	Табуляция

Для преобразования строк в числа используют специальные функции parseInt и parseFloat.

Пример

Примеры использования простейших преобразований типов:

Конвертирование в даты (new Date(myVar)) и регулярные выражения (new RegExp(myVar)) нужно делать с использованием конструкторов. Для создания регулярных выражений используйте структуру: /регулярное_выражение/флаги .

Операторы языка JavaScript

Операторы JavaScript напоминают общеизвестные операторы языка С++.

Унарные операторы

—	Изменение знака на противоположный
!	Дополнение. Используется для реверсирования значения логических переменных
++	Увеличение значения переменной. Может применяться и как префикс, и как суффикс
—	Уменьшение значения переменной. Может применяться и как префикс, и как суффикс

Бинарные операторы

—	Вычитание
+	Сложение
*	Умножение
/	Деление
%	Остаток от деления

Операторы для работы с отдельными битами

Операторы сдвига

>>	Сдвиг вправо
<<	Сдвиг влево
>>>	Сдвиг вправо с заполнением освобождаемых разрядов нулями

Операторы отношения

>	Больше
>=	Больше или равно
<	Меньше
<=	Меньше или равно
==	Равно
!=	Не равно

В условных операторах также применяются логические операторы: || (ИЛИ) и && (И).

Оператор присваивания и его комбинации

Допускается комбинирование оператора присваивания с другими, как и в языке С.

=	Присваивание
+=	Сложение или слияние строк (n=n+7; аналог. n+=7;)
–=	Вычитание (n=n-7; аналог. n-=7;)
*=	Умножение
/=	Деление
>>=	Сдвиг вправо
<<=	Сдвиг влево
>>>=	Сдвиг вправо с заполнением освобождаемых разрядов нулями
&=	И
\|=	ИЛИ
^=	ИСКЛЮЧАЮЩЕЕ ИЛИ

Условные операторы

В языке JavaScript два условных оператора: if-else и ?:.

Пример оператора if-else

Пример «скрипт приветствия (по времени суток)»

Пример оператора ?:

Пример оператора switch — case:

Операторы цикла

В языке JavaScript три оператора цикла: for, for-in, while.

Пример оператора for

Пример оператора for-in

Пример использования оператора while, continue, break

Кроме этих операторов в организации цикла могут участвовать еще два оператора: break (выход из цикла) и continue (переход на следующий шаг).

Прочие операторы

.	Доступ к полю объекта. ( document.write(Buf); )
[ ]	Индексирование массива ( dim[i] )
( )	Изменение порядка вычислений или передача параметров функции
,	Разделение выражений в многократном вычислении

Пример оператора «запятая»

Неявное преобразование типов

Встроенные функции JavaScript

Функции JavaScript

Все функции JavaScript рекомендуется помещать в контейнер <HEAD>. </HEAD>. Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.

Пример

Объекты JavaScript

Язык JavaScript является объектно-ориентированным. Объекты JavaScript представляют собой наборы свойств и методов. Можно сказать, что свойства объектов — это данные, связанные с объектом, а методы — функции для обработки данных объекта.

В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.

JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.

Встроенный объект Array. Массивы в JavaScript

Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно следующими способами:

a1 — массив, в котором нет ни одного элемента.

a2 — массив из трех элементов с неопределенным (undefined) значением.

a3 — массив, заданный списком своих элементов.

Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:

Типы данных элементов массива в JavaScript могут быть различными:

Разумеется, необходимо предусмотреть корректную работу с массивом, содержащим элементы с разными типами данных.

Для создания многомерного массива каждому элементу массива нужно присвоить другой массив:

Так можно создать массив, состоящий из трех строк и трех столбцов.

Это все числовые массивы. Также существуют и ассоциативные массивы:

Свойства объекта Array

length. Число элементов массива.

Методы объекта Array

push( ). добавляюет значение с конца массива
pop( ). вынимает значение с конца массива
shift( ). добавляюет значение с начала массива
unshift ( ). вынимает значение с начала массива. shift/unshift обычно приводят к перенумерации всего массива. shift сдвигает все элементы на единицу влево, а unshift — вправо. Поэтому на больших массивах эти методы работают медленнее, чем push/pop.
concat( ). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b);
Здесь элементы массива b добавляются к элементам массива a . Чтобы преобразовать строку в массив используется метод split объекта String:
reverse( ). Меняет порядок элементов массива на обратный.
slice(begin[, end]). Возвращает подмассив с индексами begin…end. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
splice(index, deleteCount[, element1,…, elementN]) Удалить deleteCount элементов, начиная с index, и вставить на их место element1…elementN
sort( fn ). Сортирует массив. Если функция не передана, то все элементы сортируются как строки. Вместо 0,6,18,24,25, он сортирует 0,18,24,25,6. Для сотрировки числового массива используйте следущий вариант:
toString( ) — преобразует элементы массива в строку, используя в качестве символа-разделителя запятую.
indexOf(искомый_элемент, индекс), lastIndexOf(искомый_элемент, индекс) — возвращает индекс элемента, значение которого равно значению, переданному методу в качестве аргумента. Первый аргумент метода указывает значение элемента, индекс которого нужно найти, второй аргумент (необязательный), указывает индекс с которого будет начинаться поиск. Если одинаковых вхождений несколько, выбирается наименьший (первый) индекс. Если элемент с искомым значением не найден, метод вернет -1. Внутри метода для поиска используется строгое сравнение ( === ) lastIndexOf() — ищет с конца.
forEach(callback, thisArg) — callback-функция, которую метод forEach() будет вызывать для каждого элемента массива, должна иметь три параметра: первый параметр принимает в качестве аргумента — значение элемента массива, второй — индекс элемента, и третий — сам массив. Однако, если нужно использовать только значения элементов массива, можно написать функцию только с одним параметром. Второй аргумент — thisArg (необязательный) будет передан в качестве значения this
filter(callback, thisObject) — возвращает новый массив, который будет содержать только те элементы массива, для которых вызов функции callback возвратит true.
map(callback) — возвращает новый массив, который будет состоять из результатов вызова функции callback(item, idx, ar) для каждого элемента массива.
every(callback) — возвращает true, если для всех элементов массива указанная функция, используемая для их проверки, вернет true.
some(callback) — возвращает true, если во время проверки в указанной функции один или несколько элементов вернут true.
reduce(callback, initialValue), reduceRight(callback, initialValue) — применяет указанную функцию (callback) в отношении сразу двух значений в массиве, перебирая элементы слева направо, сохраняя при этом промежуточный результат. Аргументы функции callback: (previousValue, currentItem, index, array)
previousValue — возвращаемый результат callback функции (он же промежуточный результат)
currentItem — текущий элемент массива (элементы перебираются по очереди слева-направо)
index — индекс текущего элемента
array — обрабатываемый массив
initialValue (инициализирующее значение) — объект, используемый в качестве первого аргумента первого вызова функции callback. Проще говоря, значение previousValue при первом вызове равно initialValue. Если initialValue нет, то оно равно первому элементу массива, а перебор начинается со второго

delete — Удалить элемент ассоциативного массива,

Для обхода ассоциативного массива используется следующий цикл:

Встроенный объект Date

С помощью методов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта:

Методы объекта Date

getYear. Возвращает год:
var nYear = today.getYear();
getMonth. Возвращает номер месяца:
var nMonth = today.getMonth(); Имейте в виду, что январь — это 0, февраль — 1 и т.д.
getDate. Возвращает значение календарной даты в диапазоне от 1 до 31:
var nDate = today.getDate();
getDay. Возвращает номер дня недели (для воскресенья — 0, для понедельника — 1 и т.д.):
var nDay = today.getDay();
getHours. Возвращает количество часов, прошедших после полуночи:
var nHours = today.getHours();
getMinutes. Возвращает количество минут, прошедших с начала часа:
var nMinutes = today.getMinutes();
getSeconds. Возвращает количество секунд, прошедших с начала минуты:
var nSeconds = today.getSeconds();
getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.getTime();
getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах:
var nOffsetMillisec = today.getTimeZoneOffset();
parse. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода можно просто сослаться на имя класса Date , а создавать объект класса Date не надо:
var nMS = Date.parse(prm);
Параметр prm может принимать значения: локальные дата и время («21 Apr 2001 18:00:00»); дата и время по Гринвичу («21 Apr 2001 14:00:00 GMT»); дата и время по Гринвичу cо смещением («21 Apr 2001 18:00:00 GMT+0400») .
UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. Для вызова этого метода, так же как и метода parse можно просто сослаться на имя класса Date:
var nMSec = Date.UTC(year, month, date, hours, min, sec, ms);
Имейте в виду, что январь — это 0, февраль — 1 и т.д.
setYear. Устанавливает год в объекте класса Date:
today.setYear(nYear);
setMonth. Устанавливает номер месяца:
today.setMonth(nMonth);
setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31:
today.setDate(nDate);
setDay. Устанавливает номер дня недели (для воскресенья — 0, для понедельника — 1 и т.д.):
today.setDay(nDay);
setHours. Устанавливает количество часов, прошедших после полуночи:
today.setHours(nHours);
setMinutes. Устанавливает количество минут, прошедших с начала часа:
today.setMinutes(nMinutes);
setSeconds. Устанавливает количество секунд, прошедших с начала минуты:
today.setSeconds(nSeconds);
setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.setTime();
toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу:
«Sat, 21 Apr 2001 14:00:00 GMT»
toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени:
«04/16/2001 18:00:00» .

Объекты брaузера

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

Практически в любом сценарии JavaScript необходимы такие объекты, как окно — window и документ — document.

Свойства объекта window

name. Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM> .
self, window. Синонимы имени окна. Относятся к текущему окну.
top. Синоним имени окна. Относится к окну верхнего уровня.
parent. Синоним имени окна. Относится к окну, содержащему набор фреймов.
frames. Массив всех фреймов данного окна.
length. Количество фреймов в родительском окне.
status. Текущее сообщение, отображаемое в строке состояния окна брaузера.

Методы объекта window

alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели.

Пример

confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false .

Пример

prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null . Метод имеет два параметра. Первый — сообщение над полем ввода. Второй (необязательный) — начальное значение строки ввода.

Пример

open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна.

Пример

close. Закрытие созданного или основного окна:
newWindow.close();
Текущее окно брaузера можно закрыть одним из следующих способов:
window.close(); self.close();
setTimeout. Установка таймера. Применяется для ограничения времени ввода пароля, создания бегущих строк и всевозможных анимационных эффектов. Метод имеет два параметра. Первый задает выражение JavaScript, которое запускается по прошествии времени, указанного вторым параметром в миллисекундах. Заданное выражение запускается один раз.

Пример

clearTimeout. Сброс таймера. Для останова таймера метод setTimeout нужно вызвать с возвратом идентификатора, т.е.
idTimer=setTimeout(«change()», 2000);
а затем этот идентификатор передать методу clearTimeout в качестве параметра:
clearTimeout(idTimer);

setInterval(prm1,prm2). Установка периодического таймера. Метод имеет два параметра. задает выражение JavaScript, которое периодически запускается по прошествии времени, указанного вторым параметром в миллисекундах.
clearInterval(prm). Сброс таймера, установленного методом setInterval. Для сброса таймера метод setInterval нужно вызвать с возвратом идентификатора, т.е. idTimer=setInterval(”change()”, 2000); а затем этот идентификатор передать методу clearTimeout в качестве параметра: clearInterval(idTimer);

Пример

blur( ). При вызове метода окно теряет фокус.

focus( ). При вызове метода окно получает фокус.

MoveTo(x,y). Перемещает окно в точку с координатами.
MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз.

ResizeTo(x,y). Изменяет размер окна на указанные.
ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей.

print( ). Печать документа. Вызывает окно выбора параметров печати.

scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,y становится левой верхней точкой окна.
ScrollBy(x,y). Прокручивает окно на x,y пикселей.

stop( ). Прекращает загрузку документа в окно браузера.

Свойства объекта document

URL. Полный URL документа.
location. Полный URL документа.
referrer. URL вызывающего документа.
title. Заголовок документа, определенный тегом <TITLE> .
bgColor. Цвет фона документа.
fgColor. Цвет текста.
linkColor. Цвет cсылок.
alinkColor. Цвет выбранных cсылок.
vlinkColor. Цвет посещенных cсылок.
links. Массив всех cсылок в документе.
anchors. Массив локальных меток. Применяется для организации ссылок внутри документа.
applets. Массив аплетов Java.
forms. Массив форм в виде объектов.
images. Массив растровых изображений.
embeds. Массив объектов plug-in.
lastModified. Дата последнего изменения документа.
cookie. Значение cookie для текущего документа.

Пример

Объект document может содержать в себе другие объекты, доступные как свойства:

anchor. Локальная метка, определенная тегом <A> .
form. Форма, определенная тегом <FORM> .
history. Список посещенных URL.
link. Текст или изображение, играющие роль гипертекстовой ссылки, созданной тегом <A> , в котором дополнительно заданы обработчики событий onClick и onMouseOver .

Методы объекта document

сlear. Удаление содержимого документа из окна просмотра.
write. Запись в документ произвольной HTML-конструкции.
writeln. Аналогичен write, но с добавлением символа перевода строки в конец строки.
open. Открытие выходного потока для записи в HTML-документ данных типа MIME при помощи методов write и writeln.
close. Закрытие потока данных, открытого методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.
getElementById(a) Получить объект по его ID
getElementsByTagName(tag) Получить массив объектов по имени тега

Ссылки в документе

Для каждой ссылки, размещенной в HTML-документе, создается отдельный объект. Все такие объекты находятся в объекте document как элементы массива links . Анализируя эти элементы, сценарий JavaScript может определить свойства каждой ссылки в HTML-документе:

length. Количество ссылок в HTML-документе, т.е. количество элементов в массиве links .
hash. Имя локальной ссылки, если она определена в URL.
host. Имя узла и порт, указанные в URL.
hostname. Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP.
href. Полный URL.
pathname. Путь к объекту, указанный в URL.
port. Номер порта, использумого для передачи данных с сервером, указанным в ссылке.
protocol. Строка названия протокола передачи данных (включающая символ «двоеточие»), указанного в ссылке.
search. Строка запроса, указанная в URL после символа «?».
target. Имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного тегом <FRAMESET> , или одно из зарезервированных имен — _top, _parent, _self, _blank.

Пример

Объект navigator

Информация о текущем браузере пользователя. Позволяет динамически подстроить отображение страницы в зависимости от браузера. Например, для мобильного телефона увеличить шрифт и перераспределить блоки с информацией.

Изменение содержимого страницы

Одной из часто встречающихся при разработке веб-приложений задач, является возможность добавления или удаления элементов страницы. Свойство innerHTML для любого элемента веб-страницы возвращает строку, содержащую HTML-код, заключенный между открывающим и закрывающим тегами элемента. Свойство outerHTML — аналогичное свойству innerHTML, но содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента. innerHTML может использоваться для замены содержимого элемента после формирования страницы в отличие от document.write:

Аналогично можно изменять содержимое страницы используя DOM-модель html-документа:

appendChild — добавляет детёныша внутрь объекта
createTextNode — создает текстовый элемент
createElement — создает тег

Cookie

Cookie — это свойство HTML-документа. Представляет собой набор строковых параметров, каждый из которых имеет имя и значение. Сценарий JavaScript может создавать cookie для HTML-документа, определяя в нем произвольное количество параметров и задавая для них произвольные значения. После создания такой набор параметров становится принадлежностью данного конкретного HTML-документа и может быть проанализирован, изменен или удален сценарием JavaScript.

Создание cookie

В сценарии JavaScript cookie создается с помощью свойства document.cookie. Пары имя-значение не могут содержать пробелов, запятых и точек с запятыми. Поэтому все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript имеет две функции, обрабатывающие escape-последовательности: encodeURIComponent и decodeURIComponent.

Пара имя-значение является единственным необходимым параметром при создании cookie. Указание только пары имя-значение создает cookie, который сохраняется только на протяжении текущего сеанса брaузера. При создании cookie можно задать дату его автоматического удаления. В этой паре надо указать имя expires и значение в стандартном формате времени по Гринвичу (GMT). Простейшим способом преобразования в формат GMT является использование одного из методов встроенного класса Date: toGMTString. Кроме этого, создавая cookie, можно указать также путь (path), домен (domain) и информацию безопасности(secure). Извлечь эту информацию нельзя.

Удаление cookie

Самый простой способ удаления cookie — установить для него такое время автоматического удаления, которое уже прошло.

Практическое применение cookie

Индивидуальная настройки параметров Web-страниц.
Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ.
Хранение текущего состояния сетевой игры.

Пример

Данные cookie позволяют собирать определенную статистическую информацию о посетителе, поэтому некоторые пользователи могут настраивать брaузеры на ограничение или полное отключение возможности работы с cookie.

Перехват и обработка событий

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

Новая схема перехвата и обработки событий:

Вызов метода addEventListener() со строкой «click» в первом аргументе никак не влияет на значение свойства onclick. Во фрагменте, приведенном выше, щелчок на кнопке приведет к выводу двух диалоговых окон alert(). Но важнее то, что метод addEventListener() можно вызвать несколько раз и зарегистрировать с его помощью несколько функций-обработчиков для одного и того же типа события в том же самом объекте. При появлении события в объекте будут вызваны все обработчики, зарегистрированные для этого типа события, в порядке их регистрации.

Многократный вызов метода addEventListener() для одного и того же объекта с теми же самыми аргументами не дает никакого эффекта — функция-обработчик регистрируется только один раз и повторные вызовы не влияют на порядок вызова обработчиков.

Парным к методу addEventListener() является метод removeEventListener(), который принимает те же три аргумента, но не добавляет, а удаляет функцию-обработчик из объекта. Это часто бывает удобно, когда необходимо зарегистрировать временный обработчик события, а затем удалить его в какой-то момент.

Internet Explorer версии ниже IE9 не поддерживает методы addEventListener() и removeEventListener()

При вызове обработчика событий ему передается объект события в виде единственного аргумента. Свойства объекта события содержат дополнительную информацию о событии. Свойство type, например, определяет тип возникшего события. В IE версии 8 и ниже обработчикам событий, зарегистрированным установкой свойства, объект события при вызове не передается. Вместо этого объект события сохраняется в глобальной переменной window.event. Для переносимости обработчики событий можно оформлять, как показано ниже, чтобы они использовали переменную window.event при вызове без аргумента:

Объект события передается обработчикам событий, зарегистрированным с помощью метода attachEvent(), но они также могут использовать переменную window.event

Для отмены возникшего события и прекращения его всплытия используйте:

Введение в JavaScript

Давайте посмотрим, что такого особенного в JavaScript, чего можно достичь с его помощью и какие другие технологии хорошо с ним работают.

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Это отличает JavaScript от другого языка – Java.

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

…Ещё есть «Chakra» для IE, «JavaScriptCore», «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome, Opera и Edge.

Движки сложны. Но основы понять легко.

Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
Затем он преобразует («компилирует») скрипт в машинный язык.
После этого машинный код запускается и работает достаточно быстро.

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

Что может JavaScript в браузере?

Современный JavaScript – это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого.

Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д.

В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
Запоминать данные на стороне клиента («local storage»).

Чего НЕ может JavaScript в браузере?

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

Примеры таких ограничений включают в себя:

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

Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега <input> .

Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.

Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта).

Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными.

Это ограничение необходимо, опять же, для безопасности пользователя. Страница https://anysite.com , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL https://gmail.com и воровать информацию оттуда.

JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.

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

Что делает JavaScript особенным?

Как минимум, три сильные стороны JavaScript:

Полная интеграция с HTML/CSS.
Простые вещи делаются просто.
Поддерживается всеми основными браузерами и включён по умолчанию.

JavaScript – это единственная браузерная технология, сочетающая в себе все эти три вещи.

Вот что делает JavaScript особенным. Вот почему это самый распространённый инструмент для создания интерфейсов в браузере.

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

Языки «над» JavaScript

Синтаксис JavaScript подходит не под все нужды. Разные люди хотят иметь разные возможности.

Это естественно, потому что проекты разные и требования к ним тоже разные.

Так, в последнее время появилось много новых языков, которые транспилируются (конвертируются) в JavaScript, прежде чем запустятся в браузере.

Современные инструменты делают транспиляцию очень быстрой и прозрачной, фактически позволяя разработчикам писать код на другом языке, автоматически преобразуя его в JavaScript «под капотом».

Примеры таких языков:

добавляет «синтаксический сахар» для JavaScript. Он вводит более короткий синтаксис, который позволяет писать чистый и лаконичный код. Обычно такое нравится Ruby-программистам. концентрируется на добавлении «строгой типизации» для упрощения разработки и поддержки больших и сложных систем. Разработан Microsoft. тоже добавляет типизацию, но иначе. Разработан Facebook. стоит особняком, потому что имеет собственный движок, работающий вне браузера (например, в мобильных приложениях). Первоначально был предложен Google, как замена JavaScript, но на данный момент необходима его транспиляция для запуска так же, как для вышеперечисленных языков. транспилирует Python в JavaScript, что позволяет писать приложения на чистом Python без JavaScript.

Есть и другие. Но даже если мы используем один из этих языков, мы должны знать JavaScript, чтобы действительно понимать, что мы делаем.