КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 3.9. Файл chapter3/hexcalc/hexcalc. html
|
|
|
|
<HTML>
<head>
<TITLE>Hexadecimal calculator</TITLE>
<script>
<!--
var total = 0;
var lastOperation = "+";
var newnurnber = true;
function dec2hex(nDec)
{
var szHexTable = "0123456789ABCDEF";
var szResult = "";
var szBuf = "";
var nRem = 0;
var bNegative = false;
if(nDec < 0)
{
bNegative = true;
nDec = -nDec;
}
nTmp = nDec;
while(true)
{
nRem = nTmp % 16;
nTmp = nTmp / 16;
if(Math.floor(nTmp) < 16)
break;
szBuf = szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
}
szBuf = szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
if(Math.floor(nTmp)!= 0)
{
szBuf=szHexTable.charAt(Math.floor(nTmp));
szResult = szBuf.concat(szResult);
}
if(bNegative == true)
return ("-" + szResult);
else
return szResult;
}
function putNumber(btn, form)
{
var szOld = "";
var szNew = "";
if(newnumber)
{
form.displayHex.value = "";
form.displayDec.value = "";
newnumber = false;
}
szOld = form.displayHex.value;
szNew = szOld.concat(btn.name);
nCurrent = eval("0x" + szNew);
form.displayHex.value = szNew;
form.displayDec.value = nCurrent;
}
function clearNumber(form)
{
form.displayHex.value = "0";
form.displayDec.value = "0";
newnumber = true;
}
function clearAll(form)
{
total = 0;
lastOperation = "+";
clearNumber(form);
}
function plusOp(form)
{
var result; result = total + " " + lastOperation + " " + form.displayDec.value; total = eval(result);
lastOperation = "+";
form.displayHex.value = dec2hex(total);
form.displayDec.value = total;
newnumber = true;
function minusOp(form)
{
var result;
result = total + " " + lastOperation + " " + form.displayDec.value;
total = eval(result);
lastOperation = "-";
form.displayHex.value = dec2hex (total);
form.displayDec.value = total;
newnumber = true;
}
function mulOp(form)
{
var result;
result = total + " " + lastOperation + " " + form.dispiayDec.value;
total = eval(result);
lastOperation = "*";
form.displayHex.value = dec2hex(total);
form.dispiayDec.value = total;
newnumber = true;
}
function divOp(form)
{
var result;
result = total + " " + lastOperation + " " + form.displayDec.value;
total = eval(result);
lastOperation = "/";
form.displayHex.value = dec2hex(total);
form.dispiayDec.value = total;
newnumber = true;
}
function getResult(form)
{
var result; result = total + lastOperation + eval("Ox" + form.displayHex.value);
total = eval(result);
form. displayHex. value = dec2hex (total);
form. displayDec. value = total;
newnumber = true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
|
|
|
<TABLE BORDER=2 BORDERCOLOR="Black" BGCOLOR="Yellow">
<TR>
<TD>Hex:</TD>
<TD COLSPAN=3><INPUT TYPE=text NAME="displayHex" VALUE="0" onFocus="this.blur();"></TD>
</TR>
<TR>
<TD>Dec:</TD>
<TD COLSPAN=3><INPUT TYPE=text NAME="displayDec" VАLUЕ="0"
onFocus="this.blur();"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="C" VALUE=" С " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="D" VALUE =" D " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="E" VALUE=" E " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="F" VALUE=" F " onClick="putNumber(this, this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="8" VALUE=" 8 " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="9" VALUE=" 9 " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button " NAME="A" VALUE=" A " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="B" VALUE=" У " onClick="putNumber(this, thi s.form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="4" VALUE=" 4 " onClock="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="5" VALUE=" 5 " onClick="putNumber(this,this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="6" VALUE=" 6 " onClick="putNumber(this,this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="7" VALUE=" 7 " onClick="putNumber(this, this.form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="0" VALUE=" 0 " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="1" VALUE=" 1 " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="2" VALUE=" 2 " onClick="putNumber(this, this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="3" VALUE=" 3 " onClick="putNumber(this, this.form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="+" VALUE=" + " onClick="plusOp(this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="-" VALUE=" - " onClick="minusOp(this.form);"></TD>
|
|
|
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="*" VALUE=" * " onClick="mulOp(this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="/" VALUE=" / " onClick="divOp(this.form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="C" VALUE=" С " onClick="clearAll(this.form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="CE" VALUE="CE" onClick="clearNumber(this.form);"></TD>
<TD COLSPAN=2 ALIGN=CENTER><INPUT TYPE="button" NAME="Enter" VALUE="Enter" onClick="getResult(this.form);"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Найбільше цікаві моменти в листинге такі:
Коли калькулятор відображається в перший разом, у текстових полях displayHex і displayDec, призначених відповідно для відображення чисел у шестнадцатеричном і десятковому виді, знаходяться нульові значення:
<INPUT TYPE=text NAME="displayHex" VALUE="0"
onFocus="this.blur();">
<INPUT TYPE=text NAME="displayDec" VALUE="0"
onFocus="this. blur();">
Ці значення встановлюються параметром VALUE.
Для текстових полів displayHex і displayDec передбачений оброблювач події onFocus. Цей оброблювач одержує керування, коли користувач передасть полю фокус запровадження. Задача оброблювача полягає в тому, щоб знову відібрати фокус запровадження, запобігши безпосереднє редагування числа користувачем.
З кожній із кнопок, пов'язаної з запровадженням шестнадцатеричного числа, пов'язаний оброблювач події onClick, що викликає функцію putNumber, наприклад:
<INPUT TYPE="button" NAME="F" VALUE=" F "
onClick="putNumber (this, this. form);">
Цієї функції передаються два параметри - натиснута кнопка (як об'єкт класу button) і форма, у котрої ця кнопка знаходиться.
Задача функції putNumber - запровадження числа і його відображення в двох текстових полях, розташованих у верхній частині калькулятора:
function putNumber(btn,form)
{
var szOld = "";
var szNew = "";
if(newnumber)
{
form. displayHex. value = "";
form.displayDec.value = "";
newnumber = false;
}
szOld = form.displayHex.value;
SzNew = szOld.concat(btn.name);
nCurrent = eval("0x" + szNew);
form. displayHex. value = szKew;
form. displayDec. value = nCurrent;
На самому початку функція putNumber перевіряє двоичную перемінну newnumber. Якщо значення цей перемінної дорівнює true, користувач уводить першу цифру нового числа. У цьому випадку функція putNumber скидає вміст текстових полів displayHex і displayDec, а також установлює значення newnumber, рівне false.
|
|
|
Далі функція добавляє введену користувачем цифру попереду перемінної szOld, рівної поточному значенню з поля displayHex. При цьому вона викликає метод concat із класу String, призначений для злиття (конкатенации) рядків.
На такому етапі до введеному шестнадцатеричному числа добавляється префікс "Ох", після чого відбувається обчислення поточного значення функцією eval. Ця функція намагається інтепретувати текстовий рядок, переданий їй у якості параметра, як арифметичне вираження, повертаючи результат інтепретації у виді чисельного значення. Цей результат зберігається і перемінної nCurrent і відображається в текстовому полі displayDec (вихідне шестнадцатеричное число відображається в поле displayHex).
Якщо після запровадження числа користувач натискає одну з чотирьох кнопок призначених для виконання операцій додавання, вирахування, множення і розподілу, визиваються функції, призначені для цих кнопок в оброблювачі події onClick. Це функції plusOp (додавання), minusOp (вирахування), mulOp (множення) і divOp (розподіл).
Перераховані функції схожі один на одного, тому можна обмежитися докладним розглядом тільки однієї з них, що виконує операцію додавання:
function plusOp(form)
{
var result;
result = total + " " + lastOperation + " " + form.displayDec.value;
total = eval(result);
lastOperation = "+";
form.displayHex.value = dec2hex(total);
form.displayDec.value = total;
newnumber = true;
}
Тут глобальна перемінна total, що має початкове значення, рівне нулю, використовується для збереження проміжних результатів обчислень. Вона укладається з прогалиною і текстовим рядком lastOperation. потім ще з одною прогалиною і, нарешті, із рядком десяткового уявлення введеного числа, витягнутого з поля displayDec.
Рядок lastOperation призначений для збереження коду операції, що виконувалася востаннє. Додаткові прогалини потрібні для коректної роботи з негативними числами
За допомогою функції eval функція plusOp обчисляє результат операції і записує його в перемінну total. Потім у перемінну lastOperation записується код операції додавання - рядок "+".
|
|
|
На такому етапі функція plusOp перетворює значення total за допомогою функції dec2hex і відображає результат у шестнадцатеричном виді в поле displayHex, а також у двоичном - у поле displayDec.
Перед тим як повернути керування, функція plusOp записує в перемінну newnumber значення true. Це призводить до тому, що при подальшому запровадженні цифр вони будуть розглядатися як цифри другого що складається, що бере участь в операції додавання.
Функція getResult визивається, коли користувач натискає на клавішу калькулятора з написом Enter:
function getResult(form)
{
vаr result;
result = total + lastOperation + eval("Ox" + form.displayHex.value);
total = eval(result);
form.displayHex.value = dec2hex(total);
form. displayDec.value = total;
newnumber = true;
}
Від тільки що описаної функції plusOp ця функція відрізняється лише тим, що вона не змінює значення перемінної lastOperation (тому що дана кнопка служить для одержання підсумкового результату, а не для виконання арифметичної операції).
Цікаво роздивитися функцію dec2hex, що виконує перетворення десяткового числа в шестнадцатеричное. Результат перетворення ця функція повертає у виді текстового рядка.
На початку роботи функція dec2hex перевіряє знак вихідного числа. Негативні числа преобразовываются в позитивні, при цьому в перемінну bNegativе записується значення true.
Алгоритм перетворення десяткового числа в шестнадцатеричное заснований на розподілі вихідного числа на 16 у циклі. Якщо ціла частина результату розподілу, що обчисляється за допомогою методу Math.floor, надається менше 16, цикл завершується. У противному випадку залишок від розподілу розглядається як значення поточного шестнадцатеричного розряду.
Для того щоб одержати символічне уявлення шестнадцатеричного числа по його значенню, треба витягти потрібний символ із рядка szHexTable викликом для цього методу charAt:
szBuf=szHexTable. charAt(nRem);
szResult = szBuf concat(szResult);
Після завершення циклу функція обчисляє старші розряди результату, а також коректує знак цього результату відповідно до стана перемінної bNegative
3.3.6. Електронні часи
За допомогою сценарію JavaScript і форми можна зробити достатньо складні електронні часи, що будуть показувати не тільки час, але і дату в різноманітних форматах з урахуванням зсуву годинного пояса.
Вихідний текст документа HTML з електронними часами поданий у листинге 3.10.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 385; Нарушение авторских прав?; Мы поможем в написании вашей работы!