learn wpu

JScheatsheet

Weitere Quelle: https://developer.mozilla.org/id/docs/web/javascript/a_re-introduction_to_javaScript

Datentyp

• Nummer: (15 Ziffern)

  1. Zahlen ohne Dezimalzahl: 10, 123456, 3000
  2. Dezimalzahlen: 3,14, 0,5, 100,00
  3. Exponenten: 123E5 // 12300000, 123E-5 // 0,00123
  4. Negative Zahlen: -0,134, -2, -100.00
  5. Oktalzahl (Basis 8)
  6. Hexadezimalzahlen (Basis 16)
  7. Besondere Zahlen: -Infinity, Nan

• Operator

  1. UNRARY (benötigt 1 Operand) a. Typof Nummer, String, Boolescher
  2. Binär (benötigt 2 Operanden) a. Arithmetik: +, -, _, /, % (Modul) Vorrangbetreiber: Kurung, Kali, Teilen, hinzufügen, weniger. B. Zuordnung: =, +=, -=, _ =, /=, %= c. Vergleich (Vergleich): ==,! =, ===,! ==,>,> =, <, <= D. logic: &&, ||,! e. String: Cumatination +
  3. Ternärer (erfordert 3 Operanden) a. Bedingung (Zustand)? Richtig: Falsch (x % 2 == 0)? "Sogar": "seltsam"

• String Escape -Zeichen

  • 0 = null
  • '='
  • "="
  • =
  • n = neue Zeile
  • t = tab
  • B Rückraum
  • uxxxx = unicode

Variable

• Deklaration: Registrieren Sie Variablen in den entsprechenden Bereich.

• Initialisierung: Speicher für Variablen.

• Zuordnung: Bestimmen Sie bestimmte Werte in Variablen.

  Variable Anforderungen:

  • ohne Leerzeichen.
  • Kamelase.
  • nicht mit Zahlen beginnen.
  • Verwenden Sie keine Schlüsselwörter und reserviertes Wort.
  • Variabler Bereich: Lokal & global.

• Var, let & const

Refactoring: Ein Prozess des Änderns des Code, um besser zu werden, ohne seine Funktionalität zu ändern.

 Alasan:

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

• Popup -Box -Funktion:

  • Alarm
  • Prompt
  • Bestätigen

Kontrollfluss

• Wiederholung (Schleife)

  1. während a. while (Bedingung) {action}; B. Der Anfangswert der Zeit (Terminierungsbedingung) {Aktion; Inkrement/Dekrement; }

  2. für (Anfangswert; Terminierungsbedingungen; Inkrement/ Dekrement) {Aktion; }

  3. Für (String, Array, Argumente, TypeDarray, Karte, festgelegt, benutzerdefinierte Iterables) const name = 'rama'; für (const n des Namens) {console.log (n); }

  4. für in (aufzählbar / Eigenschaft vom Objekt) const Mhs = {Name: 'Rama', Alter: 29, E -Mail: '[email protected]',}; für (m in mhs) {console.log (mhs [m]); }

  5. tu während

• Auswahl (Auswahl)

  1. wenn sonst wenn (Bedingung) {Aktion 1; } else {action 2; }
  2. sonst wenn wenn (Bedingung 1) {Aktion 1; } else if (Bedingung 2) {Aktion 2; } else if (Bedingung n) {action n; } else {Standard -Aktion; }
  3. Switch Switch (Ausdruck) {Fall "Wert 1": Aktion 1; [Break;] Fall "Wert 2": Aktion 2; [Break;] Fall "Wert n": Aktion n; [Break;] Standard: Standardaktion [Break;]}

Funktion

• Integrierte Funktion

  1. Alarm ();
  2. Bestätigen ();
  3. Prompt ();
  4. Teilt ();
  5. Slice ();
  6. usw.

• Benutzerdefinierte Funktion Schlüsselwort Namefunktion (Parameter/Argument *optional) {Funktionsbody; Rückgabewert; *optional} console.log (nameFunction (argument));

  1. Funktionserklärung
  • Funktionsbezeichnung (Parameterlist Opt) {Funktionsbody}
  • Flexibler
  • Einfach zu verstehen Anfänger Beispiel: Funktionsnummer der Zahlen (a, b) {Gesamtbuchstaben; Insgesamt = a + b; Gesamtrendite; }
  2. Funktionsausdruck
  • Muss definiert werden, bevor er angerufen wird
  • Leistungsfähiger (Verschluss, Argument für andere Funktionen, iife) Deklarationsidentifier = Funktion (Parameterlist -Schädling) {Funktionsbody} Beispiel: Set Anzahl der Zahlen = Funktion (a, b) {let Total; Insgesamt = a + b; Gesamtrendite; }

Umfang

• Globaler / Fensterbereich Sei a = 1; console.log (a);
• Funktionsbereich Funktion test () {let b = 2; } prüfen (); Console.log (b);
• Block Scope Function test () {lass c = 3; console.log (c); } prüfen ();

Rekursion: Eine Funktion, die sich selbst nennt.

Durchführung:

• Schleifen ersetzen
• Fibonacci -Serie
• Such- und Suchanfragen von Datenlistenlisten- und Baumbeispielen: faktorielle Funktion (n) {if (n === 0) return 1; Return n * factorial (n -1); }

Datenstruktur

• Array: Sammlung von Elementen (Wert / Variable), das jedes Element einen Index hat. Array -Funktion:

  • Erleichterung des Managements / Wert- / Datenmanagements
  • Beispiel für Speicherverwaltung: let Hari = ["Montag", "Dienstag", "Mittwoch", 1];

• Array -Manipulation

  • Anzahl der Elemente: Länge
  • Kombinieren: Join
  • Hinzufügen & Löschen: Am Ende: Push, Pop am Anfang: Unschänder, Verschiebung
  • verbinden und schneiden:
    1. Splice nameralarray.splice (Indexawal, Maudihausu, ElementBaru1, neues Element2, ...);
    2. Slice let arrayBaru = namerArray.slice (indexawal, Ende);
  • Schleifen:
    1. Nicht in Form von Array: foreach nameraray.foreach (Funktion (Parameter) {Aktion;})
    2. In der Form von Array: map nameraray.map (Funktion (Parameter) {action;})
  • Sortieren Sie Array: Sortieren Sie namerArray.sort ();
  • Auf der Suche nach Array -Elementen:
    1. Ein Wert: Find let arrayBaru = namerArray.find (Funktion (Parameter) {return;})
    2. Viele Werte: Filter let arrayBaru = namerArray.filter (Funktion (Parameter) {return;})

• Objekt: Eine Sammlung von Elementen (Wert/ Variable), die jedes Element über eine Eigenschaft verfügt.

  • Literales Objekt: Nicht effektiv für viele Objekte. Lass nameBject = {Eigenschaft1: value1, Eigenschaft2: value2, methode1: function1
    }
  • Funktion deklaration Objekt Funktion nameBject (param1, param2) {deklarationsobjekt = {}; Object.Prperty1 = param1; Object.Prperty2 = param2; Objekt zurückgeben; } Objekt new Declaration = nameBject (value1, value2);
  • Funktionsfunktion des Objektkonstruktors nameBject (param1, param2) {this.Prperty1 = param1; Das. ProgrammRty2 = param2; } Objekt Neue Deklaration = new nameBject (value1, value2); Dies ist ein globales Zielfernrohrobjekt.
  • Object.create () Funktion nameBject (param1, param2) {deklaration von Object = Object.create {}; Object.Prperty1 = param1; Object.Prperty2 = param2; Objekt zurückgeben; } Objekt new Declaration = nameBject (value1, value2);
  • Prototypale Vererbungsfunktion NameBject (Param1, Param2) {this.Prperty1 = param1; Das. ProgrammRty2 = param2; } NameObject.Pototype.Method1 = Funktion1; NameObject.pototype.method2 = function2; NameObject.pototype.method3 = function3;
  • Prototyp in der Klassenversion Klasse Namaklas {Constructor (param1, param2) {this.property1 = param1; Das. ProgrammRty2 = param2; } Method1; Methode2; Methode3; }

Kontext

1. Erstellungsphase im globalen Bereich var name = undefined Name Funktion = fn (), das seine Funktion selbst ist.
   • Hebefenster = globales Objekt Dieses = Fenster
2. Ausführungsphasenfunktion stellt den lokalen Ausführungskontext aus

Schließungen

• ist eine Kombination aus Funktion und lexikalischem Umfang in der Funktion.
• Eine Funktion, wenn es zu Zugriff auf übergeordnete Umfang hat, obwohl das übergeordnete Umfang abgeschlossen wurde. Beispiel: Funktion nameFunction (param1) {return namalocalfunction (param2) {Funktionsbody}} Deklaration nameVariable = namafunction (argument1); NameVariable (Argument2);

