02_JavaScript – Grundlagen der Webentwicklung

JavaScript-Grundlagen der Webentwicklung

Lernziele und Inhalte

1. Die Funktion von Javascript beschreiben können

2. Fähigkeit, Zweigstruktur-IF-Anweisungen zu verwenden, um logische Urteile zu fällen

3. Sie können eine der Schleifenanweisungen verwenden

4. Kann Funktionen in JavaScript definieren

5. Möglichkeit, Objekte in JavaScript zu definieren

6. In der Lage sein, die Rolle von DOM zu beschreiben

7. Kann HTML-Tag-Elemente und ihre Attribute über DOM bedienen

8. Möglichkeit, HTML-Elementereignisse zu registrieren

1. Einführung in JavaScript

1. Die Leistungsfähigkeit von JavaScript

Baidu Mind Map – Praktisches Denkwerkzeug

2. Was ist JavaScript?

JavaScript ist eine Programmiersprache, die auf dem Client (Browser) ausgeführt wird und dazu dient, Webseiten dynamische Funktionen hinzuzufügen.

Geschichte von JavaScript:Geschichte von JavaScript

3. Die Rolle von JavaScript

① Erster Zweck

Zur Abwicklung von Formularvalidierungsvorgängen

②Heutzutage gibt es eine Vielzahl von Anwendungsszenarien

1. Web-Spezialeffekte

2. Serverseitige Entwicklung (Node.js)

3. Befehlszeilentools (Node.js)

4. Desktop-Programm (Electron)

5. App(Cordova)

6. Spieleentwicklung

4. Der Unterschied zwischen JavaScript, HTML und CSS

HTML: Stellt die Struktur und den Inhalt einer Webseite bereit

CSS: Inhalte ändern und verschönern

JavaScript: Seiteninhalte steuern und dynamische Seiteneffekte erhöhen

5. Die Zusammensetzung von JavaScript

ECMAScript – der Kern von JavaScript

ECMAScript ist der Kern von JavaScript und beschreibt die grundlegende Syntax und Datentypen der Sprache. ECMAScript ist eine Reihe von Standards, die einen Sprachstandard definieren, der nichts mit der spezifischen Implementierung zu tun hat (es ist die Syntaxspezifikation von JavaScript).

BOM – Browser-Objektmodell

Eine Reihe von APIs zum Betrieb von Browserfunktionen

BOM kann zum Bedienen des Browserfensters verwendet werden, z. B.: Popup-Fenster, Browsersprung steuern, Auflösung abrufen usw.

DOM – Dokumentobjektmodell

Eine Reihe von APIs zum Bearbeiten von Seitenelementen

DOM kann HTML als Dokumentbaum betrachten und die Knoten im Baum können über die von DOM bereitgestellte API bedient werden.

6. JavaScript-Schreibposition

Die Schreibposition von JavaScript ähnelt CSS (Inline-Stil, eingebetteter Stil, externer Stil).

①Schreiben Sie innerhalb der Zeilen

<input type="button" value="按钮" onclick="alert('Hello World')" />

②Schreiben Sie das Skript-Tag ein

<Kopf>
  <script>
    warning('Hallo Welt!');
  </script>
</head>

③Schreiben Sie es in eine externe JS-Datei und fügen Sie es in die Seite ein.

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

Tipp:

① Beim Einführen des Skript-Tags einer externen JS-Datei kann JavaScript-Code nicht vor </body> geschrieben werden.

②css wird oben eingeführt und js-Dateien werden unten eingeführt

2. Grundlegende JavaScript-Syntax

1. Variablen

1.1. Definition von Variablen

Verwenden Sie das Schlüsselwort var, um Variablen in js zu definieren

①Syntax von Variablen

var userName = 'linux';
var Alter = 18;

②Deklarieren Sie mehrere Variablen gleichzeitig

var Alter, Name, Geschlecht;
Alter = 18;
name = 'Centos';

③Deklarieren Sie mehrere Variablen gleichzeitig und weisen Sie Werte zu

var Alter = 23, Name = 'Shell';

1.2. Benennungsregeln und Spezifikationen für Variablen

Regeln – müssen befolgt werden, bei Nichtbeachtung wird ein Fehler gemeldet

• Es besteht aus Buchstaben, Zahlen, Unterstrichen und dem $-Symbol und darf nicht mit einer Zahl beginnen.

• Es dürfen keine Schlüsselwörter und reservierten Wörter sein, wie zum Beispiel: for, while.

• Groß- und Kleinschreibung beachten

Spezifikationen – Es wird empfohlen, diese zu befolgen. Wenn Sie sie nicht befolgen, erhalten Sie keine Fehlermeldung.

• Variablennamen müssen aussagekräftig sein

• Beachten Sie die CamelCase-Nomenklatur. Der erste Buchstabe sollte klein geschrieben sein und der erste Buchstabe nachfolgender Wörter sollte groß geschrieben werden. Zum Beispiel: Benutzername, BenutzerPasswort

2. Datentyp

Häufig verwendete Datentypen sind: Zahl, Zeichenfolge, Boolean

2.1. Nummerntyp

Numerisches Literal: eine Darstellung eines festen Werts eines numerischen Werts

100 183,5

2.2. String-Typ

Eine Zeichenfolge ist ein in Anführungszeichen eingeschlossener Inhalt. „linux''centos“ „sa“ „devops“ ist eine Zeichenfolge in JavaScript. Es können sowohl einfache als auch doppelte Anführungszeichen verwendet werden. Es wird empfohlen, einfache Anführungszeichen als Escapezeichen zu verwenden Figuren.

String-Länge Das Längenattribut kann verwendet werden, um die Länge des Strings zu ermitteln

var str = „Ich bin Betriebs- und Wartungspersonal“
console.log(str.length);

Stringspleißen Mehrere Strings können mit dem +-Symbol gespleißt werden

console.log('linux'+'centos');

2.3. Boolescher Typ

Literale: wahr und falsch

Tipp:

typeof (Variable) prüft den Datentyp

Zahl (String-Typ) Konvertieren Sie einen String in einen Zahlentyp

3. Kommentare

Kommentarfunktion:

1. Erklärung

2. Der kommentierte Code wird nicht ausgeführt.

①Einzeiliger Kommentar

//Dies ist eine Variable
var name = ‚linux‘;

②Mehrzeilige Kommentare

/*
var name = ‚linux‘;
var Alter = 18;
var job = 'server';
*/

4. Betreiber

Operator, sehr ähnlich zu Operatoren in der Mathematik

4.1. Arithmetische Operatoren

+ hinzufügen

- reduzieren

* nehmen

/ entfernen

% Rest: Führen Sie Divisionsoperationen durch, bis der Divisor nicht mehr geteilt werden kann und die verbleibende Zahl der Rest ist.

4.2. Inkrement- und Dekrementoperatoren

Unärer Operator: Ein Operator mit nur einem Operanden. Die Inkrement- und Dekrementoperatoren sind unäre Operatoren.

++ Selbst +1

-- Selbst-1

Falldemonstration: Der Unterschied zwischen Pre-++ und Post-++

4.3. Logische Operatoren

&& und Wenn beide Operanden gleichzeitig wahr sind, ist das Ergebnis wahr, andernfalls sind beide falsch. Ein Verlust und beide gehen verloren. Mehrere Bedingungen werden gleichzeitig erfüllt.

|| oder wenn einer der beiden Operanden wahr ist, ist das Ergebnis wahr, andernfalls ist es falsch. Erfüllen Sie einfach eine der Bedingungen.

! Nichtnegation erfüllt diese Bedingung nicht

4.4. Vergleichsoperatoren

< > >= <= == != =\== !\==

Der Unterschied zwischen \== und ===:

==Stellen Sie nur würdige Vergleiche her

===Wenn Typ und Wert gleichzeitig gleich sind, sind sie gleich

4.5. Zuweisungsoperator

=

+= -= *= /= %=

Erst Selbstbedienung, dann Auftrag

var num = 6;
num += 6; //Entspricht num = num+6. Ratet mal, was es bedeutet?
num /=2; //Entspricht num = num/2. Ratet mal, was es bedeutet?

5. Filialstruktur

Verzweigungsanweisungen werden im Allgemeinen verwendet, um verschiedene Situationen zu beurteilen und entsprechende Verarbeitungen in Codeblöcken durchzuführen.

5.1. if-Anweisung

①Einzelzweiganweisung (if) Syntax:

if (/* bedingter Ausdruck */) {
  //Anweisung ausführen
}

②Doppelverzweigungsanweisung (if...else)

Grammatik:

if (/* bedingter Ausdruck */){
  // Ausführungsanweisung erstellen
} anders {
  // Andernfalls führen Sie die Anweisung aus
}

③Mehrzweiganweisungen (if...elseif...else)

Grammatik:

if (/* Bedingung 1 */){
  // Ausführungsanweisung erstellen
} else if (/* Bedingung 2 */){
  // Ausführungsanweisung erstellen
} else if (/* Bedingung 3 */){
  // Ausführungsanweisung erstellen
} anders {
  // Führen Sie die Anweisung abschließend standardmäßig aus
}

Fall: Finden Sie den Maximalwert zweier Zahlen

Bestimmen Sie, ob es sich um eine ungerade oder eine gerade Zahl handelt

5.2. switch-Anweisung

Grammatik:

Schalter(n)
{
Fall 1:
  //Codeblock 1 ausführen
  brechen
Fall 2:
  //Codeblock 2 ausführen
  brechen;
Standard:
  //n Code, der nicht gleichzeitig mit Fall 1 und Fall 2 ausgeführt wird
}

Fall: Welcher Tag ist heute?

day=new Date().getDay()

6. Schleifenstruktur

In JavaScript gibt es drei Arten von Schleifenanweisungen: for-, while- und do-while-Schleifen

while und do...while werden im Allgemeinen verwendet, um Situationen zu lösen, in denen die Anzahl der Schleifen nicht bestimmt werden kann. Es ist im Allgemeinen üblich, eine feste Anzahl von Malen zu verwenden, und es ist üblicher, es für zu verwenden.

6.1. zur Aussage

Grammatik:

for (Initialisierungsausdruck 1; Beurteilungsausdruck 2; Inkrementierungsausdruck 3) {
  // Schleifenkörper 4
}

6.2. while-Anweisung

//Wenn die Schleifenbedingung wahr ist, führen Sie den Schleifenkörper aus.
// Wenn die Schleifenbedingung falsch ist, beenden Sie die Schleife.
while (Schleifenbedingung) {
  //Schleifenkörper
}

6.3. do...while-Anweisung

Grammatik:

Tun {
  // Schleifenkörper;
} while (Schleifenbedingung);

Tipp:

do...while ist while in use sehr ähnlich. Der Unterschied besteht darin, dass do...while eine Operation unabhängig davon ausführt, ob die Bedingung wahr ist oder nicht. Das heißt, zuerst handeln und dann urteilen.

6.4, Schlüsselwörter fortfahren und unterbrechen

Pause: Springen Sie sofort aus der gesamten Schleife heraus, dh die Schleife endet, und beginnen Sie mit der Ausführung des Inhalts nach der Schleife (springen Sie direkt zu den geschweiften Klammern).

continue: Springe sofort aus der aktuellen Schleife und fahre mit der nächsten Schleife fort (springe zu i++)

7. Array

Ein Array ist eine geordnete Liste, in der alle Daten im Array gespeichert werden können. Die Länge des Arrays kann dynamisch angepasst werden.

7.1. Definition eines Arrays

Grammatik:

//Erstelle ein leeres Array
var Narbe = [];
//Erstelle ein Zahlenarray
var arr1 = [1,2,3,4,5];
//Erstelle ein Array mit Strings
var arr2 = ['linux','centos','redhat'];

Tipp:

// Sie können die Länge des Arrays über die Längeneigenschaft des Arrays ermitteln

console.log(arr3.length);

// Sie können das Längenattribut festlegen, um die Anzahl der Elemente im Array zu ändern

arr2.length = 0;

7.2. Zugangsdatenelemente erhalten

Grammatik:

// Format: Array-Name [Index] Der Index wird auch als Index bezeichnet
//Der Index beginnt mit
// Funktion: Ermitteln Sie den Wert, der dem Index des Arrays entspricht. Wenn der Index nicht vorhanden ist, wird undefiniert zurückgegeben.
var arr2 = ['linux','centos','redhat'];
arr2[0]; //linux
arr2[2]; //roter Hut
arr2[3]; //undefiniert ?Warum?

7.3. Durchlaufen Sie das Array

Durchlaufen Sie das Array: Führen Sie die Methode einmal für jedes Element des Arrays aus.

Grammatik:

for(var i = 0; i < arr.length; i++) {
	// Struktur für Array-Traversierung korrigiert
}

7.4. Operationen an Array-Elementen

Grammatik:

//Format: Array-Name [subscript/index] = value;
//Wenn der dem Index entsprechende Wert vorhanden ist, ersetzen Sie ihn. Wenn es nicht existiert, wird es hinzugefügt.
var arr2 = ['linux','centos','redhat'];
//redhat durch devops ersetzen
arr2[2] = ‚devops‘;
//Neue Elemente zum Array hinzufügen
arr2[3] = 'to';

So bedienen Sie verwandte Arrays:

8. Funktion

Kapseln Sie einen Codeabschnitt, um die Wiederverwendung zu erleichtern. Auch der Code ist klarer und die Struktur klarer.

8.1. Definition von Funktionen

Grammatik:

Funktion Funktionsname() {
  // Funktionskörper
}

Funktionsausdruck:

var fn = Funktion () {
  // Funktionskörper
}

Tipp:

Nachdem die Funktion definiert wurde, wird sie nicht ausgeführt. Sie muss aufgerufen werden, bevor sie ausgeführt werden kann.

8.2. Funktionsparameter

Parameter: Das Innere des Funktionskörpers ist ein geschlossener Raum, und externe Werte müssen über Parameter an das Innere des Funktionskörpers übergeben werden.

Grammatik:

//Funktionsdeklaration mit Parametern
Funktion Funktionsname (Formalparameter 1, Formalparameter 2, Formalparameter 3...) {
  //Funktionskörper
}
//Funktionsaufruf mit Parametern
Funktionsname (Aktualparameter 1, Aktualparameter 2, Aktualparameter 3)

8.3. Rückgabewert der Funktion

Nachdem die Funktion aufgerufen und ausgeführt wurde, müssen nicht alle Szenarien die Ergebnisse ausdrucken. In einigen Geschäftsszenarien ist es erforderlich, das Ausführungsergebnis der Funktion zurückzugeben, um nachfolgende Vorgänge zu erleichtern. Zu diesem Zeitpunkt können Sie die Funktion zurückgeben lassen, was den Rückgabewert der Funktion darstellt. Funktionen können den Rückgabewert der Funktion über die Syntax des Schlüsselworts return zurückgeben.

Tipp:

①Der Code nach der Rückkehr wird nicht mehr ausgeführt

②Der Standardrückgabewert der Funktion ist undefiniert

Grammatik:

//Eine Funktion mit einem Rückgabewert deklarieren
Funktion Funktionsname (Formalparameter 1, Formalparameter 2, Formalparameter 3...) {
  //Funktionskörper
  Rückgabewert zurückgeben;
}
//Sie können diesen Rückgabewert über eine Variable erhalten
var variable = Funktionsname (aktueller Parameter 1, aktueller Parameter 2, aktueller Parameter 3...);

9. Objekt

js ist eine objektbasierte Sprache

Objekt: besteht aus Eigenschaften und Methoden

Das Definitionsformat von Objekten in js ähnelt dem erlernten Wörterbuch. Es kann als eine Sammlung von Funktionen betrachtet werden

Grammatik:

var person = {
  Name: 'Linux',
  Alter: 18,
  Geschlecht: wahr,
  sagen: Funktion () {
    console.log(dieser.name);
  }
};

3. DOM

Nachdem Sie DOM gelernt haben, können Sie JavaScript verwenden, um die Seite zu steuern (Stil, Elementattribute, ausgeblendete Anzeige usw.).

1. Was ist DOM?

DOM ist das Document Object Model, eine vom Browser generierte Baumstruktur, sodass Programmiersprachen problemlos auf die HTML-Struktur zugreifen können.

Die gesamte Seite kann über das Dokument im DOM abgerufen werden.

2. Holen Sie sich Seitenelemente

①getElementById() Root-ID des Elements

②getElementsByTagName() Elemente (Sammlung) gemäß Tag-Namen abrufen

==③querySelector()== Verwenden Sie den Selektor, um Elemente abzurufen und nur das erste passende Element zurückzugeben

==④querySelectorAll()== Verwenden Sie den Selektor, um Elemente abzurufen und alle passenden Elemente (Satz) zurückzugeben

3. Legen Sie Elementattribute fest

- Nachdem Sie das Element erhalten haben, können Sie die entsprechenden Attribute des Elements festlegen und den Effekt der Seite ändern.

- Attribute gewöhnlicher Elemente

- Die Attribute von Tags in HTML entsprechen im Allgemeinen den Attributen von Elementen in DOM und den Attributen von Elementen in DOM, zum Beispiel:

title, src, id usw

– Der Inhalt zwischen Tags kann über das Attribut ==innerHTML== des Elements festgelegt werden

- Generieren Sie dynamisch Listen über innerHTML

- Attribute von Formularelementen

- Wert, aktiviert, ausgewählt, deaktiviert

- Durchlaufen Sie Textfelder und weisen Sie allen Textfeldern Werte zu

- Rufen Sie die Optionen im Dropdown-Feld ab und legen Sie die im Dropdown-Feld angezeigten Elemente fest

- Schaltfläche „Deaktivieren“.

Fall:

1. Verwenden Sie js, um dynamisch eine Liste zu generieren

2. Betreiben Sie das Formular und erhalten Sie formularbezogene Werte.

4. Veranstaltung registrieren

Der Ereignismechanismus in DOM kann einige allgemeine Vorgänge implementieren. Zum Beispiel: Reaktion auf das Klicken auf eine Schaltfläche, das Drücken der Tastatur usw.

Grammatik:

element.onclick = function () {
  Alert('Hallo Welt');
};

Gemeinsame Veranstaltungen:

Fall: Implementieren Sie das Click-Ereignis des Buttons und brechen Sie die Übertragung des Labels ab.

//Button-Klick-Ereignis
document.querySelector('button').onclick = function(){
           Alert('Gebundenes und ausgeführtes Klickereignis');
}
//Brechen Sie den Standardsprung des a-Tags ab
document.querySelector('a').onclick = function(){
           falsch zurückgeben;
}

5. Ändern Sie den Stil der Elemente

①Inline-Stil ändern

element.style.color = 'rot';

②Klassenstil ändern

element.className = 'aktiv';