Сценарии JavaScript, выполняемые на Web-странице, могут располагаться не только между тэгами <script>. Во-первых, сценарий может храниться в отдельном файле и присоединяться к Web-странице с помощью HTML подобно тому, как хранящиеся в отдельных файлах изображения становятся элементами Web-страницы. Во-вторых, он может быть встроен в тэг <body> между прочими командами HTML. У обоих методов есть свои достоинства и недостатки. К концу данной главы вы получите четкое представление о том, когда и где лучше использовать эти приемы. Они достаточно просты, и вы их быстро освоите.
Давайте посмотрим, как можно присоединить сценарий JavaScript к Web-странице. Связь, связь и еще раз связь
Чтобы присоединить сценарий JavaScript, следует написать сценарий в отдельном файле и затем связать его с Web-страницей. Эта идея достаточно проста.
При этом необходимо соблюдать одно условие. Файл сценария JavaScript должен иметь расширение .JS. Кроме этого расширения возможны и другие, все же использовать рекомендуется только .JS.
Предупреждение Если какой-либо из присоединенных сценариев не будет работать, прежде чем искать в нем ошибки, проверьте, правильно ли указано имя файла. Часто случается, что файлу сценария дается одно имя, а присоединить к Web-странице пытаются файл с другим.
Пример. Каким бы простым или сложным не был ваш сценарий, присоединяться он будет одинаково. Рассмотрим следующий пример поэтапного создания сценария:
1. Откройте текстовый редактор (продолжаем пользоваться Windows Notepad) и напечатайте свой сценарий JavaScript (см. рис. 11.1). Вам не понадобится ни блок SCRIPT, ни тэги комментариев, ни что-либо другое.
Рис. 11.1. Простой сценарий JavaScript в текстовом редакторе
2. Сохраните файл под именем first.js в той же папке, где будет находиться HTML-страница.
3. Откройте шаблон HTML-страницы в текстовом редакторе. Вы увидите следующее:
5. Теперь присоедините файл сценария JavaScript с помощью атрибута src тэге script (подобно тому, как вы пользовались атрибутом src тэга img, чтобы помещать изображения на страницу). Укажите в атрибуте src файл .JS.
Сохраните оба файла и откройте HTML-страницу в браузере. После загруз ки страницы появится окно предупредительных сообщений, свидетельствующее, чтo ваш сценарий JavaScript выполнен (см. рис. 11.2).
Больше ничего не требуется. Нужно только запомнить некоторые моменты: печатайте сценарий в текстовом редакторе; в файле .JS не нужны тэги комментариев HTML; комментировать код можно обычным способом, с помощью // или / * и */; файл надо сохранять с расширением .JS; необходимо правильно указать имя файла в атрибуте src тэга <script>.
Рис. 11.2. Окно предупредительных сообщений, появляющееся на экране при выполнении сценария
Предупреждение Помните, что текстовые процессоры (такие как Microsoft Word и Lotus WordPro) не подходят для написания сценариев JavaScript. Применяемое в них форматирование может вызвать существенные проблемы. Чтобы избежать неприятностей, для создания HTML-файлов или файлов .JS пользуйтесь только простыми текстовыми редакторами.
Упражнение Возьмите какой-нибудь из предыдущих сценариев JavaScript и поместите его во внешний файл .JS. Отработайте процесс выделения сценария из HTML-страницы и сохранения его в новом документе. Сохраните файл с расширением .JS и присоедините его к Web-странице с помощью атрибута src в тэге <script>. Встроенный сценарий JavaScript
Встроенный (inline) сценарий JavaScript - это сценарий, помещенный непосредственно в HTML-тэги Web-страницы. Используемый здесь метод тоже очень прост, но выигрывая в простоте, вы теряете в результативности. Подобный способ подходит для простых случаев, более сложные сценарии предполагают применение другого метода.
Пример. Ниже приводится образец встроенного сценария JavaScript, вызывающего окно запроса:
Если щелкнуть мышью по текстовой строке, то появится окно запроса, показанное на рис. 11.3.
Заметьте, что весь сценарий содержится в теле страницы. Не нужно помещать его в блок SCRIPT - достаточно записать событие onclick в тэге <р>.
Рис. 11.3. Окно запроса, появляющееся в результате щелчка по тексту
Пример. Здесь приводится более сложный пример, в котором стоимость заказа определяется количеством заказанных товаров. Результат выполнения примера представлен на рис. 11.4.
<html> <head> <title>Простая страница</title> <script language="JavaScript"> <!-- Маскируемся! // Снимаем маскировку. --> </script> </head> <body> <p onclick="units = prompt('Сколько вы хотите?','Введите количество' ) ; alert ('Цена равна $9.99, следовательно, стоимость ' + units + ' единиц составляет $" + units * 9.99);">Щелкните здесь, чтобы указать количество</р> </body> </html>
Обратите внимание, что второй оператор в данном примере указан после точки с запятой в той же самой строке, а не отдельно, как раньше.
Как показывает предыдущий пример, вы можете легко применить на Web-странице небольшие по размеру сценарии JavaScript. Они добавляются в любое удобное для вас место. Использование тэга <head>
В каких случаях присоединять сценарии, а в каких встраивать их в HTML-тэги? Выбрать оптимальное решение всегда сложно. Существует пять простых правил, которые помогут вам: если у вас большой сценарий JavaScript, то забудьте о встроенных сценариях и пользуйтесь либо тэгом <head>, либо присоединенным файлом; если нужно добавить один и тот же сценарий JavaScript на несколько HTML-страниц, удобнее всего воспользоваться присоединенным файлом; если вы хотите добавить на страницу маленький сценарий в одну строку, то пользуйтесь встроенным сценарием; можно совместить все три способа. Сохраните в отдельных файлах и присоедините все те сценарии JavaScript, которые постоянно используются на разных страницах, прочие объемные сценарии помещайте в заголовок, а однострочные сценарии встраивайте; если сомневаетесь, то пользуйтесь тэгом <head>.
Рис. 11.4. Измененный сценарий JavaScript в действии
Рекомендоция Использование всех трех способов на одной странице поначалу может показаться слишком сложной задачей, но очень скоро вы с легкостью сможете это делать.
Упражнение Просмотрите сценарии, которые вы создавали в предыдущих гла -вах, и подумайте над тем, где какой способ лучше применить. Выясните, в каких случаях лучше пользоваться встроенными сценариями, какие сценарии удобнее присоединять в виде отдельных файлов и что можно оставить в тэге <head