Простой калькулятор на JavaScript

Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Итак, кое-чему мы уже научились. Этих знаний вполне достаточно, чтобы создать какую-нибудь простенькую программку на JavaScript (разумеется, если вы уже изучили хотя бы HTML).

Предлагаю вам немного потренироваться и написать вместе со мной простейший калькулятор.

Для того, чтобы он отображался на странице, я создал таблицу и раскрасил её ячейки. В первом столбце поместил описания. Во втором - поля для ввода данных.

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

Как это всё реализовано - см. в видео.

Исходный код HTML-страницы с калькулятором

<html>
<head><title>Калькулятор</title>

<script language="JavaScript">
<!--
//Поучение пользовательских данных и вычисление результата
function GetResult(oper)
{ 
  var n1 = 0;
  var n2 = 0;
    	
  n1 = eval(calcform.num_01.value);   //Число 1
  n2 = eval(calcform.num_02.value);   //Число 2
  
  switch (oper)                       //Проверяем, какая кнопка
  {                                   //была нажата
    case 1:   //Кнопка +
    {
      calcform.res.value = n1 + n2;
      break;
    }
    case 2:   //Кнопка -
    {
      calcform.res.value = n1 - n2;
      break;
    }
    case 3:   //Кнопка *
    {
      calcform.res.value = n1 * n2;
      break;
    }
    case 4:   //Кнопка /
    {
      calcform.res.value = n1 / n2;
      break;
    }
  }
}
// -->
</script>

</head>
<body>

<h3>Простой калькулятор</h3><hr>

<form name="calcform">

<table border cellpadding = 5 width=350 bgcolor="silver">

<tr>
  <td>Первый агрумент:</td>
  <td>
      <center>
      <input name="num_01" type="text" size="24" maxlength=16 value="1">
      </center>
  </td>
</tr>
<tr>
  <td>Второй агрумент:</td>
  <td>
  <center>
  <input name="num_02" type="text" size="24" maxlength=16 value="1">
  </center>
  </td>
</tr>
<tr>
  <td>Результат:</td>
  <td><center>
      <input name="res" type="text" size="24" maxlength=0>
      </center></td>
</tr>

</table>

<table border cellpadding = 10 width=350>

<tr bgcolor="yellow">
  <td><center>
  <input name="btnadd" type="button" value="  +  " onClick="GetResult(1)">
  </center>
  </td>
  <td><center>
  <input name="btnsub" type="button" value="  -  " onClick="GetResult(2)">
  </center>
  </td>
  <td><center>
  <input name="btnmul" type="button" value="  *  " onClick="GetResult(3)">
  </center>
  </td>
  <td><center>
  <input name="btndiv" type="button" value="  /  " onClick="GetResult(4)">
  </center>
  </td>
</tr>

</table>

</form>
</body>
</html>

Конечно, этот сценарий далёк от идеала. Во-первых, потому что калькулятор позволяет выполнять всего 4 операции. А во-вторых, потому что в сценарии не выполняются никакие проверки. Например, пользователь может вместо числа ввести строку. И тогда результат будет непредсказуем (скорее всего, произойдёт ошибка).

Однако профессиональное программирование на JavaScript - это тема отдельного большого курса. Получить который вы можете здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Подписаться на канал в YouTube

Вступить в группу "Основы программирования"

Подписаться на рассылки по программированию

Главная
Контакты