JavaScript lernen: Vom Anfänger bis zum Fortgeschrittenen

1. Intro: Javascript, lassen Sie uns über JavaScript sprechen. Im Gegensatz zu HTML und CSS, bei denen es sich um Markup- bzw. Stylesheet-Sprachen handelt, ist JavaScript eine Programmiersprache die Python, Java und anderen ähnelt Mit JavaScript können wir Logik in unsere derzeit statischen oder unveränderlichen Websites einführen Logik in unsere derzeit statischen oder unveränderlichen Websites Wenn Sie zum Beispiel ein Formular hätten, dem sich ein Benutzer für Ihre Website registrieren kann, wäre es nicht toll, wenn er nach der Anmeldung mit seinem Namen begrüßt würde anstatt ein allgemeines Hallo zu erhalten Dies ist etwas , das uns JavaScript ermöglichen wird. Hoch. Zoe Davidson, Softwareingenieurin und Universitätsprofessorin Lassen Sie uns in die Vor - und Nachteile von JavaScript und Programmiersprachen im Allgemeinen eintauchen JavaScript und Programmiersprachen im Allgemeinen 2. Kursprojekt: Wir werden dieses kleine Formular verwenden, das wir hier erstellt haben, und wir werden es tatsächlich verwenden, um unseren Benutzern unsere Antwort zu geben , wenn sie ihre Informationen einreichen 3. Programmiersprachen: Programmiersprachen. Wie wir bereits besprochen haben, ist JavaScript eine Skriptsprache, mit der Sie Logik und Funktionalität in Ihre Webseiten einführen können Sie Logik und Funktionalität in Ihre Webseiten einführen Aber wie macht es das? Wie bereits erwähnt, ist JavaScript eine Programmiersprache. Es gibt mehrere Dinge, die die meisten, wenn nicht alle Programmiersprachen gemeinsam haben. Genau wie andere Arten von computergestützten Sprachen gibt es Programmiersprachen in ihrer einfachsten Form, nur Möglichkeiten für uns, mit dem Computer zu sprechen Insbesondere Javascript ermöglicht es uns als Programmierern, über das DOM oder das Dokumentobjektmodell mit dem Web zu interagieren DOM oder das Dokumentobjektmodell mit dem Das DOM ist eine Programmierschnittstelle für Webdokumente und dient als Repräsentation dieser Seite, sodass sie auf der Grundlage von Benutzereingaben und Interaktionen interagiert, aktualisiert und geändert werden kann auf der Grundlage von Benutzereingaben und Interaktionen interagiert, aktualisiert und geändert Insbesondere Javascript ist die Sprache, die wir verwenden, um mit dem DOM zu interagieren. Und 98% aller Websites verwenden JavaScript auf der Client-Seite Programmiersprachen haben auch alle ihre eigene Syntax. Genau wie in anderen Sprachen wie Englisch und Französisch gibt es eine Syntax, die definiert und erklärt , wie Wörter zu Sätzen, Absätzen usw. zusammenkommen Sätzen, Absätzen usw. Programmiersprachen haben auf die gleiche Weise ihre eigene Syntax, um zu bestimmen, was eine vollständige Codezeile ausmacht. Zum Beispiel werden wir, genau wie im Grammatikunterricht in der Schule, viel Zeit damit verbringen, die Syntax zu lernen und zu besprechen , damit wir sicherstellen können , dass wir die Sprache richtig sprechen. Denken Sie schließlich darüber nach, wie wichtig Kommas in der englischen Sprache sind Sie haben vielleicht von anderen Programmiersprachen wie Python, C, Ruby, Java und anderen gehört wie Python, C, . Je nachdem, welche Art von Anwendungen Sie erstellen möchten, ist eine dieser Programmiersprachen möglicherweise besser für die Aufgabe geeignet als andere. Programmiersprachen haben alle ihren eigenen Anwendungsfall und Zweck. Ziel dieses Kurses ist es, zu lernen, wie man mit Webanwendungen interagiert und diese erstellt. Die beste Programmiersprache, die wir lernen können, ist JavaScript. Es gibt eine Reihe anderer Dinge, die alle Programmiersprachen gemeinsam haben, darunter Variablen, Kontrollstrukturen und Datenstrukturen. Wir werden uns zu gegebener Zeit mit jedem von ihnen befassen. Jetzt wissen Sie ein bisschen mehr darüber, was JavaScript ist und wie es mit der Webentwicklung zusammenhängt. Lass uns anfangen, es zu schreiben 4. SET-UP: Es gibt zwei Stellen, an denen JavaScript in HTML-Dateien oder in einer eigenen dedizierten JavaScript-Datei geschrieben werden kann . Wenn wir JavaScript in eine HTML-Datei schreiben wollen, ist es so einfach wie das Hinzufügen des Skript-Tags zum Kopfbereich des Dokuments. Dieses Script-Tag ist für alle Skriptsprachen reserviert, das sind Sprachen, in denen Sie Befehle mit der Breite ausführen können, und hier könnte unser JavaScript theoretisch leben Alles, was Sie zwischen diesen Tags schreiben, wird kompiliert und als JavaScript interpretiert. Nun, das ist in Ordnung für wirklich kleine Anwendungen. Dies könnte etwas kompliziert werden, sobald wir anfangen , immer komplexere Websites zu erstellen. In diesem Fall können wir die zweite Stelle nutzen, an der JavaScript in eine eigene Datei geschrieben werden kann , und einfach ein Script-Tag als Referenz verwenden, eine separate JavaScript-Datei, App.js, erstellen und die beiden verbinden. Wie Sie bereits erwähnt haben, gibt es zwei Stellen , an denen JavaScript innerhalb eines Skriptelements auf der HTML-Seite zwischen zwei Skript-Tags oder in einer eigenen Datei geschrieben werden kann eines Skriptelements auf der HTML-Seite . Wenn wir es in die HTML-Datei schreiben würden, würden wir es so schreiben. Wir erstellen unser Script-Tag im Kopf und dann würden wir unser JavaScript schreiben. Also schreiben wir wie console.log, Hello, World, speichere es. Und wenn wir dann zu unserer Webseite gehen würden, würden wir in der Konsole sehen, dass wir HelloWorld geloggt haben Nun, das ist keine schlechte Idee, wenn Sie viel kleinere Projekte machen, aber wie Sie sehen, ist es nicht unbedingt praktisch. Wenn Sie mehrere Komponenten und mehrere Ebenen haben. Sie können sich vorstellen , dass Ihre HTML-Datei anfangen würde, ziemlich lang zu werden. Als gute Regel gilt, dass Sie im Kopf behalten sollten , dass Sie wirklich keine Dateien wollen, die mehr als 100 Zeilen lang sind, es sei denn, es handelt eine besonders komplexe Komponente , für die die gesamte Logik erforderlich ist, um vollständig zu sein. Im Idealfall möchten Sie die Dinge in Teile zerlegen und sie nach Bedarf integrieren. Zu diesem Zweck möchten Sie Ihr JavaScript in einer separaten Datei ablegen . Also lass uns das loswerden. Und das heißt eigentlich, mach weiter und erstelle eine neue Datei, und wir nennen sie app.js. Da JavaScript eine Skriptsprache ist, können wir mit dem Script-Element Dinge verbinden, bei denen es sich um Skripte handelt Also können wir ein Skript machen und dann können wir es genauso machen, wie wir es mit dem Stylesheet gemacht haben, Schrägstrich machen und app.js auswählen und unser geschlossenes Script-Tag haben In Ordnung, los geht's. Gut zum Mitnehmen. In Ordnung, der Script-Tag ist jetzt verbunden 5. JavaScript schreiben: JavaScript schreiben. Jetzt, wo wir wissen, wo JavaScript verwendet wird und wie es theoretisch funktioniert, ist es an der Zeit, das Schreiben zu lernen Wenn Sie mit der Programmierung von JavaScript noch nicht vertraut sind, werden wir etwas länger brauchen, um es zu lernen als mit HTML und CSS. Und das ist völlig normal. Das liegt daran, dass Sie nicht nur eine weitere neue Sprache lernen, sondern auch eine Programmiersprache und einige der Kernkonzepte hinter dem Programmieren im Allgemeinen lernen. Aber keine Sorge, wenn du bald dabei bleibst, wird es genauso einfach sein wie jede andere Sprache. Lassen Sie uns zunächst in die leere Datei app.js springen. In Ordnung, also lassen Sie uns unseren Link testen , um sicherzustellen, dass er funktioniert Also lass uns eine console.log machen und wir geben Hello World ein und speichern es und wir sehen es auf einer Konsole. Fantastisch. Du schreibst bereits JavaScript. Also, was hast du da gerade gemacht? Sie haben einfach die Konsole, also das Fenster in Ihrem Chrome-Tab, angewiesen das Fenster in , zu protokollieren oder anzuzeigen, das Sie in diese beiden Klammern gesetzt haben Console.log ist eine wichtige Methode, die selbst fortgeschrittene Softwareingenieure verwenden, da sie eine großartige Möglichkeit ist herauszufinden, wo Sie möglicherweise einen Fehler in Ihrem Code gemacht haben. Ein Prozess, der als Debugging bezeichnet wird. Im Moment benötigen wir diesen Code jedoch nicht , also lassen Sie uns ihn kommentieren. Um etwas zu kommentieren. In JavaScript hältst du die Befehlstaste gedrückt und drückst den Schrägstrich und es wird tatsächlich einfach auskommentiert Das Auskommentieren bedeutet also , dass Sie diesen Code nicht verwenden können Es läuft nicht mehr aktiv. Sie können es jederzeit ungewöhnlich machen und es wieder auf Ihre Seite bringen. Sie benötigen jedoch nicht unbedingt Kommentare. Dies ist eine weitere großartige Möglichkeit , anderen Entwicklern benutzerfreundlichere Notizen zu hinterlassen Du könntest also sagen, dass dies ein Kommentar ist und die Leute einfach wissen lassen was du zu tun versuchst, ihre Arbeit könnte sagen, dass dies ein Punktlog der Testkonsole ist. Du kannst die Leute also wissen lassen wie Hey, dieses Konsolenprotokoll ist unwichtig Die Kommentare sind wirklich toll. Ich denke, mehr Leute sollten mehr Kommentare in den Code schreiben, damit andere Entwickler, wenn sie zusammenarbeiten, verstehen können , warum jemand eine einfache Entscheidung getroffen hat. Du solltest nicht zu viele Zeilen mit einem Kommentar schreiben, sondern nur eine kurze Zeile, einen kurzen Ausschnitt, nur um zu sagen: Hey, das habe ich einen kurzen Ausschnitt, nur um zu sagen: Hey, getan, warum habe ich es getan? Ich denke, es ist eine wirklich großartige Übung. 6. Variablen: Variablen In der Informatik sind Daten alles, was für den Computer von Bedeutung ist. Javascript bietet acht verschiedene Datentypen : undefined, null, boolean, string, number, object, big, int und symbol In diesem Kurs werden wir uns nur auf die ersten sechs konzentrieren, da Sie als neuer Ingenieur selten auf den letzten stoßen werden Diese Datentypen helfen einem Computer zu verstehen, was er mit einem Datenelement tun kann und Zum Beispiel kann 12 entweder ein Zahlentyp oder ein String-Typ sein. Wenn es sich um eine Zahl handelt, behandelt der Computer sie als solche. Und es kann für alle Arten von mathematischen Operationen wie Addition und Subtraktion verwendet werden mathematischen Operationen wie Addition und Subtraktion Wenn es sich beispielsweise um eine Zeichenfolge handelt, wird sie wie eine Reihe von Zeichen behandelt, ähnlich wie ein Satz oder eine andere Gruppe von Buchstaben. Zeichenketten sind Gruppen von Zeichen, die verwendet werden, um grundlegende Datenzeilen zu speichern , die keine Zahlen sind. Zeichenketten haben immer Anführungszeichen, Zahlen nicht, und sie sind auch immer Zahlen. Jedes Datenelement benötigt nicht nur einen Typ, sondern auch einen Speicherort, an dem sie gespeichert werden können , damit immer wieder auf sie zugegriffen werden kann. Es wäre eine schreckliche Erfahrung wenn Sie eine Menge Informationen in eine Webseite eingeben würden und sie einfach verschwinden würden, sobald Sie die Seite verlassen haben An dieser Stelle kommen Variablen ins Spiel. Variablen dienen als Speicherorte für jeden einzelnen Wert. Möglicherweise sind Sie auf Variablen wie X und Y und Ihren Mathematikunterricht an der High School gestoßen X und Y und Ihren Mathematikunterricht an der High School Programmiervariablen folgen demselben Konzept. Sie stellen die Daten dar, die wir speichern. Der einzige Unterschied besteht in JavaScript. Bei diesen Variablen kann es sich um einen der acht Typen handeln, die wir zu Beginn dieser Lektion erwähnt haben . Zum Beispiel, wenn wir eine Website mit einem Formular codieren würden , das die Benutzer nach ihrem Vornamen fragt Wir würden die Daten, die sie uns gegeben haben, in einer Variablen speichern. Markieren wir es als Beispiel, um es besser zu verstehen. Ordnung, also habe ich den Ordner Learn JS erstellt den Ordner Learn JS Ich erstelle eine neue Datei. Ich nenne es app.js. Lassen Sie uns weitermachen und über verschiedene Teile von JavaScript und deren Funktionsweise sprechen . Wie wir gerade erwähnt haben, sind Variablen für uns eine Möglichkeit, Daten in JavaScript zu speichern. Zum Beispiel, wenn wir ein Formular für eine Website mit einem Formular hätten , in dem Benutzer nach ihrem Namen gefragt werden. Wir würden wahrscheinlich eine Möglichkeit haben wollen , an diese Informationen zu kommen. Lassen Sie uns also eine schnelle HTML-Datei und das Formular erstellen, das wir verwenden können Ordnung, in dieser Form wird es der anderen Form ähnlich sein, wird es der anderen Form ähnlich sein mit ein paar wichtigen Also erstelle ich eine Eingabe vom Typ, Textnummer . Und wir werden das als Alter einordnen, dafür sorgen, dass es perfekt ist. Das ist also ein wirklich einfaches Formular, das einfach so aussieht, dass wir den Benutzer nach seinem Vornamen, seinem Nachnamen und seinem Alter fragen . Sie sollten einen Senden-Button haben. Der Eingabetyp entspricht also der Schaltfläche. Und wir fokussieren uns einfach auf die Taste. Und wir werden Senden sagen. Lassen Sie uns unsere app.js mit unserem HTML verbinden, wie wir es zuvor mit einem Script-Tag getan haben. Und die Quelle wird der Schrägstrich app.js sein. Schließ das ab, speichere das und wir sollten startklar sein. Also, wenn wir zu local zurückkehren, localhost 50, weißt du, ich denke, es ist das Drittens, okay, wir haben, unsere wirklich, wirklich grundlegende Form Ordnung, wir haben also unseren Vor - oder Nachnamen oder unser Alter und unseren Senden-Button Also wollen wir weitermachen und diese Daten ausfüllen, oder? Nehmen wir an, Sie möchten, dass ein neuer Benutzer auf Ihre Website kommt und diese Informationen ausfüllt. Ähm, du wirst sagen wie John Brown und sein Alter von 45, oder? Und er wird diese Informationen einreichen. Cool. Es passiert jedoch nichts, wenn Sie die Informationen einreichen. Die Informationen gehen nirgendwohin. Was wir jetzt tun wollen, ist diese Information in einer Variablen zu speichern , damit wir sie zumindest verwenden können. Wenn wir also hier nachschauen und unsere Konsole auschecken, können wir diese Information tatsächlich an eine Variable senden lassen. Wenn der Benutzer also auf Senden klickt, können wir unser Formular haben und die Daten irgendwohin schicken. Was wir hier tun werden, ist eine Variable zu erstellen. Es gibt also zwei Arten von Variablen. Es gibt konstante Variablen und es gibt Variablen, die sich ändern können, sogenannte Letvariablen, konstante Variablen Sobald Sie ihr einen Wert zugewiesen haben, kann der Wert nicht mehr ändern. Lassen Sie Variablen sich dagegen ändern. Wir wollen also entscheiden , welchen Variablentyp wir für die Situation verwenden möchten. Persönlich würde ich empfehlen, eine Hauptvariable zu verwenden , da wir den Wert der Variablen nicht wirklich kennen Wert der Variablen bevor der Benutzer seine Daten übermittelt Wir können let user machen und es einfach sein lassen , dass die Variable user jetzt erstellt hat , auf nichts gesetzt ist. Es bedeutet noch nichts, aber irgendwann können wir ihm einen Wert zuweisen. Es empfiehlt sich, eine Variable mit einem Wert zu initialisieren, dies ist jedoch nicht erforderlich Wenn Sie eine Variable nicht mit einem Wert initialisieren, erhält sie den Standardwert undefined Der dritte Datentyp wird behandelt Alles undefiniert bedeutet , dass noch nicht definiert wurde , was er ist Daher existiert die Variable noch nicht. Das bedeutet nicht, dass es den Wert Null hat, aber das ist der Datentyp Null Null und undefined sind zwei sehr ähnliche Datentypen, aber mit kleinen Unterschieden können Sie einer Variablen den Wert Null zuweisen und sie wird Das ist so, als würden Sie dem Computer sagen, dass Sie eine Kiste in Ihrer Lagereinheit haben, aber Sie wissen, dass sie leer ist. Wenn Sie dieselbe Variable dem Wert von undefined zuweisen , teilen Sie Ihrem Computer jetzt mit, dass das Feld nicht wirklich existiert Wissen, ist absichtlich nichts solange undefiniert nicht existiert. Wenn wir einen konstanten Wert einer Variablen erzeugen wollen, können wir CONST user ausführen und ihn dann geben, wir könnten, nun, nennen wir das Sie können nicht, Sie können auch keine Variablen mit genau demselben Namen haben . Wir können das also als konstantes Alter bezeichnen . Und dann könnten wir es auf eine bestimmte Zahl oder eine Zeichenfolge setzen . Also können wir es darauf setzen, oder wir können es auf 45 setzen, oder? Was auch immer, worauf wir es setzen wollen, wir verwenden die Gleichheiten, um einer Variablen tatsächlich einen Wert zuzuweisen. Anders als in der Mathematik sind wir also gleich I1 plus eins, gleich zwei Es ist kein mathematischer Operator in diesem Sinne, es ist eigentlich eine Aufgabe. Ein Zuweisungsoperator, über den das Gleichheitszeichen sprechen wird. Wir werden etwas später über die anderen Möglichkeiten sprechen, wie wir Gleichheiten verwenden können, um tatsächlich zu bedeuten, dass dies dem entspricht. Aber im Moment müssen wir wissen, dass das einzige Gleichheitszeichen im Singular die Aufgabe ist Das Alter ist also 45 Jahre. Wir können so darüber nachdenken. Da ich den Wert hier eingegeben habe, ist es eine gute Idee, eine Variable mit einem Wert zu initialisieren Wir können also den Benutzer tatsächlich diesen leeren Anführungszeichen gleichsetzen lassen diesen leeren Anführungszeichen gleichsetzen Anführungszeichen oder die Art und Weise, wie eine Zeichenfolge identifiziert wird. Wenn Sie es in Anführungszeichen setzen, sagen Sie dem Computer nur , dass dies wahrscheinlich ein Zeichenkettenwert sein wird, ähm, später können wir sogar vorschreiben, dass es sich um können wir sogar vorschreiben, dass es eine Zeichenfolge oder eine Zahl handelt oder was auch immer es ist Aber das können wir mit TypeScript machen. Aber was wäre, wenn wir diesen Wert nicht initialisiert hätten, oder? Was wäre, wenn wir es einfach so hätten, welchen Wert hätte es Ihrer Meinung nach? Wir haben über die verschiedenen Datentypen gesprochen, es gibt also eine Zeichenkettennummer, aber es wäre wahrscheinlich aber es wäre wahrscheinlich keiner von beiden, wenn wir ihm keinen Typ geben würden. Nun, wenn Sie sich bei etwas unsicher sind, können wir es keiner von beiden, wenn wir ihm keinen Typ geben würden. Nun, wenn Sie sich bei etwas unsicher sind, einfach in der Konsole protokollieren Wenn wir also das Konsolenpunktprotokoll aufrufen, wird der Benutzer sehen, dass der Benutzer tatsächlich undefiniert ist Und wenn Sie sich erinnern, bedeutet undefiniert, dass etwas nicht existiert Null bedeutet, dass es im Wesentlichen Null ist, weil es undefiniert ist. Ich bin, das bedeutet, dass es noch nicht existiert. Sobald wir ihm einen Wert zugewiesen haben, wird er existieren. Auf der anderen Seite sollten wir 45 erreichen, wenn wir das Konsolenlogalter erreichen. Und genau dem haben wir es zugewiesen. Eine weitere coole Sache, die wir tun können, ist dass wir den Typ einer bestimmten Variablen in der Konsole protokollieren können einer bestimmten Variablen in der und es gibt uns tatsächlich den Typ. In diesem Fall ist die Art des Alters also eine Zahl weil wir ihr eine Nummer zugewiesen haben. Sie können auch, wie wir bereits erwähnt haben, verwenden, wir können reden, wir können einer Variablen den Wert Null zuweisen , oder? Also CONST, nichts. Wir könnten es auf Null setzen und das speichern. Und wenn wir dann nichts machen würden , sollten wir es wissen. Wie Sie hier sehen, haben wir Null in der Konsole. Also haben wir dem Computer ausdrücklich gesagt, dass es null ist, es ist nichts, es ist nicht zum Lesen bestimmt. Eine Sache, an die man sich besonders in der Informatik und bei Variablen wirklich erinnern besonders in der Informatik sollte, ist die Rechtschreibung. Mit JavaScript ist es tatsächlich möglich, zwei verschiedene Typen für verschiedene Variablen derselben Schreibweise zu verwenden. Also ich könnte tatsächlich CONST machen, Alter. Ich kann Alter mit Kleinbuchstaben machen. Ich könnte Alter mit Großbuchstaben machen. Und das wird mir keinen Fehler geben. später jedoch falsch buchstabiere, Wenn ich später jedoch falsch buchstabiere, wo ich Alter verwende, z. B. wenn ich in der Konsole das Alter z. B. wenn ich in der Konsole Großbuchstaben statt in Kleinbuchstaben protokolliere, erhalte ich möglicherweise das falsche Alter erhalte ich möglicherweise das Es ist also am besten, dies nicht zu tun und tatsächlich nur eine Form der Rechtschreibung und Großschreibung für Ihre Variablen zu verwenden eine Form der Rechtschreibung und Großschreibung für Ihre Variablen zu Apropos Rechtschreibung und Großschreibung in JavaScript, wir verwenden tatsächlich eine spezielle Methode der Großschreibung namens In Camelcase haben Sie den ersten Buchstaben. Der erste Buchstabe des ersten Wortes ist klein und der erste Buchstabe, auf den jedes Wort folgt , ist Großbuchstaben Also CamelCase, es ist irgendwie wie ein Kamel. Wenn Sie also mehr als eine Variable erstellen müssen, können Sie immer CamelCase verwenden oder vielleicht möchten Sie etwas aussagekräftiger sein Sie könnten also CONST sagen, Nachname des Benutzers entspricht braun. Und da hast du's. So würdest du schreiben , dass bei Camel Case nur der Benutzer klein geschrieben wird, nur der Benutzer klein geschrieben wird letzte groß geschrieben wird und der Name auch groß In Ordnung, also lassen Sie uns etwas weiter eintauchen , um zu sehen, was wir sonst noch mit Variablen machen können, oder? Wir haben also unseren Benutzer LastName. Lassen Sie uns den Benutzer FirstName of John erstellen. Nehmen wir an, der Benutzer hat dies in unser Formular eingegeben und dann möchten wir einen Satz mit „Gefällt mir“ zusammenstellen, vielleicht möchten wir unseren Benutzer begrüßen, wenn er auf Senden klickt, wir möchten wie Hallo John Brown sagen Es gibt also verschiedene Möglichkeiten, dies zu tun. Aber eine interessante Sache, die wir mit Variablen machen können, ist, sie tatsächlich zu verketten. So können wir verschiedene Variablen zusammenfügen , um einen Satz oder eine andere Zeichenfolge zu erstellen oder eine andere Zeichenfolge , die für uns oder unsere Benutzer von Bedeutung oder nützlich ist. Verwenden Sie also Verkettung, was Sie einfach tun würden, und Sie würden sagen, Sie haben das wahrscheinlich in einer anderen Variablen gespeichert, so Du könntest also CONST sagen, Gruß. Und dann würden Sie nicht den tatsächlichen Namen des Benutzers nehmen, sondern die Variable, die seinen Namen darstellt, und sie zu einem Satz zusammenfügen. Also könnten wir sagen, hallo. Und dann verwenden wir das Plus-Symbol, um im Grunde zu symbolisieren, was wir wollen, dass diese beiden Dinge zusammengezählt werden Jetzt wie in Mathe, aber wie Connected, High User, User, FirstName und LastName Dann könnten wir es sogar mit einem Ausrufezeichen beenden , weil wir uns freuen, mit dieser Person zu sprechen Und so haben wir unseren Gruß. Begrüßung entspricht Hallo plus was auch immer der Benutzername ist, plus was auch immer der Nachname ist. Und weißt du was? Lassen Sie mich zur besseren Praxis hier ein wenig Leerzeichen einfügen , nur um sicherzustellen, dass es richtig formatiert ist In Ordnung, lassen Sie uns die Begrüßung in der Konsole protokollieren und sehen, was wir bekommen. Da haben wir's. Hallo John Brown, Lehrplan. Es ist sehr aufgeregt. Nehmen wir den ersten weg. Da steht: Hi John Brown. Und so funktioniert Verkettung im Grunde. Du kannst Zeichenketten nehmen, du kannst Variablen nehmen und sie miteinander verbinden, um Sendungen zu erstellen, die für Menschen von Bedeutung sind oder eine andere sinnvolle Verwendung ist so. Eine weitere interessante Sache, die Sie mit Variablen, insbesondere mit Zeichenketten, tun können , ist herauszufinden, wie viele Buchstaben sie enthalten. Weil Zeichenketten eigentlich nur eine Reihe von Buchstaben sind, ist die Liste der Buchstaben. Sie fallen technisch gesehen auch unter einen anderen Datentyp, nämlich auch unter einen anderen Datentyp, ein Array, über das wir später sprechen werden . Eine der verfügbaren Methoden oder Funktionen , die Sie durch die Verwendung von Arrays erhalten, besteht jedoch Funktionen , die Sie durch die Verwendung von Arrays erhalten darin, dass Sie feststellen können, wie lang sie sind Wenn ich also sehen möchte wie viele Buchstaben die Zeichenfolge „Begrüßung“ enthält, kann ich im Grunde console.log züchten und dann einen Punkt dahinter setzen um anzugeben, dass es eine Methode für diese Variable gibt , auf die ich zugreifen möchte. Dot ist im Grunde wie eine Möglichkeit, in etwas hineinzukommen. Also, wenn ich so eine Kiste habe und ich weiß, dass da eine Gabel drin ist. Ich könnte wie eine Box-Punktgabel drücken, um die Gabel in die Schachtel zu bekommen . Die Länge des Grußpunktes reicht aus. Und weil Länge eine Eigenschaft ist, die bei der Begrüßung angegeben wird, sollte sie uns sagen, wie viele Zeichen die Begrüßung enthält. Also lass uns weitermachen und das von der Konsole protokollieren. 14. Ich meine, wenn du es berechnest, ist es wie HI-Raum J0 H BR OWN, und dann ist da noch ein Leerzeichen Und das letzte Ausrufezeichen, das ist 14. Es sagt uns also genau, wie lang eine Zeichenfolge oder ein Array ist. Es ist also eine wirklich coole Eigenschaft, auf Sie zugreifen können, falls Sie jemals die Länge von etwas wissen müssen, was nützlicher sein wird, wenn wir mit immer größeren Datensätzen arbeiten mit immer größeren Datensätzen 7. Arrays: Arrays sagen, dass wir mehrere Namen zusammen speichern möchten , damit wir später auf alle zugreifen können In diesem Fall würden wir einen anderen Datentyp verwenden, der als Array bezeichnet wird. Ein Array wird erstellt, indem die einzelnen darin enthaltenen Daten mit eckigen Klammern gekapselt und jedes Datenelement durch Kommas getrennt werden Sie können eine beliebige Anzahl von Elementen in einem Array haben, aber es ist eine gute Idee, sie nur zu verwenden wenn Sie mehr als ein Datenelement speichern möchten. Arrays können sogar andere Arrays enthalten. Sie können Daten aller Art speichern. Versuchen wir, unserer Seite ein Array hinzuzufügen. Okay, eine weitere interessante Tatsache über Programmiersprachen und im Allgemeinen ist, dass die meisten Programmiersprachen nicht wirklich anfangen, bei Eins zu zählen Sie beginnen bei Null zu zählen. Das nennt man Nullindizierung, und genau so haben wir gelernt, wie man im Code zählt Sie werden viele Sprachen finden, die dies tun , in JavaScript ist eine davon. Es wird etwas gewöhnungsbedürftig sein, aber ich bin mir sicher, dass du es schaffst. Ordnung, wir können jedoch die Nullindizierung verwenden, In Ordnung, wir können jedoch die Nullindizierung verwenden, um uns wirklich zu helfen das Innenleben verschiedener Daten wie Arrays und Zeichenketten zu verstehen , das Innenleben verschiedener Daten wie Arrays und Zeichenketten zu verstehen. Wenn wir also dieses Grußelement genau hier verwenden, nehmen wir diesen Gruß, die Bildschirmzeichenfolge. Wir können sogar die Nullindizierung verwenden, um bei der Begrüßung auf einen bestimmten Buchstaben zu gelangen bei der Begrüßung auf einen bestimmten Buchstaben Was wir tun werden, ist die sogenannte Klammernotation zu verwenden . Es gibt also zwei Arten neuer Notationen. Es gibt Klammerschreibweise und Punktnotation. Tatsächlich haben Sie die Punktnotation bereits verwendet, indem Sie die Eigenschaft „Länge des Grußpunktes“ verwendet haben. Im Grunde sagt die Punktnotation wie: Hey, ich weiß, du hast dieses Ding und da ist etwas drin. Es ist so, wenn ich Zoe heiße, könnte die Punktnotation so lauten: Hey, ich will Zoe is, Zoe ist LastName oder weißt du, es Das sind die Dinge, die du mir in die Notation geben könntest, wenn ich ein JavaScript-Objekt wäre. Aber in Bezug auf das, was wir hier haben, haben wir einen Gruß , der aus einer Reihe von Buchstaben besteht , einem Satz. Und wir könnten tatsächlich nur auf einen Buchstaben in diesem Satz zugreifen tatsächlich nur auf einen Buchstaben , wenn wir wollen. Das kann sehr nützlich sein, wenn Sie vielleicht eine Liste von Daten haben , Listen mit Namen. Und du willst nur den Vor- oder Nachnamen von dieser Liste streichen oder so Aber wir können es mit unserer Grußzeichenfolge üben. Die Kiva-Punkt-Schreibweise besagt, dass Sie den Namen der Immobilie kennen Wenn Sie also nach dem Alter Ihres Objekts suchen , müssen Sie wissen, dass das Alter existiert. Andernfalls wird undefined zurückgegeben. Wenn ich „Ballon mit einem Grußpunkt“ sage, sollte der Wert undefiniert zurückgegeben werden, da auf Grün keine Balloneigenschaft steht Wenn wir jedoch die Klammerschreibweise verwenden, können wir auf diese ersten Zeichen oder weniger Zeichen zugreifen oder was auch immer der Fall sein mag. Also bringe ich das alles mit nullbasierter Indexdose zur Sprache, weil wir zwei eckige Klammern neben das Wort Gruß setzen zwei eckige Klammern neben das Wort Dann geben wir in diesen eckigen Klammern an, auf welches Zeichen wir zugreifen möchten. Und wenn es der erste Charakter ist, werden wir keinen hinzufügen. Wir setzen Null, weil wir bei Null anfangen zu zählen wir uns der Begrüßung zuwenden. Wir setzen Null und speichern es dann. Und wir sollten ein großes H bekommen Mal sehen, was wir bekommen. Tolles Kapital H. Daran wissen wir , dass es funktioniert. Wir bekommen den ersten Buchstaben. Wenn wir das tun, bekommt einer das I, wenn wir das tun, bekommen wir diesen Raum , der nach nichts aussehen würde. Aber es ist eigentlich ein bisschen, also gibt es dort wenig Platz. Und dann können wir das alles bis zum Ende machen. Wenn wir nun den letzten Buchstaben der Grußzeichenfolge erhalten wollen , können wir auf die Länge zugreifen dann die Länge minus eins berechnen. Wir könnten also eine Begrüßung machen, wir könnten eine Begrüßung machen, und dann können wir innerhalb dieser Klammer erneut die Begrüßung machen, Punktlänge minus eins. Bei einer nullbasierten Indexierung müssen Sie also immer eins von der Anzahl der Beträge abziehen , um auf das letzte Element zuzugreifen, oder? Wenn Sie also 12344 Teile schlechter Elemente haben und Sie wissen, dass Sie, Sie sind, Sie sind, Sie sind eine Zeichenfolge, die vier Zeichen lang ist In der Länge werden es vier sein, aber wenn Sie zählen, werden es tatsächlich 0123 sein Der Grund, warum wir eins abziehen, ist also, um auf den letzten zuzugreifen. Wenn wir subtrahieren, wenn wir für eingeben, versucht es tatsächlich auf etwas zuzugreifen , das es nicht gibt Wir wollen also sicherstellen , dass wir eins subtrahieren, wenn wir nach dem letzten Element und einer Zeichenfolge suchen. Wir berechnen die Länge des Grußpunktes minus eins Und das wird tatsächlich der Index sein, auf den wir zugreifen wollen. Das wird also im Grunde zu einer Zahl berechnet, der richtigen Zahl des Index Wenn sich also die Länge der Begrüßung jemals ändert, ändert John vielleicht seinen Namen in Stephen. Und jetzt besteht die Begrüßung nicht mehr aus 14 Zeichen. Es ist vielleicht 17. Anstatt 14 als diese Begrüßung, Grußnummer oder 13 fest zu codieren als diese Begrüßung, Grußnummer oder 13 Wenn wir schon rechnen, können wir einfach sagen, hey, egal wie lang der Verlauf ist, egal wie der Name der Person lautet, wir wollen nur die Länge ermitteln und das letzte Zeichen ist kein Ausrufezeichen Ist es eine Periode, was auch immer es ist. Wenn wir auf Speichern klicken, sollten, sollten wir ein Ausrufezeichen bekommen Da haben wir's, genau hier auf der Konsole. Ausrufezeichen. Ordnung, wir wurden in das Konzept der Arrays eingeführt das Konzept der Arrays Diese Teile, diese Datensätze in denen wir mehrere Variablen zusammenhalten können, mehrere Zeichenketten, vielleicht mehrere Informationen zusammen. Das ist großartig. Dies ist eine viel einfachere Möglichkeit , all unsere Daten in einem Stück zusammenzufassen. Was wir jetzt tun können, ist diese Arrays tatsächlich zu unserem Vorteil zu nutzen Anstatt das Alter anzugeben, haben wir unseren Vornamen verwendet, verwenden Sie Ihren Nachnamen und Ihre Begrüßung Wir können das alles tatsächlich in einem Array speichern Wir können CONST sagen, user, first user, first user Und anstatt all dies getrennt zu haben, können wir sagen, dass der erste Benutzer gleich ist. Oder wir können sagen, anstatt, nun, lass uns diesen Benutzer hier loswerden. Und wir können CONST-Benutzer sagen weil Arrays tatsächlich veränderbar sind Also, wie wir gesagt haben, dass man eine Konstante nicht mutieren kann, mutieren kann. Sie können Arrays tatsächlich ändern, unabhängig davon ob sie mit der Konstanten CONST oder mit Lead deklariert sind Konstanten CONST oder mit Lead Was wirklich interessant an ihnen ist. Wenn wir also eine Zeichenfolge erstellen möchten , die unseren Benutzer darstellt, könnten wir das Array mit unseren eckigen Klammern erstellen und dann sagen , dass der Benutzer der Vorname des Benutzers ist. Wir geben den Nutzernamen der Benutzer-App an. Und dann machen wir, der Benutzer macht das Alter, das ist R. Jetzt unser Benutzer-Array. Dieses Array sollte alle Informationen über unseren Benutzer enthalten. Wenn ich also den Benutzer console.log verwende, sollte ich all diese Informationen erhalten, ja, durch Kommas getrennt Wir haben also John Brown mit 45. Das ist also wirklich cool. Es gibt eine Möglichkeit für uns, all unsere eigenen Daten zusammenzuhalten , zum Beispiel müssen unsere Daten nicht einfach überall sein, um sie zu organisieren einfach überall sein, um Es ist eine viel einfachere Art, Dinge zusammenzustellen. Wie wir bereits erwähnt haben , können wir, genau wie bei Zeichenketten, genau wie bei Zeichenketten, auf verschiedene Zahlen in unserem Array zugreifen , oder? Nehmen wir an, wir hatten eine ganze Reihe verschiedener Benutzer, oder? Nehmen wir an, wir hatten user1 FirstName und wir hatten, wir hatten einen anderen Benutzer, oder? Also sagen wir, wir hatten, ich werde das ändern, um es zu verwenden oder ein Alter. Und ich ändere diese beiden in user in Const, user to age entspricht drei In Ordnung? Wir haben jetzt also zwei Benutzer. Wir haben Benutzer eins und Benutzer zum Beenden. Dies ist ein großartiger Ort, um Kommentare zu verwenden, also können wir einfach R1 verwenden Wir können einfach sehr spezifisch sein worüber wir sprechen und die Dinge ein bisschen weniger überladen aussehen lassen, von Benutzer zu großartig zu Nehmen wir an, wir lassen diese beiden Benutzer schreiben und sagen wir wollten nur den Vornamen dieser beiden Benutzer speichern nur den Vornamen dieser beiden Benutzer Wir könnten CONST-Benutzer-Vornamen gleich user1 FirstName und Benutzer zu Vorname machen, und Benutzer zu Das wäre ein Array, das ihre beiden Vornamen enthielt. Was ziemlich cool ist. Wir haben das für uns im Griff. Nehmen wir nun an, wir wollten nur auf den ersten, FirstName, dieses Arrays zugreifen FirstName, dieses Arrays Also der FirstName des ersten Benutzers, wir konnten tatsächlich mithilfe der Klammerschreibweise darauf zugreifen Also könnten wir console.log über console.log es machen. Und wir könnten sagen, dass der Vorname des Benutzers in Klammer Null steht. Und das sollte uns den Vornamen unseres ersten Benutzers geben , der John ist. Wir haben es richtig gemacht. Wir haben den Vornamen des ersten Benutzers erhalten. Das ist also eine wirklich nützliche Methode wenn wir es vielleicht einfach die erste Person nennen wollen, die zu der Party gekommen ist, die auf die Website geschrumpft Wir möchten sagen, Hey John, und wir möchten sie willkommen heißen. Zuerst. Wir können sie durchgehen , bis wir das Ende der Liste Weil das ein wirklich cooles Feature über Arrays ist. Sie werden all diese Daten zusammenhalten und mithilfe der Klammerschreibweise auf sie zugreifen. Aber nehmen wir an, Sie kennen nicht unbedingt den Index dessen, wonach Sie suchen, oder? Sagen Sie, Sie wissen das, Sie wissen schon, John hatte die Party, aber Sie wissen nicht , ob er der Erste, der Letzte oder der Mittlere ist. Ich muss den Namen finden. Nun, es gibt tatsächlich eine andere Methode. So wie wir die Längenmethode hatten, gibt es die Find-Methode, die wir in einem Array verwenden können , um ein bestimmtes Datenelement zu finden , nach dem wir suchen, wir können den Vornamen des Benutzers verwenden. Sollen wir Vornamen, Benutzervornamen, Namen verwenden . Und wir können Punkt anrufen, okay. Und wir können sehen, dass wir hier mit unserer Dokumentation sind. Dazu gibt es tatsächlich ein paar Informationen. Es ist also eine Methode für Arrays von Zeichenketten, um eine bestimmte Zeichenfolge zu finden Und dann sagt es dir im Grunde, wie man es schreibt. Diese können etwas verwirrend sein, also schauen wir mal, ob wir sie auf MTN nachschlagen können Gehen wir also zurück zu MTN und suchen nach. In Ordnung, Array-Dot-Prototyp Punkt, gut, cool. Die Methode find gibt also das erste Element im bereitgestellten Array zurück . Diese Seite erfüllt die bereitstellende Testfunktion Wenn kein Wert die Testfunktion erfüllt , wird undefined zurückgegeben Ziemlich einfach. Also nehmen wir, was auch immer unser Array-Array ist, sie haben es gespeichert, die Antwort in einer Variablen hier, also gefunden, und dann rufen wir es einfach auf dem Array auf. Also array dot will array1 dot finden, was auch immer das Element ist Wenn das Element größer als zehn ist. Und dann sollten sie finden, sie sollten, ich schätze, es kriegt das Erste, das gefunden wird. Das ist ziemlich cool. Also schauen wir ob wir es finden können, also nehmen wir, was auch immer. Also im Grunde genommen, was hier passiert, ist dass es Element für Element nimmt. Es geht die Liste durch und versucht, den ersten zu finden, der die Kriterien erfüllt. Es ist also nehmen, sucht nach einem Element. Wenn das Element größer als zehn ist, speichert es die Antwort und gibt sie zurück, um zu sagen: Hey, wir haben die Antwort gefunden. Schauen wir uns also an, ob wir dasselbe tun können. Wir machen konstante Pund-Gleichungen und es muss nicht gefunden werden, sei es nach etwas anderem als konstanten Benutzernamen, Punkt Wir werden nach einem Namen suchen. Wenn der Name gleich ist, entspricht er nicht Wie wir bereits erwähnt haben, gibt es zwei Arten von Gleichheiten, oder? Es gibt einfache Gleiche, Doppelgleiche und Dreifachgleiche. Dies ist eine Situation, in der wir doppelte Gleichheiten verwenden würden, um zu sagen: Hey, ich möchte, dass das dem entspricht. Also, wenn der Name John entspricht, wenn der Name John ist, dann möchte ich, dass du ihn findest und ihn mir zurückgibst. Also, wenn wir console.log finden, sollten wir John holen. Wir haben also John, aber was wäre, wenn John nicht auf der Liste wäre? Was, wenn es Harry wäre? Speichern, das undefiniert wird, genau wie die Funktion es gesagt hat Was wäre, wenn wir etwas Interessanteres finden wollten ? Was wäre, wenn wir einen Namen finden wollten ? Finde einen Namen, dessen Name größer ist als, sagen wir, fünf. Sie heißen beide John, das sollten wir ändern. Also lassen Sie uns diesen in Stephen ändern, wie wir bereits erwähnt haben. Wenn der Name also länger als fünf ist, sollte er den Namen zurückgeben. Es sollte also nicht John zurückgeben, es sollte Steven zurückgeben. Lass uns sehen. Fantastisch. Also haben wir Steven zurückgeholt. Sie können sehen, wie diese verschiedenen Methoden zusammenfügen und zusammenarbeiten, um das zu erstellen, was wir finden müssen Das sind die Grundlagen der Informatik. Sie beginnen, mit Algorithmen zu arbeiten , die bereits im Computer vorhanden sind. Sie sind also auf dem besten Weg , JavaScript wirklich zu lernen. Und wieder fragen Sie sich vielleicht, woher ich all diese verschiedenen Datentypen und Methoden kenne. Es liegt nicht daran, dass ich das auswendig lernen kann. Wie Sie sehen, googeln wir buchstäblich einfach und suchen nach allem, was wir brauchen, was wir nicht wirklich auf dem Kopf haben. Also habe ich die Längenmethode ohne großen Aufwand angewendet. liegt daran, dass ich es oft benutzt habe aber gut , es ist etwas, das ich nicht so oft benutzt habe. Also habe ich nachgeschaut, um sicherzugehen, dass ich die richtige Implementierung habe. Und ich habe nicht einfach versucht, es aus dem Kopf heraus umzusetzen, und ich habe das Falsche getan und Fehler bekommen, weil es nur ein dummer Fehler bei meiner Implementierung war Bevor wir zum Abschluss über Arrays sprechen, wir noch einige dieser grundlegenden Methoden durchgehen dieser grundlegenden , die wir möglicherweise verwenden möchten Eine weitere Coding-Map iteriert im Grunde über ein Array und gibt die Ergebnisse einschließlich dieser Iteration zurück die Ergebnisse einschließlich dieser Iteration Es ist also normalerweise dazu gedacht, etwas mit dem Array zu machen. Wenn ich also Vornamen als Punktkarte verwende, möchte ich den Namen nehmen und den Namen zusammenfügen, vielleicht nennen Name und Sonne sie Johnson und Stevenson Und ich möchte, dass es die Karte zurückgibt. Also lassen Sie uns das in Mapped ändern. Theoretisch sollte ich Johnson und Stevenson holen, wenn ich sie kartografiert Also lass uns sehen. Wir haben jetzt ein Array mit Johnson und Stevenson. Sie können also per IMAP einzelne Elemente im Array übergehen und Änderungen vornehmen Lassen Sie uns als Nächstes über Map für jeden sprechen, jedes ist Map sehr ähnlich, bis auf einen wesentlichen Unterschied. Das tut es eigentlich nicht, es gibt nichts zurück. Wie konnten wir also die Map in einer Funktion, in einer Variablen und einem Konsolenlog speichern , mit dem wir eigentlich nicht für jede Funktion etwas zurückgeben. Es soll sich also wie die eigentliche Sache selbst ändern. Wenn ich also Johns Vorname ändern möchte oder wenn ich möchte, dass es vielleicht ein neues Array erstellt, habe ich vielleicht ein leeres Array erstellt Also conc, leeres Array. Und es war nichts drin. Wie Sie sich erinnern, habe ich bereits gesagt , dass Arrays veränderlich sind. Das bedeutet, dass Sie ihnen Dinge hinzufügen und daraus entfernen können , auch nachdem sie mit einer Konstanten erstellt wurden. Nehmen wir an, ich wollte Dinge hinzufügen, Namen zu diesem leeren Array hinzufügen. Also vielleicht habe ich die Vornamen der Benutzer genommen und anstatt für jeden zu rechnen, habe ich für jeden einen gemacht. Also für jeden Namen werde ich ihn nicht in einer Variablen speichern, diesmal verwenden wir ihn einfach so wie er ist. Wir werden für jeden Namen eine Methode namens Push verwenden. Wir nehmen unser leeres Array und wir werden pushen, wir werden den Namen pushen. Das heißt, wir nehmen buchstäblich nur diesen Namen an. Wir schieben es in das Array. Es sollte also einen Johnson oder John und einen Steven in unserer leeren Reihe geben. Richten wir das ein und lassen Sie uns das leere Array console.log erstellen. Lassen Sie uns das Array sogar zweimal mit console.log leeren. Das ist console.log davor und danach. Wir sollten also nur leere eckige Klammern und Klammern sehen und dann sollten wir John und Stephen sehen. Perfekt genau das, was wir bekommen haben. Leere Klammern und Gelbsucht, obwohl wir wissen, dass es tatsächlich genannt wird, funktioniert es tatsächlich Großartig. Schauen wir uns eine andere Methode an. In Scheiben schneiden. In Ordnung, wenn Sie also mit Slice arbeiten, können Sie im Grunde entscheiden , mit welchem Abschnitt des Arrays Sie arbeiten möchten Das ist wirklich interessant , wenn man zum Beispiel tatsächlich mit Namen arbeitet. Also, wenn ich Const, Sliced, wenn ich eine Variable namens Sliced erstelle, und ich nehme den FirstName von User Two Und ich habe dann ein Stück draufgemacht. Wo ich vielleicht mit dem zweiten Buchstaben angefangen habe und beim vierten Buchstaben geendet habe, sollte ich ein Stück von Stevens Namen bekommen Und wenn ich die Konsole mit Punkten aus dem Logbuch schneide erhalte ich Trinkgeld, das ist die Mitte des Stevens-Namens zwischen den gesuchten Charakteren So würdest du, du würdest schneiden. Das war's für mich. Die beste Art, Slice zu verwenden, ist eine Zeichenfolge oder etwas Ähnliches, wobei ich nur eine Teilmenge davon benötige Ordnung, die nächste Methode, die wir ausprobieren werden, ist Splice Splice ist Splice sehr ähnlich, aber es ändert tatsächlich das Array selbst Also rufe ich Splice auf einem Array auf. Es wird mir ein neues Array zurückbringen. Es wird, es wird das Array von Anfang an ändern, es ein bisschen anders spleißen, als es Slice dauern wird, wir werden es tatsächlich tun, wir werden Splice für die Vornamen der Benutzer aufrufen der Benutzer Also, was wir tun werden, ist es mit einer Startnummer zu versehen. Also fangen wir vielleicht bei Index eins an, der Benutzer für Vornamen ist. Dann werden wir, wir werden, wir werden eine löschen. Wir werden den Namen von Justice Stevens löschen und dann fügen wir einen neuen Namen und wir fügen Harrys Namen hinzu Also speichern wir das und lassen Sie uns dann den Benutzernamen console.log verwenden. Es tut uns leid. Das hätte also tun sollen, das zu nehmen, zu modifizieren und als mutiertes Array zurückzugeben . Mal sehen, ob es das getan hat. Fantastisch. Jetzt haben wir 0 und lassen Sie uns diese console.log loswerden. Fantastisch. Jetzt haben wir John und Harriet statt John und Steven So haben wir also quasi etwas gespleißt und etwas Neues hineingelegt Aber du musst nichts Neues hineinlegen und du kannst es wirklich einfach herausnehmen und stehen lassen. Ordnung, der nächste, den wir uns ansehen werden, ist Shift Shift ist eine weitere Methode , die auch ein Array mutiert. Wenn Sie shift für ein Array aufrufen, wird tatsächlich das erste Element entfernt. Jetzt können Sie entweder das erste Element speichern oder das mutierte Array zurückgeben. Sie haben die Wahl. Schauen wir uns an, wie wir das für unser Benutzer-Vornamen-Array verwenden würden . Wir könnten einen Benutzer Dot Shift mit Vornamen nennen. Und wir müssen keine Parameter übergeben. Wir nennen es einfach so. Also, wenn wir Benutzer, Benutzerpunkt, Vorname, konsolen , sollten wir einfach herausfinden, wer soll Stevens Namen bekommen Also ja, es sickert einfach. Aber wenn wir das console.log machen, sollten wir uns wirklich nur den Namen von John holen. John, da haben wir es. Es hängt also davon ab, was Sie versuchen zu bekommen. Versuchst du den Vornamen zu bekommen? Wir versuchen, die gesamte Liste ohne für das erste Element abzurufen, oder Sie versuchen , die gesamte Liste ohne das erste Element abzurufen. welche dieser beiden Arten greifen Sie auf diese Daten zu, aber die Wahl liegt wieder bei Ihnen. Die letzte, die wir für heute auschecken , ist die Unshift Wie bereits erwähnt, fügt unshift Elemente am Anfang eines Arrays Nehmen wir an, wir haben Ihren Vornamen, aber was fügt dem Array einen neuen Namen hinzu. Wir werden die Vornamen der Benutzer eingeben, Punkt aufheben. Und wir fügen Harry hinzu, Harrys Namen genau dort. Wenn wir erneut den Benutzer FirstName console.log verwenden, sollten wir das Array mit dem neuen Namen erhalten Und los geht's, Harry, John und Steven. Und da haben wir es. Dies sind einige der wichtigsten Methoden Sie für Arrays verwenden können und die Sie sicher auf Ihrer JavaScript-Reise nützlich finden werden Ihrer JavaScript-Reise 8. Funktionen: Funktionen, die ich will, bis jetzt haben wir alles ziemlich manuell gemacht . Ich meine, sicher. Der Computer macht den Großteil der Arbeit, aber es gibt eine Möglichkeit, die Dinge für uns noch einfacher zu machen. Anstatt uns immer wieder zu wiederholen, wenn wir unsere Daten organisieren oder den Computer nach Daten fragen, können wir eine sogenannte Funktion verwenden Eine Funktion ist ein wiederverwendbares Stück Code, mit dem wir immer wieder auf dieselbe Logik zugreifen können dem wir immer wieder auf dieselbe Logik zugreifen , ohne sie neu zu schreiben Funktionen können auch so benannt werden, dass wir überall in unserer Datei oder unserem Programm auf sie zugreifen können . Lassen Sie uns unseren Code umgestalten, um einige grundlegende Funktionen zu erstellen, die uns das Leben erleichtern Ordnung, das nächste , worüber wir sprechen wollen, sind Funktionen Ich habe es gerade erwähnt. Funktionen ermöglichen es uns, nicht mehr alles manuell zu erledigen und die Tatsache, dass wir Computer programmieren, wirklich auszunutzen . Und wir können dem Computer erlauben, einen Großteil dieser Arbeit für uns zu erledigen. Schauen wir uns also an, wie wir eine Funktion schreiben würden. In unserer Datei app.js, die Art und Weise, wie wir eigentlich anfangen würden eine Funktion zu schreiben, gibt es zwei Möglichkeiten, aber die gängigere Methode, dies jetzt zu tun, besteht darin, eine Konstante zu verwenden, genau wie wir zuvor gesehen haben, um den Namen der Funktion zu initialisieren Wenn wir also eine Funktion benennen würden , nennen wir sie zum Beispiel meine Funktion. Und dann, anstatt es gleich zu machen und hier nur den Wert einzugeben, würden wir tatsächlich Gleichheiten und dann die Klammern und ein anderes Gleichheitszeichen und einen Pfeil setzen dann die Klammern und ein anderes Gleichheitszeichen und einen Dies wird eigentlich als Pfeilfunktionssyntax bezeichnet. Und es ist eine besondere Art, Funktionen zu schreiben, aber sie ist eine der prägnantesten Es ist also, es wurde sehr häufig übernommen. Nach unserem Pfeil. Nach unserem Pfeil verwenden wir tatsächlich die lockigen Zahnspangen und das war's So schreibt man das Grundformat für eine Funktion. Aber was ist eine Funktion? Es braucht ein Stück Logik und implementiert es im Grunde für uns In meiner Funktion könnten wir ihm also einfach etwas wirklich Einfaches geben , wie console.log. Und dann, wie wir schon gesehen haben, Hello World. Jedes Mal, wenn diese Funktion aufgerufen wird , wird console.log angezeigt. Es wird sich auf der Konsole HelloWorld anmelden. Aber wie bringen wir das eigentlich zum Laufen? Nun, wenn Sie eine Funktion haben, können Sie die Funktion nicht einfach schreiben und dann erwarten, dass sie aufgerufen wird, von der erwartet wird, dass sie ausgeführt wird. Du musst es tatsächlich anrufen. Eine Funktion aufzurufen ist also wirklich einfach. Alles, was Sie tun, ist, den Namen der Funktion einzugeben , wie Sie es bei uns schon einmal gesehen haben, und die Klammern dahinter zu setzen Und sobald Sie es gespeichert haben, wird die Funktion aufgerufen. Wenn wir also zu unserem Browser springen und uns die Konsole ansehen , werden wir sehen, dass dort wieder Helloworld steht Es ist ziemlich cool, mit Funktionen zu arbeiten. Sie können sich den Grad der Komplexität vorstellen , den Sie in diese Funktionen stecken können , und sie bei einer beliebigen Anzahl von Problemen immer wieder aufrufen lassen. Es gibt also wirklich tolle Dinge, mit denen man arbeiten kann. Eine weitere Sache, die Sie beachten sollten, ist, dass Funktionen Argumente annehmen können, genau wie ich es bereits erwähnt habe Das Konsolenpunktprotokoll ist eine Art von Funktion. Helloworld ist eigentlich ein Argument , das von console.log übernommen wird Also nur in unserer Funktion hier könnten wir das tatsächlich ein bisschen ändern. Wir könnten geben, wir könnten das machen. Wir können daraus eine Funktion machen, die tatsächlich auf der Konsole druckt. Wir können unsere eigene console.log erstellen, wenn Sie möchten. Nehmen wir an, wir nennen das unser eigenes Konsolenprotokoll. In Ordnung, und das ist nur zum Üben. Im wirklichen Leben würdest du das nicht tun, aber du würdest sagen, du gibst ihm dein eigenes Konsolenprotokoll und benennst dann einen Parametertyp. Sie können das wirklich einfach R1, R1 oder R2 nennen , je nachdem, wie viele Argumente Sie haben Aber du könntest es wirklich alles nennen, was du willst. Du könntest also einfach Wert sagen. Und dann, anstatt Konsole, Hardcode, Hardcodierung in das Konsolenlog einzugeben, HelloWorld Wir können tatsächlich einfach die Wertrequisite übergeben und sie stattdessen verwenden Also, was auch immer ich als Parameter in unsere eigene Konsolen-Log-Funktion eingegeben habe, wenn ich es aufrufe, wird es auf der Konsole ausgegeben Wenn ich sagen würde, Hallo zusammen. Anstatt Hallo Welt, wenn ich zur Konsole zurückkehre, wird tatsächlich Hallo zusammen statt HelloWorld oder Value gedruckt statt HelloWorld oder Alle Arten von Funktionen können Parameter annehmen, solange ihnen diese Fähigkeit gegeben wurde und etwas mit diesem Parameter zu tun hat, was ein weiterer wirklich großartiger Teil von Funktionen ist, oder? Wir können das auf verschiedene Weise nutzen. Wir können auch einen Wert aus einer Funktion zurückgeben und diesen Wert dann in einer Variablen speichern. Diese Variable kann dann wie jede andere verwendet werden. Dies ist eine wirklich nützliche Methode, um Daten zu erhalten. Wenn Ihre Funktion keine Rückgabeanweisung hat, sie undefined zurück Sie können diese Art von Funktionen verwenden , um eine Variable außerhalb ihrer selbst zu aktualisieren , ohne dass die Daten direkt von der Funktion zurückgegeben werden Wir können auch einen Wert aus einer Funktion zurückgeben und diesen Wert dann einfach in einer neuen Variablen speichern. Also zum Beispiel, wenn wir, sagen wir, die Summe einer Reihe von Zahlen bekommen wollten , oder? Wie wäre es also, wenn wir CONST machen, Summe ist gleich. Und dann werden einige antworten, und es werden drei Argumente erforderlich sein. Es braucht R1, Argh es wird Nummer eins nehmen, weil wir Zahlen nehmen werden Ich gebe mein Bestes, wenn du Parameter ausführst, beschreibend zu sein . Ich sehe einfach Leute, die zurückkommen und deine Funktion verwenden, und wissen, was du für sie eingegeben Also machen wir einen m1, m2 und m3. Und dann geben einige tatsächlich einfach Num1 plus Num2 plus Nummer drei zurück Num1 plus Num2 plus Nummer drei Das ist es also. Es werden nur drei Zahlen benötigt und einige davon sind insgesamt höher. Aber was wir tatsächlich tun können, anstatt diese Funktion nur zu nennen, können wir Konzepte. Wir können eine, wir können eine Variable namens result erstellen und dann können wir die Ergebnisse dieser Funktion in diesen Variablenergebnissen speichern . Wir können also einige der Zahlen 12.3 machen. Und wenn wir dann die Antwort protokollieren , dass wir das Ergebnis des Konsolenprotokolls protokollieren, sollte es insgesamt sechs ergeben. Schauen wir uns das an. Wenn Sie hier sehen, es hat sich zu sechs summiert und wir haben sechs oder sechs ist die Summe unserer Funktion hier. Das ist also auch ein wirklich nützlicher Weg, wenn Sie einfach etwas aufrufen und das Ergebnis speichern und es dann vielleicht an einem anderen Ort verwenden möchten . Dies ist auch eine großartige Möglichkeit, dies zu erreichen. Manchmal möchten Sie vielleicht nur wissen, ob eine Funktion funktioniert oder nicht. Sie benötigen nicht unbedingt einen bestimmten Wert, der daraus zurückgegeben wird. In diesem Fall würden wir einen anderen Datentyp verwenden, der als Boolean bezeichnet wird. Boolesche Werte sind ein spezieller Datentyp, der nur einen von zwei Werten haben kann , Diese Wörter sind nicht in Anführungszeichen geschrieben und sollen lediglich als Indikator dafür verwendet werden , ob etwas erfolgreich war oder nicht. Wenn Sie beispielsweise wissen möchten, ob Ihre Funktion wie vorgesehen ausgeführt wurde oder nicht, können Sie true zurückgeben, falls sie funktioniert hat, und false, falls dies nicht der Fall war. Manchmal möchte man aber einfach wissen, ob eine Funktion funktioniert oder nicht. Vielleicht möchten Sie nur wissen, ob ein bestimmter Aspekt Ihrer App funktioniert oder nicht , und Sie möchten, dass diese Funktion ausgeführt wird , wenn sie funktioniert, oder Sie möchten, dass diese Funktion true“ zurückgibt, wenn sie funktioniert oder „False“ zurückgibt, wenn dies nicht der Fall ist. Hier werden wir uns mit diesen Booleans befassen. Lassen Sie uns anhand von IF-Aussagen herausfinden ob jemand das Mindestalter für das Fahren erreicht hat oder nicht. Lassen Sie uns also eine Liste der Altersgruppen erstellen. Lassen Sie uns eine Reihe von Altersstufen ermitteln. Und wir werden sehen, 12 für 2.557,70. Also wollen wir die zurückgegebene Anzahl der Altersklassen ermitteln, die über 16 Jahre alt sind, oder? Ähm, wir können also tatsächlich eine Funktion erstellen , um das für uns herauszufiltern, oder? Lassen Sie uns also die Kosten für das Fahralter berechnen. So nennen wir unsere Funktion. Und das werden wir im Grunde tun. Jetzt schreiben wir unsere IF-Aussage. Die Struktur der if-Anweisung sieht wie folgt aus. Du schreibst wenn, dann sind das deine Bedingungen. Also, ob das, mal sehen, ein Alter einnimmt, wenn das Alter älter als 16, 16 ist. Wir möchten, dass die Funktion true zurückgibt. Sonst wollen wir, dass die Funktion falsch zurückgibt, oder? Wenn wir das Ergebnis speichern. Wenn wir sparen, ergibt sich eine Variable, die wir mit dem Alter als Fahralter bezeichnen. Und wir verwenden die erste oder die Zahl und den Index Eins und dann geben wir das Ergebnis von console.log. Lass uns sehen. Mal sehen, was wir bekommen. Wenn das Alter also über 16 Jahre ist, gib true“ zurück, andernfalls „false“. Falsch. Das ist also richtig, weil das Alter, der Agentenindex eins , tatsächlich vier ist, was nicht über 16 liegt. Aber wenn wir es zum Beispiel auf den Index von vier ändern, wird es wahr zurückgegeben, weil das eine Notiz ist , also das Alter von 70 Jahren. Das ist also eine weitere wirklich interessante Art, wie wir das nutzen können , und wir könnten wahrscheinlich eine Art Treiberprüfung implementieren, oder? Anstatt also eine Reihe von Altersklassen zu nehmen, könnten wir das Alter auf einer Website ermitteln, auf der die Leute gefragt werden, ob sie das Fahralter haben oder nicht, wenn Sie fragen möchten, ob jemand ein Auto kaufen möchte. Prüfen Sie also, ob es ein Mindestalter für das Fahren gibt. Sie können so etwas auch in praktischen Anwendungen verwenden. Ternäre Operatoren, es gibt präzisere Möglichkeiten, Ist-Else-Aussagen zu schreiben indem ein sogenannter ternärer Ein ternärer Operator ist nur eine Kurzschreibweise dafür. Wenn sonst Anweisungen, die es zu einer einzigen Codezeile zusammenfassen können es zu einer einzigen Codezeile zusammenfassen Schauen wir uns an, wie ein Beispiel dafür sein könnte. Wie du das schreibst, sagst du einfach , du würdest einfach deinen Wert angeben. Also würdest du das sagen. Also von Autofahrern, Alter für Zeitalter, würde man sagen. Und um ehrlich zu sein, könnten wir sogar einfach eine Zahl weitergeben, wenn wir sie wie 25 weitergeben. Und dann würden wir sagen, wenn das wahr ist, wenn das wahr ist, wollen wir, dass es wahr wird. Sonst wollen wir, dass es falsch zurückgibt. Und so würden wir das schreiben, wie das funktioniert, ist das erste Stück, das ist unsere Bedingung. Was auch immer der Vergleich ist, den wir anstellen wollen oder die Situation, die wir zu ermitteln versuchen. Das erste und dann fragen wir, ist das wahr? Also ist, ist das, was wir hier gesagt haben, wahr? Wenn es wahr ist, wird es tatsächlich diesen ersten Wert anzeigen, oder? Wenn es wahr ist, ist dies das Ergebnis oder diese Doppelpunkte hier, es wird zurückkehren Falsch, ist falsch. Wenn es wahr ist, wird diese erste Bedingung zurückgegeben oder falsch, wird das Ergebnis sein, wie wir bereits besprochen haben. Anders als in der Mathematik ist Gleichheit der Zuweisungsoperator, nicht der Gleichheitsoperator. Der Gleichstellungsoperator ist ziemlich ähnlich. Es ist nur eine duplizierte Version, zwei Gleichheitszeichen. Sie können den Gleichheitsoperator verwenden, um festzustellen, ob eine Sache einer anderen entspricht oder nicht. Das Ergebnis eines Vergleichs mit dem Gleichheitsoperator gibt immer einen booleschen Wert zurück, entweder wahr, wenn der Vergleich gültig ist , oder falsch, wenn er nicht Schauen wir uns ein paar Beispiele dafür an. Wir console.log. Eins ist gleich eins. Wir werden sehen, dass es im Grunde wieder wahr wird. Aber wenn wir dann eins gleich zwei machen würden, sollte das erwartungsgemäß falsch sein. Das liegt daran, dass man das nicht unbedingt tut, nun, das liegt daran, dass 1,2 verschiedene Zahlen sind, oder? Aber 1.1 sind dasselbe. Aber wenn wir eins gleich, gleich eins der Zeichenfolge machen , würden wir denken, dass es falsch zurückgibt, aber tatsächlich wahr zurückgibt. Nun, der letzte ist interessant. Warum stimmte die Zahl eins mit der ersten Zeichenfolge überein? liegt daran, dass der Gleichheitsoperator „Doppelte Gleichheit nicht das ist, was Sie als streng bezeichnen würden. Dadurch werden Daten, die ineinander konvertiert werden können , den Wert TRUE zurückgeben. Wenn Sie jedoch sichergehen möchten, dass nur die Daten desselben Typs den Wert True zurückgeben, könnten Sie seinen großen Bruder verwenden, den strikten Gleichheitsoperator, drei Gleichheitszeichen. Lass es uns versuchen. Wenn wir nun vergleichen wollten, ob die Zahl eins tatsächlich der ersten Zeichenfolge entspricht oder nicht. Wir wollen sichergehen, dass wir die Zahlen aus der Zeichenfolge kennen . Wir würden drei Gleichheitszeichen verwenden, die strikte Gleichheit. Und wir sehen hier, dass, wenn wir das ausführen, das Ergebnis falsch ist , weil eins, die Zahl nicht gleich der Zeichenfolge ist, sondern wir die strikte Gleichheit verwenden müssen. Das ist das dreifache Gleichheitszeichen , um dieses Ergebnis zu erhalten, es gibt viele verschiedene Arten von Operatoren und JavaScript. Schauen wir uns noch ein paar davon an und sehen, wie sie funktionieren. Exclamation equal ist ein Vergleichsoperator , der verwendet wird, um zu testen, ob zwei Werte nicht gleich sind Es vergleicht zwei Werte und gibt true zurück, wenn sie nicht gleich sind, und falsch, wenn sie gleich sind. Dies wird verwendet, um zu testen, ob ein Wert kleiner oder gleich einem anderen Wert ist. Sie gibt „True“ zurück, wenn der erste Wert kleiner oder gleich dem zweiten Wert ist , und „False“, wenn der erste Wert größer als der zweite Wert ist. Genau wie in der Mathematik können Sie auch nur den Versuchsplan verwenden, der kleiner als ist, um zu vergleichen ob der erste Wert kleiner als der zweite Wert ist , ohne dass das Gleichheitszeichen größer als N ist. Dies wird verwendet, um zu testen, ob ein Wert größer oder gleich einem anderen Wert ist. Gibt „Wahr“ zurück, wenn der erste Wert größer oder gleich dem zweiten Wert ist , und „False“, wenn der erste Wert kleiner als der zweite Wert ist. Auch hier, genau wie in der Mathematik, benutzt du einfach das Größer-als-Zeichen, um zu vergleichen, ob der erste Wert größer als der zweite ist , indem du das Gleichheitszeichen weglässt. Dies ist der logische AND-Operator. Es wird verwendet, um zu testen, ob zwei Bedingungen beide wahr sind und es gibt True zurück, wenn beide Bedingungen wahr und falsch sind. Wenn eine der Bedingungen falsch ist, ist dies ein logischer ODER-Operator. Es wird verwendet, um zu testen, ob mindestens eine von zwei Bedingungen wahr ist, und es gibt True zurück , wenn mindestens eine der Bedingungen wahr ist , und falsch, wenn beide Bedingungen falsch sind. Für Loops. FOR-Loop ist eine Art von Kontrollflussanweisung, ähnlich wie eine If-Else-Anweisung Der Unterschied zu for-Loops besteht jedoch darin, dass sie, wie der Name schon sagt , immer wieder wiederholt werden wie der Name schon sagt , , bis ist für eine bestimmte Zeit eine bestimmte Bedingung erreicht Die grundlegende Syntax für eine For-Loop ist Initialisierungsbedingung und dann das Inkrementieren oder Dekrementieren und dann den Code, den Sie ausführen möchten Lassen Sie uns diese ausprobieren und sehen, wie sie in der Praxis eingesetzt werden. Wie bereits erwähnt, ist der For-Loop eine Art Kontrollflussanweisung, oder? Es ermöglicht uns also im Grunde, über eine bestimmte Anzahl von Iterationen über etwas zu iterieren eine bestimmte Anzahl von Iterationen über etwas zu iterieren bis es die angegebene Anzahl erreicht Wir würden das also schreiben, indem wir vier eingeben. Wir würden sagen, für jede Zahl, die initialisiert werden würde. Es gibt einen Initialisierer wie für, sagen wir, I ist gleich Null Wir würden diese, diese, diese Schleife laufen lassen , bis I einer bestimmten Zahl entspricht Nehmen wir an, wir lassen es laufen, bis I größer als zehn oder kleiner als zehn ist. Wir würden das so lange laufen lassen, bis es diesen Zustand erreicht hat, wird diese Schleife laufen. Und dann jedes Mal, wenn wir den Loop laufen lassen, bei jeder, jeder Iteration der Schleife, werden wir tatsächlich eine hinzufügen , sodass wir tatsächlich das Ende unserer Schleife erreichen Wenn wir diese eigentliche Iteration nicht hätten, würde sie einfach ewig laufen und das wäre beendet, das würde zu einer Endlosschleife führen Also jedes Mal, wenn ich renne, machen wir I plus plus, was im Grunde bedeutet, dass ich ich plus sich selbst sein werde, ich plus ich plus eins. Also, was auch immer ich zu der Zeit bin, füge eins hinzu. Und während wir diese Funktion ausführen, werden wir einfach das Konsolenprotokoll aufzeichnen, was auch immer ich bin. Also werden wir Konsolen-Log-I machen und dann schauen wir, wie oft ich das bekomme. Ich tauche auf. Ich denke, das sollte eigentlich sein ja, ich bin jünger als zehn. Also solange ich weniger als zehn Jahre alt bin, werde ich es ausführen. Und wenn ich zehn oder größer als bin, hört es auf zu laufen. Sobald wir das sehen, werden wir sehen, dass es ausgeführt wird und uns die Zahlen Null bis Neun gegeben hat. In Ordnung, großartig. Während Schleifen. Jetzt, wo Sie den Dreh raus haben mit for-Loops, lassen Sie uns über while-Loops sprechen Diese sind den For-Loops in dem Sinne sehr ähnlich , dass sie sich immer wieder wiederholen, bis eine bestimmte Bedingung erfüllt ist Sie unterscheiden sich jedoch darin, dass sie nur die Bedingung haben, also werden sie ausgeführt, solange diese Bedingung erfüllt ist. Schleifen sind zwar etwas knifflig, weil man irgendwann sicher sein muss, dass diese Bedingung falsch ist. Andernfalls führen sie zu einer sogenannten Endlosschleife, was nicht gut ist. Dies kann Ihren Browser zum Absturz bringen , da Ihr Code niemals aufhört zu laufen. Geltungsbereich. Eines der wichtigsten Themen, die es zu verstehen gilt, JavaScript zu verstehen , seit wir angefangen haben, über Funktionen zu sprechen, ist der Umfang. Und ich spreche nicht von der Mundspülung. Der Umfang bezieht sich darauf, wie zugänglich sind, wie sichtbar verschiedene Variablen, Funktionen und andere Daten während der Laufzeit in Ihrem Code sind. In JavaScript gibt es zwei Arten von Geltungsbereichen : global und lokal. Globaler Gültigkeitsbereich ist jede Variable, Funktion oder jedes Objekt, das außerhalb einer Funktion in Ordnung ist und auf die von jedem Code im Programm zugegriffen werden kann . Lokaler Gültigkeitsbereich ist dagegen jede Variable, Funktion oder jedes Objekt, das innerhalb einer Funktion definiert wurde innerhalb einer Funktion definiert und daher nur innerhalb der Grenzen dieser Funktion zugänglich ist innerhalb der Grenzen dieser Funktion zugänglich Schauen wir uns an, wie das in der Praxis funktioniert. Um im Grunde zu zeigen, wie das funktioniert, erstellen wir einen, der Global VAR, globale Variable, sagt. Ich muss sagen, ich bin ein Global. Und dann haben wir eine , die eine Funktion erstellt, und dann werden wir eine lokale Variable darin verschachteln. Um es zu geben, geben wir Ihnen eine Vorstellung davon, wie das in der Praxis wirklich aussieht. Also erstellen wir eine Variable namens local bar und sie sagt, ich bin lokal. Und von diesem Punkt an werde ich zurückkehren, gib einfach die Funktion zurück. Wenn wir also versuchen, den lokalen VAR zu Console.log zu öffnen, wenn wir versuchen, außerhalb der Funktion ein Konsolenlog durchzuführen, wie es hier der Fall ist, wird Leucovorin im Konsolenprotokoll feststellen , dass wir tatsächlich nicht darauf zugreifen können Es heißt Referenzbereich, lokale Balken ist nicht definiert. Und das liegt daran, dass die Konsole es nicht sehen kann, oder? Der Rest des Codes weiß nicht, dass lokal existiert, weil es in dieser Funktion gefangen ist. Wenn wir jedoch versuchen, es innerhalb der Funktion zu protokollieren, werden Sie feststellen, dass es einfach so aufleuchtete, wie wir getan haben, dass es tatsächlich hinzugefügt wird, sobald wir die Funktion aufrufen, natürlich, es wird tatsächlich die lokale Barnes-Konsole protokollieren Es heißt, ich komme aus der Region. liegt daran, dass diese Variable im Grunde in der Funktion selbst gefangen ist . Aber Sie werden sehen, dass, wenn wir dies mit der globalen Variablen tun , unabhängig davon, ob wir sie außerhalb der Funktion von der Konsole protokollieren oder ob wir innerhalb der Funktion Konsolenlog, oder ob wir innerhalb der Funktion Konsolenlog weil es sich um eine globale Variable handelt, an beiden Stellen darauf zugreifen können. 9. Objekte: Objekte. Ein Objekt ist eine Sammlung von Schlüsselwertpaaren, die ein reales Objekt oder eine komplexe Datenstruktur darstellen können oder eine komplexe Datenstruktur Objekte sind einer der grundlegenden Bausteine von JavaScript. Sie umfassen tatsächlich die meisten anderen Datentypen, von einfachen Datenstrukturen wie Arrays bis hin zu Zeichenketten und komplexeren Strukturen wie Klassen, Funktionen und sogar anderen Objekten Ein Objekt kann mithilfe der objektwörtlichen Notation erstellt werden , bei der geschweifte Klammern verwendet Die Schlüssel in einem Objekt sind immer Zeichenketten, aber die Werte können beliebigen Datentyp haben, einschließlich anderer Objekte Lassen Sie uns ein paar Objekte schreiben, um ein Beispiel dafür zu sehen, wie das alles funktioniert. Objekte sind also einer der besten Aspekte von JavaScript. Im Grunde basiert alles von I'm JavaScript auf diesen Objekten. Und genau wie im wirklichen Leben können Objekte alles sein. Schauen wir uns an, wie wir unsere Objekte tatsächlich schreiben. Wenn Sie also weitermachen und unsere erste Objektkonstante, mein Objekt, erstellen möchten unsere erste Objektkonstante, mein Objekt, erstellen , und Sie schreiben den Namen wie den Namen wie den Namen einer Variablen. Aber stattdessen setzt du ein Gleichheitszeichen und dann setzt du diese verschnörkelten Zahnspangen an Und so weißt du , dass es ein Objekt ist. Dann habe ich gesagt, dass man in ein Objekt so ziemlich alles stecken kann. Aber die Art und Weise, wie wir unsere Daten innerhalb von Objekten strukturieren , ist , dass wir einen Schlüssel haben , der im Grunde der Identifier ist, und dann einen Wert, der diesem Schlüssel entspricht, was im Grunde sein Wert ist. Dies wird als Schlüsselwertpaar bezeichnet. Sie funktionieren paarweise , da der Schlüssel der Bezeichner und der Wert der tatsächliche Wert ist. Wir können auf den Wert des Schlüssels zugreifen, indem wir auf den Schlüssel zugreifen. Der Weg, dies zu tun, wäre, denken Sie daran, dass wir zuvor über die Punktnotation gesprochen haben. Wir können die Punktnotation verwenden , um auf den Wert des Schlüssels zuzugreifen. Die Art und Weise, wie wir das tun, besteht darin mein Objekt mit einem Punktschlüssel in der Konsole zu protokollieren, und dann könnten wir den Wert zugreifen. Also die Konsole protokolliert meinen Objektpunktschlüssel und dann sollten die Ergebnisse wert sein. So greifen Sie also auf Werte von Objekten in JavaScript zu, wie auf Werte von Objekten in JavaScript zu, auch immer Sie es tun können. Und wenn Sie dann das Objekt selbst in der Konsole protokollieren, erhalten Sie tatsächlich das Ganze, den Schlüssel und den Wert in diesen geschweiften Klammern Sie können jedoch mehr als nur wirklich einfache Schlüsselwertobjekte verwenden. Objekte können tatsächlich andere Objekte enthalten, wie gesagt, sie können Arrays enthalten, sie enthalten Zeichenketten Sie können grundsätzlich Daten aller Art enthalten . Der Schlüssel kann alles sein. Es muss nicht das Wort Schlüssel sein. Es könnte wie Apple sein, es könnte jedes Wort sein. Du kannst also auch, wie gesagt, ich hatte Objekte in Objekten. Und es ist wirklich so, dieses Objekt kann dein Haus sein. Sie können alles tun, was Sie sagen können, Haus und Sie könnten vielleicht über die verschiedenen Geräte sprechen vielleicht über die verschiedenen Geräte die Sie in Ihrem Haus haben, in Ihrer Küche, vielleicht haben Sie einen Herd und eine Mikrowelle und ich weiß nicht, Beispiel keinen Ofen. Du kannst einen Herd, eine Mikrowelle und vielleicht deinen Herd haben, deine Mikrowelle und du bist krank, oder? Das ist eine Liste. Das ist dein Haus, das ist ein Raum in deinem Haus, die Küche. Und dann ist das eine Liste der Geräte in der Küche, oder? Oder Listen der Gegenstände in der Küchenspüle als Gerät. Aber nehmen wir diese Idee und gehen wir noch ein bisschen weiter. Lassen Sie uns ein Objekt namens Mein Haus erstellen. Und fangen wir an, es auszufüllen und zu sehen, wie wir mit diesen Objekten wirklich weit kommen können. Also lass uns weitermachen und mein Haus und meine Adresse angeben. Vielleicht leben wir, füge eine bis drei Hauptstraßen hinzu. Und dann lass uns weitermachen und ihm eine Stadt geben. Vielleicht leben wir in New York. Dann lass uns weitermachen und wir geben es. Was sollten wir ihm sonst geben? Geben wir ihm ein paar Zimmer, vielleicht eine bestimmte Anzahl von Räumen. Wir leben in New York, vielleicht nur mit drei Zimmern. Es ist ein hübsches kleines Haus, in dem wir leben. Dann geben wir es auch, geben wir ihm einige Geräte. Schreiben Sie diesen Herbst über diesen Trend. Geben wir ihm eine Liste von, eine Liste von Geräten. Also haben wir, mal sehen, was noch. Also nochmal, wir haben eine Mikrowelle. Was sonst? Wir haben einen Herd, wir haben eine Mikrowelle, und wir haben einen Geschirrspüler diesmal wechseln wir vom selben. Großartig. Mal sehen, was wir noch tun könnten. Nehmen wir die Insassen, lassen Sie uns weniger als die Anzahl der Insassen angeben, die wir in unseren Bewohnern haben Also lass uns weitermachen und es auflisten. Aber lassen Sie uns eine Liste von Objekten verwenden. Anstatt also nur ein einzelnes Objekt zu verwenden, lassen Sie uns eine Liste von Objekten erstellen Lassen Sie uns also den ersten erstellen. Werde ich haben, gib ihm einen Namen. Wir sagen Mama, sie wird, sagen wir, es wird wieder 29 sein. Und geben wir ihr den Beruf von, Holen wir uns diesen Bäcker und Lehrer. Und los geht's. Wir haben den Insassen. Der Name des ersten Insassen ist Mama, 29 Jahre alt, und der Beruf des Bewohners ist Lehrerin Fantastisch. Also, wie ich schon sagte, wir können nicht einfach ob wir mehr als einen Bewohner haben wollen, wir müssen es in einem Listenformat haben Lassen Sie uns also weitermachen und in diese eckigen Klammern setzen , was darauf hinweist, dass es sich um eine Liste oder ein Array handelt. Und dann erstellen wir unseren zweiten Insassen. Also lass uns das ausfüllen und es Papa nennen lassen, 35 Jahre alt, Softwareingenieur. Und das werden wir sehr schnell erledigen. Dann können wir jetzt weitermachen und auf die Eigenschaften dieses Objekts zugreifen, oder? Wir können auf die verschachtelten Eigenschaften zugreifen. Wir können Ihr Haus trösten, mein Haus, und dann können wir den Bewohner trösten Und wie Sie sehen, füllt es es hier tatsächlich vorab aus, was ziemlich cool ist. Das ist eine ziemlich coole JavaScript-Funktion. Ich sollte sagen, Vs Code-Funktion, bei der, sobald Sie ein Objekt haben, es automatisch automatisch läuft. Ich glaube, es ist wie ein IntelliSense, aber es sagt dir, welche Eigenschaften auf diesen Objekten existieren. Ziemlich cool. Sie können also nur auf Immobilien zugreifen. Also gehen wir zu den Insassen und dann innerhalb der Insassen , weil es eine Liste ist, denken Sie daran, dass wir Listen sind, wir können nicht einfach Punktnotation in eine Liste einfügen Wir müssen Indizes verwenden. Nehmen wir an, der Insasse im ersten Index greift auf den Vater zu, und dann benennen wir den Beruf des Vaters. Also gehen wir zum ersten Index und dann suchen wir nach Beruf. Und oh, hier ist ein interessanter, wir müssen hier auf einen Fehler verweisen. liegt daran, dass sich JavaScript ein wenig von TypeScript unterscheidet, das in und in einer späteren Lektion funktionieren wird Aber JavaScript ruft nicht unbedingt einen Fehler auf, wenn etwas vom falschen Typ oder ein falscher Wert im Code selbst ist vom falschen Typ oder . Es wird ihn aufrufen, sobald Sie versucht haben, diesen Code auszuführen Es ist nicht ideal für größere Anwendungen, weil Sie dann beim Schreiben des Codes einfach viele Fehler bekommen und Sie nicht wissen, woher sie stammen. Aber wenn Sie den Fehler erkennen, bevor Sie den Code ausführen, wenn Sie versuchen , ihn zu speichern, ist das, glaube ich, viel nützlicher. Genau hier liegt der Grund, warum wir diesen Fehler erhalten haben, darin, dass im Array die Werte eins und Wert zwei nicht aktuell sind. Es sind keine Schlüssel und es sind eigentlich keine Saiten. Sie sagen also, es gibt keinen, es gibt keinen Variablennamen, Wert eins oder zwei, während du es so schreibst. Wir müssen sie also nur tatsächlich in Schnüre umwandeln. Sobald wir diese in Zeichenketten umgewandelt haben, müssen wir sie nur noch einmal ausführen. Und wie Sie hier sehen können, konnten wir auf den Beruf unseres Vaters zugreifen Also mein Haus oder die Bewohner, die auf den Hausbewohner in Index Nummer eins zugreifen , Softwareingenieur , das sind unsere Väter Occupations, funktioniert ziemlich gut, Sie können sich vorstellen, wie nützlich das in einem Szenario sein könnte, in dem Sie vielleicht ein Benutzerobjekt haben, vielleicht bauen Sie eine Facebook-Website und Sie haben einen Benutzer und sie haben eine E-Mail-Adresse, sie haben ein Passwort, sie haben Freunde, sie haben Bilder, sie haben all diese verschiedenen Teile Daten, die mit ihnen verknüpft sind. Vielleicht möchten Sie sie in einem Objekt speichern und einfach das Objekt benennen oder dem Objekt wie eine Benutzer-ID geben, ihnen eine ID innerhalb des Objekts geben und im Grunde all diese komplexen Daten in diesem größeren Datensatz speichern komplexen Daten in diesem größeren Datensatz und für Ihre Benutzer einheitlich halten. Wenn Sie also eine Website mit etwa 500 Benutzern haben und deren Profilseite aufgerufen haben, können Sie auf einheitliche Weise auf die Daten zugreifen. Das ist eine weitere großartige Sache an Objekten. Es ermöglicht Ihnen, auf wirklich, wirklich einheitliche Weise auf Daten zuzugreifen . Und Sie müssen sich nicht unbedingt Gedanken darüber machen , dass ein Datenelement, das nicht existiert, einen bestimmten Wert zurückgeben kann. Aber in neun von zehn Fällen , wenn die Daten existieren, wird einfach dieser Wert zurückgegeben und Sie können loslegen 10. Grundform: Ordnung, jetzt , wo wir alles über JavaScript gelernt haben , lassen Sie uns es anhand einiger der Elemente, die wir zuvor erstellt haben, in die Praxis umsetzen der Elemente, die wir zuvor erstellt haben, Als Erstes nehmen wir dieses kleine Formular, das wir hier erstellt haben, und wir werden es tatsächlich verwenden, um unseren Benutzern unsere Antwort zu geben , wenn sie ihre Informationen in unserer Index-HTML-Datei einreichen ihre Informationen in unserer Index-HTML-Datei , wie wir bereits erwähnt haben. Wäre es nicht wirklich cool, wenn unsere Benutzer ihren Vornamen, ihren Nachnamen und ihr Alter angeben würden. Vielleicht wurden sie irgendwie persönlich begrüßt, oder? Also statt High User oder einfach High ist es vielleicht Hi John. Hallo Stephen. Hallo Harry. Lassen Sie uns also weitermachen und diese spezielle Funktionalität hinzufügen . Aber wir werden hier ein kleines P-Tag erstellen. Und wir werden, wir werden ihm einen Ausweis geben. Denken Sie also daran, wie wir über IDs gesprochen haben und wie sie verwendet werden können, um Elemente mithilfe von CSS gezielt anzusprechen. Sie sind auch sehr nützlich , wenn Sie mit JavaScript arbeiten. Eine Sache, für die wir hier IDs verwenden können ist, tatsächlich auf ein bestimmtes Element abzuzielen. Also verwenden wir hier den ID-Parameter und geben diesem P-Tag eine Gruß-ID. Und damit werden wir arbeiten , wenn wir unsere Benutzer erstellen. Wir werden auch weitermachen und diesen Vornamen eingeben Wir geben dem auch eine IV von Vorname, nur damit wir wissen von welcher Eingabe wir den Wert als Ziel verwenden müssen Damit das alles funktioniert, müssen wir eine JavaScript-Funktion schreiben die aufgerufen wird, wenn die Senden-Schaltfläche gedrückt wird. Lassen Sie uns also eine On-Click-Funktion erstellen. Also Konzepte auf Klick, nennen wir es auf Submit. Einreichen. Wir wollen, wir wollen im Grunde die Informationen erhalten, die in dieser ersten Eingabe enthalten sind, wir wollen den Wert dieser Eingabe erhalten. Das erreichen Sie also, indem Sie auf das Fenster zielen, das größere Objekt, das alle Informationen auf der Seite enthält. Also nehmen wir das Fenster ins Visier. Wie wir auch besprochen haben, könnten wir dies mithilfe des Dokuments tun. Denn wie gesagt, JavaScript funktioniert mit dem Document Object Model. Sie können entweder Fenster oder Dokument verwenden und Window Dot Get eingeben. Lassen Sie uns eigentlich Dokument verwenden. Lassen Sie uns das Dokument Punkt nach ID abrufen, eine Methode, die für das Dokument verfügbar ist. Und wir geben die ID ein, die wir als erste Eingabe mit dem Namen Vorname gegeben haben erste Eingabe mit dem Namen . Das werden wir speichern. Und lassen Sie uns das Ergebnis einfach in der Konsole protokollieren. Und sehen wir mal, lassen Sie uns einfach zurückgeben , was auch immer das ist, richtig, also onsubmit, wir werden das zurückgeben und wir sind diese console.log Loops werden nur Console Dot Log On Submit Ich will nur sehen, was passiert, wenn wir das nennen. Das Letzte, was wir hier tatsächlich tun müssen, ist, es von der eigentlichen HTML-Datei aus aufzurufen von der eigentlichen HTML-Datei aus , weil wir die beiden verbinden müssen. Da wir hier also unsere Schaltfläche für den Eingabetyp haben, geben wir ihr ein onclick-Attribut Und was dieses Attribut ist, wird nur eine Verbindung zu unseren JavaScript-Funktionen sein. Also die ultimative Funktion , auf der wir sitzen werden, werden wir sie tatsächlich einfach auf Senden ändern. In Ordnung, also lassen Sie uns das Dokument tatsächlich zurückgeben und raus. Wir haben nicht über die Werte gesprochen. Lassen Sie uns den Dokumentpunkt machen und das Element anhand des ID-Punktwerts weil wir den tatsächlichen Wert davon wollen. In Ordnung, lassen Sie uns hier tatsächlich etwas tun. Sagen wir Const Vorname. Und wir werden, wir setzen das auf diesen Wert. Also nimm das und ich lege das da hin. Und jetzt ist FirstName der Wert. Wir geben FirstName zurück, aber bevor wir es zurückgeben, werden wir es auch console.log hinzufügen Zuerst. In Ordnung, und speichern wir das. Wenn wir also John eingeben und auf Senden klicken, los geht's. Es funktioniert. Wir kriegen John, wenn wir auf Senden klicken. Perfekt, genau so hatten wir es beabsichtigt. Jetzt, wo wir diese Variable haben, mit der wir arbeiten können , müssen wir sie jetzt nutzen, oder? Können wir das also in einer bestimmten Variablen speichern? Natürlich können wir, wie wir bereits erwähnt haben, das Ergebnis einer Funktion in einer Variablen speichern. In Ordnung, also wir, wie sind Vorname hier variabel? Was wollen wir noch tun? Was wir wollen, um unserem Benutzer diesen bestimmten Namen in einer Art Gruß zurückzugeben diesen bestimmten Namen in , oder? Also, was wir hier tun werden, ist den Wert des Vornamens zu nehmen, Serena Nimm die Ergebnisse und wir werden es tatsächlich in eine Grußfunktion einfügen. Lassen Sie uns also eine Begrüßung als Funktion erstellen. Und wir werden sagen, dass die Begrüßungsfunktion zurückkehren sollte. Oder du weißt, was die Begrüßung sein wird. Eine Nebenwirkungsfunktion. Es wird auf das Dokument abzielen und ein anderes Element anhand der ID abrufen. Denken Sie daran , dass wir dem P-Tag eine ID gegeben haben. Ich kann es hier an die Seite bringen, damit du sie sehen kannst. Also haben wir diesem P-Tag eine ID mit Grüßen gegeben. Also werden wir Element nach ID oder ID der Begrüßung abrufen. Dann gibt es da noch diese andere Eigenschaft namens innerHTML. Sie haben also ein Element ins Visier genommen, jetzt möchten Sie etwas in seinen inneren HTML-Code einfügen. Also wollen wir dann auf den Punkt innerhalb des HTML-Codes abzielen. Und wir wollen im Wesentlichen den Namen des Benutzers in diesen Satz einfügen. Also sagen wir, ob unsere Begrüßung einfach ziemlich einfach sein soll. Also sagen wir Hallo, Hallo. Und dann plus den Namen dessen, was auch immer die Person ist. Außerdem übernehmen wir für diese Funktion einen Parameter namens user. Dann werden wir das an die kleine Funktion weitergeben , die wir hier haben. Wenn also Begrüßung aufgerufen wird, nimmt es das, geht zum Dokument, holt sich das Element mit der Idee der Begrüßung. Das ist also unser P-Tag hier. Es wird das innere HTML bekommen, das ist dieses kleine Leerzeichen direkt zwischen den P-Tags genau hier. Und es wird dieses Hoch plus den Namen des Benutzers einfügen . Ziemlich einfach. Verschieben wir also diese Funktion, die über die Submit-Funktion gehisst ist , Denn eine weitere wichtige Sache , die Sie über JavaScript wissen sollten , ist , dass auf Funktionen manchmal erst zugegriffen werden kann , wenn sie erstellt wurden. Wenn ich also in dieser Funktion Begrüßung aufrufen würde , wenn ich Begrüßung sagen würde, erhalte ich möglicherweise die Fehlermeldung, dass sie verwendet wurde , bevor sie erstellt wurde. Manchmal verursacht es Fehler, manchmal nicht, aber es ist am besten , sie einfach in die Reihenfolge zu bringen , in der Sie sie verwenden. Lassen Sie uns also einen Gruß erstellen. Und dann nehmen wir Wert für den Vornamen und wir geben ihn in Grußformeln weiter. Wir werden den Vornamen zur Begrüßung verwenden. Und das wird sein, das wird unsere Funktion sein eigentlich tun müssen, ist es hinzuzufügen. Also müssen wir, anstatt es aufzurufen, hinzufügen, dass es inneres HTML verwendet. Und wir werden Plus und Gleichheit verwenden , um eine Gleichheit zu haben. Also, wenn wir das noch einmal machen, sollte es funktionieren. Wir klicken auf Senden. Da haben wir's. Wir haben seinen John. Es ist nicht ganz formatiert, richtig, aber lassen Sie uns das beheben Perfekt. Schauen wir uns also an, was wir hier gemacht haben. Wir haben das Dokument ins Visier genommen. Wir haben das Element durch den ID-Gruß bekommen, das ist dieses P-Tag. Wir haben auf den inneren HTML-Code gezielt und verwenden diesen plus ein Gleichheitszeichen. Also fügen wir etwas hinzu. Und wir haben hi plus den Namen des Benutzers hinzugefügt. Ziemlich einfach, oder? Und dann eine nette freundliche Begrüßung, die wir machen können, ist nur eine Möglichkeit all die Dinge zu nutzen, die wir bisher mit unserem JavaScript gemacht haben. Super einfache kleine Funktion. Aber nur ein wirklich cooles Beispiel dafür wie wir tatsächlich mit den Werten arbeiten können , die uns gegeben wurden. Wie Sie sich vorstellen können, könnten wir das einrichten, um verschiedene Dinge zu tun , zum Beispiel nehmen wir ihren Nachnamen an, wir nehmen ihr Alter. Wir könnten sagen, Hey, du bist im Fahralter, hol dir deinen Führerschein oder so, oder was auch immer du willst, um ihnen je nach Alter eine Antwort zu geben. Wie Sie sehen, kann dies auf verschiedene Arten verwendet werden . 11. Erweitertes Formular: Werfen wir nun einen Blick auf unser vorheriges Projekt, unser HTML- und CSS-Projekt, und sehen, wie wir ihnen etwas JavaScript hinzufügen können. Wie Sie sich erinnern, haben wir unsere Website genau hier. Und im Grunde wollen wir jetzt, da wir JavaScript-Profis sind, wahrscheinlich ein wenig interaktive Interaktivität mithilfe von JavaScript hinzufügen interaktive Interaktivität mithilfe wir JavaScript-Profis sind, wahrscheinlich ein wenig interaktive Interaktivität mithilfe von JavaScript Wenn Sie sich erinnern, gab es hier dieses kleine Bild namens aktive Zustände. Und so gibt es uns tatsächlich eine ganze Reihe verschiedener aktiver Zustände, die sie möchten , dass wir dem eigentlichen Formular selbst hinzufügen. Wie Sie sehen, bedeutet vieles davon dem Benutzer im Grunde dass etwas nicht leer sein darf , wenn er auf Senden geklickt hat Es gibt also hier auch einen kleinen E-Mail-Validator. Lassen Sie uns also weitermachen und versuchen, einige dieser Dinge zu implementieren. Lass es uns so machen. Wenn der Benutzer versucht zu senden und der Wert Null ist, möchten wir eine Fehlermeldung zurückgeben. Schauen wir uns also an, wie das aussehen könnte. Nehmen wir an, wir können Targeting verwenden, wir können die innere HTML-Funktion verwenden, die innere HTML-Eigenschaft , über die wir gerade gesprochen haben, die ID ist, um wirklich das zu erreichen, was wir hier erreichen wollen. Also lass uns sehen. Wenn du das auch merkst, sind die Farben rund um den Rand hier rot. Also wollen wir wahrscheinlich etwas mit dem CSS und dem Stylet Das sind also ein paar Dinge, die wir tun wollen. Fügen wir also einen onsubmit onclick hinzu. Fügen wir eine onsubmit-Funktion hinzu. Und es ist gerade braun , weil wir es noch nicht geschafft haben. Also lass uns das auf Submit machen. Großartig. Grundfunktion. Und beim Klicken habe ich es auch hier falsch geschrieben. Sie sind echt auf Knopfdruck. Führen Sie einen onsubmit durch. Fantastisch. In Ordnung, also in dieser onsubmit-Funktion wollen wir im Grunde alle Werte der Eingabe ins Visier Werte der Eingabe Es gibt also verschiedene Möglichkeiten, wie wir das tun können. Wir könnten sie schaffen, lassen Sie uns sie besorgen, lassen Sie uns das vorerst wirklich ein bisschen manueller machen, lassen Sie uns ID FirstName machen Lassen Sie uns LastName identifizieren. Und lassen Sie uns die ID in der E-Mail-Farbe erstellen. Wahrscheinlich möchte ich mit einigen von ihnen auch etwas anderes machen. Und dann diese letzte Woche, oh ja, wir machen eine Passwort-ID. In Ordnung? Wir haben also unsere vier Eingaben mit IDs. Was wir jetzt tun wollen, ist, dass wir all diese Elemente per ID abrufen wollen. Und das können wir innerhalb der onsubmit-Funktion oder außerhalb tun Wenn wir also nur diese Variablen hier erstellen wollten, könnten wir Vorname verwenden Fantastisch. Also haben wir jetzt all diese Elemente ins Visier genommen. Also onsubmit wollen wir dann sagen, ob, wenn der eingegebene Punktwert gleich ist, gleich Null ist, dann wollen wir das nehmen, das nimmt diese Eingabe und wir geben ihr einen Klassennamen Es heißt also Klassenliste. Punkt hinzufügen fügt hinzu, fügt den hinzu, nennt es Fehler. Lass uns hier noch eine Sache machen. Wir fügen einen Stil namens error hinzu. Fehler. Und es ändert den Rand auf ein Pixel, ein Pixel. Durchgehend rot. Das werden wir vorerst tun. Wenn das Feld leer ist, wird dieser rote Rand hinzugefügt. Mal sehen, ob das funktioniert. Eigenschaften eines Nulllesewerts können nicht gelesen werden. Okay, es gibt uns hier einen Fehler , weil es für jeden von ihnen keinen Wert gibt. Ordnung, nach einigem Herumstöbern habe ich herausgefunden, was das Problem Was wir wirklich tun mussten, ist all diese Elemente innerhalb der Funktion zu verschieben , weil sie im Grunde nicht existieren, nach außen. Sie existieren nicht, es gibt nichts , was die Funktion tatsächlich abrufen könnte. sie also in die Funktion stecken, hören wir auf, das zu behandeln und lösen die Luft Was wir also im Grunde tun wollen, ist Folgendes. Wir wollen das Element add abrufen und prüfen, ob der Wert dieser leeren Zeichenfolge entspricht. Wenn es dieser leeren Zeichenfolge entspricht, wollen wir dieses Element nehmen, um in seine Klassenliste zu gelangen, und dann einen Fehler hinzufügen. Wie Sie sich erinnern, haben wir hier unten einen klassischen Fehler hinzugefügt , der ergibt, er wird den Rand ändern, sodass er ein Pixel ist, durchgehend statt gepunktet oder gestrichelt, und ihn zu einem roten Rand macht Theoretisch wird, wenn wir das richtig gemacht haben, das hinzugefügt, wenn wir auf den Vornamen klicken wenn wir auf den Vornamen klicken, nicht auf den Wert Es wird diese Fehlerklasse hinzufügen und es wird rot sein. Also lass uns darauf klicken und dann haben wir es, es funktioniert einwandfrei. Es sagt uns, hey, hier liegt ein Fehler vor. Fantastisch. Was wir jetzt tun wollen, ist, dass ich auf sie alle setze. Lassen Sie uns also weitermachen und schnell all diese anderen Optionen hinzufügen. Wir haben also im Grunde alle Eingaben übernommen. Wir haben ein Array erstellt, damit wir viel schneller darüber iterieren können Und dann haben wir für jede Eingabe gesagt, wenn der Eingabewert nichts ist, wollen wir den Klassenfehler hinzufügen. Das ist alles, was wir getan haben, dass es diese Luft für uns geschaffen hat. In Ordnung, da haben wir's. Wir haben gesehen, wie wir JavaScript verwenden können, um tatsächlich auf einer sehr einfachen Ebene mit diesem Formular zu interagieren. Ich würde Sie ermutigen, das Ganze zu nehmen und die kleinen Ausrufezeichen und die kleinen Platzhaltertexte hinzuzufügen, um zu sehen, wie weit Sie mit diesem die kleinen Ausrufezeichen und die kleinen Platzhaltertexte hinzuzufügen, um Projekt wirklich gehen können