MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Базовая математика в JavaScript — числа и операторы

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

В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать operators и другие функции, чтобы успешно манипулировать цифрами для выполнения наших задач.

Необходимые условия: Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель: Ознакомление с основами математики в JavaScript.

Все любят математику

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

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

Типы чисел

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

  • Целые это целые числа, такие как: 10, 400, или -5.
  • С плавающей запятой (в оригинале: с плавующей точкой) имеют целую и дробную часть и например: 12.5, или 56.7786543.
  • Doubles тип чисел с плавающей запятой, которые имеют большую точность, чем стандартные числа с плавающей запятой (что означает, что они точны для большего числа десятичных знаков).

У нас даже есть разные типы числовых систем!

  • Бинарная — низкоуровневый язык компьютеров; нули и единицы 0 и 1.
  • Восьмеричная — 8-ми разрядная, использует 0–7 в каждом столбце.
  • Десятичная — 10-ти разрядная, использует 0-9 в каждом столбце.
  • Шестнадцатеричная — 16-ти разрядная, используюет 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.

Прежде чем вы начнете беспокоится о взрыве вашего мозга, остановитесь прямо здесь и сейчас! Для начала мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью начать думать в других числовых системах, если вообще когда-либо с ними сталкнетесь.

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

It's all numbers to me

Let's have a quick play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your developer tools JavaScript console, or use the simple built in console seen below if you'd prefer.

Open in new window

  1. First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order:
    var myInt = 5;
    var myFloat = 6.667;
    myInt;
    myFloat;
  2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers. Before you move on.
  3. Now let's check that both our original variables are of the same datatype. There is an operator called typeof in JavaScript that does this. Enter the below two lines as shown:
    typeof myInt;
    typeof myFloat;
    You should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!

Arithmetic operators

Arithmetic operators are the basic operators that we use to do sums:

Operator Name Purpose Example
+ Addition Adds two numbers together. 6 + 9
- Subtraction Subtracts the right number from the left. 20 - 15
* Multiplication Multiplies two numbers together. 3 * 7
/ Division Divides the left number by the right. 10 / 5
% Remainder (sometimes called modulo)

Returns the remainder left over after you've shared the left number out into a number of integer portions equal to the right number.

8 % 3 (returns 2, as three goes into 8 twice, leaving 2 left over.)

Note: You'll sometimes see numbers involved in sums referred to as operands.

We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your developer tools JavaScript console, or use the simple built in console seen earlier if you'd prefer, to familiarize yourself with the syntax.

  1. First try entering some simple examples of your own, such as
    10 + 7
    9 * 8
    60 % 3
  2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:
    var num1 = 10;
    var num2 = 50;
    9 * num1;
    num2 / num1;
  3. Last for this section, try entering some more complex expressions, such as:
    5 + 10 * 3;
    num2 % 9 * num1;
    num2 + num1 / 8 + 2;

Some of this last set of sums might not give you quite the result you were expecting; the below section might well give the answer as to why.

Operator precedence

Let's look at the last example from above, assuming that num2 holds the value 50 and num1 holds the value 10 (as originally stated above):

num2 + num1 / 8 + 2;

As a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6".

But the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".

This is because of operator precedence — some operators will be applied before others when calculating the result of a sum (referred to as an expression, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the sum is always evaluated from left to right).

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

(num2 + num1) / (8 + 2);

Try it and see.

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

Increment and decrement operators

Sometimes you'll want to repeatedly add or subtract one to/from a numeric variable value. This can be conveniently be done using the increment (++) and decrement(--) operators. We used ++ in our  "Guess the number" game back in our first splash into JavaScript article, when we added 1 to our guessCount variable to keep track of how many guesses the user has left after each turn.

guessCount++;

Note: They are most commonly used in loops, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

3++;

So, you can only increment an existing variable. Try this:

var num1 = 4;
num1++;

Ok, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, then increments the variable. You can see that it's been incremented if you return the variable value again:

num1;

