Conheça MelonJS, a biblioteca para criação de jogos JavaScript

Você conhece a biblioteca melonJS para criação de jogos em HTML5 e JavaScript?

Conheça o MelonJS, um mecanismo de desenvolvimento de jogos em HTML5 que capacita desenvolvedores e designers a se concentrarem no conteúdo.

A biblioteca fornece uma coleção de entidades compostas e suporte para ferramentas de terceiros, dando-lhe ima combinação poderosa que pode ser usada por atacado ou fragmentada.

O melonJS possui os seguintes recursos:

  • Um novo e leve mecanismo baseado em sprites 2D;
  • Biblioteca autônoma (não depende de mais nada, exceto de um navegador compatível com HTML5);
  • Compatível com a maioria dos principais navegadores (Chrome, Safari, Firefox, Opera, IE) e dispositivos móveis;
  • Renderização rápida de Canvas e WebGL em computadores e dispositivos móveis;
  • Resolução de alta DPI e dimensionamento automático de tela;
  • Suporte de áudio HTML5 multicanal e Web Audio em dispositivos suportados;
  • Leve implementação físic, garantindo baixos requisitos de cpu;
  • Algoritmo de colisão baseado em polígono (SAT) para detecção e respostas precisas;
  • Detecção rápida de colisão de fase ampla, usando particionamento espacial;
  • Suporte a ferramentas de terceiros para definição de corpo físico (PhysicEditor, Physic Body Editor);
  • API de matemática avançada para vetor e matriz;
  • Efeitos de interpolação;

Continue lendo “Conheça MelonJS, a biblioteca para criação de jogos JavaScript”

Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:
// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Como criar um cartão de crédito com a biblioteca Card

Você já conhece a biblioteca Card criada por Jesse Pollak?

Esta biblioteca auxilia você a criar um cartão de crédito utilizando poucas linhas de código. Com ela, você possui acesso aos mais variados tipos de cartão de crédito, e consegue visualizar em tempo real as informações sendo inseridas no cartão, alterando seus dados conforme você digitar. Tudo nesta biblioteca foi criado com CSS, HTML e JavaScript puro, e não necessita de imagens adicionais.

A biblioteca reconhece diversas formas de cartão de crédito e você não precisa alterar nada (além dos dados a serem inseridos no cartão). Com ela, você terá uma pré-visualização em tempo real do seu cartão.

Usando sem jQuery:

Para utilizar a biblioteca Card, você precisará incluir o arquivo card.js no seu HTML. Não será necessário um link para o CSS, porque o arquivo JavaScript já fará isso por você.

<!-- no final do BODY -->
<!-- CSS está incluso no arquivo JavaScript -->
<script src="/path/to/card.js"></script>

Assim que você incluir este arquivo, poderá inicializar o Card.

let cartao = new Card({
    // seleciona a classe #formCard
    form: '#formCard', 
    // seleciona o container que mostra
    // o cartão na tela
    container: '.card-wrapper',

Instalando a biblioteca Card por bower:

Se você está usando o bower, poderá instalar o card.js com este comando:

bower install card --save

Se você está usando npm, você poderá instalar o card.js assim:

npm install --save card

Criando os campos de preenchimento do cartão:

O cartão renderiza com espaços reservados para cada campo de preenchimento: número do cartão, nome, validade e cvc.

<form id="formCard">
    <div>
        <input type="text" name="number" placeholder="Numero Cartão" />
        <input type="text" name="name" placeholder="Nome" />
    </div>
    <div>
        <input type="text" name="expiry" placeholder="Data" />
        <input type="text" name="cvc" placeholder="CVC" />
    </div>
    <div>
        <input id="bt" type="submit" value="Enviar" />
    </div>
</form>

Criando um cartão:

let cartao = new Card({
    form: '#formCard',
    container: '.card-wrapper',
    // Altera o placeholder
    placeholders: {
        name: 'Seu nome aqui'
    }
});

Para traduzir o cartão para sua língua nativa, você pode alterar adicionando os objetos a seguir:

// Altera o placeholder
placeholders:{
    name: 'Seu nome aqui'
}
messages: {
    validDate: 'Data\nexpiração',
    monthYear: 'mes/ano',
},
O código deverá ficar assim:
<!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>Biblioteca Card</title>
</head>
<body>
    <script src="card-master/dist/card.js"></script>
    <div class='card-wrapper'></div>
    <form id="formCard">
        <div>
            <input type="text" name="number" placeholder="Numero Cartão" />
            <input type="text" name="name" placeholder="Nome" />
        </div>
        <div>
            <input type="text" name="expiry" placeholder="Data" />
            <input type="text" name="cvc" placeholder="CVC" />
        </div>
        <div>
            <input id="btn" type="submit" value="Enviar" />
        </div>
    </form>
    <script>
        let cartao = new Card({
            form: '#formCard',
            container: '.card-wrapper',
            // Altera o placeholder
            placeholders: {
                name: 'Seu nome aqui'
            }
        });
    </script>
</body>
</html>

Para mais informações sobre a biblioteca, acesse o link: https://github.com/jessepollak/card

E aí, gostou do artigo? Deixe seu comentário abaixo!

Gráficos Line e Bar com Chart.js

Criando gráficos com Chart.js

Os gráficos de linhas e barras são gráficos muito utilizados no mundo empresarial. O gráfico de linha é usado para mostrar tendências, comparar conjuntos de dados, mostrar evoluções e diminuições de algum fenômeno. Apresenta a variação de valores dos dados em determinado período.

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

LINHA:

O gráfico de linhas é uma maneira de mostrar os pontos de dados em uma linha. O gráfico em linha permite que um número de propriedades seja especificado para cada um dos conjuntos de dados.

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 a biblioteca 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 criar um gráfico do tipo Linha, 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 ctx = document.getElementById('myChart');

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Onde:

Type:

É o tipo de gráfico que será feito;

Data:

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

Options:

As customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘line’ para o formato LINHA.

// type:'line'

DATA:

Para a construção do gráfico, é necessário que os datasets contenham os valores a ser inseridos no gráfico. Para isto, cria-se um vetor com os valores necessários.

Você também poderá inserir uma legenda (label) para a linha do gráfico.

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Linhas
    labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
    datasets: [{
        // Legenda
        label: 'Meu primeiro gráfico',
        // Define-se a cor da linha.
        borderColor: 'rgb(245,222,179)',
        // Dados a serem inseridos nas barras
        data: [0, 10, 5, 2, 20, 12, 1],
    }]
}

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Confira as diversas customizações disponíveis para o seu tipo de gráfico em: https://www.chartjs.org/docs/latest/charts/line.html.

O exemplo a seguir utilizará a opção tension, que define se as linhas serão retas ou possuirão algum tipo de curvatura.

// Esta opção define se as linhas serão curvadas ou retas,
// use 0 para retas.
options: {
    elements: {
        line: {
            tension: 0
        }
    }
}

BARRAS:

O gráfico de barras mostra os valores dos dados com barras verticais. É muito utilizado para mostrar dados de tendências e comparação de vários conjuntos de dados. Cada barra retangular é correspondente a uma categoria e proporcional ao valor do dado na respectiva categoria.

De maneira semelhante à criação do gráfico em linhas, utilizaremos a mesma estrutura HTML para o gráfico de barras.

Para criar um gráfico do tipo Barra, 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 ctx = document.getElementById('myChart');
let myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘bar’ para o formato BARRA VERTICAL e ‘horizontalBar’ para o formato BARRA HORIZONTAL.

// type: 'bar'
// type: 'horizontalBar'

DATA:

Assim como no gráfico em Linhas, é necessário que os datasets contenham um vetor com os valores a ser inseridos no gráfico. Você deve especificar também as cores de cada retângulo, sendo uma cor para cada valor no vetor. Também pode inserir legendas. Confira mais opções em: https://www.chartjs.org/docs/latest/charts/bar.html

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Barras
    labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    datasets: [{
        // Legenda geral
        label: '$ em Vendas',
        // Dados a serem inseridos nas barras
        data: [10, 9, 12, 19, 21, 7],
        // Define as cores de preenchimento das barras
        // de acordo com sua posição no vetor
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        // Define as cores de preenchimento das bordas das barras
        // de acordo com sua posição no vetor
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         // Define a espessura da borda dos retângulos
         borderWidth: 1
    }]
},

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Você também pode conferir as diversas opções de customização na documentação do Chart.js.

Neste exemplo será utilizada a opção beginAtZero, que tem a função de começar a barra no valor 0 do eixo X.

// Customização que define onde irá começar a ser erguida a barra
// começando pelo ZERO, no eixo X.
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

 

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!

Diferença de var, let e const no JavaScript

Diferenças:

Você sabe qual a diferença entre var, let e const em JavaScript? Sabe como aplicá-las? Descubra tudo no artigo abaixo:

Variável, um breve resumo:

Uma variável referencia um espaço na memória, utilizado para guardar informações. Uma variável é um dos, se não o conceito mais importante em programação, e independe da linguagem de programação utilizada. Na variável, nós armazenamos um valor neste espaço de memória e informamos o seu tipo. Ela se chama variável, pois poderá ser alterada ao longo do tempo, ou seja, o valor é “variável”.

No JavaScript, não precisamos informar o tipo do dado armazenado na memória. Mas existem três tipos de variáveis no JavaScript, elas são:

  • var;

  • let;

  • const;

Agora vamos ver o conceito e aplicação de cada uma delas:

Var:

Em JavaScript, o escopo é dado por funções, e não por blocos. A palavra “var” garante a variável dentro do escopo onde ela foi declarada, ou seja, pode ser acessada de qualquer ponto dentro do código, como no exemplo abaixo:

// var está sendo declarado dentro do escopo da função
function imprimeNome() {
    var nome = "Fulano";
}
imprimeNome();
console.log('Meu nome é: ', nome);

Executando este código, a saída será “Uncaught ReferenceError: nome is not defined”.

Mas por que? Porque a variável nome não possui nenhum valor definido fora do escopo da função, ou seja, a variável nome só existe dentro da função imprimeNome.

Segundo as boas práticas, o var está aos poucos sendo substituído pelo uso do let e const.

Let:

A palavra-chave “let” é usada para declarar as variáveis com escopo de bloco. Ou seja, quando é declarada dentro de qualquer bloco, seja ele uma função, uma condicional ou um loop, ela ficará acessível apenas dentro do bloco do qual foi declarada.

Seu comportamento é igual ao da variável “var” quando ela for declarada fora de função, no escopo global. Observe o exemplo abaixo:

// variável let a declarada no escopo global e
// variável let b declarada no escopo da função
let a = "fulano";
function imprimeNome() {
    let b = "ciclano";
    if (a != b) {
    console.log("Seu nome é ", a, "ou", b, "?");
    }
}
imprimeNome();

Executando o código acima, a saída será: Seu nome é fulano ou ciclano?

Mas por que funcionou? Veja bem, o let possui escopo global e também é acessível dentro da função, portanto, poderá ser acessada e retornar os seus valores.

Const:

A palavra-chave “const” indica uma variável que possui o valor fixo, uma constante. Não significa que é imutável, mas sim, que a constante não poderá ser alterada. A constante pode ser declarada tanto ao escopo global, quando em uma função, funcionando de maneira parecida com o “let”, com a diferença que o “const” terá um valor constante. Veja no exemplo a seguir:

// variável const declarada no escopo global
const valor = 12;
function imprimeValor(){
    for(valor = 12; valor < 15; valor++){
        console.log('Valor: ', valor);
    }
}
imprimeValor();

Executando o código, o retorno será um erro: Uncaught TypeError: Assignment to constant variable. Isso acontece porque o laço for incrementará a constante, alterando o seu valor.

Gostou deste artigo? Deixe sua opinião nos comentários!

Eventos no JavaScript

O que são Eventos?

Eventos são ações que ocorrem no sistema. Envolver eventos na sua página web significa interação, que deixará a sua página mais atrativa e interessante. Podemos utilizar como exemplo, um clique em um botão em uma página web e este clique irá gerar uma ação (um evento).

Cada clique, cada tecla pressionada, um toque em uma tela touchscreen dão vida à sua página, criam interação. Estas interações são conhecidas como eventos.

Os eventos em JavaScript podem ser analisados em camadas. Por exemplo, preencher um formulário e devolver uma mensagem de sucesso ao usuário (alert()):

  • O campo é preenchido;
  • O usuário clica no botão de envio;
  • O botão dispara um evento;
  • O código escuta o evento disparado;
  • A mensagem de sucesso é mostrada ao usuário.

Quando o botão é clicado, o navegador emite a ação, que é conhecida como evento. A aplicação sabe que o botão foi clicado, mas se faz necessário saber o que acontece quando esta ação é realizada, fazendo-se necessário que o código esteja escutando ativamente o evento.

Cada evento disponível possui um manipulador de eventos, que é um bloco de código (uma função JavaScript) que é executado quando a ação foi disparada. Quando o código é rodado em resposta ao evento disparado, estamos registrando um manipulador de eventos. Em alguns casos, os manipuladores de eventos são chamados de escutadores de evento. Os escutadores escutam o evento acionado, e o manipulador de eventos é o código que será acionado em resposta a este acontecimento.

Eventos no JavaScript, como ocorrem?

// Nesta função, um evento será acionado
// quando o usuário pressioná-lo, e irá
// devolver uma mensagem de alerta na tela.
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Exemplo de Eventos</title>
</head>

<body>
    <button>Pressione Aqui</button>
    <script>
        var btn = document.querySelector('button');

        btn.addEventListener('click', mostrarCaixa, false);

        function mostrarCaixa(e) {
            window.alert("Você clicou em mim!");
        }
    </script>
</body>

</html>

Este código gera uma escuta de um evento (clicar no botão) e uma reação a ele (mostrar a caixa de diálogo).

Escutando Eventos (addEventListener()):

Eventos são disparados. A tarefa de escutar o evento certo é tratada pela função addEventListener(). Esta função notifica as outras partes do aplicativo quando o evento é disparado. Ela é usada da seguinte forma:

source.addEventListener(eventName, eventHandler, false);

Onde:

  • source é o nome da função (btn no caso de exemplo acima);
  • eventName é a especificação do evento que será escutado (‘click’ no nosso exemplo);
  • eventHandler é a especificação da função que será chamada quando o evento for disparado ( mostrarCaixa no exemplo acima);
  • O último argumento diz respeito às fases do evento, capturing e bubbling (conceitos que serão vistos adiante).

Manipuladores e Argumentos de Evento:

A função que é chamada quando um evento é disparado é conhecido como Manipulador de Eventos (event handler). Pelo addEventListener, conseguimos perceber que o nosso manipulador de eventos é a função mostrarCaixa.

btn.addEventListener('click', mostrarCaixa, false);

A declaração da função é praticamente a mesma que qualquer outra função declarada, com a exceção de que a função recebe um argumento, conhecido como argumentos de evento (“eventargs”). Estes argumentos de evento fornecem mais detalhes sobre o evento, tornando o manipulador mais inteligente. O manipulador de eventos do exemplo não faz nada com os argumentos do evento, mas serve como base para você criar argumentos ao seu critério.

Os argumentos de evento contém propriedades relevantes ao evento disparado. Por exemplo, uma ação disparada por um click do mouse terá propriedades diferentes em seus argumentos do evento de uma ação disparada por um toque na tela(no caso de telas touchscreen) e de uma tecla clicada.

Borbulhamento e captura de eventos (bubbling e capturing):

Borbulhamento e captura de eventos descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento.

Na fase de captura:
  • O navegador verifica se o ancestral mais externo do elemento (<html>) tem um manipulador de eventos registrado nele e o executa.
  • Ele realiza o mesmo procedimento dentro dos elementos filhos até alcançar o elemento clicado.
Na fase de Borbulhamento:
  • O navegador verifica se o elemento clicado tem um manipulador de elementos registrado e o executa.
  • Em seguida, ele passa para o próximo elemento ancestral imediato e realiza a mesma coisa sucessivamente, até alcançar o elemento (<html>).

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.

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