Форматированный вывод в JavaScript

Что такое JavaScript

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

В предыдущей статье мы создали простой калькулятор. И он даже работает.

Разумеется, даже пользователю без математических и инженерных наклонностей не хватит тех четырёх операций, которые мы реализовали. Но это не проблема - при желании количество операций вы можете увеличить сами.

А проблема в другом: если мы в результате получаем дробное число с большим количеством знаков после запятой, то выводится максимально возможное количество этих знаков и читать такое число не совсем удобно. К тому же такая точность в большинстве случаев не нужна.

Ну например, мы делим 1 на 7. Наш калькулятор выведет:

0.14285714285714285

Ну и зачем нам такая точность? Только глаза разбегутся - а потом собирай их в кучу))) Нас бы вполне устроило 0.1428 или даже 0.14. Как в JavaScript добиться такого результата?

Вот об этом сегодня и поговорим.

Итак, в JavaScript есть только один числовой тип данных, который является также объектом - это Number. У этого объекта есть стандартные методы, которые упрощают жизнь программиста JavaScript при вводе-выводе данных.

Для решения нашей задачи нужен метод toFixed. Использовать его можно, например, так:

//Объявляем вещественную переменную х
//с большим количеством знаков после запятой
  var x = 1.056132456879;        
 
//Используем метод toFixed объекта Number
//для вывода числа с фиксированным 
//количеством знаков после запятой
  alert(x.toFixed(4));  //Выведет 1.0561

В качестве параметра в метод можно передать число - количество знаков после запятой. Если не передавать никакой параметр, то это будет равносильно тому, что вы передали 0.

При необходимости можно использовать другой метод - toPrecision, который устанавливает длину числа. То есть в числе, которое будет выведено на экран, будет такое количество значащих цифр, которое указано в параметре, передаваемом в данный метод. Пример:

var x = 1.056132456879;        
 
x = x * 10;           //x = 10.56132456879
alert(x.toPrecision(4));  //Выведет 10.56
x = x * 10;           //x = 105.6132456879
alert(x.toPrecision(4));  //Выведет 105.6

Теперь вы можете доработать наш калькулятор таким образом, чтобы он не выводил слишком большое количество знаков после запятой.

Ну а изучить JavaScript во всей красе вам поможет этот видеокурс:

Исходный код 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).toFixed(6);
      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>

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

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

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

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

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