JavaScript :: Числа
http://belarusweb.net
Основы создания сайтов

JavaScript :: Числа

Представление чисел в JavaScript

В отличие от многих других языков программирования в JavaScript не делается различий между целыми и вещественными числами. Все числа в JavaScript представляются значениями с плавающей точкой двойной точности в соответствии с 64-битным двоичным форматом IEEE 754, который позволяет работать с вещественными числами в диапазоне от ±1.7976931348623157*10308 до ±5*10-324 и целыми числами в диапазоне от -253 до 253 (см. рис. №1). При этом для записи отрицательных чисел используется знак 'минус', который не является частью синтаксиса чисел, а представляет собой унарный оператор смены знака (подробнее о нем мы поговорим позже).

Как и в других языках программирования, числа с плавающей точкой имеют ограниченную точность (16 разрядов после запятой), что может иногда приводить к неожиданным результатам (см. пример №1).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Сложности с точностью представления вещественных чисел</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>

	<p>
		Как и в других языках программирования, не все вещественные числа 
		в JavaScript могут быть представлены точно, что может сказываться 
		на итогах сравнения результатов математических операций с ними.
	</p>
	
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
    
    
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}











  
  
  
  
  
  
  
//Вычислим разность двух вещественных чисел
var x = 0.3 - 0.2;
var y = 0.2 - 0.1;

//Сравним результаты и преобразуем к строке 
rez_1 = (x==y).toString();

//А теперь сравним каждый результат с числом 0.1
rez_2 = (x==0.1).toString();
rez_3 = (y==0.1).toString();
 
//Находим абзацы по их id
var p_1=document.getElementById('p_1'); 
var p_2=document.getElementById('p_2'); 
var p_3=document.getElementById('p_3');

//Выведет false
p_1.innerHTML = '(x==y) => '+rez_1;
//Выведет false
p_2.innerHTML = '(x==0.1) => '+rez_2;
//Выведет true
p_3.innerHTML = '(y==0.1) => '+rez_3;
		
		
		
	

	
		
		
		
		

Пример №1. Сложности с точностью представления вещественных чисел в JavaScript

Как видно из примера, несмотря на довольно высокую точность представления вещественных чисел в JavaScript, в некоторых случаях все равно могут возникать неожиданные проблемы, т.к. многие числа не могут быть представлены абсолютно точно. Это связано с тем, что мы в основном привыкли вести расчеты в десятичной системе счисления, а компьютер перед вычислениями преобразует все числа в двоичную систему. Но не все вещественные числа могут быть точно преобразованы из десятичной системы счисления в двоичную, что и приводит к некоторой потере точности. Однако в большинстве случаев, когда нет необходимости сравнивать вещественные значения на равенство, точности представления вещественных чисел более, чем предостаточно.

Литералы целых чисел

По умолчанию для записи литералов целых чисел в JavaScript используется десятичная система счисления, однако разрешается записывать их в двоичной, восьмеричной и шестнадцатеричной системах счисления. При этом следует помнить, что вне зависимости от используемого формата представления, результат все равно будет отображаться в десятичном виде (см. пример №2).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Примеры целых чисел</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}











  
//Присвоили целое положительное число
var int_1 = 5;
//Присвоили целое отрицательное число в двоичной СС (-25 в 10-й СС)
var int_2 = -0b11001;
//Присвоили целое отрицательное число в 8-ной СС (-29 в 10-й СС)
var int_3 = -0o35;
//Присвоили целое положительное число в 16-ной СС (255 в 10-й СС)
var int_4 = 0XFF;
//Результат все равно отобразится в 10-й СС
var rez = int_1+int_2+int_3+int_4;
 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');

//Вставляем в них соответствующие значения
p_1.innerHTML = int_1;
p_2.innerHTML = int_2;
p_3.innerHTML = int_3;
p_4.innerHTML = int_4;	
p_5.innerHTML = rez;
		
		

Пример №2. Литералы целых чисел в JavaScript

