aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/learn/javascript/first_steps/math/index.html
blob: 7e0344a6c791e683aa4331c4ce4dea777ee91094 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
---
title: Matemática básica no JavaScript — números e operadores
slug: Learn/JavaScript/First_steps/Math
tags:
  - Artigo
  - Código
  - Guía
  - Iniciante
  - JavaScript
  - Matemática
  - Operadores
  - Script
  - aprenda
  - aumentada
  - incremento
  - modulo
translation_of: Learn/JavaScript/First_steps/Math
original_slug: Learn/JavaScript/First_steps/Matematica
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">Neste ponto do curso estaremos discutindo matemática em JavaScript — Como podemos usar {{Glossary("Operador","operadores")}} e outros recursos para manipular números e fazer cálculos.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>Conhecimento básico em informática, uma compreensão básica de HTML e CSS, uma compreensão do que é o JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Ganhar familiaridade com o básico em matemática no JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Todo_mundo_ama_matemática">Todo mundo ama matemática</h2>

<p>Ok, talvez não. Alguns de nós gostam de matemática, alguns de nós tem a odiado desde que tivemos que aprender a tabuada de multiplicação e divisão na escola, e alguns de nós estão em algum lugar no meio dos dois cenários. Mas nenhum de nós pode negar que a matemática é uma parte fundamental da vida sem a qual não poderíamos ir muito longe. Isso é especialmente verdadeiro quando estamos aprendendo a programar em  JavaScript (ou em qualquer outra linguagem, diga-se de passagem) — muito do que fazemos se baseia no processamento de dados numéricos, cálculo de novos valores, etc. Assim você não ficará surpreso em aprender que o JavaScript tem uma configuração completa de funções matemáticas disponíveis.</p>

<p>Este artigo discute apenas as partes básicas que você precisa saber agora.</p>

<h3 id="Tipos_de_números">Tipos de números</h3>

<p>Em programação, até mesmo o humilde sistema de números decimais que todos nós conhecemos tão bem é mais complicado do que você possa pensar. Usamos diferentes termos para descrever diferentes tipos de números decimais, por exemplo:</p>

<ul>
 <li><em><strong>Integers</strong> </em>(inteiros) são números inteiros, ex. 10, 400 ou -5.</li>
 <li><strong>Números de ponto flutuante</strong><em> (floats)</em> tem pontos e casas decimais, por exemplo 12.5 e 56.7786543.</li>
 <li><em><strong>Doubles</strong> </em>são tipos de <em>floats </em>que tem uma precisão maior do que os números de ponto flutuante padrões (significando que eles são mais precisos, possuindo uma grande quantidade de casas decimais).</li>
</ul>

<p>Temos até mesmo diferentes tipos de sistemas numéricos! O decimal tem por base 10 (o que significa que ele usa um número entre 0–9 em cada casa), mas temos também algo como:</p>

<ul>
 <li><strong>Binário</strong> — A linguagem de menor level dos computadores; 0s e 1s.</li>
 <li><strong>Octal</strong> — Base 8, usa um caractere entre 0–7 em cada coluna.</li>
 <li><strong>Hexadecimal</strong> — Base 16, usa um caractere entre 0–9 e depois um entre a–f em cada coluna. Você pode já ter encontrado esses números anteriormente, trabahando com <a href="/pt-BR/docs/Aprender/CSS/Introduction_to_CSS/Valores_e_unidades#Valores_hexadecimais">cores no CSS</a>.</li>
</ul>

<p><strong>Antes de se preocupar com seu cérebro estar derretendo, pare agora mesmo!</strong> Para um começo, vamos nos ater aos números decimais no decorrer desse curso; você raramente irá se deparar com a necessidade de começar a pensar sobre os outros tipos, se é que vai precisar algum dia.</p>

<p>A segunda boa notícia é que, diferentemente de outras linguagens de programação, o JavaScript tem apenas um tipo de dados para números, você advinhou, {{jsxref("Number")}}. Isso significa que qualquer que seja o tipo de números com os quais você está lidando em JavaScript, você os manipula do mesmo jeito.</p>

