Javascript-Crash-Kurs: KI-Notizen zeilenweise

1. Willkommen beim Kurs!: Hallo zusammen. Willkommen zu meinem Java-Script-Cross-Kurs. Und dieser Kurs behandelt die Grundlagen von JavaScript, einschließlich Variablen, Funktionen, Arrays, Objekten und Dam-Manipulation Dieser Kurs ist perfekt für Anfänger oder alle, die ihre Fähigkeiten auffrischen möchten keine Javascript-Vorkenntnisse erforderlich, nur ein grundlegendes Verständnis von HTMO Während wir jede Codezeile durchgehen, erhalten Sie auch detaillierte Erklärungen auf von erhalten Sie auch detaillierte Erklärungen mir generierten Folien, in denen alles aufgeführt ist, was Sie über jede Codezeile und den Kurs wissen müssen über jede Codezeile und den Kurs wissen Am Ende dieses Kurses werden Sie in der Lage sein, eine einfache interaktive Webanwendung zu erstellen eine einfache interaktive Webanwendung und Ihre neuen Fähigkeiten selbstbewusst unter Beweis zu stellen. Bereit zum Eintauchen. Lass uns anfangen. Wir sehen uns in der ersten Lektion. 2. Einführung und Setup: T. Willkommen zu diesem Einführungsvideo, in dem ich Ihnen JavaScript vorstellen werde. Wir werden lernen, wie man Variablen und Funktionen deklariert , mit Objekten und Umfragen arbeitet , und am Ende werden wir ein einfaches Beispiel für Dom-Manipulation haben. Nachdem wir all diese Themen durchgegangen sind, müssen wir also die Entwicklungsumgebung einrichten. Zuerst müssen Sie VS-Code, den Code-Editor, VSCode, herunterladen den Code-Editor, VSCode, Sie können zu Ihrem Browser gehen und zu dieser UDL navigieren. Code dosual study.com, Schrägstrich herunterladen. Und dann können Sie VS-Code herunterladen , der auf Ihrem Betriebssystem basiert Nachdem Sie den Vis-Code heruntergeladen und in Ihrem System installiert , können Sie ihn öffnen. Bevor wir Code schreiben können, müssen wir eine Erweiterung installieren , die uns bei unserer Entwicklung hilft. Sie können also hier zum Abschnitt Erweiterungen gehen. Und suche nach einer Live-Servererweiterung. In Ordnung. Das ist die Erweiterung , nach der ich suche. Ich habe es bereits installiert, sodass Sie es installieren können. Und wenn Sie das getan haben, kann ich diesen Button hier haben, auf dem steht, live gehen zu wollen. Klicken Sie jetzt nicht darauf. Bevor Sie das tun und den Server mit dieser Erweiterung live schalten und ausführen , müssen Sie eine HTML-Datei mit Indexpunkt erstellen. Sie können hier auf diese Schaltfläche klicken und eine neue Indexpunkt-HTML-Datei erstellen. Habe es schon da. 3. Javascript: Variablen, Funktionen, Arrays, Objekte und DOM-Manipulation: Neben dem Index zur HTML-Datei müssen Sie nun die grundlegende HTML-Struktur einer Webseite erstellen die grundlegende HTML-Struktur einer Webseite Danach können Sie den Server ausführen. Lassen Sie uns mit unserem Code beginnen. Das erste, was wir auf einer HTML-Seite haben müssen , ist das Dog-Type-Element, den Hund-Typ zu schreiben und es dann auf HTML zu setzen So wie es ist. Ich habe Text da drüben. Hundetyp HML. Wenn Sie mehr über dieses Element erfahren möchten, können Sie sich diese Folie hier ansehen Wie gesagt, zu Beginn hat jede einzelne Codezeile eine Informationsfolie, die Informationen zu dieser bestimmten Codezeile enthält . Also nach dieser Zeile oder nach diesem HTML-Element werden wir hier das HTML-Element haben, schreiben Sie das öffnende Tag. Dies wird als öffnendes Tag bezeichnet, und dies ist das schließende Tag eines Elements. Und hier innerhalb der Größer-und-kleiner-Zeichen wirst du den Namen dieses Elements finden. In diesem Fall ist es HTML. Auch hier können Sie auf den Folien mehr über dieses Element erfahren . Nun, in diesem Element, neben dem öffnenden oder zwischen den öffnenden und schließenden Tags, befinden neben dem öffnenden oder zwischen den öffnenden und schließenden Tags, sich unsere Seitenelemente oder unsere Seitenstruktur. Also werden wir auf jeder Seite ein Head-Element im Kopf haben, wir können Informationen über die Seite einfügen, wie Titel hinzufügen, Titelelement, den Titel der Seite. Ich werde so etwas wie Javascript-Einführung, Einführung sagen . Nach dem Kopf werden wir das Körperelement haben. Auch hier das Öffnen und Schließen von Tags. In Ordnung. Jetzt werden wir Ihnen die Grundlagen von Javascript vorstellen die Grundlagen von Javascript JavaScript-Code zu schreiben, benötigen wir nun ein HTML-Element, das als skriptähnliche Zelle bezeichnet wird In den öffnenden und schließenden Tags dieses Skriptelements kann sich unser Java-Script-Code befinden schließenden Tags dieses Skriptelements kann sich unser Java-Script-Code Als Erstes werden wir lernen, wie man Variablen deklariert. Wir können eine konstante Variable deklarieren indem wir das Schlüsselwort constant auf diese Weise verwenden. Lassen Sie uns zum Beispiel eine Pi-Variable deklarieren und ihren Wert auf 3,14 oder ohne Einheiten, 3,14, Dies ist eine Konstante, was bedeutet, dass sie sich nicht ändern kann. Eine konstante Variable kann sich nicht ändern. Nun, wenn Sie eine Variable haben wollen, die geändert werden kann, und ich meine damit , dass sie geändert werden kann, ist, dass ich hier zum Beispiel Pi haben und dann ihren Wert auf beispielsweise fünf zurücksetzen kann . Das ist nicht erlaubt und wird auch nicht funktionieren. Derzeit läuft hier nichts schief. Wir haben keine Fehler, aber in Wirklichkeit erlaubt Ihnen Javascript dies nicht. Um das für eine Variable zu tun, müssen Sie das Schlüsselwort let verwenden und die Variable deklarieren, zum Beispiel hier, message-Variable. Massage kann geändert werden, also verwenden wir das Schlüsselwort let und setzen seinen Anfangswert auf beispielsweise hello JavaScript. Nun, wie gesagt, kann diese Variable geändert werden. Sie können hier hingehen und ihren Wert ändern , zum Beispiel in „Wie da“. Das ist es jetzt für Variablen. Als Nächstes werden wir Logging- oder Logging-Informationen auf der Konsole haben . Die Konsole, falls Sie nicht wissen, was die Konsole ist, es ist unsere Browserkonsole. Derzeit haben wir den Server nicht betrieben , also werde ich das tun. Klicken Sie also hier auf die Schaltfläche Go Live, und es wird ein Server, ein Live-Server auf Ihrem lokalen System gestartet . Und wenn Sie einmal hier sind, stellen Sie sicher, dass Sie den Inspektor öffnen, und dann ist das der Rat Und jetzt, hier, kann ich einen Ort haben , wo wir Informationen ausdrucken können Normalerweise wird dieser Rat für Debugging-Zwecke verwendet , wissen Sie, einige Fehler zu beheben oder um Informationen über den Code zu finden, den wir gerade ausführen Also werde ich es dir einfach zeigen, anstatt zu reden. Ich werde die Variablen, die wir deklariert haben, trösten. Kann die Pi-Variable trösten. Verwenden Sie also das Konsolenobjekt, und in diesem Betreff haben wir eine Menge hilfreicher Methoden. Und eine davon ist die Log-Methode. Hier können Sie jede Variable oder beliebige Daten protokollieren. Sie können die Pi-Variable protokollieren. Und dann werde ich das speichern. Wenn ich jetzt zu unserer Browserseite der Konsole gehe, können Sie sehen, dass wir den Wert der Pi-Variablen haben. Lassen Sie uns nun den Wert unserer Nachrichtenvariablen sehen . Wie Sie hier sehen können, haben wir den Anfangswert der Nachrichtenvariablen als hello Javascript deklariert , aber dann weisen wir ihm einen anderen Wert zu, hallo da Also sehe ich jetzt wieder, dass es der endgültige Wert ist. Wie Sie sehen können, heißt es Hallo. also den Wert einer Leitvariablen ändern, ersetzen Sie tatsächlich den Variablenwert. Das ist es für die Konsolenprotokollierung. Lassen Sie uns nun zu den Funktionen übergehen. Jetzt sind es Alarmfunktionen. Wir werden das Schlüsselwort function verwenden . Wir werden diese Funktion Greet nennen. Und diese Funktion wird ein Argument erhalten. Argumente können in zwei Klammern der Funktion hinter dem Namen der Funktion genau dort platziert Funktion hinter dem Namen der Funktion genau Das sind zwei Klammern. Und das ist der Name des Arguments. Diese Get-Funktion wird also eine Person mit ihrem Namen begrüßen Deshalb haben wir dort einen Argumentnamen. Verwenden Sie in dieser Funktion das Konsolenprotokoll wie folgt und das Konsolenprotokoll den Namen. In Ordnung. Also, wenn ich das speichere, wird nichts passieren. Weil wir die Funktion ausführen müssen. Um das zu tun, rufen wir die Funktion und fügen zwei Klammern wie S hinzu. Nun übergeben wir das Argument name Beispiel: James, speichern Sie noch einmal, Sie können sehen, dass wir James haben Eigentlich, diese Funktion, grüße James in diesem Fall. Ich werde das Konsolenprotokoll von dort entfernen. Und ersetze es durch das Return-Schlüsselwort füge eine Literalzeichenfolge hinzu, die uns hilft, Javascript-Code einzufügen. Geh und sieh dir das in nur einer Minute an. Geh, um Hallo zu sagen. Komm schon, ich werde eine Avascr-Variablen mit dem Dollarzeichen und zwei geschweiften Klammern wie folgt einfügen eine Avascr-Variablen mit , und zwar immer noch innerhalb der Literalzeichenfolge und zwar immer noch Jetzt können wir hier drinnen alle Variablen übergeben, die wir wollen. In diesem Fall übergebe ich das Namensargument, das ebenfalls eine Variable ist. Jetzt werde ich das speichern , weil wir das Konsolenprotokoll von hier entfernt haben. Jetzt können wir das Ergebnis der Crete-Funktion nicht sehen. Also müssen wir die Crit-Funktion in ein Konsolenprotokoll aufnehmen. Schreiben Sie also ein Konsolenprotokoll und führen Sie dann die Crete-Funktion aus, schneiden Sie sie von dort aus und führen Sie sie in den beiden Klammern der Log-Funktion aus, Wenn ich das speichere, siehst du das Ergebnis des Aufrufs der Greet-Funktion, nämlich Hello James Das war's für Funktionen in JavaScript. Gehen wir nun zu einem anderen Thema über. Nach den Funktionen. Lass uns arbeiten oder lass uns lernen, mit Objekten zu arbeiten. Nun, um ein Objekt zu deklarieren, wobei Objekte als Werte für Variablen zugewiesen werden können. Wir können eine Variable, eine konstante Variable, mit der Konstante Qard deklarieren mit der Konstante Qard Nennen Sie diese Variable beispielsweise Person. Jetzt können wir den Wert dieser konstanten Variablen einem Objekt zuweisen . Objekte sind eine hervorragende Möglichkeit, Informationen oder Daten zu organisieren. Wenn Sie also mehr über Objekte erfahren möchten, können Sie sich die Folien hier ansehen. Bevor ich das speichere, werde ich es kommentieren sagen, dass ein Objekt deklariert Richtig? Ich werde das speichern. Jetzt wird es in diesem Objekt Eigenschaften haben. Die erste Eigenschaft ist die Eigenschaft mit dem Vornamen. es sich um benutzerdefinierte Eigenschaften handelt, Da es sich um benutzerdefinierte Eigenschaften handelt, können Sie sie beliebig benennen. Anstatt den Wert dieser Eigenschaft mit einem Gleichheitszeichen wie diesem festzulegen, verwenden wir nun Collins, um einer Objekteigenschaft einen Wert zuzuweisen Jetzt, nach der Spalte, wird der Wert der Eigenschaft Vorname auf James gesetzt Dann können wir diesem Objekt so viele Eigenschaften hinzufügen , wie wir möchten, aber wir müssen die Eigenschaften mit einem Komma trennen , etwa so Dann werden wir die Eigenschaft Nachname haben und den Nachnamen auf Wilson setzen Noch ein Komma und die Eigenschaft H auf 13 setzen, alles klar Und sogar Objekte können Eigenschaften haben, die auf eine Funktion festgelegt sind. Eigenschaften sind also wie Variablen, aber wissen Sie, die Deklaration dieser Eigenschaften unterscheidet sich von den üblichen Variablen in Java-Skript. Um also eine Funktion oder Methode innerhalb dieses Objekts zu deklarieren, schreiben Sie zunächst den Namen dieser Funktion, zum Beispiel den vollständigen Namen, genau wie bei jeder anderen Eigenschaft. Aber der Wert dieser Eigenschaft wird eine Funktionsdeklaration sein. Wir können eine Funktion mit dem Schlüsselwort function wie folgt deklarieren . Oder wir können sogar eine fortgeschrittenere Methode verwenden , um Funktionen zu deklarieren. Anstatt das Funktionsschlüsselwort zu verwenden, können wir die Pfeilfunktionsstruktur verwenden. Sie schreiben also einfach zwei Klammern, also öffnende und schließende, und fügen dann einen Pfeil hinzu, der durch ein Gleichheitszeichen entsteht , in ein größeres Zeichen und stellen sicher, dass keine Leerzeichen dazwischen stehen Das ist eine Pfeilfunktion. Fügen Sie dann zwei geschweifte Klammern hinzu, an denen der Code dieser Funktion ausgeführt werden soll Site diese Funktion, verwendet das Schlüsselwort return, eine literale Zeichenfolge zurück und fügt diesen Vornamen ein. Dieses Schlüsselwort bezieht sich auf dieses Personenobjekt. Wenn Sie dieses Schlüsselwort in der Konsole protokollieren möchten, wird das gesamte Objekt in der Konsole gedruckt. Also wählen wir dieses aktuelle Objekt mit dem Schlüsselwort Punkt Vorname aus, also greifen wir auf den Eigenschaftsvornamen des Personenobjekts zu. Also werde ich den Vornamen haben und dann werde ich auch auf den Nachnamen zugreifen. Also dieser Familienname mit Punkt, da werde ich eine lockige Klammer hinzufügen Ordnung. Jetzt werde ich es speichern. Und jetzt sehen wir uns an, wie diese Eigenschaften auf der Konsole gedruckt werden. werde auf unsere Objekteigenschaften und Methoden zugreifen Ich werde auf unsere Objekteigenschaften und Methoden zugreifen und sie mit der Protokollmethode der Konsole ausdrucken. Konsolenprotokoll kann also das Personenobjekt auswählen und auf die Eigenschaft Vorname zugreifen. Jetzt im Browser können Sie genau hier sehen, sagt James. Die letzte Ausgabe dort bezieht sich also auf Zeile Nummer 35, was unsere Orientzeile ist, in der dieses Konsolenprotokoll existiert. Ordnung. Wir werden ein weiteres Konsolenprotokoll haben, in dem wir unsere Funktion mit vollständigem Namen ausführen werden. Wir können das einfach machen, genauso wie wir eine Immobilie nennen. Gehen Sie also zur Immobilie mit vollem Namen. Aber dieses Mal werden wir zwei Klammern hinzufügen, so wie wir eine Funktion ausführen und Und in der letzten Ausgabe heißt es undefiniert Nun, warum wir das bekommen haben. Das ist logisch und sollte so sein , weil wir die Aro-Funktionssyntax verwenden. Und die o-Funktion hat dieses Schlüsselwort nicht. Kehren Sie also mit dem Schlüsselwort function zu unserer grundlegenden Funktionsdeklaration zurück. Entferne das Mündliche von dort und das war's. Ich werde das speichern. Und das war's. Stellen Sie also sicher, dass Sie das so in die Funktionsdeklaration ändern . Wenn wir jetzt die Ergebnisse sehen, kann ich sehen, wie James Wilson sie direkt dort im Browser auf der Konsole ausgibt. In Ordnung. Lass uns jetzt weitermachen. Nachdem wir mit den Objekten gearbeitet haben, fahren wir fort und arbeiten mit Arrays Wie deklariert man also ein Array? Auch hier deklarieren wir zuerst eine Variable und nennen sie Früchte , und nennen sie Früchte wenn sie einem leeren Array entspricht. So können wir ein Array mit eckigen Klammern und öffnenden und schließenden eckigen Klammern deklarieren . Das ist im Moment also ein leeres Array. Um es nicht leer zu machen oder um diesem Array einige Daten hinzuzufügen. Wir können die Daten zu diesem Array in Form von Elementen hinzufügen, die durch ein Komma getrennt sind, genau dort Sie können Zeichenketten und Zahlen hinzufügen, was auch immer Sie möchten Hier werde ich Zeichenketten hinzufügen, Namen von Früchten wie Apfel, Banane und Kirsche. Ordnung. Kann ich das speichern? Und jetzt gehen wir weiter und greifen auf die Array-Elemente oder -Elemente zu. Kann ich das Console Dot Log verwenden, um das Array-Element auf der Konsole zu sehen Und ich werde das erste Element dieses Arrays auswählen. Fügen Sie also den Namen des Arrays und fügen Sie dann eckige Klammern hinzu, genau wie so, innerhalb der eckigen Klammer müssen Sie den Index des Elements eingeben. In Arrays beginnen wir mit Null als Index des ersten Elements Also fangen wir beim Programmieren im Allgemeinen an zu zählen, wir beginnen bei Null, Null, Eins, Zwei, 34. Apple hat den Index Null. Wenn ich das also speichere, werden wir sehen, dass wir Apple auf der Konsole ausgeliehen haben. Richtig. Wenn du Banane haben willst, kannst du den Index Nummer eins weitergeben. Und da hast du's. Banane. Lass uns jetzt weitermachen. Wir können auch das gesamte Fruits-Array über eine Konsole protokollieren. Geben Sie also Früchte wie folgt ein, ich werde gleich dort ein Array haben. Mit den drei Elementen. Gas. Dies sind die Indexindexnummer Null, beziehen sich auf das Apfelelement Nummer eins bis Banane zu Kirsche. Sie haben hier die Längeneigenschaft, die gleich drei ist. Sie können die Länge eines Arrays auch mit dem Befehl Nun ausgeben, indem Sie die Eigenschaften oder Nachteile zusammen mit der Eigenschaftslänge verwenden, so einfach ist das Da drin wirst du drei haben. Und das ist die Länge der Früchtepalette. In Ordnung. Lassen Sie uns jetzt weitermachen und mit einigen Array-Methoden arbeiten. Lassen Sie mich eine Kommentarebene hinzufügen, sagen wir mit Array-Methoden, mit Array-Methoden. Wir werden mit der ersten Methode beginnen. Zuerst müssen wir das Fruits-Array verwenden. Und wir werden aufrufen, wie Sie hier sehen können, VSCode hat uns Hinweise oder ja Hinweise zu allen Array-Methoden gegeben , die für ein Array aufgerufen oder verwendet werden können Jedes Array hat die gleichen Methoden. Dieses Mal werde ich die Pop-Methode verwenden. Die Pop-Methode entfernt das letzte Element. In diesem Fall werde ich dieses Element gleich hier entfernen. Also, wenn ich die Pop-Methode so aufrufe , in Ordnung. Und um das Ergebnis zu sehen, verwende ich das Konsolenprotokoll. Lassen Sie mich nach oben scrollen und ich werde das Fruits-Array in der Konsole protokollieren. Also diese Pop-Methode, sie wird das Array überschreiben Wir können also das Fruits-Array in der Konsole protokollieren und sehen, dass es nur zwei Elementen besteht, Apfel und Banane Das letzte Element wurde also entfernt. Seien Sie also vorsichtig bei der Verwendung dieser Methode, da sie den Anfangswert des Arrays überschreibt. Nun, die zweite Methode ist eine Methode, die uns hilft, jedes Element des Arrays zu durchsuchen. Diese Methode wird für jedes aufgerufen. Nun, diese Funktion akzeptiert einen Funktionsrückruf als Argument Sie können also eine Funktionsdeklaration übergeben, Sie können eine Funktion wie hier deklarieren, aber ohne Namen Achten Sie darauf, sie nicht zu verwenden , um sie zu benennen, da es nur um eine Callback-Funktion einer Methode Sie wird ausgeführt, wenn wir den Code ausführen. Hier können Sie das Funktionsschlüsselwort verwenden, oder ich denke, es ist an der Zeit , die Aerosyntax zu verwenden Nun, diese Methode erhält zwei Argumente, das Element des Arrays, also durchläuft sie ihr Element hier, ich nenne es Fruit Und jedes Mal, wenn das Frucht-Argument den Wert eines dieser Elemente hat , wird es jedes einzelne von ihnen der Reihe nach durchgehen. Das zweite Argument ist also der Index dieses Elements innerhalb des Arrays. Jetzt, hier drinnen, können wir den Index des Elements protokollieren. Das ist ein Doppelpunkt. Übrigens können Sie das Pluszeichen verwenden, um Zeichenketten und Zahlen miteinander zu verketten Nach dem Aufruf erhalten wir den Fruchtnamen oder das Fruit-Array-Element Jetzt werde ich das speichern. Im Browser können Sie sehen, dass die Elemente unseres Arrays gedruckt wurden. Der Nullindex bezieht sich auf das Apple-Element. Wir haben hier Index eine Banane. Ich hoffe, Sie haben gesehen, wie die D F D-Funktion funktioniert. Lass mich einfach überprüfen, ob der Browser an seinem Platz ist. Ordnung. In Ordnung, jetzt lass uns weitermachen. für jeden hier zu lernen, werde ich lernen, wie man eine Reihe von Objekten erstellt. Das ist also sehr hilfreich , um unsere Daten zu organisieren. Ich werde hier die Hauptvariable verwenden, und ich werde eine Konstante oder Leitvariable mit dem Namen Studenten deklarieren , kann ihren Wert auf ein Array wie dieses setzen und dann entscheiden, dass wir für dieses Array ein Objekt haben werden. Dieses Objekt wird eine Eigenschaft haben. Für den Vornamen, der Name des ersten Schülers ist Alice, kann auch die Alterseigenschaft auf 20 gesetzt werden. Jetzt können weitere Objekte hinzugefügt werden. Lassen Sie mich dieses Array einfach anpassen , um es sichtbarer zu machen. Ich werde zwischen Array-Elementen oder Elementen mit einem Komma trennen Array-Elementen oder Elementen mit einem Komma Das Gleiche gilt auch für Objektelemente. Fügen Sie dort im zweiten Objekt das Komma hinzu, derselbe Eigenschaftsname für dieses Objekt wird Bob sein Ich werde einen S 22 haben. Und das letzte Objekt, das den gleichen Eigenschaftsnamen haben wird wie dieses Objekt, es wird Charlie sein und das Alter 223 angeben. Stimmt. Das ist eine Reihe von Objekten. Jetzt können wir jedes Objekt erneut mit der For-Methode durchsehen , aber auf dem Array für Schüler. Schreiben Sie also an die Schüler F. Ich werde die Namen und H für jeden Schüler ausdrucken Wenn Sie also glauben, dass Sie das alleine schaffen können, können Sie es versuchen. Also F, ich werde eine Pfeilfunktion als Rückwärtsfunktion hinzufügen. Und diese schwarze Funktion wird den Schüler erwischen. Und du kannst den Index hinzufügen oder du weißt schon, du musst ihn nicht direkt dort hinzufügen. Also haben wir die Schüler. Das ist es, was uns wichtig ist. Und nebenbei, ich werde wieder das Konsolenprotokoll verwenden. Das tut mir leid, Consol Dot Log. Und ich werde das Argument der Studenten annehmen. Und vergessen Sie nicht, dass das Studentenargument hier ein Objekt darstellt. Also durchforsten wir jedes Objekt in diesem Array. Und jedes Objekt hat Eigenschaften, Namen und Alter. Also werde ich die Namenseigenschaft protokollieren, wie Sie sehen können, VS-Code hat uns die Eigenschaften dieses Studentenobjekts gegeben Name. Und dann verkette ich es mit einer Zeichenfolge, die besagt, dass es mit dem Leerzeichen hier im Leerzeichen davor steht , und füge dann eine weitere Information über den Schüler hinzu, nämlich das Alter Und nach dem Alter werde ich sagen , Jahre alt . Okay. Wie Sie sehen können, werden jetzt im Browser alle Informationen über uns gedruckt, aber das war nicht der Fall. Ich weiß nicht, warum dort steht, dass 823 nicht definiert ist. Ich habe dort eine Art von gemacht, tut mir leid. Sie müssen dort also eine Spalte hinzufügen. Also, das muss ich tun. Jetzt können Sie das Ergebnis sehen. Wir haben drei Elemente oder drei Schüler in diesem Array, und wir haben drei Zeichenketten oder drei Phrasen über diese Schüler gedruckt oder drei Phrasen über oder sie vorgestellt. Ordnung. Lass uns jetzt weitermachen. Und dieses Mal werden wir lernen, Objektmethoden mit Arrays zu verwenden Also nach den vier Methoden. Ich werde eine weitere Lead-Variable deklarieren , ihr Namen und wir nehmen das Studenten-Array und verwenden eine andere Methode namens map. Die Map-Methode ist genau wie die Vier-H-Methode, aber mit einem einfachen Unterschied , der darin besteht, dass die Map-Funktion ein Array zurückgibt und dem Wert dieser Variablen zugewiesen wird . Lassen Sie uns also weitermachen und das in Aktion sehen. Ich übergebe einen Rückruf mit der Aro-Syntax. Dieser wird auch das Student- oder das Array-Element und den Index abrufen Student- oder das Array-Element und den Index Ich werde den Index dort platzieren, aber wir werden ihn nicht verwenden. In dieser Rückseite der Kartenfunktion. Wir werden zurückkehren und wir sind verpflichtet, und wir sind verpflichtet die Rücksendeerklärung hier zu verwenden Ich werde den Punktnamen des Studenten zurückgeben. Dadurch wird ein Uwara erstellt, das nur die Namen der Schüler enthält. Und das kannst du in nur einer Sekunde sehen . Ich werde das sagen und außerhalb der Kartenfunktion verwende ich Csle Dot Log und Csle Log the Names Jetzt können Sie im Browser deutlich das Array sehen, das nur Alice Bob und Charlie enthält, das sind die Namen unserer Schüler Also haben wir ein ganz neues Array erstellt , das nur den Namen des Schülers enthält. Auf diese Weise können Sie Arrays ändern, und tatsächlich ist die Map-Funktion in Java Script sehr wichtig, und Sie können viele Dinge damit machen Jetzt kommen wir zum letzten Teil dieser Lektion , der Dom-Manipulation Also werde ich hier einen Kommentar hinzufügen und sagen, DM-Manipulation. Kann ich damit beginnen, Elemente von unserer HTML-Seite auszuwählen. Lassen Sie uns weitermachen und einige HTML-Elemente in unseren Körper einfügen. Außerhalb des Skripts können einige Elemente wie ein Titel oder unsere Seite hinzugefügt werden. Äh, wir können den Titel mit H einem Element hinzufügen. Ich gebe ihm ein ID-Argument oder -Attribut, ich setze seine ID auf Titel. Ich werde hier sagen, ein Java-Skript für Gesetze. In Ordnung. Nach dem Element H wird es ein Button-Element mit öffnenden und schließenden Tags geben. Vergiss das nicht. Wir werden eine ID in dieser ID haben, zum Beispiel die Schaltfläche „ Titel ändern “. Diese Schaltfläche wird für die Änderung des Titels verantwortlich sein . Hier kann ich sagen, Titel ändern. In Ordnung. Jetzt geben wir ihnen IDs , weil wir sie mit JavaScript auswählen und ein bestimmtes Element in unserem Körper auswählen wollen JavaScript auswählen und ein bestimmtes Element in unserem Körper auswählen . Wir benötigen eine eindeutige Kennung. Deshalb verwenden wir das ID-Attribut. Also kann ich ein DIF-Element haben. Auch hier können Sie in diesen Folien mehr über diese Elemente erfahren Folien mehr über diese Elemente Kann ich also eine ID für diesen dF-Inhalt hinzufügen. Das ist es. Kann nur drei Elemente haben , eines, eine Schaltfläche, eine Schaltfläche und eine Entwicklung. Nun kann ich hier unten anfangen, unsere Kuppel zu manipulieren, kann ich jetzt das Titelelement, eine bestimmte Konstante, auswählen und es Titelelement nennen Und wir greifen auf das Dokument der Seite oder das Seitendokument zu und verwenden eine Methode namens Get Element by ID Und wir werden den Titel bekommen , der den ID-Titel hat. Nun, ich werde den ID-Titel weitergeben. In Ordnung. Kann ich nach dem Titel unser Button-Element auswählen. Dokument, Element nach ID abrufen, und die ID unserer Schaltfläche ist Inhalt. Wählen Sie abschließend tatsächlich nein aus. Die Schaltfläche hat nicht die Inhalts-ID, aber sie hat die Schaltfläche zum Ändern des Titels für die ID. Es ist genauso geschrieben. Kann ich es von hier kopieren und einfügen nur um sicherzugehen, dass keine Fehler auftreten. nun nach dem Button-Element Wählen Sie nun nach dem Button-Element das Inhaltselement aus. Ich werde Document Dot Get Element by ID verwenden, die ID des Inhaltselements ist Inhalt. Jetzt, nachdem wir unser Element ausgewählt haben. Jetzt wollen wir den Textinhalt des Titelelements ändern . Eigentlich müssen wir den Titel ändern. Wählen Sie das Titelelement aus, greifen Sie auf den Textinhalt dieses Elements zu und ändern Sie ihn in Willkommen bei Java Script. Java-Skript. Wenn ich das speichere. Nun ja, ich habe vergessen, die Konsole zu schließen. Ich kann hier sehen, dass es jetzt Willkommen bei Java Script heißt. Wenn ich diese Zeile entferne und erneut speichere, um zum ursprünglichen Wert zurückzukehren , der Hallo Javascript ist. Wenn ich jetzt die Codezeile zurückgebe, wird sie wieder zu Willkommen bei Java Script geändert. Lassen Sie uns jetzt weitermachen. Wir können sogar jedem Element einen Event-Listener hinzufügen, aber in diesem Fall fügen Sie dem Button-Element einen Event-Listener hinzu Also wähle ich das Button-Element und füge ihm einen Event-Listener Diese Event-Listener-Methode akzeptiert den Namen des Ereignisses In diesem Fall handelt es sich um Click. Wir werden uns das Click-Event ansehen. Wir werden das schließen. Und du wirst einen Rückruf haben. In diesem Rückruf werden wir des Titelelements ändern Auch hier wurde die Inhaltseigenschaft des Titelelements auf „Titel geändert“ gesetzt Der Titel wurde mit einem Ausrufezeichen geändert. In Ordnung Jetzt kann ich das im Browser testen. Wenn ich auf Titel ändern klicke, wird es zu Titel ändern geändert. In Ordnung. Ich werde diesem Klick-Event weitere Funktionen hinzufügen. Ich werde das Inhaltselement auswählen, das wir hier deklariert haben. Und ich werde den inneren HTML-Eigenschaftswert ändern Dieses innere HTML akzeptiert HML-Elemente. Es ist nicht wie der Textinhalt. Also werde ich es dir in Aktion zeigen. Ich werde eine wörtliche Zeichenfolge hinzufügen. Lass es mich darin speichern. Seite hier, die AML-Elemente haben wird, das P-Element, das sich auf das Absatzelement bezieht. Und wir werden den Absatz hinzufügen und die Grite-Funktion aufrufen, die wir hier deklariert haben Ja, genau da. Wir haben die Grite-Funktion, die ein Namensargument akzeptiert und die Begrüßung zurückgibt Ordnung. Geh, um den Namen weiterzugeben. Zum Beispiel Student. Ja. Nehmen wir deinen Schüler rein. Ich sage zum Beispiel, oder tatsächlich, es heißt genau Hallo Student. Wir werden das speichern. Und wenn ich hierher zurückgehe, auf Titel ändern klicke, kann ich sehen, dass sich der Titel geändert hat, und wir haben hier Hallo Student über die Inhaltsentwicklung. Ordnung. Wir können diesem Code mehr hinzufügen. Wir können einen Absatz und einen weiteren Absatz haben , wenn wir wollen. Kann ich einige Ihrer Lieblingsfrüchte nennen und wir können sie weitergeben oder wir können das Früchte-Sortiment verwenden. Und wir werden die Join-Methode verwenden. Die Join-Methode verbindet also alle Array-Elemente und akzeptiert das Trennzeichen zwischen diesen Elementen. Wir können sie also mit einem Koma trennen. Es wird sie alle als Zeichenfolge verbinden. Es wird sie alle als Zeichenfolge zurückgeben. Also werde ich das speichern. Bevor Sie weitermachen oder die Ergebnisse sehen, fügen wir den letzten Absatz hinzu. Auch hier gilt: Wenn ich die Dinge nicht gut genug erkläre, können Sie sich die Folien genau dort ansehen. Also werde ich koreanische Schüler hinzufügen. Schüler und ich gehe zum Namensfeld , füge alle Objekte zusammen und trenne sie durch ein Komma Ordnung. Jetzt, in unserem Browser. Wir können hier klicken, den Titel ändern und Sie können die drei Absätze oder drei Phrasen sehen. Sagt zuerst: Hallo Schüler. Hier sind Äpfel und Bananen einige deiner Lieblingsfrüchte. Wir haben nur drei, weil wir die Pop-Methode verwendet haben, die den Array-Wert überschreibt Richtig? Jetzt haben wir auch diesen Satz, in dem es um koreanische Studenten geht, Alice, Bob und Charlie. Das Namensarray, das wir hier mit der Map-Methode deklariert haben .