Artikelverzeichnis

1. Grundlegende Einführung und Entwicklung
2. Wie man JS schreibt und ausführt
3. Wie Informationen den Benutzern präsentiert werden
4. Datentyp und Erkennungsmethode
5. Das Konzept und die Verwendung von Variablen
7. Betreiber
Acht, Programmiergewohnheiten
9. Übungen
10. Erweiterung

1. Grundlegende Einführung und Entwicklung

Der Aufbau der Webseite:
- HTML: Hypertext-Auszeichnungssprache, ist die Struktur von Webseiten
- CSS: Cascading Style Sheet, das die Dekoration von Webseiten darstellt
- Javascript: Skriptsprache, ist das Verhalten von Webseiten
  - Seiten mit Animation: Beispiele
  - Das Verschieben bezieht sich nicht unbedingt auf Animationen, Beispiele für dynamische Seiten
Geschichte von JavaScript
Die Zusammensetzung von JavaScript: ECMAScript, BOM, DOM
- ECMAScript ist ein Standard . Es spezifiziert Syntax, Typen, Anweisungen, Schlüsselwörter, reservierte Subs, Operatoren und Objekte. (entspricht dem Gesetz)
- BOM (Browser Object Model) : Sie können auf das Browserobjektmodell des Browserfensters zugreifen und am Browserfenster arbeiten.
- DOM (Document Object Type) : DOM ordnet die gesamte Seite einer mehrschichtigen Knotenstruktur zu. HTML-Seiten bestehen aus bestimmten Knotentypen, und diese Knoten enthalten unterschiedliche Datentypen
Die Beziehung zwischen Javascript und HTML5
HTML5 ist eine neue Technologie. Derzeit sind alle HTML5, die wir kennen, einige Tags, aber mit JS können die tiefgreifenden Erweiterungsfunktionen dieser Tags realisiert werden.
Zum Beispiel verstehen wir das Video-Tag als einfaches Tag, aber tatsächlich verfügt das Video-Tag über tiefere erweiterte Funktionen.

2. Wie man JS schreibt und ausführt

JS ist eine Skriptsprache, die auch auf die Ausführung von HTML angewiesen ist. Es gibt drei Schreibmethoden: Inline (Inline), intern und extern.

Inline: existiert als Attribut des HTML-Tags
```
<button onclick="alert('hello')"></button>
或
<button onclick="fn()"></button>
<script>
	function fn(){
        
        
		alert("world")
	}
</script>
```
- Veraltet, Struktur und Stil sollten getrennt werden
- Erfordert Verhaltensauslöser, kann nicht automatisch ausgeführt werden
- Es ist unpraktisch, mehrere Funktionsmodule wiederzuverwenden und zu warten
Intern: Wird im Skript-Tag der HTML-Datei geschrieben
```
<script>
	document.querySelector(".box").onclick = function(){
        
        
		alert("js1");
	}
	// 或
	alert('js2')
</script>
```
- Kann nicht durch Verhalten ausgelöst werden, es wird automatisch ausgeführt
- Struktur und Verhalten sind nicht vollständig getrennt, was für die Wiederverwendung und Wartung von Funktionen zwischen mehreren Seitenmodulen unpraktisch ist
Extern: Schreiben Sie in die JS-Datei und verwenden Sie dann zum Importieren den Quellcode des Skripts in der HTML-Datei
```
// js文件
alert("hello world");
```
```
<script src="index.js"></script>
```
- Kann nicht durch Verhalten ausgelöst werden, es wird automatisch ausgeführt
- Die Trennung von Struktur und Verhalten erleichtert die Wiederverwendung und Aufrechterhaltung von Funktionen
- Empfohlene Nutzung
Das src-Attribut verweist auf JavaScript-Dateien und die Dateierweiterung ist .js, z. B. index.js
Falscher Weg : intern und extern, Skript-Tag verwenden, nicht erlaubt! ! !
```
<script src="路径">
	//在script标签内写js脚本
</script>
```
Ausführungsmethode und Ausführungsreihenfolge:
1. Inline, kann nur durch Verhalten ausgelöst werden und wird nicht ausgeführt, wenn es nicht ausgelöst wird
2. Intern und extern: Zuerst schreiben, zuerst ausführen
3. Das Skript-Tag kann an einer beliebigen Stelle platziert werden, wird jedoch im Allgemeinen am Ende des Körpers oder nach dem End-Tag platziert und kann auch am Ende des Kopfes platziert werden

3. Wie Informationen den Benutzern präsentiert werden

Inhalt auf die Seite drucken:
```
document.write("这是一些文本内容");
```
Tags können direkt analysiert werden:
```
document.write("<strong>加粗的内容</strong>");
```
Escape-Zeichen:
```
// &lt;  ====  <
// &gt;  ====  >
document.write("&lt;strong&gt;这是一些加粗的内容</strong>");
```
document.writeDer zu druckende Inhalt wird zwangsweise in Zeichen konvertiert, was dazu führt, dass einige Datentypen den Inhalt nicht direkt anzeigen (z. B. Objekt, Funktion)
document.writeund dem Zeitpunkt der Ausführung große Aufmerksamkeit schenken. Wird es ausgeführt, bevor die Seite vollständig geladen ist, ist es normal, den Inhalt der Seite zu drucken; wird es ausgeführt, nachdem die Seite geladen ist, wird das gesamte Dokument überschrieben
Drucken Sie Informationen an die Konsole des Browsers
```
console.log("hello world")
```
consoleEs ist ein Browserobjekt, außerdem loggibt es viele andere Methoden zum Drucken von Informationen.
consoleEs behält den ursprünglichen Datentyp zum Drucken bei und erzwingt keine Konvertierung der Daten.
consoleEs kann mehrere Druckdaten empfangen und verwenden. ,Die Trennung
consolekann basiert auf der Referenzadresse der Daten. Um die asynchronen Daten in Zukunft sehen zu können, müssen Sie den Programmprozess verstehen, sonst können Sie möglicherweise nicht beurteilen, ob die aktuellen Daten die Daten in diesem Moment sind. Der
consoleDruckort ist die Konsole des Browsers, die nicht im DOM-Bereich liegt und daher keine Tags analysieren kann, ohne dass dies Auswirkungen auf das DOM hat
Popup-Box zeigt Informationen an
```
alert("hello")
```
alertDie Informationen werden im Popup-Fenster des Browsers angezeigt
alertund der zu druckende Inhalt wird zwangsweise in Zeichen konvertiert, was dazu führt, dass einige Datentypen den Inhalt nicht direkt anzeigen (z. B. Objekt, Funktion)
alertund den Vorgang stoppen Browser vom Laden des Codes
Browser-Analyse Reihenfolge der Codes (von oben nach unten, von links nach rechts)

4. Datentyp und Erkennungsmethode

Datentyp: Alle Informationen, die vom Computer verarbeitet werden müssen, können als Daten bezeichnet werden. Die Daten werden im Speicher des Computers gespeichert. Da der Computer nur 0 und 1 erkennen kann, müssen verschiedene Datentypen maskiert werden. Die Das Ergebnis der Flucht ist Infolgedessen ist der erforderliche Speicherplatz unterschiedlich. Um dem Computer das Speichern von Daten zu erleichtern, ist JS in verschiedene Datentypen unterteilt:
- Zeichentyp (Zeichenfolge): Alle Daten in Anführungszeichen eingeschlossen, einfach ', doppelt ", umgekehrt. Stellt das ursprünglichste Datenformat dar, bei dem es sich um eine Art Metadaten handelt.
- Numerischer Typ (Zahl): Stellt eine Zahl dar, einschließlich: 0，1，2，3，4，5，6，7，8，9，NaN.
- Boolean (boolean): bedeutet wahr oder falsch, einschließlich: true, false.
- Objekttyp (Objekt): Stellt die Datenverpackung dar, eine Sammlung mehrerer Daten.
  - Die geordnete Datensammlung wird in eckige []Klammern eingeschlossen, um ein Array-Objekt anzuzeigen, z[值1,值2,值3]
  - Die ungeordnete Datensammlung wird in geschweifte {}Klammern eingeschlossen, um das Objektobjekt darzustellen, wie zum Beispiel:{键1:值1,键2:值2}
- Funktionstyp (Funktion): Stellt die Verpackung eines Codesegments dar, das eine bestimmte Funktion implementiert. function(){}Wird im Allgemeinen zur Angabe verwendet .
- undefiniert (undefiniert): Ein spezieller Typ. Wenn die Variable deklariert, aber kein Wert zugewiesen wird, ist der Typ undefined.
- null(object): nullzeigt, nur ein Zeiger, zeigt aber nicht auf Daten, das Objekt wird durch typeof erkannt
- Symbol (Symbol): zeichenartige Daten, die zur Darstellung des Zustands des Wörterbuchs verwendet werden, neuer ES6-Datentyp *
Erkennung von Datentypen – Schlüsselwörter:typeof
- typeof 要检测的数据odertypeof(要检测的数据)
  - Das Ausführungsergebnis ist die Wortmarke des entsprechenden Datentyps, und die Marke selbst wird als Zeichendaten angezeigt
  - typeofWas ich beim Testen bekomme, nullist object, also typeofkann ich nicht unterscheiden null*

5. Das Konzept und die Verwendung von Variablen

Variablen: Container, die zum Speichern von Daten verwendet werden. Unterschiedliche Variablen speichern unterschiedliche Daten. Abhängig von der Art der gespeicherten Daten gibt es unterschiedliche Variablentypen.
Variable erstellen – Schlüsselwort:var
- Grammatik:var a
Variablenzuweisung
- Aufgabenverwalter:=
- Die linke Seite des Zuweisungsoperators ist eine Variable; die rechte Seite des Zuweisungsoperators sind Daten oder andere Variablen
- Der Zuweisungsoperator wird verwendet, um die Daten oder Variablen rechts im Variablennamen links zu speichern
- Grammatik:a = "hello"
Zur Vereinfachung der Verwendung kann die Deklaration von Variablen auch wie folgt abgekürzt werden:
- Bei Erklärung sofort zugewiesen:var abc = 123;
- Mehrere Variablen deklarieren und Werte zuweisen:var abc, qwe=10, asd=20, zxc;
Benennungsregeln für Variablennamen
- Muss mit einem Buchstaben, Unterstrich oder $ beginnen. Sonderzeichen sind in Variablen
  wie: _abc, $123, abc123, nicht zulässig.msg
- Schlüsselwörter sind nicht erlaubt, reservierte Wörter (siehe Tabelle unten)
  wie: ~~var~~, ~~typeof~~,
- Versuchen Sie, so semantisch wie möglich zu sein,
  wie zum Beispiel: age, sex,name
- Versuchen Sie, den ersten Buchstaben des Datentyps als Präfix zu verwenden,
  z. B.: aChild, oImg,sTitle
- Kombinieren Sie Wörter und verwenden Sie die Groß-/Kleinschreibung
  - Großer Kamelfall: Schreiben Sie den ersten Buchstaben des ersten Wortes groß,
    z. B.: CarFactory, CreateTable,AddEvent
  - Kleiner Kamelfall: Schreiben Sie den ersten Buchstaben des zweiten Wortes groß,
    z. B.: productDetailList, bannerImgName,menuTitle
- Tipp: Verwenden Sie personalisierte Präfixe, um sensible Schlüsselwörter und reservierte Wörter
  wie: yslTypeof, _var, zu vermeiden.$this
Das Prinzip von Variablen: Computerprogramme laufen im Speicher. Wenn vareine Variable mit Schlüsselwörtern deklariert wird, teilt der Computer einen Speicherplatz vom Speicher ab, um ihn für die Speicherung verschiedener Datentypen vorzubereiten.
- Entsprechend der Speicherform im Speicher:
Schlüsselwörter und reservierte Wörter
Schlüsselwörter:


brechen	Tun	Instanz von	Art der	Fall	anders
neu	War	fangen	Endlich	zurückkehren	Leere
weitermachen	für	schalten	während	Debugger*	Funktion
Das	mit	Standard	Wenn	werfen	löschen
In	versuchen

Reservierte Wörter (können in Zukunft als Schlüsselwörter existieren):


abstrakt	Aufzählung	int	kurz	Boolescher Wert	Export
Schnittstelle	statisch	Byte	erweitert	lang	super
verkohlen	Finale	einheimisch	synchronisiert	Klasse	schweben
Paket	wirft	const	gehe zu	Privat	vergänglich
Debugger	implementiert	geschützt	flüchtig	doppelt	importieren
öffentlich	Spitze	unten	links	Rechts

Tipps: Wenn Sie Methoden oder Funktionen mit offiziell definierten Funktionen (keine Schlüsselwörter oder reservierten Wörter) nicht abdecken oder neu schreiben möchten, verwenden Sie sie nicht direkt als Variablennamen, z. B.: Warnung, Konsole, Sortierung, Wiederholung
Es wird nicht empfohlen, zu semantische Wörter direkt zu verwenden, z. B.: button;
sie können nach dem Hinzufügen eines Präfixes verwendet werden, z. B.: myButton, backButton, _button usw.

7. Betreiber

Zu den gängigen Operatoren in JS gehören: Arithmetik, Zuweisung, Beziehung, Logik, Selbstinkrementierung und Selbstdekrementierung usw.

Arithmetische Operatoren: +, -, *, /,%
```
var a = 1, b = 2;
console.log(a + b);		// 3
console.log(a - b);		// -1
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a % b);		// 1

// + 两边只要有一边是字符，运算过程就是字符串的拼接，结果必然是字符型数据
// - * / % 会将两边的数据，先隐式转成数值，再进行运算（能转则转，不能转得到NaN）

var a = "1", b = "2";
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a - b);		// -1
console.log(a + b);		// "12"	  *****
```
+In js gibt es zwei Funktionsebenen:
1. Addition zwischen Arithmetik;
2. Zeichenfolgenverbindung:
  Wenn die Ausführung von js auf +ein Zeichen stößt, erkennt es während des Ausführungsprozesses zunächst den Datentyp auf beiden Seiten des Pluszeichens. Wenn ein Zeichentyp gefunden wird, handelt es sich um das Spleißen von Zeichen
In js gibt es viele Operatoren, die sich von den Operatoren in unserem Konzept unterscheiden.
Zum Beispiel: = == ===
Und die Ergebnisse von Operationen zwischen verschiedenen Datentypen entsprechen möglicherweise nicht unseren Erwartungen. Worauf
wir achten müssen, sind diese verschiedenen Teile

Vergleichsoperatoren: <, <=, >, >=, !=, ==, !==,===

var num1 = 108;
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

var num1 = "108";
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边只要有一边是数值，另一边也会转成数值，再进行运算

var num1 = "108";
var num2 = "36";
console.log(num1 > num2);		// false
console.log(num1 >= num2);		// false
console.log(num1 < num2);		// true
console.log(num1 <= num2);		// true

var num1 = "a";
var num2 = "A";
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边都是字符，按照字符的比较规则：逐位按照ASCII码进行比较
	// a~z：97~122
	// A~Z：65~90

var num1 = "108";
var num2 = 108;
console.log(num1 == num2);		// true
console.log(num1 != num2);		// false
// 两边只要有一边是数值，另一边也会转成数值，再进行运算

console.log(num1 === num2);		// false
console.log(num1 !== num2);		// true
// 没有数据类型转换，不仅比较数据，还比较类型

>, >=, <, <=, ==, !=: Solange eine der beiden Seiten ein Wert ist, wird die andere Seite ebenfalls in einen Wert umgewandelt und dann wird die Operation ausgeführt

===, !==: Keine Datentypkonvertierung, nicht nur Datenvergleich, sondern auch Typenvergleich

Es gibt Zeichen auf beiden Seiten und die Vergleichsregeln für Zeichen: Vergleichen Sie Stück für Stück gemäß dem Zeichencode (ASCII).

Das Ergebnis der Operation ist ein boolescher Wert

Logische Operatoren: &&, ||,!

// ||：或的两边只要有一个值为true，结果就是true；
console.log(true || false);		// true
console.log(false || true);		// true
console.log(true || true);		// true
console.log(false || false);	// false

// &&：且的两边只要有一个值为false，结果就是false；
console.log(true && false);		// false
console.log(false && true);		// false
console.log(true && true);		// true
console.log(false && false);	// false

// !：非，取反
console.log(!true);				// false
console.log(!false);			// true

||: Solange es auf beiden Seiten des or einen Wert gibt true, ist das Ergebnis true;

&&: Solange es auf beiden Seiten von und einen Wert gibt false, ist das Ergebnis false;

!: nicht, negieren

Im Allgemeinen wird der Boolesche Betrieb verwendet, und das Ergebnis ist im Allgemeinen ein Boolescher Wert

Zuweisungsoperatoren: =, +=, -=, *=, /=,%=

var num1 = 10;
num1 += 3;
console.log(num1);		// 13

var num2 = 10;
num2 -= 3;
console.log(num2);		// 7

var num3 = 10;
num3 *= 3;
console.log(num3);		// 30

var num4 = 10;
num4 /= 3;
console.log(num4);		// 3.333333...

var num5 = 10;
num5 %= 3;
console.log(num5);		// 1

=
Speichern Sie =die Daten oder Variablen auf der rechten Seite der Zahl in der Variablen auf der linken Seite

+=, -=, *=, /=, %=
Regeln: Siehe Arithmetische Operatoren

Selbstinkrementierungs- und Selbstdekrementierungsoperationen: ++,--
- ++: Gibt an, dass 1 zum ursprünglichen Wert der Variablen hinzugefügt wird
- --: Zeigt an, dass der ursprüngliche Wert der Variablen um 1 reduziert wird
```
// 后自增或后自减：先使用原数据，再进行自增或自减计算
var a = 1;
console.log(a++);		// 1
console.log(a);			// 2

var b = 1;
console.log(b--);		// 1
console.log(b);			// 0

// 前自增或前自减：先进行自增或自减，再使用计算之后的数据
var a = 1;
console.log(++a);		// 2
console.log(a);			// 2

var b = 1;
console.log(--b);		// 0
console.log(b);			// 0
```
Es gibt einen wesentlichen Unterschied zwischen Pre-Inkrement und Post-Inkrement. Beide addieren 1 zu sich selbst. Der Unterschied ist:
1. Vorerhöhung: Berechnen Sie zuerst (+1) und verwenden Sie den berechneten Wert
2. Nach dem Inkrementieren: Verwenden Sie zuerst den Wert und berechnen Sie dann (+1).
Dasselbe wie oben für die Vor- und Nachdekrementierung

Operatorpriorität: 算术> 比较> 逻辑>赋值

// 已知一个年份2010，判断是否是闰年
// 闰年：1. 能被4整除，不能被100整除；2. 能直接被400整除
var year = 2012;

var flag = year % 4 === 0 && year % 100 !==0 || year % 400 === 0;

console.log(flag);

Acht, Programmiergewohnheiten

Fügen Sie am Ende der Anweisung ein Semikolon hinzu. Obwohl es in der JS-Syntax kein Problem gibt, ohne ein Semikolon hinzuzufügen, wird empfohlen, das Semikolon nicht wegzulassen. Nach dem Hinzufügen eines Semikolons können Sie die Softwarekomprimierung verwenden.
Es ist gute Programmierpraxis (Der endgültige Leitfaden zu JavaScript)

9. Übungen

Kenntnisse in allen oben genannten Wissenspunkten
Um der Flut zu widerstehen, kämpften die Soldaten 89 Stunden lang ununterbrochen. Wie viele Tage und wie viele Stunden sind für die Berechnung programmiert?
Xiao Ming wird in die Vereinigten Staaten reisen, aber die Temperatur dort wird in Grad Fahrenheit gemessen.
Dazu ist ein Programm erforderlich, das Fahrenheit (80 Grad) in Celsius umrechnet und diese Temperatur getrennt in Fahrenheit und Celsius anzeigt.
Tipp: Die Umrechnungsformel zwischen Celsius und Fahrenheit lautet: Celsius = 5/9,0*(Fahrenheit-32)
war k=10;
var sum = k++ + ++k +k +k++;
console.log(k);
console.log(k);
Berechnen Sie die Fläche eines Kreises mit einem Radius von 80 cm. Auf die Seite drucken. Formel: π * r * r. Annahme: π = 3,1415
Berechnen Sie den Umfang eines Kreises mit der Formel: 2 * π * r
Winkel zu Bogenmaß, Formel: Bogen = π / 180 * Grad

10. Erweiterung

Erweiterung 1: Bezüglich Gleitkommazahlen:
Der Computer führt während des Berechnungsprozesses Berechnungen mit korrekten binären Gleitkommazahlen durch, wir geben jedoch Dezimalzahlen ein. Die beiden werden nicht immer so genau umgewandelt, und manchmal erhalten wir die richtige Zahl. Ergebnisse , aber manchmal nicht so viel Glück.

console.log(0.6+0.2);		// 0.8
console.log(0.7+0.1);		// 0.7999999999999999

Erweiterte Lektüre: Über die Präzisionsberechnung von Gleitkommazahlen im Computer

Erweiterung 2: Das Konzept und die Anwendung von NaN
NaN: Es handelt sich um einen speziellen Zahlentyp, der ein illegales numerisches Operationsergebnis oder eine unerwartete umgewandelte Zahl darstellt. NaN ist nicht gleich irgendwelchen Daten. Das Selbst ist sich selbst nicht gleich.

console.log(NaN == NaN);	// false

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN

Um NaN zu beurteilen,
können Sie die Funktion isNaN() verwenden, die beurteilt, ob der Wert in den Klammern NaN ist, und true zurückgibt, wenn dies der Fall ist, und false zurückgibt, wenn dies nicht der Fall ist

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN
console.log(isNaN(c));		// true

// 注意：isNaN内会发生隐式类型转换
// 当数据能够被严格转成数值时，isNaN的结果为false，表示不是NaN（见下章：数据类型的转换）
console.log(isNaN( "hello" ));	// true
console.log(isNaN( "123a" ));	// true
console.log(isNaN( "123" ));	// false

1. Die grundlegende Syntax von JavaScript