Olá,
vou ensinar uma forma de extrair dados de uma classe em HTML usando JavaScript.
Lembrando que ainda estou estudando e essa é uma maneira que encontrei para fixar meus estudos.
Digamos que você deseja retornar o IMC de um paciente, então você precisará filtrar os dados necessários para o cálculo do IMC (explicarei abaixo)
Primeiro, você deverá, como boas práticas, criar um arquivo separado para o JS. Para isso, você deve utilizar o comando:
<script src = "folder/nameOfArchive.js"></script>
no final de sua classe body.
Após criar o arquivo separado para o JavaScript, vamos buscar os dados que você deseja trabalhar.
Vamos trabalhar só com um paciente, o id dele será #first-patient
no entanto.
Para fazermos a busca do paciente em JavaScript, devemos usar o DOM
Saiba mais em.
A busca ocorre usando o document.querySelector(), é um método que permite que você busque algo específico dentro do documento.
Já sabendo que o id do paciente é #first-patient, faremos a busca usando o #, pois é um Id:
document.querySelector("#first-patient")
Porém só isso não basta. Precisamos armazenar o dado buscado em uma variável, então:
var patient = document.querySelector("#first-patient")
Agora temos todos os dados do paciente armazenados em uma variável.
Porém, nós não queremos todos os dados do paciente, precisamos filtrar apenas os dados para calcular o IMC (peso e altura).
Dentro da variável que acabamos de criar, contém os dados que buscamos.
Para isso, usaremos a função querySelector() novamente:
var tdWeight = patient.querySelector(".info-weight")
Diferentemente da busca pelo paciente, estamos usando uma busca de classes, não de ID, então por isso usamos o "." na frente da classe.
A variável tdWeight armazena toda a informação da classe info-weight, nós não queremos isso. Nós queremos apenas o valor armazenado dentro dessa classe (peso):
var weight = tdWeight.textContent
Aqui nós estamos fazendo uma busca direta na variável tdWeight para retornar apenas o valor, e assim armazenar na variável 'weight'.
Faremos o mesmo com a altura:
var tdHeight= patient.querySelector(".info-height")
var height= tdHeight.textContent
Pronto. Feito isso, temos os dois valores que precisamos para fazer os cálculos de IMC (peso / (altura * altura))
Porém, para armazenar o valor dentro da classe IMC, precisamos fazer a mesma busca que fizemos com as outras classes:
var imc = patient.querySelector(".info-imc")
Aqui nós buscamos a classe info-imc e armazenamos na variável imc.
Precisamos fazer um cálculo para que tenhamos o resultado do IMC, e isso é como tirar doce de criança.
Apenas devemos chamar novamente nossa variável imc e atribuirmos os valores na fórmula citada acima, veja como fica:
imc = weight / (height * height)
Simples, né?
Aqui o nosso retorno, caso weight = 100 e height = 2 seria de:
25.
:D
Top comments (0)