2.11. Примеры скриптов
Теоретизировать на предмет написания скриптов на JavaScrip
можно долго. Но самый продуктивный способ получения представления о языке - это
разбор примеров. Если посмотреть на список этих примеров, который можно найти в
соответствующей директории Yahoo, то больше всего там различного сорта
калькуляторов. Разберем программу такого же типа, только это будет не
калькулятор, а программа обучения устному счету.
Пример 2.3
<HTML>
<!--
Author: Pavel Khramtsov
Date: February 23, 1996
URL: http://144.206.192.100/radleg/mo_input.htm
-->
<HEAD>
<TITLE>Проверка
устного счета.</TITLE>
<SCRIPT
LANGUGE="JavaScript">
<!--
var max_value = 0
var operand1 = 0
var operand2 = 0
var result = 0
var flag = 0
var sign = "+"
var input = ""
var v_date = new Date()
var number = v_date.getTime()
function init(factor) {
var today = new Date()
return
(factor*today.getTime()/1000)%30000
}
//Инициализировать
счетчик случайных чисел.
IX = init(2)
IY = init(3)
IZ = init(4)
//2, 3, and 4 below were arbitrarily
chosen.
//They put some distance between the
initial values of IX, IY, and IZ
//Датчик случайных чисел.
function
random() {
IX = Math.floor(171 * IX % 30269)
IY = Math.floor(172 * IY % 30307)
IZ = Math.floor(170 * IZ % 30323)
return ( IX/30269.0 + IY/30307.0 +
IZ/30323.0 ) % 1.0
}
//Выбрать
сложение или вычитание.
function
set_sign(x)
{
if( x == "+")
{
flag = 0
sign = "+"
}
if( x == "-")
{
flag = 1
sign = "-"
}
return true
}
//
Определить первый операнд.
function f_operand()
{
operand1 = random()*max_value
return parseInt(operand1)
}
//
Определить второй операнд.
function s_operand()
{
if(flag == 0)
{
operand2 = random() *
(max_value-operand1)
}
else
{
operand2 = random() * operand1
}
return parseInt(operand2)
}
//
Проверить введенные данные.
function
input_sign(x)
{
if(x == 10)
{
if(flag == 0)
{
if( operand1+operand2 ==
parseInt(input))
{
window.document.test.r0.value = "Молодец!"
}
else
{
window.document.test.r0.value = "Думай!?"
window.document.test.input =
""; input = ""
}
}
if(flag == 1)
{
if( operand1-operand2 ==
parseInt(input) )
{
window.document.test.r0.value ="__-__-_р!"
}
else
{
window.document.test.r0.value = "Думай!?"
window.document.test.input = "";
input = ""
}
}
return true
}
input += x
window.document.test.result.value =
input
return true
}
// Генерация варианта.
function main_calc()
{
operand1 = f_operand()
window.document.test.op1.value =
operand1
operand2 = s_operand()
window.document.test.op2.value =
operand2
window.document.test.s_sign.value =
sign
input = ""
window.document.test.input =
""
window.document.test.r0.value =
" ??? "
return true
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>Математический
тест</H1>
<HR>
<FORM NAME=test>
<TABLE BORDER=0>
<TR>
<TD><INPUT NAME=i10
TYPE=button VALUE="0-10"
onClick="max_value=10"></TD>
<TD><INPUT NAME=i20
TYPE=button VALUE="0-20"
onClick="max_value=20"></TD>
<TD><INPUT NAME=i100
TYPE=button VALUE="0-100"
onClick="max_value=100"></TD>
<TD><INPUT NAME=i+
TYPE=button VALUE=" + "
onClick="set_sign('+')"></TD>
<TD><INPUT NAME=i-
TYPE=button VALUE=" - "
onClick="set_sign('-')"></TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER=0>
<TR>
<TD><INPUT NAME=op1 SIZE=2
MAXLENGTH=2></TD>
<TD><INPUT NAME=s_sign
SIZE=1 MAXLENGTH=1></TD>
<TD><INPUT NAME=op2 SIZE=2
MAXLENGTH=2></TD>
<TD>=</TD>
<TD><INPUT NAME=result
SIZE=3 MAXLENGTH=3></TD>
<TD><INPUT NAME=award
TYPE=button VALUE=" ? " onClick="main_calc()">
<TD><INPUT NAME=r0
VALUE=" ??? ">
</TR>
</TABLE>
<HR>
<TABLE BORDER=2>
<TR>
<TD><INPUT NAME=b1
TYPE=button VALUE=" 1 "
onClick="input_sign('1')"></TD>
<TD><INPUT NAME=b2
TYPE=button VALUE=" 2 "
onClick="input_sign('2')"></TD>
<TD><INPUT NAME=b3
TYPE=button VALUE=" 3 "
onClick="input_sign('3')"></TD>
</TR>
<TR>
<TD><INPUT NAME=b4
TYPE=button VALUE=" 4 "
onClick="input_sign('4')"></TD>
<TD><INPUT NAME=b5
TYPE=button VALUE=" 5 "
onClick="input_sign('5')"></TD>
<TD><INPUT NAME=b6
TYPE=button VALUE=" 6 "
onClick="input_sign('6')"></TD>
</TR>
<TR>
<TD><INPUT NAME=b7
TYPE=button VALUE=" 7 "
onClick="input_sign('7')"></TD>
<TD><INPUT NAME=b8
TYPE=button VALUE=" 8 "
onClick="input_sign('8')"></TD>
<TD><INPUT NAME=b9
TYPE=button VALUE=" 9 "
onClick="input_sign('9')"></TD>
</TR>
<TR>
<TD><INPUT NAME=b0
TYPE=button VALUE=" 0 "
onClick="input_sign('0')"></TD>
<TD COLSPAN=2><INPUT
NAME=bs TYPE=button VALUE=" OK "
onClick="input_sign('10')">
</TD></TR>
</TABLE>
</FORM>
</CENTER>
<HR>
</BODY>
</HTML>
Приведенный здесь пример содержит датчик случайных чисел
(функции init и rand), таблицу, реализующую функции кнопок клавиатуры, и блок
проверки результата вычислений. После загрузки программы пользователь должен
выбрать тип вычислений (+,-), интервал вычислений (в пределах 10, 20, 100) и
нажать кнопку "?" для генерации примера. После ввода с отображаемой
клавиатуры числа пользователь нажимает на символ "=", что означает
"исполнить", и система проверяет правильность ответа. Если ответ
правильный, то программа поздравляет фразой "Молодец!", если нет -
"Думай!?". В системе Windows 3.x нет встроенного датчика случайных
чисел, поэтому стандартная функция rand в этой версии JavaScript не
реализована. Используемый в данной программе датчик был позаимствован из
телеконференции по JavaScript. В скрипте кроме этого используются объект типа
"дата" и его методы, а также встроенные функции контроля вводимых
данных. Как видно из примера обращение к полям HTML-формы представляет из себя
обращение к структуре, корнем которой является объект окно, в котором определен
объект документ, внутри которого определена форма и ее поля и атрибуты полей.
Не у всех полей можно менять значения атрибутов, так, например, атрибут VALUE в
кнопке не меняет своего значения, если только не перезагрузить страницу.
Другим часто встречающимся примером является бегущая строка.
Строка может бежать либо в поле статуса (низ экрана), либо внутри поля формы.
Рассмотрим такой пример.
| 
