Responsive Web Development

UA8 — JavaScript: Comportamento

JavaScript adiciona interatividade e comportamento dinâmico às páginas web — manipulação do DOM, eventos, validações e muito mais.

Fundamentos

// Variáveis
const nome = "Marcus";   // imutável (preferir)
let idade = 25;          // mutável

// Funções
function saudar(nome) {
  return `Olá, ${nome}!`;
}

// Arrow function
const dobrar = (n) => n * 2;

// Arrays
const frutas = ["maçã", "banana", "uva"];
frutas.forEach(f => console.log(f));
const maiusculas = frutas.map(f => f.toUpperCase());

Manipulação do DOM

// Selecionar elementos
const btn = document.querySelector('#meu-botao');
const cards = document.querySelectorAll('.card');

// Modificar conteúdo
btn.textContent = 'Clique aqui';
btn.style.background = '#3b82f6';
btn.classList.add('ativo');
btn.classList.toggle('visivel');

// Criar e inserir elemento
const li = document.createElement('li');
li.textContent = 'Novo item';
document.querySelector('ul').appendChild(li);

Eventos

// Click
btn.addEventListener('click', () => {
  alert('Clicou!');
});

// Formulário
document.querySelector('form')
  .addEventListener('submit', (e) => {
    e.preventDefault(); // impede o envio padrão
    const nome = document.querySelector('#nome').value;
    console.log(`Enviando: ${nome}`);
  });

// Input em tempo real
document.querySelector('#busca')
  .addEventListener('input', (e) => {
    console.log(e.target.value);
  });

Eventos comuns

Tipos de dados em JavaScript

Operadores em JavaScript

Controle de fluxo

// if / else
if (idade >= 18) {
  console.log("Adulto");
} else {
  console.log("Menor");
}

// switch
switch (dia) {
  case "seg": console.log("Segunda"); break;
  case "ter": console.log("Terça");   break;
  default:  console.log("Outro dia");
}

// for — número de iterações conhecido
for (let i = 0; i < 5; i++) { console.log(i); }

// while — condição avaliada antes
let i = 0;
while (i < 5) { console.log(i); i++; }

// do...while — executa ao menos uma vez
do { console.log(i); i++; } while (i < 5);

Métodos nativos úteis

Métodos de seleção DOM

Manipulação DOM — referência rápida

const el = document.getElementById("box");

// Conteúdo
el.innerHTML = "<b>Novo</b>";   // interpreta HTML
el.textContent = "Apenas texto";  // só texto (seguro)

// Atributos
el.setAttribute("class", "ativo");
const cls = el.getAttribute("class");  // "ativo"
el.removeAttribute("disabled");

// Criar e remover
const p = document.createElement("p");
p.textContent = "Novo parágrafo";
document.body.appendChild(p);
p.parentNode.removeChild(p); // ou p.remove()

Categorias de eventos

Como incluir JavaScript na página

<!-- 1. Inline (evitar) -->
<button onclick="alert('Clicou!')">Clique</button>

<!-- 2. Interno (bloco <script> no HTML) -->
<script>
  console.log("Página carregada");
</script>

<!-- 3. Externo (recomendado — antes de </body>) -->
<script src="js/main.js"></script>

Referências bibliográficas desta UA

• Pinto, R. A. Ferramentas de Desenvolvimento Web. Porto Alegre: SAGAH, 2024.
• Freeman, E.; Robson, E. Use a Cabeça! JavaScript. O’Reilly, 2014.
• Flanagan, D. JavaScript: O Guia Definitivo. 7. ed. O’Reilly, 2020.