> 
@manikManik
Out Of The Box Thinker, Amor para escrever Javascript e Python. “🍺 🍻 gulp watch”
JavaScript é certamente uma daquelas linguagens de programação que você pode começar em poucas horas devido à sua simples sintaxe, mas provavelmente levaria anos para dominá-la.
Para dominar o JavaScript é necessário um entendimento profundo de como todo o ecossistema funciona. O ecossistema central do JavaScript consiste em 3 componentes principais que são ECMAScript, JavaScript Engine, e o JavaScript Runtime.
Tudo começa com a compreensão do que é ECMAScript e como ele é diferente do JavaScript e seguido por uma compreensão do Motor JavaScript e do JavaScript Runtime. É por causa do tempo de execução do JavaScript que o NodeJS e o Google Chrome podem usar o mesmo Motor JavaScript e ainda ter implementações muito diferentes de JavaScript para desenvolvedores.
O que é um Runtime JavaScript ou um JavaScript Host?
Um Runtime JavaScript (ou um JavaScript Host) pode ser entendido como um recipiente que usa o Motor JavaScript para gerar APIs que podem ser usadas por desenvolvedores de software para criar aplicativos usando JavaScript. Tomando um exemplo de um tempo de execução JavaScript em um navegador, ele normalmente conteria as implementações de JavsScript que são mais específicas para um navegador. Enquanto um runtime para algo como NodeJs teria implementações específicas que são mais específicas para executar e construir uma aplicação do lado do servidor usando JavaScript.
JavaScript Runtime In Your Browser For Web Development
O runtime do JavaScript no navegador tem a implementação do JavaScript que permite aos desenvolvedores desenvolver aplicações para a web. O tempo de execução do navegador web tem os seguintes três componentes importantes:
- The Core Based On ECMAScript – A implementação base do JavaScript com todas as funções de entrada e saída que os desenvolvedores podem usar.
- Document Object Model (DOM) – Isto é o que o navegador torna como uma hierarquia de nós a serem exibidos ao cliente ou ao usuário para XML e HTML.
- Browser Object Model (BOM) – Isto é o que permite que os desenvolvedores manipulem a janela do navegador. Usando o BOM os desenvolvedores podem acessar as características do navegador e manipulá-las fora do contexto do DOM ou da página que está sendo renderizada.
Vamos mergulhar mais fundo para entender cada um desses componentes em detalhes.
As Funções do Core IO baseadas em ECMAScript
Um pouco de compreensão da história do JavaScript deixaria claro o que é ECMAScript. ECMAScript é uma linguagem de script de propósito geral que foi construída sobre os padrões definidos no ECMA-262 pela Associação Européia de Fabricantes de Computadores (ECMA). Isto foi feito com o objetivo de padronizar o JavaScript a partir do ano 1997.
JavaScript é uma implementação do ECMAScript e todos os navegadores web têm que aderir ao ECMAScript enquanto criam seu motor de JavaScript e ambientes de tempo de execução. ECMAScript não contém nenhuma função IO, em vez disso, é o JavaScript que implementa as várias funções usando as diretrizes definidas pelo ECMAScript. O ECMAScript e o JavaScript são diferentes um do outro. ECMAScript é uma linguagem de script com base nos padrões definidos no ECMA-262 e não está vinculada a navegadores web. É baseado em ECMAScript que uma linguagem de script mais robusta como JavaScript foi construída.
Document Object Model ou o DOM
The Document Object Model é uma interface neutra de linguagem para XML bem como HTML que mapeia todo o documento como uma hierarquia de nós criando uma representação semelhante a uma árvore. O código HTML abaixo é um exemplo perfeito de uma hierarquia de nós.
<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Por que era necessário o modelo de objeto de documento (DOM)?
Nos primeiros anos da Internet, havia um navegador entre o Netscape Navigator 4 e o Internet Explorer 4. Ambos os browsers seguiam uma versão diferente de HTML Dinâmico (DHTML), provando assim ser difícil correr o mesmo código HTML em browsers diferentes. Com o medo crescente de a web perder a sua natureza multiplataforma, foi criado um novo órgão independente chamado World Wide Web Consortium (W3C). Era da responsabilidade do W3C manter os padrões de comunicação web e isso quando ele começou a trabalhar no DOM. É por causa do DOM que o JavaScript obtém a capacidade de criar HTML dinâmico e um desenvolvedor pode manipular os vários nós de um documento.
Existem vários métodos fornecidos pelo DOM como uma interface de programação que permite alterar o documento HTML da forma que você gostaria de fazer como um desenvolvedor. Aqui estão alguns exemplos de recursos da API do DOM:
- A habilidade de encontrar um elemento na página web baseado em seu id ou classe.
- A habilidade de mudar o estilo ou o conteúdo entre as tags.
- A habilidade de rastrear vários eventos na página e adicionar os ouvintes do evento.
- A habilidade de adicionar ou remover nós HTML.
- e assim por diante
O DOM pode ser acessado usando o objeto
documentno navegador. Aqui está um exemplo simples de como acessar um elemento com
id="demo” com a ajuda do objeto
documentno navegador usando JavaScript.
Aqui está a lista oficial de todas as propriedades e métodos do objeto documento no navegador.
Browser Object Model ou o BOM
Apenas como o DOM é uma interface para interagir com o documento o Browser Object Model é a interface para interagir com o navegador fora do contexto do próprio documento. O BOM foi considerado bastante problemático por ser a única parte do JavaScript que não tinha nenhum padrão que o regesse. No entanto, com o lançamento do HTML5, a maioria das funcionalidades relacionadas ao BOM passou a ser separada do padrão oficial do HTML5, o que levou a uma redução maciça da confusão em torno do BOM.
O BOM pode ser acessado usando o objeto janela que representa a janela do navegador. Todas as variáveis globais são uma parte do objeto janela nos navegadores. Vamos dar uma olhada em como você pode acessar o objeto janela e suas propriedades:
<!DOCTYPE html><html><body><p></p><script>var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var x = document.getElementById("demo");x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";</script></body></html>Aqui estão alguns exemplos das características que são oferecidas pelo BOM API:
- Abrir ou fechar uma janela.
- Movendo ou redimensionando a janela.
- Configurando as dimensões da janela.
- Requerendo a localização do usuário.
- Configurando o histórico do navegador.
- Acessando os cookies
- e assim por diante
>
Aqui está a lista oficial de todas as propriedades e métodos do Browser Object Model.
Estes três componentes formam o tempo de execução do JavaScript no navegador e lhe dão uma API para interagir com o JavaScript Engine. Por favor, espalhe algum amor dando a este artigo um polegar para cima se você gostou, mantenha-me motivado. Você pode assistir a este espaço para o próximo artigo ou pode assinar a minha Newsletter e eu o notificaria assim que o próximo artigo for publicado. Não se esqueça de deixar um artigo parecido ou partilhar o artigo se foi útil!
Publicado anteriormente em https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/
Tags
Cria a tua conta gratuita para desbloquear a tua experiência de leitura personalizada.