Практическое введение в программирование на JavaScript

         

below were arbitrarily chosen.



Пример 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> <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> <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 в кнопке не меняет своего значения, если только не перезагрузить страницу.

Другим часто встречающимся примером является бегущая строка. Строка может бежать либо в поле статуса (низ экрана), либо внутри поля формы. Рассмотрим такой пример.

Содержание раздела