Пример сценария
В качестве первого примера мы приведем сценарий, выполняющего обработку щелчка по кнопке с надписью Click me, расположенной в форме (рис. 3.1).
Рис. 3.1. Форма в документе HTML с кнопкой
Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button (рис. 3.2).
Рис. 3.2. Отображение свойств кнопки как объекта класса button
Исходный текст документа HTML со встроенным в него сценарием JavaScript приведен в листинге 3.1.
Листинг 3.1. Файл chapter3/button/button.html
<HTML>
<HEAD>
<TITLE>Button demo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
var szTxt="";
var szTxt1="";
szTxt=document.TestForm.bt.value;
szTxt1=document.TestForm.bt.name;
document.write("<HR>");
document.write("You press button: " + szTxt.bold()
+ ", name=" + szTxt1.bold());
document.write("<HR>");
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Click Button</H1>
<FORM NAME="TestForm">
<P><INPUT TYPE="button" NAME="bt" VALUE="Click me!"
onClick="btnClick();">
</FORM>
</BODY>
</HTML>
В теле документа HTML определена форма с именем TestForm, для чего в операторе <FORM> мы указали параметр NAME. Другие параметры этого оператора здесь не нужны.
Форма содержит одну-единственную кнопку с именем bt и надписью Click me. Для этой кнопки в качестве обработчика события мы назначили функцию btnClick, определенную в заголовке документа HTML.
Когда пользователь нажимает кнопку, функция btnClick получает управление и сохраняет в текстовых переменных szTxt и szTxt1 надпись и имя кнопки, соответственно:
szTxt=document.TestForm.bt.value;
szTxt1=document.TestForm.bt.name;
Затем функция выводит в окно браузера строку, ограниченную сверху и снизу разделительной линией, отображающую значение свойств value и name:
document.write("<HR>");
document.write("You press button: " + szTxt.bold()
+ ", name=" + szTxt1.bold());
document.write("<HR>");
