Калькулятор

Автор: Ольга Горбачёва

Вот интересный вариант создания на своём сайте калькулятора. С его помощью можно делать любые вычисления (сложение, вычитание, деление и др.действия). Данный пример сделан в формате языка HTML.

Первым делом подключаем сценарий:

(он должен находиться в пределах дескриптора <head> или <body>).

Создаём функцию

function kalk(){

и вводим переменную

                var n1=document.getElementById('num1').value
                var n2=document.getElementById('num2').value
                n1=parseFloat(n1)
                n2=parseFloat(n2)
                var a=document.getElementById('act').value
                var r=0

Оператор if используется для сравнения данных (пример: если а=1,то r=n1(первое число)+n2( второе число)-это будет результат сложения. Так же и с остальными действиями.

                if(a==1) r=n1+n2
                if(a==2) r=n1-n2
                if(a==3) r=n1*n2
                if(a==4){
                               if(n2==0){

(при делении на 0-высветиться сообщение для пользователя).

                                               alert("на 0 делить нельзя")
                                               document.getElementById("num2").value=""
                                               document.getElementById("num2").focus()
                               }
                               else r=n1/n2
                }
                if(a==5) r=n1/100*n2
                if(a==6) r=Math.pow(n1,n2)
                if(a==7) r=Math.pow(n1,0.5)

                document.getElementById("result").value=r

поиск элемента на странице по идентификатору и присвоение значения с переменной r.

}
</script>

</head>

<body>
<h1>Калькулятор</h1>

(Формы применяются для сбора данных с помощью метода post; с помощью action-присваивают адрес URL файла, который предназначен для автоматической обработки данных формы), только в нашем случае он не нужен.

<form id="form1" name="form1" method="post" action="">
<table width="400" border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>число1</td>

В дескрипторе каждого поля(<input type>) необходимо указывать его имя(name) и идентификатор(id).

      <td><input type="text" name="num1" id="num1" /></td>
    </tr>
    <tr>
      <td>число2</td>
      <td><input type="text" name="num2" id="num2" /></td>
    </tr>
    <tr>
      <td>действие</td>
      <td><select name="act" id="act">

Option value - это элемент поля со списком. Значение выбранного элемента списка, которое будет отправлено на Web–сервер после подтверждения данных формы.

<option value="1">сложение</option>
        <option value="2">вычитание</option>
        <option value="3">умножение</option>
        <option value="4">деление</option>
        <option value="5">процент</option>
        <option value="6">степени</option>
        <option value="7">корень</option>
      </select></td>
    </tr>
    <tr>
      <td>результат</td>
      <td><input type="text" name="result" id="result" /></td>
    </tr>
    <tr>

Форма button(кнопка) предназначена для отправки данных на Web-сервер, в нашем случае отправка не выполняется, а запускается функция kalk(). При нажатии на кнопку вычислить - мы получаем результат.

Полезные ссылки:

Курсы Веб-дизайна в Луганске