Estrutura de Dados com JavaScript: Fila

Filas são coletâneas de dados que mantém os objetos em uma ordem determinada ao aplicar o algoritmo FIFO (First In First Out), ou seja, o primeiro a entrar é o primeiro a sair.

function Fila(){
    let contador = 0;

    // Ambos início e final da fila estão nulos (não possuem nenhum dado)
    let inicio = null;
    let final = null;

    // Retorna a quantidade de itens na fila.
    this.GetContador = function(){
        return contador;
    }
}

A nossa fila terá quatro métodos adicionais: enqueue(dado), dequeue(), peekAt() e displayAll().

Enqueue():

Descrição:

Adiciona um item no início da fila. O processo é o mesmo do método push() utilizado na pilha, mas foi alterado por causa do exercício.

this.Enqueue = function (dado){
    // Cria um nó com o dado
    let node = {
        dado: dado,
        // Os próximos pontos serão para valorizar de maneira linear
        // Se o início está vazio (null), não será um problema
        proximo: inicio
    };

    // Se é o primeiro item a ser inserido na lista
    // o início será o final
    if (inicio === null){
        tail = node;
    }

    // define o nó como o novo início
    inicio = node;

    //incrementa o contador
    contador++;
}

Dequeue()

Descrição:

Remove e retorna o último item inserido e armazenado que seria aquele no lado oposto da fila.

this.Dequeue = function(){
    // Se a fila está vazia, retorna null
    if (contador === 0){
        return;
    }else{
        let atual = inicio;
        let anterior = null;
    }

    // Enquanto houver um próximo, ele avançará a fila
    // A ideia é ter um atual no final e um anterior
    while (atual.proximo){
        anterior = atual;
        atual = atual.proximo;
    }

    // se há mais que 1 item, 
    // remove o final e decrementa o contador em 1
    if (contador > 1){
        // remove a referência ao último nó.
        anterior.proximo = null;

        // torna o nó anterior como final da lista
        final = anterior;
    }

    // Reseta a fila
    else{
        inicio = null;
        final = null;
    }

}

DisplayAll()

Descrição:

O nome já diz tudo. Ele funciona da mesma maneira que o método da pilha().

