You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/01-debugging-chrome/article.md
+2-22Lines changed: 2 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,9 @@
2
2
3
3
Antes de escrevermos código mais complexo, vamos falar de debugging (depuração de erros).
4
4
5
-
<<<<<<< HEAD
6
-
[Depuração](https://pt.wikipedia.org/wiki/Depura%C3%A7%C3%A3o) é o processo de procura e correção de erros num programa. Todos os navegadores (*browsers*) modernos e muitas outras plataformas (*environments*) suportam ferramentas de *debugging* -- uma UI (Interface de Utilizador) disponível nas ferramentas do desenvolvedor (*developer tools*) que torna a depuração de erros muito mais fácil. Ela também permite rastrear o código passo-a-passo para ver exactamente o que está a ser executado.
7
-
8
-
Aqui, vamos utilizar o Chrome porque tem bastantes funcionalidades, mas a maioria dos outros navegadores possuem um processo similar.
9
-
=======
10
-
[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
5
+
[Depuração](https://pt.wikipedia.org/wiki/Depura%C3%A7%C3%A3o) é o processo de procura e correção de erros num programa. Todos os navegadores (*browsers*) modernos e muitas outras plataformas (*environments*) suportam ferramentas de *debugging* -- uma UI (Interface de Utilizador) especial disponível nas ferramentas do desenvolvedor (*developer tools*) que torna a depuração de erros muito mais fácil. Ela também permite rastrear o código passo-a-passo para ver exatamente o que está a ser executado.
11
6
12
-
We'll be using Chrome here, because it has enough features, most other browsers have a similar process.
13
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
7
+
Aqui, vamos utilizar o Chrome porque tem muitas funcionalidades, mas a maioria dos outros navegadores possuem um processo similar.
14
8
15
9
## O painel "*Sources*"
16
10
@@ -24,33 +18,19 @@ Aqui está o que poderá ver, se o estiver a fazer pela primeira vez:
24
18
25
19

26
20
27
-
<<<<<<< HEAD
28
21
O botão de alternador <spanclass="devtools"style="background-position:-172px-98px"></span> abre o separador com os ficheiros.
29
-
=======
30
-
The toggler button <spanclass="devtools"style="background-position:-172px-98px"></span> opens the tab with files.
31
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
32
22
33
23
Vamos clicar nele, e selecionar `hello.js` na vista de árvore de recursos apresentada. Aqui está o que deveria ser mostrado:
34
24
35
25

36
26
37
-
<<<<<<< HEAD
38
27
O painel *Sources* possui 3 partes:
39
28
40
29
1. O painel **File Navigator**, lista ficheiros de HTML, JavaScript, CSS e outros, incluindo imagens anexadas à página. Extensões ao Chrome (*Chrome extensions*) também podem aparecer aqui.
41
30
2. O painel **Code Editor**, mostra o código-fonte.
42
31
3. O painel **JavaScript Debugging**, é para a depuração de erros; iremos explorá-lo em breve.
43
32
44
33
Agora, poderia clicar novamente no mesmo botão de alternador <spanclass="devtools"style="background-position:-172px-122px"></span> para ocultar a lista de recursos e dar ao código algum espaço.
45
-
=======
46
-
The Sources panel has 3 parts:
47
-
48
-
1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
49
-
2. The **Code Editor** pane shows the source code.
50
-
3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon.
51
-
52
-
Now you could click the same toggler <spanclass="devtools"style="background-position:-172px-122px"></span> again to hide the resources list and give the code some space.
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/02-coding-style/article.md
+1-13Lines changed: 1 addition & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,13 +25,8 @@ let x = prompt("x?", "");
25
25
let n = prompt("n?", "");
26
26
27
27
if (n < 0) {
28
-
<<<<<<< HEAD
29
28
alert(`A potência de ${n} não é suportada,
30
29
por favor insira um número inteiro positivo`);
31
-
=======
32
-
alert(`Power ${n} is not supported,
33
-
please enter a non-negative integer number`);
34
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
35
30
} else {
36
31
alert( pow(x, n) );
37
32
}
@@ -92,14 +87,7 @@ Por exemplo:
92
87
```js
93
88
// o acento grave (*backtick*) ` permite repartir uma *string* por múltiplas linhas
94
89
let str =`
95
-
<<<<<<< HEAD
96
-
O TC39 da ECMA International, é um grupo de desenvolvedores e implementadores de JavaScript, académicos, e outros, colaborando com a comunidade para manter e
97
-
evoluir a definição de JavaScript.
98
-
=======
99
-
ECMA International's TC39 is a group of JavaScript developers,
100
-
implementers, academics, and more, collaborating with the community
101
-
to maintain and evolve the definition of JavaScript.
102
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
90
+
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.
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/03-comments/article.md
-24Lines changed: 0 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,6 @@ Descreva a arquitetura
124
124
Documente os parâmetros e o uso da função
125
125
: Existe uma sintaxe especial, [JSDoc](http://en.wikipedia.org/wiki/JSDoc), para documentar uma função: o seu uso, parâmetros, e valor retornado.
126
126
127
-
<<<<<<< HEAD
128
127
Por exemplo:
129
128
130
129
```js
@@ -134,35 +133,17 @@ Por exemplo:
134
133
* @param{number}x O número a elevar.
135
134
* @param{number}n A potência, deve ser um número natural.
136
135
* @return{number} x elevado à n-ésima potência.
137
-
=======
138
-
For instance:
139
-
```js
140
-
/**
141
-
* Returns x raised to the n-th power.
142
-
*
143
-
* @param{number}x The number to raise.
144
-
* @param{number}n The power, must be a natural number.
145
-
* @return{number} x raised to the n-th power.
146
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
147
136
*/
148
137
functionpow(x, n) {
149
138
...
150
139
}
151
140
```
152
141
153
-
<<<<<<< HEAD
154
142
Tais comentários, nos permitem compreender o propósito da função e a usar de forma correta, sem olhar para o seu código.
155
143
156
144
A propósito, muitos editores, como o [WebStorm](https://www.jetbrains.com/webstorm/, podem também os perceber e os usar para fornecer completação automática de palavras (*autocomplete*), e algumas verificações de código (*code-checking*) automáticas.
157
145
158
146
Também, existem ferramentas como o [JSDoc 3](https://github.com/jsdoc3/jsdoc), que podem gerar documentação HTML a partir de comentários. Pode ler mais informação sobre o JSDoc em <http://usejsdoc.org/>.
159
-
=======
160
-
Such comments allow us to understand the purpose of the function and use it the right way without looking in its code.
161
-
162
-
By the way, many editors like [WebStorm](https://www.jetbrains.com/webstorm/) can understand them as well and use them to provide autocomplete and some automatic code-checking.
163
-
164
-
Also, there are tools like [JSDoc 3](https://github.com/jsdoc3/jsdoc) that can generate HTML-documentation from the comments. You can read more information about JSDoc at <http://usejsdoc.org/>.
165
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
166
147
167
148
Porque é a tarefa solucionada dessa forma?
168
149
: O que está escrito é importante. Mas, o que *não* está escrito pode ser ainda mais importante, para se compreender o que se passa. Porque é a tarefa solucionada exatamente dessa forma? O código não dá resposta alguma.
@@ -193,12 +174,7 @@ Bons comentários, nos permitem manter o código saudável, voltar a ele após u
193
174
194
175
**Evite comentários:**
195
176
196
-
<<<<<<< HEAD
197
177
- Que digam "como o código funciona" e "o que faz".
198
178
- Coloque-os apenas se for impossível tornar o código tão simples e auto-descritivo que não precise deles.
199
-
=======
200
-
- That tell "how code works" and "what it does".
201
-
- Put them in only if it's impossible to make the code so simple and self-descriptive that it doesn't require them.
202
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
203
179
204
180
Comentários também são utilizados por ferramentas de auto-documentação, como o JSDoc3: elas os lêm e geram documentos em HTML (ou documentos num outro formato).
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/05-testing-mocha/article.md
+2-19Lines changed: 2 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,4 @@
1
-
<<<<<<< HEAD
2
1
# Teste automatizado com mocha
3
-
=======
4
-
# Automated testing with Mocha
5
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
6
2
7
3
Teste automatizado será utilizado nos exercícios seguintes, e também é amplamente usado em projetos reais.
8
4
@@ -85,11 +81,7 @@ Assim, o desenvolvimento é *iterativo*. Nós escrevemos a *spec*, a implementam
85
81
86
82
Vejamos este fluxo de desenvolvimento no nosso caso prático.
87
83
88
-
<<<<<<< HEAD
89
84
O primeiro passo já está completo: nós temos uma *spec* inicial para `pow`. Agora, antes de fazer a implementação, vamos utilizar umas poucas bibliotecas (*libraries*) de JavaScript para executar os testes, apenas para ver se eles estão a funcionar (todos irão falhar).
90
-
=======
91
-
The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use few JavaScript libraries to run the tests, just to see that they are working (they will all fail).
92
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
93
85
94
86
## A *spec* em ação
95
87
@@ -171,13 +163,8 @@ Aqui, nós podemos selecionar uma das duas formas para organizar o teste:
171
163
assert.equal(pow(2, 3), 8);
172
164
});
173
165
174
-
<<<<<<< HEAD
175
-
it("3 elevado a 3 é 27", function() {
176
-
assert.equal(pow(3, 3), 27);
177
-
=======
178
-
it("3 raised to power 4 is 81", function() {
166
+
it("3 elevado a 4 é 81", function() {
179
167
assert.equal(pow(3, 4), 81);
180
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
181
168
});
182
169
183
170
});
@@ -199,11 +186,7 @@ O resultado:
199
186
200
187
[iframe height=250 src="pow-2" edit border="1"]
201
188
202
-
<<<<<<<HEAD
203
-
Como nós esperávamos, o segundo teste falhou. Seguramente, a nossa função retorna sempre `8`, enquanto o `assert` espera `27`.
204
-
=======
205
-
As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`.
206
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
189
+
Como nós esperávamos, o segundo teste falhou. Seguramente, a nossa função retorna sempre `8`, enquanto o `assert` espera `81`.
@@ -57,11 +52,7 @@ A solução parece um pouco estranha, mas aqui está:
57
52
58
53
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.
59
54
60
-
<<<<<<< HEAD
61
-
Por exemplo, existe um método [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) que retorna uma string em letras maiúsculas.
62
-
=======
63
-
For instance, there exists a string method [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) that returns a capitalized `str`.
64
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
55
+
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.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/05-global-object/article.md
+4-15Lines changed: 4 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,7 @@ O objeto global fornece variáveis e funções que estão disponíveis em qualqu
5
5
6
6
No navegador ele é chamado de `window`, no Node.js é `global`, em outros ambientes pode ter outro nome.
7
7
8
-
<<<<<<< HEAD
9
-
Recentemente, `globalThis` foi adicionado a linguagem como um nome padrão para o objeto global, que deve ser suportado em todos os ambientes. Em alguns navegadores, como o "non-Chromium Edge", `globalThis` ainda não é suportado, mas pode ser facilmente utilizado através de um polyfill.
10
-
=======
11
-
Recently, `globalThis` was added to the language, as a standardized name for a global object, that should be supported across all environments. It's supported in all major browsers.
12
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
8
+
Recentemente, `globalThis` foi adicionado à linguagem como um nome padrão para o objeto global, e que deve ser suportado em todos os ambientes. Ele é suportado em todos os principais navegadores.
13
9
14
10
Usamos `window` aqui, assumindo que nosso ambiente seja um navegador. Se o seu script puder ser executado em outros ambientes, é melhor utilizar o `globalThis`.
15
11
@@ -85,14 +81,7 @@ if (!window.Promise) {
85
81
Isso inclui objetos nativos Javascript, como `Array` e valores específicos do ambiente, como `window.innerHeight` -- a altura da janela no navegador.
86
82
- O objeto global tem o nome universal `globalThis`.
87
83
88
-
<<<<<<< HEAD
89
-
...Porém é mais frequentemente referido pelos seu nomes específicos de ambientes "old-school", como `window` (navegador) e `global` (Node.js). Como `globalThis` é uma proposta recente, não é suportado pelo "non-Chromium Edge" (mas pode ser usado com um polyfill).
90
-
- Devemos salvar valores no objeto global apenas se eles forem realmente globais em nosso projeto. E manter sua quantidade no mínimo.
91
-
- No navegador, ao menos que estejamos usando [modules](info:modules), funções e variáveis globais declaradas com `var` tornam-se uma propriedade do objeto global.
84
+
...Porém é mais frequentemente referido pelos seu nomes específicos de ambientes "old-school", como `window` (navegador) e `global` (Node.js).
85
+
- Devemos salvar valores no objeto global apenas se eles forem realmente globais em nosso projeto. E manter a sua quantidade no mínimo.
86
+
- No navegador, a menos que estejamos usando [modules](info:modules), funções e variáveis globais declaradas com `var` se tornam numa propriedade do objeto global.
92
87
- Para tornar nosso código à prova de mudanças no futuro e mais fácil de entender, devemos acessar as propriedades do objeto global diretamente, como `window.x`.
93
-
=======
94
-
...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js).
95
-
- We should store values in the global object only if they're truly global for our project. And keep their number at minimum.
96
-
- In-browser, unless we're using [modules](info:modules), global functions and variables declared with `var` become a property of the global object.
97
-
- To make our code future-proof and easier to understand, we should access properties of the global object directly, as `window.x`.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/12-arrow-functions/article.md
-14Lines changed: 0 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,7 @@ Vamos revisitar as *arrow functions*.
4
4
5
5
As *arrow functions* não são somente uma "abreviação" para escrevermos menos código.
6
6
7
-
<<<<<<< HEAD
8
7
O *JavaScript* está cheio de situações onde precisamos escrever uma pequena função que será executada em um outro lugar.
9
-
=======
10
-
JavaScript is full of situations where we need to write a small function that's executed somewhere else.
11
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
12
8
13
9
Por exemplo:
14
10
@@ -122,18 +118,8 @@ Aqui precisamos criar as variáveis adicionais `args` e `ctx` para que a funçã
122
118
123
119
*Arrow functions* (funções seta):
124
120
125
-
<<<<<<< HEAD
126
-
- Não possuem `this`.
127
121
- Não possuem `arguments`.
128
122
- Não podem ser chamadas com `new`.
129
123
- (Elas também não possuem `super`, mas ainda não a estudamos. Veremos no capítulo <info:class-inheritance>).
130
124
131
125
Isso porque elas são feitas para pequenos trechos de código que não possuem seus próprios "contextos", mas sim utilizam o contexto em que estão inseridas. E elas realmente brilham nesses casos.
132
-
=======
133
-
- Do not have `this`
134
-
- Do not have `arguments`
135
-
- Can't be called with `new`
136
-
- They also don't have `super`, but we didn't study it yet. We will on the chapter <info:class-inheritance>
137
-
138
-
That's because they are meant for short pieces of code that do not have their own "context", but rather work in the current one. And they really shine in that use case.
0 commit comments