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?”

React avançado — Utilizando “props.children” como função de primeira classe

O coração do React são componentes. Você pode aninhar esses componentes do mesmo modo que você aninha tags HTML, o que torna tudo mais fácil quando escrevemos JSX, afinal, lembra muito o bom e velho HTML.

Quando eu comecei com React, eu pensei “Basta usar props.children e pronto. Eu sei tudo sobre o objeto .children”. Te digo, como eu estava errado! 🙂

Como estamos trabalhando com JavaScript, nós podemos mudar o .children. Nós podemos passar propriedades para ele, decidir se queremos que ele renderize algo ou não, usá-lo do jeito que quisermos. Vamos mergulhar no poder do .children em React!

Abaixo, segue os tópicos que iremos abortar nesse artigo:

Tabela de conteúdo:

  • Elementos filhos
  • Tudo pode ser um elemento filho
  • Função como elemento filho
  • Manipulando .children
  • Usando loops em .children
  • Contando .children
  • Convertendo .children em um array
  • Permitir apenas um elemento filho
  • Editando .children
  • Mudando as propriedades dos elementos filhos
  • Clonando imutavelmente os elementos filhos
  • É isso aí!

Elementos filhos

Vamos dizer que temos um componente , que contém componentes como elementos filhos. Usamos da seguinte maneira:

<Grid>
  <Row />
  <Row />
  <Row />
</Grid>

Demo: http://www.webpackbin.com/Ekg_vyjPz

Esses três componentes Row são passados para o Grid como props.children. Usando um container como expressão (expression container, termo técnico do JSX para os colchetes), componentes pais podem renderizar os elementos filhos:

class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Não importa quantos elementos filhos você passe, ele sempre irá renderizar “Hello world!”, e nada mais.

Nota: O h1 no exemplo acima (assim como todas as tags HTML primitivas), está renderizando seu elemento filho, nesse caso, o nó de texto “Hello world!”

Continue lendo “React avançado — Utilizando “props.children” como função de primeira classe”

Gráficos Pie e Doughnut com Chart.js

Criando gráficos com Chart.js

Os gráficos Donut(Doughnut) e Pizza(Pie) são, provavelmente, os gráficos mais utilizados atualmente. Eles são divididos em segmentos, e cada segmento é proporcional ao valor de cada dado. Esses segmentos são divididos na forma de arcos.

Se você ainda não leu o artigo Iniciando com Chart.js, acesse-o no link: https://www.mundojs.com.br/iniciando-com-chart-js/

Estes dois tipos de gráficos são excelentes para demonstrar as proporções entre os dados inseridos.

O gráfico do tipo Donut e do tipo pizza são do mesmo tipo no Chart.js, com a diferença de um único objeto, denominado cutoutPercentage. Este valor define o tamanho do espaço central vazio do gráfico, e possui como valor padrão 50%.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página:

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir o Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para fazer um gráfico do tipo Donut, você usará o seguinte código:

// Criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let meuDonutChart = new Chart(ctx, {
    type: 'doughnut',
    data: dados,
    options: opcoes
});
Onde:

type: É o tipo de gráfico que será feito.

data: Os dados que serão inseridos no gráfico.

options: Serão as customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘pie’ para o formato PIZZA e ‘doughnut’ para o formato DONUT.

// type: 'doughnut'
// type: 'pie'

DATA:

Para construir o gráfico, é necessário que os datasets contenham um vetor com os valores a serem inseridos. Estes valores serão somados em um total e calculados levando em consideração a proporção relativa de cada dado.

Você poderá inserir uma legenda (label) para cada pedaço do gráfico. Verifique a estrutura no código abaixo:

// Cria-se um objeto chamado dados onde:
let dados = {
    datasets: [{
        // cria-se um vetor data, com os valores a ser dispostos no gráfico
        data: [10, 20, 30],
        // cria-se uma propriedade para adicionar cores aos respectivos valores do vetor data
        backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 199, 132)', 'rgb(55, 99, 132)']
    }],

    // cria-se legendas para os respectivos valores do vetor data
    labels: ['Vermelho', 'Amarelo', 'Azul']
};

OPTIONS:

Este objeto define as opções a ser inseridas no seu gráfico. Confira as diversas opções de customizações para o seu gráfico no link: https://www.chartjs.org/docs/latest/charts/doughnut.html.

O exemplo a seguir utilizará a opção cutoutPercentage, que, juntamente com o atributo “type”, define se o gráfico será do padrão Pizza ou Donut. Se esta opção não estiver definida, trará como valor padrão 50%. Se você utilizar o valor 0, retornará um gráfico sem espaço central. Confira no código abaixo:

// Crie um objeto que defina as opções customizáveis
// do seu gráfico.
let opcoes = {
    cutoutPercentage: 40,
};

Confira o código completo realizando o download: Exemplo Chart.js

Neste artigo, foi realizada a configuração de dois gráfico, Pizza e Donut, utilizando a biblioteca Chart.js. Gostou? Comente ou tire suas dúvidas!

Aprenda JavaScript “hackeando” sites

Uma das melhores maneiras de aprender uma nova linguagem é através da prática. Por isso, neste post eu estarei mostrando algumas formas de utilizar funções básicas do JavaScript e ao mesmo tempo “hackear” a tela de alguns sites para que você possa observar o poder desta linguagem.

Você precisará:

  • De um navegador (Chrome, Firefox, etc..).
  • Acesso ao console do navegador (normalmente a tecla F12 abrirá uma tela que terá a aba console).

Estes trechos de códigos serão simples, e você só precisa copiar e colar em qualquer site de sua escolha para ver o efeito. No entanto eu aconse-lho a alterar e mexer nele para que você realmente entenda o que está acontecendo.

Não se preocupe… Nada do que será mostrado tem efeito permanente na página e você precisa apenas fazer um F5 para limpar suas alterações.

Desmascarando Passwords

let passwords = document.querySelectorAll("input[type=password]");
for(let elem of passwords){elem.type="text";}

Este código pegará todos os inputs do tipo password e os transformará em texto. Com isso você poderá ver o que está sendo digitado nesses campos.

 

Bagunçando a orientação da tela

Array.prototype.slice.call(  
  document.querySelectorAll(
    'div,p,span,img,a,body')).map(function(tag){
    tag.style['transform'] = 'rotate(' + (
    Math.floor(Math.random() * 3) - 1) + 'deg)';
});

Aqui utilizamos diversas funcionalidades do JavaScript como o querySelector, Array Slice e Math para zoar com a orientação dos textos na tela.

 

Alterar todas as imagens da tela

Array.prototype.slice.call(  
  document.querySelectorAll('img')).map(function(tag){
    tag.src = 'http://bit.ly/2okYTfn';
});

Você pode colocar qualquer imagem que quiser, esse link é apenas um exemplo. Com esse script é possível trocar todas as imagens do HTML para o que você desejar.

 

Virando a tela depois de um tempo

setTimeout(function(){  
 document.onmousemove = document.onkeypress = 
 function(){
     document.body.style['transition'] = 'transform 3s';
     document.body.style['transform'] = 'rotate(180deg)';
 }
}, 4000);

Esse é um bom exemplo para dar um susto em alguém. Depois de 4 segundos (o 4000 passado por parametro) a tela gira um pouco, veja se você conegue notar

 

É isso ai pessoal, espero que tenham gostado deste post e que tenham aprendido algo. Deixem qualquer duvida ou sugestão aqui nos comentários. Até mais.

 

Aprendendo ReactJS: Parte 3

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar primeiro o artigo, acesse: Aprendendo ReactJS: Introdução

Para acessar o anterior a este, acesse: Aprendendo ReactJS: Parte 2



Renderização condicional

A exibição de um componente funcional pode ser determinada baseado em suas propriedades. Por exemplo:

function Feature(props) {
    if (props.ativa == true) {
        return <h1>Esta funcionalidade está ativa.</h1>
    }
    else {
        return <h1>Esta funcionalidade está inativa.</h1>
    }
}

A mesma lógica pode ser expressada utilizado um operador ternário.

function Feature(props){
    return <h1>Está funcionalidade está {props.ativa? "ativa" : "inativa"}</h1>
}

Bloqueando a renderização

A exibição de um componente funcional pode ser evitada de renderizar como no exemplo abaixo:

function Feature(props) {
    if (props.ativa!) {
        return null
    }
    else {
        return <h1>{props.mensagem}</h1>
    }
}

Você também pode obter o mesmo resultado utilizando o operado &&:

function Feature(props){
    return (
        props.ativa && <h1>{props.mensagem}</h1>
    )
}

Com o operador && com um booleano e uma expressão, se o booleano for verdadeiro, ele executará a expressão. Caso ele seja falso, o JavaScript computa que falso e uma a expressão resultam sempre em falso e já sai do teste. Por isso ela não será renderizada.

Componentes de Classe

Além de poderem ser escritos como uma função, os componentes React podem também ser escritos usando as classes do ES6. Componentes de classe são diferentes dos components funcionais pois eles permitem ter métodos de ciclo de vida e estado. Eles também vem com duas propriedades instanciadas, this.state e this.props, que representam o estado e propriedades do componente.

Componentes React escritos usando classes ES6:

class BemVindo extends React.Component{
    render(){
        return <h1>Olá MundoJS!</h1>
    }
}

O código acima é o equivalente do seguinte componente funcional:

function BemVindo(){
    return <h1>Olá MundoJS!</h1>
}

Ambos components React podem ser escritos com seus nomes dentro de uma tag HTML:

let elemento = < BemVindo/>

Render()

O método render de um componente é usado para descrever qual tipo de elemento React será reotornado pelo componente de classe. É o equivalente ao valor passado no return do componente funcional. Por exemplo, o componente abaixo renderizará <h1> Olá MundoJS!</h1>:

class BemVindo extends React.Component {
    render() {
        return <h1> Olá MundoJS!</h1>
    }
}

//renderizará <h1> Olá MundoJS!</h1>
ReactDOM.render(
    < BemVindo />,
    document.getElementById("root")
)

Adicionando propriedades aos componentes de classe.

As propriedades de um componente podem ser acessadas através do atributo this.props. Isso difere levemente dos componentes funcionais onde elas precisam ser passadas como uma variável.

class BemVindo extends React.Component{
    render(){
        return <h1>Mensagem: {this.props.mensagem}</h1>
    }
}

Você pode fornecer as propriedades da mesma forma em ambos componentes.

<Welcome message="Olá MundoJS!"/>

Constructor(props)

O método contructor() é chamado antes do componente React ser montado e pode ser usado para configurar o estado inicial do componente. É importante chamar super(props) no começo do construtor pois senão o this.props poderá não funcionar corretamente. O primeiro argumento do construtor representará as propriedades sendo passadas para o componente.

class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Componente</div>
    }
}

Adicionando um estado inicial para os components de classe

O estado inicial dos componentes de classe podem ser declarados dentro do método constructor(). O estado deste componenetes deve ser declarado como um objeto com atributos.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.valores= {
  foo:123,
  bar:456
  }
    }

    render(){
        return <div>foo:{this.valores.foo} bar:{this.valores.bar}</div>
    }
}

Atualizando o estado

O método setState(updater,[callback]) é utilizado para atualizar o estado do componente. Ele recebe um objeto “atualizador” e atualiza o estado do componente através de uma mescla superficial do atributos dos dois objetos de estado (atual e novo). Como este metodo atualiza o estado de forma assinacrona, existe uma opção de chamar uma função de callback uma vez que a atualização terminou. Para poder usar o setState(), ele precisa ser referenciado através da chamada this.setState().

O método setState ativará a fase de atualização no ciclo de vida do componente, causanda a rerenderização a não ser que a função shouldComponentUpdate() retorne falso.

class Msg extends React.Component{
    constructor(props){
        super(props)
        //estado inicial
        this.state = {mensagem:"Mensagem Inicial"}
    }

    // Este método é chamado após todos os element filhos e instancias do components tenham carregado no Native UI.
    componentDidMount(){
        //updating state
        this.setState({mensagem:"Nova Mensagem"})
    }
    
    render(){
        return <div>Mensagem:{this.state.mensagem}</div>
    }
}

Por hoje seria isso. Assim que montar mais uma parte deste tutorial estarei liberando ele aqui no site do MundoJS.

Caso você encontre algum erro, tenha um contribuição ou dica, deixe seu comentário aqui em baixo que irei responder o mais breve possível.

Cursos completos de JavaScript

Seguindo a linha da postagem feita ano passado sobre Cursos completos que você não conhecia, estou postando uma nova lista atualizada para de cursos de empresas menos conhecidas, mas que nem por isso sejam ruins. Já cursei alguns dos listados abaixo e posso dizer que são muito bons.

Para ficar mais fácil de se organizar, os cursos estão agrupados pelas pessoas ou empresas que os criaram.


Alfamidia

Programação JavaScript Completo

Descrição: Um curso do básico ao avançado sobre JavaScript e JQuery. Ele permite que um pessoa que não saiba muito de programação possa aprender a usar o JS e conceitos mais avançados de programação a medida que o aluno avança nas aulas

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 

Desenvolvimento Web e Mobile

Descrição: O curso online de desenvolvimento web e mobile percorre todos os campos da programação (do front-end ao back-end). O intuito é ensinar o estudante a ser um desenvolvedor com capacitação em todas as áreas do desenvolvimento de apps.

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 


A´gora

JavaScript Completo

Descrição: Completo e passo a passo tem por objetivo principal ensinar todos os passos necessários que um iniciante na linguagem javascript precisa para dominar esta linguagem de programação que está crescendo bastante neste últimos tempos. Nela você terá todos os conhecimentos exigidos pelo mercado, do mais elementar ao mais avançados.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$197,00, podendo parcelar em 2x sem juros

 

Formação Jquery Completo

Descrição: Este curso tem por objetivo ensinar do básico ao avançado do Jquery. Então você não tem muito conhecimento ou gostaria de aprimorar o que sabe para o nível profissional, esse é o curso ára você.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$157,00, podendo parcelar em 2x sem juros


Udacity

Fundamentos Web Front-End

Descrição: Curso criado nos Estados Unidos com o foco em ensinar os fundamentos da programação Front-end. Ele lida com diversos detalhes da programação JavaScript não encontramos em qualquer lugar e aponta você para outros cursos gratuitos dentro do site deles.

Nível: Básico

Duração: 2 meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 5 x R$106,00 – Com desconto à vista

 

Web Front-end Avançado

Descrição: Continuação do curso anterior. Aprofunda-se no entendimento do JavaScript de forma a ensinar a diferença entre as novas técnicas e as antigas. Você também descobrirá mais sobre o ganho de performance e aumento de produtividade do ES6.

Nível: Avançado

Duração: 3 meses meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 9 x R$119,00 – Com desconto à vista

 


Danki Code

Curso Webmaster Front-end Completo

Descrição: Um curso de front-end bem completo que tem por objetivo ensinar do zero sobre como lidar com todos aspectos da tela, tanto visuais quanto lógicas. Diferente de um curso de web design que foca mais na questão visual e manipulação de imagens

Nível: Do básico ao avançado

Duração: Você define seu ritmo e com acesso vitalício.

Curso recebe atualizações: Sim

Investimento: 12 x R$19,00 – Com desconto à vista

 

Pacote Fullstack

Descrição: Inclui o curso Webmaster Front-end completo mencionado acima e fornece ainda mais material para ensina-lo sobre o funcionamento do back-end. É bem indicado para aqueles que querem se tornar desenvolvedores responsaveis (ou com o conhecimento) de ambas pontas da criação de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$27,00 – Com desconto à vista

 

Desenvolvimento Web Completo

Descrição: Pronto para além de estudar os conceitos de HTML, CSS e JavaScript, também estudar muito PHP? Se sim, esse curso tavez seja para você. No curso de desenvolvimento Web Completo você estará se tornando um desenvolvedor Full Stacke aprendendo a conectar todas as pontas de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$22,12 – Com desconto à vista


 

Conclusão

Isso ai, espero que algum destes cursos possam ajudar alguém. Caso você tenha uma duvida, pegunta ou sugestão, deixe seu comentário aqui abaixo para que possamos melhorar essa postagem.

Expressões de Função Imediatamente Invocadas – IIFE

Mesmo se você for um programador novo, não irá demorar muito quando você trabalhar com JavaScript antes de se deparar com esse padrão:

(function () {
    // código
})();

Ao primeiro encontro provavelmente parecerá bastante confuso, no entanto, o conceito em si é simples.

O padrão é chamado de expressão de função imediatamente invocada (Inglês: Immediate Invoking Function Expression) ou IIFE (pronunciado “iffy”).

Em JavaScript funções podem ser criadas através de uma declaração de função ou uma expressão de função. Uma declaração de função é a maneira “normal” de criar uma função nomeada.

function myFunction () { 
    /* código */ 
}

Por outro lado, se você está atribuindo uma função a uma variável ou propriedade, você está lidando com uma expressão de função.

var umaFunc= function () { /* código */ };

var objeto = {
    myFunction: function () { /* código */ }
};

Uma função criada no contexto de uma expressão também é uma expressão de função. Por exemplo:

(function () { /* código */ });

A principal coisa sobre expressões JavaScript é que elas retornam valores. Em ambos os casos, acima do valor de retorno da expressão é a função.

Isso significa que, se quisermos invocar a expressão de função imediatamente, precisamos apenas colocar alguns parênteses no final. O que nos traz de volta ao primeiro trecho de código que vimos.

(function () {
    // código
})();

Agora sabemos o que o código está fazendo, mas a pergunta “Por quê?” ainda resta.

A principal razão para usar um IIFE é obter privacidade de dados. Como var variáveis do escopo do JavaScript para sua função de contenção, quaisquer variáveis declaradas no IIFE não podem ser acessadas pelo mundo externo.

(function () {
    var foo = "bar";

    // exibe: "bar"
    console.log(foo);
})();

// Se tentar acessar a variavel, ocorrerá um erro
// ReferenceError: foo is not defined
console.log(foo);

É claro que, você poderia explicitamente nomear e depois invocar uma função para alcançar os mesmos fins.

function myImmediateFunction () {
    var foo = "bar";

    // exibe: "bar"
    console.log(foo);
}

myImmediateFunction();

// Igual ao exemplo anterior, se tentar acessar a variavel, ocorrerá um erro 
// ReferenceError: foo is not defined
console.log(foo);

No entanto, esta abordagem tem algumas desvantagens. Primeiro, ele ocupa desnecessariamente um nome no namespace global, aumentando a possibilidade de colisões de nomes. Em segundo lugar, as intenções deste código não são tão auto-documentadas quanto um IIFE. E terceiro, porque é nomeado e não é auto-documentado, pode acidentalmente ser invocado mais de uma vez.

Vale a pena ressaltar que você também pode facilmente passar argumentos para o IIFE.

var foo = "foo";

(function (innerFoo) {
    // exibe: "foo"
    console.log(innerFoo);
})(foo);

E essa é a história por trás dos IIFEs. Em breve, estaremos desenvolvendo isso analisando o padrão de módulo em JavaScript.

Tradução:

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html

Estimando a velocidade de download com Imagens

Neste post será mostrado uma forma de estimar a velocidade de download utilizando uma imagem e algumas linhas de código JavaScript. A ideia do algoritmo é a de:

  • Fornecer uma imagem de tamanho grande para calcular de forma mais confiável.
  • Iniciar um contador um passo antes de baixar a imagem.
  • Baixar a imagem.
  • Encerrar o contador no momento que a imagem termina.
  • Calcular o resultado em MBps e Mbps.

O Código HTML

Abaixo o segue o código HTML. Como você pode ver, para manter tudo simples, serão utilizadas apenas algumas linhas de código e a exibição de resultados será de apenas um texto com os dados

<!DOCTYPE html>
<html>
<head>
    <title>Teste de Velocidade</title>
    <meta charset="utf-8" />
</head>
<body>
    <!-- O botão que irá iniciar o teste -->
    <button onclick="iniciarTeste()">Iniciar</button>

    <!-- Tag de paragrafo que exibirá os resultados -->
    <p id="progresso"></p>
    
    <script src="main.js"></script>
</body>
</html>

 

O Código JavaScript

A explicação do código JavaScript abaixo está dentro dos comentários de cada trecho.

// Variaveis para controlar o inicio e o fim do download
let inicioDownload;
let fimDownload;

// Variavel que guarda os dados da imagem que serão utilizados
const imagem = {
    // Caminho da imagem. Utilize o caminho da sua imagem
    caminho: "coffe-cup.jpg",

    // O tamanho da imagem em megabytes
    tamanho: 6.877555
};

// Inica o teste de Download
// Se outros recursos estiverem sendo baixados
function iniciarTeste() {
    mostrarMensagem("Efetuando teste de Download...");
    window.setTimeout(medirConexao(), 1);
}


// Função auxiliar que exibe mensagens na tela
function mostrarMensagem(messagem) {
    // Se a variavel mensagem for uma string, exibirá ela como veio,
    // Se a variavel for um vetor, exibirá cada linha quebrado por <br/>
    let mensagemHTML = (typeof messagem == "string") ? messagem : messagem.join("<br />");
    document.getElementById("progresso").innerHTML = mensagemHTML;
}

// Função que efetivamente mede a conexao de velocidade
function medirConexao() {
    // Cria o objeto de imagem que iremos calcular o tempo de download
    let imagemTeste = new Image();

    // No envento de carregamento da emnsagem,
    // para o contador e exibe o os resultados
    imagemTeste.onload = function () {
        endTime = new Date().getTime();
        exibirResultados();
    }

    // Inicia o contador 
    startTime = new Date().getTime();
    // cria uma controlador apra evitar carregar um caminho de imagem que ja está em cache
    let cacheBuster = "?nnn=" + startTime;
    // inicia a imagem
    imagemTeste.src = imagem.caminho + cacheBuster;
}

// Exibe os resultados caculados em Megabytes por segundo
// e em Megabits por segundo
function exibirResultados() {
    // converte o tempo de milisegundos para segundis
    let duracao = (endTime - startTime) / 1000;
    // calcula o tempo que levou para baixar a imagem,
    // arredondando para duas casas decimais
    let velocidadeMbps = (imagem.tamanho / duracao).toFixed(2);
    
    mostrarMensagem([
        "A Velocidade da conexão é de:",
        velocidadeMbps + " MBps",
        (velocidadeMbps * 8) + " Mbps"
    ]);
}

Conclusão

Após rodar os testes algumas vezes, foi possível observar as seguintes coisas.

  1. O resultado sempre se apresentou abaixo do que seria a capacidade da internet na minha casa.
  2. Caso outras páginas estivessem sendo acessadas, o resultado era muito inferior ao esperado.

Apesar dos itens acima terem sido esperados, foi interessante compara-los com sites que exibem a velocidade da internet para ver o preciso é o teste em relação a eles.

Aprendendo ReactJS: Parte 2

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar o artigo anterior, acesse: Aprendendo ReactJS: Introdução



Utilizando atributos com JSX

É possível fornecer valores de atributos usando strings

let elemento = <button className="btnRemover">Remover</button>

Obs.: devido ao fato que “class” é uma palavra reservado do JavaScript, quando você estiver definindo a propriedade classe de uma tag html, utilize a palavra propriedade JavaScript className.

Você também pode fornecer atributos utilizando expressões JavaScript cercadas por chaves:

let elemento = <img src={produto.urlImagem}/>

 

Obs.: Não coloque a expressão dentro de uma string pois isso fará ela ser tratada como uma string pura.

//Não faça isso.    
let elemento = <img src="{produto.urlImagem}"/>

 

Nota: Atributos JSX tem sua nomenclatura definida pela convenção “camelCase”. Por isso atributos HTML como fontsize se tornam fontSize no JSX.

 

Utilizando um objeto style no JSX

O atributo “style” das tags html podem ser populados com um objeto style no lugar de uma string. Veja o exemplo abaixo:

let styleObject = {

    backgroundColor: 'red',

    color: 'blue',

    fontSize: 25,

    width: 100

}

let elemento = <input style={styleObject} />

 

No exemplo abaixo, usaremos o primeiro grupo de chaves para a expressão JavaScript e o segundo para definir o objeto anônimo que definirá o style.

let element = <input style = {{width:200,height:100}}/>

 

 

Utilizando o JSX com elemento aninhados.

Elemento React podem ser aninhados/agrupados dentro de outros elementos React desde que na raiz do elemento exista uma única tag que contem todos.

// Neste exemplo, possuímos 3 elemento e apenas a div externa está na raiz
let elemento = (

    <div>
        <div>Olá MundoJS</div>
        <div>Olá MundoJS</div>
    </div>

)

// Já neste exemplo temos 2 elementos na raiz do objeto. Isso fará com que o React de erro.
var elemento2 = (

    <div>Olá MundoJS</div> 
    <div>Olá MundoJS</div>
)

 

Utilizando objetos JSX

Objetos criados com JSX podem ser manipulados como objetos JavaScript. Eles podem ser inseridos em vetores, utilizados em condicionais, utilizados em loops, passados como argumentos e retornados por funções.

// Exemplo de um objeto JSX utilizado em um IF

let produto = { nome: "banana", quantidade: 0 }

if (produto.quantidade === 0) {

    let elemento = <h1>O produto {produto.nome} não possuí estoque</h1>

}

else {

    let elemento = <h1>O produto {produto.nome} possuí {produto.quantidade} unidades em estoque</h1>

}

ReactDOM.render(

    elemento,
    document.getElementById("root")

)

Componentes React

Um componente React é um componente independente e reutilizável que exibe Elementos React baseados em suas propriedades e estados. Existem 2 tipos de componentes:

  • Componentes Funcionais
  • Componentes de Classe

Os componentes de classe têm um estado, métodos de ciclo de vida e propriedades. Enquanto componentes funcionais tem apenas propriedades. Primeiro veremos como funcionam os componentes funcionais e mais tarde falaremos de como os componentes de classe.

 

Componentes Funcionais

Este tipo de componente é apenas uma função que retorna elementos React. A convenção padrão do ReactJS pede que ao criar uma função, que o nome dela comece com letra maiúscula. Veja o exemplo abaixo:

function OlaMundoJS() {
    return <h1>Olá MundoJS!</h1>
}

 

Para utilizar o componente React que você criou dentro do JSX, basta criar uma tag HTML com o mesmo nome que o componente React.

let elemento = <OlaMundoJS/>

 

Outro exemplo

ReactDOM.render(

    <OlaMundoJS />,

    document.getElementById("root")
)

Em ambos casos, o elemento React exibido será aquele retornado pelo componente funcional HelloWorld.

 

Adicionando propriedades aos componentes funcionais

O primeiro parâmetro passado para um componente funcional é um objeto que contem as propriedades do componente.

function OlaMundo(props) {

    return <h1>mensagem: {props.mensagem}</h1>

}

 

Você pode dar valores as propriedades da mesma forma que são dados valores a atributos HTML.

ReactDOM.render(

    <HelloWorld message="Olá Mundo!" />,

    document.getElementById("root")

)

 

Propriedades podem ser strings, vetores ou qualquer outro tipo de objeto JavaScript. Você também pode utilizar elementos React como propriedades:

function OlaMundo(props) {
    return <h1>Valor: {props.listanumeros[props.index]} </h1>
}

ReactDOM.render(
    <OlaMundo index="3" listaNumeros={[1, 2, 3, 4, 5]} />,
    document.getElementById("root")
)

Criando Componentes

Componentes funcionais podem incluir outros componentes funcionais na sua exibição. Isto nos permite deixar nossos componentes organizados e fáceis de entender. Por exemplo, veja o exemplo abaixo de uma lista de supermercado.

function TituloCompras(props) {
    return (
        <div>
            <h1>{props.titulo}</h1>
            <h2>Total de Itens: {props.numItens}</h2>
        </div>
    )
}


function ItemLista(props) {
    return <li>{props.item}</li>
}


function ListaCompras(props) {
    return (
        <div>
            <h3>{props.cabecalho}</h3>
            <ol>
                <ItemLista item={props.itens[0]} />
                <ItemLista item={props.itens[1]} />
                <ItemLista item={props.itens[2]} />
            </ol>
        </div>
    )
}


function AppDeCompras(props) {
    return (
        <div>
            <TituloCompras titulo="Minha Lista de Compras" numItens="9" />
            <ListaCompras cabecalho="Comida" itens={["Maça", "Pão", "Banana"]} />
            <ListaCompras cabecalho="Roupa" itens={["Camiseta", "Tenis"]} />
            <ListaCompras cabecalho="Outros" itens={["Papel", "Copos", "Potes"]} />
        </div>
    )
}

ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

 

E compare isso com apenas definir todos os componentes de IU em um único componente funcional.

function AppDeCompras(props) {
    return (
        <div>
            <div>
                <h1>Minha lista de Compras</h1>
                <h2>Total Number of Items: 9</h2>
            </div>
            <div>
                <h3>Comida</h3>
                <ol>
                    <li>Maça</li>
                    <li>Pão</li>
                    <li>Banana</li>
                </ol>
            </div>
            <div>
                <h3>Roupa</h3>
                <ol>
                    <li>Camiseta</li>
                    <li>Tenis</li>
                </ol>
            </div>
            <div>
                <h3>Outros</h3>
                <ol>
                    <li>Papel</li>
                    <li>Copos</li>
                    <li>Potes</li>
                </ol>
            </div>
        </div>
    )
}



ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

É isso ai, esse artigo apresentou diversas coisas que valem serem testadas e praticadas para você se sentir confiante em usar o JSX e criar componentes.

Fique de olho que assim que possível estarei postando a terceira parte.

Você pode fornecer quantas propriedades você quiser. Todas elas serão acessíveis pelo parâmetro “props”.