Практическое занятие № 10

Тема: Выполнение расчетов с использованием JavaScript
Цель работы: на практике отработать принципы создания интерактивных WEB-страниц с элементами расчетов

Ход работы

Задание 1. Работа с классом Math

Пользователь в поля для исходных данных вводит значения и с помощью нужной кнопки рассчитывает требуемое значение. Если функция рассчитывается на основании одного аргумента, то его нужно вводить в первое поле.

Кнопки для выдачи результатов обрабатывают значение в поле результата. Кнопка "Точность" выдает окно для ввода нужной точности и округляет результат с этой точностью.

Кнопка "СЕ" очищает все поля и ставит курсор в первое поле.

Указания: на страницу добавьте форму, на которой разместите таблицу размером 8Х4, шириной 50% и задайте выравнивание по центру. В таблице разместите надписи и визуальные компоненты. Для текстовых полей задайте начальные значения (щелкните на поле два раза и введите начальное значение). Кнопки создавайте с помощью компонента "Расширенная кнопка". Для каждой кнопки укажите ширину 70px.

Для каждой кнопки нужно написать функцию, вычисляющую определенные значения. Перейдите на закладку "Код", в разделе "Head" вставьте тег для написания скрипта:

<script type="text/javascript">
</script>

При написании кода для обращения к элементам на форме будем использовать их имена.

В тег добавьте текст функций:

    //функция для кнопки sin (синус)

function sinus()
    {
a=+window.document.form1.T1.value;
window.document.form1.T3.value=Math.sin(a);
    }

    //функция для кнопки cos (косинус)

function cosinus()
    {
a=+window.document.form1.T1.value;
window.document.form1.T3.value=Math.cos(a);
    }

    //функция для кнопки tg (тангенс)

function tangens()
    {
a=+window.document.form1.T1.value;
window.document.form1.T3.value=Math.tan(a);
    }

    //функция для кнопки ctg (котангенс)

function cotangens()
    {
a=+window.document.form1.T1.value;
if (a>0)
window.document.form1.T3.value=1/Math.tan(a)
else
     {
alert("Нельзя рассчитать котангенс из нуля!");
window.document.form1.T1.focus();
window.document.form1.T1.select();
     }
    }

    //функция для кнопки точность
function tochnost()
    {
a=+window.prompt("Введите точность","2");
b=+window.document.form1.T3.value;
window.document.form1.T3.value=b.toFixed(a);
    }

    //функция для кнопки ceil (округлить вверх)
function okruglvverh()
    {
a=+window.document.form1.T3.value;
window.document.form1.T3.value=Math.ceil(a);
    }

    //функция для кнопки floor (округлить вниз)
function okruglvniz()
    {
a=+window.document.form1.T3.value;
window.document.form1.T3.value=Math.floor(a);
    }

    //функция для кнопки round (округлить)

function okrugl()
    {
        a=+window.document.form1.T3.value;
        window.document.form1.T3.value=Math.round(a);
    }

//функция для кнопки СЕ (стереть)
    function steret()
    {
        window.document.form1.T1.value=0;
        window.document.form1.T2.value=0;
        window.document.form1.T3.value=0;
        window.document.form1.T1.focus();
        window.document.form1.T1.select();
    }

Для присваивания функции кнопке перейдите на закладку "С разделением", выделите кнопку. В результате в верхней части выделится тег данной кнопки. Добавьте в него вызов функции для события onclick:

onclick="имя_функции()"

Задание 2. Конвертер валют

Cоздайте страницу для конвертирования курса валют. На странице разместить форму вида:

Для кнопки написать функцию, которая выполняет перевод введенной суммы по курсу и отображает результат в отдельном поле.

Указания: на новую страницу с помощью команды Вставка - Форма нанесите новую форму. Удалите с формы созданные кнопки. На форму добавьте таблицу. Для этого выберите команду Таблица - Вставить - Таблица. Введите количество строк=7, столбцов=2, ширина=20%, выравнивание=по центру, ширина границы=0.

С помощью команды Вставка - Форма нанесите на форму два поля, восемь переключателей и кнопку.

Поля по умолчанию равны 0. Выполните двойной щелчок на каждом поле и введите для них 0 в поле "Начальное значение".

Переключатели в разных колонках должны работать как независимые группы. Для этого каждому переключателю отдельной группы нужно присвоить одинаковые имена. Щелкните на переключателе два раза и в поле Имя группы введите имя (для первой группы введите R1, для второй группы  - R2). Первые переключатели в каждой группе должны быть по умолчанию включены. Щелкните два раза на каждом из них ив окне свойств укажите значение "Выбран".

Для изменения надписи на кнопке щелкните на ней два раза и введите текст надписи.

