|
|
|
|
Анимация
JavaScript
|
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 не реализована. Используемый в данной программе |
 |