Referência rápida de Javascript


Índice

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

Um detalhe relevante: O Javascript aparece na pesquisa do Stack Overflow de 2021 como a linguagem de programação mais utilizada: https://insights.stackoverflow.com/survey/2021#technology-most-popular-technologies


2- Referências sobre a linguagem

MDN (Mozilla Developer Network)

Uma ótima referência para buscar mais inforamções sobre Javascript é o MDN:


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

Agora, você pode instalar uma IDE para facilitar o desenvolvimento. Abaixo algumas opções:

VSCode (recomendo esse)

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

O VSCode é um editor FREE, rápido, leve e com uma infinidade de extensões para diferentes linguagens de programação, o que faz com que ele seja uma ótima opção para diferentes usos, vale destacar também que ele ganhou com folga a primeira posição da pesquisa anual do Stack Overflow de 2021 (link) como a IDE mais utilizada por programadores.

Editores HTML

Tem uma lista bem grande de editores de texto e HTML que também podem ser utilizados, por exemplo:

Também é possível consultar na pesquisa anual do Stack Overflow a lista das IDEs mais utilizadas para programação: (Stack Overflow Survey 2021)


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 */

Debug console

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.

Você pode testar todas as instruções Javascript diretamente assim, se não quiser criar um arquivo para isso.

console.log

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

console.log('mensagem');

Alguns métodos do console:

console.clear(); // limpa o console

console.log('mensagem'); //Imprime uma mensagem
console.debug('mensagem'); //Imprime uma mensagem marcada como debug
console.error('mensagem'); //Imprime uma mensagem marcada como erro

console.time();
for (let i=0; i<1000000; i++) {
}
console.timeEnd(); //1.680908203125 ms -- Tempo gasto do console.time() até esse ponto

Referência: https://developer.mozilla.org/en-US/docs/Web/API/console

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) 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

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

.push()

Adiciona um item no final do array

let valores = [ 10, 20, 30 ]

valores.push(40)		
console.log(valores)	// [10, 20, 30, 40]

valores.push(50, 60, 70)
console.log(valores)	// [10, 20, 30, 40, 50, 60, 70]

.pop()

Retorna e remove o último item do array

let valores = [ 10, 20, 30 ]

let val = valores.pop()
console.log(valores) //10, 20

console.log(val) //30

.shift()

Remove o primeiro item do array

let valores = [ 10, 20, 30 ]
let val = valores.shift()

console.log(valores) //20, 30

console.log(val) //10

.unshift()

Adiciona um ou mais itens no início do array

let valores = [ 10, 20, 30 ]

valores.unshift(5)
console.log(valores)	// [5, 10, 20, 30]

valores.unshift(2, 3)
console.log(valores)	// [2, 3, 5, 10, 20, 30]

.slice()

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

Sintaxe:

slice(start, end)

- start (Optional) = Zero-based index at which to start extraction.
- end (Optional) = Zero-based index before which to end extraction. slice extracts up to but not including end. For example, slice(1,4) extracts the second element through the fourth element (elements indexed 1, 2, and 3).

Exemplo:

let frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
let ret = frutas.slice(1, 4) //Seleciona os índices: 1, 2 e 3 (4 não incluído)
console.log(ret); //['manga', 'abacaxi', 'uva']

.splice()

Altera o conteúdo de um array removendo ou substituindo elementos existentes e/ou adicionando novos itens

Sintaxe:

splice(start, deleteCount, item1, item2, itemN)

- start = The index at which to start changing the array.
- deleteCount (Optional) = An integer indicating the number of elements in the array to remove from start.
- item1, item2, ... (Optional) = The elements to add to the array, beginning from start.

Exemplos:

let frutas = []
let ret = '';

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(1, 0, 'figo') 	//adiciona um item no índice 1 e remove 0 itens
console.log('frutas=', frutas); //['banana', 'figo', 'manga', 'abacaxi', 'uva', 'laranja']
console.log('ret=', ret); //[]

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(1, 2) //iniciando na posição 1, remove 2 itens
console.log('frutas=', frutas); //['banana', 'uva', 'laranja']
console.log('ret=', ret); //['manga', 'abacaxi']

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(1) 	//remove todos os itens a partir índice 1
console.log('frutas=', frutas); //['banana']
console.log('ret=', ret); //['manga', 'abacaxi', 'uva', 'laranja']

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(-1, 1)	//remove o último item do array
console.log('frutas=', frutas); //['banana', 'manga', 'abacaxi', 'uva']
console.log('ret=', ret); //['laranja']

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(0, 2) 	//seleciona índices de 0 até 2, sem incluir o 2
console.log('frutas=', frutas); //['banana', 'manga', 'abacaxi', 'uva', 'laranja']
console.log('ret=', ret); //['banana', 'manga']

frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
ret = frutas.splice(-3, -1) //['banana', 'manga', 'abacaxi', 'uva', 'laranja']
console.log('frutas=', frutas); //['banana', 'manga', 'abacaxi', 'uva', 'laranja']
console.log('ret=', ret); //['abacaxi', 'uva']

.indexOf()

Obtém o índice de um item no array, ou se não encontrar o item retorna -1

let valores = [ 10, 20, 30 ]

console.log(valores.indexOf(10)) //0
console.log(valores.indexOf(20)) //1
console.log(valores.indexOf(30)) //2
console.log(valores.indexOf(70)) //-1

.includes()

Verifica se um item está presente no array. É o mesmo que array.indexOf() !== -1

let valores = [ 5, 12, 8, 130, 44 ]
let ret = valores.includes(8)
console.log(ret) //true

.find()

Retorna o valor do primeiro item que atende a condição definida

let valores = [ 5, 12, 8, 130, 44 ]
let ret = valores.find(element => element > 10)
console.log(ret) //12

.findIndex()

Retorna o índice do primeiro item que atende a condição definida

let valores = [ 5, 12, 8, 130, 44 ]
let ret = valores.findIndex(element => element > 10)
console.log(ret) //1

.filter()

Retorna uma cópia do array, com todos os itens que atendem a condição definida

let valores = [ 5, 12, 8, 130, 44 ]
let ret = valores.filter(element => element > 10)
console.log(ret) //12, 130, 44

.forEach()

Executa uma função para cada item de um array

const valores = [ 5, 12, 8, 130, 44 ]
valores.forEach((element) => { console.log(element); })

.sort()

Ordena os itens de um array. Para realizar a ordenação para elemento do array é convertido para String, isso gera alguns diferenças na ordenação de uma sequencia de números.

const frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
frutas.sort()
console.log(frutas) //['abacaxi', 'banana', 'laranja', 'manga', 'uva']

const numeros = [1, 30, 4, 21, 100000];
numeros.sort()
console.log(numeros) //[1, 100000, 21, 30, 4]

.reverse()

Coloca os itens do array na ordem inversa, o primeiro item vira o último

const frutas = ['banana', 'manga', 'abacaxi', 'uva', 'laranja']
frutas.reverse()
console.log(frutas) //['laranja', 'uva', 'abacaxi', 'manga', 'banana']

const numeros = [1, 30, 4, 21, 100000];
numeros.reverse()
console.log(numeros) //[100000, 21, 4, 30, 1]

DICA: .reverse() pode ser utilizado para escrever uma palavra ao contrário, para isso basta:

1- Usar split() para transformar a palavra em array com cada letra em uma posição:

'calendario'.split('') //['c', 'a', 'l', 'e', 'n', 'd', 'a', 'r', 'i', 'o']

2- Usar o método reverse() para inverter o array

'calendario'.split('').reverse() //['o', 'i', 'r', 'a', 'd', 'n', 'e', 'l', 'a', 'c']

3- E então juntar as letras novamente em uma string:

'calendario'.split('').reverse().join('') //oiradnelac

//TODO: Complementar

.reduce()
array.join()

.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

Referência: 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.

Referência: 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

Referência: 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 Stack Overflow: 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