Skip to content

Commit 6aeed8b

Browse files
Merge branch 'master' into javascript-animations
2 parents 0c25396 + 453a42f commit 6aeed8b

File tree

816 files changed

+39714
-19966
lines changed

Some content is hidden

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

816 files changed

+39714
-19966
lines changed

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ Os scripts são fornecidos e executados como texto puro. Eles não precisam de p
1212

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

15-
```smart header="Por que <u>Java</u>Script?"
16-
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.
15+
```smart header="Por que é chamado <u>Java</u>Script?"
16+
Quando o JavaScript foi criado, inicialmente 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.
1717
1818
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.
1919
```
@@ -26,7 +26,7 @@ Interpretadores diferentes têm "codinomes" diferentes. Por exemplo:
2626

2727
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- no Chrome e no Opera.
2828
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- no Firefox.
29-
- ...Há outros codinomes como "Trident" e "Chakra" para diferentes versões do IE, "ChakraCore" para Microsoft Edge, "Nitro" e "SquirrelFish" para Safari, etc.
29+
- ...Há outros codinomes como "Chakra" para o IE, "ChakraCore" para Microsoft Edge, "Nitro" e "SquirrelFish" para Safari, etc.
3030

3131
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.
3232

@@ -38,7 +38,7 @@ Os interpretadores são complicados. Mas o básico é fácil.
3838
2. Depois converte ("compila") o script para a linguagem da máquina.
3939
3. E então o código da máquina é executado, bem rápido.
4040
41-
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.
41+
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.
4242
```
4343

4444
## O que o JavaScript no navegador pode fazer?
@@ -94,7 +94,6 @@ Isso é o que torna o JavaScript único. É por isso que é a ferramenta mais di
9494

9595
Ao passo que planeja aprender uma nova tecnologia, é benéfico verificar suas perspectivas. Então, vamos seguir para as tendências modernas que o afetam, incluindo novas linguagens e habilidades de navegador.
9696

97-
9897
## Linguagens "sobre" JavaScript
9998

10099
A sintaxe do JavaScript não se adapta às necessidades de todos. Pessoas diferentes querem características diferentes.
@@ -108,10 +107,13 @@ Ferramentas modernas tornam a transpilação muito rápida e transparente, permi
108107
Exemplos de tais linguagens:
109108

110109
- [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.
111-
- [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.
112-
- [Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio mecanismo que roda em ambientes sem navegador (como aplicativos móveis). Ela foi inicialmente oferecida pelo Google como um substituto para JavaScript, mas a partir de agora, os navegadores exigem que ela seja transpilada para JavaScript da mesma forma que as anteriores.
110+
- [TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "estritos tipos de dados" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft.
111+
- [Flow](http://flow.org/) também adiciona tipos de dados, mas de uma forma diferente. Desenvolvido pela Facebook.
112+
- [Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio interpretador que roda em ambientes fora do navegador (como aplicativos móveis), mas também pode ser transpilada para JavaScript. Desenvolvida pela Google.
113+
- [Brython](https://brython.info/) é um transpilador de Python para JavaScript que permite escrever aplicativos em puro Python, sem JavaScript.
114+
- [Kotlin](https://kotlinlang.org/docs/js-overview.html) é uma linguagem de programação moderna, concisa e segura, que pode ser usada no navegador ou no Node.
113115

114-
Há mais. Claro que, mesmo que usemos uma dessas linguagens, também devemos saber JavaScript para entender o que estamos fazendo.
116+
Há mais. Claro que, mesmo que usemos uma dessas linguagens transpiladas, também devemos saber JavaScript para entender o que estamos fazendo.
115117

116118
## Resumo
117119

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
1+
12
# Manuais e especificações
23

34
Este livro é um *tutorial*. Ele tem como objetivo lhe ajudar a aprender gradualmente a linguagem. Mas uma vez familiarizado com o básico, irá precisar de outros recursos.
45

56
## Especificação
67

7-
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.
8+
A [Especificaçã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.
89

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.
1011

1112
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/>.
1213

1314
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>.
1415

15-
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.
16+
E mais, se você está desenvolvendo para browsers, há outras especificações que cobrem esta demanda na [segunda parte](info:browser-environment) do tutorial.
1617

1718
## Manuais
1819

19-
- **MDN (Mozilla) JavaScript Reference** é um manual com exemplos e outras informações. É ótimo para um entendimento sobre funções, métodos da linguagem, etc.
20+
- **MDN (Mozilla) JavaScript Reference** é um manual com exemplos e outras informações. É ótimo para um entendimento sobre funções da linguagem, métodos , etc.
2021

2122
Pode ser encontrado em <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.
2223

2324
Porém, às vezes é melhor fazer uma busca na internet. Apenas use "MDN [termo]" na busca, por exemplo: <https://google.com/search?q=MDN+parseInt> para procurar pela função `parseInt`.
2425

25-
- **MSDN** - Manual da Microsoft com muitas informações, incluindo JavaScript (frequentemente referido como JScript). Se precisar de algo específico para o Internet Explorer, é melhor ir por aqui: <http://msdn.microsoft.com/>.
26-
27-
Assim como para o manual da Mozilla, também podemos fazer uma busca na internet com frases do tipo "RegExp MSDN" ou "RegExp MSDN jscript".
28-
2926
## Tabelas de compatibilidade
3027

3128
JavaScript é uma linguagem em desenvolvimento, novas funcionalidades são adicionadas regularmente.

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

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,8 @@ Uma IDE carrega o projeto (que pode ter muitos arquivos), permite navegação en
1212

1313
Se você ainda não tiver selecionado uma IDE, considere as seguintes opções:
1414

15-
- [WebStorm](http://www.jetbrains.com/webstorm/) para desenvolvimento de front-end. A mesma empresa oferece outros editores para outras linguagens (pago).
16-
- [Netbeans](http://netbeans.org/) (livre).
17-
18-
Todas essas IDEs são multi-plataforma.
15+
- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre).
16+
- [WebStorm](http://www.jetbrains.com/webstorm/) (plataforma cruzada, pago).
1917

2018
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/).
2119

@@ -33,25 +31,16 @@ Na prática, os editores leves podem ter muitos plug-ins, incluindo analisadores
3331

3432
As seguintes opções merecem sua atenção:
3533

36-
- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre) também tem muitos recursos similares a IDE.
37-
- [Atom](https://atom.io/) (multi-plataforma, livre).
38-
- [Sublime Text](http://www.sublimetext.com) (multi-plataforma, shareware).
34+
- [Atom](https://atom.io/) (plataforma cruzada, livre).
35+
- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre).
36+
- [Sublime Text](http://www.sublimetext.com) (plataforma cruzada, shareware).
3937
- [Notepad++](https://notepad-plus-plus.org/) (Windows, livre).
4038
- [Vim](http://www.vim.org/) e [Emacs](https://www.gnu.org/software/emacs/) também são legais se você sabe como usá-los.
4139

42-
## Os meus favoritos
43-
44-
A preferência pessoal do autor deve ter uma IDE para projetos e um editor leve para edição de arquivo rápida e fácil.
45-
46-
Eu estou usando:
47-
48-
- Como uma IDE para JS -- [WebStorm](http://www.jetbrains.com/webstorm/) (Eu mudo para uma das outras ofertas do JetBrains quando uso outras linguagens)
49-
- Como um editor de peso leve -- [Sublime Text](http://www.sublimetext.com) ou [Atom](https://atom.io/).
50-
5140
## Não vamos discutir
5241

5342
Os editores nas listas acima são aqueles que eu ou os meus amigos que eu considero bons desenvolvedores têm usado por um longo tempo e estão felizes com eles.
5443

5544
Há outros grandes editores no nosso grande mundo. Por favor, escolha o que você mais gosta.
5645

57-
A escolha de um editor, como qualquer outra ferramenta, é individual e depende de seus projetos, hábitos e preferências pessoais.
46+
A escolha de um editor, como qualquer outra ferramenta, é individual e depende de seus projetos, hábitos e preferências pessoais.

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# Console do desenvolvedor
22

3-
O código é propenso a erros. Você provavelmente cometerá erros ... Oh, do que estou falando? Você está * inevitavelmente * cometendo erros, pelo menos se você for um humano, não um [robô] (https://pt.wikipedia.org/wiki/Bender_Bending_Rodr%C3%ADguez).
3+
O código é propenso a erros. Você provavelmente cometerá erros ... Oh, do que estou falando? Você está *inevitavelmente* cometendo erros, pelo menos se você for um humano, não um [robô] (<https://pt.wikipedia.org/wiki/Bender_Bending_Rodr%C3%ADguez).>
44

55
Mas no navegador, os usuários não vêem os erros por padrão. Assim, se algo correr mal no script, não veremos de onde está partindo e não poderemos corrigir.
66

77
Para que possamos visualizar erros e obter muitas outras informações úteis sobre scripts, as "ferramentas de desenvolvedor" foram incorporadas aos navegadores.
88

99
A maioria dos desenvolvedores escolhem o Chrome ou o Firefox para o desenvolvimento porque esses navegadores têm as melhores ferramentas de desenvolvedor. Outros navegadores também fornecem ferramentas de desenvolvedor, às vezes com recursos especiais, mas geralmente estão jogando "catch-up" no Chrome ou Firefox. Assim, a maioria dos desenvolvedores tem um navegador "favorito" e muda para outros se um problema é específico do navegador.
1010

11-
As ferramentas do desenvolvedor são potentes; elas têm muitos recursos. Para começar, vamos aprender como abri-las, olhar para erros e executar comandos JavaScript.
11+
As ferramentas do desenvolvedor são potentes; elas têm muitos recursos. Para começar, vamos aprender como as abrir, olhar para erros e executar comandos JavaScript.
1212

1313
## Google Chrome
1414

@@ -29,10 +29,16 @@ 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-
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).
32+
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.
3333

3434
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>.
3535

36+
```smart header="Multi-line input"
37+
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
38+
39+
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
40+
```
41+
3642
## Firefox, Edge, e outros
3743

3844
A maioria dos outros navegadores usam `key:F12` para abrir ferramentas de desenvolvimento.
@@ -49,15 +55,9 @@ Abra Preferências e vá para o painel "Avançado". Há uma caixa de seleção n
4955

5056
Agora o `key:Cmd+Opt+C` pode alternar o console. Além disso, note que o novo item do menu superior chamado "Develop" apareceu. Ele tem muitos comandos e opções.
5157

52-
## Entrada multi-linha
53-
54-
Normalmente, quando colocamos uma linha de código no console, e então pressionamos `key:Enter`, ele executa.
55-
56-
Para inserir várias linhas, pressione `key:Shift+Enter`.
57-
5858
## Resumo
5959

6060
- As ferramentas de desenvolvedor nos permitem ver erros, executar comandos, examinar variáveis e muito mais.
6161
- 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).
6262

63-
Agora temos o ambiente pronto. Na próxima seção, chegaremos ao JavaScript.
63+
Agora temos o ambiente pronto. Na próxima seção, chegaremos ao JavaScript.
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/1-hello-alert/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importância: 5
1+
importance: 5
22

33
---
44

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Olá, mundo!
22

3-
O tutorial que você está lendo é sobre a core do JavaScript, que é independente de plataforma. Mais tarde, você vai aprender sobre Node.js e outras plataformas que o usam.
3+
Esta parte do tutorial é sobre a core do JavaScript, a própria linguagem.
44

55
Mas precisamos de um ambiente de trabalho para rodar nossos scripts e, como esse livro está online, o navegador é uma boa escolha. Vamos manter a quantidade de comandos específicos do navegador (como `alert`) no mínimo para que você não gaste tempo com eles se você planeja se concentrar em outro ambiente (como Node.js). Vamos focar em JavaScript no navegador na [próxima parte](/ui) do tutorial.
66

@@ -9,7 +9,7 @@ Então, primeiro, vamos ver como anexar um script a uma página. Para ambientes
99

1010
## A tag "script"
1111

12-
Os programas JavaScript podem ser inseridos em qualquer parte de um documento HTML com a ajuda da tag `<script>`.
12+
Os programas JavaScript podem ser inseridos em quase qualquer parte de um documento HTML com a ajuda da tag `<script>`.
1313

1414
Por exemplo:
1515

@@ -49,7 +49,7 @@ O atributo `type`: <code>&lt;script <u>type</u>=...&gt;</code>
4949
: 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.
5050

5151
O atributo `language`: <code>&lt;script <u>language</u>=...&gt;</code>
52-
: 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.
52+
: 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 o usar.
5353

5454
Comentários antes e depois dos scripts.
5555
: Em livros e guias realmente antigos, você pode encontrar comentários dentro de tags `<script>`, assim:
@@ -73,14 +73,12 @@ Os arquivos de script são anexados ao HTML com o atributo `src`:
7373
<script src="/path/to/script.js"></script>
7474
```
7575

76-
Aqui, `/path/to/script.js` é um caminho absoluto para o arquivo script (da raiz do site).
77-
78-
Você também pode fornecer um caminho relativo a partir da página atual. Por exemplo, `src="script.js"` significaria um arquivo `"script.js"` na pasta atual.
76+
Aqui, `/path/to/script.js` é um caminho absoluto para o arquivo script (da raiz do site). Você também pode fornecer um caminho relativo a partir da página atual. Por exemplo, `src="script.js"` significaria um arquivo `"script.js"` na pasta atual.
7977

8078
Nós também podemos dar uma URL completa. Por exemplo:
8179

8280
```html
83-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
81+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
8482
```
8583

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

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ alert('Mundo')
3636

3737
Aqui, o JavaScript interpreta a quebra de linha como um ponto-e-vírgula "implícito". Isso é chamado de [inserção automática de ponto-e-vírgula](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
3838

39-
**Na maioria dos casos, uma nova linha implica um ponto e vírgula. Mas "na maioria dos casos" não significa "sempre"!
39+
**Na maioria dos casos, uma nova linha implica um ponto e vírgula. Mas "na maioria dos casos" não significa "sempre"!**
4040

4141
Há casos em que uma nova linha não significa ponto e vírgula. Por exemplo:
42+
4243
```js run no-beautify
4344
alert(3 +
4445
1
@@ -93,7 +94,7 @@ Mas devem ser duas declarações separadas, não uma. Tal fusão neste caso é c
9394

9495
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.
9596

96-
## Comentários
97+
## Comentários [#code-comments]
9798

9899
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ê.
99100

@@ -135,11 +136,11 @@ alert('Mundo');
135136
```
136137

137138
```smart header="Use hotkeys!"
138-
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`.
139+
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` e `key:Option` em vez de `key:Shift`.
139140
```
140141

141142
````warn header="Comentários aninhados não são suportados!"
142-
Pode não haver `/*...*/` dentro de outro `/*...*/`.
143+
Não pode haver `/*...*/` dentro de outro `/*...*/`.
143144
144145
Tal código morrerá com um erro:
145146

0 commit comments

Comments
 (0)