11. Математические вычисления в JavaScript
Арифметические операции
Ранее мы уже использовали арифмитические операции для увеличения и уменьшения размера картинки, позиционирования картинки посередине экрана и в некоторых других заданиях.
Операция |
Название |
Описание |
a + b |
Сложение |
Возвращает сумму двух операндов. |
a - b |
Вычитание |
Возвращает разность от вычитания правого операнда из левого. |
a * b |
Умножение |
Возвращает произведение двух операндов. |
a / b |
Деление |
Возвращает частное от деления левого операнда на правый. |
-a |
Смена знака |
Унарная операция. Возвращает арифметическое отрицание операнда. |
Примеры: a=5.4; b=19.6; y=b*(a*b-b)/a; // y равно 313.0192592592593 Заметьте, что десятичные знаки отделяются точкой, а не запятой.
Ранее мы научились извлекать значение, введённое пользователем в текстовое поле. Полученный результат мы чаще всего выводили с помощью окна сообщения alert. Однако в веб-приложениях это не самое лучшее решение. Дело в том, что при закрытии этого окна пропадает и результат. Для того, чтобы результат вычисления оставался на странице, его лучше вывести в текстовое поле. Чтобы пользователь не мог вручную менять значение текстового поля, ему задают атрибут readonly (только для чтения). Пример:
<input type="text" id="output" readonly="readonly" /> <script type="text/javascript"> document.getElementById('output').value='Результат'; </script> |
|
Задание 1
Разместите на странице поля ввода высоты и основания треугольника. По нажатию кнопки «Вычислить» должна вычисляться площадь треугольника по формуле s=ah/2 и выводиться в третье текстовое поле.
Внешний вид
Математические константы и функции объекта Math
Как и любой язык программирования, JavaScript имеет встроенные математические функции. Доступ к ним осуществляется через объект Math. Например, вычисление квадратного корня выполняется методом sqrt: x = Math.sqrt(4); Здесь аргумент квадратного корня равен 4, а x принимает значение 2.
Свойство PI возвращает число π, а синус вычисляется методом sin: p = Math.PI; y = Math.sin(p/2); Здесь аргумент синуса равен π/2, а y принимает значение 1.
Полный список свойств и методов объекта Math можно найти в справочнике языка JavaScript. Он находится по адресу ...\Справочники\Справочник JS\contents.htm. Чтобы открыть объект Math, на странице «Содержание» перейдите по ссылке «3.12.2. Математические функции и константы: объект Math».
Задание 2
Используя свойства и методы объекта Math, вычислите значения следующих величин:
длину окружности p=2πr, где r — радиус, равный 0,94 м;
площадь круга s=πr2;
объём шара v=4πr3/3;
Ответ выведите на страницу с помощью метода write.
Ранее мы научились извлекать значение, введённое пользователем в текстовый элемент ввода. Используйте его для выполнения следующего задания.
Задание 5
Разместите на странице два текстовых поля для ввода радиуса и длины нити. Поставьте четыре кнопки, по щелчку на которых вычисляются длина окружности, площадь круга, объём шара и период колебания маятника.
Проверка правильности ввода
Мы уже знакомы с тем, как с помощью инструментов Dreamweaver добавлять поведение HTML-элементам (смотри страницу Инструменты Dreamweaver для JavaScript). Аналогично можно добавить проверку правильности ввода в текстовое поле.
Дело в том, что если пользователь вводит неправильные данные, то скрипт будет работать некорректно. Например, если в предыдущем задании ввести вместо чисел буквы, то вместо ответа выведется значение NaN. Чтобы этого не происходило, необходимо заранее предупреждать пользователя, что он ввёл ошибочные данные.
Для
добавления проверки правильности ввода
проделайте следующее. В панели Behaviors
(Window > Behaviors) щёлкните по кнопке
и
в появившемся меню выберите пункт
Validate Form. Появится диалоговое окно. В
списке Fields выберите нужное поле ввода.
Если в поле ввода обязательно нужно
какое-либо значение, то установите
флажок Value Required (Значение требуется).
Если нужны обязательно числа, то включите
радиокнопку Number.
Задание 6
Добавьте полям ввода из предыдущего задания проверку правильности ввода чисел.
Задание 7
Задавайте количество картинок не с помощью текстового поля ввода, а с помощью выпадающего списка.
Функция
Кроме встроенных функций, предопределённых в объекте Math, программист может описать свою собственную функцию. Функция в языках программирования — это совокупность операторов, выполняющих одну задачу. Удобство функции заключается в том, что описав функцию один раз, можно вызывать выполнение операторов, просто написав имя функции.
Ранее мы использовали функцию в виде, который не позволяет передавать аргументы и возвращать значение. Теперь мы рассмотрим описание функции в следующем виде: function имя(аргументы) { операторы } Здесь имя — идентификатор, задающий имя функции, аргументы — список формальных аргументов функции, разделённых запятыми, а операторы — совокупность операторов (тело функции), которая исполняется при её вызове.
Рассмотрим следующий пример: function куб(число) { return число * число * число; } Эта функция называется куб и имеет один формальный аргумент число. При вызове этой функции вместо формального аргумента подставляется его фактическое значение, функция выполняет возведение этого значения в куб и возвращает полученное число оператором return.
Обычно функции описывают в головной части документа. Описание функции не означает её немедленного выполнения, тело функции будет выполняться только тогда, когда какой-либо оператор будет содержать вызов этой функции. Например, функция из предыдущего примера вызвается так: x = куб(5); В результате переменная x получит значение 125.
Задание 3
Решение предыдущего задания оформите в виде функций.