learn wpu

Jscheatsheet

Fonte adicional: https://developer.mozilla.org/id/docs/web/javascript/a_re-introduction_to_javascript

Tipo de dados

• Número: (15 dígitos)

  1. Figuras sem decimal: 10, 123456, 3000
  2. Números decimais: 3,14, 0,5, 100,00
  3. Expoentes: 123E5 // 12300000, 123E-5 // 0,00123
  4. Números negativos: -0.134, -2, -100,00
  5. Número octal (base 8)
  6. Números hexadecimais (base 16)
  7. Números especiais: -Infinity, NAN

• Operador

  1. Unário (requer 1 operando) a. tipo de número, string, booleano
  2. Binário (requer 2 operando) a. Aritmética: +, -, _, /, % (módulo) Operador de precedência: kurung, kali, divida, adicione, menos. b. Atribuição: =, +=, -=, _ =, /=, %= c. Comparação (comparação): ==,! =, ===,! ==,>,> =, <, <= D. Logic: &&, ||,! e. String: Cumatination +
  3. Ternário (requer 3 operando) a. condicional (condição)? Certo: errado (x % 2 == 0)? "Até": "estranho"

• Caráter de Escape de String

  • 0 = nulo
  • '='
  • "="
  • =
  • n = nova linha
  • t = guia
  • B Backspace
  • uxxxx = unicode

Variável

• Declaração: registre variáveis ​​no escopo apropriado.

• Inicialização: fornecendo memória para variáveis.

• Atribuição: determine valores específicos em variáveis.

  Requisitos variáveis:

  • sem espaços.
  • Camelcase.
  • Não está começando com números.
  • Não use palavras -chave e palavra reservada.
  • Escopo variável: local e global.

• Var, let & const

Refatoração: um processo de alteração do código para melhorar sem alterar sua funcionalidade.

 Alasan:

-   Readability
-   DRY, dont repeat yourself
-   Testability
-   Performance
-   Maintainability

• Função da caixa pop -up:

  • Alerta
  • Incitar
  • Confirmar

Fluxo de controle

• Repetição (loop)

  1. enquanto um. while (condição) {ação}; b. o valor inicial de while (condição de terminação) {ação; Incremento/decréscimo; }

  2. for (valor inicial; condições de terminação; incremento/ decremento) {ação; }

  3. Para (string, matriz, argumentos, typeDArray, mapa, set, iterables definido pelo usuário) const name = 'rama'; for (const n do nome) {console.log (n); }

  4. para in (enumerável / propriedade do objeto) const mhs = {name: 'rama', idade: 29, e -mail: '[email protected]',}; para (m em mhs) {console.log (mhs [m]); }

  5. faça enquanto

• Seleção (seleção)

  1. se else if (condição) {ação 1; } else {ação 2; }
  2. caso contrário, if (condição 1) {ação 1; } else if (condição 2) {ação 2; } else if (condição n) {ação n; } else {ação padrão; }
  3. Switch Switch (expressão) {case "Valor 1": Ação 1; [Quebra;] Caso "Valor 2": Ação 2; [quebra;] Caso "Valor n": ação n; [Break;] Padrão: Ação Padrão [Break;]}

Função

• Função interna

  1. Alert ();
  2. Confirm ();
  3. Incitar ();
  4. dividir ();
  5. fatiar ();
  6. etc.

• Função definida pelo usuário Palavra-chave Namefunction (parâmetro/argumento *opcional) {função body; valor de retorno; *opcional} console.log (Namefunction (argumento));

  1. Declaração de função
  • Função identificador (parameterlist opt) {função corpo}
  • Mais flexível
  • Fácil de entender para iniciantes Exemplo: Número da função de números (a, b) {letra total; Total = a + b; Retorno total; }
  2. Expressão da função
  • Deve ser definido antes de ser chamado
  • Mais poderoso (fechamento, argumento para outras funções, identificador de declaração IIFE) = função (função (parameterlist praga) {função body} Exemplo: deixe o número de números = function (a, b) {let total; Total = a + b; Retorno total; }

Escopo

• Escopo global / de janela, deixe A = 1; console.log (a);
• Função função função test () {let b = 2; } teste (); Console.log (b);
• Block Scope Função Test () {Let C = 3; console.log (c); } teste ();

Recursão: uma função que se autodenomina.

Implementação:

• Substituindo looping
• Série Fibonacci
• Pesquisa e pesquisas da lista de listas de dados e exemplos de árvores: função fatorial (n) {if (n === 0) retornar 1; Retornar n * fatorial (n -1); }

Estrutura de dados

• Array: Coleção de elementos (valor / variável) que cada elemento possui um índice. Função da matriz:

  • Facilitar o gerenciamento / valor / gerenciamento de dados
  • Exemplo de gerenciamento de memória: deixe hari = ["segunda -feira", "terça -feira", "quarta -feira", 1];

• Manipulação da matriz

  • Número de elementos: comprimento
  • Combinando: junte -se
  • Adicione e exclua: No final: empurre, estalado no início: desvincular, turno
  • Conecte e corte:
    1. Splice nameralArray.splice (indexawal, maudihausu, elementbaru1, novo elemento2, ...);
    2. Slice Let Arraybaru = NamerArray.slice (indexawal, final);
  • Looping:
    1. Não na forma de matriz: foreach nameraray.foreach (function (parâmetro) {action;})
    2. Na forma de matriz: mapa nameRaray.map (function (parâmetro) {action;})
  • Matriz de classificação: classificar namerarray.sort ();
  • Procurando por elementos de matriz:
    1. Um valor: Encontre Let ArrayBaru = namerArray.find (function (parâmetro) {return;})
    2. Muitos valores: filtre, deixe Arraybaru = namerarray.filter (function (parâmetro) {return;})

• Objeto: uma coleção de elementos (valor/ variável) que cada elemento possui uma propriedade.

  • Objeto literal: não é eficaz para muitos objetos. Let NameBject = {Property1: Value1, Property2: Value2, Method1: Function1
    }
  • Função Declaração Objeto Função NameBject (param1, param2) {objeto de declaração = {}; Object.prperty1 = param1; Object.prperty2 = param2; objeto de retorno; } Objeto nova declaração = namebject (value1, value2);
  • Função da função do construtor de objeto NameBject (param1, param2) {this.prperty1 = param1; esse. Programarty2 = param2; } Objeto nova declaração = new NameBject (value1, value2); Este é um objeto de escopo global.
  • Object.Create () função NameBject (param1, param2) {Declaração de object = object.create {}; Object.prperty1 = param1; Object.prperty2 = param2; objeto de retorno; } Objeto nova declaração = namebject (value1, value2);
  • Função de herança prototípica NameBject (param1, param2) {this.prperty1 = param1; esse. Programarty2 = param2; } NameoBject.potype.method1 = function1; NameObject.poType.method2 = function2; NameObject.pototype.method3 = function3;
  • Protótipo na classe Class class Namaklas {construtor (param1, param2) {this.property1 = param1; esse. Programarty2 = param2; } Método1; Método2; Método3; }

Contexto

1. Fase de criação no escopo global var nome = função indefinida = fn (), que é sua própria função.
   • Janela de elevação = objeto global esta = janela
2. A função da fase de execução faz o contexto de execução local

Fechamentos

• é uma combinação de função e escopo lexical na função.
• Uma função quando tem acesso ao escopo dos pais, mesmo que o escopo dos pais tenha sido concluído. Exemplo: function namefunction (param1) {return namalocalfunction (param2) {function body}} declaração nameVariable = namafunction (argument1); NameVariable (argumento2);

Função de seta

• Outra forma que é mais concisa que a expressão da função. Exemplo: identificador de declaração = (parameterlist opt) => {função body} Exemplo: deixe o número de números = (param1, param2) => {função corpo}; // retorno implícito
• Isto na função de seta Função de seta não pode ser aplicada a isso. Exemplo: Declaração namebject = function (param1) {this.prperty1 = string; this.Property2 = () => {função corpo}; } Declaração nameVariable = new NameBject ();

Função de ordem superior

Função que opera em outras funções (no valor do argumento / retorno). JavaScript trata a função como um objeto. Por que: abstração, que é para simplificar um programa porque quanto maior um programa, maior a complexidade, mais confuso o programador.

• Array.pototype.map ()
• Array.pototype.filter ()
• Array.pototype.reduce ()

Modelo literal

é uma corda literal que permite a expressão nela. Pode usar: ''; ""; E ;

Com backtick ( ) pode fazer:

• Singleline String: string text
• Multiline String: string text 1 string text 2 string text 3
• Expressão incorporada: string text ${expression} string text
• Fragmentos HTML
• Interpolação de expressão
• Modelos marcados:
  • Tags HTML escapando / higienizadas
  • Tradução e Internacionalização (I18N)
  • Componentes estilizados

Atribuições de destruição

Expressão no JS, o que nos torna capazes de desmontar o valor do Dr. Array / Propriedade Dr. Objeto em uma variável separada.

• Array const Try = ['One', 'Two', 'Three']; const [a, b, c] = tente;
• Objeto const mhs = {nome: 'ramadyan', idade: 25, e -mail: '[email protected]',}; const {nome, idade, email} = mhs;
• Função
  • No valor de retorno
  • Nos argumentos

Operador espalhado

Operadores que dividem os elementos únicos.

Parâmetro de repouso

Representa o argumento na função com Jumalh ilimitado em uma matriz.

Síncrono vs assíncrono

• Tarefa de execução de ambiente de thread único vs multi-thread
• Técnicas de bloqueio vs não bloqueando NGODING (Relacionado de entrada e saída)
• Engenharia síncrona vs assíncrona ngoding (solicitação HTTP relacionada)
• Tarefa de execução do ambiente paralelo concorrente vs (infra, hardware e virtualização relacionada)

Ligar de volta

A função enviada como um parâmetro em outra função.

Exemplo: function namefunction (namacallback) {declaração do nome valis = value; Retorno de chamada (nomes); } Namefunction ((namevar) => {console.log (execução);});

Promessa

Objeto que representa o sucesso / falha de um evento assíncrono no futuro. Promessa (cumprida / rejeitada / pendente). Usando retorno de chamada => ação (resolve => então / reject => Catch / pendente => finalmente).

Exemplo: Declaração do nome var1 = valor; const namevar2 = nova promessa ((resolver, rejeitar) => {if (namevar1) {resolver (value);} else {rejeit (value);}}); namesvar2 .athat ((resposta) => console.log (execução)) .catch (((resposta) => console.log (execução));

Ajax & busca

A busca é um método de API JS para obter recursos da rede e retornar a promessa completa (preenchida) quando houver uma resposta disponível. Notação: buscar (Recursos, init);

• Recursos: objeto URL / solicitação (representação das solicitações de origem).
• Init: Configuração adicional em uma solicitação de objeto (Exemplo: Get, Post, Método, Cabeçalho, Cache, etc.)
• Resposta: Os resultados do Dr. Fetch na forma de promessa (propriedade e método).

Assíncrono e aguardar

• Uma função que funciona assíncrona (através do loop de eventos),
• que produz (implícito) promessa como um valor de retorno,
• Mas a maneira de escrever o código usando a escrita síncrona (padrão).

Uma função assíncrona pode ter uma palavra -chave aguarda para interromper temporariamente a execução de sua função enquanto aguarda a promessa de terminar (resolver).

DOM (Modelo de objeto Document): a representação do elemento HTML no documento se torna um objeto. Armazenado na árvore dom.

DOM Benefícios:

• Como uma interface de programação baseada em objeto que representa documentos da Web.

• DOM torna todos os componentes das páginas da web acessíveis e manipuladas.

• Componentes: elementos HTML, atributos, texto, etc.

• Dom Tree

  1. Nodelist: uma coleção que contém qualquer nó.
  2. Htmlcollection: uma coleção que contém elementos HTML e está ao vivo.

• Hierarquia:

  • Nó raiz (documento): o nó que é a fonte de todos os outros nós no DOM.
  • Nó pai: o nó que está um nível acima de outro nó. Ex: Body é pai Dr. H1, P, Div & A.
  • Nó Infantil: O nó que é um nível abaixo de outro nó. Ex: H1 é criança Dr. Body.

• Tipo/ nó do tipo de nó:

  1. Elemento
  2. atributo
  3. texto
  4. Seção CDATA
  5. Referência da entidade
  6. Entidade
  7. Instrução de processamento
  8. Comentário
  9. Documento
  10. Tipo de documento
  11. Fragmento de documentos
  12. Notação

• Seleção DOM

  • Como usar elementos em html:
    1. GetLelessById () = produz elementos.
    2. getElementsByTagName () = produz htmlcollection.
    3. getElementsByClassName () = produz htmlcollection.
  • Como usar um seletor no CSS:
    1. QuerySector () = produz elementos.
    2. QuerySectorall () = produz nodelistas.

• Manipulação de dom

  • Manipulação do elemento
    1. element.innerhtml = altere o conteúdo do elemento selecionado.
    2. element.style. = Alterando o estilo do elemento selecionado.
    3. Element.getAttribute () = Conheça o conteúdo do atributo.
    4. Element.Setttribute () = Adicionar atributos.
    5. Element.RemoveAttribute () = Excluir atributos.
    6. Element.ClassList:
       • Add () = Adicionando classe.
       • Remover () = excluir classe.
       • Toggle () = Adicionando classe Se não estiver lá, exclua se houver.
       • Item () = CHECKING CLASS com índice.
       • Contém () = verifique a classe em questão.
       • Substitua () = alterando a classe.
  • Manipulação do nó
    1. document.createElement ()
    2. document.createTextNode ()
    3. Node.PpendChild ()
    4. node.insertBefore ()
    5. parentnode.removechild ()
    6. parentnode.replacechild ()

• Evento DOM

  • Manipulador de eventos = pode executar apenas o último comando.
    1. Atributo HTML embutido
    2. Método do elemento
  • AddventListener () = pode ser executado muitas vezes.

• Dom Traversal

  • PIlestNode = nó de resultado.
  • ParentElement = o resultado do elemento.
  • NextSibling = Nó de resultado.
  • NextElementsibling = o resultado do elemento.
  • ACCEFIBLING = Resultados do nó.
  • Anteriorlementsibling = o resultado do elemento.

• Prevenir padrão

  • Para impedir a ação padrão, use o método: event.preventDefault ();

• Evento borbulhante

  • Quando o evento for realizado, ele será executado no evento antes de ir para a criança. Usando event.stopPropagate ();