800+ IT
News
als RSS Feed abonnieren📚 ⚠150+ Expressões JavaScript Que Você Precisa Conhecer⚠
💡 Newskategorie: Programmierung
🔗 Quelle: dev.to
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 = 33Variáveis:
var aStrings:
var a = "Sachin"Operações:
var b = 4 + 5 + 6Booleano:
var a = true | var b = falseNú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 HTMLprompt(): 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 umindexOf(): Retorna o valor primitivo do objeto especificadojoin(): Combina elementos de um array em uma única string e retorna a stringlastIndexOf(): Dê a última posição em que um determinado elemento aparece em uma matrizpop(): Remove o último elemento de um arraypush(): Adicione um novo elemento no finalreverse(): Classifica os elementos em ordem decrescenteshift(): Remove o primeiro elemento de um arrayslice(): Puxe uma cópia de uma parte de um array para um novo arraysplice(): Adicione posições e elementos de uma maneira especificadatoString(): Converter elementos em stringsunshift(): Adiciona um novo elemento ao iníciovalueOf(): 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 condicionalwhile: Configura condições sob as quais um loop é executado pelo menos uma vez, desde que a condição especificada seja avaliada como verdadeirado... 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 novamentebreak: Parar e sair do ciclo em determinadas condiçõescontinue: 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 stringcharCodeAt(): Dê o Unicode do caractere nessa posiçãoconcat(): Concatenar (unir) duas ou mais strings em umafromCharCode(): Retorna uma string criada a partir da sequência especificada de unidades de código UTF-16indexOf(): Fornece a posição da primeira ocorrência de um texto especificado dentro de uma stringlastIndexOf(): O mesmo que indexOf() mas com a última ocorrência, pesquisando para trásmatch(): Recupere as correspondências de uma string em um padrão de pesquisareplace(): Localizar e substituir o texto especificado em uma stringsearch(): Executa uma pesquisa por um texto correspondente e retorna sua posiçãoslice(): Extraia uma seção de uma string e a retorne como uma nova stringsplit(): Dividir um objeto string em uma matriz de strings em uma posição especificadasubstr(): 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úsculastoUpperCase(): Converter strings para maiúsculasvalueOf(): 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 exponencialtoFixed(): Retorna a string de um número com um número especificado de decimaistoPrecision(): String de um número escrito com um comprimento especificadotoString(): Retorna um número como uma stringvalueOf(): Retorna um número como um número
Métodos matemáticos
abs(a): Retorna o valor absoluto (positivo) de aceil(a): Valor de a arredondado para o inteiro mais próximoexp(a): Valor de E^x retorna ex, onde x é o argumento, e E é a Constante de Euler, a base dos logaritmos naturaisfloor(a): Valor de a arredondado para o número inteiro mais próximolog(a): Logaritmo natural (base E) de amax(a,b,c…,z): Retorna o número com o maior valormin(a,b,c…,z): Retorna o número com o menor valorrandom(): Retorna um número aleatório entre 0 e 1round(a): Valor de aarredondado para o número inteiro mais próximosqrt(a): Raiz quadrada de a
Lidando com datas em JavaScript
Definir datas
Date(): Crie um novo objeto de data com a data e hora atuaisDate(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 1970getUTCDate(): 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ó filhocloneNode(): Clonar um elemento HTMLcompareDocumentPosition(): Comparar a posição do documento de dois elementosgetFeature(): Retorna um objeto que implementa as APIs de um recurso especificadohasAttributes(): Retorna true se um elemento tiver algum atributo, caso contrário, falsehasChildNodes(): Retorna true se um elemento tiver nós filhos, caso contrário, falseinsertBefore(): insira um novo nó filho antes de um nó filho existente especificadoisDefaultNamespace(): Retorna true se o namespaceURI especificado for o padrão, caso contrário, falseisEqualNode(): Verifique se dois elementos são iguaisisSameNode(): Verifique se dois elementos são o mesmo nóisSupported(): Retorna true se um recurso especificado for suportado no elementolookupNamespaceURI(): Retorna o namespaceURI associado a um determinado nónormalize(): Une nós de texto adjacentes e remove nós de texto vazios em um elementoremoveChild(): Remova um nó filho de um elementoreplaceChild(): Substitui um nó filho em um elemento
Métodos de elemento
getAttribute(): Retorna o valor de atributo especificado de um nó de elementogetAttributeNS(): Retorna o valor da string do atributo com o namespace e o nome especificadosgetAttributeNode(): Obtenha o nó de atributo especificadogetAttributeNodeNS(): Retorna o nó de atributo para o atributo com o namespace e o nome fornecidosgetElementsByTagName(): Fornece uma coleção de todos os elementos filho com o nome de tag especificadogetElementsByTagNameNS(): Retorna um HTMLCollection ativo de elementos com um determinado nome de tag pertencente ao namespace fornecidohasAttribute(): Retorna true se um elemento tiver algum atributo, caso contrário, falsehasAttributeNS(): Fornece um valor verdadeiro/falso indicando se o elemento atual em um determinado namespace tem o atributo especificadoremoveAttribute(): Remove um atributo especificado de um elementolookupPrefix(): Retorna um DOMString contendo o prefixo para um dado namespaceURI, se presenteremoveAttributeNS(): remove o atributo especificado de um elemento dentro de um determinado namespaceremoveAttributeNode(): Retire um nó de atributo especificado e retorne o nó removidosetAttribute(): Defina ou altere o atributo especificado para um valor especificadosetAttributeNS(): adiciona um novo atributo ou altera o valor de um atributo com o namespace e o nome fornecidossetAttributeNode(): Defina ou altere o nó de atributo especificadosetAttributeNodeNS(): Adicionar um novo nó de atributo com namespace a um elemento
Eventos JavaScript
Mouse
onclick: o usuário clica em um elementooncontextmenu: o usuário clica com o botão direito do mouse em um elemento para abrir um menu de contextoondblclick: o usuário clica duas vezes em um elementoonmousedown: O usuário pressiona um botão do mouse sobre um elementoonmouseenter: O ponteiro se move para um elementoonmouseleave: O ponteiro se move para fora de um elementoonmousemove: O ponteiro se move enquanto está sobre um elementoonmouseover: O ponteiro se move para um elemento ou um de seus filhossetInterval(): Chama uma função ou avalia uma expressão emoninput: entrada do usuário em um elementoonmouseup: O usuário libera um botão do mouse enquanto está sobre um elementoonmouseout: O usuário move o ponteiro do mouse para fora de um elemento ou de um de seus filhosonerror: Acontece quando ocorre um erro ao carregar um arquivo externoonloadeddata: Os dados de mídia são carregadosonloadedmetadata: metadados (como dimensões e duração) são carregadosonloadstart: O navegador começa a procurar a mídia especificadaonpause: A mídia é pausada pelo usuário ou automaticamenteonplay: A mídia é iniciada ou não está mais pausadaonplaying: A mídia está sendo reproduzida após ter sido pausada ou interrompida para armazenamento em bufferonprogress: O navegador está em processo de download da mídiaonratechange: Mudanças de velocidade de reprodução de mídiaonseeked: O usuário termina de mover/pular para uma nova posição na mídiaonseeking: O usuário começa a se mover/pularonstalled: O navegador tenta carregar a mídia, mas não está disponívelonsuspend: O navegador não está carregando mídia intencionalmenteontimeupdate: 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