Funções, Eventos e Manipulação do DOM
Funções são blocos de código reutilizáveis que executam uma tarefa específica quando chamados.
function saudar(nome) {
return "Olá, " + nome + "!";
}
// Chamando a função
let mensagem = saudar("Ana");
console.log(mensagem); // "Olá, Ana!"
Parâmetros são variáveis definidas na função; argumentos são os valores passados quando a função é chamada.
function calcular(a, b, operacao) {
switch(operacao) {
case 'soma':
return a + b;
case 'multiplicacao':
return a * b;
default:
return 'Operação inválida';
}
}
console.log(calcular(5, 3, 'soma')); // 8
A palavra-chave return especifica o valor que a função deve devolver quando é chamada.
function ehPar(numero) {
return numero % 2 === 0;
}
if (ehPar(4)) {
console.log("O número é par!");}
Escopo local: variáveis declaradas dentro de uma função só existem dentro dela.
function exemploEscopo() {
let variavelLocal = "Só existe aqui";
console.log(variavelLocal); // Funciona
}
exemploEscopo();
// console.log(variavelLocal); // Erro!
let somar = function(a, b) {
return a + b;
};
let somar = (a, b) => a + b; let quadrado = x => x * x; let saudar = () => "Olá mundo!";
this. Ideais para callbacks e funções simples.
Eventos são ações que acontecem no navegador: cliques, teclas pressionadas, movimento do mouse, carregamento da página, etc.
// Evento de clique
document.getElementById("botao").onclick = function() {
alert("Botão clicado!");
};
A forma moderna e recomendada de tratar eventos é usando addEventListener().
document.getElementById("botao").addEventListener("click", function() {
console.log("Evento tratado!");
});
| Evento | Quando ocorre | Exemplo de uso |
|---|---|---|
click |
Clique do mouse | Botões, links |
keydown |
Tecla pressionada | Formulários, jogos |
mouseover |
Mouse passa sobre elemento | Tooltips, efeitos hover |
load |
Página terminou de carregar | Inicialização de scripts |
submit |
Formulário enviado | Validação de dados |
Funções de evento recebem um objeto event com informações sobre o que aconteceu.
document.addEventListener("click", function(evento) {
console.log("Clicou em:", evento.target);
console.log("Posição X:", evento.clientX);
console.log("Posição Y:", evento.clientY);
});
Use preventDefault() para impedir o comportamento padrão de um evento.
document.getElementById("link").addEventListener("click", function(e) {
e.preventDefault(); // Impede navegação
console.log("Link clicado, mas não navegou");
});
O Document Object Model (DOM) é uma representação em árvore de todos os elementos HTML da página, permitindo que o JavaScript os manipule.
// Acessando elementos
let titulo = document.getElementById("titulo");
let paragrafos = document.getElementsByTagName("p");
let botoes = document.querySelectorAll(".botao");
| Método | Descrição | Retorna |
|---|---|---|
getElementById() |
Seleciona por ID | Um elemento |
getElementsByClassName() |
Seleciona por classe | Lista de elementos |
querySelector() |
Seleciona por seletor CSS | Primeiro elemento |
querySelectorAll() |
Seleciona todos por seletor CSS | Lista de elementos |
let elemento = document.getElementById("texto");
// Alterar texto
elemento.textContent = "Novo texto";
elemento.innerHTML = "<strong>Texto em negrito</strong>";
// Alterar atributos
elemento.setAttribute("class", "destaque");
elemento.style.color = "red";
// Criar novo elemento
let novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Novo parágrafo";
// Adicionar ao DOM
document.body.appendChild(novoParagrafo);
// Remover elemento
let elemento = document.getElementById("remover");
elemento.parentNode.removeChild(elemento);
addEventListener()querySelector() facilitam o acesso aos elementosParabéns! Você domina funções, eventos e DOM. Agora vamos explorar ambientes de desenvolvimento e projetos práticos!