§ 22. Основы языка JavaScript

22.1. Общие сведения

JavaScript (JS) — высокоуровневый, мультипарадигменный язык программирования. То есть, JS поддерживает как объектно-ориентированное программирование, так и функциональное программирование.

Состоит JavaScript из трёх частей:

1. Ядро (ECMAScript) — базовая функциональность JavaScript.

2. Объектная модель документа (Document Object Model, DOM) — средства для работы с содержимым веб-страниц.

3. Объектная модель браузера (Browser Object Model, BOM) — средства для взаимодействия с браузером.

Сценарии JavaScript позволяют:

  1. Добавлять html-код на страницу, изменять существующее содержимое, модифицировать стили.
  2. Создавать различные визуальные эффекты (слайдеры, галереи картинок, динамический текст и т. д.).
  3. Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатие клавиш.
  4. Выводить информацию в новых окнах.
  5. Задавать вопросы посетителю, показывать сообщения.
  6. Запоминать данные на стороне клиента.

Скрипт может быть вставлен в любое место html-документа с помощью тега <script> (пример 22.1).

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

Скрипт можно поместить в отдельный файл с расширением .js. Файл со скриптом может быть создан в любом редакторе кода, так же как html-файлы и css-файлы.

Как правило, только простейшие скрипты помещаются в html-документ. Более сложные выделяются в отдельные файлы. Файл скрипта можно подключить к html-документу с помощью атрибута src (пример 22.2).

В одном теге <script> нельзя использовать одновременно атрибут src и код внутри (пример 22.3).

Синтаксис JavaScript сходен с синтаксисом языка C++ . Так же как и в С++, код JavaScript содержит синтаксические конструкции и команды, которые соответствуют определенным действиям — инструкции. Разделяются инструкции точкой с запятой.

В JavaScript можно воспользоваться стандартными методами работы с диалоговыми окнами для ввода-вывода данных (пример 22.4):

1) alert() — позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK. Методу передается только одна строка. Чтобы отобразить многострочное сообщение, в месте разделения строки нужно добавить \n.

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

3) prompt() — выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Кроме кнопок OK и Отмена в окне есть текстовое поле для ввода данных. Метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле по умолчанию. Возвращает значение, введенное в текстовом поле, если выбрать OK. Если выбирается Отмена или окно закрывается иным образом, то возвращается null.

На время показа диалогового окна выполнение кода приостанавливается и возобновляется после его закрытия.

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

В примере 22.5 рассматривается использование инструментов разработчика одного из популярных браузеров.

Язык JavaScript вместе с HTML и CSS входит в базовый набор инструментов веб-разработчика. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента и обеспечивают интерактивность сайтов.

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

Примеры ограничений JavaScript:

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

Пример 22.1. JavaScript  в HTML-документе.

1) Размещение скрипта (метод alert() позволяет вывести какой-либо текст в диалоговом окне браузера):

<html>

 <body>

   <p>Начало...</p>

     <script>

       alert('Привет мир!')

     </script>

   <p>...Конец</p>

 </body>

 </html>

2) Диалоговое окно:

3) Веб-страница после подтверждения действия в диалоговом окне:

Пример 22.2. Подключение js-файла.

<script src = "/js/my.js">

 </script>

Пример 22.3. Использование тега <script> и атрибута src.

Содержимое тега игнорируется при одновременном использовании тега и атрибута:

<script src = "my.js">

    alert('Проверка');

 </script>

Можно разделить на два тега:

<script src = "my.js">

 </script>

 <script>

    alert('Проверка');

 </script>

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

При этом файл будет загружаться с сервера только один раз, что экономит трафик и ускоряет загрузку страниц.

Пример 22.4. Ввод-вывод данных в диалоговые окна.

<script>

  alert ('Начнем работу?')

  var rez =

  prompt('Ваше имя?', '_');

  var ans =

  confirm ('Ввод верен?');

</script>

1) alert()

2)  prompt()

3) confirm()

Пример 22.5. Использование консоли разработчика Google Chrome.

Порядок работы:

1) Открыть веб-страницу в браузере.

2) Нажать клавишу F12. Откроется вкладка:

3) В консоли сообщение об ошибке выделяется красным цветом (в нашем примере это «Ошибка_здесь») и указывается номер строки кода с ошибкой.

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