Introdução

Você já se perguntou como algumas páginas da web parecem ganhar vida quando você interage com elas? Já notou que, ao clicar em um botão, algo muda, aparece ou desaparece? Tudo isso é possível graças ao JavaScript, que permite controlar o conteúdo da página em tempo real!

Neste post, você vai aprender a manipular os elementos de uma página web — como botões, textos e imagens — para torná-los interativos. Vamos mostrar como o JavaScript pode "escutar" o que o usuário faz e, em seguida, tomar uma ação, como mudar o texto de um botão ou alterar a cor de uma seção da página.

Pré-requisitos

Antes de começar, é importante que você tenha uma noção básica de HTML e como o JavaScript funciona. Caso ainda não tenha visto, confira estes dois guias:

Agora, crie uma pasta no seu computador e dentro dela, dois arquivos: index.html e scripts.js. O index.html será a página que exibiremos no navegador, e o scripts.js conterá o código JavaScript que usaremos.

O que você vai aprender a fazer?

Neste guia, você vai aprender a:

  • Executar ações quando um botão é clicado.
  • Ler e alterar o conteúdo dos elementos da página, como textos e imagens.
  • Mudar a aparência de um elemento (cor, tamanho da fonte) usando JavaScript.
  • E muito mais!

Não se preocupe com termos complicados agora. Vamos direto ao ponto com exemplos práticos e fáceis de entender. Ah, e se algo parecer difícil no começo, não desanime! No final, tudo fará sentido, eu prometo!

Introdução ao DOM (não precisa ter medo!)

Agora que você já sabe um pouco sobre o que podemos fazer, vamos falar de um termo que pode parecer complicado, mas é super simples: DOM, ou Document Object Model.

O DOM nada mais é do que uma representação da página HTML no JavaScript. Pense na sua página como uma árvore cheia de elementos (como botões, textos, imagens). Cada um desses elementos pode ser "encontrado" e modificado com JavaScript, e é isso que chamamos de manipulação do DOM.

 

O que são eventos no JavaScript?

Eventos são ações que acontecem na página, como um clique em um botão ou o pressionamento de uma tecla. Podemos usar JavaScript para "ouvir" esses eventos e executar uma função quando algo acontece.

Aqui está um exemplo básico, adicione esse conteúdo ao index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulando Eventos | Vivendo de Programação</title>
    <script src="scripts.js" defer></script>
</head>
<body>
    <h1>Manipulação de Eventos</h1>
    <button id="meuBotao">Clique em mim!</button>
</body>
</html>

E esse conteudo ao scripts.js:

document.getElementById('meuBotao').addEventListener('click', function() {
    alert('Você clicou no botão!');
});

Salve ambos os arquivos, e abra o index.html no navegador.

O que acontecerá? Quando clicar no botão, o JavaScript exiberá um alerta. Isso é um exemplo de manipulação de eventos!

Eventos mais comuns

Aqui estão alguns dos eventos mais usados no JavaScript:

  • click: Quando um elemento é clicado.
  • keypress, keydown, keyup: Quando uma tecla é pressionada ou solta.
  • mouseover, mouseout: Quando o mouse passa por cima ou sai de um elemento.

Vamos ver na prática esses eventos. Crie uma nova pasta com o nome “Eventos mais usados com Javascript”, isso servirá de exemplo caso queira consultar novamente no futuro. Dentro da pasta crie os arquivos index.html e scripts.js para entendermos os eventos:

No index.html adicone esse conteúdo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos no JavaScript | Vivendo de Programação</title>
    <script src="scripts.js" defer></script>
</head>
<body>
    <h1>Testando Eventos</h1>
    <button id="cliqueBotao">Clique</button>
    <input type="text" id="inputTeclado" placeholder="Digite algo">
    <div id="caixaMouse" style="width: 200px; height: 100px; background-color: lightblue;"></div>
</body>
</html>

No scripts.js adcione esse conteúdo:

// Evento de clique
document.getElementById('cliqueBotao').addEventListener('click', function() {
    alert('Botão clicado!');
});

// Evento de teclado
document.getElementById('inputTeclado').addEventListener('keyup', function(event) {
    console.log('Tecla pressionada: ' + event.key);
});

// Evento de mouse
document.getElementById('caixaMouse').addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightgreen';
});

document.getElementById('caixaMouse').addEventListener('mouseout', function() {
    this.style.backgroundColor = 'lightblue';
});

Salve o index.html e o scripts.js e abra o index.html no navegador.

O que você deve observar nesse exemplo:

  • Ao clicara no botão você visualizará a  mensagem de alerta, indicando que o botão foi clicado.
  • Ao digitar qualquer tecla o evento será capturado e exibido no console do desenvolvedor (Para abrir pressione F12 e encontre a guia Console).
  • Ao passar colocar o mouse em cima da div id caixaMouse, o texto ficará em um tom de verde, ao tirar ele ficará com um tom de azul.

 

Como manipular elementos HTML com getElementById e querySelector

Para manipular elementos HTML, precisamos "capturá-los" no JavaScript usando suas IDs ou classes.

  • getElementById: Seleciona um elemento pelo seu ID.
  • querySelector: Seleciona o primeiro elemento que corresponde a um seletor CSS (como classes ou tags).

Aqui está um exemplo simples de como capturar um elemento e modificar seu conteúdo.

Crie uma pasta com o nome “Manipulando HTML com Javascript” para colocar novos arquivos chamados index.html e scripts.js para salvar os exemplos para referencia futura.

No index.html inclua o código abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos no JavaScript | Vivendo de Programação</title>
    <script src="scripts.js" defer></script>
</head>
<body>
    <h2 id="meuTexto">Texto original</h2>
	<button id="mudarTexto">Mudar Texto</button>
</body>
</html>

E no scripts.js o código abaixo:

document.getElementById('mudarTexto').addEventListener('click', function() {
    document.getElementById('meuTexto').innerHTML = 'O texto foi alterado!';
});

Salve o index.html e o scripts.js e abra o index.html no navegador.

Ao clicar no botão, ele  modificará o texto do H2.

 

Alterando a formatação com JavaScript

Além de mudar o conteúdo, também podemos alterar o estilo dos elementos usando JavaScript. Vamos modificar a cor do texto e o tamanho da fonte.

Crie uma pasta com o nome “Formatando HTML com Javascript” para colocar novos arquivos chamados index.html e scripts.js para salvar os exemplos para referencia futura.

No index.html inclua o código abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos no JavaScript | Vivendo de Programação</title>
    <script src="scripts.js" defer></script>
</head>
<body>
    <h2 id="meuTexto">Texto original</h2>
	<button id="mudarTexto">Mudar Texto</button>
</body>
</html>

E no scripts.js o código abaixo:

document.getElementById('mudarTexto').addEventListener('click', function() {
    var texto = document.getElementById('meuTexto');
    texto.style.color = 'red';
    texto.style.fontSize = '24px';
});

Salve o index.html e o scripts.js e abra o index.html no navegador.

Ao clicar no botão, a formatação será aplicada no texto.

Usando eventos durante o carregamento da página

Podemos executar uma função automaticamente quando a página é carregada completamente. Isso é útil quando queremos garantir que todos os elementos estão disponíveis antes de começar a interagir com eles.

window.addEventListener('load', function() {
    alert('A página foi carregada!');
});

Conclusão

Agora que você já sabe como manipular o DOM com JavaScript, pode criar páginas web mais dinâmicas e interativas! Use essas técnicas para adicionar funcionalidades incríveis às suas páginas. Lembre-se: JavaScript é a chave para tornar seu site mais vivo e responsivo às ações dos usuários.

Então, o que está esperando? Coloque as mãos no código, experimente as diferentes funções e explore como o JavaScript pode transformar seus projetos web. Você está apenas no começo de uma jornada incrível no mundo do desenvolvimento!

 

As principais dúvidas sobre Manipulação de DOM com Javascript

Pergunta: O que significa "manipular elementos da página"?

Manipular elementos da página significa usar JavaScript para alterar ou interagir com os elementos HTML, como botões, textos e imagens. Por exemplo, você pode alterar o conteúdo de um parágrafo ou mudar a cor de um botão com base em uma ação do usuário.

 

Pergunta: Preciso entender HTML e CSS antes de aprender JavaScript?

Sim, ter uma noção básica de HTML e CSS é muito importante, pois eles formam a estrutura e o estilo da página que você vai manipular com JavaScript. Se você já sabe criar páginas simples, estará pronto para começar a interagir com elas usando JavaScript.

 

Pergunta: O que é o DOM?

O DOM (Document Object Model) é a forma como o navegador representa a estrutura HTML de uma página. Ele permite que o JavaScript acesse e altere o conteúdo e a estrutura dos elementos da página.

 

Pergunta: Como posso "escutar" ações dos usuários, como cliques em um botão?

Você pode usar eventos JavaScript, como o click, para "escutar" as ações dos usuários. Um exemplo seria criar um evento para um botão, de forma que, quando clicado, algo aconteça na página, como uma mudança de cor ou a exibição de uma mensagem.

 

Pergunta: Como o JavaScript pode alterar o conteúdo de um elemento da página?

O JavaScript usa métodos como getElementById ou querySelector para acessar elementos específicos da página. Depois, você pode alterar o conteúdo de texto usando a propriedade innerHTML ou modificar estilos com style.

 

Pergunta: Posso usar o JavaScript para mudar a aparência de um elemento?

Sim! O JavaScript pode alterar o estilo de qualquer elemento na página, como a cor, o tamanho da fonte e o espaçamento. Para isso, você pode usar a propriedade style e definir atributos como color e fontSize.

 

Pergunta: Como faço para garantir que meu JavaScript seja executado apenas quando a página terminar de carregar?

Você pode usar o evento load para garantir que o JavaScript seja executado somente depois que a página estiver completamente carregada. Isso evita erros quando o JavaScript tenta manipular elementos que ainda não foram carregados.

 

Pergunta: Preciso sempre separar o JavaScript do HTML?

É uma boa prática separar o JavaScript do HTML em um arquivo externo, como scripts.js. Isso deixa seu código mais organizado e facilita a manutenção da página.

 

Praticar é a chave para dominar JavaScript e a manipulação de elementos da página. Não se preocupe em entender tudo de primeira – o mais importante é tentar, errar e aprender com a experiência. Programação é sobre colocar a mão na massa, então continue explorando e experimentando!