<h3 id="Tudo_é_número_para_mim">Tudo é número para mim</h3>

<p>Vamos brincar rapidamente com alguns números para nos familiarizarmos com a sintaxe básica que precisamos. Insira os comandos listados abaixo em seu <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">console JavaScript</a>, ou use o console simples incorporado abaixo, se preferir.</p>

<p>{{EmbedGHLiveSample("learning-area-pt-br/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p>

<p><strong><a href="https://mdn.github.io/learning-area-pt-br/javascript/introduction-to-js-1/variables/">Abra em uma nova janela</a></strong></p>

<ol>
 <li>Primeiramente, vamos declarar duas variáveis e as inicializar com um <em>integer</em> e um <em>float</em>, respectivamente, então digitaremos os nomes das variávei para verificar se está tudo em ordem:

  <pre class="brush: js notranslate">var meuInt = 5;
var meuFloat = 6.667;
meuInt;
meuFloat;</pre>
 </li>
 <li>Valores numéricos são inseridos sem aspas — tente declarar e inicializar mais duas variáveis contendo números antes de seguir em frente.</li>
 <li>Agora vamos checar se nossas duas variáveis originais são do mesmo tipo de dados. Há um operador chamado {{jsxref("Operators/typeof", "typeof")}} no JavaScript que faz isso. Insira as duas linhas conforme mostradas abaixo:
  <pre class="brush: js notranslate">typeof meuInt;
typeof meuFloat;</pre>
  Você deve obter <code>"number"</code> de volta nos dois casos — isso torna as coisas muito mais fáceis para nós do que se diferentes tipos de números tivessem diferentes tipos de dados, e tivéssemos que lidar com eles em diferentes maneiras. Ufa!</li>
</ol>

<h2 id="Operadores_aritméticos">Operadores aritméticos</h2>

<p>São os operadores que utilizamos para fazer as operações aritiméticas básicas:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operador</th>
   <th scope="col">Nome</th>
   <th scope="col">Propósito</th>
   <th scope="col">Exemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+</code></td>
   <td>Adição</td>
   <td>Adiciona um número a outro.</td>
   <td><code>6 + 9</code></td>
  </tr>
  <tr>
   <td><code>-</code></td>
   <td>Subtração</td>
   <td>Subtrai o número da direita do número da esquerda.</td>
   <td><code>20 - 15</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>Multiplicação</td>
   <td>Multiplica um número pelo outro.</td>
   <td><code>3 * 7</code></td>
  </tr>
  <tr>
   <td><code>/</code></td>
   <td>Divisão</td>
   <td>Divide o número da esquerda pelo número da direita.</td>
   <td><code>10 / 5</code></td>
  </tr>
  <tr>
   <td><code>%</code></td>
   <td>Restante <em>(Remainder</em> - as vezes chamado de modulo)</td>
   <td>
    <p>Retorna o resto da divisão em números inteiros do número da esquerda pelo número da direita.</p>
   </td>
   <td><code>8 % 3</code> (retorna 2; como três cabe duas vezes em 8, deixando 2 como resto.)</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota</strong>: Você verá algumas vezes números envolvidos em aritimética chamados de {{Glossary("Operando", "operandos")}}.</p>
</div>

<p>Nós provavelmente não precisamos ensinar a você como fazer matemática básica, mas gostaríamos de testar seu entendimento da sintaxe envolvida. Tente inserir os exemplos abaixo no seu <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript</a>, ou use o console incorporado visto anteriormente, se preferir, para familiarizar-se com a sintaxe.</p>

<ol>
 <li>Primeiro tente inserir alguns exemplos simples por sua conta, como
  <pre class="brush: js notranslate">10 + 7
9 * 8
60 % 3</pre>
 </li>
 <li>Você pode tentar declarar e inicializar alguns números dentro de variáveis, e tentar usá-los nas operações — as variáveis irão se comportar exatamente como os valores que elas armazenam para a finalidade das operações. Por exemplo:
  <pre class="brush: js notranslate">var num1 = 10;
var num2 = 50;
9 * num1;
num2 / num1;</pre>
 </li>
 <li>Por último, nesta seção, tente inserir algumas expressões mais complexas, como:
  <pre class="brush: js notranslate">5 + 10 * 3;
num2 % 9 * num1;
num2 + num1 / 8 + 2;</pre>
 </li>
</ol>

<p>Alguns dos exemplos do último bloco podem não ter retornado os valores que você estava esperando; a seção abaixo pode lhe explicar o porquê.</p>

<h3 id="Precedência_de_operador">Precedência de operador</h3>

<p>Vamos olhar para o último exemplo, assumindo que <code>num2</code> guarda o valor 50 e <code>num1</code> possui o valor 10 (como iniciado acima):</p>

<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>

<p>Como um ser humano, talvez você leia isso como <em>"50 mais 10 é igual a 60"</em>, depois <em>"8 mais 2 é igual a 10"</em>, e então <em>"60 dividido por 10 é igual a 6"</em>.</p>

<p>No entanto seu navegador vai ler <em>"10 dividido por 8 é igual a 1.25"</em>, então <em>"50 mais 1.25 mais 2 é igual a 53.25"</em>.</p>

<p>Isto acontence por causa da <strong>precedência de operadores</strong> — algumas operações serão aplicadas antes de outras quando calcularmos o resultado de uma soma (referida em programação como uma expressão).  A precedência de operadores em JavaScript é semelhante ao ensinado nas aulas de matemática na escola — Multiplicação e divisão são realizados primeiro, depois a adição e subtração (a soma é sempre realizada da esquerda para a direita).</p>

<p>Se você quiser substituir a precedência do operador, poderá colocar parênteses em volta das partes que desejar serem explicitamente tratadas primeiro. Então, para obter um resultado de 6, poderíamos fazer isso:</p>

<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>

<p>Tente fazer e veja como fica.</p>

<div class="note">
<p><strong>Nota</strong>: Uma lista completa de todos os operadores JavaScript e suas precedências pode ser vista em <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressões e operadores</a>.</p>
</div>

<h2 id="Operadores_de_incremento_e_decremento">Operadores de incremento e decremento</h2>

<p>Às vezes você desejará adicionar ou subtrair, repetidamente, um valor de uma variável numérica. Convenientemente isto pode ser feito usando os operadores incremento <code>++</code> e decremento <code>--</code>. Usamos <code>++</code>  em nosso jogo "Adivinhe o número" no primeiro artigo  <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a>, quando adicionamos 1 ao nosso <code>contagemPalpites</code> para saber quantas adivinhações o usuário deixou após cada turno.</p>

<pre class="brush: js notranslate">contagemPalpites++;</pre>

<div class="note">
<p><strong>Nota</strong>: Eles são mais comumente usado em <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Lacos_e_iteracoes">Laços e iterações</a>, que será visto no curso mais tarde. Por exemplo, digamos que você queira passar por uma lista de preços e adicionar imposto sobre vendas a cada um deles. Você usaria um loop para passar por cada valor e fazer o cálculo necessário para adicionar o imposto sobre vendas em cada caso. O incrementador é usado para mover para o próximo valor quando necessário. Na verdade, fornecemos um exemplo simples mostrando como isso é feito - <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">verifique ao vivo</a> e observe o <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">código-fonte</a> para ver se consegue identificar os incrementadores! Veremos os <em>loops</em> detalhadamente mais adiante no curso.</p>
</div>

<p>Vamos tentar brincar com eles no seu console. Para começar, note que você não pode aplicá-las diretamente a um número, o que pode parecer estranho, mas estamos atribuindo a variável um novo valor atualizado, não operando no próprio valor. O seguinte retornará um erro:</p>

<pre class="brush: js notranslate">3++;</pre>

<p>Então, você só pode incrementar uma variável existente. Tente isto: </p>

<pre class="brush: js notranslate">var num1 = 4;
num1++;</pre>

<p>Ok, segunda coisa estranha! Quando você fizer isso, verá um valor 4 retornado - isso ocorre porque o navegador retorna o valor atual e, <em>em seguida</em>, incrementa a variável. Você pode ver que ele foi incrementado se você retornar o valor da variável novamente:</p>

<pre class="brush: js notranslate">num1;</pre>

<p>Acontece a mesma coisa com <code>--</code> : tente o seguinte</p>

<pre class="brush: js notranslate">var num2 = 6;
num2--;
num2;</pre>

<div class="note">
<p><strong>Nota</strong>: Você pode fazer o navegador fazer o contrário - incrementar/decrementar a variável e depois retornar o valor, colocando o operador no início da variável ao invés do final. Tente os exemplos acima novamente, mas desta vez use  <code>++num1</code> e <code>--num2</code>.</p>
</div>

<h2 id="Operadores_de_atribuição">Operadores de atribuição</h2>

<p>Operadores de atribuição são os que atribuem um valor à uma variável. Nós já usamos o básico, <code>=</code>, muitas vezes, simplesmente atribuindo à variável do lado ersquerdo o valor indicado do lado direito do operador:</p>

<pre class="brush: js notranslate">var x = 3; // x contém o valor 3
var y = 4; // y contém o valor 4
x = y; // x agora contém o mesmo valor de y, 4</pre>

<p>Mas existem alguns tipos mais complexos, que fornecem atalhos úteis para manter seu código mais puro e mais eficiente. Os mais comuns estão listados abaixo:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Name</th>
   <th scope="col">Purpose</th>
   <th scope="col">Example</th>
   <th scope="col">Shortcut for</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+=</code></td>
   <td>Atribuição de adição</td>
   <td>Adiciona o valor à direita ao valor da variável à esquerda e, em seguida, retorna o novo valor da variável</td>
   <td><code>x = 3;<br>
    x += 4;</code></td>
   <td><code>x = 3;<br>
    x = x + 4;</code></td>
  </tr>
  <tr>
   <td><code>-=</code></td>
   <td>Atribuição de subtração</td>
   <td>Subtrai o valor à direita do valor da variável à esquerda e retorna o novo valor da variável</td>
   <td><code>x = 6;<br>
    x -= 3;</code></td>
   <td><code>x = 6;<br>
    x = x - 3;</code></td>
  </tr>
  <tr>
   <td><code>*=</code></td>
   <td>Atribuição de multiplicação</td>
   <td>Multiplica o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variável</td>
   <td><code>x = 2;<br>
    x *= 3;</code></td>
   <td><code>x = 2;<br>
    x = x * 3;</code></td>
  </tr>
  <tr>
   <td><code>/=</code></td>
   <td>Atribuição de divisão</td>
   <td>Divide o valor da variável à esquerda pelo valor à direita e retorna o novo valor da variável</td>
   <td><code>x = 10;<br>
    x /= 5;</code></td>
   <td><code>x = 10;<br>
    x = x / 5;</code></td>
  </tr>
 </tbody>
</table>

<p>Tente digitar alguns dos exemplos acima em seu console para ter uma ideia de como eles funcionam. Em cada caso, veja se você pode adivinhar qual é o valor antes de digitar a segunda linha.</p>

<p>Note que você pode muito bem usar outros valores ​​no lado direito de cada expressão, por exemplo:</p>

<pre class="brush: js notranslate">var x = 3; // x contém o valor 3
var y = 4; // y contém o valor 4
x *= y; // x agora contém o valor 12</pre>

<div class="note">
<p><strong>Nota</strong>: Existem muitos <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#operador_atribuicao">outros operadores de atribuição disponíveis</a>, mas estes são os básicos que você deve aprender agora.</p>
</div>

<h2 id="Aprendizado_ativo_dimensionando_uma_canvas_box">Aprendizado ativo: dimensionando uma canvas box</h2>

<p>Neste exercício, você manipulará alguns números e operadores para alterar o tamanho de uma caixa. A caixa é desenhada usando uma API do navegador chamada {{domxref("Canvas API", "", "", "true")}}. Não há necessidade de se preocupar sobre como isso funciona, apenas concentre-se na matemática por enquanto. A largura e altura da caixa (em pixels) são definidas pelas variáveis x e y, que recebem um valor inicial de 50.</p>

<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Abrir em nova janela</a></strong></p>

<p>Na caixa de código editável acima, há duas linhas marcadas com um comentário que gostaríamos que você atualizasse para aumentar/diminuir a caixa para determinados tamanhos, usando determinados operadores e/ou valores em cada caso. Vamos tentar o seguinte:</p>

<ul>
 <li>Altere a linha que calcula x para que a caixa ainda tenha 50px de largura, mas que 50 seja calculado usando os números 43 e 7 e um operador aritmético.</li>
 <li>Altere a linha que calcula y tenha 75px de altura, mas que 75 seja calculado usando os números 25 e 3 e um operador aritmético.</li>
 <li>Altere a linha que calcula x para que a caixa tenha 250px de largura, mas que 250 seja calculado usando dois números e o operador resto (modulo).</li>
 <li>Altere a linha que calcula y para que a caixa tenha 150px de altura, mas que 150 seja calculado usando três números e os operadores de subtração e divisão.</li>
 <li>Altere a linha que calcula x para que a caixa tenha 200px de largura, mas que 200 seja calculado usando o número 4 e um operador de atribuição.</li>
 <li>Altere a linha que calcula y para que a caixa tenha 200px de altura, mas que 200 seja calculado usando os números 50 e 3, o operador de multiplicação e o operador de atribuição de adição.</li>
</ul>

<p>Não se preocupe se você estragar totalmente o código. Você sempre pode pressionar o botão Reset para fazer as coisas funcionarem novamente. Depois de ter respondido corretamente a todas as perguntas acima, sinta-se à vontade para brincar um pouco com o código ou crie seus próprios desafios.</p>

<h2 id="Operadores_de_comparação">Operadores de comparação</h2>

<p>Às vezes, queremos executar testes verdadeiro / falso e, em seguida, agir de acordo, dependendo do resultado desse teste, para fazer isso, usamos <strong>operadores de comparação</strong>.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Name</th>
   <th scope="col">Purpose</th>
   <th scope="col">Example</th>
  </tr>
  <tr>
   <td><code>===</code></td>
   <td>Igualdade estrita</td>
   <td>Verifica se o valor da esquerda e o da direita são idênticos entre si.</td>
   <td><code>5 === 2 + 4</code></td>
  </tr>
  <tr>
   <td><code>!==</code></td>
   <td>Não-igualdade-estrita</td>
   <td>Verifica se o valor da esquerda e o da direita <strong>não </strong>são idênticos entre si.</td>
   <td><code>5 !== 2 + 3</code></td>
  </tr>
  <tr>
   <td><code>&lt;</code></td>
   <td>Menor que</td>
   <td>Verifica se o valor da esquerda é menor que o valor da direita.</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>Maior que</td>
   <td>Verifica se o valor da esquerda é maior que o valor da direita.</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
  <tr>
   <td>&lt;=</td>
   <td>Menor ou igual que</td>
   <td>Verifica se o valor da esquerda é menor que ou igual ao valor da direita.</td>
   <td><code>3 &lt;= 2</code></td>
  </tr>
  <tr>
   <td>&gt;=</td>
   <td>Maior ou igual que</td>
   <td>Verifica se o valor da esquerda é maior que ou igual ao valor da direita.</td>
   <td><code>5 &gt;= 4</code></td>
  </tr>
 </thead>
</table>

<div class="note">
<p><strong>Nota</strong>: Talvez você já tenha visto alguém usando <code>==</code> e<code>!=</code> afim de testar igualdade ou desigualdade em JavaScript. Estes são operadores válidos em JavaScript, mas que diferem de <code>===</code>/<code>!==</code>. As versões anteriores testam se os valores são os mesmos, mas não se os tipos de dados dos valores são os mesmos. As últimas versões estritas testam a igualdade de ambos os valores e seus tipos de dados. Elas tendem a resultar em menos erros, por isso recomendamos que você as use.</p>
</div>

<p>Se você tentar inserir alguns desses valores em um console, verá que todos eles retornam <code>true</code>/<code>false</code> — aqueles booleanos que mencionamos no último artigo. Eles são muito úteis, pois nos permitem tomar decisões em nosso código, e eles são usados ​​toda vez que queremos fazer uma escolha de algum tipo. Por exemplo, booleanos podem ser usados ​​para:</p>

<ul>
 <li>Exibir o text label em um botão, dependendo se um recurso está ativado ou desativado</li>
 <li>Exibir uma mensagem de 'game over' se um jogoa acabou ou uma mensagem de vitória se o jogo foi vencido</li>
 <li>Exibir uma saudação sazonal correta, dependendo da época de festas</li>
 <li>Aumentar ou diminuir o zoom do mapa, dependendo do nível de zoom selecionado</li>
</ul>

<p>Veremos como codificar essa lógica quando examinarmos instruções condicionais em um artigo futuro. Por enquanto, vamos dar uma olhada em um exemplo rápido:</p>

<pre class="brush: html notranslate">&lt;button&gt;Iniciar máquina&lt;/button&gt;
&lt;p&gt;A máquina está parada.&lt;/p&gt;
</pre>

<pre class="brush: js notranslate">var btn = document.querySelector('button');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
   if (btn.textContent === 'Iniciar máquina') {
       btn.textContent = 'Parar máquina';
       txt.textContent = 'A máquina iniciou!';
   } else {
       btn.textContent = 'Iniciar máquina';
       txt.textContent = 'A máquina está parada.';
   }
}</pre>

<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>

<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Abrir em nova janela</a></strong></p>

<p>Você pode ver o operador de igualdade sendo usado apenas dentro da função <code>updateBtn()</code>. Neste caso, não estamos testando se duas expressões matemáticas têm o mesmo valor, estamos testando se o conteúdo de texto de um botão contém uma certa string , mas ainda é o mesmo princípio em funcionamento. Se o botão estiver dizendo "Iniciar máquina" quando for pressionado, mudaremos o rótulo para "Parar máquina" e atualizaremos o rótulo conforme apropriado. Se o botão estiver dizendo "Parar máquina" quando for pressionado, nós trocamos a tela de volta.</p>

<div class="note">
<p><strong>Nota</strong>: Esse controle que troca entre dois estados geralmente é chamado de <strong>toggle</strong>. Ele alterna entre um estado e outro - acender, apagar, etc.</p>
</div>

<h2 id="Resumo">Resumo</h2>

<p>Neste artigo, cobrimos as informações fundamentais que você precisa saber sobre números em JavaScript, por enquanto. Você verá os números sendo usados ​​de novo e de novo, durante todo o aprendizado de JavaScript. Portanto, é uma boa ideia tirar isso do caminho agora. Se você é uma daquelas pessoas que não gosta de matemática, pode se consolar com o fato de este capítulo ser muito curto.</p>

<p>No próximo artigo, vamos explorar o texto e como o JavaScript nos permite manipulá-lo.</p>

<div class="note">
<p><strong>Nota</strong>: Se você gosta de matemática e quer saber mais sobre como ela é implementada em JavaScriot, você pode encontrar muito mais detalhes na seção principal de JavaScript do MDN. Ótimos lugares para começar são os artigos <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Numeros_e_datas">Números e datas</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressões e operadores</a> .</p>
</div>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>