ИЗВЕСТИЯ
ПЕНЗЕНСКОГО ГОСУДАРСТВЕННОГО ПЕДАГОГИЧЕСКОГО УНИВЕРСИТЕТА имени В. Г. БЕЛИНСКОГО ФИЗИКО-МАТЕМАТИЧЕСКИЕ И ТЕХНИЧЕСКИЕ НАУКИ № 13 (17) 2009
IZVESTIA
PENZENSKOGO GOSUDARSTVENNOGO PEDAGOGICHESKOGO UNIVERSITETA imeni V. G. BELINSKOGO PHYSICAL, MATHEMATICAL AND TECHNICAL SCIENCES № iS (i7) 2009
УДК 681.142.3(075)
МАТЕМАТИЧЕСКИЕ АЛГОРИТМЫ HA JavaScript
© А. В. ДИКОВ
Пензенский государственный педагогический университет им. В. Г. Белинского, кафедра информатики и методики преподавания информатики e-mail: dikov.andrei@gmail.com
Диков А. В. - Математические алгоритмы на JavaScript // Известия ПГПУ им. В. Г. Белинского. 2009. № 13 (17). С. 84-88. - В языке JavaScript среди прочих объектов выделяется объект Math, который обладает множеством математических свойств и методов. Таким образом открывается возможность использования языка веб-программирования для решения математических задач.
Ключевые слова: веб-программирование, JavaScript, математические алгоритмы
Dikov А. V. - Mathematical algorithms on JavaScript // Izv. Penz. gos. pedagog. univ. im.i V. G. Belinskogo. 2009.
№ 13 (17). P. 84-88. - Object Math marks among other objects of JavaScript. It has many mathematical methods and properties. Hence there is an opportunity to use web-programming language for solving mathematical problems.
Keywords: web-programming, JavaScript, mathematical algorithms.
Хорошо известно, что базовой технологией создания веб-страниц является HTML - язык разметки гипертекста. Основу этой технологии составляет процесс размещения на странице веб-дизайнером различных элементов, таких как заголовки, абзацы, списки, таблицы, рисунки и так далее. HTML с помощью тегов не только определяет тип элемента, но и придает ему стилевое оформление, то есть внешний вид. Если заложенный в теги формат не устраивает веб-дизайнера, то он прибегает к каскадным таблицам стилей (CSS). Технология HTML позволяет создавать только статичную страницу, без динамических эффектов и интерактивности. Чтобы внедрить интерактивные элементы, необходимо знакомство с технологией скриптов, например, JavaScript. Язык веб-программирования JavaScript включает в себя те же управляющие конструкции, что и любой алгоритмический язык: линейную, разветвленную и циклическую. Переменные в JavaScript можно (но не обязательно) объявлять с помощью служебного слова var, после которого следует имя переменной или нескольких переменных, разделенных запятой. Имена переменных, как и все другие элементы языка чувствительны к регистру. var x, y,z
var угол, радиус, длина
Числовым переменным могут быть даны следующие типы значений:
1. Целые числа и с плавающей запятой var пи = 3.14 var радиус = 5.06 / 2
document.write (“Площадь круга = “ + пи * радиус *
радиус + “<br>,)
//научная запись нч = 3.1415782e + 21
document.write (“Научная запись ”, нч,“<Ьг>”)
// восьмеричные (первая цифра ноль) var вч = 015
document.write (“015”, “<SUB>8</SUB>”, “->”, вч, “<br>”) //16-ричные (первая цифра ноль) var шч = 0x23
document.write (“0x23”, “<SUB>16</SUB>”, “->”, шч, “<br>”)
Свойства MAX_VALUE и MIN_VALUE объекта Number возвращают информацию о максимальном и минимальном числами, с которыми может оперировать JavaScript.
document.write ('Максимальное число JavaScript = ', Number.MAX_VALUE, “<BR>”)
document.write ('Минимальное число JavaScript = ', Number .MIN_VALUE, “<BR>”)
, Примеры работы с переменными и значениями - Mozilla Firefox
Файл Правка Вид Журнал Закладки Инструменты Справка
О
Площадь круга = 20.098825SSSW9995 Научная запись 3.1415782е+21 01?s->13 0x23i6->35
Максимальное число JavaScript = 1.797б931348б23157е+308 Минимальное число JavaScript = 5е-324
Над числами определены следующие операции: умножение (*), деление (/), остаток от деления (%),
сложение (+), вычитание (-). Например, 5*х-7%2+х/5
2. Неопределенное значение (undefined)
Бывают случаи при разработке и отладке сценария, когда JavaScript выдает сообщение undefined. Это означает, что запрашиваемое значение не определено или не задано.
3. Бесконечность (Infinity/-Infinity)
Иногда JavaScript в качестве значения математической функции или выражения возвращает слово Infinity, что означат бесконечность. Например, alert (Math.log(O)); alert (-1/0)
4. NaN(Not a Number - не число)
Если в качестве значения выражения JavaScript выдает NaN, это означает, что в результате вычисления математического выражения не получается числового значения. Например, alert (Math.sqrt (-1))
Функция isNaN может проверить, не является ли проверяемое значение числом? var x=prompt (“Введите какое-либо значение") if (isNaN (х)) alert (“Вы ввели нечисловое значение")
Рассмотрим примеры создания веб-страниц с размещенными интерактивными элементами для организации вычислений. Разработаем сценарии на JavaScript, обрабатывающие события, связанные с действиями посетителей веб-страницы.
Вспомним из школьного курса математики алгоритм решения линейного уравнения. алг решение линейного уравнения нач цел a,b вещ x
ввод a,b если a=0 и b=0 то
| вывод «решений бесконечно много»
все
если a=0 и b^0 то
| вывод «решений нет»
все
если a^0 то
x :=
I
I вывод «x = », x
все
кон
<html>
<head>
<style> INPUT, SELECT {font-size:14pt} </style> <script language="JavaScript" type="text/ JavaScript"> function очистить () { document.forms[0].reset() document.forms[0].a.value="" document.forms[0].b.value=""
}
function показать_решение_уравнения () {
a=document.forms[0].a.value
b=document.forms[0].b.value
уравнение=а + “x + “ + b + “ = 0"
document.forms[0].eqv.value=ypaBHeHMe
if ((a==0) && (b==0)) document.forms[0].x.value=
'решений бесконечно много'
if ((a==0) && !(b==0)) document.forms[0].x.value=
'нет решения'
if (!(a==0)) document.forms[0].x.value=-b/a
}
</script>
</head>
<body style="font-size: 14pt" >
<H1 align=center>Пpимep 1. Решение линейного уравнения ax + b = 0</H1>
<form>
<div align="center">
<Р>Введите значение коэффициента a <input name="a" type="text" size="3" value="7" > </P> <Р>Введите значение коэффициента b <input name="b" type="text" size="3" value="9"> </P>
<input type="button" value="Покaзaть решение" onClick="покaзaть_peшeниe_ypaвнeния ()">
<input type="button" value="Очистить" оп^^^^исти™ ()">
<Р>Для уравнения <input name="eqv" type="text" size="15" readonly>
x= <input name="x" type="text" size="30" readonly> </P>
</div>
</form>
</body>
</html>
JavaScript поддерживает не только алгоритмическую парадигму, но и современную объектную. Обращение к свойствам и методам объектов происходит через точечную запись. В функции очистить и пока-зать_решение_уравнения встречается конструкция типа documentforms[0].a.value, которая возвращает введенное посетителем значение в соответствующий элемент (объект) формы (в данном примере в текстовое поле с именем a).
В JavaScript существует много объектов, но рассмотрим пока только объект Math, свойства и методы которого позволяют производить большое число математических операций.
Свойство Описание Значение
Math.E e 2.718281828459045
Math.LN2 ln 2 0.6931471805599453
Math.LN10 ln 10 2.302585092994046
Math.LOG2E lg2e 1.4426950408889634
Math.LOG10E lg10e 0.4342944819032518
Math.PI 3.141592653589793
Math.SQRT1_2 0.7071067811865476
Math.SQRT2 ■h 1.4142135623730951
Метод Описание Значение
Math.abs (a) 1 a 1 абсолютное значение аргумента (модуль)
Math.acos (a) arccos a арккосинус аргумента в диапазоне от 0 до п
Math.asin (a) arcsin a арксинус аргумента в диапазоне от -п до п. 2 2
Math.atan (a) arctg a арктангенс аргумента в диапазоне от _п до п. 2 2
Math.atan2 (a,ß ) arctg a а,в - декартовы координаты.
Math.ceil (a) наименьшее целое, большее или равное а
Math.cos (a) cos a косинус аргумента
Math.exp (a) ea
Math.floor (a) наибольшее целое, меньшее или равное а
Math.log (a) ln a натуральный логарифм числа а
Math.max (a,ß) максимальное значение из а и в
Math.min (a,ß) минимальное значение из а и в
Math.pow (a,ß) aß а в степени в
Math.random () случайное число из диапазона от 0 до 1
Math.round (a) целое число, ближайшее к а
Math.sin (a) sin a синус а
Math.sqrt (a) ■Ja
Math.tan (a) tg a
Math.toString (a) строковое представление а
Где а - число, либо числовая переменная или выражение.
Следующий скрипт реализует алгоритм нахождения значения функции у = 5 х2 + 7 х на отрезке от а до Ь с шагом й.
алг табулирование функции у = 5 х2 + 7 х нач цел а, Ь вещ h | ввод а, Ь, h
| |нц для х от а до Ь шаг h
| | у := 5 * Math.pow (х, 2) + 7 * х
| | вывод у
| кц
кон
Файл Правка Вид Журнал Закладки Инструменты Справка
2
Пример 2. Табулирование функции у=5х*+7х
Введите значение а левого конца отрезка табулирования 7 Введите значение Ъ правого конца отрезка табулирования 9 Введите значение I шага табулирования 0.2 Протабулироваты Очистить
для х = 7у = 294 Г,
ДЛЯ X = 7.2 у = 309.6 Ü
ДЛЯ X = 7.4 у = 325.6 ,
<html>
<head>
<style> INPUT, SELECT {font-size: 14pt} </style> <script language="JavaScript" type="text/JavaScript"> function очистить () { document.forms[0].a.value="" document.forms[0].b.value="" document.forms[0].h.value="" длинa_спискa=document.forms[0].tab_list.length for 0=0;к=длина_списка^++) document. forms[0].tab_list.options[0]= null
}
function show_tab () { a=parselnt(document.forms[0].a.value) b=parselnt(document.forms[0].b.value) h=parseFloat(document.forms[0].h.value) i=0
for (x=a;x<=b;x=x+h) {
y=5 * Math.pow (x, 2) + 7 * x t="для x = “ + Math.round (x*10) / 10 + “ y = “ + Math.round (y*10) / 10
document.forms[0].tab_list.options[i]= new Option(t) i ++
}
}
</script>
</head>
<body style="font-size: 14pt" >
<H1 align=center>Пpимеp 2. Табулирование функции y=5x<sup>2</sup>+7x</H1>
<form>
<div align="center">
<Р>Введите значение a левого конца отрезка табулирования
<input name="a" type="text" size="3" value="7" > </P> <Р>Введите значение b правого конца отрезка табулирования
<input name="b" type="text" size="3" value="9"> </P> <Р>Введите значение h шага табулирования <input name= "h" type= "text" size= "3" value= "0.2 "> </P> <P><input type="button" value="Пpотaбулиpовaть,,
onClick="show_tab()">
<input type="button" value="Очистить" on¿lick="очистить()"> </P>
<select name='tab_list' size=3 > </select>
</div>
</form>
</body>
</html>
В функции show_tab есть строка, которая заполняет список, размещенный в форме значениями функции для соответствующего аргумента document.forms[1].tab_list.options[i]= new Option (t) где forms[1] - вторая форма в коллекции форм, tab_list - имя элемента select, options - коллекция пунктов списка, i - новый пункт списка с номером i,
Option (t) - конструктор
t - переменная, значение которой будет присвоено новому элементу списка
Динамическое изменение списка
Для добавления нового пункта в размещенный список формы используется конструктор Option
a.options[P] = new Option ([ у1, [у2, [у3, [у4]]]])
где а - имя элемента select;
Р - номер нового пункта списка Р; у1 - строка, которая размещается как пункт списка, можно обращаться к этому значению, используя свойство text;
Y2 - значение, которое передается серверу при выборе данного пункта, можно обращаться к этому значению, используя свойство value;
- пункт выбран или нет по умолчанию (true/ false), можно обращаться к этому значению, используя свойство defaultSelected;
Y4 - пункт выбран или нет в текущий момент (true/ false), можно обращаться к этому значению, используя свойство selected.
для изменения значения пункта списка скриптом используется свойство text. для определения номера выбранного пункта списка используется свойство selectedlndex объекта select. Элементы в список можно не только добавлять, но и удалять с помощью служебного слова null.
a.options[P] = null
В функции очистить следует обратить внимание на необходимость использования переменной дли-на_списка, хранящей число пунктов (значений функции) заполненного списка. После удаления очередного пункта списка, число его пунктов сокращается на 1. То есть длина списка во время удаления его пунктов становится величиной динамической. Поэтому в цикле необходимо использовать зафиксированное значение первоначальной длины для з адания числа п овто-рений операции удаления.
Задания-проекты для самостоятельной работы
Проект 1. «Квадратное уравнение».
Разработайте сценарий для веб-страницы, который по заданным коэффициентам а, Ь, с вычисляет и выводит на страницу корни квадратного уравнения.
Проект 2. «Табулирование любой функции». Усовершенствуйте пример 2 таким образом, чтобы табулирование осуществлялось для любой введенной посетителем функции. Дополнительно предусмотрите, чтобы сценарий определял монотонность функции на заданном отрезке и находил наибольшее и наименьшее значение.
Проект 3. «Свойства числа». Разработайте сценарий для веб-страницы, который по введенному числу определяет, к какой группе оно относится: простые, четные, нечетные и добавляет это число в соответствующую группу (список).
Проект 4. «Формулы». Разработайте сценарий для веб-страницы, который размещает на веб-странице список с названиями следующих функций: секанс, косеканс, котангенс, арксинус, арккосинус, арксеканс, арккосеканс, арккотангенс, гиперболический синус, гиперболический косинус, гиперболический тангенс, гиперболический секанс, гиперболический косенканс, гиперболический котангенс, гиперболический арксинус. Организуйте ввод числа и вывод в текстовое поле значения указанной посетителем функции.
Проект 5. «Приближенные методы решения нелинейного уравнения». Разработайте сценарий для веб-страницы, который находит корень нелинейного уравнения с одной переменной с заданной точностью приближенным методом. Входные данные: уравнение; концы отрезка, на котором локализован один корень; точность. Выходные данные: корень уравнения.
Проект 6. «Перевод единиц». Разработайте сценарий для веб-страницы, который предлагает перевести введенное число из одной системы в другую: из градусов в радианы, из градусов по Цельсию в градусы по кельвину, из одной системы счисления в другую, и так далее.
Проект 7. «Определитель матрицы». Разработайте сценарий для веб-страницы, который размещает на странице квадратную матрицу какого-либо размера в виде совокупности списков. Списки предоставляют посетителю удобную возможность быстрого заполнения матрицы элементами. Напишите функцию, которая вычисляет определитель матрицы.
det
«12
а22
«32
а11 (а22а33 а32а23 )
«12 С«21«33 «31«23) + «13 («21«32 «31«22)
11
а
а
Проект 8. «Однорукий бандит». Разработайте сценарий для веб-страницы, который выводит в текстовые поля три случайных целых числа в диапазоне от
0 до 9 включительно по нажатию посетителем кнопки «вращать». В случае выпадения трех одинаковых чисел, сценарий увеличивает число выигрышей. кроме этого, сценарий ведет подсчет числа попыток.
5
7
3
число попыток:
: □
число выигрышей:
: □
вращать
Выпавшие варианты:
5 3 l ж.
2 l 8
1 4 0 —
5 3 l d
Проект 9. «Кривая дракона». Разработайте сценарий для веб-страницы, который генерирует последовательность из N чисел, отражающую ход кривой дракона, то есть очерёдность поворотов кривой. Присвоим код 1 для поворота налево и код 3 для поворота направо. для кривой на рисунке последовательность следующая: 1 1 3 1 1 3 3
номер которого получается делением номера очередного четного поворота на 2. Например, следующий член в нашей последовательности имеет порядковый номер 8. Это число четное, значит, сам член равен члену с номером 4 (8 / 2), а это есть 1. Таким образом, восьмой член последовательности равен 1.
В случае, когда номер очередного поворота нечетный, член последовательности равен остатку от деления данного номера на число 4. Например, следующий неизвестный член последовательности имеет номер 9. Это нечетное число. Поэтому сам член последовательности равен 1.
Проект 10. «Магазин». Разработайте сценарий для веб-страницы, который формирует корзину выбранного посетителем периферийного оборудования для ПК.
Принтеры Мониторы
HP Color LaserJet 2600n * LG Flatron L226WTQ-WF *
HP LaserJet 1018 Samsung SyncMaster 225BW и
Lexmark X2350 View Sonic VX2255w mb
Epson Stylus C110 — Acer X221W 1
Rcoh Aficio CL7100D zi 1 Envision G22LWK d
Интерактивные доски
SMARTboard Interw rite SchoolBoard PolyVision Webster Promethean ACTIVboard 50 —'
ACTIVboard 64
Выбранные товары (корзина)
H
5
6 4 Удалить выбранный товар |
3
1
Валюта
рубли т
Кривую можно продолжить дальше, и при этом окажется, что если очередной поворот имеет четный номер, то он равен тому члену последовательности,
Стоимость выбранного товара ЕГ1 Общая стоимость покупки ИГ1
8
7
2