Как видно из примера №2, синтаксис записи целых чисел в разрешенных системах счисления должен иметь следующий вид.

  • В десятичной системе счисления целые числа записываются в виде привычной нам последовательности цифр от нуля до десяти, например, 15, -33, +127.
  • В двоичной системе счисления запись целого числа должна начинаться с нуля и латинской буквы 'B' в верхнем или нижнем регистре (т.е. 0b или 0B), после чего должна идти последовательность нулей и единиц. Например, 0b01101, 0B1011, -0b1001. Если будут использованы другие цифры, интерпретатор сгенерирует сообщение об ошибке.
  • В восьмеричной системе счисления целое число должно начинаться с нуля и латинской буквы 'O' в верхнем или нижнем регистре (т.е. 0o или 0O), после чего должна идти последовательность цифр от нуля до семи. Например, 0o77, 0O35, -0O174. Если будут использованы цифры не входящие в данный диапазон, интерпретатор будет считать число записанным в десятичной системе счисления.
  • В шестнадцатеричной системе счисления запись целого числа должна начинаться с нуля и латинской буквы 'X' в верхнем или нижнем регистре (т.е. 0x или 0X), после чего должна идти символы последовательности 0123456789ABCDEF, представляющих данную систему счисления. При этом буквы также разрешается использовать в любом регистре. Например, 0x7F, 0XDD5A, -0xfF9. Если будут использованы цифры не входящие в данный диапазон, интерпретатор сгенерирует сообщение об ошибке.

Литералы вещественных чисел

Что касается записи литералов вещественных чисел, то в JavaScript для них используется привычный нам математический синтаксис: сперва записывается знак числа (плюс можно не указывать), затем последовательность цифр целой части, разделительная точка и последовательность цифр дробной части. Например, 0.33, .33, -123.45, -.123. Также допустима запись вещественных чисел в экспоненциальной форме. При этом для представления степени 10n используется латинская буква 'E' в верхнем или нижнем регистре (т.е. e или E), следующие за ней знак плюс (можно опускать) или минус и сам показатель степени в виде нуля или положительного целого числа (см. пример №3).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Примеры вещественных чисел</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}











  
//Положительное вещественное число
var float_num_1=123.45;    
//Отрицательное вещественное число
var float_num_2=-123.45;   
//Тоже самое, что и -0.45, т.к. единственный ноль разрешается опускать
var float_num_3=-.45;      
//Тоже самое, что и 123.45
var float_num_4=1.2345e2;  
//Тоже самое, что и 0.0012345
var float_num_5=1.2345E-3; 
 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');

//Вставляем в них соответствующие значения
p_1.innerHTML = float_num_1;
p_2.innerHTML = float_num_2;
p_3.innerHTML = float_num_3;
p_4.innerHTML = float_num_4;	
p_5.innerHTML = float_num_5;

		

Пример №3. Литералы вещественных чисел в JavaScript

Значения Infinity и -Infinity

Арифметические операции в JavaScript являются безопасными. Это значит, что при делении на ноль, выходе за доступный диапазон значений или потери значащих разрядов интерпретатор не будет возбуждать ошибки. Вместо этого он будет возвращать имеющиеся в его распоряжении специальные значения Infinity (положительная 'бесконечность'), -Infinity (отрицательная 'бесконечность') или NaN ('not a number', т.е. 'не число'), которые хранятся в одноименных предопределенных глобальных переменных (т.е. являются свойствами глобального объекта, о котором мы поговорим позже) и доступны только для чтения.

Так, если результат арифметической операции окажется больше верхней границы либо меньше нижней границы допустимого диапазона, интерпретатор вернет специальные значения Infinity или -Infinity. Тоже самое касается и деления на ноль: результатом деления положительных чисел будет Infinity, отрицательных - -Infinity (см. пример №4).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Значения Infinity и -Infinity</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	<p id="p_6"></p>
	<p id="p_7"></p>
	<p id="p_8"></p>
	<p id="p_9"></p>
	<p id="p_10"></p>
	
	<p>
		Специальные значения 
		<span class="blue_letter">Infinity</span>, 
		<span class="blue_letter">-Infinity</span> и 
		<span class="blue_letter">NaN</span> хранятся в 
		одноименных предопределенных глобальных переменных 
		и доступны только для чтения. 	
	</p>
	
	<p>
		Отрицательный и обычный ноль можно отличить, 
		сравнивая результы деления на них одного и 
		того же числа!
	</p>	
			
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
	
	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}











	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
//Результатом будет Infinity
var rez_1=1.7976931348623157e+308*2;    
//Результатом будет -Infinity
var rez_2=-1.7976931348623157e+308*2;

//Результатом будет Infinity
var rez_3=Infinity-23;
//Результатом будет -Infinity
var rez_4=0.003*-Infinity;
//Результатом будет Infinity
var rez_5=-7*-Infinity;

//Результатом будет обычный ноль
var rez_6=15/Infinity;
//Результатом будет отрицательный ноль
var rez_7=-15/Infinity;
//Результатом будет отрицательный ноль
var rez_8=-5e-324/2;

//Строгое сравнение вернет true
var rez_9 = rez_6===rez_7;
//Вернет false т.к. Infinity != -Infinity
var rez_10 = 5/rez_6==5/rez_7;

 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');
var p_6=document.getElementById('p_6');
var p_7=document.getElementById('p_7');
var p_8=document.getElementById('p_8');
var p_9=document.getElementById('p_9');
var p_10=document.getElementById('p_10');

//Вставляем в них соответствующие значения
p_1.innerHTML = '1.7976931348623157e+308*2 = '+rez_1;
p_2.innerHTML = '-1.7976931348623157e+308*2 = '+rez_2;
p_3.innerHTML = 'Infinity-23 = '+rez_3;
p_4.innerHTML = '0.003*-Infinity = '+rez_4;	
p_5.innerHTML = '-7*-Infinity = '+rez_5; 
p_6.innerHTML = '15/Infinity = '+rez_6;
p_7.innerHTML = '15/-Infinity = '+rez_7;
p_8.innerHTML = '-5e-324/2 = '+rez_8;
p_9.innerHTML = 'rez_6===rez_7 => '+rez_9;
p_10.innerHTML = '5/rez_6==5/rez_7 => '+rez_10;		

Пример №4. Значения Infinity и -Infinity в JavaScript

Как видно из примера №4, значения, представляющие математические бесконечности, ведут себя так, как и ожидается: сложение, вычитание, деление или умножение бесконечности на любое число дает в результате бесконечность соответствующего знака, а деление числа на бесконечность возвращает ноль.

Здесь стоит отметить одну тонкую особенность: деление положительного числа на -Infinity или отрицательного числа на Infinity возвращает так называемый отрицательный ноль, а деление положительного числа на Infinity и отрицательного числа на -Infinity возвращает положительный (обычный) ноль. Тоже самое касается и результатов, которые оказываются ближе к нулю, чем позволяет диапазон: если отрицательный результат оказывается ближе к нулю, чем минимально возможное значение, то возвращается отрицательный ноль, если положительный - обычный ноль. Так вот, особенность заключается в том, что эти значения неразличимы даже при строгом сравнении. Поэтому в тех редких случаях, когда все-таки может возникнуть необходимость распознать их, следует использовать операцию деления на них одного и того же числа, поскольку в результатах будут получаться бесконечности противоположных знаков (см. пример №4).

Значение NaN

Не все математические операции возвращают четко определенные значения. Например, неопределенными являются результаты следующих операций:

  • деление нуля на ноль,
  • деление бесконечности на бесконечность,
  • извлечение квадратного корня из отрицательного числа,
  • арифметические операции с нечисловыми операндами, которые не могут быть корректно преобразованы в числа.

Именно для таких случаев и предусмотрено значение NaN, которое интерпретатор JavaScript возвращает каждый раз, когда математическая операция не может быть правильно выполнена (см. пример №5).

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Значение NaN</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	<p id="p_6"></p>
	<p id="p_7"></p>
	
	<p>
		Чтобы узнать не является ли значение переменной d
		не числом, следует использовать сравнение 
		d!=d, которое вернет true, если в переменной 
		хранится значение NaN.
	</p>
				
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
//Результатом везде будет NaN
//Деление нуля на ноль
var rez_1=0/0;    
//Деление бесконечности на бесконечность
var rez_2=Infinity/-Infinity;
//Извлечение квадратного корня из отр-ного числа
var rez_3=Math.sqrt(-5);
//Умножение на нечисловой операнд
var rez_4=5*'пять';

//Вернет false
var rez_5 = NaN==NaN;
//Вернет true
var rez_6 = NaN!=NaN;

//Вернет true, т.к. rez_1 хранит NaN 
var rez_7 = rez_1!=rez_1;
 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');
