Встроенные объекты языка JavaScript
Встроенные объекты языка доступны в любом месте скрипта и в любой ситуации. В литературе эти объекты так же называют классами. В таблице приведены все основные объекты и их краткое описание:String Объект предназначен для работы со строками. Содержит свойства и методы, позволяющие изменять строку в целом или отдельные её символы, менять регистр, искать соответствие по маске или точному совпадению.
Array Объект предназначен для хранения и управления наборами формализованных данных. Под формализованными, в данном случае понимаются данные, которые могут быть приведены к одному из типов данных JavaScript (например: строки, числа и объекты).
Math Объект содержит все основные математические константы, а так же предоставляет методы для выполнения типовых математических операций (округление, тригонометрические функции и т.д)
Date Объект предоставляет свойства и методы для получения и манипулирования датами и временем.
Number Содержит базовые константы и методы работы с числовыми данными. Так же содержит ряд специальных значений, определяющих критические или нечисловые значения (например, Infinity (бесконечность) и NaN (не-число))
Boolean Объект-оболочка для простых логических типов данных и операций над ними. В работе используется очень редко, т.к. не содержит практически никаких полезных свойств или методов.
Function Объект представляет собой строку, которая при выполнении компилируется в функцию. Объект позволяет работать с параметрами и телом такой функции "на лету", во время выполенния скрипта.
Object Объект-родитель всех объектов JavaScript. Содержит все базовые методы, имеющиеся в любом объекте (например, toString()). Обычно этот объект в явном виде не используется.
Как видите, каждый объект представляет собой удобное средство для работы с каким-либо типом данных. Все обычные операции, такие как присвоение или объявление переменных, на самом деле задействуют объекты, просто интерпретатор скрывает от нас тонкости взаимодействия.
Пример создания калькулятора
Зачастую, на сайтах возникает необходимость добавления на страницу простого калькулятора. В сети Интернет вы при желании сможете найти различные примеры: кредитный калькулятор, калькулятор скидок и т.д. Все они работают по одному принципу, отличаются лишь интерфейсом и порядком вычислений результата.
В этом примере мы рассмотрим процесс создания простого калькулятора, который при необходимости можно легко переделать под ваши нужды.
Для начала создадим HTML-код для нашего калькулятора:
<style type="text/css">
.tblCalc{
border:1px solid gray;
margin:0;
padding:0;
width:250px;
text-align:center;
}
.tblCalc input{
border:1px solid gray;
width:30px;
margin:4px;
}
#btnWide{
width:80px;
}
#editWide{
width:250px;
}
</style>
<form name="calc" action="">
<table class="tblCalc" cellpadding=0 cellspacing=0>
<tr>
<td colspan=5 align=middle>
<input id="editWide" name="ReadOut" type="Text"
size=28 value="0" width="250px">
</td>
</tr>
<tr>
<td colspan="3"></td>
<td><input name="btnClear" type="Button"
value="C" onclick="Clear()" /></td>
<td><input name="btnClearEntry" type="Button"
value="CE" onclick="ClearEntry()" /></td>
</tr>
<tr>
<td><input name="btnSeven" type="Button"
value="7" onclick="NumPressed(7)"></td>
<td><input name="btnEight" type="Button"
value="8" onclick="NumPressed(8)"></td>
<td><input name="btnNine" type="Button"
value="9" onclick="NumPressed(9)"></td>
<td><input name="btnPlus" type="Button"
value="+" onclick="Operation('+')" /></td>
<td><input name="btnMultiply" type="Button"
value="*" onclick="Operation('*')" /></td>
</tr>
<tr>
<td><input name="btnFour" type="Button"
value="4" onclick="NumPressed(4)"></td>
<td><input name="btnFive" type="Button"
value="5" onclick="NumPressed(5)"></td>
<td><input name="btnSix" type="Button"
value="6" onclick="NumPressed(6)"></td>
<td><input name="btnMinus" type="Button"
value="-" onclick="Operation('-')" /></td>
<td align=middle><input name="btnDivide" type="Button"
value=" / " onclick="Operation('/')" /></td>
</tr>
<tr>
<td><input name="btnOne" type="Button"
value="1" onclick="NumPressed(1)"></td>
<td><input name="btnTwo" type="Button"
value="2" onclick="NumPressed(2)"></td>
<td><input name="btnThree" type="Button"
value="3" onclick="NumPressed(3)"></td>
<td><input name="btnPercent" type="Button"
value="%" onclick="Percent()" /></td>
<td align=middle> </td>
</tr>
<tr>
<td><input name="btnZero" type="Button"
value="0" onclick="NumPressed(0)"></td>
<td><input name="btnDecimal" type="Button"
value="." onclick="Decimal()"></td>
<td><input name="btnNeg" type="button"
value="+/-" onclick="Neg()" /></td>
<td colspan="2"><input id="btnWide" name="btnEquals"
type="Button" value="=" onclick="Operation('=')"></td>
</tr>
</table>
</form>
Получим следующий вид:
При нажатии на любую кнопку скорее всего появится ошибка, т.к. мы ещё не написали код соответствующих обработчиков. Следующий скрипт нужно добавить в любом месте страницы:
<script language="JavaScript">
var Fcalc = document.calc;
var Currents = 0;
var FlagNewNum = false;
var PendingOp = "";
// обработчик нажатия
// цифровой кнопки
function NumPressed (Num)
{
if (FlagNewNum)
{
Fcalc.ReadOut.value = Num;
FlagNewNum = false;
}
else
{
if (Fcalc.ReadOut.value == "0")
Fcalc.ReadOut.value = Num;
else
Fcalc.ReadOut.value += Num;
}
}
// обработчик нажатия
// кнопки действия
function Operation (Op)
{
var Readout = Fcalc.ReadOut.value;
if (FlagNewNum && PendingOp != "=")
{
Fcalc.ReadOut.value = Currents;
}
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Currents += parseFloat(Readout);
else if ( '-' == PendingOp )
Currents -= parseFloat(Readout);
else if ( '/' == PendingOp )
Currents /= parseFloat(Readout);
else if ( '*' == PendingOp )
Currents *= parseFloat(Readout);
else
Currents = parseFloat(Readout);
Fcalc.ReadOut.value = Currents;
PendingOp = Op;
}
}
// добавление десятичной точки с числу
function Decimal ()
{
var curReadOut = Fcalc.ReadOut.value;
if (FlagNewNum)
{
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
Fcalc.ReadOut.value = curReadOut;
}
// Очистка текущего результата
function ClearEntry ()
{
Fcalc.ReadOut.value = "0";
FlagNewNum = true;
}
// Полная очистка всех результатов
function Clear ()
{
Currents = 0;
PendingOp = "";
ClearEntry();
}
// меняем знак текущего результата
function Neg ()
{
Fcalc.ReadOut.value =
parseFloat(Fcalc.ReadOut.value) * -1;
}
// вычисляем значение процентов
function Percent ()
{
Fcalc.ReadOut.value =
(parseFloat(Fcalc.ReadOut.value) / 100) *
parseFloat(Currents);
}
</script>
Скрипт достаточно логичен и прост для понимания, стоит лишь немного в нём разобраться. Здесь использована форма и элементы ввода типа "text" и "button", причем к последним привязаны наши собственные обработчики.
Для тренировки попробуйте добавить в этот калькулятор инженерные функции, например, вычисление квадратного корня и возведение в степень. Подсказка: необходимо будет добавить соответствующие кнопки и внести изменения в функцию Operation().
Более детально с основными объектами мы познакомимся при изучении соответствующих типов данных.
Создайте калькулятор. Используя встроенный объект MATH
.
Вариант 2. Разработать калькулятор вычисления тригонометрических функций
Вариант 3. Разработать калькулятор перевода десятичного числа в восьмеричную систему счисления
Вариант 4. Разработать калькулятор перевода десятичного числа в шестнадцатеричную систему счисления
Вариант 5. Разработать калькулятор выполняющий сравнение двух вводимых чисел (=, <, >)
Вариант 6. Разработать калькулятор вычисления десятичного логарифма
Вариант 7. Разработать калькулятор перевода десятичного числа в двоичную систему счисления
Вариант 8. Разработать калькулятор для организации работы с функциями «mod» и «div»
Вариант 9. Разработать калькулятор для организации работы с логическими функциями (Конъюнкция, дизъюнкция, инверсия, строгая дизъюнкция).
Вариант 10. Разработать калькулятор перевода десятичного числа в римскую систему счисления
1.