Page cover

✍️Mão na Massa

Exercícios Práticos: Mão na Massa com JavaScript e DOM!

Bloco 1: Fundamentos e Primeiros Passos (Exercícios 1-4)

  1. Explorando o Console: Abra qualquer site (como https://www.google.com/search?q=google.com), pressione F12 para abrir as Ferramentas de Desenvolvedor, vá até a aba "Console" e digite console.log("Eu estou explorando a web!");. Pressione Enter e veja o resultado.

  2. A Santíssima Trindade da Web: Com suas próprias palavras, explique a diferença entre HTML, CSS e JavaScript.

  3. Primeira Página Interativa: Copie o código HTML com a função mostrarMensagem() do exemplo da página 7.1. Salve-o como index.html e abra no navegador. Clique no botão e veja o alerta.

  4. O que é o DOM? Usando a analogia da casa de LEGO, explique o que é o DOM (Document Object Model) e por que ele é essencial para que o JavaScript possa interagir com uma página.

Bloco 2: Selecionando Elementos no DOM (Exercícios 5-9)

  1. Seleção por ID: Crie uma página com um título <h1> que tenha o id="titulo-principal". Em uma tag <script>, use document.getElementById("titulo-principal") para selecionar o elemento e exibi-lo no console com console.log().

  2. Seleção por Classe: Crie uma lista não ordenada (<ul>) com três itens (<li>), todos com class="item-lista". Use document.getElementsByClassName("item-lista") para selecionar todos os itens e veja no console o que é retornado (uma HTMLCollection).

  3. Seleção por Tag: Na página do exercício anterior, use document.getElementsByTagName("li") para selecionar todos os itens da lista. Compare o resultado no console com o do exercício 6.

  4. O Poder do querySelector: Crie uma página com um div que tenha a classe .caixa e dentro dele um parágrafo <p> com o id="texto-interno".

    • Use document.querySelector(".caixa") para selecionar a div.

    • Use document.querySelector("#texto-interno") para selecionar o parágrafo.

    • Exiba ambos no console.

  5. Seleção Múltipla com querySelectorAll: Na lista do exercício 6, use document.querySelectorAll(".item-lista") para selecionar todos os itens. Observe que ele retorna um NodeList, que é um pouco diferente e mais fácil de percorrer.

Bloco 3: Manipulando o DOM (Alterando Conteúdo e Estilos) (Exercícios 10-16)

  1. Mudando Texto com textContent: Selecione o <h1> do exercício 5 e, usando JavaScript, altere seu texto para "Página de Exercícios de DOM".

  2. Alterando Estilos com .style: Crie um parágrafo com o id="paragrafo-colorido". Use JavaScript para:

    • Mudar a cor do texto para blue.

    • Aumentar o tamanho da fonte para 22px.

    • Adicionar uma cor de fundo (backgroundColor) de lightgray.

  3. innerHTML vs textContent: Crie uma div vazia. Use JavaScript para adicionar o seguinte conteúdo nela usando innerHTML: <strong>Texto em negrito</strong>. Depois, crie outra div e adicione o mesmo texto, mas usando textContent. Observe a diferença no navegador.

  4. Trabalhando com Classes (classList): Crie um botão e um parágrafo. Defina uma classe CSS chamada .destaque que mude a cor de fundo. Faça com que o botão, ao ser clicado, adicione ou remova (toggle) a classe .destaque do parágrafo.

  5. Lendo Valores de Inputs: Crie um campo de texto (<input type="text" id="campo-nome">) e um botão. Crie uma função que, ao clicar no botão, exiba no console o valor (.value) que foi digitado no campo de texto.

  6. Criando e Adicionando Elementos: Crie um botão "Adicionar Imagem". Quando o botão for clicado, crie um novo elemento <img> via document.createElement("img"), defina seu atributo src para uma URL de imagem qualquer e adicione-o ao final do <body> da página usando document.body.appendChild().

  7. Removendo Elementos: Crie uma lista com 5 itens. Adicione um botão que, ao ser clicado, remove (.remove()) o último item da lista.

Bloco 4: Navegando pela Árvore DOM (Exercícios 17-20)

  1. Acessando o Pai (parentNode): Crie uma div com um parágrafo dentro. Selecione o parágrafo e, a partir dele, acesse e adicione uma borda vermelha ao div pai usando .parentNode.style.border.

  2. Acessando os Filhos (children): Crie uma div com três parágrafos dentro. Selecione a div e use a propriedade .children para acessar o segundo parágrafo e mudar seu texto.

  3. Navegando entre Irmãos: Crie três botões, um ao lado do outro. Selecione o segundo botão. Use previousElementSibling para mudar o texto do primeiro botão e nextElementSibling para mudar o texto do terceiro.

  4. Diferença entre children e childNodes: Crie uma div e inspecione minhaDiv.childNodes no console. Observe que ele inclui nós de texto (espaços em branco, quebras de linha). Agora, inspecione minhaDiv.children e veja que ele retorna apenas os elementos HTML. Anote a diferença.

Bloco 5: Eventos (Básico e Avançado) (Exercícios 21-27)

  1. Ouvindo Eventos de Teclado: Crie um campo de texto. Use addEventListener para ouvir o evento keydown. Toda vez que uma tecla for pressionada dentro do campo, exiba a propriedade event.key no console.

  2. Impedindo Comportamentos Padrão: Crie um link <a> com href="https://google.com". Adicione um addEventListener de clique que usa event.preventDefault() para impedir que o navegador vá para o Google e, em vez disso, exiba um alerta dizendo "Navegação bloqueada!".

  3. Entendendo o event.target: Crie uma div com 5 botões dentro. Adicione um único addEventListener de clique na div. Dentro da função, use event.target para descobrir exatamente qual dos 5 botões foi clicado e exiba seu texto no console.

  4. Demonstração de Event Bubbling: Crie uma div (pai) com um button (filho) dentro. Adicione um addEventListener de clique em ambos. Cada um deve exibir uma mensagem diferente no console (ex: "Clique no PAI" e "Clique no FILHO"). Clique no botão e observe que as duas mensagens aparecem. Isso é o bubbling em ação.

  5. Parando a Propagação: Modifique o exercício anterior. Use event.stopPropagation() no addEventListener do botão (filho) para impedir que o clique "borbulhe" para o pai. Agora, ao clicar no botão, apenas a mensagem do filho deve aparecer.

  6. Delegação de Eventos (Event Delegation): Crie uma lista <ul> e use um único addEventListener nela. A função deve verificar se o event.target é um <li> e, se for, mudar a cor do texto do item clicado para vermelho. Isso é muito mais eficiente do que adicionar um listener para cada li.

  7. Removendo um Event Listener: Crie um botão que, na primeira vez que for clicado, exiba um alerta "Olá!". Na segunda vez, nada deve acontecer. Dica: você precisará nomear sua função de evento para poder removê-la com removeEventListener após a primeira execução.

Bloco 6: Mini-Projetos de Integração (Exercícios 28-30)

  1. Mini-Projeto: Lista de Tarefas (To-Do List):

    • Crie um campo de texto (<input>) e um botão "Adicionar".

    • Ao clicar no botão, pegue o texto do input, crie um novo item de lista (<li>), e adicione-o a uma <ul> na página.

    • Use a delegação de eventos para que, ao clicar em um <li>, ele seja marcado como concluído (ex: riscando o texto com text-decoration: line-through).

    • (Bônus) Adicione um pequeno botão "X" em cada <li> que, ao ser clicado, remove a tarefa da lista.

  2. Mini-Projeto: Contador Simples:

    • Crie um <h2> que começa com o número 0.

    • Crie dois botões: "+" e "-".

    • Faça o botão "+" incrementar o número no <h2> e o botão "-" decrementá-lo.

  3. Mini-Projeto: Buscando Dados com fetch:

    • Use a API de teste https://jsonplaceholder.typicode.com/users/1.

    • Crie um botão "Buscar Usuário".

    • Ao clicar, use a função fetch() para buscar os dados dessa URL.

    • Quando os dados chegarem (.then()), exiba o nome (name) e o email (email) do usuário em parágrafos na sua página.

Anterior8.10 - Aprofundando nos eventosPróximo9.1 - O que é API?

Atualizado