ist eine der beliebtesten Programmiersprachen der Welt
ist eine Skriptsprache , die über einen Interpreter ausgeführt wird
Es läuft hauptsächlich auf dem Client ( Browser ) und kann jetzt auch auf dem Server basierend auf node.js ausgeführt werden

JavaScript wurde ursprünglich nur zur Durchführung einer einfachen Formularvalidierung (Überprüfung der Datengültigkeit) verwendet, wurde aber später durch Zufall populär.

Derzeit ist JavaScript zu einer Allzweck-Programmiersprache geworden

Dinge, die JavaScript tun kann :

Webentwicklung ( komplexere Spezialeffekte und Benutzerinteraktion )
Entwicklung von Webspielen
Serverentwicklung (node.js)
Entwicklung von Desktop-Programmen (Electron, VSCode ist so )
Entwicklung mobiler Apps

Entwicklungsgeschichte

Brendan Eich, Vater von JavaScript

Im Jahr 1995 dauerte die Fertigstellung des JS-Designs 10 Tage (aufgrund der kurzen Designzeit wurden einige Details der Sprache nicht sorgfältig berücksichtigt, was lange Zeit zum Chaos des in Javascript geschriebenen Programms führte).

Ursprünglich bei Netscape, mit dem Namen LiveScript,

Es wird allgemein angenommen, dass Netscape LiveScript JavaScript nannte, weil Java zu dieser Zeit die beliebteste Programmiersprache war und der Name „Java“ zur Verbreitung der neuen Sprache beitrug.

Tatsächlich ist der Syntaxstil zwischen Java und JavaScript sehr unterschiedlich.

Die Beziehung zwischen JavaScript und HTML und CSS

HTML: Die Struktur einer Webseite ( Bone )
CSS: Webseitenleistung ( Skin )
JavaScript: Verhalten von Webseiten ( Soul )

JavaScript- Laufprozess

Der geschriebene Code wird in der Datei gespeichert , also auf der Festplatte ( externer Speicher ).
Doppelklicken Sie auf den .html- Dateibrowser ( Anwendung ) , um die Datei zu lesen und den Inhalt der Datei in den Speicher zu laden ( Datenflussrichtung : Festplatte => Speicher ) .
Der Browser analysiert den vom Benutzer geschriebenen Code und übersetzt den Code in binäre Anweisungen , die vom Computer erkannt werden können ( die Arbeit des Interpreters ).
Die erhaltenen binären Anweisungen werden von der CPU geladen und ausgeführt ( Datenflussrichtung : Speicher => CPU).

Der Browser ist in Rendering-Engine + JS- Engine unterteilt .

Rendering-Engine : HTML + CSS analysieren , allgemein als „ Kernel “ bekannt
JS- Engine : also der JS- Interpreter . Typisch ist der in Chrome integrierte V8

Die Zusammensetzung von JavaScript

ECMAScript ( kurz ES ): JavaScript- Syntax
DOM: Page Document Object Model , das Elemente auf der Seite bearbeitet
BOM: Browser-Objektmodell , um im Browserfenster zu arbeiten

Allein mit der JS-Syntax können nur einige grundlegende Logikprozesse geschrieben werden.

Um jedoch komplexere Aufgaben zu erledigen und die Interaktion mit Browsern und Seiten abzuschließen, werden seit langem DOM-API und BOM-API benötigt.

Schlüsselkonzepte: ECMAScript

Dies ist eine Reihe von „Standards“. Unabhängig von der Art der JS-Engine muss sie diesem Standard entsprechen.

Vorkenntnisse

<script>
    alert("你好!");
</script>

JavaScript-Code kann in HTML-Skript-Tags eingebettet werden.

Schriftliche Form von JavaScript

1. Inline

Direkt in das HTML- Element einbetten

<input type="button" value="点我一下" onclick="alert('haha')">

Notiz

String-Konstanten in JS können in einfachen oder doppelten Anführungszeichen ausgedrückt werden .
Doppelte Anführungszeichen werden in HTML und einfache Anführungszeichen in JS empfohlen .

2. Eingebettet

Schreiben Sie in das Skript -Tag

<script>
    alert("haha");
</script>

3. Externe Formel

Schreiben Sie in eine separate .js- Datei

<script src="hello.js"></script>

alert("hehe");

In diesem Fall kann der Code nicht in die Mitte des Skript-Tags geschrieben werden. Er muss leer sein (der Code wird nicht ausgeführt, wenn er geschrieben wird).

Notiz

Einzeilige Kommentare // [empfohlen]

Mehrzeiliger Kommentar /* */

Verwenden Sie Strg + / , um Kommentare ein- und auszuschalten .
Mehrzeilige Kommentare können nicht verschachtelt werden .

Input-Output

Eingabe : Eingabeaufforderung

Popup eines Eingabefelds

// 弹出一个输入框
prompt("请输入您的姓名:");

Ausgabe : Warnung

Öffnen Sie ein Warndialogfeld und geben Sie das Ergebnis aus

// 弹出一个输出框
alert("hello");

+ zeigt die Verkettung von Zeichenfolgen an , d. h. zwei Zeichenfolgen werden Ende an Ende verbunden, um eine Zeichenfolge zu bilden .
\n bedeutet Zeilenumbruch

Auswahlfeld: Bestätigen

Es öffnet sich ein Auswahldialog zum Bestätigen oder Abbrechen

// 弹出选择框
confirm("确认删除吗？");

Ausgabe : console.log

Drucken Sie ein Protokoll auf der Konsole ( für Programmierer sichtbar ).

// 向控制台输出日志
console.log("这是一条日志");

Geben Sie „log“ direkt in VSCode ein und drücken Sie die Tabulatortaste, um console.log schnell aufzurufen

Sie müssen die Entwicklertools des Browsers (F12) öffnen => Registerkarte „Konsole“, um die Ergebnisse anzuzeigen.

Schlüsselkonzepte : Protokollierung

Protokolle sind für Programmierer ein wichtiges Mittel zum Debuggen von Programmen

Wichtige Konzepte : .

Konsole ist ein „ Objekt “ in js

.Zeigt an , eine bestimmte Eigenschaft oder Methode in das Objekt aufzunehmen . Es kann intuitiv als „ von “ verstanden werden.

console.log kann so verstanden werden : Verwenden Sie die „ Protokollmethode “ des „ Konsolen “ -Objekts .

Grammatikübersicht

Obwohl einige Designkonzepte von JavaScript weit von Java entfernt sind, gibt es dennoch einige Ähnlichkeiten auf der Ebene der grundlegenden Grammatik. Mit der Grundlage von Java ist es einfach, einige grundlegende Grammatik von JavaScript zu verstehen.

Verwendung von Variablen

grundlegende Verwendung

Variablen erstellen (Variablendefinition/Variablendeklaration/Variableninitialisierung)

var name = 'zhangsan';
var age = 20;

var ist ein Schlüsselwort in JS , das angibt, dass es sich um eine Variable handelt .
= bedeutet in JS „ Zuweisung “ , was dem Ablegen von Daten in eine Speicherbox entspricht . Auf beiden Seiten von = wird ein Leerzeichen empfohlen
Jede Anweisung endet mit einem ; am Ende . Es kann in JS weggelassen werden ; es wird jedoch empfohlen, es hinzuzufügen .
Beachten Sie , dass das ; hier ein englisches Semikolon ist . Alle Satzzeichen in JS sind englische Satzzeichen .
Wenn der initialisierte Wert eine Zeichenfolge ist , muss er in einfache oder doppelte Anführungszeichen gesetzt werden .
Wenn der initialisierte Wert eine Zahl ist , kann er direkt zugewiesen werden .

Verwenden Sie Variablen

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

Dynamisches Tippen verstehen

1) Der Variablentyp von JS wird während der Ausführung des Programms bestimmt ( der Typ wird nur bestimmt, wenn die = -Anweisung ausgeführt wird ).

var a = 10;     // 数字
var b = "hehe"; // 字符串

2) Während das Programm ausgeführt wird , kann sich der Typ der Variablen ändern .

var a = 10;    // 数字
a = "hehe";    // 字符串

grundlegender Datentyp

Mehrere in JS integrierte Typen

Zahl: Zahl . Ganzzahlen und Dezimalzahlen werden nicht unterschieden .
boolean: true true , false false .
string: String-Typ .
undefiniert: Nur der eindeutige Wert undefiniert. Zeigt einen undefinierten Wert an .
null: Nur der eindeutige Wert null. Zeigt einen Nullwert an .

numberNumber -Typ

JS unterscheidet nicht zwischen Ganzzahlen und Gleitkommazahlen und verwendet „Zahlentypen“, um sie einheitlich darzustellen.

digitale Darstellung

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

Hinweis :

Eine Oktalziffer entspricht drei Binärziffern
Eine hexadezimale Ziffer entspricht vier binären Ziffern . ( Zwei hexadezimale Ziffern sind ein Byte .)

spezieller numerischer Wert

Unendlich: Unendlich , größer als jede Zahl . Dies bedeutet, dass die Zahl den Bereich überschritten hat , den JS darstellen kann .
-Infinity: Negativ unendlich , kleiner als jede Zahl . Dies bedeutet, dass die Zahl den Bereich überschritten hat , den JS ausdrücken kann .
NaN: Zeigt an, dass das aktuelle Ergebnis keine Zahl ist .

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

Hinweis :

Negative Unendlichkeit und Infinitesimal sind nicht dasselbe . Unendlich klein bedeutet unendliche Annäherung an 0, der Wert ist 1 / Unendlich
Das Ergebnis von „hehe“ + 10 ist nicht NaN, sondern „hehe10“, wodurch die Zahl implizit in eine Zeichenfolge konvertiert und die Zeichenfolge dann verkettet wird .
Mit der Funktion isNaN können Sie feststellen, ob es sich um eine Nicht-Zahl handelt .

String- String-Typ

Grundregeln

Zeichenfolgenliterale müssen in Anführungszeichen eingeschlossen werden, entweder einfache oder doppelte Anführungszeichen.

Wenn die Zeichenfolge bereits Anführungszeichen enthält, müssen Escape-Zeichen verwendet werden.

Escape-Zeichen

Einige Zeichen lassen sich nur schwer direkt eingeben und müssen daher auf besondere Weise ausgedrückt werden .

Finden Sie die Länge

Verwenden Sie die Längeneigenschaft von String

String-Verkettung

Verwenden Sie + zum Spleißen
Zahlen und Zeichenfolgen können auch verkettet werden

boolean Boolescher Typ

Zeigt „wahr“ und „falsch“ an

Wenn Boolean an Operationen beteiligt ist, wird es als 1 und 0 behandelt .

undefinierter undefinierter Datentyp

Wenn eine Variable nicht initialisiert wurde , ist das Ergebnis undefiniert , also vom Typ undefiniert

var a;
console.log(a)

Fügen Sie undefiniert und string hinzu , und das Ergebnis ist eine Zeichenfolgenverkettung

console.log(a + "10");  // undefined10

Undefiniert wird zu einer Zahl addiert und das Ergebnis ist NaN

console.log(a + 10);

null leerer Werttyp

null gibt an, dass die aktuelle Variable ein „ Nullwert “ ist.

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

Hinweis :

Sowohl null als auch undefiniert weisen auf unzulässige Werte hin , die Betonung ist jedoch unterschiedlich .
Null bedeutet, dass der aktuelle Wert leer ist . ( entspricht einem leeren Feld )
undefiniert bedeutet, dass die aktuelle Variable undefiniert ist . ( entspricht dem Fehlen einer Box )

Operator

Die Operatoren in JavaScript sind grundsätzlich dieselben wie in Java

arithmetischer Operator

Zuweisungsoperatoren und zusammengesetzte Zuweisungsoperatoren

Inkrement- und Dekrementoperatoren

++: um 1 erhöhen
--: um 1 verringern

Vergleichsoperator

<
>
<=
>=
== vergleicht gleich ( wird eine implizite Typkonvertierung durchführen )
!=
=== vergleicht gleich ( keine implizite Typkonvertierung )
!==

Logische Operatoren

Wird zur Auswertung mehrerer boolescher Ausdrücke verwendet .

&& und : eins falsch ist falsch
|| oder : eins wahr ist wahr
! Nicht

Bit-Operation

& bitweise UND
| bitweise oder
~ bitweise Negation
^ bitweises XOR

Schichtbetrieb

<< nach links verschieben
>> vorzeichenbehaftete Rechtsverschiebung ( arithmetische Rechtsverschiebung )
>>> Vorzeichenlose Rechtsverschiebung ( logische Rechtsverschiebung )

Bedingte Anweisungen

if -Anweisung

grundlegendes Grammatikformat

Wenn der bedingte Ausdruck wahr ist, führen Sie den Code in { } von if aus

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

ternärer Ausdruck

Es ist eine vereinfachte Schreibweise, wenn sonst .

条件 ? 表达式1 : 表达式2

