Posts

Programação orientada a objetos JavaScript é uma linguagem de programação baseada em protótipos (prototype-based language), onde propriedades e métodos podem ser compartilhadas entre objetos. Algumas características interessantes sobre objetos em JavaScript: Quase todos objetos JavaScript são instâncias de Object. Um objeto típico herda as propriedades e métodos de Object.prototype. Propriedades e métodos de prototype podem ser sobrescritas. As alterações em prototype podem ser vistas por todos os objetos descendentes. O construtor Object cria um objeto wrapper para um valor dado. O construtor Object cria um objeto vazio para os valores null e undefined. Um erro comum é acreditar que números inteiros (literais) não podem ser usados como objetos, pois o ponto . faz com que o interpretador o interprete como um número de ponto flutuante. ...

Programação assíncrona No modelo de execução síncrono, as instruções de um programa são executadas em sequência, uma após a outra. Nesse modelo, quando uma instrução demorada é executada, o fluxo de execução fica bloqueado, aguardando seu término para que as próximas instruções possam ser executadas. No modelo de execução assíncrono, é possível executar mais de uma instrução ao mesmo tempo. Assim, uma instrução demorada poderia ser executada “em segundo plano”, enquanto o restante das instruções continuam normalmente com seu fluxo de execução. ...

Módulos CommonJS Os padrão de módulos CommonJS foi (e ainda é) utilizado pela plataforma Node.js (usada no back-end), portanto ainda é bastante comum a sua utilização em projetos com JavaScript, uma vez que o padrão ES6 é relativamente novo, sendo lançado em 2015. // index.js const calculadora = require("./modulo1.js"); const { VERSAO, mensagem } = require("./modulo2.js"); console.log("Versão do módulo:", VERSAO); console.log("2+3", calculadora.somar(2, 3)); console.log("3-2", calculadora.subtrair(3, 2)); mensagem(); // modulo1.js module.exports = { somar(a, b) { return a + b; }, subtrair(a, b) { return a - b; } }; // modulo2.js exports.VERSAO = "1.0"; exports.mensagem = function(){ console.log("Olá! Tudo bem?"); } Módulos ES6 O sistema de módulos introduzido com o ECMAScript 2015 (ES6) possibilita programação modular em arquivos JavaScript com o uso das diretivas import e export, sem a necessidade de vincular todos os arquivos de script no documento HTML. ...

Trabalhando com arrays Obter o tamanho de um Array let cores = ["verde", "amarelo", "vermelho"]; let tamanho = cores.length; Acessar um item de um Array let primeira = cores[0]; let ultima = cores[cores.length - 1]; Iterar um Array // usando forEach // cores.forEach(function(item, indice, array) { // console.log(item); // }); cores.forEach(item => { console.log(item); }); // usando for-of for (let item of cores) { console.log(item); } // usando for for (let i = 0, n = cores.length; i < n; i++){ console.log(cores[i]); } Adicionar e remover itens do Array // adicionar um item no final let tamanhoAposAzul = cores.push("azul"); // remover um item do final let ultimoRemovido = cores.pop(); // adicionar um item no início let tamanhoAposBranco = cores.unshift("branco"); // remover um item do início let primeiroRemovido = cores.shift(); // localizar a posição de um item // retornará -1 caso o valor não seja encontrado let posicao = cores.indexOf("amarelo"); // adicionar 2 itens a partir da posição 2 let posicaoInserir = 2; let itensInserir = ["roxo", "cinza"]; cores.splice(posicaoInserir, 0, ...itensInserir); // remover 2 itens a partir da posição 2 let posicaoRemover = 2; let quantidadeRemover = 2; let removidos = cores.splice(posicaoRemover, quantidadeRemover); Obter um pedaço de um Array const numeros = [1, 1, 2, 3, 5, 8, 13, 21]; const pedaco = numeros.slice(4, 7); // [5, 8, 13] Concatenar Arrays const pares = [2, 4, 6]; const impares = [1, 3, 5]; let novo = pares.concat(impares); // [2, 4, 6, 1, 3, 5] Conversão entre Array e String delimitada // criar um array inicial let frutas = ["Laranja", "Abacate", "Maçã", "Abacaxi"]; // criar uma string delimitada por hífens a partir do array let texto = frutas.join("-"); // "Laranja-Abacate-Maçã-Abacaxi" // modificar a string, "adicionando" novos itens texto += "-Uva-Melancia"; // recriar o array a partir da string delimitada frutas = texto.split('-'); // ["Laranja", "Abacate", "Maçã", "Abacaxi", "Uva", "Melancia"] Filtrar os itens de um Array function par(valor){ return valor % 2 === 0; } let numeros = [8, 3, 12, -4, 7, -1, 13]; let pares = numeros.filter(par); // de forma alternativa, com "arrow function" pares = numeros.filter(num => num % 2 === 0); Filtrar os objetos de um Array // itens de uma compra let itens = [ { produto: { descrição: "Café torrado moído 500g", preço: 9.5 }, quantidade: 1 }, { produto: { descrição: "Pão de forma integral", preço: 7.75 }, quantidade: 2 }, { produto: { descrição: "Manteiga com sal 200g", preço: 8.0 }, quantidade: 1 }, { produto: { descrição: "Água com gás 510ml", preço: 1.5 }, quantidade: 12 }, { produto: { descrição: "Pipoca de microondas", preço: 2.5 }, quantidade: 4 } ]; // itens onde a quantidade for maior que 1 let mais_de_1_item = itens .filter((item) => item.quantidade > 1); // itens onde o valor total (valor unitário * quantidade) for maior que 10 let valor_total_maior_que_10 = itens .filter((item) => item.produto.preço * item.quantidade > 10); // itens onde a descrição do produto começa com a letra P let descrição_começa_com_p = itens .filter((item) => item.produto.descrição[0].toUpperCase() === "P"); Ordenar os itens de um Array let cores = ["verde", "amarelo", "vermelho"]; cores.sort(); // ["amarelo", "verde", "vermelho"] Inverter a ordem dos itens de um Array let cores = ["verde", "amarelo", "vermelho"]; cores.reverse(); // ["vermelho", "amarelo", "verde"] Ordenar os objetos de um Array let funcionarios = [ { nome: "João", salario: 3000 }, { nome: "Maria", salario: 4500 }, { nome: "Ana", salario: 2500 }, { nome: "Pedro", salario: 4000 }, { nome: "Paulo", salario: 2500 } ]; // ordenar por salário funcionarios.sort((a, b) => a.salario - b.salario); // ordenar por salário (decrescente) funcionarios.sort((a, b) => b.salario - a.salario); // ordenar por nome funcionarios.sort(function(a, b){ if (a.nome > b.nome) return 1; else if (a.nome < b.nome) return -1; else return 0; // iguais }); Transformar os dados de um Array com map /* calcular as taxas correspondentes de um imposto fictício onde: 10% para valores inferiores a 1000 20% para superiores ou iguais a 1000 e inferiores a 5000 30% para valores superiores ou iguais a 5000 */ function calcularImposto(valor){ if (valor < 1000) return valor * 0.1; // 10% else if (valor < 5000) return valor * 0.2; // 20% return valor * 0.3; // 30% } // valores para calcular let valores = [500, 800, 1500, 2500, 5000, 5500, 8000, 10000]; // valores dos impostos let impostos = valores.map(calcularImposto); // valores detalhados: valor, imposto e total let detalhes = valores.map(valor => { const valor_imposto = calcularImposto(valor); const valor_total = valor + valor_imposto; return { valor: valor, imposto: valor_imposto, total: valor_total }; }); “Reduzir” os dados de um Array O método reduce aplica uma função com um acumulador em cada valor de um Array, do primeiro até o último, para reduzi-los a um único valor. ...

Manipulação do HTML DOM O HTML DOM (Document Object Model) é um modelo de objetos de um documento HTML. O DOM de um documento consiste em uma hierarquia de nós, onde cada nó pode ter, opcionalmente, um nó pai (parent) e nós filhos (children). Um elemento do DOM é um nó que representa uma tag HTML. No DOM, todo elemento (objeto do tipo HTMLElement) é um nó (objeto do tipo Node), mas nem todo nó é um elemento, pois existem outros tipos de nós na hierarquia de um documento DOM, como comentários, blocos de texto, a tag especial <!DOCTYPE>, entre outros. ...

Estruturas de controle if-else // desvio condicional simples if (condição) instrução; // desvio condicional simples com mais de uma instrução if (condição) { instrução1; instrução2; } // desvio condicional composto if (condição) { instrução1; } else { instrução2; } // desvio condicional encadeado if (condição1) { instrução1; } else if (condição2) { instrução2; } else { instrução3; } Exemplo: comparar dois números inteiros fornecidos pelo usuário. const n1 = parseInt(prompt("Por favor, digite um número inteiro.")); const n2 = parseInt(prompt("Por favor, digite mais um número inteiro.")); let resp; if (n1 > n2) { resp = `${n1} é maior que ${n2}`; } else if (n1 > n2) { resp = `${n1} é menor que ${n2}`; } else { resp = `${n1} e ${n2} são iguais`; } alert(resp); switch // estrutura de seleção / múltipla escolha switch (expressão) { case valor1: instrução1; [break;] case valor2: instrução2; [break;] default: instrução3; } Exemplo: mostrar um conceito entre, muito ruim, ruim, regular, bom ou muito bom, para valores numéricos de 1 a 5. ...

Escopo, Variáveis e Funções valor1 = 1; // escopo global var valor2 = 12; // escopo de função let valor3 = 123; // escopo de bloco const valor4 = 1234; // escopo de bloco // não é possível alterar o valor de uma constante Escopo global valor1 = 1; function func1() { valor1 = 2; { valor1 = 3; console.log("func1 >> {} >> valor1:", valor1); // 3 } console.log("func1 >> valor1:", valor1); // 3 } func1(); console.log("valor1:", valor1); // 3 Escopo de função var val2 = 1; function func2() { var val2 = 2; { var val2 = 3; console.log("func2 >> {} >> val2:", val2); // 3 } console.log("func2 >> val2:", val2); // 3 } func2(); console.log("val2:", val2); // 1 Escopo de bloco let val3 = 1; const con3 = 1; function func3() { let val3 = 2; const con3 = 2; { let val3 = 3; const con3 = 3; console.log("func3 >> {} >> val3, con3:", val3, con3); // 3 3 } console.log("func3 >> val3:", val3, con3); // 2 2 } func3(); console.log("val3, con3:", val3, con3); // 1 1 Funções Declaração de funções, argumentos e retorno // uma função que ao ser executada imprime uma mensagem function ola() { console.log("Olá! Tudo bem?"); } ola(); // imprime "Olá! Tudo bem?" // uma função que recebe um valor como parâmetro // e imprime uma mensagem com esse valor function ola_v2(nome) { console.log("Olá", nome); } ola_v2("Fulano"); // imprime "Olá Fulano" // uma função que recebe dois valores como parâmetros // e retorna o valor da soma desses dois valores function soma(num1, num2) { return num1 + num2; } resp = soma(12, 21); // resp vale 33 Funções anônimas // a variável soma_v2 recebe como valor uma função // que recebe dois valores como parâmetros // e que retorna como valor a soma desses dois parâmetros soma_v2 = function(num1, num2) { return num1 + num2; } resp = soma_v2(1, 10); // resp vale 11 Arrow functions // exemplo similar ao anterior // a declaração é feita com a sintaxe conhecida como *arrow function*, => soma_v3 = (num1, num2) => { return num1 + num2; } resp = soma_v3(2, 20); // resp vale 22 // exemplo similar ao anterior // arrow functions sem as chaves {} retornam o valor de sua expressão soma_v4 = (num1, num2) => num1 + num2; resp = soma_v4(5, 10); // resp vale 15 // arrow function com apenas um argumento dispensam parênteses dobro = num => 2 * num; resp = dobro(8); // resp vale 16 Observação: Arrow functions não possuem this e não devem ser usadas como métodos. ...

Comentários JavaScript possui comentários de linha e comentários de bloco. Os comentários de linha são definidos após duas barras //. Dessa forma, todo o conteúdo após as duas barras // é considerado comentário e não será interpretado como código. // Este é um comentário de linha numero = 0; // Atribuir o valor 0 a variável numero Já os comentários de bloco são definidos entre as sequências /* e */. Assim, todo o conteúdo entre as sequências /* e */ é um bloco de comentário e não será interpretado como código. ...

Breve história JavaScript foi criada em 1995 por Brendan Eich enquanto ele trabalhava para a Netscape implementando a linguagem no navegador da empresa, o Netscape Navigator. Inicialmente, o nome da linguagem passou por algumas mudanças, como Mocha e LiveScript até chegar no seu nome atual, o JavaScript. Atualmente, a linguagem é chamada, em sua padronização, de ECMAScript, e não JavaScript. Essa diferença se dá pelo fato de que JavaScript é uma marca registrada pela então Sun, posteriormente adquirida pela Oracle. ...