Игорь Квинт - HTML, XHTML и CSS на 100%
... // Код на JavaScript
// Конец маскировки сценария –>
</script>
</head>
<body>
<noscript>
Ваш браузер не поддерживает сценарии или их поддержка отключена
</noscript>
... <!– Элементы страницы –>
<script type="text/javascript>
<!–
... // Тоже код на веб-странице
//–>
</script>
... <!– Элементы страницы –>
<p onclick="...">Элемент страницы, события которого обрабатываются
... <!– Элементы страницы –>
</body>
</html>
Таким образом, в HTML-документы внедряется код сценариев на JavaScript. Как видите, все довольно просто. Чтобы убедиться в этом, попробуйте создать свой первый сценарий.
12.3. Вводим первый сценарий
Классическим примером в начале изучения любого языка программирования является программа, выводящая сообщение Привет, мир!!!. Вот и мы создадим на JavaScript сценарий, который будет выводить такое сообщение. Чтобы проиллюстрировать возможности отладчика Microsoft Script Debugger, немного усложним пример и выведем не одно сообщение Привет, мир!!! а несколько. Кроме того, в процессе разбора сценария вы увидите, что очень просто изменить количество сообщений, выводимых в документе. Для примера работы в отладчике вмешаемся в ход выполнения сценария, изменив значение переменной-счетчика.
Теперь пора перейти к практике и создать, наконец, первый сценарий. Прежде стоит повторить, что язык JavaScript чувствителен к регистру символов. Это означает, что вам следует внимательно следить за тем, какими буквами вы набираете код сценария. Ведь, например, слова if и If в языке JavaScript – это абсолютно разные слова. Более подробно об этом вы узнаете в следующих главах, а пока достаточно правильно переписать сценарий из листинга 12.2.
1. Запустите текстовый редактор, в котором вы собираетесь создавать свои вебстраницы.
2. Создайте новый текстовый файл.
3. Введите текст вашего первого сценария из листинга 12.2.
Листинг 12.2. Первый сценарий<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Наш первый сценарий</title>
</head>
<body>
<script type="text/javascript">
<!–
for (var i = 0; i < 10; i++)
{
document.write("Привет, мир!!!");
}
//–>
</script>
</body>
</html>
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, можно найти в таких каталогах, как «Яндекс» (http://www.yandex.ru) или «Апорт» (http://www.aport.ru), в разделах, посвященных языкам программирования. Язык JavaScript очень популярен, и с поиском необходимой информации проблем не возникнет.
