unslug pt-br: move

1 files changed, 418 insertions, 0 deletions

diff --git a/files/pt-br/learn/javascript/first_steps/math/index.html b/files/pt-br/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..fce74528f7
--- /dev/null
+++ b/files/pt-br/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,418 @@
+---
+title: Matemática básica no JavaScript — números e operadores
+slug: Learn/JavaScript/First_steps/Matematica
+tags:
+  - Artigo
+  - Código
+  - Guía
+  - Iniciante
+  - JavaScript
+  - Matemática
+  - Operadores
+  - Script
+  - aprenda
+  - aumentada
+  - incremento
+  - modulo
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<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>