1. Erste Kenntnisse in JavaScript

1.1 Ausblick

CSS-Präprozessor Der
CSS-Präprozessor definiert eine neue Sprache. Seine Grundidee besteht darin, eine spezielle Programmiersprache zu verwenden, um einige
Programmierfunktionen zu CSS hinzuzufügen, CSS als Ziel zum Generieren von Dateien zu verwenden und Entwickler diese Sprache dann nur noch für die CSS-Codierung zu verwenden. In leicht verständliche Worte zu übersetzen
bedeutet: „Verwenden Sie eine spezielle Programmiersprache, um den Webseitenstil zu entwerfen, und konvertieren Sie ihn dann
über einen Compiler in eine normale CSS-Datei für die Projektverwendung.“
Was sind die am häufigsten verwendeten CSS-Präprozessoren?

SASS: Basierend auf Ruby, wird es über den Server verarbeitet und verfügt über leistungsstarke Funktionen. Hohe Analyseeffizienz. Sie müssen die Ruby-Sprache lernen, was schwieriger ist als LESS.

WENIGER: Basierend auf NodeJS, vom Client verarbeitet, einfach zu verwenden. Die Funktion ist einfacher als SASS und die Analyseeffizienz ist geringer

SASS, aber in der tatsächlichen Entwicklung reicht es aus, daher empfehlen wir bei Bedarf die Verwendung von LESS.

1.2 Einführung in JavaScript

JavaScript ist eine objektbasierte und ereignisgesteuerte clientseitige Skriptsprache mit relativer Sicherheit. Es wird häufig in verschiedenen Client-Webprogrammen verwendet, insbesondere in der HTML-Entwicklung. Es kann HTML-Webseiten dynamische Funktionen hinzufügen, auf verschiedene Benutzervorgänge reagieren und Spezialeffekte wie Begrüßungsinformationen, digitalen Kalender, Laufschrift und Browseranzeige realisieren Verweildauer. Verbessern Sie die Sichtbarkeit von Webseiten.

1.3 JavaScript-Framework

jQuery: Ein bekanntes JavaScript-Framework. Der Vorteil besteht darin, dass es die DOM-Operation vereinfacht, und der Nachteil besteht darin, dass die DOM-Operation zu häufig ist, was sich auf die Leistung des Front-Ends auswirkt; es wird nur in den Augen der verwendet Frontend für Kompatibilität mit IE6, 7 und 8;

Anmerkungen: Das von Google erworbene Front-End-Framework wurde von einer Gruppe von Java-Programmierern entwickelt. Es zeichnet sich durch die Verlagerung des Back-End-MVC-Modells in das Front-End und das Hinzufügen des Konzepts der modularen Entwicklung aus. Es arbeitet mit Microsoft zusammen und verwendet TypeScript Syntax zu entwickeln; es ist benutzerfreundlich für Back-End-Programmierer. Es ist nicht sehr benutzerfreundlich für Front-End-Programmierer; der größte Nachteil besteht darin, dass die Versionsiteration unangemessen ist (z. B. 1. Generation -> 2. Generation, außer dem Namen it besteht im Wesentlichen aus zwei Dingen; Angular6 war zum Zeitpunkt der Veröffentlichung des Blogs bereits gestartet.)

Reagieren: Produziert von Facebook, einem leistungsstarken JS-Front-End-Framework. Das Merkmal besteht darin, dass ein neues Konzept [virtuelles DOM] vorgeschlagen wird, um reale DOM-Operationen zu reduzieren, DOM-Operationen im Speicher zu simulieren und die Front-End-Rendering-Effizienz effektiv zu verbessern. Der Nachteil besteht darin, dass die Verwendung kompliziert ist, da das Erlernen einer zusätzlichen [JSX]-Sprache erforderlich ist.

