Como gerar números primos em JavaScript
Gerar números primos em JavaScript
Neste tutorial vou mostrar como criar um script relativamente simples em JavaScript que permite aos usuários gerarem uma lista com números primos, iniciando em 2 (que é o primeiro número primo) até um valor informado pelo usuário, que será o limite da lista gerada.
Um número é considerado primo se ele for maior que um e divisível (no caso, divisão inteira) apenas por si próprio e por 1. Por exemplo:
- O número 23 é um número primo, pois ele só é divisível por 23 (ele próprio) e por 1.
- Já o número 24 não é primo, pois além de ser divisível por si mesmo e por 1, ele também é divisível por outros números, como 2, 3, 4 e 6.
O número 1 não é considerado um número primo na matemática.
Script que gera números primos em JavaScript
O nosso script deverá realizar as seguintes tarefas:
- Calcular e mostrar na tela os números primos de 2 até um valor fornecido pelo usuário, usando JavaScript
- O numero fornecido pelo usuário será digitado em uma caixa de texto em uma página HTML
- Os números gerados serão exibidos no corpo do documento, um por linha.
- A geração dos valores se dará após o usuário clicar em um botão btnGeraPrimos.
- O código JavaScript será declarado no cabeçalho da página HTML, para melhor organização do código, e invocado no botão.
- Adicionar validação: se o usuário fornecer um número negativo, avisar que não é possível gerar a sequência de primos.
- Mais validação: se o usuário informar um caractere que não seja um número, será avisado de que não é possível gerar a sequência de primos.
Também iremos estilizar o formulário e a saída gerada usando CSS, em um arquivo separado de folha de estilos, que chamaremos de estilos.css.
Vamos à codificação.
Códigos em HTML, CSS e JavaScript
1. Página HTML com JavaScript: arquivo index.html
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gerador de Números Primos</title> <link rel="stylesheet" href="estilos.css"> <script> // Função para verificar se um número é primo function ePrimo(num) { if (num < 2) return false; for (let i = 2; i <= Math.sqrt(num); i++) { if (num % i === 0) return false; } return true; } // Função para gerar e exibir os números primos function gerarPrimos() { // Limpa as mensagens e a saída anterior document.getElementById('mensagemErro').innerHTML = ''; document.getElementById('saida').innerHTML = ''; // Obter o valor inserido pelo usuário let valor = document.getElementById('inputNumero').value; // Verificar se o valor é um número válido if (isNaN(valor) || valor.trim() === '') { document.getElementById('mensagemErro').innerHTML = 'Por favor, insira um número válido.'; return; } valor = parseInt(valor); // Validação de número negativo if (valor < 2) { document.getElementById('mensagemErro').innerHTML = 'Por favor, insira um número maior que 1 para gerar números primos.'; return; } let primos = []; // Calcular os números primos for (let i = 2; i <= valor; i++) { if (ePrimo(i)) { primos.push(i); } } // Exibir os números primos const saida = document.getElementById('saida'); if (primos.length > 0) { primos.forEach(function(primo) { saida.innerHTML += primo + '<br>'; }); } else { saida.innerHTML = 'Nenhum número primo encontrado.'; } } </script> </head> <body> <div class="container"> <h1>Gerador de Primos</h1> <label for="inputNumero">Digite um número:</label> <input type="text" id="inputNumero" placeholder="Ex: 50"> <div class="error" id="mensagemErro"></div> <button id="btnGeraPrimos" onclick="gerarPrimos()">Gerar Primos</button> <div class="output" id="saida"></div> </div> </body> </html>
2. Folha de estilos externa: arquivo estilos.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
}
label {
font-size: 16px;
margin-bottom: 10px;
display: block;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.error {
color: red;
font-size: 14px;
margin-bottom: 10px;
}
.success {
color: green;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.output {
margin-top: 20px;
background-color: #f9f9f9;
padding: 10px;
border-radius: 5px;
height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
}
Teste da aplicação
Vamos abrir a página e pedir para que sejam gerados os números primos até 33:
Caso o usuário tente gerar a sequência fornecendo um número negativo ou um caractere não-numérico, será exibida a mensagem de erro e a sequência de números primos não será gerada:
Foi fornecido o número -5 (negativo), por isso a mensagem de erro.
Funcionamento do Código
HTML: O formulário possui um campo de entrada (input) no qual o usuário digita um número, e um botão para invocar a função JavaScript que gera os números primos. Há uma área para exibir os erros de validação logo abaixo e uma área de saída para exibir os números primos.
CSS: A página está estilizada para ter uma aparência limpa e amigável, como é sempre recomendável. Centralizamos o formulário na página e os elementos como caixas de texto e botões têm um design agradável, com cor de fundo verde para o botão e texto de mensagem de erro em vermelho – mas você pode alterar isso à vontade, evidentemente.
A saída dos números primos será em uma área de rolagem (output), que facilita a visualização dos números, caso sejam gerados muitos.
JavaScript: O código JavaScript foi inserido no cabeçalho da página, e consiste em duas funções com tarefas específicas:
- ePrimo: Função que verifica se um número é primo. Ela percorre os divisores do número até sua raiz quadrada.
- gerarPrimos: Função principal que é chamada ao clicar no botão. Ela valida a entrada do usuário, calcula os números primos até o valor fornecido, e os exibe no corpo da página.
Também são realizadas validações: Se o valor fornecido não for um número, ou se for um número negativo, uma mensagem de erro é exibida.
Conclusão
Neste post mostrei um script simples para gerar uma listagem de números primos, que você pode – e deve – usar para estudar a linguagem e se aprofundar nas suas técnicas de programação.
Nos próximos artigos veremos scripts para resolver diversos outros problemas, sempre com esse foco: o aprendizado da linguagem JavaScript.
Até!
Escreva um comentário