javascript-tutorial · odsantos · Oct 17, 2021 · Aug 15, 2021 · Aug 16, 2021 · Aug 21, 2021
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ sftp-config.json
 Thumbs.db
 
 
+/svgs
diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
@@ -24,11 +24,11 @@ O navegador tem um interpretador(motor) incorporado, às vezes chamado de "máqu
 
 Interpretadores diferentes têm "codinomes" diferentes. Por exemplo:
 
-- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- no Chrome e no Opera.
+- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- no Chrome, Opera e Edge.
 - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- no Firefox.
 - ...Há outros codinomes como "Chakra" para o IE, "JavaScriptCore", "Nitro" e "SquirrelFish" para Safari, etc.
 
-Os termos acima são bons para lembrar, pois são usados em artigos de desenvolvedores na internet. Vamos usá-los também. Por exemplo, se "um recurso X é suportado pelo V8", então ele provavelmente funciona no Chrome e no Opera.
+Os termos acima são bons para lembrar, pois são usados em artigos de desenvolvedores na internet. Vamos usá-los também. Por exemplo, se "um recurso X é suportado pelo V8", então ele provavelmente funciona no Chrom, Opera e Edge.
 
 ```smart header="Como funcionam os interpretadores?"
 
@@ -45,7 +45,7 @@ O interpretador aplica otimizações em cada etapa do processo. Ele ainda observ
 
 JavaScript moderno é uma linguagem de programação "segura". Ele não fornece acesso de baixo nível à memória ou CPU, porque foi inicialmente criado para navegadores que não necessitam dele.
 
-As capacidades do JavaScript dependem muito do ambiente em que está sendo executado. Por exemplo, [Node.js](https://wikipedia.org/wiki/Node.js) suporta funções que permitem ao JavaScript ler/gravar arquivos arbitrários, executar solicitações de rede, etc.
+As capacidades do JavaScript dependem muito do ambiente em que está sendo executado. Por exemplo, [Node.js]https://pt.wikipedia.org/wiki/Node.js) suporta funções que permitem ao JavaScript ler/gravar arquivos arbitrários, executar solicitações de rede, etc.
 
 O JavaScript no navegador pode fazer tudo relacionado à manipulação de páginas web, interação com o usuário e o servidor web.
 

diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
@@ -13,9 +13,9 @@ Uma IDE carrega o projeto (que pode ter muitos arquivos), permite navegação en
 Se você ainda não tiver selecionado uma IDE, considere as seguintes opções:
 
 - [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre).
-- [WebStorm](http://www.jetbrains.com/webstorm/) (plataforma cruzada, pago).
+- [WebStorm](https://www.jetbrains.com/pt-br/webstorm/) (plataforma cruzada, pago).
 
-Para Windows, há também "Visual Studio", que não deve ser confundido com "Visual Studio Code". "Visual Studio" é um editor pago e poderoso somente para Windows, bem adequado para a plataforma .NET . Uma versão gratuita é chamada [Visual Studio Community](https://www.visualstudio.com/vs/community/).
+Para Windows, há também "Visual Studio", que não deve ser confundido com "Visual Studio Code". "Visual Studio" é um editor pago e poderoso somente para Windows, bem adequado para a plataforma .NET . Uma versão gratuita é chamada [Visual Studio Community](https://visualstudio.microsoft.com/pt-br/vs/community/).
 
 Muitas IDEs são pagas, mas têm um período experimental. Seu custo é geralmente desprezível comparado ao salário de um desenvolvedor qualificado, então basta escolher o melhor para você.
 
@@ -32,7 +32,6 @@ Na prática, os editores leves podem ter muitos plug-ins, incluindo analisadores
 As seguintes opções merecem sua atenção:
 
 - [Atom](https://atom.io/) (plataforma cruzada, livre).
-- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre).
 - [Sublime Text](http://www.sublimetext.com) (plataforma cruzada, shareware).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, livre).
 - [Vim](http://www.vim.org/) e [Emacs](https://www.gnu.org/software/emacs/) também são legais se você sabe como usá-los.

diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md
@@ -7,7 +7,7 @@ In JavaScript they are written like this:
 - Greater/less than: <code>a &gt; b</code>, <code>a &lt; b</code>.
 - Greater/less than or equals: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
 - Equals: `a == b`, please note the double equality sign `==` means the equality test, while a single one `a = b` means an assignment.
-- Not equals. In maths the notation is <code>&ne;</code>, but in JavaScript it's written as <code>a != b</code>.
+- Not equals: In maths the notation is <code>&ne;</code>, but in JavaScript it's written as <code>a != b</code>.
 
 In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities.
 

diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md
@@ -123,7 +123,7 @@ This leads to some interesting usage compared to a "pure, classical, boolean-onl
 
     It means that `||` processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.
 
-    That importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call.
+    The importance of this feature becomes obvious if an operand isn't just a value, but an expression with a side effect, such as a variable assignment or a function call.
 
     In the example below, only the second message is printed:
 

diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
@@ -54,7 +54,7 @@ if (condição) {
 
 Uma construção de única-linha, tal como `if (condição) doSomething()`, é um importante caso de exceção. Devemos utilizar chavetas, ou não?
 
-Aqui estão variantes com anotações, para que por si mesmo você possa avaliar a sua legíbilidade:
+Aqui estão variantes com anotações, para que por si mesmo você possa avaliar a sua legibilidade:
 
 1. 😠 Principiantes, por vezes fazem isto. É mau! As chavetas não são necessárias:
     ```js
