Tag: Iniciantes

Publicado em

Laço FOR em JavaScript

O laço FOR é uma estrutura de repetição muito utilizada em JavaScript. Este laço de repetição utiliza uma variável, que controlará a contagem do loop, podendo ser utilizada na forma de incremento ou decremento. É um comando que se faz muito útil quando se sabe de antemão quantas vezes a repetição será executada.

No JavaScript, o laço de repetição FOR poderá ser utilizado de quatro formas diferentes, sendo a mais usual:

PRIMEIRA FORMA (FOR)

Laço for com INCREMENTO:
// O laço de repetição for utiliza uma variável de varredura
// e irá retornar os valores do vetor, de forma crescente ou decrescente
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index++) {
    console.log(vetor[index]);
}

Sendo nesta forma, normalmente serão passados como parâmetros uma variável auxiliar, que será utilizada para a varredura no laço, uma condição de saída/pause no laço e um incremento, que realizará uma varredura de forma crescente.

Laço for com DECREMENTO:
let vetor=[11, 22, 33, 44];
for (let index = 0; index < vetor.length; index--) {
    console.log(array[index]);
}

Nesta forma, o laço executará o loop de forma decrescente.

SEGUNDA FORMA (FOR…OF)

// O laço de repetição for...of percorre de forma iterativa e crescente
// e retorna os valores do vetor
let vetor=[11, 22, 33, 44];
for (const item of vetor) {
    console.log(item);
}

Nesta forma, chamada for…of, o laço percorre objetos de forma iterativa e crescente, chamando a função personalizada com instruções a serem executadas para o valor de cada objeto.

TERCEIRA FORMA (FOR…IN)

// O laço de repetição for...in percorre de forma iterativa e crescente
// e retornará quais são as posições em que os valores se encontram no vetor
let vetor=[11, 22, 33, 44];
for (const item in vetor) {
    console.log(item);
}

Na chamada for…in, o laço de repetição irá iterar sobre as propriedades do objeto de modo arbitrário. O loop irá iterar sobre todas as propriedades do próprio objeto, enumerando-as. Em suma, este laço enumerará quantas posições estão dispostas no vetor, retornando as suas posições.

QUARTA FORMA (FOREACH)

// O laço forEach usará de forma iterativa uma função
// para retornar os valores do vetor.
vetor.forEach(item => {
    console.log(item);
});

O laço forEach funciona de maneira semelhante ao laço for…of, pois, de maneira iterativa e crescente, percorre os itens do laço e retorna os valores do vetor.

Publicado em

Introdução ao Node.js

Neste post, estarei falando resumidamente sobre o que é o NodeJS, como configura-lo, alguns pontos básicos importantes e como executar um Olá Mundo.

O que é o Node.js?

O Node.js é um interpretador de código aberto do JavaScript para execução no servidor. Seu objetivo é ajudar programadores na criação de aplicações de alta escalabilidade, com códigos capazes de manipular milhares de conexões simultâneas. Criado em 2009, ele é baseado no interpretador do V8 JavaScript Engine que é um interpretador open source implementado pelo Google em C++.

Como instalar e executar o Node.js

Para começar a desenvolver com Node.js pode-se baixar a versão mais recente no site: https://nodejs.org. Após baixar e instalar ele, é bem fácil iniciar um projeto. Para configurar um projeto faça o seguinte:

  1. Abra o terminal do Node
  2. Acesse (crie se não tiver feito) a pasta que você quer colocar seu projeto
  3. Digite npm init
  4. O node irá lhe perguntar diversos dados para a criação do projeto. Caso queira deixar a configuração padrão, basta ir apertando enter até o fim. Você terá deverá ter uma lista igual a está:

    Ou caso você tenha colocado algum valor, pode ficar parecido com
  5. O node após o License, o node irá criar e exibir um arquivo Json similar a este

    Basta apertar OK
  6. Agora sua pasta conterá um projeto com um arquivo chamado package.json com os dados do objeto acima
  7. Sem fechar o terminal (ou abrindo o terminal de sua IDE/Editor) abra o projeto no e crie dentro dele o arquivo index.js com o seguinte código: 
    console.log("Olá Mundo");
  8. Não esqueça de salvar o arquivo.
  9. Por último, no terminal digite node index.js e você deverá ver a frase “Olá Mundo”.

Com isso concluímos o tutorial de introdução ao node.js e como rodar um olá mundo. Espero que a postagem tenha ajudado e caso alguém queira aprender o setup de algo mais complexo, escreva nos comentários abaixo.

Publicado em

Diferença de var e let

Como você já deve saber, no JavaScript existem formas de declarar variáveis.

  • Let: declara um variável não tipada
  • Const: declara uma constante
  • Var: declara uma variável não tipada

O let e o const se comportam exatamente como esperado deles comparado com a maioria das outras linguagens de programação. O var faz um trabalho similar ao let, no entanto, ele existe a um bom tempo e por isso carrega junto algumas coisas que não acontecem em outras linguagens.

Estaremos vendo a seguir algumas peculiaridades do “var”, pois o seu funcionamento não é algo “bom” ou “ruim”, ele atendeu (e ainda atende) a programação JavaScript.

 

Var não possui escopo de bloco

As variáveis declaradas com var possuem o escopo da função ou escopo global.

Por exemplo:

if (true) {
  // Usando o var para declarar uma variavel test com o valor true
  var test = true;
}

// Exibirá true, mesmo que a variavel tenha sido
// criada dentro do bloco IF
alert(test);

Se você utilizar o let no lugar do var, o mesmo não seria visível para a função alert pois o let possui escopo de bloco.

O mesmo ocorre para variáveis declaradas dentro de um loop

for (var i = 0; i < 10; i++) {
  // Seu código, ou nada mesmo
}

// Exibe 10, pois a variavel "i"
// também continua existindo fora do bloco
alert(i);

Se o Código estiver dentro de uma função, então o var terá o escopo desta função e não será visto de forma global.

function sayHi() {
  if (true) {
    var phrase = "MundoJS";
  }

  //exibe MundoJS
  alert(phrase);
}

sayHi();

// Não reconhece a variavel
alert(phrase);

Como você pode ver, o var ignora completamente o escopo de bloco. Isso ocorre pois antigamente o JavaScript não possui qualquer tipo de ambiente para este tipo de lógica e o var é um sobrevivente daquela época.

 

O var é processado no começo da função

Variaveis declaradas com var são processadas no começo das funções, ou do script no caso de serem variáveis globais. Isso quer dizer que as variáveis serão definidas no começo da função onde estão contidas, independente de onde foram declaradas. Veja o exemplo:

function sayHi() {
  phrase = "MundoJS";

  alert(phrase);

  var phrase;
}

É o mesmo que fazer assim:

function sayHi() {
  phrase = "MundoJS";

  if (false) {
    var phrase;
  }

  alert(phrase);
}

Esse comportamento é conhecido como hoisting de variáveis. Com isso, casos como o acima, onde o IF nunca entrará no bloco de código, mesmo assim termos a declaração da variável pois ela é movida para o topo

Importante: Declarações vão para o começo, atribuições de valores não.

Exemplo:

function sayHi() {
  alert(phrase);

  var phrase = "MundoJS";
}

sayHi();

A linha que declara a variável, também está atribuindo uma string a ela. Quando o JavaScript executa este script, ele estará fazendo o seguinte:

function sayHi() {
  // A declaração ocorre no começo
  var phrase;

  // variavel -> undefined
  alert(phrase);

  // atribuição de valor
  phrase = "MundoJS"; 
}

sayHi();

Pelo fato de as variáveis sempre serem declaradas no começo, nós podemos referencia-las a qualquer momento. No entanto essas variáveis serão do tipo undefined até receberem seus valores.

Publicado em

Aprenda JavaScript “hackeando” sites

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

Você precisará:

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

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

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

Desmascarando Passwords

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

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

 

Bagunçando a orientação da tela

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

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

 

Alterar todas as imagens da tela

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

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

 

Virando a tela depois de um tempo

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

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

 

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

 

Publicado em

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.

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

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

Publicado em

Node RED: Ferramenta de programação para a internet das coisas

Com o casamento do Node.JS com a internet das coisas que resultou no Node-Red (uma ferramenta que consiste com runtime baseado em Node.Js para programação “flow-based”), que foi originalmente desenvolvido time de serviços de tecnologias emergentes da IBM e agora faz parte da JS Foundation. Se você ainda não tinha ouvindo falar disto antes, agora é a hora de dar uma olhada neste assunto.

O Framework de um runtime em node.js que você aponta para um navegador web para poder acessar o flow editor. Através do navegador é possível criar aplicações arrastando nodes na área de trabalho e conectando-as juntas.

 

Como funciona?

Editor Flow no navegador: Torna simples a conexão entre os flows através de uma ampla gama de nodes em sua paleta. Flows podem então ser rodados no runtime com um único clique. Funções JavaScript podem ser criadas no editor de texto e uma biblioteca interna permite que você salve funções, templates ou flows para reutilização.

Construído com Node.js: Com já mencionado, o runtime foi construído com node.js, utilizando ao máximo modelo de blocos e orientado a eventos. Isto o torna ideal para rodar na rede de hardwares de baixo custo como o Raspberry Pi e também na nuvem. Com mais de 225.000 módulos nos pacotes de repositório do Node, é fácil alterar e adicionar novas funcionalidades.

Desenvolvimento Social: Os flows criados em Node-RED são armazenados utilizando Json que podem ser facilmente importados e exportados para compartilha-los com outros. Uma biblioteca online do flow permite que você compartilhe seus melhores flows com o resto do mundo.

Como começar?

Antes de você começar, você precisa garantir que seu computador possui uma instalação do Node.js, de preferencia com as ultimas atualizações. Também, tenha em mente que o Node-RED não oferece mais suporte para as versões 0.12.x ou 0.10.x

Com relação ao hardware, você consegue encontrar instruções especificas para o Raspberry Pi, BeagleBone Black, e Windows. Usuários de Linux e OSX devem manter em mente que eles precisam instalar as versões dos pacotes que são especificas para os seus sistemas operacionais ou obter a última versão LTS (suporte de longo termo) do site.

Publicado em

Estimando a velocidade de download com Imagens

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

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

O Código HTML

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

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

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

 

O Código JavaScript

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

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

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

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

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


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

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

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

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

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

Conclusão

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

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

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