Vollständige Webentwicklung für Anfänger:innen Teil 3: Javascript und API'S

1. Willkommen beim Kurs!: Willkommen bei Full-Stack-Web-Entwicklung für Anfänger. Dieser Kurs wurde entwickelt, um Sie von einem Anfänger zu einem Webentwickler zu führen, der nicht nur Front-End-Benutzeroberflächen einer Website erstellen kann, sondern auch das Back-End für die Interaktion zu entwerfen und zu bauen. Also, wer bin ich? Mein Name ist Chris und ich werde Ihr Lehrer für diesen Kurs sein. Ich bin ein Webentwickler und auch Produzent von vielen Tutorials, die Tausenden von Studenten die Fähigkeiten vermitteln, die sie benötigen, um Websites und Anwendungen zu erstellen. Dieser Kurs ist der dritte Teil der kompletten Serie, in dem wir weiterhin alles aus den ersten beiden Teilen dieses Kurses aufbauen werden. In diesem Kurs geht es um JavaScript, APIs und das Arbeiten mit externen Datenquellen. Wir beginnen mit dem Blick auf JavaScript-Grundlagen und Flusssteuerung. Dies gibt Ihnen eine Einführung in die Grundlagen der JavaScript-Programmiersprache, einschließlich der Abrundung von Dingen mit einem Dragon Slayer Projekt. Dann setzen wir unsere JavaScript-Reise fort, indem wir DOM-Manipulation, Funktionen und Ereignisse betrachten und dann den Abschnitt mit einem anderen Mini-Projekt beenden , um Ihnen mehr Ãœbung zu geben. Wir gehen dann zu Schleifen, Arrays, Objekten und regulären Ausdrücken. Mach dir keine Sorgen, wenn du unsicher bist, was das alles bedeutet. Wir werden alles abdecken, was Sie wissen müssen, und dann bauen eine lustige Form Matching-Spiel. Sehen Sie, wie alles zusammenpasst. Wir beenden diesen Kurs, indem wir eine Songfind-Anwendung erstellen. Hier begannen die Dinge wirklich interessant zu werden, da wir APIs abdecken und Daten von externen Quellen abrufen. Hier wird eine Verbindung mit der iTunes-Mediathek hergestellt. Wir suchen nach Daten, die wir in unseren Projekten nutzen können. Wir betrachten auch einige JavaScript-Funktionen der nächsten Generation von ES6 und darüber hinaus. Alles während die Dinge auf eine unkomplizierte, einfach zu verstehen, die auch Anfänger verstehen werden. Zusammen mit der Verstärkung der Dinge mit einigen Spaß, aber anspruchsvolle Projekte auf dem Weg. Ich hoffe, Sie freuen sich, im dritten Teil dieses Kurses mehr über JavaScript und APIs zu erfahren . 2. Starter-Dateien herunterladen: Willkommen zurück Jungs. Wie Sie bereits wissen, ist dies der dritte Teil der Serie. Es ist nicht wichtig, dass die ersten beiden Teile abgeschlossen sind , bevor Sie mit diesem Kurs fortfahren Sie können einfach direkt hineinzoomen, wenn Sie nur etwas über JavaScript und APIs erfahren möchten. Wenn Sie jedoch die frühen Abschnitte noch nicht abgeschlossen haben, müssen Sie mit diesem Kurs die Starterdateien für die Liedsuche verwenden. Wenn Sie in die Klasse gehen und klicken Sie auf Ihr Projekt ist hier. Später im Kurs, wenn wir beginnen, mit APIs zu arbeiten, wird den Song finder.zip, HTML und CSS, oder diktiert aus den früheren Abschnitten des Kurses. Wenn Sie diese noch nicht abgeschlossen haben, laden Sie einfach diese HTML- und CSS-Daten herunter. Dann können Sie mit dieser Ursache wie gewohnt fortfahren. Aber wenn Sie frühere Teile nehmen oder nicht, benötigen Sie auch die JavaScript-Starter-Dateien. Diese werden alle HTML und CSS enthalten, um uns mit dem Lernen von JavaScript zu beginnen. Dies werden wir sagen, dass die JavaScript-Skelett-Strukturen oder jede einzelne Lektion erstellt wurde. So können wir direkt eintauchen, um in unseren JavaScripts zu lernen. Also gehen Sie weiter und laden Sie die Dateien herunter, die Sie benötigen. Dann lassen Sie uns alles über JavaScripts lernen. 3. Variablen, Strings und Zahlen: Wir werden diesen Abschnitt starten, indem wir uns einige der am häufigsten verwendeten und auch einige der einfachsten Dinge anschauen , die JavaScript zu bieten hat. Das erste Konzept wird Datentypen genannt. Datentypen sind ziemlich einfach. Wie es klingt, ist eine Art von Daten, die wir verwenden. Zu Beginn habe ich die JavaScript-Starterdateien auf Nummer 1 geöffnet, die Variablen, Strings und Zahlen sind. Öffnen Sie dann die Indexseite, sowohl in einem Texteditor als auch im Browser. In diesem Video werden wir uns zwei dieser Datentypen ansehen, und dies sind Zeichenfolgen und Zahlen. Eine Zeichenfolge ist nur ein Text, z. B. ein Name, und die Zahl ist, wie Sie erraten haben, eine Zahl, die positiv oder negativ ist, z. B. das Alter eines Benutzers. Außerdem brauchen wir eine Möglichkeit, diese Werte zu speichern. Hier kommen Variablen ins Spiel. Wir gehen über Chrome gehen und öffnen Sie die Konsole, würde mit der rechten Maustaste und dann Inspect. Dann, wenn wir zu dieser Konsolen-Tab gehen, die gerade hier ist, ist dies eine Konsole, wo wir einige JavaScript ausführen können. Wie immer, wenn Sie einen anderen Browser verwenden, haben alle gängigen Browser ein Konsolen-Tool. Sie können diese Konsole normalerweise über das Menü finden, oft unter den Entwicklertools. Wir haben bereits die Registerkarte Elemente gesehen und auch einen kurzen Blick auf die Registerkarte Netzwerk genommen. Dieses Mal werden wir jetzt diese Konsole verwenden. Um zu beginnen, erstellen wir eine Variable mit dem var Schlüsselwort. Scrollen wir einfach rein, damit wir das ein bisschen besser sehen können. Geben Sie das Schlüsselwort var ein. Eine Variable ist einfach ein Ort, um unsere Daten zu speichern, z. B. eine Zeichenfolge oder eine Zahl. Dann geben wir dieser Variablen einen Namen. Wenn wir den Namen eines Benutzers speichern wollten, könnten wir den Namen einfach so speichern. Also var name gleich „Chris“. Dieses Gleichheitssymbol weist diesen Wert diesem Variablennamen Chris zu. Dann beenden wir das mit einem Semikolon. Strings müssen in Anführungszeichen umgeben sein. Dies können entweder einfache Anführungszeichen sein, was genau so ist, oder doppelte Anführungszeichen, wie wir hier verwendet haben und dann „Enter“ drücken. Um dies in der Konsole aufzurufen, geben Sie einfach den Namen unserer Variablen ein. Also, wenn wir in Namen eingeben, erhalten wir dann den Wert von Chris zurückgegeben. Wir sehen einige Pfeile auf der linken Seite. Der Rechtspfeil ist die Eingaben, die Sie einfügen. Also haben wir den Namen Chris hinzugefügt und dann zurück in Richtung wir den Wert von Chris haben. Wenn wir den Wert dieser Variablen ändern wollten, können wir tun, was als Neuzuweisungen bezeichnet wird, wir nennen es einfach einen Variablennamen. Genau wie dies ohne das Schlüsselwort var und setzen Sie es auf einen neuen Wert mit Gleichheitssymbol. Wir können einen neuen Namen wie Chris Dixon hinzufügen, und dann ein Semikolon am Ende und drücken Sie „Enter“. Jetzt können wir zurück zum Wert von Chris Dixon. Wieder, wenn Sie nur nennen Namen, drücken Sie „Enter“, wir werden endlich wieder zurückgegeben. Wir können so viele Variablen erstellen, wie wir brauchen, wie zum Beispiel unser Alter. Wieder setzen wir mit dem Schlüsselwort var den Namen des Alters und setzen diesen auf einen Wert von 34. Wenn wir mit Zahlen arbeiten, umgeben wir den Wert nicht in Anführungszeichen, wie wir es mit der Zeichenfolge getan haben. Wir geben einfach die Nummer so ein und drücken dann „Enter“. Wenn wir unsere Altersvariable aufrufen, indem wir in Alter eingeben, erhalten wir dann den Wert von 34 zurückgegeben. Manchmal sehen Sie auch undefiniert, genau wie wir hier gesehen haben, zum Beispiel wenn wir eine Variable setzen. Dies liegt nur daran, dass nichts zurückgegeben wird. In diesem Fall setzen wir einfach diese Variable ein oder weisen sie zu. Wir werden unseren Namen und unsere Altersvariable deklariert haben. Aber wie können wir das jetzt nutzen? Nun, wir könnten so etwas tun, wie sie zu einem Satz hinzuzufügen. Wenn wir eine neue Variable namens verbunden deklarieren, können wir dies gleich einer Zeichenfolge setzen. Also „Mein Name ist“ fügen Sie dann ein Leerzeichen hinzu. Dann können wir ein Plus-Symbol hinzufügen. Wenn es bis zum Ende davon ist, werde ich unsere Variable des Namens hinzufügen. Das wird also „mein Name ist“ und dann Chris. Fügen Sie dann ein Plus-Symbol hinzu. Um eine zweite Zeichenfolge hinzuzufügen, können wir „und ich bin“ dann ein Leerzeichen hinzufügen und dann unsere Altersvariable am Ende hinzufügen. Das sollte also ausdrucken : „Mein Name ist“ Chris, „und ich bin“ 34. Verbinden von Strings und Variablen wie diese mit dem Plus-Symbol wird auch Verkettung oder Konkat kurz genannt. Aber das ist nur ein schicker Begriff, diese miteinander zu verbinden. Dann drücken Sie „Enter“ und wir können in verbunden, die Variablennamen sind eingeben. Jetzt gibt es unsere Saite, die wir erwartet haben. JavaScript ist auch die Standard-Skriptsprache für alle gängigen Browser. Aus diesem Grund funktioniert alles gut in der Konsole. Aber realistischer wollen wir den Code über in unser Projekt hinzufügen. Wenn wir zu unseren Starter-Dateien gehen, wieder, in unserer ersten, die Variablen, Strings und Zahlen sind, können wir hier drinnen herausfinden. Sie müssen die Starterdateien nicht verwenden, wenn Sie es vorziehen. Aber würden Sie sagen, dass alle HTML-Struktur eingegeben wurde, die wir jedes Mal brauchen. Es wird auch für zukünftige Referenz nützlich sein. JavaScript kann sogar der Kopf oder der Körperbereich hinzugefügt werden. Es wird oft bevorzugt, es direkt vor dem schließenden Tag am unteren Rand des Körperabschnitts hinzuzufügen . Dies bedeutet, dass Sie unten zuletzt waren und den Rest des HTML nicht vom Laden blockieren. Das JavaScript wird innerhalb von Skript-Tags platziert. wir das öffnende und schließende Skript-Tag. Dann können wir mit dem Hinzufügen unseres Codes innerhalb gehen, genau wie wir es in der Konsole getan haben. So wie wir es vorher getan haben, können wir unsere Variable des Namens gleich Chris hinzufügen. Um dies in der Konsole anzuzeigen, können wir eine console.log tun. Dann können wir innerhalb der Klammer unseren Variablennamen hinzufügen. Also speichern Sie das, löschen Sie die Konsole und laden Sie es neu. Da ist unser Wert von Chris. Wir können diesen Namen dann neu zuweisen, genau wie wir es in der Konsole getan haben. Diesmal ohne die Variable und dann ändern Sie dies zu meinem vollständigen Namen. Wieder, mit der Konsole protokollieren Sie die gleiche Namensvariable, laden Sie neu, und es gibt unseren Neuzuweisungsnamen. Lass uns das Alter als nächstes machen. Also var Alter gleich 34. Wir können auch unsere gleiche Zeichenfolge tun, die wir in der Konsole von verbunden gemacht haben. Wir können dies gleich setzen „Mein Name ist“ fügen Sie ein Leerzeichen. Dann können wir unseren Variablennamen hinzufügen, also wird dies „Mein Name ist Chris“ sein. Dann ist die Zeichenfolge von „und ich bin“ Leerzeichen. Dann fügen Sie am Ende die Altersvariable mit dem Semikolon am Ende hinzu. Wir können console.log unsere neue Zeichenfolge von verbunden. Rüber zur Konsole, neu laden, und jetzt gehen wir, da ist unsere Zeichenfolge, die unsere Variablen unseres Namens und Alters enthält. Wir haben früher gesagt, dass wir doppelte oder einfache Anführungszeichen verwenden können, wenn Sie mit Strings arbeiten. Es gibt einen Fall, in dem wir vorsichtig sein müssen. Wenn wir unsere Anführungszeichen zu single ändern, so ist es einfach am Anfang und dann am Ende dieser Zeichenfolge, und dann auch diese beiden hier ersetzen. Also, jetzt sind alle Strings einzeln, speichern und dann aktualisieren. Wir sehen, dass das immer noch perfekt funktioniert. Das Problem tritt auf, wenn wir eines der gleichen Anführungszeichen in unserem Text verwenden möchten. Wenn Sie sich für „Ich bin“, anstatt „Ich bin“, einfach so, können wir sehen, dass wir hier einen blauen Buchstaben haben, um ein Problem anzuzeigen. Wenn wir speichern und dann aktualisieren, erhalten wir einen Syntaxfehler. Das sollte, weil unsere Zitate nicht mehr paarweise sind und die Dinge etwas durcheinander sind. Das zu beheben ist ziemlich einfach. Alles, was wir tun müssen, ist den Abschnitt in die entgegengesetzte Art von Anführungszeichen zu umgeben. Also hier, anstatt die freien einfachen Anführungszeichen zu haben, lassen Sie uns diese um die ändern, um doppelt zu sein. Genau so. Wir könnten diesen Abschnitt hier sogar ändern, oder wir können all diese Einzelnen in Doppel ändern, außer dem, den wir hier wollen. So oder so wird es gut funktionieren. Speichern und dann neu laden. Nun ist unsere Saitenarbeit mit dem Apostroph hier vollkommen in Ordnung. Dies ist also nur etwas, das Sie beachten sollten, wenn Sie Zitate verwenden. Jetzt gehen wir zum nächsten Video über, wo wir einen Blick auf JavaScript-Arithmetik und Operatoren werfen. 4. Javascript – Arithmetik und Operatoren: Im letzten Video wurden wir Zahlen in JavaScript nach Speicher in unserer Zeit in eine Variable eingeführt . Es gibt so viel mehr, was wir mit diesen Zahlen tun können. Lass uns zur Konsole gehen und das in Aktion sehen. Wenn wir hier auf dieses Symbol klicken und die Konsole löschen, können wir jetzt beginnen, einen Blick auf Zahlen und Arithmetik zu werfen. Beginnen wir mit einer grundlegenden Arithmetik, wie Subtraktion, Multiplikation, Addition und Division. Also hier drin, können wir einfach sagen, es 10, nehmen Sie fünf weg, und dann zurück, wir bekommen den Wert von fünf. Wir können weitermachen und 34. Eine Multiplikation ist das Startsymbol. Zuerst multiplizieren Sie mit 7, und das ist ein Wert von 238. Addition ist das Plus-Symbol, das Sie zuvor gesehen haben. So 12 hinzufügen 6 ist 18. Wenn wir in JavaScript teilen möchten, ist es der Schrägstrich. Drei geteilt durch drei gibt uns den Wert eins. Versuchen wir es mit einem anderen. 12 geteilt durch 4, das ist 3. Wir haben auch Modulus, das ein Prozentsymbol ist. Machen wir 12 Prozent und dann drei. Modulus ist der Rest, der nach der Teilung übrig bleibt. Drei geht in 12 gleichermaßen. Es ist nichts mehr übrig. Das gleiche, wenn wir 12 und dann vier tun. Vier geht in 12, 3 mal, ohne dass nichts übrig ist. Der Wert ist 0. Allerdings, wenn wir ändern, um 13, und dann frei, frei gehen in 13, 4 mal 12 zu machen. Mit einem Ãœberbleibsel. Deshalb bekommen wir den Wert eines hier. All diese Ergänzungen, Subtraktionen, Multiplikationen, Divisionen und auch Modulus, eine Rolle, was wir arithmetische Operatoren genannt haben. Die AMA-Operatoren zwei in JavaScript. Wir werden diese beiden behandeln, während wir diesen Kurs durchlaufen. Diese Operatoren können auch für Werte verwendet werden, die in Variablen gespeichert sind. Lassen Sie uns zu unserer Starterdatei in Nummer zwei gehen, die arithmetisch und Operatoren ist. Lass uns das schließen. Öffnen Sie unsere zweite Indexseite und öffnen Sie diese auch im Browser. Ich kopiere nur den Pfad von hier und füge ihn dann in den Browser ein. Schauen wir uns zuerst einige arithmetische Operatoren innerhalb unseres Code-Editors an. Also nur hier können Sie alle Operatoren sehen, die innerhalb eines Kommentars haben werden. Lassen Sie uns 0s dies von Variablen zuweisen. Variabel, also sagen wir, verließ die Schule im Alter von 16 Jahren. Dann könnten wir unser Alter sagen. Mein Alter ist 34 Jahre alt. Dann können wir einige Berechnungen durchführen, um herauszufinden, wie viele Jahre seit wir die Schule verlassen haben. Lassen Sie uns eine neue Variable erstellen, die Jahre seit der Schule genannt wird. Dann können wir das auf unser Alter einstellen. Mein Alter ist 34 Jahre alt. Nehmen Sie die Anzahl der Jahre weg, seit wir die Schule verlassen haben, die innerhalb dieser Variablen gespeichert ist. Dies wird zu 34 übersetzen, Takeaway 16. Lassen Sie uns dies mit einem Konsolenprotokoll überprüfen. Genau wie wir es vorher getan haben, um eine console.log und dann können wir in unsere Variable von Jahren seit der Schule übergeben. Jetzt sollte die Konsole diese Berechnungsfotos machen. So erfrischen. Wir haben da einen Rechtschreibfehler. So console.log aktualisieren. Also seine Nummer 18. Eine andere Sache, die Menschen stolpern kann, ist, was Operatorvorrang genannt wird. Dies ist nur ein schicker Name für die Reihenfolge, in der Dinge passieren. Wenn wir eine Variable erstellen, die den Wert der freien Zahlen speichert, genau wie diese. Lassen Sie uns nach unten scrollen, wir werden einen Kommentar hinzufügen. Also Reihenfolge der Operation. Zeichnen wir eine Zahl wie 10 plus 10 multipliziert mit 2. Dann geht es zu einem zweiten Konsolenprotokoll. Wir können den Wert der Zahl an der Konsole protokollieren. Speichern Sie das, laden Sie neu und Sie erhalten den Wert von 30. Wenn wir zurückgehen und uns unsere Nummer ansehen, können wir erwarten, dass die Berechnung von links nach rechts ausgeführt wird. Zehn plus 10 ist 20 multipliziert mit zwei ist 40. In der Tat, was passiert, ist eine Multiplikation geschieht zuerst. Zehn multipliziert mit 2 ist 20, und dann wird die 10 addiert, was uns einen Wert von 30. Dies ist der Wert, den Sie in der Konsole gerade hier sehen. Dies liegt daran, dass Multiplikation und auch Division eine höhere Priorität haben als Subtraktion oder Addition. Wenn wir Änderungen wollten. Also passiert die 10 plus 10 zuerst. Wir können diese in Klammern, auch Klammern genannt, wickeln. Genau so. Diese Klammern stellen sicher, dass diese Berechnung zuerst durchgeführt wird. Dies wird 20 multipliziert mit zwei bei einem Wert von 40. Lassen Sie uns dies in einer Konsole überprüfen, indem Sie aktualisieren. Es gibt einen Wert von 40. Es ist auch erwähnenswert, dass, wenn alle Operatoren den gleichen Vorrang haben, die Berechnung von links nach rechts durchgeführt wird. Dies wird der Fall sein, wenn alle Operatoren Addition oder Subtraktion waren. Wir haben früher gesagt, diese Ergänzungen, Multiplikationen und so weiter. Wer hat die Betreiber angerufen? Es gibt auch zwei weitere Operatoren verfügbare Tools, die als Inkrement und Dekrement bezeichnet werden. Lasst uns das mal ausprobieren. Wenn jetzt allgemeine Gehälter Konsolenprotokoll mit den beiden Schrägstrichen. Auch dieser hier. Um uns eine klare Konsole zu geben. Darunter möchten wir einen neuen Abschnitt erstellen, und dies ist für Inkrement und Dekrement. Wir wissen jetzt, dass die Anzahl der Variablen ist ein Wert von 40. Wenn wir fortfahren und Zahl plus hinzufügen wollen, plus, genau so, würde dies den Wert jedes Mal um eins erhöhen. Wenn wir dies speichern und mit einem Konsolenprotokoll der Nummer zur Konsole gehen. Dies sollte nun den Wert von 40 auf 41 erhöhen. Wenn wir voran gehen und dies nochmals erhöhen, haben wir die Zahl plus, plus. Dies sollte uns jetzt einen Wert von 42 geben. Dies ist etwas, das wir oft in JavaScript sehen werden, besonders bei der Verwendung von Schleifen. Werfen wir nun einen Blick auf Dekremente, die, wie Sie vielleicht erraten haben, den Wert jedes Mal um eins reduzieren. Ich werde das mit den negativen Symbolen tun, einfach so und neu laden. Jetzt ist unser Anfangswert von 40 ist jetzt auf 39 reduziert.Dies ist eine gemeinsame Sache, für erhöhte an einem Ort namens, zum Beispiel, oder Erhöhung der Anzahl der Artikel im Warenkorb zu tun . Dies ist etwas wirklich Nützliches zu wissen, wenn Sie JavaScript verwenden. 5. Warnen, auffordern und bestätigen: Wir haben uns bereits die Verwendung des Konsolenprotokolls in diesem Abschnitt angesehen. Dies ist nützlich für das Ausdrucken von Dingen und Debugging. Während der Entwicklung, Es ist nicht als eine Möglichkeit gedacht , mit den Nutzungen unserer Websites oder Apps zu kommunizieren. Es gibt jedoch einige Möglichkeiten, mehrere, genauer, einige weitere Methoden, die wir verwenden können, um mit dem Benutzer zu kommunizieren. Die erste davon ist eine Warnung. Eine Warnung wird verwendet, um eine Warnbox für den Benutzer zu öffnen. Warnungen sind wie ein Pop-up-Feld mit einigen Informationen und einem OK Button, auf den Sie klicken können, um dieses Popup zu schließen. Am einfachsten können wir einfach etwas an den Benutzer ausgeben. Lassen Sie uns zu unseren Skripten innerhalb unserer Starterdatei gehen. Gehen wir zu Nummer drei, Warnungen, Eingabeaufforderungen und bestätigen. Öffnen Sie dies nun und gehen Sie dann, um den Pfad zu kopieren und fügen Sie dann innerhalb des Browsers ein oder Sie können einfach auf die Indexdatei innerhalb des Ordners doppelklicken. Unten unter der Alert Common Tier, die eine Warnung Popup ausgeben wird und dann innen hier können wir alles tun, was wir wollen, wie eine Berechnung. Zehn Modul und dann drei gibt eine speichern und öffnen Sie diese Indexseite im Browser. Erfrischen. und es gibt unsere Alert-Box auf dem Bildschirm mit dem Wert von eins. Wir können dies verwenden, um einige Steuern auch anstelle einer Berechnung hinzuzufügen. Denken Sie daran, dass die Textzeichenfolgen die Zitate haben. Also sagen wir hallo, erfrischen. Wie unser Text gerade hier, kann diese Warnung sogar Variablen enthalten, wie unser Namensbeispiel von vorher. Wir hatten eine Variable mit Namen gleich Chris. Wir könnten weitermachen und das an das Ende unserer Saite hinzufügen. Hallo plus unseren Variablennamen. Speichern Sie das und wir gehen, sagt hallo Chris, in der Alarmbereitschaft. Wenn wir weiter gehen und noch mehr Text zu unserer Warnung hinzufügen, lassen Sie uns kurz danach noch etwas Text hinzufügen. Nehmen wir an, melden Sie sich an, um fortzufahren, speichern Sie das und laden Sie es neu Standardmäßig. All dies bleibt in einer einzigen Zeile. Wir können dies auf eine neue Zeile aufbrechen, indem wir einen umgekehrten Schrägstrich und dann einen N verwenden. Innerhalb unserer Zeichenfolge hier fügen wir den umgekehrten Schrägstrich und den N hinzu. Dieser umgekehrte Schrägstrich, gefolgt von einem N, könnte ein wenig ungewöhnlich aussehen, aber wir werden abdecken, was das ist und auch einige ähnliche später, wenn wir uns reguläre Ausdrücke ansehen. Für jetzt geben wir, dass speichern, neu laden und jetzt ist ein Zeilenumbruch kurz nach diesem N. Der nächste, den ich Ihnen zeigen möchte, ist prompt. Dies wird angezeigt, wenn der Benutzer nach einer Eingabe auffordert. Gehen wir weiter, kommentieren Sie diese beiden mit Schrägstrichen und gehen Sie dann zu diesem Abschlussball Abschnitt. Beginnen wir mit einer einfachen Eingabeaufforderungen, die der Name der Eingabeaufforderungen und dann die Klammern kurz danach ist . Drinnen hier können wir eine Textzeichenfolge hinzufügen, so hallo, wie ist Ihr Name? Mit einem Fragezeichen, Indexseite und so sieht eine Eingabeaufforderung standardmäßig aus. Wir bekommen einen Text, den wir gerade hier gemacht haben und dann erhalten wir einen Eingabe-Abschnitt, in dem der Benutzer einige Informationen eingeben kann. Dies kann sogar abgebrochen werden oder klicken Sie auf OK. Wenn wir hier unseren Namen wie Chris eingeben und dann „okay“ drücken, scheint nichts zu passieren. Dies liegt daran, dass wir eine Möglichkeit benötigen, die Eingaben des Benutzers zu speichern. Wir wissen bereits, dass wir dies tun können, indem wir eine Variable verwenden. Lassen Sie uns diese Eingabeaufforderungen auf eine Variable setzen. Nehmen wir an, var Name entspricht Eingabeaufforderungen und dann, um dies in Aktion zu sehen, können wir ein Konsolenprotokoll machen und dann den Wert unseres Namens protokollieren, nur um zusammenzufassen werden wir den Benutzer aufgefordert, ihren Namen einzugeben, werden alle diese Eingaben innerhalb einer Variablen namens name, und zeigen Sie diese dann in der Konsole an. Speichern wir das und probieren Sie es aus. Sag Chris, okay, rechtsklicken und inspizieren. Öffne die Konsole und da ist unser Wert von Chris. Versuchen wir es noch mal. Geben Sie einfach etwas in hier ein und es gibt den Wert, der in dieser Namensvariablen gespeichert ist. Diese Aufforderung, wenn gibt den Wert vom Benutzer eingegeben, wie wir gerade gesehen, oder wir können Konsole auswählen. Wir klicken Konsolenschaltfläche hier, erhalten wir dann den Wert von null zurückgegeben. Sie werden oft sowohl null als auch undefiniert begegnen. Beide bedeuten im Allgemeinen, dass etwas fehlt. Sowohl null als auch undefined betrachteten auch Datentypen, genau wie Zahl und Zeichenfolge, die Sie bereits gesehen haben. Gehen wir zu unserem Texteditor und erstellen Sie eine Warnung. Begrüßen wir den neuen Benutzer mit dem textilen Willkommensbereich als Variablennamen und fügen Sie dann am Ende eine Zeichenfolge mit einem Ausrufezeichen hinzu. Wenn wir das speichern, neu laden, können wir unseren Namen hinzufügen, „Okay“ drücken und da ist unsere Textzeichenfolge der Begrüßung, Chris, mit dem Ausruf am Ende. Wenn wir den Browser neu laden und stattdessen „Abbrechen“ drücken, erhalten wir das Wort willkommen null. Null bezieht sich auf einen leeren Objektverweis. Das macht im Moment vielleicht nicht zu viel Sinn weil wir noch nicht auf die Objekte geschaut haben. Aber es bedeutet im Allgemeinen, dass etwas fehlt. Grundsätzlich gibt prompt sogar nichts zurück. Der gesamte Wert, der eingegeben wird, undefined ist ein wenig generischer. Ein Beispiel für undefined ist, wenn eine Variable leer ist. Wenn wir voran gehen und eine neue Variable erstellen, sagen wir neuen Namen und dann setzen wir keinen Wert darauf. Wenn wir den Wert des neuen Namens alarmieren und dann speichern, aktualisieren, sagt unsere anfänglichen Warnungen, lassen Sie uns Liste abbrechen und dann erhalten wir unsere zweite Warnung, die sagen, ist undefiniert und dies ist der Wert unserer undefinierten Variablen hier. Als nächstes wollen wir einen Blick auf einige ziemlich ähnlich wie prompt nehmen. Lassen Sie uns diese drei Zeilen hier auskommentieren. Bei Verwendung von Visual Studio Code Befehl und Schrägstrich werden alle Zeilen zusammen kommentiert. Jetzt gehen wir runter, um es zu bestätigen. Unmittelbar hier können wir einen Blick darauf werfen, wie eine Bestätigung verwendet wird. Genau wie die ersten beiden geben wir den Namen ein und dann die Klammern kurz danach. Lassen Sie beginnen, indem Sie eine Textzeichenfolge hinzufügen. Sie müssen über 16 eingeben, sagen wir, bitte bestätigen und dann offensichtlich Browser schließen Sie es von vorher, neu laden. Das ist der Text, den wir hier sehen. Wir haben auch einen Abbruch und einen OK Button. Lassen Sie uns auf den Abbrechen klicken und auch in Ordnung. Nichts scheint zu passieren, wenn wir auf diese Schaltflächen klicken. Da confirm kein Eingabefeld hat, gibt es true zurück. Wenn der Benutzer auf OK klickt, ist alles fällt die Schaltfläche Abbrechen ausgewählt ist. Wir können dies wieder sehen, indem wir dies auf eine Variable setzen. Nehmen wir an, var Alter gleich bestätigen. Dann ein Konsolenprotokoll, das in unserer Altersvariablen übergibt. Dann schaut euch das an. Öffnen Sie den Abbrechen Klicken Sie auf die Konsole. Lasst uns nachladen. Wenn wir auf OK klicken, erhalten wir den Wert von true dann, wenn wir auf Abbrechen klicken, erhalten wir den Wert von false. Dieser TRUE oder FALSE Wert ist auch ein weiterer wichtiger JavaScript-Datentyp, der Boolean genannt wird. Boolean, um einfach einen true oder false Wert. Sobald wir diese wahren oder falschen Werte erhalten, brauchen wir eine Möglichkeit, etwas mit ihnen zu tun. Zum Beispiel, wenn die Benutzer über 16, können wir sie die Seite anzeigen lassen oder wenn der Benutzer angemeldet ist, können wir sie den Admin-Bereich sehen, um zu entscheiden, was in diesen Fällen zu tun ist, wir haben bedingte Anweisungen, und das ist, was wir als Nächstes betrachten werden. 6. If/else-Anweisungen und Vergleiche: Im letzten Video erwähnten wir boolesche Werte, die wahr oder falsch sind. Wir brauchen auch eine Möglichkeit, tatsächlich eine Aktion auszuführen, die darauf basiert, ob ein Wert wahr oder falsch ist. Um dies zu tun, haben wir bedingte Aussagen. Wenn beispielsweise die Gesundheit eines Spielers null oder weniger ist, verliert der Spieler Leben. Wenn ein Spieler 100 Münzen sammelt, dann können wir ein zusätzliches Leben hinzufügen. Oder wenn die aktuelle Zeit der Morgen ist, könnten wir eine gute Morgenbotschaft hinzufügen. Wenn es am Nachmittag wäre, könnten wir die Nachricht ändern, um Guten Tag zu sein. Grundsätzlich erlauben uns diese bedingten Aussagen zu entscheiden, was unser Code unter verschiedenen Umständen tun soll. Ein gebräuchlicher Typ von bedingter Anweisung ist If else. Beginnen wir mit dem Abschnitt Wenn. Dies sagt im Grunde, wenn etwas wahr ist, dann führen Sie diesen Code aus. Ich möchte eine Datei starten. Lassen Sie uns Nummer 4 öffnen, was ist, wenn sonst und Vergleich. Dann werde ich das im Browser öffnen. Dann bis zu unserem Skript-Abschnitt, können wir beginnen, eine if-Anweisung zu erstellen. Wir fügen das If Schlüsselwort gefolgt von den Klammern oder Klammern. Dann fügen wir eine Reihe von geschweiften Klammern hinzu, in denen wir unseren Code hinzufügen können, den wir ausführen möchten. Nehmen wir an, wir möchten eine Warnung für unsere Nachricht hinzufügen. Wir müssen eine Bedingung hinzufügen, bei der man alarmiert ist, um zu laufen. In diesen Klammern hier fügen wir unseren Zustand hinzu. Wir sagen, wenn 10 größer als 5 ist, dann führen Sie diese Warnung aus. Fügen Sie einige Texte hinzu, die sagen, 10 ist größer als 5. Wenn dies der Fall ist, wird diese Warnung ausgeführt. Wenn das nicht wahr wäre, würden wir überhaupt nichts passieren. Speichern Sie das, laden Sie neu und es gibt unsere Warnung, dass 10 größer als 5 ist. Dieses Größer-als-Symbol ist ein Vergleichsoperator. Es gibt viel mehr, die wir verwenden können, wie zum Beispiel das weniger als-Symbol. Jetzt 10 ist nicht weniger als 5, also wird dies falsch sein. heißt, wenn wir zum Browser gehen und aktualisieren, ist die Anweisung jetzt falsch, so dass wir die Warnung nicht sehen. Dies liegt daran, dass der Code, wie bereits erwähnt, nur ausgeführt wird, wenn die Bedingung wahr ist. Wir können auch diese Größer-als-und Kleiner-als-Symbole mit dem Gleichheitsoperator kombinieren . Zum Beispiel, wenn wir dies zu 10 ändern. Wenn wir sagen würden, wenn 10 größer als 10 ist, dann tun Sie diese Warnung. Aktualisieren. Wir sehen die Warnung nicht, da 10 nicht größer als 10 ist. Wenn wir jedoch eine Ãœberprüfung durchführen möchten, um zu sehen, ob 10 gleich oder größer ist als, können wir sie einfach so kombinieren. Größer als oder gleich. Jetzt sollte unser Zustand wahr sein. Dann sehen wir die Alarmbereitschaft. Dies funktioniert auch mit weniger als zu, wie Sie es erwarten würden. Wenn 10 kleiner oder gleich ist, führen Sie die Warnung aus. Dies kann zunächst verwirrend sein, da wir dieses Gleichheitssymbol bereits verwendet haben, um einer Variablen einen Wert zuzuweisen. Bevor wir Dinge wie var x gleich 5. Hier weisen wir den Wert von 5 zu diesem x mit dem Gleichheitssymbol zu. Stattdessen verwenden wir beim Vergleichen die doppelten Gleichheiten. Wir können sagen, wenn x gleich 10 ist, dann alarmieren Sie den Wert von true. Speichern Sie das und aktualisieren Sie es. Natürlich bekommen wir nicht die Warnung auftaucht, weil x nicht gleich 10 ist. Wir können auch ein Ausrufezeichen hinzufügen, um das Gegenteil zu tun. Ein Ausruf und dann gleich. Wenn x nicht gleich 10 ist, sollten wir jetzt die Warnung auftauchen. Versuchen wir etwas anderes. Wenn wir eine Zahl hinzufügen, so haben wir bereits den Wert von x gleich 5. Wenn Sie eine zweite Variable von y hinzufügen, und dieses Mal, wenn wir die Zahl in einem Zitat genau so setzen, wird dies jetzt als String betrachtet, weil es in einem Zitat ist. Wir können dies überprüfen, wenn wir ein Konsolenprotokoll für jede Variable tun. Lassen Sie uns ein Konsolenprotokoll direkt unten machen. Wir können sagen, Typ von und dann X. Speichern Sie das. Wenn wir die Konsole öffnen, sollten wir nun sehen, welche Art von Daten in x enthalten ist. Wir sehen, dass die x eine Zahl ist, die wir erwarten würden, weil wir das gerade hier erklärt haben. Wenn wir jedoch voran gehen und dies ändern, um y zu sein, aktualisieren. Jetzt sehen wir, dass der Datentyp String ist, weil dies innerhalb der Anführungszeichen hinzugefügt wird. Lassen Sie uns mit diesem Wissen sehen, wie sich dies auf unseren Vergleich auswirkt. Lassen Sie uns voran und vergleichen Sie den Wert von y , der eine Zeichenfolge mit 5 ist. Ich werde retten. Dies ist eine Zeichenfolge und dies ist Zahl. Theoretisch sollten sie nicht funktionieren. Aktualisieren. Wir sehen immer noch das Pop-up. Dies wird als wahr ausgewertet, obwohl es eine Zahl mit einer Zeichenfolge vergleicht. Dies liegt daran, dass die double equals nur den Wert und nicht den Datentyp überprüfen , wenn wir möchten, dass dieser Vergleich noch strenger ist und auch überprüfen, ob der Wert sowie der Datentyp gleich ist. Wir können voran gehen und das so ändern, dass es dreifach gleich ist. Speichern Sie das, laden Sie es neu. Jetzt sehen wir das Pop-up nicht, da der Datentyp nicht gleich ist. Lassen Sie uns versuchen, dies mit x und x ist eine Zahl. Wir vergleichen, ob x gleich 5 ist, sowohl im Wert als auch im Datentyp. Ist natürlich, es sollte wahr sein. Wir sehen das Pop-up oder wahr. Dies funktioniert, weil x gleich Typ und Wert 5 ist. Wir könnten jedoch auch ein Ausrufezeichen und die beiden gleich hinzufügen, und dies wird genau das Gegenteil tun. Dadurch wird die Warnung nur ausgeführt, wenn x ungleich und Wert 5 ist. Wenn wir speichern und neu laden, sehen wir die Warnung nicht mehr. So können wir Vergleichsoperatoren verwenden, und sie sind wirklich nützlich, wenn sie mit if-Anweisungen kombiniert werden. Wie wir gerade gesehen haben, ist, wenn Anweisung ausgeführt wird, wenn ein Code wahr ist. Aber was, wenn wir wollen, dass eine Alternative ausgeführt wird, wenn ein Code nicht wahr ist? Dazu müssen wir eine zweite Bedingung namens else hinzufügen. Lassen Sie uns dieses Beispiel von vorher löschen und erstellen Sie eine neue Variable namens hungrig, und setzen Sie dies zunächst auf true. Dann können wir sagen, wenn hungrig, dann in den Zitaten können wir alarmieren: „Holen Sie sich etwas zu essen!“. Genau so. Wenn wir nur den Variablennamen wie folgt hinzufügen, wird dies überprüfen, ob die Variable wahr ist. Dann, wenn es so ist, wird es Code ausführen. Lassen Sie uns speichern, aktualisieren, und es gibt unseren Text, etwas zu essen. Wenn wir jedoch eine Alternative wollten, können wir auch noch hinzufügen. Der zweite Codeblock führt eine Warnung aus, wenn die Bedingung falsch ist. Sagen wir dieses Mal, vielleicht später. Wenn wir hungrig ändern, um falsch zu sein, ist dies, wenn Aussage jetzt falsch. Daher wird dieser Code nicht ausgeführt. Aber stattdessen wird die else-Anweisung Warnungen ausführen, vielleicht später. Lassen Sie uns dies in einem Browser versuchen. Aktualisieren. Da ist unser Text von „vielleicht später“. Lassen Sie uns das noch einmal versuchen, indem wir dies wieder auf „true“ ändern. Jetzt holen wir uns etwas zu essen. Diese if else Anweisungen sind wirklich ein grundlegender Bestandteil von JavaScript und auch die Programmierung im Allgemeinen. Wenn Sie sich immer noch ein wenig unsicher sind, würde ich empfehlen, dieses Video durchzugehen, um besser zu verstehen, wie sie funktionieren. Obwohl Sie viel mehr Ãœbung für diesen Abschnitt bekommen. Als nächstes werden wir die Dinge noch weiter nehmen, indem wir diese Aussagen zusammen verschachteln. 7. Verschachtelete If/else-Anweisungen: Lassen Sie uns zu unseren Starter-Dateien und in unseren verschachtelten bedingten Anweisungen Abschnitt gehen. Hier in unserem letzten Beispiel war ein einfaches wenn-else, um zu überprüfen, ob die Bedingung wahr ist. So überprüfen wir, ob die Variable von „hungrig“ auf true gesetzt wurde. Wenn es so war, haben wir den Text über „Holen Sie sich etwas zu essen“ alarmiert. Andernfalls erhalten wir den Text von „Vielleicht später“. Manchmal möchten wir vielleicht überprüfen, ob mehr als eine Bedingung erfüllt ist, bevor wir unseren Code ausführen. Dafür können wir unsere if-else-Aussagen verschachteln. Um dies in Aktion zu sehen, werde ich eine zweite Variable hinzufügen. Fügen wir also eine zweite Variable von „Verlangen“ hinzu, und ich möchte dies auf „Pizza“ setzen. Dann werde ich innerhalb dieses ersten „if“ -Abschnitts in einer zweiten „if“ -Anweisung verschachteln. Lassen Sie uns etwas Platz machen, um dies klarer zu machen, also sagen wir, wenn „Verlangen“ gleich „Pizza“ ist, dann können wir unseren Codeblock hinzufügen, um Alarmstufe „Gimme Pizza“ zu sagen , und wir können diese Warnung auch von hier entfernen. Also zuerst überprüfen wir, ob der Zustand wahr ist, indem wir überprüfen, ob die Person hungrig ist. Wenn es wahr ist, wird es dann auch eine zweite Ãœberprüfung durchführen , um zu sehen, ob das Verlangen gleich Pizza ist, und dann wird es sagen „Gimme Pizza“. Sonst bekommen wir den Text von „Vielleicht später“. Speichern wir das und öffnen Sie es im Browser und aktualisieren Sie es und es gibt einen Text von „Gimme Pizza“. Aber was, wenn die erste Bedingung wahr war, wenn hungrig, aber Sie nicht nach Pizza sehnen? Also lassen Sie uns diese Variable in etwas anderes ändern, wie zum Beispiel „Chinesisch“. Speichern Sie das, und aktualisieren Sie es. Also sehen wir keine Warnungen. Denn obwohl hungrig auf wahr gesetzt ist, ist das Verlangen nicht mehr auf „Pizza“ gesetzt. Aus diesem Grund wird diese Warnung nicht ausgeführt. Für diesen Fall können wir auch eine „else“ -Anweisung bereitstellen, die auch innerhalb von hier verschachtelt ist. Also „sonst“, und dann in diesem Block, können wir eine Warnung mit dem Text von „Lets get some food“ setzen. Denken Sie daran, wenn Sie ein Apostroph hinzufügen möchten, ist dieses einfache Anführungszeichen das gleiche wie die beiden Äußerungen, also müssten wir dies ändern, um doppelte Anführungszeichen zu sein, damit dies funktioniert. Geben Sie das ein Speichern, und dann, wenn wir zum Browser gehen und dann neu laden, erhalten wir den Text von „Lass uns etwas essen“. Dies liegt daran, dass diese „if“ -Anweisung ursprünglich wahr ist, also wird sie hier zur zweiten übergehen. Wir sehnen uns nicht nach Pizza, also bekommen wir diese Warnung hier nicht. Jeder Ãœberwert führt dazu, dass die „else“ -Anweisung ausgeführt wird und dann den Text von „Lassen Sie uns etwas essen“ ausdruckt , und wie erwartet, wenn wir „hungrig“ auf falsch ändern, wird diese „if“ -Anweisung überhaupt nicht ausgeführt. Stattdessen wird die „else“ -Anweisung ausgeführt und wir erhalten einen Text von „Vielleicht später“. So können wir if-else-Anweisungen innerhalb von anderen verschachteln. Wir können noch weiter gehen und auch innerhalb dieser „if“ -Anweisung nisten, aber im Allgemeinen wollen wir nicht zu tief gehen weil dies unseren Code komplexer und unlesbarer macht, und es gibt oft elegantere Lösungen dafür. So können wir unsere bedingten Aussagen verschachteln, und als nächstes werden wir einen Blick auf else-if werfen. 8. Else-if und logische Operatoren: Wir haben gelernt, dass, wenn Anweisungen überprüfen, ob eine Bedingung erfüllt ist, sonst alle Fälle abfängt. Es gibt einen ersten Fall, den wir sonst genannt verwenden können, wenn. Wir verwenden else, wenn eine neue Bedingung zu überprüfen, wenn die erste Bedingung falsch ist. Wir können es so benutzen. Also innerhalb unserer verschachtelten if-else-Anweisung werde ich eine else if-Anweisung hinzufügen. Also kurz nach dieser Öffnung, Satz von geschweiften Basen, lassen Sie uns sonst hinzufügen, wenn, und dann öffnen und schließen Sie eine neue Reihe von geschweiften Klammern, schieben Sie die letzte else-Anweisung bis zum Ende. Innerhalb von hier können wir einige weitere Klammern hinzufügen, um zu überprüfen, ob eine Bedingung wahr ist. wir also, wenn das Verlangen dem Chinesischen gleich ist. Also nochmal, wir überprüfen, ob die Variable gleich hungrig ist. Also lassen Sie uns das auf wahr setzen. Wenn dies der Fall ist, dann bewegt sich hier auf diesen verschachtelten Block. Also zuerst überprüft es, ob das Verlangen gleich Pizza ist, dann wird es diese Warnung hier ausführen. Wenn nicht, wird die zweite Bedingung von else if, dann ausgeführt, und dieses Mal können wir eine Warnung tun. Sagen wir mal mal, gib mir Chinesisch, einfach so. Wenn Pizza oder Chinesisch nicht der Wert des Verlangens ist, wird diese andere Aussage am Ende laufen und sagen: „Lass uns etwas essen.“ Also, sparen Sie das. Jetzt ist unser Verlangen Chinesen. Wir sollten jetzt den Text von Give mir Chinese sehen. Lassen Sie uns ein paar weitere Optionen ausprobieren. Wenn wir das in Pizza ändern, bekommen wir Pizza, und wenn wir das ändern, um etwas anderes zu sein, sagen wir Huhn, erfrischen. Wir haben einen Fallback, der sagt: „Holen wir uns etwas zu essen.“ Auch nur um klar zu sein, haben wir diesen sonst if-Block, in diesen if-Anweisungen verschachtelt ist. Aber es funktionierte perfekt, wenn nicht verschachtelt. Bevor wir dieses Video beenden, möchte ich Ihnen ein paar logische Operatoren zeigen, die Sie nützlich finden werden. Logische Operatoren klingen vielleicht komplex, aber sie sind einfach und oder nicht. Lassen Sie uns also dieses Beispiel auskommentieren und werfen Sie einen Blick auf dieses gemeinsame Zeichen den gesamten Code von vorher lassen Sie die beiden Variablen. Also sagen wir, wenn hungrig, dann und mit den beiden kaufmännischen Unds ist Verlangen Pizza. Dann können wir unsere Warnung hinzufügen, bevor wir sagen: „Gib mir Pizza.“ Also, jetzt überprüfen wir, ob zwei Aussagen wahr sind. Also überprüfen wir, ob Hunger wahr ist und auch, ob das Verlangen gleich Pizza ist. Lassen Sie uns das in Pizza ändern und sehen, was passiert. Aktualisieren. Da ist unsere Alarmbereitschaft. Wenn wir dies schließen und eines der beiden auf falsch ändern, wird die Warnung nicht angezeigt. Versuchen wir es andersherum. Lass uns das in Hühnchen ändern. Auch hier müssen beide Bedingungen erfüllt sein, damit dieser Code ausgeführt wird. Wenn wir nur wollen, dass eine dieser Bedingungen wahr ist, also zum Beispiel, wenn wir Hunger haben oder Verlangen auf Essen ist, dann können wir diesen Code ausführen. Anstatt diese beiden Bedingungen wahr sein müssen, können wir diesen Code ausführen, wenn nur einer die wenigen auswertet. Wir können dies mit dem Operator oder tun, das sind die beiden Rohre, genau so. Jetzt haben wir nur eine dieser Bedingungen als wahr bewertet, was hungrig ist. Also speichern, aktualisieren, und jetzt funktioniert die Warnung. Also, wenn Sie sich ansehen und alle, die letzte, die ich Ihnen zeigen möchte, ist der nicht Operator. Dies ist das Ausrufezeichen, das wir uns vorhin angesehen haben. Wir haben uns dies mit der if-Anweisung angesehen, um zu überprüfen, ob etwas nicht gleich ist. Also nehmen wir den ganzen Abschnitt ab, da und hier, sogar hungrig, dann können wir hier ein Ausrufezeichen hinzufügen. Also, wenn nicht hungrig oder wenn das falsch bedeutet, dann werden wir die Warnung bekommen. Also zuerst, lassen Sie uns speichern und dann aktualisieren. Wir sehen gar nichts. Wenn wir dies jedoch ändern, um falsch zu sein und dann den Code ausführen, sehen wir nun die Warnung. Das tut also im Grunde das Gegenteil, also hier sagen wir, wenn nicht hungrig, was falsch ist, dann führen Sie diesen Code innerhalb von hier aus. Also das ist es jetzt für wenn sonst und auch wenn zusammen mit logischen Operatoren. Ich hoffe, das macht Sinn und nicht zu überwältigend. Denken Sie daran, viel davon braucht nur Ãœbung, und wir werden viel mehr bekommen, wenn Sie diesen Kurs durchlaufen. 9. Der ternäre Operator: Eine andere Art von bedingter Anweisung wird der ternäre Operator genannt, also stellen Sie sicher, dass Sie sich in Nummer sieben befinden, die E ternäre Operator-Startdatei ist. Dann können wir im Skriptabschnitt unten arbeiten. Der ternäre Operator wird oft als kürzere Alternative zu den ifelse-Anweisungen verwendet. Es ist auch eine einzeilige Anweisung, so dass es ein wenig einfacher aussehen kann. Wir beginnen mit dem Hinzufügen einer Bedingung, die wir überprüfen möchten, wie z. B. eine Berechnung. Wir sagen, zehn ist größer als fünf. Der Bedingung folgt dann das Fragezeichen, dann erklären wir, was wir passieren wollen, wenn das Ergebnis wahr oder falsch ist. Die erste Anweisung ist true, getrennt durch einen Doppelpunkt, und die zweite ist false. Was wir hier sagen, ist, wenn zehn größer als fünf ist, der erste Text von true gedruckt wird, der zweite ist einfach Text von falsch gedruckt. Wenn wir dies speichern und diese Datei im Browser öffnen, aktualisieren, sehen wir zunächst nichts passiert. Dies liegt daran, dass wir die Antwort ausgeben müssen, z. B. ein Konsolenprotokoll. Bevor dies eine console.log hinzufügen und dann innerhalb der Klammer können wir diesen vollständigen ternären Operator hinzufügen. Jetzt, wenn wir speichern, aktualisieren und dann öffnen Sie die Konsole, klicken Sie auf die Registerkarte Konsole, und dann haben wir den Text von true, weil zehn größer als fünf ist. Wenn wir dies ändern, um zehn ist weniger als fünf, dann erhalten wir die zweite Option falsch. Lassen Sie uns versuchen, dies und das fällt in den Browser. Später werden wir uns auch einige Möglichkeiten ansehen, Dinge auf einer Webseite und nicht in der Konsole oder mithilfe von Warnungen anzuzeigen . Wir können diese Ergebnisse auch in einer Variablen aufhalten. Gehen wir zurück und fügen Sie unsere Variable von hungrig auf kleinen und Suchwert von wahr. Ich sollte dieses Konsolenprotokoll verschieben und dann können wir sagen, var, sollte ich essen, dann können wir dies auf unseren ternären Operator setzen. Die Bedingung, die wir überprüfen wollen, ist, ob hungrig. Wenn dieser Wert wahr ist, wo das Fragezeichen, und fügen Sie dann unsere beiden Optionen. Wenn es wahr ist, sagen wir: Ja, lass uns essen, getrennt durch einen Doppelpunkt. Wenn es falsch ist, sagen wir nicht nur noch, fügen Sie am Ende ein Semikolon hinzu und dann können wir ein Konsolenprotokoll machen. Dann protokollieren Sie die Ergebnisse von sollte ich essen. Nur eine Zusammenfassung, wir überprüfen diese Variable hier, ob sie wahr oder falsch ist. Wenn es wahr ist, drucken wir im Text von Ja, lass uns essen. Wenn dies auf false gesetzt wurde, erhalten wir dann den zweiten Wert nicht nur noch. Dieses Ergebnis wird in einer Variablen namens installiert, sollte ich essen, und dies ist ein Wert, der in der Konsole angezeigt wird. Nach der Konsole jetzt ist das auf wahr gesetzt, also bekommen wir, ja, lasst uns essen. Wenn das falsch war, nicht nur noch. Es gibt viel mehr Verwendungszwecke für dieses Werkzeug, z. B. das Erstellen einer Textzeichenfolge mit Ergebnis. Wenn wir voran gehen und sagen, Variable ist angemeldet, und wir werden dies zunächst auf den Wert false setzen. Dann können wir voran gehen und eine Textzeichenfolge von Hallo mit Leerzeichen hinzufügen und dann innerhalb der Klammern können wir unseren ternären Operator hinzufügen. Zuerst werden wir unseren Zustand der Anmeldung überprüfen, das Fragezeichen und dann unsere beiden Optionen. Zunächst einmal, wenn das wahr ist, können wir dann willkommen sagen. Getrennt durch einen Doppelpunkt, fügen wir unseren falschen Zustand hinzu. Wir können sagen, bitte melden Sie sich in Ihrem Konto und ein Semikolon am Ende. Jetzt brauchen wir eine Möglichkeit, dies dem Benutzer anzuzeigen, damit wir diesen ganzen Abschnitt innerhalb einer Warnung umgeben können. Dann sind die Klammern der Anfang und dann schließt es Alarm aus direkt am Ende mit einem schließenden Klammern. Da gehen wir. Stellen wir sicher, dass wir die beiden Klammern am Ende haben, eine für die Warnung und die zweite für diesen eingeloggten Abschnitt. Geben Sie das Speichern, laden Sie es neu. Zunächst einmal haben wir den Text „Hallo, bitte loggen Sie sich in Ihr Konto ein“, weil wir nicht eingeloggt sind. Wenn wir dies jedoch auf den Wert true setzen, daher sind wir eingeloggt, neu laden und wir erhalten die Nachricht von Hello welcome zurück. Dieser ternäre Operator ist wirklich einfach zu bedienen und auch eine gute Alternative zur if-else-Anweisung. Es ist auch ein wenig kompakter auf McCann fügen Sie dies alles in einer Zeile hinzu, um nicht nur in unserem Code zu schießen, sondern es auch lesbarer zu machen. 10. Die Switch-Anweisung: Willkommen zurück. Begeben Sie sich für dieses Video zu Abschnitt 8 unserer Starter-Dateien, die für die switch-Anweisung ist. Dies ist die letzte Art von bedingten Aussagen, die wir behandeln werden. In gewisser Weise macht switch einen ähnlichen Job wie die IF/else-Anweisungen, die wir bereits angesehen haben. Aber der Unterschied ist, was es gegen so viele Bedingungen überprüfen kann, wie wir wollen. Dann fügen wir eine break-Anweisung hinzu, um mit dem Schalter auszubrechen, sobald eine Ãœbereinstimmung gefunden wird. Lassen Sie uns dies in unserem switch-Anweisungsabschnitt des Startcodes versuchen. Unten zwischen diesen Skripten. Beginnen wir noch einmal mit der Variablen. Ich werde dieses Futterfutter einstellen. Das kann jedes Essen sein, das wir wollen. Fangen wir mit Eiern an. Wir erstellen dann eine switch-Anweisung. Die Syntax ähnelt den if-Anweisungen. Innerhalb der Klammern fügen wir die Bedingung hinzu, gegen die wir testen möchten. Wir wollen die Lebensmittelvariable überprüfen. Innerhalb der switch-Anweisung können wir verschiedene Fälle hinzufügen , um zu überprüfen, ob sie mit dieser Lebensmittelvariablen übereinstimmen. Lassen Sie uns zunächst einen Fall hinzufügen. Wir sagen Pizza. Dadurch wird überprüft, ob Pizza mit dieser Variablen übereinstimmt. Wenn dies der Fall ist, fügen wir einen Doppelpunkt hinzu und dann könnten wir in der nächsten Zeile erklären, was wir tun wollen. Lassen Sie uns einfach eine console.log machen. Dann sagen wir, Pizza ist genial. Genau so. Dann können wir die Break-Schlüsselwörter hinzufügen. Wir fügen break hinzu, um mit den switch-Anweisungen auszubrechen, wenn dies eine Ãœbereinstimmung ist. Wenn nicht, dann geht es weiter zum nächsten Fall. Fügen wir hier einen neuen Fall hinzu. Dann können wir eine zweite Bedingung überprüfen. Sagen wir Eier. Wenn dies eine Ãœbereinstimmung ist, möchten wir dann eine console.log tun , um die Meldung „Eier sind genial“ anzuzeigen. Dann sind wir gleich danach wieder beim Break-Schlüsselwort. Fügen wir noch einen Fall hinzu. Dieses Mal werden wir Speck, Doppelpunkt und dann eine console.log hinzufügen . Sagen wir: „Speck ist fantastisch.“ Noch einmal brechen mit den Aussagen aus. Das sind unsere Switch-Aussagen insgesamt da. Nur eine Zusammenfassung. Wir erstellen eine Variable namens Eier. Wir prüfen dann nach Ãœbereinstimmungen innerhalb einer switch-Anweisungen. Wenn der Fall von Pizza ist ein Spiel, dann drucken wir den Text aus unsere Pizza ist genial. Wenn es so ist, dann brechen Sie mit einer Aussage aus und wir überprüfen keine zusätzlichen Fälle unten. Wenn es nicht eine Ãœbereinstimmung, die nicht in diesem Fall ist, dann bewegt es sich nach unten auf Eier und zeigt dann den Text der Eier sind genial. Aber dieses Mal, weil es eine Ãœbereinstimmung ist, werden wir aus der switch-Anweisung ausbrechen. Daher wird es nicht einmal diesen nächsten überprüfen. Lassen Sie uns geben, dass speichern und laden Sie den Browser neu, öffnen Sie die Konsole, und jetzt gehen wir. Eier ist ein Spiel, deshalb bekommen wir den Text der Eier sind genial. Was tun wir, wenn keiner dieser Fälle übereinstimmt? Dazu fügen wir einen Standard hinzu, der als Fallback fungiert. Ganz unten werde ich Standard hinzufügen. Dann gleich danach können wir eine console.log hinzufügen. Dann für den Text sagen wir: „Ich liebe.“ Fügen Sie dann ein Leerzeichen hinzu. Dann können wir den Namen unseres Essens hinzufügen. Mit einem Semikolon am Ende. Speichern Sie das und laden Sie dann den Browser neu. Wir bekommen immer noch einen Text von Eiern sind genial, weil wir ein Spiel haben. Allerdings, wenn wir gehen und ändern dieses Essen, um etwas anderes, wie Käse. Was mit keinem dieser drei Fälle übereinstimmt. Daher wird die Standardeinstellung eintreten. Nachladen. Da werden wir gehen. Wir haben einen Text von, ich liebe. Dann gehen wir in die Variable der Nahrung, die Käse ist. Beachten Sie in diesem Standardfall haben wir break Schlüsselwort ausgelassen, weil es am Ende der switch-Anweisung ist. Wir können diese Standardeinstellung überall hinzufügen, aber denken Sie daran, auch eine Pause zu verwenden, wenn sie nicht ganz am Ende ist. Wir können auch Dinge um ein wenig ändern. Wenn wir das gleiche Ergebnis für mehrere Fälle wollten, können wir sie einfach so kombinieren. Nehmen wir an, nach der Pizza können wir einen zweiten Fall hinzufügen. Lass uns Pasta nehmen, danach wieder mit dem Dickdarm. Nun, wenn der Fall von Essen Pizza oder Pasta passt. Dann können wir sagen: „Ich liebe Italienisch.“ So sparen. Lasst uns das vorerst als Käse behalten. Wir kriegen den Fall zurück und wenn wir das in Pasta ändern. Nachladen. Ich liebe Italienisch. Dann Pizza und wir bekommen immer noch, ich liebe Italienisch. Mit switch-Anweisungen können wir auch mit so vielen Fällen fortfahren, wie wir wollen. Jetzt ist es an der Zeit, ein kleines Spiel aufzubauen, um die Dinge, die wir in diesem Abschnitt gelernt haben, in die Praxis umzusetzen. 11. Zeit zum Ãœben: Das Drachentöterspiel: Wir werden uns jetzt ein wenig Zeit nehmen, um über bedingte Aussagen zu lernen , um sie in einem lustigen Spiel namens Drachenjägerin in die Praxis umzusetzen. Sie werden ziemlich einfach sein, aber es wird uns dazu bringen, darüber nachzudenken, was wir als nächstes tun wollen, basierend auf der Bedingung. Als wir die Seite zum ersten Mal fertig stellen und das sind die fertigen Projekte, fragten wir zuerst unseren Namen. Wir können dann unseren Namen eingeben und dann auf OK klicken. Dann gehen wir zu unserem nächsten Bildschirm, wo wir gefragt werden, ob wir mit unserem Namen in der Saite spielen möchten. Wenn wir absagen, bekommen wir ein Textil, vielleicht nächstes Mal. Allerdings, wenn wir das Spiel unter unserem Namen neu laden, klicken Sie auf OK, und dann sagen wir, möchten Sie spielen und klicken Sie auf OK. Dann werden wir gefragt, wer den Drachen verbeugen möchte. Wieder, wenn wir absagen, werden wir eine Nachricht von kommen zurück, wenn Sie mutig genug sind. Wenn wir jedoch das Spiel unter unserem Namen durchmachen und spielen, möchten Sie spielen? Ja. Möchtest du gegen einen Drachen kämpfen? Klicken Sie auf OK. Wir haben dann eine zufällige Chance, wo der Drache sein wird. Diesmal haben wir den Drachen besiegt, weil wir dies mit einer Zufallszahl vergleichen , die bestimmt, ob wir gewinnen oder verlieren. Es gibt eine 50-50 Chance, was diese Botschaft sein wird. Lassen Sie uns das noch mal gehen. Wenn wir uns bei unserem Namen auffrischen und dann durchklicken, heißt es diesmal, dass wir verloren haben. Sie können dies ausprobieren, wenn Sie sich wohl fühlen, dies zu tun, und ich würde Sie wirklich ermutigen, dies zu tun, wenn nicht nur, um etwas mehr Ãœbung zu bekommen. Das einzige, was wir noch nicht abgedeckt haben, ist die Generierung von Zufallszahlen, aber Sie können leicht die Steigung sehen, wenn Sie wollen. Sonst werde ich jetzt weitermachen und das bauen. Schließen wir das ab und gehen Sie dann zu den Starterdateien für das Drachenjägerspiel. Unten im Skript werde ich damit beginnen, eine Variable namens random zu erstellen, und das ist nur Abschnitt, den wir noch nicht behandelt haben. Um eine Zufallszahl zu generieren, verwenden wir mathematische Punkt zufällig, und dann die Klammern genau so, und dann lassen Sie uns ein Konsolenprotokoll für das Wort zufällig machen. Speichern und dann neu laden, und in der Tat ist, wenn Sie zu unserem Projekt gehen, öffnen Sie die Konsole, und es gibt unsere Zufallszahl. Wenn wir immer wieder erfrischend sind, erhalten wir jedes Mal unterschiedliche Werte. Eine Zufallszahl in Java-Skript ist standardmäßig zwischen Null oder eins. Null wird eingeschlossen, aber eine wurde nicht eingeschlossen, so dass dies mit dem höchsten Wert von 0.999 endet. Wenn Sie weiterhin aktualisieren, sehen wir keine Werte höher als eins. Um dies für uns einfach zu machen, werden wir eine Zufallszahl zwischen Null und 99 generieren. Um dies zu tun, können wir zuerst die Zufallszahl mit 100 multiplizieren, und dies wird uns eine Zahl geben, wenn wir aktualisieren, die zwischen Null und 99 liegt, aber mit vielen verschiedenen Dezimalstellen. Wenn wir wollen, dass dies eine ganze Zahl ist, können wir diese Zahl entweder auf- oder runter runden. Wir können die Zahl mit mathematischem Punktboden nach unten laufen, oder wenn wir die Zahl aufrunden wollen, können wir sagen, mathematischer Punkt ceil, kurz für die Decke ist, und dann umgibt den Rest unseres Codes in den Klammern. Nun, wenn wir speichern und dann neu laden, erhalten wir eine Zufallszahl, die gerundet wird. Jetzt haben wir uns um diese Zufallszahl gekümmert, und die Art und Weise, wie wir das verwenden werden, ist, werden wir überprüfen, ob diese Zahl weniger als 50 ist, wenn ja, sagen wir, dass Sie den Drachen besiegt haben, wenn die Zufallszahl über 50 ist, wird sagen, dass du verloren hast. Lasst uns wieder an die Arbeit mit diesem Spiel gehen. Wir können die console.log entfernen, und dann werden wir eine zweite Variable des Namens setzen, und dieser Name wird der Wert sein, der vom Benutzer innerhalb einer Eingabeaufforderung übergeben wird. Wie ist Ihr Name? Dies wird eine Eingabeaufforderung an den Benutzer hinzufügen, der nach dem Namen fragt, den wir eingeben können, und dieser Wert wird in dieser Variablen gespeichert. Als nächstes wollen oft eine neue Variable namens play erstellen, und dies ist für unseren zweiten Bildschirm, die eine Bestätigung sein wird. Innerhalb des Bestätigen können wir hallo sagen, ein Leerzeichen hinzufügen und dann den Namen des Benutzers hinzufügen. Dies ist ein Bildschirm, den Sie in der endgültigen Version gesehen haben. Zuallererst bekommen wir, wie heißt du? Wenn Sie Ihren Namen eingeben, können wir sagen, okay, und dieser Abschnitt hier ist derjenige, der in einem Spiel wiederherstellt. Also hallo Name, und dann die Textzeichenfolge von, möchten Sie spielen? Jetzt müssen wir einige bedingte Ãœberprüfungen durchführen. Zunächst werden wir überprüfen, ob der Benutzer Spiel ausgewählt hat. Wenn Spiel wahr ist, dann wollen wir etwas Code ausführen. Wenn der Benutzer hat sich entschieden, das Spiel zu spielen, würde dann eine neue Bestätigung erstellen, und dieses Mal werden wir die Frage stellen, möchten Sie einen Drachen kämpfen? Wenn wir zur fertigen Version gehen, nur hier, lasst uns neu laden, wie ist dein Name? Dann haben wir den Abschnitt, den Sie gerne spielen möchten? Wenn okay, ist dies ein Abschnitt, den du gerade erstellt hast und sagt, würdest du gerne gegen einen Drachen kämpfen? Wir müssen das in einer Variablen speichern. Ich werde meine Schlacht anrufen und sie ändern. Jetzt haben wir einen wahren oder falschen Wert innerhalb dieser Variablen namens Kampf. Wenn der Benutzer voran gehen und spielen will, können wir dann eine neue if-Anweisungen erstellen, und diesmal in einem Spiel verschachtelt. Wir werden sagen, wenn Kampf wahr ist, dann innen hier wollen wir eine Schlacht, oder wenn die Benutzer auf Abbrechen Kampf geklickt wird falsch sein, und dann müssen wir sonst Aussagen, so sagen wir nicht kämpfen. Lassen Sie uns zunächst mit der else-Aussage umgehen. Wenn der Benutzer hat sich entschieden, nicht zu kämpfen, wird einfach eine Warnung, und so Alarm kann sagen „Comeback, wenn Sie mutig genug sind“. Lassen Sie uns zuerst einen Test im Browser oder zu unseren Projekten geben. Lassen Sie uns auffrischen. Wie ist dein Name? Geben Sie das ein und wir sagen: „Hallo Chris, würdest du gerne spielen?“ Dies ist dieser Abschnitt hier, sagen, würden Sie gerne spielen? Wenn das Spiel wahr ist, haben wir dann gefragt : „Möchtest du den Drachen ballen', was du hier siehst? Denken Sie daran, dass wir keine Bedingung festgelegt haben Wenn dies noch wahr ist, haben wir nur die Bedingung festgelegt, wenn der Benutzer auf Abbrechen klickt. Wenn der Benutzer abbricht, sollten wir diese Nachricht hier erhalten. Versuchen wir es, und da bekommen wir „komm zurück, wenn du mutig genug bist“. Jetzt müssen wir die Bedingung behandeln, wenn der Benutzer auf „okay“ klickt. Lassen Sie uns eine Bedingung hinzufügen, ist der Benutzer entscheidet zu kämpfen. Bevor wir diese Zufallszahl zwischen Null und 99 einrichten und sie in einer Variablen namens Zufall speichern, jedes Mal, wenn wir eine Zufallszahl ausführen, können wir jedes Mal, wenn wir eine Zufallszahl ausführen, dann den ternären Operator verwenden, um zu überprüfen, ob dieser größer als 50 ist, wenn es können wir dann sagen: „Du hast den Drachen besiegt! 'wenn diese Zahl kleiner als 50' ist. Dann können wir sagen, dass du verloren hast. Speichern Sie das, und lassen Sie uns das mal ausprobieren. Geben Sie etwas hinein, „würde gerne spielen“? Ja. „Möchtest du kämpfen?“ Okay, und wir sehen keine Ergebnisse auf dem Bildschirm. Dies liegt daran, dass wir unseren ternären Operator erstellt haben, aber wir haben die Ergebnisse nicht auf dem Bildschirm angezeigt. Lassen Sie uns das Ergebnis auf eine Variable namens Ergebnisse setzen, und setzen Sie dies auf unseren ternären Operator. Dann direkt danach können wir eine console.log mit dem Wert der Ergebnisse machen, und in der Tat werden wir dies als Warnung ändern, genau wie der Rest. Speichern Sie, und dann über den Browser, „Wie ist Ihr Name?“. Möchtest du spielen? ' Ja, 'Möchtest du kämpfen? ' Ok. Also haben wir diese Zeit verloren, versuchen wir es noch einmal. „ Möchtest du spielen?“ Ja, und dieses Mal haben wir den Drachen besiegt, weil die Zufallszahl in über 50 sein muss, gut. Diejenigen, die die meisten der verwendeten Fälle hier behandelt haben, ist die verwendeten, um zu spielen, ist die verwendeten, um zu kämpfen. Der letzte Fall zu behandeln, ist, wenn der Benutzer überhaupt nicht spielen möchte. Wenn wir den Browser aktualisieren, diesmal, wenn wir unseren Namen eingeben, und klicken Sie auf OK. Wir wollen dann den Fall behandeln, wenn der Benutzer nicht spielen will, derzeit innerhalb des hier überprüfen wir, ob der Benutzer spielen will, und wenn sie dies tun, führen wir diesen Code aus. Stattdessen, wenn der Benutzer auf Abbrechen klickt, würde dann eine Warnmeldung sagen „vielleicht nächstes Mal“. Wir können dies als eine andere Aussage ganz unten tun, also sonst werden wir eine Warnung von „vielleicht nächstes Mal“ machen. Speichern Sie das und geben Sie uns einen Ausflug. „ Wie ist dein Name?“ Klicken Sie auf OK. „ Möchtest du spielen?“ Dieses Mal klicken wir auf Abbrechen, und die Nachricht vielleicht beim nächsten Mal. Großartig alles funktioniert jetzt, und hoffe, Sie genießen dieses Spiel spielen. Mach dir keine Sorgen, wenn es etwas war, das du nicht ganz schaffen konntest, es gibt eine ganze Menge, und jeder Schritt muss nur ein wenig darüber nachdenken, um zu entscheiden, was wir als nächstes tun werden. Hoffnung, alle freuen sich auf den nächsten Abschnitt und wir sehen uns dort. 12. DOM-Manipulation: Willkommen zurück. In diesem Video beginnt JavaScript wirklich interessant zu werden, indem das DOM manipuliert wird. Das DOM steht für das Document Object Model und ist eine baumartige Darstellung unserer Webdokumente. Es ist eine Schnittstelle, mit der Programmiersprachen auf den Inhalt und die Struktur zugreifen und aktualisieren können . Hier sehen wir die gleiche Struktur wie unsere Webseiten. Von oben haben wir das Dokument. Im Inneren befindet sich ein Wurzel-HTML-Element. Darunter haben wir den vertrauten Kopf und Körper. Dann folgen zum Beispiel unsere Elemente, Texte und Attribute. Das Tolle daran ist, dass es zwei Sprachen wie JavaScript verbinden kann , damit wir Dinge ändern können. Dies eröffnet viele Möglichkeiten, wie zum Beispiel die Möglichkeit, auf Elemente zuzugreifen, den Inhalt zu ändern, Attribute und Stile hinzuzufügen oder sogar Elemente zu erstellen und zu löschen. Es mag komplex klingen, aber es ist ziemlich einfach zu beginnen. Eine der einfachsten Möglichkeiten, das DOM zu manipulieren besteht darin, ein Element auf unserer Seite zu greifen und es zu ändern. Zum Beispiel die p-Elemente auswählen und dann den Text ändern. Lassen Sie uns zu unserem JavaScript-Starter gehen und öffnen Sie den DOM-Manipulationsbereich. Lassen Sie uns zu unseren JavaScript-Starterdateien gehen und zu unserer Nummer 10 gehen, die DOM-Manipulation ist. Drinnen brauchen wir zuerst etwas HTML, um voranzugehen und zu ändern. Innerhalb des Körpers öffnen und schließen wir die p-Elemente und fügen Sie dann Text innerhalb von hallo. Dann öffnen wir die span Elemente und fügen Sie dann den Text des Benutzers hinzu. Dies wird auf dem Bildschirm den Text von hallo Benutzer angezeigt. Wir müssen dann eine ID zu diesem Span-Element hinzufügen, damit wir es mit JavaScript greifen können. Nennen wir diese ID den Benutzernamen. Jetzt, wenn wir nach unten zu unserem Skript-Abschnitt scrollen , der direkt unten hier ist, können wir mit dem, was genannt wird, beginnen, erhalten Element für ID. Dies ist vorab selbstbeschreibend, dies greift ein Element nach der ID, wie zum Beispiel Benutzername. Zuerst greifen wir das Dokument. Dies ist das Dokumentobjekt, das im Grunde unsere Webseite ist. Denken Sie daran, das DOM steht für Document Object Model. Unsere baumartige Struktur ist ein Modell unserer Webseite. Nach der Auswahl dieser Dokumente können wir diese dann eingrenzen. In diesem Fall werden wir eine ID auf dem Dokument auswählen, wir werden Elemente nach ID erhalten. Innerhalb der Klammern können wir dann den Namen der ID hinzufügen, die wir auswählen würden. In unserem Fall ist es Benutzername. Fügen Sie am Ende ein Semikolon hinzu. Beachten Sie, wenn Sie Elemente nach ID eingeben, haben wir einen Großbuchstaben für jedes Wort nach get. Dies wird als Kamelgehäuse bezeichnet und es macht es besser lesbar, weil wir den Anfang jedes Wortes besser sehen können. Wenn wir das speichern und zum Browser gehen, sehen wir, dass sich nichts ändert. Dies liegt daran, dass wir das gewünschte Element ausgewählt haben, aber wir haben noch nichts damit gemacht. Wir können den Inhalt ändern, indem Sie den inneren HTML setzen. Kurz vor dem Semikolon fügen wir eine.innerHTML hinzu. Jetzt können wir dies auf einen Wert wie eine Zeichenfolge setzen. Lassen Sie uns sagen, Chris, halten Sie den Browser, neu laden und jetzt sehen wir den Text von, hallo Chris. Neben der Verwendung einer Textzeichenfolge für unser innerHTML können wir auch eine Variable verwenden. Wählen Sie eine Variable für unseren Namen festlegen. Var name entspricht einer Zeichenfolge von Chris. Dann anstatt unsere Zeichenfolge nur hier, können wir in unserem Variablennamen des Browsers übergeben und neu laden und wir sehen immer noch, dass unser Text von, hallo Chris, ist jetzt auf dem Bildschirm, aber dieses Mal mit einer Variablen. Wir können auch den Stil ändern, indem Sie einen der CSS-Werte ändern. Direkt darunter können wir auf die gleichen Elemente zugreifen, mit document.getElementById. Auch hier wollen wir den Benutzernamen, die Großbuchstabe N für den Namen und dann statt der Auswahl des inneren HTML, dieses Mal können wir den Stil einstellen und sagen wir die dunkle Farbe gleich einem Wert von rot sein. Dadurch wird die Textfarbe unseres Textes innerhalb der Spanne geändert. Speichern, aktualisieren und da ist unsere rote Farbe für das Wort Chris. Wir können jede CSS-Eigenschaft, die wir darin wollen, hier verwenden. Der einzige Unterschied ist, dass wir alle CSS-Eigenschaften, die mehrere Wörter haben, wie Hintergrundfarbe und Schriftgröße camel alle CSS-Eigenschaften, die mehrere Wörter haben, müssen. Oben in CSS würden wir normalerweise so etwas tun. Würde die Schriftgröße mit einem Bindestrich oder einem Bindestrich sagen, aber stattdessen , wenn Sie JavaScript verwenden, müssen wir auf dieses Kamelgehäuse beziehen, das wir gerade hier sehen. Anstatt einen Bindestrich verwenden wir einen Großbuchstaben wie diesen. Dann lassen Sie uns den Text auf einen Wert von 24 Pixel setzen. Lassen Sie uns das im Browser sehen und da gehen wir. Jetzt ist unser Text von Chris eine größere Schrift. Wir können auch eine Klasse anstelle dieser ID verwenden. Lassen Sie uns zu unserem p Element gehen und fügen Sie dann eine Klasse von, hallo. Dann können wir document.getElementByClassName verwenden. Lassen Sie uns einen neuen Abschnitt von GetElementByClassName hinzufügen. Dies funktioniert in ähnlicher Weise wie oben. Zuerst wählen wir das Dokument aus und schränken es dann mit dem Klassennamen ein. Erhalten Sie Elemente nach Klassennamen. Pass in den Namen unserer Klasse, die hallo war, die diesem Abschnitt gerade hier entspricht. Dann ein Semikolon am Ende. Beachten Sie hier, wenn Sie den Klassennamen verwenden, fügen wir ein s am Ende der Elemente hinzu. Dies liegt daran, dass wir mehrere Klassen auf unserer Seite haben können. Zum Beispiel könnten wir einen zweiten Satz von p-Elementen haben. Wenn wir voran gehen und einen zweiten Satz nur hier hinzufügen, und fügen Sie dann die gleiche Klasse von hallo. Jetzt fügen wir einen Text der Begrüßung zurück. Nun, wenn wir mehr als eine Klasse ausgewählt haben, wie wir es gerade hier tun, woher weiß ich, welche wir ändern? Nun, lassen Sie uns dies einer Variablen zuweisen und es dann der Konsole anzeigen. Nehmen wir an, die Variable des Tests entspricht unserer ersten Klasse. Dann in eine Konsole loggen Sie sich im Browser mit dem Wert von test. Zum Browser, klicken Sie mit der rechten Maustaste und überprüfen Sie. Innerhalb der Konsole sehen wir eine HTML-Sammlung mit zwei Elementen in den Klammern. Das ist wie ein Array, das wir bald abdecken werden. Diese beiden Elemente, unsere beiden Elemente mit der Klasse von hallo. Wenn Sie hier auf diesen Pfeil klicken, können wir diesen auch öffnen und mehr über den Inhalt erfahren. Wir sehen die ersten p-Elemente mit der Klasse von hallo hat eine Indexposition von Null. Dann hat unser zweiter eine Indexposition von eins. Wir können diese beiden Elemente durch diese Indexposition zugreifen. Innerhalb der Konsole, wenn wir Test sagen, was der Name unserer Variablen ist und dann innerhalb der eckigen Klammern, können wir auf jedes dieser Elemente durch die Indexnummer zugreifen. Beginnend mit Null, drücken Sie Enter, und es gibt unsere ersten p-Elemente, die unsere Texte von hallo Chris enthält. Dann können wir auf unseren zweiten Wert mit test1 zugreifen, drücken Sie Enter. Dies ist unser zweites Element mit dem Text Willkommen zurück. Diese Positionsnummer kann auch innerhalb unseres Selektors verwendet werden. In unserem Code werden wir alle Elemente mit dem Klassennamen Hallo greifen. Dann innerhalb der eckigen Klammern können wir dies auf unsere erste eingrenzen, die Position Null ist. Wir können alles tun, was wir zuvor gesehen haben. Diagramm, das in der style.color festgelegt ist, um einen Wert von lila zu sein. Speichern und dann neu laden. So ist das erste Element jetzt lila. Und natürlich können wir dies ändern, um eins zu sein, und das wird jetzt den Willkommenstext lila stattdessen. Als nächstes haben wir getElementsByTagName. Wie der Name schon sagt, können wir alle Elemente auf einer Seite nach dem Tag auswählen, wie unser p-Element für Text oder IMG für das Bild-Tag. Unten ganz unten, lassen Sie uns einen Kommentar von getElementsByTagName hinzufügen. Auch hier hat dies einen S2, da Sie mehr als ein Element auswählen können. Danach verwenden wir das document.getElementsByTagName, das gerade hier ist, die Klammern und dann innerhalb der Zitate können wir die Elemente hinzufügen, die wir auswählen möchten, lassen Sie uns alle p Elemente zuschneiden, und noch einmal, weil wir mehr als einen Satz von p-Elementen haben, müssen wir diese durch die Indexnummer greifen. Die erste ist Position Null, wir können den inneren HTML setzen und lassen Sie uns diesen String-Wert geändert setzen. Wenn wir das speichern und dann neu laden, haben wir jetzt unsere p-Elemente an der Indexposition Null geändert. Das nächste Werkzeug, das wir basierend auf dem QuerySelector betrachten werden. Dies ist genau wie der Selektor, den wir in CSS verwenden. Lassen Sie uns dies mit einem leeren Bild sehen, also bis zum HTML nach unseren beiden p-Elementen, fügen wir die IMG-Elemente hinzu. Wenn wir geben, dass speichern, das war der Browser, Sie sehen, dass wir kein Bild auf dem Bildschirm sehen weil wir noch nicht eine Quelle Attribute gesetzt haben. Lassen Sie uns die Quellattribute mit JavaScript hinzufügen. Zuerst können wir dieses Bild mit QuerySelector greifen, also ein Kommentar von QuerySelector. Dann verwenden wir document.QuerySelector und übergeben dann den Namen von IMG. Dies ist die gleiche Art und Weise, wie wir unser Bild in CSS auswählen würden. Wir können es auch mit der ID und Klassennamen auswählen, und wir werden einen Blick darauf werfen, dass in nur einem Moment. Mit QuerySelector haben wir immer noch Zugriff auf das innere HTML und auch das Hinzufügen von Stilen. Aber für dieses Beispiel werde ich Ihnen etwas Neues zeigen, und so fügen Sie ein Attribut hinzu. Das Attribut, das wir hinzufügen werden, ist die Bildquelle und wir tun dies, indem wir ing.setAttribute verwenden, innerhalb der Klammern gehen wir voran und fügen zwei Werte hinzu. Zuerst ist der Name des Attributs, das wir hinzufügen möchten, die Quelle ist, und dann durch ein Komma getrennt, und dann den Namen des Bildes dot.JPEG, können Sie jedes Bild Ihrer Wahl verwenden. Aber ich habe ein Bild in die Starterdatei hinzugefügt, die gerade hier ist. Ich werde das schließen, das Speichern geben und dann den Browser neu laden. Es gibt ein Bild, das jetzt auf dem Bildschirm ist. Wenn wir öffnen die Entwickler-Tools mit Rechtsklick und inspizieren und dann zu Elementen gehen. Wir können innerhalb der Entwickler-Tools sehen, wir haben unseren Körper Abschnitt, wir haben unsere p mit dem Text geändert, unser zweites p-Element, wir begrüßen zurück, und auch unser Bild mit der Quelle von image.JPEG. Das Endergebnis ist genau das gleiche, als würden wir dies in HTML eingeben, aber wir haben dies mit JavaScript hinzugefügt. Wir erwähnten, dass wir bei der Verwendung von Queryselector jedes Element auf die gleiche Weise auswählen können, wie wir es normalerweise in CSS tun würden. Neben dem Tag-Namen wie Bild können wir dieses Bild auch mit einer Klasse oder ID auswählen. Wenn wir eine ID zu diesem Bild des Bildes hinzufügen und dann nach unten scrollen, genau wie bei der Verwendung von CSS, müssen wir den Hash als Selektor und dann den ID-Namen verwenden, jetzt speichern und dann neu laden. Wir können sehen, dass dies immer noch funktioniert, aber dieses Mal mit der ID. Das gleiche für die Klasse, es ändert die Registerkarte Bild, eine Klasse von Bild. Dieses Mal, genau wie bei der Auswahl dieses in CSS, müssen wir einen Punkt als Präfix verwenden, und dies sollte immer noch im Browser funktionieren. Schließlich ist etwas Ähnliches QuerySelectorAll; QuerySelector, den wir gerade angesehen haben, wählt nur die ersten übereinstimmenden Elemente auf der Seite aus, QuerySelectorAll hingegen gibt eine Liste aller übereinstimmenden -Elemente. Wir können dies sehen, indem wir ein zweites Bild in unserem HTML hinzufügen. Kopieren Sie diesen Abschnitt hier und fügen Sie ihn unten mit demselben Klassennamen ein. Wenn wir das speichern und dann aktualisieren, sehen wir immer noch dieses nur ein Bild auf dem Bildschirm. Dies liegt daran QuerySelector nur die ersten Elemente auf der Seite auswählt. Wenn wir jedoch fortfahren und QuerySelectorAll hinzufügen, die so aussieht und dann document.QuerySelectorAll tun, wird dies voran gehen und eine Liste beider Bilder zurückgeben. Lassen Sie uns zuerst die Klasse des Bildes markieren, und dann fügen wir die eckigen Klammern hinzu, dann können wir unsere Indexnummer übergeben. Genau wie zuvor ist die Indexnummer von Null das erste Bild auf unserer Seite. Wenn ich diesen QuerySelector einfach auskommentieren könnte. Jetzt haben wir unser erstes Bild ausgewählt, wir können dann setAttributes verwenden, wie wir gerade angesehen haben, dann übergeben Sie jetzt den ersten Wert, der die Quelle ist, und die zweite, die image.JPEG ist, so wird dies den ersten Wert auswählen, wie mit einem Bild auf dem Bildschirm. Wenn wir das Bild jedoch zweimal hinzufügen möchten, könnten wir diese Codezeile hier kopieren und dann in einer weiteren Zeit einfügen. Aber dieses Mal, wählen Sie den Indexwert von eins und jetzt haben wir zwei Bilder auf dem Bildschirm. Auswahl von zwei Elementen wie diesem wäre besser mit der Schleife gemacht, aber wir werden bald in diesem Kurs in Schleifen geraten. Zu verstehen, wie man das DOM manipuliert, ist etwas wirklich Wichtiges zu wissen, und hier beginnt JavaScript wirklich interessant zu werden. Jetzt wissen wir, wie man Elemente auswählt, es ist jetzt Zeit, weiterzumachen. Als nächstes lernen wir alles über das Hinzufügen und Entfernen von Elementen mit JavaScript. 13. Elemente mit Javascript hinzufügen und entfernen: Wir haben gerade untersucht, wie wir JavaScript verwenden können, um Elemente in unserem DOM zu manipulieren, wie das Ändern des Textes, Hinzufügen von Attributen und das Festlegen von Stilen. Wir werden behandeln, wie man tatsächlich neue Elemente erstellt, und auch, wie man sie entfernt. Gehen wir zu unseren Starter-Akten. Wir werden in Nummer 11 beginnen, die Elemente mit JavaScript hinzufügt und entfernt und auch diese im Browser geöffnet haben. Wir können in unseren Starter-Dateien sehen wir eine ungeordnete Liste, mit den zwei ListItems von Äpfeln und Birnen, die wir gerade hier haben. Beginnen wir im Skriptabschnitt. Wir werden uns ansehen, was Document.write genannt wird. Document.write ist eine Möglichkeit, eine Textzeichenfolge auf eine Seite zu setzen. Document.write, und dann innerhalb der Klammern können wir eine Textzeichenfolge, wie Dokument schreiben Text hinzufügen . Wenn wir das speichern und den Browser neu laden, wird dieser Text nun neben unserer ungeordneten Liste angezeigt. Document.write dient zum Hinzufügen einer einfachen Textzeichenfolge zu einer Seite. Dies wird häufig für Testzwecke verwendet, kann jedoch bei falscher Verwendung Probleme verursachen. Wenn Sie beispielsweise zu google.com gehen und dann die Konsole öffnen, klicken Sie mit der rechten Maustaste und überprüfen. Im Inneren hier, wenn wir eine document.write, und dann übergeben in einer Textzeichenfolge, wie hallo, drücken Sie Enter, und wir sehen, die Google-Homepage wurde mit unserem Dokument ersetzt schreiben. Beim Schreiben von Dokumenten wird der gesamte vorhandene Inhalt außer Kraft gesetzt, wenn die Seite bereits geladen ist. Wir müssen sehr vorsichtig sein, wenn wir das verwenden. Sie werden oben in der Startvorlage sehen, haben wir unsere ungeordnete Liste, die gerade hier ist. Dies ist eine Liste, mit der wir arbeiten können, indem Sie einige ListItems mit JavaScript hinzufügen und entfernen. Wenn wir ein neues Element auf der Seite mit JavaScript erstellen möchten, können wir die createElement Methode verwenden. Lassen Sie uns dieses document.write entfernen, und dann innen hier können wir das document.createElement tun. Lassen Sie uns eine Variable erstellen, um die Szene namens ListItem zu speichern, und setzen Sie dies auf document.createElement. Genau so. Wieder, mit dem Kamelgehäuse, genau wie wir es vorher gesehen haben. Innerhalb der Klammern können wir als String übergeben, den Namen der Elemente, die wir erstellen möchten, wie ein ListItem. Jeder Element-Tag-Name kann hinzugefügt werden, z. B. ein div- oder p-Element. dies erstellen, wird nichts von sich aus tun, denn obwohl wir es erstellt haben, gibt es immer noch keinen Text in den Elementen. Wir können Text mit der CreateText.method hinzufügen. Lassen Sie uns einfach einige Kommentare hinzufügen, Element erstellen. Dann nach hier werden wir den TextNode erstellen. Wir können dies auch innerhalb einer Variablen namens ItemText speichern. Dies entspricht Document.CreateTextNode. Dann können Sie in der Klammer die Textzeichenfolge übergeben, die wir hinzufügen möchten. bleibe bei den Früchten, werde ich den Wert von Bananen hinzufügen. Wenn wir das speichern und dann den Browser neu laden, gehe ich zu unserer Indexseite, wir sehen immer noch keine zusätzlichen Elemente auf dem Bildschirm, denn obwohl wir unsere Elemente haben, die wir hier erstellt haben, und auch unseren Text, den wir hier haben, wir haben diesen Text noch nicht zum Inhalt dieser Elemente hinzugefügt. Wir können dies mit der appendChild -Methode tun. Lassen Sie uns Text zu Element hinzufügen. Lasst uns zunächst unser ListItem schnappen, das gerade hier ist. Wir sagen ListItem.appendChild. Das Kind, das wir anhängen möchten, ist dieser Text nur hier. Fügen Sie diese in die Klammer ein, speichern Sie sie, und laden Sie sie dann erneut. Wir sehen die Elemente immer noch nicht auf dem Bildschirm. Mal sehen, was mit dem Konsolenprotokoll los ist. Das ist Konsolenprotokoll, der Wert unseres ListItem. Sie zur Konsole mit der rechten Maustaste auf Inspect. Wir sehen, dass wir unser Element erstellt haben. Wir haben unser Öffnen und Schließen ListItem, und dann den Text von Bananen als Kind. Der letzte Schritt besteht darin, erneut appendChild zu verwenden, um dieses neue Element zu dieser bestehenden Liste hinzuzufügen, die gerade hier ist. Diese vorhandene Liste hat eine ID der Liste. Lasst uns zuerst das packen und es in einer Variablen speichern. Unten unten wählen wir die übergeordnete Liste aus. Installieren Sie dies in einer Variablen namens Liste. Wir wissen, wie das geht, es ist document.getElementById. Die ID, die wir hier gegeben haben, ist List. Dann werden wir am Ende ein Semikolon hinzufügen, um dies in dieser Variablen zu speichern. wir haben die übergeordnete Liste, und wir haben das Kind, das wir hinzufügen möchten. Wir können voran gehen und diese jetzt hinzufügen. Fügen Sie neues ListItem zur Liste hinzu. Wir tun dies, wir list.appendChild, die wir zuvor gesehen haben, und das Element, das wir hinzufügen möchten, ist das ListItem. Fügen Sie am Ende ein Semikolon hinzu. Wir laden den Browser und da gehen wir, da gibt es unsere Bananen als neues ListItem. Nur um zusammenzufassen, was wir hier tun, greifen wir die vollständige Liste und speichern sie in einer Variablen. Wir fügen dann in diese Liste, das Kind, das ist dieses neue ListItem. Sie fragen sich vielleicht, warum all dies tun, anstatt nur einen neuen ListItem-Look in den HTML-Code einzugeben. Nun, es gibt viele Fälle, in denen wir dies mit JavaScript tun wollen. In einer to do App zum Beispiel, jedes Mal, wenn der Benutzer ein neues zu tun Element eingibt, könnte dies der Liste hinzugefügt werden, genau wie wir es hier getan haben. Oder zum Beispiel, in einem anderen Kurs, den ich habe, bauen wir eine Musik-Player-Anwendung, in der wir eine Liste von Songs erstellen. Weiter, neben dem Hinzufügen von Artikeln zu unserer Liste, können wir auch alle vorhandenen Artikel ersetzen, die wir bereits haben. Wenn wir zum Beispiel diese Birnen ListItem durch etwas anderes ersetzen wollten , könnten wir dies auch tun. Lassen Sie uns zunächst ein neues ListItem namens Trauben erstellen. Also lassen Sie uns Trauben erstellen ListItem. Wir tun dies genau wie zuvor, wir können eine neue Variable namens new ListItem erstellen, und dann setzen Sie dies auf document.createElement, das Element, das wir erstellen möchten, ist ein ListItem. Dann, wie wir es vorher gesehen haben, können wir auch unseren TextNode erstellen. Sagen wir NewitemText. Dies ist genau das gleiche wie das, was wir zuvor gemacht haben, als wir ein ListItem erstellt haben. Dann unser TextNode, Bananen. Aber dieses Mal werden wir Trauben erzeugen. Dies ist gleich document.createTextNode, Text der Trauben, Semikolon am Ende. Dann müssen wir diesen Text zu diesem Artikel hinzufügen. Wir sagen NewListItem und fügen dann das Kind des neuen Elementtextes an. Genau so. Ich habe hier ein NewListItem, das wir hier zugreifen. Wir fügen dann das untergeordnete Element hinzu, das ist ein neuer Elementtext, der der TextNode der Trauben ist. wir haben dieses NewListItem. Wir können dies verwenden, um alle ListItems zu ersetzen, die wir bereits haben. Wie wir bereits erwähnt haben, möchte ich Birnen auswählen, was die Indexposition eines ist. Unten unten, lassen Sie uns eine Variable namens item zu ersetzen erstellen, und dann document.querySelectorAll. Wir holen uns die ListItems. Dann ist der Artikel, den wir wollen, unsere Indexposition 1. Wir haben unseren Artikel, den wir hinzufügen möchten, und auch den Artikel, den wir ersetzen möchten. Wir können jetzt voran gehen und ersetzen Kind verwenden, um dies zu vervollständigen. Kurz nach hier, lassen Sie uns unsere List.ReplaceChild auswählen. ReplaceChild nimmt zwei Werte an, der erste wird unser neues ListItem sein, das ein neues Element ist. Dann durch ein Komma getrennt, fügen wir das Element hinzu, das wir ersetzen möchten, das wir hier in dieser Variablen gespeichert haben. Fügen Sie das gleiche wie unser zweiter Wert hinzu, speichern Sie diesen und laden Sie dann erneut. Gut zu wissen, dass unser zweiter Artikel jetzt Trauben ist, anstatt das, was wir ursprünglich hatten, nämlich Birnen. Wenn wir schließlich ein Element vollständig entfernen wollten, anstatt es durch etwas anderes zu ersetzen, können wir auch die removeChild -Methode verwenden. Das ist ziemlich unkompliziert zu tun. Gehen wir zurück in unser Drehbuch. Nehmen wir an, entfernen Sie einen Artikel. Lasst uns unsere Liste schnappen. Dann verwenden wir.removeChild. Innerhalb der Klammern müssen wir nur das Kind hinzufügen, das wir entfernen möchten. Wenn wir unsere Trauben entfernen wollten, die in NewListItem gespeichert ist, fügen wir dies einfach als Wert hinzu, speichern und dann neu laden. Der Wert der Trauben wurde von unserer Liste entfernt. Wenn Sie diese Elemente entfernen, müssen wir immer zuerst das Muster angeben, das ist unsere Liste hier. Entfernen Sie dann eines der untergeordneten Elemente, wie folgt, anstatt direkt auf die Elemente zuzugreifen, die Sie entfernen möchten. Wir wissen jetzt, wie Elemente mit JavaScript hinzugefügt, entfernt und aktualisiert werden. Nun gehen wir zum nächsten Video über. 14. Zeit zum Ãœben: Elemente mit Javascript hinzufügen: Wir haben einige Möglichkeiten zum Hinzufügen, Aktualisieren und Entfernen von Elementen aus dem DOM behandelt . Der beste Weg für all das zu halten ist, etwas Ãœbung auf eigene Faust zu machen , ohne mit mir zu folgen. In dieser Herausforderung möchte ich, dass Sie einige Elemente mit JavaScript erstellen. Es muss nicht zu komplex sein. So etwas, wie du hier siehst, ist in Ordnung. Mit etwas Text oben auf der Seite gefolgt von einem Bild. Diese können in einem Container platziert werden und dann dem Bild und dem Text als untergeordnete Elemente hinzugefügt werden. Außerdem müssen Sie die Image-Sauce und alle Attribute zur Verwendung von Java-Skripten hinzufügen. Recovered muss dies in einem DOM-Manipulationsvideo tun. Wenn Sie auf die Starterdatei auf der Nummer 12 gehen, Zeit zum Ãœben. Hier im Inneren finden Sie einen grundlegenden Code, um Ihnen den Einstieg zu erleichtern. Alles, was wir tun müssen, ist eine JavaScript-Version dieses HTML-Codes zu erstellen, den wir hier sehen. Viel Glück damit. Sobald Sie fertig sind, gehen wir zu JavaScript-Funktionen über. 15. Javascript-Funktionen: Wir werden jetzt auf die Verwendung von JavaScript-Funktionen schauen. Funktionen sind wirklich wichtig und sie gehen davon aus, FIN, die Sie viel verwenden, wenn Sie mit JavaScript oder Programmierung im Allgemeinen arbeiten. Eine Funktion ist ein Block oder ein Codeausschnitt , den wir bei Bedarf aufrufen können. Sie können es sich als eine Aufgabe oder eine Reihe von Aufgaben vorstellen, die in dieser Funktion enthalten sind. Wir können diese Funktion dann jedes Mal aufrufen, wenn wir den Code innerhalb ausführen möchten. Diese Funktionen sind auch wiederverwendbar. Wir haben Code, den Sie mehrmals wiederholen möchten, können wir einen Code in eine Funktion verpacken. Lassen Sie uns in unseren Funktionen Starterdatei beginnen, die Sie geöffnet haben, ist die Seitenleiste Nummer 13. Dann bis zu unseren Skripten haben wir ein leeres Skript, mit dem wir anfangen können. Wir definieren eine Funktion mit dem Funktionsschlüsselwort, gefolgt von dem Namen, den wir ihm geben möchten, wie hallo. Dieser Name liegt ganz bei uns, aber versuchen Sie, etwas beschreibendes zu wählen. Dann fügen wir später die Klammern hinzu, die auch als Klammern bezeichnet werden. Dann fügen wir danach eine Reihe von geschweiften Klammern hinzu, und ich möchte Enter drücken. Dann können wir innerhalb dieser geschweiften Klammern den Code hinzufügen, den Sie ausführen möchten, einen, den wir eine Funktion nennen. Für ein einfaches Beispiel können wir einfach eine Warnung hinzufügen. Dann im Inneren von hier, nur ein Text von hi von der Funktion. Wir können innerhalb dieser Funktion so viele Codezeilen hinzufügen, wie wir wollen, obwohl es oft gut ist, die Funktion nicht zu überladen und sie einfach zu behalten, um verwandte Aufgabe zu warnen. Dieser Abschnitt hier wird bis jetzt nichts tun, da wir nur diese Funktion deklariert haben. diesem Grund wird es manchmal als Funktionsdeklaration oder Funktionsdefinition bezeichnet. Um diesen Code tatsächlich auszuführen, möchten wir diesen durch den Funktionsnamen von hi aufrufen, gefolgt von den Klammern und dem Semikolon. Dies wird oft aufgerufen, eine Funktion aufzurufen. Nun, wenn wir speichern und dann im Browser öffnen, erhalten wir jetzt unseren Code von innen laufen, was unsere Warnung von hi von der Funktion ist. Wir können diese Funktion auch so oft aufrufen, wie wir wollen, indem wir denselben Funktionscode wiederholen. Wenn wir dies kopieren und unten einfügen, sollten wir jetzt das Warnproblem zweimal sehen. Sagt unser erstes, klickt auf OK, und dann unsere zweite Warnung kurz danach. Diese Funktion kann beliebige Codes enthalten, die wir mögen. Wenn wir nach oben gingen und ein leeres div hinzugefügt haben. All die Tatsache wird für die p-Elemente gehen und wir werden dies leer halten, fügen Sie zuerst eine ID von Texten hinzu. Wir könnten diese Funktion verwenden, um voranzugehen und den inneren HTML-Code unserer Textelemente hier zu ändern . Unten im Funktionskörper wissen wir, wie man dies mit einem Dokument Punkt get element by id macht. Die ID ist Text, den wir hier haben. Dann können wir den inneren HTML aller p Elemente setzen, um eine Textzeichenfolge von Texten aus der Funktion mit einem Semikolon am Ende zu sein . Nun, wenn wir einen dieser Funktionsaufrufe entfernen, speichern, und dann über im Browser erhalten wir unsere Warnung, und dann unseren Text aus der Funktion. Diese Art von Funktion wird als Namensfunktion bezeichnet, einfach weil wir einen Namen hinzufügen, genau wie wir es hier getan haben. Es gibt auch eine anonyme Funktion. Hier geben wir den funktionalen Namen nicht an, stattdessen können wir diese Funktion einer Variablen zuweisen. Wir können den Namen entfernen und nur diese Klammern kurz nach der Funktion halten, und dann können wir eine Variable hinzufügen. Lassen Sie uns dies die anonyme Funktion nennen, und setzen Sie den Wert gleich dieser Funktion hier. Wir können es dann mit seinem Namen der anonymen Funktion aufrufen, also ersetzen Sie hi durch diese, gefolgt von den Klammern, neu laden und ihre ist unsere Warnung und auch die Texte von der Funktion funktionieren noch. Beide Wege werden eine ähnliche Sache tun, indem der Code in diesen Klammern gerade hier ausgeführt wird. Es gibt jedoch einen Unterschied, und wir werden uns ansehen, was das beim Heben gesehen wird, aber jetzt gehen wir zum nächsten Video über, einen Blick auf Funktionsargumente. 16. Funktionsargumente: Wenn wir in die Startdatei für dieses Video gehen, das Funktionsargumente ist, das Funktionsargumente ist,haben wir hier unsere p Elemente aus dem letzten Video, mit der Idee von Text. Dann wird eine einfache benannte Funktion, die den inneren HTML setzen wird, textuelle Funktion sein. Im letzten Video haben wir einige grundlegende Funktionsverwendungen gesehen. Funktionen können jedoch noch nützlicher werden, wenn wir einige Daten übergeben. Wir können diese Daten beim Aufruf der Funktion übergeben, indem wir einige Werte innerhalb dieser Klammern hier hinzufügen. Diese Werte werden an die Funktion übergeben werden Argumente genannt Wenn wir also einen Namen übergeben wollen, könnten wir es einfach so tun. Jetzt hat die Funktion Zugriff auf diese Argumente, indem wir den Namen, über den wir verweisen möchten, innerhalb dieser Funktion Klammern übergeben. Also fügen Sie Name in einem hier hinzu, und dieser Name hier wirkt wie eine Variable. Wir können Referenzen innerhalb der Funktion, der Name geben diese Daten innerhalb ist ein hier wird ein Parameter genannt. Jetzt können wir diesen Namen innerhalb unserer Funktion verwenden, in irgendeiner Weise, die Sie wählen. Zum Beispiel können wir es verwenden, um den inneren HTML anstelle von Texten aus der Funktion zu setzen, ich sollte Hallo sagen, und dann anderen Variablennamen am Ende. Wenn wir das speichern, haben wir jetzt den Wert von hi Chris, und Chris waren die Argumente, die übergeben werden. Wir können auch mehrere Argumente übergeben, zum Beispiel, wenn die Aufgabe dieser Funktion war, eine Berechnung durchzuführen, wie zum Beispiel das Multiplizieren von zwei Zahlen. Lassen Sie uns dies ändern, um multipliziert zu werden, und auch den Funktionsaufruf. Nehmen wir an, wir wollten zwei Zahlen übergeben, anstatt eine Zeichenfolge. Gehen wir für 23, und 15. Wir können dann unsere Parameter hier im Inneren benennen. Gehen wir für Nummer eins und Nummer zwei. Dann können wir unsere p-Elemente hier aktualisieren, mit den Werten der Zahl 1 multipliziert mit der Zahl 2. Also geben Sie das ein Speichern, und dann in den Browser. Wir erhalten jetzt den Wert von 345. Wenn wir einen Fehler machen würden, wie zum Beispiel nur in eines dieser Argumente übergeben, sagen wir 23, neu laden. Wir erhalten den Wert von nicht einer Zahl, weil die Funktion immer noch versucht, unsere beiden Werte zusammen zu multiplizieren. Wenn wir jedoch nur einen Wert übergeben, und wir brauchen hier nur einen Wert, neu laden, erhalten wir immer noch den Wert von 23. Obwohl wir jedoch nicht unseren zweiten Wert übergeben haben, der Nummer 2 ist. Also, wenn dessen Ausgabe, der Wert von Nummer 2, speichern Sie dies, neu laden, werden wir den Wert von undefined erhalten. Es wird also keine größeren Probleme verursachen, wie zum Beispiel unsere Website Crushing. Es bedeutet nur, dass eine Funktion ihre Arbeit nicht ohne alle Daten erledigen kann, in denen sie benötigt werden. Alternativ können wir auch das Rückgabe-Schlüsselwort verwenden, um den Wert nach der Berechnung zurückzugeben. Dies kann nützlich sein, wenn Sie einen Wert, z. B. in einer Variablen, für die zukünftige Verwendung speichern möchten. Also zuerst gehen wir zurück zu unserer Funktion und fügen Sie unsere zweiten Argumente hinzu. Dann, anstatt das DOM ohne get-Element byId zu aktualisieren, würde dies nicht auskommentieren. Stattdessen können wir die Berechnung der Zahl 1 multipliziert mit der Zahl 2 Semikolon am Ende zurückgeben . Nun, wenn wir geben, dass eine speichern und dann den Browser neu laden, sehen wir, dass das DOM nicht aktualisiert wurde. Stattdessen wird nun dieser Wert zurückgegeben. Wir können es in einer Variablen für die zukünftige Verwendung speichern. Wir können dies unten unten tun, von Kunst in einer Variablen namens Summe, und sicherlich ist es für unseren Funktionsaufruf. Dann können wir überprüfen, dass dies funktioniert, indem wir ein Konsolenprotokoll machen und den Wert von einigen einloggen, Variable der Summe hier hinzufügen, die Konsole öffnen und es gibt unseren Rückgabewert von 345. Jetzt haben Sie dies im Inneren gespeichert, und es liegt jetzt an uns, was wir tun wollen, was Rückgabewert ist. Das Hinzufügen von Argumenten ist eine gute Möglichkeit, die Fähigkeit einer Funktion zu erweitern. Als nächstes werden wir uns zwei wichtige JavaScript-Konzepte mit dem Namen Scope und Hebeing ansehen. 17. Umfang und Hebung: Wir werden nun zwei wichtige Dinge betrachten, die bei der Verwendung von JavaScript zu verstehen sind, und dies wird Scope und Hebeing genannt. Beginnen Sie mit dem Umfang und erlauben Sie dies bezieht sich auf unsere Variablen. Wir betrachten jetzt diese Begriffe, weil sie viel mit Funktionen zu tun haben. Scope bestimmt grundsätzlich, wo wir Zugriff auf unsere Variablen haben. Zuerst gehen wir zu unserem Starterprojekt und in den Bereich Scope und Hebezeuge. Hier unten haben wir eine Multiplikationsfunktion, die wir vorher gesehen haben. Multiplizieren der Werte in Nummer eins und Nummer zwei. Ebenso wie das letzte Video haben wir unsere leeren p Elemente, um die Ergebnisse im Browser anzuzeigen. Dieses Mal, anstatt Nummer eins und Nummer zwei als Argument an die Funktion zu übergeben, können wir voran gehen und diese Variablen deklarieren. Nehmen wir an, var num eins ist gleich fünf, und dann ist var num zwei gleich 10, wenn wir das speichern. Nun sollten diese beiden Werte multipliziert werden, die wir hier haben und dann in unseren p Elementen angezeigt werden. Nachladen. Da ist unser Wert von 50 auf dem Bildschirm. Dies funktioniert in Ordnung, weil die Variablen, die wir deklariert haben, außerhalb eines Dysfunktionskörpers deklariert wurden. Dies bedeutet, dass diese Variablen global sind und alle einen globalen Gültigkeitsbereich haben. Globale Variablen können überall in unserem Code zugegriffen werden. Zum Beispiel wird hier innerhalb der Funktion auf unsere Variable zugegriffen. Aber wir können auch außerhalb der Funktion darauf zugreifen , was wir mit einem Konsolenprotokoll sehen konnten. Sie waren Konsolenprotokoll außerhalb des Funktionskörpers der Wert einer dieser Variablen. Speichern Sie das und laden Sie es dann neu. Wir können sehen, dass Sie nicht nur Zugriff auf die Variablen innerhalb der Funktion haben, wir können auch außerhalb der Funktion auf diese zugreifen, was wir hier mit dem Konsolenprotokoll sagen. Wenn wir jedoch diese beiden Variablen hier greifen und sie dann ausschneiden und sie dann in unseren Funktionskörper einfügen. Gibt uns speichern, nachladen. So sehen wir nun, dass auf unsere Variablen innerhalb der Funktion zugegriffen werden kann. Aber wir sehen, dass unser Konsolenprotokoll ausgelöst wird und Fehler. Dies liegt daran, dass wir diese beiden Variablen in Seite dieses Funktionskörpers verschoben haben. Dies bedeutet, dass sie jetzt lokalen Geltungsbereich und nicht global haben. Lokaler Bereich bedeutet, dass auf diese Variablen nur lokal innerhalb der Funktion zugegriffen werden kann , die dort deklariert wurden. diesem Grund werde ich Element nach ID aktualisieren. Sowohl unser Konsolenprotokoll, das sich außerhalb der Funktion befindet, wird jetzt ausgelöst und Fehler. Wir können dies beweisen, indem wir dieses Konsolenprotokoll innerhalb der Funktion verschieben. Lassen Sie uns dies innerhalb der geschweiften Klammern der Funktion bewegen. Dann rüber zum Browser. Nun hat auch das Konsolenprotokoll Zugriff auf diese lokalen Variablen. So funktioniert der Bereich, es geht darum, wo wir alle Variablen deklarieren. Denken Sie also daran, dass sie außerhalb einer Funktion deklariert werden, bedeutet, dass sie global sind und überall darauf zugegriffen werden kann. Variablen, die innerhalb einer Funktion deklariert sind, haben nur lokalen Bereich und können nur innerhalb der Funktion zugegriffen werden. Als nächstes haben wir noch eine dieser Worte, die Sie über das hissen hören werden. Heben bedeutet im Grunde, dass JavaScript Ihre Variablen und Funktionen an den Anfang des aktuellen Bereichs bewegt oder hebt. Sie werden nicht physisch nach oben verschoben, obwohl es tatsächlich im Speicher gespeichert ist, so dass das jederzeit im Skript verwendet werden kann. Dies verursacht einige Verhaltensweisen, die wir vielleicht nicht erwarten. Lassen Sie uns zu unserem Beispiel von vorher gehen und sehen Sie sich dies genauer an. Also zu unserer Funktion. Also zuerst deklarieren wir unsere Funktion nur hier und dann darunter wird weitergehen und unsere Funktion aufrufen, um sie auszuführen. Wir würden erwarten, dass diese Funktion funktioniert, weil der Browser weiß, dass wir diese Funktion zuerst deklariert haben und dann die folgende aufgerufen hat. Unser Code wird von oben nach unten gelesen. Aber was, wenn wir die Funktion zuerst aufgerufen haben, bevor wir sie deklarieren. Also, wenn eine Stimmung multiplizieren, sollte die Spitze öffnen und daher die Funktion aufrufen, bevor wir es tatsächlich deklarieren. Lass uns das retten und sehen, was passiert. Wir sehen immer noch Dinge funktionieren, denn wie wir bereits gesagt haben, sind Funktionen Variablen, die im Speicher gespeichert sind. Wenn diese Funktion nur hier aufgerufen wird, weiß der Browser oder der Interpreter bereits, dass sie existiert. Als wir uns vor ein paar Videos Funktionen angesehen haben, haben wir uns zwei verschiedene Typen angesehen. Dieser Typ, den Sie hier sehen, die eine benannte Funktion ist, und auch eine anonyme Funktion, die keinen Namen hat. Denk dran, es sieht so aus. Also, wenn wir den Namen entfernen und ihn dann in einer Variablen namens anonyme Funktion installieren und dies auf alle Funktionen gleich hier setzen. Wenn wir diese Funktion unten aufrufen. Also ändern Sie multipliziert, um anonyme Funktion zu sein. Bewegen Sie das dann nach unten. Speichern und dann neu laden. Wir sehen, dass alles noch einwandfrei funktioniert. Wir erwähnten auch beim Betrachten anonymer Funktionen vor ein paar Videos, dass es einen Unterschied zwischen anonymen Funktionen und benannten Funktionen gibt. Während der Unterschied seltsame anonyme Funktionen beim ersten Aufruf besteht, führt dies zu einem Fehler. Wenn Sie also diese anonyme Funktion verschieben, rufen Sie zurück an den Anfang des Browsers und laden Sie sie neu. Wir sehen jetzt einen Fehler in der Konsole und die Nische funktioniert nicht mehr. Dies ist also ein Unterschied zwischen den beiden Funktionstypen. Anonyme Funktionen werden nicht gehisst oder im Speicher gespeichert, aber sie sind benannte Funktionsdeklarationen, die wir zuerst gesehen haben, gehisst. Das Heben geschieht auch mit Variablen. Werfen wir einen Blick darauf, wenn wir diese Funktion auskommentieren und sich anVisual Studio-Code erinnern, Visual Studio-Code erinnern, dies ist Befehl oder Steuerung mit einem Schrägstrich. Dann, wenn wir eine Variable von x zu 10 deklarieren. Dann ist die zweite Variable von y gleich fünf. Dann lassen Sie uns diese beiden Werte von x und y alarmieren. Also lassen Sie uns x und y hinzufügen und diese durch eine Zeichenfolge trennen. Lassen Sie uns das hier ein Pfeifensymbol hinzufügen. Wenn wir das speichern und dann den Browser neu laden, erhalten wir jetzt unsere Warnung von 10 und dann fünf. Das ist also das Verhalten, das wir erwarten würden. Wir haben eine Variable von x und y deklariert und diese dann auf dem Bildschirm gewarnt. Das ist also alles erwartete Verhalten. Aber was würde stattdessen passieren, wenn wir die Warnung über unsere Variable von y verschieben, speichern wir diese und überprüfen Sie dies im Browser. Laden Sie neu, und wir erhalten den Wert von 10, dann y ist undefiniert. Also haben wir gesagt, bevor die Variablen gehisst werden. Wir würden also erwarten, dass die Werte von x und y sowohl im Speicher gespeichert sind als auch verfügbar sind, wenn wir diese Warnung aufrufen. Aber das passiert nicht. Es gibt also eine Sache, die man sich bewusst sein muss. Obwohl diese Variablen im Speicher gespeichert sind, wird nur die Dekoration, wie die Variable von x und die Variable y, wie die Variable von x und die Variable y,im Speicher gespeichert, anstatt der tatsächliche Wert, den wir ihm von fünf und auch 10 zugewiesen. Um dies klarer zu sehen, gehen wir in unser Beispiel. Diese erste Variable ist die Initialisierung, das bedeutet, dass wir eine Variable von x deklarieren und dieser Variablen den Wert 10 zuweisen. Eine Deklaration, auf der anderen Seite, ist, wenn wir nur einen Variablennamen deklarieren, ohne einen Wert zuzuweisen, wie dieser hier, also ist dies die Deklaration. Jetzt kennen wir den Unterschied zwischen der Initialisierung und der Deklaration. Warum sollte das für unseren Code wichtig sein? Nun, wenn eine dieser Variablen angehoben wird, sogar diejenigen, bei denen wir einen Anfangswert wie diesen setzen, wird nur die Deklaration im Speicher gespeichert. diesem Grund wird unsere Variable von y, die hier haben wird, als undefiniert angezeigt. Die Variable von y wird tatsächlich gehisst oder im Speicher gespeichert. Der Browser ist sich also bewusst, dass sie existieren, aber er ist sich des Anfangswerts, den wir auf fünf gesetzt haben, nicht bewusst. Daher, warum wir den Wert von undefined erhalten. Das mag also alles ein wenig komplex erscheinen, wenn dies für Sie neu ist, aber so wird der Code gelesen. Es ist also wirklich wichtig zu verstehen, um Fehler oder erwartetes Verhalten zu vermeiden. Eine der Dinge, die Sie davon nehmen müssen, besteht darin, Ihre Variablen immer oben im Bereich zu deklarieren. Das heißt, wenn die Variablen lokal sind, die wir in der Funktion hier hatten, sie oben im Funktionskörper platzieren oder wenn wir wollen, dass unsere Variablen global sind, sollten wir sie oben in unseren Skripten setzen. Lassen Sie uns also unsere x und y bis an den Anfang der Skripte verschieben, lassen Sie uns dies über unsere Warnungen von vorher hinzufügen. Wir können dies auch auf unseren Wert von fünf setzen, gibt uns speichern und aktualisieren. Jetzt haben wir kein Problem, da unsere Variablen jetzt an der Spitze des aktuellen Bereichs gesetzt sind. Also sollten Sie diese sogar ganz oben oder zumindest über dem Code setzen , auf den Sie in unserem Fall zugreifen, die Warnung. Dadurch wird sichergestellt, dass unser Code in ähnlicher Weise geschrieben wird, in der er gelesen wird und möglicherweise unerwartete Verhaltensweisen vermieden werden. 18. Pfeilfunktionen: Wie die meisten Programmiersprachen entwickelt sich JavaScript im Laufe der Zeit, und dies kann ändern oder neue Funktionen und Syntax hinzufügen. JavaScript basiert auf einer Skriptsprache namens ECMA Scripts, die darauf abzielt, die Implementierung von JavaScript zu standardisieren. Deshalb werden Sie oft hören, wie JavaScript-Versionen als Dinge wie ES5, ES6 oder ES7 bezeichnet werden. ES5 oder ECMA script version five ist eine Version, die derzeit vollständig in allen Browsern implementiert ist , ohne dass Werkzeuge benötigt werden. Um die Dinge noch weiter zu verwirren, werden Sie auch hören, dass sie als das Jahr jeder Veröffentlichung bezeichnet werden. ES6 kam im Jahr 2015 heraus, so dass Sie vielleicht auch hören, dass dies namens ES 2015. Während wir diesen Kurs durchlaufen, verwenden wir moderne Funktionen oder Syntax aus der ES6-Spezifikation und höher. Dies bedeutet nur eine modernere Art, JavaScript oder eine neuere Funktion zu schreiben. Beginnend, in diesem Video werden wir uns die ES6-Pfeilfunktion ansehen. Eine Pfeilfunktion ist eine Möglichkeit, eine Funktion zu schreiben, die Sie bereits gesehen haben, aber mit einer kürzeren, saubereren Syntax. Wenn wir zu den Startdateien in den Pfeilfunktionen gehen, wenn wir nach unten scrollen, sehen wir die Werte von Nummer eins und Nummer zwei multipliziert innerhalb einer anonymen Funktion, die wir gerade hier sehen. Eine ES6-Pfeilfunktion ermöglicht es uns, den gleichen Code innerhalb dieser geschweiften Klammern auszuführen, aber mit einer kürzeren Syntax. So können wir immer noch unsere Variable der anonymen Funktion behalten, aber anstatt die Wortfunktion zu haben, können wir einfach die Klammern wie folgt verwenden, und dann das Gleichheits- und Größer-als-Symbol und den ganzen Rest des Codes innerhalb der geschweiften Klammern bleibt einfach gleich. Wenn wir dies speichern und dann neu laden, sehen wir immer noch den Wert von 50 im Browser. Sie können oft hören, dass dies auch eine fette Pfeilfunktion genannt wird, weil die Syntax mit diesem Gleichheitssymbol und den rechtwinkligen Klammern aussieht. Diese Klammern oder Klammern, die wir hier haben, können immer noch alle Parameter und Argumente aufnehmen, wie wir es bereits gesehen haben. Also, wenn wir unsere beiden Variablen hier oben löschen und stattdessen diese als Argumente übergeben. Also lassen Sie uns eine Zahl, eins, und dann num, zwei hinzufügen . Wir können dann diese Werte als Argumente übergeben, wenn wir die Funktion aufrufen. Also 5 und 10, speichern, und dann über zum Browser. Dies funktioniert immer noch genau so wie zuvor. Wenn wir nur ein Argument zu übergeben haben, können wir diese Syntax noch weiter zeigen, indem wir die Klammern vollständig entfernen. Also, wenn wir nur eine Zahl übergeben wollten, wie fünf, zwei unserer zweiten Parameter hier. Wir können auch die Klammern oder die Klammern entfernen und einfach unseren Parameternamen innerhalb von hier lassen und dann, um Fehler zu vermeiden, entfernen wir einfach diese Nummer zwei von hier, laden Sie den Browser neu, und jetzt erhalten wir den Wert von fünf. Dies ist also jetzt eine kürzere, sauberere Syntax, und so werden wir während dieses Kurses Funktionen für einen Großteil des restlichen Codes schreiben . Das ist also alles großartig und funktioniert jetzt gut, und so können wir eine ES6-Pfeilfunktion verwenden. 19. Javascript-Events: Jetzt ist es an der Zeit, einen weiteren wichtigen Teil des Aufbaus von Websites zu betrachten, und das sind JavaScript-Ereignisse. Ereignisse werden in vielerlei Hinsicht ausgelöst, wenn auf eine Schaltfläche geklickt wird, kann dies ein Ereignis auslösen, wenn eine Maus über ein Element schwebt, dies kann auch ein Ereignis auslösen, auch wenn die Seite zum ersten Mal geladen wird, Dies kann ein onload-Ereignis auslösen. Wir können dann entscheiden, was wir tun wollen, wenn diese Ereignisse geschehen. Zum Beispiel könnten wir eine Funktion ausführen, wenn auf eine Schaltfläche geklickt wird, oder wir könnten die Farbe eines Elements ändern, wenn eine Maus über sie schwebt. Hier auf der W3 Schools Website unter den HTML DOM Events gibt es eine riesige Liste von Ereignissen, auf die wir hören können, wenn wir nach unten scrollen würden. Zuallererst haben wir die Maus-Ereignisse, also haben wir onclick, wir haben onmouseleave, onmouseenter, onmouseover, out und up. Weiter unten haben wir auch Tastaturereignisse, die ausgelöst werden, wenn verschiedene Tasten gedrückt werden. Zum Beispiel können wir ein Ereignis auslösen, wenn die Tastatur-Taste nach oben oder unten gedrückt wird und es so ziemlich jede Art von Ereignis gibt, um uns für so ziemlich alles zu decken, was auf einer Webseite passieren kann, einschließlich Formulare hier, können wir entscheiden, was möchten wir mit Dingen wie onchange, onsearch oder onsubmit tun, was zu tun ist, wenn das Formular gesendet wurde. Es gibt auch Drag Events, Zwischenablage Ereignisse und so viele mehr. Wir werden einige davon während dieses Videos verwenden und gibt uns so viele Optionen, auf die wir innerhalb unseres Codes reagieren können. Wenn wir zu den Starter-Dateien gehen, können wir voran gehen und uns einige Beispiele ansehen. Gehen Sie zu der JavaScript-Ereignisdatei, und lassen Sie uns dann innerhalb unseres Beispiels beginnen. Hier haben wir einen einfachen Text innerhalb eines P-Elements und dann innerhalb des Skripts haben wir eine Pfeilfunktion. Im Inneren haben wir gerade den Stil der Schriftgröße auf 34 Pixel geändert und dann diese Funktion ausgeführt. Wir werden zum Browser gehen und neu laden. Dies ist der Text, den wir haben, nachdem der Stil angewendet wurde. Derzeit rufen wir unsere Funktion innerhalb des Skripts auf, das gerade hier ist. Wenn Sie möchten, dass diese Funktion nur ausgeführt wird, wenn etwas passiert, z. B. wenn ein Benutzer die Maus über den Text bewegt, können wir diese Funktion in ein Ereignis aufgerufene hinzufügen. Innerhalb des P-Elements nur hier innerhalb des offenen Inneren werden wir onmouseover hinzufügen, und dies ist der Name eines der Ereignisse, die wir zuvor gesehen haben , und dann können wir dies gleich dem Namen unserer Funktion setzen, die ChangeFontSize und fügen Sie dann die Räumlichkeiten kurz danach hinzu. Dadurch wird diese Funktion jedes Mal ausgeführt, wenn sich die Maus über diesen Text befindet. Dann lassen Sie uns diese Funktion direkt nach unten auskommentieren, speichern und dann über den Browser, starrt unsere Standardgröße Text und jetzt, wenn Sie mit der Maus über bewegen, sehen wir jetzt, der Text wurde auf 34 Pixel erhöht. Wir können jedes Ereignis wählen, das wir diese Funktion auslösen möchten, wie onclick. Lassen Sie uns onmouseover ändern, um onclick zu sein, laden Sie den Browser neu, und wenn Sie dann auf den Text klicken, wird die Funktion jetzt aufgerufen. Dinge wie Onclick- und Maus-Events sind wirklich üblich und wir werden sie viel sehen. Es gibt auch einige ungewöhnliche, die Sie aus der Liste vorher sehen können, z. B. wenn der Benutzer versucht, etwas von der Seite zu kopieren. Fügen wir Oncopy hinzu, und dann können wir das auskommentieren, und dann etwas tun, um uns eine Warnung zu zeigen, und eine Nachricht, dass aufhören, meine Sachen zu kopieren, einfach so und dann speichern. Wenn wir nun mit der rechten Maustaste klicken und dann kopieren, sehen wir nun die Nachricht auf dem Bildschirm. Schrägstrich entfernen Sie diese Warnung von hier und setzen Sie diese wieder ein. Wir können sogar Code ausführen, wenn die Seite mit onload geladen wurde. Wir können das im Inneren des Körpers tun. Lassen Sie uns in das öffnende Tag gehen und dann onload hinzufügen. hier anstatt die Funktion aufzurufen, werde ich nur etwas JavaScript anwenden, um auszuführen. Lassen Sie uns dieses Dokument.getElementById kopieren, nur bis zu dort und dann können wir in unserem JavaScript innerhalb der Zitate einfügen. Wir greifen dieses Textelement. Dann lassen Sie uns den inneren HTML-Code ändern, um unsere Textzeichenfolge geändert zu sein. Jetzt retten wir das. Sobald die Seite geladen wurde, überschreibt dies den zu ändernden Text. Diese Methode der Behandlung von Ereignissen innerhalb eines HTML-Elements, wie wir es mit diesen beiden Beispielen getan haben, wird Inline-Ereignishandler genannt, obwohl dieser Code funktioniert, wird es als schlechte Praxis angesehen, solche Dinge zu tun. Es ist besser, HTML und JavaScript getrennt zu halten, sogar das JavaScript in eine separate Datei zu platzieren und das ist, was wir bald in diesem Kurs betrachten werden. Lassen Sie uns voran und entfernen Sie die Ereignishandler aus dem HTML. Zuerst die aus dem Körperteil, vor allem alles von innen hier und auch die Oncopy von hier, dann können wir alles in unseren Skripten Abschnitt verschieben. Beginnen wir mit dem Zugriff auf alle P-Elemente hier und speichern sie in einer Variablen. Nehmen wir an, var TextElement und set ist auf, document.querySelector. Ich werde unsere P-Elemente mit dem P-Tag auswählen. Wir können dann einen Ereignis-Listener an dieses Textelement anhängen. Add, texteElement und then.addEventListener. Innerhalb der Klammern nimmt dieser Ereignis-Listener zwei Werte ein. Erstens ist die Art von Ereignissen, auf die wir hören wollen. Sagen wir, klicken Sie. Dieser Name ist im Allgemeinen wie die, die wir zuvor gesehen haben , ohne das Wort davor, also anstatt onclick , den wir zuvor verwendet haben, verwenden wir einfach click. Auch onmouseover wäre nur Mouseover. Der zweite Wert oder der zweite Parameter durch Komma getrennt, ist die Funktion, die wir ausführen möchten. Fügen wir unsere anonyme Funktion hier, die Klammern hinzu und öffnen und schließen Sie dann die geschweiften Klammern. Setzen Sie ein Semikolon am Ende. Innerhalb dieses Funktionskörpers können wir dann Code ausführen. Lassen Sie uns diesen Abschnitt von vorher kopieren und in der Tat können wir diese Funktion entfernen, wir brauchen diese nicht mehr. Lassen Sie uns das alles entfernen. Dann innerhalb dieser anonymen Funktion können wir dies dann einfügen, und denken Sie daran, dass dies derjenige ist, der die Schriftgröße auf 34 Pixel ändert. Geben Sie das ein Speichern und dann neu laden, da ist unser Text. Sobald wir darauf klicken, wird es jetzt auf 34 Pixel erhöht. Denken Sie daran, dass dies eine anonyme Funktion ist, da wir dieser Funktion keinen Namen geben können, sie wird einfach ausgeführt, wenn das Ereignis ausgelöst wird. Dies kann auch mit der Pfeilfunktionssyntax, die nachgeschlagen wird, verkürzt werden. Wenn wir das Funktionsschlüsselwort entfernen und dann den Pfeil erst danach hinzufügen, gleich ist und dann das größte Symbol. Ãœberprüfen Sie, ob dies in Ordnung ist, indem Sie auf den Text klicken. Verwendung dieses Add-Ereignis-Listener wäre auch nützlich, wenn Sie nicht nur auf einer Seite alle P-Elemente auf einer Seite hören möchten . Um dies zu tun, müssten wir alle durchlaufen und wir werden Schleifen im nächsten Abschnitt abdecken, oder wenn wir dieser Funktion einen Namen geben wollten, damit wir anderswo wiederverwenden können, können wir von hier aus ausschneiden und eine separate Funktion erstellen das liegt daran, dass es ein bisschen kleiner ist, also passt alles auf eine Zeile. Dann gehe ich voran und kopiere von dieser schließenden Klammer hier bis zum Anfang dieser Funktion Klammern. In der Tat werden wir diesen anderen Ort schneiden, dann darüber können wir unsere Funktion erstellen. Geben Sie diesem einen Namen, var ChangeFontSize, genau wie folgt. Dann können wir dies gleich der Funktion setzen, die kopiert wurde und dies ein wenig ausräumen. Jetzt haben wir unsere separate Funktion, die jetzt in sich geschlossen ist und im Wert der Schriftgröße ändern gespeichert ist. Anstatt dies als zweites Argument zu haben, können wir jetzt einfach diesen Variablennamen einfügen und der Code sollte genau gleich funktionieren. Aktualisieren, klicken Sie auf den Text und die Funktion funktioniert noch. Obwohl wir es jetzt in eine eigene Variable platziert haben, bedeutet dies auch, dass verschiedene Teile unseres Codes diese Funktion immer noch ausführen können , indem sie hier auf diesen Namen zugreifen. Beachten Sie, als wir die Funktion gerade hier aufgerufen haben, haben wir die Räumlichkeiten erst danach nicht so hinzugefügt. Dies liegt daran, dass unsere [unhörbar] die Funktion sofort ausführen wird. Es wird nicht zuerst auf den Ereignishandler warten. Lassen Sie uns diese einfach hinzufügen, speichern und aktualisieren und wir können sehen, der Text ist sofort 34 Pixel, noch bevor wir auf den kleineren Text geklickt haben. Lassen Sie uns diese jetzt aus diesem Beispiel entfernen und dies sagen. Das ist es, jetzt für unseren ersten Blick von Ereignissen, sie sind wirklich nützlich und etwas, das wir viel verwenden werden, wenn wir mit JavaScript arbeiten. Wir werden uns die Ereignisse im nächsten Video ansehen, wo wir uns das Eventobjekt ansehen. 20. Das Event-Objekt: Sie sollten jetzt verstehen, was Ereignisse sind und was wir mit ihnen tun können. Es gibt auch einige zusätzliche Informationen, die an den Ereignishandler übergeben werden , der als Ereignisobjekt bezeichnet wird. Diese Informationen sind alles über die Ereignisse wie: welche Art von Ereignis es war, welches Element ausgelöst wurde, und viele weitere Informationen, die wir jetzt betrachten werden. Wenn wir zu unseren Starter-Dateien für die Event-Objekte gehen, haben wir im Inneren von hier unsere Texte und so ziemlich das gleiche Beispiel aus dem letzten Video. Wir haben einen EventListener, der einmal geklickt hat, werden wir dann die FontSize ändern, indem wir diese Funktion hier ausführen. Also innerhalb der Klammern für diese Funktion, die dieser Abschnitt hier ist, können wir einen Parameter wie diesen hinzufügen. Dies kann ein beliebiger Name Ihrer Wahl sein, aber es wird oft Ereignis oder e kurz genannt, weil es die Informationen enthält, die ihm über unsere Veranstaltungen übergeben werden. Sie können sich dies als eine Variable vorstellen, die diese Informationen enthält, aber welche Informationen werden an sie weitergegeben? Nun, lassen Sie uns in unsere Funktion gehen und ein Konsolenprotokoll machen. Wir können einen Blick werfen. Console.log den Wert von e. Speichern Sie diesen und öffnen Sie diese dann im Browser. Klicken Sie mit der rechten Maustaste und Inspect, und gehen Sie dann in unsere Konsole. diese nun geöffnet wird, wenn wir diese Funktion durch Klicken auf unseren Text auslösen, würden wir nun einige Informationen in der Konsole sehen. Lasst uns das öffnen und sehen, was es enthält. Wenn wir nach unten scrollen, können wir sehen, dass es eine große Menge an Informationen gibt , die an den Ereignishandler übergeben wird. Meistens werden Sie nie wirklich verwenden, aber wir können einige Informationen über die Ereignisse sehen. Wir sehen, es ist ein MouseEvents. Wir sehen, an welcher Position auf dem Bildschirm das MouseEvent mit den x- und y-Koordinaten ausgelöst wurde. Wir werfen einen Blick auf diese x- und y-Positionen in nur einem Augenblick. Denn jetzt, wenn wir noch weiter nach unten zu dem Ziel scrollen, das gerade hier ist, können wir sehen, dass es einen Verweis auf das Objekt gibt, das die Ereignisse ausgelöst hat. In unserem Fall sind es die p-Elemente mit der ID des Textes. Wir können das besser sehen, wenn wir zum Browser gehen. Anstatt nur e zu protokollieren, können wir „e.target“ refresh auswählen, unsere Ereignisse auslösen. Es gibt unser Ereignisziel, das sind die p-Elemente mit der ID von Texten. Wir können jedes Stück dieser Informationen innerhalb unseres Codes verwenden. Wenn wir zum Beispiel zur Konsole zurückkehren, melden Sie sich die vollständigen Ereignisse an und aktualisieren Sie sie. Wir haben bereits erwähnt, dass wir einige Mauspositionen haben, die ClientX und ClientY sind. Dies ist die x- und y-Position, an der wir auf diesen Text geklickt haben. Wir können nun voran gehen und die Mausposition über unsere Elemente verfolgen , indem wir diese Clients verwenden: X und Y. Zurück zu unserer Funktion. Lassen Sie uns dieses Document.getElementById geändert, um den Stil zu ändern. Stattdessen können wir das innerHTML der p-Elemente so ändern dass es dem Ereignis entspricht, auf das Sie mit e.clientX zugreifen, das ist der x-Wert der Maus. Dann fügen wir ein break-Element hinzu, um den y-Wert in einer separaten Zeile hinzuzufügen, und wir werden y mit e.clienty zugreifen. Wir fügen am Ende ein Semikolon hinzu. Wenn wir unter unserer Funktion zum EventListener gehen, anstatt auf einen Klick Ereignisse zu hören, können wir für die Mouseover Ereignisse hören. Dies führt dazu, dass die Ereignisse jedes Mal ausgelöst werden, wenn die Maus über die p Elemente bewegt, die dann die Werte von x und y anzeigen. Speichern Sie das und gehen Sie dann zum Browser, wir können in der Tat schließen Sie die Konsole nach unten. Dann jedes Mal, wenn wir die Maus über die p-Elemente bewegen, können wir sehen, dass die x- und y-Koordinaten jedes Mal aktualisiert werden. Auf diese Weise können wir die Ereignisobjekte verwenden, um einige zusätzliche Informationen über das Ereignis zu erhalten. Wie Sie sehen können, gibt es viele Informationen, die an uns weitergegeben werden, auf die wir Zugriff haben. Als nächstes werden wir uns ansehen, wie wir unseren Code besser lesbar und organisiert machen können , indem wir unser JavaScript in separate Dateien verschieben. 21. Externes Javascript: Alles in den JavaScript-Starterdateien gibt es einen Ordner, wenn Sie in das Menü namens externes JavaScript gehen. Wenn Sie diese Indexpunkt-HTML-Seite öffnen, ist es der gleiche Code, mit dem wir das letzte Video beendet haben. Was wir in diesem Video tun werden, ist das JavaScript aus dieser HTML-Datei zu nehmen und es in eine eigene separate Datei zu platzieren. Wie das, was wir früher mit CSS gemacht haben. Zuerst müssen wir zu unserem Projektordner gehen und eine Datei erstellen , um dies mit der Erweiterung dot js hinzuzufügen. Innerhalb dieser externen JavaScript-Datei, klicken Sie auf das neue Dateisymbol, und wir können dies alles nennen, was wir wollen. Ich möchte diese Skripte dot js nennen. Dann müssen wir den Inhalt des Skripts für Index Punkt HTML ausschneiden und dann in diese neue Datei einfügen. Zurück zum Index und scrollen Sie dann nach unten zu unserem Skript-Abschnitt. Lassen Sie uns dies ein wenig kleiner machen, nur für jetzt und dann, wenn wir alle Inhalte unserer Skripte schneiden , die in diesen beiden Tags an Ort und Stelle bleiben. Fügen Sie dies zurück in unsere Skripte dot js-Datei und geben Sie diesem eine speichern. Gut. Das JavaScript befindet sich jetzt in seiner separaten Datei, damit die Dinge funktionieren. Wir müssen diese Datei immer noch auf der Indexseite mit dem Quellattribut verknüpfen. Zurück zum Index. Lassen Sie uns einfach die Skript-Tags zusammen verschieben. Dann gehen wir weiter und fügen Sie die Quellattribute hinzu. Dies wird ein relativer Pfad zu unseren Skripten dot js-Datei, die Skriptdatei, und auch diese Index-Seite sind in der gleichen Ordnerebene. Wir können einfach Skripte dot js hinzufügen. Wenn wir das speichern und dann zum Browser gehen, neu laden, und jetzt funktioniert unser Code immer noch. Jedes Mal, wenn wir uns bewegen, würden dp-Elemente jetzt einen aktualisierten x- und y-Wert für die Maus erhalten. Viele der Vorteile externer JavaScript-Dateien ähneln externen CSS-Dateien. Erstens haben wir das separate HTML, CSS und JavaScript, wodurch unser Code besser organisiert, lesbar und wartbar ist. Auch mit separatem JavaScript in einer eigenen Datei wird es uns ermöglichen, es in mehreren HTML-Dateien zu verwenden. Wenn wir nur das JavaScript in den Skriptdateien wie zuvor belassen, kann es nur in dieser einzigen Datei verwendet werden. Wir können auch mehrere JavaScript-Dateien zu HTML-Seite zwei hinzufügen alles, was wir tun müssen, ist weitere Skript-Tags mit dem Quellattribut für jede Datei hinzuzufügen. Als nächstes werden wir das, was wir in diesem Abschnitt gelernt haben, in die Praxis umsetzen , indem wir einen Rechner erstellen, um Pixelwerte in em zu konvertieren. 22. Zeit zum Ãœben: Pixel-zu-Em-Konverter: Jetzt haben Sie die Chance, das, was wir bisher in diesem Kurs gelernt haben, in die Praxis umzusetzen. Wir werden einen Rechner erstellen, der Pixelwerte umwandelt, um em zu sein. Denken Sie daran, dass em eine relative Größe ist, die auf dem übergeordneten Container basiert. Zum Beispiel, in Pixeln, wenn der übergeordnete Container 20 Pixel war und wir innerhalb zu 18 Pixel erkennen möchten, können wir auf konvertieren klicken und dann, wenn es den Wert auf 0,9 em gesetzt. Alles, was Sie brauchen, um diesen Rechner zu bauen, haben Sie bisher in diesem Kurs gelernt. Es sollte keine Ãœberraschungen werfen und wenn wir zu den Starter-Dateien gehen, und wenn wir über 20 gehen, das ist der Pixel zu em Rechner und wenn Sie zur script.js gehen, haben wir die Berechnung an der Spitze. Um die em-Größe zu erhalten, teilen wir die erforderliche Pixelgröße durch die übergeordnete Pixelgröße und dies ist die Konvertierung, die Sie benötigen, um diese Arbeit zu machen. Wenn wir auf die Indexseite gehen, Ihnen bereits alle Stile und das Mark-up zur Verfügung gestellt, die Sie benötigen, um loszulegen. Alles, was Sie tun müssen, befindet sich in der JavaScript-Datei. Wir können voran gehen und uns auf das Hinzufügen von JavaScript konzentrieren. Kann ein wenig komplex aussehen, aber alles, was wir tun müssen, ist, diese Berechnung zu erhalten, die Werte für alle Eltern und auch die erforderliche Größe zu erfassen und diese Berechnung durchzuführen, wenn auf diese Schaltfläche geklickt wird. Viel Glück damit, geben Sie das gut, und ich sehe Sie im nächsten Video, wo wir durch meine Lösung gehen. 23. Lösung: Pixel-zu-Em-Konverter: Willkommen zurück. Ich hoffe, Sie haben es geschafft, Ihren Rechner zum Laufen zu bringen, oder zumindest geben Sie ihm einen guten Weg. Ich werde jetzt voran gehen und Ihnen zeigen, wie ich meine Version gemacht habe. Es ist vielleicht ein anderer Ansatz, wie Sie Ihre gemacht haben, aber solange es funktioniert, ist es in Ordnung. Es gibt in der Regel mehr als eine Möglichkeit, Dinge zu tun. All das CSS und HTML, wie Sie hier sehen können, wurde für uns in den Startdateien gesorgt. Alles, was wir tun müssen, ist auf die script.js zu gehen und anfangen, innerhalb von hier zu arbeiten. Lassen Sie uns voran und erstellen Sie eine Funktion, um diese Berechnung durchzuführen. Ich werde meins berechnen aufrufen und dies auf ar Funktion setzen. Im Inneren von hier werde ich beginnen, indem ich die Werte der Eltern und erforderlich. Das ist diese Box hier und diese hier, und dann speichern Sie sie in der Seite von Variablen. Die Variable des übergeordneten Werts. Verteilen Sie documents.getElementsById und die Id, die wir greifen möchten. Wenn wir einen Blick auf die Indexseite werfen, gibt es diese übergeordnete Eingabe hier mit der ID, wenn Eltern. Dann hat die zweite Eingabe han ID von erforderlich und wir werden dies in nur einem Moment verwenden. Fügen wir hier die Eltern hinzu. Wir können dann den Wert mit Punktewert greifen, und dann könnten wir das gleiche für den erforderlichen Wert tun. Erforderliche var ist gleich documents.getElementById. Denken Sie daran, dass die ID, die wir uns vorher angesehen haben, erforderlich war, und dann wieder können wir den Wert mit Punktwert greifen. Jetzt greifen wir die beiden Werte der beiden Eingabefelder. Die dritte Variable, die ich erstellen möchte, ist für die Ausgabe, und das ist das Ergebnis, das Sie hier sehen. Dies ist das p-Element, das die Ergebnisse jedes Mal erhalten wird , wenn wir die Berechnung durchführen. Lassen Sie uns dies mit der ID der Ergebnisse beschneiden und speichern Sie es dann in einer Variablen. Var Ergebnisse gleich document.getsElementById, und die Elemente werden Ergebnisse haben, und wir können dies einfach für jetzt speichern. Jetzt wollen wir diese Berechnung durchführen. Jedes Mal, wenn der Benutzer auf diesen Convert-Button klickt, wenn wir zum Index von HTML zurückkehren, ist dieser Button nur hier. Wir können diese Schaltfläche mit einem Abfrage-Selektor greifen und dann einen Ereignis-Listener für jeden Klick hinzufügen, um dann fortzufahren und diese Berechnung durchzuführen. Die Schaltfläche wird in einer Variablen namens btn installiert werden , und dann document.querySelector. Schnappen Sie sich unsere Taste und drücken Sie dann btn und wir können fortfahren und den EventListener hinzufügen. Innerhalb der Klammern können wir zwei Werte hinzufügen. Der erste ist Klick und dies ist der Typ des Ereignisses, auf den Sie hören möchten. Sobald die Schaltfläche geklickt wird, wollen wir dann weitermachen und diese Funktion hier ausführen. Fügen wir dies als unser zweiter Wert hinzu, um zu überprüfen, dass dies in Ordnung ist, wir können dann ein Konsolenprotokoll innerhalb der Funktion machen, und dann können wir unsere beiden Werte des übergeordneten Wertes und des erforderlichen Wertes protokollieren. Status. Ãœberprüfen Sie diese Zeile, okay, also parentValue und dann leere Leerzeichen und dann den erforderlichen Wert. Speichern Sie diese im Browser, und öffnen Sie dann die Konsole. Wir werden einfach zuerst auf Konvertieren klicken, und wir sollten nichts in der Konsole sehen , da wir die Werte dieser beiden Eingaben ausgeben. Lassen Sie uns etwas passen hier hinzufügen, 20 und 16 Konvertierte, und so gehen wir. Da sind unsere beiden Werte drin. Der einfache Weg, dieses Ergebnis hier zu aktualisieren, besteht darin, diese Ergebnisvariable hier zu greifen und die innerHTML als Ergebnisse dieser Berechnung festzulegen , die ein requiredValue geteilt durch den ParentValue ist. Lasst uns das mal ausprobieren. Wenn wir sagen, Ergebnisse Punkt innerHTML ist gleich dem requiredvalue dividiert durch den ParentValue des Browsers, und das ist Werte in hier konvertiert und wir erhalten den Wert von 0.6 es wird diese auf beide 20 setzen, sollten wir den Wert von 1 M erhalten. Dies ist eine unkomplizierte Art, Dinge zu tun. Allerdings, wenn wir aktualisieren und nur einen Wert an Ort und Stelle klicken konvertiert, wir sehen, dass wir die Nachricht von Unendlichkeit erhalten, oder wenn wir einfach auf Konvertieren ohne irgendwelche Werte an Ort und Stelle klicken, werden wir keine Zahl bekommen. Wir wollen uns vor leeren Feldern schützen, die in diesen Bereichen resultieren. Wir können dies tun, indem wir eine if else Anweisungen innerhalb dieser Berechnung hinzufügen. Darunter können wir sagen, ob wir ein Ausrufezeichen und dann ParentValue hinzufügen können. Wenn der ParentValue leer ist, und denken Sie daran, dass die Pipe für alle ist oder der erforderliche Wert leer ist. Also jedes dieser Felder ist leer, würde dann eine Warnung für den Benutzer erstellen wollen nur mit einer einfachen Nachricht „Bitte füllen Sie alle Felder aus“. Genau so, und dann können wir auch eine else-Anweisung hinzufügen. Diese else-Anweisung wird also ausgeführt, wenn alle Felder beantwortet wurden. Wenn dies der Fall ist, möchten wir diese Ergebnisse erfassen. HTML und gehen Sie voran und führen Sie diesen Code und lassen Sie uns einen Sprung in den Browser geben. Wenn Sie nun auf Konvertiert klicken, sehen Sie die Meldung „Bitte füllen Sie alle Felder aus“. Versuchen wir mal eins davon. Wird immer noch die gleiche Nachricht bekommen, und dann, wenn wir die Berechnung versuchen, scheint alles in Ordnung zu funktionieren. Okay, so habe ich dieses Projekt abgeschlossen. Denken Sie daran, wenn Ihre ein wenig anders aussieht, solange es funktioniert, ist alles in Ordnung. Dies ist nun das Ende des Abschnitts alles über DOM (Document Object Model) Manipulationen, Funktionen und Ereignisse. Wenn einige Dinge für dich immer noch verwirrend sind, mach dir keine Sorgen zu viel. Jeder lernt in unterschiedlichem Tempo und es gibt hier viel zu nehmen, wenn Sie neu sind. Denken Sie daran, dass eine Menge von dem, was wir in diesem Abschnitt gelernt haben, noch viele Male wiederholt werden , während Sie diesen Kurs durchlaufen. Sie werden immer noch viel mehr Ãœbung bekommen oder diese Techniken verwenden. Ich werde Sie jetzt im nächsten Abschnitt sehen, in dem wir Schleifen, Arrays und Objekte behandeln werden. 24. Javascript-Array: Lassen Sie uns diesen neuen Abschnitt starten, indem Sie sich JavaScript-Arrays ansehen. Wir haben bereits viel Ãœbung beim Schreiben von Variablen gehabt , die, wie wir wissen, einen einzelnen Wert speichern. Arrays speichern auch Werte, genau wie eine Variable, aber wir können mehrere hinzufügen. Rüber zur Arrays Starterdatei, die gerade hier ist. Wir können ein Array wie eine normale Variable starten. Bis zum Skript können wir das Schlüsselwort var verwenden und dann einen Namen festlegen , den Sie für unser Array festlegen möchten. Genau wie eine Variable können wir auch unsere Werte setzen, aber wir können mehrere durch Kommas getrennt innerhalb der eckigen Klammern setzen. Sagen wir einen Schnitt, ein Komma, eine Schnur von Hund, ein Komma und gehen wir für einen Tiger mit einem Semikolon am Ende. Lassen Sie uns dies nun mit einer Warnung ausgeben. Sagen wir, wachsam. In dieser Alarmstufe können wir unsere Tierwelt alarmieren. Nehmen wir an, unsere Warnung innerhalb des Browsers neu zu laden. Es gibt unsere drei Artikel, die in unserem Array sind. Oder wir können dies auf ein Element ausgeben, genau wie wir es bereits gesehen haben. Wenn wir zu unserem HTML gehen, lassen Sie uns ein div mit einer ID gleich Tieren erstellen, die den Inhalt für jetzt leer lassen und dann zu unserem Skript gehen können. Dann können wir dies mit get Element nach ID greifen. Die ID war Tiere und dann können wir den inneren HTML setzen , wie wir in vielen Zeiten zuvor gesehen haben und dies auf unsere Tiere Array setzen. Speichern, schließen Sie dies in und aktualisieren Sie und jetzt sehen wir unser Array auf dem Bildschirm. Wir haben nur Zeichenfolgen innerhalb dieses Arrays verwendet, aber wir können auch andere Datentypen wie Zahlen oder Booleans enthalten . Diese gehen genau gleich, getrennt durch ein Komma. Wir fügen unsere Zahlen, eher Zitate, und wir können auch unsere booleschen Werte von true oder false setzen. Speichern Sie das, und wir sehen auch diese ausgegeben wie erwartet. Zeigen Sie in unserem Tier-Array, genau wie diese, werden wir alle Elemente innerhalb unseres Arrays anzeigen. Aber wenn wir nur ein bestimmtes auswählen wollten, könnten wir es anhand seiner Position im Array referenzieren. Wie wir uns zuvor angesehen haben, können wir eine Indexnummer mit den eckigen Klammern auswählen und dann unser Indexvolumen hinzufügen. Denken Sie daran, dass Arrays, genau wie wir uns zuvor angesehen haben, bei Position Null beginnen. Speichern Sie das und jetzt sollten wir das erste Phonem des Schnitts bekommen, und natürlich können wir dies ändern, um eine beliebige Zahl zu sein. Wenn wir wollen, dass Tiger Null, eins und dann zwei gehen würde . Setze dies auf zwei, und es gibt Tiger im Browser. Dies ist ähnlich dem, was wir uns früher angesehen haben, als wir uns Abfrage alle ansehen und diese eckigen Klammern danach hinzugefügt haben. Zusammen mit dem Zugriff auf die Werte eines Arrays. Wir können auch die [unhörbare] Eigenschaft verwenden, um zu sehen, wie viele Werte es enthält. Zu unserem Skript, lassen Sie die eckigen Klammern. Dann können wir animals.length sagen, und unser Array hat fünf verschiedene Werte. Wir sollten den Wert von fünf im Browser sehen. Gut. So können wir JavaScript-Arrays verwenden. Wir werden mit Arrays im nächsten Video fortfahren, wo wir uns einige integrierte Array-Methoden ansehen werden. 25. Array-Methoden: In unserer Starterdatei für dieses Video, das Nummer 22 ist, Array-Methoden, haben wir eine ähnlich aussehende Reihe von Tieren wie das letzte Video, das gerade hier ist. Wir zeigen sie dann in einem div mit der ID der Tiere an, die dies gebracht haben , um Elemente nach ID zu erhalten, ist dieses Mal ganz unten unten, was Sie hier sehen können. Dies liegt daran, bevor wir dieses Array anzeigen können, gibt es einige integrierte Methoden, die wir als Array-Methoden verwenden können. Es gibt eine ganze Menge dieser Methoden, die wir verwenden können. Hier werden wir uns einige der häufigsten ansehen. Fügen Sie hinzu, wie Sie Werte aus einem Array mit JavaScript hinzufügen und entfernen, beginnend mit shift. Wenn wir bis zum ersten Kommentar scrollen, der nur hören ist, wird Shift das erste Element aus unserem Array entfernen, das in unserem Fall Katze ist. Alles, was wir tun müssen, ist auf das Array mit seinem Namen zuzugreifen und dann Punktverschiebung zu sagen. Es ist einfach, wie das, jetzt, wenn wir diese Array-Methoden innerhalb des Browsers öffnen, sehen wir jetzt unseren ersten Wert von cat ist jetzt entfernt. Dies ist unsere neue Array-Rückkehr zurück zu, jetzt haben wir nur unsere vier Werte. Wir können diesen entfernten Artikel auch in einer Variablen speichern, wenn wir möchten. Alles, was wir tun müssen, ist eine Variable wie animal1 zuzuweisen und dies auf unsere Werte von animals.shift zu setzen. Dann können wir das in der Konsole überprüfen. Also Konsolenprotokoll, und das gibt den Wert von Tier eins aus, speichern, inspizieren in der Konsole. Da wie erwartet, haben wir unseren ersten Wert von Katzen. Stattdessen, wenn wir Elemente am Anfang des Arrays hinzufügen wollten, können wir unshift verwenden, um so viele Elemente hinzuzufügen, wie wir wollen. Dias kommentiert diese beiden Zeilen hier, und bewegen Sie sich dann nach unten, um die Verschiebung aufzuheben. Hier können wir mit dem Tier-Array beginnen, genau wie zuvor, und dann wählen Sie die Unshift-Methode. Wieder gefolgt von den Klammern und einem Semikolon, und dann als eine Zeichenfolge, werde ich einige neue Tiere hinzufügen, wie Leopard, getrennt durch ein Komma, einen zweiten Wert von Vogel. Mal sehen, ob unser Leopard und Vogel jetzt im Browser ist. Das geht jetzt wurde Leopard und Vogel an den Anfang unseres Arrays geschoben. Dieses neue Array wird uns mit diesen neuen Ausgaben zurückgegeben, die Verschiebung und Unshift, ein wie ein Paar. Beide ändern den Anfang eines Arrays. Das nächste Werkzeug, das Push und Pop genannt wird, ändert das Ende eines Arrays. Beginnen wir mit push, der einen oder mehrere Werte am Ende dieses Arrays hinzufügt. Lassen Sie uns diese Zeile hier auskommentieren. Gehen Sie nach unten, um zu drücken. Beginnend mit unseren Tieren Array, können wir die Punkt-Push-Methode verwenden. Dann können wir hier einige weitere Werte hinzufügen. Fügen wir unseren Leopard und dann unseren Vogel hinzu. Dieses Mal bis zum Ende eines Arrays, aktualisieren, also gibt es unsere ersten fünf Elemente von vorher, und dann unsere letzten beiden geschoben bis zum Ende des Arrays. Als nächstes haben wir Pop, was ziemlich unkompliziert ist. Wir rufen die Pop-Methode auf, um das letzte Element des Arrays zu entfernen. Kommentieren Sie diese Zeile hier und unten zum Pop-Abschnitt hier, ist ziemlich einfach, das ist genau wie wenn wir animals.shift verwenden, aber dieses Mal verwenden wir animals.pop. Wir fügen keine Werte in den Klammern hinzu, da wir einfach das letzte Element entfernen, speichern, neu laden und unser letzter Wert aus dem ursprünglichen Array entfernt wird. Diese vier Methoden sind großartig, aber sie sind darauf beschränkt nur mit dem Anfang oder dem Ende eines Arrays zu arbeiten. Um Elemente in verschiedenen Positionen zu entfernen oder hinzuzufügen, können wir die Spleißmethode verwenden. Stellen Sie sicher, dass alle Methoden, die wir gerade angesehen haben, kommentiert sind und wir mit unseren fünf Elementen zum ursprünglichen Array zurückgekehrt sind, dann können wir animals.splice aufrufen. Gerade hier sehen Sie, dass die Spleißmethode mit den Klammern und dem Semikolon kam. Um mit dem Entfernen von Elementen zu beginnen, müssen wir zwei Werte in diesen Klammern oder Klammern hinzufügen. Nehmen wir an, wir wollten diesen Tiger entfernen, der gerade hier ist. Denken Sie daran, Arrays beginnen bei Position Null, was bedeutet, dass sich der Tiger an der Indexposition zwei befindet. Unser erster Wert ist zwei, also stellen Sie sicher, dass dieser korrekt geschrieben ist. Spleißen einfach so. Dann fügen wir unsere erste Position hinzu, die zwei ist. Wenn Sie nur einen solchen Wert haben, werden alle Items nach Nummer zwei ebenfalls gelöscht. Genau so. Alles von Tiger an wird entfernt, oder wir können einen zweiten Wert hinzufügen, der eine Reihe von Elementen ist, die entfernt werden müssen. Einstellung muss eins sein, wir werden nur unser Tigervolumen entfernen unsere Giraffe und Löwe am Ende verlassen. Auf diese Weise können wir Elemente entfernen. Aber wenn wir stattdessen diesen Artikel ersetzen wollten, also, wenn wir den Löwen ersetzen wollten, können wir einfach einige Werte hinzufügen. Getrennt durch ein Komma, ersetzen wir einen Löwen durch einen Fisch. Nachladen, und da gehen wir. Wir haben noch unsere ursprüngliche Katze, Hund, Giraffe, Löwe, beide Fische jetzt ersetzt unseren Wert von Tiger. Wir können auch mehrere Elemente in zwei hinzufügen, alles, was wir tun müssen, ist diese durch ein Komma zu trennen. Lass uns diesmal einen Affen suchen, erfrischen, und es gibt unseren Zugang zu Gegenständen in der Mitte. Lassen Sie uns dieses Video mit einem weiteren umschließen, nämlich das Array umzukehren, das in umgekehrter Reihenfolge zurückgegeben wurde. Alles, was wir tun müssen, ist zu einem umgekehrten Abschnitt zu gehen und wählen Sie die Tiere. umgekehrte Klammern und Semikolon. Denken Sie daran, bevor unser Löwe am Ende ist und die Katze am Anfang ist. Wenn wir aktualisieren, wird dies jetzt ausgetauscht. Es gibt auch einige weitere Array-Methoden, die verschiedene Dinge tun können, und wir werden bald mehr davon abdecken. Wenn Sie an einer vollständigen Liste interessiert sind, gehen Sie einfach zu Google und dann eine Suche nach Mozilla Array-Methoden. Es ist Antwort, und es sollte das erste Ergebnis sein, das unterstützt. Wählen Sie dies aus, und dann können wir zum Methodenabschnitt scrollen , der ziemlich viel nach unten ist. Lass uns weitermachen, da gibt es unsere Eigenschaften, die wir uns Array.Length angeschaut haben. Hier sind auch unsere Methoden, fühlen Sie sich frei, durch all diese verschiedenen Methoden zu schauen und herauszufinden, wie sie funktionieren. Wir haben uns einige dieser bisher angesehen, also nur Spleißen, Verschieben, Unverschieben, Drücken und Zurückkehren. Das ist es jetzt für dieses Video, und ich werde dich nächstes Mal sehen. 26. Schleifenbildung durch Arrays: foreach: In den nächsten Videos werden wir uns auf Looping konzentrieren. Looping macht das Wiederholen von Aufgaben wirklich einfach. In diesem Video werden wir uns die für jede Schleife ansehen. Die ForEach-Schleife führt eine Funktion für jedes Element im Array aus. Lasst uns zuerst zu unseren Starter-Dateien gehen, also lasst uns zur Nummer 23 übergehen. Durchschleifen von Arrays schließt sich. Hier haben wir einen grundlegenden Starter mit unserem leeren div und dann das Array unserer Tiere. Lassen Sie uns zunächst einen Blick auf das Problem werfen, wenn wir etwas mit diesen Array-Elementen tun wollten, müssten wir jedes Element einzeln auswählen. Lassen Sie uns ein Konsolenprotokoll machen, lassen Sie uns auf der Konsole den Wert der Tiere protokollieren. Ich war eckige Klammern, um unsere Indexnummer von Null zu wählen, wenn wir die Katzen wollten. Dann nehmen wir an, ToUpperCase, gefolgt von den Klammern und einem Semikolon am Ende [unhörbar] ist eine JavaScript-Methode um eine Zeichenfolge in Großbuchstaben oder Großbuchstaben in Kleinbuchstaben umzuwandeln, ist ebenfalls verfügbar. Nun, wenn wir unser zweites Element zwei auswählen wollten, kopieren wir dies und fügen Sie erfüllen die abgenutzten. Dann müssen wir dieses ForEach-Element innerhalb des Arrays tun. Dies würde viel Zeit in Anspruch nehmen und viel sich wiederholenden Code. Gehen wir zum Browser und in die Konsolenaktualisierung. Die Nasa wird Großbuchstaben Katze und Hund also, natürlich würde dies eine Menge Wiederholung erfordern, um dies für unser volles Array zu tun. Stellen Sie sich vor, wenn wir Hunderte von Werten im Array hätten, müssen wir eine Menge sich wiederholenden Code sein und das ist nicht großartig. Hier kommt die für jede Schleife ins Spiel. ForEach, wir werden eine Funktion forEach Array-Element ausführen, um zu sagen, es war eine Menge Wiederholung. Lassen Sie uns zu unserem Code gehen, entfernen Sie die Konsolenprotokolle, und sehen, wie das aussieht. Zuerst wählen wir unsere Tiere Array, und dann verwenden wir dot forEach. Dies ist auch kommuniziert mit einem Großbuchstaben E. Bracket Semikolon wird dann in einer Funktion übergeben , die Sie forEach Array-Element innerhalb dieser Klammern oder Klammern ausführen möchten . Lassen Sie uns eine Standardfunktion erstellen, die Klammern und dann eine Reihe von geschweiften Klammern. Es ist eingeben und dann innerhalb dieser geschweiften Klammern können wir unseren Funktionscode ausführen. Würde dann den Namen unserer Wahl übergeben , den Sie jedem einzelnen Array-Elemente geben möchten. Lassen Sie uns jedes einzelne Element einfach Tier jetzt nennen , wenn wir etwas mit jedem Array-Wert tun wollen, können wir diese tierische Variable verwenden. Lassen Sie uns sagen, alarmieren Sie unser Tier, Semikolon aktualisieren Sie den Browser. Es gibt Katzen, Hund, es ist wieder in Ordnung, Tiger und das läuft jetzt durch jeden Gegenstand im Array. Diese tierische Variable kann auch in irgendeiner Weise verwendet werden. Wir könnten etwas zusätzlichen Text hinzufügen. Nehmen wir an, eine Reihe von Tier, Tier Typ nächste Zeichenfolge und dann fügen Sie unsere Variable am Ende. Aktualisieren Sie den Browser und sehen Sie jetzt Tierart Katze, Hund, Tiger, Giraffe und Löwe. Oder sogar zurück zu unserem Beispiel in Großbuchstaben, könnten wir die tierische Variable verwenden und dann Tierpunkt ToUpperCase sagen. Klammern danach aktualisieren sehen nun unsere Großbuchstaben innerhalb der Alerts. Wir können alle diese neuen Elemente als Großbuchstaben in ein neues Array zwei schieben. Lassen Sie uns zunächst ein neues leeres Array erstellen, so dass nur ausgestopfte Tiere, die var UpperCaseNames sagen. Wir müssen keine Werte hinzufügen, die wir einfach die eckigen Klammern hinzufügen können , um ein leeres Array zu erstellen. Wir wissen, wie man Elemente in ein Array schiebt, wir verwenden die Punkt-Push-Methode, die wir uns im letzten Video angesehen haben. Unten in unserer Schleife, anstelle unserer Warnung, können wir UpperCaseNames sagen, das ist unser leeres Array gerade hier. Sie werden drängen. Dann in der Halterung, das Tier will Push in dieser tierischen Variable installiert. Animal, und lassen Sie uns diese Großbuchstaben so ToUpperCase die Klammern. Diesmal statt eine Ost die Konsole ausgibt. Lassen Sie uns unser vertrautes GetElementById machen, das div dieses Tieres hier ist. Dann können wir unser neues Array zu diesem div schieben. Nehmen wir an, Dokument dot getsElementsById. Alle Tier-ID, können wir den Punkt HTML setzen, um gleich unserem neuen Array von UpperCaseNames zu sein. Scrollen Sie über ein Semikolon am Ende des Browsers. Es gibt ein neues Array von Großbuchstaben. Ein weiteres Merkmal von ForEach ist die Möglichkeit, auf jedes Element durch Deposition oder die Indexnummer zuzugreifen. Zuerst fügen wir einen zweiten Variablennamen unserer Wahl innerhalb der Funktion hinzu. Ich möchte meinen Index so durch Komma getrennt aufrufen, den Variablennamen des Indexes. Dann können wir diesen Index in Seite unserer Funktion verwenden, also lassen Sie uns den Index vor dem Tiernamen ausgeben und uns beim Speichern beitreten und dann aktualisieren. Jetzt haben wir die Indexposition sowie den Wert also Null, eins, zwei, drei und vier. Wir können dieses neue Array-Element in beliebiger Weise konstruieren, die wir wollen. Wenn Sie beispielsweise ein Leerzeichen zwischen dem Index und dem Tiernamen hinzufügen möchten, können wir dies mit einer Zeichenfolge tun, sagen wir index plus und Sie könnten Platz oder sogar einen Bindestrich haben. Dann trat auch auf unserem Tier am Ende aktualisieren und da gehen wir. Schließlich Indexzahlen größer als Null. Wenn wir also wollten, dass dies eine Eins beginnt, könnten wir einfach plus eins am Ende hinzufügen, sagen wir Index plus eins. Da gehen wir so jetzt unsere Indexnummer beginnt bei eins, was wahrscheinlich realistischer ist, wenn sie an den Benutzer ausgegeben wird. Nun gehen wir weiter, um eine neuartige Art der Schleife durch Arrays zu betrachten , und dies wird Karte genannt. 27. Schleifenbildung durch Arrays: map: Beginnen wir damit, zu unserem leeren Starter zu gehen , der diesmal Nummer 24 ist. Dies war ein ziemlich ähnliches Beispiel wie das, was wir uns im letzten Video angeschaut haben. Wir haben unser div, das leer ist, dann haben wir unsere Tiere Array. Auch haben wir ein zweites Array, das unsere Tiere auf UpperCase gesetzt ist, das mit dieser ForEach-Schleife erstellt wird. Jetzt schauen wir uns eine andere Art der Schleife durch Arrays an, die Karte genannt wird. Zuerst möchte ich Ihnen schnell etwas zeigen, das Ihnen hilft, den Unterschied zwischen Karte und ForEach zu sehen. Wenn wir voran gehen und entfernen Sie die UpperCaseName-Array und Ort, weisen Sie das Ergebnis der ForEach einer Variablen. Nehmen wir an, var upperCaseNames und setzen Sie dies auf unsere animals.forEach. Lassen Sie uns nun dieses Beispiel vereinfachen, indem Sie die Indexnummer entfernen. Entfernen Sie den zweiten Wert von innen hier, entfernen Sie den Inhalt aus dieser Funktion. Dann können wir diese Funktion vereinfachen, indem wir einfach die Tiere Array.ToupperCase zurückgeben. Genau so. Jetzt alles, was wir tun, ist durch unser ursprüngliches Array zu schleifen, eine Funktion auszuführen, die unsere Tiere in Großbuchstaben zurückgibt und sie dann in dieser Variablen speichert. Dies gibt Diamant endet die Ausführung der Funktion und gibt dann den neuen Wert. Jetzt scrollen wir über, wir können diese UpperCaseNames hier sehen, die auf dem Bildschirm gewesen ist. Beziehen Sie sich nun auf diese Variable nur hier. Wenn wir dies speichern und dann den Browser neu laden, erhalten wir den Wert von undefined. Halten Sie sich das vorerst fest und wir werden in einem Moment mehr darüber reden. Wenn wir jedoch die ForEach ändern, diesmal zuordnen, also entfernen Sie das ForEach-Schlüsselwort von hier, ändern Sie dies in be.map. Dieses Mal, wenn wir aktualisieren, sehen wir jetzt die Werte unseres Arrays in Großbuchstaben. Dies ist ein wichtiger Unterschied zwischen ForEach einer Karte, nur die Verwendung von map wird ein neues Array zurückgeben. Grundsätzlich wird ForEach alle Elemente schleifen und etwas mit ihnen tun, wie sie Großbuchstaben machen und sie in ein neues Array oder sogar eine Datenbank schieben . Map wird auch über die Elemente schleifen und etwas mit ihnen tun, aber es gibt auch ein neues Array mit den transformierten Elementen zurück, die Zugriff haben, indem sie innerhalb dieser Variablen gespeichert werden. Genau als letzter Gedanke könnten wir diese Funktion auch kürzer machen, indem wir die esc auto-Funktion verwenden. nach.map können wir dieses Funktionsschlüsselwort hier entfernen und unser Tier behalten und den Pfeil verwenden. Genau so. Aktualisieren und unser Array funktioniert immer noch. Denken Sie auch daran, wenn wir nur einen Parameter haben , den wir hier haben, können wir sogar die Klammern entfernen und es noch kürzer machen. Laden Sie den Browser neu und alles funktioniert immer noch gut. Ich hoffe, das macht Sinn für das Gesetz der Zwecke, Karte und ForEach sind austauschbar. Sie müssen map verwenden, wenn Sie ein neues Array zurückgeben möchten. 28. Zeit zum Ãœben: Arrays: Bevor wir mehr Arten von Schleifen betrachten, denke ich, wir sollten eine Verschnaufpause nehmen und sicherstellen, dass wir verstehen, was wir bisher mit Arrays abgedeckt haben und auch durch sie schleifen. Oben in den Stata-Dateien, öffnen Sie also die Seitenleiste und gehen Sie zu Nummer 25, was Zeit zum Ãœben ist und dann öffnen wir das. Lassen Sie uns den Pfad kopieren und öffnen Sie ihn dann innerhalb des Browsers. In der Stata-Datei habe ich einige Anweisungen für eine kleine Herausforderung hinzugefügt, um Ihnen etwas mehr Ãœbung zu geben. Wir haben ein leeres DIV mit der ID der Zeichen und ich habe auch eine Reihe von Cartoon-Zeichennamen zur Verfügung gestellt , die ich möchte, dass Sie in alphabetischer Reihenfolge sortieren und dann innerhalb eines neuen Arrays speichern. Es gibt auch einen kleinen Hinweis an der Spitze hier in den Kommentaren. Wir können Sie die Punktsortiermethode verwenden, um das Array zu sortieren, dann ist der zweite Teil die Punkt-Map zu verwenden, um durch dieses neue Array Schleife und fügen Sie den Text des Namens vor jedem Zeichen. Sie werden genau wie die Kommentare hier aussehen. Der Text des Namens und dann die Zeichenfolge von Bugs Bunny aus dem Array, und dann Name Duffy Duck, und so weiter für jedes Element innerhalb dieses Arrays. Dann werde ich diese Werte schließlich in dieses leere DIV oben setzen. Dies ist eine große Chance, das zu verstärken, was wir bisher behandelt haben , aber wenn Sie Schwierigkeiten haben, dies zum Laufen zu bringen, machen Sie sich keine Sorgen, wir werden die Lösung im nächsten Video abdecken. 29. Lösung – Arrays: Willkommen zurück. Ich hoffe, diese Herausforderung war etwas, das Sie alleine erledigen konnten. Wenn nicht, werde ich einen Weg durchlaufen, dies zu tun. Gehen wir zu unseren Anfängen und scrollen wir nach unten zu unserem Drehbuch. Lassen Sie uns zuerst für Nummer 1 gehen, die Elemente in alphabetischer Reihenfolge anordnen und dann in einer neuen Variablen speichern. Gehen wir nach unten und verwenden Sie diese Punktsortiermethode hier. Sagen wir Zeichen, das ist unser ursprünglicher Name.sort. Dann müssen wir dies innerhalb einer neuen Variablen speichern, also das ist zuweisen, der Variablenname der Sortierung ist Zeichen. Der Name liegt an Ihnen. Lassen Sie uns das im Browser ausprobieren. Faktoren zu einer console.log für unser sortiertes Zeichen-Array. Aktualisieren. Öffnen Sie die Konsole. Öffne das Array, und da ist unser Array, das jetzt in alphabetischer Reihenfolge zurückkehren würde. Wir können fortfahren und dieses Konsolenprotokoll entfernen und dann mit Nummer 2 fortfahren. Wir müssen ein neues Array mit jedem Element mit dem Namen Präfix zurückgeben. Wir müssen diese Zeichenfolge des Namens vor den Ausgaben jedes Wertes hinzufügen. Um dies zu tun, werde ich die Kartenfunktion verwenden, die wir uns kürzlich angesehen haben. Lassen Sie uns auf unsere sortierten Zeichen zugreifen, die unser Array unserer Zeichennamen in alphabetischer Reihenfolge ist. Dann können wir an.map anrufen. Dann können wir eine Funktion übergeben. Ich werde die ES6-Pfeilfunktion verwenden und eine Variable namens Zeichen für jedes Element innerhalb des Arrays erstellen. Erstellt unsere Pfeilfunktion und innerhalb unserer Funktion, und wir werden vor allem die Zeichenfolge zurückkehren. Der Text des Namens , den Sie hier haben, sagen wir Name, ein Doppelpunkt, dann der Name unseres einzelnen Zeichens , der in dieser Variablen gespeichert ist. Ok. Nun, da wir die Zeichenfolge zurückgeben, müssen wir diese jetzt in der Variablen speichern. Also sagen wir var und lassen Sie sagen, sortieren Namen und setzen Sie dies auf unsere Funktion. Also, jetzt haben wir diese in einer Variablen gespeichert. Wir können jetzt alle diese den Browser mit dieser Idee von Zeichen setzen. Lassen Sie uns dieses leere div mit einem document.getElementById greifen, das die ID der Zeichen hat. Stellen Sie den Punkt innerHTML, um gleich dieser Variablen hier, von SortNames, Semikolon an den Enden. Schließen Sie die Konsole, und los geht's. Nun, da sind alle unsere Saiten des Namens: Bugs Bunny, Name: Daffy Duck, Jessica Rabbit und Roger Rabbit. Wir haben nun das Namenspräfix als String, und diese sind auch in alphabetischer Reihenfolge. Wenn du es schaffst, das zu tun, großartig. Wenn nicht, betrachten Sie es einfach als Lernerfahrung. Als nächstes werden wir einen Blick auf eine andere Art von Schleife werfen, die die for-Schleife ist. 30. for-Schleife: In den nächsten Videos werden wir uns einige verschiedene Arten von Schleifen ansehen. Die Schleifen, die wir zuvor betrachtet haben, sind für Arrays gedacht. Die For und while-Schleife, die wir betrachten werden, ist jedoch ein bisschen allgemeiner Zweck und nicht exklusiv für Arrays. Nehmen wir an, wir wollten eines dieser Zeichen greifen und es zur ungeordneten Liste hinzufügen. Gehen wir zu Daten. Hier haben Sie unsere leere oder ungeordnete Liste. Unsere Reihe von Charakteren, genau wie zuvor. Wenn wir diese Zeichen zu diesem leeren UL hinzufügen wollten. Um dies zu tun, müssen wir jedes Element in diesem Array bei li-Tags durchlaufen und sie dann in ungeordnete Liste platzieren. Zuerst können wir eine leere Variable erstellen, um diese Zeichennamen mit den li-Tags zu speichern. Nehmen wir an, auf den Zeichen, erstellen Sie eine Variable namens item und setzen Sie dies auf eine leere Zeichenfolge. Wenn wir dies manuell tun würden, ohne eine Schleife zu verwenden, müssen wir so etwas tun. Wir greifen unser leeres Element, das diese Variable hier ist, und verwenden dann plus gleich. Plus equals fügt den Wert auf der rechten Seite zu diesem Element auf der linken Seite hinzu. Sagen wir Zeichen, die unser Array hier ist, und dann Position Null. Dies würde unseren Roger Rabbit Wert, der gerade hier ist, unserer Variablen des Artikels zuweisen. Wir könnten dies dann zu einer neuen Zeile hinzufügen, indem ein break-Tag und dann ein Semikolon am Ende hinzufügen. Wenn wir dies kopieren und fügen Sie das gleiche drei weitere Male hinzu. Auch hier müssen wir manuell eins, zwei und drei machen. Dann fügen wir diese Elemente zu dieser ungeordneten Liste mit einem document.getElementById hinzu. Möchten Sie die Idee von Zeichen fehlte und dann den inneren HTML-Code so einstellen, dass er unserem Element entspricht. Wenn wir das sagen und dann den Browser neu laden, gut. Unsere Array-Elemente sind jetzt auf der Seite, aber dieser Weg ist nicht ideal, da Sie Hunderte von Elementen innerhalb des Arrays haben können. Das würde eine Menge Wiederholung bedeuten. Würde diese Zeilen mehrmals für jedes Element im Array wiederholen müssen. Dies ist ein Problem, bei dem eine Schleife für uns lösen könnte. Wir erstellen eine for-Schleife genau so. Fügen wir das Schlüsselwort for hinzu, die Klammern, und öffnen und schließen Sie dann die geschweiften Klammern innerhalb dieser Klammern hier. Die for-Schleife nimmt drei Anweisungen an. Zuerst ist das, was der Initialisierer genannt wird. Nehmen wir an, es ist unser Anfangswert von i, gleich Null mit dem Semikolon am Ende zu sein. Hier können wir eine Variable mit unserem Anfangswert ist üblich, um diese Variable namens i zu sehen, die für Inkrement steht. Dies liegt daran, dass dies mit jeder Schleife nach dem Semikolon inkrementiert wird. Zweitens ist die Bedingung. Die Schleife wird so lange fortgesetzt, wie diese Bedingung wahr ist. Wir wollen weiter für die Länge der Zeichen innerhalb dieses Arrays schleifen. Wir können sagen, während i kleiner ist als die Zeichen Punktlänge, Semikolon am Ende. Drittens sagen wir, wie wir den Wert von i mit jeder Schleife erhöhen wollen. Wenn wir i++ sagen, wird dies den Wert jedes Mal um eins erhöhen. Die erste Schleife, ich beginnt mit dem Wert von Null. Dann nach der zweiten Schleife werde ich eins sein, die dritte Schleife werde ich zwei sein, und so weiter. Dann können wir genau wie eine Funktion den Code hinzufügen, den wir zwischen den geschweiften Klammern ausführen möchten. Dieser Code wird für jede Schleife wiederholt, oder in unserem Fall wird er für jedes Element innerhalb des Arrays wiederholt. Wenn dies verwirrend ist, lassen Sie uns die Konsole den Wert von i protokollieren, um zu sehen, was vor sich geht. Konsole protokollieren Sie den Wert von i, öffnen Sie für den Browser. Öffnen Sie unsere Konsole. Okay, wir haben Null, eins, zwei und drei. Denken Sie daran, dass wir i auf Null initialisiert haben. Dies ist der Startwert. Wir haben dann vier Elemente innerhalb des Arrays. Hier gibt es vier verschiedene Werte. Diese vier Werte von null bis drei sollten ebenfalls vertraut aussehen. Es ist das Gleiche wie das, was wir am Anfang gemacht haben. Wir haben unsere Werte von null bis drei als unsere Indexpositionen innerhalb der eckigen Klammern. Anstatt diese vier Codezeilen zu haben, können wir einfach eine dieser Zeilen kopieren. Anstelle des Konsolenprotokolls können wir es nun innerhalb unserer for-Schleife hinzufügen. Löschen Sie diese vier Zeilen, wir brauchen das nicht mehr. Wir werden das jetzt mit unserer Schleife verwenden. Dann kann der hart codierte Wert von Null jetzt durch den Wert von i ersetzt werden, , wie wir wissen, Null, eins, zwei und drei ist und so weiter. Nun, wenn wir das speichern und dann neu laden, haben wir immer noch die gleichen vier Namen auf dem Bildschirm hier, aber dieses Mal verwenden wir die for-Schleife mit viel weniger Code. Dies ist gut, weil dies so lange wiederholt wird, wie wir Elemente im Array haben. Zum Beispiel, wenn wir gehen und fügen Sie einen neuen Wert auf hier, so dass sollte sagen, „Hallo“, da drin. Dies wird auch am Ende des Arrays hinzugefügt. Ich werde diese vorerst entfernen. Da der Charaktercontainer eine ungeordnete Liste ist, die nur hier ist, können wir diese Schleife verbessern, indem wir jedes Element innerhalb der Listenelement-Tags umgeben. Kurz vor den Charakteren. Lassen Sie uns andere Zeichenfolge von li das Plus-Symbol. Dann, gleich am Ende, ändern Sie unser Break-Tag zu unserem schließenden Listenelement. geben, dass eine speichern, neu laden, jetzt sehen wir, dies ist ein Listenelement, weil wir die Aufzählungszeichen auf der linken Seite haben. Wenn wir auch mit der rechten Maustaste und inspizieren, Klicken Sie auf den Inspektor und wählen Sie eine dieser Listenelemente. Wir können jetzt auf dem Bildschirm sehen wir unsere ungeordnete Liste haben und dann als nächstes im Inneren haben wir unsere vier Listenelemente, genau wie Standard-HTML. Wenn Sie sich wieder im DOM-Manipulationsvideo erinnern, haben wir uns die Abfrageselektor alle angesehen. Wenn wir wieder in unsere Starter-Dateien gehen. Wenn Sie bis zur Nummer 10 scrollen , also DOM-Manipulation, lassen Sie uns schnell die Indexseite öffnen. Unten ganz unten hatten wir Abfrage, wählen Sie alle, wo wir unsere beiden Bilder nach der Indexposition ausgewählt. Denken Sie daran, dass wir alle unsere Bilder mit dieser Indexnummer zugreifen können , aber das ist auch nicht ideal, weil wir Code wiederholen. Anstatt Code wie diesen zu duplizieren, sind dies die Dinge, für die eine for-Schleife nützlich wäre. Wenn wir das schließen und dann zu unserer for-Loop-Starter-Datei zurückkehren, die hier unten ist, habe ich zwei verschiedene Bilder in diesem Ordner zur Verfügung gestellt. Wir können voran gehen und diese jetzt hinzufügen. Schließen Sie die Seitenleiste. Wenn wir zu unseren ungeordneten Listen oben im HTML gehen, lassen Sie uns ein Bild hinzufügen. Zunächst einmal mit der Quelle von Bugs Bunny, die die Punkt-PNG-Erweiterung hat. Dann unser zweites Bild, diesmal mit der Quelle von Daffy duck.PNG. Schließ das ab. Jetzt habe ich unsere beiden Bilder. Ich gehe voran und speichere diese Referenz in einer Variablen namens images. Runter zu unserem Drehbuch. Lets gehen bis ganz nach unten und lassen Sie uns eine Variable namens images wählen. Legen Sie diese als document.query fest, wählen Sie alle aus, und greifen Sie dann alle Bilder mit dem IMG-Tag. Dann können wir die Schleife wieder verwenden, alles tun, was wir wollen mit diesen Bildern. Ich werde den Namen jeder dieser Bilddateien auf dem Bildschirm erfassen. Unmittelbar unter unseren Bildern variabel. Lassen Sie uns eine neue for-Schleife erstellen. Konstruieren Sie das genau wie wir es vorher getan haben. Dann können wir unsere drei Werte hinzufügen. Zunächst einmal lassen Sie uns unseren Initialisierer setzen, ich werde gleich Null sein; wir werden diese Schleife ausführen, während ich kleiner als Bilder ist, was unsere Variable hiere.length ist. Dies wird zwei Elemente lang sein da Sie zwei verschiedene Bildelemente auf dem Bildschirm haben. Dies wird das Doppelte des Semikolons am Ende ausgeführt. Dann werden wir diese auf jeder Schleife inkrementieren. Schauen wir uns nun die Ausgaben mit einem Konsolenprotokoll an. Der Wert, den wir anzeigen möchten, sind die Bilder. Unsere Bilder variabel hier, innerhalb der eckigen Klammern, können wir i hinzufügen. Dies wird auf das erste Bild in der ersten Schleife zugreifen. Dann werden wir auf der zweiten Schleife auf das zweite Bild zugreifen, weil ich gleich eins sein werde. Schauen wir uns das zuerst im Browser an. Geh rüber zur Konsole. Da sind unsere beiden Bilder, die wir gerade durchlebten. Wenn Sie den Namen der Quelle erfassen wollten, könnten wir die.getattributes verwenden. Dann innerhalb der Klammern ist das Attribut, das wir greifen möchten, die Quelle. Jetzt zurück zum Browser. Wir erhalten nun den Namen des Quellattributs für jedes Bild. Wieder, wenn viele verschiedene Bilder hätten, wäre Schleife wirklich nützlich für so etwas. Loops können uns wirklich viel Zeit sparen, wenn sie sich wiederholende Aufgaben ausführen. So funktioniert eine for-Schleife. Als nächstes werden wir uns die while-Schleife ansehen. 31. while-Schleife: Innerhalb unserer while-Schleife startet die Datei. Wir haben das gleiche Beispiel, das wir uns im letzten Video mit der for-Schleife angesehen haben. Wir haben unsere Bilder. Wir haben eine ungeordnete Liste, wir haben ein Array eines Charakters und dann schieben wir unsere Charaktere in dieses leere div. Dann haben wir unsere beiden Bilder direkt unten. Diese for-Schleife, die wir uns vorher angesehen haben, wird weiterhin laufen, solange diese Bedingung wahr ist, was gerade hier ist. Also, während Larrys Gegenstände innerhalb des Arrays, wird das weiter laufen. Eine while-Schleife, die wir jetzt betrachten werden, macht einen ähnlichen Job. Aber dieses Mal läuft eine while-Schleife, während eine Bedingung als wahr ausgewertet wird. Wir können dies ändern, um eine wilde Schleife zu sein, indem wir den Fall ändern, während sein. Wir können auch die erste und auch die dritte Anweisung aus den Klammern entfernen. Also entfernen Sie diese Daten und ich plus, plus. Dies liegt daran, dass eine wilde Schleife nur die Bedingung innerhalb von hier erhält, und sie wird weiter laufen, solange diese Bedingung wahr ist. Wir müssen immer noch den ersten Wert von i initialisieren, und wir können dies außerhalb der Schleife tun. Also knapp über der Schleife, sagen wir, var i ist gleich Null. Schließlich können wir i auf jeder Schleife erhöhen, direkt ganz unten, wählen Sie sagen i plus, plus, und geben Sie uns speichern. Um zusammenzufassen, wird diese Schleife bei Null beginnen, was Sie hier vorschlagen. Es wird dann das erste Array-Element hinzufügen, das diese erste Zeile hier ist. Und dann, nachdem es fertig ist, wird AC dann i zu eins erhöhen. Dies wird auch so lange ausgeführt, bis der Wert von i nicht mehr kleiner als die Länge des Arrays ist. Also, wenn wir das tun, sagen wir, wir sollten immer noch unsere vier Namen auf dem Bildschirm von unserem Array haben. Aber dieses Mal mit der while-Schleife. Das i plus, plus schreibt ganz am Ende ist wirklich wichtig. Wenn wir Erhöhungen bei jeder Schleife vergessen, werde ich immer kleiner sein als die Länge des Arrays, was bedeutet, dass die Bedingung immer wahr ist und dies zu einer Endlosschleife führt. Dies führt dazu, dass der Browser zerquetscht. Also, wenn wir das entfernen und dann speichern, aktualisieren, können wir sehen, dass der Browser Schwierigkeiten hat zu laden. Wir können immer noch das Drehen in der Ecke sehen und auch wir haben die Möglichkeit, das Laden der Seite zu stoppen und der Browser wird zerquetschen. Viele moderne Browser erkennen jedoch auch, dass dies der Fall ist und werden nach einer gewissen Zeit nicht mehr laufen, was Sie hier sehen können. Also jetzt lassen Sie uns einfach hinzufügen diese Backend-Solos keine Probleme mehr, und dann neu laden und unsere geloopten Elemente sind wieder auf dem Bildschirm. Bevor wir dieses Video einpacken, werfen wir einen Blick auf ein weiteres Beispiel. Gehen wir also ganz nach unten und lassen Sie uns mehr Variablen für einige Zahlen erstellen. Nehmen wir an, x ist gleich fünf und Y ist gleich 10. Dann erstellen Sie unsere while-Schleife, genau wie wir es vorher getan haben, und dann können wir unsere Bedingung erstellen. Sagen wir also, wenn der Wert von x kleiner als y ist, dann können wir unsere Schleife ausführen. Also lassen Sie uns eine console.log den Wert von x machen, und dann erstellen wir jedes Mal ein Inkrement x um eins. Während der Wert von x kleiner als y ist, können wir ihn an die Konsole ausgeben und dann jedes Mal um eins erhöhen. Also speichern Sie das auf der Konsole. Erfrischen Sie sich und da gehen wir. Das sind Werte von fünf bis neun. Wenn wir wollten, dass dies den ganzen Weg bis 10 geht, genau wie der Wert von y. Wir könnten dies auf kleiner oder gleich setzen und dies wird jetzt auf 10. So verwenden wir also eine while-Schleife in JavaScript, und im nächsten Video gehen wir auf JavaScript-Objekte zu schauen. 32. Objekte: Willkommen zurück, Jungs. Wir werden uns jetzt JavaScript-Objekte ansehen. Objekte sind die Sammlung von Eigenschaften, die einen Namen und ein Wertepaar haben. Zum Beispiel ist ein Computer wie im wirklichen Leben ein Objekt. Ein Computer kann viele Eigenschaften haben, zum Beispiel einen Eigenschaftsnamen des Herstellers und einen Wert von Apple, einen Eigenschaftsnamen der Monitorgröße und einen Wert von 22 Zoll, oder kleben mit unseren Zeichen von vorher, Ein Zeichen könnte auch ein Objekt sein, mit einem Eigenschaftsnamen Vorname und einem Wert von Mickey oder einem Eigenschaftsnamen Farbe und dem Wert von rot. Dies sind alle nur Namen und Werte, die viel zusammen sind, die ein Objekt konstruieren. Lassen Sie uns ein Objekt über in den Objekten erstellen, beginnt eine Datei, die nur ein leeres Skript-Tag ist. Zuerst definieren wir neue Objekte mit dem neuen Schlüsselwort, also neue Objekte, gefolgt von den Klammern und dem Semikolon. Wir können dann dieses neue Objekt einer Variablen zuweisen und lassen Sie uns dies auf den Namen des Zeichens setzen. Wenn wir jetzt auf die Konsole gehen, so klicken Sie mit der rechten Maustaste und inspizieren, öffnen Sie dies, und dann können wir ein Konsolenprotokoll mit dem Wert des Zeichens tun, speichern Sie das und dann neu laden. Wir sehen eine Reihe von geschweiften Klammern. Dies ist nur ein leeres Objekt, da wir noch keine Eigenschaften hinzugefügt haben. Wenn wir zu unserem Projekt zurückgehen, können wir diese jetzt hinzufügen. Wir können dies tun, indem wir unseren Charakter auswählen und dann sagen wir Punkt Vorname und setzen dies gleich Bugs. Dann können wir Zeichen Punkt Nachname gleich Bunny sagen, dann Zeichen, und sagen wir, wir hatten ein Bild, so Punktbild gleich einer Zeichenfolge von Bugs-Bunny Punkt png. Wir werden noch einen machen, wir werden sagen, Charakterpunktfarbe ist gleich gewachsen, also hier haben wir die Charakterobjekte, die Eigenschaften von Vorname,Nachname, Bild und Farbe gegeben die Eigenschaften von Vorname, und dann weisen wir diese Werte auf der rechten Seite zu. Wenn wir das speichern und dann zurück zur Konsole gehen, lassen Sie uns sehen, welche Wirkung das hat. Wir sehen jetzt einige Inhalte innerhalb unserer geschweiften Klammern, so dass unser Objekt jetzt einige Eigenschaften hat. Wir können unseren Vornamen Bugs, unseren Nachnamen von Bunny und so weiter sagen . Dies sind Namenswertpaare, daher ist der Vorname von Bugs ein Name-Wert-Paar, Nachname von Bunny ist auch ein Name-Wert-Paar. Wir können auf jede dieser Eigenschaften direkt mit dem Namen zugreifen, genau so. Lassen Sie uns zu unserem Konsolenprotokoll gehen und direkt darunter können wir ein zweites Konsolenprotokoll hinzufügen. Wenn wir auf unsere Charaktere Farbe zugreifen wollten, könnten wir das volle Zeichen auswählen und dann Punktfarbe sagen, aktualisieren Sie dies und es gibt unseren Wert von, was diese Eigenschaft ist gerade hier. Greifen Sie auf unsere Werte genau so mit dem Punkt wird die Punktnotation genannt. Es gibt auch eine zweite Möglichkeit, auf diese Eigenschaften zuzugreifen, dies ist die Klammernotation. Dieses Mal statt auf die Eigenschaften mit den Punkten zuzugreifen, können wir ein Konsolenprotokoll machen und stattdessen diese quadratischen Klammern verwenden. Lassen Sie uns die Charakter-Objekte, die eckigen Klammern auswählen und dann können wir unsere Farbe, Semikolon am Ende zugreifen , aktualisieren und es gibt unsere beiden Werte von Grau. Zuerst mit der Punktnotation und dann an zweiter Stelle mit den Klammern. Eine andere Möglichkeit, ein Objekt zu erstellen, heißt Objektliteral und anstatt ein leeres Objekt zu deklarieren, das wir nur hier hinzufügen und dann Eigenschaften mit diesen vier Zeilen hinzufügen, können wir alles auf einmal tun. Lassen Sie uns diese erste Methode hier und dann direkt darunter auskommentieren. Wir können unser Objekt erstellen und speichern es im Inneren verfügbar. Sagen wir var Zeichen und setzen Sie dies auf alle Objekte, anstatt ein leeres Objekt zu haben, können wir jetzt unsere Namenswertpaare zuweisen, also sagen wir unseren Vornamen, den Doppelpunkt. Unser Vorname ist Bugs, getrennt durch ein Komma, wir können unseren zweiten Nachnamen hinzufügen, und das ist Bunny. Wieder unser Bild, so Bugs-Bunny dot png und schließlich die Farbe. Diese vorherigen Werte, die wir uns angesehen haben, sind nur einfache Strings. Dies kann auch ein beliebiger Datentyp sein, den wir bereits behandelt haben, wie z. B. ein Array. Wir können mehrere Werte für die Farbe hinzufügen, also nehmen wir an, wir haben einen Farbwert von Grau und dann durch Komma getrennt, auch weiß zu. Wenn wir dies speichern und in der Tat werden wir diese Konsolenprotokolle entfernen, nur unseren Charakter verlassen. Zur Konsole gibt es unsere Name-Wert-Paare, genau wie zuvor, aber diesmal ist unsere Farbe ein Array mit zwei separaten Werten. Wenn Sie hier auf diesen Pfeil klicken, können wir diesen öffnen und dann die Farbe erweitern. Die Indexposition von Null ist grau und der Index von eins ist weiß. Wir können sogar Funktionen zu unseren Objekten hinzufügen, also direkt nach der Farbe, können wir ein Komma hinzufügen und dann eine Funktion setzen, die eine Zeichenfolge erstellt, die unseren Vor- und Nachnamen verkettet. Nehmen wir an, unser vollständiger Name ist gleich einer Funktion und erstellen Sie dann eine Funktion, wie wir es zuvor gesehen haben. Innerhalb des Funktionskörpers können wir eine Warnung machen und innerhalb der Warnung, lassen Sie uns eine Zeichenfolge erstellen, die meinen vollständigen Namen ist, ein Leerzeichen und dann können unsere Eigenschaften hinzufügen. Nehmen wir diesen Punkt-Vornamen an, fügen Sie dann eine leere Zeichenfolge für das Leerzeichen hinzu und dann am Ende sagen wir diesen Punkt-Nachnamen, Semikolon am Ende. Es gibt hier ein paar Dinge zu beachten, vor allem, wenn wir eine Funktion als Eigenschaft eines Objekts hinzufügen, wird dies eine Methode genannt und wir haben dieses Schlüsselwort verwendet, um auf unsere Eigenschaften zuzugreifen. Wenn eine Funktion als Methode eines Objekts aufgerufen wird, wird der Wert dieser auf diese aktuellen Objekte gesetzt. Daher können wir auf jede dieser Eigenschaften auf diesem Objekt zugreifen indem wir diesen Punkt und dann den Namen unserer Eigenschaft verwenden. Wenn Sie dies ein Speichern geben und zum Browser gehen, können Sie sehen, unsere Methode des vollständigen Namens ist hier plus wenn Sie tatsächlich diese Methode ausführen und die Warnung anzeigen möchten, müssen wir es in den Klammern ausführen. Zurück zu unserem Konsolenprotokoll und sagen Zeichen Punkt vollständigen Namen, die Klammer kurz nach und jetzt, wenn wir speichern und dann aufrufen, werden wir jetzt unsere Methode laufen sehen und die Warnung ist im Browser und die Zeichenfolge von Mein vollständiger Name ist Bugs-Bunny, schließt sich. Dies ist jetzt für unseren ersten Blick auf Objekte, sie sind wirklich nützlich, um Informationen über fast jede Art von Element zu gruppieren. Als nächstes bleiben wir beim Thema Objekte und schauen uns an, wie wir sie durchlaufen können. 33. Schleifenbildung durch Objekte: Genau wie bei der Arbeit mit Arrays, wenn Sie viele Eigenschaften für ein Objekt haben, möchten wir sie vielleicht durchlaufen. Dies ist effizienter und weniger Code als jede Eigenschaft separat auszuwählen. Innerhalb unserer Starterdatei, die Objekte durchläuft, haben wir gerade hier ein Zeichenobjekt, das Sie durchlaufen können. Ich werde eine leere Variable erstellen, mit der die Ergebnisse gespeichert werden. Sagen wir, Var Ergebnisse und befriedigen Sie mich eine leere Zeichenfolge. Dies wird die Ergebnisse jeder Objekteigenschaft speichern , die als Zeichenfolge durchlaufen wird. Die Schleife, die wir verwendet werden, um durch das Objekt zu schleifen, wird die for-in-Schleife genannt und es sieht so aus. Wir beginnen mit einem Standard, der nach einer Schleife sucht, genau wie zuvor. Dann gehen wir zu den Räumlichkeiten und setzen unsere Variable von i, aber dieses Mal sagen in Charakter. Charakter ist der Name unseres Objekts, das hier ist. Jetzt innerhalb des Schleifenkörpers können wir einige Konsolenprotokolle machen. Beginnen wir mit einer console.log für den Wert von i und sehen, was wir bekommen. Öffnen wir das in der Konsole. Klicken Sie mit der rechten Maustaste inspizieren und jetzt können wir sehen, dass wir die Werte von FirstName, LastName, Bild in Farbe erhalten. Dies liegt daran, dass der Wert von i der Schlüssel ist. Dies sind im Grunde die Werte auf der linken Seite unserer Immobilien. Wenn wir auf die Werte auf der rechten Seite unserer Eigenschaften zugreifen wollten, könnten wir dann ein zweites Konsolenprotokoll erstellen. Dieses Mal statt i, machen wir das Zeichen (i); Semikolon am Ende, aktualisieren. Wir können sehen, dass jedes Paar jetzt auf dem Bildschirm ist. Vorname von Bugs, Nachname von Bunny. Wenn wir diese besser sehen wollten, könnten wir ein drittes Konsolenprotokoll machen und einfach etwas hinzufügen, um diese Werte zu trennen, wie einige Bindestriche und da gehen wir. Da sind unsere Immobilien. Ok. Gut, so haben wir jetzt Zugriff auf alle diese Eigenschaften und auch die Namen und Werte einzeln. Wir können jetzt voran gehen und unsere Ergebnisse konstruieren und eine Zeichenfolge erstellen, die auf dem Bildschirm angezeigt wird. Gehen wir nach unten zu unserer for-Schleife und unter diesen Konsolenprotokollen. Es ist unsere Schnur konstruieren. Wir können auf diese Ergebnisvariable zugreifen, fügen Sie dies mit plus gleich hinzu. Zunächst einmal setzen wir den Wert von i, die unsere Eigenschaftsnamen wie FirstName und LastName ist, fügen Sie heute eine Zeichenfolge mit einem Doppelpunkt zwischen und Leerzeichen. Dann gleich danach können wir unseren Eigenschaftsnamen wie Bugs und Hase hinzufügen. Genau wie wir es mit diesem Konsolenprotokoll hier sehen. Fügen wir Zeichen i hinzu und fügen Sie diese dann in ihre eigene separate Zeile mit einem Break-Tag hinzu. Wir haben ein Ergebnis erstellt, das eine Zeichenfolge aller unserer Charaktereigenschaften mit den Namen und Werten ist. Wir können dies nun den Browser in einem leeren div öffnen. Lassen Sie uns zum Körperabschnitt gehen, erstellen Sie ein div und fügen Sie ID der Ausgänge wird der Ort sein, an dem wir Ausgänge sind, unsere Ergebniszeichenfolge und gehen Sie dann nach unten außerhalb der for-Schleife. Lassen Sie uns ein document.getElementById machen, wir wollen die Ausgaben greifen, die unser leeres div ist, und setzen Sie dann die innerHTML auf unsere Ergebnisvariable. Wenn wir dies speichern und dann in unserem Browser, neu laden, sehen wir jetzt die Zeichenfolge, die wir erstellt haben mit dem Eigenschaftsnamen Wert gefolgt von einem break-Tag. Dies ist eine Zeichenfolge, die wir gerade hier erstellt haben. Dies wird für jedes Element innerhalb unserer Objekte wiederholt , da wir dies zu einer for-in-Schleife hinzugefügt haben. So können wir Objekte durchlaufen und es ist wirklich praktisch, besonders wenn Objekte wirklich groß werden. Im nächsten Video werden wir weiterhin Objekte betrachten und wie sie mit der Konstruktorfunktion erstellt werden. 34. Objektkonstruktorfunktion: Wir haben uns bereits ein paar Möglichkeiten zum Erstellen von Objekten angesehen. Diese sind in Ordnung, wenn wir nur ein einzelnes Objekt erstellen möchten, wie wir es zuvor getan haben. Wenn wir jedoch mehrere Objekte mit den gleichen Eigenschaften erstellen möchten, gibt es eine andere Möglichkeit, einen Konstruktor zu verwenden, anstatt ein Objekt zu konstruieren und Namen und Werte hinzuzufügen, können wir die Konstruktorfunktion verwenden, um im Grunde eine -Blueprint oder eine Vorlage für jedes Objekt. Dies ermöglicht es uns, dann mehrere Objekte mit der gleichen Struktur zu erstellen. Wenn ich beispielsweise mehrere Zeichen hätte, die normalerweise dieselben Eigenschaften enthalten würden, z. B. einen Namen und eine Farbe. Lassen Sie uns dies übergehen, und ich werde eine Datei für die Objektkonstruktorfunktion starten. Unten in unseren Skripten wird die Konstruktorfunktion wie eine normale Funktion erstellt, die wir uns angesehen haben. Wir verwenden die Funktion Schlüsselwort und setzen dann einen Namen, wie Zeichen. Konstruktorfunktionen haben normalerweise einen Großbuchstaben, genau wie wir hier sehen. So können wir sie von regulären Funktionen unterscheiden. Wir werden in einem Moment darauf zurückkommen. Aber zuerst können wir ein neues Objekt basierend auf dieser Konstruktorfunktion erstellen , indem wir das neue Schlüsselwort verwenden. Unmittelbar unter diesem, lassen Sie uns das neue Schlüsselwort, sagen wir, neue Zeichen verwenden. Dieses Zeichen hier, muss mit dem Namen unserer Funktion direkt oben übereinstimmen. Dann können wir innerhalb der Klammern einige Werte hinzufügen, die wir in Objekten verwenden möchten. Also der Vorname, sagen wir Mickey, getrennt durch ein Komma, ein zweiter Wert von Mouse, für den zweiten Namen. Wir können dann eine Reihe von Farben hinzufügen. Mickey Mouse, wir können rot verwenden, wir können auch sagen gelb, und auch schwarz zu. Machen Sie das etwas kleiner. Kurz nach dem Array können wir ein Komma hinzufügen, und dann können wir einen Namen für unser Bild hinzufügen. Sagen wir mickey-mouse.png, und fügen Sie dann am Ende ein Semikolon hinzu. Jetzt haben wir diesen neuen Charakter erschaffen. Wir können es nun einer Variablen namens Mickey zuweisen. Großartig. Wir haben einen neuen Charakter konstruiert, wir haben einige Werte in den Klammern übergeben, aber wie übergeben Sie sie? Die Antwort ist die gleiche wie eine reguläre Funktion. Wir können sie als Argumente übergeben. Innerhalb des Konstruktors können wir zuerst, zuletzt, Farbe und Bild sagen , das in der gleichen Reihenfolge ist, wie Sie hier unten erstellt haben. Hier unten haben wir unsere Werte für den Vornamen, Nachnamen, Farbe und Bild. Aber diese sind noch nicht mit unseren oben genannten Namen verbunden. Wir können dies innerhalb des Funktionskörpers tun. Zunächst einmal sagen wir, dieser Punkt-Vorname entspricht zuerst. Dies mag zunächst etwas seltsam aussehen, aber was wir für den ersten Wert tun, ist, dass wir eine Zeichenfolge von Mickey übergeben, die in dieser ersten Variablen gespeichert ist. Dann wird in den Vornamen gesetzt Mickey sein. Auch in JavaScript kann dieses Schlüsselwort ein wenig kompliziert zu verstehen sein. Wenn auf diese Weise verwendet wird, bezieht sich das Schlüsselwort dieser Objekte. Wir können dies sehen, indem wir eine console.log tun und den Wert davon anmelden und dann zu unserer Konsole gehen. Wir können sehen, dass dieses Schlüsselwort bezieht sich auf unseren Charakter mit dem Vornamen von Mickey. Hier können wir auch unsere Eigenschaft mit dem Namen Value Pass sehen , die wir bereits hinzugefügt haben. Wenn wir jedoch voran gehen und unsere console.log so verschieben dass sie außerhalb des aktuellen Objekts ist, genau so. Jetzt gehen wir zurück zu unserem Browser. Wir sehen nun, dass wir unser Objekt nicht zurückgegeben bekommen, stattdessen, dass dieses Schlüsselwort jetzt auf die Fensterobjekte verweist. Dieses Window-Objekt stellt das Fenster des Browsers dar. Alle globalen Funktionen, Objekte und Variablen, die erstellt werden, werden dann zu einem Teil dieses Fensters. Wenn wir voran gehen und die Konsole löschen und Fenster eingeben, „Enter“ drücken, bekommen wir jetzt unser Fenster zurückgegeben, und wenn wir dies öffnen, können wir auch die Eigenschaften auf diesem Fenster Objekte sehen. Hier drinnen können wir unsere Charakterfunktion sehen, die gerade hier ist. Denken Sie auch daran, dass wir eine Variable namens Mickey erstellt haben. Dies wird auch auf dem globalen Objekt zum Stillstand gebracht. Wenn wir nach unten scrollen, hier ist unsere Variable von Mickey. Innerhalb der Konsole kann Zugriff auf eine dieser durch ihren Namen haben. Sagen wir window.mickey. Hit „Enter“, und da ist unser Charakter mit dem Vornamen Mickey. Wir haben auch Zugriff auf eine Menge mehr Eigenschaften des Browsers, wie Window.innerWidth. Drücken Sie „Enter“. Wir können in Pixeln die innere Breite des Browsers sehen. Gehen wir jetzt zurück zu unserem Konstruktor. Zuerst können wir diese console.log entfernen, und dann können wir den Rest unserer Eigenschaftsnamen hinzufügen. Zweitens haben wir this.lastName, und dies ist gleich der letzten. Diese dunkle Farbe ist gleich der Farbe. Dann endlich haben wir diese.image ist gleich Bild. Jetzt schauen wir uns an, wie Mickey im Browser aussieht, mit einer console.log. Das ist mit console.log mit dem Wert unserer Variablen, die Mickey ist, aktualisieren. Da sind unsere Charakterobjekte, mit unserem Vornamen Mickey, Nachname Mouse. Wir haben ein Farbfeld mit freien verschiedenen Werten, und dann unser Bild ganz am Ende, weil Mickey jetzt alle Namen und Werte zum Objekt hinzugefügt hat. Auf diese Eigenschaften kann auch einzeln zugegriffen werden. Wenn wir zum Beispiel die erste Farbe auswählen wollten, könnten wir mickey.color sagen und dann auf die Indexposition 0 zugreifen. Aktualisieren, und es gibt unseren ersten Wert im Array von rot. Nun, diese Blueprints oder diesen Konstruktor, den wir hier haben, wird es jetzt eingerichtet. Wir können weitermachen und mehrere Objekte basierend auf diesen Vorlagen erstellen, genau wie wir es mit Mickey getan haben. unter Mickey hier können wir eine neue Variable erstellen, und dieses Mal können wir es Daffy nennen. Dies ist auch ein neues Zeichenobjekt. Dann können wir in unseren Werten übergeben, den Vornamen von Daffy, den zweiten Namen von Duck, und dann unsere Reihe von Farben. Lassen Sie uns nun die Farben hier drinnen auf schwarz und dann orange setzen. Ein Komma direkt nach unserem Array. Dies wird für unser Bild sein, das daffy-duck.png ist, ein Semikolon an den Enden. Dann lassen Sie uns noch einen machen, also sagen wir, Variable von Bugs ist gleich einem neuen Zeichen, bei unseren Werten. Der erste ist eine Reihe von Bugs, der Nachname von Bunny. Unser Array mit unseren Farben Grau und auch Weiß. Ein Komma erneut, direkt nach dem Array, und das endgültige Bild von bugs-bunny.png. Lassen Sie uns einfach rauszoomen und das alles überprüfen. Das sieht alles gut aus. Nun, wenn wir console.log einer dieser zusätzlichen Werte, so console.log. Dann können wir etwas wie Bugs tun, das ist unser drittes Objekt gerade hier. Target den Nachnamen, die auf der Konsole den Wert von Bunny ausgegeben werden soll, speichern und aktualisieren, und da gehen wir. Da ist Bunny in der Konsole. Gut, das sieht alles so aus, als ob es gut funktioniert, und dies ist die Objektkonstruktorfunktion, die eine wirklich nützliche Möglichkeit ist, mehrere Objekte mit derselben Struktur zu erstellen. 35. const und let: Willkommen zurück zu diesem brandneuen Abschnitt. Wir werden das, was Sie bereits gelernt haben , zusammen mit einigen neuen Dingen wie const und let, Template-Literale, Festlegen von Intervallen und regulären Ausdrücken. Wir werden jetzt unsere Fähigkeiten in die Praxis umsetzen, indem wir ein Telefonspiel aufbauen. Ich habe bereits HTML und CSS in die Starterdatei eingefügt, so dass wir uns darauf konzentrieren können, dieses Spiel mit JavaScript zum Laufen zu bringen. In diesem Spiel müssen wir nur auf den „Match“ -Button klicken , wenn zwei zufällige Formen die gleiche Größe und Farbe haben. Dies ist die fertige Version vor uns hier. Alles, was wir tun müssen, ist auf die Schaltfläche „Play“ zu klicken, und dies wird ein Array von Objekten auslösen, die zufällig ausgewählt werden. In diesem Spiel müssen wir nur auf den „Match“ -Button klicken , wenn die beiden zufälligen Formen die gleiche Größe und Farbe haben. Obwohl es einfach aussieht, gibt es eine große Sache hinter den Kulissen, und wir werden viel Ãœbung mit dem, was Sie bereits gelernt haben, zusammen mit einigen neuen Dingen zu bekommen . Wir werden auf die Schaltfläche „Match“ klicken, wenn zwei gleich sind, dann erhalten wir eine Punktzahl. Wenn die Form anders ist, erhalten wir dann einen Punkt abgenommen und das Ergebnis kann negativ sein. Lassen Sie uns zu unseren JavaScript-Starter-Dateien gehen, und der Code dafür ist in Nummer 31, die das Shape-Matcher-Spiel ist. Hier habe ich den Index für die Datei script.js bereits geöffnet. Ich kopiere die Indexseite, kopiere den Dateipfad und füge diesen dann in den Browser ein, um ihn in Gang zu bringen. Wir haben bereits das gesamte Layout und das Styling, also müssen wir nur in der Datei script.js arbeiten. Lassen Sie uns jetzt zu diesem gehen, öffnen Sie die script.js. Lassen Sie uns ein wenig mehr Platz im Texteditor machen. Hier im Inneren werde ich damit beginnen, unsere Formen zusammen mit einigen Variablen zu erstellen , in denen sie gespeichert werden können. Diesmal werden wir uns jedoch auf zwei neue Dinge konzentrieren. Wir werden keine Variable mit dem Schlüsselwort var verwenden. In der Tat werden wir sie wahrscheinlich nicht wieder für den Rest dieses Kurses verwenden. Nicht, weil irgendetwas mit Variablen nicht stimmt. Sie sind immer noch vollkommen gültig zu verwenden. In ES6, die wir bereits erwähnt haben, ist aber auch als ES 2015 bekannt, wir haben auch zwei neue Schlüsselwörter, die wir anstelle von var verwenden könnten, um alle Variablen zu starten. Zuerst wird gelassen, was uns erlaubt, auch eine Variable zu deklarieren. Wir brauchen einige Variablen für dieses Spiel. Lassen Sie uns voran und erstellen Sie eine let aktuelle Punktzahl. Wir können dies auf einen Anfangswert von Null setzen. Genau wie var kann der mit let gespeicherte Wert aktualisiert werden, auch als neu zugewiesen bezeichnet. Es gibt eine andere mit let und var. Lassen Sie Werte sind Blockbereich. Der Blockbereich gilt für Dinge wie Funktionen oder Anweisungen. Grundsätzlich alles zwischen einer Reihe von geschweiften Klammern. Wenn Sie sich daran erinnern, als wir uns das Scoping angesehen haben, haben wir gelernt, dass Variablen, die innerhalb einer Funktion deklariert sind, auf diese Funktion zugegriffen werden können, was bedeutet, dass wir nicht anderswo in unserem Code auf sie zugreifen können. Auch Variablen, die außerhalb einer Funktion deklariert sind, werden global genannt. Wir haben Zugang zu ihnen überall innerhalb unseres Codes. Lassen Sie Werte auf der anderen Seite, sind nicht nur auf den Block, in dem sie erstellt wurden, sondern auch irgendwo sonst, wo sie verwendet werden. Wir können dies besser mit einem einfachen Beispiel sehen, indem wir unsere aktuelle Punktevariable verwenden. Wenn wir dies zu einer if-Anweisung hinzufügen, also lassen Sie uns eine if-Anweisung erstellen, über die wir bereits gelernt haben, und dann können wir sagen, wenn die aktuelle Punktzahl weniger als fünf ist, können wir hier eine console.log sagen, und log ist der Wert der aktuellen Punktzahl. Dann eine Zeichenfolge, und das kann drinnen sagen. Sobald wir in der Konsole sind, wissen wir, woher seine Botschaft kommt. Dann lassen Sie uns ein zweites Konsolenprotokoll außerhalb dieser if-Anweisung machen. Wir werden das gleiche tun, wir fügen die aktuelle Punktzahl zu einer Zeichenfolge hinzu. Aber dieses Mal sagen wir draußen. Jetzt, wenn wir zum Browser gehen, öffnen Sie die Konsole, klicken Sie auf die Registerkarte „Konsole“, aktualisieren, und jetzt können wir Null und Null sehen. Dies gilt sowohl für die Innen- als auch für die Außenseite. Dies ist erwartetes Verhalten. Wir haben unseren Let-Wert als Null deklariert, dann protokollieren Sie ihn innerhalb und außerhalb des if-Blocks. Lassen Sie uns voran gehen und die gleiche Variable zu deklarieren, aber diesmal innerhalb der if-Anweisungen. Machen wir das Gleiche. Wir werden sagen, lassen Sie die aktuelle Punktzahl dieses Mal gleich einem Wert von 10 sein. Jetzt gehen wir zum Browser und aktualisieren, jetzt werden wir den Effekt des Blockbereichs sehen. aktuelle Punktzahl innerhalb des Blocks ist ein Wert von 10. Aber die aktuelle Punktzahl außerhalb des Blocks ist unberührt. Wenn dies beide Variablen sind, lassen Sie uns in beiden Fällen in die var ändern. Wir würden jetzt sehen, dass beide Werte 10 sein würden. Da diese Variable außerhalb dieser geschweiften geschweiften Klammern deklariert wird, was bedeutet, dass sie einen globalen Gültigkeitsbereich hat. In den meisten Fällen können wir das neuere let-Schlüsselwort verwenden, um Variablen zu deklarieren, und das ist, was wir für den Rest dieses Kurses verwenden werden. Wählen Sie „Entfernen“, all dieses Beispiels, und ändern Sie dann diese Var zu lassen. Wir brauchen auch einige weitere Variablen für dieses Projekt. Lassen Sie uns voran und fügen Sie sie jetzt mit unserem let Schlüsselwort. Wir werden eine Variable namens let play erstellen. Dies wird zunächst auf false gesetzt. Dies wird auf true gesetzt, wenn der Benutzer auf die Schaltfläche „Play“ klickt. Dann lassen Sie uns zwei weitere erstellen, eine für Form 1 und dann auch eine für Form 2, Form 1 und Form 2 sind derzeit nicht zugewiesen, weil wir diesen später einen zufälligen Wert hinzufügen müssen, wenn der Benutzer beginnt zu spielen. Zusammen mit dem let-Schlüsselwort ES6 führte auch das const-Schlüsselwort ein, das kurz für Konstante oder Variablen ist, deklarieren wir mit var und let kann geändert oder neu zugewiesen werden. Wenn wir jedoch wissen, dass unser Wert immer gleich bleibt, können wir stattdessen eine Konstante deklarieren. Dies hat auch den Vorteil, dass der Wert nicht versehentlich an anderer Stelle in unserem Code aktualisiert wird. Wenn wir eine const deklarieren und versuchen, einen Wert zu aktualisieren, erhalten wir einen Fehler. Legen wir eine Zahl fest, die gleich 10 ist. Dann sagen wir Nummer plus plus. Jetzt erhöhen wir den Wert von 10, obwohl er in einer Konstante gespeichert ist. Mal sehen, was in der Konsole passiert. Wenn wir versuchen, den Wert der Zahl zu protokollieren, neu zu laden und wir erhalten Fehler, weil wir versuchen, den Wert einer Konstante zu aktualisieren. Lasst uns diese vorerst entfernen. Eine Konstante wird nützlich sein, um die Formen zu deklarieren, die wir in diesem Projekt verwenden möchten. Wir möchten die Formen auswählen, aber wir brauchen sie nicht zu ändern. Jede Form wird ein Objekt sein. So können wir diese in als ein Array von Objekten hinzufügen. Lets Setup unsere Konstante genannt Formen, und dies wird ein Array sein. Innerhalb dieses Arrays können wir unser Objekt erstellen. Wir müssen voran gehen und einige davon erstellen, also haben wir einige zufällige Formen zu wählen. Lassen Sie uns die Farbeigenschaft festlegen und diese können beliebige Farben Ihrer Wahl sein. Ich möchte für den Wert für den ersten von FF595E, dann die Breite von 250 und die Höhe gehen . Gehen wir für 160 und fügen Sie dann ein Komma hinzu. Lassen Sie uns voran gehen und kopieren Sie das und fügen Sie es in neun weiteren Malen ein, was uns 10 verschiedene Objekte gibt. Wir werden die ersten beiden als die gleiche Farbe behalten, aber ändern Sie die Breite und Höhe, um etwas anders zu sein, also 150 für diesen, diesen dritten, wird dies einen Wert von FFCA3A haben, Breite von 320, die Höhe ändern wir dies zu 170. Der vierte kann die gleiche Farbe haben, Breite von, gehen wir für 310, die Höhe von 180. Nummer 5, das wird eine Farbe von 8AC926 haben. Die Breite von 190, Höhe von 160 ist in Ordnung. Lassen Sie uns diese Farbe kopieren, und wir werden zwei von jeder Farbe erstellen. Die Breite dieses Mal, gehen wir für 200 und dann 175. Auch hier ist das alles zufällig, also mach dir keine Sorgen, wenn deine etwas anders ist. Die nächste hier kann die Farbe 1982C4 sein, die Breite von 380, Höhe lässt für 185 gehen. Kopieren Sie diese Farbe, so dass diese beiden gleich sind, dann eine Höhe von 400. Die Breite für 400 und eine Höhe von 120. Dann das letzte Paar, gehen wir für 6A4C93, 370 und die Höhe von 145, kopieren Sie diese Farbe und machen Sie die letzte das gleiche, so dass es wieder ein gepaart ist. Eine Breite für 440 und die Höhe von 160 ist in Ordnung. Wenn der Benutzer auf „Play“ klickt, werden wir durch diese Objekte suchen, wählen Sie eine zufällige. Wenn der Computer dasselbe Zufallsprinzip für Form 1 und Form 2 auswählt, werden diese dann als Ãœbereinstimmung betrachtet. Schließlich können wir ein schnelles Konsolenprotokoll dieser Objekte durchführen , indem wir sie mit der Array-Indexnummer auswählen. Direkt unter unserem Array, machen Sie ein Konsolenprotokoll und den Wert von Shapes. Lass uns für Nummer 2 gehen. Schauen Sie sich dies auf der Konsole an, und es gibt eines unserer Objekte mit der Farbe, der Breite und der Höhe. In diesem Video haben wir uns auf die Verwendung der const konzentriert und lassen Keywords Wörter. Wenn Sie nicht sicher sind, wann Sie const und let verwenden sollen, sollten Sie immer const verwenden, wo möglich, und dann let verwenden, wenn Sie einen Wert neu zuweisen müssen. Wenn Sie einen Fehler machen und const verwenden, wenn es gelassen werden sollte, ist es völlig in Ordnung. Die Konsole weist Sie darauf hin, sie zu ändern. unsere Formen jetzt fertig sind, schauen wir uns im nächsten Video an, wie Sie zufällig aus dieser Reihe von Objekten auswählen können. 36. Erstellen einer zufälligen Form: Im letzten Video haben wir ein Array von Formobjekten hinzugefügt. Jetzt brauchen wir eine Möglichkeit, eine dieser Formen aus unserem Array zufällig auszuwählen. Ich werde dies zu einer Funktion hinzufügen, die als selektierte zufällige Form bezeichnet wird. Zurück zu unserem Skript, können wir jetzt das Konsolenprotokoll aus dem letzten Video entfernen und dann die Einstellung einer Bay Konstante für unsere Funktion namens SelectrandomShape. Dies wird eine ES6-Array-Funktion sein. Richten Sie das einfach so ein. Nun, jetzt können wir eines dieser Array-Elemente direkt über der Indexnummer auswählen . Lasst uns das mal aussuchen. Lassen Sie uns eine Konstante namens RandomShape einrichten und diese gleich unserem Shapes-Array setzen und eine der Indexnummern auswählen. Erstellen Sie ein Konsolenprotokoll. Ãœberprüfen Sie, ob dies mit dem Wert einer zufälligen Form in Ordnung ist. In der Tat werden wir diese RandomSelection nennen, nur um ein bisschen klarer zu sein. Konsole protokollieren Sie dies. Dann, damit das läuft, müssen wir es mit seinem Namen nennen. Also SelectRandomShape, die Klammern. Jetzt sollte dies in der Konsole ausgeführt werden. Öffnen Sie es, laden Sie es wieder. Wir haben einen Rechtschreibfehler, also sollte dies Formen sein. Aktualisieren. Jetzt wählen wir eines unserer Objekte aus. Anstatt hart in einer Zahl zu codieren, wollen wir, dass sie zufällig ausgewählt werden. Um dies zu tun, können wir eine Zufallszahl generieren, wie wir zuvor gesehen haben. Wenn wir zu unserem Code gehen, hat dieses Array 10 Objekte. Arrays beginnen auch bei Null, daher müssen wir eine Zufallszahl zwischen Null und neun generieren. Lassen Sie uns dies in Seite unserer Funktion beginnen. Lassen Sie uns das in einer Konstante speichern. Ich nenne das RandomNum. Wir wissen bereits, wie man dies mit Math.random macht. Denken Sie daran, dass dies eine Zufallszahl zwischen Null und Eins erzeugt. Null wurde enthalten, aber man ist tatsächlich nicht, also wird nur auf 0.999 gehen. Danach siehst du Räumlichkeiten. Um diese Zufallszahl zwischen Null und neun zu erstellen, müssen wir zuerst diese Zufallszahl mit der Länge unseres Shapes-Arrays multiplizieren . So formt.Länge. Dann können wir diese Zahl mit Math.Floor abrunden. Gleich zu Beginn verwenden Math.Floor und öffnen Sie dann die Klammern, und dann können wir diese schließen direkt am Ende der Formen. Länge, Semikolon am Ende. Einfach sprengen, lassen Sie uns ein zweites Konsolenprotokoll machen und dann können wir den Wert unserer Zufallszahl ausgeben. Ãœberprüfen Sie einfach, dass dies in Ordnung ist, wie zur gleichen. Aktualisieren. Es steht 0, 7, 6, 2 und so 8, es gibt eine 9. Das scheint alles in Ordnung zu funktionieren, wir bekommen nichts höher als neun und werden auch Null haben. Das scheint völlig einwandfrei zu funktionieren. Jetzt haben wir es, diese Zufallszahl zwischen Null und neun. Wir können die hartcodierte Zahl von vorher für unser Array ersetzen. Anstatt die Nummer 1 auszuwählen, wählen wir unsere Zufallszahl aus. Entfernen Sie das Konsolenprotokoll von beiden, wir brauchen das nicht mehr. Geben Sie dem einen „Save“ und dann über die Konsole. Nun, wenn wir immer wieder erfrischend, sollten wir jedes Mal ein anderes Objekt von unserem Array sehen. Toll, also nur um dieses Video abzuschließen, werde ich dieses Konsolenprotokoll ändern. Wir müssen uns nicht bei der Konsole anmelden und stattdessen nur diese RandomSelection zurückgeben. Dies wird den Wert zurückgeben, so dass wir ihn später verwenden können. Gut. Dies ist ein wichtiger Teil dieses Projekts, kümmert sich um. Als nächstes werden wir diese zufälligen Objekte verwenden und es unseren Variablen von Form 1 und Form 2 zuweisen , und wiederholen Sie diesen Vorgang auch jede Sekunde, um verschiedene Formen zu vergleichen. 37. Wiederholung mit setInterval: Im letzten Video haben wir eine Funktion erstellt, die zufällig eine der Formen innerhalb unseres Arrays ausgewählt hat, das gerade hier ist. In diesem Video haben wir zwei Hauptziele. Wir möchten diese zufälligen Formen unseren Variablen Form 1 und Form 2 zuweisen. Außerdem müssen wir die Formwerte jede Sekunde ändern, um sie auf dem Bildschirm zu aktualisieren. Wir wissen, dass diese selektierte zufällige Formfunktion unten an der Unterseite zu einer zufälligen Form führt. So können wir voran gehen und dies unseren Variablen zuweisen. Nehmen wir zunächst einmal an, Form 1 ist gleich der zufälligen Form auszuwählen. Das gleiche für Form 2 kann auch zufällige Form 2 gewählt werden. Jetzt müssen wir diese selektierte Zufallsformfunktion jede Sekunde ausführen und diese Variablen hier aktualisieren. Um dies zu tun, können wir eine JavaScript-Methode namens setInterval verwenden. Dadurch wird diese Funktion ausgeführt oder der gleiche Code mit einer Zeitverzögerung zwischen jeder Wiederholung wiederholt. Also lasst uns diese beiden hier in unsere festgelegte Intervallmethode einbinden. Lassen Sie uns zuerst diese beiden Zeilen hier ausschneiden. Dann erstellen wir innerhalb eines festgelegten Intervalls die Klammern. Dann können wir hier drinnen eine ES6-Pfeilfunktion ausführen. Also lassen Sie uns das hier erstellen, die geschweiften Klammern, und dann können wir unsere beiden Neuzuordnungen einfügen. Semikolon am Ende hier, und dann können wir die Zeitverzögerung außerhalb dieser geschweiften Klammern in Millisekunden hinzufügen. Also 1.000 ist gleich einer Sekunde. Jetzt wird diese Funktion jede Sekunde ausgeführt, was uns jedes Mal unterschiedliche Werte für Form 1 und Form 2 gibt, wenn dieses Intervall ausgeführt wird. Lassen Sie uns zunächst überprüfen, dass dies funktioniert, indem Sie die Werte von Form 1 und Form 2 protokollieren. Also Konsolenprotokoll, Form 1 und dann ein zweites Konsolenprotokoll, diesmal für Form 2 über den Browser. Nachladen. Gut. Wir sehen also immer wieder zwei neue Objekte, die in der Konsole erscheinen, und sie scheinen unterschiedliche Werte zu haben. Das funktioniert also großartig, aber wir wollen nicht, dass dieser Code läuft, bis der Spieler trifft, dass er oben spielbar ist. Also zuerst können wir diesen Timer innerhalb einer Funktion umgeben. Also knapp unter dem eingestellten Intervall, lassen Sie uns unsere Konstante erstellen, die eine Pfeilfunktion sein wird, und lassen Sie uns diese Wiederholungszufallsform nennen. Auch hier wird es eine Pfeilfunktion sein. Also werden wir das so einrichten. Also innerhalb des Körpers dieser Funktion werden wir unser eingestelltes Intervall hinzufügen. Lassen Sie uns also den Abschnitt ausschneiden, den wir zuvor erstellt haben, und fügen Sie ihn dann in unsere Funktion ein. Also, jetzt wird dieses eingestellte Intervall nur jedes Mal ausgeführt, wenn ein Anruf wiederholt zufällige Form, und wir wollen dies tun, wenn ein Spieler auf die Schaltfläche Play klickt. Also lassen Sie uns einen On Click-Handler zu unserer Play-Schaltfläche hinzufügen. Wenn wir zu unserer Indexseite gehen und dann zum Hauptbereich scrollen, hier ist unsere Play-Schaltfläche hier, die eine ID des Spiels hat. So können wir dies mit get-Element für ID auswählen, fügen Sie einen Klick-Handler hinzu, um unsere Wiederholungszufalls-Shape-Funktion auszuführen. Unten unten, lassen Sie uns einen Kommentar von Startspiel hinzufügen. Lassen Sie uns zuerst unsere Schaltfläche mit get elements by id auswählen. Die ID war play.onclick. Dies wird eine ES6-Pfeilfunktion ausführen. Dann können wir hier drinnen wiederholen zufällige Form, mit den Klammern danach. Dies wird also voran gehen und laufen, speichern Sie dies und dann auf die Konsole, neu laden. Wir sehen noch nichts laufen. Wenn wir nun auf den Play-Button klicken, sehen wir jetzt unsere Objekte sind es generieren. Gute Dinge bewegen sich jetzt gut für unser Spiel. Wir möchten jedoch die Formen auf die Konsole verschieben und sie auf dem Bildschirm anzeigen, und das werden wir im nächsten Video tun. 38. Vorlagen-Literals: Willkommen zurück. Es gibt jetzt einige grundlegende Funktionen in unserem Spiel. Wir erzeugen zwei zufällige Formen, wenn wir oben auf diese Schaltfläche Play klicken. Im Moment sind diese Formen nur innerhalb der Konsole. Aber in diesem Video werden wir tatsächlich diese Formen auf dem Bildschirm anzeigen , damit der Spieler vergleichen kann. Wir werden diesen Stapel auch lernen, wie man Template-Literale verwendet. Dies wird es uns im Grunde erlauben, eine Textzeichenfolge zu erstellen, die Variablen innerhalb übergeben. Wir haben bereits einige Möglichkeiten untersucht, Variablen mit Strings einzubeziehen. Gehen wir rüber zu unseren Skripten. Wir haben uns bereits Methoden wie diese angesehen. Wenn Sie eine Variable wie Name erstellt haben und dies als Wert von Chris festgelegt haben, führen Sie ein Konsolenprotokoll aus. Hier haben wir Strings zu Variablen hinzugefügt, sagen wir „Hallo“, ein Leerzeichen, und fügen Sie dann unseren Namen hinzu. Auf die Konsole und jetzt erwarten wir den Wert von Hello Chris. Mit Vorlagenliterale anstatt diese Strings und Variablen mit dem Plus-Symbol zu verbinden , können wir eine einzelne Zeichenfolge mit Backticks konstruieren. Lassen Sie uns all dies von hier entfernen, und dann, wenn Sie nach dem Backtick auf Ihrer Tastatur suchen, das ist dieses Symbol nur hier, dann können wir den Wert von Hallo innen eingeben. Dann, anstatt auf unseren Variablennamen zu verbinden, können wir diese Variable innerhalb der Backticks hinzufügen. Kann unseren Ausdruck der Variablen zuerst mit einem $ Symbol übergeben, und dann innerhalb der geschweiften Klammern können wir unseren Variablennamen hinzufügen , der einfach so aussieht. Wenn wir dies speichern und zur Konsole gehen, sehen wir, dass der gleiche Wert jetzt im Browser funktioniert. Eine andere Sache, die wir mit Template-Literalen tun können, ist mehrzeiliger Text. Wenn wir eine ziemlich lange Zeichenfolge genau so wollten, und dann weiter unten in der zweiten Zeile. Wir sehen sofort mit diesen zwei verschiedenen Farben hier, dass unser Texteditor einen Fehler hervorhebt. Um dies auf traditionelle Weise zu tun, müssten wir jede Zeile in die Anführungszeichen umbrechen, einen Zeilenumbruch hinzufügen und sie dann wieder mit dem Plus-Symbol verbinden. Wenn Sie jedoch diese neueren Template-Literale verwenden, können wir die Anführungszeichen einfach durch Backticks ersetzen, wie dieses Zitat von hier aus, fügen Sie ein Backtick hinzu, auch zu Beginn. Jetzt ist das alles die gleiche Farbe, also scheint es jetzt zu funktionieren, wir haben den Fehler nicht mehr. Ãœber die Konsole und es gibt unsere mehrzeilige Zeichenfolge, die die Zeilenumbrüche bewahrt. Jetzt können wir dieses Beispiel von vorher entfernen. Großartig jetzt wissen wir, wie man diese Template-Literale verwendet. Wir können sie innerhalb unserer Projekte in die Praxis umsetzen. Bis zu unserer Funktion, die die Wiederholungszufallsform ist, können wir zuerst diese beiden Konsolenprotokolle entfernen, weil wir diese auf dem Bildschirm ausgeben möchten. Dann können wir eine Zeichenfolge erstellen, um unsere Stile zu enthalten. Die Stile, die wir enthalten möchten, sind diese Abschnitte der Objekte. Wir wollen die Farbe, wir wollen die Breite und auch die Höhen, und wir werden diese als Stileigenschaften unserer Formen festlegen. Zurück zu unserer Funktion, gehen wir voran und machen das jetzt. Innerhalb unseres eingestellten Intervalls blasen Sie einfach unsere Form 2 hier. Ich werde voran gehen und eine neue Konstante schaffen. Fangen wir mit Form an. Lassen Sie uns dieses Shape1Styles nennen. Wir werden ein Template-Literal erstellen, das im Grunde eine Zeichenfolge sein wird, die alle unsere Stile enthält. Wir können dann die Stile zu unseren Formen div hinzufügen, und dann wird dies auf dem Bildschirm angezeigt. Werfen wir einen Blick auf das mit den Backticks. Zuerst werden wir die Breite unseres div innerhalb dieser Backticks einstellen, wir können das $ Symbol und dann die geschweiften Klammern hinzufügen, um unsere Variable hinzuzufügen. Die Variable, die einmal auf diese Breite gesetzt ist, ist der Wert einer Breite jedes Objekts. Zurück nach unten, lassen Sie uns dies Shape1, die in dieser Variablen hier gespeichert ist. Shape1.width, und dann müssen wir den Wert von Pixel am Ende hinzufügen. Fügen Sie plus px, Semikolon danach hinzu, dann möchten wir dies in der nächsten Zeile hinzufügen, damit es klarer ist. Die Hintergründe dieses Mal. Fügen wir dies zu unserem $ Symbol hinzu, öffnen Sie die Klammern, und der Hintergrund könnte shape1.color, Semikolon am Ende sein. Dann endlich die Höhen. Dies wird gleich unserer Variablen im Inneren sein, und das ist shape1.height, und dann müssen wir auch am Ende unseren Pixelwert hinzufügen. Plus px, Semikolon am Ende, und stellen Sie sicher, dass diese Backticks ganz am Ende und direkt am Anfang und nicht nach jeder Zeile sind. Jetzt haben wir diese Stile können wir sie auf unsere Formen div anwenden. Wenn wir zu unserer Indexseite gehen, haben wir ein leeres div mit shape1 und auch die shape2. Wir werden diese Stileigenschaften zu diesem div hier hinzufügen. Lassen Sie uns zunächst shape1 mit document.getElementById auswählen, wählen Sie einfach diese. Kurz danach gehen wir zurück zum Anfang und machen Sie ein document.getElementById. Wir wollen Shape1 greifen. Dann, was wir tun werden, ist etwas, das wir uns vorhin angesehen haben. Wir werden das style-Attribut für dieses div setzen. Wir werden die CSSText setzen, um gleich der Zeichenfolge, die erstellt wird, die in dieser Konstante namens Shape1Styles gespeichert wird. Lassen Sie uns dies als unseren CSSText hinzufügen. Shape1Styles mit dem Semikolon am Ende. Dieser CSSText, den wir gerade hier verwendet haben, ist noch nicht etwas, was wir in diesem Kurs gesehen haben. Dies ermöglicht es uns, eine Zeichenfolge von Stilen zu übergeben, genau wie wir hier erstellt haben, in einer Variablen namens Shape1Styles gespeichert ist. Jetzt können wir überprüfen, dass dies im Browser funktioniert. Wenn wir das speichern und dann neu laden, können wir die Konsole schließen und auf Play klicken. Toll, das ist unser shape1 div auf der linken Seite hier. Jetzt können wir alle Stileigenschaften sehen, wie die Farbe, die Höhe und Breite, und jetzt gelten in als Stil Attribute, die wir gerade hier hinzugefügt haben. Nun, was wir tun müssen, ist, dies für unsere Form2 zu wiederholen. Lassen Sie uns unsere Form1 hier kopieren, und dann könnten wir das direkt unten einfügen, und dann lassen Sie uns das bewegen, um alles schön aufgereiht zu halten. Jetzt müssen wir nur form1 ändern, um shape2 zu sein. Dasselbe für all diese innerhalb von hier können wir dies ändern, um Shape2 außer für die Farbe und auch für die Höhe zu sein , und dann, wie bevor wir diese Codezeile hier kopieren können, können wir auch das document.getElementById auswählen. Dieses Mal möchten wir das Shape2 div auswählen, das in der Indexseite vorbei ist, die dieses div hier ist. Genau das gleiche tun wir style.cssstext, und dies wird gleich Shape2Styles sein. Fügen Sie am Ende ein Semikolon hinzu, und schließen Sie dann den Browser, laden Sie neu und hoffentlich sollten wir zwei zufällige Formen erhalten, wenn wir auf „Play“ klicken. Großartig, jetzt sind diese beiden Formen auf dem Bildschirm, wir brauchen jetzt eine Möglichkeit, sie zu vergleichen. Und das sehen wir uns im nächsten Video an. 39. Vergleich von Objekten und Bewertungen: Jetzt haben wir zwei zufällige Formen, die auf dem Bildschirm erscheinen. Wir brauchen eine Möglichkeit, diese beiden geformten Objekte zu vergleichen. Wenn der Spieler auf die, Match Taste klickt , die gerade hier ist. Um zu beginnen, haben wir oben eine Variable, die spielen genannt wird, die wir früh in diesem Abschnitt setzen , der ebenfalls auf false gesetzt ist. Innerhalb der All-Star-Spielfunktion können wir diese Variable ändern, um wahr zu sein, sobald das Spiel begonnen hat. Scrollen wir nach unten zu unserem Aktienziel Abschnitt , der gerade hier ist. Dann, sobald der Benutzer auf die Schaltfläche „Play“ geklickt hat, können wir dann voran gehen und das Spiel so einstellen, dass es wahr ist. Außerhalb dieser Funktion werde ich einen neuen Kommentar erstellen, der verglichen wird. Jetzt können wir einen Ereignishandler zu der Match-Schaltfläche hinzufügen, um eine Funktion auszulösen, wenn darauf geklickt wird. Gehen wir über Ihre Index-Seite und werfen Sie einen Blick auf unsere Match-Schaltfläche, die gerade hier ist. Dies hat eine ID der Ãœbereinstimmung, so dass wir dies innerhalb unserer Skripte greifen können, also document.getElementById, die ID des Matches. Dann können wir einen onclick Ereignishandler verwenden, eine ES6-Pfeilfunktion auslösen. Dann können wir innerhalb dieser Funktion eine if-Anweisung hinzufügen, um zu überprüfen, ob eine Menge auf true gespielt wird. Nehmen wir an, wenn die Variable der Wiedergabe, so können wir einfach sagen, wenn spielen, und wenn dies wahr ist, wird dies dann den Code innerhalb der if-Anweisung ausführen. Dies bedeutet im Grunde, dass der Code in dieser if-Anweisung nur ausgeführt wird, wenn der Player angeklickt wird, Start. Sicherlich spielen jede Variable, um wahr zu sein. Innerhalb verschachtelt können wir eine andere if-Anweisungen ausführen. Dies wird verwendet, um die Punktzahl des Spielers zu erhöhen, wenn die Objekte übereinstimmen. Lets nest eine zweite if-Anweisung, genau so. Aber wie vergleichen wir zuerst die Objekte, um zu überprüfen, ob sie gleich sind? Dafür haben wir etwas namens objects.is. Dies ermöglicht es uns, in und heraus zu übergeben, Variablen zu formen, um zu vergleichen. Objects.ist eine weitere neue JavaScript-Funktion von ES6 oder ES 2015, genau wie die Pfeilfunktionen und Konstanten lassen, die wir uns vorher angesehen haben. In den Klammern hier können Sie Objekte sagen, also object.is, und dann die Klammern kurz danach öffnen. Im Inneren können wir unsere Werte übergeben, die wir vergleichen wollen, die Sie in den Variablen der Form 1 gespeichert haben und auch 2 geformt haben. Wenn diese beiden Objekte im Inneren hier übereinstimmen, dann können wir die Punktzahl des Spielers erhöhen. Wir haben die Punktzahl des Spielers an der Spitze, könnte auf Null gesetzt und in dieser aktuellen Punktevariable gespeichert werden. Lasst uns das erhöhen. Wenn das Objekt eine Ãœbereinstimmung ist, haben wir die Punktzahl gesetzt, plus, plus. Oben in der index.html haben wir auch ein span Element mit der ID der Punktzahl, die gerade hier ist. Dies ermöglicht es uns, diese Elemente zu beschneiden und dann mit der Punktzahl eines Spielers zu erhöhen. Wir können diesen Wert auf dem Bildschirm sehen. Lasst uns das jetzt wieder zu unseren if-Aussagen machen. Wenn diese beiden Objekte übereinstimmen, werden wir die Punktzahl um eins erhöhen und dann das document.getElementById auswählen, dann greifen Sie auf den Span-Container, die ID der Punktzahl hatte. Setzen Sie innerHTML auf einen Wert der aktuellen Punktzahl. Gut, sprengen Sie das einfach. Nach unserem if Abschnitt, den Sie gerade hier, werden wir unsere l Aussagen hinzufügen. Diese l Anweisungen werden ausgeführt, wenn die Objekte nicht übereinstimmen. Dies wird verwendet, tun Sie das Gegenteil und nehmen Sie dann einen Punkt aus der Punktzahl. Sagen wir, sonst, aktuelle Punktzahl, und wir werden dies um eins verringern. Dann machen Sie auch die gleiche Zeile hier, also document.getElementById, die Id, die wir greifen möchten, ist wieder ein Ergebnis. Dann erhalten Sie den inneren HTML-Code, um gleich der aktuellen Punktzahl zu sein. Aktualisieren Sie dann, und lassen Sie uns dies los, klicken Sie auf die Schaltfläche Wiedergabe. Nun müssen wir auf diese Schaltfläche „Abgleichen“ klicken, wenn diese beiden Formen gleich sind. Lasst uns diese winken, um die gleichen zu sein. Das geht auf den Wert von 1, 2, 3. Das funktioniert auch gut. Wenn wir darauf klicken, wenn die Formen nicht übereinstimmen, sehen wir einen Punkt jedes Mal verlieren. Großartig, alles scheint gut zu funktionieren. Aber bevor wir dies als abgeschlossen bezeichnen, gibt es einige kleine Probleme, die wir ansprechen müssen. Zuerst, nachdem das Spiel gestartet wurde, wenn wir weiterhin auf den Play-Button klicken, also lassen Sie uns das Spiel starten. Dann, wenn wir dies mehrmals klicken, wird dies das Strumpffunktionsmodell Monate aufrufen viele zufällige Formen erzeugen. Wenn wir das Spiel spielen, möchten wir den Benutzer darauf beschränken, diese Match-Taste nur einmal pro eingestelltem Intervall zu drücken. Derzeit, wenn der Benutzer mehrere Male darauf klickt, wird die Punktzahl weiterhin rückwärts oder vorwärts gehen. Wir möchten dies auf nur einen Klick pro Auswahl beschränken. Beginnen wir mit der Deaktivierung der Stopp-Taste, wenn das Spiel bereits läuft. Wir können dies in der Seite der Spielfunktion tun. zu unseren Skripten, und gehen wir zum Star Game Abschnitt hier, die der Click-Handler ist. Zuerst müssen wir unseren Play-Button greifen, der eine ID des Spiels hat, die wir hier sehen können. Dann zurück zu unserer Star Spiel Funktion, knapp unter dem Spiel gleich wahr. Lassen Sie uns einen Befehl hinzufügen, um zu sagen, deaktivieren Sie die Play-Schaltfläche, wenn Sie spielen. Document.getElementsById, wählen Sie unsere Play-Schaltfläche, und dann können wir set.disabled gleich true sein. Lassen Sie uns dies testen, und klicken Sie dann auf Wiedergabe. Wir sehen, sobald Sie auf Spiel klicken, dass es grau wird, und wir können, t klicken Sie auf diesen Button mehr. Wenn wir aktualisieren, jetzt ist unser Play-Button wieder normal, und wir können ein neues Spiel neu starten. Dann können wir nun fortfahren, um den Spieler zu stoppen, der mehrmals auf diesen Match-Button klickt. Lassen Sie uns zuerst diese Match-Schaltfläche innerhalb einer Variablen speichern. Wir setzen es bis an den Anfang unseres Codes. Lassen Sie uns eine Konstante namens Match-Schaltfläche einrichten, und unsere vertrauten document.getElementById. Die Schaltfläche, die Sie auswählen möchten, hat die ID von viel, wir fügen am Ende ein Semikolon hinzu. Ich beginne diese Referenz innerhalb einer Konstante, weil wir dies mehrmals auswählen werden. Wir werden zuerst die Schaltfläche deaktivieren, sobald sie angeklickt wurde, und dann die Schaltfläche wieder aktivieren, sobald ein neues eingestelltes Intervall generiert wird. Nach unten können wir diese Schaltfläche so einstellen, dass sie deaktiviert wird, nachdem sie angeklickt wurde. Unten innerhalb des Vergleichsabschnitts, und wir werden dies in Seite des Spielabschnitts tun. Nehmen wir an, matchbtn.disabled wird gleich wahr sein. Dadurch wird die Schaltfläche deaktiviert, nachdem sie angeklickt wurde. Innerhalb dieser Onclick-Funktion muss dieser Button dort für jeden Zyklus reaktiviert werden. So können wir es jedes Mal wieder aktivieren, wenn eine neue Form erzeugt wird. Bis zum eingestellten Intervallabschnitt. Kurz danach hier, ganz oben, können wir auch matchbtn.disabled auswählen, aber diesmal falsch sein. Lassen Sie uns dies testen, aktualisieren Sie den Browser, klicken Sie auf, Play. Jetzt beginnt unser Spiel, und wenn wir versuchen, mehrmals auf den Match-Button zu klicken, funktioniert es nur, wenn eine neue Form erzeugt wird, so dass wir nur einmal pro Auswahl darauf klicken können. Toll, das ist unser Spiel. Jetzt fertig. Fühlen Sie sich frei, voran und machen Sie Anpassungen, nehmen Sie Änderungen oder spielen Sie mit der Geschwindigkeit der Formen mit unserem eingestellten Intervallwert nur hier, oder experimentieren Sie generell mit neuen Funktionen, die Sie mögen. Ich hoffe, Sie haben es genossen, dieses Spiel zu bauen und Tschüss vorerst. 40. Einführung in reguläre Ausdrücke: Willkommen zurück Jungs. Jetzt schauen wir uns etwas an, das in JavaScript wirklich nützlich ist. Dies sind reguläre Ausdrücke. Reguläre Ausdrücke, die oft auf Ablehnungen verkürzt werden, eine Möglichkeit, ein Muster oder eine Kombination von Zeichen innerhalb einer Textzeichenfolge zu finden. Wenn wir zum Beispiel einen Textabsatz hätten, könnten wir sagen, dass wir nach doppelten Leerzeichen suchen und sie so reduzieren wollten, dass sie nur ein Leerzeichen sind. Alles, was wir für jedes Wort innerhalb eines Satzes suchen und dann das erste Zeichen in einen Großbuchstaben ändern konnten. Gehen Sie zu diesen Starter-Akten. Dann gehen wir in der Seitenleiste zur Nummer 32, die Einführung in reguläre Ausdrücke ist. Im Inneren haben wir einen einfachen Lorem ipsum Starttext , den Sie gerade in den P-Elementen gespeichert haben. Öffnen Sie dieses Beispiel innerhalb des Browsers. Zuerst können wir diese Textelemente nur hier greifen und sie innerhalb einer Variablen speichern, um mit der Arbeit zu beginnen. bis zu unseren Skripten Lassen Sie unsbis zu unseren Skriptenmit dem Let-Text gleich Dokument Punkt Query Selector beginnen. Wir wollen unsere P-Elemente greifen, die unseren Text speichern. An diesem wird als String gesehen, und dann wollen wir die innere HTML greifen. Wir können mit den Grundlagen und wie Text beginnen , um die Position eines bestimmten Wortes als Zeichenfolge zu finden. darunter ist dies eine ziemlich einfache, um nach Text zu suchen. Alles, was wir tun müssen, ist Textpunktsuche zu sagen und dann innerhalb der Klammer können wir eine Zeichenfolge hinzufügen, nach der Sie suchen möchten. Lassen Sie uns nach einem dieser Wörter innerhalb einer Zeichenfolge suchen. Lassen Sie uns gehen für, „amet“ fügen Sie dies in den Anführungszeichen, A-M-E-T. Jetzt lege ich das auf die Konsole. Lassen Sie uns zuerst diese Ergebnisse innerhalb der Variablen speichern. Lassen Sie neuen Text gleich unserer Suche und dann könnten wir ein Konsolenprotokoll für den Wert des neuen Textes tun. Geben Sie das ein Speichern und dann zu unserem Beispiel, öffnen Sie die Konsole und wir erhalten den Wert von 23. Dies liegt daran, dass das Wort, nach dem wir in unserer Textzeichenfolge gesucht haben, an Position 23 beginnt, was im Grunde bedeutet, dass dies 23 Positionen von Anfang an ist. Lassen Sie uns dieses Beispiel auskommentieren und einen Blick auf ein neues werfen. Wir werden dieses Konsolenprotokoll entfernen wird dies ausschneiden und tatsächlich fügen Sie es einfach unten auf der Unterseite. Wir können es mit allen oben genannten Beispielen verwenden. Jetzt haben wir uns die Suche nach einer Zeichenfolge innerhalb unseres Textes angesehen. Sobald wir eine Ãœbereinstimmung gefunden haben, wollen wir sie oft durch etwas anderes ersetzen. Dafür haben wir die Ersetzungsmethode. Unten auf dem Ersetzungstext, werden wir String. Lassen Sie uns das gleiche Beispiel von vor erstellen , so dass neuer Text, aber dieses Mal anstatt es zu tun, Text-Punkt-Suche, können wir Text Punkt ersetzen. Ersetzen nimmt zwei verschiedene Werte, der erste, den wir eine Zeichenfolge hinzufügen, nach der gesucht werden soll. Ich werde nach lorem suchen, das das erste Wort im Inneren ist und dann als zweiter Wert, der durch ein Komma getrennt ist, können wir ein Wort hinzufügen, mit dem Sie es ersetzen möchten. Lassen Sie uns für jedes Wort Ihrer Wahl gehen. Was ist unsere Chips Nummer? Wir haben auch unser Konsolenprotokoll mit neuem Text unten unten. Wenn wir den Browser neu laden und einen Blick werfen, sehen wir jetzt unser erstes Wort von Lorem wurde durch Chips ersetzt. Das funktioniert großartig, aber das liegt daran, dass wir das Wort lorem hinzugefügt haben. Gerade hier haben wir ein großes L, es passt zu unserer Saite. Wenn wir das in Kleinbuchstaben ändern könnten, würde es nicht funktionieren. Ändern Sie es in Kleinbuchstaben L, aktualisieren Sie. Ich werde sagen, das Wort Lorem wurde diesmal nicht ersetzt. Dies liegt daran, dass bei dieser Ersetzung die Groß- und Kleinschreibung beachtet Wenn wir stattdessen eine Suche durchführen möchten , wird.Wenn wir stattdessen eine Suche durchführen möchten ,bei der Groß- und Kleinschreibung nicht berücksichtigt wird, können wir unser Muster hinzufügen, um innerhalb der Schrägstriche zu suchen. Zurück zu unserem Code. Lassen Sie uns diese Zeile von vorher kopieren. Wir können dieses Beispiel in lassen, indem wir dies auskommentieren. Wir können dies wieder in unterhalb dieses ersetzen Text mit einem regulären Ausdruck einfügen. Anstatt eine Textzeichenfolge wie diese zu haben, werden wir einen regulären Ausdruck innerhalb von zwei Schrägstrichen erstellen. Lassen Sie uns nach unserem Wort von Lorem suchen, dann können wir dem I-Modifikator kurz danach hinzufügen. Wenn wir das speichern und dann aktualisieren, sehen wir jetzt das Wort lorem wird jetzt durch Chips ersetzt, obwohl das L Kleinbuchstaben ist. Das Wort lorem erscheint nur einmal innerhalb dieser Textzeichenfolge, aber wenn Sie nach etwas suchen möchten, das mehrfach angezeigt wird, z. B. einem einfachen E-Zeichen. Lassen Sie uns voran und werfen Sie einen Blick auf dies, wenn wir dieses Beispiel kopieren und dann kommentieren, und fügen Sie es dann in und unter dem Abschnitt Ich ändere Abschnitt. Wir können hier sehen, dass der I-Modifikator, wir werden eine Suche machen, die in Groß- und Kleinschreibung beachtet wird, aber Sie werden nur die erste Ãœbereinstimmung innerhalb unserer Zeichenfolge ersetzen. Wir ändern lorem zu E, es gibt mehrere Vorkommen und ersetzt dann mit einem Großbuchstaben A. Laden Sie den Browser neu. Jetzt sehen wir, dass nur das erste Vorkommen eines E ersetzt wird. Es gibt kein Großbuchstabe A mehr in unserer Saite. Wenn wir jedoch alle Vorkommen ersetzen möchten, können wir diesmal den G-Modifikator verwenden. Lassen Sie uns diese Codezeile hier kopieren, dies auskommentieren und dann unter dem Modifikator G einfügen. Alles, was wir tun müssen, ist das I zu einem G zu ändern, den Browser neu zu laden. Jetzt sehen wir, dass alle Vorkommen von E durch ein Großbuchstabe ersetzt wurde A. G steht für Global und wird finden ersetzen alle Ãœbereinstimmungen in unserer Textzeichenfolge statt nach dem ersten zu stoppen. Genau wie wenn wir den Modifikator I verwenden. Es wird nur nach einem Buchstaben suchen, aber wenn wir mit mehreren Buchstaben übereinstimmen wollen, können wir diese innerhalb von eckigen Klammern hinzufügen. Werfen wir einen Blick auf das. Wenn wir diese Zeile hier kopieren und dies auskommentieren. Lassen Sie uns dies in den Startdateien für zukünftige Referenz lassen, fügen Sie dies unter dem eckigen Klammerabschnitt ein und dann innerhalb aller Schrägstriche können wir einige eckige Klammern hinzufügen. In diesen eckigen Klammern, wenn wir nach H, G oder S. suchen, lassen Sie uns diese Kleinbuchstaben mit dem G-Modifikator machen und dann etwas hinzufügen, das auffällt. Lassen Sie uns einige Sterne hinzufügen und in Großbuchstaben wird „ERSETZT“ sagen. Wenn wir durch die Zeichenfolge suchen, das erste Vorkommen von H, G oder S dann durch die Zeichenfolge hier ersetzt. Speichern Sie dies, und dann neu laden und scrollen Sie nach oben, können wir sehen, das erste Vorkommen wurde durch unsere Zeichenfolge hier ersetzt. Dies stoppt auch nach dem ersten Spiel. Wenn wir alle Vorkommen von H, G oder S. ersetzen möchten, könnten wir den Modifikator G erneut hinzufügen. Lassen Sie uns diese Zeile hier kopieren, dies auskommentieren, und fügen Sie diese dann unter dem Abschnitt G ändern. Nach unserem regulären Ausdruck fügen wir den G Modifikator hinzu, speichern Sie dies und wir können sehen, dass alle Ãœbereinstimmungen jetzt ersetzt wurden. Diese eckigen Klammern funktionieren auch für Zahlen. Lassen Sie uns das kopieren, kommentieren und fügen Sie direkt über unserem Konsolenprotokoll in den eckigen Klammern hinzu, anstatt nach unseren Buchstaben zu suchen, gehen wir für die Zahlen drei bis sechs. Dies wird alle Zahlen von drei bis sechs finden, das G entfernen und es dann durch diese Textzeichenfolge hier ersetzen. Damit dies funktioniert, müssen wir in unserem obigen Text eine Zahl hinzufügen. Lassen Sie uns für Nummer fünf gehen, fügen Sie dies in, neu laden. Lassen Sie uns versuchen, danach zu suchen, da gehen wir. Da sind unsere Texte von ersetzt in einer Position unserer Nummer fünf. Dies ist ein erster Blick auf die Verwendung von regulären Ausdrücken, um einem Muster zu entsprechen. Wenn wir Google Mozilla reguläre Ausdrücke. Sie sind über, finden viele weitere Beispiele in diesem Abschnitt mit regulären Ausdrücken. Wir klicken darauf und gehen dann zur Mozilla-Dokumentation. Wir können sehen, dass es viele verschiedene Möglichkeiten gibt, Wortspiele zu erstellen. Wenn wir nach unten scrollen, sind einige dieser regulären Ausdrücke ziemlich komplexes Werkzeug. Ich werde nicht alle diese durchlaufen, da die meisten spezifischen Anwendungsfälle gefragt werden. Sie können fast jede Art finden, wie es einem Muster entspricht, indem Sie reguläre Ausdrücke verwenden. Im nächsten Video werden wir ein kleines Projekt mit regulären Ausdrücken erstellen , um die Eingaben des Benutzers zu übernehmen und eine Suche und Ersetzen durchzuführen. 41. Projekt RegEx finden und ersetzen: Willkommen zurück Jungs. In diesem Video werden wir reguläre Ausdrücke verwenden, um eine einfache App zu finden und zu ersetzen. Innerhalb der Startdateien haben wir ein Grundformular, in dem der Benutzer ein Wort innerhalb des Suchabschnitts eingeben kann. Dies wird und dann ein Wort in seinem ursprünglichen Text finden und dann können wir ein Wort wählen, um es zu ersetzen. Sobald diese Schaltfläche „Ersetzen“ ausgewählt ist, löst diese Schaltfläche „Ersetzen“ eine Funktion aus, die all dies geschieht. Beginnen wir mit dem Hinzufügen eines Ereignis-Listener zu dieser Schaltfläche. Oben in den Starter-Dateien, das ist Nummer 33, die ablehnt, finden, ersetzen. Hier unten haben wir unser Formular mit den Sucheingaben, den Ersetzen-Eingängen und dann unseren Button, der die ID von ReplaceBTN hat. Gehen wir runter zu unserem Skript, das ganz unten ist. Lassen Sie uns so mit document.getElementById. Die ID, wie wir gerade gesehen haben, ist replaceBTN. Fügen Sie dann einen Ereignis-Listener hinzu. Innerhalb der Klammern wissen wir, dass wir zwei Werte hinzufügen müssen. Der erste ist der Name des Ereignisses. Wir werden auf die Klick-Events hören. Dann werden wir eine Pfeilfunktion wie diese auslösen. Drinnen hier diese vier Dinge, die wir brauchen, um innerhalb von Variablen zu greifen und zu speichern. Wir müssen die Formulareingaben für den Suchabschnitt erfassen. Wir müssen die Eingabe für den Ersetzungsbereich ergreifen und dann müssen wir unseren ursprünglichen Text greifen, der unser erster Satz von p-Elementen ist. Dann müssen wir unsere zweiten p-Elemente greifen, die unseren Text mit den ersetzten Wörtern enthalten wird. Lassen Sie uns diese vier Variablen innerhalb unseres Ereignis-Listener hinzufügen. Beginnen wir damit, unseren ursprünglichen Text und dann unseren modifizierten Text innerhalb der p-Elemente zu packen . Lassen Sie Originaltexte gleich documents.querySelectorAll sein. Der Originaltext ist das erste Vorkommen der p-Elemente. Fügen Sie hier das p-Tag an der Indexposition Null hinzu. Dann können Sie diese Zeile kopieren und einfügen Sie sie in knapp darunter. Dieser wird der geänderte Text sein. Der einzige Unterschied ist, dass das p-Element diesmal bei Index Nummer eins ist. Jetzt müssen wir auch die Benutzereingaben speichern, die eine ID hat oder suchen und auch ersetzen. Lassen Sie diese beiden auch in einer Variablen installieren. Lassen Sie unseren FindText gleich documents.getElementById sein, der erste war gefunden. Wir wollen den Wert des Benutzers zu erfassen. Wir haben Wert, kopieren Sie diese Zeile und fügen Sie sie wieder direkt unten ein. Dies wird der Ersetzungstext sein. Lassen Sie uns Text ersetzen. Die ID wird diesmal ersetzt. Okay, gut, also stellen Sie sicher, dass Ihr wie dieses Beispiel hier aussieht. Jetzt haben wir alle Informationen, die wir brauchen, in Variablen gespeichert. Als nächstes müssen wir den inneren HTML unseres ursprünglichen Textes greifen. Dies ist gerade hier Texturierung, also ganz unten in unserer Funktion, sagen wir OriginalText.innerHTML beschreibt den gesamten Textinhalt aus unserem Originaltext. Dann werden wir die Punktersetzungsmethode verwenden, die wir uns im letzten Video angeschaut haben. Dies nimmt unsere beiden Werte ein. Das erste ist das Wort, das wir finden wollen. Dies wird in einer Variablen namens FindText gespeichert und dann durch ein Komma getrennt, das Wort, durch das wir es ersetzen wollen. Diese wird innerhalb dieser Ersetzungstext-Variable gespeichert. Ersetzen Sie Text als unseren zweiten Wert, das Semikolon am Ende, dann können wir dies innerhalb einer Variablen namens NewText installieren. Schließlich wollen wir diesen NewText auf unsere leeren p-Elemente ausgeben, die gerade hier sind. Wir haben bereits eine Referenzliste namens modifizierter Text. Lassen Sie uns dies unten hinzufügen, so modifiedText.innerHTML wird gleich diesem NewText nur hier sein. Okay, gut. Ich denke, wir sind bereit, zum Browser zu gehen und dies einen Test zu machen. Lassen Sie uns nach einem unserer Wörter suchen. Nehmen wir an, sitzt, finden Sie das Wort der sitzt. Dann ersetzen Sie es mit Standfuß. Drücken Sie ersetzen und nichts scheint zu passieren. Wenn wir ein wenig genau hinschauen und wir fügen dies noch einmal hinzu. Wenn wir auf diesen Ersetzen-Button klicken und sehr genau nach unten am unteren Rand beobachten. Wir können sehen, die kurz der neue Text wird aufspült und dann verschwinden. Dies liegt daran, dieser Teil innerhalb der Formularelemente. Wenn wir auf diese Schaltfläche klicken, ist das Standardverhalten das Senden des Formulars. Dies bewirkt, dass die Seite neu geladen wird. diesem Grund sind die Eingaben nun ganz oben klar, da die Seite aktualisiert wurde. Um dies zu beheben, können wir das Standardverhalten dieses Ereignisses verhindern. Zuerst können wir die e, die die Details unserer Ereignisse sind, innerhalb derFunktion Klammer hinzufügen die die Details unserer Ereignisse sind, innerhalb der , dann können wir das Standardverhalten innerhalb des Funktionskörpers mit e.preventDefault verhindern . Dadurch wird das Absenden unseres Formulars verhindert, und daher wird keine Seitenaktualisierung angezeigt. Versuchen wir es noch einmal. Wir ersetzen sitzen mit Stand, klicken Sie auf „Ersetzen“ und dort gehen wir unter unsere neue Tech-Sektion. Wir sehen, dass das Wort sitzen durch Stand ersetzt wurde und wir sehen nicht mehr eine Seite neu laden. Es gibt auch eine andere Möglichkeit, dies zu beheben. Anstatt e.preventDefault zu haben, können wir dies entfernen. Wir können unsere e-Variable von hier entfernen und stattdessen, wenn wir auf die Schaltfläche gehen, innerhalb unseres Formulars können wir auch den Typ der Schaltfläche hinzufügen. Jetzt ist dies eine Art von Schaltfläche, anstatt zu senden. Dadurch wird die standardmäßige Ãœbermittlungsaktion gestoppt. Jetzt lasst uns das mal ausprobieren und dieses Mal ersetzen wir Ipsum durch eines der Worte. Klicken Sie auf „Ersetzen“. Jetzt haben wir auch unseren neuen Text jetzt dieses ersetzte Wort. Die letzte Sache, die Sie betrachten sollten, ist, wie Sie diese Suche Groß- und Kleinschreibung nicht beachten können. Wenn wir nach dem Wort lorom mit diesen kleinen l suchen und es durch irgendetwas ersetzen. Klicken Sie auf „Ersetzt“. Wir sehen, dass dies unten nicht funktioniert. Sie denken vielleicht, wir könnten einfach einen Modifikator wie diesen hinzufügen, also lassen Sie uns zu unserem neuen Text in den Suchen und Ersetzen unsere zwei Schrägstriche und dann die I-Modifikatoren einfach so hinzufügen. Allerdings, wenn wir das sagen, aktualisieren und geben Sie diese einen Sprung, geben Sie Lorem. Unsere Ersatzwörter, wir sehen, dass dies immer noch nicht funktioniert. Damit dies funktioniert, müssen wir eine Konstruktorfunktion verwenden, also zurück zu unseren Skripten. Nur ein bisschen von einem neuen Text werden wir sagen, „Neuer regulärer Ausdruck“ genau so. Dann in diesen Klammern werden wir in diesem Suchtext übergeben. Unser Design ist unser erster Wert. Getrennt durch ein Komma können wir den Modifikator I hinzufügen. Diese Konstruktorfunktion wird die Ergebnisse einschließlich dieses Modifikators kompilieren und dann könnten wir dies innerhalb einer Variablen installieren. Nehmen wir an, finden Sie mit Modifikator und setzen Sie dies auf unsere Konstruktorfunktion. Dann können wir diesen Variablennamen verwenden und durch unsere Ersetzung übergeben. Anstatt das, was wir hier haben, lassen Sie uns einfach einen Variablennamen übergeben. Sie müssen speichern und dann versuchen wir dies, so lorem, mit Kleinbuchstaben l. Drücken Sie Ersetzen und jetzt sehen Sie, das funktioniert. Großartig, so dass diese Konstruktorfunktion unsere Laufzeit kompiliert , die ideal für Muster ist, die sich ändern können. Obwohl wir das Muster kennen, nach dem wir suchen, kann es sich je nach Groß- und Kleinschreibung der Buchstaben ändern. Großartig, wir haben jetzt eine funktionierende Suche und Ersetzen, die Groß- und Kleinschreibung nicht beachtet. Lasst uns nun zum nächsten Video übergehen. 42. HTTP, Anfrage und Antwort: Bisher haben wir in diesem Kurs hauptsächlich untersucht, wie die Dinge am Front-End funktionieren. Wir haben Benutzeroberflächen, verschiedene Layouts erstellt , Responsive Design betrachtet und auch, wie man JavaScript verwendet. Das ist alles großartig und wirklich wichtig, dass wir all das verstehen. Ab diesem Abschnitt werden wir auch mehr auf das Back-End von Websites schauen. Wie eine Website mit Servern, verschiedenen Datenquellen interagiert und generell, wie sie mit externen Quellen kommunizieren. Wenn unsere Benutzeroberfläche mit Servern kommuniziert oder generell Informationen anfordert, gibt es einige Konzepte, die wir wissen müssen, um vollständig zu verstehen, was passiert. Wir müssen kein Experte sein, um zu tief in jedes dieser Konzepte einzugehen. Da die meisten selbst als Thema kommen, aber zumindest ein allgemeines Verständnis wird uns wirklich helfen zu verstehen, was vor sich geht. Das erste Konzept, das wir uns ansehen werden, ist das Client-Server-Modell. Wie Sie hier auf der Folie sehen können, haben wir auf der linken Seite einige Beispiele von Kunden. Ein Client kann ein Webbrowser, ein Telefon oder sogar ein Terminal auf unserem Computer sein. Grundsätzlich ist der Client derjenige, der die Anfragen macht, z. B. eine Anforderung von Webseiten, die Sie anzeigen möchten. Auf der rechten Seite haben wir den Server, der diese Ressourcen bereitstellt, alle Dienste, die der Kunde anfordert, wie unsere Webseite, die er an den Client zurücksendet, wenn er sie hat. Wenn ein Client eine Anforderung stellt, z. B. eine Webseite anfordern, wird dies als HTTP-Anforderung bezeichnet. HTTP steht für Hypertext Transfer Protocol. Dies ist der Standard oder das Verfahren, das bei der Ãœbertragung von Hypertext-Daten über das Internet verwendet wird. Der Client geht weiter und stellt die Anfrage, und dann wird der Server versuchen, auf diese Anfrage zu antworten, wenn möglich. Es kann mit Dingen wie dem HTML-Code für die Webseite, alle Bilder oder Skripte reagieren , die möglicherweise auch benötigt werden. Obwohl dies ein wenig komplex klingen mag, ist es etwas, das wir jedes Mal tun, wenn wir einen Webbrowser besuchen. Zunächst einmal, wenn wir zur Wikipedia-Homepage gehen, oben oben, werden Sie feststellen, dass HTTPS am Anfang steht. Dies ist wie das HTTP, das wir zuvor erwähnt haben. Aber heutzutage wird HTTP secure häufiger verwendet, da es eine verschlüsselte Version, eine größere Sicherheit und Privatsphäre bietet . Sobald wir eine URL eingeben und „Enter“, den Web-Browser, oder in unserem Fall, stellt der Client jetzt eine Anfrage für diese Webseite. Wenn alles in Ordnung ist, antwortet der Server dann mit der angeforderten Seite und zeigt sie dann im Browser an. Dieser Anforderungsantwort-Zyklus funktioniert auch für andere Clients, wie z. B. ein Computerterminal, das auch ein Client ist. Öffnen wir das Terminal. Mach das ein bisschen größer. Wir werden ein Terminal mehr verwenden, wenn wir zum Knotenabschnitt dieses Kurses kommen und Sie müssen nicht mit dem Abschnitt folgen, wenn Sie nicht möchten. Aber alles, was ich verwenden werde, ist ein cURL-Befehl , der auch eine HTTP-Anfrage vom Terminal macht. Wir tun dies, indem wir cURL eingeben, und dann können wir unsere URL eingeben, genau wie wir es vorher im Browser gesehen haben. HTTPS://und dann www.wikipedia.org. Dann drücken Sie „Enter“. Dann, wenn wir nach oben scrollen, um eine Menge von Informationen zu sehen, wird zurück zu uns zurückgegeben. Dies ist der gesamte HTML-Code, der für die Wikipedia-Website verwendet wird. Vieles davon wird üblich aussehen, wie die divs, unsere span Tags und alle verschiedenen Klassen, die diese hinzugefügt werden. Es kann nicht ein bisschen schwer zu lesen sein. Dies liegt daran, dass ein Terminal nicht weiß, wie man mit diesem HTML umgeht, der an uns zurückgegeben wird, also wird es nur als Klartext angezeigt. Auf der anderen Seite weiß ein Webbrowser genau, was mit diesem HTML zu tun ist. Wenn Sie also zum Browser gehen und mit der rechten Maustaste klicken und dann zu Seitenquelle anzeigen gehen, kann dies auch ein wenig schwer zu lesen sein, aber dies ist die gleiche Information, die vom Server zurückgesendet wird. Der Unterschied ist, dass der Webbrowser weiß, wie man mit diesen Informationen umgeht und wie man sie dann in eine Webseite umwandelt. Wenn wir eine HTTP-Anfrage machen, gibt es verschiedene Anforderungsmethoden, die wir verwenden können. Hier sehen wir vier Beispiele namens GET, POST, PUT und DELETE. Es gibt mehr als diese vier, aber diese sind häufig, um uns anzufangen. Wenn wir eine Webseite erhalten möchten oder wir einige Daten erhalten möchten, können wir verwenden, was eine GET-Anfrage genannt wird. Dies ist, was im Browser verwendet wird, um unsere Webseite vom Server zu bekommen. POST führt das Gegenteil aus und sendet einige Daten zur Verarbeitung an den Server, z. B. das Hinzufügen eines neuen Datensatzes in eine Datenbank. Als nächstes haben wir die PUT-Anfrage. Genau wie POST werden auch einige Daten an den Server gesendet, um sie zu verarbeiten. Der Unterschied besteht jedoch darin, wenn diese Daten oder die Ressource bereits auf dem Server vorhanden sind, wird sie weitergehen und ersetzen. Dies wird häufig zum Aktualisieren einiger Daten verwendet. Das letzte ist das DELETE und das ist ziemlich selbsterklärend. Dadurch wird die Ressource oder die Daten, die wir angeben, gelöscht. Wir werden einige dieser Methoden in diesem Kurs verwenden, insbesondere im abschließenden Projekt, wenn wir mit einer Datenbank interagieren. Ein Teil dieser Antwort vom Server ist auch ein Statuscode. Es gibt viele verschiedene Antworten, aber hier sind einige Beispiele. Ein Code von 200 bedeutet, dass die Anforderung erfolgreich war und die angeforderte Ressource zurück an den Client innerhalb des Hauptteils der Antwort gesendet wird. Als nächstes haben wir die 301 Antwort, die eine Umleitungsnachricht ist. Dies bedeutet, dass die Ressource, die wir anfordern möchten, dauerhaft verschoben wurde. Normalerweise erhalten wir den neuen URI, der mit der Antwort angegeben wird. Eine 401-Antwort bedeutet, dass der Client nicht autorisiert ist und in der Regel eine Authentifizierung erfordert, bevor die angeforderte Antwort empfangen wird. 404 ist eine häufige, die Sie vielleicht bereits gesehen haben, wenn Sie im Internet surfen. Dies ist häufig, wenn eine Seite nicht gefunden werden kann, z. B. wenn ein Benutzer eine URL falsch eingegeben hat. Vieles davon scheint einfach im Hintergrund durch Magie zu passieren, aber wir können eine bessere Vorstellung davon bekommen, was in den Entwickler-Tools vor sich geht. Wenn wir zurück zu einer Webseite wie Wikipedia, und dann mit der rechten Maustaste, und dann überprüfen, innen hier, können wir auf die Registerkarte Netzwerk gehen, nur oben hier, und dann drücken Sie Aktualisieren und dann sehen dass wir eine Menge verschiedene Dateinamen, die an uns zurückgesendet wurden. Wir haben die Hauptseite. Wir haben einige verschiedene JPEG-Bilder. Wir haben einige Skripte, einige PNG-Bilder und Scrollen nach unten, wir sehen, all diese sind zurück zu uns vom Server. Wir können auch den Statuscode sehen und die meisten davon sind Code von 200, wir uns vorher angesehen haben. Dies bedeutet, dass die Anfrage erfolgreich war. Wenn wir uns die Hauptseite oben ansehen, können wir für diese Homepage einen Statuscode von 304 sehen. Dies bedeutet, dass die Seite seit der letzten Anfrage nicht geändert wurde, daher kann der Browser eine sogenannte zwischengespeicherte Version verwenden. Ein Cache ist ein temporärer Speicher und Browser verwenden einen Cache, um unsere Webseiten zu speichern, sobald wir sie besuchen, so dass schneller auf sie zugegriffen werden kann und auch die Notwendigkeit, weiterhin zusätzliche Serveranforderungen zu stellen, reduziert werden. Deshalb, wenn wir nach oben gehen und auf Cache deaktivieren klicken, wird es neu geladen. Wir sehen jetzt, dass diese Hauptseite jetzt einen Statuscode von 200 hat. Dies bedeutet, dass wir jetzt eine neue Anfrage an den Server für diese Webseite stellen, anstatt sie im Browser für schnellen Zugriff zu speichern. Wenn wir das Kontrollkästchen deaktivieren und dann aktualisieren, können wir jetzt den Statuscode 304 sehen, was bedeutet, dass wir die gespeicherte Version im Browser verwenden , anstatt eine neue Anfrage zu stellen. Dies ist eine Ãœbersicht darüber, wie die Dinge zwischen Client und Server funktionieren. Selbst wenn Sie nur ein Grundwissen dieser Konzepte haben, wird Ihnen wirklich helfen zu verstehen, was hinter den Kulissen vor sich geht und Ihnen als Entwickler wirklich helfen. Als Nächstes werden wir uns APIs ansehen und wie wir sie auf unseren Websites oder Anwendungen verwenden können , um Daten aus externen Quellen zu erhalten. 43. Was ist eine API?: Dieser API-Teil des Kurses wird wirklich spannender Abschnitt sein. Wenn Sie zuvor noch nicht mit APIs oder generell mit Daten aus externen Quellen gearbeitet haben. Wir werden damit beginnen, APIs zu betrachten, und das steht für Application Programming Interface, das wirklich komplex klingt, aber es ist nur eine Möglichkeit für uns, unsere Websites oder Anwendungen mit einer anderen Datenquelle zu verbinden. Es definiert grundsätzlich, wie unsere App mit anderen Apps und Diensten sprechen kann. Einige der größten Unternehmen gibt es eine API für Entwickler, mit der wir uns verbinden können. Zum Beispiel könnten wir unsere eigene Musik-Anwendung erstellen, genau so, wie wir aussehen wollten. Verwenden Sie dann die Spotify-API, um nach Songs oder Alben zu suchen oder sogar auf Benutzerdaten zuzugreifen, wie zum Beispiel gespeicherte Tracks, und zeigen Sie sie dann direkt in unserer eigenen Anwendung an. Es gibt auch eine YouTube-API, wir die Suche und Anzeige von Videos in unseren eigenen Projekten verwenden können. Dies bietet auch eine Möglichkeit für diese Unternehmen, Entwicklern den sicheren Zugriff auf die Daten zu ermöglichen , die sie zulassen. Diese Anbieter benötigen zunächst eine Registrierung und auch einen API-Schlüssel, bevor sie den Zugriff gewähren. Genau wie früher im Kurs haben wir uns die Verwendung von Google Maps angesehen. Wenn wir uns registrieren und einen API-Schlüssel zur Verfügung stellen, Dinge zu funktionieren. Wie greifen wir auf diese API-Daten zu? Nun, nicht alle APIs sind genau gleich, aber im Allgemeinen stellen wir eine Anfrage an eine URL, dies ist eine Get-Anfrage, wie wir im letzten Video gelernt haben. Weil wir ein paar Daten bekommen wollen. Diese URL wird als Endpunkte bezeichnet. Dies sind beispielsweise die API-Endpunkte von Spotify hier oben. Dieser Endpunkt wird normalerweise erweitert, um spezifischer über die Daten zu sein, die wir erhalten möchten. Zum Beispiel können wir einige Albuminformationen holen. Wir können Alben mit einer bestimmten ID bekommen. Wir können Suchvorgänge durchführen und sogar die Wiedergabelisten-Informationen eines Benutzers abrufen. Um Ihnen eine bessere Vorstellung davon zu geben, wie das funktioniert, gibt es eine einfache API, die wir mit Informationen über Arten von Hunden verwenden können. Lassen Sie uns zum Browser gehen und ich gehe zum Hund CEO, der www.dog.ceo ist. Dann, um die API zu greifen, würde Schrägstrich Hund Dash-API tun, drücken Sie „Enter“. Wir können sehen, dies ist die größte Sammlung von Open-Source-Hundebildern im Internet. Einige davon ermöglichen es uns, die Hunderassen zu durchsuchen, die Bilder zu durchsuchen und generell Informationen zu sammeln, die wir finden möchten. Dies wird uns einige Beispiele für die Endpunkte geben, die wir verwenden können, um verschiedene Hundedaten zu erhalten. Dies ist nützlich, um damit zu beginnen, da wir keine API-Schlüssel registrieren oder verwenden müssen , um loszulegen. nach unten scrollen, können wir unsere Endpunkte hier sehen, was der erste Teil der Webadresse ist, den wir gerade besucht haben. Innerhalb der API können wir dann nach Rassen filtern und dann die Bilder auswählen, und dann ein zufälliges Bild auswählen, und dann kehren wir mit einigen JSON-Daten zurück. Wenn wir zur Dokumentation gehen, können wir uns einige weitere Beispiele ansehen. Das erste Beispiel, das wir sehen, ist die Liste aller Rassen. Dies sind also die URL-Endpunkte, die Sie besuchen müssen, um all diese Hunderassen in JSON-Formaten zu greifen. Wenn wir darauf klicken, kopieren fügen Sie es dann in den Browser ein. zurück zu seinen Informationen im JSON-Format. Wenn Ihr etwas schwer zu lesen aussieht oder nicht ganz so aussieht, benötigen Sie möglicherweise eine JSON-Browsererweiterung, um es in eine besser lesbare Struktur zu formatieren. Es gibt viele verschiedene JSON-Formate, die wir verwenden können, aber ich verwende einen JSON-Formatierer. Ich gehe zur Chrome-Erweiterung und dann JSON-Formatierer. Sie können mit diesem Link folgen und dann als Chrome-Erweiterung hinzufügen , indem Sie einfach auf die Schaltfläche „Zu Chrome hinzufügen“ oben klicken. Ich habe dies bereits installiert, also werde ich nur seine Registerkarte für jetzt schließen. JSON steht für JavaScript Object Notation und seine Syntax für den Austausch von Daten über das Web. Es ist wie ein JavaScript-Objekt formatiert, aber es ist tatsächlich sprachunabhängig, was bedeutet, dass es auch von anderen Sprachen erstellt und gelesen werden kann. Hier können wir ein Objekt wie Syntax mit diesen runden in geschweiften Klammern sehen. Wir haben auch die Namen Wert Paare wie Status des Erfolgs. Dann in dieser Nachricht hier haben wir ein Objekt alle Hunderassen enthält, die angefordert haben. Wir können sehen, dass einige von ihnen nur leere Objekte sind, weil es keine Daten für diese bestimmte Rasse gibt. Wenn wir jedoch zum Beispiel nach unten scrollen, ist eine wie die Bulldogge ein Array, das zwei verschiedene Typen enthält. Wenn wir zurück zu der API-Dokumentation, und dann, wenn wir nach unten gehen, um die Zuchtliste, hier, können wir auf die JSON-Informationen für jede andere Art von Rasse, die Sie überprüfen möchten klicken . Wir können sehen, welche Bilder wir mit diesen assoziiert haben. Gehen wir auf einen Boxer und klicken Sie auf die „JSON-Daten“. Sie können am URL-Endpunkt oben mit Filterung der Rasse sehen, unten durch den Boxer. Dann greifen wir auf die Bilder zu. Wir können auch auf eines dieser Bilder klicken und dann sehen, welche Bilder zur Verfügung gestellt werden. Um die Rasse zu ändern, müssen wir nur die URL ändern. Anstatt Boxer zu haben, lassen Sie uns das ändern, um etwas anderes wie Hund zu sein. Dann erhalten wir eine Liste mit verschiedenen Bildern für den Hund. Versuchen wir es noch mal. Gehen wir für Labrador. Hier ist eine Liste aller Bilder für die Labradoren. Dies ist das JSON-Format und es ist wahrscheinlich der am häufigsten verwendete Typ. Einige von ihnen, die früher auch für die Datenübertragung beliebt waren, waren ein Format namens XML. Hier ist ein Beispiel für dieselben Daten, die sowohl JSON auf der linken Seite als auch XML auf der rechten Seite verwenden. XML ist sehr beschreibend mit semantischen Tags, die ein bisschen wie HTML aussieht, Sie werden immer noch einige API-Daten im XML-Format sehen. Die meisten haben jedoch jetzt eine JSON-Version 2 oder sogar nur JSON selbst, eine modernere APIs. Dies liegt daran, dass JSON viel kürzer und leicht ist, wie wir links mit den gleichen Beispielen sehen können. Jetzt habe ich einen Hintergrund darüber, was eine API ist und wie wir die Daten verwenden können. Kommen wir nun zurück zu unserer Songfind-Anwendung, die früh auf dem Kurs begonnen hat. Früh haben wir die Benutzeroberfläche erstellt. Jetzt gehen wir weiter, um unsere API-Daten zu erfassen und eine Liste von Songs auf dem Bildschirm anzuzeigen. 44. Abrufen von Daten und Abfragezeichenfolgen: Früher im Kurs haben wir eine HTML-Struktur für unseren Song erstellt, finden Sie das Layout. Ich habe Sie auch herausgefordert, etwas Styling und Layout mit dem CSS-Raster hinzuzufügen , um die Dinge noch besser aussehen zu lassen. In diesem Abschnitt werden wir dieses Projekt abschließen, indem wir eine API verwenden , um einige echte Song-Daten zu holen, die wir von iTunes verwenden können. Wir werden auch die JavaScript-Fetch-API verwenden, die es uns ermöglicht, eine Ressource zu holen oder in unserem Fall möchten wir die Daten von iTunes abrufen. Beginnen wir damit, unseren Song zu öffnen, finden Sie ein Projekt von früher. Wenn Sie dies noch nicht getan haben, öffnen Sie das endgültige Projekt des Songs in Visual Studio Code, und öffnen Sie dann die Indexseite im Browser. In der Datei index.html haben wir einige Beispieldaten für unsere Songs erstellt. Wir werden diesen Abschnitt dynamisch mit JavaScript erstellen und dann die Songdaten von der iTunes API greifen. Wir können fortfahren und den Inhalt dieses Hauptabschnitts entfernen, aber wir lassen nur einen in als Referenz. Gehen wir zur Indexseite und scrollen Sie dann nach unten zum Hauptbereich mit der ID der Songs. Ich werde in einem dieser Artikel zu verlassen und dann entfernen Sie die fünf zusätzliche einmal in von unten, für fünf rechts unten auf den Boden der schließenden Hauptversenkung, Ich bringe dies auf. Wir haben nur einen Song übrig. Geben Sie das Speichern, und aktualisieren Sie den Browser. Der nächste Schritt besteht darin, unsere Skriptdatei zu erstellen. Dies wird eine JavaScript-Datei sein. Klicken Sie mit der rechten Maustaste auf eine neue Datei und rufen Sie diese script.js Dann müssen wir in der index.html darauf verlinken, also scrollen Sie nach unten und kurz vor dem schließenden Körper-Tag, fügen Sie unser Skript hinzu, schließt dies aus und fügen Sie dann die Skriptquelle hinzu. Dies befindet sich im selben Verzeichnis, so dass wir dies einfach durch script.js referenzieren können. Wenn ich rette. Jetzt sind wir bereit, loszugehen. Lassen Sie uns zur iTunes-Dokumentation gehen und einen Blick darauf werfen, was wir verwenden werden. Gehen Sie zu Google. Lassen Sie uns eine Suche nach dem iTunes, Such-API. Scrollen wir nach unten. Was wir brauchen, ist die iTunes-Such-API, die sich auf der Apple Developer Website befindet. Lassen Sie uns darauf klicken. Lassen Sie uns beginnen, indem Sie die Suche aus dem Menü, die zyklische, und dann können wir klicken auf konstruieren eine Suche. Als wir APIs im letzten Video besprochen haben, haben wir erwähnt, dass wir die Daten normalerweise abrufen, indem wir eine URL herstellen, die als Endpunkte bezeichnet wird. Hier können wir auch die API-Endpunkte sehen, die von iTunes bereitgestellt werden. Es ist itunes.apple.com, Schrägstrich Suche. Dann nach diesem Endpunkt können wir einige Schlüsselwertpaare hinzufügen, um die Informationen zu erhalten, die wir wollen. Beachten Sie, dass am Ende dieser URL ein Fragezeichen ist. Dies ist nur ein Trennzeichen, um die URL von den Abfragen zu trennen, die Sie fragen möchten. Wir werden uns diese in einem Augenblick ansehen. Diese URL mit den Parametern am Ende wird als Abfragezeichenfolge bezeichnet. Wenn wir nach unten scrollen, können wir einige Schlüsselwertpaare in dieser Tabelle hier sehen. Beginnend mit dem Suchbegriff ist dies wahrscheinlich der wichtigste für unsere Verwendung. Sein Begriff, nach dem wir suchen, um unsere Songs aus der Datenbank zu finden. Scrollen wir nach unten, können wir auch nach Medien suchen 2 oder wir können dies einschränken, um nach einer Musik zu suchen. Oder wir können sogar Dinge wie Filme, alle Podcasts einbeziehen. Wir können auch unsere Suche einschränken, damit wir nicht zu viele Rückgabewerte erhalten. Wenn wir nach unten scrollen, können wir auch diesen Grenzwert Parameter hier sehen. Ich werde auch Limit verwenden, so dass wir nicht zu viele Suchergebnisse an uns zurücksenden. Um diese in Aktion zu sehen, können wir diese einfach in den Browser eingeben. Gehen wir nach oben. Lassen Sie uns diese URL kopieren und fügen Sie diese dann in eine neue Registerkarte. Bevor wir die Eingabetaste drücken, müssen wir einige Schlüsselwertpaare mit der Suche hinzufügen, um zu funktionieren. Wenn Sie zur Dokumentation zurückkehren, können wir jedes dieser Schlüsselwertpaare verwenden, die zuvor betrachtet wurden, z. B. einen Suchbegriff. Nach dem Fragezeichen können wir einen Begriff hinzufügen und dann gleich. Gehen wir für Beyoncé und ich drücken Enter. Dann habe ich eine Textdatei, die heruntergeladen wird. Wir können das öffnen und den Inhalt sehen. Wir können im Moment ein wenig schwer zu lesen sein, aber wir können an der Spitze sehen wir 50 Ergebnisse zurück zu uns, gefolgt von einer Reihe unserer Ergebnisse mit allen Informationen über jeden Song. Wenn wir dies einschränken wollten, können wir dann einige zusätzliche Werte hinzufügen. Dann fügen Sie in unserer Abfrage wieder den Begriff gleich Beyoncé. Dann können wir weitere Schlüsselwertpaare hinzufügen. Diese Abfragezeichenfolge durch das kaufmännische Und-Zeichen getrennt, fügen Sie also das kaufmännische Und-Zeichen hier hinzu Dann können wir Limits verwenden, die wir uns auch vorher angesehen haben und dies auf freie Ergebnisse setzen, drücken Sie „Enter“. Wir haben eine neue Textdatei herunterladen in. Lass uns das aufmachen. Jetzt haben eine Ergebniszählung von freien und viel weniger Daten. Wir haben nur freie einzelne Tracks innerhalb des Arrays. Um dies klarer zu sehen, lassen Sie uns alle Informationen aus unserer Textdatei kopieren, dann schließe ich das. Gehen Sie zu Google. Dann suchen wir nach Code verschönern. Das ist, was wir brauchen, ein codebeautifty.org. Öffne das auf. Wir werden den JSON Viewer verwenden, um zu sehen, wie das aussieht. Auf der linken Seite haben wir die JSON-Eingaben, die Sie in unsere Informationen aus einer Textdatei einfügen können und dann können wir in der Mitte auf verschönern klicken und die Ergebnisse auf der rechten Seite sehen. Klicken Sie auf das Kreuz in der oberen Ecke, um es noch größer zu machen. Jetzt können wir deutlicher die Informationen sehen, die von iTunes zurückgegeben wird. Wir haben die Ergebnisse, die wir schon gesehen haben. Also haben wir ein Ergebnis-Array mit freien Werten. Dieses erste ist ein Objekt, das alle Informationen über das Lied enthält. Wir haben einige URLs für das Kunstwerk und wir werden diese in unserer Anwendung verwenden. Um die Bilder für jeden LKW zu bekommen, haben wir auch die LKW-ID des Künstlernamen Beyoncé. Wir haben einen Trucknamen und viele weitere Informationen über den Song. Dies sind alle JSON-Daten, die wir in unserer Anwendung verwenden können. Wir wissen, wie man diese Daten über die URL erhält. Wir können jetzt Fetch verwenden, um diese Daten tatsächlich in unser Projekt zu bringen. Gehen wir zurück zu Visual Studio Code und dann in die script.js über ein Thema, um auf die Fetch-API zuzugreifen. Dann im Inneren von hier geben wir die URL ein, die Zugriff will, also fügen Sie ein. Whoops, in der Tat müssen wir zurück zu iTunes gehen und dann die API-Endpunkte kopieren und diese zwischen den Ursachen einfügen. Wenn wir dies speichern und dann zu unserer Anwendung gehen, laden Sie den Browser neu. Wenn wir uns erfrischen, sehen wir bisher nichts anderes. Aber wir können diesen Abruf einer Variablen zuweisen und sehen, was mit einem Konsolenprotokoll passiert. Setzen Sie eine Konstante namens Daten und setzen Sie diese auf einen Abruf. Darunter können wir console.log. Dann übergibt das die Daten, d. h. die Daten, die von diesem Abruf zurückgegeben werden, dann an den Browser. Wenn wir dann mit der rechten Maustaste in „Inspect“ klicken und dies in der Konsole überprüfen, also lasst uns aktualisieren, damit wir sehen können, dass wir etwas, das als Versprechen bezeichnet wird, als Antwort zurückgegeben wird, die anscheinend aussteht. Bevor wir mehr ins Detail gehen, lassen Sie uns noch eine Sache versuchen. Kurz nach diesem Konsolenprotokoll, lassen Sie uns eine JavaScript-Zeitüberschreitung durchführen, die das gleiche Konsolenprotokoll nach zwei Sekunden ausführen wird. Im Inneren können wir eine ES_6 [unhörbar] Funktion übergeben. Dann können wir dieses Konsolenprotokoll kopieren, fügen Sie es ein, fügen Sie ein Komma hinzu, und wir werden dies nach 2.000 Millisekunden ausführen. Geben Sie uns speichern und dann kehren wir zurück zur Konsole und laden Sie dann neu. Wenn wir zwei Sekunden warten, sehen wir jetzt, dass es ein zweites Versprechen gibt. Aber dieses Mal hat es mit einer Antwort aufgelöst. Diese Ergebnisse, die Sie in der Konsole aufgrund von zwei Dingen sehen. Vor allem, wenn fetch verwendet wird, wird es zurückgegeben, was als Versprechen bezeichnet wird, und zweitens, weil die Anfrage asynchron genannt wird. Mach dir keine Sorgen, wenn du nicht verstehst, was eines dieser Konzepte im Moment bedeutet, wir werden im nächsten Video berichten, was beide bedeuten. 45. Asynchroner Code und Zusagen: Im letzten Video haben wir einige Daten mit der iTunes API abgerufen. Wir haben die gleichen Daten zweimal in einer Konsole ausgegeben. Einer sofort und dann ein zweites nach zwei Sekunden. Dies gab uns zwei verschiedene Ergebnisse, die beide Versprechen sind. Wir werden uns sehr bald ansehen, was diese sind. Der erste, den wir sehen können, hatte ein Ergebnis von ausstehenden und dann hat der spätere eine Antwort von aufgelöst. Um zu verstehen, warum dies in erster Linie geschieht und warum wir Versprechen brauchen, müssen wir zuerst verstehen, was asynchroner Code ist. Einige Programmiersprachen, wie PHP, sind das Gegenteil. PHP wird als synchron eingestuft. Dies bedeutet, wenn unser Code bereit ist, wird er von oben in der Datei nach unten gelesen. Synchroner Code wie PHP beginnt in der ersten Zeile. Dann wird dieser Code in der ersten Zeile ausgeführt und dann erst die nächste Zeile verschoben, wenn der Vorgang abgeschlossen ist. Grundsätzlich wird das Programm anhalten und warten bis die Operation beendet ist, bevor zur nächsten Codezeile übergeht. Viele JavaScript-Code funktioniert jedoch asynchron. Nehmen wir unseren Abruf zum Beispiel. Wenn die Anfrage nach den Daten lange dauert, bis sie an uns zurückgesendet werden, blockieren wir den Rest des Codes, während wir warten, bis diese Daten zurückkommen. Stattdessen wird diese Codezeile immer noch ausgeführt, und bevor Sie auf die Antwort warten, wird dann zur nächsten Zeile des Programms oder Skripts übergehen daher den Rest des Codes nicht blockieren. Nun haben wir die Anfrage für diese Daten gesendet. Wir erwarten eine Antwort irgendwann in der Zukunft. Wir wissen nicht, wann diese Daten an uns zurückgesendet werden oder ob die Daten von iTunes überhaupt wiederkommen. Für diesen Fall haben wir das, was man Versprechen nennt, und das ist es, was uns von vorher zurückgekehrt ist. Als wir uns den Abruf im letzten Video angeschaut haben, haben wir die Anfrage nach unseren Daten abgeschickt. Wir führen sofort ein Konsolenprotokoll aus und dies hatte das Ergebnis der ausstehenden, die Sie hier sehen können. Dies liegt daran, dass das Programm das Konsolenprotokoll ausgeführt hat, bevor die Daten zurückgegeben wurden. Nach dem Warten von zwei Sekunden müssen unsere Daten zurückgegeben worden sein, da dieses Konsolenprotokoll dann aufgelöst wurde. Zu unserem Code in Visual Studio. Schließen wir diese Sidebar. Werfen wir einen Blick darauf, wie wir mit diesem Versprechen umgehen können. Zuerst werden wir diese Konsolenprotokolle entfernen und unseren Code bereinigen, wobei nur der Abruf an der Spitze bleibt. Auch wir werden diese Konstante hier entfernen, fügen Sie am Ende ein Semikolon hinzu. Ein Versprechen ist nur eine Möglichkeit zu erklären, was wir tun wollen , wenn die Daten schließlich zurückgegeben werden. Wenn die Daten erfolgreich zurückgegeben wurden, führen wir den Code innerhalb von.then aus. Dot kann dann am Ende angekettet werden, genau so. Oder um es lesbarer zu machen, sehen Sie es oft in einer eigenen Zeile. Lassen Sie uns eingeben und legen Sie dies auf die Zeile unten. Dann können wir innerhalb von.then eine Funktion hinzufügen, die Sie ausführen möchten. Ich werde eine ES6-Pfeilfunktion hinzufügen, genau so. Das funktioniert genau wie Funktionen, die wir bereits gesehen haben. Es nimmt in der Antwort innerhalb dieser Klammern als Argument. Fügen Sie Antwort innerhalb von hier. Der Name liegt an uns, aber die Antwort ist ziemlich beschreibend. Ich werde es so lassen. Die Antwort ist nur eine HTTP-Antwort, daher müssen wir die Json-Daten aus dem Antwortkörper mit der.json-Methode extrahieren. Im Inneren von hier, sagen Sie Response.json. Dann können wir voran gehen und diese Json-Daten zurückgeben. Alternativ können wir bei der Verwendung von Pfeilfunktionen, wenn die Funktion nur eine Anweisung wie hier hat, wenn die Funktion nur eine Anweisung wie hier hat,sogar das return-Schlüsselwort und auch die geschweiften Klammern entfernen. Fügen Sie dies zu einer Zeile hinzu, damit wir die geschweiften Klammern entfernen. Wir werden das Schlüsselwort return entfernen und dann diese Antwort auf die gleiche Zeile ziehen. Dies wird genau dasselbe tun, aber unseren Code etwas sauberer halten. Wir können auch so viele.then Fälle an das Ende ketten, wie wir wollen. Dann fügen wir noch einen hinzu , der ausgeführt wird, nachdem der erste beendet ist, und nehmen dann die Json-Daten, damit wir etwas damit machen können. Fügen Sie eine zweite hinzu. Dann, die eine Funktion übernimmt. Auch hier wird dies eine ES6-Pfeilfunktion sein, die die Daten aufnimmt. Diese Daten werden von der obigen Zeile an sie übergeben, die das extrahierte Json ist. Ok. Zurück zu unserer Funktion, können wir dann die Daten von unserer API, Console.log Konsole protokollieren und dann in unsere Daten übergeben. Eine letzte Sache, bevor wir zur Konsole gehen, mÃ