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?

O que é JavaScript?

Instalando um editor de código JavaScript

Editores de Código para JavaScript

Conheça o Console dos navegadores de internet

Console — Ferramentas de Desenvolvimento Web

“Hello World!” JavaScript

“Hello World” em JavaScript

2. Fundamentos

Sintaxe

Sintaxe no JavaScript

Variáveis

Variáveis JavaScript

Tipos de Dados (Data Types)

Tipos de dados JavaScript

Número (Number)

Number — Número JavaScript

Booleano (Boolean)

Boolean — Booleano JavaScript

3. Operadores

Operadores Unários (Unary operators)

Operadores Unários (Unary operators)

Operadores de Atribuição (Assignment operators)

Operadores de Atribuição (Assignment Operators)

Operadores de Comparação (Comparison operators)

Operadores de Comparação (Comparison Operators)

Operadores Lógicos (Logical operators)

Operadores Lógicos (Logical Operators)

4. Fluxos de Programa

if…else

Instrução if…else no JavaScript

Operadores Ternários

Operador Ternário do JavaScript

Switch

Switch case do JavaScript

While

Loop While JavaScript

do…while

Loop do-while no JavaScript

Loop for

Loop For do JavaScript

break

Break

continue

Continue do JavaScript

5. Strings

Strings JavaScript

Strings

O Tipo Strings

O Tipo String no JavaScript

trim(), trimStart() e trimEnd()

trim(), trimStart() e trimEnd()

padStart() e padEnd()

padStart e PadEnd - Preencher uma string com outra string

concat()

concat()

split()

split()

indexOf()

indexOf()

lastIndexOf()

lastIndexOf()

substring()

substring()

slice()

slice()

includes()

includes()

6. Arrays

Array JavaScript

Array JavaScript

Estrutura de Pilha (Stack)

A estrutura de pilha (stack) em Arrays JavaScript

Estrutura de Fila (Queue)

A estrutura de fila (queue) em Array JavaScript

splice()

O método splice() do Array JavaScript

slice()

O método slice() do Array JavaScript

indexOf e lastIndexOf

Os métodos indexOf() e lastIndexOf() do Array JavaScript

every()

O método every() do Array JavaScript

some()

Método some() do Array JavaScript

sort()

O método sort() do Array JavaScript

filter()

O método filter() do Array JavaScript

map()

O método map() do Array JavaScript

forEach()

O método forEach() do Array JavaScript

reduce()

Os métodos reduce() e reduceRight()

Array Multidimensional

Array Multidimensional JavaScript

7. Funções

Funções

Funções JavaScript

Funções são cidadãos de primeira classe

Funções JavaScript são cidadãos de primeira classe

Funções anônimas

Funções anônimas JavaScript

Expressões de Função Invocada Imediatamente (IIFE)

Expressão de Função Imediatamente Invocada

Funções Callback

Funções Callbaks (retorno de chamada)

8. Objetos e Protótipos

Objetos

Objetos JavaScript

Propriedades de Objetos JavaScript

Propriedades de Objetos JavaScript

Prototype — Protótipo JavaScript

Protótipo JavaScript

Patterns — Padrões para criar objetos

Os padrões mais comuns para criar Objetos em JavaScript

Prototypal inheritance — Herança prototípica

A Herança Prototípica em JavaScript

this

Entendendo o "this"

for…in loop

O loop for…in no JavaScript

Enumerable Properties — Propriedades enumerávei

Propriedades enumeráveis de um objeto JavaScript

Own Properties — Propriedades Próprias

Own Properties — Propriedades Próprias de um objeto JavaScript

Diferenças entre Valores Primitivos e Valores de Referência

Valores Primitivos e Valores de Referência no JavaScript

Tipos de invólucros primitivos — Primitive wrapper types

Os tipos Wrappers Primitivos

9. Funções Avançadas

Passagem por valor (Passing by value)

Passagem por valor no JavaScript

Retornando múltiplos valores (Returning multiple values)

Retornando vários valores de uma função

O tipo Função (Function Type)

Tipo Função no JavaScript

O método call()

O Método call() no JavaScript

O método apply()

O método apply() do JavaScript

O método bind()

O método bind() do JavaScript

Função recursiva (Recursive function)

Funções Recursivas no JavaScript

Closures

Closures em JavaScript

10. Tratamento de erros (Error handling)

try…catch

try…catch - Tratando erros no JavaScript

11. Expressões Regulares (Regular Expressions)

Expressões Regulares

Expressão Regular no JavaScript

replace()

String replace() para substituir substrings no JavaScript

match()

match() String JavaScript

search()

search() String JavaScript

Classes de caracteres

Expressão Regular: Classes de Caracteres JavaScript

Âncoras (Anchors)

Âncoras de Expressão Regular JavaScript

Conjuntos e intervalos (Sets and Ranges)

Conjuntos e Intervalos em Expressões Regulares JavaScript

Limites de palavras (Word Boundaries)

Limites de palavras em expressões regulares em JavaScript

Quantificadores (Quantifiers)

Quantificadores em Expressões Regulares JavaScript

12. Solicitações de rede (Network Requests)

API de Busca (Fetch API)

Fetch API JavaScript

13. Tempo de execução (JavaScript Runtime)

Contextos de Execução (Execution Contexts)

Contexto de Execução JavaScript

Pilha de chamadas (Call Stack)

Pilha de Chamadas JavaScript: Call Stack

Loop de Eventos (Event Loop)

Event Loop JavaScript

Içamentos JavaScript (Hoisting)

Hoisting JavaScript

Escopos variáveis ( Variable Scopes)

Escopo de Variáveis JavaScript

14. A versão ES6 do JavaScript

Diversos tutoriais sobre a versão ES6

Tutoriais JavaScript 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,89
EURO
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.

Get Ricardo Reis’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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.

1. Início: É o índice (contador ou posição)
2. 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.302585092994046
console.log(Math.PI);    // 3.141592653589793
console.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:

1. 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: 29
console.log(“Ano: “+data.getFullYear())
// Ano: 2020
console.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: 18
console.log(“Minuto: “+data.getMinutes())
// Minuto: 21
console.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

Node.JS

obs: Assistir o curso do Danilo Aparecido — Torne-se um programador

Fontes:

JavaScript Tutorial