Введение в JavaScript. Программное взаимодействие с HTML документами на основе DOM API. Использование регулярных выражений. Отладка и профилирование JavaScript сценариев в IE9.

2. Диалоговые элементы

В JavaScript поддерживается работа со следующими диалоговыми элементами интерфейса:

alert("сообщение"); 

confirm("вопрос"); 

Синтаксис:

prompt("вопрос/запрос","значение по умолчанию"); 

Ниже приводится код веб-страницы, в которой пользователь имеет возможность выбрать цвет текста с помощью диалогового элемента

Пример 2

// здесь будет отображаться текст
Вы выбрали цвет текста: черный

3. Обработка событий в JavaScript

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

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

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

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

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

имя_обработчика="команды_обработчика"

Это выражение включается в тэг, описывающий объект, с которым связано событие.

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

Имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handleFocus(). В принципе, обработчиком может быть не только функция, но и любая последовательность команд JavaScript в виде составного оператора.

Следующий пример демонстрирует обработку события, связанного с наведением курсора мыши на гиперссылку:

http://www.myhp.edu">http://www.myhp.edu">
http://www.myhp.edu">http://www.myhp.edu
">
http://www.myhp.edu">http://www.myhp.edu">
http://www.myhp.edu">http://www.myhp.edu

" onmouseover="alert('An onMouseOver event'); return false">

Ниже приводится полный текст HTML документа c JavaScript сценарием, в котором обрабатывается событие нажатия кнопки мыши в области содержимого документа, и определяется, какая именно из них была нажата:

Пример 3.

Щелкните любой кнопкой мыши в любом месте документа

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

IE: Internet Explorer, F: Firefox, O: Opera, W3C: стандарт

4. Использование регулярных выражений в JavaScript

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

Следующий ниже код описывает RegExp объект с именем pttn, содержащий регулярное выражение, описывающее целое десятичное число:

var pattn = new RegExp("/[0-9]+/");

Объект RegExp имеет 3 встроенных метода: test(), exec() и compile().

var pattn = new RegExp("[0-9]+");document.write(pattn.test("38 попугаев"));

true

var pattn=new RegExp("[0-9]+");document.write(pattn.exec("38 попугаев"));

38

 var pattn = new RegExp("[0-9]+", "g"); do { result = pattn.exec("1 попугай, 2 попугая,…, 38 попугаев"); document.write(" " + result); } while (result != null)

1 2 38 null

var pattn = new RegExp("[0-5]+");document.write(pattn.exec("38 попугаев"));pattn.compile("[6-9]+");document.write(";" + pattn.exec("38 попугаев"));

3;8

Порядок выполнения работы.

Задание 1. Выполнение сценариев из примеров.

Используя Microsoft WebMatrix, подготовьте на основе примеров 1-4 соответствующие веб-страницы и просмотрите их с помощью веб-браузера IE9.

Задание 2. Отладка JavaScript сценариев с помощью инструментов разработчика в IE9.

Используя код из примера 3 создайте в WebMatrix веб-страницу mouse.html и загрузите ее в веб-браузере IE9.

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

Выберите закладку "Сценарий", затем установите точку останова в строке 16 (либо щелкните на номере строки, либо установить с помощью контекстного меню). (рис 8.2) Окно отладчика JavaScript-сценариев

Нажмите кнопку "Начать отладку".

Закройте окно инструментов разработчика и обновите веб-страницу в браузере ().

Щелкните любой кнопкой мышки на тексте в окне браузера. При этом должно появится следующее окно отладчика. (рис 8.3) Начало отладчики JavaScript-сценария

Отладчик автоматически остановится на заданной ранее точке останова.

В правом окне выберите просмотр "Cтека вызовов". При нажатии клавиши отладчик продолжит работу уже внутри функции-обработчика клика мыши.

Выберите просмотр "Локальные". Раскрыв дерево объекта Event, можно будет увидеть значение его атрибута button. (рис 8.4) Просмотр значений локальных переменных и объектов в отладчике JavaScript-сценария

Продолжите пошаговое выполнение сценария до конца.

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

В результате произойдет ошибка появится сообщение об ошибке, как показано на #image8.5.1. Нажмите "Да", после этого вы увидите окно отладчика (как на #image8.5.2).

console.log("Event.button = " + event.button)

В результате вы увидите значение Event.button в точке останова.

Консоль используется для записи в журнал событий вместо использования диалога window.alert(). Для разных типов сообщений можно использовать разные журналы, например:

С помощью контекстного меню консоли (правая кнопка мыши) можно очистить все сообщения или применить фильтр для отбора сообщений.

Задание 3. Отладка JavaScript сценариев с помощью инструментов разработчика в IE9.

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

По умолчанию данные отображаются в представлении функций, где перечисляются все использованные функции. В отчете профилировщика содержится URL-адрес и номер строки функции, чтобы было проще найти этот код в приложении. Можно сохранить данные профиля в формате CSV.

Задание 4. Отслеживание сетевого трафика с помощью инструментов разработчика в IE9.

Вкладка "Сеть" на верхней панели окна инструментов разработчика (F12) позволяет увидеть разработчику, какие ресурсы использует веб-страница, включая данные, которые отправлены клиентом и получены от сервера. Разработчики могут использовать эту информацию для ослеживания ошибок в ответах веб-сервера, а также для отладки AJAX-запросов, поскольку может возникнуть необходимость изучения данные, как отправленных, так и полученных от веб-сервера.

Чтобы найти вкладку "Сеть", запустите инструменты разработчика (F12) в IE9. Выберите вкладку "Сеть". (рис 8.8) Окно отслеживания сетевого трафика

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

Обновите страницу в окне веб-браузера для того, чтобы увидеть зарегистрированные сетевые запросы в сводном виде в динамике. (рис 8.9) Сбор сетевого трафика

Сводном виде отображается список запросов веб-страницы странице.

Запросы могут исходить от:

HTML и CSS документов

JavaScript сценариев

Динамическая настройка src-атрибутов

Объектов XmlHttpRequest и XDomainRequest

Расширений веб-браузера

Элементов управления ActiveX типа Flash

Панели BHO и Explorer

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

Контрольные задания.

Задание 1. Создание таблицы случайно выбранных цветов.

Взяв за основу сценарий построения таблицы умножения, постройте таблицу случайно выбранных цветов. Цвет ячейки таблицы задается с помощью атрибута bgcolor. Цвет ячейки описывается в рамках трехкомпонентной модели RGB, например: . Для генерации каждой компоненты можно использовать генератор случайных чисел с помощью методов объекта Math и преобразование в шестнадцатиричный формат:

color = Math.round(255.0*Math.random());r = color.toString(16);

Результирующий цвет образуется путем конкатенации компонентов:

color = r + g + b;

Примерный вид результата работы сценария:

Задание 2.

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

Задание 3.

С помощью профилировщика в наборе инструментов разработчика веб-браузера IE9 соберите статистику по функциям, используемым в сценарии, созданном в контрольном задании 1.