Vue: Ein progressives JavaScript-Framework. Das sogenannte progressive Mittel zur schrittweisen Implementierung neuer Funktionen, z. B. die Implementierung neuer Funktionen wie modulare Entwicklung, Routing und Statusverwaltung. Es zeichnet sich durch die Kombination der Vorteile von Angular (Modularisierung) und React (virtuelles DOM) aus;

Axios: Front-End-Kommunikationsframework; Da die Grenzen von Vue sehr klar sind, dient es der Verarbeitung von DOM und verfügt daher nicht über Kommunikationsfunktionen. Für die Interaktion mit dem Server ist ein zusätzliches Kommunikationsframework erforderlich. Natürlich ist dies auch möglich Wählen Sie direkt die von jQuery bereitgestellte AJAX-Kommunikationsfunktion.

1.4 UI-Framework

Ergänzung: WeChat-Applet WeUI

1.5 JavaScript-Nutzung

JavaScript erhält die volle Leistung, um dynamisches HTML zu erstellen:

JavaScript kann alle HTML-Elemente auf der Seite ändern

JavaScript kann alle HTML-Attribute auf der Seite ändern

JavaScript kann alle CSS-Stile auf der Seite ändern

JavaScript kann vorhandene HTML-Elemente und -Attribute entfernen

JavaScript kann neue HTML-Elemente und -Attribute hinzufügen

JavaScript kann auf alle vorhandenen HTML-Ereignisse auf der Seite reagieren

JavaScript kann neue HTML-Ereignisse auf der Seite erstellen

1.6 Schnellstart

1.6.1 Erste Schritte mit Formaten

Das Platzieren des Skripts am Ende des <body>-Elements kann die Anzeigegeschwindigkeit verbessern, da die Skriptkompilierung die Anzeige verlangsamt. Es wird empfohlen, den JS-Code am Ende des Körpers zu platzieren

Externe Skriptreferenzen können in <head> oder <body> platziert werden

1.6.2 Grammatik-Grundierung

1.7 Verwendung der Browserkonsole

//console.log(score) druckt Variablen auf der Konsole des Browsers!

1.8 Zusammenfassung

Semikolons trennen JavaScript-Anweisungen und fügen nach jeder ausführbaren Anweisung ein Semikolon hinzu

Kommentare: Einzeilige Kommentare beginnen mit //; mehrzeilige Kommentare beginnen mit /* und enden mit */

Bei JavaScript-Bezeichnern muss die Groß-/Kleinschreibung beachtet werden

2. Einführung in JavaScript

2.1 Zusammensetzung

Eine vollständige JavaScript-Implementierung besteht aus den folgenden drei Teilen:

ECMAScript: Der Kernstandard.

DOM: Dokumentobjektmodell.

Stückliste: Browser-Objektmodell.

ECMAScript ist der Kernstandard von JavaScript, der die Syntax und die grundlegenden Objekte der Sprache beschreibt.

DOM bezieht sich auf das Document Object Model (Document Object Model), die Anwendungsprogrammierschnittstelle von HTML. DOM betrachtet die gesamte HTML-Seite als ein Strukturdokument, das aus verschiedenen Knotenebenen besteht.

BOM bezieht sich auf das Browserobjektmodell (Browserobjektmodell), das auf das Browserfenster zugreifen und es bedienen kann
.

2.2 JavaScript-Nutzung

Internes JavaScript

Externes JavaScript

Internes JavaScript

2.3 Variablen

let, deklariert eine Variable mit Gültigkeitsbereich

const, deklariert eine Konstante mit Gültigkeitsbereich

Pfeilfunktionen, Pfeilfunktionen, die für anonyme Kurzfunktionen geeignet sind

2.3.1 Deklaration von Variablen

var a;
const a=1; //必须赋值
let a;//块内元素

JavaScript ist eine schwach typisierte Skriptsprache. Unabhängig davon, ob es sich um eine Zahl, einen Text oder einen anderen Inhalt handelt, wird er mit dem Schlüsselwort var und dem Variablennamen deklariert