Pfeilfunktion

• Eine andere Form, die prägnanter ist als der Funktionsausdruck. Beispiel: Deklarationsidentifier = (ParameterList opt) => {Funktionsbody} Beispiel: Set Anzahl der Zahlen = (param1, param2) => {Funktionsbody}; // implizite Rendite
• Dies kann in der Pfeilfunktionsfunktion nicht darauf angewendet werden. Beispiel: deklaration nameBject = function (param1) {this.Prperty1 = String; this.property2 = () => {Funktionsbody}; } Deklaration nameVariable = new nameBject ();

Funktionen höherer Ordnung

Funktion, die in anderen Funktionen arbeitet (im Argument / Rückgabewert). JavaScript behandelt die Funktion als Objekt. WARUM: Abstraktion, bei der es darum geht, ein Programm zu vereinfachen, da umso verwirrender der Programmierer, je größer ein Programm ist, desto höher ist die Komplexität.

• Array.pototype.map ()
• Array.Pototype.filter ()
• Array.Pototype.Reduce ()

Wörtliche Vorlage

ist eine wörtliche Schnur, die den Ausdruck darin ermöglicht. Kann verwenden: ''; ""; Und ;

Mit Backtick ( ) kann machen:

• Singleline Zeichenfolge: string text
• Multiline Zeichenfolge: string text 1 string text 2 string text 3
• Eingebetteter Ausdruck: string text ${expression} string text
• HTML -Fragmente
• Expression Interpolation
• Tagged Vorlagen:
  • HTML -Tags entkommen / sanieren
  • Übersetzung & Internationalisierung (i18n)
  • Gestaltete Komponenten

Aufträge zerstören

Ausdruck auf JS, der uns in der Lage macht, den Wert von Dr. Array / Eigenschaft Dr. Object in eine separate Variable abzubauen.

• Array const try = ['eins', 'zwei', 'drei']; const [a, b, c] = try;
• Objekt const Mhs = {Name: 'Ramadyan', Alter: 25, E -Mail: '[email protected]',}; const {Name, Alter, E -Mail} = mhs;
• Funktion
  • Auf Rückgabewert
  • Über die Argumente

Operator ausbreiten

Operatoren, die Itlebles in einzelne Elemente zerlegen.

Ruheparameter

Repräsentiert das Argument in der Funktion mit unbegrenztem Jumalh in ein Array.

Synchron gegen asynchron

• Einzel-Thread-VS-Multi-Thread-Umgebungsausführungsaufgabe
• Blockierung gegen nicht blockierende Ngodierungstechniken (input-output verwandt)
• Synchron gegen asynchrones Ngoding -Engineering (HTTP -Anforderung verwandt)
• Gleichzeitige VS -Aufgabe zur Ausführung von Umgebungsumführungen (Infra, Hardware und Virtualisierung)

Rückruf

Die Funktion als Parameter in einer anderen Funktion gesendet.

Beispiel: FunktionsnameFunktion (Namacallback) {Deklaration des Namens valis = value; Rückruf (Namen); } NameFunction ((namevar) => {console.log (Ausführung);});

Versprechen

Objekt, das den Erfolg / Misserfolg eines asynchronen Ereignisses in der Zukunft darstellt. Versprechen (erfüllt / abgelehnt / ausstehend). Verwenden Sie Callback => Aktion (Resolve => dann / reject => catch / anhängig => Schließlich).

Beispiel: Name der Namensname var1 = Wert; const namevar2 = new Promise ((Resolve, ablehnen) => {if (namevar1) {Resolve (value);} else {reject (value);}}); namesvar2 .That ((Antwort) => console.log (Ausführung)) .Catch ((Antwort) => console.log (Ausführung));

Ajax & Fetch

Fetch ist eine Methode der API -JS, um Ressourcen aus dem Netzwerk zu entnehmen und das vollständige Versprechen (voll ausgefüllt) zurückzugeben, wenn eine Antwort verfügbar ist. Notation: Fetch (Ressourcen, init);

• Ressourcen: URL / Anforderungsobjekt (Darstellung von Quellanfragen).
• Init: Zusätzliche Konfiguration in einer Objektanforderung (Beispiel: Get, Post, Methode, Header, Cache usw.)
• Antwort: Die Ergebnisse von Dr. Fetch in Form von Versprechen (Eigenschaft und Methode).

