Se você trabalha com JavaScript, deve conhecer os recursos nativos do navegador que ajudam a manipular a página web e melhorar a experiência do usuário. Se não, vamos relembrar neste artigo, pois vou falar sobre três desses recursos: console, window e document.
Console
![Recursos nativos do navegador](https://imperioog.com/wp-content/uploads/2023/04/10782838_19199262-1024x1024.jpg)
É uma ferramenta disponível em praticamente todos os navegadores modernos e é utilizado para exibir mensagens de erro, depurar códigos e testar funções e variáveis em tempo real. Além disso, ele também pode ser utilizado para exibir mensagens informativas e personalizadas.
- Super Oferta - Novo Echo Spot com Alexa (2024)
- Assistir Dorama é pecado? Esses conteúdos são prejudiciais a fé cristã?
- Creditas: Não faça empréstimo consignado antes de ver essas informações
- Renda com Cartão de Credito - Aprenda Agora
- Suicídio é pecado? Um Estudo Detalhado
- Aumente seu Score em 7 dias
- HBO Max vai virar Max: Chega em 27 de Fevereiro. Veja o que muda!
Para acessar o Console, basta abrir o navegador e pressionar F12 ou clicar com o botão direito do mouse na página e selecionar a opção “Inspecionar”. Em seguida, vá para a guia Console.
O Console possui diversas opções para depuração de código. Algumas das opções mais comuns são:
- console.log(): utilizado para exibir mensagens informativas:
console.log("Olá, mundo!");
- console.warn(): utilizado para exibir mensagens de aviso:
console.warn("Cuidado! Este é um aviso.");
- console.error(): utilizado para exibir mensagens de erro:
console.error("Ops! Ocorreu um erro.");
- console.table(): utilizado para exibir dados em formato de tabela:
const frutas = ["maçã", "banana", "laranja"];
console.table(frutas);
- console.time() e console.timeEnd(): utilizados para medir o tempo de execução de um trecho de código, por exemplo:
console.time("tempo de execução");
// aqui vai o código que você quer medir o tempo de execução
console.timeEnd("tempo de execução");
Abaixo está uma lista com todas as opções disponíveis no objeto Console do navegador:
- console.assert(): utilizado para testar expressões e lançar um erro caso a expressão seja falsa.
- console.clear(): utilizado para limpar o Console.
- console.count(): utilizado para contar o número de vezes que a função é chamada.
- console.debug(): utilizado para imprimir uma mensagem de debug.
- console.dir(): utilizado para exibir uma lista interativa de propriedades de um objeto.
- console.dirxml(): utilizado para exibir um objeto como uma árvore no Console.
- console.group(): utilizado para agrupar mensagens relacionadas.
- console.groupCollapsed(): utilizado para agrupar mensagens relacionadas no Console, mas inicialmente exibir o grupo fechado.
- console.groupEnd(): utilizado para finalizar um grupo no Console.
- console.info(): utilizado para imprimir uma mensagem de informação.
- console.profile(): utilizado para iniciar o profiling de desempenho do código no Console.
- console.profileEnd(): utilizado para finalizar o profiling de desempenho do código no Console.
- console.timeStamp(): utilizado para adicionar um timestamp.
- console.trace(): utilizado para imprimir uma mensagem de erro com a stack trace.
Essas opções são extremamente úteis para debugar o seu código e entender melhor o comportamento do seu programa. Experimente então utilizar essas funcionalidades em seus projetos para melhorar a sua eficiência e produtividade.
Leia Também: Como usar Javascript em uma Página HTML
Window
Em segundo lugar, vamos falar sobre o recurso “window” em JavaScript. Este é um objeto global que representa a janela do navegador juntamente com todas as suas propriedades e métodos.
Uma das principais propriedades do “window” é o “document”, que representa o conteúdo da janela e permite acessar e manipular elementos HTML em uma página da web.
Além disso, o “window” possui muitas outras propriedades e métodos úteis para trabalhar com a janela do navegador. Só para exemplificar, aqui estão alguns códigos:
// abre uma nova janela
window.open("https://www.google.com/");
// redireciona a página atual para outro URL
window.location.href = "https://www.google.com/";
// exibe uma mensagem de alerta
window.alert("Olá, mundo!");
// define um temporizador para executar uma função após um determinado tempo
window.setTimeout(function() {
console.log("Esta mensagem será exibida após 5 segundos.");
}, 5000);
Além desses exemplos, aqui está uma lista, mas não completa, das principais propriedades e métodos disponíveis no objeto “window”:
- location: contém informações sobre o URL atual e permite a manipulação do histórico do navegador
- navigator: contém informações sobre o navegador do usuário como resultado
- screen: contém informações sobre a tela do dispositivo do usuário
- history: permite a navegação para trás e para frente no histórico do navegador
- localStorage e sessionStorage: permitem armazenar dados localmente no navegador
- alert(), prompt() e confirm(): exibem caixas de diálogo para o usuário interagir
- setInterval() e setTimeout(): definem temporizadores para executar funções após um determinado tempo
- open(): abre uma nova janela do navegador
- close(): fecha a janela atual
- scroll(): rola a página da web para uma determinada posição
- resizeTo() e resizeBy(): redimensionam a janela do navegador
- focus() e blur(): definem o foco na janela do navegador
- print(): imprime o conteúdo da página da web
- postMessage(): permite a comunicação entre janelas e frames.
A princípio, essas são apenas algumas das muitas propriedades disponíveis no objeto “window”.
Document
Em resumo, o “document” representa a página HTML carregada no navegador. Assim sendo, com ele, podemos selecionar elementos da página, criar novos elementos, modificar o conteúdo existente e muito mais.
Portanto, veja alguns exemplos de como podemos utilizar o “document”:
- Selecionar um elemento pelo ID:
const meuElemento = document.getElementById('id-do-elemento');
- Selecionar vários elementos por classe:
const meusElementos = document.getElementsByClassName('minha-classe');
- Selecionar um elemento por seletor CSS:
const meuElemento = document.querySelector('.minha-classe');
- Criar um novo elemento:
const novoElemento = document.createElement('div');
novoElemento.textContent = 'Meu novo elemento';
A saber, além desses exemplos, o “document” possui diversas outras opções disponíveis, como:
- document.doctype: retorna o tipo de documento, por exemplo: “<!DOCTYPE html>”
- document.title: retorna o título da página
- document.URL: retorna a URL da página
- document.domain: retorna o domínio da página
- document.lastModified: retorna a data da última modificação da página
- document.characterSet: retorna o conjunto de caracteres usado na página
- document.activeElement: retorna o elemento atualmente ativo na página
- document.head: retorna o elemento head da página
- document.body: retorna o elemento body da página
- document.forms: retorna uma coleção de todos os elementos form da página
- document.images: retorna uma coleção de todos os elementos img da página
- document.links: retorna uma coleção de todos os elementos a com atributo href definido
- document.scripts: retorna uma coleção de todos os elementos script da página
- document.styleSheets: retorna uma coleção de todos os objetos StyleSheet da página
- document.defaultView: retorna o objeto Window associado ao documento
- document.createAttribute(name): cria um novo atributo com o nome especificado
- document.createElement(tagName): cria um novo elemento com a tag especificada
- document.createTextNode(text): cria um novo nó de texto com o texto especificado
- document.getElementById(id): retorna o elemento com o ID especificado como resultado
- document.getElementsByClassName(className): retorna uma lista de elementos com a classe especificada
- document.getElementsByTagName(tagName): retorna uma lista de elementos com a tag especificada
- document.querySelectorAll(selector): retorna uma lista de todos os elementos que correspondem ao seletor especificado
Em suma, essas são apenas algumas das muitas opções disponíveis no objeto Document.
Cursos e Livros indicados:
- Desenvolvimento Web com HTML, CSS e JavaScript
- Pacote Full Stack Master
- JavaScript: O Guia Definitivo
- JavaScript do zero ao profissional
Por fim, espero que isso tenha ajudado a entender melhor esses importantes recurso do navegador em JavaScript! Esses recursos são importantes para o desenvolvimento web com JavaScript, pois permitem manipular a página em tempo real, depurar códigos e criar uma experiência de usuário mais dinâmica e interativa. Vale a pena explorá-los para descobrir como podem ser úteis no seu projeto.