Расширение кругозора

 В этой главе писать новые сценарии не придется, но зато вы узнаете новые способы размещения сценария JavaScript. До сих пор все сценарии добавлялись в заголовок Web-страницы между тэгами <script>. Теперь предстоит выяснить, как можно обойти это ограничение. В данной главе будет рассказано:
  • о новых способах присоединения сценария JavaScript к Web-странице;
  • как создать файл . JS и присоединить его к Web-странице;
  • как писать встроенные сценарии;
  • о достоинствах и недостатках каждого метода.

Выход за пределы тэга <head>

Сценарии 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-страницы в текстовом редакторе. Вы увидите следующее:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
</script>
</head>
<body>
</body>
</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, вызывающего окно запроса:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript.">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
<p onclick="prompt('Сколько вы хотите?','Введите количество');">Щелкните здесь, чтобы указать количество</р>
</body>
</html>

Если щелкнуть мышью по текстовой строке, то появится окно запроса, показанное на рис. 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>.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz