Tag: JavaScript

Publicado em

JavaScript: O objeto Date

Neste post veremos um resumão do objeto Date do JavaScript e como manipular seus atributos.

A instância do objeto Date representa um único ponto no tempo. Apesar de ter o nome Date (data em inglês), este objeto também lida com o tempo.

Inicializando o objeto Date

Inicializamos um objeto Date usando

let d = new Date();

Isso criará um objeto Date apontando para o o momento atual. Internamente, as datas são expressas em milissegundos desde 1º de janeiro de 1970 (UTC). Se passarmos 0, receberemos um objeto Date que representa a hora em 1º de janeiro de 1970 (UTC):

let d = new Date(0);

Se passarmos uma string ao invés de um número, o objeto Date usará o método de análise para determinar a data que você está passando. Exemplos:

// Caso o apresente apenas o ano, o mês default será janeiro
// Caso não apresente o dia, o default será o primeiro
// Caso não apresente o horário, o default será 00:00:00
// Lembrando que padrões americanos de data funcionam com mês, dia e ano

new Date('2018-07-22') // Formato aaaa-mm-dd
new Date('2018-07') // 1º de Julho 2018 - 00:00:00
new Date('2018') // 1º de Janeiro 2018 - 00:00:00
new Date('07/22/2018') // Formato mm-dd-aaaa
new Date('2018/07/22') // Formato aaaa-mm-dd
new Date('2018/7/22') // Formato aaaa-mm-dd
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') // 1º de Março de 2018 - 00:00:00
new Date('2018 March') // 1º de Março de 2018 - 00:00:00
new Date('2018 MARCH') // 1º de Março de 2018 - 00:00:00
new Date('2018 march') // 1º de Março de 2018 - 00:00:00

O mínimo deve ter 3 parâmetros, mas a maioria dos mecanismos JavaScript também interpreta menos que estes:

new Date(2018, 6) // Dom jul 01 2018 00:00:00 GMT + 0200 (horário de verão da Europa Central)
new Date(2018) // Qui Jan 01 1970 01:00:02 GMT + 0100 (Hora Padrão da Europa Central)

Em qualquer um desses casos, a data resultante é relativa ao fuso horário do seu computador. Isso significa que dois computadores diferentes podem gerar um valor diferente para o mesmo objeto de data. O JavaScript, sem qualquer informação sobre o fuso horário, considerará a data como UTC ou tempo universal coordenado (saiba mais acessando este link) e executará automaticamente uma conversão para o fuso horário atual do computador.

Então, resumindo, você pode criar um novo objeto Date de 4 maneiras:

  • não passando parâmetros, cria um objeto Date que representará a data e hora do momento que o objeto foi criado.
  • passando um número, que representa os milissegundos de 1 de janeiro de 1970 às 00:00 GMT.
  • passando uma string, que representa uma data.
  • passando um conjunto de parâmetros, que representam as diferentes partes de uma data.

 

Fusos horários

Ao inicializar uma data, você pode passar um fuso horário, portanto, a data não é assumida como UTC e depois convertida para o fuso horário local. Você pode especificar um fuso horário adicionando-o no formato +HORAS ou adicionando o nome do fuso horário entre parênteses:

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

ATENÇÂO: Se você especificar um nome de fuso horário errado entre parênteses, o JavaScript será padronizado como UTC sem reclamar. Mas, se você especificar um formato numérico incorreto, o JavaScript se queixará com um erro de “Data Inválida”.

 

Conversões de data e formatação

Dado um objeto Date, existem muitos métodos que gerarão uma string a partir dessa data:

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()	//"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

 

Os métodos getter do objeto Date

Um objeto Date oferece vários métodos para verificar seu valor. Tudo isso depende do fuso horário atual do computador:

const date = new Date('July 22, 2018 07:22:13')

date.getDate () // 22 (os valores do dia iniciam na base 1)
date.getDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getFullYear () // 2018
date.getMonth () // 6 (O valor dos meses inicia no 0)
date.getHours () // 7
date.getMinutes () // 22
date.getSeconds () // 13
date.getMilliseconds () // 0 (não especificado quando criado o objeto)
date.getTime () // 1532236933000
date.getTimezoneOffset () // - 120 (irá variar dependendo de onde você estiver e quando você verificar - este é o CET durante o verão). Retorna a diferença de fuso horário expressa em minutos

