Array Methods: Conheça os métodos de vetores.

Neste artigo, irei mostrar alguns dos métodos para manipulação de vetores mais utilizados no JavaScript. Existem outros métodos que serão abordados em próximos artigos.

concat():

Une dois ou mais vetores e retorna uma cópia dos vetores unidos.

Sintaxe:
0045vetor1.concat(vetor2, vetor3, ..., vetorX);
Exemplo:
let meninas = ["Cecilia", "Luana"];
let meninos = ["Emilio", "Tobias", "Leonardo"];
let adulto = ["Roberta"];
let pessoas = meninas.concat(meninos, adulto); 
console.log(pessoas);

copyWithin():

Copia elementos do vetor dentro do vetor, para e de posições especificadas. Este método nunca adicionará mais itens ao vetor. Importante: este método sobrescreve o vetor original.

Sintaxe:
vetor.copyWithin(alvo, inicio, fim);
Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2,0,2);
// ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

entries():

Retorna um objeto Array Iterator com pares de chave/valor. Para cada item no vetor original, o novo objeto de iteração conterá um vetor com o índice como chave e o valor do item como valor.

Sintaxe:
vetor.entries();
Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let f = fruits.entries();
for (x of f) {
    console.log(x);
}
// [0, "Banana"]
// [1, "Orange"]
// [2, "Apple"]
// [3, "Mango"]

filter():

Cria um novo vetor com todos os elementos de um vetor que passam no teste.

Sintaxe:
vetor.filter( function(valorAtual, index, vet), thisValue);
Onde:
  • function(valorAtual, index, vet): é uma função que irá ser executada para cada elemento no vetor. Possui os argumentos: valorAtual, index e vet.
  • thisValue: um parâmetro opcional. É Um valor a ser passado para a função a ser usado como seu valor “this”. Se este parâmetro estiver vazio, o valor “undefined” será passado como seu valor “this”.
Exemplo:
let idades = [32, 33, 16, 40];
function verificaAdulto(idade) {
  return idade >= 18;
}
console.log(idades.filter(verificaAdulto));
// [32, 33, 40]

map():

O método map() cria um novo vetor com os resultados da chamada de uma função para cada elemento do vetor. Ele chama a função fornecida uma vezpara cada elemento em um vetor, em ordem.

Sintaxe:
vetor.map(function(function(valorAtual, index, vet), thisValue);
Onde:
  • function(valorAtual, index, vet): Uma função a ser executada para cada elemento na matriz. Argumentos de função: valorAtual, index, vet.
  • thisValue: um parâmetro opcional. É Um valor a ser passado para a função a ser usado como seu valor “this”. Se este parâmetro estiver vazio, o valor “undefined” será passado como seu valor “this”.
Exemplo:
let numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt));
// [2, 3, 4, 5]

sort():

O método sort() classifica os itens de um vetor. A ordem de classificação pode ser alfabética, numérica e crescente ou decrescente. Por padrão, o sort() classifica os valores por ordem alfabética e crescente. Isso funciona bem para sequencias de caracteres. No entanto, se os números forem classificados como sequencias de caracteres, “25” será maior que “100”, porque “2” será maior que “1”. Por esse motivo, o método sort() produzirá um resultado incorreto ao classificar números.

Sintaxe:
vetor.sort(funcaoComparacao);
Onde:
  • funcaoComparacao: Opcional, é uma função que define uma ordem de classificação alternativa. Esta função deverá retornar um valor negativo, zero, ou positivo, dependendo dos argumentos, como:

function (a, b) {return a-b}.

Quando comparamos 40 e 100, o método sort() chama a função de comparação function(40, 100). A função irá calcular 40 – 100 e retornará -60 (um valor negativo). A função sort lerá que 40 é um valor menor que 100.

Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort());
// ["Apple", "Banana", "Mango", "Orange"]

reduce():

O método reduce() reduz o vetor para um único valor; Ele executa uma função fornecida para cada valor do vetor (da esquerda para a direita). O valor de retorno da função é armazenado em um acumulador (resultado / total).

Sintaxe:
vetor.reduce(function(total, valorAtual, indiceAtual, vet), valorInicial);
Onde:
  • function(total, valorAtual, indiceAtual, vet): É uma função a ser executada para cada elemento no vetor.
  • valorInicial: Opcional, um valor a ser passado para a função como o valor inicial.
Exemplo:
let numbers = [175, 50, 25];
function myFunc(total, num) {
  return total - num;
}
console.log(numbers.reduce(myFunc));
// 100

join():

O método join() retorna o vetor como uma sequência. Os elementos serão separados por um separador especificado. O separador padrão é a vírgula (,). Este método não altera o vetor original.

Sintaxe:
vetor.join(separador);

O separador pode ser omitido, e será usado por padrão a vírgula (,).

Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" and "));
// Banana and Orange and Apple and Mango

slice()

O método slice() retorna os elementos selecionados em um vetor, como um novo objeto de vetor. Seleciona os elementos que começam no argumento inicial especificado e terminam no, mas não incluem, o argumento final especificado.

Sintaxe:
vetor.slice(inicio, fim);
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3);
console.log(citrus);
// ["Orange", "Lemon"]

Gostou deste artigo? Comente abaixo outros métodos de vetores JavaScript!

JavaScript Básico: Break e Continue

 

Você já conhece o break e continue e suas utilidades? Conheça neste artigo:

BREAK:

O comando “break” serve para encerrar a leitura. O break é um comando que podemos utilizar quando queremos parar/encerrar o laço de repetição na hora. A instrução break interrompe o laço e continua executando o código após o loop (se houver).

Exemplo:

let carros = ["BMW", "Volvo", "Saab", "Ford"];

list: {
    console.log(carros[0]);
    console.log(carros[1]);
    break list;
    console.log(carros[2]);
    console.log(carros[3]);
}

CONTINUE:

Com este comando, é possível iniciar a próxima repetição do loop. A instrução continue interrompe uma iteração (no laço de repetição), se uma condição específica ocorrer, e continua com a próxima iteração no laço de repetição.

for (let i = 1; i < 10; i++) {
    if (i === 3) {
        continue;
    }
    console.log("O número atual é: " + i);
}

Com a instrução continue, você poderá utilizá-la para apenas ignorar  uma iteração de loop.

A instrução break pode ser utilizada para pular de um loop ou de um switch. Ela pode ser usada para pular qualquer bloco de código.

Exercício 1:

Crie um laço de repetição FOR. Este laço deverá começar a iterar no número 1. Enquanto o índice for menor que 10, o laço deverá continuar iterando.

Com o laço criado, cria um estrutura condicional que, utilizando o comando break, pare a iteração quando ela alcançar o valor 5. Caso esta condição seja atendida, mostre os números utilizando o console.log.

Exercício 2:

Crie um vetor que contenha os seguintes nomes: “André”, “Ana Paula”, “Júlio”, “Marcela”, “Rubem”. Utilize o laço de repetição FOR para percorrer esta lista. Quando a leitura for igual a “Júlio”, utilize o comando continue. Ele irá exibir todos os outros nomes deste vetor. Utilize o console.log para logar os dados no console.

Gostou deste artigo? Comente abaixo!

Conheça a CryptoCoinJS, uma biblioteca JavaScript para Criptomoedas.

CryptoCoinJS é um projeto JavaScript que ajuda você a interagir com diversas criptomoedas existentes na atualidade, como o famoso Bitcoin, Litecoin, Dogecoin, entre muitas outras. A maioria dos módulos é totalmente compatível com o seu navegador e com o Node.js. Naturalmente, os módulos que fazem interface diretamente com os nós de pares não serão executados no navegador.

Princípios da biblioteca:

Acreditando na filosofia Node.js e UNIX – a idéia de criar pequenos componentes que fazem uma coisa e fazem bem. Escrever software dessa maneira permite que os indivíduos usem e contribuam com muito mais eficácia do que escrevendo uma biblioteca monolítica. O CryptoCoinJS acredita que as pessoas são mais importantes que o código e, portanto, é fundamental escrever um código que seja fácil de ler, fácil de documentar cada módulo com a API e exemplos, e esse código é o inimigo 1 2.

Escrever testes é uma das melhores maneiras de comunicar expectativas entre desenvolvedores. Se a documentação é uma maneira de se comunicar para o consumidor do seu módulo, os testes são uma maneira de se comunicar entre os desenvolvedores.

Plataformas:

O CryptoCoinJS está focado no Node.js e no navegador usando o Browserify. Não há suporte a navegadores herdados, ou seja, se o seu navegador não suporta ECMAScript 5 (2009 – 2010) e não suporta window.crypto.getRandomValues​​(), alguns dos módulos podem não funcionar.

Começando:

O CryptoCoinJS é escrito em JavaScript puro e pode ser usado no servidor (Node.js) e no cliente (navegador moderno> 2010).

A primeira e provavelmente a mais óbvia é que você precisará de um editor de texto. Sublime Text , Github Atom ou Vim farão uma boa escolha.

O Node.js é executado no Windows, Mac OS X ou Linux. É muito fácil de instalar, basta acessar nodejs.org/download e executar o instalador para sua plataforma de escolha. O Node.js agrupa o npm que, estranhamente, não representa o Node.j Package Manager, apesar de ser seu único objetivo.

Continue lendo “Conheça a CryptoCoinJS, uma biblioteca JavaScript para Criptomoedas.”

JavaScript Básico: While

 

É um loop que funciona de forma bem simples. Chamado de “enquanto” (while) a condição for verdadeira (true), o código será executado. Fazendo isso, você cria um laço de repetição que irá executar para cada vez que a condição for verdadeira.

A Sintaxe do While:

while (condição){
    rotina;
}
Onde:
  • condição: é uma expressão que vai ser avaliada antes de cada vez que o laço for executado. Se a condição for verdadeira, a rotina será executada. Quando a condição for avaliada como falsa, a execução continuará na declaração que vem depois do laço while.
  • rotina: é uma declaração que será executada quando/enquanto a condição for avaliada como verdadeira.

Por exemplo:

// Variavel numero que recebe o valor numérico 10
let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    // Irá mostrar o valor acrescentando 1 até que se alcance o total
    console.log("valor:" + numero);
     numero++;
}

Você precisará fornecer uma forma para que o loop termine, caso contrário terá um loop infinito.

let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    let valor = 0;
    console.log("valor:" + valor);
    valor = valor + 2;
}

Exercício 1:

Crie um laço while que irá iterar enquanto n for menor ou igual a 5. Mostre no console os valores obtidos.

Dica:

Para realizar este exercício, crie uma variável n que receberá o valor zero. Crie o laço de repetição while que irá ter a condição n menor ou igual a 5. Coloque a rotina a ser seguida dentro do laço de repetição.

 

Exercício 2:

Crie um vetor chamado carros. Este vetor irá conter os valores “Gol”, “Uno”, “S10”, “Kadett”. Você também precisa criar uma variável que será o índice para percorrer este laço de repetição. No seu laço de repetição while, utilize o console.log para mostrar todos os nomes dos carros que estão contidos no seu vetor.

 

Gostou deste artigo? Comente abaixo os seus resultados e tire as suas dúvidas!

Black Hat 2019 elimina vulnerabilidades no WhatsApp, iOS, Azure

A criptografia de ponta a ponta do seu messenger favorito pode não ser tão segura quanto você pensa. Na conferência de segurança cibernética da Black Hat 2019 (de 7 a 8 de agosto), em Las Vegas, pesquisadores de segurança do código-fonte do WhatsApp da CheckPoint realizaram engenharia reversa para interceptar e manipular mensagens privadas com êxito. O WhatsApp não é a única plataforma importante que está sendo examinada na conferência.

Natalie Silvanovich, da equipe do Project Zero do Google, investigou a superfície de ataque remoto sem interação do iPhone e encontrou 10 bugs no SMS, MMS, Visual Voicemail, iMessage e Mail, todos corrigidos pela Apple. As vulnerabilidades remotas podem ser exploradas para invadir e controlar remotamente um iPhone sem o conhecimento do usuário.

Em uma postagem oficial do blog do Project Zero, Silvanovich escreve: “Diferentemente do Android, as mensagens SMS são processadas em código nativo pelo iPhone, o que aumenta a probabilidade de vulnerabilidades de corrupção de memória. A maioria das vulnerabilidades ocorreu no iMessage devido à sua superfície de ataque ampla e difícil de enumerar. ”

Para torná-los mais seguros, a Apple está dando iPhones a hackers e ethical hackers para que eles possam invadir e sinalizar vulnerabilidades que encontrarem. Na conferência Black Hat, a Apple abriu seu programa de recompensas por bug para iOS e MacOS a todos os pesquisadores e também aumentou o prêmio de recompensa por bug de US $ 100.000 para US $ 1 milhão.

Ao elaborar as vulnerabilidades do WhatsApp, os pesquisadores da Check Point apontaram que haviam criado uma ferramenta para descriptografar as comunicações no WhatsApp. Quando eles reverteram seu algoritmo para descriptografar os dados, descobriram que a plataforma de mensagens estava usando o protocolo protobuf2 para criptografia.

Quando converteram os dados do protobuf2 em JSON (JavaScript Object Notation) – um formato de intercâmbio de dados – eles viram os parâmetros secretos das mensagens que eles foram capazes de manipular.

Continue lendo “Black Hat 2019 elimina vulnerabilidades no WhatsApp, iOS, Azure”

Hackers comprometem mais 80 sites de comércio eletrônico

Pesquisadores de segurança cibernética descobriram mais de 80 sites de comércio eletrônico comprometidos de Magecart que estavam enviando ativamente informações de cartão de crédito de compradores on-line aos servidores controlados por invasores.

Operando seus negócios nos Estados Unidos, Canadá, Europa, América Latina e Ásia, muitos desses sites comprometidos são marcas respeitáveis ​​na indústria de motorsports e high fashion, revelaram hoje pesquisadores do Aite Group e da Arxan Technologies em um relatório compartilhado com o The Hacker News.

Em um mundo cada vez mais digital, os ataques Magecart surgiram como uma ameaça importante de segurança cibernética para sites de comércio eletrônico.

Magecart é um termo genérico dado a diferentes grupos de criminosos cibernéticos especializados em implantar secretamente skimmers on-line de cartões de crédito em sites de comércio eletrônico comprometidos com a intenção de roubar detalhes de cartões de pagamento de seus clientes.

Esses skimmers virtuais de cartão de crédito, também conhecidos como ataque de formjacking, são basicamente códigos JavaScript que os hackers inserem secretamente em um site comprometido, geralmente na página do carrinho de compras, projetados para capturar informações de pagamento dos clientes em tempo real e enviá-las a um servidor invasor-remoto  controlado.

Ultimamente, Magecart é notícia por conduzir vários assaltos de alto nível contra grandes empresas, incluindo British Airways, Ticketmaster, Newegg e outras.

A campanha recém-divulgada não pertence a um único grupo de hackers Magecart; em vez disso, os pesquisadores usaram um mecanismo de busca de código-fonte para procurar por JavaScript ofuscado na Internet com padrões maliciosos que eram vistos anteriormente nos skimmers virtuais de cartões de crédito do Magecart.

De acordo com os pesquisadores, a técnica permitiu que eles descobrissem rapidamente mais de 80 sites de comércio eletrônico comprometidos por grupos Magecart, a maioria encontrados em versões desatualizadas do Magento CMS, vulneráveis ​​a um carregamento não autenticado e a vulnerabilidades de execução remota de código.

 

“A ausência de proteção no aplicativo, como ofuscação de código e detecção de violação, torna os aplicativos da Web vulneráveis ​​a um tipo de ataque cibernético chamado formjacking”, disseram os pesquisadores.

 

“Muitos dos sites comprometidos estão executando as versões 1.5, 1.7 ou 1.9. As vulnerabilidades arbitrárias de upload de arquivos, execução remota de código e falsificação de solicitação entre sites afetam o Magento versão 2.1.6 e inferior. Embora não possa ser declarado com autoridade que foi isso que levou à violação desses sites, são versões vulneráveis ​​do Magento que permitem que os adversários injetem o código de formjacking no site “.

Continue lendo “Hackers comprometem mais 80 sites de comércio eletrônico”

Atualizações de Cursos MundoJS!

Olá pessoal! Estamos aqui para contar as novidades para vocês! Neste último mês, aconteceram algumas mudanças em nosso site! Nossa aba de cursos, no site, sofreu algumas alterações. Antes nós disponibilizávamos alguns links para cursos pagos e gratuitos de JavaScript.

Mas agora, o MundoJS começou a lançar seus próprios cursos!

No último mês, lançamos dois cursos na plataforma Udemy, sendo um totalmente gratuito e outro pago, chamados Introdução ao JavaScript e JavaScript Básico, respectivamente. Você pode acessar diretamente:

No curso de Introdução ao JavaScript, abordamos conceitos básicos da linguagem, criamos pequenos algoritmos, vemos as chamadas estruturas condicionais, enfim, o conteúdo básico para qualquer programador, que você provavelmente aprenderia no seu primeiro ano de faculdade.

No curso de JavaScript Básico, começamos a abordar conceitos um pouco mais avançados. Com um foco interessante na Manipulação do DOM e Eventos, abordamos de forma prática a utilização de eventos sobre elementos HTML. O curso também possui dois projetos práticos: Um jogo da velha e uma calculadora, feitos com HTML, CSS e JavaScript! O mais interessante é: disponibilizamos o HTML e CSS para você e, durante o curso, focamos apenas na lógica de programação por trás destes projetos!

Continue lendo “Atualizações de Cursos MundoJS!”

JavaScript Básico: For Of

Você conhece o loop For…Of?

Este loop é específico para iterar entre os elementos de uma lista. Ele percorre objetos iterativos, chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.

Sintaxe:

for (variavel of iteravel){
    declaração;
}
Onde:

variável: a cada iteração, um valor de uma propriedade diferente é atribuído à variável;
iteravel: objeto cujos atributos serão iterados.

let dias = [“segunda”, “terça”, “quarta”, “quinta”, “sexta”];

for (let dia of dias) {
    console.log(dia);
}

Você pode fazer a leitura como: “Para cada item de uma lista”. No exemplo, dia começará com o valor “segunda” e o último valor será “sexta”.
O for…of percorre a lista de forma crescente, então ele irá mostrar de forma crescente os valores do seu vetor.

Exercício 1:

Crie um algoritmo que liste todos os 12 meses do ano. Para isso, você deve criar um vetor que irá conter, em cada índice, o nome de um mês. Com este vetor criado, utilize o for…of pra realizar a leitura destes doze elementos.

Exercício 2:

Crie um vetor que tenha 10 objetos em seu interior. Cada objeto deverá possuir três propriedades: nome: nomeDoAluno, idade: idadeDoAluno, matricula: matriculaDoAluno. Crie 10 alunos fictícios. Após a criação deste vetor com objetos, utilize o laço for…of para realizar a leitura desta lista de objetos.

Obs: Todas as propriedades devem ser mostradas no console.

Exercício 3:

Crie uma lista de elementos que contenha 10 números. Os números devem estar na seguinte ordem: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]. Utilize o laço for…of para realizar a leitura desta lista. Exiba no console os valores da lista.

O custo do JavaScript 2019

Se você tem interesse em saber mais sobre os impactos de performance do JavaScript nos navegadores, esse artigo é para você.

Este post é uma adaptação do meu entendimento do vídeo e artigo sobre o custo do JavaScript que foi apresentado por Addy Osmani (Link no final do post) que fala sobre as mudanças que ele observou no custo do JavaScript entre o ano 2018 e 2019.

De acordo com ele, uma das grandes mudanças no custo do JavaScript nos últimos anos se deve nas melhorias como os navegadores conseguem processar scripts. Em 2019 o custo foco está no tempo de download e execução dos scripts.

O que isso quer dizer para os desenvolvedores?

Como a compilação e analise de dados não é mais tão lenta com antes, atualmente é importante considerar 3 coisas nos bundles de JavaScript

  1. Melhorar o tempo de download: Evite ter bundles maiores que 100kb (50kb para dispositivos móveis) pois eles consomem muito a rede e memória do dispositivo. Aproveite as funcionalidades do HTTTP2 para reduzir o overhead de chamadas adicionais.
  2. Melhorar o tempo de execução: Evite tarefas que consomem muito da thread principal. A execução do script após o download é um dos custos dominantes.
  3. Evite scripts inline muito grandes: Uma boa regra genérica e evitar scripts inline que sejam superiores a 1kb pois eles são processados pela thread principal e podem atrasar interatividade da página.

Custo do JavaScript para smartphones.


Tarefas longas monopolizam a thread principal. Tente quebra-las.

Por que a o download e a execução do código são importantes?

Apesar de estarmos começando no mundo do 5G e existirem smartphones com alta capacidade de processamento, a média da capacidade de download (mesmo em países de primeiro mundo) ainda se compara ao 3G. Junto com o fato que muitos destes dispositivos não terem o poder de processamento necessário para rodar eficiente alguns aplicativos, temos ai a receita para uma péssima experiencia para o usuário.

O que o V8 fez para melhorar o tempo de processamento?

O V8 reduziu a quantidade de trabalhos de análise e compilação na thread principal em uma média de 40% (por exemplo, 46% no Facebook, 62% no Pinterest) com a maior melhoria sendo 81% (YouTube), analisando e compilando um trabalhador fio. Isso é um acréscimo ao parsing / compilação de fluxo de threads fora da linha principal existente.

Conclusões

O download e o tempo de execução são os principais bottlenecks para o carregamento de scripts em 2019. Divida pacotes de forma que o usuário só baixe aquilo que precisa quando for necessário. No celular, você deve enviar muito menos script devido à rede, ao consumo de memória e ao tempo de execução para CPUs serem mais lentas.

Fonte:

Blog

Youtube