2. Использование JavaScript в HTML
Конструкции языка JavaScript могут включаться
в HTML документы двумя способами:
- как
отмеченные тегом <SCRIPT> операторы и
функции,
- как обработчики событий
(event handlers), используя стандартные HTML теги.
2.1.SCRIPT теги:
Операторы языка (скрипты) с тегами SCRIPT используют формат:
<SCRIPT>
Операторы JavaScript
...
</SCRIPT>
Дополнительный аттрибут LANGUAGE, определяющий язык программирования скрипта задается как:
<SCRIPT LANGUAGE="JavaScript"> или <SCRIPT
LANGUAGE="LiveScript">
Операторы JavaScript
...
</SCRIPT>
Контейнер <SCRIPT> может включать произвольное число JavaScript операторов.
Пример 1. Простая скрипт-программа.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
document.write("Hello
net.")
</SCRIPT>
</HEAD>
<BODY>
That's all,
folks.
</BODY>
</HTML>
При выполнении скрипт-программы на экран будет выдано:
Hello net. That's all folks.
2.2. Скрытое кодирование
Скрипт-программы могут быть размещены в HTML документе внутри поля комментария. Этот прием используется для предотвращения интерпретации текста скрипта устаревшими WWW интерпретаторами (браузерами). Такие скрипты заключаются тегами комментария:
<!-- Begin to hide script contents from old browsers.
// End the hiding here. -->
2.3. Определение и вызов функций
Скрипты размещаются внутри SCRIPT тегов и выполняются после окончания загрузки HTML страницы. Определение функции - это формальное описание, задающее имя, структуру функции и последовательность операторов, реализующих определенный алгоритм. Вызов функции - это процедура передачи параметров и активизации функции для выполнения ее алгоритма.
Пример 2. Скрипт функции и комментарий.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide
script contents from old browsers
function square( i )
{
document.write("The call passed ", i ," to the
function.","<BR>")
return i * i
}
document.write("The function returned ",square(5),".")
//
end hiding contents from old browsers
-->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All
done.
</BODY>
Скрипт-программа в вышеуказанном примере в результате выполнения выдает на экран:
The call passed 5 to the function.
The function returned 25.
All done.
В примере используется задание скрипт-программы внутри заголовка HEAD документа. Поскольку заголовок загружается и интерпретируется первым, тем самым гарантируется, что определение функции будет выполнено до первого к ней обращения.
Пример 3. Скрипт-программа с двумя функциями.
<HTML>
<HEAD>
<SCRIPT>
<!--- hide script from
old browsers
function bar() {
document.write("<HR
ALIGN='left' WIDTH=25%>")
}
function output(head, level, string)
{
document.write("<H" + level + ">" + head + "</H" +
level + "><P>" + string)
}
// end hiding from old browsers
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!---
hide script from old browsers
document.write(bar(),output("Make Me
Big",3,"Make me ordinary."))
// end hiding from old browsers
-->
</SCRIPT>
<P>
Thanks.
</BODY>
</HTML>
Результат выполнения скрипта:
Make Me Big
Make Me ordinary.
Thanks.
2.4. Кавычки.
Одиночные кавычки (') используются для выделения текстовых фрагментов (литералов) внутри текстовых строк типа string , заданных двойными кавычками ("). В вышеприведенном примере функция bar () содержит литерал 'left' внутри литерального параметра, заданного двойными кавычками.
Еще один пример на эту тему:
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
2.5. Обработчики событий (Event Handlers) в скрипт-программе.
В приложениях программ на языке JavaScript широко применяются задание асинхронных операций, запрограммированных для выполнения реакции на определенные действия пользователя, в основном связанных с манипуляциями мышью. Эти процедуры вносят элементы интерактивности работы с HTML документами. и называются обработчиками событий.
Программы обработчиков событий пишутся на языке JavaScript и включаются в HTML документы в стандартных HTML тегах.
Общий формат синтаксиса:
<TAG eventHandler="JavaScript Code">
где:
TAG - стандартный HTML тег,
eventHandler - имя
обработчика событий ,
JavaScript Code - текст программы
обработчика событий.
Пример:
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
Можно задавать произвольное число операторов языка в двойных кавычках в поле JavaScript Code. Если включается более одного оператора, они должны быть отделены символом (;).
Признаком хорошего тона в программировании обработчиков событий является задание их как функций, для возможного многократного к ним обращения из различных мест HTML документа.
Приведенный выше пример является частью HTML конструкции form, которая передается в качестве параметра функции compute(), реализующей алгоритм данного обработчика событий.
Тип события задан именем его обработчика onClick, и момент которого наступает при нажатии левой кнопки мыши на указанном поле типа "button" в конструкции form. Параметр this.form передает функции имя текущей form.
События в JavaScript имеют свои названия и определяют тип выполненного действия пользова-теля и применяются к различным конструкциям языка HTML, главным образом к form:
Focus, Blur - фокусировка и снятие фокусировки указателя мыши с определенных полей,
Change - изменение поля,
Click - нажатие клавиши маши,
Select - выбор поля,
MouseOver - подведение указателя мыши к полю,
Load, Unload - открытие (загрузка) и закрытие страницы документа
HTML.
События применимы к различным полям документа HTML:
События Focus, Blur, Change применятся к полям form: text, textareas, selections.
Событие Click применяется к полям form: buttons, radio, checkboxes, submit, reset и к гиперссылкам ( links).
Событие Select применяется к полям form: text, textareas.
Событие MouseOver применяется к гиперссылкам (links).
Каждому событию соответствует имя обработчика данного события; тип и программа обработки события задается пользователем.
| Событие | Тип события | Обработчик события |
| Blur | расфокусировка элемента form | onBlur |
| Click | нажата клавиша мыши элемента form или гиперссылки | onClick |
| Change | изменено поле элемента form | onChange |
| Focus | фокусировка элемента поля form | onFocus |
| Load | загрузка страниц HTML | onLoad |
| MouseOver | подведен указатель мыши к гиперссылке | onMouseOver |
| Select | выбран элемент типа input в form | onSelect |
| Submit | нажата "кнопка" элемента submit в form | onSubmit |
| Unload | выход из текущей HTML страницы | onUnload |
Таблица типов обработчиков событий.
Пример 4. Скрипт программа с конструкциями form и обработчиками событий.
<HTML>
<!--------- Start Example Code
---------->
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
function compute(form) {
if
(confirm("Are you sure?"))
form.result.value =
eval(form.expr.value)
else
alert("Please
come back again.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text"
NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate"
ONCLICK="compute(this.form)">
<BR>
Result:
<INPUT
TYPE="text" NAME="result" SIZE=15
>
<BR>
</FORM>
</BODY>
<!--------- End of
Example Code ---------->
<HTML>
Выдача прграммы :
Enter an expression: ______________ Calculate
Result:_____________________
Пример 5. Скрипт-программа с form и обработчиками событий внутри BODY контейнера.
<!--------- Start Example Code
---------->
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
<!--- hide script from old browsers
function
checkNum(str, min, max) {
if (str == "") {
alert("Enter a number in the field, please.")
return
false
}
for (var i = 0; i < str.length; i++)
{
var ch = str.substring(i, i + 1)
if (ch <
"0" || ch > "9") {
alert("Try a number,
please.")
return false
}
}
var
val = parseInt(str, 10)
if ((val < min) || (val > max))
{
alert("Try a number from 1 to 10.")
return
false
}
return true
}
function thanks() {
alert("Thanks for your input.")
}
// end hiding from old browsers
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="ex5">
Please enter a small
number:
<INPUT TYPE="text" NAME="num"
onChange="if
(!checkNum(this.value, 1, 10))
{this.focus();this.select();}
else {thanks()}">
</FORM>
</BODY>
<!--------- End of
Example Code ---------->
Результат работы программы:
Введите число в поле ввода и нажмите клавишу мыши в поле документа вне поля ввода. В зависимости от того, что введете, будет соответствующая диагностика об ошибке либо поздравление.
Thanks for your input
2.6. Некоторые советы и технические приемы.
JavaScript в Navigator генерирует выдачу на экран "сверху-вниз" при загрузке WEB страницы. Однажды сформатированная выдача не может быть изменена без перезагрузки (reloading) страницы, т.е. нельзя изменить часть страницы без изменения всей страницы. Тем не менее, используя механизм frame, можно изменять содержимое "под-окон".
Печать.
В различного рода WEB интерпретаторах имеется возможность распечатки (Print) сформати-рованной WEB страницы. В силу динамичекского характера выдачи на экран информации скрипт-программами, содержимое экрана может не совпадать с распечаткой страницы.
Пример:
<P>This is some text.
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>
При распечатке страницы будет выдан лишь текст "This is some text", а на экране - дополнительная выдача: "And some generated text".
Использование кавычек.
Выше уже отмечались особенности использования одинарных и двойных кавычек. Отметим лишь еще одну особенность: поскольку задание обработчика событий заключается в двойные кавычки, поэтому задание литеральных параметров в функциях обработчика должно быть заключено в одинарные кавычки. Например:
<FORM NAME="myform">
<INPUT TYPE="button" NAME="Button1"
VALUE="Open Sesame!" onClick="window.open('stmtsov.html', 'newWin',
'toolbar=no,directories=no')">
</FORM>
Существует альтернативный способ задания внутренних кавычек используя escape-операции с символом (\).
Определение функций.
Правилом хорошего тона является задание определений функций в контейнере заголовка HEAD, поскольку гарантирует своевременное их формирование в документе и не приведет к ошибкам типа "Undefined function" при вызове их из контейнера <BODY>.
2.7. Массивы в JavaScript.
Массив - это есть упорядоченная система значений, к которым можно обращаться по имени с индексом. Например, элементами массива с именем emp являются emp[1], emp[2] и так далее.
В языке JavaScript нет явного задания массивов, но используя механизм задания свойств объектов, можно легко создавать массивы в программах JavaScript.
Можно определить массив как объект языка JavaScript :
function MakeArray(n) {
this.length =
n;
for (var i = 1; i <= n; i++) {
this[i] = 0 }
return
this
}
В этом задании объекта первым его свойством является lenght (или элемент с индексом 0), задающим число элементов в массиве, остальные свойства объекта имеют свой номер (1 и больше) и инициализированы численным значением 0.
Используя это определение объекта можно создавать конкретные массивы:
emp = new MakeArray(20);
Этим примером создан массив под названием emp из 20 элементов с нулевыми числовыми значениями.
Заполнение массива.
Заполнить массив можно присваивая значения его элементам:
emp[1] = "Casey Jones"
emp[2] = "Phil Lesh"
emp[3] = "August West"
и так далее.
Массивы объектов.
Используя несложные вышеописанные приемы можно создавать массивы объектов. Например, создать объект с типом Employee (служащие) с свойствами:
empno - табельный номер служащего,
name - имя,
dept - отдел.
function Employee(num, name, depart)
{
this.empno =
num;
this.name =
name;
this.dept =
depart;
}
Следующие операторы образуют массив таких объектов, используя вышеприведенное описание объекта типа массив MakeArray():
emp = new MakeArray(3)
emp[1] = new Employee(1, "Casey Jones", "Engineering")
emp[2] = new Employee(2, "Phil Lesh", "Music")
emp[3] = new Employee(3, "August West", "Admin")
Пример использования массива объектов:
for (var n =1; n <= 3; n++) {
document.write(show_props(emp[n], "emp") + "<BR>");
}
Текст функции show_props() будет приведен в следующих разделах данного описания.
Вернуться к оглавлению