⚠150+ Expressões JavaScript Que Você Precisa Conhecer⚠

Mantenha esse glossário JavaScript salvo para acessar quando houver dúvidas em variáveis, métodos, strings e mais.

Variáveis JavaScript

• var: É a variável mais usada. Pode ser reatribuída, mas é acessada apenas dentro de uma função, alcançando o escopo da função. Variáveis definidas com var são movidas para o topo quando o código é executado;
• const: não podem ser reatribuídas e não acessíveis antes de aparecerem no código; têm alcance de escopo do bloco;

• let: Semelhante à const, pode ter escopo de bloco. A variável let pode ser reatribuída, mas não declarada novamente.
  
  

  Tipos de dados

• Números: var age = 33

• Variáveis: var a

• Strings: var a = "Sachin"

• Operações: var b = 4 + 5 + 6

• Booleano: var a = true | var b = false

• Números constantes: const PI = 3.14

• Objetos: var fullName = {firstName:"Sachin", lastName: "Samal"}
  
  

  Objetos

Abaixo um exemplo simples. Este objeto descreve a variavel car e inclui chaves como marca, modelo e ano (esses são os nomes das propriedades do objeto). Cada propriedade tem um valor, como Volkswagen, Fusca e 1972.

var carro = {
marca: 'Volkswagen', //Propriedade(1) marca
modelo: 'Fusca',     //Propriedade(2) modelo
ano: 2022            //Propriedade(3) ano
};

Um objeto JavaScript é uma coleção de propriedades e funciona como um método.

Operadores de comparação

==: É igual a
===: É igual ao valor e igual ao tipo
!=: Não é igual
!==: Não é igual ao valor e não é igual ao tipo
>: É maior que
<: É menor que
>=: É maior que ou igual a
<=: É menor que ou igual a
?: operador ternário

Operadores lógicos

&&: E Lógico
||: OU lógico
!: NÃO Lógico

Dados de saída

alert(): Dados de saída em uma caixa de alerta na janela do navegador;
confirm(): Abra uma caixa de diálogo sim/não e retorne verdadeiro/falso dependendo do clique do usuário;
console.log(): Grava informações no console do navegador. Bom para depuração;
document.write(): Gravar diretamente no documento HTML
prompt(): Crie uma caixa de diálogo para entrada do usuário.

Métodos de Array

Arrays em JavaScript são usados para armazenar vários valores em uma única variável.

var carros = [
"Fusca",
 "Corcel",
 "Opala"
]; 
// Cada carro é um valor do array "carros"

Você acessa o valor de um array consultando um número de índice:

var nome = carros[0];
//Essa declaração acessa o valor do 
primeiro elemento em carros (Fusca),
que se encontra no índice 0 do array.

Obs: [0] é o primeiro elemento em um Array. [1] é o segundo. Os índices do Array começam com 0.


concat(): Junte vários arrays em um
indexOf(): Retorna o valor primitivo do objeto especificado
join(): Combina elementos de um array em uma única string e retorna a string
lastIndexOf(): Dê a última posição em que um determinado elemento aparece em uma matriz
pop(): Remove o último elemento de um array
push(): Adicione um novo elemento no final
reverse(): Classifica os elementos em ordem decrescente
shift(): Remove o primeiro elemento de um array
slice(): Puxe uma cópia de uma parte de um array para um novo array
splice(): Adicione posições e elementos de uma maneira especificada
toString(): Converter elementos em strings
unshift(): Adiciona um novo elemento ao início
valueOf(): Retorna a primeira posição em que um determinado elemento aparece em uma matriz

Loops JavaScript

Execute tarefas específicas repetidamente em ciclos sob determinadas condições.

for ( inicializador do ciclo; condição para o ciclo; execute ao final do ciclo) {
// o que fazer durante o loop
}

for: cria um loop condicional
while: Configura condições sob as quais um loop é executado pelo menos uma vez, desde que a condição especificada seja avaliada como verdadeira
do... while: Semelhante ao whileloop, ele é executado pelo menos uma vez e realiza uma verificação no final para ver se a condição foi atendida. Se for, então ele executa novamente
break: Parar e sair do ciclo em determinadas condições
continue: Pule partes do ciclo se certas condições forem atendidas

Declarações if-else

Uma instrução if executa o código entre colchetes enquanto a condição entre parênteses for verdadeira. Caso contrário, uma instrução opcional else é executada.

if ( condição ) {
// faça isso se a condição for atendida
} else {
// faça isso se a condição não for atendida
};

Strings

Métodos de Strings

charAt(): Retorna um caractere em uma posição especificada dentro de uma string
charCodeAt(): Dê o Unicode do caractere nessa posição
concat(): Concatenar (unir) duas ou mais strings em uma
fromCharCode(): Retorna uma string criada a partir da sequência especificada de unidades de código UTF-16
indexOf(): Fornece a posição da primeira ocorrência de um texto especificado dentro de uma string
lastIndexOf(): O mesmo que indexOf() mas com a última ocorrência, pesquisando para trás
match(): Recupere as correspondências de uma string em um padrão de pesquisa
replace(): Localizar e substituir o texto especificado em uma string
search(): Executa uma pesquisa por um texto correspondente e retorna sua posição
slice(): Extraia uma seção de uma string e a retorne como uma nova string
split(): Dividir um objeto string em uma matriz de strings em uma posição especificada
substr(): Extraia uma substring dependente de um número especificado de caracteres, semelhante a slice()
substring(): Não pode aceitar índices negativos, também semelhantes a slice()
toLowerCase(): Converter strings para minúsculas
toUpperCase(): Converter strings para maiúsculas
valueOf(): Retorna o valor primitivo (que não possui propriedades ou métodos) de um objeto string

Métodos numéricos

toExponential(): Retorna uma string com um número arredondado escrito como notação exponencial
toFixed(): Retorna a string de um número com um número especificado de decimais
toPrecision(): String de um número escrito com um comprimento especificado
toString(): Retorna um número como uma string
valueOf(): Retorna um número como um número

Métodos matemáticos

abs(a): Retorna o valor absoluto (positivo) de a
ceil(a): Valor de a arredondado para o inteiro mais próximo
exp(a): Valor de E^x retorna ex, onde x é o argumento, e E é a Constante de Euler, a base dos logaritmos naturais
floor(a): Valor de a arredondado para o número inteiro mais próximo
log(a): Logaritmo natural (base E) de a
max(a,b,c…,z): Retorna o número com o maior valor
min(a,b,c…,z): Retorna o número com o menor valor
random(): Retorna um número aleatório entre 0 e 1
round(a): Valor de aarredondado para o número inteiro mais próximo
sqrt(a): Raiz quadrada de a

Lidando com datas em JavaScript

Definir datas

Date(): Crie um novo objeto de data com a data e hora atuais
Date(2022, 6, 22, 4, 22, 11, 0): crie um objeto de data personalizado. Os números representam ano, mês, dia, hora, minutos, segundos, milissegundos. Você pode omitir qualquer coisa, exceto ano e mês.
Date("2022-07-29"): Declaração de data como uma string

Extrair valores de data e hora

getDate(): Dia do mês como um número (1-31)
getDay(): Dia da semana como um número (0-6)
getFullYear(): Ano como um número de quatro dígitos (aaaa)
getHours(): Hora (0-23)
getMilliseconds(): Milissegundos (0-999)
getMinutes(): Minuto (0-59)
getMonth(): Mês como um número (0-11)
getSeconds(): Segundo (0-59)
getTime(): Milissegundos desde 1º de janeiro de 1970
getUTCDate(): Dia (data) do mês na data especificada de acordo com a hora universal (também disponível para dia, mês, ano completo, horas, minutos, etc.)
parse: analisa uma representação de string de uma data e retorna o número de milissegundos desde 1º de janeiro de 1970

Definir parte de uma data

setDate(): Defina o dia como um número (1-31)
setFullYear(): Defina o ano (opcionalmente mês e dia)
setHours(): Defina a hora (0-23)
setMilliseconds(): Definir milissegundos (0-999)
setMinutes(): Defina os minutos (0-59)
setMonth(): Defina o mês (0-11)
setSeconds(): Defina os segundos (0-59)
setTime(): Defina a hora (milissegundos desde 1º de janeiro de 1970)
setUTCDate(): Defina o dia do mês para uma data especificada de acordo com a hora universal (também disponível para dia, mês, ano completo, horas, minutos, etc.)

Modo Dom

Métodos de nós

appendChild(): Adicionar um novo nó filho a um elemento como o último nó filho
cloneNode(): Clonar um elemento HTML
compareDocumentPosition(): Comparar a posição do documento de dois elementos
getFeature(): Retorna um objeto que implementa as APIs de um recurso especificado
hasAttributes(): Retorna true se um elemento tiver algum atributo, caso contrário, false
hasChildNodes(): Retorna true se um elemento tiver nós filhos, caso contrário, false
insertBefore(): insira um novo nó filho antes de um nó filho existente especificado
isDefaultNamespace(): Retorna true se o namespaceURI especificado for o padrão, caso contrário, false
isEqualNode(): Verifique se dois elementos são iguais
isSameNode(): Verifique se dois elementos são o mesmo nó
isSupported(): Retorna true se um recurso especificado for suportado no elemento
lookupNamespaceURI(): Retorna o namespaceURI associado a um determinado nó
normalize(): Une nós de texto adjacentes e remove nós de texto vazios em um elemento
removeChild(): Remova um nó filho de um elemento
replaceChild(): Substitui um nó filho em um elemento

Métodos de elemento

getAttribute(): Retorna o valor de atributo especificado de um nó de elemento
getAttributeNS(): Retorna o valor da string do atributo com o namespace e o nome especificados
getAttributeNode(): Obtenha o nó de atributo especificado
getAttributeNodeNS(): Retorna o nó de atributo para o atributo com o namespace e o nome fornecidos
getElementsByTagName(): Fornece uma coleção de todos os elementos filho com o nome de tag especificado
getElementsByTagNameNS(): Retorna um HTMLCollection ativo de elementos com um determinado nome de tag pertencente ao namespace fornecido
hasAttribute(): Retorna true se um elemento tiver algum atributo, caso contrário, false
hasAttributeNS(): Fornece um valor verdadeiro/falso indicando se o elemento atual em um determinado namespace tem o atributo especificado
removeAttribute(): Remove um atributo especificado de um elemento
lookupPrefix(): Retorna um DOMString contendo o prefixo para um dado namespaceURI, se presente
removeAttributeNS(): remove o atributo especificado de um elemento dentro de um determinado namespace
removeAttributeNode(): Retire um nó de atributo especificado e retorne o nó removido
setAttribute(): Defina ou altere o atributo especificado para um valor especificado
setAttributeNS(): adiciona um novo atributo ou altera o valor de um atributo com o namespace e o nome fornecidos
setAttributeNode(): Defina ou altere o nó de atributo especificado
setAttributeNodeNS(): Adicionar um novo nó de atributo com namespace a um elemento

Eventos JavaScript

Mouse

onclick: o usuário clica em um elemento
oncontextmenu: o usuário clica com o botão direito do mouse em um elemento para abrir um menu de contexto
ondblclick: o usuário clica duas vezes em um elemento
onmousedown: O usuário pressiona um botão do mouse sobre um elemento
onmouseenter: O ponteiro se move para um elemento
onmouseleave: O ponteiro se move para fora de um elemento
onmousemove: O ponteiro se move enquanto está sobre um elemento
onmouseover: O ponteiro se move para um elemento ou um de seus filhos
setInterval(): Chama uma função ou avalia uma expressão em
oninput: entrada do usuário em um elemento
onmouseup: O usuário libera um botão do mouse enquanto está sobre um elemento
onmouseout: O usuário move o ponteiro do mouse para fora de um elemento ou de um de seus filhos
onerror: Acontece quando ocorre um erro ao carregar um arquivo externo
onloadeddata: Os dados de mídia são carregados
onloadedmetadata: metadados (como dimensões e duração) são carregados
onloadstart: O navegador começa a procurar a mídia especificada
onpause: A mídia é pausada pelo usuário ou automaticamente
onplay: A mídia é iniciada ou não está mais pausada
onplaying: A mídia está sendo reproduzida após ter sido pausada ou interrompida para armazenamento em buffer
onprogress: O navegador está em processo de download da mídia
onratechange: Mudanças de velocidade de reprodução de mídia
onseeked: O usuário termina de mover/pular para uma nova posição na mídia
onseeking: O usuário começa a se mover/pular
onstalled: O navegador tenta carregar a mídia, mas não está disponível
onsuspend: O navegador não está carregando mídia intencionalmente
ontimeupdate: A posição de reprodução mudou (por exemplo, devido ao avanço rápido)
onvolumechange: O volume da mídia mudou (incluindo mudo)
onwaiting: Mídia pausada, mas espera-se que seja retomada (por exemplo, armazenamento em buffer)

---

Traduzido e adaptado de: https://opens...t-glossary
Autor: Marcelo Schäffer Petry
https://marcelopetry.com