The same is true of -- : try the following

var num2 = 6;
num2--;
num2;

Note: You can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use ++num1 and --num2.

Assignment operators

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, =, loads of times — it simply assigns the variable on the left the value stated on the right:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

Operator Name Purpose Example Shortcut for
+= Addition assignment Adds the value on the right to the variable value on the left, then returns the new variable value x = 3;
x += 4;
x = 3;
x = x + 4;
-= Subtraction assignment Subtracts the value on the right from the variable value on the left, and returns the new variable value x = 6;
x -= 3;
x = 6;
x = x - 3;
*= Multiplication assignment Multiples the variable value on the left by the value on the right, and returns the new variable value x = 2;
x *= 3;
x = 2;
x = x * 3;
/= Division assignment Divides the variable value on the left by the value on the right, and returns the new variable value x = 10;
x /= 5;
x = 10;
x = x / 5;

Try typing some of the above examples into your console, to get an idea of how they work. See if you can guess what the value is before you type the second line in, in each case.

Note that you can quite happily use other variables on the right hand side of each expression, for example:

var x = 3; // x contains the value 3
var y = 4; // y contains the value 4
x *= y; // x now contains the value 12

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

Active learning: sizing a canvas box

In this exercise we are going to get you to fill in some numbers and operators to manipulate the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.

Open in new window

In the editable code box above, there are two lines marked clearly with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. We'd like you to answer the following questions:

  • Change the line that calculates x so the box is still 50px wide, and the 50 is calculated using the numbers 43 and 7, and an arithmetic operator.
  • Change the line that calculates y so the box is 75px high, and the 75 is calculated using the numbers 25 and 3, and an arithmetic operator.
  • Change the line that calculates x so the box is 250px wide, and the 250 is calculated using two numbers and the remainder (modulo) operator.
  • Change the line that calculates y so the box is 150px high, and the 150 is calculated using three numbers, and the subtraction and divison operators.
  • Change the line that calculates x so the box is 200px wide, and the 200 is calculated using the number 4 and an assignment operator.
  • Change the line that calculates y so the box is 200px high, and the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.

Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, you can feel free to play with the code some more, or set your friends/classmates some challenges.

Comparison operators

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

Operator Name Purpose Example
=== Strict equality Tests whether the left and right values are identical to one another 5 === 2 + 4
!== Strict-non-equality Tests whether the left and right values not identical to one another 5 !== 2 + 3
< Less than Tests whether the left value is smaller than the right one. 10 < 6
> Greater than Tests whether the left value is greater than the right one. 10 > 20
<= Less than or equal to Tests whether the left value is smaller than or equal to the right one. 3 <= 2
>= Greater than or equal to Tests whether the left value is greater than or equal to the right one. 5 >= 4

Note: You may see some people using == and != in their code for equality and non-equality — these are valid operators in JavaScript, but they differ from ===/!== — the former test whether the values are the same, but the datatype can be different, whereas the latter strict versions test if the value and the dataype are the same. The strict versions tend to result in less errors going undetected, so we are recommending that you use those.

If you try entering some of these values in a console, you'll see that they all return true/false values — those booleans we mentioned in the last article. These are very useful as they allow us to make decisions in our code — these are used every time we want to make a choice of some kind, for example:

  • Displaying the correct text label on a button depending on whether a feature is turned on or off.
  • Displaying a game over message if a game is over, or a victory message if the game has been won.
  • Displaying the correct seasonal greeting depending what holiday season it is.
  • Zooming a map in or out depending on what zoom level is selected.

We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:

<button>Start machine</button>
<p>The machine is stopped.</p>
var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

Open in new window

You can see the equality operator being used just inside the updateBtn() function. In this case we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

Summary

In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.

In the next article, we'll explore text, and how JavaScript allows us to manipulate it.

Note: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our Numbers and dates and Expressions and operators articles.

Метки документа и участники

 Внесли вклад в эту страницу: FIJN
 Обновлялась последний раз: FIJN,