Referência rápida de Javascript


1- Sobre o JavaScript

Javascript (também conhecido por JS) é uma linguagem de programação que roda nos Browsers (por isso também é chamada de linguagem de script para páginas Web) e também é utilizada fora dos browsers, por exemplo, para construções de APIs utilizando NodeJs.

O Javascript é uma linguagem de programão com as seguintes características:

Mais sobre esses conceitos aqui: Tipos de linguagem de programação


2- Referências sobre a linguagem

Uma ótima referência para buscar mais inforamções sobre Javascript é o MDN: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

lá você encontra muito conteúdo sobre Javascript, incluindo por exemplo Arrays: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Guias oficiais da linguagem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript


3- Instalação

A boa notícia é que você não precisa instalar nada para rodar Javascript, ele já roda no seu browser, seja ele Chrome, Firefox, Edge, Safari ou similares.


4- IDEs

Uma ótima IDE para escrever HTML, CSS e Javascrit é o VSCode.

Para instalar o VSCode, faça o download aqui: https://code.visualstudio.com/download


5- Hello World

Programa Hello World

Para fazer criar um javascript básico, que somente imprime “Hello world” na tela, siga os seguintes passos: Crie uma pasta “helloworld” e abra ela no VSCode Crie um arquivo index.html e adicione o conteúdo abaixo:

<html>
<body>
    <script>
        (function(){
            "use strict";

            alert('Hello world!');
        })();
    </script>
</body>
</html>

Volte na pasta e clique duas vezes no arquivo index.html para abri-lo no browser. Será exibida uma caixa de diálogo com a mensagem.


6- Básico

Comentários de código

São aceitas duas formas de Comentários, assim:

// comentário de uma linha

ou então:

/* esse é um comentário
de múltiplas linhas */

Interação com o usuário

Os browsers possuem um console que facilita bastante o debug, no Chrome por exemplo, você pode pressionar F12 No console você pode executar código Javascript diretamente, por exemplo pode digitar:

alert('Hello World!')

e o código Javascript será executado.

Para imprimir algo no console é utilizado console.log, por exemplo:

console.log('mensagem');

Variáveis

Forma antiga de declaração

var valor = 15;
var valor2 = 2.51;
var nome = 'Coutinho';

NOTA: Prefira utilizar as formas abaixo, “const” ou “let” para declaração. Todas variáveis declaradas utilizando “var” e que estejam fora de uma função ou bloco tem escopo global.

Constante

const valor = 15;
const valor2 = 2.51;
const nome = 'Coutinho';

Variável escopo local

let valor = 15;
let valor2 = 2.51;
let nome = 'Coutinho';

Tipos

Exemplos de uso:

const valor = 15;														// Number
const valor2 = 2.51;													// Number
const nome = "Coutinho";	   	                 			// String
const usuario = {nome:"Eduardo", sobreNome:"Coutinho"};	// Object
const aceita = true;													// Boolean

Verificar o tipo de um valor

typeof(15); //number
typeof(1.9); //number
typeof('abacaxi'); //string
typeof(true); //boolean
typeof([1, 2, 3]); //object
typeof({nome: 'Eduardo', sobreNome: 'Coutinho'}); //object
typeof(function add(a, b) { return a+b; }); //function

Conversão para número

Number(9.2) = 9.2
Number(' 2 ') = 2
Number('2abc') = NaN

Tentar converter um valor não numérico para número, retorna NaN (Not a Number) Por exemplos:

Number('a') // NaN

NaN não é comparável

NaN === NaN //false

Então para verificar se algo é NaN utilize a função “isNaN”:

isNaN("a") //true
isNaN(18) //false

Palavras reservadas

//TODO: Complementar….

Funções

Para criar uma função utilize “function”:

Exemplos de funções:

1- Sem retorno e sem entrada de valor:

function hello() {
	console.log('Ola!');
}
hello();

2- Sem retorno e com entrada de valor:

function hello(name) {
	console.log('Ola ' + name);
}
hello('Coutinho');

3- Com retorno de valor:

function sum(x, y) {
	return x + y;
}
console.log(sum(2, 3));

Parâmetros Rest

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters

Permite receber um número indefinido de parâmetros em uma função.

function somar(...numeros) {
   let total = 0;
   for (const num of numeros)
      total += num;
   return total;
}
somar(2, 5, 10, 100);

É possível combinar com parâmetros padrões, por exemplo:

function atualizarTotal(texto, ...numeros) {
	let total = 0;
	for (const num of numeros)
      total += num;
   console.log(texto + total);
}
atualizarTotal('Total: ', 2, 5, 10, 100);

Arrow functions

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Como no tipo padrão de funções parâmetros e retorno são opcionais

1) Sintaxe padrão:

const add = (a, b) => {
	const result = a + b;
	return result;
};
console.log(add(2, 3));

isso é o equivalente a escrever:

const add2 = function(a, b) {
	return a + b;
}
console.log(add2(2, 3));

2) Sintaxe simplificada para 1 parâmetro: Se exatamente 1 parâmetro for recebido o parênteses ao redor do parâmetro pode ser omitido

const log = message => {
	console.log(message);
};
log();

3) Sintaxe para nenhum parâmetro: Se a função não receber nenhum parâmetro o parênteses não pode ser omitido

const greet = () => {
	console.log('Hi there!');
};
greet();

4) Se a função possuir somente uma expressão no body Se a função possuir somente uma expressão no body é posível omitir as chaves “{}” no corpo da função e o “return”

const add = (a, b) => a + b;
console.log(add(2, 3));

5) Retornar objeto Para retornar um objeto é necessário parênteses ao redor da declaração do objeto se não as chaves serão interpretadas como o corpo da função

const loadPerson = pName => ({name: pName });

bind, call e apply

//TODO: Complementar…. .bind() .call() .apply()

Javascript Built-in Functions

//TODO: Complementar….

Strings

Concatenação

console.log('Eduardo' + ' ' + 'Coutinho');

Formatadores

Template strings: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

let valor = 2;
console.log(`O valor é ${valor}`);

Funções de string

//TODO: Complementar…. string.split()

Coleções

Array

//TODO: Complementar….

const valores = [ 7, 2, 3 ];
const frutas = [ 'abacaxi', 'banana', 'uva' ];

Funções de arrays //TODO: Complementar…. .push(1, 2, 3) .pop() .unshift() .shift() .splice(1, 0, ‘new item’); //adiciona um item no indice 1 e remove 0 itens .splice(1, 2); //iniciando na posição 1, remove 2 itens .splice(1) //remove todos os itens a partir indice 1 const removeditens = .splice(1, 2) .splice(-1, 1); //remove o último item do array .slice(0, 2) //seleciona indices de 0 até 2, sem incluir o 2 .slice(-3, -1) .indexof() – se não tem -1 .find() .findindex() .includes() //mesmo indexof !== -1 .foreach((price) => { price * (1+tax); }); .map() .sort() .reverse() .filter() .reduce() array.join()

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

.push() adiciona um item no final do array .pop() retorna e remove o último item do array .shift() remove o primeiro item do array .unshift() adiciona um item no inicio do array .indexOf() obtém o índice do item no array, ou -1 se não existir .slice(startIndex, endIndex) retorna uma cópia do array com os itens indicados, iniciando no primeiro parâmetro e indo até o índice do segundo, mas sem incluí-lo .splice(startIndex, deleteCount) altera um array, removendo a faixa indicada .forEach itera sobre os itens do array, ex: [1, 2, 3].forEach(function(item) { }} .map() method creates a new array with the results of calling a provided function on every element in the calling array.

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1); // expected output: Array [2, 8, 18, 32]

Spread operator //TODO: Complementar….

Utilizado para:

1- criar um novo array, com os valores do array original, ao invés de copiar a referência do array

const array2 = [...array1];

2- para converter um array em valores isolados:

Math.min(2, -1, 3);
const prices = [2, -1, 3];
Math.min(...prices);

Array Destructuring https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

//TODO: Complementar….

const valores = [10, 20, 30, 40];
const [a, b] = valores;
console.log(a); //10
console.log(b); //20

const nameArray = [ 'Eduardo', 'Coutinho', 'mail@gmail.com', '11 96666-6666'];
const [ firstName, lastName, ...outrasInformacoes] = nameArray;
console.log(firstName) // Eduardo
console.log(outrasInformacoes); //["mail@gmail.com", "11 96666-6666"]

Set

Permite o armazenamento de valores únicos. A interação sobre os itens é realizado na ordem de inserção.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set

const valores = new Set();
valores.add(5); // valores {5}
valores.add(1); // valores {5, 1}
valores.add(1); // valores {5, 1} não é alterado porque o valor 1 já estava no conjunto

Funções de set

// declaração
const valores = new Set();

//add() -- adiciona um item
valores.add(5); // valores {1}
valores.add(1); // valores {5, 1}

//size -- retorna a quantidade de itens armazenados
valores.size;	//2

//has() -- verifica se um item estão no conjunto
valores.has(1); // true
valores.has(3); // false, 3 não está no conjunto

//delete() -- remove um item do conjunto
valores.delete(1) // valores {5}

//interar sobre os itens
const valores = new Set();
valores.add(5);
valores.add(1);
valores.add('laranja');
for (let item of valores) { console.log(item); }
// 5
// 1
// laranja

//converter array em Set
let frutas = ['abacaxi', 'banana', 'uva', 'uva'];
const valores = new Set(frutas);
console.log(valores); // Set(3) {"abacaxi", "banana", "uva"}

Map

Objeto simples de chave/valor //TODO: Complementar….

const personData = new Map();

WeakSet

//TODO: Complementar….

WeakMap

//TODO: Complementar….

Operadores

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_operators

Operadores aritméticos

//TODO: Complementar….

// adição
2+3    	//5

// subtração
3-2		//1

// multiplicação
3*2		//6

// divisão
15/2		//7.5

//Exponenciação
2**3   	//8

Operadores de atribuição

//TODO: Complementar….

const valor = 1;	//1
valor++;				//2

Operadores de comparação //TODO: Complementar….

”==” retorna True se os dois valores comparados são iguais, desconsiderando o tipo

2 == "2" 	// true
2 === 2 		// true

”===” retorna True se os dois valores comparados são iguais e são do mesmo tipo

2 === 2		//true
2 === "2" 	// false

Falsy values Valores que retornam false ao executar comparação

- 0
- BigInt 0n
- null
- undefined
- boolean false
- NaN
- ""

0 ? console.log("true") : console.log("false") 				// false
0n ? console.log("true") : console.log("false") 			// false
null ? console.log("true") : console.log("false") 			// false
undefined ? console.log("true") : console.log("false") 	// false
false ? console.log("true") : console.log("false") 		// false
NaN ? console.log("true") : console.log("false") 			// false
"" ? console.log("true") : console.log("false") 			// false

Operadores lógicos

Operador AND (retorna true se ambos são true)

4 < 5 && 5 < 6		# true
true && true		# true
true && false		# false
false && true		# false
false && false		# false
Operador OR (retorna true se uma das condições f   true)
4 < 5 || 5 < 6		# true
true || true		# true
true || false		# true
false || true		# true
false || false		# false

Operador XOR //TODO: Complementar….

Operador NOT //TODO: Complementar….

Estruturas condicionais

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if…else_statement

IF //TODO: Complementar….

SWITCH //TODO: Complementar….

Laços e iterações

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration

WHILE //TODO: Complementar….

FOR OF //TODO: Complementar….

for (const item of items) {
}

FOR IN //TODO: Complementar….

for (const prop in obj) {
}

Declaração e tratamento de exceções

//TODO: Complementar….

throw //TODO: Complementar….

try…catch //TODO: Complementar….

Objetos

Protótipos

//TODO: Complementar….

Classes

//TODO: Complementar….

class Person { name = 'Eduardo'; }
const p = new Person();
p instaceof Person

Object get set É possível por exemplo criar um objeto com get e sem o set

Programação assíncrona

//TODO: Complementar….

Timmer e Interval

//TODO: Complementar….


Manipulando o DOM

Incluindo script no HTML

//TODO: Complementar…. Inclusão de script utilizando: async, defer…

Seletores

//TODO: Complementar…. https://developer.mozilla.org/pt-BR/docs/Web/API/Document

document.getElementById(id) document.getElementsByName(name) document.getElementsByClassName(name) document.getElementsByTagName(name) document.querySelector(selector) document.querySelectorAll(selector)

.childNodes() .children() .closest() .firstElementChild()

.querySelectorAll() retorna uma lista “não viva” de nós .getelementby… retorna uma lista “viva” de nós

const btn = document.querSelector(‘button’); console.log(btn); console.dir(btn); btn instanceof HTMLButtonElement; btn instanceof HTMLElement;

Append

//TODO: Complementar….

const ul = document.queryselector('ul');
const li = document.createElement('li');
li.innerText = 'item 4';
ul.appendchild(li);

document.insertAdjacenteElement()
list.lastElementChild.after(newli); -- before e after não são suportados pelo safari (ver MDN)

newli.cloneNode(li2)
.addnode()
x.addchildnode()  -- suporte IE

Eventos

//TODO: Complementar….

document.addeventlistener

Data Attributes

https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes

//TODO: Complementar…. <input data-id=”” <input data-extra-info=”” txt = document.getelementbyid() txt.dataset().extraInfo

Scroll

//TODO: Complementar….

scroll scrollby scrollintoview

Template

//TODO: Complementar….

<template>

Bibliotecas

Manipular datas utilizando a lib momentjs

A biblioteca momentjs fornece suporte a vários métodos bacana para manipular e formatar datas, para mais detalhes consulte: https://momentjs.com/

Para adicionar no seu projeto, você pode utilizar um CDN como o cloudflare: https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js

Alguns exemplos de uso:

moment().format('YYYY-MM-DD HH:mm:ss');
moment().format('YYYY-MM-DD HH:mm:ss.ms');

moment('2016-02-17', 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss');

moment(new Date()).format('YYYY-MM-DD HH:mm:ss');

moment().add(60, 'seconds');
moment().subtract(5, 'hours');

moment('2016-02-16', 'YYYY-MM-DD').isBefore(moment('2016-02-17', 'YYYY-MM-DD'))

moment().subtract(5, 'hours').isBefore(moment())

var minutes = moment().diff(moment(d), 'minutes');
moment().diff(moment().add(-1, 'day'), 'day')	= 1
moment().add(-1, 'day').diff(moment(), 'day')	= -1

moment().toDate(); //converte para o objeto Date padrão

moment('2016-01-66', 'YYYY-MM-DD').isValid()

var today = moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD');
var yesterday = today.add(-1, 'day');

moment().day(); //dia da semana 0=domingo, 1=segunda

moment().startOf('day'); //dia sem hora

Resposta para dúvidas comuns

Como gerar um GUID no Javascript

Infelizmente não há um método para gerar GUID nativo no Javascript, então uma opção é utilizar a seguinte implementação:

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

console.log(uuidv4());

Essa implementação foi sugerida nessa resposta do StackOverflow: https://stackoverflow.com/a/2117523


Bizarrices do Javascript

//TODO: Complementar….

Como os valores são armazenados em float, alguns resultados podem não ser esperados, por exemplo:

0.1 + 0.2 == 0.3  //false


Comentários