HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 12

Первый сценарий на JavaScript

 

 

12.1. Организация рабочего окружения

12.2. Внедрение сценариев в HTML-документ

12.3. Вводим первый сценарий

12.4. Разбор нашего сценария в среде FrontPage

12.5. Отладка сценария в Microsoft Script Editor

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

 

12.1. Организация рабочего окружения

 

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

 

Текстовые редакторы

Для работы над сценариями подойдет практически любой текстовый редактор, позволяющий создавать обычные текстовые файлы и сохранять их в формате HTM или HTML. Например, в операционной системе Windows в числе стандартных есть два подходящих текстовых редактора – это Блокнот и WordPad. Отдельно стоит отметить редактор Microsoft Word из пакета Microsoft Office – он никак не подойдет для создания сценариев. По умолчанию данный редактор сохраняет свои файлы в двоичном виде, которые ничего общего с веб-страницами не имеют. Хотя можно сохранять его файлы и как веб-страницы, он не позволяет напрямую работать с кодом страниц, а значит, вы не сможете создавать в нем сценарии.

Существуют редакторы, специально разработанные для создания веб-страниц, например Microsoft FrontPage или Adobe Dreamweaver (ранее известный как Macromedia Dreamweaver). Такие редакторы позволяют создавать веб-страницы с помощью визуальных инструментов, а затем уже переключаться в режим отображения кода и вносить какие-либо нестандартные изменения, например добавлять сценарии. Если же создавать с их помощью обычные веб-страницы сможет даже пользователь, не владеющий языком разметки HTML, то вносить изменения в режиме работы с кодом сможет только человек, хотя бы немного знакомый с этим языком. По этой причине пользователям, еще только начинающим разбираться с HTML, следует применять данные редакторы лишь в режиме работы с кодом, чтобы полностью контролировать ход создания веб-страниц. По сравнению с обычными текстовыми редакторами в Microsoft FrontPage или Adobe Dreamweaver синтаксис языков HTML и JavaScript подсвечивается. Таким образом, в них будет удобно работать над сценариями.

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

 

Браузеры

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

В основном веб-разработчикам приходится считаться с особенностями браузера Internet Explorer, который не слишком стремится к стандартам. Поэтому обязательно тестируйте свои веб-страницы на данном браузере, присутствующем в каждой версии операционной системы Windows. Большой популярностью также пользуются браузеры Mozilla Firefox и Opera, которые стремятся максимально соответствовать стандартам. Вообще можно встретить и другие браузеры, например Konqueror у пользователей операционной системы Linux или Safari у пользователей операционной системы Mac OS. Что касается браузеров от независимых производителей, то они стараются строго соответствовать стандартам, избегая фирменных возможностей браузеров компаний Microsoft и Netscape. Можно прийти к выводу, что для проверки работоспособности своих сценариев будет вполне достаточно трех браузеров: Internet Explorer, Mozilla Firefox и Opera. Причем первый из перечисленных браузеров есть у всех пользователей операционной системы Windows, а следующие два можно без проблем загрузить из Интернета. Браузер Mozilla Firefox можно загрузить с сайта , а Opera – с сайта . Кроме того, не все пользователи работают с последними версиями браузеров, поэтому для максимального охвата интернет-аудитории может потребоваться тестирование документов на младших версиях указанных браузеров.

 

Отладчики сценариев JavaScript

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

Стоит отметить, что для программистов на таких языках, как, например, C++ или Java, отладчики стали таким же обычным и привычным инструментом, как, например, текстовый редактор. А вот для разработки сценариев на JavaScript отладчики применялись не всегда ввиду того, что сценарии, как правило, имели небольшой размер и малую сложность и поэтому могли быть проверены и вручную. Однако в настоящее время сценарии на JavaScript, особенно с использованием технологии AJAX, уже не уступают по объему кода и сложности программам, написанным на таких языках, как C++ или Java. Поэтому все чаще и чаще при разработке сценариев на JavaScript применяют отладчики. Кроме того, если вы в дальнейшем при разработке своих сценариев на JavaScript столкнетесь с какой-либо ошибкой или неправильной работой сценария, умение пользоваться отладчиком сэкономит вам немало времени и труда.

Существует немало отладчиков для сценариев на JavaScript. Например, Microsoft Script Debugger, бесплатно распространяющийся отладчик от компании Microsoft, который можно загрузить по адресу , имеет все необходимое для успешной отладки сценариев на JavaScript. При отладке сценариев Microsoft Script Debugger применяется совместно с браузером Internet Explorer. Кроме того, данный отладчик распространяется вместе с редактором Microsoft FrontPage в рамках программы Microsoft Script Editor, которая практически не отличается от Microsoft Script Debugger.

Существуют и другие отладчики (например, для браузера Mozilla Firefox), созданные в виде расширений. В частности, отладчик Firebug можно загрузить с сайта . Причем если перейти на данную страницу в браузере Mozilla Firefox, то отладчик сразу же будет установлен.

 

12.2. Внедрение сценариев в HTML-документ

 

В данном разделе будут рассмотрены вопросы, касающиеся встраивания сценариев в веб-страницы, поэтому предполагается, что вы хотя бы немного знакомы с языком разметки HTML. Обычно сценарии внедряются в HTML-документ тремя стандартными способами:

• в виде гиперссылки;

• в виде обработчика события;

• в рамках элемента SCRIPT.

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

 

Встраивание сценариев в гиперссылку

Как известно, для создания на веб-страницах гиперссылок применяется элемент A, у которого есть атрибут href для указания адреса страницы или файла, куда приведет гиперссылка. Однако вместо адреса данный атрибут может содержать и JavaScript-сценарий, если перед сценарием поставить слово javascript: (со знаком:). Рассмотрим пример такой гиперссылки:

Нажмите сюда

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

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

Интерпретатор исполняет этот код, в результате чего на экране появляется окно (рис. 12.1).

Рис. 12.1. После перехода по гиперссылке появляется окно

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

 

Встраивание сценариев для обработки событий

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

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

Это простой текст

Элемент P просто объединяет текст в параграфы, однако мы возложили на него еще одну функцию. Определив атрибут onclick, наш текст будет реагировать на щелчок кнопкой мыши (рис. 12.2).

Рис. 12.2. После щелчка кнопкой мыши на тексте появляется сообщение

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

 

Встраивание сценариев в рамках элемента SCRIPT

Кроме возможности обработки событий, для внедрения сценариев в веб-страницы в языке разметки HTML есть специальный элемент SCRIPT. Браузер, встретив тег , как сценарий на каком-либо языке. Для указания языка сценария используется атрибут type.

Например, для указания языка JavaScript:

При использовании сценариев JavaScript можно этот атрибут не указывать, так как значение «text/javascript» является значением по умолчанию.

Кроме того, иногда для указания типа языка используют атрибут language. Так, для указания языка JavaScript 1.0 значение атрибута language должно быть «JavaScript», для JavaScript 1.1 – "JavaScript1. 1", для JavaScript 1.2 – "JavaScript1.2" и т. д. Однако данный атрибут не входит в стандарт, определяющий язык HTML, хотя и распознается большинством браузеров. По этой причине его не рекомендуется употреблять. Стоит заметить, что если значение атрибута language незнакомо браузеру, то содержимое элемента SCRIPT игнорируется.

Если пользователь работает в старой версии браузера, которая не поддерживает JavaScript, то элемент SCRIPT может оказаться неизвестным программе и код сценария будет выведен на экран как обычный текст. Таким образом, необходимо обеспечить маскировку кода сценариев от старых браузеров. Для этого код сценария внутри элемента SCRIPT окружают комментариями языка HTML ():

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

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

Комментарии // и

