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



04.11.2017
Новые видео и статья Функция Odd.

29.10.2017
Новые видео и статья Функция Low.

23.10.2017
Новая задача Даны натуральные числа от 1 до 33.

22.10.2017
Добавлен раздел Статьи по С/С++.

03.10.2017
Новая книга 1001 вопрос начинающего программиста.

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

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

ПОЛУЧИТЬ

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

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

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

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

ПОЛУЧИТЬ

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

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