LEKCIJA_10
.docМожете использовать признак 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.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. Точка с запятой (;) в конце оператора необходима только в том случае, если он является не единственным на этой строке.
Определение файла для 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, и сервер, на котором они располагаются должен быть специальным образом настроен.
Использование 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 есть список аргументов метода, отделяемых запятыми.
Использование 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, кроме раздела.
Обработка событий в 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 в функции, эти имена входят составной частью в имена переменных в функции.
Явный запрос программ-обработчиков событий
В 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()
Проверка правильности заполнения формы
Проверка правильности заполнения формы у клиента полезна, так как:
-
снижает нагрузку на сервер, поскольку "плохие данные " будут уже фильтрованы.
-
сокращает задержки в случае ошибки пользователя. Поскольку при проверке отсутствуют сетевые обращения.
-
упрощает серверную программу.
Пример функции с проверкой правильности заполнения форм
<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>
Форма выглядит следующим образом:
Начало формы
How
many widgets today?
Конец формы
Эта форма задает значение для LiveWire-приложения, названного lwapp.html.
3. Использование объектов Navigator'а
Иерархия объектов
Объекты Navigator’а имеют следующую иерархию:
При загрузке документа выполняется порядковая нумерация однотипных объектов и полное имя объекта формируется с использованием названия объекта и его номера. Например, первая форма в документе получит название form1. Поскольку она является дочерним элементом объекта document, обратиться к ней можно следующим образом:
document.form1.
Каждая страница имеет следующие объекты:
-
navigator - имеет свойства для названия и версии используемого Navigator, для типов MIME, поддерживаемых клиентом и встроенную (plug-in) поддержку, инсталлированную у клиента;
-
window - объект, имеющий свойства, которые применя- ются к полному окну. Имеется также объект window для каждого "дочернего окна" в документе .
-
document - имеет свойства, основанные на оформлении документа, типа заглавия, цвета фона, ссылок и форм.
-
location - определяется текущим URL.
-
history - имеет свойства, представляющие URL, которые клиент предварительно использовал.
В зависимости от содержания, документ может иметь и другие объекты.: например, каждая форма (определяемая в теге FORM) в документе представляет объект Form. Следующая ссылка относится к свойству value текстового поля с именем text1 в форме, названной myform, текущего документа:
document.myform.text1.value
Когда объект включен в форму, для обращения к нему необходимо указывать имя формы, даже в том случае, когда объект может существовать вне формы. Например рисунок (image) может существовать вне формы, но если он в нее включен, то обращение должно выглядеть следующим образом:
document.imageForm.aircraft.src='f15e.gif'
В том случае, если рисунок вне формы, обращение будет следующим:
document.aircraft.src='f15e.gif'
Примеры свойств документа
Предположим мы создали страницу, поименованную simple.html, со следующим содержимым:
<HEAD><TITLE>My Document</TITLE>
<SCRIPT>
function update(form) {
alert("Form being updated")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >
Enter a value:
<INPUT TYPE="text" NAME="text1" VALUE="everything"
SIZE=20>
Check if you want:
<INPUT TYPE="checkbox" NAME="Check1" CHECKED
onClick="update(this.form)"> Option #1
<P>
<INPUT TYPE="button" NAME="button1" VALUE="Press Me"
onClick="update(this.form)">
</FORM>
</BODY>
Базовые объекты могут иметь следующие свойства:
|
Свойства |
значения |
|
document.title |
“My Document” |
|
document.fgcolor |
#000000 |
|
document.bgColor |
#ffffff |
|
location.href |
"http://www.sampson.com/samples/simple.html" |
|
history.length |
7 |
Значение document.title определяется содержимым тега TITLE, значения document.fgColor и document.bgColor явным образом не определены, поэтому они выбираются по умолчанию из установок диалогового бокса Preferences (когда пользователь выбирает General Preferences из меню Options).
Полные имена объектов в выше приведенном документе будут следующими:
-
document.myform, для form
-
document.myform.Check1, для checkbox
-
document.myform.button1, для button.
Объект myform имеет свойства, основывающиеся на аттрибутах тега FORM:
- action есть http://www.sampson.com/samples/foo.cgi, URL, на который указывает форма.
- method есть "get" как указано в аттрибуте METHOD.
- length равна 3, поскольку в форме три элемента ввода.
Объект Form имеет дочерние объекты button1 и text1, эти объекты обладают своими собственными свойствами, например: button1.value имеет значение "Press Me" , button1.name - "Button1" text1.value - "everything" text1.name - "text1". На эти свойства следует ссылаться, используя полные имена, например: document.myform.button1.value.
Исполнение JavaScript-программ
Чтобы понимать исполнение JavaScript-программы, важно знать как они исполняются Navigator'ом - то есть как Navigator преобразует HTML теги в графическое отображение. В общем случае Navigator исполняет файл HTML сверху вниз. Например, предположим, что определена форма с двумя элементами ввода текста:
<FORM NAME="statform">
<INPUT TYPE = "text" name = "userName" size = 20>
<INPUT TYPE = "text" name = "Age" size = 3>
Начало формы
Конец формы
Эти элементы формы определены как JavaScript-объекты и их можно использовать после того, как форма определена следующим образом:
document.statform.userName и document.statform.Age.
Например, можно показать значение этих объектов в программе после заполнения формы:
<SCRIPT>
document.write(document.statform.userName.value)
document.write(document.statform.Age.value)
</SCRIPT>
(Чтобы
увидеть только что введенные значения
необходимо перезагрузить документ.)
Однако, если попробовать сделать это перед определением формы (выше заполнения формы в HTML странице), получите ошибку, потому что объекты не существуют еще в Navigator’е. Аналогично, если расположение объекта на экране произошло, то установка нового значения не приведет к изменению изображения. Например, предположим заголовок документа определен следующим образом:
<TITLE>My JavaScript Page</TITLE>
Для JavaScript это значение переменной document.title. Navigator выводит этот заголовок в своей верхней строке. Если позже попытаться изменить значение этой переменной, то это не вызовет изменение изображения, не приведет к изменению переменной и может вызвать ошибку. Имеются некоторые важные исключения из этого правила: Можно модернизировать значения элементов формы динамически. Например, следующее описание определяет область текста, который первоначально показывает строку "Source value". Когда вы нажимаете кнопку, добавляется новый текст "...Updated".
<FORM NAME="demoForm">
<INPUT TYPE="text" NAME="mytext" SIZE="40" VALUE="Source value
">
<P><INPUT TYPE="button" VALUE="Click to Update Text Field"
onClick="document.demoForm.mytext.value += '...Updated ' ">
</FORM>
Начало формы
Конец формы
Это простой пример обновления элемента формы после расположения. При использовании программ-обработчиков событий можно также изменить некоторые другие свойства после того, как расположение произошло, например, document.bgcolor.
Ключевые объекты Navigator'a
Этот раздел описывает некоторые наиболее полезные объекты Navigator’а, включая окна, фреймы, документ, формы, местоположение, и историю.
Window и Frame объекты
Объект window - "родительский" объект для всех других объектов в Navigator’е. Можно создать несколько окон с помощью JavaScript-приложений. Объект Frame - определяется с помощью тега FRAME в разделе FRAMESET. Frame имеет те же свойства и методы, что и window и отличаются только способом вывода. Объект window имеет многочисленные полезные методы:
open и close: Открывает и закрывает окно, можно специфицировать размер окна, его контекст - имеет ли кнопки, ссылки и другие атрибуты.
alert: Выводит аварийный бокс с сообщением.
confirm: Выводит диалоговый бокс с кнопками OK и Cancel.
prompt: Выводит диалоговый бокс с текстовым полем для ввода значения.
blur и focus: Убирает или дает фокус окну.
scroll: Скроллирует окно к указанной координате.
setTimeout: Оценивает выражения после указанного времени
window имеет также два свойства, которые могут быть полезны:location и status. Можно направить клиента к другому URL. Например, следующее предложение направляет клиента к домашней странице Netscape, как будто он воспользовался гиперссылкой или загрузил URL:
location = "http://home.netscape.com"
status можно использовать, чтобы послать сообщение в строку статуса, находящуюся внизу клиентского окна.
Объект document
Поскольку write и writeln методы генерируют HTML, объект document- один из наиболее полезных объектов Navigator’а. Страница имеет только один объект класса document. Он имеет ряд свойств, которые отражают цвет фона, текста, и ссылок на странице: bgColor, fgColor, linkColor, alinkColor, и vlinkColor. Другие полезные свойства документа включают lastModified - дату последнего изменения документа, referrer- предыдущий URL, посещенный клиентом, и URL - URL самого документа. Объект document - предок для Anchor, Applet,Area, Form, Image, Link, and Plugin объектов в странице.