Criando Captcha com JavaScript

Neste artigo, ensinarei como criar um captcha simples utilizando JavaScript puro e com poucas linhas de código.

Requisitos:

Para criar este captcha, você precisará de:

  • Algumas imagens para usar como captcha;
  • Baixar o arquivo HTML com os campos necessários para procedimento do captcha.

Vamos iniciar!

Podemos começar o nosso captcha criando um arquivo chamado captcha.js

Neste arquivo, iremos criar três variáveis:

  • Uma variável chamada random;
  • Uma variável chamada imgCaptcha;
  • Uma variável chamada imgName.
let random;
let imgCaptcha;
let imgNome;

Agora, iremos criar um objeto chamado testeCaptcha que irá conter:

  • O nome do arquivo de cada imagem utilizada como captcha;
  • Uma string que conterá os números e letras da sua imagem de captcha.
let testeCaptcha = {
    captcha1: "jnjd5",
    captcha2: "9lup6",
    captcha3: "xt17y",
    captcha4: "iu1it",
};

É importante lembrar de salvar as imagens em uma mesma extensão, pois as imagens serão importadas de modo aleatório. Também é importante colocar os nomes em sequência. Por exemplo: captcha1.png, captcha2.png…

Adicionamos um evento click ao botão do nosso HTML. Para isso, utilizaremos o addEventListener e chamaremos a função validaCaptcha() que será criada adiante.

document.getElementById("enviaCaptcha").addEventListener("click", validaCaptcha);

O próximo passo agora é criar uma função. A nossa função se chamará validaCaptcha(). Esta função deverá ter:

  • Uma variável que receberá o valor digitado no input pelo usuário;
  • Uma condicional, que irá testar se: O valor digitado pelo usuário é igual a algum dos valores do objeto testeCaptcha. Se este valor digitado for igual ao valor do atributo gerado de forma aleatória, mostre com um alert: “Captcha Correto”. Senão, chame a função recaptcha(), que será explicada no próximo passo.
function validaCaptcha() {
let inputCaptcha = document.getElementById("inputCaptcha").value;
    // testeCaptcha[imgNome]: conteúdo do captcha1, 2, 3... 
    if (inputCaptcha == testeCaptcha[imgNome]) {
        alert("Captcha Correto!");
    } else {
        recaptcha();
    }
}

Para criar a função recaptcha(), precisaremos que:

  • A variável random receba um Math que gere números aleatórios de acordo com a quantidade de imagens que temos. Por exemplo, se temos 5 imagens, o random deverá gerar números aleatórios de 1 a 5.
  • A variável imgCaptcha receba a imagem que foi gerada.
  • A variável imgName receba a string que você colocou como nome das imagens + a variável random. Por isso, devemos colocar nomes idênticos nas imagens, mudando apenas seu número.
  • Adicionar na variável imgCaptcha.src o caminho da imagem + imgName + sua extensão. Por exemplo: “captcha/”+imgName+”.png”;
function recaptcha() {
    random = Math.floor(Math.random() * 4) + 1;
    imgCaptcha = document.getElementById("imagemCaptcha");
    imgNome = "captcha" + random;
    imgCaptcha.src = "img/" + imgNome + ".png";
}

Agora devemos chamar a nossa função recaptcha():

recaptcha();

Pronto, está criado o nosso verificador de captcha simples! Você pode inserí-lo dentro de uma função anônima que será chamada no momento que a tela for carregada, utilizando o addEventListener(“load”). Veja o código completo abaixo:

window.addEventListener("load", function () {

    let random;
    let imgCaptcha;
    let imgNome;

    let testeCaptcha = {
        captcha1: "jnjd5",
        captcha2: "9lup6",
        captcha3: "xt17y",
        captcha4: "iu1it",
    };

    document.getElementById("enviaCaptcha").addEventListener("click", validaCaptcha);

    function validaCaptcha() {
        let inputCaptcha = document.getElementById("inputCaptcha").value;
        // testeCaptcha[imgNome]: conteúdo do captcha1, 2, 3... 
        if (inputCaptcha == testeCaptcha[imgNome]) {
            alert("Captcha Correto!");
        } else {
            recaptcha();
        }
    }

    function recaptcha() {
        random = Math.floor(Math.random() * 4) + 1;
        imgCaptcha = document.getElementById("imagemCaptcha");
        imgNome = "captcha" + random;
        imgCaptcha.src = "img/" + imgNome + ".png";
    }
    
    recaptcha();
});

Código HTML necessário:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Captcha com JavaScript</title>
</head>
<body>
    <img id="imagemCaptcha">
    <input id="inputCaptcha" type="text">
    <button id="enviaCaptcha">Enviar</button>
    <script src="scripts.js"></script>
</body>
</html>

Imagens disponíveis:

Gostou deste artigo? Comente abaixo!

Exercício Fácil: Soma de itens do vetor

Neste exercício, você terá que somar os valores de um vetor até a metade de seu tamanho e colocar a soma em um índice de um novo vetor.

Faça a soma também dos valores dos itens do vetor após a metade de seu tamanho. Coloque a soma em um índice do novo vetor.

Exemplo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

Neste exemplo, temos um vetor de tamanho 9. Sabemos que a metade de 9 é 4.5, logo, devemos pegar todos os valores contidos em cada elemento que seja menor que a metade do tamanho do vetor. Neste caso, teremos a soma dos valores 10 + 20 + 30 + 40, que resulta em: 100.

O valor obtido, 100, deverá ser inserido na primeira posição de um novo vetor, que deverá ser criado.

let novoVetor = [];

Partindo para a próxima etapa do nosso exercício, devemos realizar a soma dos valores nos elementos restantes. Para isso, você deve realizar a soma dos elementos e inserir o resultado no índice do novo vetor. A soma dos elementos deve ser 50 + 60 + 70 + 80 + 90, que resulta em: 35.

O valor obtido, 350, deverá ser inserido na segunda posição do nosso novo vetor, que foi criado anteriormente.

O seu resultado deverá ser algo parecido como:

novoVetor = [100, 350];

Utilize o console.log() para mostrar o seus resultados.

DICA:

Para chegar no resultado correto, utilize o vetor.length -1 na sua condicional.

Você pode realizar este exercício da maneira que lhe convém, mas aconselhamos a utilizar uma estrutura condicional dentro de seu loop de repetição. Mas nada impede de você utilizar suas próprias maneiras para resolução deste exercício.

Você pode realizar a nossa resolução do exercício abaixo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

let novo = [0, 0];

for (let indice = 0; indice < vetor.length; indice++) {
           
    if (indice < ((vetor.length-1) / 2)){
        novo[0] += vetor[indice];
           
    } else {
        novo[1] += vetor[indice];
    }
            
}
console.log(novo);

Gostou deste exercício? Comente o seu resultado e tire suas dúvidas!

 

Exercício Fácil: Loop em Loop

Exercício 1:

Crie uma função chamada forAninhado() que receberá como parâmetro um vetor. Este vetor deve ter sub-vetores, com valores que variam entre ímpar e par. Com o laço de repetição FOR que irá percorrer este vetor com seus sub-vetores e irá buscar os valores pares. Os valores pares devem ser adicionados em um novo vetor, e você deverá retornar este novo vetor.

Com base neste vetor de exemplo:

let vetor = [[1, 2], [3,4,5,6], [7,8,9,10]]; //Vetor principal

Se colocarmos ele na função:

forAninhado(vetor);

Esperamos o retorno:

[2, 4, 6, 8, 10]; //Novo vetor com os números pares

Lembre-se:

Não use tipos diferentes de vetor, pois não conseguirá dar procedimento no seu exercício.

Com base neste outro vetor de exemplo:

let vetor = [{numero: 2}, [2,8], [1,1,6,2]];

Se colocarmos ele na função:

forAninhado(vetor);

O retorno será:

[2, 8, 6, 2]// O Objeto não será mostrado no vetor.

Também aconselhamos não utilizar somente números ímpares, pois terá em seu retorno algo como:

[]

Exercício 2:

Baseado no código do exercício anterior, some os valores dos sub-vetores e adicione somente os números pares a um novo vetor. Retorne este novo vetor apenas com os números pares.

Com base neste exemplo:

let vetor = [[4,4], [5,2], [7,3]]; //Vetor principal

Se colocarmos ele na função:

forAninhadoPares(vetor);

Esperamos o retorno:

[8, 10]; //Vetor somente com números pares

Faça download dos códigos com as respostas no link abaixo!

[download id=”2836″]

Gostou deste exercício? Comente os seus resultados abaixo!

Exercício fácil: Sequência de Fibonacci

Você conhece a Sequência de Fibonacci?

A Sequência de Fibonacci é uma sucessão de números. Esta sucessão obedece um padrão onde cada elemento subsequente é o resultado da soma dos dois elementos anteriores.

Ela pode ser definida pela seguinte fórmula:

Assim, teremos:

Fibonacci (0) = 0,

Fibonacci (1) = 1,

Fibonacci (2) = Fibonacci (0) + Fibonacci (1) =1,

Fibonacci (3) = Fibonacci (1) + Fibonacci (2) = 2,

Fibonacci (4) = Fibonacci (2) + Fibonacci (3) = 3,

Fibonacci (5) = Fibonacci (3) + Fibonacci (4)= 5,

Fibonacci (5) = Fibonacci (4) + Fibonacci (5) = 8,

E assim, sucessivamente.

Mas onde ela pode ser aplicada?

A Sequência de Fibonacci pode ser aplicada em diversas áreas, como:

  • Análise de mercados financeiros: existem relações entre picos e vales em gráficos de flutuação da bolsa financeira, que tendem a seguir razões numéricas aproximadas com as razões de números da Sequência de Fibonacci.
  • Triângulo de Pascal: os triângulos de Pascal e Pitágoras também se relacionam com a Sequência de Fibonacci.
  • Pintura e Arte: as artes utilizavam-se da Proporção Áurea.
  • Anatomia e Homem Vitruviano: medidas e funcionamento do universo conectadas pela proporção do número de ouro.
  • Entre outras diversas aplicações…

Exercício:

Neste exercício, você deverá reproduzir a Sequência de Fibonacci utilizando um laço de repetição. Utilize o laço For ou o While pra resolver este problema.

function fibonacci(n) {
    if () {
        return;
    }

    for () {
        if () {
            return;
        }
    }
}

Crie um algoritmo que retorne o valor da Sequência de Fibonacci na posição 5, na posição 7 e na posição 13. Você deverá ter um log de saída aproximadamente neste formato:

Gostou deste Exercício? Achou fácil ou difícil? Comente os seus resultados abaixo!

Você pode baixar o código-fonte com o resultado do exercício aqui: [download id=”2730″]