🛠️ Ambiente e Prática

Objeto Window, Ambientes de Desenvolvimento e Projetos Práticos

Módulo 4 de 4 - 100% Completo!

🌐 10. Objeto Window

🎯 Objetivo: Explorar o objeto window, que representa a janela do navegador e fornece acesso a métodos e propriedades globais importantes.

10.1 O que é o Objeto Window?

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

10.2 Métodos Importantes do Window

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
🌐 Demonstração: Métodos Window
Teste os métodos do objeto Window...

10.3 Propriedades do Window

// 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

10.4 localStorage e sessionStorage

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");
💾 Teste de Armazenamento Local
Teste o armazenamento local...

💻 11. Ambiente de Desenvolvimento

🎯 Objetivo: Conhecer as ferramentas e ambientes essenciais para desenvolver aplicações JavaScript de forma profissional e eficiente.

11.1 Ferramentas Essenciais

🌐 Navegadores

Chrome DevTools: Inspetor, console, debugger

Firefox Developer Tools: Ferramentas avançadas

Safari Web Inspector: Para desenvolvimento iOS

📝 Editores de Código

Visual Studio Code: Gratuito, extensível

WebStorm: IDE completa (pago)

Sublime Text: Leve e rápido

🔧 Ferramentas de Build

npm/yarn: Gerenciadores de pacotes

Webpack: Bundler de módulos

Vite: Build tool moderna

📚 Frameworks/Bibliotecas

React: Biblioteca para UI

Vue.js: Framework progressivo

Node.js: JavaScript no servidor

11.2 Console do Navegador

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");
🖥️ Demonstração: Console Methods
Abra o DevTools (F12) e clique no botão para ver os métodos do console...

11.3 Debugging

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);
}

11.4 Boas Práticas

✅ Recomendações para Código Limpo

  • Nomenclatura clara: Use nomes descritivos para variáveis e funções
  • Comentários úteis: Explique o "por quê", não o "o quê"
  • Funções pequenas: Uma função deve fazer apenas uma coisa
  • Consistência: Siga um padrão de estilo de código
  • Versionamento: Use Git para controlar mudanças

🎯 12. Prática com JavaScript

🎯 Objetivo: Aplicar todo o conhecimento adquirido em projetos práticos que demonstram o poder e versatilidade do JavaScript.

🧮 Projeto 1: Calculadora Interativa

Uma calculadora completa com interface visual e todas as operações básicas.

🎮 Projeto 2: Jogo de Adivinhação

Jogo onde o usuário tenta adivinhar um número secreto entre 1 e 100.

🎮 Adivinhe o número secreto! Você tem 10 tentativas.

⏰ Projeto 3: Relógio Digital

Relógio digital com data e hora atualizados em tempo real.

00:00:00
Segunda-feira, 1 de Janeiro de 2024
💡 Mini Desafios
Teste os mini desafios...

🎓 Parabéns! Você concluiu o JavaScript 1

Você dominou os fundamentos essenciais da linguagem mais importante da web!

🌟 Fundamentos

Sintaxe, comentários e estrutura básica

🔧 Tipos & Estruturas

Variáveis, operadores, condicionais e loops

⚡ Funções & Eventos

Programação funcional e interatividade

🛠️ DOM & Prática

Manipulação de páginas e projetos reais

🚀 Próximos Passos Recomendados:

  • 📚 JavaScript Avançado (ES6+, Async/Await, Modules)
  • 🎨 Frameworks (React, Vue.js, Angular)
  • 🔄 APIs e AJAX/Fetch
  • ⚙️ Node.js para backend
  • 📱 JavaScript para mobile (React Native)
🏠 Voltar ao Início