Caso você precise, existem versões UTC equivalentes desses métodos, que retornam o valor UTC em vez dos valores adaptados ao seu fuso horário atual:

date.getUTCDate () // 22
date.getUTCDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getUTCFullYear () // 2018
date.getUTCMonth () // 6 (inicia em 0)
date.getUTCHours () // 5 (não 7 como acima)
date.getUTCMinutes () // 22
date.getUTCSeconds () // 13
date.getUTCMilliseconds () // 0 (não especificado)

 

Os métodos setter do objeto Date

Da mesma forma, o JavaScript possue diversos métodos que servem para definir (setar) novos valores no objeto Date.

let d = new Date();

// Os seguintes métodos definem:
setDate(2) // o dia como um número (1-31)
setFullYear(2020) // Define o ano.
setFullYear(2020, 5, 20) // Define o ano, mês e dia.
setHours(22) // Define as horas (0-23)
setMilliseconds(100) // Define os milissegundos (0 a 999)
setMinutes(55) // Define os minutos (0-59)
setMonth(0) // Define o mês (0-11). 0 é Janeiro
setSeconds(1) // Define os segundos (0-59)
setTime(125033) // Define o tempo (milissegundos desde 1º de janeiro de 1970)

 

Comparando duas datas

Você pode calcular a diferença entre duas datas usando Date.getTime():

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')

const diff = date2.getTime () - date1.getTime () // diferença em milissegundos

 

Da mesma forma, você pode verificar se duas datas são iguais:

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 10, 2018 07:22:13')

if (date2.getTime () === date1.getTime ()) {   
    // datas são iguais
}

Lembre-se de que getTime() retorna o número de milissegundos, portanto é necessário levar em conta o tempo na comparação. 10 de julho de 2018 07:22:13 não é igual a novo 10 de julho de 2018 pois, conforme mencionado no começo, se você não declarar o horário, o JavaScript o deixará como 00:00:00

Fonte:

W3Schools – Date get Methods

W3Schools – Date set Methods

Definitive guide to Dates

 

Publicado em

Bibliotecas JavaScript para autenticação de usuários

A autenticação serve para identificar usuários e fornecer diferentes direitos de acesso e conteúdo, dependendo do seu id. Como novos tutoriais aparecem na web e mais pessoas tentam entender a equação de custo-benefício para implementar sua própria solução versus usar uma biblioteca ou serviço, reunimos uma breve revisão do que está por aí. Confira abaixo algumas opções:

1. Passaport
O Passport é um middleware de autenticação compatível com o Express para o Node.js. O objetivo do Passport é autenticar solicitações, o que é feito por meio de um conjunto extensível de plugins conhecidos como estratégias. Ele não monta rotas nem assume qualquer esquema de banco de dados específico, o que maximiza a flexibilidade e permite que decisões do nível do aplicativo sejam tomadas pelo desenvolvedor. A API é simples: você fornece ao Passport uma solicitação para autenticação e o Passport fornece ganchos para controlar o que ocorre quando a autenticação é bem-sucedida ou falha.

O Passport não é apenas uma biblioteca user-auth amplamente usada, é provavelmente a maneira mais comum de usar uma biblioteca externa para autenticação do usuário por desenvolvedores JS. Basicamente, esta biblioteca oferece o Node.js middleware relativamente flexível e modular que pode ser integrado em qualquer aplicação web baseada no Express.

2. Permit
Antes da Permit, a única opção real para bibliotecas de autenticação no Node.js era o Passport.js. O Permit facilita a adição de uma camada de autenticação a qualquer API do Node.js. Ele pode ser usado com qualquer uma das estruturas de servidor populares (por exemplo, Express, Koa, Hapi, Fastify) e pode ser usado para qualquer tipo de API (por exemplo, REST, GraphQL, etc.) devido ao seu design simples e não animado.

Também, o Permit permite que você se autentique por meio dos dois esquemas que a maioria das APIs precisa: um único token de portador secreto ou um conjunto de credenciais de nome de usuário e senha. Como a bilbioteca não é fortemente acoplada a um framework ou modelo de dados, ela fornece controle total sobre como você escreve sua lógica de autenticação – exatamente da mesma maneira que você escreveria em qualquer outro manipulador de solicitações.

3. Grant
Uma biblioteca relativamente nova e promissora com mais de 180 fornecedores suportados e um playground ao vivo para Express, Koa e Hapi com o OAuth Middleware. Se você quiser usá-lo com seu provedor OAuth particular, poderá especificar a chave necessária. Embora esta biblioteca já tenha tração (+1 K estrelas), ela tem relativamente poucos recursos, então tente com cuidado.

4. Feathers
Feathers é uma estrutura open source para o NodeJS que permite controlar seus dados por meio de recursos RESTful, soquetes e plug-ins flexíveis em tempo real. O Feathers também oferece módulos de autenticação e gerenciamento de autenticação que permitem adicionar verificação, redefinição de senhas esquecidas e outros recursos para autenticar as penas locais.

A ideia geral é combinar vários métodos de autenticação em uma infraestrutura flexível sob o mesmo teto.

5. Autenticação do Firebase (para pequenos aplicativos)
A autenticação do Firebase é necessária para fornecer aos seus usuários privilégios de leitura/gravação por meio de regras de segurança. Ainda não abordamos as regras de segurança, mas sabemos apenas que as regras de segurança dependem do status de autenticação de um usuário.

O Firebase envia o Google, o Facebook, o Twitter e o GitHub com suas próprias integrações de email/senha auth e OAuth2. Você também pode integrar seus próprios autores a ele para fornecer aos usuários acesso aos dados sem forçá-los a criar uma conta fora dos sistemas existentes.

O Firebase pode não ser a solução de longo prazo para gerenciar a autenticação do usuário em sua plataforma de dimensionamento (ou é?). Mas é uma maneira muito útil de realizar seus aplicativos implantados com o Firebase de maneira rápida e fácil.

Publicado em

Criando a classe pilha com JavaScript

Neste post estarei fazendo uma implementação simples da estrutura de dados conhecida como Pilha utilizando o JavaScript. Apesar da lista JavaScript ser totalmente capaz de simular a pilha, fila, lista, etc… a ideia é focar na teoria e criar do zero uma pilha de nós (nodes) como se a funcionalidade não estivesse disponível.

Como funciona a pilha?

A pilha é um tipo de estrutura de dados que funciona no formato que o último item que foi inserido será o primeiro a ser removido da estrutura (Lifo – Last in, First out). Então quando você adicionar 3 números e quiser remove-los, eles serão removidos na ordem inversa que foram adicionados (terceiro – segundo – primeiro).

Considerações

Algumas considerações na nossa implementação para que não ocorra confusão:

  • A classe do JavaScript ainda não permite declarar propriedades como privadas, por isso usarei _ na frente do nome das propriedades ao qual NÂO deveríamos estar acessando externamente.
  •  Esta é uma implementação para uso acadêmico. Por favor utilize a lista do JavaScript para trabalhar com a pilha em produção (new Array ou []).
  • Alguns trechos de código poderiam ser resumidos em uma única linha, mas foram mantidos quebrados para auxiliar aqueles que estão aprendendo.

Implementação:

Classe e Construtor

Beleza, então vamos começar. A primeira coisa que precisamos é criar a classe e o construtor dela conforme o código abaixo. Para o nome da classe usaremos o termo em português, mas para o resto iremos utilizar os termos em Inglês pois parece ser o padrão mais utilizado por livros e cursos.

class Pilha {
  constructor() {
    this._top = null;
    this._count = 0;
  }

  //Continuação do código

Como você pode ver, teremos apenas duas variáveis de controle, _top que fará referencia para o topo da pilha e _count que controlará quantos itens a pilha possuí.

 

GetCount()

O método GetCount é o mais simples de todos. Ele apenas irá retornar a quantidade de itens na pilha.

GetCount = function () {
  return this._count;
};

 

Peek()

Exibe o item no topo da pilha ou null caso ela esteja vazia.

Peek = function () {
  if (this._top) {
    return this._top.data;
  }
  return null;
};

 

Push(item)

O método Push (empurrar) é a forma como adicionaremos itens a pilha. Pelo fato de ser uma linguagem não tipada, poderemos adicionar qualquer valor a pilha que ela o aceitará.

Push = function (data) {
  let node = {
    data: data,
    next: null
  };
  node.next = this._top;
  this._top = node;
  this._count++;
};

Como você pode ver, o método cria um objeto chamado node (nó) que é um objeto JS e terá 2 propriedades, o data (dados em inglês) para o valor e next (próximo) para referência o item anterior. Após isso definimos este novo valor como sendo o do topo e referenciamos o antigo topo no next.

Isto é feito desta forma pois para a pilha, é importante termos um controle de quem está no topo. Os outros itens serão manipulados apenas quando chegar a vez deles.

 

Pop()

O Método Pop (tirar) funciona da forma oposta ao Push, ele remove o item que está no topo da fila.

Pop = function () {
  if (this._top) {
    let out = this._top;
    this._top = this._top.next;
    if (this._count > 0) {
      this._count--;
    }
    return out.data;
  }
  return null;
};

Como você pode ver o código acima faz o seguinte: Confere se existe algum item no topo da fila para poder remove-lo, transforma o next em topo, reduz a contagem em 1 e retorna o item removido ou null caso esteja vazio.

 

DisplayAll()

Este método exibe todos os itens da pilha, do topo ao fundo, no formato de um vetor JavaScript. Caso a pilha esteja vazia, retorna null

DisplayAll = function () {
  if (this._top) {
    let arr = new Array();
    let current = this._top;
    for (let i = 0; i < this._count; i++) {
      arr[i] = current.data;
      current = current.next;
    }
    return arr;
  }

  return null;
};

Apesar deste código ter um pouco mais de lógica que os métodos anteriores, ele ainda é fácil de entender. Ele testa se o _top não está vazio e se verdadeiro, percorrerá a pilha copiando o valor armazenado dentro de cada nó para dentro do vetor.

Executando o código

Após criar a classe, um teste simples ajudará a verificar que todos os métodos estão fazendo o que deveriam

let pilha = new Pilha();

console.log(`Contagem: ${pilha.GetCount()}`);

pilha.Push(4);
console.log(`Peek: ${pilha.Peek()}`);
console.log(`Contagem: ${pilha.GetCount()}`);

pilha.Push(22);

console.log(`Contagem: ${pilha.GetCount()}`);

console.log(`Pop: ${pilha.Pop()}`);
console.log(`Pop: ${pilha.Pop()}`);
console.log(`Pop: ${pilha.Pop()}`);

console.log(`Contagem: ${pilha.GetCount()}`);

pilha.Push(1);
pilha.Push(-2);
pilha.Push(100);
pilha.Push(350);

console.log(`Todos: ${pilha.DisplayAll()}`);

Publicado em

JQuery está perdendo espaço para o JavaScript puro?

Seguindo diversas ocorrências nos últimos meses, podemos observar que o JavaScript puro tem tomado o espaço em aplicações, bibliotecas e frameworks que antes utilizam o JQuery. Ao final do ano passado, o Github removeu qualquer traço do JQuery do seu front-end enquanto o Bootstrap informou a retirada da biblioteca e colocou um pull request para fazer o mesmo tipo de adaptação.

Agora você pode estar se perguntando, será que o Jquery está chegando ao seu fim?

É claro que não, nem de perto. Sites e sistemas que utilizam extensivamente a biblioteca não vão sair trocando agora algo que está funcionando por outra coisa que também estaria funcionando se não houver nenhum ganho de performance ou produção em cima disso.

Então o que está acontecendo?

A resposta é simples, o JavaScript está evoluindo e funcionalidades que antes eram exclusivas do Jquery, ou ele tornava muito mais fácil através de suas funcionalidades e bibliotecas prontas agora se tonaram redundantes. Itens como:

  • A manipulação de classes pode ser alcaçada através do Element.classList.
  • As animações visuais podem ser criadas com CSS3.
  • Os AddEventListeners estão mais estáveis entre os navegadores
  • Chamadas AJAX ficaram mais simples com o método Fetch.

Caso você tenha interesse em saber mais sobre a possibilidade de remover o JQuery do seu código, talvez seja o momento de fazer uma analise para saber o quanto da biblioteca você usa, ou se você apenas a tem por estar acostumado com alguns métodos. Um site legal para olhar alternativas é o http://youmightnotneedjquery.com/

Por outro lado, lembre-se que diversas implementações novas do Ecmascript 6+ ainda não são 100% implementadas por todos navegadores. Então lembre-se de conferir se você pode usar o método no site https://caniuse.com/ e se você estiver bem no inglês e tem um tempo de sobra, leia esse artigo da Google sobre os workarounds que o JQuery fornece que precisarão ser implementados caso você não o utilize

Publicado em

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.

Publicado em

Prettier 1.15: Formatador de Código Adiciona Suporte Angular e Vue.js

Caso você ainda não conheça o Prettier, acesse o site oficial para mais detalhes. A versão 1.15 do Prettier adiciona suporte ao formatador de código para HTML, Vue.js, Angular e MDX, além de adicionar uma variedade de refinamentos e melhorias de sintaxe.

De forma resumida, o Prettier é um software de código aberto disponível sob a licença MIT. Contribuições e feedback são incentivados através do projeto Prettier GitHub e devem seguir as diretrizes de contribuição do Prettier.

Sua principal função é ser um formatador de código opinativo que tenta reduzir os problemas de formatação do código. Iniciado como um projeto JS, o suporte da Prettier se expandiu para abranger muitas outras linguagens, incluindo TypeScript, Flow, HTML5, CSS, Markdown e YAML, com desenvolvimento em andamento para adicionar suporte a Elm, Java, PHP, Python, Ruby e Swift. O Prettier também suporta vários formatos, incluindo JSX, JSON, Vue.js, Angular, SCSS, Less, componentes estilizados e GraphQL.

O Prettier agora pode ser usado para formatar o conteúdo de remarcação, bem como o conteúdo JSX em um recurso MDX.Caso você não conheça, o MDX é uma extensão do markdown que suporta sintaxe JSX. Outra funcionalidade legal é o suporte a interpolação e atributos para Vue.js e Angular, assim como a sintaxe de modelo inline do Angular.

Entre as diversas novidades, Prettier agora pode formatar arquivos de modelo dessas estruturas que estendem o HTML para o Angular e o Vue.js,. Além de fornecer um mecanismo para adicionar comentários para controlar como a marcação é formatada para impedir que a ferramenta remova ou adicione espaços em branco que possam afetar o estilo e os layouts do conteúdo. Os modos de espaço em branco podem corresponder ao comportamento do CSS ou tratar o espaço em branco como sensível (sensitive) ou insensível (insensitive).

O lançamento do Prettier 1.15 faz muitas melhorias na análise do JavaScript, incluindo o nivelamento do else-branch por ternários aninhados, mantendo inline os decoradores se eles foram escritos em linha, respeitando a ordem dos decoradores e melhorando como os objetos são divididos em linhas separadas. Além disso, dezenas de outras melhorias foram feitas para a API geral da Prettier e a variedade de idiomas suportados pela Prettier.

 

Publicado em

Loop for com espera entre iterações

Recentemente tive uma duvida, como fazer para que um for tivesse esperasse alguns segundos entre cada iteração? Supodo que eu queira exibir um alerta em 10 vezes a de 5 em cindo segundos, como posso fazer com que o JavaScript espere estes 5 segundos?

Existem timers em JavaScript, como setInterval e setTimeout. SetInterval é um método de execução de código baseado em intervalo de tempo que tem a capacidade nativa de executar repetidamente um script especificado quando o intervalo é atingido. setTimeout é um método de execução de código baseado em tempo que executará um script apenas uma vez quando o intervalo for atingido.

Tendo isto em mente, a primeira coisa que tentei foi colocar o setTimeout dentro do for para tentar obter essa espera

function timeoutFunction()
{
  console.log("Iniciando Teste");
  for(i = 0; i < 10; i++) {
    setTimeout(function () {
      console.log("Teste "+i);
    }, 5000);
  }
}
timeoutFunction();

Após o primeiro log, há um atraso de 5s, mas quando os logs dentro do setTmeout ocorrem em grupo

Por que isso acontece?

A função setTimeout() é uma função que roda em outra thread e por isso ela não bloqueia a execução do for, ou seja a função é invocada e o código segue executando sem precisar esperar que ela termine. Com isso ele executará as 10 execuções em questão de milisegundos e todos os tempos de espera ocorreram praticamente juntos.

Como adicionar o delay no loop for?

A Expressão de Função de Chamada Imediata (IIFE – Immediate Invoking Function Expression) pode ser usada para obter o que queremos. Sua sintaxe funciona da seguinte forma:

(function () {

})();

O IIFE chama imediatamente uma função. Isso significa simplesmente que a função é executada imediatamente após a conclusão da definição. Se utilizarmos essa função, obteremos a saída desejada

console.log("Iniciando Teste");
for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      console.log("Teste" + i);
    }, 5000*i);
  })(i);
};

O código acima, mesmo que você nunca tenha usado uma IIFE é simples, nó passamos a varável “i” como parametro da função (pois se tentarmos acessa-lo direto do loop o settimeout conseguirá obter apenas a iteração final com i = 9) e fazemos uma matemática simples para que as funções executem de forma a serem 5 segundos X nº iteração.

Publicado em

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

Publicado em

Conheça o Typed.js

O Typed.js é uma biblioteca JavaScript muito boa para simular um efeito de texto sendo escrito na tela, similar ao ato de digitar no console ou no Notepad.

Para acessar as funcionalidades do Typed.js, você precisa baixa-lo do site ou inserir uma tag script apontando para o link do CDN que eles disponibilizam conforme o exemplo abaixo.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

Como Funciona?

É simples e irei mostrar em alguns exemplos que cobrirão a maioria das funcionalidades que você precisará da biblioteca. Mas primeiro, caso você já não tenha algo parecido, copie o código HTML abaixo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <span id="texto"></span>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</body>
</html>

Para evitar a necessidade de fazer um download, vou deixar com o link do CDN, mas sinta-se a vontade para altera-lo. Abaixo do script do Typed.js ou em um arquivo separado, adicione o seguinte código:

// A configuração que será passada ao instanciarmos o objeto Typed
let configuracao = {
    // A lista de frases que aparecerão
    // está string podem conter tags html
    strings: ["<i>Primeira</i> frase com Typed.js.", "Olá MundoJS!"],
    // A velocidade que é digitado
    typeSpeed: 40
}

// O Objeto precisará recebe 2 parametros,
// 1º: Uma string começando com # para id ou . para classe html
// 2º: o objeto de configuração
let typed = new Typed("#texto", configuracao);

Com isso você já verá um efeito simples, mas que mostra como funciona e como pode ser executado. Agora vamos ver alguns itens um pouco menos óbvios.

Configurando o Typed.js

Parando no meio da frase

Se na string você usar o acento circunflexo seguido de um valor numérico, quando chegar naquele ponto o Typed.js irá esperar aquele número em milissegundos antes de continuar.

let configuracao = {
            strings: ["<i>Primeira</i> frase ^1000 com Typed.js.", "Olá MundoJS!"],
        }

Retorno inteligente

Se o objeto de configuração tiver uma propriedade chamada “smartBackspace” igual com o valor true, então o texto irá voltar somente até a parte onde o texto diferente.

let configuracao = {
            // A parte "Olá" não será removida quando o texto for reescrever.
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            smartBackspace: true
        }

Tempo para iniciar e retornar

Através das propriedades startDelay e backDelay é possível definir (em milissegundos ) o tempo que levará para começar a escrever e retornar o texto.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            startDelay: 2000,
            backDelay: 500,
        }

Customizar o cursor

É possível customizar o cursor ou remove-lo completamente através de duas propriedades conforme o exemplo abaixo. Lembrando que se você colocar showCursor como false, não conseguirá ver qualquer char que definir no cursorChar.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            showCursor: true,
            cursorChar: '#'
        }

Conclusão

Como e possível ver, a biblioteca do Type.js é simples e fácil de usar. Caso você precise customizar mais coisas va-le a pena dar uma olhada no https://github.com/mattboldt/typed.js/#user-content-customization para ver se o que você precisa já está lá.