Linguagem de programação multiparadigma, interpretada e de alto nível.
Obedece a especificação ECMAScript.
É usada principalmente para criar interatividade para páginas web.
Funciona tanto no lado client como no servidor (NodeJS).
Atualmente há soluções que a utilizam para criar aplicações desktop (Electron) e mobile (React Native).
O Document Object Model ou DOM, trata-se de uma forma de representar em memória a estrutura de um documento, normalmente se tratando da representação de um documento HTML no JavaScript.
O DOM representa um documento como uma árvore lógica (Árvore do DOM).
Com o DOM como uma interface podemos utilizar o JavaScript para criar interação em paginas web.
Utilizando-o é possível:
- Adicionar, mudar ou remover elementos;
- Mudar o estilo;
- Criar e reagir a eventos.
É possível usar métodos específicos para obter um elemento por Id, tag ou classe.
// Selecionando elemento por id
const swapButton = document.getElementById('swap-btn')
// Selecionando elementos pelo nome da Tag
const firstButton = document.getElementsByTagName('button')
// Selecionando elementos por classe
const lightButton = document.getElementsByClassName('btn-light')Além disso, há o método querySelector (e querySelectorAll) em que é possível selecionar um elemento (vários no caso de querySelectorAll) por um seletor de CSS.
// Query Selector
// Selecionando elemento pelo nome da Tag
const button1 = document.querySelector('button')
// Selecionando elemento por id
const button2 = document.querySelector('#swap-btn')
// Selecionando elemento por classe
const button3 = document.querySelector('.btn')
// Capturando vários elementos (no caso, todos os elementos com a classe list-item)
const listItems = document.querySelectorAll('.list-item')Uma vez selecionados os elementos é possível:
- criar e inserir dentro destes;
- alterar o estilo diretamente;
- alterar classe;
- adicionar propriedades;
- adicionar eventos;
- etc.
Alguns exemplos:
// Adicionando texto dentro de um paragrafo
const pElement = document.querySelector('p')
pElement.innerText = 'Random Text'
// É possível inserir também valores de variáveis
pElement.innerText = `${var1} + ${var2} = ${var1 + var2}`
// Adicionando html dentro de um elemento
const div = document.querySelector('div')
div.innerHTML = '<p>Lorem, ipsum dolor</p>'
// Verificando, removendo e inserindo uma classe
if(!formGroup.classList.contains('invalid'))
formGroup.classList.remove('invalid')
formGroup.classList.add('valid')
// Mudando o background de uma div
div.style.background = '#827c03'É possível adicionar "event listeners" (ouvidores de eventos) a elementos do HTML.
Com isso, podemos especificar algo a ser feito (uma função) caso aconteça um evento.
Exemplos de exemplos são:
- Cliques;
- Mouse over;
- Change;
- etc.
// Executa a função calculate ao ser digitado um valor num input
amount1.addEventListener('input', calculate)
// Executa a mesma função de cima, nesse caso com quaisquer mudanças nos inputs currency1 e currency1
currency1.addEventListener('change', calculate)
currency2.addEventListener('change', calculate)
// Executa a função swapCurrencies ao ser apertado um botão
swapButton.addEventListener('click', swapCurrencies)