Комментарии могут быть и многостроковыми, что облегчает отладку сценария и позволяет закомментировать проблемный участок кода. Для этой цели используются наборы символов /* и */.

Что же делать с браузерами, которые не поддерживают сценарии или такая возможность в них просто отключена? В таких случаях необходимо либо предупредить пользователя, что для просмотра требуется поддержка сценариев, либо заменить код каким-либо вариантом без сценариев. Для этого в языке HTML есть элемент NOSCRIPT, чье содержимое будет использовано при отсутствии поддержки сценариев. Например:

Ваш браузер не поддерживает сценариев JavaScript или их поддержка отключена

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

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

Ваш браузер не поддерживает сценарии или их поддержка отключена

...

...

Элемент страницы, события которого обрабатываются

...

Таким образом, в HTML-документы внедряется код сценариев на JavaScript. Как видите, все довольно просто. Чтобы убедиться в этом, попробуйте создать свой первый сценарий.

 

12.3. Вводим первый сценарий

Классическим примером в начале изучения любого языка программирования является программа, выводящая сообщение Привет, мир!!!. Вот и мы создадим на JavaScript сценарий, который будет выводить такое сообщение. Чтобы проиллюстрировать возможности отладчика Microsoft Script Debugger, немного усложним пример и выведем не одно сообщение Привет, мир!!! а несколько. Кроме того, в процессе разбора сценария вы увидите, что очень просто изменить количество сообщений, выводимых в документе. Для примера работы в отладчике вмешаемся в ход выполнения сценария, изменив значение переменной-счетчика.

Теперь пора перейти к практике и создать, наконец, первый сценарий. Прежде стоит повторить, что язык JavaScript чувствителен к регистру символов. Это означает, что вам следует внимательно следить за тем, какими буквами вы набираете код сценария. Ведь, например, слова if и If в языке JavaScript – это абсолютно разные слова. Более подробно об этом вы узнаете в следующих главах, а пока достаточно правильно переписать сценарий из листинга 12.2.

1. Запустите текстовый редактор, в котором вы собираетесь создавать свои вебстраницы.

2. Создайте новый текстовый файл.

3. Введите текст вашего первого сценария из листинга 12.2.

Листинг 12.2. Первый сценарий

Наш первый сценарий

4. Сохраните файл, например, с именем script1.html.

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

Итак, если вы ввели все строки без ошибок, как в листинге 12.2, то на экране вашего браузера появится десять сообщений Привет, мир!!! (рис. 12.3).

Рис. 12.3. Первый сценарий, открытый в браузере

При разработке сценариев обычно одновременно открыт и текстовый редактор, в котором создается веб-страница, и несколько браузеров, в которых проверяется работоспособность создаваемой веб-страницы. Таким образом, после внесения и сохранения каких-либо изменений в сценарий достаточно перейти в окно браузера и нажать кнопку Обновить.

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

 

12.4. Разбор нашего сценария в среде FrontPage

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

Для разработки сценариев в редакторе FrontPage необходимо переключиться в режим Код (рис. 12.4), который позволит не использовать визуальные инструменты, а работать с кодом страницы напрямую.

Рис. 12.4. Разработка сценариев в среде FrontPage

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

Возможно, вы уже догадались, что сообщение Привет, мир!!! выводит следующая строка:

document.write(«Привет, мир!!!»);

Как говорилось ранее, язык JavaScript является объектно-ориентированным, а значит, предполагается работа с объектами, в которых и реализованы почти все возможности языка. Поскольку нам необходимо вывести в документе приветствие, мы обратились к объекту document, в котором есть функция write() для вывода строк.

Чтобы приветствие выводилось несколько раз, используется оператор цикла for языка JavaScript, который вызывает функцию write() объекта document до тех пор, пока значение переменной i меньше десяти. Причем с каждым новым повтором значение переменной i увеличивается на единицу.

Таким образом, чтобы вывести, например, приветствие 20 раз, достаточно изменить всего одну цифру в следующей строке:

for (var i = 0; i < 10; i++)

В итоге получится строка:

for (var i = 0; i < 20; i++)

Теперь посмотрим, что получилось, просто перейдя в редакторе FrontPage в режим Просмотр (рис. 12.5).

Рис. 12.5. Просмотр работы сценария в среде FrontPage

 

12.5. Отладка сценария в Microsoft Script Editor

Отладчик Microsoft Script Editor распространяется с редактором Microsoft FrontPage, хотя может быть свободно загружен из Интернета. Данный отладчик применяется совместно с браузером Internet Explorer, а значит в браузере необходимо разрешить отладку.

1. Выберите команду меню Сервис → Свойства обозревателя. Появится окно Свойства обозревателя.

2. Выберите вкладку Дополнительно. Вы увидите список Параметры.

3. В этом списке снимите, если установлены, флажки Отключить отладку сценариев (Internet Explorer) и Отключить отладку сценариев (Другие).

4. Нажмите кнопку OK, чтобы сохранить изменения.

5. Перезапустите браузер.

Таким образом, в меню Вид должно появиться подменю Отладчик сценариев с двумя командами: Открыть и Прервать на следующей инструкции. Теперь приступим к отладке сценария.

1. Откройте в браузере страницу с первым сценарием (см. листинг 12.2).

2. Выберите команду меню Вид → Отладчик сценариев → Прервать на следующей инструкции.

3. Нажмите кнопку Обновить. Возможно, при этом откроется окно выбора одного из отладчиков Microsoft Script Editor и Microsoft Script Debugger. В этом случае выберите Microsoft Script Editor. Откроется главное окно отладчика Microsoft Script Editor (рис. 12.6).

Рис. 12.6. Окно отладчика

Обратите внимание, что интерпретирование страницы в браузере приостановилось на первой строке кода сценария, которая отмечена стрелкой. Таким образом, вы можете приступить к пошаговому выполнению сценария. Чтобы знать, на каком вы шаге, нужно контролировать значение переменной i.

1. Выберите команду меню Debug → QuickWatch (Отладка → Быстрый просмотр). Появится окно QuickWatch (Быстрый просмотр) (рис. 12.7).

Рис. 12.7. Окно QuickWatch (Быстрый просмотр)

2. Введите в поле Expression (Выражение) имя необходимой переменной, то есть i.

3. Нажмите кнопку Add Watch (Добавить просмотр). В окне отладчика появится панель Watch (Просмотр) со значениями переменной i (рис. 12.8).

Рис. 12.8. Переменная под контролем

4. Закройте окно QuickWatch (Быстрый просмотр).

Таким образом, вы можете узнать, какое это по счету повторение. Вы также можете изменить значение переменной.

1. Щелкните кнопкой мыши на значении переменной i на панели Watch (Просмотр).

2. Введите необходимое значение (в данном случае не больше 19, например 18).

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

1. Выберите команду меню Debug → Step into (Отладка → Сделать шаг).

2. Повторяйте первый шаг до тех пор, пока не появится окно браузера (рис. 12.9).

Рис. 12.9. Результат после изменения хода выполнения сценария

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

 

Резюме

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

Стоит сказать, что сейчас в большинстве веб-страниц применяются сценарии на JavaScript. Вы всегда можете посмотреть исходный код страниц и увидеть, как сценарии внедрены в HTML-документ и что вообще они из себя представляют. Кроме того, в Интернете существует немало сайтов, посвященных созданию сценариев. На них вы сможете узнать массу полезной информации, а также получить уже готовые сценарии, которые сразу же сможете применять на своих веб-страницах. Много ссылок на сайты, посвященные JavaScript, можно найти в таких каталогах, как «Яндекс» () или «Апорт» (), в разделах, посвященных языкам программирования. Язык JavaScript очень популярен, и с поиском необходимой информации проблем не возникнет.