var p_6=document.getElementById('p_6');
var p_7=document.getElementById('p_7');

//Вставляем в них соответствующие значения
p_1.innerHTML = '0/0 => '+rez_1;
p_2.innerHTML = 'Infinity/-Infinity => '+rez_2;
p_3.innerHTML = 'Math.sqrt(-5) => '+rez_3;
p_4.innerHTML = '5*"пять" => '+rez_4;
p_5.innerHTML = 'NaN==NaN => '+rez_5;
p_6.innerHTML = 'NaN!=NaN => '+rez_6;
p_7.innerHTML = 'rez_1!=rez_1 => '+rez_7;		

Пример №5. Значение NaN в JavaScript

Также, как и отрицательный ноль, NaN имеет одну особенность: сравнение с ним на равенство всегда возвращает false даже, если сравнивать NaN с самим собой (см. пример №5). Это означает, что нельзя использовать для некоторой переменной d проверку типа d==NaN. Вместо этого следует использовать сравнение на неравенство, т.е. d!=NaN, которое вернет true только тогда, когда в переменной будет хранится значение NaN.

Возможности для работы с числами

Следует отметить, что перечисленные выше специальные значения Infinity, -Infinity, NaN, а также минимальное и максимальное значения вещественных чисел доступных в JavaScript, хранятся в виде свойств специального глобального объекта Number (см. пример №6). Этот же объект предоставляет еще и ряд методов для строкового представления чисел в требуемом формате (например, в экспоненциальной форме), подробное описание которых смотрите в нашем справочнике по JavaScript.

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Примеры использования объекта Number</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	<p id="p_6"></p>
	<p id="p_7"></p>
	<p id="p_8"></p>
	<p id="p_9"></p>
	<p id="p_10"></p>
	<p id="p_11"></p>
	
	<p>
		Значения бесконечностей и <span class="blue_letter">NaN</span>, 
		минимальное и максимальное значения, также хранятся в виде 
		свойств объекта <span class="blue_letter">Number</span>. 
		Кроме того, объект <span class="blue_letter">Number</span> 
		имеет методы для строкового представления чисел в 
		требуемом формате.
	</p>
				
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}




	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
//Наименьшее число, представимое в JS
var rez_1=Number.MIN_VALUE;
//Наибольшее число, представимое в JS
var rez_2=Number.MAX_VALUE;
//Положительная бесконечность
var rez_3=Number.POSITIVE_INFINITY;    
//Отрицательная бесконечность
var rez_4=Number.NEGATIVE_INFINITY;
//Значение NaN
var rez_5=Number.NaN;

//Сохраним вещественное число в переменной
var n=12345.6789;

//Преобразуем n в строку 
//Выведет 12345.6789
var rez_6=n.toString();
//Преобразуем n в строку с 3 знаками после запятой 
//Выведет 12345.679
var rez_7=n.toFixed(3);
//Преобразуем n в строку в экспон-ом виде
//Выведет 1.235e+4
var rez_8 = n.toExponential(3);
//Преобразуем n в строку с точностью до 7 значащих цифр
//Выведет 12345.68
var rez_9 = n.toPrecision(7);

//Проверим является ли n числом 
//Выведет true
var rez_10 = isFinite(n);
//Проверим является ли n NaN (не числом) 
//Выведет false
var rez_11 = isNaN(n);

 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');
var p_6=document.getElementById('p_6');
var p_7=document.getElementById('p_7');
var p_8=document.getElementById('p_8');
var p_9=document.getElementById('p_9');
var p_10=document.getElementById('p_10');
var p_11=document.getElementById('p_11');

//Вставляем в них соответствующие значения
p_1.innerHTML = 'Number.MIN_VALUE => '+rez_1;
p_2.innerHTML = 'Number.MAX_VALUE => '+rez_2;
p_3.innerHTML = 'Number.POSITIVE_INFINITY => '+rez_3;
p_4.innerHTML = 'Number.NEGATIVE_INFINITY => '+rez_4;
p_5.innerHTML = 'Number.NaN => '+rez_5;
p_6.innerHTML = 'n.toString() => '+rez_6;
p_7.innerHTML = 'n.toFixed(3) => '+rez_7;
p_8.innerHTML = 'n.toExponential(3) => '+rez_8;
p_9.innerHTML = 'n.toPrecision(7) => '+rez_9;
p_10.innerHTML = 'isFinite(n) => '+rez_10;
p_11.innerHTML = 'isNaN(n) => '+rez_11;		

