Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 0 additions & 1 deletion .gitattributes
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
* text=auto eol=lf
*.svg binary
21 changes: 0 additions & 21 deletions 1-js/01-getting-started/1-intro/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ Vamos ver o que há de tão especial no JavaScript, o que podemos fazer com ele,

*JavaScript* foi inicialmente criado para *" tornar páginas web vivas "*.

<<<<<<< HEAD
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.
=======
The programs in this language are called *scripts*. They can be written right in a web page's HTML and run automatically as the page loads.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

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

Expand Down Expand Up @@ -74,11 +70,7 @@ Exemplos de tais restrições incluem:
Existem maneiras de interagir com a câmera / microfone e outros dispositivos, mas eles exigem permissão explícita do usuário. Assim, uma página habilitada para JavaScript pode não habilmente habilitar uma câmera web, observar os arredores e enviar as informações para a [NSA](https://pt.wikipedia.org/wiki/Ag%C3%AAncia_de_Seguran%C3%A7a_Nacional).
- Diferentes abas/janelas geralmente não se conhecem mutuamente. Às vezes sim, por exemplo, quando uma janela usa JavaScript para abrir a outra. Mas mesmo neste caso, JavaScript de uma página pode não acessar a outra se eles vierem de sites diferentes (de um domínio, protocolo ou porta diferente).

<<<<<<< HEAD
Isso é chamado de "Política de mesma origem ". Para contornar isso, *ambas as páginas* devem conter um código JavaScript especial que lida com a troca de dados.
=======
This is called the "Same Origin Policy". To work around that, *both pages* must agree for data exchange and contain a special JavaScript code that handles it. We'll cover that in the tutorial.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

Essa limitação é, novamente, para a segurança do usuário. Uma página de `http://umsitequalquer.com.br` que um usuário abriu não deve poder alcançar uma outra aba do navegador com a URL `http://gmail.com` e roubar a informação de lá.
- O JavaScript pode se comunicar facilmente pela rede com o servidor de onde a página atual veio. Mas sua capacidade de receber dados de outros sites / domínios é prejudicada. Embora possível, requer acordo explícito (expresso em cabeçalhos HTTP) do lado remoto. Mais uma vez, isso é uma limitação de segurança.
Expand All @@ -100,12 +92,8 @@ JavaScript é a única tecnologia de navegador que combina estas três qualidade

Isso é o que torna o JavaScript único. É por isso que é a ferramenta mais difundida para criar interfaces de navegador.

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

=======
That said, JavaScript also allows to create servers, mobile applications, etc.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

## Linguagens "sobre" JavaScript

Expand All @@ -119,20 +107,11 @@ Ferramentas modernas tornam a transpilação muito rápida e transparente, permi

Exemplos de tais linguagens:

<<<<<<< HEAD
- [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.
- [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.
- [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.

Há mais. Claro que, mesmo que usemos uma dessas linguagens, também devemos saber JavaScript para entender o que estamos fazendo.
=======
- [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.
- [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.
- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
- [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.

There are more. Of course, even if we use one of transpiled languages, we should also know JavaScript to really understand what we're doing.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

## Resumo

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ 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:

<<<<<<< HEAD:1-js/01-getting-started/2-code-editors/article.md
- [WebStorm](http://www.jetbrains.com/webstorm/) para desenvolvimento de front-end. A mesma empresa oferece outros editores para outras linguagens (pago).
- [Netbeans](http://netbeans.org/) (livre).

Expand All @@ -21,14 +20,6 @@ Todas essas IDEs são multi-plataforma.
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/).

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ê.
=======
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid).

For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).

Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca:1-js/01-getting-started/3-code-editors/article.md

## Editores leves

Expand All @@ -42,7 +33,6 @@ Na prática, os editores leves podem ter muitos plug-ins, incluindo analisadores

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

<<<<<<< HEAD:1-js/01-getting-started/2-code-editors/article.md
- [Visual Studio Code](https://code.visualstudio.com/) (plataforma cruzada, livre) também tem muitos recursos similares a IDE.
- [Atom](https://atom.io/) (multi-plataforma, livre).
- [Sublime Text](http://www.sublimetext.com) (multi-plataforma, shareware).
Expand All @@ -59,14 +49,6 @@ Eu estou usando:
- Como um editor de peso leve -- [Sublime Text](http://www.sublimetext.com) ou [Atom](https://atom.io/).

## Não vamos discutir
=======
- [Atom](https://atom.io/) (cross-platform, free).
- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.

## Let's not argue
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca:1-js/01-getting-started/3-code-editors/article.md

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.

Expand Down
42 changes: 0 additions & 42 deletions 1-js/01-getting-started/2-manuals-specifications/article.md

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,11 @@ Abra Preferências e vá para o painel "Avançado". Há uma caixa de seleção n

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.

<<<<<<< HEAD:1-js/01-getting-started/3-devtools/article.md
## Entrada multi-linha

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

Para inserir várias linhas, pressione `key:Shift+Enter`.
=======
```smart header="Multi-line input"
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.

To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
```
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca:1-js/01-getting-started/4-devtools/article.md

## Resumo

Expand Down
Binary file added 1-js/01-getting-started/3-devtools/safari.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 1-js/01-getting-started/3-devtools/safari@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed 1-js/01-getting-started/4-devtools/safari.png
Binary file not shown.
Binary file removed 1-js/01-getting-started/4-devtools/safari@2x.png
Binary file not shown.
13 changes: 0 additions & 13 deletions 1-js/02-first-steps/01-hello-world/article.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Olá, mundo!

<<<<<<< HEAD
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.
=======
This part of the tutorial is about core JavaScript, the language itself.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

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.

Expand Down Expand Up @@ -49,13 +45,8 @@ A tag `<script>` contém código JavaScript que é executado automaticamente qua

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

<<<<<<< HEAD
O atributo `type`: <code>&lt;script <u>type</u>=...&gt;</code>
: 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.
=======
The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
: 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.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

O atributo `language`: <code>&lt;script <u>language</u>=...&gt;</code>
: 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.
Expand All @@ -82,13 +73,9 @@ Os arquivos de script são anexados ao HTML com o atributo `src`:
<script src="/path/to/script.js"></script>
```

<<<<<<< HEAD
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.
=======
Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

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

Expand Down
22 changes: 0 additions & 22 deletions 1-js/02-first-steps/03-strict-mode/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ Por um longo tempo, o JavaScript evoluiu sem problemas de compatibilidade. Novos

Isso teve o benefício de nunca quebrar o código existente. Mas a desvantagem foi que qualquer erro ou decisão imperfeita feita pelos criadores do JavaScript acabou ficando presa na linguagem para sempre.

<<<<<<< HEAD
Este foi o caso até 2009, quando ECMAScript 5 (ES5) apareceu. Adicionou novos recursos à linguagem e modificou alguns dos existentes. Para manter o código antigo funcionando, a maioria das modificações está desativada por padrão. Você precisa habilitá-los explicitamente com uma diretiva especial: `" use strict "`.
=======
This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

## "use strict"

Expand All @@ -23,12 +19,8 @@ For example:
...
```

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

=======
We will learn functions (a way to group commands) soon. Looking ahead, let's note that `"use strict"` can be put at the beginning of the function body instead of the whole script. Doing that enables strict mode in that function only. But usually, people use it for the whole script.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

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.

Expand All @@ -51,23 +43,9 @@ Para o futuro, quando você usar o console do navegador para testar funcionalida

As vezes, quando usar `use strict` faz alguma diferença, você terá resultados incorretos.

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

A maneira confiável de garantir `use strict` seria inserir o código no console da seguinte forma:
=======
You can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this:

```js
'use strict'; <Shift+Enter for a newline>
// ...your code
<Enter to run>
```

It works in most browsers, namely Firefox and Chrome.

If it doesn't, the most reliable way to ensure `use strict` would be to input the code into console like this:
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

```js
(function() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
<<<<<<< HEAD
Primeiro, a variável para o nome do nosso planeta.
=======
## The variable for our planet
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

Isso é simples:

Expand All @@ -12,11 +8,7 @@ let ourPlanetName = "Earth";

Note que poderíamos usar um nome mais curto, `planet`, mas pode não ser óbvio a que planeta se refere. É bom ser mais detalhado. Pelo menos até a variável isNotTooLong.

<<<<<<< HEAD
Em segundo lugar, o nome do visitante atual:
=======
## The name of the current visitor
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca

```js
let currentUserName = "John";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,4 @@ Nós geralmente usamos letras maiúsculas para constantes que são "hard-coded".

Neste código, o `birthday` é exatamente assim. Então nós poderíamos usar a maiúscula para ele.

<<<<<<< HEAD
Em contraste, `age` é avaliada em tempo de execução. Hoje temos uma idade, um ano depois teremos outra. É constante no sentido de não mudar através da execução do código. Mas é um pouco "menos constante" do que `birthday`, é calculada, por isso devemos manter as minúsculas para ela.
=======
In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`: it is calculated, so we should keep the lower case for it.
>>>>>>> 5cb9760abb8499bf1e99042d866c3c1db8cd61ca
Em contraste, `age` é avaliada em tempo de execução. Hoje temos uma idade, um ano depois teremos outra. É constante no sentido de não mudar através da execução do código. Mas é um pouco "menos constante" do que `birthday`, é calculada, por isso devemos manter as minúsculas para ela.
Loading