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
MDN (Mozilla Developer Network)
Uma ótima referência para buscar mais inforamções sobre Javascript é o MDN:
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.
Agora, você pode instalar uma IDE para facilitar o desenvolvimento. Abaixo algumas opções:
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.
Para instalar o VSCode, faça o download aqui: https://code.visualstudio.com/download
Para dicas e mais informações sobre como utilizar o VSCode, consulte: Referência VSCode
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)
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.
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 */
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.
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
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';
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
//TODO: Complementar
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));
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);
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 });
//TODO: Complementar
.bind() .call() .apply()
//TODO: Complementar
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()
//TODO: Complementar
const valores = [ 7, 2, 3 ];
const frutas = [ 'abacaxi', 'banana', 'uva' ];
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]
//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);
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"]
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
// 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"}
Objeto simples de chave/valor
//TODO: Complementar
const personData = new Map();
//TODO: Complementar
//TODO: Complementar
Referência: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_operators
//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
//TODO: Complementar
const valor = 1; //1
valor++; //2
//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
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
//TODO: Complementar
//TODO: Complementar
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration
//TODO: Complementar
//TODO: Complementar
for (const item of items) {
}
//TODO: Complementar
for (const prop in obj) {
}
//TODO: Complementar
throw
//TODO: Complementar
try…catch
//TODO: Complementar
//TODO: Complementar
//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
//TODO: Complementar
//TODO: Complementar
//TODO: Complementar
Inclusão de script utilizando: async, defer…
//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;
//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
//TODO: Complementar
document.addeventlistener
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
//TODO: Complementar
scroll
scrollby
scrollintoview
//TODO: Complementar
<template>
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
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
//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