Tutoriais JavaScript para iniciantes
Bem vindo ao Tutoriais Javascript . Quando decidi estudar a linguagem de programação JavaScript, eu tive a necessidade de escrever o que eu aprendia para fixar o conteúdo e melhorar o meu processo de aprendizagem, então eu optei por escrever tópicos e breves anotações aqui no Medium pois seria mais fácil para pesquisas futuras. Conforme meu estudo avançava as anotações começaram a ficar gigantes, então optei por categorizar e organizar por diversos tutoriais. Os tutoriais seguem uma sequência de aprendizagem e se relacionam entre si.
Espero que minhas anotações e tutoriais possam ajudar você.
1. Começando do início
O que é JavaScript?
Instalando um editor de código JavaScript
Conheça o Console dos navegadores de internet
“Hello World!” JavaScript
2. Fundamentos
Sintaxe
Variáveis
Tipos de Dados (Data Types)
Número (Number)
Booleano (Boolean)
3. Operadores
Operadores Unários (Unary operators)
Operadores de Atribuição (Assignment operators)
Operadores de Comparação (Comparison operators)
Operadores Lógicos (Logical operators)
4. Fluxos de Programa
if…else
Operadores Ternários
Switch
While
do…while
Loop for
break
continue
5. Strings
Strings JavaScript
O Tipo Strings
trim(), trimStart() e trimEnd()
padStart() e padEnd()
concat()
split()
indexOf()
lastIndexOf()
substring()
slice()
includes()
6. Arrays
Array JavaScript
Estrutura de Pilha (Stack)
Estrutura de Fila (Queue)
splice()
slice()
indexOf e lastIndexOf
every()
some()
sort()
filter()
map()
forEach()
reduce()
Array Multidimensional
7. Funções
Funções
Funções são cidadãos de primeira classe
Funções anônimas
Expressões de Função Invocada Imediatamente (IIFE)
Funções Callback
8. Objetos e Protótipos
Objetos
Propriedades de Objetos JavaScript
Prototype — Protótipo JavaScript
Patterns — Padrões para criar objetos
Prototypal inheritance — Herança prototípica
this
for…in loop
Enumerable Properties — Propriedades enumerávei
Own Properties — Propriedades Próprias
Diferenças entre Valores Primitivos e Valores de Referência
Tipos de invólucros primitivos — Primitive wrapper types
9. Funções Avançadas
Passagem por valor (Passing by value)
Retornando múltiplos valores (Returning multiple values)
O tipo Função (Function Type)
O método call()
O método apply()
O método bind()
Função recursiva (Recursive function)
Closures
10. Tratamento de erros (Error handling)
try…catch
11. Expressões Regulares (Regular Expressions)
Expressões Regulares
replace()
match()
search()
Classes de caracteres
Âncoras (Anchors)
Conjuntos e intervalos (Sets and Ranges)
Limites de palavras (Word Boundaries)
Quantificadores (Quantifiers)
12. Solicitações de rede (Network Requests)
API de Busca (Fetch API)
13. Tempo de execução (JavaScript Runtime)
Contextos de Execução (Execution Contexts)
Pilha de chamadas (Call Stack)
Loop de Eventos (Event Loop)
Içamentos JavaScript (Hoisting)
Escopos variáveis ( Variable Scopes)
14. A versão ES6 do JavaScript
Diversos tutoriais sobre a versão ES6
Fontes
- JavaScript Tutorial: https://www.javascripttutorial.net/
👇 Anotações diversas que eu ainda vou organizar👇
<script>
window.alert("Hello World")
</script>
Template String
Alternativa para concatenação e interpolação.
Usar crases ` `
e ${ }
`O resultado da soma é ${total}`
Formatar número para moeda Real — formato de dinheiro
variavel.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
Use toLocaleString()
para transformar um número em formato de preço em Reais (BRL) R$ 1.234.567,89
EXEMPLO:var numero = 1234567.89
numero = numero.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
document.write(`Número formatado em Real: ${numero}`)RESULTADO:
Número formatado em Real: R$ 1.234.567,89
Para transformar em outras moedas:
DOLAR
dolar.toLocaleString('pt-BR', {style: 'currency', currency: 'USD'})
RESULTADO: US$ 1.234.567,89EURO
euro.toLocaleString('pt-BR', {style: 'currency', currency: 'EUR'})
RESULTADO: € 1.234.567,89
DOM — Document Object Model
o DOM é o modelo de objetos para documentos. Praticamente é o conjunto de objetos dentro do seu navegador que vai dar acesso aos componentes internos do seu website.
Árvore DOM
A árvore DOM começa da raiz. Dentro do navegador chamamos essa raiz de window
. Ou seja, tudo está dentro do objeto window
.
Selecionando
Por ID
getElementById//Retorna todo o elemento html (ele mesmo e o que possui dentro)
window.document.getElementById("fruta")
// <div id="fruta">
// <p>Laranja</p>
// </div>
// Retorna apenas o que tem dentro do element (os filhos) em formato de string.
document.getElementById("fruta").innerHTML
// <p>Laranja</p>
Por Classe (class)
O getElementsByClassName(“minhaClase”) sempre vai retornar retornar uma coleção (objeto array), observe que getElements está no plural.
Mesmo se houver apenas um elemento será retornado um array com um índice zero[0].
<div class="carro">Gol</div>
<div class="carro">Camaro</div>document.getElementsByClassName("carro")
// HTMLCollection(2) [div.carro, div.carro]
// 0: div.carro
// 1: div.carro
// length: 2//Se usar o índice do array vai retornar o valor do elemento correspondente (que no caso será um objeto com o conteúdo html)
document.getElementsByClassName("carro")[0]
// <div class="carro">Gol</div>//Para pegar o conteúdo em formato de string
document.getElementsByClassName("carro")[0].innerHTML
// Gol
Por Marca (tag html)
Procura e retorna um HTMLCollection (objeto) com todos os elementos encontrados com essa tag.
getElementsByTagName<div id="fruta"><p>Laranja</p></div>
<div class="carro">Gol</div>
<p>Paragrafo</p>
<div id="new">Nova div</div>// Retorna um HTMLCollection com todos elementos de determinada tag (pose der 1 ou vários)
document.getElementsByTagName("div")
// HTMLCollection(3) [div#fruta, div.carro, div#new, fruta: div#fruta, new: div#new]
// 0: div#fruta
// 1: div.carro
// 2: div#new
// length: 3
// fruta: div#fruta
// new: div#new// Usando o índice retorna um objeto com o html daquele elemento.
document.getElementsByTagName("div")[0]
// <div id="fruta"><p>Laranja</p></div>//Usando innerHTML retorna uma string com o conteúdo interno do elemento.
document.getElementsByTagName("div")[0]
// <p>Laranja</p>
Por Nome (name)
Retorna um objeto com os elementos.
<input type="text" name="endereco">document.getElementsByName("endereco")
// NodeList [input]
// 0: input
// length: 1
Por qualquer atributo html
O querySelector é o método mais indicado para selecionar elementos. Podendo buscar por id, class, tag name, name ou outro atributo html.
Ele retorna apenas o primeiro elemento que encontrar (não retorna um HTMLColletction).
Use um ponto (.) para indicar uma classe (“.class-name”).
Use um hastag (#) para indicar um ID (“#myId”).
Não use nada para representar uma tag html (“h1”).
document.querySelector("div") = Retorna a primeira div que encontrar (em formato de objeto)document.querySelector(".carro")window.document.querySelector("div#myId").style.background = "black"
querySelectorAll
O querySelectorAll vai retornar um objeto NodeList apresentando todos os elementos do documento que correspondem ao valor especificado.
<div id=”fut-brasileiro”>
<div class=”times”>Grêmio</div>
<div class=”times”>Flamengo</div>
<div class=”times”>São Paulo</div>
</div>
<div id=”fut-europeu”>
<div class=”times”>Real Madri</div>
<div class=”times”>Barcelona</div>
<div class=”times”>Juventus</div>
</div>// Retorna um objeto NodeList com todos os 6 elementos com classe .time
document.querySelectorAll(".times")
// NodeList(6) [div.times, div.times, div.times, div.times, div.times, div.times]// Selecionar apenas os times de futebol europeu (retorna NodeList)
document.getElementById("fut-europeu").querySelectorAll(".times")
// NodeList(3) [div.times, div.times, div.times]// Retornar apenas o primeiro time de futebol europeu (string):
document.getElementById("fut-europeu").querySelectorAll(".times")[0].innerHTML
// Real Madri
Alterar o conteúdo de um elemento
Usamos o innerHTML para exibir ou para alterar um conteúdo html.
<h1 id=”titulo”>Times de futebol</h1>// Captura na variável o conteúdo do elemento
var titulo = document.getElementById("titulo").innerHTML
// Times de futebol// Altera o conteúdo do título
document.getElementById("titulo").innerHTML = "Times do Mundo"
// <h1 id=”titulo”>Times do Mundo</h1>
Alterar o estilo
var titulo = document.getElementById(“titulo”)titulo.style.color = “blue”
titulo.style.backgroundColor = "yellow"
titulo.style.fontSize = "62px"
Criar um Elemento HTML
Use o createElement para criar um novo elemento.
let imagem = document.createElement(“img”)imagem.src = “arquivo.jpg”
Adicionar um elemento
Usamos o appendChild para adicionar um elemento html no documento.
Precisamos definir qual será o elemento pai que irá receber o novo elemento filho.
let imagem = document.createElement(“img”)imagem.src = “arquivo.jpg”let conteudo = document.querySelector(“body”)conteudo.appendChild(imagem)
Remover um elemento
<div id="texto">
<p>Uma imagem vale mais que 1000 palavras</p>
</div><script>
let texto = document.querySelector(“#texto”)
let paragrafo = document.querySelector(“#texto>p”)
texto.removeChild(paragrafo)
<script>
addEventListener
var square = window.document.querySelector("#area")
square.addEventListener('click', clicou)square.addEventListener('wheel', rolou)square.addEventListener('mousemove', movendo)function clicou(){square.innerHTML = "Clicou"}function rolou(){square.innerHTML = "Rolou"}function movendo(){square.innerHTML = "Movendo..."}
Eventos: https://developer.mozilla.org/en-US/docs/Web/Events
window.addEventListener(‘online’, conectado)function conectado (){
console.log(“Conectado”)
}
window.addEventListener(‘offline’, desconectado)function desconectado (){
console.log(“Desconectado”)
}
Estruturas de Repetições (laços)
Enquanto a condição for verdadeira o laço (loop) irá se repetir.
Estrutura de Repetição com variável de controle
for in
A estrutura “for in” é uma nova forma, mais simplificada do for tradicional pois ele possui apenas 2 partes e é otimizado para variáveis compostas e objetos.
- Início: É o índice (contador ou posição)
- Variável composta: O nome de um vetor (array) ou um objeto.
for (let posição in objeto){
execute algo aqui...
}TRADUÇÃO: Para cada posição dentro do objeto, execute algo.
Procurar um valor dentro de um vetor
indexOf(busque_por)
let vetor = [‘amarelo’, ‘vermelho’, ‘azul’, ‘rosa’, ‘verde’]
console.log(vetor.indexOf(‘azul’))RESULTADO: 2
Caso a buca não encontre o resultado, o indexOf vai retornar “-1”.
Funções
Uma função pode ou não retornar valores para o seu chamador.
Caso seja retornado um valor, usamos a instrução return em um ponto apropriado dentro da função.
Quando a instrução return é encontrada, o processamento do código da função para nesse momento, e retorna o valor (e o controle) para o chamador.
Podemos ter mais de uma instrução return em uma função.
function verificar_par_ou_impar(numero){
if(numero % 2 == 0){
return ‘Par’
}else{
return ‘Impar’
}
}let resultado = verificar_par_ou_impar(3)console.log(resultado)
Outro exemplo simples
function somar(numero1, numero2){
return numero1 + numero2
}let resultado = somar(2,5)console.log(resultado);
Função anônima (dentro de uma variável)
O nome da função passa a ser o nome da variável.
let multiplicar = function (numero1, numero2) {
return numero1 * numero2
}
console.log( multiplicar(2,4) );
Arrow Function
A “Arrow Function” é uma nova forma de se escrever funções no JavaScript, esse recurso foi implementado pela versão ECMAScript 6 (também conhecida como ES6 ou ECMAScript 2015 ou JavaScript 6).
A principal evolução é que a Arrow Function, permite uma sintaxe mais curta para escrever funções.
Agora não é mais necessário usar a palavra reservada “function”, “return” , não precisa usar as chaves {} e se a função tiver apenas um parâmetro não precisa de parenteses ().
// ES5
var x = function(x, y) {
return x * y;
}// ES6
const x = (x, y) => x * y;
Você pode omitir a palavra “return” e as chaves {} se a função for uma única instrução. Por isso, pode ser um bom hábito mantê-las sempre.
const x = (x, y) => { return x * y };
O “this” funciona um pouco diferente dentro de uma arrow function do que uma função normal.
Função auto invocável
Uma função que você cria e ao mesmo tempo já chama ela.
Após o fechamento das chaves “}”, deve-se adicionar um abre e fecha parênteses “()” e envolver toda a função entre parênteses também.
( function autoExecutavel(){
console.log(‘Executei automaticamente.’)
}() )
Função callback
Calbacks são funções que são passadas como parâmetros em outras funções e executadas dentro dela.
function somaCallback (a, b, fnCallback){
return fnCallback(a + b)
}console.log( somaCallback(10, 3, function(total) {
return total * 2
} ) )
Função com valores padrão nos parâmetros
Defina com o sinal de igual o valor padrão do parâmetro.
Caso nenhum valor for passado na invocação da função, os valores padrão serão usados.
Caso for passado algum valor na invocação da função, o valor padrão será ignorado.
function criaPersonagem (nome=”Ricardo”, idade=31){
console.log(`Personagem ${nome} criado.`)
console.log(`Idade do personagem é ${idade}`)
}criaPersonagem()
criaPersonagem("Roberto", 56)
Objetos
let amigo = {
nome: ‘José’,
sexo: ‘M’,
peso: 85.4,
engordar(p=0){
this.peso += p
}
}console.log(amigo)
console.log(amigo.nome)
console.log(amigo.peso)// Em vez de usar ponto (.) é possível usar colchetes []
console.log( amigo.nome )
console.log( amigo['nome'] )amigo.engordar(5)
console.log(amigo.peso)
Para adicionar novas propriedades a um objeto.
amigo.namorada = “Letícia”
console.log(amigo.namorada);
Para deletar uma propriedade use a palavra reservada delete e em seguida a propriedade a ser deletada.
delete amigo.namorada
Objeto Math
O objeto Math fornece propriedades e métodos matemáticos.
Todas as suas propriedades e métodos são estáticos, significando que não criamos uma nova instância de Math para utilizar sua funcionaliade; acessamos essas propriedades e métodos no próprio objeto.
Algumas propriedades do objeto Math
LN10 = Logaritmo natural de 10
LN2 = Logaritmo natural de 2
LOG10E = Logaritmo de base 10 de E
PI = Valor de Pi
SQRT2 = Raiz quadrada de 2
SQRT1_2 = Raiz quadrada de 1/2
Exemplos:
console.log(Math.LN10); // 2.302585092994046console.log(Math.PI); // 3.141592653589793console.log(Math.SQRT2); // 1.4142135623730951
Métodos do objeto Math
Todos os argumentos passados para os métodos (funções) do objeto Math são convertidos para números primeiro, automaticamente.
Portando, não é necessário efetuar conversão via código.
Diversos métodos estão disponíveis no objeto Math, incluindo funções trigonométicas, geração de números aleatórios, exponenciação e outros.
abs(x) = Retorna um valor absoluto de x
sin(x) = Seno de um ângulo x, em radianos
cos(x) = Cosseno de um ângulo x, em radianos
tan(x) = Tangente de um ângulo x, em radianos
ceil(x) = Arredonda x para o próximo inteiro (acima)
floor(x) = Arredonda x para o inteiro abaixo
round(x) = Arredonda x para o inteiro mais próximo
pow(x,y) = Retorna x elevado a y
random() = Gera um número aleatório entre 0 e 1
min(x1, x2, x3, ...) = Compara os números e retorna o menor
max(x1, x2, x3, ...) = Compara os números e retorna o maior
Objeto Date
O objeto Date é um objeto embutido do JavaScript que permite trabalhar com datas e horas.
As datas em JS são baseadas em um valor de tempo que corresponde ao número de milissegundos decorridos desde 01 de janeiro de 1970, 00:00:00 UTC (o que chamamos de “época UNIX”).
Datas anteriores a esse dia são armazenadas na forma de número negativo de milissegundos.
Os objetos Date em JS somente podem ser instanciados chamando-se seu contrutor, ou seja, usando o comando “new”.
Caso o objeto Date seja invocado como uma função (sem o operador New), será retornada uma string contendo a data e hora atuais.
Podemos criar um objeto Date de 4 formas distintas:
- Objeto contendo a data e hora atuais, basta invocar o construtor sem passar nennhum argumento:
let data = new Date()
console.log(data) // Retorna a data e hora atual do sistema
// 2020-04-29T16:20:33.360Z
2. Passando o valor da data em milissegundos deccoridos a partir de 01/01/1970 00:00:00 (número inteiro):
let data = new Date(1234795949941)
console.log(data)// 2009-02-16T14:52:29.941Z
3. Passando uma data, com dia, mês e ano (mês é contando a partir de zero = janeiro e dezembro = 11):
let data = new Date(1982, 5, 16)
console.log(data);// 1982-06-16T03:00:00.000Z
Se o ano for passado com dois dígitos, será mapeado como um ano entre 1900 e 1999.
Opcionalmente podemos também passar horas, minutos, segundos e milissegundos, nessa ordem. Na verdade, o único argumento obrigatório nesse método é o ano; o mês e o dia também são opcionais.
4. Passando a data em uma string de formato específico:
let data = new Date("2015/11/21")
console.log(data)// 2015-11-21T02:00:00.000Z
Invocando o objeto Date como uma função (sem o operador new):
console.log( 'Hoje é: ' + Date() )
// Hoje é: Wed Apr 29 2020 13:38:46 GMT-0300 (-03)console.log( 'Hoje é: ' + Date.now() );
// Hoje é: 1588178411653
Métodos get do Objeto Date
Os métodos get do Objeto Date são utilizados para obtermos partes da data e hora armazenada.
A tabela a seguir mostra os métodos getters mais comuns do objeto Date.
getDate() = Retorna o dia do mês, entre 1 e 31
getDay() = Retorna dia da semana entre 0 e 6 (0=Dom, 6=Sáb)
getFullYear() = Retorna o ano (4 dígitos)
getHours() = Retorna a hora, entre 0 e 23
getMilliseconds() = Retorna o milissegundo (do segundo atual), entre 0 e 999
getMinutes() = Retorna os minutos da hora, entre 0 e 59
getMonth() = Retorna o mês, entre 0 e 11 (0=JAN, 11=DEZ)
getSeconds() = Retorna os segundos do minuto, entre 0 e 59
getTime() = Retorna os milissegundos decorridos desde 01/01/1970
Exemplo:
let data = new Date()console.log(“Data completa: “+data)
// Data completa: Wed Apr 29 2020 18:21:50 GMT-0300 (-03)console.log(“Dia do Mês: “+data.getDate())
// Dia do Mês: 29console.log(“Ano: “+data.getFullYear())
// Ano: 2020console.log(“Mês: “+data.getMonth())
// Mês: 3 (Jan=0, fev=1, mar=2 ... dez=11)console.log(“Dia da Semana: “+data.getDay())
// Dia da Semana: 3 (Domingo=0, Seg=1, Ter=2, ... Sáb=6)console.log(“Hora: “+data.getHours())
// Hora: 18console.log(“Minuto: “+data.getMinutes())
// Minuto: 21console.log(“Segundo: “+data.getSeconds())
// Segundo: 50
Métodos set do Objeto Date
Os métodos set do objeto Date são utilizados para alterar partes da data e hora armazenadas.
A tabela a seguir mostra os métodos setters mais comuns:
setDate() = Configura o dia do mês, entre 1 e 31
setFullYear() = Configura o ano (4 dígitos)
setHours() = Configura a hora, entre 0 e 23
setMilliseconds() = Configura o milissegundo, entre 0 e 999
setMinutes() = Configura os minutos da hora, entre 0 e 59
setMonth() = Configura o mês, entre 0 e 11 (0=JAN, 11=DEZ)
setSeconds() = Configura os segundos do minuto, entre 0 e 59
setTime() = Configura os milissegundos decorridos desde 01/01/1970
Exemplo
let data = new Date()
console.log("Data completa: "+data)
//Data completa: Wed Apr 29 2020 18:48:07 GMT-0300 (-03)console.log("Mês: " + data.getMonth() )
//Mês: 3 (Observe que Jan=0 e Dez=11)data.setMonth(1)
console.log("Mês: " + data.getMonth() )
//Mês: 1
JSON
Acrônimo de JavaScript Object Notation.
Formato aberto e popular para representação e troca de dados, assim como XML e YAML (porém mais leve e simples).
É fácil para humanos ler e editar esse formato, e simples para computadores processarem e gerarem dados JSON.
É independente de linguagem de programação.
Criado por Douglas Crockford, o JSON foi formalizado na RFC 4627, em 2006.
Baseado em um subconjunto do JavaScript, a gramática do JSON está documentada em seu site oficial: www.json.org
Documento JSON
Um documento (objeto) JSON é um conjunto não-ordenado de daod armazenados em um par “nome”:valor (campo), que inicia e termina com chaves {}.
Todas as nomes-chave são englobados em aspas dupplas, e são separados de seus valores por dois-pontos (:).
Os pares (campos) são separados um do outro por vírgulas.
{
"nome": "Ricardo Reis",
"idade": 26
}
JSON e principais características
Os documentos JSON possuem suporte a diversos tipos de valores, como strings, números de ponto flutuante, números inteiros, valores booleanos, nulo, arrays e objetos.
O JSON suporta qualquer nível de hierarquia que seja necessária para o modelo de dados da aplicação onde é usado.
O tipo de mídia (MINE) JSON é application/json, caso precise ser declarado.
O JSON não suporta comentários.
Caracteres de Escape
\/ = Barra
\\ = Barra invertida
\" = Aspas duplas
\uXXXX = Unicode UTF-16 XXXX
\b - Backspace
\f = Form feed
\t = Tabulação
\n = Quebra de linha
\r = Retorno
Serialização
Processo de captura de uma estrutura de dados (objeto) para que ela possa ser armazenada, transmitida, e posteriormente reconstituída.
Na prática, cria um texto JSON válido com dados contidos na estrutura.
Método especiais podem realizar a serialização de uma estrutura que contenha dados, como o método “JSON.stringify”.
Desserialização
Processo inverso ao da serialização, permite converter JSON válido em valores e objetos que possam ser usados em um programa, ou seja, reconstitui a estrutura de dados.
Também chamado de parsing.
Métodos especiais realizam a desserialização de dados JSON, como o método JSON.parse.
Node.JS
obs: Assistir o curso do Danilo Aparecido — Torne-se um programador
Fontes: