Código JS que usa "id" e "document.getElementById"
CALCULADORA DE RAIZ QUADRADA
Nesta postagem veremos como criar uma calculadora de raiz quadrada utilizando os recursos "id" e "document.getElementById". O exemplo mostra a importância da linguagem Java Script(JS) na produção de aplicativos mobile híbridos, sendo atualmente a linguagem mais utilizada no mundo para este fim. Vale destacar que os diversos FrameWorks utilizados para produção de aplicativos híbridos usam por padrão JS. Bons aplicativos podem ser produzidos quando combinamos HTML, CSS e JS
<!DOCTYPE html>
<html>
<head>
<title>Calculadora de Raiz Quadrada</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function calcularRaizQuadrada() {
// Obtém o valor do input do usuário
var inputNumero = document.getElementById("numero").value;
// Converte o valor para um número
var numero = parseFloat(inputNumero);
// Verifica se o número é válido
if (isNaN(numero)) {
alert("Por favor, insira um número válido!");
return;
}
// Calcula a raiz quadrada
var raizQuadrada = Math.sqrt(numero);
// Exibe o resultado na página
document.getElementById("resultado").innerHTML = "A raiz quadrada de " + numero + " é: " + raizQuadrada.toFixed(2);
}
</script>
</head>
<body bgcolor=silver>
<h1>Calculadora de Raiz Quadrada</h1>
<label for="numero">Digite um número:</label>
<input id=numero style='background:green; color:white;'>
<button onclick="calcularRaizQuadrada()" style='background:magenta; color:yellow'>Calcular</button>
<p id="resultado" style='color:blue;'></p>
</body>
</html>
Neste exemplo, o usuário digitará um número em um campo de texto, em seguida, ao clicar no botão "Calcular", a função calcularRaizQuadrada() será chamada. Essa função obtém o valor do campo de texto, verifica se é um número válido, calcula a raiz quadrada usando Math.sqrt() e exibe o resultado na página.
DICAS ÚTEIS DE PROGRAMAÇÃO
document.getElementById Possibilita que JS utilize elementos HTML identificados com "id". Exemplo: <input id=nome value="digite um nome">. Pode-se manipular "nome" em um programa JS com a sintaxe document.getElementById("resultado");. Uma outra prática comum é fazer referências a campos de um formulário HTML com o comando document.[nome do form].[nome do campo].value;
META TAG VIEWPORT A adição da meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> ajuda a garantir que o conteúdo se ajuste corretamente à largura do dispositivo, proporcionando uma experiência responsiva em diferentes telas.
META TAG CHARSET A tag <meta charset=UTF-8> possíbilita que acentos e carecteres especiais possam ser utilizados em um página html. Mas lembre-se, o editor de texto devera estar configurado para salvar no formato UTF-8.
ATIVIDADES
1) Copie o código de programação, cole em um editor de texto, salve em sua área de trabalho com o nome de "raiz.html" e teste sua execução.
2) Faça alteração no código para que o fundo da página tenha cor amarela.
3) Faça alteração no código para que o programa retorne 4 casas decimais na hora de calcular a raiz quadrada.
4) Faça alteração no código para que o fundo da caixa de texto tenha cor vermelha e fonte amarela.
5) Faça alteração no código para que o fundo do botão tenha cor cinza e fonte preta.
WebMaster: PROFESSOR RONI MARCIO FAIS Formação: Bacharel em Ciência da Computação e Especialista em Administração, Supervisão e Orientação Educacional E-mail: rmfais@yahoo.com.br
