Entendendo o JavaScript: DOM, Assincronismo e Event Loop

Entendendo o JavaScript: DOM, Assincronismo e Event Loop

Suas anotações estão no caminho certo! Ajustei e organizei as informações para que fiquem mais claras e precisas, corrigindo alguns termos e adicionando detalhes importantes.

O JavaScript e a Estrutura da Web

O JavaScript é uma linguagem de programação essencial para a web, atuando de duas formas principais:

• No lado do cliente (navegador): É onde o JavaScript interage diretamente com o usuário e com o conteúdo da página.

• No lado do servidor (Node.js): Permite que o JavaScript seja usado para criar aplicações back-end, como APIs e servidores.

Todas as páginas da internet são construídas como uma árvore de elementos, representada pelo DOM (Document Object Model). O HTML é o esqueleto dessa árvore, e é por meio da tag <script> que o JavaScript é "injetado" na página. Quando você acessa um site, o navegador primeiro recebe o HTML, e depois os arquivos CSS (para estilização), fontes, imagens e outros recursos que compõem a página.

Não existe JavaScript visual no navegador sem HTML. O HTML é a estrutura básica que o JavaScript manipula.

Manipulação do DOM

O JavaScript tem um suporte nativo para a manipulação do DOM, o que significa que ele pode:

• Recuperar dados: Acessar o conteúdo de elementos HTML.

• Alterar elementos: Mudar textos, atributos (como src de uma imagem ou href de um link), classes CSS, etc.

• Adicionar e remover elementos: Criar novos elementos HTML e inseri-los na página, ou remover elementos existentes.

Essa capacidade de manipular o DOM é o que traz dinamicidade às páginas web. Por exemplo, através de funções JavaScript, você pode fazer com que botões, formulários e outros elementos da página reajam às ações do usuário.

Eventos e Event Listener

Os elementos HTML podem acionar funções e métodos JavaScript através de eventos. Um conceito muito importante aqui é o event listener, que "escuta" por um tipo específico de evento (como um clique do mouse, o movimento do scroll, o envio de um formulário, etc.) e executa uma função JavaScript quando esse evento ocorre.

• Exemplo: Quando você clica em um botão, um event listener associado a esse botão pode chamar uma função JavaScript que, por exemplo, exibe uma mensagem ou altera o conteúdo de um elemento HTML. A interação é direta: o JavaScript reage ao HTML.

No navegador, o objeto document representa a árvore DOM. Com o JavaScript, você pode selecionar elementos específicos usando métodos como document.getElementById(), document.querySelector(), entre outros. Por exemplo, document.getElementById("main-title").innerText = "Olá, Live!" seleciona um elemento com o ID "main-title" e altera seu conteúdo de texto para "Olá, Live!".

Quando você usa console.log(), a saída aparece no console do navegador, que é uma ferramenta para desenvolvedores.

Assincronismo, Promises, Call Stack e Event Loop

O assincronismo é fundamental no JavaScript, especialmente quando se lida com operações que levam tempo para serem concluídas, como:

• Requisições a APIs (buscar dados de um servidor, como no exemplo da Pokédex).

• Carregamento de arquivos.

• Timers (como setTimeout).

Uma função assíncrona permite que seu código continue executando outras tarefas enquanto espera que uma operação demorada seja concluída.

Promises

Uma Promise (Promessa) no JavaScript representa um valor que pode estar disponível agora, no futuro, ou nunca. Ela é uma garantia de que você terá um resultado (positivo ou negativo) em algum momento.

• Uma Promise pode ser resolvida (com sucesso e um resultado) ou rejeitada (com um erro).

• A sintaxe async/await é uma forma mais moderna e legível de trabalhar com Promises, tornando o código assíncrono mais parecido com o síncrono. Basicamente, async indica que uma função é assíncrona e pode usar await para "esperar" a resolução de uma Promise antes de continuar sua execução.

Call Stack e Event Loop

Estes são conceitos cruciais para entender como o JavaScript executa o código, especialmente o assíncrono:

• Call Stack (Pilha de Chamadas): É onde o JavaScript empilha as funções que estão sendo executadas no momento. O JavaScript é "single-threaded", o que significa que ele só pode executar uma coisa por vez.

• Event Loop (Loop de Eventos): É o mecanismo que permite ao JavaScript lidar com o assincronismo. Ele constantemente verifica a Call Stack e uma fila de "callbacks" (funções a serem executadas quando uma operação assíncrona termina). Quando a Call Stack está vazia, o Event Loop pega a próxima função da fila de callbacks e a move para a Call Stack para ser executada.

Esses dois conceitos trabalham juntos para garantir que operações demoradas não bloqueiem a execução do restante do seu código JavaScript, mantendo a página responsiva para o usuário.

Fonte: Fernanda Kipper | DEV 

Nome do vídeo no Youtube: Tutorial de Javascript | Manipulação da DOM, Async/Await e CallStack e Event Loop

Link do vídeo no Youtube: https://www.youtube.com/watch?v=GUiluhnFxWw