Пример №6. Примеры использования объекта Number

Что касается простых арифметических операций с числами, то для этого в JavaScript предназначены арифметические операторы сложения (+), вычитания (-), умножения (*), деления (/), а также оператор деления по модулю (%), который возвращает остаток от деления чисел (позже мы рассмотрим эти операторы подробнее). Кроме того, для обработки чисел имеются и более сложные математические инструменты в виде свойств и методов объекта Math (см. пример №7), подробное описание которых, опять же, смотрите в нашем справочнике по JavaScript.

HTML CSS JS Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<!--  Сообщаем браузеру кодировку документа  -->
	<meta charset="utf-8">
	<meta name="robots" content="noindex">	
	<!--  Не забываем про заголовок документа  -->
	<title>Примеры математических операций с числами</title>
	
	<!-- Подключаем внешнюю таблицу стилей CSS -->
	<link rel="stylesheet" href="styles_1.css">
</head>
<body>

	<!-- Заполним при помощи скрипта example.js -->
	<p id="p_1"></p>
	<p id="p_2"></p>
	<p id="p_3"></p>
	<p id="p_4"></p>
	<p id="p_5"></p>
	<p id="p_6"></p>
	<p id="p_7"></p>
	<p id="p_8"></p>
	<p id="p_9"></p>
	
	<p>
		Для обработки чисел имеются и более сложные математические 
		инструменты в виде свойств и методов объекта 
		<span class="blue_letter">Math</span>. 
	</p>
				
	<!-- Подключаем внешний скрипт -->
	<script type="text/javascript" src="example.js"></script>
	
</body>
</html>
	
	
	
	
	
/* Немножко оформим абзацы */
p{
width: 500px;
margin: auto;
margin-top: 30px;
padding: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px grey;
background: linear-gradient(0deg, #eeeeee, #ffffff);
}

.blue_letter{ 
color: blue;
}







	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
//Квадратный корень из 9
var rez_1=Math.sqrt(9);
//Число 3 в 4 степени
var rez_2=Math.pow(3,4);
//Округление числа 6.235
var rez_3=Math.round(6.235);    
//Вернет максимальное из чисел
var rez_4=Math.max(2,8,5.3);
//Синус угла в 0.5 радиан
var rez_5=Math.sin(0.5);
//Выведет число пи
var rez_6=Math.PI;
//Вернет псевдослучайное число в 0.0 до 1.0
var rez_7=Math.random();

//Примеры более сложных математических выражений
var rez_8 = (Math.pow((2+3.2),3)-5.3*1.5)/Math.PI;
var rez_9 = Math.min(Math.sqrt(3.5), Math.cos(0.8));

 
//Находим абзацы по их id
var p_1=document.getElementById('p_1');
var p_2=document.getElementById('p_2');
var p_3=document.getElementById('p_3');
var p_4=document.getElementById('p_4'); 
var p_5=document.getElementById('p_5');
var p_6=document.getElementById('p_6');
var p_7=document.getElementById('p_7');
var p_8=document.getElementById('p_8');
var p_9=document.getElementById('p_9');

//Вставляем в них соответствующие значения
p_1.innerHTML = 'Math.sqrt(9) => '+rez_1;
p_2.innerHTML = 'Math.pow(3,4) => '+rez_2;
p_3.innerHTML = 'Math.round(6.235) => '+rez_3;
p_4.innerHTML = 'Math.max(2,8,5.3) => '+rez_4;
p_5.innerHTML = 'Math.sin(0.5) => '+rez_5;
p_6.innerHTML = 'Math.PI => '+rez_6;
p_7.innerHTML = 'Math.random() => '+rez_7;
p_8.innerHTML = '(Math.pow((2+3.2),3)-5.3*1.5)/Math.PI => '+rez_8;
p_9.innerHTML = 'Math.min(Math.sqrt(3.5), Math.cos(0.8)) => '+rez_9;		

Пример №7. Примеры математических операций с числами

Быстрый переход к другим страницам