learn wpu

Jscheatsheet

Fuente adicional: https://developer.mozilla.org/id/docs/web/javascript/a_reintroduction_to_javascript

Tipo de datos

• Número: (15 dígitos)

  1. Figuras sin decimales: 10, 123456, 3000
  2. Números decimales: 3.14, 0.5, 100.00
  3. Exponentes: 123E5 // 12300000, 123E-5 // 0.00123
  4. Números negativos: -0.134, -2, -100.00
  5. Número octal (base 8)
  6. Números hexadecimales (base 16)
  7. Números especiales: -infinidad, nan

• Operador

  1. Unary (requiere 1 operando) a. TypeOf Number, String, Boolean
  2. Binario (requiere 2 operando) a. Aritmética: +, -, _, /, % (módulo) Operador de precedencia: kurung, kali, divide, agregar, menos. b. Asignación: =, +=, -=, _ =, /=, %= c. Comparación (comparación): ==,! =, ===,! ==,>,> =, <, <= D. Logic: &&, ||,! mi. Cadena: acumatinación +
  3. Ternary (requiere 3 operando) a. condicional (condición)? correcto: incorrecto (x % 2 == 0)? "Incluso": "extraño"

• Carácter de escape de cuerda

  • 0 = nulo
  • '='
  • "="
  • =
  • n = nueva línea
  • t = Tab
  • B Backspace
  • uxxxx = unicode

Variable

• Declaración: Registre las variables en el alcance apropiado.

• Inicialización: proporcionar memoria para variables.

• Asignación: determine valores específicos en variables.

  Requisitos variables:

  • sin espacios.
  • Camelcase.
  • no comenzando con los números.
  • No use palabras clave y palabra reservada.
  • Alcance variable: local y global.

• Var, let & const

Refactorización: un proceso de cambiar el código para que sea mejor sin cambiar su funcionalidad.

 Alasan:

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

• Función de caja emergente:

  • Alerta
  • Inmediato
  • Confirmar

Flujo de control

• Repetición (bucle)

  1. mientras a. while (condición) {acción}; b. el valor inicial de while (condición de terminación) {acción; Incremento/disminución; }

  2. para (valor inicial; condiciones de terminación; incremento/ disminución) {acción; }

  3. Para de (cadena, matriz, argumentos, typedArray, map, set, iterables definidos por el usuario) const name = 'rama'; for (const n de nombre) {console.log (n); }

  4. para en (enumerable / propiedad del objeto) const mhs = {nombre: 'rama', edad: 29, correo electrónico: '[email protected]',}; para (m en mhs) {console.log (mhs [m]); }

  5. hacer mientras

• Selección (selección)

  1. si más if (condición) {acción 1; } else {Action 2; }
  2. más si if (condición 1) {acción 1; } else if (condición 2) {acción 2; } else if (condición n) {acción n; } else {acción predeterminada; }
  3. interruptor de interruptor (expresión) {Case "Valor 1": Acción 1; [Ruptura;] caso "Valor 2": Acción 2; [romper;] caso "valor n": acción n; [break;] predeterminado: acción predeterminada [break;]}

Función

• Función incorporada

  1. Alerta ();
  2. Confirmar ();
  3. Inmediato ();
  4. dividir ();
  5. rebanada ();
  6. etc.

• FUNCIÓN DE FUNCIÓN DEL USUARIO FUNCIÓN DE Nombre de palabra clave (parámetro/argumento *opcional) {function body; valor de retorno; *opcional} console.log (NameFunction (argumento));

  1. Declaración de funciones
  • Identificador de funciones (ParameterList Opt) {Function Body}
  • Más flexible
  • Ejemplo de principiantes fáciles de entender: número de función de números (a, b) {letra total; Total = a + b; Retorno total; }
  2. Expresión de funciones
  • Debe definirse antes de ser llamado
  • Declaración más poderosa (cierre, argumento para otras funciones, IFE) identificador de declaración = function (parameterList plag) {function body} Ejemplo: deja número de números = function (a, b) {let total; Total = a + b; Retorno total; }

Alcance

• Alcance global / de la ventana deja a = 1; console.log (a);
• Función de alcance de la función test () {Let B = 2; } prueba (); Console.log (b);
• Test de función de alcance de bloque () {Let C = 3; console.log (c); } prueba ();

Recursión: una función que se llama a sí mismo.

Implementación:

• Reemplazo de bucle
• Serie Fibonacci
• Búsqueda y búsquedas de listas de datos Listas y ejemplos de árboles: función factorial (n) {if (n === 0) return 1; Regreso n * factorial (n -1); }

Estructura de datos

• Array: Colección de elementos (valor / variable) que cada elemento tiene un índice. Función de matriz:

  • Facilitar la gestión / valor / gestión de datos
  • Ejemplo de gestión de la memoria: Let hari = ["lunes", "martes", "miércoles", 1];

• Manipulación de matriz

  • Número de elementos: longitud
  • Combinación: unir
  • Agregar y Eliminar: Al final: Push, Pop al principio: Deshift, Shift
  • conectar y cortar:
    1. Splice NameralArray.splice (Indexawal, Maudihausu, ElementBaru1, New Element2, ...);
    2. Slice dejar arraybaru = nameraRray.slice (indexawal, final);
  • Bucle:
    1. No en forma de matriz: foreach nameraray.forEach (función (parámetro) {action;})
    2. En forma de matriz: map nameraray.map (function (parámetro) {action;})
  • Array de clasificación: clasificar nameraRray.sort ();
  • Buscando elementos de matriz:
    1. Un valor: encontrar dejar arraybaru = nameraRray.find (function (parámetro) {return;})
    2. Muchos valores: Filtro Permitir arraybaru = nameraRray.filter (función (parámetro) {return;})

• Objeto: una colección de elementos (valor/ variable) que cada elemento tiene una propiedad.

  • Objeto literal: no es efectivo para muchos objetos. Sea nameBject = {Property1: Value1, Property2: Value2, Method1: Function1
    }
  • Función Declaración Objeto Función NameBject (param1, param2) {objeto de declaración = {}; Object.prperty1 = param1; Object.prperty2 = param2; Objeto de retorno; } Objeto nueva declaración = nameBject (value1, value2);
  • Función del constructor de objeto la función nameBject (param1, param2) {this.prperty1 = param1; este. ProgramaRTTY2 = param2; } Objeto nueva declaración = new nameBject (value1, value2); Este es un objeto de alcance global.
  • Objeto.create () función nameBject (param1, param2) {Declaración de objeto = objeto.create {}; Object.prperty1 = param1; Object.prperty2 = param2; Objeto de retorno; } Objeto nueva declaración = nameBject (value1, value2);
  • Función de herencia prototípica nameBject (param1, param2) {this.prperty1 = param1; este. ProgramaRTTY2 = param2; } NameObject.pototype.method1 = function1; NameObject.pototype.method2 = function2; NameObject.pototype.method3 = function3;
  • Prototipo en la clase Versión de clase Namaklas {constructor (param1, param2) {this.property1 = param1; este. ProgramaRTTY2 = param2; } Método1; Método2; Método3; }

Contexto

1. Fase de creación en el alcance global var name = Undefined Name Function = fn (), que es su función misma.
   • Ventana de elevación = objeto global this = Window
2. La función de la fase de ejecución hace que el contexto de ejecución local

Cierre

• es una combinación de función y alcance léxico en la función.
• Una función en la que tiene acceso al alcance principal, a pesar de que el alcance principal se ha completado. Ejemplo: Función NameFunction (Param1) {return namalocalFunction (param2) {function cuerpo}} Declaración nameVariable = namaFunction (argumento1); NamVariable (argumento2);

Función de flecha

• Otra forma que es más concisa que la expresión de la función. Ejemplo: Declaration Identifier = (ParameterList Opt) => {Function Body} Ejemplo: let número de números = (param1, param2) => {function body}; // Retorno implícito
• Esto en la función de flecha de flecha no se puede aplicar a esto. Ejemplo: Declaración nameBject = function (param1) {this.prperty1 = string; this.property2 = () => {Function Body}; } Declaración nameVariable = new nameBject ();

Función de orden superior

Función que opera en otras funciones (en el valor de argumento / retorno). JavaScript trata la función como un objeto. Por qué: abstracción, que es simplificar un programa porque cuanto mayor es un programa, mayor es la complejidad, más confuso es el programador.

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

Plantilla literal

es una cadena literal que permite la expresión en ella. Puede usar: ''; ""; Y ;

Con backtick ( ) puede hacer:

• String String: string text
• Cadena multiline: string text 1 string text 2 string text 3
• Expresión incrustada: string text ${expression} string text
• Fragmentos HTML
• Interpolación de expresión
• Plantillas etiquetadas:
  • Escapar / desinfectar etiquetas HTML
  • Traducción e internacionalización (i18n)
  • Componentes de estilo

Asignaciones de destrucción

Expresión en JS que nos hace capaces de desmantelar el valor del Dr. Array / Propiedad Dr. Object a una variable separada.

• Array const try = ['one', 'dos', 'tres']; const [a, b, c] = try;
• Object const mhs = {nombre: 'Ramadyan', edad: 25, correo electrónico: '[email protected]',}; const {nombre, edad, correo electrónico} = mhs;
• Función
  • En el valor de retorno
  • En los argumentos

Operador de propagación

Operadores que dividen los elementos individuales.

Parámetro de descanso

Representa el argumento en la función con jumalh ilimitado en una matriz.

Síncrono vs asíncrono

• Tarea de ejecución de entorno de un solo hilo vs múltiple
• Bloqueo de técnicas de Ngoding sin bloqueo (relacionadas con la entrada-salida)
• Ingeniería de ngoding síncrono vs asincrónico (solicitud HTTP relacionada)
• Tarea de ejecución de entorno paralelo VS Tarea de ejecución del entorno (infra, hardware y virtualización)

Llamar de vuelta

La función enviada como un parámetro en otra función.

Ejemplo: Función NameFunction (Namacallback) {Declaración de nombre valis = valor; Devolución de llamada (nombres); } NameFunction ((nameVar) => {console.log (ejecución);});

Promesa

Objeto que representa el éxito / fracaso de un evento de asíncrono en el futuro. Promesa (cumplido / rechazado / pendiente). Usando Callback => Action (resolve => entonces / rechazar => Catch / Pending => Finalmente).

Ejemplo: Declaración de nombre var1 = valor; const nameVar2 = new Promise ((resolve, rechazar) => {if (nameVar1) {resolve (valor);} else {rechazar (valor);}}); NamesVar2 .that ((respuesta) => console.log (ejecución)) .catch ((respuesta) => console.log (ejecución));

Ajax y buscar

Fetch es un método de API JS para tomar recursos de la red y devolver la promesa completa (llena) cuando hay una respuesta disponible. Notación: buscar (recursos, init);

• Recursos: Objeto URL / Solicitud (representación de solicitudes de origen).
• INIT: Configuración adicional en una solicitud de objeto (Ejemplo: obtener, publicar, método, encabezado, caché, etc.)
• Respuesta: Los resultados del Dr. Fetch en forma de promesa (propiedad y método).

Asíncrito y espera

• Una función que funciona asíncrono (a través del bucle de eventos),
• que produce una promesa (implícita) como valor de retorno,
• Pero la forma de escribir el código usando escritura síncrona (estándar).

Una función de Async puede tener una palabra clave esperada para detener temporalmente la ejecución de su función mientras espera la promesa de terminar (resolver).

DOM (modelo de objeto de documento): la representación del elemento HTML en el documento se convierte en un objeto. Almacenado en Dom Tree.

Beneficios de DOM:

• Como una interfaz de programación basada en objeto que representa documentos web.

• DOM hace que todos los componentes de las páginas web sean accesibles y manipulados.

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

• Árbol doméstico

  1. Nodelist: una colección que contiene cualquier nodo.
  2. HTMLCollection: una colección que contiene elementos HTML y está en vivo.

• Jerarquía:

  • Nodo raíz (documento): el nodo que es la fuente de todos los demás nodos en el DOM.
  • Nodo principal: el nodo que está un nivel por encima de otro nodo. Ej: El cuerpo es padre Dr. H1, P, Div y A.
  • Nodo infantil: el nodo que está un nivel por debajo de otro nodo. Ej: H1 es niño Dr. Body.

• Tipo de nodo tipo/ nodo:

  1. Elemento
  2. atributo
  3. texto
  4. Sección de cdata
  5. Referencia de entidad
  6. Entidad
  7. Instrucción de procesamiento
  8. Comentario
  9. Documento
  10. Tipo de documento
  11. fragmento de documentos
  12. Notación

• Selección DOM

  • Como usar elementos en HTML:
    1. GetLementById () = produce elementos.
    2. getElementsByTagName () = produce htmlcollection.
    3. getElementsByClassName () = produce htmlcollection.
  • Como usar un selector en CSS:
    1. QuerySector () = produce elementos.
    2. QUERYSECERALL () = Produce Nodelists.

• Manipulación DOM

  • Manipulación de elementos
    1. elemento.innerhtml = Cambiar el contenido del elemento seleccionado.
    2. Elemento. estilo. = Cambiar el estilo del elemento seleccionado.
    3. element.getAttribute () = conoce el contenido del atributo.
    4. element.setttribute () = Agregar atributos.
    5. element.removeAttribute () = Eliminar atributos.
    6. Element.ClassList:
       • Add () = Agregar clase.
       • Remove () = Eliminar clase.
       • Toggle () = Agregar clase si no está allí, elimine si es así.
       • Item () = clase de verificación con índice.
       • Contiene () = Verifique la clase en cuestión.
       • Reemplazar () = Cambiar la clase.
  • Manipulación de nodo
    1. document.createElement ()
    2. document.createTextNode ()
    3. node.ppendChild ()
    4. node.insertbefore ()
    5. parentNode.removechild ()
    6. parentNode.replaceChild ()

• Evento DOM

  • Handler de eventos = solo puede ejecutar el último comando.
    1. Atributo HTML en línea
    2. Método de elemento en
  • AddventListener () = se puede ejecutar muchas veces.

• DOM Traversal

  • ParentNode = nodo de resultado.
  • ParentElement = El resultado del elemento.
  • NEXTSIBLE = nodo de resultado.
  • NextElementsibling = El resultado del elemento.
  • ADCEFIBLE = Resultados del nodo.
  • AnteriorElementsibling = El resultado del elemento.

• Prevenir predeterminado

  • Para evitar la acción predeterminada, use el método: event.preventDefault ();

• Evento burbujeante

  • Cuando se ejecute el evento, ejecutará el evento en Parent antes de ir a hijos. Usando event.stopPropagate ();