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 - функция показывает заголовок указанного
уровня и некоторый текст
Раздел BODY вызывает обе функции с фактическими
параметрами и результат вызова показан ниже.
Это стандартный HTML, в отличие от предыдущей
строки,которая сгенерирована.
Следующий оператор выводит линию заданной ширины:
Document.write ("<HR ALIGN='left' WIDTH=",
widthPct, "%>")
Замечание: здесь использованы одинарные кавычки
внутри двойных. Это нужно делать всякий раз, когда хотите указать
строку в кавычках внутри строкового литерала. Тогда вызов bar с
аргументом двадцать пять производит продукцию эквивалентную
следующему HTML:
< HR ALIGN= "left" WIDTH=25 % >
Имеется вариант write - writeln, который добавляет
перевод строки. Поскольку HTML вообще игнорирует перевод строки, то
нет разницы между write и writeln, кроме раздела .
2.4 Обработка событий в
JavaScript.
Приложения JavaScript в Navigator’е в значительной
степени управляются событиями. Например, нажатие кнопки мыши,
изменение области текста, перемещение мыши по ссылке и т.п.-
события. Можно определить события, на которые будет реагировать ваша
программа. Список событий, обрабатываемых в JavaScript приведен в
следующей таблице.
| Событие |
Применяется к |
Появляется когда |
Обработчик события |
|
abort
|
images
|
Пользователь прерывает загрузку изображения
|
onAbort
|
|
blur
|
windows, frames и все формы элементов
|
Пользователь убирает фокус ввода
|
onBlur
|
|
click
|
button, radio button, checkboxes, submit button, reset
button, links
|
Пользователь выбирает форму или ссылку
|
onClick
|
|
change
|
текстовые поля, текстовые области
|
Пользователь меняет значение элемента
|
onChange
|
|
error
|
images, windows
|
Ошибка загрузки документа или изображения
|
onError
|
|
focus
|
windows, frames, и все формы элементов
|
Пользователь передает фокус ввода
|
onFocus
|
|
load
|
тело документа
|
Пользователь загружает страницу в браузер
|
onLoad
|
|
mouseout
|
areas, links
|
Пользователь перемещает указатель мыши по области
|
onMouseout
|
|
mouseover
|
links
|
Пользователь очищает форму (нажимает клавищу Reset)
|
onMouseover
|
|
reset
|
forms
|
Пользователь выбирает область ввода элемента формы
|
onReset
|
|
select
|
текстовые поля, текстовые области
|
Пользователь указывает форму
|
onSelect
|
|
submit
|
submit button
|
Пользователь выбирает поле ввода элемента формы
|
onSubmit
|
|
unload
|
тело документа
|
Пользователь закрывает страницу
|
onUnload
|
Название программы-обработчика события обычно состоит
из названия самого события, которому предшествует “on”
Например, программа-обработчик получения фокуса ввода
называется onFocus. Чтобы создать программу-обработчик события для
HTML тега, нужно добавить обработчик события к тегу, указав в
двойных кавычках программу-обработчик. Аргументы программы
обработчика, если таковые имеются, задаются в круглых скобках.
Типовой синтаксис имеет вид:
<ТЕГ обработчик события="Имя программы-обработчика
(аргументы) ">
Предположим, что вы создали функцию JavaScript,
названную myobr. Можно заставить Navigator исполнять эту функцию,
когда пользователь нажмет на кнопку. Нажатие кнопки сопровождается
событием Click, обработчиком этого события является onClick, которой
соответствует программа compute
<INPUT TYPE="button" VALUE="Calculate"
onClick="myobr(this.form)">
Если хотите включить более чем один оператор для
обработки события, то их следует разделять точкой с запятой (;). В
предыдущем примере this.form относится к текущей форме. Ключевое
слово this относится к кнопке. OnClick-обработчик обращаетcя к
compute, с текущей формой как аргументом.
Выделение функций для обработки событий является
хорошим стилем, поскольку делает построение программы модульным,
позволяет использовать одну и ту же функцию с различными
аргументами, и делает программы более читабельными.
В следующем примере, можно ввести выражение
(например, 2+3 ) в первой области текстового ввода, и после нажатия
кнопки во второй текстовой области получить результат (например,
5).
<HEAD> <SCRIPT> <!--- Скрываем от старых браузеров
function compute(f) {
if (confirm("Are you sure?")) f.result.value=eval(f.expr.value)
else alert("Please come back again.") }
// конец сокрытия -->
</SCRIPT>
</HEAD>
<BODY>
<FORM> Введите выражение:
<INPUT TYPE="text" NAME="expr"SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate"
onClick="compute(this.form)">
<BR> Результат:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>
Navigator покажет следующее:
HEAD документа определяет единственную функцию,
compute, с одним аргументом f. Функция использует диалоговый бокс
для подтверждения ввода с кнопками OK и Cancel. Если пользователь
нажимает OK, подтверждая правильность ввода, вызывается встроенная
функция eval(f.expr.value). Если пользователь нажимает Cancel,
происходит выход из функции. Обратите внимание на использование
значения полей NAME в функции, эти имена входят составной частью в
имена переменных в функции.
2.4.1 Явный запрос
программ-обработчиков событий.
В JavaScript для Navigator 3.0, можно повторно
переопределить программу-обработчик события, как это показано ниже:
<SCRIPT LANGUAGE="JavaScript">
function fun1() { ... }
function fun2() { ... }
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton"
onClick="fun1()"> </FORM> <SCRIPT> document.myForm.myButton.onclick=fun2
</SCRIPT>
Обратите внимание, что новая программа-обработчик
записывается как fun2, не fun2()
2.5 Проверка правильности
заполнения формы.
Проверка правильности заполнения формы у клиента
полезна, так как:
-
снижает нагрузку на сервер, поскольку "плохие данные " будут
уже фильтрованы.
-
сокращает задержки в случае ошибки пользователя. Поскольку
при проверке отсутствуют сетевые обращения.
-
упрощает серверную программу.
Пример функции с проверкой правильности заполнения форм
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isaPosNum(s) {
return (parseInt(s) > 0) }
function qty_check(item, min, max) {
var returnVal = false
if (!isaPosNum(item.value))
alert("Please enter a postive number" )
else
if (parseInt(item.value) < min) alert("Please enter a "
+ item.name + " greater than " + min)
else if (parseInt(item.value) > max)
alert("Please enter a " + item.name
+ " less than " + max)
else returnVal = true return returnVal
}
function validateAndSubmit(theform){
if (qty_check(theform.quantity,0, 999))
{ alert("Order has been Submitted") return true }
else { alert("Sorry, Order Cannot Be Submitted!") return false } }
</SCRIPT>
</HEAD>
isaPosNum - простая функция, которая возвращает TRUE,
если аргумент -положителен, и FALSE - иначе. qty_check имеет три
аргумента: item - соответствующий элементу формы и минимальное и
максимальное допустимое значение. Эта функция проверяет значение
item, которое должно находиться между min и max, и вызывает
alert-бокс, если это не так.
validateAndSubmit имеет в качестве аргумента форму и
использует qty_check, чтобы проверить значение элемента формы и
принимает форму, если она заполнена правильно, или вызывает
alert-бокс и не принимает форму.
В следующем примере выполняется вызов этих функций:
qty_check- как программы-обработчика onChange для текстового поля и
validateAndSubmit- как обработчика onClick для клавиши
<BODY>
<FORM NAME="widget_order" ACTION="lwapp.html"
METHOD="post">How many widgets today?
<INPUT TYPE="text" NAME="quantity"
onChange="qty_check(this, 0, 999)">
<BR> <INPUT TYPE="button"
VALUE="Enter Order" onClick="validateAndSubmit(this.form)">
</FORM>
</BODY>
Форма выглядит следующим образом:
http://www.kgtu.runnet.ru/