Сохраните созданную страницу в отдельную папку.

В разделе HEAD страницы добавьте код функции конвертирования величин:

Предположим, что курсы валют следующие:

1 доллар = 50 рублей;

1 евро = 60 рублей;

1 рубль = 1 рубль;

1 гривна = 2 рубля.

В теге <form> присвойте имя форме name=form1.

Перейдите на закладку С разделением. В нижней части выделите кнопку. В верхней части выделится тег описания кнопки. Добавьте в этот тег вызов созданной функции:

    onclick="calc()"

Проверьте работу страницы в браузере.

Задание 3. Выполнение простых расчетов на форме

Пользователь может ввести сумму вклада, выбрать срок вклада, тип вклада и сумму планируемого ежемесячного пополнения (используется, если выбран тип вклада "с пополнением").

Минимальная сумма вклада 500 грн. Минимальная сумма пополнения 50 грн.

После щелчка на кнопке "Рассчитать" в окне сообщения выдается сумма, которую получит вкладчик в качестве процентов. Результат выдать с точностью до 2 знаков.

Для расчета используйте следующие исходные данные:

	% с пополнением	% без пополнения
3 месяца	10	11
6 месяцев	12	13
9 месяцев	14	15
12 месяцев	16	17

Указания: на страницу добавьте форму.

Найдите тег создания формы и добавьте в него параметр, присваивающий форме имя:

<form . . . name="form1">

На форму добавьте таблицу размером 5х2, шириной 50% и выравниванием по центру. В таблицу добавьте надписи и визуальные компоненты. Для текстовых полей задайте начальные значения. Для этого щелкните два раза на поле и укажите начальное значение. Для выпадающих списков задайте перечень значений и укажите высоту в нужное число строк.

Сумма вклада должна быть не менее 500, а сумма пополнения не менее 50 грн. Напишем функцию, которая проверяет это условие. Перейдите на закладку "Код" и в разделе "Head" добавьте тег для скрипта:

<script type="text/javascript">
</script>

Между тегами введите текст функции:

Для присваивания этой функции полю перейдите на закладку "С разделением", выделите поле для ввода суммы вклада. В результате в верхней части окна выделится тег, описывающий это поле. Добавьте в него вызов функции для события onblur (потеря фокуса), указывая в качестве имени текущего элемента стандартное имя this.

Для первого поля:

<input type="text" name="T1" size="20" value="500" onblur="validate(this,500)">

Для второго поля:

<input type="text" name="T2" size="20" value="100" onblur="validate(this,50)">

Для кнопки нужно написать функцию, которая на основании заданных параметров рассчитываем сумму процентов и выдает ее в окне сообщения с точностью до 2 знаков. Функция имеет вид:

Для присваивания функции кнопке перейдите на закладку "С разделением", выделите кнопку. В результате в верхней части выделится тег данной кнопки. Добавьте в него вызов функции для события onclick:

<input type="button" value="Рассчитать" name="B1" onclick="calc()">

Внесите изменения в код таким образом, чтобы обращение к элементам на форме осуществлялось по номерам компонентов, а не по их именам.

Указания: в исходный код скрипта внесите изменения, заменяя текст

имя_формы.имя_компонента

на текст

forms[0].components[i]

Обратите внимание на регистр символов в именах формы и компонентов.

После замены проверьте работу кода скрипта на странице.

Задание 4. Работа с полями как с массивом

Создайте страницу для выполнения расчетов над массивом полей. На странице разместите форму вида:

Указания: на новую страницу с помощью команды Вставка - Форма нанесите новую форму. Удалите с формы созданные кнопки. На форму добавьте таблицу. Для этого выберите команду Таблица - Вставить - Таблица. Введите количество строк=6, столбцов=3, ширина=410 точек, выравнивание=по центру, ширина границы=0.

С помощью команды Вставка - Форма нанесите на форму 15 полей для исходных данных и поле для результата. Для задания ширины поля щелкните на нем два раза и укажите ширину в 5 символов.

Добавьте 4 переключателя. Первый переключатель должен быть по умолчанию включен. Щелкните два раза на нем и в окне свойств укажите значение "Выбран".

Добавьте две кнопки. Для изменения параметров кнопки щелкните на ней два раза, введите текст надписи и укажите тип кнопки. Для первой задайте тип "Обычная", для второй - тип "Сброс".

Сохраните созданную страницу в отдельную папку.

Для обращения к элементам формы присвойте форме имя. Для этого в теге <form> укажите параметр name="form1".

В разделе head введите код функции для выполнения расчета:

Для присваивания первой кнопке созданной функции в тег кнопки добавьте параметр

onclick=calc(15) //вызов функции для 15 полей