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é!