Согласие на обработку персональных данных.



04.09.2017
Новая задача Программа вычисления суммы.

03.09.2017
Новое видео Стековый калькулятор и обратная польская запись.

26.08.2017
Новая статья Версии Делфи.

23.08.2017
Новая статья Для кого пишется программа.

13.08.2017
Новая статья Стандарт C++: общие сведения.

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

Javascript + jQuery для начинающих ПРИМЕЧАНИЕ
Если вы уже созрели для того, чтобы всерьёз начать обучение языку JavaScript, то лучшего видеокурса вам не найти - от самого известного в рунете автора очень крутой обучающий курс Javascript + jQuery для начинающих в видеоформате

ПОЛУЧИТЬ

Итак, кое-чему мы уже научились. Этих знаний вполне достаточно, чтобы создать какую-нибудь простенькую программку на 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 для начинающих ПРИМЕЧАНИЕ
Если вы уже созрели для того, чтобы всерьёз начать обучение языку JavaScript, то лучшего видеокурса вам не найти - от самого известного в рунете автора очень крутой обучающий курс Javascript + jQuery для начинающих в видеоформате

ПОЛУЧИТЬ

Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика