Grundlegende Anmerkungen zu JavaScript 1

Willkommen beim Scannen des QR-Codes, um dem öffentlichen WeChat-Konto "Ambition and Family" zu folgen.

Lernen und organisieren Sie gemäß dem rosa Lehrervideo https://www.bilibili.com/video/BV1Sy4y1C7ha

1.1 Anfängliches JavaScript

JavaScript-Zusammensetzung:

1.ECMAScript

ECMAScript ist eine von ECMA International (ehemals European Computer Manufacturers Association) standardisierte Programmiersprache. Diese Sprache wird im World Wide Web häufig verwendet. Sie wird häufig als JavaScript oder JScript bezeichnet. Tatsächlich handelt es sich bei den beiden letzteren jedoch um Implementierungen der ECMAScript-Sprache. Und erweitern

2.DOM-Dokumentobjektmodell

Das Document Object Model (DOM) ist eine Standardprogrammierschnittstelle für die Verarbeitung erweiterbarer Markup-Sprachen, die von der W3C-Organisation empfohlen werden. Über die von DOM bereitgestellte Schnittstelle können verschiedene Elemente auf der Seite bedient werden (Größe, Position, Farbe usw.).

3.BOM-Browser-Objektmodell

Stückliste (Browser Object Model, kurz BOM) bezieht sich auf das Browser-Objektmodell, das eine inhaltsunabhängige Objektstruktur bereitstellt, die mit dem Browserfenster interagieren kann. Über die Stückliste können Sie das Browserfenster wie das Popup-Fenster bedienen, den Browsersprung steuern, die Auflösung abrufen usw.

1.2 JavaScript-Kommentare

1. Einzeiliger Kommentar

Um die Lesbarkeit des Codes zu verbessern, bietet JS wie CSS auch eine Kommentarfunktion. Es gibt zwei Haupttypen von Kommentaren in JS: einzeilige Kommentare und mehrzeilige Kommentare.
Das Kommentieren von einzeiligen Kommentaren ist wie folgt:

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

2. Mehrzeilige Kommentare

/*
  获取用户年龄和姓名
  并通过提示框显示出来
*/

1.3 JavaScript-Eingabe- und Ausgabeanweisungen

Methode	Beschreibung	Namensnennung
alert (msg)	Browser-Popup-Warnfeld	Browser
console.log (msg)	Informationen zum Ausdrucken der Browserkonsole	Browser
Eingabeaufforderung (Info)	Der Browser öffnet ein Eingabefeld und der Benutzer kann Eingaben vornehmen	Browser

Hinweis: alert () wird hauptsächlich zum Anzeigen von Nachrichten für Benutzer verwendet, console.log () wird zum Anzeigen von Laufzeitnachrichten für Programmierer verwendet, console.log () befindet sich in der F12-Konsole

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS输入输出</title>
		<script>
			// 这是一个输入框
			prompt('请输入您的年龄');
			// alert 弹出警示框 输出的 展示给用户的
			alert('年龄为:')
			// console 控制台输出 给程序员测试用的
			console.log('我是程序员能看到的');
		</script>
	</head>
	<body>
	</body>
</html>

2.1 Variablen

1. Variablen deklarieren

//  声明变量  
var age; //  声明一个 名称为age 的变量

var ist ein JS-Schlüsselwort zum Deklarieren von Variablen (Variable bedeutet Variable). Nachdem Sie dieses Schlüsselwort zum Deklarieren einer Variablen verwendet haben, weist der Computer der Variablen automatisch Speicherplatz zu. Der Programmierer muss nicht verwalten, dass das
Alter der vom Programmierer definierte Variablenname ist. Wir müssen den Variablennamen verwenden, um auf den zugewiesenen Speicherplatz zuzugreifen in der Erinnerung.

2. Zuordnung

age = 20; // 给 age  这个变量赋值为 20

3. Initialisierung von Variablen

var age  = 20;  // 声明变量同时赋值为 20

Wenn wir eine Variable deklarieren und einen Wert zuweisen, nennen wir dies die Initialisierung der Variablen

Fall:

1. Ein Eingabefeld wird angezeigt, in dem der Benutzer aufgefordert wird, einen Namen einzugeben.
2. Ein Dialogfeld wird angezeigt, in dem der Name eingegeben wird, den der Benutzer gerade eingegeben hat

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入输出案例</title>
		<script>
			// 1.用户输入名字
			var name=prompt('请输入您的名字:');
			// 2.打印名字
			alert(name);
		</script>
	</head>
	<body>
		
	</body>
</html>

5. Aktualisieren Sie die Variablen

Nachdem eine Variable neu zugewiesen wurde, wird ihr ursprünglicher Wert überschrieben, und der Wert der Variablen unterliegt dem Wert der letzten Zuweisung

var age = 18;
age = 81;   // 最后的结果就是81因为18 被覆盖掉了

6. Deklarieren Sie mehrere Variablen gleichzeitig

Wenn Sie mehrere Variablen gleichzeitig deklarieren, müssen Sie nur eine Variable schreiben. Verwenden Sie Kommas, um mehrere Variablennamen zu trennen

var age = 10,  name = 'zs', sex = 2;

2.2 Namenskonvention für Variablen

1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
2.严格区分大小写 var app; 和 var App; 是两个变量
3.不能以数字开头  18age   是错误的
4.不能是关键字、保留字例如：var、for、while
5.变量名必须有意义 MMD   BBD  nl   →     age  
6.遵守驼峰命名法-首字母小写,后面单词的首字母需要大写. myFirstName

3. Datentyp

3.1 Einführung in Datentypen

3.1.1 Warum brauchen wir Datentypen?

In einem Computer ist der für verschiedene Daten erforderliche Speicherplatz unterschiedlich. Um die Aufteilung von Daten in Daten mit unterschiedlichen erforderlichen Speichergrößen zu erleichtern und den Speicherplatz vollständig zu nutzen, werden verschiedene Datentypen definiert.
Einfach ausgedrückt ist der Datentyp das Kategoriemodell der Daten. Zum Beispiel sind der Name "Zhang San" und das Alter 18. Die Arten dieser Daten sind unterschiedlich.

3.1.2 Variabler Datentyp

Variablen werden zum Speichern von Werten verwendet. Sie haben Namen und Datentypen. Der Datentyp der Variablen bestimmt, wie die Bits, die diese Werte darstellen, im Speicher des Computers gespeichert werden. JavaScript ist eine schwach typisierte oder dynamische Sprache. Dies bedeutet, dass der Typ der Variablen nicht im Voraus deklariert werden muss. Der Typ wird während der Ausführung des Programms automatisch ermittelt

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

Wenn der Code ausgeführt wird, wird der Datentyp der Variablen von der JS-Engine anhand des Datentyps des Variablenwerts auf der rechten Seite von = beurteilt. Nach dem Ausführen bestimmt die Variable den Datentyp
JavaScript verfügt über eine dynamische Typisierung. Dies bedeutet auch, dass dieselbe Variable als anderer Typ verwendet werden kann:

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

3.1.3 Klassifizierung von Datentypen

JavaScript unterteilt Datentypen in zwei Kategorien:
1. Einfache Datentypen (Number, String, Boolean, Undefined, Null)
2. Komplexe Datentypen (Objekt)

3.2. Einfache Datentypen

Die einfachen Datentypen in JavaScript und ihre Beschreibungen lauten wie folgt:

Einfacher Datentyp	Beschreibung	Standardeinstellungen
Nummer	Numerisch, einschließlich Ganzzahl- und Gleitkommawerte	0
Boolescher Wert	Boolesche Werttypen wie true und false entsprechen 1 und 0	falsch
String	Zeichenfolgentyp wie "Zhang San"	""
Unterschätzt	var a; Variable a wird deklariert, aber es wird kein Wert angegeben, zu diesem Zeitpunkt ist a = unterdefiniert	unterschätzt
Null	var a = null; deklariert, dass die Variable a null ist	Null

3.2.1 Nummer

JavaScript-Nummerntypen können zum Speichern von Ganzzahlwerten sowie von Dezimalstellen (Gleitkommazahlen) verwendet werden.

var age = 21;       // 整数
var Age = 21.3747;  // 小数

1. Digitale Basis

Die häufigsten Basen sind binär, oktal, dezimal und hexadezimal.

  // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;   

八进制前面加0，十六进制前面加 0x

2. Nummernkreis

Maximal- und Minimalwerte in JavaScript

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

Maximalwert: Number.MAX_VALUE, dieser Wert ist: 1.7976931348623157e + 308
Minimalwert: Number.MIN_VALUE, dieser Wert ist: 5e-32

3. Drei spezielle Werte vom digitalen Typ

alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN

Unendlichkeit, die Unendlichkeit darstellt, größer als jeder numerische Wert -
Unendlichkeit, die infinitesimal darstellt, kleiner als jeder numerische Wert
NaN, keine Zahl, die einen nicht numerischen Wert darstellt

4.isNaN ()

Wird verwendet, um zu bestimmen, ob eine Variable ein nicht numerischer Typ ist, und gibt true oder false zurück

isNaN (x), wenn x eine Zahl ist, return false, wenn es keine Zahl ist, return true, x ist ein Nicht-Zahlentyp

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);            // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一个非数字

3.2.2 String

Der Zeichenfolgentyp kann ein beliebiger Text in Anführungszeichen sein, und seine Syntax besteht aus einem doppelten Anführungszeichen "" und einem einfachen Anführungszeichen ""

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

Da die Attribute in HTML-Tags doppelte Anführungszeichen verwenden, empfehlen wir die Verwendung einfacher Anführungszeichen in JS.

1. Verschachtelte Zeichenfolgen in Anführungszeichen

JS kann einfache Anführungszeichen verwenden, um doppelte Anführungszeichen zu verschachteln, oder doppelte Anführungszeichen verwenden, um einfache Anführungszeichen zu verschachteln (äußeres Doppel und inneres einfaches, äußeres einfaches und inneres Doppel).

var strMsg = '我是"一个"程序猿';   // 可以用''包含""
var strMsg2 = "我是'一个'程序猿";  // 也可以用"" 包含''

//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

2. String-Escape-Zeichen

Ähnlich wie bei den Sonderzeichen in HTML gibt es Sonderzeichen in Zeichenfolgen, die wir Escapezeichen nennen.
Die Escape-Zeichen beginnen alle mit \. Die häufig verwendeten Escape-Zeichen und ihre Beschreibungen lauten wie folgt:

Fluchten	erklären
\ n	Zeilenumbruchzeichen, n bedeutet Zeilenumbruch
\ \	Schrägstrich \
\ '	'Apostroph
""	"Anführungszeichen
\ t	Tabulator-Einzug
\ b	Leerzeichen, b bedeutet leer

3. Stringlänge

Eine Zeichenfolge besteht aus mehreren Zeichen, und die Anzahl dieser Zeichen entspricht der Länge der Zeichenfolge. Die Länge der gesamten Zeichenfolge kann über die Längeneigenschaft der Zeichenfolge ermittelt werden.

var strMsg = "Hello!";
alert(strMsg.length); // 显示 6

4. String-Spleißen

Mit + können mehrere Zeichenfolgen gespleißt werden. Die Spleißmethode lautet Zeichenfolge + beliebiger Typ = neue Zeichenfolge nach dem
Spleißen, bevor ein der Zeichenfolge hinzugefügter Typ in eine Zeichenfolge und anschließend in eine neue Zeichenfolge gespleißt wird

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

Das "+" - Zeichen fasst die Formel zusammen: Fügen Sie numerische Werte hinzu und verbinden Sie Zeichen

5. Verbesserung des Spleißens von Saiten

console.log('pink老师' + 18);           // 只要有字符就会相连 
var age = 18;
// console.log('pink老师age岁啦');       // 这样不行哦
console.log('pink老师' + age);          // pink老师18
console.log('pink老师' + age + '岁啦');  // pink老师18岁啦

Wir verketten häufig Zeichenfolgen und Variablen, da Variablen die darin enthaltenen Werte leicht ändern können.
Variablen können nicht in Anführungszeichen gesetzt werden, da in Anführungszeichen stehende Variablen zu Zeichenfolgen werden.
Wenn auf beiden Seiten der Variablen Zeichenfolgenverkettungen vorhanden sind, wird das Mantra "Zitat ", löschen Sie die Nummer, schreiben Sie die Variable und fügen Sie die Mitte hinzu

3.2.3 Boolescher Wert

Der Boolesche Typ hat zwei Werte: wahr und falsch, wobei wahr wahr (richtig) und falsch falsch (falsch) bedeutet.
Wenn Sie einen Booleschen Typ und einen Zahlentyp hinzufügen, ist der Wert von true 1 und der Wert von false 0.

console.log(true + 1);  // 2
console.log(false + 1); // 1

3.2.4 Undefiniert 和 Null

Eine Variable, die nach der Deklaration nicht zugewiesen wird, hat den Standardwert undefined (wenn Sie eine Verbindung herstellen oder hinzufügen, achten Sie auf das Ergebnis).

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

Eine deklarierte Variable gibt einen Nullwert an, und der darin gespeicherte Wert ist null (wenn wir das Objekt lernen, werden wir weiterhin null studieren).

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

3.3 Variablendatentyp abrufen

3.3.1 Ermittelt den Datentyp der Erkennungsvariablen

typeof kann verwendet werden, um den Datentyp der Erkennungsvariablen abzurufen

var num = 18;
console.log(typeof num) // 结果 number

Verschiedene Arten von Rückgabewerten

Arten von	Beispiel	Ergebnis
String	Typ von "Little White"	"String"
Nummer	Typ von 18	"Nummer"
Boolescher Wert	Art von wahr	"Boolescher Wert"
Unterschätzt	Art unterschätzt	"Unterschätzt"
Null	Typ von Null	"Null"

3.3.2 Wörtlich

Die Literalmenge ist die Darstellung eines festen Wertes im Quellcode. Für Laien ist es die Art und Weise, wie die Literalmenge diesen Wert ausdrückt.
1. Zahlenliterale: 8, 9, 10
2. Zeichenfolgenliterale: 'hinteres Ende', "vorderes Ende"
3. Boolesche Literale: wahr, falsch

3.4 Datentypkonvertierung

3.4.1 In digitalen Typ konvertieren (Hervorhebung)

der Weg	Beschreibung	Fallstudie
parselnt (String) Funktion	Konvertieren Sie den Zeichenfolgentyp in einen ganzzahligen numerischen Typ	Paket ('78 ')
parseFloat (string) Funktion	Konvertieren Sie den Zeichenfolgentyp in einen numerischen Gleitkommatyp	parseFloat ('78 .21 ')
Number () Casting-Funktion	Konvertieren Sie den Zeichenfolgentyp in einen numerischen Typ	Nummer ('12 ')
js implizite Konvertierung (. * /)	Verwenden Sie arithmetische Operationen, um implizit in numerische zu konvertieren	'12'-0

Hinweis: Schwierigkeiten bei der impliziten Konvertierung in js https://blog.csdn.net/itcast_cn/article/details/82887895

https://www.cnblogs.com/chenmeng0818/p/5954215.html

Fall 1: Berechnung des Alters

Bitten Sie um ein Eingabefeld, das auf der Seite angezeigt wird. Nachdem wir das Geburtsjahr eingegeben haben, können wir unser Alter berechnen

// 1. 弹出输入框，输入出生年份，并存储在变量中  
var year = prompt('请输入您的出生年份：');  // 用户输入
// 2. 用今年减去刚才输入的年份   
var result = 2019 - year;               // 程序内部处理
// 3. 弹出提示框  
alert('您的年龄是:' + result + '岁');     // 输出结果

Fall 2: Einfacher Addierer

Berechnen Sie den Wert der beiden Zahlen. Nachdem der Benutzer den ersten Wert eingegeben hat, wird das zweite Eingabefeld angezeigt und der zweite Wert eingegeben. Schließlich wird das Ergebnis der Addition der beiden Eingabewerte über das Popup angezeigt. Fenster nach oben.

// 1. 先弹出第一个输入框，提示用户输入第一个值 
 var num1 = prompt('请输入第一个值：');
// 2. 再弹出第二个框，提示用户输入第二个值 
 var num2 = prompt('请输入第二个值：');
// 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量
//**如果是减法,除法,乘法则不需要转换
 var result = parseFloat(num1) + parseFloat(num2);
// 4. 弹出结果
 alert('结果是:' + result);

3.4.2 In Boolesch konvertieren

der Weg	Beschreibung	Fallstudie
Boolescher Wert	Konvertieren Sie andere Typen in Boolesche Werte	Boolean ('true');

Werte, die null und negation darstellen, werden in false konvertiert, z. B. '', 0, NaN, null, undefined, und der
Rest wird in true konvertiert

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

4. Operatoren

Vorrang des Bedieners

Priorität	Operator	Auftrag
1	Klammern	()
2	Unärer Operator	++ -!
3	Arithmetischer Operator	先* / 后+ -
4	关系运算符	> >= < <=
5	相等运算符	== != !== ===
6	逻辑运算符	先&& 后 \|\|
7	赋值运算符	=
8	逗号运算符	,