● Eine Variablendeklaration ist nicht erforderlich, sie kann direkt ohne Schlüsselwort-Var-Deklaration verwendet werden.

2.3.2 Variablenzuweisung

Übliche Variablenzuweisungen sind numerisch oder textuell. Wenn der Inhalt der Variablenzuweisung Text ist, müssen Sie Anführungszeichen verwenden
(einfache und doppelte Anführungszeichen sind akzeptabel), um den Inhalt einzuschließen. Wenn Sie einer Variablen einen Wert zuweisen, fügen Sie dem Inhalt keine Anführungszeichen hinzu, da dies sonst der Fall
ist als String behandelt werden.

2.3.3 Namenskonvention

2.3.4 JavaScript-Schlüsselwörter und reservierte Wörter

2.3.5 Strikter Erkennungsmodus

2.3.6 Variablenumfang

Globale Variable

lokaler Geltungsbereich (let)

2.3.7 Methodendefinition und -aufruf

Methode definieren

Schlüsselwort anwenden

2.4 Grundlegende Datentypen

JavaScript verfügt über fünf primitive Typen: Number (Zahl), Boolean (boolescher Wert), String (Zeichenfolge), Null (leerer Wert) und Undefiniert (undefiniert).

2.4.1 Zahlentyp

Verwenden Sie den Typ „Number“, um Zahlen in JavaScript darzustellen. Die Zahlen können
Ganzzahlen mit 32 Bit oder Gleitkommazahlen mit 64 Bit sein

Oktalzahlen müssen mit der Zahl 0 beginnen

Hexadezimale Zahlen müssen mit der Zahl 0 und dem Buchstaben x beginnen
Gleitkommazahlen können mit der Methode toFixed() angeben, wie viele Nachkommastellen beibehalten werden sollen (Rundung beachten).
123 //整数
.15 //浮点数
1.123e3 //科学计数
-99 //负数
besonderer Wert
//正确转换为Number类型时返回真（true），其他情况返回假（false）
isNaN(变量名称)

2.4.2String-Typ

Gängige Methoden:

Ermitteln Sie die Zeichenfolgenlänge msg.length

Holen Sie sich ein einzelnes Zeichen in einer Zeichenfolge msg.charAt(1) Codenummer msg.charCodeAt(1)

Verbindungszeichenfolge msg.concat (zu verbindende Zeichenfolge)

Finden Sie heraus, ob eine Zeichenfolge vorhanden ist

Suchen und ersetzen Sie die Zeichenfolge msg.match(regex) msg.search(regex) msg.replace(regex, Text ersetzen)

Rufen Sie den String-Fragment-Slice (Start, Ende) ab, um die angegebene Zeichenfolge zu entfernen, und erhalten Sie den Subtring (Start, Ende).

String-Groß-/Kleinschreibungskonvertierung toLowerCase(), toUpperCase()

Escape-Zeichen sind die gleichen wie in C++

2.4.3 Boolescher Typ

Boolean ( boolean ) wird in vielen Programmiersprachen zur bedingten Beurteilung verwendet und sein Wert hat nur
zwei Typen: wahr (wahr) oder falsch (falsch).

2.4.4 Undefinierter Typ

Alle Ausgabewerte vom Typ undefiniert sind undefiniert. Wenn die auszugebende Variable nie deklariert wurde oder das Schlüsselwort
var zur Deklaration verwendet, aber nie zugewiesen wurde, wird das Wort undefiniert angezeigt.

2.4.5 Nulltyp

2.5 Gemeinsame Operatoren

2.5.1 Zuweisungsoperatoren

2.5.2 Arithmetische Operatoren

Versuchen Sie, die Verwendung von Gleitkommazahlen für Operationen zu vermeiden, da es zu Präzisionsproblemen kommt

2.5.3 Logische Operatoren

Es gibt drei Arten von logischen Operatoren: NOT (logisches Nicht), AND (logisches Und) und OR (logisches Oder).

2.5.4 Vergleichsoperatoren