this.DisplayAll =  function(){
    // Se não há nada no início, nada será retornado
    if (inicio === null){
        return null;
    }else{
        let arr = new Array();
        let atual = inicio;

        for ( let i = 0; i < contador; i++){
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    }
}

PeekAt()

Descrição:

Segue a mesma ideia do peek(), mas qualquer item da fila pode ser buscado e exibido.

this.PeekAt = function (index){
    // Qualquer coisa menor que 0 e igual ou maior que a contagem não está na fila
    if (index > -1 && index < contador){
        let atual = inicio;

        // Navega pela fila para achar o item
        for (let i = 0; i < index; i++){
            atual = atual.proximo;
        }
        return atual.dado;
    }
    // Um index fora dos limites da fila foi escolhido
    else{
        return null;
    }
}
  • enqueue(dado)
  • dequeue()
  • displayAll()
  • peekAt(index)

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Pilha

Uma pilha é um tipo particular de dado em que as principais operações são a adição de um item (método push()) e remoção (método pop()). A pilha implementa um algoritmo LIFO (Last In First Out), que é uma estrutura onde o último elemento adicionado deve ser o primeiro a ser removido. Inicialmente, ela terá o seguinte código:

 

function pilha(){
    //cria uma variável que servirá 
     //para criação da pilha
    let topo = null; 
    let contador = 0;

    //Retorna o número de itens da fila
    this.GetContador = function(){
        return contador;
    }

    /* Métodos */
}

A nossa pilha terá quatro métodos adicionais: push(), pop(), peek() e displayAll(). Eles serão definidos dentro da função pilha() abaixo de this.GetContador. Vamos começar:

Push():

Descrição:

O método push() adiciona os dados especificados na pilha e o torna o nó do topo. Ele também aumenta a contagem de pilhas em 1.

this.Push = function (dado) {
    // Cria um nó que contém o dado e a referência para o próximo item
    let node = {
        dado: dado, 
        proximo: null
    };

    // Linka o nó atual para o topo da pilha
    // O próximo nó receberá o valor null como referência.
    node.proximo = topo;
        
    // Faz o nó atual ser o topo da pilha
    topo = node;

    // Incrementa o contador
    contador++;
}

Peek()

Descrição:

Exibe o item do topo da pilha. Retorna null se a pilha estiver vazia.

this.Peek = function(){
    // Se a lista estiver vazia, retornará null
    // senão, retornará o dado que estiver no nó topo.
    if (topo === null){
        return null;
    }else{
        return topo.dado;
    }
}

Pop()

Descrição:

Parece muito com o método peek(), com a diferença que o pop() remove o item que está no topo da pilha e diminui o contador em 1.

this.Pop = function(){
    // Se a lista estiver vazia, retornará null
    if(topo === null){
        return null;
    }else{
        // Atribui o topo a uma variável temporária
        let out = topo;

        // Atribui o topo para o próximo elemento da pilha
        topo = topo.proximo;

        // Se existir itens na pilha, decrementa o contador
        if (contador > 0){
            contador--;
        }

        // Retorna o valor que foi removido da pilha
        return out.dado;
    }
}

displayAll()

Descrição:

Exibe todos os dados da pilha como um vetor. Exibi-lo como um vetor foi minha escolha, pois não tinha certeza sobre como iria exibi-lo (por exemplo: console.log; document.write etc.).

this.DisplayAll = function(){
    // Se a lista estiver vazia, retornará null
    if (topo === null){
        return null;
    }else{
        // Instancia um vetor
        let arr = new Array();
        // Cria um nó que irá percorrer a pilha
        let noAtual = topo;

        // Percorre a pilha até alcançar o item mais abaixo
        for (let i = 0; i < contador; i++){
            // Atribui os dados ao vetor
            arr[i] = noAtual.dado;
            // Avança para a próxima posição da pilha
            noAtual = noAtual.proximo;
        }

        // Retorna o vetor
        return arr;
    }
}

Métodos utilizados na estrutura do tipo PILHA:

  • push(dado)
  • peek()
  • pop()
  • displayAll()

Gostou deste artigo? Comente abaixo!

Novidades Angular 8.3

A alguns dias saiu a release 8.3.12 do Angular. Segundo alguns tweets, o time focou em algumas novidades como: um novo comando no CLI, correção de bugs e ajustes no novo render que deve entrar como default na versão 9, o Ivy.

Caso tenha interesse em saber mais sobre esse compilador, eu recomendo a leitura do seguinte artigo: Angular: Conhecendo Ivy.

Bom, mas quais foram os novidades dessa versão?

Novo layout

Caso você já tenha atualizado o seu CLI e criado um novo projeto , deve ter notado o novo layout dessa versão.

Além do novo layout, note que nessa etapa nos temos algumas sugestões de próximos passos.

Deploy

Nessa versão foi adicionado um novo comando no CLI, o ng deploy. Agora com apenas alguns comandos no terminal, e possível publicar o nosso app no Azure, Firebase, Zeit, Netlify, ou GitHub.

Em um próximo artigo eu irei criar um passo a passo de como publicar o nosso utilizando esse novo comando do CLI.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/novidades-angular-8-3

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 8.3: publicando projeto com o Angular CLI em 5 passos

Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos

Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.

Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:

npm install -g @angular/cli

Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.

1- Passo: Criação de um novo projeto

Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:

ng new (nome do seu projeto)

2- Adicionando pacote ghpages

Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:

ng add angular-cli-ghpages

3- Criação de um novo repositório no GitHub

Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:

Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:

Em seguida clique em new repository:

Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:

git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master

4- Alterando a base url do projeto

Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:

<base href="/nome do seu repositório no git/">

5-Deploy do projeto

Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:

ng deploy

Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git

  • username: o seu usuário do GitHub
  • nome do seu repositório

Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/

Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos

Gostou deste artigo? Comente abaixo!

Azure DevOps + Angular + GitHub Pages

Veja nesse artigo como criar uma pipeline no Azure DevOps para publicar o seu projeto Angular no GitHub Pages

Dando continuidade ao meu artigo anterior: Angular 8.3: publicando projeto com o Angular CLI em 5 passos, hoje eu irei demonstrar como criar uma pipeline no Azure DevOps para automatizar o processo de deploy demonstrado no artigo anterior.

Para os próximos passos sera necessário ter uma conta no Azure DevOps Service. Caso você ainda não tenha se cadastrado la, acesse o seguinte link para acessar o portal e criar uma conta: Azure DevOps.

Com o passo da conta OK, vamos a criação de uma nova pipeline. Para isso, siga os passos abaixo:

1- Clique em pipelines:

2 -Em seguida no canto superior direito, clique no botão New pipeline:

3- Selecione o repositório do seu código.

Para esse artigo, eu irei utilizar um repositório do meu GitHub.

4- Selecione a pipeline do Node.js:

Esse passo deve criar uma pipeline básica para projetos Node.js.

Caso seja necessário adicionar um novo step na sua pipeline, você pode utilizar o assistente no canto direito demonstrado na imagem abaixo:

Agora para ajustar pipeline para publicar o nosso projeto, altere o comando npm run build para npm run deploy.

Obs.: Esse comando e com base no meu arquivo package.json, nele eu adicionei o comando ng deploy da nova versão do Angular 8.3

Clique em Save and Run, de um nome para o seu commit e clique em Save and Run novamente.

Assim que o Job finalizar, acesse a sua página no GitHub pages e verifique as alterações que você subiu nessa nova release do seu projeto.

Link do meu projeto publicado em uma pagina do GitHub: Angular 8.3 DevOps.

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy de um projeto angular, utilizando um arquivo .yml no Azure DevOps Service.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/azure-devops-angular-github-pages

Gostou desse artigo? Comente abaixo!

[Dica rápida]TypeScript: map()

Dando continuidade a minha série de artigos sobre TypeScript, hoje eu irei apresentar o map. Caso você tenha interesse em ler os primeiros artigos dessa serie, segue o link de cada um deles abaixo:

Bom, para quem não conhece o Map ele é uma das novidades do ES6, ele nos permite trabalhar com o conceito de coleção com chave e valor. Sua sintaxe é bem simples, basta instanciar ele e utilizar o get e o set para manipular os seus valores. Para ficar mais claro, vamos a alguns exemplos práticos:

Para criar um novo map basta utilizar o operador new:

let exMap = new Map();

E para popular ele nós devemos utilizar o operador set:

exMap.set("casa", 2);

Agora para resgatar um valor, nós podemos utilizar o get:

exMap.get('casa') // 2

Mas como eu passei acima, o map nos permite trabalhar com coleções. Abaixo você tem um trecho de código com um exemplo de um map com uma coleção.

let languages = new Map();
languages.set("C#", 1);
languages.set("JavaScript", 2);
languages.set("PHP", 3);


languages.forEach((value: string, key: number) => {
    console.log(key, value);
});

Resultado do código acima:

Além dos operadores get e set, map tem outros operadores que nos permitem: deletar uma chave, limpar todos os registros de uma coleção e verificar a quantidade de itens inseridos. Abaixo você tem um trecho de código demonstrando cada um deles:

Bem legal né?

Bom, a ideia desse artigo era demonstrar mais uma das funcionalidades do TS que podem nos ajudar no nosso dia dia 😉

Espero que tenham gostado e até um próximo artigo pessoal.

Fonte: https://medium.com/@programadriano/dica-r%C3%A1pida-typescript-conhecendo-o-ts-ignore

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

Já faz um bom tempo que eu estou focando os meus estudos no Angular, tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:

Versão < 6

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno seu terminal. Abaixo você tem uma imagem demonstrando esse passo:

Atualizando o Angular para versão 7

Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new, note que você irá receber uma mensagem perguntando qual e o nome do seu projeto.

Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:

Novo projeto Angular versão 7

Informe o nome do seu projeto, em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.

Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.

Antes de nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.

Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.

Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio desse artigo.

Drag and Drop

Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.

import {DragDropModule} from '@angular/cdk/drag-drop';

Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule, ele nos permite trabalhar com virtual scroll.

Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:

ng g c virtualScroll

Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:

<router-outlet></router-outlet>

E o novo componente no arquivo de rotas: app-routing.module.ts:

{ path: ‘scroll’, component: VirtualScrollComponent }

Agora para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:

virtual-scroll.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

Analisando esse trecho de código nós temos:

  • 1: Estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente
  • 12: estamos criando um array com 100000 itens para passar para nossa view

virtual-scroll.component.hml

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades

 

Criando App em 3 minutos

 

No artigo de hoje, criaremos um APK para android rapidamente utilizando HTML, CSS e JavaScript.

Vamos Começar!

Primeiramente, criaremos um novo projeto em branco. Neste projeto, você deve criar um arquivo HTML. O nosso será index.html e terá esta estrutura:

<!DOCTYPE html>
<html lang="pt-br">
<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>App em 4 Minutos</title>
</head>
<body>
    
</body>
</html>

Podemos inserir um h1:

<h1>Olá Mundo</h1>

E também um botão:

<button>Clique aqui</button>

Após isso, adicionaremos um script JavaScript na página. Esse script adicionará uma função ao ser clicado o button, que irá disparar um alert.

document.querySelector("button").addEventListener("click", () =>{
    alert("Olá MundoJS!!!!!");
})

Na tag head, inserimos um css:

h1{
    font-size: 20px;
}

button{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

Próximo passo:

Acessando o site http://build.phonegap.com, crie o seu login e acesse. Existem duas opções: open-source, onde você pode deixar seu app e códigos abertos para a comunidade, e a opção privada. Você pode utilizar o Pull do seu repositório GitHub e também pode adicionar um arquivo .zip com seus códigos.

Faremos o upload do nosso arquivo .zip. Feito o upload, adicionamos apenas uma descrição simples do aplicativo criado. Com esses poucos passos, criamos um arquivo .apk para android!

Depois disso, é só baixar o seu aplicativo clicando no botão Source! Você também pode acessá-lo diretamente do seu celular, utilizando o mesmo link da URL!

Baixando do celular, será necessário instalar o aplicativo .apk e realizar as permissões necessárias.

Confira as imagens:

E o APP criado:

O Adobe PhoneGap Build é um cloud service para compilar aplicativos PhoneGap. Ele fornece uma maneira dos usuários criarem aplicativos móveis utilizando HTML, CSS e JavaScript. Os aplicativos podem ser distribuídos em várias lojas de aplicativos, como Play Store, Apple iOS App Store, entre outros; E instalados no dispositivo do usuário final como qualquer outro aplicativo nativo. Ele oferece:

  • Compilação e assinatura gerenciadas (sem SDKs);
  • Várias plataformas suportadas;
  • Ciclo de desenvolvimento mais rápido;

Você pode ler toda a documentação do Adobe PhoneGap em: docs.phonegap.com/

Gostou deste Artigo? Deixe seu comentário abaixo!

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!

O que é SPA?

SPA é a sigla para Single Page Application (aplicação de uma página). Este tipo de aplicação tem por característica possuir um carregamento um pouco mais demorado ao ser aberto pois ela irá trazer todos os assets (arquivos, imagens, etc..) para a máquina do usuário, mas após isso, se o sistema foi bem feito a navegação deverá ser muito rápida e fluida.

As SPA se tornaram populares graças as implementações de performance que o V8 engine da Google proporcionou ao JavaScript. Essas melhoras tornaram as páginas mais rápidas permitiram proporcionar uma agilidade antes vista apenas em aplicativos desktops. Uma das aplicações mais famosas que começaram a utilizar este conceito foi o Gmail, o qual era possível navegar entre as opções sem que a página fosse recarregada.

Todos os processos são executados no lado do cliente e a comunicação com o servidor só ocorrerá com chamadas Ajax quando a aplicação precisar enviar ou buscar novos dados. Para este tipo de aplicação não interessa qual a tecnologia, quantas aplicações ou onde o sistema está hospedado, ela precisa apenas saber os endpoints que serão consumidos. Uma desvantagem de tudo ocorrer no front é que algumas regras podem ficar fragmentadas entre o front-end e back-end.

 

Como é de se esperar, em aplicações SPA todo o código fonte fica no browser e para evitar que outros copiem o código, existem ferramentas que ajudam a comprimir e alterar o código de forma que ele seja praticamente impossível de ler.

Normalmente, SPAs possuem um componente chamado Router que gerencia a navegação do usuário mesmo que ele atualize a tela. SPAs trabalham muito com armazenamento local no navegador, de forma que após um refresh seja possível buscar no armazenamento as informações e remontar o estado anterior da tela.

Com o passar do tempo várias técnicas e ferramentas para dar suporte a criação de SPAs foram sendo criadas, algumas com a ideia de ser uma solução completa com tudo que o desenvolvedor precisaria para desenvolver uma aplicação, e outras que procuravam solucionar alguns problemas mais pontualmente.

Continue lendo “O que é SPA?”