⚠150+ Expressões JavaScript Que Você Precisa Conhecer⚠
Tags: javascript, beginners, webdev, programming
Published: 2022-12-20 00:28:35


![javascript aleatory image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diuti7qkxgs8s25bizb7.png)
_Mantenha esse glossário JavaScript salvo para acessar quando houver dúvidas em variáveis, métodos, strings e mais._
<br>
# 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.
<br>
# 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"}`
<br>
# 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**.
<br>
## 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
<br>
## Operadores lógicos

`&&`: E Lógico
`||`: OU lógico
`!`: NÃO Lógico
<br>
## 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.
<br>
## 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.
<br>
`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
<br>
## 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
<br>
## 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
};
```

<br>

# 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
<br>
## 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
<br>
## 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
<br>
# 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
<br>
## 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
<br>
## 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.)
<br>
# 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
<br>
## 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
<br>
# 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](https://opensource.com/article/22/9/javascript-glossary)
Autor: Marcelo Schäffer Petry
https://marcelopetry.com