From 1b5b052634ff2fee86c2430e5cd425ac86299e2a Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 13:05:26 -0300 Subject: [PATCH 01/20] =?UTF-8?q?Iniciando=20a=20Tradu=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...utoriais de Contribui\303\247\303\243o.md" | 37 +++++++++++++++++ tutorials/learn-js.org/pt/Welcome.md | 40 +++++++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 "tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" create mode 100644 tutorials/learn-js.org/pt/Welcome.md diff --git "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" new file mode 100644 index 000000000..aac5dd98b --- /dev/null +++ "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" @@ -0,0 +1,37 @@ +Esta seção ainda não existe. + +Para contribuir com os tutoriais, basta dar um "fork" no seguinte repositório: + +[[https://github.com/ronreiter/interactive-tutorials]] + +Daí você vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, "ronreiter". + +Para escrever um tutorial, basta criar uma página Markdown de nome pertinente sob a pasta `tutorials`, e adicioná-la na tela de boas-vindas por meio de hiperlink. Após adicioná-la, garanta que o link funcionou corretamente executando o servidor web "Flask". + +Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser a página `Welcome.md`). + +Cada tutorial consiste em uma breve explicação conteudista e um exercício curto para testar o usuário. Assim que o usuário finalize, ele terá de executar o código e verificar se a saída está de acordo com o esperado. + +Cada tutorial deve seguir a seguinte estrutura: + +### Nome do arquivo.md + + Tutorial + -------- + Aqui, você pode escrever um texto explicativo sobre alguma funcionalidade. + + Exercício + -------- + Aqui, você deve escrever o propósito do exercício. Para finalizar o exercício corretamente, a nova funcionalidade sendo explicada precisa ser empregada. + + Código do Tutorial + ------------- + Escreva um bloco de código que apareça na janela do interpretador. Por exemplo, você pode criar uma função vazia a qual o usuário precisa completar para finalizar o exercício. + + Saída Esperada + --------------- + Escreva um bloco de código que descreva a saída que se espera do código modificado. Verificar-se-á se as duas batem. + + Solução + -------- + Escreva o código que solucione o problema. \ No newline at end of file diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md new file mode 100644 index 000000000..684f6931e --- /dev/null +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -0,0 +1,40 @@ +# Bem-vindo + +Bem-vindo ao tutorial interativo de JavaScript do learn-js.org. + +Sendo você um programador experiente ou não, o site foi pensado a todos que queiram aprender a linguagem de programação JavaScript. + +É só clicar no capítulo pelo qual você deseja começar e seguir as instruções. Boa sorte! + +A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. + +Por fim, o tradutor te deseja boa sorte na jornada. :alien: + +### Começando de Baixo + +- [[Olá, Mundo!]] +- [[Variáveis e Tipos]] +- [[Vetores]] +- [[Manipulação de Vetores]] +- [[Operadores Aritméticos]] +- [[Operadores Lógicos]] +- [[Estruturas de Repetição]] +- [[Objetos]] +- [[Funções]] +- [[Caixas Pop-up]] +- [[Funções Callback]] +- [[Funções Seta]] + +### Tutoriais Avançados + +- [[Promessas]] +- [[Async e Await]] +- [[JavaScript Orientado a Objetos]] +- [[Contexto de Função]] +- [[Herança]] +- [[Desestruturação]] +- [[Estruturas de Dados]] + +### Tutoriais de Contribuição + +Leia mais aqui: [[Tutoriais de Contribuição]] \ No newline at end of file From 53fba3c423111ba5f4d49240cffe3a6ec1eaf591 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 13:12:23 -0300 Subject: [PATCH 02/20] =?UTF-8?q?Calibrando=20in=C3=ADcio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pt/Tutoriais de Contribui\303\247\303\243o.md" | 8 ++++---- tutorials/learn-js.org/pt/Welcome.md | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" index aac5dd98b..1b259f853 100644 --- "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" @@ -4,17 +4,17 @@ Para contribuir com os tutoriais, basta dar um "fork" no seguinte repositório: [[https://github.com/ronreiter/interactive-tutorials]] -Daí você vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, "ronreiter". +Daí, você vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, o "ronreiter". Para escrever um tutorial, basta criar uma página Markdown de nome pertinente sob a pasta `tutorials`, e adicioná-la na tela de boas-vindas por meio de hiperlink. Após adicioná-la, garanta que o link funcionou corretamente executando o servidor web "Flask". -Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser a página `Welcome.md`). +Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser a `Welcome.md`). -Cada tutorial consiste em uma breve explicação conteudista e um exercício curto para testar o usuário. Assim que o usuário finalize, ele terá de executar o código e verificar se a saída está de acordo com o esperado. +Cada tutorial consiste em uma breve explicação conteudista e um exercício sucinto para testar o usuário. Assim que o usuário o finalizar, terá de executar o código e verificar se a saída está de acordo com o esperado. Cada tutorial deve seguir a seguinte estrutura: -### Nome do arquivo.md +### Nome do Arquivo.md Tutorial -------- diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 684f6931e..c40a9c790 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -1,14 +1,14 @@ # Bem-vindo -Bem-vindo ao tutorial interativo de JavaScript do learn-js.org. +Bem-vindo ao tutorial interativo de JavaScript do learn-js.org! -Sendo você um programador experiente ou não, o site foi pensado a todos que queiram aprender a linguagem de programação JavaScript. +Sendo você um programador experiente ou não, o site foi pensado a todos os que queiram aprender a linguagem de programação JavaScript. É só clicar no capítulo pelo qual você deseja começar e seguir as instruções. Boa sorte! A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Por fim, o tradutor te deseja boa sorte na jornada. :alien: +Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada. :alien: ### Começando de Baixo From 13ba0714505e3fc4765e24576c4e15a31fa985b6 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 13:35:37 -0300 Subject: [PATCH 03/20] =?UTF-8?q?Ol=C3=A1,=20Mundo!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../learn-js.org/pt/Ol\303\241, Mundo!.md" | 28 +++++++++++++++++++ tutorials/learn-js.org/pt/Welcome.md | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 "tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" diff --git "a/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" "b/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" new file mode 100644 index 000000000..b7033faff --- /dev/null +++ "b/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" @@ -0,0 +1,28 @@ +Tutorial +-------- + +Bem-vindo ao primeiro tutorial. Neste aqui, você aprenderá a escrever sua primeira linha de código. + +O JavaScript é uma linguagem poderosíssima. Além de poder ser interpretado por qualquer navegador do mundo, ele também pode ser usado para escrever código nativo para servidores usando o runtime "Node.js". + +Enquanto se usa o JavaScript dentro do navegador, pode-se mudar a aparência e os comportamentos da página... mas, neste primeiro momento, a gente vai se concentrar em aprender a linguagem em si: por isso, vamos começar pela função para exibir mensagens e resultados em geral, o famoso "console.log". + +Exercise +-------- + +Você deve exibir, pelo console, a frase "Olá, Mundo!". + +Tutorial Code +------------- + +console.log("Adeus, Mundo!"); + +Expected Output +--------------- + +Olá, Mundo! + +Solution +-------- + +console.log("Olá, Mundo!"); \ No newline at end of file diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index c40a9c790..b068b901b 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -1,6 +1,6 @@ # Bem-vindo -Bem-vindo ao tutorial interativo de JavaScript do learn-js.org! +Bem-vindo ao tutorial interativo de JavaScript do "learn-js.org"! Sendo você um programador experiente ou não, o site foi pensado a todos os que queiram aprender a linguagem de programação JavaScript. From da5c33999c5830037435001506120d56716d577c Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 14:40:04 -0300 Subject: [PATCH 04/20] =?UTF-8?q?Vari=C3=A1veis=20e=20Tipos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...utoriais de Contribui\303\247\303\243o.md" | 14 ++-- .../pt/Vari\303\241veis e Tipos.md" | 73 +++++++++++++++++++ tutorials/learn-js.org/pt/Welcome.md | 6 +- 3 files changed, 84 insertions(+), 9 deletions(-) create mode 100644 "tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" diff --git "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" index 1b259f853..01aaaa51a 100644 --- "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" @@ -4,13 +4,13 @@ Para contribuir com os tutoriais, basta dar um "fork" no seguinte repositório: [[https://github.com/ronreiter/interactive-tutorials]] -Daí, você vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, o "ronreiter". +Daí, você cria uma "branch" na qual vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, o "ronreiter". -Para escrever um tutorial, basta criar uma página Markdown de nome pertinente sob a pasta `tutorials`, e adicioná-la na tela de boas-vindas por meio de hiperlink. Após adicioná-la, garanta que o link funcionou corretamente executando o servidor web "Flask". +Para escrever um tutorial, basta dirigir-se à pasta `tutorials`, adentrar a subpasta do domínio desejado, adentrar a subpasta com as iniciais do seu idioma (ou criá-la, se ainda não existir), criar uma página Markdown de nome pertinente e adicioná-la na tela de boas-vindas por meio de hiperlink. Após adicioná-la, garanta que o link funcionou corretamente executando o servidor web "Flask". -Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser a `Welcome.md`). +Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser o `Welcome.md`). -Cada tutorial consiste em uma breve explicação conteudista e um exercício sucinto para testar o usuário. Assim que o usuário o finalizar, terá de executar o código e verificar se a saída está de acordo com o esperado. +Cada tutorial consiste em uma breve explicação conteudista e um exercício sucinto para testar o usuário. Assim que ele o finalizar, terá de executar seu código e verificar se a saída está de acordo com o esperado. Cada tutorial deve seguir a seguinte estrutura: @@ -22,11 +22,11 @@ Cada tutorial deve seguir a seguinte estrutura: Exercício -------- - Aqui, você deve escrever o propósito do exercício. Para finalizar o exercício corretamente, a nova funcionalidade sendo explicada precisa ser empregada. + Aqui, você deve descrever o propósito do exercício. Para finalizar o exercício corretamente, a nova funcionalidade sendo explicada precisa ser empregada. Código do Tutorial ------------- - Escreva um bloco de código que apareça na janela do interpretador. Por exemplo, você pode criar uma função vazia a qual o usuário precisa completar para finalizar o exercício. + Escreva o bloco de código que, de cara, aparecerá na janela do interpretador. Por exemplo, você pode criar uma função vazia a qual o usuário precisará completar para finalizar o exercício. Saída Esperada --------------- @@ -34,4 +34,4 @@ Cada tutorial deve seguir a seguinte estrutura: Solução -------- - Escreva o código que solucione o problema. \ No newline at end of file + Escreva um código que solucione o problema. \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" new file mode 100644 index 000000000..fc1816566 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -0,0 +1,73 @@ +Tutorial +-------- + +Isto é uma variável: uma referência a um valor guardado em um endereço na memória. + +E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável é definida pela palavra reservada "`var`" e pode guardar qualquer tipo primitivo a qualquer momento. + +> O TypeScript é um subconjunto do JavaScript que permite a tipagem estática, por isso ele é mais recomendado que o seu irmão amarelo quando se fala na criação de lógica para servidores: torna-se menos provável comportamentos inesperados por mudanças repentinas de tipagem. +
Imagina um número de telefone deixando de ser "String" e virando "Number" do nada, passando a ocupar um valor de trilhões na memória? + +Temos um grande acervo de tipos primitivos para usar nas variáveis dos nossos códigos: + + const meuNumber = 3; // um valor numérico + const minhaString = "Olá, Mundo!" // um valor alfanumérico + const meuBoolean = true; // um valor booleano + +Algumas observações sobre os tipos das variáveis em JavaScript: + +* No JavaScript, o tipo Number pode apontar tanto para números decimais quanto para inteiros. +* As variáveis do tipo Boolean só podem apontar para um destes valores: "`true`" ou "`false`". + +Há dois tipos mais avançados em JavaScript: Vetores e Objetos. Estudaremos ambos em tutoriais futuros. + + const meuArray = []; // um vetor + const meuObject = {}; // um objeto + +Fora isso, há dois tipos especiais: o Undefined e o Null. + +Quando uma variável é requisitada sem antes receber um valor para guardar, ela guarda "`undefined`". Por exemplo: + + const novaVariavel; + console.log(novaVariavel); +>retorna `undefined` + +No entanto, um valor "`null`" é diferente, seu objetivo é explicitar que uma variável deve permanecer vazia. O valor "`undefined`" também pode ser usado nesse contexto, mas atrapalha a legibilidade por não seguir a convenção. + + const variavelVazia = null; + console.log(variavelVazia); + + +>retorna `null` + +Exercise +-------- + +Você deve definir as seguintes variáveis: + +1. Um Number chamado "myNumber" que guarde o valor `4`; +2. Uma String chamada "myString" que guarde a frase `Variables are great.`; +3. Um Boolean chamado "myBoolean" que guarde o valor `false`; + +Tutorial Code +------------- + +console.log("myNumber is equal to " + myNumber); +console.log("myString is equal to " + myString); +console.log("myBoolean is equal to " + myBoolean); + +Expected Output +--------------- + +myNumber is equal to 4 +myString is equal to Variables are great. +myBoolean is equal to false + +Solution +-------- +const myNumber=4; +const myString="Variables are great."; +const myBoolean=false; +console.log("myNumber is equal to " + myNumber); +console.log("myString is equal to " + myString); +console.log("myBoolean is equal to " + myBoolean); diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index b068b901b..0fbf1e8b9 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -8,7 +8,9 @@ Sendo você um programador experiente ou não, o site foi pensado a todos os que A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada. :alien: +Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para destacar-se: por isso mesmo **as soluções vão cobrar códigos em inglês.** Faz uma força! + +*Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada.* :alien: ### Começando de Baixo @@ -37,4 +39,4 @@ Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada. :a ### Tutoriais de Contribuição -Leia mais aqui: [[Tutoriais de Contribuição]] \ No newline at end of file +Saiba mais em [[Tutoriais de Contribuição]]. \ No newline at end of file From 3aeb77871a00c6806f3a7365315b761859c8821d Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 16:01:01 -0300 Subject: [PATCH 05/20] =?UTF-8?q?Criando=20recept=C3=A1culos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tutorials/learn-js.org/pt/Async e Await.md | 0 tutorials/learn-js.org/pt/Caixas Pop-up.md | 0 .../pt/Contexto de Fun\303\247\303\243o.md" | 125 +++++++++++++ .../pt/Desestrutura\303\247\303\243o.md" | 168 +++++++++++++++++ .../learn-js.org/pt/Estruturas de Dados.md | 0 .../Estruturas de Repeti\303\247\303\243o.md" | 122 +++++++++++++ .../pt/Fun\303\247\303\265es Callback.md" | 66 +++++++ .../pt/Fun\303\247\303\265es Seta.md" | 79 ++++++++ .../learn-js.org/pt/Fun\303\247\303\265es.md" | 61 +++++++ "tutorials/learn-js.org/pt/Heran\303\247a.md" | 123 +++++++++++++ .../pt/JavaScript Orientado a Objetos.md | 70 ++++++++ .../Manipula\303\247\303\243o de Vetores.md" | 98 ++++++++++ tutorials/learn-js.org/pt/Objetos.md | 95 ++++++++++ .../pt/Operadores Aritm\303\251ticos.md" | 99 ++++++++++ .../pt/Operadores L\303\263gicos.md" | 134 ++++++++++++++ tutorials/learn-js.org/pt/Promessas.md | 169 ++++++++++++++++++ ...utoriais de Contribui\303\247\303\243o.md" | 24 ++- .../pt/Vari\303\241veis e Tipos.md" | 19 +- tutorials/learn-js.org/pt/Vetores.md | 67 +++++++ tutorials/learn-js.org/pt/Welcome.md | 6 +- 20 files changed, 1512 insertions(+), 13 deletions(-) create mode 100644 tutorials/learn-js.org/pt/Async e Await.md create mode 100644 tutorials/learn-js.org/pt/Caixas Pop-up.md create mode 100644 "tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" create mode 100644 "tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" create mode 100644 tutorials/learn-js.org/pt/Estruturas de Dados.md create mode 100644 "tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" create mode 100644 "tutorials/learn-js.org/pt/Fun\303\247\303\265es Callback.md" create mode 100644 "tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" create mode 100644 "tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" create mode 100644 "tutorials/learn-js.org/pt/Heran\303\247a.md" create mode 100644 tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md create mode 100644 "tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" create mode 100644 tutorials/learn-js.org/pt/Objetos.md create mode 100644 "tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" create mode 100644 "tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" create mode 100644 tutorials/learn-js.org/pt/Promessas.md create mode 100644 tutorials/learn-js.org/pt/Vetores.md diff --git a/tutorials/learn-js.org/pt/Async e Await.md b/tutorials/learn-js.org/pt/Async e Await.md new file mode 100644 index 000000000..e69de29bb diff --git a/tutorials/learn-js.org/pt/Caixas Pop-up.md b/tutorials/learn-js.org/pt/Caixas Pop-up.md new file mode 100644 index 000000000..e69de29bb diff --git "a/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" new file mode 100644 index 000000000..8b691b091 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" @@ -0,0 +1,125 @@ +Tutorial +-------- + +Functions in JavaScript run in a specific context, and using the `this` keyword we have access to it. + +All standard functions in the browser run under the Window context. Functions defined under an object or a class (another function) will use the context of the object it was created in. However, we can also change the context of a function at runtime, either before or while executing the function. + +### Binding a method to an object + +To bind a function to an object and make it an object method, we can use the `bind` function. Here is a simple example: + + var person = { + name : "John" + }; + + function printName() + { + console.log(this.name); + } + +Obviously, we are not able to call `printName()` without associating the function with the object `person`. To do this we must create a bound method of the function printName to person, using the following code: + + var boundPrintName = printName.bind(person); + boundPrintName(); // prints out "John" + +### Calling a function with a different context + +We can use the `call` and `apply` functions to call a function as if it was bound to an object. The difference between the `call` and `apply` functions is only by how they receive their arguments - the `call` function receives the `this` argument first, and afterwards the arguments of the function, whereas the `apply` function receives the `this` argument first, and an array of arguments to pass on to the function as a second argument to the function. + +For example, let's call `printName` with `person` as the context using the `call` method: + + printName.call(person); // prints out "John" + +### call/apply vs bind + +The difference between `call`/`apply` and `bind` is that `bind` returns a new function identical to the old function, except that the value of `this` in the new function is now the object it was bound to. `call`/`apply` calls the function with `this` being the bound object, but it does not return a new function or change the original, it calls it with a different value for `this`. + +For example: + + var boundPrintName = printName.call(person); //boundPrintName gets printName's return value (null) + boundPrintName(); //doesn't work because it's not a function, it's null + + printName.bind(person); //returns a new function, but nothing is using it so it's useless + printName(); //throws error because this.name is not defined + +Think of `call` as executing the return value of `bind`. + +For example: + + printName.call(person); //is the same as + printName.bind(person)(); //executes the function returned by bind + +Or think of `bind` returning a shortcut to `call`. + +For example: + + var boundPrintName = printName.bind(person); //is the same as + var boundPrintName = function() + { + printName.call(person); + } + + +Exercise +-------- + +Create bound copies of printFullName and printDetails to person called boundPrintFullName and boundPrintDetails. + +Tutorial Code +------------- + +var person = { + firstName : "John", + lastName : "Smith", + age : 23 +}; + +function printFullName() +{ + console.log(this.firstName + " " + this.lastName); +} + +function printDetails() +{ + console.log(this.firstName + " is " + this.age + " years old"); +} + +// TODO: create bound copies of printFullName and printDetails. +var boundPrintFullName; +var boundPrintDetails; + +boundPrintFullName(); +boundPrintDetails(); + +Expected Output +--------------- + +John Smith +John is 23 years old + +Solution +-------- + +var person = { + firstName : "John", + lastName : "Smith", + age : 23 +}; + +function printFullName() +{ + console.log(this.firstName + " " + this.lastName); +} + +function printDetails() +{ + console.log(this.firstName + " is " + this.age + " years old"); +} + +// TODO: create bound copies of printFullName and printDetails. +var boundPrintFullName = printFullName.bind(person); +var boundPrintDetails = printDetails.bind(person); + +boundPrintFullName(); +boundPrintDetails(); diff --git "a/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" new file mode 100644 index 000000000..ba717fd50 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" @@ -0,0 +1,168 @@ +Tutorial +-------- + +Destructuring is a feature of ES6, introduced for making easier and cleaner repetitive operations and assignments made in JS. + +With destructuring we can extract data from a deeper level inside an array / object with a more concise syntax, even giving this 'extracted' data some other name in the same operation. + +In JavaScript we can achieve this in a very simply way: + + // Consider this object + const person = { + head: { + eyes: 'x', + mouth: { + teeth: 'x', + tongue: 'x' + } + }, + body: { + shoulders: 'x', + chest: 'x', + arms: 'x', + hands: 'x', + legs: 'x' + } + }; + + // If we want to get head, the old way: + let head = person.head; + + // ES6 Destructuring + let { head } = person; + + // We can give other name as if a variable was declared, in the same line + let { head : myHead } = person; + + // So we can do... + console.log(myHead); // prints '{ eyes, mouth: { ... } }' + + +With arrays: + + let numbers = ['2', '3', '7']; + + // Old way + let two = numbers[0]; + let three = numbers[1]; + + // ES6 Destructuring + let [two, three] = numbers; + + // We can give them other names too + let [two: positionZero, three: positionOne] = numbers; + + console.log(positionZero) // prints '2' + console.log(positionOne) // prints '3' + + +We can do this with function parameters too: + + // Old way + function getHeadAndBody(person) { + + let headAndBody = { + head: person.head, + body: person.body + } + + return headAndBody; + } + + // ES6 Destructuring + function getHeadAndBody({ head, body }) { + return { head, body } + } + + // With arrow functions + let getHeadAndBody = ({ head, body }) => { head, body }; + +Warning: Be careful with destructuring, if you aren't sure if the function is going to receive +an object with those parameters, it's better to use the old way in order to not incurring in ` head / body is undefined ` errors. You can avoid that type of errors while using ES6 Destructuring giving default parameters to the function, so you can be sure that properties will exist, not being obliged to rely on the parameters received. + + // I'm not sure if head and body will be present in some cases... + // Now we are sure that head or body will be equal to '' if the real parameter doesn't have that properties inside + function getHeadAndBody({ head = '', body = '' }) { + return { head, body } + } + +You can destructure as deep as you like, always considering if that property exists. + + // Deep destructuring + let computer = { + processor: { + transistor: { + silicon: { + thickness: '9nm' + } + } + } + } + + let { + processor: + { + transistor: { + silicon: { + thickness + } + } + } + } = computer; + + // Making it cleaner + let { thickness: inteli9Thickness } = computer.processor.transistor.silicon; + + console.log(inteli9Thickness) // prints '9nm' + +Exercise +-------- + +Get the `legs` property and get the data inside the third position of `numbers` using destructuring. Give it the names of `myLegs` and `thirdPosition` respectively. + +Tutorial Code +------------- + +const person = { + head: { + eyes: 'x', + mouth: { + teeth: 'x', + tongue: 'x' + } + }, + body: { + shoulders: 'x', + chest: 'x', + arms: 'x', + hands: 'x', + legs: 'x' + } +}; + +const numbers = ['2', '3', '4']; + +// TODO: Destructure here. + +console.log(myLegs); +console.log(thirdPosition); + +Expected Output +--------------- + +x +4 + +Solution +-------- + +// TODO: Destructure here. +let { body: { legs: myLegs } } = person; +let [onePosition, secondPosition, thirdPosition] = numbers; + +// or... +// const { legs: myLegs } = person.body; +// const [,,thirdPosition] = numbers; + +console.log(myLegs); +console.log(thirdPosition); diff --git a/tutorials/learn-js.org/pt/Estruturas de Dados.md b/tutorials/learn-js.org/pt/Estruturas de Dados.md new file mode 100644 index 000000000..e69de29bb diff --git "a/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" new file mode 100644 index 000000000..a4c0049df --- /dev/null +++ "b/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" @@ -0,0 +1,122 @@ +Tutorial +-------- + +### The for statement + +JavaScript has two methods for running the same code several times. It is mainly used for iterating over arrays or objects. Let's see an example: + + var i; + for (i = 0; i < 3; i = i + 1) + { + console.log(i); + } + +This will print out the following: + + 0 + 1 + 2 + +The `for` statement in JavaScript has the same syntax as in Java and C. It has three parts: + +1. __Initialization__ - Initializes the iterator variable `i`. In this example, we initialize `i` to 0. +2. __Condition__ - As long as the condition is met, the loop continues to execute. In this example, we check that `i` is less than 3. +3. __Increment__ - A directive which increments the iterator. In our case, we increment it by 1 on every loop. + +We can also write a shorter notation for the statement by inserting the variable definition inside the `for` loop and incrementing using the `++` operator. + + for (var i = 0; i < 3; i++) + { + console.log(i); + } + +To iterate over an array and print out all of its members, we usually use the `for` statement. Here's an example: + + var myArray = ["A", "B", "C"]; + for (var i = 0; i < myArray.length; i++) + { + console.log("The member of myArray in index " + i + " is " + myArray[i]); + } + +This prints out the contents of the array: + + The member of myArray in index 0 is A + The member of myArray in index 1 is B + The member of myArray in index 2 is C + +Notice that we used the `length` property of an array, which returns the number of members in the array, so we know when to stop iterating. + +### The while statement + +The `while` statement is a more simple version of the `for` statement which checks if an expression evaluates to `true` and runs as long as it says `true`. + +For example: + + var i = 99; + while (i > 0) + { + console.log(i + " bottles of beer on the wall"); + i -= 1; + } + +### break and continue statements + +The `break` statement allows to stop the execution of a loop. For example, we can create a loop that loops forever using `while(true)` and use the `break` statement to break inside the loop instead by checking that a certain condition was met. + + var i = 99; + while (true) + { + console.log(i + " bottles of beer on the wall"); + i -= 1; + if (i == 0) + { + break; + } + } + +The `continue` statement skips the rest of the loop and jumps back to the beginning of the loop. For example, if we would want to print only odd numbers using a `for` statement, we can do the following: + + for (var i = 0; i < 100; i++) + { + // check that the number is even + if (i % 2 == 0) + { + continue; + } + // if we got here, then i is odd. + console.log(i + " is an odd number."); + } + +Exercise +-------- + +In this exercise, you must write a for loop that iterates on the myArray variable and prints out all of its members. + +Tutorial Code +------------- + +var myArray = ["What is the meaning of life?", "The meaning of life is", 42]; + +// TODO: modify this code +for () +{ +} + + +Expected Output +--------------- + +What is the meaning of life? +The meaning of life is +42 + +Solution +-------- + +var myArray = ["What is the meaning of life?", "The meaning of life is", 42]; + +//TODO: modify this code +for (var i = 0; i` in the syntax. + +To define an arrow function, we use the `() => {}` structure as follows: + + const greet = (name) => { return "Hello " + name + "!"; } + + console.log(greet("Eric")); // prints out Hello Eric! + +In this function, the `name` argument to the `greet` function is used inside the function to construct a new string and return it using the `return` statement. + +In case that the function only receives one argument, we can omit the parenthesis: + + const greet = name => { return "Hello " + name + "!"; } + + console.log(greet("Eric")); // prints out Hello Eric! + +And, in case that we want to do a explicit return of the function and we have only one line of code, we can avoid the `return` statement and omit brackets too: + + const greet = name => "Hello " + name + "!"; + + console.log(greet("Eric")); // prints out Hello Eric! + +Using an arrow as a callback compared to a normal function: + + let numbers = [3, 5, 8, 9, 2]; + + // Old way + function multiplyByTwo(number){ + return number * 2; + } + + let multipliedNumbers = numbers.map(multiplyByTwo); + + console.log(multipliedNumbers); // prints out: 6, 10, 16, 18, 4 + + // Using ES6 arrow functions + const multiplyByTwo = number => number * 2; + + let multipliedNumbers = numbers.map(multiplyByTwo); + + console.log(multipliedNumbers); // prints out: 6, 10, 16, 18, 4 + +Exercise +-------- + +Define an arrow function `divideByTwo` which accepts a number and returns that number divided by 2. + +Tutorial Code +------------- + +// TODO: define the function divideByTwo here + +console.log(divideByTwo(4)); +console.log(divideByTwo(8)); +console.log(divideByTwo(12)); +console.log(divideByTwo(6)); + +Expected Output +--------------- + +2 +4 +6 +3 + +Solution +-------- + +// TODO: define the function divideByTwo here +const divideByTwo = number => number / 2; +console.log(divideByTwo(4)); +console.log(divideByTwo(8)); +console.log(divideByTwo(12)); +console.log(divideByTwo(6)); diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" new file mode 100644 index 000000000..aa1483e85 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" @@ -0,0 +1,61 @@ +Tutorial +-------- + +Functions are code blocks that can have arguments, and function have their own scope. In JavaScript, functions are a very important feature of the program, and especially the fact that they can access local variables of a parent function (this is called a closure). + +There are two ways to define functions in JavaScript - named functions and anonymous functions. + +To define a named function, we use the `function` statement as follows: + + function greet(name) + { + return "Hello " + name + "!"; + } + + console.log(greet("Eric")); // prints out Hello Eric! + +In this function, the `name` argument to the `greet` function is used inside the function to construct a new string and return it using the `return` statement. + +To define an anonymous function, we can alternatively use the following syntax: + + var greet = function(name) + { + return "Hello " + name + "!"; + } + + console.log(greet("Eric")); // prints out Hello Eric! + +Exercise +-------- + +Define a function called `multiplyFive` which accepts a number and returns that number multiplied by 5. + +Tutorial Code +------------- + +// TODO: define the function multiplyFive here + +console.log(multiplyFive(3)); +console.log(multiplyFive(4)); +console.log(multiplyFive(5)); +console.log(multiplyFive(6)); + +Expected Output +--------------- + +15 +20 +25 +30 + +Solution +-------- + +// TODO: define the function multiplyFive here +var multiplyFive = function (number) { + return number * 5; +} +console.log(multiplyFive(3)); +console.log(multiplyFive(4)); +console.log(multiplyFive(5)); +console.log(multiplyFive(6)); diff --git "a/tutorials/learn-js.org/pt/Heran\303\247a.md" "b/tutorials/learn-js.org/pt/Heran\303\247a.md" new file mode 100644 index 000000000..effad2299 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Heran\303\247a.md" @@ -0,0 +1,123 @@ +Tutorial +-------- + +JavaScript uses prototype based inheritance. Every object has a `prototype`, and when a method of the object is called then JavaScript tries to find the right function to execute from the prototype object. + +### The prototype attribute + +Without using the prototype object, we can define the object Person like this: + + function Person(name, age) + { + this.name = name; + this.age = age; + + function describe() + { + return this.name + ", " + this.age + " years old."; + } + } + +When creating instances of the `Person` object, we create a new copy of all members and methods of the functions. This means that every instance of an object will have its own `name` and `age` properties, as well as its own `describe` function. + +However, if we use the `Person.prototype` object and assign a function to it, it will also work. + + function Person(name, age) + { + this.name = name; + this.age = age; + } + + Person.prototype.describe = function() + { + return this.name + ", " + this.age + " years old."; + } + +When creating instances of the `Person` object, they will not contain a copy of the `describe` function. Instead, when calling an object method, JavaScript will attempt to resolve the `describe` function first from the object itself, and then using its `prototype` attribute. + +### Inheritance + +Let's say we want to create a `Person` object, and a `Student` object derived from `Person`: + + var Person = function() {}; + + Person.prototype.initialize = function(name, age) + { + this.name = name; + this.age = age; + } + + Person.prototype.describe = function() + { + return this.name + ", " + this.age + " years old."; + } + + var Student = function() {}; + Student.prototype = new Person(); + + Student.prototype.learn = function(subject) + { + console.log(this.name + " just learned " + subject); + } + + var me = new Student(); + + me.initialize("John", 25); + me.learn("Inheritance"); + +As we can see in this example, the `initialize` method belongs to `Person` and the `learn` method belongs to `Student`, both of which are now part of the `me` object. + +Keep in mind that there are many ways of doing inheritance in JavaScript, and this is just one of them. + +Exercise +-------- + +Create an object called `Teacher` derived from the `Person` class, and implement a method called `teach` which receives a string called `subject`, and prints out: + + [teacher's name] is now teaching [subject] + +Tutorial Code +------------- + +var Person = function() {}; + +Person.prototype.initialize = function(name, age) +{ + this.name = name; + this.age = age; +} + +// TODO: create the class Teacher and a method teach + +var him = new Teacher(); + +him.initialize("Adam", 45); +him.teach("Inheritance"); + +Expected Output +--------------- + +Adam is now teaching Inheritance + +Solution +-------- + +var Person = function() {}; + +Person.prototype.initialize = function(name, age) +{ + this.name = name; + this.age = age; +} + +// TODO: create the class Teacher and a method teach +var Teacher = function() { + this.teach = function(subject){ + console.log(this.name + " is now teaching " + subject); + } +} +Teacher.prototype = new Person(); +var him = new Teacher(); + +him.initialize("Adam", 45); +him.teach("Inheritance"); diff --git a/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md b/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md new file mode 100644 index 000000000..76ee96ec6 --- /dev/null +++ b/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md @@ -0,0 +1,70 @@ +Tutorial +-------- + +JavaScript uses functions as classes to create objects using the `new` keyword. Here is an example: + + function Person(firstName, lastName) { + // construct the object using the arguments + this.firstName = firstName; + this.lastName = lastName; + + // a method which returns the full name + this.fullName = function() { + return this.firstName + " " + this.lastName; + } + } + + var myPerson = new Person("John", "Smith"); + console.log(myPerson.fullName()); // outputs "John Smith" + +Creating an object using the `new` keyword is the same as writing the following code: + + var myPerson = { + firstName : "John", + lastName : "Smith", + fullName : function() + { + return this.firstName + " " + this.lastName; + } + } + +The difference between the two methods of creating objects is that the first method uses a class to define the object and then the `new` keyword to instantiate it, and the second method immediately creates an instance of the object. + +Exercise +-------- + +Create a class called Person which accepts the name of a person as a string, and his/her age as a number. + +The Person class should have a method called `describe` which returns a string with the following syntax: "`name`, `age` years old". So for example, if John is 19 years old then the function `describe` of his object will return "John, 19 years old". + +Tutorial Code +------------- + +// TODO: create the Person class using a function + +var jack = new Person("Jack", 25); +var jill = new Person("Jill", 24); +console.log(jack.describe()); +console.log(jill.describe()); + +Expected Output +--------------- + +Jack, 25 years old +Jill, 24 years old + +Solution +-------- + +// TODO: create the Person class using a function +var Person = function(name, age){ + this.name=name; + this.age=age; + this.describe = function(){ + return this.name + ", " + this.age + " years old"; + } +} +var jack = new Person("Jack", 25); +var jill = new Person("Jill", 24); +console.log(jack.describe()); +console.log(jill.describe()); diff --git "a/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" new file mode 100644 index 000000000..c76190beb --- /dev/null +++ "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" @@ -0,0 +1,98 @@ +Tutorial +-------- + +### Pushing and popping + +Arrays can also function as a stack. The `push` and `pop` methods insert and remove variables from the end of an array. + +For example, let's create an empty array and push a few variables. + + var myStack = []; + myStack.push(1); + myStack.push(2); + myStack.push(3); + console.log(myStack); + +This will print out: + + 1,2,3 + +After pushing variables to the array, we can then pop variables off from the end. + + console.log(myStack.pop()); + console.log(myStack); + +This will print out the variable we popped from the array, and what's left of the array: + + 3 // the result from myStack.pop() + 1,2 // what myStack contains now + +### Queues using shifting and unshifting + +The `unshift` and `shift` methods are similar to `push` and `pop`, only they work from the beginning of the array. We can use the `push` and `shift` methods consecutively to utilize an array as a queue. For example: + + var myQueue = []; + myQueue.push(1); + myQueue.push(2); + myQueue.push(3); + + console.log(myQueue.shift()); + console.log(myQueue.shift()); + console.log(myQueue.shift()); + +The `shift` keyword will remove the variables of the array in the exact order they were inserted in, and the output will be: + + 1 + 2 + 3 + +The `unshift` method is used to insert a variable at the beginning of an array. For example: + + var myArray = [1,2,3]; + myArray.unshift(0); + console.log(myArray); // will print out 0,1,2,3 + +### Splicing + +Splicing arrays in JavaScript removes a certain part from an array to create a new array, made up from the part we took out. For example, if we wanted to remove the five numbers from the following array beginning from the 3rd index, we would do the following: + + var myArray = [0,1,2,3,4,5,6,7,8,9]; + var splice = myArray.splice(3,5); + + console.log(splice); // will print out 3,4,5,6,7 + console.log(myArray); // will print out 0,1,2,8,9 + +After splicing the array, it will only contain the part before and after the splicing. The splice is equal to all the variables between 3 and 7 (inclusive), and the remainder of the array, which contains all variables between 0 and 2 (inclusive), and 8 to 9 (inclusive). + +Exercise +-------- + +In this tutorial, you must manipulate the array called `myArray` and do the following: + +1. Push the number 42 to the end of the array +2. Shift a variable from the beginning of the array + +Tutorial Code +------------- + +var myArray = [true, "What is the meaning of life?"]; +// TODO: write your code here: + +console.log(myArray[0]); +console.log(myArray[1]); + +Expected Output +--------------- + +What is the meaning of life? +42 + +Solution +-------- + +var myArray = [true, "What is the meaning of life?"]; +myArray.push(42); +myArray.shift(); + +console.log(myArray[0]); +console.log(myArray[1]); diff --git a/tutorials/learn-js.org/pt/Objetos.md b/tutorials/learn-js.org/pt/Objetos.md new file mode 100644 index 000000000..8dfbaf93c --- /dev/null +++ b/tutorials/learn-js.org/pt/Objetos.md @@ -0,0 +1,95 @@ +Tutorial +-------- + +JavaScript is a functional language, and for object oriented programming it uses both objects and functions, but objects are usually used as a data structure, similar to a dictionary in Python or a map in Java. In this tutorial, we will learn how to use objects as a data structure. The advanced tutorials explain more about object oriented JavaScript. + +To initialize an object, use curly braces: + + var emptyObject = {}; + var personObject = { + firstName : "John", + lastName : "Smith" + } + +### Member addressing + +Members of objects can be addressed using the brackets operator `[]`, very much like arrays, but just like many +other object oriented languages, the period `.` operator can also be used. They are very similar, except for +the fact that brackets return a member by using a string, in contrast to the period operator, +which requires the member to be a simple word (the word should not contain spaces, +start with a number or use illegal characters). + +For example, we can continue to fill the person object with more details: + + var personObject = { + firstName : "John", + lastName : "Smith" + } + personObject.age = 23; + personObject["salary"] = 14000; + +### Iteration + +Iterating over members of a dictionary is not a trivial task, since iterating over objects can also yield members who don't actually belong to an object. Therefore, we must use the `hasOwnProperty` method to check that the member in fact belongs to the object. + + for (var member in personObject) + { + if (personObject.hasOwnProperty(member)) + { + console.log("the member " + member + " of personObject is " + personObject[member]) + } + } + +This will eventually print out + + the member firstName of personObject is John + the member lastName of personObject is Smith + the member age of personObject is 23 + the member salary of personObject is 14000 + +Note that methods of objects in JavaScript have a fixed order, like arrays. + +Exercise +-------- + +You must define an object called `person` with the following members: + +1. The member `firstName` of the person is "Jack" +2. The member `lastName` of the person is "Smith" +3. The member `age` of the person is 19 +4. The member `employed` of the person is `true` + +Tutorial Code +------------- + +// TODO: change this code +var person; + +console.log(person.firstName); +console.log(person.lastName); +console.log(person.age); +console.log(person.employed); + +Expected Output +--------------- + +Jack +Smith +19 +true + +Solution +-------- + +// TODO: change this code +var person = { + firstName : "Jack", + lastName : "Smith", + age : 19, + employed : true +} + +console.log(person.firstName); +console.log(person.lastName); +console.log(person.age); +console.log(person.employed); diff --git "a/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" "b/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" new file mode 100644 index 000000000..9fa748477 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" @@ -0,0 +1,99 @@ +Tutorial +-------- + +Every variable in JavaScript is casted automatically so any operator between two variables will always give some kind of result. + +### The addition operator + +The `+` (addition) operator is used for both addition and concatenation of strings. + +For example, adding two variables is easy: + + var a = 1; + var b = 2; + var c = a + b; // c is now equal to 3 + +The addition operator is used for concatenating strings to strings, strings to numbers, and numbers to strings: + + var name = "John"; + console.log("Hello " + name + "!"); + console.log("The meaning of life is " + 42); + console.log(42 + " is the meaning of life"); + +JavaScript behaves differently when you are trying to combine two operands of different types. The default primitive value is a string, so when you try to add a number to a string, JavaScript will transform the number to a string before the concatenation. + + console.log(1 + "1"); // outputs "11" + +### Mathematical operators + +To subtract, multiply and divide two numbers, use the minus (`-`), asterisk (`*`) and slash (`/`) signs. + + console.log(3 - 5); // outputs -2 + console.log(3 * 5); // outputs 15 + console.log(3 / 5); // outputs 0.6 + +### Advanced mathematical operators + +JavaScript supports the modulus operator (`%`) which calculates the remainder of a division operation. + + console.log(5 % 3); // outputs 2 + +JavaScript also supports combined assignment and operation operators. So, instead of typing `myNumber = myNumber / 2`, you can type `myNumber /= 2`. Here is a list of all these operators: + +* `/=` +* `*=` +* `-=` +* `+=` +* `%=` + +JavaScript also has a `Math` module which contains more advanced functions: + +* `Math.abs` calculates the absolute value of a number +* `Math.exp` calculates __e__ to the power of a number +* `Math.pow(x,y)` calculates the result of __x__ to the power of __y__ +* `Math.floor` removes the fraction part from a number +* `Math.random()` will give a random number `x` where 0<=x<1 + +And many more mathematical functions. + +Exercise +-------- + +In this exercise, you do the following: + +1. Connect the `firstName` and `lastName` to construct the variable `fullName`, but with a space (`" "`) in between the first and last name. +2. Multiply the variable `myNumber` by 2 and put the result in `meaningOfLife`. + +Tutorial Code +------------- + +var firstName = "John"; +var lastName = "Smith"; +var myNumber = 21; + +// TODO: change the following code +var fullName = null; +var meaningOfLife = null; + +console.log("The name is " + fullName); +console.log("The meaning of life is " + meaningOfLife); + +Expected Output +--------------- + +The name is John Smith +The meaning of life is 42 + +Solution +-------- + +var firstName = "John"; +var lastName = "Smith"; +var myNumber = 21; + +// TODO: change the following code +var fullName = firstName + " " + lastName; +var meaningOfLife = myNumber * 2; + +console.log("The name is " + fullName); +console.log("The meaning of life is " + meaningOfLife); diff --git "a/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" new file mode 100644 index 000000000..f69c17a07 --- /dev/null +++ "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" @@ -0,0 +1,134 @@ +Tutorial +-------- + +### The `if` statement + +The `if` statement allows us to check if an expression is equal to `true` or `false`, and execute different code according to the result. + +For example, if we want to ask the user whether his name is "John", we can use the `confirm` function. + + if (confirm("Are you John Smith?")) + { + console.log("Hello John, how are you?"); + } else { + console.log("Then what is your name?"); + } + +It is also possible to omit the `else` keyword if we only want to execute a block of code only if a certain expression is true. + +To evaluate whether two variables are equal, the `==` operator is used. There is also another equality operator in JavaScript, `===`, which does a strict comparison. This means that it will be true only if the two things you are comparing are the same type as well as same content. + + console.log("1" == 1); // true + console.log("1" === 1); // false + +For example: + + var myNumber = 42; + if (myNumber == 42) + { + console.log("The number is correct."); + } + +Inequality operators can also be used to evaluate expressions. For example: + + var foo = 1; + var bar = 2; + + if (foo < bar) + { + console.log("foo is smaller than bar."); + } + +Two or more expressions can be evaluated together using logical operators to check if two expressions evaluate to `true` together, or at least one of them. To check if two expressions both evaluate to `true`, use the AND operator `&&`. To check if at least one of the expressions evaluate to `true`, use the OR operator `||`. + + var foo = 1; + var bar = 2; + var moo = 3; + + if (foo < bar && moo > bar) + { + console.log("foo is smaller than bar AND moo is larger than bar."); + } + + if (foo < bar || moo > bar) + { + console.log("foo is smaller than bar OR moo is larger than bar."); + } + +The NOT operator `!` can also be used likewise: + + var notTrue = false; + if (!notTrue) + { + console.log("not not true is true!"); + } + +### The `switch` statement + +The `switch` statement is similar to the `switch` statement from the C programming language, but also supports strings. The `switch` statement is used to select between more than two different options, and to run the same code for more than one option. For example: + + var rank = "Commander"; + switch(rank) + { + case "Private": + case "Sergeant": + console.log("You are not authorized."); + break; + case "Commander": + console.log("Hello commander! what can I do for you today?"); + break; + case "Captain": + console.log("Hello captain! I will do anything you wish."); + break; + default: + console.log("I don't know what your rank is."); + break; + } + +In this example, "Private" and "Sergeant" both trigger the first sentence, "Commander" triggers the second sentence and "Captain" triggers the third. If an unknown rank was evaulated, the `default` keyword defines the action for this case (optional). We must use the `break` statement between every code block to avoid the `switch` from executing the next code block. + +Using the `switch` statement in general is not recommended, because forgetting the `break` keyword causes very confusing results. + +Exercise +-------- + +In this exercise, you must construct an `if` inside the `checkNumber` function statement that checks if the number `myNumber` is equal to 42. If that is the case, the function must print out using `console.log` the word `correct`. If myNumber is not equal to 42, the function must print out using `console.log` the word `incorrect`. You can name the argument passed to a function by supplying the name inside the parentheses. For example, `function myFunction(myArgument)`. + +Tutorial Code +------------- + +function checkNumber() +{ + // TODO: write your code here +} + +checkNumber(3); +checkNumber(7); +checkNumber(42); + +Expected Output +--------------- + +incorrect +incorrect +correct + +Solution +-------- + +function checkNumber(myNumber) +{ + // TODO: write your code here + if (myNumber===42) + { + console.log("correct"); + } + else + { + console.log("incorrect"); + } +} + +checkNumber(3); +checkNumber(7); +checkNumber(42); diff --git a/tutorials/learn-js.org/pt/Promessas.md b/tutorials/learn-js.org/pt/Promessas.md new file mode 100644 index 000000000..ed3713fd5 --- /dev/null +++ b/tutorials/learn-js.org/pt/Promessas.md @@ -0,0 +1,169 @@ +Tutorial +-------- +Promises are the basics of asynchronous programming in JavaScript, and are very important to master. + +### What is Asynchronous Programming? + +Asynchronous programming, or in short, async programming, is a method of programming which +enables different parts of code to run at changing times, instead of immediately. + +This is mostly required when we want to fetch information from some remote server, and write +code which does something with what the server returned: + + function getServerStatus() { + const result = fetch("/server/status"); + + // THIS WILL NOT WORK! + console.log("The status from the server is: ", result.ok); + } + +In many programming languages such as Python, this approach would work, because functions +are by default synchronous functions. + +In JavaScript, most APIs which require waiting for a function to do something, +are **asynchronous** by default which means that this code will not +do what we think it will do, since the `fetch` function is asynchronous, and therefore will +return something which is not exactly the result, but will _eventually_ be the result. +This "thing" which is returned from the `fetch` function is called a **Promise** in JavaScript. + +To make the code above work, we will need to write the function in the following manner: + + function getServerStatus() { + const result = fetch("/server/status"); + + result.then(function(status) { + console.log("The status from the server is: ", status.ok); + }); + } + +Notice that we used the `then` function here, which is one of the methods of a `Promise`. + +### The Promise Object + +A Promise is a native JavaScript object which has two traits: +1. It receives a single argument which is a function. This function needs to have two arguments, +a `resolve` function and a `reject` function. The code written inside the promise needs +to use one of these two functions. +2. It can be waited on using the `then` method (and other similar methods), or the `await` +statement. (The async/await statements have a separate tutorial). + +An asynchronous function is defined by a function, which instead of returning the value +it was supposed to return, it returns a `Promise` object, which will eventually resolve and +give the user the answer. + +For example, let's say that we would like to calculate the sum of two numbers, but by +writing a function which returns a `Promise` and not the value. + + .exec + function sumAsync(x, y) { + const p = new Promise((resolve, reject) => { + // this resolves the promise we just created with the output of x+y + resolve(x + y); + }); + + // This returns the promise, not the value + return p; + } + + // let's use the function now + sumAsync(5, 7).then((result) => { + console.log("The result of the addition is:", result); + }); + +When can this be very useful? When the calculation needs to happen indirectly, for example +after waiting a while or when retrieving information from the server using the `fetch` +command for example. + +Let's modify the example to resolve the solution only after a half a second: + + .exec + function sumAsync(x, y) { + console.log("1. sumAsync is executed"); + const p = new Promise((resolve, reject) => { + // run this in 500ms from now + setTimeout(() => { + console.log("4. Resolving sumAsync's Promise with the result after 500ms"); + resolve(x + y); + }, 500); + + // we don't need to return anything + console.log("2. sumAsync Promise is initialized"); + }); + console.log("3. sumAsync has returned the Promise"); + return p; + } + + // let's use the function now + sumAsync(5, 7).then((result) => { + console.log("5. The result of the addition is:", result); + }); + +### Rejecting promises + +In a synchronous flow, if we want to tell the user that something went wrong so he can +catch an exception, we throw an exception using the `throw` argument. When using promises, +we need to trigger the `reject` function instead. + +Let's say we want to write the same function, but with a rejection if a value is negative: + + .exec + function sumAsync(x, y) { + return new Promise((resolve, reject) => { + // run this in 500ms from now + setTimeout(() => { + if (x < 0 || y < 0) { + reject("Negative values received"); + } else { + resolve(x + y); + } + }, 500); + + // we don't need to return anything + }); + } + + sumAsync(-5, 7).then((result) => { + console.log("The result of the addition is:", result); + }).catch((error) => { + console.log("Error received:", error); + }); + +Exercise +-------- +Write a function which receives a string, and returns a Promise. + +The promise should resolve with the uppercase version of the string, but should reject +if the string is null. + +Tutorial Code +------------- + function upperCaseAsync(s) { + // write your code here + } + + upperCaseAsync("steve").then(console.log); + upperCaseAsync(null).catch((x) => { + console.log("No string received!"); + }); + +Expected Output +--------------- + STEVE + No string received! + +Solution +-------- + function upperCaseAsync(s) { + return new Promise((resolve, reject) => { + if (s === null) { + reject(); + } else { + resolve(s.toUpperCase()); + } + }); + } + + upperCaseAsync("steve").then(console.log); + upperCaseAsync(null).catch((x) => { + console.log("No string received!"); + }); diff --git "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" index 01aaaa51a..0766434ea 100644 --- "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" @@ -1,21 +1,37 @@ Esta seção ainda não existe. -Para contribuir com os tutoriais, basta dar um "fork" no seguinte repositório: +Para contribuir com os tutoriais, basta dar um "Fork" no seguinte repositório: [[https://github.com/ronreiter/interactive-tutorials]] -Daí, você cria uma "branch" na qual vai poder adicionar ou editar tutoriais e mandar um "pull request" para o criador, o "ronreiter". +Daí, você cria uma "Branch" na qual vai poder adicionar ou editar tutoriais e mandar um "Pull Request" para o criador, o "ronreiter". Para escrever um tutorial, basta dirigir-se à pasta `tutorials`, adentrar a subpasta do domínio desejado, adentrar a subpasta com as iniciais do seu idioma (ou criá-la, se ainda não existir), criar uma página Markdown de nome pertinente e adicioná-la na tela de boas-vindas por meio de hiperlink. Após adicioná-la, garanta que o link funcionou corretamente executando o servidor web "Flask". +#### Iniciais e seus respectivos idiomas: + +| Iniciais|Idioma| +| :--: | :---------: | +| cn | 普通话 | +| de | Deutsch | +| en | English | +| es | Español | +| fa | فارسی | +| fr | Français | +| it | Italiano | +| nl | Nederlands | +| pl | Polski | +| **pt** | **Português** | +| tr | Türkçe| + Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser o `Welcome.md`). Cada tutorial consiste em uma breve explicação conteudista e um exercício sucinto para testar o usuário. Assim que ele o finalizar, terá de executar seu código e verificar se a saída está de acordo com o esperado. Cada tutorial deve seguir a seguinte estrutura: -### Nome do Arquivo.md - + ### Nome do Arquivo.md + Tutorial -------- Aqui, você pode escrever um texto explicativo sobre alguma funcionalidade. diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" index fc1816566..798c071ab 100644 --- "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -1,14 +1,15 @@ Tutorial -------- -Isto é uma variável: uma referência a um valor guardado em um endereço na memória. +"Variável" é uma referência a um valor guardado em um endereço na memória que pode ser acessada por um nome qualquer. -E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável é definida pela palavra reservada "`var`" e pode guardar qualquer tipo primitivo a qualquer momento. +Esses nomes quaisquer podem ser regidos pelas lógicas "camelCase" (como em nomes de variáveis do Java), "snake_case" (como em nomes de variáveis do Python), "CapitalCamelCase" (como em nomes de classes do Java), flatcase (como em nomes de pacotes do Java), UPPER_CASE (como em constantes do C) e kebab-case. O padrão vai depender dos padrões da companhia ou do projeto em que você está trabalhando, a recomendação é apenas não se desviar dele assim que escolhido. -> O TypeScript é um subconjunto do JavaScript que permite a tipagem estática, por isso ele é mais recomendado que o seu irmão amarelo quando se fala na criação de lógica para servidores: torna-se menos provável comportamentos inesperados por mudanças repentinas de tipagem. -
Imagina um número de telefone deixando de ser "String" e virando "Number" do nada, passando a ocupar um valor de trilhões na memória? +E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. -Temos um grande acervo de tipos primitivos para usar nas variáveis dos nossos códigos: +Variáveis podem ser declaradas pelas palavras reservadas "`const`", "`let`" e "`var`". "`const`" cria uma variável constante, o que significa que o valor (e, por consequência, o tipo) daquela variável não mudará de forma alguma, `let` cria uma variável local (visível pelo escopo da função) e `var` cria uma variável global (visível pelo código todo). + +Temos um grande acervo de tipos primitivos para usar com as variáveis dos nossos códigos: const meuNumber = 3; // um valor numérico const minhaString = "Olá, Mundo!" // um valor alfanumérico @@ -16,8 +17,9 @@ Temos um grande acervo de tipos primitivos para usar nas variáveis dos nossos c Algumas observações sobre os tipos das variáveis em JavaScript: -* No JavaScript, o tipo Number pode apontar tanto para números decimais quanto para inteiros. +* O tipo Number pode apontar tanto para números decimais quanto para inteiros. * As variáveis do tipo Boolean só podem apontar para um destes valores: "`true`" ou "`false`". +* O tipo String pode ser constituído de números ou valores puramente textuais. No entanto, o Number não pode guardar valores textuais de forma alguma. E, claro, se uma string guardar um número, esse número não poderá ser usado em operações aritméticas. Há dois tipos mais avançados em JavaScript: Vetores e Objetos. Estudaremos ambos em tutoriais futuros. @@ -40,6 +42,11 @@ No entanto, um valor "`null`" é diferente, seu objetivo é explicitar que uma v >retorna `null` +
+ +> Adendo: O TypeScript é um subconjunto do JavaScript que permite a tipagem estática, por isso ele é mais recomendado que o seu irmão amarelo quando se fala na criação de lógica para servidores: torna-se menos provável comportamentos inesperados por mudanças repentinas de tipagem. +
Imagina só um número de telefone deixando de ser "String" e virando "Number" do nada, passando a ocupar um valor trilionário na memória? + Exercise -------- diff --git a/tutorials/learn-js.org/pt/Vetores.md b/tutorials/learn-js.org/pt/Vetores.md new file mode 100644 index 000000000..1e6dda56a --- /dev/null +++ b/tutorials/learn-js.org/pt/Vetores.md @@ -0,0 +1,67 @@ +Tutorial +-------- + +O JavaScript te deixa guardar uma lista de variáveis dentro do tipo Array. +Isso aí: no JavaScript, o mesmo vetor pode funcionar como as estruturas de dados "lista", "pilha" ou "fila". + +Para definir um vetor, ou você usa o operador colchetes ou instancia um objeto do tipo Array: + + var meuArray = [1, 2, 3]; + var oMesmoArray = new Array(1, 2, 3); + +### Endereçamento + +Podemos usar o operador colchetes `[]` para nos referirmos a uma posição específica do nosso vetor. O endereçamento começa pelo índice *zero*, ou seja, no `meuArray`, o segundo membro pode ser chamado acessando o índice 1. Uma das vantagens de gerenciar sua estrutura de dados com o tipo Array é a visualização em tempo real se você já souber o índice do elemento desejado. + + console.log(myArray[1]); +>retorna 2 + +Os vetores em JavaScript podem ser esparsos, o que quer dizer que podemos alocar variáveis a posições aleatórias, ainda que antes delas houvesse posições vazias. Veja só: + + var meuArray = [] + meuArray[3] = "fala aí" + console.log(meuArray); + +
+Retorna + + [undefined, undefined, undefined, "fala aí"] +
+ +### Elementos de um Vetor + +Já que os vetores do JavaScript não passam de objetos de tipo especial, um mesmo vetor pode guardar valores de diferentes tipos primitivos. Logo abaixo, temos um exemplo: o mesmo vetor guarda os tipos String, Number e um Object vazio. + + var meuArray = ["string", 10, {}] + +Exercise +-------- + +Você deve definir um vetor com as seguintes três variáveis: + +1. Uma string cujo valor seja "What is the meaning of life?" +2. Um número cujo valor seja `42` +3. Um booleano cujo valor seja "`true`" + +Tutorial Code +------------- + +// TODO: change myArray to contain the variables +var myArray = []; +console.log(myArray[0]); +console.log(myArray[1]); +console.log(myArray[2]); + +Expected Output +--------------- +What is the meaning of life? +42 +true + +Solution +-------- +// TODO: change myArray to contain the variables +var myArray = ["What is the meaning of life?", 42, true]; +console.log(myArray[0]); +console.log(myArray[1]); +console.log(myArray[2]); \ No newline at end of file diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 0fbf1e8b9..5d0721e1c 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -2,19 +2,19 @@ Bem-vindo ao tutorial interativo de JavaScript do "learn-js.org"! -Sendo você um programador experiente ou não, o site foi pensado a todos os que queiram aprender a linguagem de programação JavaScript. +Sendo você um desenvolvedor experiente ou não, o site foi pensado a todos os que queiram melhorar na linguagem de programação *JavaScript*. É só clicar no capítulo pelo qual você deseja começar e seguir as instruções. Boa sorte! A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para destacar-se: por isso mesmo **as soluções vão cobrar códigos em inglês.** Faz uma força! +Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto o "Olá, Mundo!"). Faz uma força! *Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada.* :alien: ### Começando de Baixo -- [[Olá, Mundo!]] +- "[[Olá, Mundo!]]" - [[Variáveis e Tipos]] - [[Vetores]] - [[Manipulação de Vetores]] From 57524784d6d2c8c60302ecbd724fb8cbf47927a4 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 16:58:47 -0300 Subject: [PATCH 06/20] =?UTF-8?q?Manipula=C3=A7=C3=A3o=20de=20Vetores?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Manipula\303\247\303\243o de Vetores.md" | 84 ++++++++++--------- tutorials/learn-js.org/pt/Welcome.md | 2 +- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" index c76190beb..b8bf57932 100644 --- "a/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" +++ "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" @@ -1,76 +1,82 @@ Tutorial -------- -### Pushing and popping +### Push e Pop -Arrays can also function as a stack. The `push` and `pop` methods insert and remove variables from the end of an array. +Vetores também podem funcionar como pilhas. Os métodos "`push`" e "`pop`" inserem e removem variáveis diretamente do fim de um vetor, respectivamente. -For example, let's create an empty array and push a few variables. +Por exemplo, criemos um vetor vazio e povoemo-no com algumas variáveis. - var myStack = []; - myStack.push(1); - myStack.push(2); - myStack.push(3); - console.log(myStack); + var minhaPilha = []; + minhaPilha.push(1); + minhaPilha.push(2); + minhaPilha.push(3); + console.log(minhaPilha); -This will print out: +
+Isso retornará: 1,2,3 +
-After pushing variables to the array, we can then pop variables off from the end. +Tendo inserido variáveis no fim do vetor, podemos também removê-las dali. - console.log(myStack.pop()); - console.log(myStack); + console.log(minhaPilha.pop()); + console.log(minhaPilha); -This will print out the variable we popped from the array, and what's left of the array: +
+Esses comandos mostrarão, respectivamente, o que removemos do vetor e o que restou nele: +
- 3 // the result from myStack.pop() - 1,2 // what myStack contains now + 3 // resultado de minhaPilha.pop() + 1,2 // restante de minhaPilha -### Queues using shifting and unshifting +### Filas usando Unshift e Shift -The `unshift` and `shift` methods are similar to `push` and `pop`, only they work from the beginning of the array. We can use the `push` and `shift` methods consecutively to utilize an array as a queue. For example: +Os métodos "`unshift`" e "`shift`" assemelham-se aos "`push`" e "`pop`", com a ressalva de trabalharem no começo do vetor. Podemos usar os métodos "`push`" e "`shift`" alternadamente, o que faz o vetor funcionar como uma fila. Veja só: - var myQueue = []; - myQueue.push(1); - myQueue.push(2); - myQueue.push(3); + var minhaFila = []; + minhaFila.push(1); + minhaFila.push(2); + minhaFila.push(3); - console.log(myQueue.shift()); - console.log(myQueue.shift()); - console.log(myQueue.shift()); + console.log(minhaFila.shift()); + console.log(minhaFila.shift()); + console.log(minhaFila.shift()); -The `shift` keyword will remove the variables of the array in the exact order they were inserted in, and the output will be: +A palavra reservada "`shift`" removerá as variáveis do vetor na mesmíssima ordem em que foram inseridas, o que acarretará nos seguintes retornos: 1 2 3 -The `unshift` method is used to insert a variable at the beginning of an array. For example: +O método "`unshift`" é usado para inserir uma variável no começo de um vetor. Por exemplo: - var myArray = [1,2,3]; - myArray.unshift(0); - console.log(myArray); // will print out 0,1,2,3 + var meuVetor = [1,2,3]; + meuVetor.unshift(0); + console.log(meuVetor); + +>retorna [0,1,2,3] -### Splicing +### Splice -Splicing arrays in JavaScript removes a certain part from an array to create a new array, made up from the part we took out. For example, if we wanted to remove the five numbers from the following array beginning from the 3rd index, we would do the following: +O método Splice dos vetores do JavaScript remove uma determinada parte de um vetor; possibilitando também a criação de um novo a partir da parte que foi removida. Por exemplo, se quiséssemos retirar cinco números do seguinte vetor a partir do índice 3, aplicaríamos o seguinte: - var myArray = [0,1,2,3,4,5,6,7,8,9]; - var splice = myArray.splice(3,5); + var meuVetor = [0,1,2,3,4,5,6,7,8,9]; + var splice = meuVetor.splice(3,5); - console.log(splice); // will print out 3,4,5,6,7 - console.log(myArray); // will print out 0,1,2,8,9 + console.log(splice); // retorna [3,4,5,6,7] + console.log(meuVetor); // retorna [0,1,2,8,9] -After splicing the array, it will only contain the part before and after the splicing. The splice is equal to all the variables between 3 and 7 (inclusive), and the remainder of the array, which contains all variables between 0 and 2 (inclusive), and 8 to 9 (inclusive). +Após aplicar o Splice, o vetor resultante possuirá tudo menos as partes anterior e posterior ao intervalo informado pelos parâmetros. Esse intervalo é fechado, isto é: o 3 e o 7 também foram incluídos. Já o vetor original passou a conter todas as variáveis entre 0 e 2 e 8 e 9. Exercise -------- -In this tutorial, you must manipulate the array called `myArray` and do the following: +Para este desafio, você manipulará o vetor chamado `myArray` e fará o seguinte: -1. Push the number 42 to the end of the array -2. Shift a variable from the beginning of the array +1. Inserirá o número 42 ao fim dele +2. Removerá a variável de seu início Tutorial Code ------------- diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 5d0721e1c..0044cb38a 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -8,7 +8,7 @@ Sendo você um desenvolvedor experiente ou não, o site foi pensado a todos os q A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto o "Olá, Mundo!"). Faz uma força! +Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto no módulo "Olá, Mundo!"). Faz uma força! *Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada.* :alien: From 35ae4860993550714cbdbc8a7d95215271735a4e Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 19:43:48 -0300 Subject: [PATCH 07/20] Vantagens do ES6 --- .../pt/Fun\303\247\303\265es Seta.md" | 59 +++++++++++-------- .../learn-js.org/pt/Fun\303\247\303\265es.md" | 32 +++++----- .../pt/Vari\303\241veis e Tipos.md" | 15 +++++ tutorials/learn-js.org/pt/Welcome.md | 16 ++--- 4 files changed, 76 insertions(+), 46 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" index 22268998a..c293e3162 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" @@ -1,54 +1,65 @@ Tutorial -------- -Arrow functions are a feature of ES6, their behavior are generally the same of a function. These are anonymous functions with a special syntax, they haven't their own this, arguments or super. They can't be used as constructors too. +Funções seta são uma funcionalidade do ES6, elas se comportam como uma função comum. Trata-se de funções anônimas com sintaxe especial, elas não têm "`this`", argumentos ou "`super`". Também não podem ser usadas como construtores. -Arrow functions are often used as callbacks of native JS functions like map, filter or sort. The reason of their name is due to the use of `=>` in the syntax. +Funções seta são comumente usadas como callbacks de funções nativas do JavaScript, como "`map`", "`filter`" ou "`sort`". Elas têm esse nome por causa do `=>` presente na inicialização. -To define an arrow function, we use the `() => {}` structure as follows: +Para declarar uma função seta, usamos a estrutura `() => {}` conforme o exemplo: - const greet = (name) => { return "Hello " + name + "!"; } + const cumprimentar = (nome) => { + return `Fala, ${nome}!`; + } - console.log(greet("Eric")); // prints out Hello Eric! + console.log(cumprimentar("Nathan")); +>retorna "Fala, Nathan"! -In this function, the `name` argument to the `greet` function is used inside the function to construct a new string and return it using the `return` statement. +Nessa função, o parâmetro `nome` da função `cumprimentar` é usado no corpo dela própria para construir uma string que será retornada usando a palavra reservada "`return`". O argumento passado é a string `Nathan`, por isso o retorno acima. -In case that the function only receives one argument, we can omit the parenthesis: +No caso de a função receber apenas um argumento, os parênteses tornam-se facultativos: - const greet = name => { return "Hello " + name + "!"; } + const cumprimentar = nome => { + return `Fala, ${nome}!`; + } - console.log(greet("Eric")); // prints out Hello Eric! + console.log(cumprimentar("Nathan")); +>retorna "Fala, Nathan"! -And, in case that we want to do a explicit return of the function and we have only one line of code, we can avoid the `return` statement and omit brackets too: +E mais: no caso de querermos um retorno explícito e apenas uma linha for necessária no corpo da função, o uso da palavra reservada "`return`" e das chaves também vira facultativo: - const greet = name => "Hello " + name + "!"; + const cumprimentar = nome => `Fala, ${nome}!`; - console.log(greet("Eric")); // prints out Hello Eric! + console.log(cumprimentar("Nathan")); +>retorna "Fala, Nathan"! -Using an arrow as a callback compared to a normal function: +Comparando o uso de uma função seta como callback ao de uma função padrão: - let numbers = [3, 5, 8, 9, 2]; + let numeros = [2, 3, 5, 8, 9]; - // Old way - function multiplyByTwo(number){ - return number * 2; + // Função tradicional + function multiplicarPorDois(numero){ + return numero * 2; } - let multipliedNumbers = numbers.map(multiplyByTwo); + let numerosMultiplicados = numeros.map(multiplicarPorDois); + + console.log(numerosMultiplicados); +>retorna [4, 6, 10, 16, 18] - console.log(multipliedNumbers); // prints out: 6, 10, 16, 18, 4 + let numeros = [2, 3, 5, 8, 9]; - // Using ES6 arrow functions - const multiplyByTwo = number => number * 2; + // Função seta + const multiplicarPorDois = numero => numero * 2; - let multipliedNumbers = numbers.map(multiplyByTwo); + let numerosMultiplicados = numeros.map(multiplicarPorDois); - console.log(multipliedNumbers); // prints out: 6, 10, 16, 18, 4 + console.log(numerosMultiplicados); +>retorna [4, 6, 10, 16, 18] Exercise -------- -Define an arrow function `divideByTwo` which accepts a number and returns that number divided by 2. +Defina a função seta `divideByTwo`, que recebe um número como parâmetro e retorna a metade desse número. Tutorial Code ------------- diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" index aa1483e85..9d4a63b9a 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" @@ -1,34 +1,38 @@ Tutorial -------- -Functions are code blocks that can have arguments, and function have their own scope. In JavaScript, functions are a very important feature of the program, and especially the fact that they can access local variables of a parent function (this is called a closure). +Funções são blocos de código reutilizáveis que podem receber argumentos para diversificar retornos. -There are two ways to define functions in JavaScript - named functions and anonymous functions. +Pense no seguinte: está precisando copiar trechos iguais? Então esses trechos de código podem ser "componentizados" com funções. Além disso, elas têm seu próprio escopo e são uma parte muito importante de um projeto de software, ainda mais considerando o fato de que podem acessar variáveis locais de funções em níveis superiores (processo esse chamado "closure"). -To define a named function, we use the `function` statement as follows: +Há duas formas de se declarar funções em JavaScript: funções nomeadas e anônimas. - function greet(name) - { - return "Hello " + name + "!"; +Para declarar uma função nomeada, usamos a palavra reservada "`function`" desta forma: + + function cumprimentar(nome) { + return `Fala, ${nome}!`; } - console.log(greet("Eric")); // prints out Hello Eric! + console.log(cumprimentar("Nathan")); +>retorna "Fala, Nathan!" -In this function, the `name` argument to the `greet` function is used inside the function to construct a new string and return it using the `return` statement. +Nessa função, o parâmetro `nome` da função `cumprimentar` é usado no corpo dela própria para construir uma string que será retornada usando a palavra reservada "`return`". O argumento passado é a string `Nathan`, por isso o retorno acima. -To define an anonymous function, we can alternatively use the following syntax: +Para definir uma função anônima, podemos usar esta sintaxe: - var greet = function(name) - { - return "Hello " + name + "!"; + var cumprimentar = function(nome) { + return `Fala, ${name}!`; } - console.log(greet("Eric")); // prints out Hello Eric! + console.log(cumprimentar("Nathan")); +>retorna "Fala, Nathan!" + +Há uma facilidade proporcionada pelo ES6 chamada "funções seta", mas vamos abordar esse assunto no próximo artigo. Exercise -------- -Define a function called `multiplyFive` which accepts a number and returns that number multiplied by 5. +Defina uma função chamada `multiplyFive` que receba uma variável do tipo Number e a retorne multiplicada por 5. Tutorial Code ------------- diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" index 798c071ab..c6024cf0a 100644 --- "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -5,6 +5,8 @@ Tutorial Esses nomes quaisquer podem ser regidos pelas lógicas "camelCase" (como em nomes de variáveis do Java), "snake_case" (como em nomes de variáveis do Python), "CapitalCamelCase" (como em nomes de classes do Java), flatcase (como em nomes de pacotes do Java), UPPER_CASE (como em constantes do C) e kebab-case. O padrão vai depender dos padrões da companhia ou do projeto em que você está trabalhando, a recomendação é apenas não se desviar dele assim que escolhido. +Uma restrição para a nomenclatura das variáveis é que elas não podem assumir palavras reservadas da linguagem. E já que estamos no Brasil, **lembrem-se**, espaços e acentos, em computação, só se usa dentro de variáveis que guardem texto, ou a chance de erros é tremenda! + E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. Variáveis podem ser declaradas pelas palavras reservadas "`const`", "`let`" e "`var`". "`const`" cria uma variável constante, o que significa que o valor (e, por consequência, o tipo) daquela variável não mudará de forma alguma, `let` cria uma variável local (visível pelo escopo da função) e `var` cria uma variável global (visível pelo código todo). @@ -42,6 +44,19 @@ No entanto, um valor "`null`" é diferente, seu objetivo é explicitar que uma v >retorna `null` +Finalizando o tópico, o ES6 trouxe-nos um uso muito interessante das strings com o "template literals", ele entra em jogo quando se está trabalhando com strings de várias linhas ou que mostrem várias outras variáveis e se queira evitar a concatenação excessiva com "+", aspas e espaços. +Para aplicá-lo, deve-se declarar a string com acentos graves ```| `` |``` em vez de aspas simples ou duplas. Dentro da string, sempre que se for chamar a outra variável, usa-se cifrão e chaves da seguinte forma: + + var nome = "Nathan"; + var periodo = "tarde"; + var saudacao = `Boa ${periodo}, ${nome}!`; + + // em vez de + // var saudacao = "Boa "+periodo+", "+nome+"!"; + + console.log(saudacao) +>ambos retornam "Boa tarde, Nathan!", mas perceba a complexidade desnecessária da segunda alternativa. +
> Adendo: O TypeScript é um subconjunto do JavaScript que permite a tipagem estática, por isso ele é mais recomendado que o seu irmão amarelo quando se fala na criação de lógica para servidores: torna-se menos provável comportamentos inesperados por mudanças repentinas de tipagem. diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 0044cb38a..4a67315b4 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -1,6 +1,6 @@ # Bem-vindo -Bem-vindo ao tutorial interativo de JavaScript do "learn-js.org"! +Bem-vindo ao tutorial interativo do "learn-js.org"! Sendo você um desenvolvedor experiente ou não, o site foi pensado a todos os que queiram melhorar na linguagem de programação *JavaScript*. @@ -8,24 +8,24 @@ Sendo você um desenvolvedor experiente ou não, o site foi pensado a todos os q A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto no módulo "Olá, Mundo!"). Faz uma força! +Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto no módulo "Olá, Mundo!"). -*Por fim, este humilde tradutor te deseja boa sorte e muitas vagas na jornada.* :alien: +*Por fim, este [humilde tradutor](https://github.com/ntn-ss) te deseja muito sucesso e vagas na jornada.* :alien: ### Começando de Baixo - "[[Olá, Mundo!]]" - [[Variáveis e Tipos]] -- [[Vetores]] -- [[Manipulação de Vetores]] - [[Operadores Aritméticos]] - [[Operadores Lógicos]] +- [[Funções]] +- [[Funções Seta]] +- [[Vetores]] +- [[Manipulação de Vetores]] - [[Estruturas de Repetição]] - [[Objetos]] -- [[Funções]] - [[Caixas Pop-up]] - [[Funções Callback]] -- [[Funções Seta]] ### Tutoriais Avançados @@ -37,6 +37,6 @@ Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões - [[Desestruturação]] - [[Estruturas de Dados]] -### Tutoriais de Contribuição +### Quero Ajudar Saiba mais em [[Tutoriais de Contribuição]]. \ No newline at end of file From fa3f61126c836f5ce81b5fefbba7c38a6dc868c1 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Wed, 31 Jan 2024 21:35:50 -0300 Subject: [PATCH 08/20] Operadores --- .../pt/Fun\303\247\303\265es Seta.md" | 14 +- .../pt/Operadores Aritm\303\251ticos.md" | 99 ----------- .../learn-js.org/pt/Operadores Gerais.md | 104 ++++++++++++ .../pt/Operadores L\303\263gicos.md" | 154 +++++++++++------- .../pt/Vari\303\241veis e Tipos.md" | 2 +- tutorials/learn-js.org/pt/Welcome.md | 4 +- 6 files changed, 205 insertions(+), 172 deletions(-) delete mode 100644 "tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" create mode 100644 tutorials/learn-js.org/pt/Operadores Gerais.md diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" index c293e3162..444a2fcaf 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Seta.md" @@ -11,10 +11,10 @@ Para declarar uma função seta, usamos a estrutura `() => {}` conforme o exempl return `Fala, ${nome}!`; } - console.log(cumprimentar("Nathan")); ->retorna "Fala, Nathan"! + console.log(cumprimentar("Olegário")); +>retorna "Fala, Olegário"! -Nessa função, o parâmetro `nome` da função `cumprimentar` é usado no corpo dela própria para construir uma string que será retornada usando a palavra reservada "`return`". O argumento passado é a string `Nathan`, por isso o retorno acima. +Nessa função, o parâmetro `nome` da função `cumprimentar` é usado no corpo dela própria para construir uma string que será retornada usando a palavra reservada "`return`". O argumento passado é a string `Olegário`, por isso o retorno acima. No caso de a função receber apenas um argumento, os parênteses tornam-se facultativos: @@ -22,15 +22,15 @@ No caso de a função receber apenas um argumento, os parênteses tornam-se facu return `Fala, ${nome}!`; } - console.log(cumprimentar("Nathan")); ->retorna "Fala, Nathan"! + console.log(cumprimentar("Olegário")); +>retorna "Fala, Olegário"! E mais: no caso de querermos um retorno explícito e apenas uma linha for necessária no corpo da função, o uso da palavra reservada "`return`" e das chaves também vira facultativo: const cumprimentar = nome => `Fala, ${nome}!`; - console.log(cumprimentar("Nathan")); ->retorna "Fala, Nathan"! + console.log(cumprimentar("Olegário")); +>retorna "Fala, Olegário"! Comparando o uso de uma função seta como callback ao de uma função padrão: diff --git "a/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" "b/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" deleted file mode 100644 index 9fa748477..000000000 --- "a/tutorials/learn-js.org/pt/Operadores Aritm\303\251ticos.md" +++ /dev/null @@ -1,99 +0,0 @@ -Tutorial --------- - -Every variable in JavaScript is casted automatically so any operator between two variables will always give some kind of result. - -### The addition operator - -The `+` (addition) operator is used for both addition and concatenation of strings. - -For example, adding two variables is easy: - - var a = 1; - var b = 2; - var c = a + b; // c is now equal to 3 - -The addition operator is used for concatenating strings to strings, strings to numbers, and numbers to strings: - - var name = "John"; - console.log("Hello " + name + "!"); - console.log("The meaning of life is " + 42); - console.log(42 + " is the meaning of life"); - -JavaScript behaves differently when you are trying to combine two operands of different types. The default primitive value is a string, so when you try to add a number to a string, JavaScript will transform the number to a string before the concatenation. - - console.log(1 + "1"); // outputs "11" - -### Mathematical operators - -To subtract, multiply and divide two numbers, use the minus (`-`), asterisk (`*`) and slash (`/`) signs. - - console.log(3 - 5); // outputs -2 - console.log(3 * 5); // outputs 15 - console.log(3 / 5); // outputs 0.6 - -### Advanced mathematical operators - -JavaScript supports the modulus operator (`%`) which calculates the remainder of a division operation. - - console.log(5 % 3); // outputs 2 - -JavaScript also supports combined assignment and operation operators. So, instead of typing `myNumber = myNumber / 2`, you can type `myNumber /= 2`. Here is a list of all these operators: - -* `/=` -* `*=` -* `-=` -* `+=` -* `%=` - -JavaScript also has a `Math` module which contains more advanced functions: - -* `Math.abs` calculates the absolute value of a number -* `Math.exp` calculates __e__ to the power of a number -* `Math.pow(x,y)` calculates the result of __x__ to the power of __y__ -* `Math.floor` removes the fraction part from a number -* `Math.random()` will give a random number `x` where 0<=x<1 - -And many more mathematical functions. - -Exercise --------- - -In this exercise, you do the following: - -1. Connect the `firstName` and `lastName` to construct the variable `fullName`, but with a space (`" "`) in between the first and last name. -2. Multiply the variable `myNumber` by 2 and put the result in `meaningOfLife`. - -Tutorial Code -------------- - -var firstName = "John"; -var lastName = "Smith"; -var myNumber = 21; - -// TODO: change the following code -var fullName = null; -var meaningOfLife = null; - -console.log("The name is " + fullName); -console.log("The meaning of life is " + meaningOfLife); - -Expected Output ---------------- - -The name is John Smith -The meaning of life is 42 - -Solution --------- - -var firstName = "John"; -var lastName = "Smith"; -var myNumber = 21; - -// TODO: change the following code -var fullName = firstName + " " + lastName; -var meaningOfLife = myNumber * 2; - -console.log("The name is " + fullName); -console.log("The meaning of life is " + meaningOfLife); diff --git a/tutorials/learn-js.org/pt/Operadores Gerais.md b/tutorials/learn-js.org/pt/Operadores Gerais.md new file mode 100644 index 000000000..6ffa7ee31 --- /dev/null +++ b/tutorials/learn-js.org/pt/Operadores Gerais.md @@ -0,0 +1,104 @@ +Tutorial +-------- + +Toda variável em JavaScript é programada para que, sempre que um operador seja usado entre duas variáveis, algum tipo de resultado seja devolvido. + +### Operador de Adição + +O operador `+` (adição) é usado tanto para somar números quanto para concatenar strings. + +Por exemplo, somar duas variáveis é fácil: + + var a = 1; + var b = 2; + var c = a + b; // c recebeu 3 + +O operador de adição é usado para concatenar strings e números entre si: + + var nome = "Gabriel"; + console.log("Olá, " + nome + "!"); + + console.log("O sentido da vida é " + 42); + console.log(42 + " é o sentido da vida"); + +O operador de adição tem comportamentos diferentes quando se soma operandos de tipos primitivos diferentes. Como o tipo primitivo "padrão" é o String, quando se tenta somá-lo a um Number, a própria linguagem converte o Number para String antes do processo. + + console.log(1 + "1"); +>retorna "11" + +### Operador de Atribuição + +O operador de atribuição padrão é o "=", deve-se lê-lo como "recebe", não como "igual". Ele atribui valores e, por consequência, tipos às variáveis. Já o estamos usando há muito tempo, então sem maiores exemplos. + +### Operadores Matemáticos + +Para subtrair, multiplicar ou dividir dois números, usa-se os sinais de menos (`-`), asterisco (`*`) e barra (`/`), respectivamente. + + console.log(3 - 5); // retorna -2 + console.log(3 * 5); // retorna 15 + console.log(3 / 5); // retorna 0.6 + +O JavaScript também oferece o operador de módulo (`%`), que retorna o **resto** de uma operação de divisão. É muito usado para determinar, por exemplo, se um número é par. + + console.log(5 % 3); +>retorna 2 + +O JavaScript também suporta a fusão entre o operador de atribuição e os aritméticos, para que uma variável receba o valor de si própria após uma operação com outra. Isto é, em vez de digitar `meuNumber = meuNumber / 2`, dá para digitar `meuNumber /= 2`. Veja a lista dos operadores combinados: + +* `+=` +* `-=` +* `*=` +* `/=` +* `%=` + +### Funções Matemáticas Avançadas + +Finalizando, o JavaScript também possui o módulo "`Math`", que contém um monte de operações mais complexas, dentre elas podemos citar: + +* `Math.abs` calcula o valor absoluto de um número. +* `Math.exp` calcula __e__ elevado a um número. +* `Math.pow(x,y)` calcula o resultado de __x__ elevado à __y__ ª potência. +* `Math.floor` remove a parte fracionária de um número. +* `Math.random()` retornará um número aleatório `x`, considerando 0<=x<1. + +Exercise +-------- + +Neste exercício, você fará o seguinte: + +1. Conecte a string `firstName` à `lastName` para criar a variável `fullName`, mas ponha um espaço (`" "`) entre ambas. +2. Multiplique a variável `myNumber` por 2 e atribua esse resultado à `meaningOfLife`. + +Tutorial Code +------------- + +var firstName = "John"; +var lastName = "Smith"; +var myNumber = 21; + +// TODO: change the following code +var fullName = null; +var meaningOfLife = null; + +console.log("The name is " + fullName); +console.log("The meaning of life is " + meaningOfLife); + +Expected Output +--------------- + +The name is John Smith +The meaning of life is 42 + +Solution +-------- + +var firstName = "John"; +var lastName = "Smith"; +var myNumber = 21; + +// TODO: change the following code +var fullName = firstName + " " + lastName; +var meaningOfLife = myNumber * 2; + +console.log("The name is " + fullName); +console.log("The meaning of life is " + meaningOfLife); \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" index f69c17a07..86a84f759 100644 --- "a/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" +++ "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" @@ -1,104 +1,136 @@ Tutorial -------- -### The `if` statement +### A Estrutura `If` -The `if` statement allows us to check if an expression is equal to `true` or `false`, and execute different code according to the result. +A estrutura "`if`" permite que verifiquemos se uma expressão lógica equivale a "`true`" ou "`false`" e executemos diferentes blocos de código a depender da conclusão obtida. -For example, if we want to ask the user whether his name is "John", we can use the `confirm` function. +Se quisermos perguntar se o nome do usuário é "Davi", podemos usar o retorno da função `confirmar`. - if (confirm("Are you John Smith?")) - { - console.log("Hello John, how are you?"); + if (confirmar("Você é o Davi?")) { + console.log("Olá, Davi! Como anda você?"); } else { - console.log("Then what is your name?"); + console.log("Então, qual o seu nome?"); } -It is also possible to omit the `else` keyword if we only want to execute a block of code only if a certain expression is true. +Também podemos suprimir a palavra reservada "`else`" se *apenas* quisermos executar um bloco de código no caso afirmativo de uma expressão lógica. -To evaluate whether two variables are equal, the `==` operator is used. There is also another equality operator in JavaScript, `===`, which does a strict comparison. This means that it will be true only if the two things you are comparing are the same type as well as same content. +### Operadores de Igualdade e Inequidade - console.log("1" == 1); // true - console.log("1" === 1); // false +Para avaliar a igualdade entre duas variáveis, o operador `==` entra em jogo. Há, também, outro operador de igualdade no JavaScript: o `===`, que faz uma comparação rigorosa. Ele apenas retorna "`true`" no caso de as duas variáveis comparadas não diferirem nem em valor nem em tipo primitivo. -For example: + console.log("1" == 1); // verdadeiro + console.log("1" === 1); // falso - var myNumber = 42; - if (myNumber == 42) - { - console.log("The number is correct."); +Aplicando: + + var meuNumber = 42; + if (meuNumber == 42) { + console.log("O número está correto."); } -Inequality operators can also be used to evaluate expressions. For example: +Operadores de inequidade também podem ser usados para avaliar expressões. Por exemplo: - var foo = 1; - var bar = 2; + var fulano = 1; + var sicrano = 2; - if (foo < bar) - { - console.log("foo is smaller than bar."); + if (fulano < sicrano) { + console.log("Fulano é menor que Sicrano."); + } else { + console.log("Fulano é maior que Sicrano."); } -Two or more expressions can be evaluated together using logical operators to check if two expressions evaluate to `true` together, or at least one of them. To check if two expressions both evaluate to `true`, use the AND operator `&&`. To check if at least one of the expressions evaluate to `true`, use the OR operator `||`. +Duas ou mais expressões lógicas podem ser avaliadas juntas usando operadores lógicos para verificar se ambas (ou ao menos uma das, ou nenhuma das) expressões equivalem a "`true`" ao mesmo tempo. + +Para verificar **se duas operações retornam "`true`" simultaneamente**, use o operador "AND", determinado por "`&&`". - var foo = 1; - var bar = 2; - var moo = 3; +Para verificar **se ao menos uma delas retorna "`true`"**, use o operador "OR", determinado por "`||`". - if (foo < bar && moo > bar) - { - console.log("foo is smaller than bar AND moo is larger than bar."); + var fulano = 1; + var sicrano = 2; + var beltrano = 3; + + if (fulano < sicrano && beltrano > sicrano) { + console.log("Fulano é menor que Sicrano E Beltrano é maior que Sicrano."); } - if (foo < bar || moo > bar) - { - console.log("foo is smaller than bar OR moo is larger than bar."); + if (fulano < sicrano || beltrano > sicrano) { + console.log("Fulano é menor que Sicrano OU Beltrano é maior que Sicrano."); } -The NOT operator `!` can also be used likewise: +O operador de negação, chamado "NOT", determinado por "`!`", pode ser usado da mesma forma: - var notTrue = false; - if (!notTrue) - { - console.log("not not true is true!"); + var entendeuNada = true; + if (!entendeuNada) { + console.log("'Não entendeu nada', logo, entendeu algo!"); } -### The `switch` statement +### A Estrutura `Switch` + +A estrutura "`switch`" assemelha-se à de mesmo nome da linguagem de programação C, mas também suporta strings. A estrutura "`switch`" é usada para selecionar entre mais de duas opções diferentes, podendo executar as mesmas instruções para mais de uma opção se necessário. Veja: -The `switch` statement is similar to the `switch` statement from the C programming language, but also supports strings. The `switch` statement is used to select between more than two different options, and to run the same code for more than one option. For example: + var patente = "Marechal"; + var periodo = "manhã" - var rank = "Commander"; - switch(rank) - { - case "Private": - case "Sergeant": - console.log("You are not authorized."); + var verificaManha = periodo == 'manhã' + + switch(patente) { + + case "Cadete": + case "Soldado": + case "Taifeiro": + case "Cabo": + console.log(`Autorização negada para ${patente}s.`); + break; - case "Commander": - console.log("Hello commander! what can I do for you today?"); + + case "Sargento": + case "Tenente": + case "Capitão": + case "Major": + case "Coronel": + case "General": + if (verificaManha) { + console.log(`Bom dia, ${patente}! Como posso ajudá-lo?`); + } else { + console.log(`Boa ${periodo}, ${patente}! Como posso ajudá-lo?`); + } + break; - case "Captain": - console.log("Hello captain! I will do anything you wish."); + + case "Marechal": + if (verificaManha) { + console.log(`Bom dia, ${patente}! Estou às suas ordens!`); + } else { + console.log(`Boa ${periodo}, ${patente}! Estou às suas ordens!`); + } + break; + default: - console.log("I don't know what your rank is."); + if (verificaManha) { + console.log("Bom dia, mas eu nem sei quem você é."); + } else { + console.log("Boa ${periodo}, mas eu nem sei quem você é."); + } + break; } +>retorna "Bom dia, Marechal! Estou às suas ordens!" -In this example, "Private" and "Sergeant" both trigger the first sentence, "Commander" triggers the second sentence and "Captain" triggers the third. If an unknown rank was evaulated, the `default` keyword defines the action for this case (optional). We must use the `break` statement between every code block to avoid the `switch` from executing the next code block. +Nesse exemplo, "Cadete", "Soldado", "Taifeiro" e "Cabo" ativam a primeira sentença, enquanto "Sargento", "Tenente", "Capitão", "Major", "Coronel" e "General" ativam a segunda e apenas "Marechal" ativa a terceira. Se uma patente desconhecida for informada, a palavra reservada "`default`" ativa o fluxo a ser seguido nesse caso, mas sua existência é opcional. Precisamos usar a instrução "`break`" entre os blocos de código para evitar que a estrutura "`switch`" execute os próximos. -Using the `switch` statement in general is not recommended, because forgetting the `break` keyword causes very confusing results. +Em geral, não se recomenda muito o uso de "`switch`", já que esquecer a instrução "`break`" pode causar situações muitíssimo bizarras. Exercise -------- -In this exercise, you must construct an `if` inside the `checkNumber` function statement that checks if the number `myNumber` is equal to 42. If that is the case, the function must print out using `console.log` the word `correct`. If myNumber is not equal to 42, the function must print out using `console.log` the word `incorrect`. You can name the argument passed to a function by supplying the name inside the parentheses. For example, `function myFunction(myArgument)`. +Neste exercício, você precisa construir uma estrutura de verificação dentro da função `checkNumber` que verifique se o parâmetro `myNumber` é igual a 42. Em caso afirmativo, a função deve exibir a palavra `correct` via `console.log`. Em caso negativo, a função precisa exibir a palavra `incorrect` da mesma forma. Lembrete: você pode dar nome ao parâmetro recebido pela função informando-o dentro dos parênteses. Por exemplo: `function myFunction(myParameter)`. Tutorial Code ------------- -function checkNumber() -{ +function checkNumber() { // TODO: write your code here } @@ -116,19 +148,15 @@ correct Solution -------- -function checkNumber(myNumber) -{ +function checkNumber(myNumber) { // TODO: write your code here - if (myNumber===42) - { + if (myNumber===42) { console.log("correct"); - } - else - { + } else { console.log("incorrect"); } } checkNumber(3); checkNumber(7); -checkNumber(42); +checkNumber(42); \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" index c6024cf0a..ac7f079b9 100644 --- "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -7,7 +7,7 @@ Esses nomes quaisquer podem ser regidos pelas lógicas "camelCase" (como em nome Uma restrição para a nomenclatura das variáveis é que elas não podem assumir palavras reservadas da linguagem. E já que estamos no Brasil, **lembrem-se**, espaços e acentos, em computação, só se usa dentro de variáveis que guardem texto, ou a chance de erros é tremenda! -E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. +E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. Outra oservação: o JavaScript não exige ponto e vírgula a cada fim de linha, apenas estou seguindo o padrão que o criador do repositório determinou em suas lições. Variáveis podem ser declaradas pelas palavras reservadas "`const`", "`let`" e "`var`". "`const`" cria uma variável constante, o que significa que o valor (e, por consequência, o tipo) daquela variável não mudará de forma alguma, `let` cria uma variável local (visível pelo escopo da função) e `var` cria uma variável global (visível pelo código todo). diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 4a67315b4..0325cb00f 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -10,13 +10,13 @@ A construção do learn-js.org ainda está em andamento... se você quiser contr Apesar de os tutoriais e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto no módulo "Olá, Mundo!"). -*Por fim, este [humilde tradutor](https://github.com/ntn-ss) te deseja muito sucesso e vagas na jornada.* :alien: +*Por fim, este [humilde tradutor](https://github.com/ntn-ss) te deseja muito sucesso e vagas na jornada...* :alien: ### Começando de Baixo - "[[Olá, Mundo!]]" - [[Variáveis e Tipos]] -- [[Operadores Aritméticos]] +- [[Operadores Gerais]] - [[Operadores Lógicos]] - [[Funções]] - [[Funções Seta]] From eb7f7fa717bb6aeb43d4f7855d137a5292855a02 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:02:13 -0300 Subject: [PATCH 09/20] =?UTF-8?q?Estruturas=20de=20Repeti=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Estruturas de Repeti\303\247\303\243o.md" | 130 ++++++++++-------- tutorials/learn-js.org/pt/Welcome.md | 6 +- 2 files changed, 76 insertions(+), 60 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" index a4c0049df..24ccc33e6 100644 --- "a/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Estruturas de Repeti\303\247\303\243o.md" @@ -1,96 +1,113 @@ Tutorial -------- -### The for statement +### A Estrutura "For" -JavaScript has two methods for running the same code several times. It is mainly used for iterating over arrays or objects. Let's see an example: +O JavaScript tem dois métodos base para rodar o mesmo código N vezes. Eles costumam ser usados para iterar posições em vetores ou atributos em objetos. Vejamos o exemplo: var i; - for (i = 0; i < 3; i = i + 1) - { + for (i = 0; i < 3; i = i + 1) { console.log(i); } -This will print out the following: +
+Este será o retorno: 0 1 2 +
-The `for` statement in JavaScript has the same syntax as in Java and C. It has three parts: +A estrutura "`for`" do JavaScript tem a mesma sintaxe que no Java e no C. Ela tem três partes: -1. __Initialization__ - Initializes the iterator variable `i`. In this example, we initialize `i` to 0. -2. __Condition__ - As long as the condition is met, the loop continues to execute. In this example, we check that `i` is less than 3. -3. __Increment__ - A directive which increments the iterator. In our case, we increment it by 1 on every loop. +1. **Inicialização** - Inicializa a variável iteradora, convencionada "`i`". No exemplo, inicializamos `i` como 0. +2. **Condição** - Enquanto a condição for verdadeira, o laço continuará a executar. No exemplo, verificamos se `i` é menor que 3. +3. **Instrução** - Fluxo a ser executado a cada iteração. No nosso caso, aumentamos o valor recebido por `i` a cada ciclo pois, se nada fosse feito, a condição seria verdadeira eternamente e nossa máquina travaria. -We can also write a shorter notation for the statement by inserting the variable definition inside the `for` loop and incrementing using the `++` operator. +Podemos encurtar um pouco a sintaxe da estrutura "`for`" usando, na parte da Instrução, a fusão dos operadores aritméticos e de atribuição vistos anteriormente, ficando `i += 1`. Ou encurtar ainda mais toda a estrutura "`for`" inicializando nosso contador já dentro dela e usando o operador `++`. - for (var i = 0; i < 3; i++) - { + for (var i = 0; i < 3; i++) { console.log(i); } +>mesmíssimo retorno -To iterate over an array and print out all of its members, we usually use the `for` statement. Here's an example: +Como mencionado mais acima, é muito comum usar a estrutura `"for"` para percorrer vetores e mostrar seus elementos. Exemplificando: - var myArray = ["A", "B", "C"]; - for (var i = 0; i < myArray.length; i++) - { - console.log("The member of myArray in index " + i + " is " + myArray[i]); + var meuVetor = ["A", "B", "C"]; + for (var i = 0; i < meuVetor.length; i++) { + console.log(`Ocupando o índice ${i} do meuVetor, temos ${meuVetor[i]}.`); } +
+Receberemos todo o conteúdo do vetor: -This prints out the contents of the array: + Ocupando o índice 0 do meuVetor, temos A. + Ocupando o índice 1 do meuVetor, temos B. + Ocupando o índice 2 do meuVetor, temos C. +
- The member of myArray in index 0 is A - The member of myArray in index 1 is B - The member of myArray in index 2 is C +Perceba que usamos a propriedade "`length`" do tipo Array, que retorna o número de posições ocupadas por membros. Assim, sabemos exatamente quando parar de executar o laço "`for`". -Notice that we used the `length` property of an array, which returns the number of members in the array, so we know when to stop iterating. +### A Estrutura "While" -### The while statement +A estrutura "`while`" é uma versão simplificada do "`for`" que verifica se uma expressão retorna "`true`" e executa enquanto assim o permanecer. -The `while` statement is a more simple version of the `for` statement which checks if an expression evaluates to `true` and runs as long as it says `true`. +Por exemplo: -For example: - - var i = 99; - while (i > 0) - { - console.log(i + " bottles of beer on the wall"); - i -= 1; + var i = 100; + while (i > 0) { + if (i == 2) { + console.log(`${i} pencas de banana na parede. Se uma das pencas amassar, é ${i-1} penca de banana na parede.`); + i -= 1; + } else if (i == 1) { + console.log(`${i} penca de banana na parede. Se essa penca amassar, acabaram as pencas de banana na parede.`); + i -= 1; + } else { + console.log(`${i} pencas de banana na parede. Se uma das pencas amassar, são ${i-1} pencas de banana na parede.`); + i -= 1; + } } -### break and continue statements - -The `break` statement allows to stop the execution of a loop. For example, we can create a loop that loops forever using `while(true)` and use the `break` statement to break inside the loop instead by checking that a certain condition was met. - - var i = 99; - while (true) - { - console.log(i + " bottles of beer on the wall"); - i -= 1; - if (i == 0) - { +### As Palavras Reservadas "Break" e "Continue" + +A palavra reservada "`break`" interrompe a execução do laço imediatamente. Caso tenhamos criado uma estrutura que repita eternamente com "`while(true)`", podemos usar a palavra reservada "`break`" dentro da própria instrução em vez de checar se uma certa condição é verdadeira. + + var i = 100; + while (i > 0) { + + if (i == 2) { + console.log(`${i} pencas de banana na parede. Se uma das pencas amassar, é ${i-1} penca de banana na parede.`); + i -= 1; + + } if (i == 1) { + console.log(`${i} penca de banana na parede. Se essa penca amassar, acabaram as pencas de banana na parede.`); + i -= 1; + + } if (i == 0) { break; + + } else { + console.log(`${i} pencas de banana na parede. Se uma das pencas amassar, são ${i-1} pencas de banana na parede.`); + i -= 1; } } -The `continue` statement skips the rest of the loop and jumps back to the beginning of the loop. For example, if we would want to print only odd numbers using a `for` statement, we can do the following: +A palavra reservada "`continue`" pula o resto do laço e executa a próxima instrução no nível superior. Por exemplo, se quisermos exibir apenas os números ímpares até 100 com uma estrutura "`for`", basta fazer isto: - for (var i = 0; i < 100; i++) - { - // check that the number is even - if (i % 2 == 0) - { - continue; + for (var i = 0; i < 100; i++) { + + // checa se o número é par + if (i % 2 == 0) { + continue; } - // if we got here, then i is odd. - console.log(i + " is an odd number."); + + // se a estrutura chegou a este ponto, i é ímpar. + console.log(i + " é um número ímpar."); } Exercise -------- -In this exercise, you must write a for loop that iterates on the myArray variable and prints out all of its members. +Neste exercício, você precisa escrever um laço `"for"` que itere pelo vetor "`myArray`" e exiba a variável que ocupa cada posição. Tutorial Code ------------- @@ -98,8 +115,8 @@ Tutorial Code var myArray = ["What is the meaning of life?", "The meaning of life is", 42]; // TODO: modify this code -for () -{ +for () { + } @@ -116,7 +133,6 @@ Solution var myArray = ["What is the meaning of life?", "The meaning of life is", 42]; //TODO: modify this code -for (var i = 0; i Date: Thu, 1 Feb 2024 10:07:38 -0300 Subject: [PATCH 10/20] Populando --- tutorials/learn-js.org/pt/Async e Await.md | 102 +++++++++++++++++++++ tutorials/learn-js.org/pt/Caixas Pop-up.md | 30 ++++++ 2 files changed, 132 insertions(+) diff --git a/tutorials/learn-js.org/pt/Async e Await.md b/tutorials/learn-js.org/pt/Async e Await.md index e69de29bb..a16e9ba32 100644 --- a/tutorials/learn-js.org/pt/Async e Await.md +++ b/tutorials/learn-js.org/pt/Async e Await.md @@ -0,0 +1,102 @@ +Tutorial +-------- + +The `async` and `await` keywords in JavaScript are used to make asynchronous programming easy, +by introducing something called **coroutines**. A coroutine is a function which can pause +its execution and return control to the main loop until some event occurs. It is an alternative +approach for using callback functions, which makes it easier to write, understand and maintain. + +### The `await` keyword + +The `await` keyword is a special command which tells JavaScript to stop the execution of the +current function until a Promise resolves, and then return the promise's value. It can be +seen as an endless loop which checks if the promise has been resolved, and returns the value +of the resolved promise when it does. + +The `await` keyword only works inside `async` functions (which are coroutines, as explained before). +The tricky part about `async` functions is that they return a Promise, instead of a value. This +means that every time we need to run an `async` function, we need to `await` on it if we want +to get the return value. + +Let's revisit the example of `sumAsync` from the Promises tutorial, but with using the sleep +function instead of setTimeout, so we can implement `sumAsync` using `await` later on. +The sleep function will return a `Promise` which resolves after `ms` milliseconds, and uses +setTimeout to work. + + .exec + function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + function sumAsync(x, y) { + return new Promise((resolve, reject) => { + sleep(500).then(() => { + resolve(x + y); + }); + }); + } + + // let's use the function now + sumAsync(5, 7).then((result) => { + console.log("The result of the addition is:", result); + }); + +We can make our code `sumAsync` much nicer by simply using `await` on the `sleep` function and then +returning the result. + + .exec + function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + async function sumAsync(x, y) { + // this code waits here for 500 milliseconds + await sleep(500); + // done waiting. let's calculate and return the value + return x+y; + } + + // sumAsync is an async function, which means it returns a Promise. + sumAsync(5, 7).then((result) => { + console.log("The result of the addition is:", result); + }); + +Since `sumAsync` is a an `async` function, it **implicitly** returns a `Promise`, just like +the previous example which **explicitly** returns a `Promise`. The two `sumAsync` functions +are completely identical in their functionality, but the one which is defined using `async` +is much easier to understand! + +Exercise +-------- + +Write an async function which waits 500 milliseconds and then returns the uppercase +of a given string. Use the `sleep` function provided. + +Tutorial Code +------------- + function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + async function uppercaseString(s) { + // your code goes here + } + + uppercaseString("edward").then(console.log); + +Expected Output +--------------- +EDWARD + +Solution +-------- + function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + async function uppercaseString(s) { + await sleep(500); + return s.toUpperCase(); + } + + uppercaseString("edward").then(console.log); diff --git a/tutorials/learn-js.org/pt/Caixas Pop-up.md b/tutorials/learn-js.org/pt/Caixas Pop-up.md index e69de29bb..e2b05a959 100644 --- a/tutorials/learn-js.org/pt/Caixas Pop-up.md +++ b/tutorials/learn-js.org/pt/Caixas Pop-up.md @@ -0,0 +1,30 @@ +Tutorial +-------- +There are three types of pop-up boxes in javascript: confirm, alert, and prompt. To use any of them, type + + + confirm("Hi!"); + prompt("Bye!"); + alert("Hello"); + +Confirm boxes will return "true" if ok is selected, and return "false" if cancel is selected. Alert boxes will not return anything. Prompt boxes will return whatever is in the text box. Note: prompt boxes also have an optional second parameter, which is the text that will already be in the text box. + +Exercise +-------- +Make a variable ```test``` set it equal to a prompt box, and type "Hi!" in it (without the quotes) when it pops up. Note: your pop-up blocker must not be enabled. + +Tutorial Code +------------- +// Make your prompt box below! + +console.log(test); + +Expected Output +--------------- +Hi! + +Solution +-------- +// Make your prompt box below! +var test = prompt("Type Hi!"); +console.log(test); From 492da69e20a387eeb6dcec2ec27e46773c535e03 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 12:12:23 -0300 Subject: [PATCH 11/20] Objetos --- tutorials/learn-js.org/pt/Objetos.md | 71 +++++++++---------- .../pt/Vari\303\241veis e Tipos.md" | 14 ++-- tutorials/learn-js.org/pt/Vetores.md | 2 +- tutorials/learn-js.org/pt/Welcome.md | 4 +- 4 files changed, 45 insertions(+), 46 deletions(-) diff --git a/tutorials/learn-js.org/pt/Objetos.md b/tutorials/learn-js.org/pt/Objetos.md index 8dfbaf93c..21b8c9e42 100644 --- a/tutorials/learn-js.org/pt/Objetos.md +++ b/tutorials/learn-js.org/pt/Objetos.md @@ -1,63 +1,60 @@ Tutorial -------- -JavaScript is a functional language, and for object oriented programming it uses both objects and functions, but objects are usually used as a data structure, similar to a dictionary in Python or a map in Java. In this tutorial, we will learn how to use objects as a data structure. The advanced tutorials explain more about object oriented JavaScript. +O JavaScript é uma linguagem funcional, mas pode atuar no mundo da programação orientada a objetos por meio de classes que instanciem objetos com base em modelos ou objetos que independam de classes, com suas próprias propriedades e métodos. Pense num objeto como uma "gaveta" que guarde variáveis em ordem, pois eles podem ser acessados a qualquer momento para recuperá-las. Eles também costumam ser usados como estruturas de dados, tal qual um "dicionário" no Python ou um "mapa" no Java. Nesta lição, aprenderemos a usar um objeto como estrutura de dados, um conhecimento vital para todas as trilhas que se pode fazer numa carreira de desenvolvimento de software, afinal toda a internet se baseia em requisições HTTP assíncronas e nos objetos recuperados (ou não) por elas num determinado momento. +Nos tutoriais avançados, abordaremos melhor o JavaScript assíncrono e orientado a objetos. -To initialize an object, use curly braces: +Para declarar um objeto, usa-se chaves: - var emptyObject = {}; - var personObject = { - firstName : "John", - lastName : "Smith" + var objetoVazio = {}; + var objetoPessoa = { + primeiroNome: "Antônio", + sobrenome: "Gabriel" } -### Member addressing +### Acessando Propriedades -Members of objects can be addressed using the brackets operator `[]`, very much like arrays, but just like many -other object oriented languages, the period `.` operator can also be used. They are very similar, except for -the fact that brackets return a member by using a string, in contrast to the period operator, -which requires the member to be a simple word (the word should not contain spaces, -start with a number or use illegal characters). +Pode-se acessar as propriedades dos objetos por meio dos colchetes (`[]`), tal qual se faria com vetores, mas como em muitas outras linguagens orientadas a objetos, o operador ponto final (`.`) também pode ser usado. Eles são bem parecidos, com a ressalva de os colchetes só poderem acessar uma propriedade passando uma string como argumento, contrastando com o ponto, que apenas exige uma palavra (desde que não contenha espaços ou comece com um número). -For example, we can continue to fill the person object with more details: +Por exemplo, podemos povoar o objeto "objetoPessoa" com mais propriedades: - var personObject = { - firstName : "John", - lastName : "Smith" + var objetoPessoa = { + primeiroNome: "Antônio", + sobrenome: "Gabriel" } - personObject.age = 23; - personObject["salary"] = 14000; + objetoPessoa.idade = 23; + objetoPessoa["salario"] = 50000; +>as duas últimas linhas fazem, essencialmente, a mesma coisa. -### Iteration +### Iteração -Iterating over members of a dictionary is not a trivial task, since iterating over objects can also yield members who don't actually belong to an object. Therefore, we must use the `hasOwnProperty` method to check that the member in fact belongs to the object. +Iterar pelas propriedades de um objeto não é uma tarefa fácil, já que fazer isso também pode afetar propriedades que sequer pertençam a ele. Portanto, devemos usar o método "`hasOwnProperty`" para verificar se a propriedade de fato está contida no objeto. - for (var member in personObject) - { - if (personObject.hasOwnProperty(member)) - { - console.log("the member " + member + " of personObject is " + personObject[member]) + for (var propriedade in objetoPessoa) { + if (objetoPessoa.hasOwnProperty(propriedade)) { + console.log(`A propriedade "${propriedade}" do objeto "pessoa" guarda "${objetoPessoa[propriedade]}".`) } } +
+E o retorno dessa brincadeira será este: -This will eventually print out + A propriedade "primeiroNome" do objetoPessoa guarda "Antônio". + A propriedade "sobrenome" do objetoPessoa guarda "Gabriel". + A propriedade "idade" do objetoPessoa guarda "23". + A propriedade "salario" do objetoPessoa guarda "50000". +
- the member firstName of personObject is John - the member lastName of personObject is Smith - the member age of personObject is 23 - the member salary of personObject is 14000 - -Note that methods of objects in JavaScript have a fixed order, like arrays. +Perceba que as propriedades dos objetos em JavaScript têm uma ordem fixa, tal qual os vetores, até porque vetores são um objeto de tipo especial. Exercise -------- -You must define an object called `person` with the following members: +Neste exercício, você precisará definir um objeto "`person`" com as seguintes propriedades: -1. The member `firstName` of the person is "Jack" -2. The member `lastName` of the person is "Smith" -3. The member `age` of the person is 19 -4. The member `employed` of the person is `true` +1. A propriedade `firstName` da pessoa será "Jack" +2. A propriedade `lastName` da pessoa será "Smith" +3. A propriedade `age` da pessoa será 19 +4. A propriedade `employed` da pessoa será `true` Tutorial Code ------------- diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" index ac7f079b9..9205678af 100644 --- "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -13,9 +13,9 @@ Variáveis podem ser declaradas pelas palavras reservadas "`const`", "`let`" e " Temos um grande acervo de tipos primitivos para usar com as variáveis dos nossos códigos: - const meuNumber = 3; // um valor numérico - const minhaString = "Olá, Mundo!" // um valor alfanumérico - const meuBoolean = true; // um valor booleano + const meuNumber = 3; // Number: um valor numérico + const minhaString = "Olá, Mundo!" // String: um valor alfanumérico + const meuBoolean = true; // Boolean: um valor booleano Algumas observações sobre os tipos das variáveis em JavaScript: @@ -23,10 +23,12 @@ Algumas observações sobre os tipos das variáveis em JavaScript: * As variáveis do tipo Boolean só podem apontar para um destes valores: "`true`" ou "`false`". * O tipo String pode ser constituído de números ou valores puramente textuais. No entanto, o Number não pode guardar valores textuais de forma alguma. E, claro, se uma string guardar um número, esse número não poderá ser usado em operações aritméticas. -Há dois tipos mais avançados em JavaScript: Vetores e Objetos. Estudaremos ambos em tutoriais futuros. +Há dois tipos primitivos mais avançados em JavaScript: Function e Object. Estudaremos ambos em tutoriais futuros. - const meuArray = []; // um vetor - const meuObject = {}; // um objeto + function minhaFuncao() {} // uma função vazia + const meuObject = {}; // um objeto vazio + + const meuArray = []; // um vetor, que é apenas objeto especial, vazio Fora isso, há dois tipos especiais: o Undefined e o Null. diff --git a/tutorials/learn-js.org/pt/Vetores.md b/tutorials/learn-js.org/pt/Vetores.md index 1e6dda56a..70ff46a04 100644 --- a/tutorials/learn-js.org/pt/Vetores.md +++ b/tutorials/learn-js.org/pt/Vetores.md @@ -1,7 +1,7 @@ Tutorial -------- -O JavaScript te deixa guardar uma lista de variáveis dentro do tipo Array. +O JavaScript te deixa guardar uma lista de variáveis dentro de um objeto do tipo Array. Isso aí: no JavaScript, o mesmo vetor pode funcionar como as estruturas de dados "lista", "pilha" ou "fila". Para definir um vetor, ou você usa o operador colchetes ou instancia um objeto do tipo Array: diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 60e7c6edc..70c5abcf1 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -6,9 +6,9 @@ Sendo você um desenvolvedor experiente ou não, o site foi pensado a todos os q É só se livrar de distrações, clicar no capítulo pelo qual você deseja começar, ler com atenção e fazer os exercícios. Boa sorte! -A construção do learn-js.org ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. +A construção do site ainda está em andamento... se você quiser contribuir com os tutoriais, por favor, clique em `Tutoriais de Contribuição` ali embaixo. -Apesar de as lições e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (exceto no módulo "Olá, Mundo!"). +Apesar de as lições e os códigos demonstrativos estarem traduzidos, jargões mais específicos de programação e desenvolvimento de software serão mantidos em inglês, afinal esta é uma carreira amplamente globalizada e o aprendizado desse idioma é imprescindível para se destacar: por isso mesmo **todas as soluções cobrarão códigos em inglês** (menos no módulo "Olá, Mundo!"). *Por fim, este [humilde tradutor](https://github.com/ntn-ss) te deseja muito sucesso e vagas na jornada...* :alien: From 5fe2e92dd0be687fa6946d6fee96e6f66c933001 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 12:47:22 -0300 Subject: [PATCH 12/20] =?UTF-8?q?Finalizando=20o=20B=C3=A1sico?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tutorials/learn-js.org/pt/Caixas Pop-up.md | 16 +++++++----- .../pt/Fun\303\247\303\265es Callback.md" | 26 +++++++++---------- .../learn-js.org/pt/Fun\303\247\303\265es.md" | 2 ++ 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/tutorials/learn-js.org/pt/Caixas Pop-up.md b/tutorials/learn-js.org/pt/Caixas Pop-up.md index e2b05a959..b566298c4 100644 --- a/tutorials/learn-js.org/pt/Caixas Pop-up.md +++ b/tutorials/learn-js.org/pt/Caixas Pop-up.md @@ -1,17 +1,21 @@ Tutorial -------- -There are three types of pop-up boxes in javascript: confirm, alert, and prompt. To use any of them, type +Dispomos de três tipos de caixas pop-up no JavaScript: "`alert`", "`confirm`" e "`prompt`". Para usar qualquer uma, basta chamá-las: - confirm("Hi!"); - prompt("Bye!"); - alert("Hello"); + alert("Olá."); + confirm("Você quer faturar uma grana?"); + prompt("Qual o seu nome?"); -Confirm boxes will return "true" if ok is selected, and return "false" if cancel is selected. Alert boxes will not return anything. Prompt boxes will return whatever is in the text box. Note: prompt boxes also have an optional second parameter, which is the text that will already be in the text box. +As caixas do tipo "`alert`" não retornam coisa alguma. +As caixas do tipo "`confirm`" retornarão "`true`" se o usuário clicar em "OK" e retornarão "`false`" se ele clicar em "Cancelar". +As caixas do tipo "`prompt`" retornarão qualquer coisa que o usuário escrever. + +Todas as caixas exibirão o argumento de seu chamamento ao usuário, no entanto as caixas do "`prompt`" têm um outro parâmetro opcional: o texto que já estará dentro da caixa por padrão. Exercise -------- -Make a variable ```test``` set it equal to a prompt box, and type "Hi!" in it (without the quotes) when it pops up. Note: your pop-up blocker must not be enabled. +Crie uma variável ```test```, defina-a como o retorno de uma caixa do tipo `prompt` e escreva "Hi!" nela (sem aspas) quando ela aparecer. A propósito: seu bloqueador de pop-ups precisa estar desativado. Tutorial Code ------------- diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Callback.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Callback.md" index b1d4044f0..47c28a2e5 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es Callback.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es Callback.md" @@ -1,36 +1,37 @@ Tutorial -------- -Callbacks in JavaScript are functions that are passed as arguments to other functions. This is a very important feature of asynchronous programming, and it enables the function that receives the callback to call our code when it finishes a long task, while allowing us to continue the execution of the code. +No JavaScript, chama-se "funções callback" aquelas que são passadas como argumentos a outras. Essa é uma funcionalidade muitíssimo importante da programação assíncrona, afinal permite que a função que receberá o callback execute nosso código e espere o fim de uma tarefa longa enquanto continuamos com a execução em paralelo. -For example: +>Adendo: uma função pode receber a si mesma como argumento em seu próprio corpo, ocasionando um fenômeno chamado "recursividade", mas não abordaremos isso aqui por ser um tanto complexo. + +Por exemplo: var callback = function() { - console.log("Done!"); + console.log("Terminei!"); } setTimeout(callback, 5000); -This code waits 5 seconds and prints out "Done!" when the 5 seconds are up. Note that this code will not work in the interpreter because it is not designed for handling callbacks. +Esse código espera 5 segundos (pois o segundo parâmetro de "`setTimeout`" é o tempo em milissegundos) e exibe `"Terminei!"` assim que esse tempo passa. Esse código não vai funcionar bem no compilador pois ele não foi feito para lidar com funções callback. -It is also possible to define callbacks as anonymous functions, like so: +Também podemos definir funções callback como anônimas, tipo assim: setTimeout(function() { - console.log("Done!"); + console.log("Terminei!"); }, 5000); -Like regular functions, callbacks can receive arguments and be executed more than once. +Como nas funções tradicionais, as funções callback podem receber parâmetros e ser executadas mais de uma vez, e é o que faremos no exercício desta lição. Exercise -------- -Define a function called `callback` which receives an argument and prints it out. +Defina uma função chamada "`callback`" que receberá um parâmetro e o exibirá. Após isso, execute a função "`useCallback`" passando a função recém-criada como argumento. Tutorial Code ------------- -function useCallback(callback) -{ +function useCallback(callback) { callback(1); callback(2); callback(3); @@ -50,8 +51,7 @@ Expected Output Solution -------- -function useCallback(callback) -{ +function useCallback(callback) { callback(1); callback(2); callback(3); @@ -63,4 +63,4 @@ function callback(sentence) { } // TODO: execute useCallback with the callback as the argument -useCallback(callback); +useCallback(callback); \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" index 9d4a63b9a..3c6d058bb 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" @@ -18,6 +18,8 @@ Para declarar uma função nomeada, usamos a palavra reservada "`function`" dest Nessa função, o parâmetro `nome` da função `cumprimentar` é usado no corpo dela própria para construir uma string que será retornada usando a palavra reservada "`return`". O argumento passado é a string `Nathan`, por isso o retorno acima. +Exato: na perspectiva da função e no interior dela, a variável chama-se "parâmetro", mas na perspectiva do chamamento, a variável chama-se "argumento". + Para definir uma função anônima, podemos usar esta sintaxe: var cumprimentar = function(nome) { From b891d31f8f6e30a85f659553b9a503d099ab565d Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 13:03:21 -0300 Subject: [PATCH 13/20] Fixed skipped lines --- tutorials/learn-js.org/en/Promises.md | 28 +++++++++------------------ 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/tutorials/learn-js.org/en/Promises.md b/tutorials/learn-js.org/en/Promises.md index ed3713fd5..28275777a 100644 --- a/tutorials/learn-js.org/en/Promises.md +++ b/tutorials/learn-js.org/en/Promises.md @@ -4,11 +4,9 @@ Promises are the basics of asynchronous programming in JavaScript, and are very ### What is Asynchronous Programming? -Asynchronous programming, or in short, async programming, is a method of programming which -enables different parts of code to run at changing times, instead of immediately. +Asynchronous programming, or in short, async programming, is a method of programming which enables different parts of code to run at changing times, instead of immediately. -This is mostly required when we want to fetch information from some remote server, and write -code which does something with what the server returned: +This is mostly required when we want to fetch information from some remote server, and write code which does something with what the server returned: function getServerStatus() { const result = fetch("/server/status"); @@ -17,13 +15,10 @@ code which does something with what the server returned: console.log("The status from the server is: ", result.ok); } -In many programming languages such as Python, this approach would work, because functions -are by default synchronous functions. +In many programming languages such as Python, this approach would work, because functions are by default synchronous functions. + +In JavaScript, most APIs which require waiting for a function to do something, are **asynchronous** by default which means that this code will not do what we think it will do, since the `fetch` function is asynchronous, and therefore will return something which is not exactly the result, but will _eventually_ be the result. -In JavaScript, most APIs which require waiting for a function to do something, -are **asynchronous** by default which means that this code will not -do what we think it will do, since the `fetch` function is asynchronous, and therefore will -return something which is not exactly the result, but will _eventually_ be the result. This "thing" which is returned from the `fetch` function is called a **Promise** in JavaScript. To make the code above work, we will need to write the function in the following manner: @@ -47,12 +42,10 @@ to use one of these two functions. 2. It can be waited on using the `then` method (and other similar methods), or the `await` statement. (The async/await statements have a separate tutorial). -An asynchronous function is defined by a function, which instead of returning the value -it was supposed to return, it returns a `Promise` object, which will eventually resolve and +An asynchronous function is defined by a function, which instead of returning the value it was supposed to return, it returns a `Promise` object, which will eventually resolve and give the user the answer. -For example, let's say that we would like to calculate the sum of two numbers, but by -writing a function which returns a `Promise` and not the value. +For example, let's say that we would like to calculate the sum of two numbers, but by writing a function which returns a `Promise` and not the value. .exec function sumAsync(x, y) { @@ -70,9 +63,7 @@ writing a function which returns a `Promise` and not the value. console.log("The result of the addition is:", result); }); -When can this be very useful? When the calculation needs to happen indirectly, for example -after waiting a while or when retrieving information from the server using the `fetch` -command for example. +When can this be very useful? When the calculation needs to happen indirectly, for example after waiting a while or when retrieving information from the server using the `fetch` command, for example. Let's modify the example to resolve the solution only after a half a second: @@ -100,8 +91,7 @@ Let's modify the example to resolve the solution only after a half a second: ### Rejecting promises -In a synchronous flow, if we want to tell the user that something went wrong so he can -catch an exception, we throw an exception using the `throw` argument. When using promises, +In a synchronous flow, if we want to tell the user that something went wrong so he can catch an exception, we throw an exception using the `throw` argument. When using promises, we need to trigger the `reject` function instead. Let's say we want to write the same function, but with a rejection if a value is negative: From b0f27e52e7f5f1b33d4c64fe4d22bf7003194566 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 14:00:09 -0300 Subject: [PATCH 14/20] Promessas --- .../learn-js.org/pt/Estruturas de Dados.md | 0 tutorials/learn-js.org/pt/Promessas.md | 142 +++++++++--------- tutorials/learn-js.org/pt/Welcome.md | 1 - 3 files changed, 67 insertions(+), 76 deletions(-) delete mode 100644 tutorials/learn-js.org/pt/Estruturas de Dados.md diff --git a/tutorials/learn-js.org/pt/Estruturas de Dados.md b/tutorials/learn-js.org/pt/Estruturas de Dados.md deleted file mode 100644 index e69de29bb..000000000 diff --git a/tutorials/learn-js.org/pt/Promessas.md b/tutorials/learn-js.org/pt/Promessas.md index ed3713fd5..6a67b75f2 100644 --- a/tutorials/learn-js.org/pt/Promessas.md +++ b/tutorials/learn-js.org/pt/Promessas.md @@ -1,139 +1,131 @@ Tutorial -------- -Promises are the basics of asynchronous programming in JavaScript, and are very important to master. +As promessas (`promises`) são essenciais à programação assíncrona com JavaScript, portanto aqueles que desejarem ingressar numa carreira de "Front-end" precisam estudá-las com o máximo de afinco. -### What is Asynchronous Programming? +### E o que que é "Programação Assíncrona"? -Asynchronous programming, or in short, async programming, is a method of programming which -enables different parts of code to run at changing times, instead of immediately. +A programação assíncrona é um "setor" da programação que permite que diferentes partes do código sejam executadas em períodos diferentes de tempo, em vez de ser tudo imediato, como é o padrão. -This is mostly required when we want to fetch information from some remote server, and write -code which does something with what the server returned: +Isso costuma ser necessário quando queremos obter uma informação de algum servidor remoto e integrar a resposta desse servidor à nossa própria aplicação: - function getServerStatus() { - const result = fetch("/server/status"); + function pegaStatusDoServidor() { + const resultado = fetch("/server/status"); - // THIS WILL NOT WORK! - console.log("The status from the server is: ", result.ok); + // ISTO NÃO FUNCIONARÁ! + console.log("O status do servidor é ", resultado.ok); } -In many programming languages such as Python, this approach would work, because functions -are by default synchronous functions. +Em várias linguagens de programação, como o Python, essa abordagem funcionaria, já que suas funções são síncronas por padrão. -In JavaScript, most APIs which require waiting for a function to do something, -are **asynchronous** by default which means that this code will not -do what we think it will do, since the `fetch` function is asynchronous, and therefore will -return something which is not exactly the result, but will _eventually_ be the result. -This "thing" which is returned from the `fetch` function is called a **Promise** in JavaScript. +Mas no JavaScript, várias APIs exigirão que uma função espere para poder fazer algo a fim de evitar sobrecarga dos recursos físicos, o que faz delas **assíncronas** por padrão. Resumindo, esse código não vai fazer o que a gente espera, pois já que a função "`fetch`" é assíncrona, ela retornará '**algo**' que não é exatamente a resposta final, mas que _eventualmente_ o será. +>Pense numa API como a "porta de entrada" para contatar uma aplicação X e obter dados dela: elas têm documentação independente (além de, às vezes, exigirem autenticação por "token" e/ou pagamento a fim de fazer manutenções de infraestrutura para serem usadas). -To make the code above work, we will need to write the function in the following manner: +Esse "algo" retornado da função "`fetch`" é o que se chama de "**Promise**" no JavaScript. - function getServerStatus() { - const result = fetch("/server/status"); +Para que o código mais acima funcionasse, devemos refatorar a função da seguinte forma: - result.then(function(status) { - console.log("The status from the server is: ", status.ok); + function pegaStatusDoServidor() { + const resultado = fetch("/server/status"); + + resultado.then(function(status) { + console.log("O status do servidor é ", status.ok); }); } -Notice that we used the `then` function here, which is one of the methods of a `Promise`. +Perceba que, desta vez, usamos a função "`then`", que é um dos métodos característicos de uma "`Promise`". + +### O Objeto "Promise" -### The Promise Object +Promise é um objeto nativo do JavaScript dotado de duas características: -A Promise is a native JavaScript object which has two traits: -1. It receives a single argument which is a function. This function needs to have two arguments, -a `resolve` function and a `reject` function. The code written inside the promise needs -to use one of these two functions. -2. It can be waited on using the `then` method (and other similar methods), or the `await` -statement. (The async/await statements have a separate tutorial). +1. Ele recebe apenas um argumento, que é uma função. Essa função precisa ter dois parâmetros: uma função "`resolve`" e uma função "`reject`". O código escrito dentro do corpo da promessa precisa usar ao menos uma dessas duas funções. +2. Ela pode ser aguardada usando o método "`then`" (ou similares) ou a palavra reservada "`await`". +>Para as palavras reservadas "*async*" e "*await*", fizemos um guia em particular. -An asynchronous function is defined by a function, which instead of returning the value -it was supposed to return, it returns a `Promise` object, which will eventually resolve and -give the user the answer. +Em suma, chamamos de função assíncrona toda aquela cujo retorno, em vez de ser o valor que se espera no primeiro momento, será um objeto `Promise` que eventualmente se tornará esse exato valor. -For example, let's say that we would like to calculate the sum of two numbers, but by -writing a function which returns a `Promise` and not the value. +Suponhamos que queremos calcular a soma de dois números, mas escrevendo uma função que retornará uma `Promise` em vez dessa soma. - .exec - function sumAsync(x, y) { + function somaAssincrona(x, y) { const p = new Promise((resolve, reject) => { - // this resolves the promise we just created with the output of x+y + + // isto conclui a promessa que recém-criamos retornando x + y resolve(x + y); }); - // This returns the promise, not the value + // já isto retorna a própria promessa em vez do valor esperado return p; } - // let's use the function now - sumAsync(5, 7).then((result) => { - console.log("The result of the addition is:", result); + // agora, abriremos a promessa (como uma caixa de presentes) + somaAssincrona(5, 7).then((resultado) => { + console.log(`O resultado da soma é ${resultado}.`); }); -When can this be very useful? When the calculation needs to happen indirectly, for example -after waiting a while or when retrieving information from the server using the `fetch` -command for example. +"Pra que isso serve"? É para quando o cálculo precisa acontecer indiretamente, como após esperar algum tempo ou após obter dados de um servidor remoto com a função "`fetch`". -Let's modify the example to resolve the solution only after a half a second: +Modifiquemos o exemplo para que a solução seja entregue após meio segundo: + + function somaAssincrona(x, y) { + console.log("1. A função 'somaAssincrona' é executada."); - .exec - function sumAsync(x, y) { - console.log("1. sumAsync is executed"); const p = new Promise((resolve, reject) => { - // run this in 500ms from now + + // isto rodará apenas daqui a 500 ms setTimeout(() => { - console.log("4. Resolving sumAsync's Promise with the result after 500ms"); + console.log("4. Concluindo a promessa 'p' da função 'somaAssincrona' com o resultado após 500 ms de espera."); + resolve(x + y); + }, 500); - // we don't need to return anything - console.log("2. sumAsync Promise is initialized"); + // retornos são desnecessários + console.log("2. A promessa 'p' da função 'somaAssincrona' é inicializada."); }); - console.log("3. sumAsync has returned the Promise"); + + console.log("3. A função 'somaAssincrona' prepara-se para retornar a promessa 'p' sem saber que fim ela vai ter."); return p; } - // let's use the function now - sumAsync(5, 7).then((result) => { - console.log("5. The result of the addition is:", result); + // agora, abriremos a promessa + somaAssincrona(5, 7).then((resultado) => { + console.log(`5. O resultado da adição é ${resultado}.`); }); +>exibe, além das outras linhas, "5. O resultado da adição é 12." -### Rejecting promises +### Rejeitando Promessas -In a synchronous flow, if we want to tell the user that something went wrong so he can -catch an exception, we throw an exception using the `throw` argument. When using promises, -we need to trigger the `reject` function instead. +Em um fluxo síncrono, se quisermos informar ao usuário que algo deu errado e disparar um erro a ser exibido, podemos ativar uma exceção por meio da função "`throw`". Mas no contexto assíncrono das promessas, a gente tem que ativar a função "`reject`". -Let's say we want to write the same function, but with a rejection if a value is negative: +Digamos que precisamos reescrever a função acima, mas com a promessa guardando uma rejeição formal em caso de recebimento de valor negativo. Teríamos isto: - .exec - function sumAsync(x, y) { + function somaAssincrona(x, y) { return new Promise((resolve, reject) => { - // run this in 500ms from now + // rode isto daqui a 500 ms setTimeout(() => { if (x < 0 || y < 0) { - reject("Negative values received"); + reject("Erro: valores negativos não são permitidos."); } else { resolve(x + y); } }, 500); - // we don't need to return anything + // sem retornos aqui }); } - sumAsync(-5, 7).then((result) => { - console.log("The result of the addition is:", result); - }).catch((error) => { - console.log("Error received:", error); + somaAssincrona(-5, 7).then((resultado) => { + console.log(`O resultado da adição é ${resultado}.`); + }).catch((erro) => { + console.log(`Erro: ${erro}`); }); +>exibe "O resultado da adição é 12." Exercise -------- -Write a function which receives a string, and returns a Promise. +Escreva uma função que receba uma string como parâmetro e retorne um objeto do tipo Promise. -The promise should resolve with the uppercase version of the string, but should reject -if the string is null. +A promessa deve dar "`resolve`" retornando a versão da string toda em letras maiúsculas, mas dar "`reject`" no caso de a string ser nula. Tutorial Code ------------- @@ -166,4 +158,4 @@ Solution upperCaseAsync("steve").then(console.log); upperCaseAsync(null).catch((x) => { console.log("No string received!"); - }); + }); \ No newline at end of file diff --git a/tutorials/learn-js.org/pt/Welcome.md b/tutorials/learn-js.org/pt/Welcome.md index 70c5abcf1..67bb9695e 100644 --- a/tutorials/learn-js.org/pt/Welcome.md +++ b/tutorials/learn-js.org/pt/Welcome.md @@ -35,7 +35,6 @@ Apesar de as lições e os códigos demonstrativos estarem traduzidos, jargões - [[Contexto de Função]] - [[Herança]] - [[Desestruturação]] -- [[Estruturas de Dados]] ### Quero Ajudar From 90e25e84f68f362eec7bda2380948b3ed84261e9 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 14:54:39 -0300 Subject: [PATCH 15/20] Fixing linebreaks --- tutorials/learn-js.org/en/Async and Await.md | 36 +++++++------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/tutorials/learn-js.org/en/Async and Await.md b/tutorials/learn-js.org/en/Async and Await.md index a16e9ba32..91262072d 100644 --- a/tutorials/learn-js.org/en/Async and Await.md +++ b/tutorials/learn-js.org/en/Async and Await.md @@ -1,27 +1,20 @@ Tutorial -------- -The `async` and `await` keywords in JavaScript are used to make asynchronous programming easy, -by introducing something called **coroutines**. A coroutine is a function which can pause -its execution and return control to the main loop until some event occurs. It is an alternative -approach for using callback functions, which makes it easier to write, understand and maintain. +The `async` and `await` keywords in JavaScript are used to make asynchronous programming easy, by introducing something called **coroutines**. +A coroutine is a function which can pause its execution and return control to the main loop until some event occurs. It is an alternative approach for using callback functions, which makes it easier to write, understand and maintain. ### The `await` keyword -The `await` keyword is a special command which tells JavaScript to stop the execution of the -current function until a Promise resolves, and then return the promise's value. It can be -seen as an endless loop which checks if the promise has been resolved, and returns the value -of the resolved promise when it does. +The `await` keyword is a special command which tells JavaScript to stop the execution of the current function until a Promise resolves, and then return the promise's value. +It can be seen as an endless loop which checks if the promise has been resolved, and returns the value of the resolved promise when it does. The `await` keyword only works inside `async` functions (which are coroutines, as explained before). -The tricky part about `async` functions is that they return a Promise, instead of a value. This -means that every time we need to run an `async` function, we need to `await` on it if we want -to get the return value. -Let's revisit the example of `sumAsync` from the Promises tutorial, but with using the sleep -function instead of setTimeout, so we can implement `sumAsync` using `await` later on. -The sleep function will return a `Promise` which resolves after `ms` milliseconds, and uses -setTimeout to work. +The tricky part about `async` functions is that they return a Promise, instead of a value. This means that every time we need to run an `async` function, we need to `await` on it if we want to get the return value. + +Let's revisit the example of `sumAsync` from the Promises tutorial, but with using the sleep function instead of setTimeout, so we can implement `sumAsync` using `await` later on. +The sleep function will return a `Promise` which resolves after `ms` milliseconds, and uses setTimeout to work. .exec function sleep(ms) { @@ -41,8 +34,7 @@ setTimeout to work. console.log("The result of the addition is:", result); }); -We can make our code `sumAsync` much nicer by simply using `await` on the `sleep` function and then -returning the result. +We can make our code `sumAsync` much nicer by simply using `await` on the `sleep` function and then returning the result. .exec function sleep(ms) { @@ -61,16 +53,14 @@ returning the result. console.log("The result of the addition is:", result); }); -Since `sumAsync` is a an `async` function, it **implicitly** returns a `Promise`, just like -the previous example which **explicitly** returns a `Promise`. The two `sumAsync` functions -are completely identical in their functionality, but the one which is defined using `async` -is much easier to understand! +Since `sumAsync` is a an `async` function, it **implicitly** returns a `Promise`, just like the previous example which **explicitly** returns a `Promise`. + +The two `sumAsync` functions are completely identical in their functionality, but the one which is defined using `async` is much easier to understand! Exercise -------- -Write an async function which waits 500 milliseconds and then returns the uppercase -of a given string. Use the `sleep` function provided. +Write an async function which waits 500 milliseconds and then returns the uppercase of a given string. Use the `sleep` function provided. Tutorial Code ------------- From d0833dafdf7ad4ee0f6b170d3b2bc4d13865df89 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 14:58:17 -0300 Subject: [PATCH 16/20] Async e Await --- tutorials/learn-js.org/pt/Async e Await.md | 72 ++++++++++------------ tutorials/learn-js.org/pt/Promessas.md | 14 +++-- 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/tutorials/learn-js.org/pt/Async e Await.md b/tutorials/learn-js.org/pt/Async e Await.md index a16e9ba32..da75b8d9d 100644 --- a/tutorials/learn-js.org/pt/Async e Await.md +++ b/tutorials/learn-js.org/pt/Async e Await.md @@ -1,76 +1,68 @@ Tutorial -------- -The `async` and `await` keywords in JavaScript are used to make asynchronous programming easy, -by introducing something called **coroutines**. A coroutine is a function which can pause -its execution and return control to the main loop until some event occurs. It is an alternative -approach for using callback functions, which makes it easier to write, understand and maintain. +Estas duas palavras reservadas do JavaScript, "`async`" e "`await`", facilitam um bocado a programação assíncrona, por serem a porta de entrada das chamadas **corrotinas**. -### The `await` keyword +Uma corrotina é uma função que pode pausar sua execução e passar o controle ao fluxo principal até que algum evento ocorra. É uma abordagem alternativa ao uso de funções callback que deixa o código mais fácil de escrever, ler e manter. -The `await` keyword is a special command which tells JavaScript to stop the execution of the -current function until a Promise resolves, and then return the promise's value. It can be -seen as an endless loop which checks if the promise has been resolved, and returns the value -of the resolved promise when it does. +### A Palavra Reservada "`await`" -The `await` keyword only works inside `async` functions (which are coroutines, as explained before). -The tricky part about `async` functions is that they return a Promise, instead of a value. This -means that every time we need to run an `async` function, we need to `await` on it if we want -to get the return value. +A palavra reservada "`await`" é um comando especial que diz ao JavaScript em que ponto da função atual deve parar até que o objeto de tipo Promise seja concluído, para só então retornar o valor dessa promessa. Pode-se pensar em um laço infinito que verifica se a promessa concluiu, retornando o valor obtido assim que possível. -Let's revisit the example of `sumAsync` from the Promises tutorial, but with using the sleep -function instead of setTimeout, so we can implement `sumAsync` using `await` later on. -The sleep function will return a `Promise` which resolves after `ms` milliseconds, and uses -setTimeout to work. +A palavra reservada "`await`" só funciona dentro de funções declaradas com "`async`" (que são corrotinas, como já explicado). + +O desafio das funções com "`async`" é que elas sempre retornam promessas em vez de valores. Quer dizer que sempre que formos executar uma função com "`async`", precisamos usar o "`await`" se quisermos fazer operações com o valor retornado. + +Revisitemos o exemplo da função `somaAssincrona` do tutorial de promessas, mas definindo a função `dormir` em vez de usando a "`setTimeout`", para que possamos implementar a função `somaAssincrona` usando o "`await`" depois. + +A função `dormir` retornará um objeto do tipo `Promise` que concluirá após `ms` milissegundos e usará setTimeout para tal. .exec - function sleep(ms) { + function dormir(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } - function sumAsync(x, y) { + function somaAssincrona(x, y) { return new Promise((resolve, reject) => { - sleep(500).then(() => { + dormir(500).then(() => { resolve(x + y); }); }); } - // let's use the function now - sumAsync(5, 7).then((result) => { - console.log("The result of the addition is:", result); + // agora, abriremos a promessa + somaAssincrona(5, 7).then((resultado) => { + console.log(`O resultado da adição é ${resultado}.`); }); -We can make our code `sumAsync` much nicer by simply using `await` on the `sleep` function and then -returning the result. +Podemos deixar o código da função `somaAssincrona` bem melhor simplesmente por usar o "`await`" na função `dormir` e retornando o resultado. .exec - function sleep(ms) { + function dormir(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } - async function sumAsync(x, y) { - // this code waits here for 500 milliseconds - await sleep(500); - // done waiting. let's calculate and return the value + async function somaAssincrona(x, y) { + // a função pausa por 500 milissegundos + await dormir(500); + + // terminou. calculemos e retornemos o valor return x+y; } - // sumAsync is an async function, which means it returns a Promise. - sumAsync(5, 7).then((result) => { - console.log("The result of the addition is:", result); + // somaAssincrona é uma função assíncrona, quer dizer que retorna uma promessa. + somaAssincrona(5, 7).then((resultado) => { + console.log(`O resultado da adição é ${resultado}.`); }); -Since `sumAsync` is a an `async` function, it **implicitly** returns a `Promise`, just like -the previous example which **explicitly** returns a `Promise`. The two `sumAsync` functions -are completely identical in their functionality, but the one which is defined using `async` -is much easier to understand! +Já que `somaAssincrona` é uma função declarada com "`async`", ela retorna **implicitamente** um objeto do tipo `Promise`, tal qual o exemplo mais acima, que retorna **explicitamente** uma promessa. + +Ambas as funções `somaAssincrona` têm funcionalidade idêntica, mas essa última, criada com o "`async`", ficou bem mais fácil de entender! Exercise -------- -Write an async function which waits 500 milliseconds and then returns the uppercase -of a given string. Use the `sleep` function provided. +Escreva uma função assíncrona via `"async"` e `"await"` que receba uma string como parâmetro e espere 500 milissegundos para retornar essa string toda em letras maiúsculas. Use a função "`sleep`" já disponibilizada. Tutorial Code ------------- @@ -99,4 +91,4 @@ Solution return s.toUpperCase(); } - uppercaseString("edward").then(console.log); + uppercaseString("edward").then(console.log); \ No newline at end of file diff --git a/tutorials/learn-js.org/pt/Promessas.md b/tutorials/learn-js.org/pt/Promessas.md index 6a67b75f2..d7c515f32 100644 --- a/tutorials/learn-js.org/pt/Promessas.md +++ b/tutorials/learn-js.org/pt/Promessas.md @@ -17,7 +17,7 @@ Isso costuma ser necessário quando queremos obter uma informação de algum ser Em várias linguagens de programação, como o Python, essa abordagem funcionaria, já que suas funções são síncronas por padrão. -Mas no JavaScript, várias APIs exigirão que uma função espere para poder fazer algo a fim de evitar sobrecarga dos recursos físicos, o que faz delas **assíncronas** por padrão. Resumindo, esse código não vai fazer o que a gente espera, pois já que a função "`fetch`" é assíncrona, ela retornará '**algo**' que não é exatamente a resposta final, mas que _eventualmente_ o será. +Mas no JavaScript, várias APIs exigirão que uma função espere para poder fazer algo a fim de evitar sobrecarga dos recursos físicos, o que faz delas **assíncronas** por padrão. Resumindo, esse código não vai fazer o que a gente espera, pois já que a função "`fetch`" é assíncrona, ela retornará '**algo**' que não é exatamente a resposta final, mas que *eventualmente* o será. >Pense numa API como a "porta de entrada" para contatar uma aplicação X e obter dados dela: elas têm documentação independente (além de, às vezes, exigirem autenticação por "token" e/ou pagamento a fim de fazer manutenções de infraestrutura para serem usadas). Esse "algo" retornado da função "`fetch`" é o que se chama de "**Promise**" no JavaScript. @@ -32,20 +32,24 @@ Para que o código mais acima funcionasse, devemos refatorar a função da segui }); } -Perceba que, desta vez, usamos a função "`then`", que é um dos métodos característicos de uma "`Promise`". +Perceba que, desta vez, usamos a função "`then`", que é um dos métodos característicos de um objeto do tipo "`Promise`". ### O Objeto "Promise" Promise é um objeto nativo do JavaScript dotado de duas características: 1. Ele recebe apenas um argumento, que é uma função. Essa função precisa ter dois parâmetros: uma função "`resolve`" e uma função "`reject`". O código escrito dentro do corpo da promessa precisa usar ao menos uma dessas duas funções. -2. Ela pode ser aguardada usando o método "`then`" (ou similares) ou a palavra reservada "`await`". + + - Para fins didáticos, referir-me-ei ao "fim" de uma promessa como "conclusão", mas quando uma promessa conclui, seu fim pode ser tanto positivo quanto negativo, como veremos adiante. + +2. Ela pode ser aguardada usando o método "`then`" (ou similares) ou a palavra reservada "**`await`**". >Para as palavras reservadas "*async*" e "*await*", fizemos um guia em particular. Em suma, chamamos de função assíncrona toda aquela cujo retorno, em vez de ser o valor que se espera no primeiro momento, será um objeto `Promise` que eventualmente se tornará esse exato valor. Suponhamos que queremos calcular a soma de dois números, mas escrevendo uma função que retornará uma `Promise` em vez dessa soma. + .exec function somaAssincrona(x, y) { const p = new Promise((resolve, reject) => { @@ -66,6 +70,7 @@ Suponhamos que queremos calcular a soma de dois números, mas escrevendo uma fun Modifiquemos o exemplo para que a solução seja entregue após meio segundo: + .exec function somaAssincrona(x, y) { console.log("1. A função 'somaAssincrona' é executada."); @@ -98,7 +103,8 @@ Modifiquemos o exemplo para que a solução seja entregue após meio segundo: Em um fluxo síncrono, se quisermos informar ao usuário que algo deu errado e disparar um erro a ser exibido, podemos ativar uma exceção por meio da função "`throw`". Mas no contexto assíncrono das promessas, a gente tem que ativar a função "`reject`". Digamos que precisamos reescrever a função acima, mas com a promessa guardando uma rejeição formal em caso de recebimento de valor negativo. Teríamos isto: - + + .exec function somaAssincrona(x, y) { return new Promise((resolve, reject) => { // rode isto daqui a 500 ms From cb1fb1efc18a24dd3da2b48a0aed4468e2e5594d Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 16:27:32 -0300 Subject: [PATCH 17/20] JavaScript OO --- .../pt/JavaScript Orientado a Objetos.md | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md b/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md index 76ee96ec6..30f8ed346 100644 --- a/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md +++ b/tutorials/learn-js.org/pt/JavaScript Orientado a Objetos.md @@ -1,41 +1,45 @@ Tutorial -------- -JavaScript uses functions as classes to create objects using the `new` keyword. Here is an example: +Para facilitar a compreensão da associação entre classes e objetos, pense em uma montadora de carros: a montadora "apenas" recebe os insumos (metais, borrachas etc.) e, após submetê-los a uma extensa linha de produção estritamente pensada, verificada e validada, gerando por fim os carros montados, todos sob o mesmo padrão e com as mesmas características. - function Person(firstName, lastName) { - // construct the object using the arguments - this.firstName = firstName; - this.lastName = lastName; +Classes são como a montadora, os parâmetros da classe são como os insumos, o método construtor é como a linha de montagem e os carros são como os objetos. - // a method which returns the full name - this.fullName = function() { - return this.firstName + " " + this.lastName; +O JavaScript usa funções como classes para criar objetos por meio das palavras reservadas "`new`" e "`this`". Veja um exemplo: + + function Pessoa(primeiroNome, sobrenome) { + // construa o objeto com base nos parâmetros + this.primeiroNome = primeiroNome; + this.sobrenome = sobrenome; + + // um método que retorne o nome completo + this.nomeCompleto = function() { + return `${this.primeiroNome} ${this.sobrenome}`; } } - var myPerson = new Person("John", "Smith"); - console.log(myPerson.fullName()); // outputs "John Smith" + var umaPessoa = new Pessoa("Thales", "Silva"); + console.log(umaPessoa.nomeCompleto()); +>retorna "Thales Silva" -Creating an object using the `new` keyword is the same as writing the following code: +Criar um objeto por meio da palavra reservada "`new`" equivale a executar o seguinte código: - var myPerson = { - firstName : "John", - lastName : "Smith", - fullName : function() - { - return this.firstName + " " + this.lastName; + var umaPessoa = { + primeiroNome: "Thales", + sobrenome: "Silva", + nomeCompleto: function() { + return `${this.primeiroNome} ${this.sobrenome}`; } } -The difference between the two methods of creating objects is that the first method uses a class to define the object and then the `new` keyword to instantiate it, and the second method immediately creates an instance of the object. +A diferença entre ambas as formas de criar objetos é que a primeira usa uma classe cujo instanciamento se dá pela palavra reservada "`new`" para fins de padronização em larga escala, já a segunda cria uma só instância de objeto imediatamente. Exercise -------- -Create a class called Person which accepts the name of a person as a string, and his/her age as a number. +Crie uma classe chamada "`Person`" que aceite o nome da pessoa como string pelo parâmetro "`name`" e sua idade como número pelo parâmetro "`age`". -The Person class should have a method called `describe` which returns a string with the following syntax: "`name`, `age` years old". So for example, if John is 19 years old then the function `describe` of his object will return "John, 19 years old". +A classe "`Person`" deve possuir o método "`describe`", que retornará uma string formatada sob a seguinte constituição: "`name`, `age` years old". Isto é, se Jack tiver 25 anos e a função "`describe`" de seu objeto for executada, será exibido o texto "`Jack, 25 years old`". Tutorial Code ------------- @@ -44,6 +48,7 @@ Tutorial Code var jack = new Person("Jack", 25); var jill = new Person("Jill", 24); + console.log(jack.describe()); console.log(jill.describe()); @@ -64,7 +69,9 @@ var Person = function(name, age){ return this.name + ", " + this.age + " years old"; } } + var jack = new Person("Jack", 25); var jill = new Person("Jill", 24); + console.log(jack.describe()); -console.log(jill.describe()); +console.log(jill.describe()); \ No newline at end of file From cc3dfc446ab1595b5fa5b3fd825af23b02484c02 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 17:03:58 -0300 Subject: [PATCH 18/20] =?UTF-8?q?Revis=C3=A3o=20Gramatical?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pt/Manipula\303\247\303\243o de Vetores.md" | 2 +- "tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" | 2 +- .../pt/Tutoriais de Contribui\303\247\303\243o.md" | 2 +- "tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" index b8bf57932..7370acda8 100644 --- "a/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" +++ "b/tutorials/learn-js.org/pt/Manipula\303\247\303\243o de Vetores.md" @@ -5,7 +5,7 @@ Tutorial Vetores também podem funcionar como pilhas. Os métodos "`push`" e "`pop`" inserem e removem variáveis diretamente do fim de um vetor, respectivamente. -Por exemplo, criemos um vetor vazio e povoemo-no com algumas variáveis. +Por exemplo, criemos um vetor vazio e povoemo-lo com algumas variáveis. var minhaPilha = []; minhaPilha.push(1); diff --git "a/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" "b/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" index b7033faff..cc4aacdc5 100644 --- "a/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" +++ "b/tutorials/learn-js.org/pt/Ol\303\241, Mundo!.md" @@ -5,7 +5,7 @@ Bem-vindo ao primeiro tutorial. Neste aqui, você aprenderá a escrever sua prim O JavaScript é uma linguagem poderosíssima. Além de poder ser interpretado por qualquer navegador do mundo, ele também pode ser usado para escrever código nativo para servidores usando o runtime "Node.js". -Enquanto se usa o JavaScript dentro do navegador, pode-se mudar a aparência e os comportamentos da página... mas, neste primeiro momento, a gente vai se concentrar em aprender a linguagem em si: por isso, vamos começar pela função para exibir mensagens e resultados em geral, o famoso "console.log". +Enquanto se usa o JavaScript dentro do navegador, pode-se mudar a aparência e os comportamentos da página... mas, neste primeiro momento, a gente vai se concentrar em aprender a linguagem em si: por isso, vamos começar pela função para exibir mensagens e resultados em geral: o famoso "console.log". Exercise -------- diff --git "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" index 0766434ea..e921389a9 100644 --- "a/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Tutoriais de Contribui\303\247\303\243o.md" @@ -26,7 +26,7 @@ Para escrever um tutorial, basta dirigir-se à pasta `tutorials`, adentrar a sub Para que o link atinja a página desejada, use colchetes duplos (`[[`) no arquivo que listará a rota (costuma ser o `Welcome.md`). -Cada tutorial consiste em uma breve explicação conteudista e um exercício sucinto para testar o usuário. Assim que ele o finalizar, terá de executar seu código e verificar se a saída está de acordo com o esperado. +Cada tutorial consiste em uma breve explicação conteudística e um exercício sucinto para testar o usuário. Assim que ele o finalizar, terá de executar seu código e verificar se a saída está de acordo com o esperado. Cada tutorial deve seguir a seguinte estrutura: diff --git "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" index 9205678af..6b8ddf459 100644 --- "a/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" +++ "b/tutorials/learn-js.org/pt/Vari\303\241veis e Tipos.md" @@ -7,7 +7,7 @@ Esses nomes quaisquer podem ser regidos pelas lógicas "camelCase" (como em nome Uma restrição para a nomenclatura das variáveis é que elas não podem assumir palavras reservadas da linguagem. E já que estamos no Brasil, **lembrem-se**, espaços e acentos, em computação, só se usa dentro de variáveis que guardem texto, ou a chance de erros é tremenda! -E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. Outra oservação: o JavaScript não exige ponto e vírgula a cada fim de linha, apenas estou seguindo o padrão que o criador do repositório determinou em suas lições. +E como em (quase) toda linguagem dinamicamente tipada, o JavaScript é uma linguagem "duck-typed", logo toda variável pode guardar qualquer tipo primitivo a qualquer momento. Outra observação: o JavaScript não exige ponto e vírgula a cada fim de linha, apenas estou seguindo o padrão que o criador do repositório determinou em suas lições. Variáveis podem ser declaradas pelas palavras reservadas "`const`", "`let`" e "`var`". "`const`" cria uma variável constante, o que significa que o valor (e, por consequência, o tipo) daquela variável não mudará de forma alguma, `let` cria uma variável local (visível pelo escopo da função) e `var` cria uma variável global (visível pelo código todo). @@ -21,14 +21,14 @@ Algumas observações sobre os tipos das variáveis em JavaScript: * O tipo Number pode apontar tanto para números decimais quanto para inteiros. * As variáveis do tipo Boolean só podem apontar para um destes valores: "`true`" ou "`false`". -* O tipo String pode ser constituído de números ou valores puramente textuais. No entanto, o Number não pode guardar valores textuais de forma alguma. E, claro, se uma string guardar um número, esse número não poderá ser usado em operações aritméticas. +* O tipo String pode ser constituído de números ou valores puramente textuais. No entanto, o tipo Number não pode guardar valores textuais de forma alguma e, claro, se uma string guardar um número, esse número não poderá ser usado em operações aritméticas. Há dois tipos primitivos mais avançados em JavaScript: Function e Object. Estudaremos ambos em tutoriais futuros. function minhaFuncao() {} // uma função vazia const meuObject = {}; // um objeto vazio - const meuArray = []; // um vetor, que é apenas objeto especial, vazio + const meuArray = []; // um vetor, que é apenas um objeto especial, vazio Fora isso, há dois tipos especiais: o Undefined e o Null. From 5dbf821bdecba8d7bf0a368c7c4e4faf8eb4ea4c Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 17:40:34 -0300 Subject: [PATCH 19/20] =?UTF-8?q?Contexto=20de=20Fun=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pt/Contexto de Fun\303\247\303\243o.md" | 81 +++++++++---------- .../pt/Operadores L\303\263gicos.md" | 8 +- 2 files changed, 43 insertions(+), 46 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" index 8b691b091..63d22c9a4 100644 --- "a/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Contexto de Fun\303\247\303\243o.md" @@ -1,70 +1,71 @@ Tutorial -------- -Functions in JavaScript run in a specific context, and using the `this` keyword we have access to it. +No JavaScript, as funções rodam em um determinado contexto o qual pode ser acessado pela palavra reservada "`this`". -All standard functions in the browser run under the Window context. Functions defined under an object or a class (another function) will use the context of the object it was created in. However, we can also change the context of a function at runtime, either before or while executing the function. +Todas as funções padrão do navegador rodam sob o contexto "`Window`". As funções definidas sob um objeto ou uma classe (que é outra função) usarão o contexto do objeto em que foram criadas. No entanto, também podemos mudar o contexto de uma função a qualquer momento antes, durante ou depois da sua execução. -### Binding a method to an object +### Atrelando um Método a um Objeto -To bind a function to an object and make it an object method, we can use the `bind` function. Here is a simple example: +Para atrelar uma função a um objeto e fazer dela um método dele, podemos usar a função "`bind`". Aqui vai um exemplo simples: - var person = { - name : "John" + var pessoa = { + nome : "Derek" }; - function printName() - { - console.log(this.name); + function mostraNome() { + console.log(this.nome); } -Obviously, we are not able to call `printName()` without associating the function with the object `person`. To do this we must create a bound method of the function printName to person, using the following code: +Tá na cara que a gente não vai conseguir chamar a função `mostraNome()` sem associar ela ao objeto `pessoa`, e para fazer isso, nós precisamos criar outra função que, por transitividade, associe a função ao objeto da seguinte forma: - var boundPrintName = printName.bind(person); - boundPrintName(); // prints out "John" + var mostraNomeAssociado = mostraNome.bind(pessoa); + mostraNomeAssociado(); +>exibe "Derek" -### Calling a function with a different context +### Chamando uma Função de um Contexto Diferente -We can use the `call` and `apply` functions to call a function as if it was bound to an object. The difference between the `call` and `apply` functions is only by how they receive their arguments - the `call` function receives the `this` argument first, and afterwards the arguments of the function, whereas the `apply` function receives the `this` argument first, and an array of arguments to pass on to the function as a second argument to the function. +Podemos usar as funções "`call`" e "`apply`" para chamar uma função como se estivesse atrelada a um objeto. A diferença entre ambas é apenas a ordem dos argumentos: a função `call` recebe o parâmetro `this` primeiro e depois a função a ser atrelada, enquanto a função "`apply`" recebe como primeiro parâmetro o `this` e um vetor de parâmetros para passar à função como o segundo. -For example, let's call `printName` with `person` as the context using the `call` method: +Por exemplo, chamemos `mostraNome` sob o contexto `pessoa` usando a função "`call`": - printName.call(person); // prints out "John" + mostraNome.call(pessoa); +>retorna "Derek" -### call/apply vs bind +### "`Call`" e "`Apply`" vs. "`Bind`" -The difference between `call`/`apply` and `bind` is that `bind` returns a new function identical to the old function, except that the value of `this` in the new function is now the object it was bound to. `call`/`apply` calls the function with `this` being the bound object, but it does not return a new function or change the original, it calls it with a different value for `this`. +A diferença entre "`call`", "`apply`" e "`bind`" é que o "`bind`" retorna uma nova função idêntica à antiga, com a diferença de que o valor de "`this`" da nova função corresponde ao objeto que lhe foi atrelado. Já "`call`" e "`apply`" chamam a função com o "`this`" já sendo o objeto atrelado, mas sem o retorno de uma nova função ou mudanças na original, apenas a chamam com um valor diferente para o "`this`". For example: - var boundPrintName = printName.call(person); //boundPrintName gets printName's return value (null) - boundPrintName(); //doesn't work because it's not a function, it's null + var mostraNomeAssociado = mostraNome.call(pessoa); // mostraNomeAssociado pega o valor retornado pela função mostraNome (null) + mostraNomeAssociado(); // não funciona porque não é uma função, é um Null - printName.bind(person); //returns a new function, but nothing is using it so it's useless - printName(); //throws error because this.name is not defined + mostraNome.bind(pessoa); // retorna uma função, mas já que nada a está usando, é inútil + mostraNome(); // dá um erro porque "this.nome" não foi definido no contexto puro de mostraNome -Think of `call` as executing the return value of `bind`. +Pense no "`call`" como a execução do valor **retornado** pelo "`bind`". -For example: +Por exemplo: - printName.call(person); //is the same as - printName.bind(person)(); //executes the function returned by bind + mostraNome.call(pessoa); // é o mesmo que + mostraNome.bind(pessoa)(); // executa a função retornada pelo bind -Or think of `bind` returning a shortcut to `call`. +Ou pense no "`bind`" como um atalho para o "`call`". -For example: +Por exemplo: - var boundPrintName = printName.bind(person); //is the same as - var boundPrintName = function() - { - printName.call(person); + var mostraNomeAssociado = mostraNome.bind(pessoa); // é o mesmo que + + var mostraNomeAssociado = function() { + mostraNome.call(pessoa); } Exercise -------- -Create bound copies of printFullName and printDetails to person called boundPrintFullName and boundPrintDetails. +Crie cópias das funções "`printFullName`" e "`printDetails`" atreladas ao objeto "`person`", chamando-as "`boundPrintFullName`" e `"boundPrintDetails"`. Tutorial Code ------------- @@ -75,13 +76,11 @@ var person = { age : 23 }; -function printFullName() -{ +function printFullName() { console.log(this.firstName + " " + this.lastName); } -function printDetails() -{ +function printDetails() { console.log(this.firstName + " is " + this.age + " years old"); } @@ -107,13 +106,11 @@ var person = { age : 23 }; -function printFullName() -{ +function printFullName() { console.log(this.firstName + " " + this.lastName); } -function printDetails() -{ +function printDetails() { console.log(this.firstName + " is " + this.age + " years old"); } @@ -122,4 +119,4 @@ var boundPrintFullName = printFullName.bind(person); var boundPrintDetails = printDetails.bind(person); boundPrintFullName(); -boundPrintDetails(); +boundPrintDetails(); \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" index 86a84f759..7867a54a8 100644 --- "a/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" +++ "b/tutorials/learn-js.org/pt/Operadores L\303\263gicos.md" @@ -35,9 +35,9 @@ Operadores de inequidade também podem ser usados para avaliar expressões. Por var sicrano = 2; if (fulano < sicrano) { - console.log("Fulano é menor que Sicrano."); + console.log("Fulano é menor que sicrano."); } else { - console.log("Fulano é maior que Sicrano."); + console.log("Fulano é maior que sicrano."); } Duas ou mais expressões lógicas podem ser avaliadas juntas usando operadores lógicos para verificar se ambas (ou ao menos uma das, ou nenhuma das) expressões equivalem a "`true`" ao mesmo tempo. @@ -51,11 +51,11 @@ Para verificar **se ao menos uma delas retorna "`true`"**, use o operador "OR", var beltrano = 3; if (fulano < sicrano && beltrano > sicrano) { - console.log("Fulano é menor que Sicrano E Beltrano é maior que Sicrano."); + console.log("Fulano é menor que sicrano E beltrano é maior que sicrano."); } if (fulano < sicrano || beltrano > sicrano) { - console.log("Fulano é menor que Sicrano OU Beltrano é maior que Sicrano."); + console.log("Fulano é menor que sicrano OU beltrano é maior que sicrano."); } O operador de negação, chamado "NOT", determinado por "`!`", pode ser usado da mesma forma: From 78aad6f2f8502e33af058561da2c9783f6ceca40 Mon Sep 17 00:00:00 2001 From: ntn-ss <91851915+ntn-ss@users.noreply.github.com> Date: Thu, 1 Feb 2024 21:51:34 -0300 Subject: [PATCH 20/20] =?UTF-8?q?Finaliza=C3=A7=C3=A3o=20a=20Tradu=C3=A7?= =?UTF-8?q?=C3=A3o=20para=20Portugu=C3=AAs=20Brasileiro?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pt/Desestrutura\303\247\303\243o.md" | 144 +++++++++--------- .../learn-js.org/pt/Fun\303\247\303\265es.md" | 2 + "tutorials/learn-js.org/pt/Heran\303\247a.md" | 90 +++++------ 3 files changed, 112 insertions(+), 124 deletions(-) diff --git "a/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" "b/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" index ba717fd50..515180786 100644 --- "a/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" +++ "b/tutorials/learn-js.org/pt/Desestrutura\303\247\303\243o.md" @@ -1,124 +1,118 @@ Tutorial -------- -Destructuring is a feature of ES6, introduced for making easier and cleaner repetitive operations and assignments made in JS. +A desestruturação é uma funcionalidade que o ES6 nos traz, ela existe a fim de facilitar e simplificar operações repetitivas e atribuições dentro do JavaScript. -With destructuring we can extract data from a deeper level inside an array / object with a more concise syntax, even giving this 'extracted' data some other name in the same operation. +Pela desestruturação, podemos tanto extrair dados em um nível mais profundo de um vetor (ou objeto) usando uma sintaxe mais sucinta quanto atribuir a esse dado "extraído" um nome alternativo nessa mesma operação. -In JavaScript we can achieve this in a very simply way: +No JavaScript, podemos realizar isso de uma forma bastante simples: - // Consider this object - const person = { - head: { - eyes: 'x', - mouth: { - teeth: 'x', - tongue: 'x' + // considere este objeto: + const pessoa = { + cabeca: { + olhos: 'x', + boca: { + dentes: 'x', + lingua: 'x' } }, - body: { - shoulders: 'x', - chest: 'x', - arms: 'x', - hands: 'x', - legs: 'x' + corpo: { + ombros: 'x', + peitos: 'x', + braços: 'x', + maos: 'x', + pernas: 'x' } }; - // If we want to get head, the old way: - let head = person.head; + // se quiséssemos pegar sua cabeça como nos velhos tempos: + let cabeca = pessoa.cabeca; - // ES6 Destructuring - let { head } = person; + // desestruturação do ES6: + let { cabeca } = pessoa; - // We can give other name as if a variable was declared, in the same line - let { head : myHead } = person; + // podemos dar, à cabeça extraída, outro nome, como se uma variável fosse declarada na mesma linha: + let { cabeca : minhaCabeca } = pessoa; - // So we can do... - console.log(myHead); // prints '{ eyes, mouth: { ... } }' + // olhando a nova cabeça... + console.log(minhaCabeca); +>exibe '{ olhos: 'x', boca: { ... } }' -With arrays: +Em se tratando de vetores: - let numbers = ['2', '3', '7']; + let numeros = ['2', '3', '7']; - // Old way - let two = numbers[0]; - let three = numbers[1]; + // como nos velhos tempos: + let dois = numeros[0]; + let tres = numeros[1]; - // ES6 Destructuring - let [two, three] = numbers; + // desestruturação do ES6: + let [ dois, tres ] = numeros; - // We can give them other names too - let [two: positionZero, three: positionOne] = numbers; + // podemos dar-lhes outros nomes, como se novas variáveis fossem declaradas na mesma linha: + let [dois: posicaoZero, tres: posicaoUm] = numeros; - console.log(positionZero) // prints '2' - console.log(positionOne) // prints '3' + console.log(posicaoZero) // exibe '2' + console.log(posicaoUm) // exibe '3' +Também podemos fazer isso com parâmetros de funções: -We can do this with function parameters too: + // como nos velhos tempos: + function pegaCabecaECorpo(pessoa) { - // Old way - function getHeadAndBody(person) { - - let headAndBody = { - head: person.head, - body: person.body + let cabecaECorpo = { + cabeca: pessoa.cabeca, + corpo: pessoa.corpo } - return headAndBody; + return cabecaECorpo; } - // ES6 Destructuring - function getHeadAndBody({ head, body }) { - return { head, body } + // desestruturação do ES6: + function pegaCabecaECorpo({ cabeca, corpo }) { + return { cabeca, corpo } } - // With arrow functions - let getHeadAndBody = ({ head, body }) => { head, body }; + // com funções seta + let pegaCabecaECorpo = ({ cabeca, corpo }) => { cabeca, corpo }; + +Aviso: tome cuidado com a desestruturação, pois se você não tiver certeza do recebimento de um objeto dotado dos exatos parâmetros, é melhor fazer da forma antiga a fim de evitar a ocorrência do erro "`{nome do atributo} is undefined`". -Warning: Be careful with destructuring, if you aren't sure if the function is going to receive -an object with those parameters, it's better to use the old way in order to not incurring in ` head / body is undefined ` errors. You can avoid that type of errors while using ES6 Destructuring giving default parameters to the function, so you can be sure that properties will exist, not being obliged to rely on the parameters received. +É possível evitar esse tipo de erro usando a desestruturação do ES6 ao definir valores padrão às variáveis, então será certa a existência dessas propridades, deixando de haver a completa dependência dos argumentos recebidos. - // I'm not sure if head and body will be present in some cases... - // Now we are sure that head or body will be equal to '' if the real parameter doesn't have that properties inside - function getHeadAndBody({ head = '', body = '' }) { - return { head, body } + // não sei dizer se cabeça e/ou o corpo estarão presentes em alguns casos... + + // agora, garantimos que tanto cabeça quanto o corpo existirão e serão iguais a " '' ", evitando que dê pau se o argumento recebido não carregar essas exatas propriedades + function pegaCabecaECorpo({ cabeca = '', corpo = '' }) { + return { cabeca, corpo } } -You can destructure as deep as you like, always considering if that property exists. +A desestruturação pode ocorrer a qualquer nível de profundidade, basta que esse atributo exista. - // Deep destructuring - let computer = { - processor: { + // desestruturação profunda + let computador = { + processador: { transistor: { - silicon: { - thickness: '9nm' + silicone: { + grossura: '9nm' } } } } - let { - processor: - { - transistor: { - silicon: { - thickness - } - } - } - } = computer; + let { processador: { transistor: { silicone: { grossura } } } } = computador; - // Making it cleaner - let { thickness: inteli9Thickness } = computer.processor.transistor.silicon; + // simplificando + let { grossura: grossuraDoInteli9 } = computador.processador.transistor.silicone; - console.log(inteli9Thickness) // prints '9nm' + console.log(grossuraDoInteli9) +>exibe '9nm' Exercise -------- -Get the `legs` property and get the data inside the third position of `numbers` using destructuring. Give it the names of `myLegs` and `thirdPosition` respectively. +Obtenha a propriedade "`legs`" do objeto "`person`" e, também, os dados dentro da terceira posição do vetor "`numbers`" via desestruturação. Dê às variáveis obtidas os nomes de "`myLegs`" e "`thirdPosition`", respectivamente. Tutorial Code ------------- @@ -165,4 +159,4 @@ let [onePosition, secondPosition, thirdPosition] = numbers; // const [,,thirdPosition] = numbers; console.log(myLegs); -console.log(thirdPosition); +console.log(thirdPosition); \ No newline at end of file diff --git "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" index 3c6d058bb..098275951 100644 --- "a/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" +++ "b/tutorials/learn-js.org/pt/Fun\303\247\303\265es.md" @@ -31,6 +31,8 @@ Para definir uma função anônima, podemos usar esta sintaxe: Há uma facilidade proporcionada pelo ES6 chamada "funções seta", mas vamos abordar esse assunto no próximo artigo. +>No contexto de objetos, as funções recebem o nome alternativo de "métodos", enquanto as variáveis, de "atributos". Esses assuntos serão devidamente abordados em lições futuras. + Exercise -------- diff --git "a/tutorials/learn-js.org/pt/Heran\303\247a.md" "b/tutorials/learn-js.org/pt/Heran\303\247a.md" index effad2299..f39855a7a 100644 --- "a/tutorials/learn-js.org/pt/Heran\303\247a.md" +++ "b/tutorials/learn-js.org/pt/Heran\303\247a.md" @@ -1,88 +1,80 @@ Tutorial -------- -JavaScript uses prototype based inheritance. Every object has a `prototype`, and when a method of the object is called then JavaScript tries to find the right function to execute from the prototype object. +O JavaScript incorpora heranças com base em protótipos. Cada objeto tem seu próprio "`prototype`", e quando um método de um objeto é chamado, o JavaScript tenta encontrar o método correto a se executar do objeto prototype. -### The prototype attribute +### O Atributo "`Prototype`" -Without using the prototype object, we can define the object Person like this: +Sem usar o objeto "`prototype`", podemos definir a classe `Pessoa` desta forma: - function Person(name, age) - { - this.name = name; - this.age = age; + function Pessoa(nome, idade) { + this.nome = nome; + this.idade = idade; - function describe() - { - return this.name + ", " + this.age + " years old."; + function descrever() { + return this.nome + ", de " + this.idade + " anos."; } } -When creating instances of the `Person` object, we create a new copy of all members and methods of the functions. This means that every instance of an object will have its own `name` and `age` properties, as well as its own `describe` function. +Ao criar instâncias da classe `Pessoa`, criamos cópias de todos os atributos e métodos presentes nela para os objetos instanciados. Isso significa que cada instância da classe possuirá seus próprios atributos `nome` e `idade`, bem como sua própria função `descrever`. -However, if we use the `Person.prototype` object and assign a function to it, it will also work. +No entanto, se usarmos o objeto "`Pessoa.prototype`" e manipulá-lo, funcionará da mesma forma. - function Person(name, age) - { - this.name = name; - this.age = age; + function Pessoa(nome, idade) { + this.nome = nome; + this.idade = idade; } - Person.prototype.describe = function() - { - return this.name + ", " + this.age + " years old."; + Pessoa.prototype.descrever = function() { + return this.nome + ", de " + this.idade + " anos."; } -When creating instances of the `Person` object, they will not contain a copy of the `describe` function. Instead, when calling an object method, JavaScript will attempt to resolve the `describe` function first from the object itself, and then using its `prototype` attribute. +Ao criar instâncias da classe `Pessoa`, elas não carregarão consigo uma cópia do método `descrever`. No entanto, quando esse método lhes for chamado, o JavaScript tentará, num primeiro momento, ativar a função `descrever` delas próprias, e só então vasculhar o seu objeto "`prototype`". -### Inheritance +### Herança -Let's say we want to create a `Person` object, and a `Student` object derived from `Person`: +Suponhamos que queiramos criar um objeto `Pessoa` e outro objeto, `Estudante`, que seja derivado dele. - var Person = function() {}; + var Pessoa = function() {}; - Person.prototype.initialize = function(name, age) - { - this.name = name; - this.age = age; + Pessoa.prototype.inicializar = function(nome, idade) { + this.nome = nome; + this.idade = idade; } - Person.prototype.describe = function() - { - return this.name + ", " + this.age + " years old."; + Pessoa.prototype.descrever = function() { + return this.nome + ", " + this.idade + " years old."; } - var Student = function() {}; - Student.prototype = new Person(); + var Estudante = function() {}; + Estudante.prototype = new Pessoa(); - Student.prototype.learn = function(subject) - { - console.log(this.name + " just learned " + subject); + Estudante.prototype.aprender = function(subject) { + console.log(this.nome + " acabou de aprender " + subject + "."); } - var me = new Student(); + var literalmenteEu = new Estudante(); - me.initialize("John", 25); - me.learn("Inheritance"); + literalmenteEu.inicializar("John", 25); + literalmenteEu.aprender("Inheritance"); -As we can see in this example, the `initialize` method belongs to `Person` and the `learn` method belongs to `Student`, both of which are now part of the `me` object. +Como podemos ver no exemplo, já que o método `inicializar` pertence à classe `Pessoa` e o `aprender` à `Estudante`, ambos são parte do objeto `literalmenteEu` por transitividade, pois um estudante é, via de regra, uma pessoa. -Keep in mind that there are many ways of doing inheritance in JavaScript, and this is just one of them. +Não esqueça de que há várias maneiras de se trabalhar com herança no JavaScript, elucidamos apenas uma delas. Exercise -------- -Create an object called `Teacher` derived from the `Person` class, and implement a method called `teach` which receives a string called `subject`, and prints out: +Crie uma classe chamada "`Teacher`" que seja herdeiro da classe "`Person`" e implemente nele o método `teach`, que receberá a string `subject` como parâmetro e exibirá a seguinte string formatada: - [teacher's name] is now teaching [subject] + `${this.name} is now teaching ${subject}.` Tutorial Code ------------- var Person = function() {}; -Person.prototype.initialize = function(name, age) -{ +Person.prototype.initialize = function(name, age) { this.name = name; this.age = age; } @@ -97,15 +89,14 @@ him.teach("Inheritance"); Expected Output --------------- -Adam is now teaching Inheritance +Adam is now teaching Inheritance. Solution -------- var Person = function() {}; -Person.prototype.initialize = function(name, age) -{ +Person.prototype.initialize = function(name, age) { this.name = name; this.age = age; } @@ -113,11 +104,12 @@ Person.prototype.initialize = function(name, age) // TODO: create the class Teacher and a method teach var Teacher = function() { this.teach = function(subject){ - console.log(this.name + " is now teaching " + subject); + console.log(this.name + " is now teaching " + subject + "."); } } + Teacher.prototype = new Person(); var him = new Teacher(); him.initialize("Adam", 45); -him.teach("Inheritance"); +him.teach("Inheritance"); \ No newline at end of file