HTML, XHTML и CSS на 100%
Шрифт:
<script type="text/javascript" src="lib1.js"></src>
Использование отдельных файлов под код сценариев позволит вам создавать, например, собственные библиотеки функций и объектов, при необходимости просто подключив к веб-странице файл библиотеки, не создавая каждую функцию заново. Расположение часто используемых функций в одном файле упростит и отладку, и дальнейшее совершенствование сценариев.
Стоит отметить, что обычно объявления всех глобальных переменных, функций, внешних файлов со сценариями помещают внутри
Таким образом, код веб-страницы со сценариями может выглядеть примерно так, как в листинге 12.1. В нем показаны фрагменты кода веб-страницы, касающиеся встраивания сценариев в HTML-документ.
<html>
<head>
<title>Страница со сценариями</title>
<!– Подключаем внешние файлы со сценариями –>
<script type="text/javascript" src="lib1.js"></src>
<!– Глобальные переменные, функции и объекты –>
<script type="text/javascript">
<!– Маскировка сценария
... // Код на 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.
<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, нет необходимости постоянно держать запущенными браузеры. Ведь чтобы просмотреть, что получилось, достаточно из режима Код перейти в режим Просмотр.