§ 22. Основы языка JavaScript
22.1. Общие сведения
JavaScript (JS) — высокоуровневый, мультипарадигменный язык программирования. То есть, JS поддерживает как объектно-ориентированное программирование, так и функциональное программирование. Состоит JavaScript из трёх частей: 1. Ядро (ECMAScript) — базовая функциональность JavaScript. 2. Объектная модель документа (Document Object Model, DOM) — средства для работы с содержимым веб-страниц. 3. Объектная модель браузера (Browser Object Model, BOM) — средства для взаимодействия с браузером. Сценарии JavaScript позволяют:
Скрипт может быть вставлен в любое место 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() позволяет вывести какой-либо текст в диалоговом окне браузера):
2) Диалоговое окно: 3) Веб-страница после подтверждения действия в диалоговом окне: Пример 22.2. Подключение js-файла.
Пример 22.3. Использование тега <script> и атрибута src. Содержимое тега игнорируется при одновременном использовании тега и атрибута:
Можно разделить на два тега:
Если скрипт находится в отдельном js-файле, браузер загрузит скрипт отдельно и сможет хранить его в кэше (специальном месте на жестком диске компьютера, куда сохраняются ранее посещенные страницы). При этом файл будет загружаться с сервера только один раз, что экономит трафик и ускоряет загрузку страниц. Пример 22.4. Ввод-вывод данных в диалоговые окна.
1) alert() 2) prompt() 3) confirm() Пример 22.5. Использование консоли разработчика Google Chrome. Порядок работы: 1) Открыть веб-страницу в браузере. 2) Нажать клавишу F12. Откроется вкладка: 3) В консоли сообщение об ошибке выделяется красным цветом (в нашем примере это «Ошибка_здесь») и указывается номер строки кода с ошибкой. Под сообщением об ошибке находится символ . Он обозначает командную строку, в которой можно редактировать и запускать инструкции JavaScript. Для их запуска нужно нажать Enter, а для перехода на новую строку — Shift + Enter. |