Async & wartet

• Eine Funktion, die asynchron funktioniert (über Ereignisschleife),
• das erzeugt (implizites) Versprechen als Rückgabewert,
• Aber die Art, den Code mit synchronem Schreiben (Standard) zu schreiben.

Eine asynchronisierte Funktion kann ein Keyword im Keyword haben, um die Ausführung ihrer Funktion vorübergehend zu stoppen und gleichzeitig auf das Versprechen zu warten (Entschlossenheit).

DOM (Dokumentobjektmodell): Die Darstellung des HTML -Elements im Dokument wird zu einem Objekt. In Dom Tree gespeichert.

DOM -Vorteile:

• Als Objektbasis -Programmierschnittstelle, die Webdokumente darstellt.

• DOM macht alle Komponenten von Webseiten zugänglich und manipuliert.

• Komponenten: HTML -Elemente, Attribute, Text usw.

• Dombaum

  1. Nodelist: Eine Sammlung, die einen Knoten enthält.
  2. HTMLCollection: Eine Sammlung, die HTML -Elemente enthält und live ist.

• Hierarchie:

  • Stammknoten (Dokument): Der Knoten, der die Quelle aller anderen Knoten im DOM ist.
  • Elternknoten: Der Knoten, der eine Ebene über einem anderen Knoten ist. Beispiel: Körper ist Eltern Dr. H1, P, Div & A.
  • Kinderknoten: Der Knoten, der eine Ebene unter einem anderen Knoten ist. Beispiel: H1 ist Kind Dr. Body.

• Knotentyp Typ/ Knoten:

  1. Element
  2. Attribut
  3. Text
  4. CDATA -Abschnitt
  5. Entitätsreferenz
  6. Juristische Person
  7. Verarbeitungsanweisung
  8. Kommentar
  9. Dokumentieren
  10. Dokumenttyp
  11. Dokumentfragment
  12. Notation

• DOM -Auswahl

  • Wie die Verwendung von Elementen in HTML:
    1. GetlementById () = erzeugt Elemente.
    2. GetElementsByTagName () = erzeugt htmlcollection.
    3. GetElementsByClassName () = Erzeugt HTMLCollection.
  • Als würde man einen Selektor auf CSS tragen:
    1. Queryector () = erzeugt Elemente.
    2. QueryectorAll () = erzeugt Nodelisten.

• DOM Manipulation

  • Elementmanipulation
    1. Element.innerHtml = Ändern Sie den Inhalt des ausgewählten Elements.
    2. Element.Style. = Ändern des Stils des ausgewählten Elements.
    3. element.getAttribute () = Kennen Sie den Inhalt des Attributs.
    4. element.setttribute () = Attribute hinzufügen.
    5. Element.RemoveAttribute () = Attribute löschen.
    6. Element.ClassList:
       • Add () = Klasse hinzufügen.
       • Entfernen () = Klasse löschen.
       • Toggle () = Klasse hinzufügen, wenn nicht da, löschen Sie, wenn es vorhanden ist.
       • Item () = Überprüfung der Klasse mit Index.
       • Enthält () = die betreffende Klasse überprüfen.
       • Ersetzen () = die Klasse ändern.
  • Knotenmanipulation
    1. document.createelement ()
    2. document.CreateTextNode ()
    3. node.ppendChild ()
    4. node.insertBefore ()
    5. parentNode.removechild ()
    6. parentNode.replacechild ()

• DOM -Ereignis

  • Ereignishandler = kann nur den letzten Befehl ausführen.
    1. Inline -HTML -Attribut
    2. Elementmethode auf
  • AddVentListener () = kann viele Male ausgeführt werden.

• DOM Traversal

  • ParentNode = Ergebnisknoten.
  • ParentElement = das Ergebnis des Elements.
  • Nextsibling = Ergebnisknoten.
  • NextElementSibling = Das Ergebnis des Elements.
  • Adcefibling = Knotenergebnisse.
  • Vorherige Auslöser = Das Ergebnis des Elements.

• Standard -Verhinderung

  • Um Standardaktionen zu verhindern, verwenden Sie die Methode: Ereignis.PreventDefault ();

• Sprudelnder Ereignis

  • Wenn die Veranstaltung ausgeführt wird, wird das Ereignis bei Eltern ausgeführt, bevor er zum Kind geht. Mit Event.StopPropagate ();