{"id":826,"date":"2024-03-06T11:54:03","date_gmt":"2024-03-06T14:54:03","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=826"},"modified":"2026-08-06T12:59:12","modified_gmt":"2026-08-06T15:59:12","slug":"funcoes-intrinsecas-javascript-isnan-math-random-math-round-e-math-sqrt","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=826","title":{"rendered":"Como Calcular Metros Quadrados em JavaScript | Projeto Pr\u00e1tico para Iniciantes"},"content":{"rendered":"\n

\ud83d\udcc5 Atualizado em 06\/08\/2026<\/strong><\/p>\n\n\n\n

Calcular metros quadrados \u00e9 uma das primeiras atividades que muitos estudantes encontram quando come\u00e7am a aprender l\u00f3gica de programa\u00e7\u00e3o. Em vez de resolver apenas uma conta matem\u00e1tica, podemos transformar esse problema em um projeto completo utilizando HTML, CSS e JavaScript<\/strong>.<\/p>\n\n\n\n

Neste artigo voc\u00ea aprender\u00e1 como desenvolver uma Calculadora de Metros Quadrados em JavaScript<\/strong>, criando uma aplica\u00e7\u00e3o capaz de calcular automaticamente a medida de cada lado de um terreno quadrado a partir da \u00e1rea informada pelo usu\u00e1rio.<\/p>\n\n\n\n

Al\u00e9m disso, voc\u00ea conhecer\u00e1 algumas das principais fun\u00e7\u00f5es intr\u00ednsecas do JavaScript utilizadas em projetos reais, como Math.sqrt()<\/strong>, Math.round()<\/strong>, Math.random()<\/strong> e isNaN()<\/strong>.<\/p>\n\n\n\n

\n\n\n\n

Resultado do projeto<\/h1>\n\n\n\n

Ao final desta aula voc\u00ea ter\u00e1 desenvolvido uma aplica\u00e7\u00e3o semelhante a esta:<\/p>\n\n\n\n

    \n
  • Campo para informar a \u00e1rea do terreno;<\/li>\n\n\n\n
  • Bot\u00e3o para calcular automaticamente a medida dos lados;<\/li>\n\n\n\n
  • Gera\u00e7\u00e3o de \u00e1reas aleat\u00f3rias utilizando JavaScript;<\/li>\n\n\n\n
  • Exibi\u00e7\u00e3o da medida exata;<\/li>\n\n\n\n
  • Exibi\u00e7\u00e3o da medida arredondada;<\/li>\n\n\n\n
  • Interface moderna constru\u00edda com HTML e CSS.<\/li>\n<\/ul>\n\n\n\n

    Esse tipo de projeto ajuda a entender como matem\u00e1tica e programa\u00e7\u00e3o trabalham juntas para resolver problemas do dia a dia.<\/p>\n\n\n\n

    \n\n\n\n

    O que voc\u00ea aprender\u00e1<\/h1>\n\n\n\n

    Durante o desenvolvimento do projeto ser\u00e3o abordados diversos conceitos importantes do JavaScript.<\/p>\n\n\n\n

    \u2705 Manipula\u00e7\u00e3o do DOM<\/p>\n\n\n\n

    \u2705 querySelector()<\/p>\n\n\n\n

    \u2705 addEventListener()<\/p>\n\n\n\n

    \u2705 preventDefault()<\/p>\n\n\n\n

    \u2705 Convers\u00e3o de String para Number<\/p>\n\n\n\n

    \u2705 Valida\u00e7\u00e3o de formul\u00e1rios<\/p>\n\n\n\n

    \u2705 isNaN()<\/p>\n\n\n\n

    \u2705 Math.sqrt()<\/p>\n\n\n\n

    \u2705 Math.round()<\/p>\n\n\n\n

    \u2705 Math.random()<\/p>\n\n\n\n

    \u2705 innerText<\/p>\n\n\n\n

    \u2705 Organiza\u00e7\u00e3o de c\u00f3digo JavaScript<\/p>\n\n\n\n

    \n\n\n\n

    Como calcular metros quadrados de um terreno<\/h1>\n\n\n\n

    Imagine um terreno quadrado com \u00e1rea igual a 625 m\u00b2<\/strong>.<\/p>\n\n\n\n

    Sabemos que:<\/p>\n\n\n\n

    \u00c1rea = lado \u00d7 lado<\/code><\/pre>\n\n\n\n
    Para descobrir a medida de cada lado basta calcular a raiz quadrada da \u00e1rea.<\/p>\n\n\n\n
    Lado = \u221a625\n\nLado = 25 metros<\/code><\/pre>\n\n\n\n
    Em JavaScript essa opera\u00e7\u00e3o fica extremamente simples.<\/p>\n\n\n\n
    const lado = Math.sqrt(625);\n\nconsole.log(lado);<\/code><\/pre>\n\n\n\n
    Sa\u00edda:<\/p>\n\n\n\n
    25<\/code><\/pre>\n\n\n\n
    \u00c9 exatamente essa l\u00f3gica que utilizaremos durante todo o projeto.<\/p>\n\n\n\n
    \n\n\n\n
    Utilizando Math.sqrt()<\/h1>\n\n\n\n
    A fun\u00e7\u00e3o Math.sqrt()<\/strong> calcula automaticamente a raiz quadrada de um n\u00famero.<\/p>\n\n\n\n
    Exemplo:<\/p>\n\n\n\n
    const area = 400;\n\nconst lado = Math.sqrt(area);\n\nconsole.log(lado);<\/code><\/pre>\n\n\n\n
    Resultado:<\/p>\n\n\n\n
    20<\/code><\/pre>\n\n\n\n
    Sempre que voc\u00ea precisar descobrir a medida de um lado de um quadrado conhecendo apenas sua \u00e1rea, essa fun\u00e7\u00e3o ser\u00e1 a escolha ideal.<\/p>\n\n\n\n
    \n\n\n\n
    Arredondando valores com Math.round()<\/h1>\n\n\n\n
    Nem sempre a raiz quadrada resulta em um n\u00famero inteiro.<\/p>\n\n\n\n
    Por exemplo:<\/p>\n\n\n\n
    \u00c1rea = 65<\/code><\/pre>\n\n\n\n
    A medida exata ser\u00e1:<\/p>\n\n\n\n
    8.062257...<\/code><\/pre>\n\n\n\n
    Como normalmente desejamos apresentar uma medida mais amig\u00e1vel para o usu\u00e1rio, utilizamos Math.round()<\/strong>.<\/p>\n\n\n\n
    const medidaExata = Math.sqrt(65);\n\nconst medidaArredondada = Math.round(medidaExata);\n\nconsole.log(medidaArredondada);<\/code><\/pre>\n\n\n\n
    Resultado:<\/p>\n\n\n\n
    8<\/code><\/pre>\n\n\n\n
    Durante o projeto exibimos tanto a medida exata quanto a medida arredondada.<\/p>\n\n\n\n
    \n\n\n\n
    Gerando \u00e1reas aleat\u00f3rias com Math.random()<\/h1>\n\n\n\n
    Para facilitar os testes do sistema tamb\u00e9m criamos um bot\u00e3o respons\u00e1vel por gerar automaticamente uma \u00e1rea aleat\u00f3ria.<\/p>\n\n\n\n
    O JavaScript possui uma fun\u00e7\u00e3o pronta para isso.<\/p>\n\n\n\n
    const areaAleatoria = Math.random() * 900 + 100;<\/code><\/pre>\n\n\n\n
    Em seguida utilizamos:<\/p>\n\n\n\n
    Math.round(areaAleatoria);<\/code><\/pre>\n\n\n\n
    Assim conseguimos gerar valores inteiros automaticamente para testar nossa aplica\u00e7\u00e3o sem precisar digitar uma nova \u00e1rea toda vez.<\/p>\n\n\n\n
    \n\n\n\n
    Validando dados com isNaN()<\/h1>\n\n\n\n
    Um dos erros mais comuns de quem est\u00e1 come\u00e7ando \u00e9 tentar realizar opera\u00e7\u00f5es matem\u00e1ticas utilizando texto.<\/p>\n\n\n\n
    Imagine que o usu\u00e1rio digite:<\/p>\n\n\n\n
    abc<\/code><\/pre>\n\n\n\n
    Nesse caso n\u00e3o existe como calcular a raiz quadrada.<\/p>\n\n\n\n
    Para evitar esse problema utilizamos:<\/p>\n\n\n\n
    if (isNaN(area)) {\n\n    console.log(\"Digite apenas n\u00fameros.\");\n\n}<\/code><\/pre>\n\n\n\n
    Dessa forma o sistema valida a entrada antes de realizar qualquer c\u00e1lculo.<\/p>\n\n\n\n
    \n\n\n\n
    Capturando elementos com querySelector()<\/h1>\n\n\n\n
    Todo o projeto utiliza querySelector()<\/strong> para capturar os elementos da p\u00e1gina.<\/p>\n\n\n\n
    Exemplo:<\/p>\n\n\n\n
    const inputArea = document.querySelector(\"#areaTerreno\");<\/code><\/pre>\n\n\n\n
    Depois basta acessar o valor informado.<\/p>\n\n\n\n
    const area = inputArea.value;<\/code><\/pre>\n\n\n\n
    Essa \u00e9 uma das fun\u00e7\u00f5es mais utilizadas em aplica\u00e7\u00f5es JavaScript.<\/p>\n\n\n\n
    \n\n\n\n
    Trabalhando com eventos<\/h1>\n\n\n\n
    Sempre que o usu\u00e1rio clicar no bot\u00e3o Calcular Terreno<\/strong>, um evento ser\u00e1 executado.<\/p>\n\n\n\n
    formTerreno.addEventListener(\"submit\", (evento) => {\n\n    evento.preventDefault();\n\n});<\/code><\/pre>\n\n\n\n
    O m\u00e9todo preventDefault()<\/strong> impede que o formul\u00e1rio recarregue a p\u00e1gina, permitindo que todo o processamento aconte\u00e7a diretamente no navegador.<\/p>\n\n\n\n
    \n\n\n\n
    Atualizando a interface<\/h1>\n\n\n\n
    Depois de realizar os c\u00e1lculos, atualizamos os elementos HTML utilizando innerText<\/strong>.<\/p>\n\n\n\n
    ladoSuperior.innerText = medidaArredondada;\n\nladoLateral.innerText = medidaArredondada;<\/code><\/pre>\n\n\n\n
    Assim o usu\u00e1rio visualiza imediatamente o resultado do c\u00e1lculo.<\/p>\n\n\n\n
    \n\n\n\n
    Organiza\u00e7\u00e3o do projeto<\/h1>\n\n\n\n
    Mesmo sendo um projeto para iniciantes, ele foi organizado em pequenas etapas.<\/p>\n\n\n\n
      \n
    • Captura dos elementos HTML;<\/li>\n\n\n\n
    • Valida\u00e7\u00e3o dos dados;<\/li>\n\n\n\n
    • Convers\u00e3o para n\u00famero;<\/li>\n\n\n\n
    • C\u00e1lculo do terreno;<\/li>\n\n\n\n
    • Atualiza\u00e7\u00e3o da interface;<\/li>\n\n\n\n
    • Gera\u00e7\u00e3o de \u00e1reas aleat\u00f3rias.<\/li>\n<\/ul>\n\n\n\n
      Essa organiza\u00e7\u00e3o torna o c\u00f3digo muito mais f\u00e1cil de entender e manter.<\/p>\n\n\n\n
      \n\n\n\n
      Assista \u00e0 aula completa<\/h1>\n\n\n\n
      Nesta aula voc\u00ea acompanha o desenvolvimento completo do projeto, entendendo cada linha de c\u00f3digo e o motivo da utiliza\u00e7\u00e3o de cada fun\u00e7\u00e3o do JavaScript.<\/p>\n\n\n\n
      \u25b6\ufe0f V\u00eddeo:<\/strong><\/p>\n\n\n\n
      \n