JavaScript: Recursos nativos do navegador

Galeria de Imagens Responsiva

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

É 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.

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:

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.

Deixe seu Comentário!