O Índice de Massa Corporal (IMC) é uma medida usada para avaliar se uma pessoa está no peso ideal em relação à sua altura. Ele é amplamente utilizado por profissionais de saúde e pode ser calculado facilmente com uma fórmula simples. Neste post, vamos aprender como calcular IMC em Java Script com base na altura e no peso do usuário.
O que é IMC?
O IMC é uma fórmula que relaciona o peso (em kg) e a altura (em metros) para determinar se uma pessoa está dentro de uma faixa saudável de peso. A fórmula é a seguinte:
IMC = peso / (altura * altura)Dependendo do resultado do IMC, uma pessoa pode ser classificada em várias categorias, como:
- Abaixo do peso: IMC < 18.5
- Peso normal: IMC entre 18.5 e 24.9
- Sobrepeso: IMC entre 25 e 29.9
- Obesidade: IMC ≥ 30
Criando o cálculo do IMC com JavaScript
Vamos criar uma página simples que solicita ao usuário o peso e a altura e, com base nesses dados, calcula e exibe o IMC.
HTML
Primeiro, criamos o layout básico em HTML para capturar a entrada do usuário:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de IMC</title>
</head>
<body>
<h1>Calculadora de IMC</h1>
<form id="imcForm">
<label for="peso">Peso (kg):</label>
<input type="number" id="peso" placeholder="Ex: 70" required><br><br>
<label for="altura">Altura (m):</label>
<input type="number" step="0.01" id="altura" placeholder="Ex: 1.75" required><br><br>
<button type="submit">Calcular IMC</button>
</form>
<p id="resultado"></p>
<script src="script.js"></script>
</body>
</html>JavaScript
Agora, vamos adicionar o código JavaScript que faz o cálculo do IMC e exibe o resultado.
// script.js
// Função para calcular IMC
function calcularIMC(peso, altura) {
return (peso / (altura * altura)).toFixed(2); // Calcula o IMC e limita a 2 casas decimais
}
// Função para classificar o IMC
function classificarIMC(imc) {
if (imc < 18.5) {
return "Abaixo do peso";
} else if (imc >= 18.5 && imc < 24.9) {
return "Peso normal";
} else if (imc >= 25 && imc < 29.9) {
return "Sobrepeso";
} else {
return "Obesidade";
}
}
// Manipulando o formulário
document.getElementById('imcForm').addEventListener('submit', function(event) {
event.preventDefault(); // Impede o envio do formulário
// Pegando os valores de peso e altura
const peso = parseFloat(document.getElementById('peso').value);
const altura = parseFloat(document.getElementById('altura').value);
if (peso && altura) {
const imc = calcularIMC(peso, altura);
const classificacao = classificarIMC(imc);
// Exibindo o resultado
document.getElementById('resultado').innerHTML = `Seu IMC é ${imc} (${classificacao})`;
} else {
// Caso os valores sejam inválidos
document.getElementById('resultado').innerHTML = "Por favor, insira valores válidos.";
}
});Explicação do código
- HTML: Criamos um formulário simples com campos para o usuário inserir o peso e a altura. Há também um botão que dispara o cálculo do IMC.
- JavaScript:
- Função
calcularIMC: Essa função recebe o peso e a altura e calcula o IMC utilizando a fórmula mencionada. O resultado é arredondado para duas casas decimais comtoFixed(2). - Função
classificarIMC: Com base no valor do IMC, essa função classifica o resultado em uma das categorias (Abaixo do peso, Peso normal, Sobrepeso ou Obesidade). - Manipulação de formulário: Usamos o
addEventListenerpara capturar o evento de submissão do formulário e calcular o IMC sem recarregar a página. O resultado é exibido no parágrafo com o IDresultado.
- Função
Exemplo de funcionamento
Quando o usuário insere seu peso e altura e clica no botão Calcular IMC, o resultado será exibido assim:
Seu IMC é 22.86 (Peso normal)Se os valores inseridos forem inválidos ou estiverem em branco, uma mensagem de erro será exibida.
Com este simples exemplo, você pode calcular o IMC de uma pessoa usando JavaScript.
Esse tipo de funcionalidade é muito útil em aplicativos de saúde e fitness ou até mesmo em sites que fornecem ferramentas de cálculo interativas. Aproveite para personalizar o código e adicionar mais funcionalidades, como a validação de dados mais rigorosa ou a estilização do formulário!
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre como calcular IMC em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários