Tag: JavaScript

Publicado em

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!

Publicado em

Recursão e a Pilha (Stack)

Se você não é novato em programação, e até aqueles que já fizeram algumas cadeiras/módulos de programação, provavelmente já ouviu os termos recursão e pilha.

Recursão é um método de programação onde o código executa uma função que chama a si mesma um número X de vezes para resolver um problema que apresenta um padrão repetitivo. Ela tem uma funcionalidade muito similar aos loops, mas sem explicitamente mostrar que está fazendo o mesmo trabalho repetidas vezes.

Quais as vantagens de usar recursão?

Essa é uma duvida bem comum, devo iterar? ou usar a recursão? Nos seguintes casos, seria melhor usar a recursão:

  • Reduzir o código e deixar torna-lo mais simples de ler: Para quem não está acostumado isso parece estranho, mas em grande maioria dos casos é possível escrever a mesma lógica com um número menor de linhas, tornando-o mais fácil de entender e debugar.
  • Quando você está trabalhando com uma linguagem funcional: Linguagens funcionais lidam com recursão muito melhor que imperativas. Já as linguagens imperativas lidam com iteração melhor, então leve isso em consideração quando estiver desenvolvendo seu programa ou script
  • A recursão é melhor na travessia de árvores. Este é um pouco mais avançado. Uma versão extremamente simplificada do que isso significa é a seguinte: Uma árvore é uma coleção de objetos que estão ligados um ao outro (imagine folhas em uma árvore conectada por ramos que por sua vez estão conectados a outros ramos até as raízes). Uma das maneiras mais eficientes de percorrer essas árvores ao procurar por uma folha (ou nó) específica é seguir, de maneira recursiva, uma única ramificação até o final dessa ramificação até encontrar o valor que você está procurando.

Exemplos de Recursão

Digamos que queremos criar algo simples, como uma função que faz que calcula a potencia N de um valor X (exemplo 2^3 = 8, X^N = 8).

let valor = potencia(2, 2);
//Exibe o valor 4
console.log(valor);

valor = potencia (2, 3);
//Exibe o valor 8
console.log(valor);

valor = potencia (2, 4);
//Exibe o valor 16
console.log(valor);

Importante: Este é apenas um exemplo, utilizem o objeto Math do JavaScript para esse tipo de calculo.

Poderíamos faze-lo com o Loop For

function potencia(x, n) {
  let result = 1;

  // Multiplica o resultado X N vezes para obter a resposta
  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

Console.log(potencia(2, 3) ); // 8

Agora utilizando a recursão

function potencia(x, n) {
  if (n == 1) {
    // Quando n finalmente é 1, não executa mais a recursão para finalizar o calculo
    return x;
  } else {
    //obtém a resposta do próximo pedaço do calculo chamando a função novamente
    let recursao = potencia(x, n - 1)

    return x * recursao;
  }
}

console.log(potencia(2, 3) ); // 8

Então, o que está acontecendo exatamente?

No caso da recursão deste algoritmo, quebramos a lógica em pequenos passos que fazem a multiplicação de X pelo resultado anterior até chegar em um ponto onde não é feita mais a chamada recursiva. Quando isso ocorre, as funções começam a ser retornadas e resolvidas.

No caso do exemplo acima, se fizéssemos 2^3, a ultima recursão ser no n==1 que retornaria 2 para a função anterior. Ela multiplicaria 2 * 2, resultando em quatro e retornaria para a primeira chamada que resultaria em 8 e terminaria a função.

A recursão normalmente possui menos linhas de código

A recursão normalmente é menor que a iteração. Abaixo está o mesmo exemplo que fizemos acima, mas usando o mínimo de comandos, retornos e de linhas possíveis.

function pow(x, n) {
  return (n == 1) ? x : (x * pow(x, n - 1));
}

Pilha

Uma pilha é uma região na memória, que opera no modo First-In-Last-Out, exatamente como a pilha que você deve ter estudado em estrutura de dados. Para cada nova ação que precisa ser executada, esta é “empilhada” e terá que ser processada antes da ação anterior voltar a ser trabalhada.

Note que as pilhas não tem tamanho infinito e quando você cria uma função recursiva muito grande ou mau feita, causará o famoso erro que chamamos de stack-overflow

Para ter uma ideia, execute o seguinte código

let i=0;
function estourarPilha() {
    console.log(i++);
    estourarPilha();
}
estourarPilha();

Para cada navegador os valores serão diferentes, mas eventualmente eles irão parar de funcionar pois você conseguiu quebra-los. Mas fique tranquilo, basta reinicia-lo que tudo voltará ao normal.

Conclusão

Esta foi uma introdução bem básica sobre recursão e a pilha no JavaScript, espero que você tenha aprendido com o exemplo e caso tenha alguma duvida ou sugestão por favor deixe seu comentário abaixo.

Publicado em

O que o programador JavaScript deve saber

JavaScript é uma das principais linguagens de programação mais requisitadas no mercado de trabalho atual. No entanto, os empregadores geralmente procuram uma combinação de habilidades. Descubra o que mais você deve adicionar ao seu currículo para conseguir o seu próximo trabalho JavaScript.

A pesquisa vem do CV Compiler, uma empresa que, como o próprio nome sugere, ajuda a criar um currículo convincente para desenvolvedores e outros no setor de software. Para fornecer esta orientação, mantém-se continuamente atualizado com as demandas dos empregadores. Para esta pesquisa dos desenvolvedores de habilidades em JavaScript, a equipe do Compilador de CV precisou de 300 especificações de trabalho para desenvolvedores de JavaScript de AngelList, StackOverflow, LinkedIn e páginas de carreira de empresas de tecnologia em rápido crescimento em todo o mundo. Em seguida, usando sua própria ferramenta de análise de texto, eles identificaram os termos que foram mencionados com mais frequência e criaram este gráfico:

linguagens de programação, metodologias de programação e assim por diante. Na verdade, isso pode não ter sido a primeira coisa que você percebeu – você pode ter sido atingido pelo domínio do React. Mesmo se você permitir que qualquer abertura de trabalho para o React exija JavaScript, a demanda por essa estrutura parece ser esmagadora. Como existem apenas 300 listagens de empregos e o principal concorrente da React, Angular também tem uma alta proporção de menções, algumas aberturas precisam exigir múltiplas estruturas ou uma ou mais alternativas. Mesmo assim, o recorde de 267 da React é excelente, o Angular tem 195 pontos de crédito, enquanto o Vue apenas recebe 44 menções.

Comentando sobre isso no blog Game of Frameworks, Andrew Stetsenko escreve:

“Como você deve ter notado, o Vue.js não era tão alto em nossa classificação de habilidades. Eu acho que pode haver várias razões para isso. Primeiro de tudo, nem toda empresa está pronta para transferir seus projetos para o Vue.js e descartar soluções de front-end mais estáveis ​​e comuns. Em segundo lugar, os empregadores podem querer que os desenvolvedores aprendam o Vue.js enquanto trabalham, por isso eles não mencionam nas especificações iniciais do trabalho.”

Continue lendo “O que o programador JavaScript deve saber”

Publicado em

Como usar o setTimeOut

setTimeout()

Assim como a função setInterval(), o setTimeout() é uma função temporizadora que é utilizada para chamar funções de retorno após um tempo estipulado. A diferença entre essas duas funções temporizadora é que o setTimeout() chama a função apenas uma vez, e o setInterval() chama a função indefinidamente no intervalo de tempo passado, parando somente quando se utiliza a função clearInterval().

Sintaxe:

// sintaxe da função setTimeout, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setTimeout(função, milissegundos, param1, param2, …);
Onde:

função: é a função que será executada no intervalo de tempo predefinido;

milissegundos: é o intervalo de tempo estipulado para a chamada da função;

param1, param2: são os parâmetros utilizados.

HTML no exemplo:

<!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>Exercicio setTimeOut</title>
</head>
<body>
    <section id="textoCompleta">
        <!-- O cabeçalho -->
        <h1>O texto irá preencher-se sozinho!</h1>
        <p id="type"></p>
    </section>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Cria-se uma função, que possui o texto a ser mostrado
(function () {
    const text = "Este texto irá se preencher de forma automática. Estou usando o setTimeOut para definir o tempo em que as palavras serão escritas!"
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

    // Nesta parte, cria-se uma variável contador e uma função
    // que irá definir o intervalo de tempo em que cada letra 
    // será mostrada de forma automática na tela.
    let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            const letra = text.charAt(contador);
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }
    mostrarTexto();
})();

Como funciona o exemplo?

Este exemplo cria uma função que exibe letra após letra do texto inserido, de forma automática, no intervalo de tempo definido. Na função abaixo determinamos qual o texto que será inserido.

const text = "Texto que será exibido na tela!"
    // O texto precisa ser inserido em uma tag html, e essa tag deve possuir um id
    // pois este id será utilizado para identificar em qual parágrafo o texto será inserido
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

Função setTimeout():

A função setTimeout irá definir o tempo em que cada letra do texto irá ser exibida na tela do usuário. Em conjunto a isto, podemos utilizar o método charAt(), que irá retornar os caracteres presentes no texto! O código textArea.textContent += letra irá retornar uma letra por vez, de maneira sequencial, da esquerda para a direita.

let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            // Este código captura os caracteres do texto
            const letra = text.charAt(contador);
            // e os mostram de forma sequencial, da esquerda para a direita
            // tornando possível que o texto apareça de forma sequencial, letra por letra
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Exercício fácil – função setInterval()

Você sabe utilizar o temporizador setInterval?

O setInterval é uma função temporizadora do JavaScript. Ela é utilizada para executar uma função de retorno após um determinado tempo a ser estipulado. É uma função que executará infinitamente na sua página, a menos que você estipule uma função de pausa, chamada clearInterval() ou que você feche a página. É uma função que deve ser utilizada com cuidado pois, se uma pausa não for estipulada, poderá levar a uma sobrecarga de memória e causar travamento e lentidão na sua página web.

Requisitos:

para este exerício, será necessário conhecimento das funções setInterval e clearInterval. Caso você ainda não tenha lido o artigo sobre como utilizar o setInterval e o clearInteval, acesse o link: Como usar o setInterval

Exercício:

Utilizando os seus conhecimentos em JavaScript e temporizadores, crie uma função que utilize o temporizador setInterval() e o clearInterval() para criar um loop que exiba a mensagem “Este é um exemplo de contador, estamos no número:  x“.

Onde:  X é o número atual no contador.

Observação:

Esta mensagem deverá aparecer no console vinte vezes e a cada três segundos, ou seja, o contador também deverá aumentar um número a cada três segundos.

PARTE 1:

Você deverá criar duas variáveis. Crie uma variável para o contador e uma variável para o limite, que servirá para estipular um limite de contagem:

// Crie as variáveis para o contador e limite
// respectivamente. Elas servirão para estipular
// a quantidade de vezes que a mensagem será exibida
let contador;
let limite;

PARTE 2:

Crie uma variável para o temporizador. Esta variável irá receber a função setInterval() e, dentro da função setInterval(), você deverá criar uma condicional que irá estipular quando a função clearInterval() será utilizada.

// Criando uma variável para o temporizador, use a função
// setInterval, para definir o tempo que levará para a 
// mensagem ser exibida.
let timer = setInterval(function(){
    // Dentro da função, estipule um clearInterval
    // que deverá ser executada quando o contador chegar ao limite
    // Para isso, utilize uma estrutura condicional
    if (){
        clearInterval();
    }
})

Resolução:

O seu console.log ficará assim:

Gostou deste exercício? Conseguiu resolvê-lo facilmente? Deixe o seu comentário abaixo!

Publicado em

Como usar o setInterval

setInterval e clearInterval():

O setInterval() é uma função temporizadora. Ela executa uma função de retorno após determinado tempo. A função setInterval() executará infinitamente, até que você execute a função clearInterval().

Se você é iniciante, você pode pular a explicação Como funciona.

Como funciona?

Sendo uma função assíncrona, a instrução a ser executada é lançada no Event Loop. Mas o que é Event Loop? É uma instrução síncrona, ou seja, quando ela estiver executando, a thread ficará bloqueada e, assim que terminar, a próxima instrução é executada. Como o setInterval() executará infinitamente, sabemos que ele adicionará uma instrução ao Event Loop a cada quantia de tempo que for definida.

Definição:

O setInterval() chama uma função em intervalos de tempo definidos. Ele continuará chamando a função até que o clearInterval() seja chamado, ou que a página seja fechada.

Sintaxe:

// sintaxe da função setInterval, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setInterval(function, miliseconds, parameter1, parameter2, …);
Onde:

function: é a função que será executada;

miliseconds: é o intervalo em milisegundos(ms) em que o código será executado. Se o valor especificado for menor que 10, o valor 10 será utilizado.

parameter: parâmetros para passar para a função.

Exemplo:

<!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>setInterval() e clearInterval()</title>
</head>

<body>
    <button id="btn">Clique aqui para iniciar</button>
    <script src="main.js"></script>
</body>

</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;

O clearInterval() limpa o timer configurado pela função setInterval(). Ele desativa a função e não executa a função definida pelo temporizador.

Sintaxe:

// Função clearInterval travará a execução do setInterval
// bloqueando a ação definida pelo temporizador
clearInterval(id_do_setInterval)

Exemplo:

<!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>setInterval() e clearInterval()</title>
</head>
<body>
    <button id="btn">Clique aqui para iniciar</button>
    <button id="btn2">Clique aqui para parar</button>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função que será executada para bloquear
// a ação do temporizador definido no setInterval
function pararFuncao() {
    clearInterval(variavel);
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;
document.getElementById("btn2").onclick = pararFuncao;

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Backdoor descoberto na carteira de criptomoedas Agama

Recentemente a Komodo Plataform descobriu uma backdoor em um de seus aplicativos mais antigos, o Agama. Sabendo que eles tinham pouco tempo para agir, a equipe usou a própria falha de segurança para remover todos as aplicações e valores para um local mais seguro.

Graças a esta tatica, 8 milhoes de Komodo coins e 96 bitcoins (quase 13 milhões de dólares) foram removidas das contas com a vulnerabilidade que poderiam ser hackeadas a qualquer momento.

Sobre a falha

O backdoor foi descoberto pela equipe de auditoria de segurança dos pacotes de repositório JavaScript do NPM. A equipe do NPM disse que identificou uma atualização maliciosa na biblioteca JavaScript electron-native-notify (versão 1.1.6), que continha código projetado para roubar criptomoedas e outras senhas de login específicas para aplicativos de criptomoeda.

Embora inicialmente não fizesse sentido que uma biblioteca com um conjunto de recursos muito limitado contivesse uma funcionalidade tão avançada, depois de investigar o problema, o pessoal do NPM percebeu que estavam lidando com um ataque na cadeia de fornecimento e usando a biblioteca agora como backdoor.

A equipe do npm disse que o código malicioso funcionaria conforme o planejado e coletaria os seeds e senhas do aplicativo de carteira da Agama e faria o upload dos dados para um servidor remoto. Com estes seeds e senhas teriam permitido que um hacker se conectasse às contas de criptomoedas gerenciadas pela carteira Agama e roubasse os fundos dos usuários.

Ações tomadas

Continue lendo “Backdoor descoberto na carteira de criptomoedas Agama”

Publicado em

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
            }
        }]
    }
}

 

Publicado em

Novas atualizações Node.js 12

O Node.js recentemente lançou a versão 12 do Node.js, adicionando melhorias através da V8 JavaScript engine, melhora no desempenho de inicialização, módulos ES6, entre outros.

O projeto Node.js segue uma estratégia LTS (Long Term Support). Os desenvolvedores devem saber que as novas atualizações não estarão prontas em termos LTS até Outubro de 2019. Até lá, os desenvolvedores estão encorajados a reportar questões que eles encontrarem usando o Node.js 12, e essas questões serão resolvidas antes da versão LTS estar completa.

A versão Transport Layer Security (TLS) no Node.js está atualmente na versão TLS 1.3 por padrão, ela inclui numerosas mudanças na criação do protocolo e tornando sua configuração mais direta e segura. Mais além, a TLS 1.3 inclui melhorias no sigilo de encaminhamento e modos de criptografia mais seguros.

O Node.js 12 deixa mais fácil a configuração dos limites do heap, melhorando significativamente o desempenho ao trabalhar com grandes quantias de dados. A atualização para os limites do heap configura o tamanho do heap JavaScript como uma função de memória disponível, em lugar dos padrões V8 para navegadores da web.

Continue lendo “Novas atualizações Node.js 12”