Skip to content

Commit 6632c93

Browse files
authored
Merge pull request #178 from javascript-tutorial/sync-e074a5f8
Sync with upstream @ e074a5f
2 parents 9269d5b + 4b95b65 commit 6632c93

File tree

533 files changed

+9532
-6785
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

533 files changed

+9532
-6785
lines changed

1-js/01-getting-started/1-intro/article.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,25 @@ Vamos ver o que há de tão especial no JavaScript, o que podemos fazer com ele,
44

55
## O que é JavaScript?
66

7+
<<<<<<< HEAD
78
*JavaScript* foi inicialmente criado para *" tornar páginas web vivas "*.
9+
=======
10+
*JavaScript* was initially created to "make web pages alive".
11+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
812
913
Os programas nesta linguagem são chamados de *scripts*. Eles podem ser escritos diretamente no HTML de uma página web e executados automaticamente quando a página é carregada.
1014

1115
Os scripts são fornecidos e executados como texto puro. Eles não precisam de preparação ou compilação especial para serem executados.
1216

1317
Neste aspecto, o JavaScript é muito diferente de outra linguagem chamada [Java](https://pt.wikipedia.org/wiki/Java_(linguagem_de_programação)).
1418

19+
<<<<<<< HEAD
1520
```smart header="Por que <u>Java</u>Script?"
1621
Quando foi criado, inicialmente o JavaScript tinha outro nome: "LiveScript". Mas Java era muito popular naquela época, então foi decidido que posicionar uma nova linguagem como um "irmão mais novo" de Java ajudaria.
22+
=======
23+
```smart header="Why is it called <u>Java</u>Script?"
24+
When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help.
25+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
1726
1827
Mas à medida que ele evoluiu, o JavaScript se tornou uma linguagem totalmente independente com sua própria especificação chamada [ECMAScript] (http://en.wikipedia.org/wiki/ECMAScript), e agora ele não tem nenhuma relação com Java.
1928
```
@@ -38,7 +47,11 @@ Os interpretadores são complicados. Mas o básico é fácil.
3847
2. Depois converte ("compila") o script para a linguagem da máquina.
3948
3. E então o código da máquina é executado, bem rápido.
4049
50+
<<<<<<< HEAD
4151
O interpretador aplica otimizações em cada etapa do processo. Ele ainda observa o script compilado enquanto ele roda, analisa os dados que passam por ele e aplica otimizações ao código da máquina com base nesse conhecimento. Quando isso é feito, os scripts são executados rapidamente.
52+
=======
53+
The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge.
54+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
4255
```
4356

4457
## O que o JavaScript no navegador pode fazer?
@@ -63,7 +76,11 @@ As habilidades do JavaScript no navegador são limitadas por uma questão de seg
6376

6477
Exemplos de tais restrições incluem:
6578

79+
<<<<<<< HEAD
6680
- JavaScript em uma página não pode ler/gravar arquivos arbitrários no disco rígido, copiá-los ou executar programas. Não tem acesso direto às funções do sistema operacional.
81+
=======
82+
- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions.
83+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
6784
6885
Os navegadores modernos permitem que ele trabalhe com arquivos, mas o acesso é limitado e fornecido apenas se o usuário executar determinadas ações, como "dropping" de um arquivo em uma janela do navegador ou selecioná-lo por meio de uma tag `<input>`.
6986

@@ -105,7 +122,15 @@ Então, recentemente uma infinidade de novas linguagens apareceu, que são *tran
105122

106123
Ferramentas modernas tornam a transpilação muito rápida e transparente, permitindo que os desenvolvedores codifiquem em outra linguagem e auto-convertendo-a "sob o capô".
107124

125+
<<<<<<< HEAD
108126
Exemplos de tais linguagens:
127+
=======
128+
- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
129+
- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft.
130+
- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
131+
- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
132+
- [Brython](https://brython.info/) is a Python transpiler to JavaScript that allow to write application in pure Python without JavaScript.
133+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
109134
110135
- [CoffeeScript](http://coffeescript.org/) é um "açúcar sintático" para JavaScript. Ele introduz uma sintaxe mais curta, permitindo-nos escrever um código mais claro e preciso. Normalmente, Ruby devs gostam dele.
111136
- [TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "dados estritos de digitação" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft.

1-js/01-getting-started/2-manuals-specifications/article.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,19 @@ Este livro é um *tutorial*. Ele tem como objetivo lhe ajudar a aprender gradual
66

77
A [Especificacão ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contém as mais profundas, detalhadas e formalizadas informações sobre JavaScript. Ela define a linguagem.
88

9+
<<<<<<< HEAD
910
Mas, estando num formato mais formal, fica difícil de entender à primeira vista. Porém, se você precisa da mais confiável fonte de informações sobre detalhes da linguagem, está no lugar certo. Contudo, não é para o uso cotidiano.
11+
=======
12+
[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language.
13+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
1014
1115
Uma nova versão dessa especificação é lançada todos os anos. Entre estes lançamentos, a sua última versão de esboço se encontra em <https://tc39.es/ecma262/>.
1216

17+
<<<<<<< HEAD
1318
Para ler sobre as mais novas funcionalidades (*bleeding-edge features*), incluindo as que estão em fase de padronização (chamadas também de "estágio 3"), veja as suas propostas em <https://github.com/tc39/proposals>.
19+
=======
20+
A new specification version is released every year. In-between these releases, the latest specification draft is at <https://tc39.es/ecma262/>.
21+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
1422
1523
E mais, se você está desenvolvendo para browsers, há outras especificações que cobrem esta demanda na [segunda parte](https://javascript.info/browser-environment) do tutorial.
1624

1-js/01-getting-started/3-code-editors/article.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,15 @@ A principal diferença entre um "editor leve" e uma "IDE", é que uma IDE trabal
3131

3232
Na prática, os editores leves podem ter muitos plug-ins, incluindo analisadores de sintaxe no nível de diretório e preenchimentos automáticos, portanto não há uma limitação rígida entre um editor leve e uma IDE.
3333

34+
<<<<<<< HEAD
3435
As seguintes opções merecem sua atenção:
36+
=======
37+
- [Atom](https://atom.io/) (cross-platform, free).
38+
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
39+
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
40+
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
41+
- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
42+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
3543
3644
- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre) também tem muitos recursos similares a IDE.
3745
- [Atom](https://atom.io/) (multi-plataforma, livre).

1-js/01-getting-started/4-devtools/article.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,23 @@ O aspecto exato das ferramentas de desenvolvimento depende da sua versão do Chr
2929
- Aqui podemos ver a mensagem de erro de cor vermelha. Neste caso, o script contém um comando "lalala" desconhecido.
3030
- À direita, há um link clicável para o código-fonte `bug.html:12` com o número da linha onde o erro ocorreu.
3131

32+
<<<<<<< HEAD
3233
Abaixo da mensagem de erro, há um símbolo azul `>`. Ele marca uma "linha de comando" onde podemos digitar comandos JavaScript. Pressione `key:Enter` para executá-los (`key:Shift+Enter` para introduzir comandos multi-linha).
34+
=======
35+
Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
36+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
3337
3438
Agora podemos ver erros, e isso é suficiente para começar. Voltaremos mais tarde às ferramentas de desenvolvedor e abordaremos a depuração mais profundamente no capítulo <info:debugging-chrome>.
3539

40+
<<<<<<< HEAD
3641
## Firefox, Edge, e outros
42+
=======
43+
```smart header="Multi-line input"
44+
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
45+
46+
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
47+
```
48+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
3749
3850
A maioria dos outros navegadores usam `key:F12` para abrir ferramentas de desenvolvimento.
3951

@@ -51,11 +63,15 @@ Agora o `key:Cmd+Opt+C` pode alternar o console. Além disso, note que o novo it
5163

5264
## Entrada multi-linha
5365

66+
<<<<<<< HEAD
5467
Normalmente, quando colocamos uma linha de código no console, e então pressionamos `key:Enter`, ele executa.
5568

5669
Para inserir várias linhas, pressione `key:Shift+Enter`.
5770

5871
## Resumo
72+
=======
73+
## Summary
74+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
5975
6076
- As ferramentas de desenvolvedor nos permitem ver erros, executar comandos, examinar variáveis e muito mais.
6177
- Elas podem ser abertas com `key:F12` para a maioria dos navegadores no Windows. O Chrome para Mac precisa de `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (precisa ser ativado primeiro).
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<body>
5+
6+
<script>
7+
alert( "I'm JavaScript!" );
8+
</script>
9+
10+
</body>
11+
12+
</html>
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
[html src="index.html"]

1-js/02-first-steps/01-hello-world/article.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,13 @@ A tag `<script>` contém código JavaScript que é executado automaticamente qua
4545

4646
A tag `<script>` tem alguns atributos que raramente são usados hoje em dia, mas que ainda podem ser encontrados em códigos antigos:
4747

48+
<<<<<<< HEAD
4849
O atributo `type`: <code>&lt;script <u>type</u>=...&gt;</code>
4950
: O antigo padrão HTML, HTML4, requeria um script para ter um `type`. Normalmente era `type="text/javascript"`. Não é mais necessário. Além disso, o moderno padrão HTML, HTML5, mudou totalmente o significado deste atributo. Agora, ele pode ser usado para módulos JavaScript. Mas esse é um tópico avançado; vamos falar sobre módulos em outra parte do tutorial.
51+
=======
52+
The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
53+
: The old HTML standard, HTML4, required a script to have a `type`. Usually it was `type="text/javascript"`. It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic, we'll talk about modules in another part of the tutorial.
54+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
5055
5156
O atributo `language`: <code>&lt;script <u>language</u>=...&gt;</code>
5257
: Este atributo foi criado para mostrar o idioma do script. Este atributo não faz mais sentido porque JavaScript é a linguagem padrão. Não há necessidade de usá-lo.
@@ -60,7 +65,11 @@ Comentários antes e depois dos scripts.
6065
//--></script>
6166
```
6267

68+
<<<<<<< HEAD
6369
Esse truque não é usado no JavaScript moderno. Esses comentários esconderam código JavaScript de navegadores antigos que não sabiam como processar a tag `<script>`. Como os navegadores lançados nos últimos 15 anos não têm esse problema, esse tipo de comentário pode ajudá-lo a identificar códigos realmente antigos.
70+
=======
71+
This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the `<script>` tag. Since browsers released in the last 15 years don't have this issue, this kind of comment can help you identify really old code.
72+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
6473
6574

6675
## Scripts externos
@@ -80,7 +89,7 @@ Você também pode fornecer um caminho relativo a partir da página atual. Por e
8089
Nós também podemos dar uma URL completa. Por exemplo:
8190

8291
```html
83-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
8493
```
8594

8695
Para anexar vários scripts, use múltiplas tags:

1-js/02-first-steps/02-structure/article.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,11 @@ Mas devem ser duas declarações separadas, não uma. Tal fusão neste caso é c
9393

9494
Recomendamos colocar ponto e vírgula entre as frases, mesmo que estejam separadas por novas linhas. Esta regra é amplamente adotada pela comunidade. Vamos notar mais uma vez -- *é possível* deixar de fora os pontos e vírgulas na maior parte do tempo. Mas é mais seguro -- especialmente para um iniciante -- usá-los.
9595

96+
<<<<<<< HEAD
9697
## Comentários
98+
=======
99+
## Comments [#code-comments]
100+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
97101
98102
Com o passar do tempo, os programas tornam-se cada vez mais complexos. Torna-se necessário adicionar *comentários* que descrevem o que o código faz e porquê.
99103

@@ -135,7 +139,11 @@ alert('Mundo');
135139
```
136140

137141
```smart header="Use hotkeys!"
142+
<<<<<<< HEAD
138143
Na maioria dos editores, uma linha de código pode ser comentada pressionando a tecla de atalho `key:Ctrl+/` para um comentário de linha única e algo como `key:Ctrl+Shift+/` -- para comentários multilinha (selecione um pedaço de código e pressione a tecla de atalho). Para Mac, tente `key:Cmd` em vez de `key:Ctrl`.
144+
=======
145+
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
146+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
139147
```
140148

141149
````warn header="Comentários aninhados não são suportados!"

1-js/02-first-steps/03-strict-mode/article.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,12 @@ For example:
1919
...
2020
```
2121

22+
<<<<<<< HEAD
2223
Nós vamos aprender sobre funções, uma forma de agupar comandos, em breve.
2324

25+
=======
26+
Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script.
27+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
2428
2529
Vamos apenas observar que "use strict" pode ser colocado no início da maioria dos tipos de funções em vez do script inteiro. Fazer isso habilita o modo estrito apenas nessa função. Mas geralmente, as pessoas usam no script inteiro.
2630

@@ -39,18 +43,44 @@ Apenas comentários devem aparecer acima de `"use strict"`.
3943

4044
## Console do navegador
4145

46+
<<<<<<< HEAD
4247
Para o futuro, quando você usar o console do navegador para testar funcionalidades, observe que ele não "usa strict" por padrão.
4348

4449
As vezes, quando usar `use strict` faz alguma diferença, você terá resultados incorretos.
50+
=======
51+
Once we enter strict mode, there's no going back.
52+
```
53+
54+
## Browser console
55+
56+
When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default.
57+
58+
Sometimes, when `use strict` makes a difference, you'll get incorrect results.
59+
60+
So, how to actually `use strict` in the console?
61+
62+
First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this:
63+
64+
```js
65+
'use strict'; <Shift+Enter for a newline>
66+
// ...your code
67+
<Enter to run>
68+
```
69+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
4570
4671
Mesmo se pressionarmos `key: Shift + Enter` para inserir várias linhas e colocar` use strict` no topo, isso não funcionará. Isso é por causa de como o console executa o código internamente.
4772

73+
<<<<<<< HEAD
4874
A maneira confiável de garantir `use strict` seria inserir o código no console da seguinte forma:
75+
=======
76+
If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper:
77+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
4978
5079
```js
5180
(function() {
5281
'use strict';
5382

83+
<<<<<<< HEAD
5484
// ...seu código...
5585
})()
5686
```
@@ -67,3 +97,24 @@ Por agora, de um momento geral, basta saber sobre isso:
6797
2. O modo estrito é ativado colocando `" use strict "` no topo de um script ou função. Vários recursos de idioma, como "classes" e "módulos", ativam o modo estrito automaticamente.
6898
3. Modo estrito é suportado por todos os navegadores modernos.
6999
4. Recomendamos sempre iniciar scripts com `" use strict "`. Todos os exemplos neste tutorial assumem o modo estrito, a menos que (muito raramente) seja especificado de outra forma.
100+
=======
101+
// ...your code here...
102+
})()
103+
```
104+
105+
## Should we "use strict"?
106+
107+
The question may sound obvious, but it's not so.
108+
109+
One could recommend to start scripts with `"use strict"`... But you know what's cool?
110+
111+
Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them.
112+
113+
**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.**
114+
115+
As of now, we've got to know about `use strict` in general.
116+
117+
In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better.
118+
119+
All examples in this tutorial assume strict mode unless (very rarely) specified otherwise.
120+
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3

0 commit comments

Comments
 (0)