Wenn die Bedingung wahr ist , wird der Wert von Ausdruck1 zurückgegeben . Wenn die Bedingung falsch ist , wird der Wert von Ausdruck2 zurückgegeben

schalten

Eher geeignet für Szenarien mit mehreren Zweigen

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N;
}

Schleifenanweisung

Wiederholen Sie einige Aussagen

while- Schleife

while (条件) {
    循环体;
}

Ausführungsprozess :

bedingte Anweisung
Wenn die Bedingung wahr ist, führen Sie den Schleifenkörpercode aus .
Wenn die Bedingung falsch ist, endet die Schleife direkt

weitermachen

diesen Zyklus beenden

brechen

Beende die ganze Schleife

for -Schleife

for (表达式1; 表达式2; 表达式3) {
 循环体
}

Ausdruck 1: Wird zum Initialisieren der Schleifenvariablen verwendet .
Ausdruck 2: Schleifenbedingung
Ausdruck 3: Schleifenvariable aktualisieren

Ausführungsprozess :

Führen Sie zuerst Ausdruck 1 aus und initialisieren Sie die Schleifenvariable
Führen Sie Ausdruck 2 erneut aus , um die Schleifenbedingung zu bestimmen
Wenn die Bedingung falsch ist, beenden Sie die Schleife
Wenn die Bedingung wahr ist, führen Sie den Schleifenkörpercode aus .
Führen Sie Ausdruck 3 aus , um die Schleifenvariable zu aktualisieren

Array

Array erstellen

Erstellt mit dem neuen Schlüsselwort

// Array 的 A 要大写
var arr = new Array();

Verwenden Sie die Literalmethode, um [ häufig verwendet ] zu erstellen

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

Für JS- Arrays müssen die Elemente nicht vom gleichen Typ sein

Holen Sie sich ein Array-Element

Zugriff auf Array-Elemente mithilfe von Indizes ( beginnend bei 0 )
Wenn der Index außerhalb des Lesebereichs des Elements liegt , ist das Ergebnis undefiniert

Neues Array-Element hinzufügen

1. Hinzugefügt durch Änderung der Länge

Dies entspricht dem Hinzufügen eines Elements am Ende . Der Standardwert des neu hinzugefügten Elements ist undefiniert

2. Nach Index hinzufügen

Wenn der Index den Bereich des zugewiesenen Elements überschreitet , wird an der angegebenen Position ein neues Element eingefügt

3. Verwenden Sie Push , um Elemente hinzuzufügen

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
   newArr.push(arr[i]);
}

ein Element in einem Array löschen

Entfernen Sie Elemente mit der Spleißmethode

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

Funktion

grammatikalisches Format

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

Die Funktionsdefinition führt nicht den Inhalt des Funktionskörpers aus , sondern muss vor der Ausführung aufgerufen werden . Nach mehrmaligem Aufruf wird sie mehrmals ausgeführt .
Wenn die Funktion aufgerufen wird, tritt sie in die interne Ausführung der Funktion ein , und wenn die Funktion endet, kehrt sie zum aufrufenden Ort zurück und führt die Ausführung fort . Dies kann mit Hilfe eines Debuggers beobachtet werden .
Es besteht keine Anforderung an die Reihenfolge der Funktionsdefinition und des Aufrufs . ( Dies unterscheidet sich von Variablen . Variablen müssen vor der Verwendung definiert werden .)

Über die Anzahl der Parameter

Die Anzahl der tatsächlichen Parameter und der formalen Parameter stimmen möglicherweise nicht überein. Die tatsächliche Entwicklung erfordert jedoch im Allgemeinen, dass die Anzahl der formalen Parameter und der tatsächlichen Parameter übereinstimmen

1) Wenn die Anzahl der tatsächlichen Parameter größer ist als die Anzahl der formalen Parameter , nehmen die zusätzlichen Parameter nicht an der Funktionsoperation teil
2) Wenn die Anzahl der tatsächlichen Parameter geringer ist als die Anzahl der formalen Parameter , ist der Wert der zusätzlichen formalen Parameter zu diesem Zeitpunkt undefiniert

Funktionsausdruck

Eine andere Möglichkeit, eine Funktion zu definieren

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

Eine Formulierung wie „function() {}“ definiert eine anonyme Funktion und stellt die anonyme Funktion dann mit einer Variablen dar .

Umfang

Der gültige Bereich eines Bezeichnernamens im Code.

Vor dem ES6-Standard war der Umfang hauptsächlich zweigeteilt

Globaler Geltungsbereich : Es wird im gesamten Skript- Tag oder in einer separaten JS- Datei wirksam .
Lokaler Geltungsbereich / Funktionsbereich : Wird innerhalb der Funktion wirksam .

Scope-Kette

Hintergrund :

Funktionen können innerhalb von Funktionen definiert werden
Innere Funktionen können auf lokale Variablen äußerer Funktionen zugreifen .

Objekt

Basiskonzept

Objekt bezieht sich auf eine bestimmte Sache

In JS sind Zeichenfolgen, Zahlen, Arrays und Funktionen allesamt Objekte.

Jedes Objekt enthält mehrere Eigenschaften und Methoden .

Attribute : Eigenschaften von Dingen .
Methode : das Verhalten der Dinge .

Das Konzept von JavaScript- Objekten und Java -Objekten ist grundsätzlich dasselbe , nur dass die spezifischen Syntaxtabelleneinträge recht unterschiedlich sind .

1. Verwenden Sie Literale, um Objekte zu erstellen [ häufig verwendet ]

Erstellen Sie Objekte mit { }

Erstellen Sie Objekte mit { }
Eigenschaften und Methoden sind als Schlüssel-Wert-Paare organisiert .
Wird zwischen Schlüssel-Wert-Paaren verwendet , aufgeteilt . Nach dem letzten Attribut , optional
Verwendung : Aufteilung zwischen Schlüsseln und Werten .
Der Wert der Methode ist eine anonyme Funktion

2. Verwenden Sie „Neues Objekt“ , um Objekte zu erstellen

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}

3. Erstellen Sie Objekte mit Konstruktoren

Mit der vorherigen Methode zum Erstellen eines Objekts kann nur ein Objekt erstellt werden. Mit dem Konstruktor können problemlos mehrere Objekte erstellt werden

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);

Hinweis :

Verwenden Sie das Schlüsselwort this im Konstruktor, um das Objekt anzugeben, das gerade erstellt wird .
Der erste Buchstabe des Funktionsnamens des Konstruktors wird normalerweise großgeschrieben .
Der Funktionsname des Konstruktors kann ein Substantiv sein .
Konstrukteure müssen nicht zurückkehren
Beim Erstellen eines Objekts muss das Schlüsselwort new verwendet werden .

JavaScript (Grundlegende Grammatik)

JavaScript kennenlernen

Was ist JavaScript ?

Entwicklungsgeschichte

Die Beziehung zwischen JavaScript und HTML und CSS

JavaScript- Laufprozess

Die Zusammensetzung von JavaScript

Vorkenntnisse

Schriftliche Form von JavaScript

1. Inline

2. Eingebettet

3. Externe Formel

Notiz

Input-Output

Eingabe : Eingabeaufforderung

Ausgabe : Warnung

Auswahlfeld: Bestätigen

Ausgabe : console.log

Grammatikübersicht

Verwendung von Variablen

grundlegende Verwendung

Dynamisches Tippen verstehen

grundlegender Datentyp

numberNumber -Typ

digitale Darstellung

spezieller numerischer Wert

String- String-Typ

Grundregeln

Escape-Zeichen

Finden Sie die Länge

String-Verkettung

boolean Boolescher Typ

undefinierter undefinierter Datentyp

null leerer Werttyp

Operator

arithmetischer Operator

Zuweisungsoperatoren und zusammengesetzte Zuweisungsoperatoren

Inkrement- und Dekrementoperatoren

Vergleichsoperator

Logische Operatoren

Bit-Operation

Schichtbetrieb

Bedingte Anweisungen

if -Anweisung

ternärer Ausdruck

schalten

Schleifenanweisung

while- Schleife

weitermachen

brechen

for -Schleife

Array

Array erstellen

Holen Sie sich ein Array-Element

Neues Array-Element hinzufügen

ein Element in einem Array löschen

Funktion

grammatikalisches Format

Über die Anzahl der Parameter

Funktionsausdruck

Umfang

Scope-Kette

Objekt

Basiskonzept

1. Verwenden Sie Literale, um Objekte zu erstellen [ häufig verwendet ]

2. Verwenden Sie „Neues Objekt“ , um Objekte zu erstellen

3. Erstellen Sie Objekte mit Konstruktoren

Ich denke du magst