DOM (Document Object Model) e Arrow Functions: Mini Projeto + Código Fonte!

Entendendo o Document Object Model (DOM) em JavaScript

Quando se trata de desenvolvimento web com JavaScript, entender o Document Object Model (DOM) é essencial. O DOM é uma representação hierárquica dos elementos HTML em uma página web, e permite que os desenvolvedores interajam e manipulem esses elementos dinamicamente usando JavaScript. Neste artigo, vamos explorar o que é o DOM, como ele funciona e como os iniciantes podem começar a utilizá-lo em seus projetos.

O que é o Document Object Model (DOM)?

O DOM é uma interface de programação que representa a estrutura de uma página web como um conjunto de objetos que podem ser manipulados e modificados dinamicamente. Cada elemento HTML na página, como tags <div>, <p>, <h1>, entre outras, é representado por um nó (node) no DOM.

Como o DOM Funciona?

Quando um navegador carrega uma página web, ele cria uma representação em memória da estrutura HTML da página, que é o DOM. Esse modelo é então disponibilizado para manipulação através do JavaScript. Os desenvolvedores podem acessar, modificar, adicionar ou remover elementos do DOM usando métodos e propriedades JavaScript.

Neste tutorial emocionante, exploraremos a magia do Document Object Model (DOM) e a elegância das arrow functions em JavaScript.

E a melhor parte? Disponibilizei o código fonte para vocês conferirem e praticarem por conta própria!

Confira o link abaixo para baixar o código e aprofundar seus conhecimentos.

Vamos juntos transformar a teoria em prática!

CSS

img{ width: 100%; border-radius: 15px;}
body{background-color: rgb(222, 232, 241);}

.oculta{display: none;}

.exibe-linha{ display: block;}

JAVASCRIPT 

const frm = document.querySelector('form');
const convenio = document.querySelector('#pConvenio');

const resp1 = document.querySelector('#outDesconto');
const resp2 = document.querySelector('#outPagar');

frm.addEventListener('submit', (e)=>{

e.preventDefault();

const valor = Number(frm.inValor.value);

let desconto

if(frm.rbSim.checked){

  if(frm.selConvenio.value == 'amigo'){
    desconto = calcularDesconto(valor, 20)
  } else{
    desconto = calcularDesconto(valor, 50)
  }

}else{
    desconto = calcularDesconto(valor, 10)
}

resp1.innerText =  `Desconto R$: ${desconto.toFixed(2)}`
resp2.innerText =  `A Pagar R$: ${(valor - desconto).toFixed(2)}`

})

const calcularDesconto = (valor, taxa) => valor * (taxa/100)

frm.rbSim.addEventListener('change',()=>{
  convenio.className ='exibe-linha'

})

frm.rbNao.addEventListener('change',()=>{
  convenio.className ='oculta'

})

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/estilo.css">  
  <title>Mini Projeto Veterinário</title>
</head>

<body>
 <img src="img/imagem.jpg">
 <h1>Veterinário JS</h1>
 
 <form >
  <p> Valor da Vacina
    <input type="number" id="inValor" required autofocus>
  </p>
  <p>Possui Convênio
    <input type="radio" name="produto" id="rbSim"> Sim
    <input type="radio" name="produto" id="rbNao" checked> Não
  </p>
  <p class="oculta" id="pConvenio"> Convênio:
    <select  id="selConvenio">
      <option value="amigo">Amigo</option>
      <option value="saude">Saúde Animal</option>
    </select> 
  </p>

  <input type="submit" value="Calcular Desconto">
 </form>

 <h3 id="outDesconto"></h3>
 <h3 id="outPagar"></h3>

 <script src="js/script.js"></script>

</body>

</html>