ОП.04 - 07 - Язык JavaScript

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

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

Краткая история создания

В 1992 году компания Nombas (впоследствии приобретённая Openwave) начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его. Главным отличием от Си была работа с памятью. В новом языке всё управление памятью осуществлялось автоматически: не было необходимости заранее определять память, объявлять типы переменных, осуществлять преобразование типов. В остальном языки сильно походили друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нём Си «отпугивало» людей. На основе этого языка был создан проприетарный продукт CEnvi. В конце ноября 1995 года Nombas разработала версию CEnvi, внедряемую в веб-страницы. Страницы, которые можно было изменять с помощью скриптового языка, получили название Espresso Pages — они демонстрировали использование скриптового языка для создания игры, проверки пользовательского ввода в формы и создания анимации. Espresso Pages позиционировались как демоверсия, призванная помочь представить, что случится, если в браузер будет внедрён язык Cmm. Работали они только в 16-битовом Netscape Navigator под управлением Windows.

Брендан Эйх

Самая первая реализация JavaScript была создана Бренданом Эйхом (англ. Brendan Eich) в компании Netscape, и с тех пор обновляется, чтобы соответствовать стандарту ECMA.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спецификация

Спецификация ECMA-262 содержит самую глубокую, детальную и формализованную информацию о JavaScript. Она определяет сам язык. Новая версия спецификации появляется каждый год.

Редакторы кода - IDE

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

IDE загружает проект (который может состоять из множества файлов), позволяет переключаться между файлами, предлагает автодополнение по коду всего проекта (а не только открытого файла), также она интегрирована с системой контроля версий (например, такой как git), средой для тестирования и другими инструментами на уровне всего проекта.

[!INFO]
Здесь и далее, для работы предполагается использование бесплатной IDE от компании Microsoft под названием Visual Studio Code.

Для Windows есть ещё Visual Studio (не путать с Visual Studio Code). Visual Studio — это платная мощная среда разработки, которая работает только на Windows. Она хорошо подходит для .NET платформы. У неё есть бесплатная версия, которая называется Visual Studio Community.

Кроме IDE, существуют также и «лёгкие» редакторы — менее мощные, чем IDE, но они отличаются скоростью, удобным интерфейсом и простотой. В основном их используют для того, чтобы быстро открыть и отредактировать нужный файл.

Главное отличие между «лёгким» редактором и IDE состоит в том, что IDE работает на уровне целого проекта, поэтому она загружает больше данных при запуске, анализирует структуру проекта, если это необходимо, и так далее. Если вы работаете только с одним файлом, то гораздо быстрее открыть его в «лёгком» редакторе.

[!TIP]
Обращаю внимание, что для установки Visual Studio Code на компьютер вам может понадобиться инструкция: Инструкция по установке VSCode

Написание и исполнение скриптов

[!WARNING]
Данный курс предполагает что студент знаком с основами HTML и CSS на базовом уровне. Если вы чувствуете, что это не так, прежде чем приступать к дальнейшему материалу, советую освежить или подтянуть свои знания используя один из бесплатных ресурсов (любой на ваш выбор, расположены по уровню сложности материала):

• Знакомство с HTML и CSS
• Основы современной верстки
• (New) Responsive Web Design

В рамках данного курса мы изучаем собственно JavaScript, сам язык.

Но нам нужна рабочая среда для запуска наших скриптов, и браузер будет хорошим выбором. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа node my.js. Для браузера всё немного иначе.

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега <script>.

Несколько примеров

Пример №1

example_01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример №1 - Скрипт внутри тега head</title>
  <script>
    alert( 'Привет, мир! Я сообщение из тега head!' );
  </script>
</head>
<body>
  <h1>Пример №1 - Скрипт внутри тега head</h1>

  <p>
    Это совершенно бессмысленный абзац текста, задача которого просто занять некоторое пространство на экране.
  </p>
  <p>
    А это еще один совершенно бессмысленный абзац текста, задача которого также просто занять некоторое пространство на экране.
  </p>

</body>
</html>

Пример №2

example_02.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример №2 - Скрипт в начале тега body</title>
</head>
<body>
  <script>
    alert( 'Привет, мир! Я сообщение из начала тега body!' );
  </script>

  <h1>Пример №2 - Скрипт в начале тега body</h1>

  <p>
    Это совершенно бессмысленный абзац текста, задача которого просто занять некоторое пространство на экране.
  </p>
  <p>
    А это еще один совершенно бессмысленный абзац текста, задача которого также просто занять некоторое пространство на экране.
  </p>

</body>
</html>

Пример №3

example_03.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример №3 - Скрипт в середине тега body</title>
</head>
<body>
  <h1>Пример №3 - Скрипт в середине тега body</h1>

  <p>
    Это совершенно бессмысленный абзац текста, задача которого просто занять некоторое пространство на экране.
  </p>

  <script>
    alert( 'Привет, мир! Я сообщение из середины тега body!' );
  </script>

  <p>
    А это еще один совершенно бессмысленный абзац текста, задача которого также просто занять некоторое пространство на экране.
  </p>

</body>
</html>

Пример №4

example_04.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример №4 - Скрипт в конце тега body</title>
</head>
<body>
  <h1>Пример №4 - Скрипт в конце тега body</h1>

  <p>
    Это совершенно бессмысленный абзац текста, задача которого просто занять некоторое пространство на экране.
  </p>
  <p>
    А это еще один совершенно бессмысленный абзац текста, задача которого также просто занять некоторое пространство на экране.
  </p>

  <script>
    alert( 'Привет, мир! Я сообщение из конца тега body!' );
  </script>

</body>
</html>

Пример №5

example_05.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример №5 - Скрипт в отдельном файле script.js</title>
</head>
<body>
  <h1>Пример №5 - Скрипт в отдельном файле script.js</h1>

  <p>
    Это совершенно бессмысленный абзац текста, задача которого просто занять некоторое пространство на экране.
  </p>
  <p>
    А это еще один совершенно бессмысленный абзац текста, задача которого также просто занять некоторое пространство на экране.
  </p>

  <script src="script.js"></script>
</body>
</html>

script.js

alert( 'Привет, мир! Я сообщение из файл script.js!' );

Что почитать по теме

• Статья на Википедии - JavaScript
• Современный учебник JavaScript - Введение в JavaScript
• Современный учебник JavaScript - Справочники и спецификации
• Современный учебник JavaScript - Редакторы кода
• Современный учебник JavaScript - Привет, мир!
• MDN (Mozilla) JavaScript Reference
• MSDN
• W3Schools - JavaScript Tutorial
• W3Schools - JavaScript Introduction
• W3Schools - JavaScript Where To