2. Глава. Включение JavaScript в
HTML- документы.
Существуют следующие способы подключения JavaScript-
программ к HTML документу:
- Использование тега <SCRIPT>.
- Объявление JavaScript-файла, содержащего текст про- граммы.
- Определение JavaScript-выражения в качестве значения для
HTML-атрибутов.
- Объявление JavaScript-программы в качестве обработчика
событий.
2.1 Использование тега
SCRIPT.
Тег <SCRIPT> - расширение к HTML, который может
включать любое число JavaScript-операторов.
<SCRIPT> JavaScript операторы ...
</SCRIPT>
Документ может иметь любое количество тегов SCRIPT. В
теге SCRIPT можно определить версию браузера, для которого
предназначены операторы JavaScript:
<SCRIPT LANGUAGE= "JavaScript"> определяет
JavaScript для Navigator 2.0.
<SCRIPT LANGUAGE= "JavaScript1.1"> определяет
JavaScript для Navigator 3.0.
Операторы в пределах тега <SCRIPT>
игнорируются, если браузер пользователя не имеет уровня поддержки
JavaScript, указанного в признаке LANGUAGE. Если признак LANGUAGE
опущен, Navigator 2.0 принимает LANGUAGE="JavaScript". Navigator 3.0
предполагает LANGUAGE="JavaScript1.1". Поскольку появился VBScript
(альтернатива JavaScript, базирующаяся на Visual Basic, разработка
Microsoft) , то признак LANGUAGE становиться обязательным.
Можете использовать признак LANGUAGE, для написания
программ, которые содержат
особенности Navigator 3.0, и эти
программы не будут приводить к ошибкам, если пользоваться Navigator
2.0. Следующие примеры показывают некоторые методы ис- пользования
признака LANGUAGE.
Пример 1. Этот пример показывает, как определить
функции дважды, для JavaScript 1.0, и для JavaScript 1.1.
< SCRIPT LANGUAGE= "JavaScript" > // функции для JavaScript 1.0 </SCRIPT>
< SCRIPT LANGUAGE= "JavaScript1.1" > // те же функции,для JavaScript 1.1
// функции только для версии 1.1 </SCRIPT>
<FORM > <INPUT TYPE="button" onClick="doClick(this)"
...> . . . </FORM>
Пример 2. Этот пример показывает, как использовать
две отдельных версии JavaScript документа, для JavaScript 1.0 и для
JavaScript1.1. По умолчанию документ загружается для JavaScript 1.0.
Если пользователь имеет Navigator 3.0, то replace-метод заменит
страницу.
< SCRIPT LANGUAGE= "JavaScript1.1" > // Замена страницы при работе с версией 1.1
location.replace("js1.1/mypage.html" ) </SCRIPT>
[здесь продолжается страница с 1.0-совместимыми операторами ... ]
Пример 3. Этот пример показывает, как проверить
браузер с помощью navigator.userAgent, чтобы определить его версию.
<SCRIPT LANGUAGE="JavaScript"> if
(navigator.userAgent.indexOf("3.0")!= -1) jsVersion = "1.1" else
jsVersion = "1.0" </SCRIPT>
[ После этого, проверяете переменную jsVersion перед
использованием любых расширений для JavaScript 1.1]
2.1.1 Сокрытие программ в
пределах признаков комментария.
Только начиная с версии 2.0 Netscape Navigator
распознает JavaScript. Чтобы гарантировать, что другой браузер будет
игнорировать JavaScript, можно размещать SCRIPT-операторы в пре-
делах HTML-комментариев, как это показано ниже:
<SCRIPT>
<! - Здесь начинаются SCRIPT-операторы, которые нужно
скрыть от старого браузера.
JavaScript операторы ...
// здесь заканчивается сокрытие. - >
</SCRIPT>
Navigator должным образом интерпретирует признаки
SCRIPT и игнорирует строки в программе, начинающиеся двойным слешем
(//). В настоящее время большинство пользователей имеют браузеры,
интерпретирующие программы на JavaScript, но если вы не хотите
доставить неприятности для пользователей со старыми браузерами,
следует использовать эту технику. Примечание. Для простоты,
некоторые из примеров в этой книге не скрывают программ, то есть
написаны определенно для Navigator 2.0. Пример:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Скрываем текст от старых браузеров.
document.write ("I am from JavaScript!")
// Заканчиваем сокрытие -->
</SCRIPT>
<P>This is HTML-text.
</BODY>
Этот SCRIPT показывает в Navigator'е следующее:
I am from JavaScript!
This is HTML-text.
Заметим, что для клиента нет никакого различия в
появлении первой строки, произведенной с помощью JavaScript, и
второй строкой, выполненной с помощью HTML. Точка с запятой (;) в
конце оператора необходима только в том случае, если он является не
единственным на этой строке.
2.2 Определение файла для
JavaScript.
Признак SRC тега <SCRIPT> позволяет вам
определять файл как источник операторов JavaScript. Например:
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT SRC="myprog1.js">
...
</SCRIPT>
</HEAD>
<BODY>
...
Этот признак особенно полезен для разделения функций
при большом количестве страниц. JavaScript операторы в пределах тега
<SCRIPT> с признаком SRC игнорируются, если в файле нет
ошибок. Например, вы можете поместить следующий оператор между
<SCRIPT SRC="..." > и </ SCRIPT >:
document.write("Included JS file not found")
Этот оператор будет выполняться только в том случае,
если при загрузке файла произойдет какая-либо ошибка. Признак SRC
может определить любой URL, относительный или абсолютный. Например:
< SCRIPT SRC= "http://home.netscape.com/functions/jsfuncs.js ">
Внешние файлы JavaScript должны содержать только
JavaScript определения функций и операторы, в них не может быть
HTML-тегов. Внешние файлы JavaScript должны иметь расширение .js, и
сервер, на котором они располагаются должен быть специальным образом
настроен.
2.3 Использование
JavaScript-выражения как значения
HTML-атрибутов.
При использовании JavaScript можно определить
JavaScript- выражение как значение для тега HTML. Это позволяет
создавать более гибкие HTML-страницы, потому что признаки одного
HTML элемента могут зависеть от ранее размещенных на странице
элементов. Для включения в текст документов символов, имеющих
специальный смысл в языке HTML, стандарт языка предлагает
специальную конструкцию в вид последовательности из трех
объектов:
- символ & (амперсанд);
- числовой код или символьное имя;
- символ ; (точка с запятой).
Например, можно включить символ "больше" ( > ) с
помощью последовательности $GT; и "меньше" ( < ) с помощью $LT;.
Применение таких последовательностей связано с тем, что указанные
символы являются зарезервированными в языке HTML. JavaScript-объекты
также начинаются с символом & и заканчиваются точкой с
запятой(;). Вместо имени или номера используется
JavaScript-выражение, заключенное в фигурные скобки { }. Можно
использовать JavaScript-объекты только там, где употребимо значение
тега HTML. Например, пусть в документе определена средствами
JavaScript переменная barWidth, имеющая значение равное 50. Теперь
можно создать горизонтальную линию на половину окна следующим
образом:
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
Как и для других HTML-элементов, после того, как
расположение произошло, образ страницы может измениться, после ее
перезагрузки. Следующий пример определяет простую функцию в части
HEAD документа и вызывает ее в части BODY документа:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Скрываем от старых браузеров
function myfunc(number) { return number + number}
// Конец сокрытия -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("Two arguments is ", myfunc(7), ".")
</SCRIPT>
<P> OK !
</BODY>
Функция myfunc имеет один аргумент, названный number.
Состоит она из одного оператора return number+number, который должен
возвратить удвоенное значение аргумента функции. Вызывается функция
с аргументом 7. Результат, выводимый на экран выглядит следующим
образом:
Two arguments is 14.
OK !
В функции myfunc использовался оператор
document.write(...) для вывода результата в Navigator'е. Этот
оператор вызывает write-метод для объекта document в стандартной
нотации: objectName.methodName(arguments...) где objectName есть имя
объекта, methodName есть имя метода, и arguments есть список
аргументов метода, отделяемых запятыми.
2.3.1 Использование
write-метода.
С помощью write-метода можно выводить информацию в
окно навигатора, в общем-то так же, как и с помощью HTML-
операторов, но write-метод обладает большими возможностями, например
можно работать с переменными аргументами. По этим причинам, write -
один из наиболее часто используемых JavaScript-методов. write-метод
работает с любом числом строковых аргументов, которые могут быть
строковыми литералами или переменными. Можно также использовать
строковую конкатенацию - оператор ( + ), чтобы создать одну строку
из нескольких. Рассмотрим следующий пример, который производит
динамический HTML:
<HEAD> <SCRIPT>
<!--- Скрываем от старого браузера
// Эта функция выводит горизонтальную линию заданной ширины
function bar(widthPct) { document.write("<HR ALIGN='left'
WIDTH=" + widthPct + "%>")}
// Эта функция показывает заголовок указанного уровня и неко-
// торый текст
function output(headLevel, headText, text) {
document.write("<H", headLevel, ">", headText, "</H",
headLevel, "><P>", text)
}
// конец сокрытия-->
</SCRIPT> </HEAD>
<BODY>
<SCRIPT>
<!--- начало сокрытия
bar(25)
output(2,"Это заголовок 2-го уровня", "JavaScript это очень просто...")
// конец сокрытия -->
</SCRIPT>
<P> Это стандартный HTML, в отличие от предыдущей строки,
которая сгенерирована.
</BODY>
Раздел HEAD этого документа определяет две функции:
-bar - функция выводит горизонтальную линию заданной
ширины
-output - функция показывает заголовок указанного
уровня и не
