Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Калькулятор - файл пояснения к заданию Калькулятор.doc


Загрузка...
Калькулятор
скачать (17.2 kb.)

Доступные файлы (3):

pic01.JPG6kb.26.10.2008 23:35скачать
zadacha 1.html2kb.26.10.2008 23:35скачать
пояснения к заданию Калькулятор.doc61kb.26.10.2008 23:35скачать

пояснения к заданию Калькулятор.doc

Реклама MarketGid:
Загрузка...

Вычисления с помощью JavaScript


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



Программирование данного задания включает два этапа: описание формы на языке HTML и создание функции для обработки элементов формы на языке JavaScript. Рассмотрим код HTML:

<form name="f1" action="">

<table border=0>

<tr>

<td><input type=text name="a" value="0"></td>

<td>

<select name="z">

<option value="s">+

<option value="v">-

<option value="u">*

<option value="d">/

</select>

</td>

<td><input type=text name="b" value="0"></td>

<td><input type=button name="r" value="=" onClick="calculate()"></td>

<td><input type=text name="rez" value="?"></td>

</tr>

</table>

</form>

  • Разметка формы осуществлена с помощью таблицы.

  • Форме и каждому ее элементу назначено имя с помощью опции name.

  • Значения по умолчанию в текстовых полях заданы с помощью опции value.

  • Каждый пункт списка обозначен с помощью опции value.

  • Надпись на кнопке задана с помощью опции value.

  • Имя функции на языке JavaScript выполняемое при нажатии на кнопку задано с помощью опции onClick.

Рассмотрим код функции на языке JavaScript:

<SCRIPT LANGUAGE="javascript">

задаем название функции

function calculate() {

объявляем переменные

var a;

var b;

копируем значения переменных из текстовых полей формы

a=document.f1.a.value;

b=document.f1.b.value;

проверяем какой арифметический знак выбран и выполняем вычисление

if (document.f1.z.value == 's') document.f1.rez.value=a*1+b*1;

if (document.f1.z.value == 'v') document.f1.rez.value=a-b;

if (document.f1.z.value == 'u') document.f1.rez.value=a*b;

if (document.f1.z.value == 'd') document.f1.rez.value=a/b;

}

</SCRIPT>

Задание


Создать калькулятор следующего вида:

число




a 




число a




сумма




результат

1

2

3

4




b 




число b




среднее




5

6

7

8




c 




число c




произв.




9

0




d 




число d




максимум



^

Функции калькулятора


  • кнопки с цифрами от 0 до 9 выполняют набор в поле «число»;

  • кнопки «a », «b », «c », «d » передают данные из поля число в поля «число a», «число b», «число c», «число d» соответственно;

  • кнопка «сумма» выполняет суммирование чисел a, b, c, d и полученное значение отображает в поле «результат»;

  • кнопка «среднее» находит среднее значение для чисел a, b, c, d и полученное значение отображает в поле «результат»;

  • кнопка «произв.» вычисляет произведение чисел a, b, c, d и полученное значение отображает в поле «результат»;

  • кнопка «максимум» выбирает наибольшее из чисел a, b, c, d и полученное значение отображает в поле «результат».
^

Требования к оформлению


Создать несколько альтернативных стилей для тэгов TD и INPUT и применить их для оформления элементов калькулятора:

  • к ячейкам цифрового поля применить настройки

border: double orange 3pt;

padding: 1pt 1pt 1pt 1pt;

background-color: yellow;

  • к кнопкам цифрового поля применить настройки

border: outset orange 2pt;

background-color: darkred;

color: aqua;

font-weight: bold;

font-family: arial;

  • к кнопкам вычисления результата применить настройки

border: outset green 2pt;

padding: 1pt 1pt 1pt 1pt;

background-color: lightgreen;

color: darkred;

font-weight: bold;

font-family: arial;
^

Настройки оформления:


font-family: Arial

font-size: 12pt

font-size: 12px

font-style: italic

font-weight: bold

color: red

margin-left: 3pt

margin-right: 3pt

margin-top: 3pt

margin-bottom: 3pt

text-transform: uppercase

text-transform: lowercase

text-transform: capitalize

text-decoration: underline

text-decoration: line-through

text-decoration: blink

text-align: center

px

background-color: yellow

background-image: url(pic.jpg)

border-top-width: thin

border-bottom-width: medium

border-left-width: thick

border-right-width: 5px

border-width: 5pt

border-left-color: blue

border-color: transparent

border-style: inset

border-style: outset

border-style: ridge

border-style: groove

border-style: dashed dotted double solid

border-left-style: double




Скачать файл (17.2 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации