Folha de dicas do JavaScript

Folha de dicas do JavaScript em PDFAbaixo, você pode encontrar a planilha de Javascript em .pdf, bem como no texto.


Folha de dicas do JavaScript

  • Link para Download

Noções básicas de JavaScript

Vamos começar com o básico – como incluir JavaScript em um site.

Incluindo JavaScript em uma Página HTML

Para incluir JavaScript dentro de uma página, você precisa envolvê-lo

Com esta entrada, o navegador pode identificar e executar o código corretamente.

Chamar um arquivo JavaScript externo

Você também pode colocar o JavaScript em seu próprio arquivo e nomeá-lo dentro do seu HTML. Dessa forma, você pode manter diferentes tipos de código separados um do outro, criando arquivos melhor organizados. Se o seu código estiver em um arquivo chamado myscript.js, você chamaria:

Incluindo comentários

Os comentários são importantes porque ajudam outras pessoas a entender o que está acontecendo no seu código ou lembrá-lo se você se esqueceu de algo. Lembre-se de que eles devem ser marcados corretamente para que o navegador não tente executá-los.

No JavaScript, você tem duas opções diferentes:

  • Comentários de linha única - Para incluir um comentário limitado a uma única linha, preceda-o com //
  • Comentários em várias linhas - Caso você queira escrever comentários mais longos entre várias linhas, envolva-os em / * e * / para evitar que seja executado

Variáveis ​​em JavaScript

Variáveis ​​são valores de reserva que você pode usar para executar operações. Você deve estar familiarizado com eles da aula de matemática.

var, const, deixei

Você tem três possibilidades diferentes para declarar uma variável em JavaScript, cada uma com suas próprias especialidades:

  • var - A variável mais comum. Ele pode ser reatribuído, mas acessado apenas dentro de uma função. Variáveis ​​definidas com var mover para o topo quando o código for executado.
  • const - Não pode ser reatribuído nem acessível antes que apareçam no código.
  • deixei - Igual a const, a deixei variável pode ser reatribuída, mas não declarada novamente.

Tipos de dados

As variáveis ​​podem conter diferentes tipos de valores e tipos de dados. Você usa = para atribuí-los:

  • Números - var idade = 23
  • Variáveis ​​- var x
  • Texto (cadeias) - var a = "init"
  • Operações - var b = 1 + 2 + 3
  • Declarações verdadeiras ou falsas - var c = true
  • Números constantes - const PI = 3,14
  • Objetos - var name = {firstName: "John", lastName: "Doe"}

Existem mais possibilidades. Observe que as variáveis ​​diferenciam maiúsculas de minúsculas. Que significa último nome e último nome será tratado como duas variáveis ​​diferentes.

Objetos

Objetos são certos tipos de variáveis. São variáveis ​​que podem ter seus próprios valores e métodos. As últimas são ações que você pode executar em objetos.

var person = {
firstName: "John",
lastName: "Doe",
idade: 20,
nacionalidade: "alemão"
};

O próximo nível: matrizes

Em seguida, em nossa folha de dicas do JavaScript, estão as matrizes. Matrizes fazem parte de muitas linguagens de programação diferentes. Eles são uma maneira de organizar variáveis ​​e propriedades em grupos. Veja como criar um em JavaScript:

var fruit = ["Banana", "Maçã", "Pêra"];

Agora você tem uma matriz chamada fruta que contém três itens que você pode usar para operações futuras.

Métodos de matriz

Depois de criar as matrizes, você pode fazer algumas coisas com elas:

  • concat () - Junte várias matrizes em uma
  • índice de() - Retorna a primeira posição na qual um determinado elemento aparece em uma matriz
  • Junte-se() - Combine elementos de uma matriz em uma única sequência e retorne a sequência
  • lastIndexOf () - Fornece a última posição na qual um determinado elemento aparece em uma matriz
  • pop () - Remove o último elemento de uma matriz
  • empurrar() - Adicione um novo elemento no final
  • reverter() - Classificar elementos em uma ordem decrescente
  • mudança() - Remova o primeiro elemento de uma matriz
  • fatia() - Puxa uma cópia de uma parte de uma matriz para uma nova matriz
  • ordenar() - Classifica os elementos em ordem alfabética
  • emenda () - Adiciona elementos de uma maneira e posição especificadas
  • para sequenciar() - Converte elementos em strings
  • unshift () - Adiciona um novo elemento ao início
  • valor de() - Retorna o valor primitivo do objeto especificado

Operadores

Se você tiver variáveis, poderá usá-las para executar diferentes tipos de operações. Para fazer isso, você precisa de operadores.

Operadores básicos

  • + - Adição
  • - - Subtração
  • * - Multiplicação
  • / - Divisão
  • (...) - Operador de agrupamento, as operações entre colchetes são executadas mais cedo do que as externas
  • % - Módulo (restante)
  • ++ - números de incremento
  • -- - Números decrescentes

Operadores de comparação

  • == - Igual a
  • === - Valor igual e tipo igual
  • != - Não igual
  • !== - Valor não igual ou tipo não igual
  • > - Maior que
  • < - Menor que
  • > = - Melhor que ou igual a
  • <= - Menos que ou igual a
  • ? - operador ternário

Operadores lógicos

  • && - Lógico e
  • || - Lógico ou
  • ! - Lógico não

Operadores bit a bit

  • & - declaração AND
  • | - declaração OR
  • ~ - NÃO
  • ^ - XOR
  • << - Desvio à esquerda
  • >> - Deslocamento para a direita
  • >>> - deslocamento zero à direita

Funções

Funções JavaScript são blocos de código que executam uma determinada tarefa. Uma função básica é assim:

nome da função (parâmetro1, parâmetro2, parâmetro3) {
// o que a função faz
}

Como você pode ver, consiste no função palavra-chave mais um nome. Os parâmetros da função estão entre colchetes e você tem colchetes em volta do que a função executa. Você pode criar o seu próprio, mas para facilitar sua vida - também existem várias funções padrão.

Saída de dados

Um aplicativo comum para funções é a saída de dados. Para a saída, você tem as seguintes opções:

  • alerta() - Dados de saída em uma caixa de alerta na janela do navegador
  • confirme() - Abre uma caixa de diálogo sim / não e retorna verdadeiro / falso, dependendo do clique do usuário
  • console.log () - Grava informações no console do navegador, bom para fins de depuração
  • document.write () - Escreva diretamente no documento HTML
  • pronto() - Cria um diálogo para entrada do usuário

Funções Globais

Funções globais são funções criadas em todos os navegadores capazes de executar JavaScript.

  • decodeURI () - Decodifica um Identificador Uniforme de Recursos (URI) criado por encodeURI ou similar
  • decodeURIComponent () - Decodifica um componente URI
  • encodeURI () - Codifica um URI no UTF-8
  • encodeURIComponent () - O mesmo, mas para componentes URI
  • eval () - Avalia o código JavaScript representado como uma sequência
  • isFinite () - Determina se um valor passado é um número finito
  • isNaN () - Determina se um valor é NaN ou não
  • Número() Retorna um número convertido de seu argumento
  • parseFloat () - Analisa um argumento e retorna um número de ponto flutuante
  • parseInt () - Analisa seu argumento e retorna um número inteiro

Loops JavaScript

Os loops fazem parte da maioria das linguagens de programação. Eles permitem que você execute blocos de código desejados várias vezes com valores diferentes:

for (antes do loop; condição para o loop; executar após o loop) {
// o que fazer durante o loop
}

Você tem vários parâmetros para criar loops:

  • para - A maneira mais comum de criar um loop em JavaScript
  • enquanto - Configura condições sob as quais um loop executa
  • fazer enquanto - Semelhante ao enquanto loop, mas executa pelo menos uma vez e executa uma verificação no final para verificar se a condição foi atendida para executar novamente
  • quebrar - Usado para parar e sair do ciclo em determinadas condições
  • continuar - Ignore partes do ciclo se determinadas condições forem atendidas

E se - Outro Afirmações

Esses tipos de declarações são fáceis de entender. Usando-os, você pode definir condições para quando seu código é executado. Se certas condições se aplicarem, algo será feito, se não - outra coisa será executada.

se (condição) {
// o que fazer se a condição for atendida
} outro {
// o que fazer se a condição não for atendida
}

Um conceito semelhante ao se mais é o interruptor declaração. No entanto, usando a opção, você seleciona um dos vários blocos de código para executar.

Cordas

Strings são o que o JavaScript chama de texto que não executa uma função, mas pode aparecer na tela.

var person = "John Doe";

Nesse caso, John Doe é a string.

Escape Characters

No JavaScript, as strings são marcadas com aspas simples ou duplas. Se você quiser usar aspas em uma string, precisará usar caracteres especiais:

  • \ ' - Citação única
  • \ " - Citação dupla

Além disso, você também possui caracteres de escape adicionais:

  • \\ - Barra invertida
  • \ b - Backspace
  • \ f - Alimentação de formulário
  • \ n - Nova linha
  • \ r - Retorno de carro
  • \ t - Tabulador horizontal
  • \ v - Tabulador vertical

Métodos de String

Existem muitas maneiras diferentes de trabalhar com strings:

  • charAt () - Retorna um caractere em uma posição especificada dentro de uma string
  • charCodeAt () - Fornece o Unicode de um personagem nessa posição
  • concat () - Concatena (une) duas ou mais seqüências de caracteres em uma
  • fromCharCode () - Retorna uma string criada a partir da sequência especificada de unidades de código UTF-16
  • índice de() - Fornece a posição da primeira ocorrência de um texto especificado em uma sequência
  • lastIndexOf () - Igual a índice de() mas com a última ocorrência, pesquisando para trás
  • partida() - Recupera as correspondências de uma sequência contra um padrão de pesquisa
  • substituir() - Encontre e substitua o texto especificado em uma string
  • procurar() - Executa uma pesquisa por um texto correspondente e retorna sua posição
  • fatia() - Extrai uma seção de uma string e a retorna como uma nova string
  • Dividido() - Divide um objeto de string em uma matriz de strings em uma posição especificada
  • substr () - Igual a fatia() mas extrai uma substring, dependendo de um número especificado de caracteres
  • substring () - Também semelhante a fatia() mas não pode aceitar índices negativos
  • toLowerCase () - Converter cadeias em minúsculas
  • toUpperCase () - Converter cadeias em maiúsculas
  • valor de() - Retorna o valor primitivo (que não possui propriedades ou métodos) de um objeto de sequência

Sintaxe de expressão regular

Expressões regulares são padrões de pesquisa usados ​​para combinar combinações de caracteres em cadeias. O padrão de pesquisa pode ser usado para pesquisa de texto e texto para substituir operações.

Modificadores de padrão

  • e - Avaliar substituição
  • Eu - Executar correspondência que não diferencia maiúsculas de minúsculas
  • g - Executar correspondência global
  • m - Realizar correspondência de várias linhas
  • s - Trate as strings como uma única linha
  • x - Permitir comentários e espaço em branco no padrão
  • você - Padrão desagradável

Suportes

  • [abc] - Encontre qualquer um dos caracteres entre os colchetes
  • [^ abc] - Encontre qualquer personagem que não esteja entre parênteses
  • [0-9] - Usado para encontrar qualquer dígito de 0 a 9
  • [A-z] - Encontre qualquer caractere de A maiúsculo a z minúsculo
  • (a | b | c) - Encontre qualquer uma das alternativas separadas por |

Metacaracteres

  • . - Encontre um único caractere, exceto nova linha ou terminador de linha
  • \W - Caráter da palavra
  • \W - Caractere não-palavra
  • \ d - um dígito
  • \ D - Um caractere sem dígito
  • \ s - Caractere de espaço em branco
  • \ S - Caractere sem espaço em branco
  • \ b - Encontre uma correspondência no início / fim de uma palavra
  • \ B - Uma correspondência que não está no início / fim de uma palavra
  • \ 0 - caractere NUL
  • \ n - Um novo caractere de linha
  • \ f - Caractere de feed de formulário
  • \ r - Caractere de retorno de carro
  • \ t - Caractere de tabulação
  • \ v - Caractere de tabulação vertical
  • \ xxx - O caractere especificado por um número octal xxx
  • \ xdd - Caractere especificado por um número hexadecimal dd
  • \ uxxxx - O caractere Unicode especificado por um número hexadecimal XXXX

Quantificadores

  • n+ - Corresponde a qualquer sequência que contenha pelo menos um n
  • n * - Qualquer string que contenha zero ou mais ocorrências de n
  • n? - Uma sequência que contém zero ou uma ocorrência de n
  • n {X} - String que contém uma sequência de X n's
  • n {X, Y} - Strings que contêm uma sequência de X a Y n
  • n {X,} - Corresponde a qualquer sequência que contenha uma sequência de pelo menos X n's
  • n $ - Qualquer string com n no final dela
  • ^ n - String com n no começo
  • ?= n - Qualquer sequência que é seguida por uma sequência específica n
  • ?!n - String que não é seguida por uma string específica ni

Numbers and Math

Em JavaScript, você também pode trabalhar com números, constantes e executar funções matemáticas.

Propriedades de número

  • VALOR MÁXIMO - O valor numérico máximo representável em JavaScript
  • MIN_VALUE - Menor valor numérico positivo representável em JavaScript
  • NaN - O valor "Não é um número"
  • NEGATIVE_INFINITY - O valor infinito negativo
  • POSITIVE_INFINITY - Valor positivo do infinito

Métodos numéricos

  • toExponential () - Retorna a string com um número arredondado escrito como notação exponencial
  • toFixed () - Retorna a sequência de um número com um número especificado de casas decimais
  • toPrecision () - String de um número escrito com um comprimento especificado
  • para sequenciar() - Retorna um número como uma string
  • valor de() - Retorna um número como um número

Propriedades matemáticas

  • E - número de Euler
  • LN2 - O logaritmo natural de 2
  • LN10 - Logaritmo natural de 10
  • LOG2E - Logaritmo da base 2 de E
  • LOG10E - Logaritmo da base 10 de E
  • PI - o número PI
  • SQRT1_2 - Raiz quadrada de 1/2
  • SQRT2 - A raiz quadrada de 2

Métodos matemáticos

  • abs (x) - Retorna o valor absoluto (positivo) de x
  • acos (x) - A arccosina de x, em radianos
  • asin (x) - Arco de seno de x, em radianos
  • atan (x) - O arco tangente de x como um valor numérico
  • atan2 (y, x) - Arctangente do quociente de seus argumentos
  • teto (x) - Valor de x arredondado para o número inteiro mais próximo
  • cos (x) - O cosseno de x (x está em radianos)
  • exp (x) - Valor de Ex
  • piso (x) - O valor de x arredondado para o número inteiro mais próximo
  • log (x) - O logaritmo natural (base E) de x
  • max (x, y, z, ..., n) - Retorna o número com o valor mais alto
  • min (x, y, z, ..., n) - O mesmo para o número com o valor mais baixo
  • pow (x, y) - X ao poder de y
  • aleatória() - Retorna um número aleatório entre 0 e 1
  • redondo (x) - O valor de x arredondado para o número inteiro mais próximo
  • pecado (x) - O seno de x (x está em radianos)
  • sqrt (x) - Raiz quadrada de x
  • bronzeado (x) - A tangente de um ângulo

Lidando com datas em JavaScript

Você também pode trabalhar e modificar datas e horas com JavaScript. Este é o próximo capítulo da planilha de JavaScript.

Definir datas

  • Encontro() - Cria um novo objeto de data com a data e hora atuais
  • Data (2017, 5, 21, 3, 23, 10, 0) - Crie um objeto de data personalizado. Os números representam um ano, mês, dia, hora, minutos, segundos, milissegundos. Você pode omitir o que quiser, exceto um ano e um mês.
  • Data ("23/06/2017") - Declaração de data como uma string

Obtendo valores de data e hora

  • getDate () - Obtenha o dia do mês como um número (1-31)
  • getDay () - O dia da semana como um número (0-6)
  • getFullYear () - Ano como um número de quatro dígitos (aaaa)
  • getHours () - Obtenha a hora (0-23)
  • getMilliseconds () - O milissegundo (0-999)
  • getMinutes () - Receba os minutos (0-59)
  • getMonth () - Mês como um número (0-11)
  • getSeconds () - Obter o segundo (0-59)
  • consiga tempo() - Obtenha milissegundos desde 1 de janeiro de 1970
  • getUTCDate () - O dia (data) do mês na data especificada de acordo com a hora universal (também disponível para dia, mês, ano inteiro, horas, minutos etc.)
  • analisar - 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 () - Define o ano (opcionalmente mês e dia)
  • setHours () - Defina a hora (0-23)
  • setMilliseconds () - Definir milissegundos (0-999)
  • setMinutes () - Define os minutos (0-59)
  • setMonth () - Defina o mês (0-11)
  • setSeconds () - Define os segundos (0-59)
  • definir tempo() - Defina a hora (milissegundos desde 1º de janeiro de 1970)
  • setUTCDate () - Define o dia do mês para uma data especificada de acordo com a hora universal (também disponível para dia, mês, ano inteiro, horas, minutos etc.)

Modo DOM

O DOM é o Modelo de Objeto de Documento de uma página. É o código da estrutura de uma página da web. O JavaScript vem com várias maneiras diferentes de criar e manipular elementos HTML (chamados nós).

Propriedades do nó

  • atributos - Retorna uma coleção ao vivo de todos os atributos registrados em um elemento
  • baseURI - Fornece o URL base absoluto de um elemento HTML
  • childNodes - Fornece uma coleção de nós filhos de um elemento
  • primeiro filho - Retorna o primeiro nó filho de um elemento
  • lastChild - O último nó filho de um elemento
  • nextSibling - Fornece o próximo nó no mesmo nível da árvore de nós
  • nodeName - Retorna o nome de um nó
  • nodeType - Retorna o tipo de um nó
  • nodeValue - Define ou retorna o valor de um nó
  • ownerDocument - O objeto de documento de nível superior para este nó
  • parentNode - Retorna o nó pai de um elemento
  • previousSibling - Retorna o nó imediatamente anterior ao atual
  • textContent - Define ou retorna o conteúdo textual de um nó e seus descendentes

Métodos de nó

  • appendChild () - Adiciona um novo nó filho a um elemento como o último nó filho
  • cloneNode () - Clona um elemento HTML
  • compareDocumentPosition () - Compara 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 algum nó filho, caso contrário false
  • insertBefore () - Insere um novo nó filho antes de um nó filho especificado e existente
  • isDefaultNamespace () - Retorna true se um namespaceURI especificado for o padrão, caso contrário false
  • isEqualNode () - Verifica se dois elementos são iguais
  • isSameNode () - Verifica se dois elementos são o mesmo nó
  • é suportado() - Retorna true se um recurso especificado for suportado no elemento
  • lookupNamespaceURI () - Retorna o URI do namespace associado a um determinado nó
  • lookupPrefix () - Retorna um DOMString contendo o prefixo para um determinado URI de namespace, se presente
  • normalizar() - Une nós de texto adjacentes e remove nós de texto vazios em um elemento
  • removeChild () - Remove um nó filho de um elemento
  • replaceChild () - Substitui um nó filho em um elemento

Métodos de elemento

  • getAttribute () - Retorna o valor do atributo especificado de um nó do elemento
  • getAttributeNS () - Retorna o valor da string do atributo com o namespace e nome especificados
  • getAttributeNode () - Obtém o nó do atributo especificado
  • getAttributeNodeNS () - Retorna o nó do atributo para o atributo com o namespace e nome fornecidos
  • getElementsByTagName () - Fornece uma coleção de todos os elementos filhos com o nome de marca especificado
  • getElementsByTagNameNS () - Retorna uma HTMLCollection ao vivo de elementos com um determinado nome de tag pertencente ao namespace especificado
  • 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 espaço para nome tem o atributo especificado
  • removeAttribute () - Remove um atributo especificado de um elemento
  • removeAttributeNS () - Remove o atributo especificado de um elemento dentro de um determinado espaço para nome
  • removeAttributeNode () - Retira um nó de atributo especificado e retorna o nó removido
  • setAttribute () - Define ou altera 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 () - Define ou altera o nó do atributo especificado
  • setAttributeNodeNS () - Adiciona um novo nó de atributo no namespace a um elemento

Trabalhando com o navegador do usuário

Além dos elementos HTML, o JavaScript também pode levar em conta o navegador do usuário e incorporar suas propriedades no código.

Propriedades da janela

  • fechadas - Verifica se uma janela foi fechada ou não e retorna verdadeiro ou falso
  • defaultStatus - Define ou retorna o texto padrão na barra de status de uma janela
  • documento - Retorna o objeto de documento para a janela
  • quadros - Retorna tudo