In JavaScript gibt es vier Arten von Vergleichsoperatoren: größer als (>), kleiner als (<), größer oder gleich (>=) und kleiner als oder gleich (<=). Es wird verwendet, um die Größe zweier Werte zu vergleichen, und der Rückgabewert muss ein boolescher Wert (wahr oder falsch) sein.

2.5.5 Gleichheitsoperatoren

2.5.6 Bedingter Operator (ternärer Operator)

2.5.7 Zwei gemeinsame Funktionen

2.6 Erklärung

2.6.1 Bedingte Anweisungen

if-Anweisung

switch-Anweisung

Identisch mit der C++-Syntax

2.6.2 Schleifenanweisung

JavaScript unterstützt verschiedene Arten von Schleifen:

for – einen Codeblock mehrmals durchlaufen

for/in – Schleife über Objekteigenschaften

while – Schleife einen Codeblock, während die angegebene Bedingung wahr ist

do/while – Schleife einen Codeblock, während eine angegebene Bedingung wahr ist

2.7 Funktionen

2.7.1 Funktionen definieren

Definition eins

Definitionsmethode zwei

Parameterproblem: JavaSqript kann eine beliebige Anzahl von Parametern oder keine Parameter übergeben.

abnormales Urteilsvermögen

<script>
        var abs = function (x){
            if (typeof x != 'number'){
                throw 'not a number';
            }
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

Schlüsselwort arguments

arguments ist ein kostenloses Schlüsselwort von JS; es bedeutet, dass alle übergebenen Parameter ein Array sind!

 <script>
        var abs = function (x){
            console.log("x=>"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i])
            }
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

Rest-Schlüsselwort

Die von ES6 eingeführte neue Funktion ruft alle Parameter mit Ausnahme der bereits definierten Parameter ab ~ ...

<script>
        var abs = function (x,...rest){
            console.log("x=>"+x);
            console.log(rest)
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

2.7.2 Grundfunktionen

Im Vergleich zu Java sind JavaScript-Funktionen einfacher und müssen den Rückgabewerttyp nicht deklarieren.
Wenn die JavaScript-Funktion einen Rückgabewert hat, verwenden Sie direkt das Schlüsselwort „return“ im Codeblock in den geschweiften Klammern, gefolgt vom zurückzugebenden Wert.

2.7.3 Pfeilfunktionen

2.8 JavaScript-Objekttypen

lokales Objekt

eingebautes Objekt

Hostobjekt

●Natives Objekt (natives Objekt) ist ein von ECMAScript definierter Referenztyp;
●Eingebautes Objekt (integriertes Objekt) bezieht sich auf ein Objekt, das direkt ohne Instanziierung verwendet werden kann und tatsächlich ein spezielles lokales Objekt ist; ●Host-Objekt
( Hostobjekt) bezieht sich auf die Maschinenumgebung des Benutzers, einschließlich DOM und BOM.

lokales Objekt

2.8.1 Arrays

Java-Werte müssen Objekte desselben Typs sein ~, dies ist in JS nicht erforderlich!
var arr = [1,2,3,4,5, 'he11o' ,nu11,true]
Das Array-Objekt enthält auch ein Längenattribut , die verwendet werden kann, um die Länge des aktuellen Arrays abzurufen, dh die Anzahl der Elemente im Array. Wenn das aktuelle Array keine Elemente enthält, ist der Längenwert 0

2.8.2 Datumsdaten

Verwenden Sie das Date-Objekt in JavaScript, um zeit- und datumsbezogene Inhalte zu verarbeiten. Es gibt vier Initialisierungsmethoden

Gängige Methode

2.8.3 Reguläre Ausdrücke

grammatikalisches Format

Gängige Methode

2.8.4 Karten- und Set-Sammlungen (neue ES6-Funktionen)

Karte

<script>
        'use strict';
        let map = new Map([['BO', 90], ['tom', 100]]);
        let name = map.get('BO');
        map.set('admin',100);
        map.delete('admin');
        console.log(name);
    </script>

Satz

  <script>
        'use strict';
        let set = new Set([3,1,1,1]);
        set.add(2);
        set.delete(1);
        console.log(set.has(3));
    </script>

2.8.5iterator

2.8.6 Objekte

Objekte sind auch Variablen. Das Objekt enthält jedoch viele Werte, Wertname und Wertpaar (Name und Wert durch Doppelpunkt getrennt).

Methode, um das Objekt zu erhalten

eingebautes Objekt

Globales Objekt

Mathe-Objekt

Hostobjekt

2.8. 7DOM-Ereignisse

JavaScript kann auch Code ausführen, wenn sich der Status der HTML-Seite ändert. Diese Statusänderung wird als DOM-Ereignis (Event) bezeichnet.

Definiert:

HTML-Elemente als Objekte

Attribute aller HTML-Elemente

Methoden für den Zugriff auf alle HTML-Elemente

Ereignisse für alle HTML-Elemente

Mit anderen Worten: HTML DOM ist ein Standard zum Abrufen, Ändern, Hinzufügen oder Entfernen von HTML-Elementen.

Der W3C-DOM-Standard ist in drei verschiedene Teile unterteilt:

Core DOM – das Standardmodell für alle Dokumenttypen

XML DOM – Standardmodell für XML-Dokumente

HTML DOM – das Standardmodell für HTML-Dokumente

Wenn ein Browser eine HTML-Webseite analysiert, erstellt er ein HTML-DOM-Modellobjekt, ruft DOM-Methoden auf, indem er JavaScript-Code ausführt, und manipuliert den Inhalt/die Attribute/Ereignisse von HTML-Elementen, wodurch eine Interaktion mit der HTML-Seite realisiert wird

2.8.8 Stücklistenobjekte manipulieren

Das Browser Object Model (Browser Object Model, BOM) ermöglicht die Interaktion von JavaScript mit dem Browser.

gemeinsame Gegenstände

Fenster: Browserfensterobjekt. Zu seinen Mitgliedern gehören alle globalen Variablen, Funktionen und Objekte

screen: Bildschirmobjekt, das normalerweise verwendet wird, um die Breite und Höhe des verfügbaren Bildschirms des Benutzers zu ermitteln.

Standort: Ein Standortobjekt, das verwendet wird, um die URL-Adresse der aktuellen Seite abzurufen und den Browser auf eine neue angegebene Seite umzuleiten.

Verlauf: Verlaufsobjekt, das den Browserverlauf des Browsers enthält.

Navigator: Browserobjekt, das normalerweise zum Abrufen von Informationen über den Browser des Benutzers verwendet wird.

Fensterobjekt

In JavaScript stellt das Fensterobjekt das Browserfenster dar, und derzeit unterstützen alle Browser dieses Objekt. Alle globalen Variablen, Funktionen und Objekte in JavaScript werden automatisch zum Inhalt des Fensterobjekts.

Beispielsweise ist die globale Methode isNaN() zur Beurteilung, ob eine Variable eine Zahl ist, die Methode des Fensterobjekts, und die vollständige Schreibmethode ist window.isNaN(). Normalerweise kann das Fensterpräfix weggelassen werden.

Gängige Methode

Navigatorobjekt

In JavaScript kann das window.navigator-Objekt verwendet werden, um eine Reihe von Informationen über den Browser des Benutzers abzurufen, beispielsweise den Namen und die Versionsnummer des Browsers. Das Objekt kann normalerweise das Fensterpräfix weglassen, wenn es verwendet wird, abgekürzt als Navigator

In den meisten Fällen verwenden wir das Navigatorobjekt nicht, da es künstlich geändert wird! Es wird nicht empfohlen, diese Eigenschaften zum Beurteilen und Schreiben von Code zu verwenden

Bildschirmobjekt

Das window.screen-Objekt kann in JavaScript verwendet werden, um die verfügbare Breite und Höhe des Bildschirms abzurufen. Bei Verwendung dieses Objekts kann das Fensterpräfix normalerweise weggelassen werden und wird als Bildschirm abgekürzt.

Standortobjekt

Dokumentobjekt

Geschichtsobjekt

Stellt den Browserverlauf dar

history.back()
history.forward()

2.8.9 Manipulieren von DOM-Objekten

Die Browser-Webseite ist eine Dom-Baumstruktur!

UPDATE: Dom-Knoten werden aktualisiert

Dom-Knoten durchqueren: Dom-Knoten abrufen

Löschen: Einen Dom-Knoten löschen

Hinzufügen: Fügen Sie einen neuen Knoten hinzu

Um einen Dom-Knoten zu betreiben, müssen Sie zunächst den Dom-Knoten erwerben

Finden Sie HTML-Elemente

Suche nach ID-Namen des HTML-Elements;

Nach dem Tag-Namen des HTML-Elements suchen:

Suche nach dem Klassennamen des HTML-Elements

Update-Knoten

Ändern Sie HTML-Textinhalte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1">
    123
</div>
<script>
  var id1 = document.getElementById('id1');
  //动态创建文本内容
  var date = new Date();
  document.write("当前时间为"+date.toLocaleDateString());
  //修改文本的值
  id1.innerText="456";
  //修改解析HTML文本标签
  id1.innerHTML='<strong>789</strong>';
</script>
</body>
</html>

Ändern Sie die Attribute von HTML-Elementen

Ändern Sie den CSS-Stil von HTML

DOM-Knoten löschen

Schritte zum Löschen eines Knotens: Rufen Sie zuerst den übergeordneten Knoten ab und löschen Sie sich dann selbst über den übergeordneten Knoten.
Hinweis: Beim Löschen mehrerer Knoten ändern sich die untergeordneten Knoten jederzeit. Seien Sie daher beim Löschen von Knoten unbedingt vorsichtig!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
  var self = document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self);
</script>
</body>
</html>

Knoten 1 einfügen, erstellen

Knoten 2 einfügen

2.9 Typkonvertierung

2.9.1 In String konvertieren

//布尔值类型（Boolean）和数字类型（Number）这两种基本数据类型均可使用toString()方法
//把值转换为字符串形式
var x = true;
var result = x.toString(); //返回"true"

//toString()不带参数直接使用，此时无论是整数、小数或者科学计数法表示的内容，都会显示为十进制的数值
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
 
var result1 = x1.toString(); //返回值为"99"
var result2 = x2.toString(); //返回值为"99.9"
var result3 = x3.toString(); //返回值为"125000000"

var x = 10;
var result1 = x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"
var result2 = x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"
var result3 = x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"

var x = null;
var result1 = String(x); //返回值为字符串"null"
var result2 = x.toString(); //发生错误，无返回值

2.9.2 Umrechnung in Zahlen

var x = "123hello";
var result = parseInt(x); //返回值是123，因为h不是有效数字，则停止检查

var x = "hello";
var result = parseInt(x); //返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查

var x = "3.14";
var result = parseInt(x); //返回值是3，因为小数点不是有效数字，则停止检查

var x = "10";
var result1 = parseInt(x, 2); //表示原始数据为二进制，返回值为2
var result2 = parseInt(x, 8); //表示原始数据为八进制，返回值为8
var result3 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result4 = parseInt(x, 16); //表示原始数据为十六进制，返回值为16

var x = "010";
var result1 = parseInt(x); //表示原始数据为八进制，返回值为8
var result2 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result3 = parseInt(x, 8); //表示原始数据为八进制，返回值为8

var x = "hello3.14";
var result = parseFloat(x); //返回值是NaN，因为第一个字符h就不是有效数字，则停止检查

var x = "3.14hello";
var result = parseFloat(x); //返回值是3.14，因为h不是有效数字，则停止检查

var x = "3.14.15.926";
var result = parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，则停止检查

var x = "010";
var result1 = parseInt(x); //默认为是八进制数，返回值为8
var result2 = parseFloat(x); //默认为是十进制数，返回值为10

var x = "A";
var result1 = parseInt(x, 16); //parseInt()允许十六进制数，返回值为10
var result2 = parseFloat(x); //parseFloat()不允许十六进制数，返回值为NaN

2.9.3 Obligatorische Typkonvertierung

Boolean()-Funktion

Zahlenfunktion

String-Funktion

3. High-Level-JavaScript

3.1 JavaScript-Ausgabe

JavaScript verfügt über keine Druck- oder Ausgabefunktionen

JavaScript kann Daten auf unterschiedliche Weise ausgeben

Verwenden Sie window.alert(), um ein Warnfeld aufzurufen

Verwenden Sie die Methode document.write(), um den Inhalt in das HTML-Dokument zu schreiben

Schreiben Sie mit innerHTML in HTML-Elemente

Verwenden Sie console.log(), um in die Konsole des Browsers zu schreiben

Verwenden Sie window.alert()

Verwenden Sie die Methode document.write()

Schreiben Sie mit innerHTML

Um über JavaScript auf ein HTML-Element zuzugreifen, verwenden Sie die Methode document.getElementById(id). Verwenden Sie innerHTML, um Elementinhalte abzurufen oder einzufügen.

Verwenden Sie console.log()

3.2JSON-Objekt/BSON

JSON: JavaScript Object Notation. JSON ist ein leichtes Datenaustauschformat zum Speichern und Übertragen von Daten

Das JSON-Format ist syntaktisch identisch mit der Erstellung von JavaScript-Objektcode

Json, das JS-Objekte durch Text beschreibt, eignet sich zum Konvertieren von JS-Objekten in übergebene Vorgänge. Attribute werden in Schlüssel-Wert-Paaren, geschweiften Klammern, Semikolons, doppelten Anführungszeichen, Kommas, eckigen Klammern (Arrays), Methoden usw. gespeichert.

Format:
●Alle Objekte verwenden {}
●Arrays verwenden alle []
●Alle Schlüssel-Wert-Paare verwenden Schlüssel:Wert

Das Backend ruft die Daten aus der Datenbank ab, wandelt die Daten in Java-Objekte um, wandelt die Java-Objekte in JSON-Strings um, leitet die JSON-Strings über das Netzwerk an das Front-End weiter, wandelt die JSON-Strings in JavaScript-Objekte um und JavaScript konvertiert die Daten in Die JavaScript-Objekte werden auf der Seite gerendert

3.3 Objektorientierte Programmierung

3.3.1 Prototypische Vererbung

<script>
        'use strict';
        let Student = {
            name:"yanyu",
            age:20,
            run:function (){
                console.log(this.name+"run")
            }
        };
        let BO = {
            name: "BO"
        };
        BO.__proto__ = Student;
    </script>

3.3.2 Klassenvererbung

Definieren Sie eine Klasse

erben

Prototypenkette

3.4 Veranstaltungsübersicht

Der Ereignishandler ist die Aktion, die ausgeführt werden soll, wenn das Ereignis eintritt. Das Onload-Attribut ist das, was wir einen Event-Handler nennen, der auch als Event-Attribut bezeichnet wird.

Formularereignis

Ereignis auswählen

Tastaturereignisse

Fensterereignis

3.5 DOM-Ereignisse

JavaScript kann auch Code ausführen, wenn sich der Status der Seite ändert, was als DOM-Ereignis (Event) bezeichnet wird.

3.6 Betriebsformular

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
    <span>用户名:</span><input type="text" id ="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>
<script>
  function aaa(){
      var uname = document.getElementById('username');
      var pwd = document.getElementById('input-password');
      var md5pwd = document.getElementById('md5-password');
      md5pwd.value=md5(pwd.value);
      return true;
  }
</script>
</body>
</html>