O objeto global window é a representação da janela do navegador que hospeda o documento. Ele serve como o objeto global para todo o código JavaScript do lado do cliente, o que significa que todas as variáveis e funções globais são, por padrão, propriedades e métodos do objeto window.

Propriedades e Métodos do Objeto window

Para interagir com as dimensões da janela e seu comportamento, podemos usar as seguintes propriedades e métodos:

console.log("Largura da viewport (interno):", window.innerWidth);   // Largura da área de visualização
console.log("Altura da viewport (interno):", window.innerHeight); // Altura da área de visualização
console.log("Largura total da janela (externo):", window.outerWidth);  // Largura de toda a janela, incluindo barras de ferramentas/scroll
console.log("Altura total da janela (externo):", window.outerHeight); // Altura de toda a janela, incluindo barras de ferramentas/scroll

// Abrindo e fechando janelas
const novaJanela = window.open('https://example.com', '_blank', 'width=600,height=400'); // Abre uma nova janela/aba
// novaJanela.close(); // Fecha a janela que acabou de ser aberta (se tiver permissão)
// window.close();     // Tenta fechar a janela atual (muitas vezes requer que a janela tenha sido aberta por script)

Manipulação do Document Object Model (DOM)

O DOM permite a interação e modificação do conteúdo e estrutura da página web. A seguir, exemplos de como alterar estilos, adicionar e remover elementos dinamicamente.

Alterendo Classes CSS

A alternância de classes CSS é um método comum para mudar a aparência de um elemento em resposta a eventos.

document.getElementById('toggleButton').addEventListener('click', () => {
 const targetElement = document.getElementById('styledBox');
 targetElement.classList.toggle('active-style'); // Adiciona ou remove a classe 'active-style'
});

Criação e Inserção de Elementos

Adicionar novos elementos à página em tempo de execução é fundamental para interfaces dinâmicas.

document.getElementById('addElementBtn').addEventListener('click', () => {
 const listContainer = document.getElementById('myDynamicList');
 const newItem = document.createElement('li');
 newItem.className = 'dynamic-item';
 const itemText = document.createTextNode('Item da Lista ' + (listContainer.children.length + 1));
 newItem.appendChild(itemText);
 listContainer.appendChild(newItem);
});

Remoção de Elementos

Remover elementos da página é igualmente importante para manter a interface limpa e relevante.

document.getElementById('removeElementBtn').addEventListener('click', () => {
 const listItems = document.querySelectorAll('#myDynamicList .dynamic-item');
 if (listItems.length > 0) {
   listItems[0].remove(); // Remove o primeiro item da lista
 }
});

Comunicações Assíncronas com AJAX

O AJAX (Asynchronous JavaScript and XML) permite que páginas web atualizem conteúdo de forma assíncrona, sem recarregar a página inteira.

const requisicaoDados = new XMLHttpRequest();
requisicaoDados.open('GET', 'http://localhost:3000/api/data'); // Define o método e o URL da requisição

requisicaoDados.onload = () => { // Manipula a resposta quando a requisição é concluída com sucesso
 if (requisicaoDados.status >= 200 && requisicaoDados.status < 300) {
   const respostaFormatada = JSON.parse(requisicaoDados.responseText);
   console.log('Dados recebidos com sucesso:', respostaFormatada);
 } else {
   console.error('Erro na requisição:', requisicaoDados.status, requisicaoDados.statusText);
 }
};

requisicaoDados.onerror = () => { // Captura erros de rede
 console.error('Erro de conexão com o servidor.');
};

requisicaoDados.send(); // Envia a requisição

Outros Objetos do Ambiente do Navegador

Além de window e document, existem outros objetos importantes para interagir com o ambiente do navegaodr:

• history: Gerencia o histórico de navegação da sessão.
• location: Permite acessar e manipular a URL da página atual.
• navigator: Fornece informações sobre o navegador do usuário (nome, versão, etc.).
• screen: Contém dados sobre a tela do usuário (resolução, profundidade de cor).

Escopo de Variáveis no JavaScript

Variáveis declaradas com var dentro de funções têm escopo de função e são sujeitas ao fenômeno de "hoisting" (elevação), onde a declaração é movida para o topo do seu escopo, mas não a atribuição.

function verificarEscopoVar() {
 console.log(minhaVariavel);     // Output: undefined (declaração é elevada, mas não a atribuição)
 var minhaVariavel = "Valor interno da função";
 console.log(minhaVariavel);     // Output: "Valor interno da função"
 console.log(window.minhaVariavel); // Output: undefined (não está no escopo global)
}
verificarEscopoVar();

Simplificação com jQuery

A biblioteca jQuery simplifica muitas operações de DOM e manipulação de eventos, tornando o código mais conciso.

$(document).ready(function() { // Garante que o DOM esteja completamente carregado
 $('#controlBtn').on('click', function() { // Usa seletor de ID e método .on para eventos
   $('#targetDiv').toggleClass('active-class'); // Alterna a classe 'active-class' no elemento com ID 'targetDiv'
 });
});