Calcular Área e Comprimento de Circunferência em JavaScript (Círculo)

Neste tutorial de nossa Apostila de JavaScript, vamos resolver um exercício da seção de Introdução ao JavaScript, onde vamos comentar e explicar bem direitinho como calcular a área de um círculo e o comprimento da circunferência.

Tutorial anterior: Exercícios Básicos de JavaScript

Estude offline: Apostila JavaScript Progressivo

Área da Circunferência e Comprimento de Círculo

O enunciado da questão que vamos resolver é:

Faça um site HTML com código JS, que pede o raio de um círculo para o internauta.
Em seguida exiba a área do círculo e o comprimento da circunferência com aquele raio.

Para saber o valor da constante pi em JavaScript, use:
Math.pi

Essa constante é um float com o valor do pi.

Exercício resolvido com Código Comentado

Para resolver esse exercício, vamos precisar de duas fórmulas bem conhecidas da Matemática:

Área do círculo: pi * raio²

Comprimento da circunferência: 2 * pi * raio

Comprimento de um círculo em JavaScript - Apostila

Vamos lá.

Primeira parte de nosso código JS é pedir o raio ao internauta, usando o comando prompt() que já ensinamos, e armazenamos o que ele digitar na variável raio.

Lembrando que quando fazemos isso, armazenamos o que o usuário escreve na forma de string. Por isso, precisamos fazer uma conversão de string para float.

Fazemos isso com parseFloat() (relembre: Converter String para Float)

Em seguida, vamos declarar e inicializar duas variáveis:

comprimento, que vai receber o valor do comprimento, pela fórmula: 2 * Math.PI * raio

area, vai receber o valor da área, pela fórmula: Math.PI * raio * raio

Em seguida, apenas exibimos essas informações no documento, com a document.write() .

Veja como ficou nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var raio = prompt("Raio do circulo: ");
    raio = parseFloat(raio);

    var comprimento = 2 * Math.PI * raio;
    var area = Math.PI * raio * raio;

    document.write("Comprimento da circunferencia        = ", comprimento, "<br>");
    document.write("Area da circunferencia               = ", area);
   </script>

 </head>
</html>

É possível ainda simplificar mais nosso código, reduzir o número de linhas e variáveis declaradas.

Veja se entendeu:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var raio = parseFloat( prompt("Raio do circulo: ") );

    document.write("Comprimento da circunferencia        = ", 2 * Math.PI * raio, "<br>");
    document.write("Area da circunferencia               = ", Math.PI * Math.pow(raio, 2));
   </script>

 </head>
</html>