@@ -83,11 +83,12 @@ Para código muito curto, uma única linha é aceitável, ex: `if (cond) return
 Ninguém gosta de ler uma longa linha horizontal de código. A melhor prática é a particionar.
 
 Por exemplo:
-
 ```js
 // o acento grave (*backtick*) ` permite repartir uma *string* por múltiplas linhas
 let str = `
-  O TC39 da ECMA International, é um grupo de desenvolvedores e implementadores de JavaScript, académicos, e outros, colaborando com a comunidade para manter e evoluir a definição de JavaScript.
+  O TC39 da ECMA International, é um grupo de desenvolvedores e 
+  implementadores de JavaScript, académicos, e outros, colaborando com a comunidade 
+  para manter e evoluir a definição de JavaScript.
 `;
 ```
 
@@ -148,7 +149,7 @@ Existem dois tipos de indentação:
 
 ### Pontos-e-vírgula
 
-Um ponto-e-vírgula deveria estar presente no fim de cada instrução, mesmo que possívelmente pudesse ser omitido.
+Um ponto-e-vírgula deveria estar presente no fim de cada instrução, mesmo que possivelmente pudesse ser omitido.
 
 Existem linguagens em que o ponto-e-vírgula é verdadeiramente opcional, e raramente utilizado. Contudo, em JavaScript, há casos em que uma quebra-de-linha não é interpretada como um ponto-e-vírgula, deixando o código vulnerável a erros. Veja mais sobre isto no capítulo <info:structure#semicolon>.
 
@@ -247,7 +248,6 @@ Se estiver a escrever várias funções "auxiliares" (*"helper" functions*) acom
     setHandler(elem);
     walkAround();
     ```
-
 2. O código primeiro, depois as funções:
 
     ```js
@@ -269,7 +269,6 @@ Se estiver a escrever várias funções "auxiliares" (*"helper" functions*) acom
       ...
     }
     ```
-
 3. Mista: uma função é declarada onde for empregue pela primeira vez.
 
 A maior parte da vezes, a segunda variante é a preferida.
@@ -282,7 +281,7 @@ Um guia de estilo contém regras gerais sobre "como escrever" código, ex. que a
 
 Quando todos os membros de uma equipa usam o mesmo guia de estilo, o código parece uniforme, independentemente do membro da equipa que o tenha escrito.
 
-Óbviamente, que uma equipa pode sempre escrever o seu próprio guia de estilo, mas geralmente não há necessidade. Existem muitos guias à escolha.
+Obviamente, que uma equipa pode sempre escrever o seu próprio guia de estilo, mas geralmente não há necessidade. Existem muitos guias à escolha.
 
 Algumas opções populares:
 
@@ -292,19 +291,19 @@ Algumas opções populares:
 - [StandardJS](https://standardjs.com/)
 - (e muitas mais)
 
-Se for um programador iniciante, começe pela cábula (*cheatsheet*) disponível no início deste capítulo. Depois, poderá procurar por outros guias de estilo afim de colher mais ideias e decidir qual prefere.
+Se for um programador iniciante, comece pela cábula (*cheatsheet*) disponível no início deste capítulo. Depois, poderá procurar por outros guias de estilo afim de colher mais ideias e decidir qual prefere.
 
 ## *Linters* Automatizados
 
-*Linters*, são ferramentas que automáticamente verificam o estilo do seu código e fazem sugestões para o alterar.
+*Linters*, são ferramentas que automaticamente verificam o estilo do seu código e fazem sugestões para o alterar.
 
 O seu ponto-forte reside em, à medida que verificam o estilo, poderem encontrar alguns erros (*bugs*), como nomes de variáveis ou de funções mal-escritos. Devido a esta capacidade, é recomendado que use um *linter* mesmo que não queira aderir a um certo "estilo de código".
 
 Aqui estão algumas das mais conhecidas ferramentas de *linting*:
 
 - [JSLint](http://www.jslint.com/) -- um dos primeiros *linters*.
 - [JSHint](http://www.jshint.com/) -- mais configurações do que *JSLint*.
-- [ESLint](http://eslint.org/) -- provávelmente o mais recente.
+- [ESLint](http://eslint.org/) -- provavelmente o mais recente.
 
 Todos eles podem executar a tarefa. O autor utiliza [ESLint](http://eslint.org/).
 

diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md
@@ -133,7 +133,7 @@ clone.name = "Pete"; // changed the data in it
 alert( user.name ); // still John in the original object
 ```
 
-Also we can use the method [Object.assign](mdn:js/Object/assign) for that.
+Also we can use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for that.
 
 The syntax is:
 

diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md
@@ -1,8 +1,6 @@
 # Métodos de primitivos
 
-JavaScript nos permite trabalhar com primitivos (strings, números, etc.) como se fossem objetos.
-
-Eles também fornecem métodos para chamar como se fossem objetos. Estudaremos isso em breve, mas primeiro veremos como isso funciona, porque, é claro, os primitivos não são objetos (e aqui deixaremos isso ainda mais claro).
+JavaScript nos permite trabalhar com primitivos (strings, números, etc.) como se fossem objetos. Eles também fornecem métodos para chamar como se fossem objetos. Estudaremos isso em breve, mas primeiro veremos como isso funciona, porque, é claro, os primitivos não são objetos (e aqui deixaremos isso ainda mais claro).
 
 Vejamos as principais diferenças entre primitivos e objetos.
 
@@ -50,9 +48,9 @@ A solução parece um pouco estranha, mas aqui está:
 2. A linguagem permite acesso a métodos e propriedades de strings, números, booleanos e símbolos.
 3. Quando isso acontece, um "invólucro de objeto" especial que fornece a funcionalidade extra é criado e, em seguida, é destruído.
 
-Os "invólucros de objeto" são diferentes para cada tipo primitivo e são chamados: `String`, `Number`, `Boolean` e `Symbol`. Assim, eles fornecem diferentes conjuntos de métodos.
+Os "invólucros de objeto" são diferentes para cada tipo primitivo e são chamados: `String`, `Number`, `Boolean`, `Symbol` e `BigInt`. Assim, eles fornecem diferentes conjuntos de métodos.
 
-Por exemplo, existe um método para *strings* [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) que retorna `str` em letras maiúsculas.
+Por exemplo, existe um método para *strings* [str.toUpperCase()](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) que retorna `str` em letras maiúsculas.
 
 Veja como isso funciona:
 
@@ -72,7 +70,7 @@ Portanto, os primitivos podem fornecer métodos, mas ainda permanecem leves.
 
 O mecanismo do JavaScript otimiza muito esse processo. Pode até ignorar a criação do objeto extra. Mas ainda deve seguir a especificação e se comportar como se criasse um.
 
-Um número tem métodos próprios, por exemplo, [toFixed(n)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) arredonda o número para a precisão dada:
+Um número tem métodos próprios, por exemplo, [toFixed(n)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) arredonda o número para a precisão dada:
 
 ```js run
 let n = 1.23456;

diff --git a/...dvanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md b/...dvanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
@@ -33,11 +33,11 @@ printReverseList(list);
 
 # Using a loop
 
-The loop variant is also a little bit more complicated then the direct output.
+The loop variant is also a little bit more complicated than the direct output.
 
 There is no way to get the last value in our `list`. We also can't "go back".
 
-So what we can do is to first go through the items in the direct order and rememeber them in an array, and then output what we remembered in the reverse order:
+So what we can do is to first go through the items in the direct order and remember them in an array, and then output what we remembered in the reverse order:
 
 ```js run
 let list = {

diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md
@@ -36,15 +36,15 @@ A ideia é que o resultado seja passado através de uma cadeia de tratadores `.t
 
 O fluxo é o seguinte:
 1. A promessa inicial é resolvida em 1 segundo `(*)`,
-2. Então o tratador de `.then` é chamado `(**)`.
-3. O valor retornado por ele é passado ao próximo tratador de `.then` `(***)`
+2. Então o tratador de `.then` é chamado `(**)`, que por sua vez cria uma nova promessa (resolvida com o valor `2`).
+3. O próximo tratador `.then` `(***)` recebe o valor retornado pelo anterior, o processa (o duplica) e ele é passado ao próximo tratador.
 4. ...e assim por diante.
 
 Como o resultado é passado através da cadeia de tratadores, podemos observar a sequência de chamadas `alert`: `1` -> `2` -> `4`.
 
 ![](promise-then-chain.svg)
 
-A coisa toda funciona pois a chamada ao `promise.then` retorna uma promessa, assim podemos chamar o próximo `.then` nesse retorno.
+A coisa toda funciona, pois cada chamada ao `.then` retorna uma nova promessa, assim podemos chamar o próximo `.then` nesse retorno.
 
 Quando um tratador retorna um valor, ele se torna o resultado da promessa, então o próximo `.then` é chamado com ele.
 

diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -46,31 +46,50 @@ So we can't use `event.preventDefault()` there -- it's just too late, there woul
 
 These events occur on cutting/copying/pasting a value.
 
-They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
+They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is cut/copied/pasted.
 
 We also can use `event.preventDefault()` to abort the action.
 
-For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
+For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste:
 
 ```html autorun height=40 run
 <input type="text" id="input">
 <script>
-  input.oncut = input.oncopy = input.onpaste = function(event) {
-    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
-    return false;
+  input.onpaste = function(event) {
+    alert("paste: " + event.clipboardData.getData('text/plain'));
+    event.preventDefault();
+  };
+
+  input.oncut = input.oncopy = function(event) {
+    alert(event.type + '-' + document.getSelection());
+    event.preventDefault();
   };
 </script>
 ```
 
-Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
+Please note: inside `cut` and `copy` event handlers a call to  `event.clipboardData.getData(...)` returns an empty string. That's because technically the data isn't in the clipboard yet. If we use `event.preventDefault()` it won't be copied at all.
 
-That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods [in the specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+So the example above uses `document.getSelection()` to get the selected text. You can find more details about document selection in the article <info:selection-range>.
 
-```warn header="ClipboardAPI: user safety restrictions"
-The clipboard is a "global" OS-level thing. So most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers.
+It's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
 
-Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox.
-```
+That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+
+Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard).
+
+### Safety restrictions
+
+The clipboard is a "global" OS-level thing. A user may switch between various applications, copy/paste different things, and a browser page shouldn't see all that.
+
+So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc.
+
+It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "syntetic" events must not provide access to the clipboard.
+
+Even if someone decides to save `event.clipboardData` in an event handler, and then access it later -- it won't work.
+
+To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers.
+
+On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) is the more recent API, meant for use in any context. It asks for user permission, if needed. Not supported in Firefox.
 
 ## Summary
 
@@ -80,4 +99,4 @@ Data change events:
 |---------|----------|-------------|
 | `change`| A value was changed. | For text inputs triggers on focus loss. |
 | `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
-| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. |
+| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives access to the clipboard. All browsers except Firefox also support `navigator.clipboard`. |
diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
@@ -193,7 +193,7 @@ In practice, `defer` is used for scripts that need the whole DOM and/or their re
 And  `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.
 
 ```warn header="Page without scripts should be usable"
-Please note: if you're using `defer` or `async`, then user will see the the page *before* the script loads.
+Please note: if you're using `defer` or `async`, then user will see the page *before* the script loads.
 
 In such case, some graphical components are probably not initialized yet.