Página de Exemplos de Aplicação Web

Programa Simples de Cálculo de IMC com HTML e JavaScript

Neste exemplo, o HTML fornecerá a estrutura para os campos de entrada de peso e altura, e um botão para iniciar o cálculo. O JavaScript será responsável por pegar esses valores, calcular o IMC e exibir o resultado na página.

Passo 1: Crie um arquivo HTML (por exemplo, imc.html)

Este arquivo conterá a estrutura da página com os campos de entrada e a área para exibir o resultado.

Conteúdo do arquivo imc.html:

<!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>
   <style> ... </style>
</head>
<body>
   <div class="container">
        <h1>Calculadora de IMC</h1>
        <label>Peso (kg):</label>
        <input type="number" id="peso">
        <label>Altura (m):</label>
        <input type="number" id="altura">
        <button onclick="calcularIMC()">Calcular IMC</button>
        <div id="resultado"></div>
   </div>
   <script> ... </script>
</body>
</html>

Calculadora de IMC Integrada

Digite seu peso e altura nos campos abaixo e clique no botão para calcular seu IMC e ver a classificação:

Explicação do Código

A estrutura básica da página é definida com <!DOCTYPE html>, <html>, <head> e <body>.
Dentro do <head>, definimos o título da página e alguns estilos CSS básicos para melhorar a aparência.
Dentro do <body>, criamos um div com a classe container para agrupar os elementos.
Temos campos de entrada para peso e altura com id específicos.
Um botão com onclick chama a função calcularIMC().
O div com id="resultado" exibe o valor calculado.
A função JavaScript faz a verificação, calcula o IMC e exibe o resultado com classificação.

Como Usar

  1. Salve o código HTML acima em um arquivo chamado imc.html.
  2. Abra este arquivo diretamente no navegador.
  3. Digite seu peso e altura.
  4. Clique em "Calcular IMC".
  5. Veja o resultado e a classificação exibidos na página.

Demonstração da Interação

Este programa demonstra como o HTML cria a interface do usuário e o JavaScript adiciona interatividade e lógica, sem a necessidade de enviar informações para um servidor. Tudo acontece no navegador do usuário (frontend).
A diferença entre as duas aplicações é que o JavaScript não precisa de outro componente para rodar junto ao HTML, tornando a programação mais “fácil” por não exigir ferramentas adicionais.

🔙 Voltar para a primeira página