fix(guide): simplify directory structure

guide/portuguese/javascript/tutorials/add-new-properties-to-a-javascript-object/index.md

@@ -0,0 +1,26 @@
+---
+title: Add New Properties to a JavaScript Object
+localeTitle: Adicionar novas propriedades a um objeto JavaScript
+---
+Você pode adicionar novas propriedades a objetos JavaScript existentes da mesma maneira que você os modificaria.
+
+Existem duas sintaxes diferentes, notação de ponto e notação de colchetes. A notação de ponto é geralmente preferida para legibilidade, mas as propriedades devem ser um identificador válido.
+
+Aqui está como usar a notação de ponto:
+```
+myDog.bark = "woof-woof"; 
+```
+
+Aqui está como usar a notação de colchetes:
+
+```javascript
+myObject['bark'] = "woof-woof"; 
+```
+
+Usando a notação de colchetes, podemos utilizar variáveis ​​como nomes de propriedades:
+
+```javascript
+var dynamicProperty = "bark"; 
+ myObject[dynamicProperty] = "woof-woof"; 
+
+```

guide/portuguese/javascript/tutorials/add-two-numbers-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Add Two Numbers with JavaScript
+localeTitle: Adicione dois números com JavaScript
+---
+JavaScript usa o símbolo `+` para adição. Também pode ser usado em vez de `parseInt()` mas isso está além disso.
+```
+var sum = 10 + 10; 
+
+```

guide/portuguese/javascript/tutorials/build-javascript-objects/index.md

@@ -0,0 +1,28 @@
+---
+title: Build JavaScript Objects
+localeTitle: Construa objetos JavaScript
+---
+Os objetos são úteis para armazenar dados de maneira estruturada e podem ser usados ​​para representar objetos do mundo real, como carros ou hotéis, em um computador.
+
+Os objetos são semelhantes aos arrays, exceto que, em vez de usar índices para acessar e modificar seus dados, você acessa os dados em objetos por meio do que são chamados de propriedades. Existem duas maneiras principais de criar objetos: o Literal do Objeto e o modo do Construtor.
+
+Usando o modo Literal do Objeto, veja como criaremos um objeto de amostra:
+```
+var cat = { 
+    name: "Whiskers", 
+    legs: 4, 
+    tails: 1, 
+    enemies: ["Water", "Dogs"] 
+ }; 
+```
+
+Usando o construtor, veja como criaremos um objeto de amostra:
+```
+var cat = new Object(); 
+ cat.name = "Whiskers"; 
+ cat.legs = 4; 
+ cat.tails = 1; 
+ cat.enemies = ["Water", "Dogs"]; 
+```
+
+No modo Construtor, usamos a `new` palavra-chave junto com `Object` (com capital 'O') para criar uma nova instância de objeto. Depois, usamos a notação de ponto para atribuir os nomes e valores da propriedade do objeto.

guide/portuguese/javascript/tutorials/comment-your-javascript-code/index.md

@@ -0,0 +1,22 @@
+---
+title: Comment Your JavaScript Code
+localeTitle: Comente seu código JavaScript
+---
+Os comentários são uma ótima maneira de deixar anotações para você mesmo e para outras pessoas que mais tarde precisarão descobrir o que ele faz. Qualquer código nele será ignorado.
+
+Vamos dar uma olhada nas duas maneiras de escrever comentários em JavaScript.
+
+*   O comentário de duas barras comentará o restante do texto na linha atual:
+
+`// This is a single line comment.`
+
+*   O comentário slash-star-star-slash comentará tudo entre os caracteres `/*` e `*/` :
+
+```javascript
+/* 
+ This is 
+ a multi-line comment 
+ (comment block) 
+ */ 
+
+```

guide/portuguese/javascript/tutorials/construct-javascript-objects-with-functions/index.md

@@ -0,0 +1,17 @@
+---
+title: Construct JavaScript Objects with Functions
+localeTitle: Construa objetos JavaScript com funções
+---
+Usando construtores é fácil criar novos objetos usando um blueprint ou construtor. A sintaxe da declaração é um pouco diferente, mas ainda assim fácil de lembrar.
+```
+// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers. 
+ var Car = function() { 
+  this.wheels = 4; 
+  this.engines = 1; 
+  this.seats = 1; 
+ }; 
+ 
+ var myCar = new Car(); 
+```
+
+O nome de uma função de construtor geralmente começa com uma letra maiúscula (ao contrário de outras funções, que tendem a começar com um caractere minúsculo). A letra maiúscula deve ajudar os desenvolvedores a usar a nova palavra-chave quando eles criam um objeto usando essa função.

guide/portuguese/javascript/tutorials/create-a-javascript-slot-machine/index.md

@@ -0,0 +1,11 @@
+---
+title: Create a JavaScript Slot Machine
+localeTitle: Crie um caça-níqueis JavaScript
+---
+Para isso, temos que gerar três números aleatórios usando a fórmula que eles nos dão e não o geral. `Math.floor(Math.random() * (3 - 1 + 1)) + 1;`
+```
+slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+
+```

guide/portuguese/javascript/tutorials/create-decimal-numbers-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Create Decimal Numbers with JavaScript
+localeTitle: Crie números decimais com JavaScript
+---
+Variáveis ​​numéricas JavaScript podem ter decimais.
+```
+var myDecimal = 2.8; 
+
+```

guide/portuguese/javascript/tutorials/debugging-javascript-with-browser-devtools/index.md

@@ -0,0 +1,90 @@
+---
+title: Debugging JavaScript with Browser Devtools
+localeTitle: Depurando JavaScript com Devtools do Navegador
+---
+Como desenvolvedor, você freqüentemente desejará depurar código. Você pode já ter usado o `console.log` em alguns dos desafios, que é a maneira mais simples de depurar.
+
+Neste artigo, contaremos alguns dos truques mais legais para depurar usando as ferramentas de depuração nativas dos navegadores.
+
+## Uma breve visão do FreeCodeCamp Code Editor:
+
+Antes de entrar na depuração, vamos divulgar alguns fatos secretos sobre o _incrível mecanismo de verificação de código_ da FCC.
+
+Nós usamos um [CodeMirror](http://codemirror.net/mode/javascript/index.html) personalizado, como o editor de código. Uma [função `eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) é usada para avaliar o código JavaScript representado como uma string do editor. Quando `eval()` é chamado, os navegadores executam seu código nativamente. Vamos aprender mais por que esse segredo é importante nas próximas seções deste artigo.
+
+## Agora seguindo para os truques:
+
+## Google Chrome DevTools
+
+O Google Chrome é um dos navegadores mais populares com um mecanismo JavaScript integrado chamado [V8](https://developers.google.com/v8/) e oferece um ótimo conjunto de ferramentas para desenvolvedores chamado [Chrome DevTools](https://developer.chrome.com/devtools) . É altamente recomendável visitar o [guia de depuração completo do JavaScript](https://developer.chrome.com/devtools/docs/javascript-debugging) .
+
+### 1: Noções básicas de DevTools
+
+#### Iniciando as DevTools do Chrome
+
+Bata `F12`
+
+. Alternativamente, você pode pressionar
+
+`Ctrl` + `Shift` + `I`
+
+no Windows e Linux ou
+
+`Cmd` + `Shift` + `I`
+
+no Mac, ou Se você simplesmente ama seu mouse, vá para `Menu > More Tools > Developer Tools` .
+
+#### Conhecer as `Sources` e as guias do `console` .
+
+Estas duas abas são talvez seus melhores amigos durante a depuração. A guia `Sources` pode ser usada para visualizar todos os scripts que estão na página da Web que você está visitando. Esta guia possui seções para a janela de código, árvore de arquivos, pilha de chamadas e janelas de observação, etc.
+
+A guia do `console` é onde vai toda a saída do log. Além disso, você pode usar o prompt da guia do console para executar o código JavaScript. Seu tipo de sinônimo para o prompt de comando no Windows, ou terminal no Linux.
+
+_Dica: Alterne o console a qualquer momento nas DevTools usando a tecla `Esc` ._
+
+### 2: Atalhos comuns e recursos
+
+Enquanto você pode visitar a [lista completa de atalhos](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts) , abaixo estão alguns que são mais usados:
+
+Recurso Windows, Linux Mac  
+Procurar por uma palavra-chave, regex é suportado. `Ctrl` + `F``Cmd` + `F`  
+Pesquise e abra um arquivo `Ctrl` + `P``Cmd` + `P`  
+Pule para a linha `Ctrl` + `G` + `:line_no``Cmd` + `G` + `:line_no`  
+Adicione um ponto de interrupção `Ctrl` + `B` ou clique na linha no. `Cmd` + `B` , ou clique na linha no.  
+Pausar / retomar a execução do script `F8` `F8`  
+Passar para a próxima chamada de função `F10` `F10`  
+Entre na próxima chamada de função `F11` `F11`
+
+### 3: Usando um Mapa de Origem para nosso Código
+
+Um dos recursos mais legais que você vai adorar é [depurar o Dynamic Script](https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript) , em tempo real, via [Source Maps](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps) .
+
+Cada script pode ser visualizado na guia Origem dos DevTools. A guia de origem possui todos os arquivos de origem JavaScript. Mas o código do editor de código é executado via `eval()` em um contêiner chamado simplesmente de máquina virtual (VM) dentro do processo do navegador.
+
+Como você deve ter adivinhado até agora, nosso código é na verdade um script que não possui um nome de arquivo. Então, não vemos isso na guia Origem.
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": brilhos:") **_Aqui vem o hack!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": brilhos:")
+
+Devemos aproveitar o `Source Maps` para atribuir um nome ao JavaScript do nosso editor. É bem simples:
+
+Vamos dizer que estamos no desafio [Factorialize](https://www.freecodecamp.com/challenges/factorialize-a-number) , e nosso código é assim:
+```
+function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+ } 
+ factorialize(5); 
+```
+
+Tudo o que precisamos fazer é adicionar `//# sourceURL=factorialize.js` ao topo do código, ou seja, a primeira linha:
+```
+//# sourceURL=factorialize.js 
+ 
+ function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+```
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": brilhos:") **_E Eureka é isso!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": brilhos:")
+
+Agora abra o DevTools e procure o nome do arquivo. Adicione pontos de quebra, depure e desfrute!

guide/portuguese/javascript/tutorials/debugging-node-files-using-cli-commands/index.md

@@ -0,0 +1,48 @@
+---
+title: Debugging Node files using CLI commands
+localeTitle: Depurando Arquivos de Nó Usando Comandos CLI
+---
+## Depurando Arquivos de Nó Usando Comandos CLI
+
+Neste tutorial, você aprenderá como depurar seu código Node.js na linha de comando. Seu código JavaScript simples pode ser facilmente depurado usando o DevTools de um navegador. Para o Node, você pode depurar seu código sem sair da sua interface de linha de comando (CLI).
+
+Digamos que você tenha um arquivo chamado `contents.js` . Você executaria o arquivo usando o comando `node` .
+
+```bash
+node contents.js 
+```
+
+Isso já deve ser conhecido por você desde que você está escrevendo o código Node.js. Agora, qualquer erro que apareça deve ser depurado. Para executar o arquivo no modo de depuração, anexe a palavra-chave `inspect` enquanto executa o arquivo.
+
+```bash
+node inspect contents.js 
+```
+
+Agora este comando irá abrir seu arquivo no modo de depuração. A partir daqui, você pode percorrer o seu código uma linha de cada vez, pressionando a tecla **N** do seu teclado.
+
+O depurador iniciará na primeira linha. Ao pressionar **N** , você pode mover o depurador para a próxima linha. Se houvesse um erro na primeira linha, ele mostraria um erro em vez de passar para a segunda linha. Isso é muito útil. Se, por exemplo, houver um erro na 17ª linha, ele mostrará o erro antes de avançar.
+
+Pode haver um erro em sua lógica, ou seja, você deseja que um determinado valor seja exibido, mas, em vez disso, mostra um valor diferente. Nesse caso, adicionar `console.log()` pode ajudar você e, com o modo de depuração, ficará mais fácil identificar a causa do erro.
+
+* * *
+
+Agora, às vezes, acontece que o seu código-fonte é enorme. Você entra no modo de depuração para depurar seus erros e tem certeza de que o erro é de uma função na linha 52. Mas como o modo de depuração inicia na linha 1, você não tem escolha senão visitar a linha 52, um por um? Absolutamente não!
+
+Basta adicionar o `debugger` palavras-chave antes da função.
+
+```javascript
+console.log("Outside the function....everything's going smoothly"); 
+ 
+ debugger; 
+ 
+ function doesSomething() { 
+    //some logic 
+    console.log("Something went wrong inside here!"); 
+ } 
+```
+
+Agora abra o arquivo novamente no modo de depuração e desta vez pressione **C** no seu teclado.
+
+Pressionar **N** move o depurador para a próxima linha e pressionar **C** diz ao depurador para percorrer todo o código de uma só vez. Isso é o mesmo que executar sem o modo de depuração. _Mas_ , seu código tem uma adição neste momento. Você adivinhou - a palavra-chave do `debugger` . Pressionar **C** normalmente executaria o código até o final, mas, por causa da adição do `debugger` , ele parará logo antes do início da função.
+
+Portanto, depois de executar seu arquivo no modo de depuração, pressionar **C** irá ignorar o código e parar exatamente antes da função na palavra-chave do `debugger` . Depois disso, você pode começar a percorrer a função uma linha por vez até identificar o erro.

guide/portuguese/javascript/tutorials/declare-javascript-objects-as-variables/index.md

@@ -0,0 +1,34 @@
+---
+title: Declare JavaScript Objects as Variables
+localeTitle: Declare objetos JavaScript como variáveis
+---
+Isto tem um formato simples. Você declara sua variável e a iguala a um objeto no formato `{ key: value}`
+```
+var car = { 
+  "wheels":4, 
+  "engines":1, 
+  "seats":5 
+ }; 
+```
+
+Você pode acessar as propriedades do objeto usando notação de ponto ou notação de colchetes.
+
+Usando notação de ponto:
+
+```javascript
+console.log(car.wheels); // 4 
+```
+
+Usando a notação de colchetes:
+
+```javascript
+console.log(car["wheels"]); // 1 
+```
+
+Usando a notação de colchetes dinâmicos:
+
+```javascript
+var seatsProperty = "seats"; 
+ console.log(car[seatsProperty]); // 5 
+
+```

guide/portuguese/javascript/tutorials/declare-javascript-variables/index.md

@@ -0,0 +1,98 @@
+---
+title: Declare Variables
+localeTitle: Declarar Variáveis
+---
+# Declarar Variáveis
+
+As declarações de variáveis ​​JavaScript podem ser classificadas em três componentes distintos: o tipo de variável, o nome da variável e o valor da variável.
+
+```js
+    var myName = "Rafael"; 
+```
+
+Vamos quebrar a linha de código acima nas partes que compõem:
+
+```js
+    var/const/let 
+```
+
+Variáveis ​​JavaScript podem ter três tipos de declaração: var, const e let. Variáveis ​​do tipo Var são globais, se declaradas fora de uma função, podem ser acessadas por qualquer arquivo JS (ou pelo console) e, se criadas dentro de uma função, são acessíveis independentemente do escopo do bloco. As variáveis ​​do tipo let são limitadas no escopo para seu bloco. Veja o exemplo abaixo para a diferença.
+
+```js
+     function varTest() { 
+      var x = 1; 
+      if (true) { 
+        var x = 2;  // same variable! 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 2 
+    } 
+ 
+    function letTest() { 
+      let x = 1; 
+      if (true) { 
+        let x = 2;  // different variable 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 1 
+    } 
+```
+
+Variáveis ​​do tipo Const têm o mesmo escopo que as variáveis ​​let (escopo de bloco), mas são imutáveis. Qualquer valor que uma variável do tipo const deve ser atribuída, deve acontecer quando a variável é declarada, e o JavaScript lançará um erro se a variável for alterada posteriormente.
+
+```js
+    const genre = "non-fiction"; 
+    console.log(genre); // "non-fiction"; 
+    genre = "fantasy"; // error 
+```
+
+Agora que podemos determinar qual é o tipo de variável, vamos dar uma olhada no nome. Os nomes das variáveis ​​JavaScript são gravados no formato de `camel case` . Um exemplo de caso de camelo é: `camelCase` . No contexto do nosso exemplo:
+
+```js
+    myName 
+```
+
+O nome é também vamos acessar a variável novamente mais tarde:
+
+```js
+    console.log(myName); // "Rafael" 
+```
+
+Finalmente, nosso valor:
+
+```js
+    "Rafael" 
+```
+
+O JavaScript é digitado dinamicamente, o que significa que qualquer variável pode representar qualquer tipo de dado em qualquer momento. Por exemplo:
+
+```js
+    var example = "This is an example"; 
+    example = [0, 1, 2, 3] 
+    example = {test: "Result"} 
+    example = 5 
+```
+
+Todas essas instruções são perfeitamente válidas - variáveis ​​JavaScript podem pular de string para array para objeto para inteiro.
+
+### Declare o objeto como const
+
+Como mencionado acima, a variável const é imutável, o valor atribuído a tal variável no momento da declaração não pode ser atualizado, mas há um ponto a ser observado na declaração do objeto com const. O objeto do tipo const também não pode ser atualizado uma vez definido, mas as propriedades do objeto cab são. Por exemplo.
+
+```js
+    const Car1 = { 
+        name: 'BMW', 
+        model: 'X1', 
+        color: 'black' 
+    } 
+```
+
+Aqui, não podemos atualizar o objeto, mas podemos atualizar as propriedades acessando o operador ponto (.) Como abaixo.
+
+```js
+    Car1.color = 'Red'; 
+    console.log(Car1); 
+    O/P - {name: "BMW", model: "X1", color: "Red"} 
+```
+
+Se precisarmos tornar o objeto enitre imutável (incluindo propriedades), então temos que usar o método freeze.

guide/portuguese/javascript/tutorials/decrement-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Decrement a Number with JavaScript
+localeTitle: Decrementar um número com JavaScript
+---
+Você pode facilmente decrementar ou diminuir uma variável em `1` com o operador `--` .
+```
+i--; 
+```
+
+é o equivalente de
+```
+i = i - 1; 
+```
+
+**Nota:** A linha inteira torna-se `i--;` , eliminando a necessidade do sinal de igual.

guide/portuguese/javascript/tutorials/delete-properties-from-a-javascript-object/index.md

@@ -0,0 +1,41 @@
+---
+title: Delete Properties from a JavaScript Object
+localeTitle: Excluir propriedades de um objeto JavaScript
+---
+Também podemos excluir propriedades de objetos como este:
+```
+delete ourDog.bark; 
+```
+
+O **operador delete** remove uma propriedade de um objeto.
+
+## Sintaxe
+
+`delete expression` onde a expressão deve ser avaliada para uma referência de propriedade, por exemplo:
+```
+delete object.property 
+ delete object['property'] 
+```
+
+## Parâmetros
+
+**objeto**  
+O nome de um objeto ou uma expressão avaliada para um objeto.
+
+**propriedade**  
+A propriedade a ser excluída.
+
+## Exemplo
+
+```js
+var person = {name:'Jay', age:'52'}; 
+ delete person['age']; 
+ 
+ console.log(person); //{name:'Jay'} 
+```
+
+## Valor de retorno
+
+Lança o modo estrito se a propriedade for uma propriedade não configurável própria (retorna falso em não-estrito). Retorna true em todos os outros casos.
+
+[Consulte Mais informação](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete)

guide/portuguese/javascript/tutorials/detect-authentic-click-events/index.md

@@ -0,0 +1,27 @@
+---
+title: Detect authentic click events
+localeTitle: Detectar eventos de cliques autênticos
+---
+## Detectar eventos de cliques autênticos
+
+Pode haver uma situação em que você queira fazer algumas coisas específicas somente se o evento de clique for realmente acionado por um usuário e não por algum script para simular um evento de clique.
+
+Existe uma solução muito simples para este problema, o objeto de evento javascript nos fornece uma propriedade `.istrusted` , que pode ser usada para diferenciar.
+
+#### Aqui está um exemplo de como usar esse método
+
+```javascript
+// Assume there is a button in the HTML 
+ const button = document.querySelector('button'); 
+ 
+ button.addEventListener('click', (e) => { 
+  if (e.isTrusted) { 
+    console.log('Button clicked by a real user'); 
+  } else { 
+    console.log('Button click simulated by a script'); 
+  } 
+ }); 
+ 
+ button.click() // Outputs "Button click simulated by a script" 
+
+```

guide/portuguese/javascript/tutorials/divide-one-number-by-another-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Divide One Number by Another with JavaScript
+localeTitle: Divide um número por outro com JavaScript
+---
+Usos JavaScript usam o símbolo `/` para divisão.
+```
+var quotient = 66 / 33; 
+
+```

guide/portuguese/javascript/tutorials/finding-a-remainder-in-javascript/index.md

@@ -0,0 +1,23 @@
+---
+title: Finding a Remainder in JavaScript
+localeTitle: Encontrando um Restante em JavaScript
+---
+O _operador_ `%` _restante_ fornece o restante da divisão de dois números.
+
+## Exemplo
+```
+5 % 2 = 1 because 
+ Math.floor(5 / 2) = 2 (Quotient) 
+ 2 * 2 = 4 
+ 5 - 4 = 1 (Remainder) 
+```
+
+## Uso
+
+Na matemática, um número pode ser verificado par ou ímpar verificando o restante da divisão do número por 2.
+```
+17 % 2 = 1 (17 is Odd) 
+ 48 % 2 = 0 (48 is Even) 
+```
+
+**Nota** Não confunda com o _módulo_ `%` não funciona bem com números negativos.

guide/portuguese/javascript/tutorials/generate-random-fractions-with-javascript/index.md

@@ -0,0 +1,5 @@
+---
+title: Generate Random Fractions with JavaScript
+localeTitle: Gerar frações aleatórias com JavaScript
+---
+JavaScript tem uma função `Math.random()` que gera um número decimal aleatório.

guide/portuguese/javascript/tutorials/generate-random-whole-numbers-with-javascript/index.md

@@ -0,0 +1,11 @@
+---
+title: Generate Random Whole Numbers with JavaScript
+localeTitle: Gere números inteiros aleatórios com JavaScript
+---
+É ótimo podermos criar números decimais aleatórios, mas é ainda mais útil se formos muito mais úteis para gerar um número inteiro aleatório.
+
+Para conseguir isso, podemos multiplicar o número aleatório por dez e usar o `Math.floor()` para converter o número decimal em um número inteiro
+```
+Math.floor(Math.random()*10) 
+
+```

guide/portuguese/javascript/tutorials/get-current-url-in-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Get Current Url in JavaScript
+localeTitle: Obter o URL atual em JavaScript
+---
+Para obter o **URL atual** :
+```
+var url = window.location.href; 
+```
+
+Para obter o **caminho atual** :
+```
+var path = window.location.path; 
+```
+
+Mais informações sobre o objeto de localização e suas propriedades podem ser encontradas [aqui](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) .

guide/portuguese/javascript/tutorials/give-your-javascript-slot-machine-some-stylish-images/index.md

@@ -0,0 +1,11 @@
+---
+title: Give Your JavaScript Slot Machine Some Stylish Images
+localeTitle: Dê ao seu caça-níqueis JavaScript algumas imagens elegantes
+---
+Nós já configuramos as imagens para você em uma matriz chamada imagens. Podemos usar diferentes índices para pegar cada um deles.
+
+Veja como definiríamos o primeiro slot para mostrar uma imagem diferente, dependendo de qual número seu número aleatório gera:
+```
+$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">'); 
+
+```

guide/portuguese/javascript/tutorials/how-to-create-a-countdown-timer/index.md

@@ -0,0 +1,62 @@
+---
+title: How to Create a Countdown Timer
+localeTitle: Como criar um temporizador de contagem regressiva
+---
+## Como criar um temporizador de contagem regressiva
+
+### Criação
+
+Comece construindo a função countdownTimer.
+
+```javascript
+function startCountdown(seconds){ 
+  var counter = seconds; 
+ 
+  var interval = setInterval(() => { 
+    console.log(counter); 
+    counter--; 
+ 
+ 
+    if(counter < 0 ){ 
+ 
+      // The code here will run when 
+      // the timer has reached zero. 
+ 
+      clearInterval(interval); 
+      console.log('Ding!'); 
+    }; 
+  }, 1000); 
+ }; 
+```
+
+### Execução
+
+Agora, para iniciar o cronômetro, fornecemos `startCountdown()` com um valor numérico como um argumento que representa os segundos para a contagem regressiva.
+
+```javascript
+  startCountdown(10); 
+  // Console Output // 
+  // 10 
+  // 9 
+  // 8 
+  // 7 
+  // 6 
+  // 5 
+  // 4 
+  // 3 
+  // 2 
+  // 1 
+  // 0 
+  // Ding! 
+```
+
+### Exemplo Vivo
+
+[Codepen - temporizador de contagem regressiva](https://codepen.io/rdev-rocks/pen/jLogxY?editors=0012)
+
+### Mais recursos
+
+Métodos utilizados:
+
+*   [setInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+*   [clearInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)

guide/portuguese/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md

@@ -0,0 +1,245 @@
+---
+title: How to Create a Dropdown Menu with CSS and JavaScript
+localeTitle: Como criar um menu suspenso com CSS e JavaScript
+---
+## Como criar um menu suspenso com CSS e JavaScript
+
+Neste tutorial, você aprenderá a criar um menu suspenso simples com JavaScript, HTML e CSS. Vamos percorrer o código HTML, CSS e Javascript, mas prestando mais atenção à programação, já que este é um tutorial do JS. Usaremos apenas JS e CSS simples, sem frameworks ou pré-processadores. A única (espécie de exceção) será importar o arquivo CSS do [Font Awesome](https://fontawesome.com/) porque usaremos um de seus ícones.
+
+Isso é direcionado a desenvolvedores que têm um entendimento médio de HTML, CSS e JS. Tentei torná-lo o mais limpo possível, mas não vou me concentrar muito nos detalhes aqui. Espero que todos gostem.
+
+## Screenshots
+
+É assim que o resultado do código se parece:
+
+Tela inicial:
+
+![](https://i.imgur.com/jrnu6mE.png)
+
+Dropdown aberto:
+
+![](https://i.imgur.com/gszPtRa.png)
+
+Dropdown com a opção selecionada:
+
+![](https://i.imgur.com/TKXxZGF.png)
+
+#### HTML:
+
+Nesta seção, discutiremos a implementação do código HTML para a página de demonstração. Para começar, vamos ver o código `<head>`
+
+```html
+
+<!DOCTYPE html> 
+ <html lang="en"> 
+ <head> 
+    <meta charset="UTF-8"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
+    <title>Dropdown Example</title> 
+ 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> 
+    <link rel="stylesheet" href="styles.css"> 
+ </head> 
+```
+
+Este é basicamente um texto padronizado em HTML, com a exceção das tags de `link` carregam as duas folhas de estilo CSS que usaremos neste tutorial: os estilos Font Awesome e o arquivo `styles.css` , onde definiremos os estilos desta página.
+
+Então, há o resto do arquivo HTML, o corpo:
+
+```html
+
+<body> 
+    <div class='dropdown'> 
+        <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> 
+ 
+        <div class='menu pointerCursor hide'> 
+            <div class='option' id='option1'>Option 1</div> 
+            <div class='option' id='option2'>Option 2</div> 
+            <div class='option' id='option3'>Option 3</div> 
+            <div class='option' id='option4'>Option 4</div> 
+        </div> 
+ 
+    </div> 
+    <span id='result'>The result is: </span> 
+    <script> 
+      ... 
+    </script> 
+ </body> 
+ </html> 
+```
+
+Esta seção pode ser dividida em 3 partes principais:
+
+*   O `.dropdown` div, onde a estrutura do elemento dropdown será definida.
+*   O elemento `#result` , que conterá a opção selecionada pelo usuário, no elemento suspenso.
+*   O script escrito na tag `<script>` . Sua implementação está escondida aqui, porque seus detalhes serão explicados na última seção deste tutorial.
+
+O elemento dropdown é um `div` contém um `title` e elementos de `menu` . O primeiro apenas define o texto que será apresentado no elemento antes que qualquer opção seja selecionada e o segundo definirá as opções que serão selecionáveis ​​pelo elemento.
+
+O elemento de `result` existe apenas para mostrar a você qual opção está selecionada no momento.
+
+#### Estilos:
+
+Abaixo, você pode verificar o código css completo. Como você pode ver, ele faz uso da `transition` de CSS3 e `transform` construções.
+
+Por favor, preste atenção às definições das classes `.dropdown` . Estes são usados ​​para definir o layout para o componente do contêiner suspenso, bem como seus elementos internos, como o `.title` e suas `.option` .
+
+```css
+body{ 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
+ } 
+ 
+ .hide { 
+    max-height: 0 !important; 
+ } 
+ 
+ .dropdown{ 
+    border: 0.1em solid black; 
+    width: 10em; 
+    margin-bottom: 1em; 
+ } 
+ 
+ .dropdown .title{ 
+    margin: .3em .3em .3em .3em; 
+    width: 100%; 
+ } 
+ 
+ .dropdown .title .fa-angle-right{ 
+    float: right; 
+    margin-right: .7em; 
+    transition: transform .3s; 
+ } 
+ 
+ .dropdown .menu{ 
+    transition: max-height .5s ease-out; 
+    max-height: 20em; 
+    overflow: hidden; 
+ } 
+ 
+ .dropdown .menu .option{ 
+    margin: .3em .3em .3em .3em; 
+    margin-top: 0.3em; 
+ } 
+ 
+ .dropdown .menu .option:hover{ 
+    background: rgba(0,0,0,0.2); 
+ } 
+ 
+ .pointerCursor:hover{ 
+    cursor: pointer; 
+ } 
+ 
+ .rotate-90{ 
+    transform: rotate(90deg); 
+ } 
+```
+
+#### JavaScript:
+
+Agora vamos ver como a parte Javascript é implementada. Primeiro vamos passar pelas definições das funções e, em seguida, o código que chama essas funções para fazer as ações suspensas acontecerem.
+
+Basicamente, existem 3 ações que ocorrem dependendo do que a interação do usuário é, como seus ouvintes são adicionados aos elementos DOM:
+
+1.  Clicando no elemento suspenso
+2.  Selecionando uma das opções suspensas
+3.  Alterando a opção atualmente selecionada
+
+Gostaria de deixar claro que estamos usando as funções de seta ( `() => {}` ) e a palavra-chave `const` , que são recursos do ES6. Você provavelmente é bom se estiver usando uma versão recente do seu navegador, mas lembre-se disso.
+
+#### 1\. Clicar no elemento suspenso
+
+```Javascript
+function toggleClass(elem,className){ 
+    if (elem.className.indexOf(className) !== -1){ 
+        elem.className = elem.className.replace(className,''); 
+    } 
+    else{ 
+        elem.className = elem.className.replace(/\s+/g,' ') +   ' ' + className; 
+    } 
+ 
+    return elem; 
+ } 
+ 
+ function toggleDisplay(elem){ 
+    const curDisplayStyle = elem.style.display; 
+ 
+    if (curDisplayStyle === 'none' || curDisplayStyle === ''){ 
+        elem.style.display = 'block'; 
+    } 
+    else{ 
+        elem.style.display = 'none'; 
+    } 
+ } 
+ 
+ 
+ function toggleMenuDisplay(e){ 
+    const dropdown = e.currentTarget.parentNode; 
+    const menu = dropdown.querySelector('.menu'); 
+    const icon = dropdown.querySelector('.fa-angle-right'); 
+ 
+    toggleClass(menu,'hide'); 
+    toggleClass(icon,'rotate-90'); 
+ } 
+```
+
+Quando o elemento suspenso é clicado, ele é aberto (se estiver fechado) ou fechado (se estiver aberto). Isso acontece vinculando `toggleMenuDisplay` ao listener de evento de clique no elemento suspenso. Esta função alterna a exibição de seu `menu` elemento pelo uso dos `toggleDisplay` e `toggleClass` funções.
+
+#### 2\. Selecionando uma das opções suspensas
+
+```Javascript
+function handleOptionSelected(e){ 
+    toggleClass(e.target.parentNode, 'hide'); 
+ 
+    const id = e.target.id; 
+    const newValue = e.target.textContent + ' '; 
+    const titleElem = document.querySelector('.dropdown .title'); 
+    const icon = document.querySelector('.dropdown .title .fa'); 
+ 
+ 
+    titleElem.textContent = newValue; 
+    titleElem.appendChild(icon); 
+ 
+    //trigger custom event 
+    document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); 
+    //setTimeout is used so transition is properly shown 
+    setTimeout(() => toggleClass(icon,'rotate-90',0)); 
+ } 
+```
+
+#### 3\. Alterar a opção atualmente selecionada
+
+```Javascript
+function handleTitleChange(e){ 
+    const result = document.getElementById('result'); 
+ 
+    result.innerHTML = 'The result is: ' + e.target.textContent; 
+ } 
+```
+
+A função `handleTitleChange` está vinculada ao evento de `change` personalizado no elemento `.title` , para alterar o conteúdo do elemento `#result` sempre que o elemento title for alterado. O acionamento deste evento é feito na seção anterior.
+
+#### Código principal
+
+```Javascript
+//get elements 
+ const dropdownTitle = document.querySelector('.dropdown .title'); 
+ const dropdownOptions = document.querySelectorAll('.dropdown .option'); 
+ 
+ //bind listeners to these elements 
+ dropdownTitle.addEventListener('click', toggleMenuDisplay); 
+ dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); 
+ document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange); 
+```
+
+Na seção principal, há apenas um código simples para obter os elementos title e options do menu suspenso para vincular a eles os eventos discutidos na última seção.
+
+## Demonstração
+
+O código completo e a demonstração deste aplicativo podem ser encontrados [aqui](https://codepen.io/GCrispino/pen/EEXmYd) .
+
+## Mais Informações
+
+*   [Introdução ao ES6](https://guide.freecodecamp.org/javascript/es6)
+*   [Funções de seta](https://guide.freecodecamp.org/javascript/es6/arrow_functions/)
+*   [Deixe e Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/)

guide/portuguese/javascript/tutorials/how-to-create-a-lightbox/index.md

@@ -0,0 +1,569 @@
+---
+title: How to Create a Lightbox
+localeTitle: Como criar um lightbox
+---
+## Como criar um lightbox
+
+### Introdução
+
+Uma mesa de luz é uma combinação de dois componentes, um [modal](https://en.wikipedia.org/wiki/Modal_window) e uma apresentação de slides. Aqui você construirá uma lightbox simples usando `HTML` , `CSS` e `JavaScript` .
+
+A caixa de luz estará contida no modal, que será acionado por algum `JavaScript` , a partir de [manipuladores de eventos](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) na marcação `HTML` . Você construirá estilos que fornecerão estado com `CSS` e comportamento com `JavaScript` . Você também encontrará uma lista de referência dos métodos que você usa e outros bits úteis relacionados a este tutorial, na parte inferior.
+
+#### Nossas Imagens
+
+As imagens que vamos usar estão sendo fornecidas pela [Pexels](https://www.pexels.com/) , uma galeria de fotos gratuita que permite fornecer imagens de alta qualidade aos seus projetos de forma rápida, gratuita e geralmente sem atribuições necessárias.
+
+#### Apenas mostre-me o código!
+
+Um exemplo ao vivo pode ser encontrado [aqui - CodePen / Lightbox](https://codepen.io/rdev-rocks/pen/KXNzvo) e um rascunho completo do código está perto da parte inferior.
+
+### Etapa 1. O Markup
+
+A marcação, ou `HTML` , fornece a estrutura para a lightbox.
+
+```html
+
+<!-- Here is your access point for your user, a preview of the images you wish to display. 
+     You use the onclick="" event handler to execute the methods you will define in the 
+     JavaScript near the bottom --> 
+ 
+ <div class="row"> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city." /> 
+  </div> 
+ </div> 
+ 
+ <!-- This is your lightbox, it is contained in a modal. Here you provide all the images, 
+     controls, and another set of preview images as the dots. Dots show your user which 
+     image is currently active. Note that you use entities (eg &times;), more info on 
+     them at the bottom. --> 
+ 
+ <div id="Lightbox" class="modal"> 
+  <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+  <div class="modal-content"> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+    </div> 
+ 
+    <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+    <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+    <div class="dots"> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road" /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city." /> 
+      </div> 
+    </div> 
+  </div> 
+ </div> 
+```
+
+### Etapa 2. Estilo com CSS
+
+O `CSS` fornece estados diferentes para a sua mesa de luz. Coisas como visibilidade, posicionamento e efeitos de foco.
+
+Sua folha de estilo deve ficar assim:
+
+```css
+/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ 
+ 
+ html { 
+  box-sizing: border-box; 
+ } 
+ 
+ *, *:before, *:after { 
+  box-sizing: inherit; 
+ } 
+ 
+ body { 
+  margin: 0; 
+ } 
+ 
+ /* You define the style of our previews here, you are using flex to display the images 
+   "responsively". */ 
+ 
+ .preview { 
+  width: 100%; 
+ } 
+ 
+ .row { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ .row > .col { 
+  padding: 0 8px; 
+ } 
+ 
+ .col { 
+  float: left; 
+  width: 25%; 
+ } 
+ 
+ /* Now you want to define what the lightbox will look like. Note that you have the display 
+   as none. You don't want it to show until the user clicks on one of the previews. 
+   You will change this display property with JavaScript below. */ 
+ 
+ .modal { 
+  display: none; 
+  position: fixed; 
+  z-index: 1; 
+  padding: 10px 62px 0px 62px; 
+  left: 0; 
+  top: 0; 
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: black; 
+ } 
+ 
+ .modal-content { 
+  position: relative; 
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  margin: auto; 
+  padding: 0 0 0 0; 
+  width: 80%; 
+  max-width: 1200px; 
+ } 
+ 
+ /* Same with your slides, you set the display to none, because you want to choose which 
+   one is shown at a time. */ 
+ 
+ .slide { 
+  display: none; 
+ } 
+ 
+ .image-slide { 
+  width: 100%; 
+ } 
+ 
+ .modal-preview { 
+  width: 100%; 
+ } 
+ 
+ .dots { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ /* You want the previews a little transparent to show that they are "inactive". 
+   You then add an .active or :hover class to animate the selections for your user when 
+   they interact with your controls and clickable content. 
+ */ 
+ 
+ img.preview, img.modal-preview { 
+  opacity: 0.6; 
+ } 
+ 
+ img.active, 
+ .preview:hover, 
+ .modal-preview:hover { 
+  opacity: 1; 
+ } 
+ 
+ img.hover-shadow { 
+  transition: 0.3s; 
+ } 
+ 
+ .hover-shadow:hover { 
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+ } 
+ 
+ .close { 
+  color: white; 
+  position: absolute; 
+  top: 10px; 
+  right: 25px; 
+  font-size: 35px; 
+  font-weight: bold; 
+ } 
+ 
+ .close:hover, 
+ .close:focus { 
+  color: #999; 
+  text-decoration: none; 
+  cursor: pointer; 
+ } 
+ 
+ .previous, 
+ .next { 
+  cursor: pointer; 
+  position: absolute; 
+  top: 50%; 
+  width: auto; 
+  padding: 16px; 
+  margin-top: -50px; 
+  color: white; 
+  font-weight: bold; 
+  font-size: 20px; 
+  transition: 0.6s ease; 
+  border-radius: 0 3px 3px 0; 
+  user-select: none; 
+  -webkit-user-select: none; 
+ } 
+ 
+ .next { 
+  right: 0; 
+  border-radius: 3px 0 0 3px; 
+ } 
+ 
+ .previous:hover, 
+ .next:hover { 
+  background-color: rgba(0, 0, 0, 0.8); 
+ } 
+```
+
+### Etapa 3. JavaScript
+
+Agora para os negócios! Seu JavaScript deve ficar assim:
+
+```javascript
+// Initialize here and run showSlide() to give your lightbox a default state. 
+ 
+ let slideIndex = 1; 
+ showSlide(slideIndex); 
+ 
+ // You are providing the functionality for your clickable content, which is 
+ // your previews, dots, controls and the close button. 
+ 
+ function openLightbox() { 
+  document.getElementById('Lightbox').style.display = 'block'; 
+ } 
+ 
+ function closeLightbox() { 
+  document.getElementById('Lightbox').style.display = 'none'; 
+ }; 
+ 
+ // Note that you are assigning new values here to our slidIndex. 
+ 
+ function changeSlide(n) { 
+  showSlide(slideIndex += n); 
+ }; 
+ 
+ function toSlide(n) { 
+  showSlide(slideIndex = n); 
+ }; 
+ 
+ // This is your logic for the light box. It will decide which slide to show 
+ // and which dot is active. 
+ 
+ function showSlide(n) { 
+  const slides = document.getElementsByClassName('slide'); 
+  let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+  if (n > slides.length) { 
+    slideIndex = 1; 
+  }; 
+ 
+  if (n < 1) { 
+    slideIndex = slides.length; 
+  }; 
+ 
+  for (let i = 0; i < slides.length; i++) { 
+    slides[i].style.display = "none"; 
+  }; 
+ 
+  for (let i = 0; i < modalPreviews.length; i++) { 
+    modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+  }; 
+ 
+  slides[slideIndex - 1].style.display = 'block'; 
+  modalPreviews[slideIndex - 1].className += ' active'; 
+ }; 
+```
+
+E é isso! Agora coloque todo o código juntos. Agora você deve ter uma lightbox funcional.
+
+### Todo o código
+
+```html
+
+<body> 
+  <style> 
+    html { 
+      box-sizing: border-box; 
+    } 
+ 
+    *, *:before, *:after { 
+      box-sizing: inherit; 
+    } 
+ 
+    body { 
+      margin: 0; 
+    } 
+ 
+    .preview { 
+      width: 100%; 
+    } 
+ 
+    .row { 
+      display: flex; 
+      flex-direction: row; 
+      justify-content: space-between; 
+    } 
+ 
+    .row > .col { 
+      padding: 0 8px; 
+    } 
+ 
+    .col { 
+      float: left; 
+      width: 25%; 
+    } 
+ 
+    .modal { 
+      display: none; 
+      position: fixed; 
+      z-index: 1; 
+      padding: 10px 62px 0px 62px; 
+      left: 0; 
+      top: 0; 
+      width: 100%; 
+      height: 100%; 
+      overflow: auto; 
+      background-color: black; 
+    } 
+ 
+    .modal-content { 
+      position: relative; 
+      display: flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      margin: auto; 
+      padding: 0 0 0 0; 
+      width: 80%; 
+      max-width: 1200px; 
+    } 
+ 
+    .slide { 
+      display: none; 
+    } 
+ 
+    .image-slide { 
+        width: 100%; 
+    } 
+ 
+    .modal-preview { 
+        width: 100%; 
+    } 
+ 
+    .dots { 
+        display: flex; 
+        flex-direction: row; 
+        justify-content: space-between; 
+    } 
+ 
+    img.preview, img.modal-preview { 
+      opacity: 0.6; 
+    } 
+ 
+    img.active, 
+    .preview:hover, 
+    .modal-preview:hover { 
+      opacity: 1; 
+    } 
+ 
+    img.hover-shadow { 
+      transition: 0.3s; 
+    } 
+ 
+    .hover-shadow:hover { 
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+    } 
+ 
+    .close { 
+      color: white; 
+      position: absolute; 
+      top: 10px; 
+      right: 25px; 
+      font-size: 35px; 
+      font-weight: bold; 
+    } 
+ 
+    .close:hover, 
+    .close:focus { 
+      color: #999; 
+      text-decoration: none; 
+      cursor: pointer; 
+    } 
+ 
+    .previous, 
+    .next { 
+      cursor: pointer; 
+      position: absolute; 
+      top: 50%; 
+      width: auto; 
+      padding: 16px; 
+      margin-top: -50px; 
+      color: white; 
+      font-weight: bold; 
+      font-size: 20px; 
+      transition: 0.6s ease; 
+      border-radius: 0 3px 3px 0; 
+      user-select: none; 
+      -webkit-user-select: none; 
+    } 
+ 
+    .next { 
+      right: 0; 
+      border-radius: 3px 0 0 3px; 
+    } 
+ 
+    .previous:hover, 
+    .next:hover { 
+      background-color: rgba(0, 0, 0, 0.8); 
+    } 
+  </style> 
+  <div class="row"> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city" /> 
+    </div> 
+  </div> 
+ 
+  <div id="Lightbox" class="modal"> 
+ 
+    <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+    <div class="modal-content"> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+      </div> 
+ 
+      <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+      <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+      <div class="dots"> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city" /> 
+        </div> 
+      </div> 
+    </div> 
+  </div> 
+ 
+  <script> 
+    let slideIndex = 1; 
+    showSlide(slideIndex); 
+ 
+    function openLightbox() { 
+      document.getElementById('Lightbox').style.display = 'block'; 
+    }; 
+ 
+    function closeLightbox() { 
+      document.getElementById('Lightbox').style.display = 'none'; 
+    }; 
+ 
+    function changeSlide(n) { 
+      showSlide(slideIndex += n); 
+    }; 
+ 
+    function toSlide(n) { 
+      showSlide(slideIndex = n); 
+    }; 
+ 
+    function showSlide(n) { 
+      const slides = document.getElementsByClassName('slide'); 
+      let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+      if (n > slides.length) { 
+        slideIndex = 1; 
+      }; 
+ 
+      if (n < 1) { 
+        slideIndex = slides.length; 
+      }; 
+ 
+      for (let i = 0; i < slides.length; i++) { 
+        slides[i].style.display = "none"; 
+      }; 
+ 
+      for (let i = 0; i < modalPreviews.length; i++) { 
+        modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+      }; 
+ 
+      slides[slideIndex - 1].style.display = 'block'; 
+      modalPreviews[slideIndex - 1].className += ' active'; 
+    }; 
+  </script> 
+ </body> 
+```
+
+## \### Mais Informações:
+
+#### HTML
+
+[Modal](https://en.wikipedia.org/wiki/Modal_window) - uma janela pop-up
+
+[Manipuladores de Eventos](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) - propriedades HTML que escutam eventos de usuários.
+
+[Entidade](https://developer.mozilla.org/en-US/docs/Glossary/Entity) - Uma string que representa um caractere reservado em HTML.
+
+#### CSS
+
+[box-sizing:](https://css-tricks.com/box-sizing/) - Uma propriedade CSS3 que controla a maneira como o navegador processa o conteúdo com base na altura e na largura.
+
+[Flex-box](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - Uma nova tecnologia que ajuda a posicionar o conteúdo HTML em um manor responsivo.
+
+[: hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - Um pseudo-seletor que é acionado quando um usuário passa o mouse sobre um elemento quando essa classe é atribuída a ele.
+
+#### JavaScript
+
+[Deixe](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) uma variável de escopo de bloco.
+
+[const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) Uma constante de escopo de bloco.
+
+[getElementById ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) - Um método de documento que retorna uma referência a um elemento HTML.
+
+[getElementsByClassName ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) - Um método de documento que retorna uma matriz de referências ao html que possui classes correspondentes.
+
+[\+ =](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) - um operador de atribuição que adicionará números ou concatenará strings.
+
+#### Recursos:
+
+[Exemplo ao vivo](https://codepen.io/rdev-rocks/pen/KXNzvo?editors=1111) - Uma CodePen que demonstra o código acima.
+
+[Flex-Box Interativa](https://codepen.io/enxaneta/full/adLPwv) - Uma CodePen interativa que mostra o comportamento flex-box.
+
+[Pexels](https://www.pexels.com/) - Uma galeria de fotos.
+
+[MDN](https://developer.mozilla.org/en-US/) - Um ótimo lugar para informações sobre coisas da web.
+
+[W3School - Lightbox](https://www.w3schools.com/howto/howto_js_lightbox.asp) - Este código foi inspirado a partir daqui. Obrigado W3Schools!

guide/portuguese/javascript/tutorials/how-to-create-a-slideshow/index.md

@@ -0,0 +1,60 @@
+---
+title: How to Create a Slideshow
+localeTitle: Como criar uma apresentação de slides
+---
+## Como criar uma apresentação de slides
+
+Uma apresentação de slides da Web é uma sequência de imagens ou texto que consiste em mostrar um elemento dessa sequência em um intervalo de tempo.
+
+Para este tutorial, você pode criar uma apresentação de slides seguindo as próximas etapas:
+
+### Escreva uma marcação.
+
+\`\` \`html   Slideshow  
+```
+### Write styles to hide slides and show only one slide. 
+ 
+ For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it. 
+```
+
+css \[data-component = "apresentação de slides"\] .slide { Mostrar nenhum; }
+
+\[data-component = "apresentação de slides"\] .slide.active { display: bloco; }
+```
+### Change the slides in a time interval. 
+ 
+ The first step to change the slides to show, is select the slide wrapper(s) and then its slides. 
+ 
+ When you selected the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show, and then just repeat the process in a time interval. 
+ 
+ Keep it in mind when you remove a active class to a slide, you are hidden it because the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style ``display:none to display:block`` , so the slide will show to the users. 
+```
+
+js var slideshows = document.querySelectorAll ('\[data-componente = "apresentação de slides"\]');
+
+// Aplica-se a todas as apresentações de slides que você define com a marcação slideshows.forEach (initSlideShow);
+
+função initSlideShow (slideshow) {
+```
+var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides 
+ 
+ var index = 0, time = 5000; 
+ slides[index].classList.add('active'); 
+ 
+ setInterval( () => { 
+  slides[index].classList.remove('active'); 
+ 
+  //Go over each slide incrementing the index 
+  index++; 
+ 
+  // If you go over all slides, restart the index to show the first slide and start again 
+  if (index === slides.length) index = 0; 
+ 
+  slides[index].classList.add('active'); 
+ 
+ }, time); 
+```
+
+} \`\` \`
+
+#### [Exemplo de codepen seguindo este tutorial](https://codepen.io/AndresUris/pen/rGXpvE)

guide/portuguese/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create a Top Navigation Bar
+localeTitle: Como criar uma barra de navegação superior
+---
+## Como criar uma barra de navegação superior
+
+Este é um esboço. [Ajude nossa comunidade a expandi-lo](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md) .
+
+[Este guia de estilo rápido ajudará a garantir que sua solicitação de recebimento seja aceita](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Mais Informações:

guide/portuguese/javascript/tutorials/how-to-create-an-accordion/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create an Accordion
+localeTitle: Como criar um acordeão
+---
+## Como criar um acordeão
+
+Este é um esboço. [Ajude nossa comunidade a expandi-lo](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-an-accordion/index.md) .
+
+[Este guia de estilo rápido ajudará a garantir que sua solicitação de recebimento seja aceita](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Mais Informações:

guide/portuguese/javascript/tutorials/how-to-create-popups/index.md

@@ -0,0 +1,46 @@
+---
+title: How to Create Popups
+localeTitle: Como criar pop-ups
+---
+## Como criar pop-ups
+
+Pop-up é uma janela que aparece quando você seleciona uma opção com um mouse ou pressiona uma tecla de função especial.
+
+Neste exemplo, o pop-up aparecerá quando você clicar em um botão e permanecerá na tela até que você pressione a opção X.
+
+Vamos construir o popup usando `HTML` , `CSS` e `JavaScript`
+
+### Etapa 1 em HTML
+
+O HTML fornece a estrutura para o pop-up
+
+\`\` \`html
+
+Abra o PopUp
+
+Popup com JavaScript
+
+X
+```
+### Step 2 CSS 
+ We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none; 
+```
+
+css .popup _main_ div { posição: fixa; largura: 800px; altura: 400 px; borda: 2px preto sólido; raio de fronteira: 5 px; background-color: #fff; esquerda: 50%; margem esquerda: -400px; topo: 50%; margem superior: -250px; Mostrar nenhum;
+
+} .close _popup { posição: absoluta; largura: 25px; altura: 25 px; raio de fronteira: 25 px; borda: 2px preto sólido; texto-alinhar: centro; direita: 5px; top: 5px; cursor: ponteiro; } .close_ popup p { margem superior: 5px; font-weight: 400;
+
+} .texto{ texto-alinhar: centro; tamanho da fonte: 30px; font-weight: 400; margem superior: 22%; } #Btn { posição: absoluta; esquerda: 50%; topo: 20%;
+
+}
+```
+### Step 3 JavaScript 
+```
+
+js // Primeiro de tudo vou inicializar minhas variáveis // Selecione os elementos que usaremos no DOM // Eu adicionarei en event no botão que acionará uma função que mudará o estilo de exibição do pop-up de none para block
+
+const Btn = document.getElementById ("Btn") const PopupDiv = document.querySelector (". popup _principal_ div") const ClosePopup = document.querySelector (". close\_popup") Btn.addEventListener ('clique', função () { PopupDiv.style.display = "bloquear" }) ClosePopup.addEventListener ('clique', função () { PopupDiv.style.display = "nenhum" })
+
+\`\` \`
+
+Live code in: [Codepen.io](https://codepen.io/voula12/pen/qyyNeK)

guide/portuguese/javascript/tutorials/how-to-create-tabs/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create Tabs
+localeTitle: Como criar guias
+---
+## Como criar guias
+
+Este é um esboço. [Ajude nossa comunidade a expandi-lo](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-tabs/index.md) .
+
+[Este guia de estilo rápido ajudará a garantir que sua solicitação de recebimento seja aceita](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Mais Informações:

guide/portuguese/javascript/tutorials/how-to-install-node-js-and-npm-on-windows/index.md

@@ -0,0 +1,32 @@
+---
+title: How to Install Node Js and Npm on Windows
+localeTitle: Como instalar o Node Js e Npm no Windows
+---
+## Como instalar o Node Js e Npm no Windows
+
+Instalar Node.js e Npm no Windows é muito simples.
+
+Primeiro, baixe o instalador do Windows no [site](https://nodejs.org/) do [Node.js.](https://nodejs.org/) Você terá a escolha entre o **LTS** (Long Term Support) ou a versão **atual** .
+
+*   A versão **atual** recebe os mais recentes recursos e atualizações mais rapidamente
+*   A versão **LTS** foregos apresenta alterações para melhorar a estabilidade, mas recebe patches como correções de bugs e atualizações de segurança
+
+Depois de selecionar uma versão que atenda às suas necessidades, execute o instalador. Siga os prompts para selecionar um caminho de instalação e garantir que o recurso do **gerenciador de pacotes npm** seja incluído junto com o **tempo de execução** do **Node.js.** Essa deve ser a configuração padrão.
+
+Reinicie seu computador após a conclusão da instalação.
+
+Se você instalou sob a configuração padrão, o Node.js agora deve ser adicionado ao seu PATH. Execute o prompt de comando ou o powershell e insira o seguinte para testá-lo:
+```
+> node -v 
+```
+
+O console deve responder com uma string de versão. Repita o processo para Npm:
+```
+> npm -v 
+```
+
+Se ambos os comandos funcionarem, sua instalação foi um sucesso e você pode começar a usar o Node.js!
+
+#### Mais Informações:
+
+Para mais informações e guias, visite a [página de documentos](https://nodejs.org/en/docs/) do [Node.js.](https://nodejs.org/en/docs/)

guide/portuguese/javascript/tutorials/increment-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Increment a Number with JavaScript
+localeTitle: Incrementar um número com JavaScript
+---
+Você pode facilmente incrementar ou adicionar `1` a uma variável com o operador `++` .
+```
+i++; 
+```
+
+é o equivalente de
+```
+i = i + 1; 
+```
+
+**Nota** A linha inteira torna-se `i++;` , eliminando a necessidade do sinal de igual.

guide/portuguese/javascript/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: Tutoriais
+---
+## Tutoriais
+
+Este é um esboço. [Ajude nossa comunidade a expandi-lo](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/index.md) .
+
+[Este guia de estilo rápido ajudará a garantir que sua solicitação de recebimento seja aceita](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Mais Informações:

guide/portuguese/javascript/tutorials/invert-regular-expression-matches-with-javascript/index.md

@@ -0,0 +1,7 @@
+---
+title: Invert Regular Expression Matches with JavaScript
+localeTitle: Inverta correspondências de expressões regulares com JavaScript
+---
+Use `/\S/gi` ; para combinar tudo o que não é um espaço na string.
+
+Você pode inverter qualquer correspondência usando a versão maiúscula do seletor `\s` versus `\S` por exemplo.

guide/portuguese/javascript/tutorials/iterate-with-javascript-for-loops/index.md

@@ -0,0 +1,26 @@
+---
+title: Iterate with JavaScript for Loops
+localeTitle: Iterar com JavaScript para loops
+---
+O tipo mais comum de loop de JavaScript é chamado `for loop` porque é executado `for` um número específico de vezes.
+```
+var ourArray = []; 
+ for(var i = 0; i < 5; i++) { 
+  ourArray.push(i); 
+ } 
+```
+
+ourArray agora conterá \[0,1,2,3,4\]
+
+## Mais sobre for loops
+```
+for(var i = 0; i < 5; i++) {  // There are 3 parts here 
+```
+
+Existem três partes para loop. Eles são separados por ponto e vírgula.
+
+1.  A inicialização: `var i = 0;` - Este código é executado apenas uma vez no início do loop. É geralmente usado para declarar a variável do contador (com `var` ) e inicializar o contador (neste caso, é definido como 0).
+    
+2.  A condição: `i < 5;` - O loop será executado enquanto isso for `true` . Isso significa que, assim que `i` for igual a 5, o loop parará de fazer loop. Note que o interior do loop nunca verá `i` como 5, porque ele irá parar antes disso. Se esta condição for inicialmente `false` , o loop nunca será executado.
+    
+3.  O incremento: `i++` - Este código é executado no final de cada loop. Geralmente é um incremento simples (operador `++` ), mas pode ser qualquer transformação matemática. É usado para mover o contador ( `i` ) para frente (ou para trás, ou o que for.

guide/portuguese/javascript/tutorials/iterate-with-javascript-while-loops/index.md

@@ -0,0 +1,14 @@
+---
+title: Iterate with JavaScript While Loops
+localeTitle: Iterar com loops While de JavaScript
+---
+Outro tipo de loop de JavaScript é chamado de `while loop` porque ele é executado `while` algo é verdadeiro e pára assim que algo não for mais verdadeiro.
+```
+var ourArray = []; 
+ var i = 0; 
+ while(i < 5) { 
+  ourArray.push(i); 
+  i++; 
+ } 
+
+```

guide/portuguese/javascript/tutorials/javascript-for-loops-explained/index.md

@@ -0,0 +1,43 @@
+---
+title: JavaScript for Loops Explained
+localeTitle: JavaScript para Loops Explained
+---
+A instrução for cria um loop que consiste em três expressões opcionais, entre parênteses e separadas por ponto e vírgula, seguidas por uma instrução ou um conjunto de instruções executadas no loop.
+
+O loop for possui a seguinte sintaxe:
+```
+for (<a href='http://forum.freecodecamp.com/t/javascript-while-loop/14668' target='_blank' rel='nofollow'>initialization]; [condition]; [final-expression]) { 
+    code block to be executed 
+ } 
+```
+
+\[inicialização\] é executado antes que o loop (o bloco de código) seja iniciado.
+
+\[condição\] define a condição para executar o loop (o bloco de código).
+
+\[expressão final\] é executada toda vez que o loop (o bloco de código) é executado.
+
+## Exemplo em JavaScript:
+```
+var ourArray = []; 
+ for (var i = 0; i < 5; i++) { 
+    ourArray.push(i); 
+ } 
+```
+
+No exemplo acima, você pode ler:
+
+\[initialization\] define uma variável antes do início do loop (var i = 0).
+
+\[condição\] define a condição para o loop ser executado (eu devo ser menor que 5).
+
+\[expressão final\] aumenta um valor (i ++) toda vez que o bloco de código no loop for executado.
+
+## Por que precisamos de "for loops"?
+
+For loops são usados ​​para percorrer um bloco de código um número conhecido de vezes. Às vezes é o computador que sabe quantas vezes, não você, mas ainda é conhecido.
+
+Checkout alguns dos nossos outros artigos em loops:
+
+*   \[While Loop
+*   [Para em loop](http://forum.freecodecamp.com/t/javascript-for-in-loop/14665)

guide/portuguese/javascript/tutorials/page-redirects-using-javascript/index.md

@@ -0,0 +1,59 @@
+---
+title: Page Redirects Using JavaScript
+localeTitle: Página Redireciona Usando JavaScript
+---
+## Página Redireciona Usando JavaScript
+
+Se você estiver tentando redirecionar um usuário para outra página, poderá usar o JavaScript facilmente para realizar essa tarefa. É importante observar o seguinte:
+
+Mesmo se você tiver a biblioteca jQuery carregada em seus scripts, talvez você queira usar a solução JavaScript pura para redirecionamentos de página para fins de eficiência.
+
+Existem várias maneiras diferentes de fazer isso, mas a maneira mais simples é usar o objeto `window.location` para enviar o usuário para a página para a qual você deseja que ele seja redirecionado. O objeto `window.location` pode usar qualquer valor de URL válido, como `http://www.yoururl.com` , `somepage.html` etc.
+
+```javascript
+window.location = 'http://www.yoururl.com'; 
+ // window.location = 'somepage.html'; 
+ // etc. 
+```
+
+### Redirecionamento de Caso Especial
+
+Você pode usar um método de redirecionamento especial que, por padrão, é anexado ao objeto `window.location` em cada navegador principal denominado `replace()` . Esse método aceita os mesmos valores de URL válidos que apenas usando `window.location` .
+
+Aqui está um exemplo de como usar esse método (ele ainda funcionará da mesma forma que usar `window.location` em outros navegadores):
+
+```javascript
+window.location.replace('http://www.yoururl.com'); 
+ // window.location.replace('somepage.html'); 
+ // etc. 
+```
+
+### Um redirecionamento temporizado simples usando JS
+
+Aqui está um exemplo de um redirecionamento cronometrado simples usando a função `setTimeout()` . Os redirecionamentos cronometrados são úteis para que você possa explicar ao usuário, por meio do conteúdo na página de redirecionamento, o motivo pelo qual eles estão sendo redirecionados para outra página.
+
+```javascript
+// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens 
+ // keep in mind that 1 second = 1000 milliseconds 
+ setTimeout(function () { 
+    window.location = 'http://www.yoururl.com'; 
+    // window.location = 'somepage.html'; 
+    // etc. 
+ }, 5000); 
+```
+
+### Cair pra trás
+
+Às vezes, os usuários navegam na Internet com o JavaScript desabilitado, e isso obviamente apresentaria problemas com uma solução de redirecionamento dependente do JS. Recomendo definir um elemento `<meta>` que atualize o navegador com o novo local. Eu definiria o tempo para esse elemento meta ser um segundo depois do suposto redirecionamento de JS. Portanto, se você tiver um redirecionamento que acontece no JS após 5 segundos, defina o redirecionamento do elemento `<meta>` para ocorrer em 6 segundos.
+
+Coloque o elemento `<meta>` dentro do `<head>` do seu documento da seguinte forma:
+
+```html
+
+<head> 
+    <!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page.  Change the portion after "URL=" to the URL of your choice.  This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. --> 
+    <meta http-equiv="refresh" content="6;URL=http://www.yoururl.com"> 
+ </head> 
+```
+
+Tenha em mente que nem todos os navegadores suportam o elemento `<meta>` (estou olhando para você, versões anteriores do IE e Safari), mas a maioria dos navegadores modernos (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera).

guide/portuguese/javascript/tutorials/perform-arithmetic-operations-on-decimals-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Perform Arithmetic Operations on Decimals with JavaScript
+localeTitle: Executar operações aritméticas em decimais com JavaScript
+---
+Em JavaScript, você pode realizar cálculos com números decimais, assim como números inteiros.
+```
+var quotient = 4.4 / 2.0; // equals 2.2 
+
+```

guide/portuguese/javascript/tutorials/store-multiple-values-in-one-variable-using-javascript-arrays/index.md

@@ -0,0 +1,12 @@
+---
+title: Store Multiple Values in One Variable Using JavaScript Arrays
+localeTitle: Armazenar vários valores em uma variável usando matrizes JavaScript
+---
+Com variáveis ​​de matriz JavaScript, podemos armazenar vários dados em um só lugar.
+
+Você inicia uma declaração de matriz com um colchete de abertura, termina com um colchete de fechamento e coloca uma vírgula entre cada entrada, assim:
+```
+var sandwich = ["peanut butter", "jelly", "bread"] 
+```
+
+`myArray = [2,'j'];`

guide/portuguese/javascript/tutorials/subtract-one-number-from-another-with-javascript/index.md

@@ -0,0 +1,11 @@
+---
+title: Subtract One Number from Another with JavaScript
+localeTitle: Subtrair um número de outro com JavaScript
+---
+Nós também podemos subtrair um número de outro.
+
+Usos JavaScript usam o símbolo - para subtração.
+```
+var difference = 45 - 33; 
+
+```

guide/portuguese/javascript/tutorials/the-javascript-version-of-jquerygetjson/index.md

@@ -0,0 +1,70 @@
+---
+title: JavaScript Version of Jquerygetjson
+localeTitle: Versão JavaScript do Jquerygetjson
+---
+Se você quer trabalhar com arquivos json com apenas baunilha JavaScript.
+
+## IE8 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onreadystatechange = function() { 
+  if (this.readyState === 4) { 
+    if (this.status >= 200 && this.status < 400) { 
+      // Success! 
+      var data = JSON.parse(this.responseText); 
+    } else { 
+      // Error :( 
+    } 
+  } 
+ }; 
+ 
+ request.send(); 
+ request = null; 
+```
+
+## IE9 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (request.status >= 200 && request.status < 400) { 
+    // Success! 
+    var data = JSON.parse(request.responseText); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+```
+
+## IE10 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (this.status >= 200 && this.status < 400) { 
+    // Success! 
+    var data = JSON.parse(this.response); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+
+```

guide/portuguese/javascript/tutorials/use-the-javascript-console/index.md

@@ -0,0 +1,20 @@
+---
+title: Use the JavaScript Console
+localeTitle: Use o Console JavaScript
+---
+Tanto o Chrome quanto o Firefox possuem excelentes consoles JavaScript, também conhecidos como DevTools, para depurar seu JavaScript.
+
+Você pode encontrar ferramentas do desenvolvedor no menu ou no console da Web do Chrome no menu do FireFox. Se você estiver usando um navegador diferente ou um celular, recomendamos mudar para o Firefox ou o Google Chrome para computador.
+
+Você também pode usar [https://repl.it/](https://repl.it/) para executar o código online.
+
+É assim que você imprime no console:
+```
+console.log('Hello world!') 
+```
+
+Além disso, você pode imprimir um log de erros no console com este código:
+```
+console.error('I am an error!') 
+
+```

guide/portuguese/javascript/tutorials/using-anonymous-functions-for-private-namespacing-in-your-javascript-apps/index.md

@@ -0,0 +1,80 @@
+---
+title: Using Anonymous Functions for Private Namespacing in Your JavaScript Apps
+localeTitle: Usando funções anônimas para namespacing privado em seus aplicativos JavaScript
+---
+Vamos dar uma olhada no que é um namespace quando se trata de criar aplicativos JavaScript e alguns dos benefícios de usar um namespace privado ao criar seus aplicativos.
+
+**Observe que este artigo faz referência a funções de auto-execução anônimas. Se você não sabe o que é isso, por favor leia este excelente artigo de Noah Stokes: [Funções anônimas auto-executáveis ​​ou como escrever Javascript limpo](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) . Este artigo entrará em detalhes sobre funções auto-executáveis ​​anônimas.**
+
+## O que é um namespace?
+
+Para simplificar, um namespace é apenas uma seção de código que possui seu próprio espaço. Quando você começa a escrever aplicativos JS, geralmente basta digitar o código e executá-lo. Isso coloca todo o código no que é conhecido como o **namespace global** , que contém todo o código da janela em que você está trabalhando.
+
+No entanto, se você mantiver todo o seu código no **namespace global** , poderá encontrar problemas com colisões, convenções de nomenclatura etc., especialmente em grandes aplicativos / jogos JS.
+
+Vamos dar uma olhada em um exemplo de como usar apenas o **namespace global** para desenvolver um jogo é uma má ideia.
+
+Então, digamos que temos um jogo que é acompanhar os pontos que o jogador tem:
+```
+var points = 0; 
+```
+
+Muitos jogos rastreiam pontos para adicionar uma vantagem competitiva ao jogo. Simplesmente digitando essa linha em um script, criamos uma variável chamada _points_ que pode rastrear os pontos ganhos pelo usuário.
+
+E está tudo bem e bem, mas digamos que temos um usuário mais avançado jogando o jogo. Este usuário sabe como olhar para a fonte de uma página da web e, assim, essa pessoa dá uma olhada na fonte por trás do jogo JS e percebe que a variável _points_ está ali no **namespace global** . Um sorriso maligno desce pelo rosto deles enquanto eles contemplam os pontos que eles podem alcançar! Eles decidem que não querem esperar para bater alguns bandidos, ou esmagar alguns cogumelos, ou o que você tem, para acumular um monte de pontos. Eles querem seus pontos agora! Bem, como soa _um quatrilhão de bilhões de_ pontos? Então, eles carregam o console em seu navegador favorito e simplesmente digitam no console:
+```
+points = 34750925489459203859095480917458059034; 
+```
+
+Uma vez que o usuário acerta, a variável de _pontos_ é atualizada no jogo. Agora, o usuário tem uma quantidade realmente grande e provavelmente irrealista de pontos no jogo, e ele pode se gabar para seus amigos de que ninguém pode vencer sua pontuação incrível.
+
+Então, como evitamos que isso ocorra? É aqui que **os namespaces privados** entram em cena.
+
+## Namespaces privados
+
+**Os namespaces privados** permitem que os desenvolvedores coloquem seu código em seções (ou **namespaces** ). Essas seções operam independentemente uma da outra, mas ainda podem ler e gravar no **namespace global** .
+
+Para dividir isso em termos mais simples de um cenário da vida real, digamos que você esteja trabalhando em um prédio de escritórios. Você tem seu próprio escritório e vê outros com seus próprios escritórios. Cada escritório está trancado e apenas a pessoa que possui o escritório tem uma chave para esse escritório. Digamos também que você tenha algum tipo de superbloqueio que torne seu escritório impenetrável por qualquer outra pessoa no prédio. Vamos considerar o próprio edifício de escritórios como o **espaço de nomes global** e cada escritório como um **espaço de nomes privado** . Você não tem acesso ao escritório de outra pessoa nem tem acesso ao seu. Mas, cada um de vocês tem acesso ao resto do prédio, seja tomando café, pegando um lanche, etc. Cada um de vocês pode pegar algo do **namespace global** (ou criar / modificar algo lá), mas você pode crie / modifique / pegue qualquer coisa dos escritórios um do outro; você só pode criar / modificar / pegar de seu próprio **namespace** / escritório **particular** .
+
+## Obtendo um namespace particular
+
+Então, como conseguimos esse **namespace privado** em JavaScript? Use uma função de auto-execução anônima! Se você não leu o artigo de Noah Stokes, [Funções anônimas auto-executáveis ​​ou Como escrever Javascript limpo](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) , faça-o agora. Este artigo entrará em detalhes sobre funções auto-executáveis ​​anônimas.
+
+Vamos dar uma olhada em usar essa variável de _pontos_ de antes, mas vamos separá-la em um **namespace privado** :
+```
+//The most common way you'll see an anonymous self-executing function 
+ (function () { 
+    var points = 0; 
+ })(); 
+ 
+ //This is just one of many more alternative ways to use an anonymous self-executing function 
+ /* 
+ !function () { 
+    var points = 0; 
+ }(); 
+ */ 
+```
+
+Agora, quando o usuário chegar à página, ele não poderá abrir o console no navegador e alterar o valor da variável de pontos como desejar! Impressionante!
+
+## Interação de Namespace e Documento
+
+O código acima era apenas um uso para usar uma função auto-executável anônima para dar ao código seu próprio **namespace particular** . Lembre-se de que os namespaces afetam apenas o código JS (variables / arrays / objects / etc.), E não o código que pertence ao próprio documento.
+
+Qualquer código dentro de um espaço de nomes ainda tem o mesmo acesso ao documento HTML e CSS, como faria normalmente no **espaço de nomes global** . Dê uma olhada nos próximos dois exemplos de código. Ambos executam a mesma funcionalidade e nenhum é mais benéfico ou mais eficiente que o outro.
+```
+<script type="text/javascript"> 
+    (function () { 
+        document.querySelector('body').style.background = 'blue'; 
+    })(); 
+ </script> 
+```
+
+é o mesmo que:
+```
+<script type="text/javascript"> 
+    document.querySelector('body').style.background = 'blue'; 
+ </script> 
+```
+
+Tenha em mente que esta é apenas uma maneira de usar namespaces em aplicativos JavaScript. Adapte seu código ao que melhor se adapta à situação em questão.

guide/portuguese/javascript/tutorials/what-does-javascript-void-0-mean/index.md

@@ -0,0 +1,90 @@
+---
+title: What Does JavaScript Void 0 Mean
+localeTitle: O que significa JavaScript Void 0?
+---
+## O que significa JavaScript Void 0?
+
+**O operador void do JavaScript avalia uma expressão e retorna indefinido** .
+
+Usando o console para verificar o mesmo: -
+
+![ConsoleOutput](https://github.com/srawat19/-Guide_Images/blob/master/VoidConsole.PNG?raw=true)
+
+**_Nota_** : - **vazio** independentemente de qualquer valor repassado, _sempre retorna **indefinido** como mostrado acima_ . Mas, **nulo com operando 0 é preferido** .
+
+**Duas maneiras de usar o operando 0 -> void (0) ou void 0.** Qualquer uma delas está bem.
+
+#### Quando usar o Javascript void (0)?
+
+Ao clicar no link, você não deseja que o navegador carregue uma nova página ou atualize a mesma página (dependendo do URL especificado). Em vez disso, execute o JavaScript anexado a esse link.
+
+#### Exemplo de Exemplo 1 com Javascript void (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Saída:
+
+Quando clicado no link do ClickMe, um alerta aparece como abaixo:
+
+![Saída1](https://github.com/srawat19/-Guide_Images/blob/master/voidOutput1.PNG?raw=true)
+
+#### Exemplo de Exemplo 2 com Javascript void (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Saída:
+
+Quando você clica duas vezes no link, um alerta é exibido sem nenhuma atualização de página.
+
+#### Exemplo de Exemplo 3 com Javascript void (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0);https://www.google.co.in/" 
+ ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Saída:
+
+Quando você clica duas vezes no link, um alerta é exibido, o fechamento também não redireciona para o google.com.
+
+#### Exemplo de exemplo sem Javascript void (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Saída:
+
+Quando você clica duas vezes no link, um alerta é exibido, e o fechamento redireciona para o google.com.
+
+#### Conclusão:
+
+**O** operador **void** é útil quando você precisa evitar qualquer atualização ou redirecionamento de página indesejada. Em vez disso, execute alguma operação de javascript.
+
+#### Mais Informações:
+
+1) [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 2) [Compreender void 0](https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm)

guide/portuguese/javascript/tutorials/write-reusable-javascript-with-functions/index.md

@@ -0,0 +1,33 @@
+---
+title: Write Reusable JavaScript with Functions
+localeTitle: Escreva JavaScript reutilizável com funções
+---
+Em JavaScript, podemos dividir nosso código em partes reutilizáveis ​​chamadas funções.
+
+Aqui está um exemplo de uma função:
+```
+function functionName() { 
+  console.log("Hello World"); 
+ } 
+```
+
+Você pode `call` ou `invoke` esta função usando seu nome seguido por parênteses, assim:
+```
+functionName(); 
+```
+
+Cada vez que a função é chamada, ela imprimirá a mensagem "Hello World" no console de desenvolvimento. Todo o código entre as chaves será executado toda vez que a função for chamada.
+
+Aqui está outro exemplo:
+```
+function otherFunctionName (a, b) { 
+    return(a + b); 
+ } 
+```
+
+Podemos `call` ou `invoke` nossa função assim:
+```
+otherFunctionName(1,2); 
+```
+
+e ele será executado e retornará seu valor de retorno para nós.