From 884641d9ba82f4502a31c49d3d0473a35836ac81 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Tue, 29 Oct 2019 22:03:41 -0300 Subject: [PATCH 01/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 974142761..466726ed0 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -1,10 +1,10 @@ -# Browser environment, specs +# Ambiente do Navegador, especificações -The JavaScript language was initially created for web browsers. Since then, it has evolved and become a language with many uses and platforms. +A linguagem JavaScript foi inicialmente criada para navegadores web. Desde então, tem evoluído e se tornado uma linguagem com muitos usuários e plataformas. -A platform may be a browser, or a web-server, or a washing machine, or another *host*. Each of them provides platform-specific functionality. The JavaScript specification calls that a *host environment*. +A plataforma pode ser um navegador, ou servidor web, ou uma máquina de lavar, ou outro *host*. Cada um deles fornece funcionalidades específicas da plataforma. Nas especificações JavaScript são conhecidas como *host enviroment*. -A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.js provides server-side features, and so on. +Um host environment fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. Here's a bird's-eye view of what we have when JavaScript runs in a web-browser: From 64eb632457eddd317ac5dfae6043b24812c79e82 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Wed, 30 Oct 2019 09:05:33 -0300 Subject: [PATCH 02/17] Update article.md --- .../1-document/01-browser-environment/article.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 466726ed0..b71f98548 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -6,16 +6,16 @@ A plataforma pode ser um navegador, ou servidor web, ou uma máquina de lavar, o Um host environment fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. -Here's a bird's-eye view of what we have when JavaScript runs in a web-browser: +Aqui uma visão rápida do que temos quando JavaScript roda em um navegador web: ![](windowObjects.svg) -There's a "root" object called `window`. It has two roles: +Existe um objeto "raiz" chamado `window`. Que tem dois papeis: -1. First, it is a global object for JavaScript code, as described in the chapter . -2. Second, it represents the "browser window" and provides methods to control it. +1. Primeiro, existe um objeto global para o código JavaScript, como descrito no capítulo . +2. Segundo, representa a "janela de navegação" e fornece métodos de controle. -For instance, here we use it as a global object: +Por instância, aqui nós usamos como objeto global: ```js run function sayHi() { @@ -26,7 +26,7 @@ function sayHi() { window.sayHi(); ``` -And here we use it as a browser window, to see the window height: +E aqui nós usamos como janela de navegação, para ver a altura da janela: ```js run alert(window.innerHeight); // inner window height @@ -34,9 +34,9 @@ alert(window.innerHeight); // inner window height There are more window-specific methods and properties, we'll cover them later. -## Document Object Model (DOM) +## Modelo de Objeto de Documento (DOM) -The `document` object gives access to the page content. We can change or create anything on the page using it. +O `document object` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. For instance: ```js run From ae6f79d5fee63bafa0eecb3bd876c1b61e48b0e9 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Wed, 30 Oct 2019 09:17:32 -0300 Subject: [PATCH 03/17] Update article.md --- .../01-browser-environment/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index b71f98548..d20c30c8a 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -2,9 +2,9 @@ A linguagem JavaScript foi inicialmente criada para navegadores web. Desde então, tem evoluído e se tornado uma linguagem com muitos usuários e plataformas. -A plataforma pode ser um navegador, ou servidor web, ou uma máquina de lavar, ou outro *host*. Cada um deles fornece funcionalidades específicas da plataforma. Nas especificações JavaScript são conhecidas como *host enviroment*. +A plataforma pode ser um navegador, ou servidor web, ou uma máquina de lavar, ou outro *host*. Cada um deles fornece funcionalidades específicas da plataforma. Nas especificações JavaScript são conhecidas como *ambiente de hospedagem*. -Um host environment fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. +Um ambente de hospedagem fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. Aqui uma visão rápida do que temos quando JavaScript roda em um navegador web: @@ -19,28 +19,28 @@ Por instância, aqui nós usamos como objeto global: ```js run function sayHi() { - alert("Hello"); + alert("Olá"); } -// global functions are accessible as properties of window +// funcoes globais sao acessiveis como propriedades da janela window.sayHi(); ``` E aqui nós usamos como janela de navegação, para ver a altura da janela: ```js run -alert(window.innerHeight); // inner window height +alert(window.innerHeight); // altura da janela interna ``` -There are more window-specific methods and properties, we'll cover them later. +Existem mais metodos específicos de janela e propriedades, vamos falar sobre eles mais tarde. ## Modelo de Objeto de Documento (DOM) -O `document object` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. +O `objeto de documento` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. -For instance: +Por instância: ```js run -// change the background color to red +// mudando a cor do fundo para vermelho document.body.style.background = "red"; // change it back after 1 second From b80c3d184b5c8f74ceee05f5754abf5f41bb4740 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Thu, 31 Oct 2019 15:08:35 -0300 Subject: [PATCH 04/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index d20c30c8a..3288744d4 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -43,14 +43,15 @@ Por instância: // mudando a cor do fundo para vermelho document.body.style.background = "red"; -// change it back after 1 second +// mudando a cor de volta depois de 1 segundo setTimeout(() => document.body.style.background = "", 1000); ``` -Here we used `document.body.style`, but there's much, much more. Properties and methods are described in the specification. There happen to be two working groups who develop it: +Aqui nós usamos `document.body.style`, mas existe muito, muito mais. Propriedades e métodos são descritos na especificação. +Pode aconter que dois grupos de trabalho que desenvolveram: -1. [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) -- the documentation is at . -2. [WhatWG](https://en.wikipedia.org/wiki/WHATWG), publishing at . +1. [W3C](https://pt.wikipedia.org/wiki/W3C) -- a documentação está em . +2. [WhatWG](https://pt.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group), publicação em . As it happens, the two groups don't always agree, so it's like we have two sets of standards. But they are very similar and eventually things merge. The documentation that you can find on the given resources is very similar, with about a 99% match. There are very minor differences that you probably won't notice. From b38d959b35b1992df9d4ea249fa71bc189c3b838 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Fri, 1 Nov 2019 17:00:05 -0300 Subject: [PATCH 05/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 3288744d4..83b516355 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -32,7 +32,7 @@ E aqui nós usamos como janela de navegação, para ver a altura da janela: alert(window.innerHeight); // altura da janela interna ``` -Existem mais metodos específicos de janela e propriedades, vamos falar sobre eles mais tarde. +Existem mais métodos específicos de janela e propriedades, vamos falar sobre eles mais tarde. ## Modelo de Objeto de Documento (DOM) @@ -53,7 +53,7 @@ Pode aconter que dois grupos de trabalho que desenvolveram: 1. [W3C](https://pt.wikipedia.org/wiki/W3C) -- a documentação está em . 2. [WhatWG](https://pt.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group), publicação em . -As it happens, the two groups don't always agree, so it's like we have two sets of standards. But they are very similar and eventually things merge. The documentation that you can find on the given resources is very similar, with about a 99% match. There are very minor differences that you probably won't notice. +Como as vezes acontece, os dois grupos nem sempre entram em concordância, então é como se nós tivessemos dois conjuntos de padrões. Mas eles são muito parecidos e eventualmente as coisas são compatíveis. A documentação que você pode encontrar # on the given resources é muito semelhante, com 99% de compatibilidade. Existem uma diferença pequena que você provavelmente não notaria. Personally, I find more pleasant to use. From 55bf796dff206105decfeb53aea7bfa6a32c2a5e Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Tue, 5 Nov 2019 13:54:36 -0300 Subject: [PATCH 06/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 83b516355..712f9df2f 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -53,11 +53,11 @@ Pode aconter que dois grupos de trabalho que desenvolveram: 1. [W3C](https://pt.wikipedia.org/wiki/W3C) -- a documentação está em . 2. [WhatWG](https://pt.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group), publicação em . -Como as vezes acontece, os dois grupos nem sempre entram em concordância, então é como se nós tivessemos dois conjuntos de padrões. Mas eles são muito parecidos e eventualmente as coisas são compatíveis. A documentação que você pode encontrar # on the given resources é muito semelhante, com 99% de compatibilidade. Existem uma diferença pequena que você provavelmente não notaria. +Como as vezes acontece, os dois grupos nem sempre entram em concordância, então é como se nós tivessemos dois conjuntos de padrões. Mas eles são muito parecidos e eventualmente as coisas são compatíveis. A documentação que você pode encontrar nos recursos dados é muito semelhante, com 99% de compatibilidade. Existem uma diferença pequena que você provavelmente não notaria. -Personally, I find more pleasant to use. +Pessoalmente, eu acho mais prazeroso de usar. -In the ancient past, there was no standard at all -- each browser implemented however it wanted. Different browsers had different sets, methods, and properties for the same thing, and developers had to write different code for each of them. Dark, messy times. +Em um passado antigo, não existia nenhum tipo de padrão -- cada navegador implementava do jeito que queria. Diferentes navegadores tinham diferentes conjuntos, métodos, e propriedades para a mesma coisa, e desenvolvedores tinham que escrever códigos diferentes para cada um deles. Tempos negros e bagunçados. Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But, in this tutorial we'll use modern stuff: there's no need to learn old things until you really need to (chances are high that you won't). From e0c37d7c61239902c6f813c75131825c19d45b1b Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Wed, 13 Nov 2019 12:39:35 -0300 Subject: [PATCH 07/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 712f9df2f..0a9ad02f1 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -59,9 +59,9 @@ Pessoalmente, eu acho mais prazeroso de usar. Em um passado antigo, não existia nenhum tipo de padrão -- cada navegador implementava do jeito que queria. Diferentes navegadores tinham diferentes conjuntos, métodos, e propriedades para a mesma coisa, e desenvolvedores tinham que escrever códigos diferentes para cada um deles. Tempos negros e bagunçados. -Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But, in this tutorial we'll use modern stuff: there's no need to learn old things until you really need to (chances are high that you won't). +Ainda hoje nós podemos nos deparar com códigos antigos que usam propriedades específicas de navegador e trabalha tratando incompatibilidades. Mas, nesse tutorial nós iremos usar coisas modernas: não existe necessidade de aprender coisas antigas até você realmente precisar (as chances são altas de você não precisar). -Then the DOM standard appeared, in an attempt to bring everyone to an agreement. The first version was "DOM Level 1", then it was extended by DOM Level 2, then DOM Level 3, and now it's reached DOM Level 4. People from WhatWG group got tired of version numbers and are calling it just "DOM", without a number. So we'll do the same. +Então os padrões de DOM surgiram, numa tentativa de fazer com que todod mundo concordasse. A primeira versão era "DOM nível 1", e então foi estendida para DOM nível 2, depois DOM nível 3, e agora chegou a DOm nível 4. Pessoas do grupo WhatWG ficaram cansadas do número de versões e estão chamando somente "DOM", sem um número. Então vamos fazer o mesmo. ```smart header="DOM is not only for browsers" The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too. From 1d15719e01963a8dcdb26d2438ee10d8573ccb61 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Thu, 14 Nov 2019 08:49:31 -0300 Subject: [PATCH 08/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 0a9ad02f1..3fa40f9d8 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -64,9 +64,9 @@ Ainda hoje nós podemos nos deparar com códigos antigos que usam propriedades e Então os padrões de DOM surgiram, numa tentativa de fazer com que todod mundo concordasse. A primeira versão era "DOM nível 1", e então foi estendida para DOM nível 2, depois DOM nível 3, e agora chegou a DOm nível 4. Pessoas do grupo WhatWG ficaram cansadas do número de versões e estão chamando somente "DOM", sem um número. Então vamos fazer o mesmo. ```smart header="DOM is not only for browsers" -The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too. +A especificação DOM explica a estrutura de um documento e fornece objetos para manipulação. Existem intrumentos que não são de navegador que também usam-o. -For instance, server-side tools that download HTML pages and process them use the DOM. They may support only a part of the specification though. +Por exemplo, ferramentas de server-side que fazem download e processam páginas HTML usam DOM. Apesar de que eles devem ter suporte apenas para uma parte da especificação. ``` ```smart header="CSSOM for styling" @@ -95,7 +95,6 @@ if (confirm("Go to wikipedia?")) { Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user. -<<<<<<< HEAD ```smart header="HTML specification" BOM is the part of the general [HTML specification](https://html.spec.whatwg.org). From f5ad3a6a2c9be90c152f16f0239076a1f30490d6 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Thu, 14 Nov 2019 08:50:28 -0300 Subject: [PATCH 09/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 3fa40f9d8..6a70fbc55 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -66,7 +66,7 @@ Então os padrões de DOM surgiram, numa tentativa de fazer com que todod mundo ```smart header="DOM is not only for browsers" A especificação DOM explica a estrutura de um documento e fornece objetos para manipulação. Existem intrumentos que não são de navegador que também usam-o. -Por exemplo, ferramentas de server-side que fazem download e processam páginas HTML usam DOM. Apesar de que eles devem ter suporte apenas para uma parte da especificação. +Por exemplo, ferramentas server-side que fazem download e processam páginas HTML usam DOM. Apesar de que eles devem ter suporte apenas para uma parte da especificação. ``` ```smart header="CSSOM for styling" From f00ef1961b457a8907ed4a672e4ab8e43c735859 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Fri, 15 Nov 2019 23:44:41 -0300 Subject: [PATCH 10/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 6a70fbc55..d027e2f5d 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -70,7 +70,7 @@ Por exemplo, ferramentas server-side que fazem download e processam páginas HTM ``` ```smart header="CSSOM for styling" -CSS rules and stylesheets are not structured like HTML. There's a separate specification [CSSOM](https://www.w3.org/TR/cssom-1/) that explains how they are represented as objects, and how to read and write them. +Regras CSS e folhas de estilo não são estruturados como HTML. Existe uma especificação separada [CSSOM](https://www.w3.org/TR/cssom-1/) que explica como representá-los como objetos, e como ler e escreve-los. CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now. ``` From 07416b8da1d5286781bbe485428f4eb4ed230c9c Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 16 Nov 2019 08:22:09 -0300 Subject: [PATCH 11/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index d027e2f5d..c6c6c8193 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -70,12 +70,12 @@ Por exemplo, ferramentas server-side que fazem download e processam páginas HTM ``` ```smart header="CSSOM for styling" -Regras CSS e folhas de estilo não são estruturados como HTML. Existe uma especificação separada [CSSOM](https://www.w3.org/TR/cssom-1/) que explica como representá-los como objetos, e como ler e escreve-los. +Regras CSS e folhas de estilo não são estruturados como HTML. Existe uma especificação separada [CSSOM](https://www.w3.org/TR/cssom-1/) que explica como representá-los como objetos, e como ler e escrevê-los. -CSSOM is used together with DOM when we modify style rules for the document. In practice though, CSSOM is rarely required, because usually CSS rules are static. We rarely need to add/remove CSS rules from JavaScript, so we won't cover it right now. +CSSOM é usado junto com DOM quando modificamoss regras de estilo para o documento. Na prática, CSSOM é raramente necessário, porque usualmente regras de CSS são estáticas. Raramente precisamos adicionar/remover regras de CSS do JavaScript, então não iremos abordar isso agora. ``` -## BOM (part of HTML spec) +## BOM (parte da especicação HTML) Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document. From cf5bae6151928f82c8ae2c7225eb8065f0db92af Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 16 Nov 2019 08:58:18 -0300 Subject: [PATCH 12/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index c6c6c8193..30b3b496d 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -77,14 +77,14 @@ CSSOM é usado junto com DOM quando modificamoss regras de estilo para o documen ## BOM (parte da especicação HTML) -Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document. +Modelo de Objeto do Navegador (BOM) são objetos adcionais forecidos pelo navegador (host environment) para trabalhar com tudo exceto o documento. -For instance: +Por exemplo: -- The [navigator](mdn:api/Window/navigator) object provides background information about the browser and the operating system. There are many properties, but the two most widely known are: `navigator.userAgent` -- about the current browser, and `navigator.platform` -- about the platform (can help to differ between Windows/Linux/Mac etc). -- The [location](mdn:api/Window/location) object allows us to read the current URL and can redirect the browser to a new one. +- O objeto de [navegador](mdn:api/Window/navigator) fornece informações de suporte sobre o navegador e o sistema operacional. Existem muitas propriedades, mas as duas mais usadas são: `navigator.userAgent` -- sobre o navegador atual, e `navigator.platform` -- sobre a platarforma (pode ajudar sobre diferenças entre Windows/Linux/Mac etc). +- O objeto de [localização](mdn:api/Window/location) nos permite ler a URL atual e pode redirecionar o navegador para um novo. -Here's how we can use the `location` object: +Aqui um exemplo de como podemos usar o objeto de `localização`: ```js run alert(location.href); // shows current URL From 87d2471dc926404d1f8870b11c4c8ee16eaca27f Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 16 Nov 2019 08:59:29 -0300 Subject: [PATCH 13/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 30b3b496d..15e83e44e 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -15,7 +15,7 @@ Existe um objeto "raiz" chamado `window`. Que tem dois papeis: 1. Primeiro, existe um objeto global para o código JavaScript, como descrito no capítulo . 2. Segundo, representa a "janela de navegação" e fornece métodos de controle. -Por instância, aqui nós usamos como objeto global: +Por exemplo, aqui nós usamos como objeto global: ```js run function sayHi() { @@ -38,7 +38,7 @@ Existem mais métodos específicos de janela e propriedades, vamos falar sobre e O `objeto de documento` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. -Por instância: +Por exemplo: ```js run // mudando a cor do fundo para vermelho document.body.style.background = "red"; From 17cf9b4f9d737395e1b7c3ab0bb38f7d85d6124c Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 16 Nov 2019 09:40:20 -0300 Subject: [PATCH 14/17] Update article.md --- .../01-browser-environment/article.md | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 15e83e44e..a688b4dbc 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -87,25 +87,19 @@ Por exemplo: Aqui um exemplo de como podemos usar o objeto de `localização`: ```js run -alert(location.href); // shows current URL -if (confirm("Go to wikipedia?")) { - location.href = "https://wikipedia.org"; // redirect the browser to another URL +alert(location.href); // mostra a URL atual +if (confirm("Ir para wikipedia?")) { + location.href = "https://wikipedia.org"; // redireciona o navegador para outra URL } ``` -Functions `alert/confirm/prompt` are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user. +Funções `alert/confirm/prompt` também são parte do BOM: não são diretamente relacionadas ao documento, mas representam métodos de navegador puramente de comunicação com o usuário. ```smart header="HTML specification" -BOM is the part of the general [HTML specification](https://html.spec.whatwg.org). +BOM é parte da [Especificação HTML geral](https://html.spec.whatwg.org). -Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". -======= -```smart header="Specifications" -BOM is the part of the general [HTML specification](https://html.spec.whatwg.org). - -Yes, you heard that right. The HTML spec at is not only about the "HTML language" (tags, attributes), but also covers a bunch of objects, methods and browser-specific DOM extensions. That's "HTML in broad terms". Also, some parts have additional specs listed at . ->>>>>>> 852ee189170d9022f67ab6d387aeae76810b5923 +Sim, voce ouviu direito. A especificação HTML não é somente sobre a "Linguagem HTML" (tags, attributes), mas também abrange vários objetos, métodos e específicas extensões DOM para navegadores. Isso é "HTML em termos amplos". Tamém, algumas partes tem especificações adicionais listadas em . ``` ## Summary From 224da87ca8ec909fb0ddd19644c6f1da64040941 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 16 Nov 2019 10:09:38 -0300 Subject: [PATCH 15/17] Update article.md --- .../01-browser-environment/article.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index a688b4dbc..1705e6292 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -102,21 +102,21 @@ BOM é parte da [Especificação HTML geral](https://html.spec.whatwg.org). Sim, voce ouviu direito. A especificação HTML não é somente sobre a "Linguagem HTML" (tags, attributes), mas também abrange vários objetos, métodos e específicas extensões DOM para navegadores. Isso é "HTML em termos amplos". Tamém, algumas partes tem especificações adicionais listadas em . ``` -## Summary +## Resumo -Talking about standards, we have: +Falando sobre padrões, nós temos: -DOM specification -: Describes the document structure, manipulations and events, see . +Especificação DOM +: Descreve a estrutura de documento, manipulações e eventos, ver em . -CSSOM specification -: Describes stylesheets and style rules, manipulations with them and their binding to documents, see . +Especificação CSSOM +: Descreve folhas de estilo e regras de estilo, manipulações delas e sua documentação obrigatória, ver em . -HTML specification -: Describes the HTML language (e.g. tags) and also the BOM (browser object model) -- various browser functions: `setTimeout`, `alert`, `location` and so on, see . It takes the DOM specification and extends it with many additional properties and methods. +Especificação HTML +: Descreve a linguagem HTML (e.g. tags) e também o BOM (Modelo de Objeto do Navegador) -- várias funçoes de navegador: `setTimeout`, `alert`, `location` e assim vai, ver em . Besicamente a especificação DOM expandida com várias propriedades e métodos adicionais. -Now we'll get down to learning DOM, because the document plays the central role in the UI. +Agora iremos nos aprofundar em aprender DOM, porque a documentação tem papel principal na UI. -Please note the links above, as there's so much stuff to learn it's impossible to cover and remember everything. +Porfavor anote os links acima, como existe muita coisa para aprender é impossível abranger e lembrar de tudo. -When you'd like to read about a property or a method, the Mozilla manual at is a nice resource, but reading the corresponding spec may be better: it's more complex and longer to read, but will make your fundamental knowledge sound and complete. +Quando voce quiser ler sobre uma propriedade ou método, o manual do Mozilla está em é uma boa fontei, mas ler a espcificação correspondente pode ser melhor: é mais complexo e longo para ler, mas irá fazer seu conhecimento básico completo. From ae5c1852b8f309c7afad8a8ea89a6d70f24cb195 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Fri, 20 Dec 2019 15:55:15 -0300 Subject: [PATCH 16/17] Update article.md --- 2-ui/1-document/01-browser-environment/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index 1705e6292..edc3f015a 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -1,8 +1,8 @@ # Ambiente do Navegador, especificações -A linguagem JavaScript foi inicialmente criada para navegadores web. Desde então, tem evoluído e se tornado uma linguagem com muitos usuários e plataformas. +A linguagem JavaScript foi inicialmente criada para navegadores para a web. Desde então, tem evoluído e se tornado uma linguagem com muitos usuários e plataformas. -A plataforma pode ser um navegador, ou servidor web, ou uma máquina de lavar, ou outro *host*. Cada um deles fornece funcionalidades específicas da plataforma. Nas especificações JavaScript são conhecidas como *ambiente de hospedagem*. +A plataforma pode ser um navegador, ou um servidor web, ou uma máquina de lavar, ou outro *hospedeiro* (host). Cada um deles fornece funcionalidades específicas para a plataforma. Na especificação JavaScript é conhecida como *ambiente de hospedagem* (host environment). Um ambente de hospedagem fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. From 0b89e279b3c9269227a0ce77e5102d9272ffedd3 Mon Sep 17 00:00:00 2001 From: Danielli Costa Date: Sat, 21 Dec 2019 01:09:37 -0300 Subject: [PATCH 17/17] Update article.md --- .../01-browser-environment/article.md | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/2-ui/1-document/01-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md index edc3f015a..d5056ad0e 100644 --- a/2-ui/1-document/01-browser-environment/article.md +++ b/2-ui/1-document/01-browser-environment/article.md @@ -4,39 +4,39 @@ A linguagem JavaScript foi inicialmente criada para navegadores para a web. Desd A plataforma pode ser um navegador, ou um servidor web, ou uma máquina de lavar, ou outro *hospedeiro* (host). Cada um deles fornece funcionalidades específicas para a plataforma. Na especificação JavaScript é conhecida como *ambiente de hospedagem* (host environment). -Um ambente de hospedagem fornece objetos específicos de platarfoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um significado para páginas de controle web. Node.js fornece aplicações server-side, e assim vai. +Um ambente de hospedagem fornece objetos específicos para a platafoma e funções adicionais ao núcleo da linguagem. Navegadores web dão um meio paracontrolar páginas web. Node.js fornece funcionalidades para servidores (*server-side*), e assim por diante. Aqui uma visão rápida do que temos quando JavaScript roda em um navegador web: ![](windowObjects.svg) -Existe um objeto "raiz" chamado `window`. Que tem dois papeis: +Existe um objeto "raiz" chamado `window`. Ele tem dois papéis: -1. Primeiro, existe um objeto global para o código JavaScript, como descrito no capítulo . -2. Segundo, representa a "janela de navegação" e fornece métodos de controle. +1. Primeiro, ele é um objeto global para o código JavaScript, como descrito no capítulo . +2. Segundo, ele representa a "janela de navegação" e fornece métodos de controle. -Por exemplo, aqui nós usamos como objeto global: +Por exemplo, nós o usamos como objeto global: ```js run function sayHi() { alert("Olá"); } -// funcoes globais sao acessiveis como propriedades da janela +// funções globais sao acessíveis como propriedades de window window.sayHi(); ``` -E aqui nós usamos como janela de navegação, para ver a altura da janela: +E nós o usamos como janela de navegação, para ver a altura da janela: ```js run alert(window.innerHeight); // altura da janela interna ``` -Existem mais métodos específicos de janela e propriedades, vamos falar sobre eles mais tarde. +Existem mais métodos específicos de window e propriedades, vamos falar sobre eles mais tarde. -## Modelo de Objeto de Documento (DOM) +## Document Object Model (DOM) -O `objeto de documento` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. +O objeto `document` da acesso ao conteúdo da página. Nós podemos mudar ou criar qualquer coisa na página usando-o. Por exemplo: ```js run @@ -48,58 +48,58 @@ setTimeout(() => document.body.style.background = "", 1000); ``` Aqui nós usamos `document.body.style`, mas existe muito, muito mais. Propriedades e métodos são descritos na especificação. -Pode aconter que dois grupos de trabalho que desenvolveram: +Acontece que dois grupos de trabalho a desenvolveram: 1. [W3C](https://pt.wikipedia.org/wiki/W3C) -- a documentação está em . 2. [WhatWG](https://pt.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group), publicação em . -Como as vezes acontece, os dois grupos nem sempre entram em concordância, então é como se nós tivessemos dois conjuntos de padrões. Mas eles são muito parecidos e eventualmente as coisas são compatíveis. A documentação que você pode encontrar nos recursos dados é muito semelhante, com 99% de compatibilidade. Existem uma diferença pequena que você provavelmente não notaria. +Como às vezes acontece, os dois grupos nem sempre entram em concordância, então é como se nós tivessemos dois conjuntos de padrões (*standards*). Mas eles são muito parecidos e eventualmente as coisas se fundem. A documentação que você pode encontrar nos recursos dados é muito semelhante, com cerca de 99% de compatibilidade. Existem uma diferença pequena que você provavelmente não notaria. Pessoalmente, eu acho mais prazeroso de usar. Em um passado antigo, não existia nenhum tipo de padrão -- cada navegador implementava do jeito que queria. Diferentes navegadores tinham diferentes conjuntos, métodos, e propriedades para a mesma coisa, e desenvolvedores tinham que escrever códigos diferentes para cada um deles. Tempos negros e bagunçados. -Ainda hoje nós podemos nos deparar com códigos antigos que usam propriedades específicas de navegador e trabalha tratando incompatibilidades. Mas, nesse tutorial nós iremos usar coisas modernas: não existe necessidade de aprender coisas antigas até você realmente precisar (as chances são altas de você não precisar). +Ainda hoje nós podemos nos deparar com código antigo que usa propriedades específicas de navegador e trabalha tratando incompatibilidades. Mas, neste tutorial nós iremos usar coisas modernas: não existe necessidade de aprender coisas antigas até você realmente precisar (as chances são altas de você não precisar). -Então os padrões de DOM surgiram, numa tentativa de fazer com que todod mundo concordasse. A primeira versão era "DOM nível 1", e então foi estendida para DOM nível 2, depois DOM nível 3, e agora chegou a DOm nível 4. Pessoas do grupo WhatWG ficaram cansadas do número de versões e estão chamando somente "DOM", sem um número. Então vamos fazer o mesmo. +Então o padrão DOM surgiu, numa tentativa de fazer com que todod mundo concordasse. A primeira versão era "DOM Level 1", e então foi estendida para DOM Level 2, depois DOM Level 3, e agora chegou a DOM Level 4. Pessoas do grupo WhatWG ficaram cansadas do número de versões e estão chamando somente "DOM", sem um número. Então vamos fazer o mesmo. -```smart header="DOM is not only for browsers" -A especificação DOM explica a estrutura de um documento e fornece objetos para manipulação. Existem intrumentos que não são de navegador que também usam-o. +```smart header="DOM não é somente para navegadores" +A especificação DOM explica a estrutura de um documento e fornece objetos para manipulação. Existem instrumentos que não são de navegador que também usam-o. -Por exemplo, ferramentas server-side que fazem download e processam páginas HTML usam DOM. Apesar de que eles devem ter suporte apenas para uma parte da especificação. +Por exemplo, ferramentas para servidor (*server-side*) que fazem download e processam páginas HTML usam DOM. Contudo, elas podem ter suporte apenas para uma parte da especificação. ``` -```smart header="CSSOM for styling" -Regras CSS e folhas de estilo não são estruturados como HTML. Existe uma especificação separada [CSSOM](https://www.w3.org/TR/cssom-1/) que explica como representá-los como objetos, e como ler e escrevê-los. +```smart header="CSSOM para estilizar" +Regras CSS e folhas de estilo não são estruturadas como HTML. Existe uma especificação separada [CSSOM](https://www.w3.org/TR/cssom-1/) que explica como representá-las como objetos, e como ler e escrevê-las. -CSSOM é usado junto com DOM quando modificamoss regras de estilo para o documento. Na prática, CSSOM é raramente necessário, porque usualmente regras de CSS são estáticas. Raramente precisamos adicionar/remover regras de CSS do JavaScript, então não iremos abordar isso agora. +CSSOM é usado junto com DOM quando modificamoss regras de estilo para o documento. Na prática, CSSOM é raramente necessário, porque usualmente regras de CSS são estáticas. Raramente precisamos de adicionar/remover regras de CSS em JavaScript, então não iremos abordar isso agora. ``` ## BOM (parte da especicação HTML) -Modelo de Objeto do Navegador (BOM) são objetos adcionais forecidos pelo navegador (host environment) para trabalhar com tudo exceto o documento. +Modelo de Objeto do Navegador (BOM) são objetos adicionais fornecidos pelo navegador (*host environment*) para trabalhar com tudo exceto o documento. Por exemplo: -- O objeto de [navegador](mdn:api/Window/navigator) fornece informações de suporte sobre o navegador e o sistema operacional. Existem muitas propriedades, mas as duas mais usadas são: `navigator.userAgent` -- sobre o navegador atual, e `navigator.platform` -- sobre a platarforma (pode ajudar sobre diferenças entre Windows/Linux/Mac etc). -- O objeto de [localização](mdn:api/Window/location) nos permite ler a URL atual e pode redirecionar o navegador para um novo. +- O objeto de [navigator](mdn:api/Window/navigator) fornece informações de suporte sobre o navegador e o sistema operacional. Existem muitas propriedades, mas as duas mais usadas são: `navigator.userAgent` -- sobre o navegador atual, e `navigator.platform` -- sobre a plataforma (pode ajudar a diferenciar entre Windows/Linux/Mac etc). +- O objeto [location](mdn:api/Window/location) nos permite ler o URL atual e pode redirecionar o navegador para um novo. -Aqui um exemplo de como podemos usar o objeto de `localização`: +Aqui um exemplo de como podemos usar o objeto `location`: ```js run -alert(location.href); // mostra a URL atual +alert(location.href); // mostra o URL atual if (confirm("Ir para wikipedia?")) { - location.href = "https://wikipedia.org"; // redireciona o navegador para outra URL + location.href = "https://wikipedia.org"; // redireciona o navegador para outro URL } ``` -Funções `alert/confirm/prompt` também são parte do BOM: não são diretamente relacionadas ao documento, mas representam métodos de navegador puramente de comunicação com o usuário. +Funções `alert/confirm/prompt` também são parte do BOM: não são diretamente relacionadas ao documento, mas representam puros métodos do navegador para comunicação com o usuário. -```smart header="HTML specification" -BOM é parte da [Especificação HTML geral](https://html.spec.whatwg.org). +```smart header="especificação HTML" +BOM é parte da [Especificação HTML](https://html.spec.whatwg.org) geral. -Sim, voce ouviu direito. A especificação HTML não é somente sobre a "Linguagem HTML" (tags, attributes), mas também abrange vários objetos, métodos e específicas extensões DOM para navegadores. Isso é "HTML em termos amplos". Tamém, algumas partes tem especificações adicionais listadas em . +Sim, voce ouviu direito. A especificação HTML em não é somente sobre a "Linguagem HTML" (*tags*, atributos), mas também abrange vários objetos, métodos e específicas extensões ao DOM específicas para navegadores. Isso é "HTML em termos gerais". Também, algumas partes tem especificações adicionais listadas em . ``` ## Resumo @@ -107,16 +107,16 @@ Sim, voce ouviu direito. A especificação HTML n Falando sobre padrões, nós temos: Especificação DOM -: Descreve a estrutura de documento, manipulações e eventos, ver em . +: Descreve a estrutura do documento, manipulações e eventos, veja em . Especificação CSSOM -: Descreve folhas de estilo e regras de estilo, manipulações delas e sua documentação obrigatória, ver em . +: Descreve folhas de estilo e regras de estilo, manipulações com elas e suas ligações a documentos, veja em . Especificação HTML -: Descreve a linguagem HTML (e.g. tags) e também o BOM (Modelo de Objeto do Navegador) -- várias funçoes de navegador: `setTimeout`, `alert`, `location` e assim vai, ver em . Besicamente a especificação DOM expandida com várias propriedades e métodos adicionais. +: Descreve a linguagem HTML (ex. tags) e também o BOM (Modelo de Objeto do Navegador) -- várias funçoes de navegador: `setTimeout`, `alert`, `location` e assim por diante, veja em . Basicamente a especificação DOM expandida com várias propriedades e métodos adicionais. Agora iremos nos aprofundar em aprender DOM, porque a documentação tem papel principal na UI. Porfavor anote os links acima, como existe muita coisa para aprender é impossível abranger e lembrar de tudo. -Quando voce quiser ler sobre uma propriedade ou método, o manual do Mozilla está em é uma boa fontei, mas ler a espcificação correspondente pode ser melhor: é mais complexo e longo para ler, mas irá fazer seu conhecimento básico completo. +Quando você quiser ler sobre uma propriedade ou método, o manual da Mozilla em é uma boa fonte, mas ler a espcificação correspondente pode ser melhor: é mais complexa e longo para ler, mas irá fazer seu conhecimento básico completo.