Objeto Window, Ambientes de Desenvolvimento e Projetos Práticos
window
, que representa a janela do navegador e fornece acesso a métodos e propriedades globais importantes.
O objeto window
é o objeto global no navegador. Todas as variáveis e funções globais são propriedades dele.
// Estas são equivalentes: window.alert("Olá!"); alert("Olá!"); // Acessando propriedades da janela console.log(window.innerWidth); // Largura da janela console.log(window.innerHeight); // Altura da janela
Método | Descrição | Exemplo de uso |
---|---|---|
alert() |
Exibe uma caixa de alerta | Notificações simples |
confirm() |
Exibe confirmação (OK/Cancel) | Confirmação de ações |
prompt() |
Solicita entrada do usuário | Coleta de dados simples |
setTimeout() |
Executa após um tempo | Delays e animações |
setInterval() |
Executa repetidamente | Relógios e atualizações |
// Informações da janela console.log("Largura:", window.innerWidth); console.log("Altura:", window.innerHeight); console.log("URL atual:", window.location.href); console.log("User Agent:", window.navigator.userAgent); // Histórico de navegação window.history.back(); // Voltar window.history.forward(); // Avançar
Permite armazenar dados localmente no navegador do usuário.
// LocalStorage (persiste após fechar o navegador) localStorage.setItem("nome", "João"); let nome = localStorage.getItem("nome"); // SessionStorage (dura apenas a sessão) sessionStorage.setItem("sessao", "dados temporários"); let sessao = sessionStorage.getItem("sessao");
Chrome DevTools: Inspetor, console, debugger
Firefox Developer Tools: Ferramentas avançadas
Safari Web Inspector: Para desenvolvimento iOS
Visual Studio Code: Gratuito, extensível
WebStorm: IDE completa (pago)
Sublime Text: Leve e rápido
npm/yarn: Gerenciadores de pacotes
Webpack: Bundler de módulos
Vite: Build tool moderna
React: Biblioteca para UI
Vue.js: Framework progressivo
Node.js: JavaScript no servidor
O console é a ferramenta mais importante para debug e desenvolvimento.
// Métodos úteis do console console.log("Informação básica"); console.warn("Aviso importante"); console.error("Erro encontrado"); console.table([{nome: "Ana", idade: 25}, {nome: "Bob", idade: 30}]); console.time("operacao"); // ... código ... console.timeEnd("operacao");
Técnicas para encontrar e corrigir bugs no código JavaScript.
function calcular(a, b) { debugger; // Pausa a execução aqui let resultado = a + b; console.log("Resultado:", resultado); return resultado; } // Uso de try/catch para tratamento de erros try { let resultado = calcular(10, "abc"); } catch (error) { console.error("Erro:", error.message); }
Uma calculadora completa com interface visual e todas as operações básicas.
Jogo onde o usuário tenta adivinhar um número secreto entre 1 e 100.
Relógio digital com data e hora atualizados em tempo real.
Você dominou os fundamentos essenciais da linguagem mais importante da web!
Sintaxe, comentários e estrutura básica
Variáveis, operadores, condicionais e loops
Programação funcional e interatividade
Manipulação de páginas e projetos reais