Javascript: leichte Einführung für Anfänger:innen

1. Willkommen! Das bauen wir hier auf: Hallo, mein Name ist Chris und eine große begrüßt meine JavaScript-Anrufe für Anfänger. Wenn Sie auf dem Spiel waren Ihre HTML- und CSS-Fähigkeiten auf die nächste Ebene zu suchen, dann sind Sie an der richtigen Stelle. Dieser Kurs gibt Ihnen das Wissen und das Vertrauen, um Ihren Websites Interaktivität und coole Funktionen hinzuzufügen. Zusammen mit der Fähigkeit, eigenständige Anwendungen zu erstellen, beginnen wir mit den Grundlagen, einschließlich des Verständnisses von JavaScripts und wofür es verwendet wird, wohin Sie JavaScript in Ihre Websites aufnehmen können, Datentypen und wie Sie JavaScript auf Ihre Web-Seiten. Anschließend decken wir JavaScript-Grundlagen wie Variablen, Arrays, Funktionen, Strings und String-Methoden und JavaScript-Objekte ab. Alle Abschnitte werden verschiedene Herausforderungen haben, um Erfahrungen zu sammeln und sicherzustellen, dass Sie genau verstehen, was wir tun, bevor Sie weitermachen. Sobald Sie die Grundlagen kennen, werden wir Ihnen dann weitere Techniken vorstellen, wie JavaScript, Mathematik und Datumsangaben, Kontrollfluss und Loops, wie JavaScript das DOM manipulieren kann, und natürlich viele Herausforderungen auf dem Weg. Dann schließlich, am Ende dieses Kurses, werden Sie in diesem spannenden vollständigen Projekt zu bauen, haben Sie die Möglichkeit, eine voll funktionsfähige Visitenkartenanwendung zu erstellen , die die Eingaben des Benutzers übernimmt und ein Geschäft schafft -Karte mit JavaScript verwenden. Am Ende des Kurses verfügen Sie über alle erforderlichen Fähigkeiten, um dies selbst zu erledigen. Dieser Kurs ist so konzipiert, dass er anfängerfreundlich ist. JavaScript funktioniert jedoch oft neben HTML und CSS. Daher sind Grundkenntnisse dieser Sprachen definitiv zu empfehlen. Vielen Dank für Ihr Interesse und ich freue mich darauf, dass Sie sich mit mir in dieser spannenden Sache befassen. 2. Was Javascript und wofür verwenden wir es?: In diesem Video wollte ich Ihnen nur einen Überblick geben, was JavaScript ist und was genau JavaScript kann. Lassen Sie uns zunächst einen Blick auf das werfen, was JavaScript ist? JavaScript ist eine Programmiersprache, die wir traditionell verwendet haben, um Webseiten interaktiv zu machen. Wenn Sie auf einer Website surfen und Dinge wie ein Pop-up-Feld erscheinen oder wenn Sie mit der Maus über ein Menü und Sie erhalten ein Dropdown mit verschiedenen Menü-Links, im Grunde viele der Funktionen, die passieren, ohne die Seite zu aktualisieren, das ist alles JavaScript. JavaScript kann auch verwendet werden, um eigenständige Anwendungen zu erstellen. Traditionell haben wir JavaScript in Webbrowsern und Websites verwendet. Jetzt ist JavaScript ein immer beliebter geworden, finden mehr Verwendungen. JavaScript wird jetzt verwendet, um vollständige Anwendungen zu erstellen, sowohl die Front als auch das Backend. Heutzutage ist es wirklich einfach, eine vollständige Stack-Anwendung mit nur einer Programmiersprache zu erstellen. Ich erwähnte, dass JavaScript verwendet wird, um Webseiten interaktiv zu machen und der Grund, der passieren kann, ist, dass JavaScript in allen gängigen Browsern integriert ist und läuft. JavaScript funktioniert sogar, wenn der Benutzer offline ist. Die Tatsache, dass JavaScript in den großen Browsern integriert ist und ein Standardskript und Sprache für Webbrowser ist, bedeutet, dass JavaScript hier ist , um zu bleiben und es sieht nicht so aus, als ob es bald irgendwo geht. Die Java-Programmiersprache ist eine völlig separate Sprache und sie ist nicht mit JavaScript verwandt. Das sind die Grundlagen von JavaScript. Werfen wir nun einen Blick darauf, was JavaScript tun kann. Wir wissen, dass JavaScript Webseiten interaktiv machen kann. Es kann auch die HTML- und CSS-Elemente auf einer Webseite ändern. Es kann die Farben ändern, es kann die Schriftgrößen ändern, es kann den Text bei einem Klick ändern, verschiedene Dinge wie das. Dies ist das, was man als Manipulation des DOM nennt. Wir werden uns das DOM später in diesem Kurs genauer ansehen, aber jetzt verstehen Sie, dass JavaScript Elemente auf einer Webseite ändern kann, und genau das tun wir jetzt mit dieser Demonstration. Wir manipulieren das DOM, indem wir auf eine Schaltfläche auf der linken Seite klicken, die Text in ein leeres Absatz-Tag einfügt. Als Nächstes kann JavaScript auch Daten validieren. Wenn Sie beispielsweise ein Formular mit Ihrem Namen und Ihrer Adresse ausfüllen, kann JavaScript überprüfen, ob die von Ihnen angegebenen Informationen korrekt sind, z. B. es kann überprüfen, ob es keine Buchstaben in einer Telefonnummer gibt, es kann überprüfen, ob Ihre E-Mail-Adresse korrekt formatiert, bevor es gesendet wird, und es kann sogar einschränken, wie viele Zeichen in ein Textfeld eingegeben werden. Dies geschieht alles im Browser ohne Hilfe vom Server. JavaScript kann auch verwendet werden, um vollständige Stack-Anwendungen zu erstellen. Mit vollem Stack meinen wir das Front-End, mit dem der Benutzer sehen und interagieren kann , und auch die Serverseite, die das Backend der Anwendung ist. Historisch gesehen wird JavaScript nur am Front-End im Browser verwendet, aber jetzt werden mehr und mehr Anwendungen mit JavaScript für den vollständigen Stack geschrieben , dank Node.js. Neben Websites und Anwendungen ist JavaScript auch bei der Erstellung von plattformübergreifenden Spielen beliebt. Wir können Spiel einmal in JavaScript schreiben und etwas wie PhoneGap verwenden , um Ihr Spiel auf verschiedenen Geräten wie Android oder iOS bereitzustellen. Wir können JavaScript verwenden, um Löcher in Browser-Spots zu patchen, so dass wir Polyfills und Feature-Erkennung bereitstellen können , um zu überprüfen, ob ein älterer Browser eine bestimmte Funktion unterstützt. Wenn dies nicht der Fall ist, können wir eine alternative Möglichkeit bieten, damit umzugehen. JavaScript und HTML5 arbeiten Hand in Hand und JavaScript unterstützt viele der neuen HTML5-Funktionen, wie die Canvas und natürlich viel, viel mehr. JavaScript wird jetzt so populär, dass es jeden Tag neue Verwendungen gibt. Es gibt auch neue Bibliotheken und Frameworks, die ständig für JavaScript erstellt werden. Es ist also wirklich eine große Fähigkeit zu haben. Vielen Dank für das Anschauen und genießen Sie den Rest der Klasse. 3. Wo solltest du Javascript einfügen: Willkommen zurück. Für diesen Kurs würde ich empfehlen, einen neuen Ordner auf Ihrem Desktop zu erstellen oder irgendwo darauf zugreifen zu können. Ich werde meine auf dem Desktop erstellen, und ich werde nur dieses JavaScript nennen. Innerhalb dieses Ordners können wir alle Beispiele speichern, die wir für diesen Kurs erstellen, und dann legen Sie sie zur Hand, wenn Sie sie als Referenz benötigen. Innerhalb des JavaScript-Ordners werde ich einen neuen Ordner erstellen, und dies wird als Verständnis-Javascript bezeichnet. Das ist der Name des Abschnitts auf dem Kurs. Das erste, was wir uns ansehen werden, ist, wo JavaScript enthalten soll, also werde ich einen neuen Ordner mit dem Namen where-to-include-javascript erstellen und das speichern. Wenn Sie dann zu Ihrem Texteditor gehen, werde ich Klammern verwenden, ziehen Sie in den Ordner, den Sie gerade erstellt haben. Wir möchten eine neue Seite erstellen, also ⌘- oder Strg+N, speichern Sie diese als index.html. Um damit zu beginnen, werde ich die grundlegende HTML-Struktur einfügen, und ich werde ein Plug-in namens Emmet verwenden. Emmet ist für die meisten gängigen Texteditoren verfügbar. Wenn Sie Brackets wie ich verwenden, gehen Sie in die Erweiterungen und suchen Sie dann nach Emmet, E-M-M-E-T. Ich habe Emmet bereits installiert, aber wenn Sie es nicht tun, klicken Sie einfach auf die Schaltfläche „Installieren“. Emmet ist ein großartiges Plug-in, mit dem Sie Verknüpfungen wie html:5 verwenden können, und drücken Sie dann Tab, und das schafft eine neue Struktur für Sie. Aber wenn Sie sie nicht verwenden, ist es kein Problem. Halten Sie das Video einfach an und tippen Sie es aus, und wir können es für zukünftige Videos duplizieren. Im Titel werde ich es nur nennen, wo JavaScript eingeschlossen werden soll, dann machen Sie einfach ein wenig Platz nach dem Titel. Ich werde nur die Bootstrap-Stylesheets einschließen, die es uns ermöglichen, unsere Webseiten schöner aussehen zu lassen. Suchen Sie einfach nach Bootstrap und gehen Sie dann zu getbootstrap.com und gehen Sie dann zu Erste Schritte, und ich werde nur das Bootstrap-CDN einschließen, das der gehostete Link für das Stylesheet ist. Ich werde nur den oberen Abschnitt kopieren, der das Stylesheet ist. Ich kopiere das und füge das dann in den Kopfbereich direkt unter dem Titel ein. Jetzt ist alles eingerichtet, wir können einen Blick auf einige verschiedene Möglichkeiten werfen, wie wir JavaScript in unser Projekt integrieren können. JavaScript kann entweder im Kopf- oder im Körperbereich platziert werden. Ich werde anfangen, und wir müssen mit einigen Skript-Tags beginnen, also geben Sie die öffnenden und schließenden Skript-Tags aus. All das JavaScript, das wir eingeben, muss zwischen diesen beiden gehen. Um zu überprüfen, dass alles in Ordnung ist werde ich mit einem einfachen Alarm () beginnen. Eine Warnung () ist ein Popup-Feld, das im Browser angezeigt wird und eine Nachricht an den Benutzer alarmiert. Zwischen Anführungszeichen können Sie entweder einfache oder doppelte Anführungszeichen verwenden, es spielt keine Rolle. Ich werde nur alarmieren, Javascript funktioniert und am Ende dieser Anweisung ein Semikolon hinzufügen. Wenn wir das speichern und dann zum Browser gehen, können Sie eine Warnmeldung sehen, die sagt: „Javascript funktioniert.“ Dies ist das erste Mal, dass Sie JavaScript schreiben. Herzlichen Glückwunsch, Sie haben gerade Ihre erste Arbeit in Scripter. Klicken Sie einfach auf die Schaltfläche „OK“, um das vorerst loszuwerden, und gehen Sie zurück zur nächsten Seite. Wir haben bereits erwähnt, dass JavaScript sowohl im Kopf- als auch im Körperbereich funktioniert Wenn wir also den Abschnitt einfach mit dem Kopf ausschneiden und es dann in den Körperbereich einfügen, und sofort haben wir eine Änderung bekommen. Wir werden in den Browser übernommen, und wieder ist genau das Gleiche passiert. Wir haben die Alert-Box auftaucht, die sagt: „JavaScript funktioniert“, also ist alles in Ordnung. Manchmal, wenn wir viel JavaScript auf der Seite haben, wollen wir, dass es getrennt vom HTML ist, nur um es lesbarer und einfacher zu pflegen. Wir können dies tun, indem Sie das JavaScript in eine externe Datei Erstellen Sie also eine neue Seite im Projekt und speichern Sie diese. Ich werde meine Dateiwarnung aufrufen, und es muss die Erweiterung of.js für JavaScript haben. Gehen Sie dann zurück zur Indexseite, und wir können dieses externe JavaScript im Kopfbereich verknüpfen. Wieder öffnen wir die Skript-Tags, dann müssen wir dem Browser mitteilen, wo die JavaScript-Datei finden , indem wir das src-Attribut verwenden. Da sich unsere Datei auf der gleichen Ebene wie die Indexseite befindet, können wir einfach den Dateinamen eingeben, also alert.js. Jetzt können wir die Skript-Tags loswerden weil wir diese in eine separate Datei legen werden, also gehen Sie zu der alert.js. Wenn wir in einer externen JavaScript-Datei arbeiten, müssen wir die Skript-Tags nicht einschließen. Wir können einfach anfangen, das JavaScript einzugeben. Erstellen Sie eine neue Warnung. Zwischen den geschweiften Klammern und den Zitaten könnten wir unsere Nachricht wieder einfügen, Javascript funktioniert, und das Semikolon am Ende. Speichern Sie das, und speichern Sie die nächste Seite, und gehen Sie zum Browser, und aktualisieren Sie dann. Da gehen wir hin. Großartig. Die Warnung funktioniert auch in der externen Datei. Externe JavaScript-Dateien sind nützlich, um JavaScript zu speichern, das Sie möglicherweise auf verschiedenen Webseiten verwenden möchten , sodass Sie das gleiche Skript nicht immer und immer wieder eingeben müssen. Sie können einfach die Datei verknüpfen, die Sie auf jeder Webseite verwenden möchten. Wie bereits erwähnt, trennt es auch den HTML vom JavaScript und macht Ihren Code lesbarer und wartbarer. Der externe JavaScript-Link, den wir im Kopfbereich platziert haben, kann auch im Körperbereich ganz unten auf Ihrer Seite direkt über dem schließenden Body-Tag platziert werden. Auf diese Weise wird der HTML-Code nicht durch das Laden von Skripten blockiert, so dass wir die Ladezeiten der Seiten verbessern können. Speichern Sie das einfach und aktualisieren Sie den Browser erneut, und Sie können sehen, dass alles noch funktioniert. Das sind also drei verschiedene Möglichkeiten, wie wir JavaScript in unser Projekt einbinden können. Vielen Dank für das Ansehen, und wir sehen uns im nächsten Video. 4. So zeigst du Javascript auf Webseiten und in Kommentaren: Willkommen zurück. Im letzten Video haben wir uns gezeigt, wie wir Warnungen verwenden können, um Benutzer auf eine bestimmte Nachricht auf der Webseite zu warnen. In diesem Video werden wir einen Blick auf einige verschiedene Methoden werfen, wie wir JavaScripts auf unsere Webseiten einbinden können. Wir werden auch einen Blick darauf werfen, wie wir Kommentare in JavaScript einfügen können, um Notizen zu machen, und auch unseren Code auskommentieren, wenn wir ihn nicht mehr brauchen. Wenn Sie in den JavaScript-Ordner gehen und immer noch im JavaScript-Abschnitt verstehen, werde ich nur den ersten auswählen, den wir erstellt haben, und drücken Sie dann Befehl oder Control D, um zu duplizieren. Oder wenn Sie es vorziehen, können Sie kopieren und einfügen. Ich werde diese Kommentare aufrufen und in JavaScript anzeigen. Öffnen Sie dann Klammern oder Ihren Texteditor. Ziehen Sie dann die neue Datei, die wir gerade erstellt haben. Öffnen Sie dann die Indexseite. Wir haben die Alert-Box, die wir im letzten Video erstellt haben. Wenn Sie nur loswerden, dass für jetzt, so dass wir nicht bekommen, dass auftauchen jedes Mal, wenn wir in den Browser gehen und dann den Titel ändern, Kommentare und Anzeige in JavaScript. Tatsächlich brauchen wir diese externe Warndatei nicht zu verwenden. Das können wir loswerden. Öffnen Sie Ihre Skript-Tags entweder im Kopf- oder im Textbereich. Es spielt keine Rolle. Im letzten Video haben wir uns eine Warnung hinzugefügt, um den Benutzer auf eine Nachricht zu warnen. Es müssen keine Texte sein, die wir dem Benutzer alarmieren können. Wir können auch Zahlen und Masse verwenden. Wir können um 10 Uhr alarmieren, kostenlos mitnehmen. Dann, wenn wir zum Browser gehen, können Sie sehen, dass die Berechnung durchgeführt wurde und wir die Ergebnisse von sieben erhalten. Sowie die Alert-Box ist verschiedene Methoden, die wir verwenden können, um JavaScript anzuzeigen. Eine andere Methode ist das Konsolenprotokoll. Anstelle der Warnung können wir in der Konsole eingeben und wir können ein Protokoll an die Konsole der gleichen Nachricht senden. Wenn Sie zu Ihrem Web-Browser gehen. Wenn Sie Chrome verwenden, klicken Sie einfach mit der rechten Maustaste und gehen Sie zu Inspect Element. Sie können zwischen der Unterseite und Seite wechseln , indem diese drei Punkte klicken und dann auf die gewünschte Dock-Seite klicken. Wenn Sie nach unten gehen, machen Sie einfach ein bisschen mehr Platz. Sie können sehen, es gibt die Registerkarte Konsole. Wählen Sie also die Registerkarte „Konsole“ und Sie können sehen, dass das Ergebnis, das wir gerade von sieben erstellt haben, in der Konsole angezeigt wird. Die Konsole wird häufig zum Debuggen verwendet anstatt dem Benutzer Benachrichtigungen auf dem Bildschirm anzuzeigen. Wir können es nur auf die Konsole beschränken. Wir können Dinge auf der Konsole wie Fehlermeldungen drucken. Das ist wirklich gut zum Debuggen. Wenn wir zurück zu Klammern gehen, sowie die Warnungen und das Konsolenprotokoll. Wir können auch verwenden, was heißt document.write. Während Sie den Kurs durchlaufen, sehen Sie das Wort Dokument ziemlich oft. Das Dokument ist die vollständige Webseite, auf die wir abzielen. Ich werde auf die Seite schreiben, was auch immer zwischen diesen Klammern ist. Speichern und aktualisieren. Jetzt auf der Webseite erscheinen, haben wir die Ergebnisse von sieben. Aber wir müssen vorsichtig sein, wenn Sie document.write verwenden. Wenn es verwendet wird, nachdem die Seite vollständig geladen wurde, wird die gesamte Seite mit dem Ergebnis überschrieben. Also müssen wir vorsichtig sein, wenn wir das verwenden. Auch hier, wie Karten, können wir Text wie hallo und das wird auf der Seite erscheinen sind genau die gleichen. Das letzte, was ich Ihnen zeigen möchte, ist, wie wir den aktuellen HTML-Code, der auf der Webseite ist, manipulieren können . Also gehe ich einfach zum Körperabschnitt und erstelle HTML. Ich werde eine h1-Überschrift erstellen und den Inhalt vorerst leer lassen. Die h1 Ich werde eine ID von Titel und Durchschnitt geben, kopieren Sie das Skript-Tag. Nur auf den Boden da. Also werden wir jetzt JavaScript verwenden, um den HTML zu manipulieren, der derzeit da ist. Moment gibt es eigentlich keinen Text in der Überschrift h1. Aber Sie können JavaScript verwenden, um Text dort einzufügen. Genau wie zuvor werden wir das vollständige Dokument als Ziel anvisieren und dann den Punkt verwenden. Dann werden wir das vollständige Dokument auf das Element eingrenzen, das wir ändern möchten, das die ID des Titels hat. JavaScript hat eine Möglichkeit, dies mit dem Namen GetElementsById zu tun. Beachten Sie, dass alle Wörter außer dem ersten mit einem Großbuchstaben beginnen, um es lesbarer zu machen. Dies ist in vielen Programmiersprachen ziemlich Standard. Das nennt man Kamelfall. Das vollständige Dokument wird auf ein Element eingeengt , das wir durch seine ID schlüpfen werden. In Klammern und dann Zitaten können wir die ID hinzufügen, die wir anvisieren wollen, in unserem Fall hier seinen Titel, und dann Nova Dot. Wir wollen den inneren HTML auswählen und dann gleich und dann können wir in Anführungszeichen den Text setzen, den wir ersetzen möchten. Also wollen wir auf dem Bildschirm den Text anzeigen. In meinem Fall, wenn ich die Anzeige JavaScript in Webseiten und Semikolon am Ende dieser Anweisung lege. Ich hoffe, das ergibt Sinn. Wir sagten in einem HTML-Element, das keinen Text eine Minute hat. Dann wählen wir im vollständigen Dokument oder der vollständigen Webseite aus. Dann schränken wir es auf die ID des Titels ein. Dann setzen wir innerHTML, das ist der Abschnitt dazwischen. Wir setzen in unserem Wert, um diesem Text gleich zu sein. Lasst uns das retten. Wenn Sie den Web-Browser aktualisieren, haben wir jetzt den Text, den wir in h1 Überschrift gesetzt haben. Diese Methode wird also viel häufiger verwendet und kann ein bisschen sicherer sein als die Verwendung von document.write. Jetzt werden wir uns vier verschiedene Methoden ansehen, einschließlich JavaScript, in unsere Webseiten. Wenn ich zurück zum Texteditor gehe und einen Blick auf JavaScript-Kommentare werfen. Kommentare sind in JavaScript verfügbar, genau wie viele andere Programmiersprachen. Wenn Sie einige Notizen hinzufügen möchten. Mit JavaScript möchten wir, dass diese Notizen nicht vom Browser gelesen werden. Wir können einen doppelten Schrägstrich hinzufügen. Dies ist für die einzeiligen Kommentare. Wir können einige Notizen wie Satz innerHTML machen. Das Hinzufügen von Kommentaren kann nützlich sein, wenn Sie eine Trennung von der Programmierung nehmen und Sie nach nur ein oder zwei Wochen wieder kommen, das kann Ihnen wirklich helfen, sich daran zu erinnern, was Sie getan haben. Notizen für sich selbst hinzufügen, Sie können nicht nurNotizen für sich selbst hinzufügen,sondern auch den eigentlichen Code auf die gleiche Weise auskommentieren. Sie können sehen, dass es grau wird. Dieser Codeabschnitt wird jetzt nicht vom Browser gelesen. Es ist nützlich, wenn Sie nur vorübergehend einen Codeabschnitt entfernen möchten , ohne ihn tatsächlich zu löschen. So werden die beiden Schrägstriche für einzelne Zeilen verwendet. Wenn Sie viele verschiedene Zeilen oder einen Codeblock haben, den Sie kommentieren möchten, können Sie einen mehrzeiligen Kommentar verwenden , der mit einem Schrägstrich und dann dem Stern beginnt und dann mit dem Stern und dem Schrägstrich endet. Das ist das Ende dieses Videos zu Kommentaren auf dem Display in JavaScript. Vielen Dank für das Ansehen, und wir sehen uns im nächsten Video. 5. Javascriptvarianten und Aufgaben: Willkommen zurück zu diesem neuen Abschnitt namens JavaScript-Grundlagen. Ich werde anfangen, indem ich einen neuen Ordner in unserem JavaScript-Abschnitt erstelle, ich werde diesen Ordner javascript-basics aufrufen. Dort können Sie alle Teile des Abschnitts speichern. Deaktiviert also eine Menge Tippen. Wenn wir zurück zu dem letzten Video, das wir in Verstehen-Javascript getan und dann kopieren Sie die Kommentare und Anzeige in JavaScript-Ordner und fügen Sie dann, dass in den JavaScript-Grundabschnitt und benennen Sie es um. Ich möchte meine in Ordnung halten, indem ich Nummer 1 mache, rufe ich diese Variablen und Zuweisungen auf. Dann lege das in Klammern. Da gehen wir hin. Jetzt haben wir die Indexseite aus dem letzten Video. Ich werde diese Kommentare vorerst loswerden, aber halten Sie den Code an Ort und Stelle und ändern Sie dann den Seitentitel in Variablen und Zuweisungen. Wir können den Code wiederverwenden, den wir im letzten Video gemacht haben. Dieser Abschnitt von JavaScript, es nimmt die leere Ebene 1 Überschrift und ersetzt sie durch etwas Text. In diesem Video werden wir einen Blick auf Variablen werfen und wie wir sie in JavaScript verwenden können. Eine Variable ist ein Container für Informationen, die wir einen Namen geben können, und der Inhalt dieser Variablen, wie der Name schon sagt, kann sich ändern. Werfen wir einen Blick darauf, wie wir Variablen verwenden können. Wir deklarieren eine Variable, indem das Schlüsselwort var verwenden und dann setzen wir den Namen der Variablen als nächstes. Ich möchte meine Variable pageTitle und dann das Gleichheitszeichen aufrufen meine Variable pageTitle und und dann zwischen Anführungszeichen setzen wir den Inhalt der Variablen. Ich werde diesen Text wiederverwenden. Schneiden Sie den Text dort, und dann, wenn wir ihn in die Variable und das Semikolon am Ende einfügen, so dass wir den Text über eine Variable namens PageTitle zuweisen. Jetzt können wir zurück zu unserem innerHTML gehen und anstatt das gleich dem Text zu setzen, können wir den Variablennamen , der PageTitle ist, setzen und speichern. Jetzt, wenn wir zurück zum Browser gehen und aktualisieren, sollten wir die gleiche Nachricht erhalten. Aber dieses Mal wird die Nachricht in einer Variablen gespeichert und Sie können dies ändern, um alles, was Sie wollen. Wir ändern es in Variablen und werfen dann einen Blick und wenn wir aktualisieren, gibt es eine Änderung. Werfen wir einen Blick auf einige weitere Beispiele. Ich werde nur diesen Abschnitt kommentieren. In Klammern können Sie den Befehl auf Schrägstrich drücken und es wird den gesamten Abschnitt kommentieren. Wir haben uns die Erstellung von Variablen mit Text oder Strings angesehen. Wir können auch Variablen mit verschiedenen Datentypen wie Zahlen erstellen. Lassen Sie uns eine Variable mit dem Namen nummer1 erstellen und diese auf eine Zahl wie 10. Sie wissen, wenn wir es mit Zahlen im Gegensatz zu Strings zu tun haben, müssen wir keine Zitate um den Wert setzen. Wir können es einfach lassen, wie es ist und eine zweite Variable namens number2, und der Wert diesmal von 20, und sowie bestimmte Werte zu Variablen. Wir können auch eine Variable erstellen, die aus Variablen zusammengesetzt ist. In diesem Fall können wir eine Summe erstellen und diese Summe auf die Summe der Variablen Zahl1 plus Variable Zahl2 und das Semikolon am Ende setzen die Summe der Variablen Zahl1 plus Variable Zahl2 und dann zu überprüfen, ob diese alle in Ordnung sind, können wir eine Warnung erstellen und dann können wir einfach Alarmieren Sie die Summe. Mal sehen, das funktioniert mit der Aktualisierung. Großartig. Wir haben die insgesamt 30 erscheinen dort, das ist die Summe der beiden Variablen zusammen addiert. Wie bereits erwähnt und wie der Name schon sagt, kann sich ein Wert einer Variablen ändern. Sobald wir eine Variable mit dem Schlüsselwort var deklariert haben, müssen wir das Schlüsselwort var nicht erneut verwenden, um den Wert zu ändern. Wenn wir den Wert von Zahl1 ändern wollten, geben wir diesmal einfach Nummer1 ein, und wir können seinen Wert so etwas wie fünf ändern. Jetzt ist Zahl1 gleich fünf und Zahl2 ist 20. Wir sollten jetzt die Ergebnisse von 25 erhalten. Wenn wir Variablen erstellen, können wir die Variable zuerst deklarieren, ohne einen Anfangswert darauf zu setzen. Wenn wir nur die Variable setzen und ihr einen Namen geben, muss sie keinen Anfangswert haben. Dann können wir dieser Variablen ein wenig später im Code einen Wert zuweisen und dies wird immer noch wie zuvor funktionieren. Wir haben jetzt Nummer 1 fünf und Nummer 2 auf 10 gesetzt. Wir sollten die Summe von 15 bekommen, und wir bekommen 15, das ist gut. Gehen wir einfach zum ursprünglichen Beispiel zurück. Wenn wir Variablen erstellen, gibt es bestimmte Regeln, die wir beim Erstellen einer Variablennamen befolgen müssen. Wenn wir eine Variable benennen, muss sie mit einem Buchstaben, einem Unterstrich oder einem Dollarzeichen beginnen, oder einem Dollarzeichen beginnen, und Variablennamen unterscheiden auch zwischen Groß- und Kleinschreibung. Wir hatten eine Variable mit dem Namen Zahl1 und dann hatten wir eine Variable mit dem Namen Number1, um mit einem Kapital zu beginnen. Diese werden als verschiedene Variablen behandelt. Wir werden einfach das Beispiel ändern, es mit einem Kapital beginnen, wir sollten immer noch die Summe von 5 plus 10. Da gehen wir hin. Das letzte, worüber ich in diesem Video sprechen wollte, ist der Zuweisungsoperator , der dieses Gleichheitssymbol ist. In JavaScript weist das Symbol dem Variablennamen einen Wert zu und überprüft nicht, ob er gleich ist. In JavaScript, wenn wir überprüfen wollen, ob etwas gleich ist, verwenden wir eine doppelte gleich. Zum Beispiel ist fünf gleich fünf und das bedeutet gleich, und wir können auch die drei gleichen Symbole verwenden. Wenn fünf und drei Symbole gleich fünf sind, wird auf diese Weise überprüft, ob die Werte gleich Wert und gleicher Typ sind. In diesem Fall sind die fünf gleich fünf im Wert und dem Typ, da es sich um beide Zahlen handelt. Aber fünf, die drei gleichen Symbole und dann die fünf in Zitaten. Dies sollte falsch sein, weil sie gleich sind, aber sie sind nicht gleich Typ, weil die fünf auf der linken Seite eine Zahl und die fünf auf der rechten Seite sind, weil es in Anführungszeichen ist, eine Zeichenfolge ist und es als Text betrachtet wird. Wir werden uns viel mehr Beispiele für diese ansehen, während wir den Kurs durchlaufen , aber das war's vorerst. Vielen Dank für das Zuhören, und sehen Sie im nächsten Video. 6. Zahlen und Arithmetik: Willkommen zurück. In diesem Video werden wir einen Blick auf JavaScript-Zahlen auf grundlegende Arithmetik werfen. Wenn Sie in den JavaScript-Grundordner gehen und den Variablenordner aus dem letzten Video duplizieren, möchte ich meine Nummer 2, Zahlen und Arithmetik aufrufen und dann in Klammern öffnen. Da gehen wir hin. In JavaScript haben wir bereits untersucht, wie wir einer Variablen eine Zahl zuweisen können, aber JavaScript kann so viel mehr mit Zahlen tun. Wenn wir eine Variable erstellen, löschen wir einfach den letzten Abschnitt dort und auch die Überschrift, das brauchen wir nicht mehr. Bisher haben wir uns bei der Zuweisung einer Zahl zu einer Variablen wie dieser angesehen, aber neben der Zuweisung der Zahl 10 zum Wert von x können wir auch eine Summe darin einfügen, also 10 plus 5, und dann können wir die Variable von x und öffnen Sie im Browser, so erhalten wir die Summe von 15. Neben können wir auch wegnehmen, sollten wir den Wert von 5 erhalten. Wir können auch Division, Multiplikation verwenden, also ändern wir die Subtraktion in einen Schrägstrich für Division, und wir sollten jetzt den Wert von 2 erhalten. In JavaScript, wenn wir eine Multiplikation machen, ist der Wert, den wir dafür brauchen, der Stern, 10 multiplizieren mit 5 sollte der Wert von 50 sein. Ein weiteres interessantes, um nach oben zu suchen, ist das Prozentsymbol. Dies liefert tatsächlich den Rest, also 10 geteilt durch 5 wäre 2, und es würde tatsächlich keinen Rest geben, so dass dieser Wert 0 ist. Wenn wir jedoch den Wert auf 9 dividiert durch 5 ändern, würde 5 nur einmal in 9 gehen und würde einen Rest von 4 belassen, so dass wir den Wert von 4 erhalten es dort warnen. Neben den Berechnungen innerhalb der Variablen können wir eine separate Variable setzen, und wir können die Berechnungen innerhalb der Warnung durchführen. Die Warnung kann x mit y multipliziert werden, und wir sollten immer noch das gleiche Ergebnis erzielen. Aktualisieren, und wir bekommen 45. Eine Sache, die es wirklich wert ist, sich zu erinnern, wenn es um Zahlen und Berechnungen geht, ist die Reihenfolge der Berechnung ist wirklich wichtig. Werfen Sie einen Blick auf das als Beispiel. Variable x setzen wir auf 10 plus 5, das ist 15, multiplizieren mit 2. Wir werden dies von links nach rechts lesen, denken 10 plus 5 ist 15, multipliziert mit 2 gleich 30, aber das ist nicht wirklich der Fall, also lasst uns einfach x alarmieren und sehen, was passiert. Wir kriegen 20. Der Grund, warum wir 20 statt 30 erhalten, ist, weil Multiplikation und Division eine höhere Priorität oder höhere Priorität haben als Addition und Subtraktion, so dass die Multiplikation zuerst durchgeführt wird. 2 mal fünf ist 10, plus 10 ist gleich 20, deshalb erhalten wir den Wert von 20, der in der Warnung erscheint. Aber wenn wir den Wert von 30 haben wollten, können wir dies lösen, indem wir die Klammern um den ersten Abschnitt hinzufügen. Dies wird 10 plus 5 hinzufügen, um mit zu beginnen, also 15 und dann multiplizieren mit 2, speichern Sie das und dann aktualisieren, und jetzt erhalten wir den Wert von 30. Das letzte, was ich Ihnen in diesem Video zeigen möchte, ist, wie man Zahlen erhöht und dekrementiert. Werfen wir einen Blick, indem wir die Variable x zu 10 zuweisen. Derzeit, wenn wir den Wert von x lassen, erhalten wir 10, aber wenn wir x erhöhen wollen, könnten wir x plus plus verwenden, und dies erhöht den Wert jedes Mal um eins. Nun, wenn wir unseren Browser aktualisieren, sollten wir den Wert von 11 erhalten. Wenn wir es noch einmal tun und diese Zeile duplizieren würden, wäre x jetzt 12. Dies ist wirklich nützlich für Dinge wie Erhöhung der Punktzahl eines Spielers jedes Mal, wenn sie einen Punkt zu bekommen, würden wir eine Variable namens Punktzahl haben, und dann jedes Mal, wenn sie einen Punkt bekommen, wäre es Punktzahl plus plus. Neben Plus Plus können wir auch die Punktzahl um eins verringern, genau so. Jetzt nehmen wir eine von 10 weg und wir sollten 9. Das ist nützlich für Situationen wie ein Spieler, der sein Leben in einem Spiel verliert oder jedes Mal die Punktzahl des Spielers um eins reduziert. Vielen Dank für das Anschauen, und das ist das Ende dieses Videos über Zahlen und Arithmetik. 7. Javascriptstränge: Wir machen es jetzt gut in diesem Abschnitt genannt Strings. Wenn wir in den JavaScript-Ordner gehen, den wir erstellt haben und dann in die JavaScript-Grundlagen. Genau wie zuvor, duplizieren Sie das letzte Video und dann benennen Sie es meins wird Nummer 3 JavaScript-Strings sein und speichern Sie das und öffnen Sie es in Ihrem Texteditor. Dann wird der Titel nur als Strings und dann können Sie den Abschnitt zwischen den Skript-Tags löschen. In den vorherigen Videos haben wir uns kurz Strings angesehen und eine Zeichenfolge ist im Grunde ein Textabschnitt. Es kann ein Zeichen sein, es kann ein Wort sein, oder es kann ein Absatz sein. Beginnen wir mit dem ersten Beispiel und wir werden eine Variable erstellen. Der erste wird FirstName sein und FirstName zuweisen in meinem Fall ist es Chris, das Semikolon am Ende. Dann eine zweite Variable des zweiten Namens und weisen Sie dies meinem zweiten Namen zu, der Dixon ist. Wir können einfache oder doppelte Anführungszeichen verwenden, es spielt keine Rolle und wir können dann die Strings verbinden. Ich möchte diese auf der Konsole anzeigen, so console.log. Wir könnten sie verbinden, indem wir die Variablennamen verbinden. Also FirstName und dann das Plus und dann der zweite Variablenname mit dem Semikolon am Ende. Öffnen Sie dann im Browser und gehen Sie dann zur Konsole und Sie können sehen, dass der Name gerade da ist. Es wird sowohl der erste als auch der zweite Name gedruckt, also spielt es keine Rolle bei den einfachen oder doppelten Anführungszeichen. Zitate beginnen jedoch wichtig zu werden , wenn wir sie tatsächlich in die Zeichenfolge einbeziehen. Wenn wir ein Zitat haben würden und das Zitat Texte wie „Mein Name ist Chris“ hätte , und wir wollten, dass der Name in Zitaten steht, könnten wir das nicht wirklich tun. Dann ändern Sie den Variablennamen in Anführungszeichen und lassen Sie uns sehen, was damit passiert. Dann gehen Sie in die Konsole und Sie können sehen, dass wir einen Syntaxfehler erhalten. Wir können beheben, indem wir zu der Zeichenfolge gehen und stattdessen die doppelten Anführungszeichen können wir eine andere Art von Anführungszeichen verwenden. Ändern Sie das zu Single und dann aktualisieren und da gehen wir. Wieder, mein Name ist Chris und es hat tatsächlich die einfachen Anführungszeichen gedruckt. Sie können das auch tun, wenn Sie einfache Anführungszeichen auf der Außenseite hatten Sie können die inneren Anführungszeichen als doppelt festlegen. Speichern und aktualisieren und es gibt ein doppeltes Anführungszeichen, das alles gut funktioniert, also lasst uns das einfach loswerden. Neben dem Verbinden von Strings können wir auch Strings mit Variablen und Dingen wie Zahlen verbinden . Zum Beispiel, wenn wir einen Namen auf Chris gesetzt hatten, tun wir document.write diesmal. In diesem Beispiel werde ich eine Variable mit einer Zeichenfolge verbinden und dann mit einer Zahl und drucken Sie die Wörter Chris ist 31. Ich habe bereits den Variablennamen, damit wir das hinzufügen können. Dann können wir das Plus verwenden, um hinzuzufügen oder zu verketten. Wir haben Chris und dann müssen wir „is“ zwischen Zitaten hinzufügen, also ist das eine Zeichenfolge. Dann eine Zahl plus, um die Zahl hinzuzufügen, so dass wir in das Alter eingeben können, das 31 ist. Speichern und dann aktualisieren, wir werden das Wort Chrisis31 bekommen, aber es gibt keine Leerzeichen dazwischen und das ist einfach zu beheben. Wenn wir in die Zeichenfolge gehen, können wir vor und nach ein Leerzeichen hinzufügen, und dies wird den Raum im Dokument ausdrucken, so dass Sie gehen. Das ist eine ziemlich einfache Art der Form und eine Zeichenfolge, aber wenn wir eine lange Zeichenfolge wie einen Absatz hatten. Es gibt viele verschiedene Formate und Optionen und Flucht, die wir tun können, um das besser aussehen zu lassen. Wenn Sie zu Google gehen und nach Lorem Ipsum suchen und wir werden nur einige Beispieltext bekommen. In der Tat, Ich werde nur kopieren Sie den ersten Absatz, der wie genug Text aussieht ihre. Ändern Sie die Variable und rufen Sie meinen Absatz auf. Dann zwischen den Anführungszeichen fügen Sie den Beispieltext ein, und dann, wie Sie nach unten gehen und wir drucken dies auf die Konsole, console.log. Auf dem Text, den wir drucken möchten, ist der Absatz, also gehen Sie zum Browser und gehen Sie dann zur Konsole. Es gibt den ganzen Dummy-Text, den wir angelegt haben. Es ist ein ziemlich großer, unlesbarer Teil von Text dort. Möglicherweise möchten wir diesem Text einige Formatierungen wie Zeilenumbrüche, Zitate oder Tabulatoren hinzufügen. Wir können das mit etwas JavaScript tun, wenn wir nach einem Abschnitt suchen, den wir eine neue Zeile erstellen möchten. Ich werde meinen dort anfangen. Wenn Sie einen umgekehrten Schrägstrich und dann ein, so sollten wir eine neue Zeile nach dem Wort Industrie zu bekommen. Erfrischen Sie sich und da gehen wir. Das ist die erste Zeile, die nach dem Wort Industrie bricht. Wir können nur ein oder zwei davon kurz davor reinlegen. Es gibt eine und speichern und werfen Sie einen Blick. Gut, es gibt noch einen Zeilenumbruch. Es gibt ein paar verschiedene Dinge, die Sie auch tun können, wir können auch doppelte oder einfache Anführungszeichen in Text setzen, und wir können sie auch mit dem umgekehrten Schrägstrich entkommen, also verwenden Sie einen umgekehrten Schrägstrich und dann die Anführungszeichen. Dann machen wir genau das gleiche danach also Backslash und ein Zitat und dann aktualisieren. Sie können sehen, ob Sie nach dem Wort suchen, das wir gerade hervorgehoben haben, wir haben die Zitate vor und nach. Sie können auch auf die gleiche Weise mit einem einzigen Anführungszeichen tun. Wenn Sie tatsächlich einen umgekehrten Schrägstrich einfügen wollten, tun Sie das einfach zweimal, also fügen Sie zwei hintere Schrägstriche ein. Da der umgekehrte Schrägstrich dort erscheinen und auch die einfachen Anführungszeichen und wir können auch eine Registerkarte hinzufügen. Wenn Sie einen am Anfang hinzufügen möchten, ist es ein umgekehrter Schrägstrich und ein t und Sie haben den Einzug dort. Es gibt ein paar nützliche Möglichkeiten, Text mit JavaScript zu entkommen und zu formatieren , und ein kleines Beispiel, einschließlich der Tabelle, die zu Beginn des Kurses bereitgestellt wurde. Das letzte, was ich Ihnen in diesem Video zeigen möchte, ist, wie Sie die Länge einer Zeichenfolge mit der length Eigenschaft finden . Lassen Sie uns den Lorem ipsum Text loswerden und wir können diese Variable wiederverwenden. Ich werde das Namensbeispiel erneut verwenden, also Name gleich Chris und dann werden wir eine neue Variable erstellen, um die Länge des Namens zu speichern. Variable namens NameLength und die Art und Weise, wie wir die Länge für den Namen erhalten, ist, indem Sie nicht auf den Name.length setzen. Dann können wir schließlich auf der Konsole den neuen Variablennamen einloggen. Speichern Sie das, und aktualisieren Sie es dann. Da gehen wir, so ist die Länge für meinen Namen fünf Zeichen lang. Das ist das Ende dieses Videos und wenn du mir im nächsten Video beitrittst, werden wir dies in einer Mini-Herausforderung in die Praxis umsetzen. 8. Mini-Challenge: Zeige ein Benutzerergebnis: Willkommen zurück. Es ist jetzt an der Zeit, eine kleine Pause vom Lernen zu nehmen und das, was Sie bisher in Ihrer ersten Mini-Herausforderung gelernt haben, in die Praxis umzusetzen. Ich möchte, dass Sie eine einfache Webseite erstellen, die die Punktzahl eines Benutzers anzeigt. Erstellen Sie ein paar Variablen für den Namen des Spielers und auch die Punktzahl, und zeigen Sie diese Punktzahl dann auf einer Webseite in einer Zeichenfolge an. Es muss nichts Phantasie sein, alles, was Sie tun müssen, ist, den Benutzer anzuzeigen und dann eine Zeichenfolge am Ende hinzuzufügen, für die Partitur ist, und fügen Sie dann die Variable für die Anzahl der Punkte hinzu, und fügen Sie dann schließlich die Zeichenfolge auf das Ende. Fühlen Sie sich frei, dies ein wenig anders zu machen als mein Beispiel. Aber um es zu versuchen, ist es ein guter Weg, um das, was wir bisher gelernt haben, in die Praxis umzusetzen. Wenn Sie sich noch nicht 100 Prozent sicher fühlen, dies zu tun, ist das kein Problem. Folgen Sie einfach mit dem Rest dieses Videos, und ich werde Ihnen zeigen, wie ich es tun werde. Ich hoffe, du schaffst es selbst, wenn nicht, mach dir keine Sorgen, ich zeige dir jetzt, wie es geht. Wenn Sie einfach in den JavaScript-Grundordner gehen und dann das letzte Video duplizieren. Ich werde meine Nummer 4 Challenge-Display-Benutzer-Score anrufen. Öffnen Sie dann Ihren Texteditor, dann ändern Sie den Titel, Anzeigen Benutzerbewertung. Ich werde hier von vorne anfangen. Zwischen den Skript-Tags werde ich eine Variable namens Player gleich Chris erstellen, und dann eine Variable, um den Punktewert zu halten. Also Ergebnis gleich Null, nur um damit zu beginnen. Dann eine weitere Variable, um die Anzeige oder die Zeichenfolge zu halten, so DisplayScore. Nur um mein Display ein wenig größer zu machen, werde ich mit ein paar h3-Tags beginnen. Ich habe sie in diesem Kurs noch nicht angeschaut, aber Sie können tatsächlich HTML-Tags hinzufügen, indem Sie in den Zitaten umgeben. Wir beginnen mit dem h3 und dann fügen wir den Spieler oder die Spieler-Variable hinzu. Dann am Ende des Spielers, Ich möchte den Apostroph und dann die s setzen, also ist es Chris Punktzahl ist. Wir können das als String hinzufügen. Also der Apostroph und die s und dann eine Zahl plus. Bisher haben wir Chris. Dann wollen wir die Zeichenfolge der Partitur setzen ist, also öffnen Sie die Anführungszeichen. Denken Sie daran, vor und nach ein Leerzeichen zu setzen, damit sich die Worte nicht berühren. Also Chris Punktzahl ist, und dann müssen wir am Ende die Partiturvariable hinzufügen. Also Chris Punktzahl ist Null, und dann das Wort Punkte, also Leerzeichen, und dann Punkte. Dann ganz am Ende, wenn es geschlossen ist, das h3-Tag, genau wie das mit einem Semikolon am Ende. Jetzt haben wir unsere variablen Sätze von Anzeigepunkten, lassen Sie uns das jetzt auf die Seite drucken. Wir dokumentieren schreiben, und der Variablenname und ein Semikolon, und lassen Sie uns einen Blick. Chris Punktzahl beträgt also Nullpunkte. Wenn wir die Punktzahl jedes Mal erhöhen wollten, wenn der Benutzer einen zusätzlichen Punkt bekommt, könnten wir Score++ hinzufügen, wenn Sie sich daran erinnern, dass von früher an. Dann, wenn wir jetzt aktualisieren, sollten wir Chris Punktzahl bekommen, ist ein Punkt. Sie können das so oft tun, wie Sie wollen und die Punkte werden entsprechend steigen. Das ist das Ende der Herausforderung. Ich hoffe, Sie haben es geschafft und hoffen, dass Sie es genossen haben. Vielen Dank und ich werde Sie im nächsten Video sehen. 9. Strangmethode: Bisher haben wir uns in diesem Kurs String-Grundlagen angesehen, wie das Speichern einer Zeichenfolge in einer Variablen und auch das Verbinden von Strings, aber es gibt so viel mehr, was wir mit Strings tun können. Jetzt werden wir einen Blick auf einige sehr nützliche String-Methoden werfen. Wenn Sie in Ihren JavaScript-Ordner gehen und dann in die JavaScript-Grundlagen. Ich möchte den letzten Ordner, den wir erstellt haben, duplizieren. Ich werde diese Nummer 5 String-Methoden nennen dann in Ihrem Texteditor öffnen. Ich werde es nur ein wenig größer machen und dann den Titel in String-Methoden ändern und dann nach unten gehen. Ich werde nur den Code löschen, den wir im letzten Video geschrieben haben. String-Methoden ermöglichen es uns, viel mehr mit Strings zu tun. Das erste Beispiel, das ich Ihnen zeigen werde, ist die Konvertierung einer Zeichenfolge in Großbuchstaben. Beginnen wir mit der Erstellung einer Variablen namens string und ich werde nur festlegen, dass JavaScript ein Semikolon hinzufügen, und dann werde ich eine zweite Variable erstellen. Ich werde diese neue Zeichenfolge nennen. Wir werden den Wert der neuen Zeichenfolge gleich der ursprünglichen Zeichenfolge setzen. Das ist der Variablenname und dann Punkt und dann zwei Großbuchstaben, dann die geschweiften Klammern und Semikolon. Vergessen Sie nicht die paar Schichten auf jedem Wort nach dem ersten. Jetzt haben wir die Zeichenfolge in Großbuchstaben konvertiert. Lassen Sie uns nun die neue Zeichenfolge alarmieren. Wir können überprüfen, dass das funktioniert. Alert, was müssen wir alarmieren? Das ist der Wert der neuen Zeichenfolge. Setzen Sie das in die Klammern und öffnen Sie es dann in Ihrem Browser. Da gehen wir, großartig. Da ist unsere ursprüngliche Zeichenfolge und alles wird in Großbuchstaben geändert. Wir können eine ähnliche Sache tun, aber wir können in Kleinbuchstaben konvertieren. Sie können wahrscheinlich erraten, wie Sie das tun, wir müssen nur den String-Punkt in Kleinbuchstaben ändern, und dann öffnen Sie das und überprüfen Sie, dass es funktioniert. Da gehen wir, also wurden alle Hauptstädte jetzt in Kleinbuchstaben geändert. Die nächste Methode, die ich Ihnen zeigen werde, ist das, was String-Ersetzen genannt wird. Das ist, wenn wir nach einem bestimmten Abschnitt oder einem bestimmten Wort in der Zeichenfolge suchen. Wir können dieses Wort ersetzen. Lassen Sie uns einfach eine etwas längere Saite machen. Ich möchte JavaScript lernen, um Websites zu erstellen. Wieder nehmen wir den Wert der ursprünglichen Zeichenfolge, und die Methode, die wir verwenden werden, ist string.replace, und dann werden wir in den Klammern zwei Parameter setzen. Das erste wird das Wort sein, das wir ersetzen wollen. Ich werde Websites ändern und sie dann durch ein Komma trennen. Wir setzen das Wort ein, das wir an seinen Platz setzen wollen, also werde ich das in Spiele ändern. Wenn wir nun einen Blick auf die Warnung werfen, sollten wir sehen, dass Websites zu Spielen geändert wurde. Also gehen Sie zum Browser und aktualisieren, und das ist genau das, was wir wollen. Ich möchte JavaScript lernen, um Spiele zu bauen. Neben dem Ersetzen einzelner Wörter können wir die Zeichenfolge entweder in einzelne Zeichen aufteilen, oder wir können alle einzelnen Wörter aufteilen. Der Weg dazu besteht darin, die Split-Methode zu verwenden. Ich gehe einfach zur ursprünglichen Zeichenfolge des Lernens von JavaScript zurück und lösche dann den Inhalt in den Klammern. Dieses Mal werden wir string.split verwenden, und dann, was wir in die Klammern setzen, bestimmt genau, wo die Teilung in der Zeichenfolge ist. Wenn Sie nur eine leere Zeichenfolge oder Anführungszeichen setzen, die nichts enthält , wird die Zeichenfolge in einzelne Zeichen aufgeteilt. Aktualisieren Sie einfach die Seite, und Sie können mit dem Komma sehen, dass die Zeichenfolge aufgeteilt wurde, und es sind jetzt alle einzelnen Zeichen. Wenn wir es in einzelne Wörter anstatt in Zeichen aufteilen wollten, können wir ein Leerzeichen setzen. Das Leerzeichen in der Zeichenfolge ist die Markierung für den Ort, an dem diese Zeichenfolge aufgeteilt werden soll. Jetzt sollten wir zwei getrennte Wörter bekommen. Aktualisieren. Jetzt haben wir das Wort, Lernen und das Wort, JavaScript durch ein Komma getrennt, also jetzt sind sie einzelne Strings. Jetzt haben wir zwei getrennte Worte. Wir können auf die einzelnen Wörter über die Indexnummer innerhalb der eckigen Klammern zugreifen. Wenn wir auf das erste Wort zugreifen wollen, wäre das die Position 0. Speichern und aktualisieren. Nun, wir haben das Wort Lernen, und wenn wir das Wort JavaScript wollen, ändern Sie es in das zweite Wort, das ist Position 1. Jetzt bekommen wir das Wort JavaScript. Also, jetzt haben wir die Zeichenfolge in zwei getrennte Wörter aufgeteilt. Wir können diese wieder miteinander verbinden, indem wir die concat-Methode verwenden. Jetzt haben wir zwei getrennte Worte. Wir werden eine neue Variable erstellen. Ich werde dies einfach über der Warnung hinzufügen, also werde ich diese verbundene Zeichenfolge aufrufen, und dann, um die beiden Strings zusammen hinzuzufügen, wählen wir das erste Wort aus. Das war in der neuen String-Variable, und dann, wie wir es mit der Warnung getan haben, werden wir das auf Position 0 setzen, das ist das Wort lernen und dann Punkt und dann concat, und dann innerhalb der Klammern, wir werden die zweite Zeichenfolge hinzufügen, an der wir teilnehmen möchten. Hoffentlich hast du herausgefunden, was das ist. Das ist eine neue Zeichenfolge und dann die eckigen Klammern und Position 1, und dann müssen wir jetzt die verbundene Zeichenfolge alarmieren. Lassen Sie uns das einfach loswerden und fügen Sie die verknüpfte Zeichenfolge ein und aktualisieren Sie sie dann. Da gehen wir. Sie können sehen, dass die Zeichenfolge zu einer Zeichenfolge verbunden wurde und zwischen ihnen kein Komma vorhanden ist. Das ist gut. Die letzte Methode, die ich Ihnen zeigen werde, ist das String-Slice. Lassen Sie uns einfach die verknüpfte String-Variable loswerden. Auch hier werden wir die ursprüngliche Zeichenfolge zu manipulieren, aber dieses Mal wollen wir Punktscheibe verwenden. Setzen Sie die geschweiften Klammern wieder, und die Slice-Methode, es hat eine Start- und eine Endposition. Sie können einen bestimmten Abschnitt der Zeichenfolge ausschneiden. Der erste Wert ist erforderlich, und das ist die Startposition. Ich werde mit Nummer 2 beginnen und dann durch ein Komma getrennt, und der zweite Wert ist optional, was die Endposition ist. Ich werde Nummer 6 verwenden und dann die neue Zeichenfolge alarmieren. Werfen wir einen Blick darauf. Wir haben das Wort arni da, das ist dieser Teil der Saite. Das ist Position 2, also 0, 1, 2, und dann den ganzen Weg bis sechs. Das ist das Ende dieses Videos. Ich hoffe, Sie haben jetzt eine bessere Vorstellung davon, wie Sie Strings mit String-Methoden manipulieren können . Werfen Sie einen Blick auf die Spickzettel, die zu Beginn des Kurses zur Verfügung gestellt wurde. Es gibt ein oder zwei weitere String-Methoden, die Sie möglicherweise nützlich finden. Spielen Sie ein wenig mit ihnen herum. Für jetzt, danke, und wir sehen uns im nächsten Video. 10. Mini-Challenge: korrekte Formatierung von Benutzernamen: Willkommen zu einer anderen Mini-Herausforderung. Dies ist der spannende Teil des Kurses, in dem Sie das , was Sie bisher gelernt haben, in die Praxis umsetzen können. In dieser Mini-Challenge werden wir den Namen eines Benutzers formatieren. Wir alle haben es geschafft, wir alle haben das Kapital versehentlich oder an der falschen Stelle beim Tippen gesetzt. Manchmal bekam ich ein paar Briefe, wo sie nicht in unseren Namen stehen sollten. Ich werde nur anfangen, und dann kannst du das alleine machen. Nummer 6 Challenge-Name-Formatierer, dann öffnen Sie diesen Ordner. Ich werde den Titel in Name Formatierer ändern und dann diesen Abschnitt löschen. Ich werde dich nur loslegen. Ich werde eine Variable namens name erstellen, dann müssen Sie Ihren Namen in die Zitate einfügen. Aber mit einigen fehlplatzierten Großbuchstaben, einfach so. Ich möchte, dass Sie einige der String-Methoden verwenden , die wir im letzten Video angesehen haben und Ihren Namen formatieren. Der erste Buchstabe ist ein Großbuchstabe Ihres ersten zweiten Namens und dann der ganze Rest ist Kleinbuchstaben. Also pausieren Sie das Video und gehen Sie es los, es selbst auszuprobieren ist wirklich der beste Weg, um zu lernen. Wenn Sie stecken bleiben oder irgendwelche Probleme haben, werde ich genau durchgehen, wie ich es getan hätte. Das wäre es, was ich getan hätte. Wie bei vielen Dingen in der Programmierung gibt es verschiedene Möglichkeiten, wie Sie dies angehen können. Aber ich werde es in einige Variablen aufteilen, um damit zu beginnen. Ich werde mit einer Variablen namens split beginnen. Ich werde den Namen in zwei getrennte Wörter aufteilen, damit er individuell funktionieren kann. Um den ersten und den zweiten Namen zu teilen, möchten wir die Split-Methode verwenden, die wir im letzten Video angesehen haben, also name.split. Hoffentlich erinnerst du dich daran, wie man das macht. Erstellen Sie einfach einen Raum und ich werde erkennen, wo der Split ist. Jetzt haben wir die beiden einzelnen Wörter in einer Variablen namens split gespeichert. Es wird nicht eine Variable für jedes dieser Wörter erstellen. Variable name1 ist also gleich der Teilung auf der Position Null. Das ist also das erste Wort. Name2 ist gleich Split, und dann Nummer eins, die die zweite Position ist. Jetzt haben wir den Vornamen in eine Variable. Ich werde jetzt diesen Namen formatieren, also werde ich diese Variable formattedName1 aufrufen, also ist das gleich name1. Dann müssen wir den ersten Charakter zu einem Großbuchstaben machen. Ich werde den ersten Buchstaben schneiden. Die beiden Parameter, die wir setzen müssen, ist die Position Null, um am Anfang zu beginnen und dann eine Position eins zu beenden. Es wird nur die erste Figur schneiden. Um das zu einem Kapital zu machen, setzen wir es auf Großbuchstaben und vergessen nicht die Klammern. Wie sie steht, enthält diese Variable nur ein Großbuchstabe C, also müssen wir am Ende den Rest der Zeichen in Kleinbuchstaben hinzufügen. Nach diesem Name1.slice werden wir den verbleibenden Abschnitt schneiden, aber wir werden nur einen Parameter dort einfügen. Es wird an Position eins beginnen und dann bis zum Ende der Zeichenfolge, .toLowerCase, sein . Lassen Sie uns einfach Alarm erstellen, nur um zu sehen, ob das in Ordnung ist. Sobald Sie formatiertedName1; großartig, das funktioniert alles. Wir können dasselbe mit dem zweiten Namen machen. Ich werde nur diesen Abschnitt kopieren und ihn dann in FormattedName2 ändern. Diese Methode funktioniert genau gleich, aber wir müssen nur name1 in name2 ändern und überprüfen, dass es wieder funktioniert. Großartig. Wir haben die beiden einzelnen Namen, die korrekt formatiert sind. Wir müssen sie nur zusammenschließen. Ich werde eine Variable namens NewName erstellen. Das wird gleich dem FormattedName1 plus FormattedName2 sein, und das ist eine Warnung des neuen Namens. Wir brauchten das. Wir haben den formatierten Namen erscheinen, wir müssen nur ein Leerzeichen dazwischen setzen. Wir können das zwischen formattedName1 und 2 tun. Fügen Sie einfach ein Leerzeichen und ein weiteres Plus-Symbol hinzu. Hoffentlich sollte das jetzt sein. Da gehen wir. Das ist also ein korrekt formatierter Name. Ich hoffe, du hast das losgelassen und ganz alleine gearbeitet. Wenn nicht, mach dir keine Sorgen. Hoffentlich wissen Sie jetzt, wie es geht. Weitere Mini-Herausforderungen, wie wir während des gesamten Kurses weitermachen. Vielen Dank für das Ansehen, und wir sehen uns im nächsten Video. 11. Javascript-Array: Bisher haben wir in diesem Kurs Variablen untersucht und wie sie verwendet werden, um einen Wert zu speichern. Wenn wir jedoch mehr als einen Wert speichern müssen, müssten wir das, was ein Array genannt wird, verwenden. Arrays können mehrere Werte unter einem einzigen Namen halten, und wir können auf diese Werte durch ihre Position oder ihre Indexnummer zugreifen. Gehen wir zu unserem Javascript-Ordner und duplizieren Sie in einem JavaScript-Basics-Abschnitt den letzten Ordner. Dies wird Nummer 7.arrays sein und dann öffnen wir diesen Ordner. Ändern Sie dann den Titel in „Arrays“. Wir können diesen Abschnitt einfach löschen. Es gibt ein paar verschiedene Möglichkeiten, wie wir ein Array erstellen können. Es beginnt in ähnlicher Weise wie Variablen. Wir verwenden das Schlüsselwort var und dann weisen wir dem Array einen Namen zu. Als Beispiel werde ich ein Array für Benutzer erstellen und dann werden wir ein neues Array erstellen und dann die Klammern kurz danach. Dies erstellt ein neues Array namens Benutzer und wir können verschiedene Benutzer oder verschiedene Werte zu diesem Array hinzufügen , indem Sie den Array-Namen und dann die eckigen Klammern verwenden. Die erste Position auf einem Array ist 0. Ich werde die erste Position so einstellen, dass Chris gleich ist und dann werde ich nur noch ein paar hinzufügen, also Benutzer und dann Position 1, werde ich diesen Benutzer Mike nennen. Dann Benutzer und dann ein drittes, wir fügen Paul dort ein. Jetzt sollte unser neues Array drei verschiedene Werte haben, also lasst uns einfach überprüfen, dass alles mit einem document.write funktioniert und dann innerhalb der Klammern können wir den Namen des Arrays setzen, das Benutzer ist. Werfen wir einen Blick. Großartig, es sagt unsere drei Werte, die wir in das Array eingefügt haben. Eine andere Möglichkeit, ein Array zu erstellen, möglicherweise eine populärere Art und Weise, ist die Verwendung der literalen Methode. Beginnend auf die gleiche Weise und anstatt das neue Schlüsselwort zu verwenden, können wir den Wert direkt in die eckigen Klammern setzen. Wie zuvor können wir den ersten Benutzer setzen und dann durch ein Komma trennen. Wir können den Rest unserer Werte und genau wie Variablen hinzufügen, wenn es Strings zwischen Anführungszeichen zieht, aber wir sind in Ordnung, Zahlen genau so zu setzen, wie sie sind. Jetzt können Sie das speichern und dann aktualisieren, und wir erhalten die gleichen drei Benutzer, die wir zuvor hatten. Neben der Anzeige des vollständigen Inhalts des Arrays können wir nur einzelne Werte aus einem Array anzeigen, abhängig von ihrer Indexposition, also Chris ist Position 0, Mike ist 1 und Paul ist 2. Wenn Sie einfach zu document.write gehen und dann statt alle Benutzer zwischen den eckigen Klammern anzuzeigen, können wir die Indexnummer setzen. Wenn wir wollen, dass Mike angezeigt wird, wäre das 1, und wir werden nur einen Wert bekommen , und wenn wir Paul wollen, könnten wir das in 2 ändern. Im Umgang mit Arrays können wir auch verschiedene Datentypen verwenden. Neben Strings können wir zum Beispiel Zahlen eingeben, und das wird genau gleich funktionieren. Wenn wir das einfach speichern und dann aktualisieren, erhalten wir die Nummer, die am Ende des Arrays angezeigt wird. Eine praktische Sache mit Arrays ist, dass wir die length Eigenschaft verwenden können, um herauszufinden wie viele Werte innerhalb des Arrays sind und wie dies mit der.length Eigenschaft zu tun ist. Jetzt sollte es die Länge des Arrays anzeigen, also sollten wir den Wert von drei erhalten. Schauen wir uns an und erfrischen wir uns. Da gehen wir, also bekommen wir den Wert von drei. Wir lassen das aus und im nächsten Video werden wir einen Blick auf einige wirklich mächtige und interessante Möglichkeiten werfen, Arrays mit Array-Methoden zu manipulieren. 12. Array-Methoden: Wie bei Strings, die wir uns vor ein paar Videos angesehen haben, haben Arrays auch verschiedene Array-Methoden und wir können verwenden, was wirklich nützlich sein kann. Beginnen wir also mit einem neuen Ordner. Und das ist Nummer acht, und das sind Array-Methoden. Benennen Sie also die Ordner-Array-Methoden um und öffnen Sie das Öffnen in Klammern. Dann lassen Sie uns das umbenennen. Also Array-Methoden, und dann können wir tatsächlich dieses Array wiederverwenden, das wir zuvor erstellt haben. Wenn Sie also einen zusätzlichen Wert in dieses Array hinzufügen möchten, können wir die Push-Methode verwenden. Der Weg dazu ist, dass wir den Namen des Arrays verwenden , der Benutzer dot push ist, mit den Klammern danach und ein Semikolon. Dann setzen wir in die Klammern den Wert, den wir hinzufügen möchten. Also, ich werde einen neuen Benutzer namens Tom erstellen und dann einfach die Länge Eigenschaft dort entfernen. Also, lassen Sie uns speichern und öffnen Sie das im Browser. Jetzt können Sie sehen, dass wir jetzt vier Werte haben, und Tom wurde am Ende des Arrays platziert. Aber wenn wir Tom zum Anfang des Arrays hinzufügen wollten, können wir eine Methode namens unshift verwenden, und dann speichern und aktualisieren. Jetzt wird Tom zum Anfang des Arrays hinzugefügt, und wir können auch Werte aus dem Array auf ähnliche Weise entfernen. Anstatt unshift, können wir die Shift-Methode verwenden und dies wird das erste Element eines Arrays entfernen. Lassen Sie einfach die Klammern leer und aktualisieren Sie sie dann. Jetzt können Sie sehen, dass der Wert von Chris , der der erste Wert ist, entfernt wurde. Wir können auch den letzten Wert eines Arrays entfernen, mit der Pop-Methode. Also, Benutzer Dot Pop, und das sollte Paul entfernen, vom Ende des Arrays, und aktualisieren, und jetzt sind wir nur noch mit Chris und Mike übrig. Okay, und wir können auch die Reihenfolge der Werte im Array umkehren, indem wir die umgekehrte Methode verwenden. Jetzt sollten wir Paul, Mike und Chris in dieser Reihenfolge erscheinen lassen. Okay, also bevor wir uns das Hinzufügen von Werten und das Entfernen von Werten vom Anfang und vom Ende des Arrays angesehen und das Entfernen von Werten vom Anfang haben. Wir können auch die Slice-Methode verwenden, die einen Wert aus einem Array zwischen einem bestimmten Punkt entfernt. Also werden wir das tun, werden tatsächlich eine neue Variable erstellen. Wir werden dieses Slice nennen, und das wird gleich sein, Benutzer Punkt-Slice. Dann setzen wir in die Klammern zwei Werte ein. Der erste Wert, den wir eingeben möchten, ist also die Startposition. Also, wenn wir Mike entfernen wollten, ist das unsere Position eins. Wenn Sie sich erinnern, ist der erste Index Null, und dann durch ein Komma getrennt, setzen wir den zweiten Wert ein, der die Endposition ist. Also wollen wir, dass dies kurz vor einem Paulus endet, was Wert zwei ist. Dokumentieren Sie dann rechts, die Slice-Variable, und speichern Sie das. Nun, wenn wir das im Browser überprüfen, sollten wir sehen, dass der Wert von Mike angezeigt wird, also speichern und aktualisieren, und da gehen wir. Also haben wir den Wert, dass Mike auf dem Bildschirm erscheint. Wir können die Start- und Endpositionen verwenden, um jeden Wert herauszuziehen, den wir innerhalb des Arrays wollen. Wenn Sie die Spickzettel zur Verfügung gestellt überprüfen, sie sind einige weitere zusätzliche Array-Methoden, die Sie ein Spiel um mit haben können. Ich sehe Sie im nächsten Video, wo wir einen Blick auf JavaScript-Funktionen werfen. 13. Javascript-Funktionen: Willkommen zurück Jungs. In diesem Video geht es um JavaScript-Funktionen. Also lasst uns in gewohnter Weise anfangen. Erstellen Sie also einen Functions-Ordner , der Nummer 9 ist. Öffnen Sie dann den Ordner „Funktionen“ in Ihrem Texteditor. Ändern Sie dann den Titel in Funktionen und löschen Sie dann einfach den Beispielcode dort. Eine Funktion ist im Grunde ein Codeblock, den wir bei Bedarf aufrufen können. Anstatt den gleichen Code mehr als einen zu wiederholen, können wir ihn einmal schreiben und in eine Funktion platzieren. Dann können wir eine Funktion nach ihrem Namen aufrufen, um sie auszuführen. Eine Funktion sieht also ein bisschen so aus. Verwenden Sie also das Schlüsselwort function, und geben Sie der Funktion dann einen Namen. Ich werde es meine Funktion nennen. Dann müssen wir die geschweiften Klammern danach verwenden. Dann geht der Code, den wir in die Funktion setzen, zwischen geschweiften Klammern genau so. Ich fange mit einer einfachen Warnung an. Also werde ich nur einen Text alarmieren, Funktion funktioniert. Sobald wir also eine Funktion erstellt haben, müssen wir sie aufrufen oder sie nach ihrem Funktionsnamen aufrufen. Also in unserem Fall ist es MyFunction. Ich werde danach in die Klammern schreiben müssen, und ein Semikolon. Speichern Sie das. Da ist also unsere Funktion funktioniert. So ziemlich jeder Code, den wir zwischen den geschweiften Klammern wollen, und er wird jedes Mal ausgeführt, wenn er aufgerufen wird. Wenn wir also ein paar Variablen erstellen, kann die Variable A einige Berechnungen innerhalb der Funktion durchführen. Dann Variable B, und setzen Sie das auf 10. Dann können wir auf diese Variablen innerhalb der Funktion zugreifen. Wir werden eine Variable C erstellen, und das wird die Summe von A sein, multipliziert mit B Also A , und dann ein Stern und B. Dann zeigen Sie den Wert von C mit einem document.write. Also, jedes Mal, wenn wir myFunction aufrufen, sollten wir die Berechnung durchführen und dann das Ergebnis der Berechnung auf den Bildschirm gedruckt werden. Also speichern und aktualisieren, und dann erhalten wir den Wert, der auf dem Bildschirm erscheint. Um Ihnen zu helfen, Funktionen ein wenig besser und genau zu verstehen, was sie tun, lassen Sie uns ein echtes Beispiel dafür erstellen, wie wir eine Funktion in einem Spiel verwenden können. Also hatten wir ein Spiel und wir hatten eine Variable, die die Punktzahl festlegt. Dann wird die Variable Lives genannt, die die Anzahl der Leben des Spielers festlegt, und dann die Variable von GameOver. Dies wird auf einen Build auf Wert gesetzt , der wahr oder falsch ist. Also, während das Spiel läuft, wollen, dass falsch sein, um mit zu beginnen. In diesem Fall kann eine gute Verwendung einer Funktion sein, die Anzahl der Leben zu reduzieren, die der Spieler hat. Anstatt diesen Code jedes Mal auszuschreiben, wenn der Spieler ein Leben verloren hat, könnten wir die Funktion einfach aufrufen. Erstellen Sie also Funktion, und wir werden diese LifeLost nennen. Jedes Mal, wenn der Spieler ein Leben verliert, würden wir dann die Punktzahl wieder auf Null zurücksetzen. Wir könnten auch die Anzahl der Leben um eins verringern. Wir würden GameOver auch auf true setzen. Dann, wenn das Spiel vorbei ist, möchten wir vielleicht eine Nachricht auf dem Bildschirm senden. Also dokument.write. Wir werden das zwischen den Überschriften der Ebene 2 setzen. Also Spiel vorbei. Dann sagen wir dem Benutzer, wie viele Leben er noch haben. Dann zeigen wir die Anzahl der Leben an. [ unhörbar] diese Sidebar, um ihnen mehr Platz zu bekommen. Um also die Zahl Leben zu drucken, können wir die Lebensvariable hinzufügen. Nach der Zahl fügen wir die Zeichenfolge hinzu, bleibt übrig und schließen dann die Überschrift der Ebene 2. muss ich wirklich aufräumen. Also lassen Sie uns das speichern, dann rufen wir die Funktion auf, LifeLost. Werfen wir einen Blick. - Großartig. Jetzt erscheint die Botschaft, und die 10 Leben, mit denen wir begonnen haben, wurden jetzt auf neun reduziert. können wir noch mal machen. Es sollte jedes Mal um eins reduziert werden. Hoffe, dieses Beispiel hat Ihnen eine bessere Vorstellung davon gegeben, wie wir Funktionen in JavaScript verwenden können. Im nächsten Video werden wir weiter mit einem Blick auf die Funktionsparameter fortfahren. 14. Funktionsparameter: Willkommen zurück. Im letzten Video haben wir uns gezeigt, wie man eine Funktion definiert und wie man diese Funktion mit dem Namen der Funktionen und dann den geschweiften Klammern aufruft . In diesem Video werden wir das ein bisschen weiter nehmen. Ich werde einen Blick auf die Übergabe von Parametern in diese geschweiften Klammern werfen. Beginnen wir mit dem Ordner. Öffnen Sie Ihren JavaScript-Ordner. Duplizieren Sie in den Grundlagen die Funktionen. Dies ist Nummer 10, Funktionsparameter. Öffnen Sie dann den Funktionsparameter-Ordner und ändern Sie den Namen. Werfen wir einen Blick darauf, wie das funktioniert. Wir können einfach den Abschnitt aus dem letzten Video löschen. Eine neue Funktion, und wir werden diese AlertMessage aufrufen. Diesmal lassen wir die Klammern leer. Ich werde eine Nachricht dort hineinreichen. Dann ist die Funktion, dass Sie einfach zu alarmieren, die Nachricht, die Sie übergeben haben. Dies wirkt in ähnlicher Weise wie eine Variable. Woher bekommen wir diese Nachricht? Nun, wir setzen das in die Klammern, wenn wir die Call-Funktion. AlertMessage. Dieses Mal, anstatt nur die Klammern leer zu lassen, werden wir eine Nachricht übergeben, die wir alarmieren wollen. Ich lerne Javascript. Diese Nachricht ist, was auch immer hier drin ist. Dann werden wir diese Nachricht einfach alarmieren. Werfen wir einen Blick. Es gibt die Nachricht, ich lerne Javascript. Wir können auch mehr als einen Parameter in die Funktion übergeben. Wenn wir eine Funktion haben wollten, wir gerade eine Berechnung durchgeführt. Ich erstelle eine neue Funktion namens MultiplyNumbers. Dann können wir zwei Parameter übergeben; Zahl1 und auch Zahl2. Dann können wir die Berechnung der Zahl1 multiplizieren mit Zahl2 alarmieren. Dann wie zuvor, wenn wir diese Funktion aufrufen, geben wir die beiden Zahlen ein, die wir berechnen möchten. Zum Beispiel fünf und vier. Jetzt sollten wir die Berechnung alarmiert bekommen, was das Ergebnis von 20. Okay, also das funktioniert alles. Ich hoffe, dass alles Sinn macht und danke Ihnen für das Anschauen und ich hoffe, Sie haben jetzt ein besseres Verständnis dafür, wie Sie Parameter in Funktionen übergeben können. Ich sehe Sie im nächsten Video, wo wir einen Blick auf JavaScript-Bereich werfen. 15. Javascript=Scope: Willkommen zurück. In diesem Video werden wir einen Blick auf den JavaScript-Bereich werfen. Scope definiert im Grunde, auf welche Variablen wir Zugriff haben. Lassen Sie uns einen neuen Ordner erstellen, und wir werden einen Blick darauf werfen. Also duplizieren Sie das letzte Video. Das ist Video Nummer 11, und wir nennen es Scope. Öffne dich wie gewohnt. Innerhalb des Texteditors, und ändern Sie den Titel in Javascript-Bereich, und dann sollten Sie diesen Abschnitt entfernen. Beginnen wir mit einer Funktion. Wir werden diese Funktion multiplizieren aufrufen, und wir brauchen keine Parameter dort nur für den Moment. Also in dieser Funktion möchte ich ein paar Variablen erstellen, also Variable a und setzen Sie das auf zwei, und Variable b, geben Sie einen Wert von fünf, und erstellen Sie dann eine Warnung eines Multiplizierens mit b diese Multiplikationsfunktion, und wir sollten das Ergebnis von 10 auf dem Bildschirm erscheinen erhalten. Also, das funktioniert alles gut. Also haben wir zwei Variablen innerhalb dieser Funktion erstellt, und das nennt den lokalen Bereich. Das bedeutet, dass auf diese beiden Variablen nur innerhalb dieser Funktion zugegriffen werden kann. Also, wenn wir versuchen, eine der Variablen zu warnen, also versuchen wir, zum Beispiel Variable b, die innerhalb der Funktion deklariert wurde, zu alarmieren , und wenn wir dann zum Browser gehen, können Sie sehen, dass, wenn wir das tatsächlich passiert nichts. Wenn wir in die Entwickler-Tools gehen, erhalten wir die Fehlermeldung, b ist nicht definiert. Erstellen Sie also nur eine Variable innerhalb einer Funktion, wenn Sie nur innerhalb dieser Funktion verwenden möchten. Wenn Sie diese Variable außerhalb der Funktion verwenden möchten, was ich brauche, um sie herauszunehmen und sie außerhalb der Funktion zu setzen. Jetzt haben diese beiden Variablen einen globalen Gültigkeitsbereich, so dass auf sie nicht nur innerhalb der Funktion, sondern auch irgendwo im Rest des Codes zugegriffen werden kann . Nun, wenn wir b alarmieren, haben wir Zugriff auf diese Variable, die Nummer fünf ist. Auch wenn wir die Multiplikationsfunktion verwenden, wenn wir nur die Kommentare entfernen und dann die Seite aktualisieren, hat die Funktion auch Zugriff auf die beiden Variablen. Also gehen wir hin. Beginnen Sie mit dem Blick auf den Umfang der Variablen, ich hoffe, dass das hilft. Danke fürs Ansehen, und wir sehen uns im nächsten Abschnitt. 16. Javascript-Objekte: Hallo Jungs, und willkommen zurück. In diesem Video werden wir einen Blick auf JavaScript-Objekte werfen. JavaScript-Objekte sind wirklich wichtige Teile von JavaScript. So sehr, dass fast alles in JavaScript als Objekt klassifiziert wird. Objekte sind eine Sammlung von Name-Wert-Paaren. Werfen wir einen Blick darauf, wie wir sie verwenden. Also lassen Sie uns Video Nummer 12 erstellen. Dies wird als Objekte bezeichnet. Dann lass uns das aufmachen. Ziehen Sie also, geben Sie Klammern ein. Lassen Sie uns dies in JavaScript-Objekte ändern und mit einem leeren Skript-Tag beginnen. Da gehen wir. Wenn wir also ein Objekt erstellen wollen, beginnen wir in ähnlicher Weise wie eine Variable, die wir uns früher angesehen haben. Also verwenden wir das Schlüsselwort var, und dann wollen wir dem Objekt einen Namen geben. Ich werde ein Telefon als gutes Beispiel für unser Objekt verwenden. Also geben wir ihm einen Namen des Telefons. Eine Möglichkeit, ein Objekt zu erstellen, besteht darin, das neue Schlüsselwort zu verwenden. So neues Objekt. Wenn wir ein neues Objekt erstellen, müssen wir die Klammern danach verwenden. Dieses Layout sollte aus dem Array-Abschnitt ziemlich vertraut aussehen, wo wir ein neues Array erstellt haben und dann bestimmte Werte oder Eigenschaften zu diesem Array hinzugefügt haben. Jetzt haben wir unser Handyobjekt. Wir können damit beginnen, einige verschiedene Eigenschaften hinzuzufügen, wie den Hersteller des Telefons, das Modell und die Farbe. Um also Eigenschaften zu unserem Telefonobjekt hinzuzufügen, geben wir den Namen des Objekts ein. Dann Eigenschaft zum Telefonobjekt hinzuzufügen, können wir die eckigen Klammern verwenden. Dann können wir innerhalb der Zitate den Namen der Eigenschaft hinzufügen. So kann der Hersteller die erste Eigenschaft sein. Lassen Sie uns unser Beispiel auf Apple setzen. Dann ein Semikolon am Ende. Wir können auf genau die gleiche Weise weitermachen, um mehr Immobilien zu erhalten. So können wir das Modell hinzufügen, und das kann auf das iPhone eingestellt werden. Die Farbe des Telefons, also werde ich das auf Silber setzen. Also setzen wir ein neues Telefonobjekt. Dies wird die Eigenschaften des Herstellers haben, auf Apple eingestellt. Das Modell, das auf iPhone eingestellt ist, und die Farbe des Telefons, die auf Silber eingestellt werden soll. Dies sind also die Name-Wert-Paare. Das ist also ein Name. Dies ist der Wert, der dem Gleichheitsoperator zugewiesen wird. Objekte sind ideal für alles, was über eine Reihe von Eigenschaften verfügt, z. B. ein Personenobjekt kann Eigenschaften wie einen Namen, ein Alter, eine Adresse und eine Kontaktnummer verfügen wie einen Namen, ein Alter, . Also wirklich nützlich, alle unsere Informationen auf dem einen Keyword enthalten zu halten. So haben wir jetzt unser neues Telefonobjekt erstellt, und wir haben drei verschiedene Eigenschaften hinzugefügt. Wir fügen alle unsere Werte hinzu. Wir können jetzt ein Konsolenprotokoll machen. So können wir auf der Konsole das Telefonobjekt einloggen. Also lassen Sie uns das speichern und werfen Sie einen Blick, und gehen Sie zu den Entwickler-Tools. Also gehen wir hin. So können wir sehen, dass unser Objekt in den Protokollen erstellt wird. Wenn Sie das öffnen, können wir alle Name-Wert-Paare sehen. Wir haben die Farbe, den Hersteller und das Modell. Das ist also der Inhalt des vollständigen Objekts. Wenn wir nur auf eine dieser Eigenschaften zugreifen wollten, funktioniert dies in ähnlicher Weise wie ein Array. Anstatt das Telefonobjekt zu protokollieren, verwenden wir ein Telefonobjekt und dann die eckigen Klammern. Dann innerhalb der Zitate, wir setzen nur den Namen der Immobilie. Also, jetzt sollten wir das Modell bekommen, das ist das iPhone. Kopf rüber und erfrischen. Also gehen wir hin. Also gibt es den iPhone-Wert. In unserem Beispiel, das wir gerade nachgeschaut haben, haben wir auf Eigenschaften zugegriffen und zu unserem Objekt hinzugefügt, indem wir die eckigen Klammern verwenden und normalerweise eine beliebtere und einfachere Möglichkeit, Eigenschaften zu einem Objekt hinzuzufügen , besteht darin, die Punktnotation zu verwenden. Es sieht ein bisschen einfacher aus. Verwenden Sie also das Beispiel, das wir oben erstellt haben, lassen Sie uns dies erneut mit dem Telefonobjekt tun. Also lassen Sie uns dies auf ein neues Objekt setzen, und lassen Sie uns diesen Abschnitt einfach auskommentieren. Jetzt möchten wir Eigenschaften hinzufügen. Wir können mit dem Telefonobjekt beginnen. Aber dieses Mal, anstelle der eckigen Klammern, können wir den Punkt verwenden. Also ein Punkt-Hersteller gleich Apple. Das phone.model ist gleich Ihrem iPhone, und dann schließlich die phone.color. Also setzen wir das auf Silber. Das funktioniert also genau genauso wie die Klammernotation, die wir oben verwendet haben, aber ich denke, das sieht nur ein bisschen einfacher aus und es ist nur ein bisschen einfacher zu tippen. Um zu überprüfen, ob es funktioniert, machen wir eine Konsole, ein Konsolenprotokoll und das wird in den Protokollen das Telefonobjekt angezeigt. Also speichern und dann aktualisieren. So gibt es noch einmal unser Objekt mit dem Hersteller, dem Modell und den Farbeneigenschaften. Also bekommen wir genau die gleichen Ergebnisse, aber ich denke, es sieht nur ein bisschen sauberer aus. Wenn Sie sich also erinnern, als wir ein Array erstellt haben, haben wir auch die literale Version gemacht, in der wir das neue Array-Schlüsselwort nicht verwenden mussten. Wir können genau die gleiche Art und Weise tun, um Objekte zu erstellen. Anstatt das Objekt zu erstellen, wie wir es gerade getan haben, was eine Möglichkeit ist, können wir Objektliteral verwenden. Es ist also ein bisschen einfacher, ein Objekt auf diese Weise zu erstellen. Also beginnen wir mit dem Schlüsselwort var und geben ihm dann wieder den Namen des Objekts, und dann ist dieses Mal, ein neues Objekt zu setzen. Wir setzen das Telefonobjekt so, dass es allen Name-Wert-Paaren entspricht, die wir zwischen den geschweiften Klammern setzen. So können wir innerhalb der Klammer die Eigenschaften einstellen. Also Hersteller und dann verwenden Sie einen Doppelpunkt. Also Apple. Das Modell, so wird es mit einem Komma getrennt werden. Das Modell, wieder, das iPhone. Die Farbe des Silbers. Eines der großartigen Dinge bei der Verwendung von Objekten besteht darin , dass es sich nur um Sammlungen von Name-Wert-Paaren handelt. Wir können auch ein Objekt in einem anderen Objekt verschachteln. Zum Beispiel, wenn unser Telefon viele verschiedene Funktionen hatte, könnten wir auch ein Feature-Objekt erstellen. Anstatt einen Wert hinzuzufügen, können wir die geschweiften Klammern verwenden und dann innerhalb der Klammern können wir weitere Name-Wert-Paare hinzufügen. Also zum Beispiel, wenn unser Telefon Funktionen wie Bluetooth hatte. Wir setzen das also auf einen booleschen Wert von true und Wi-Fi. Das sollte also wieder ein Komma sein, und dann Wi-Fi, was auch wahr sein kann. GPS, setzen wir das auf falsch, und Sie können so viele dieser Eigenschaften nach innen verschachteln, wie Sie möchten. Also, wenn wir jetzt auf eine dieser Eigenschaften zugreifen wollten, die verschachtelt sind, ist es ziemlich einfach zu tun. Also machen wir ein Konsolenprotokoll. Beginnen Sie also mit unserem Objektnamen. Der Objektname ist Telefon und verwenden Sie dann den Punkt, um auf die Eigenschaften zuzugreifen. Sie können sehen, die Klammern ist uns bereits eine Liste der verschiedenen Eigenschaften gegeben. Also mit den Farbmerkmalen, Hersteller und Modell. Wenn wir tiefer gehen wollten, können wir die Features auswählen und dann den Punkt wieder verwenden. Dann können Sie innerhalb der Funktionen sehen, wir haben die drei Eigenschaften von Bluetooth, GPS und Wi-Fi. Also lasst uns das speichern und das überprüfen. Also sollten wir den Wert von Bluetooth bekommen, was wahr ist. Also aktualisieren und es gibt unseren wahren Wert, und das ändert sich zu GPS und dann sollten wir einen Wert von false bekommen. Da gehen wir. Also, jetzt haben wir unser Telefon Objekt alle Setup. Ich werde nur ein Beispiel mit einer Funktion erstellen, die wir in diesem Abschnitt angesehen haben. Erstellen Sie also eine Funktion. Wir werden nur die Funktionen Ihres Telefons in einer Funktion anzeigen. Lassen Sie uns einfach eine Warnung an den Browser machen. Dann innerhalb der Warnung können wir den Telefonhersteller anzeigen, indem die Herstellereigenschaft des Objekts ergreifen. Beginnen wir mit einer Schnur. Also ein Hersteller und dann ein Raum. Wir können das Plus verwenden, um das Ende hinzuzufügen. Wählen wir unser Telefonobjekt aus und verwenden Sie die Punktnotation. Also phone.manufacturer und dann, um dies anzuzeigen, wenn es die YourPhone-Funktion genannt wird. Fügen Sie das in ein, und speichern Sie es dann, und gehen Sie dann zum Browser und aktualisieren Sie es. Also gehen wir hin. Da ist unser Hersteller, und dann haben wir den Objekthersteller gezogen, der Apple ist. Also gehen wir hin. So erstellen wir ein Objekt in JavaScript, und das ist das Ende dieses Abschnitts. Also danke. Wir sehen uns im nächsten Abschnitt. 17. Javascriptmathematik: Willkommen zurück zu diesem brandneuen Abschnitt namens JavaScript Math und Daten. Hoffentlich beginnen wir jetzt, ein besseres Verständnis davon zu bekommen was JavaScript ist und was JavaScript kann. Die Dinge sollten dir jetzt viel vertrauter aussehen. Wir werden anfangen, indem wir uns JavaScript Math ansehen. JavaScript Math ermöglicht es uns, komplexe oder einfache mathematische Aufgaben auszuführen , wie das Erstellen von Zufallszahlen, das Finden des niedrigsten oder höchsten Wertes in einem Array, zum Beispiel das Auf- und Abrunden von Zahlen, unter anderem. Dann werden wir einen Blick auf JavaScript-Datum werfen. Das JavaScript-Datumsobjekt ermöglicht es uns, mit dem aktuellen Datum zu arbeiten. können wir auf ein paar verschiedene Arten tun. Wir werden uns das ansehen, während wir diesen Abschnitt durchlaufen. Beginnen wir wie gewohnt in unserem JavaScript-Ordner. Ich werde dort einen neuen Ordner erstellen und diese eine Mathematik und Daten nennen. Dann werde ich nur einen Ordner aus den vorherigen Abschnitten kopieren und ihn dort einfügen, nur um uns loszulegen. Ich werde die erste JavaScript-Mathematik nennen. Öffnen Sie das dann in Ihrem Texteditor. Ändern Sie dann, wie üblich, den Titel in JavaScript Math. Löschen Sie dann jeden Code aus früheren Videos. Da gehen wir. Wir werden mit Pi anfangen. Hoffentlich erinnerst du dich von der Schule, was Pi ist. Wenn du es nicht tust, ist pi 3.14. Wir können das in JavaScript finden, indem Sie das Math Objekt verwenden, und dann Punkt, und dann PI. Wir können Math.pi in einer der üblichen Methoden anzeigen. Ich werde eine Warnung erstellen und dann den Math.pi in die Klammern mit einem Semikolon am Ende setzen. Wir sollten das etwas größer machen, damit du es sehen kannst. Öffne dann den Browser und lass uns sehen, wie das aussieht. Da ist unsere Alarmbereitschaft. Der Wert von pi ist 3.141 und viele weitere Zahlen danach brauchen wir uns für dieses Video keine Sorgen zu machen. Wenn du damit zufrieden bist, kommentiere das einfach aus. Als nächstes werden wir einen Blick darauf werfen, wie man eine Zufallszahl in JavaScript generiert. Der Weg, dies zu tun, ist mit dem Math Objekt wieder, aber diesmal verwenden.random. Aber diesmal müssen wir die Klammern da reinlegen. Auch hier können wir das einfach an den Browser alarmieren. Alarmieren und dann die Math.Random in den Klammern mit dem Semikolon umgeben. Dann schauen wir uns an, was angezeigt wird. Ok. Warnung im Browser ist 0.85. Sie fragen sich vielleicht, warum dies eine Zufallszahl ist. Nun, in JavaScript wird eine Zufallszahl zwischen Null und Eins generiert. Null ist tatsächlich in dieser Zufallszahl enthalten, aber man ist es nicht, also seien Sie vorsichtig. Wenn wir eine Zufallszahl generieren wollen, zum Beispiel zwischen eins und 10, müssen wir es immer noch auf die gleiche Weise tun, aber dann müssen wir nur das Ergebnis multiplizieren, zum Beispiel mit 10. Bisher haben die Zahlen in den beiden Beispielen, die wir Ihnen gerade gezeigt haben, viele Dezimalstellen wie diese dort. Aber manchmal wollen wir auf die nächste ganze Zahl runden. Mit JavaScript können wir entweder aufrunden oder wir können abrunden. Der Weg, um sich zu erholen. Wir erstellen eine Warnung, mit der wir beginnen. Dann, innerhalb der Alarmklammern, müssen wir Math.Ceil verwenden, die kurz für die Decke ist. Dann, in den Klammern danach, müssen wir die Nummer setzen, die wir aufrunden wollen. Wenn wir eine Zahl von 4,5 erstellt haben, sollte dies diese Zahl auf die nächste ganze Zahl aufrunden, die fünf ist. Aktualisieren Sie dann. Wir erhalten den Wert von fünf in der Alert-Box. Das funktioniert mit einer beliebigen Zahl. Wir sollten jetzt noch fünf bekommen. Abrundung ist eigentlich ziemlich ähnlich. Anstelle von Math.Ceil verwenden wir Math.Floor. Dann geben wir wieder die Nummer ein, die wir abrunden wollen. Für eine Zahl von 7,6 sollten wir nun den Wert von sieben innerhalb der Alert-Box erhalten. Großartig. Auch hier funktioniert das mit einer beliebigen Zahl. Es spielt keine Rolle, wie hoch oder wie niedrig die Zahl ist, Sie werden immer noch auf die nächste ganze Zahl runden. Lassen Sie uns das kommentieren und dann weiter unten. Das ist eine Möglichkeit, eine Zahl aufzurunden oder eine Zahl zu runden. Aber wenn wir nur auf die nächste ganze Zahl runden wollten , anstatt alle auf- oder abzurunden, können wir das mit Math.round tun. Sie erstellen Ihre Alert-Box und dann Math.round. Nun, zum Beispiel, ein Wert von 7,2, sollte dies auf die nächste Zahl von sieben gerundet werden, die wir dorthin gelangen. Wenn es über fünf liegt, wie 7,6, sollte sich das jetzt auf acht runden. Wenn die Zahl, die wir übergeben, in der Mitte war, also war es 7,5, wird dieser Wert immer aufgerundet. Wir sollten immer noch acht in der Alarmbox bekommen. Ich werde das nur auskommentieren und dann auf die Suche nach minimalen und maximalen Zahlen gehen . Wenn wir mehr als einen Wert hatten und wir wollten überprüfen, welche die niedrigste Zahl ist oder welche die höchste Zahl ist, können wir Math.min und Math.max verwenden. Lassen Sie uns dieses Mal warnen Math.min. Dann können wir diesmal innerhalb der Klammern mehr als einen Wert übergeben. Lassen Sie uns einige Zahlen eingeben, die durch Kommas getrennt sind. Acht, 15, 3 und 63. Nun, wir sollten in der Lage sein, herauszufinden, welche die niedrigste Zahl ist. Deshalb sollten wir mit [unhörbar] den Wert von drei in der Alarmstufe bekommen , was wir tun. Dann müssen wir alles, was wir tun müssen, um den höchsten Wert zu finden, nur ändern.min zu.max, und jetzt sollten wir den Wert 63 erhalten. Da gehen wir. Sagt 63 in der Alarmbox. Es gibt ein oder zwei weitere Beispiele, die Sie auf Ihrem Spickzettel sehen können, und sie funktionieren alle in ähnlicher Weise wie die Beispiele, die wir gerade dort durchgemacht haben. Jetzt haben wir ein besseres Verständnis dafür, wie JavaScript Math funktioniert. Im nächsten Video lassen Sie uns dies in einer Mini-Herausforderung in die Praxis umsetzen. 18. Mini-Challenge: Erzeuge eine zufällige ganze Zahl zwischen 1 und 100: Willkommen zurück. Ich hoffe, du hast eine Chance, ein wenig mit einigen der JavaScript-Mathematik zu spielen, die wir im letzten Video angesehen haben. Jetzt haben wir die langweilige Theorie aus dem Weg. Lassen Sie uns das nun alles in die Praxis umsetzen und eine weitere Mini-Herausforderung schaffen. Es wird ziemlich einfach sein, obwohl Sie auf dem Weg über ein oder zwei Dinge nachdenken müssen. Alles, was ich in dieser Herausforderung tun wollte, ist eine Zufallszahl zwischen eins und 100 zu generieren. Es ist etwas, das in der Lage sein sollte. Es ist etwas, das wir in früheren Videos gesehen haben, und es ist etwas, das keine Probleme verursachen sollte. Nun, wenn ja, mach dir keine Sorgen, folge einfach mit dem, was ich am Ende dieses Videos mache , und ich zeige dir genau, wie du das machst. Gehen Sie also in Ihren JavaScript-Ordner und dann die Mathematik und das Datum, Abschnitt. Duplizieren Sie das letzte Video, und nennen Sie es, wie Sie wollen, aber ich werde eine zufällige Nummer-Herausforderung aufrufen und dann in Ihrem Texteditor öffnen. Schließlich ändern Sie den Titel und entfernen Sie den Code aus dem letzten Video, so Mini-Herausforderung: Generieren Sie eine Zufallszahl zwischen 1-100. Wir brauchen das nicht mehr, damit wir das entfernen können. Wenn Sie nicht das Gefühl haben, Hilfe zu brauchen, stoppen Sie das Video jetzt und geben Sie es los. Wenn Sie das Gefühl haben, dass Sie noch ein oder zwei weitere Zeiger benötigen, werfen Sie einen Blick auf das letzte Video wieder und werfen Sie einen Blick auf die Math.Random Abschnitt in diesem Video, und das sollte Ihnen alle Hinweise, die Sie brauchen, um die Herausforderung abzuschließen. Also gib das mal, und wenn du dich nicht sicher fühlst, mach dir keine Sorgen. Ich werde jetzt durchgehen, wie ich es tun würde. Lassen Sie uns einfach zwischen den Skript-Tags beginnen. Ich werde damit beginnen, eine Variable zu erstellen, um die Zufallszahl im Inneren zu speichern. Ich werde diese variable gerundete Zahl nennen, und dann wird dies auf Math.random gesetzt werden, die wir im letzten Video angeschaut haben. Vergessen Sie nicht die Klammern und dann das Semikolon. Wenn Sie sich daran erinnern, dass die Math.Random eine Zufallszahl zwischen Null und eins generiert hat, aber weil wir wollen, dass der Wert zwischen eins und 100 liegen, müssen wir den Wert mit 100 multiplizieren. Also lasst uns diese Variable manipulieren. Also kopieren Sie das und fügen Sie es ein. So gerundete Zahl ist jetzt gleich gerundete Zahl, multiplizieren Sie mit 100, und dann lassen Sie uns diese auf den Bildschirm drucken. Ich werde eine document.write verwenden und dann innerhalb der Variablen übergeben, die gerundete Zahl ist. und lassen Sie uns sehen, wie das jetzt sucht, und aktualisieren Sie das ein paar Mal. Du solltest überprüfen, ob es in Ordnung ist. Also müssen wir diese Zahl auch auf die nächste ganze Zahl runden. Ich werde die Nummer abrunden. Wieder, gehen Sie einfach in den Code und ändern Sie dann die gerundete Zahlenvariable, also Math.Floor. Dann in den Klammern dieses Mal, anstatt nur eine Zahl einzugeben, die Sie gerade in uns selbst setzen, werden wir die gerundete Zahlenvariable übergeben und dann einen Blick darauf werfen. Hoffentlich hast du das geschafft. Aber da ist ein kleiner Haken dabei. Wenn Sie sich daran erinnern, dass die Zufallszahl, die wir generiert haben, bei Null begonnen hat, aber nicht tatsächlich die Nummer 1 enthält , so dass die größte Zahl, die wir möglicherweise gehen können, 99. Um das zu erhöhen, werden wir nur plus eins verwenden. Wenn Sie weiter aktualisieren, sollte es endlich die Werte von eins und 100 erhalten, aber es kann eine Weile dauern. Also, jetzt funktioniert das alles. Es gibt nur noch eine Sache, die ich dir zeigen möchte, bevor wir dieses Video beenden. Also der Code, den wir in dieser Herausforderung erstellt haben, ist es ziemlich Schritt für Schritt und alles ist alles in separaten Zeilen. Die Art und Weise, wie wir das tatsächlich kombinieren können, um ein bisschen sauberer zu sein und alles in einer Zeile, werde ich das nur aussagen. Wenn Sie Klammern wie mich verwenden, können Sie den gesamten Code markieren und dann auf Schrägstrich befehligen. Um dies alles auf eine Zeile zu setzen, können wir mit der gleichen Variable beginnen. Ich kopiere das einfach und füge das ein. Aber dieses Mal werden wir mit Math.Floor beginnen, so dass das Ergebnis abgerundet wird. Dann in den Klammern, können Sie in der Math.Zufällig, so fügen Sie, dass innen dort. Die Zufallszahl, die wir generieren, wollen wir, dass mit 100 multipliziert werden. Also lassen Sie uns der Seitenleiste loswerden, so dass wir alle auf einer Zeile dort sehen können, Beispiel, multiplizieren 100, und stellen Sie sicher, dass all dieser Abschnitt gibt es zwischen den Math.Floor Klammern. Dann außerhalb der Klammern können wir unser Plus hinzufügen, genau wie wir es oben tun. Speichern Sie das und wir können immer noch das gleiche document.writes verwenden, und dann hoffentlich, wenn wir zum Browser gehen und aktualisieren, sollten wir immer noch das gleiche Ergebnis erzielen. Aber dieses Mal ist es nur auf einer Linie und es sieht nur ein bisschen sauberer aus. Da gehen wir hin. Hoffe also, dass du es schaffst, das selbst zu erreichen. Wenn nicht, mach dir keine Sorgen. Folgen Sie dem Beispiel, das ich gerade getan habe, und versuchen Sie, genau zu verstehen, was wir tun, und ich werde Sie im nächsten Video sehen. Wir werden einen Blick auf JavaScript-Datums- und Datumsmethoden. 19. Daten und Datierungsmethoden: In diesem Video werden wir einen Blick auf JavaScript-Daten werfen. Lassen Sie uns auf die übliche Weise beginnen und einen neuen Ordner erstellen. Ich werde nur die Mini-Challenges aus dem letzten Video duplizieren und es Dates nennen. Öffnen Sie dann Ihren Texteditor und ziehen Sie dann den Datumsordner dorthin. Jetzt wird der Titel JavaScript-Daten sein. Wir können einfach den Code aus dem letzten Video zwischen den Skript-Tags löschen. Nur um damit zu beginnen, werden wir mit einer einfachen Möglichkeit beginnen , ein neues Datumsobjekt zu erstellen, und wir werden das in einer Variablen speichern. Beginnen Sie, indem Sie eine Variable erstellen, und Sie können sie aufrufen, was Sie wollen. Ich werde mein Show-Date anrufen. Dann müssen wir das auf ein neues Datum setzen. Danach müssen Sie Klammern setzen. Dann können wir eine document.write oder eine andere Methode verwenden, die Sie bevorzugen, um die Variable von show date anzuzeigen, also setzen Sie das zwischen den Klammern und dann ein Semikolon. Da gehen wir, so jetzt bekommen wir das vollständige Datum auf dem Browser gedruckt und Sie werden offensichtlich ein anderes Datum auf es bekommen, je nachdem, an welchem Tag Sie dieses Video sehen, und Ihre Zeitzone. Mit diesem Tagesobjekt gibt es uns den aktuellen Tag, den Monat, den Tag des Monats, das Jahr, die aktuelle Zeit und dann die Zeitzone. Diese Formel ist ziemlich lang und oft wollen wir nicht all diese Informationen. Ich werde dir als nächstes zeigen, Methoden abholen und festlegen. Sie sind so ziemlich, wie sie klingen, eine Get-Methode wird verwendet, um einen bestimmten Pfad des Datums zu erhalten. So können wir die einzelnen Stunden bekommen, wir können den einzelnen Tag, die Sekunden oder die Zeit bekommen. Dann können wir auch setzen Methoden, die verwendet werden, um einen Pfad des Datums zu setzen, wie setzen Sie die aktuelle Zeit oder setzen Sie das aktuelle Datum verwendet werden. Beginnen wir damit, einen Blick auf die Get-Methoden zu werfen. Jede dieser Methoden, die ich Ihnen zeigen werde, werde ich es in einer Variablen speichern. Um damit zu beginnen, werde ich die Variable mit dem Namen date festlegen und dann das auf ein neues Datum setzen, beginnend mit einem Großbuchstaben D und dann die Klammern. Jetzt haben wir das aktuelle Datum. Wir können das in den Tag des Monats aufteilen. Auch hier spielt es keine Rolle, wie Sie diese Variablen nennen, machen Sie sie einfach beschreibend. Ich werde das gleich der Datumsvariable setzen, die wir erstellt haben, und fügen Sie das dann ein, und verwenden Sie dann Punkt, und dann erhalten Sie Datum. Sie können tatsächlich von der automatischen Vervollständigung dort sehen. Das wird Ihnen eine Vorstellung davon geben, was wir tun werden. Holen Sie sich Termine und ein Semikolon am Ende. Wir erstellen ein neues Datumsobjekt, und dann erhalten wir jedes Mal nur eine individuelle Eigenschaft. Ich werde nur diese Zeile duplizieren. Diesmal werde ich es nennen den Tag der Woche, dann diesmal sein Datum.GetDay. Dann, um den Monat zu erhalten, lassen Sie uns eine neue Variable von Monat erstellen. Du könntest vermutlich raten, was wir hier machen werden. Es ist Date.GetMonth. Sie können auch das aktuelle Jahr erhalten. Wir müssen Jahr bekommen. Übrigens können Sie diese einfach kopieren und einfügen müssen, oder ich verwende Befehl oder Steuerelement D, um in Klammern zu duplizieren. Wenn der Texteditor, den Sie verwenden, nicht dupliziert, kopieren Sie einfach und fügen Sie ihn ein. Nach dem Jahr können wir die Stunden und dann Minuten, Date.GetMinutes. Dann ist die letzte, die ich Ihnen zeigen möchte, die Sekunden, also Date.GetSeconds. Wir werden diese beiden Zeilen auskommentieren, wir brauchen sie nicht. Jetzt haben wir alle diese Variablen erstellt und wir möchten vielleicht nur bestimmte Teile des Datums verwenden. Beispielsweise möchten wir eine Zeichenfolge erstellen, z. B. das heutige Datum ist, und geben Sie dann den Tag, den Monat und das Jahr ein. Lass es uns mal gehen. Lassen Sie uns ein document.write machen. Dann zwischen den Zitaten werde ich eine Zeichenfolge des heutigen Datums erstellen und dann einen Doppelpunkt. Ich werde diese auf separate Zeilen setzen, damit es ein wenig lesbarer ist. Wir wollen den Tag und dann den Monat und dann das Jahr zeigen. Wir wollten dies im Browser anzeigen, so wie es ist. Wir können dort einige HTML Break-Tags einfügen und dann die Zeichenfolge beenden, und dann müssen wir verketten, um die Strings zu verbinden, verwenden Sie einfach das Plus-Symbol. Da jedes dieser Wörter eine Zeichenfolge ist, umgeben Sie sie in Anführungszeichen. Das gleiche mit dem Jahr. Es ist ziemlich einfach, dies zu tun, also haben wir die Tagesschnur mit einem Leerzeichen und dann Plus. Dann ist der Tag die Variable Wochentag genannt. Wir können jetzt bis zum Ende des Monats mitmachen. Wir müssen auf den Variablennamen des Monats beitreten. Dann das Jahr, fügen Sie einfach das Jahr hinzu. Wir können sehen, dass unser Code jetzt ziemlich lesbar ist, weil wir beschreibende Variablennamen verwendet haben. Stellen Sie sicher, dass Sie das tun, wenn Sie können. Dann schließlich müssen wir nur am Ende ein Break-Tag hinzufügen , nur so dass sie sich auf separaten Zeilen befinden und dann am Ende ein weiterer Join. Das break-Tag muss so angezeigt werden. Dann mach es auch in der nächsten Zeile. Kopieren Sie das, und das bringt uns zu unserer nächsten Zeile, wie Sie sehen können. Das brauchen wir nicht. Dann beenden Sie das mit einem Semikolon. Wir begannen mit einer Zeichenfolge dort, das heutige Datum ist, wir setzen Break-Tagging, um in die nächste Zeile zu gelangen, und dann werden wir drei separate Zeilen haben, die den Tag, den Monat und das aktuelle Jahr anzeigen . Lassen Sie uns das speichern und sehen, ob das im Browser funktioniert. Aktualisieren Sie das. Also haben wir den heutigen Tag ist, die Tagesnummer, die Monatsnummer, und das Jahr ist 116, also müssen wir das ändern. Wir haben das Jahr erledigt. Wir müssen das ganze Jahr hineinlegen. Da gehen wir. So ist es jetzt 2016. Ich hoffe, das ergibt Sinn. Ich werde nur diesen Abschnitt jetzt kommentieren. Dies sind die Get-Methoden, und ich möchte jetzt auf festgelegte Methoden übergehen, die verwendet werden, um das Datum festzulegen. Beginnen wir mit einer neuen Variable mit dem Namen set date, und wie oben, werden wir das auf ein neues Datum setzen. Dann können wir jetzt einige Teile des Datums festlegen. Wenn wir also den Spaltenmonat setzen wollten, könnten wir die Variable für den festgelegten Namen verwenden, dann Punkt, und dann müssen wir den Monat festlegen und dann den Monat, den Sie in die Klammern setzen möchten, platzieren. Wir können das zum Beispiel auf 11 setzen. Dann, wenn wir das Jahr wieder setzen wollten, verwenden Sie die festgelegte Datumsvariable und dann Punkt setzen Sie das ganze Jahr. Du kannst das auf alles einstellen, was du willst. Ich werde im Jahr 2020 setzen. Sie können sehen, dass diese den, die wir oben verwendet haben, ziemlich ähnlich sind, wir ersetzen nur get mit set. Lassen Sie uns überprüfen, ob es mit dem Dokument schreiben funktioniert. Dann innerhalb des Dokuments schreiben wir werden die festgelegte Datumsvariable verwenden. Also werfen wir einen genaueren Blick dort, Sie können sehen, dass wir den Monat Dezember haben. Wir setzen den 11. Monat ein, eigentlich der letzte Wert ist, weil der festgelegte Monat von 0-11 geht, also 11 wäre Dezember. Wir haben das ganze Jahr auf 2020 gesetzt, und Sie können das im Browser dort sehen. Wir haben die Zeit nicht berührt, also ist das die aktuelle Zeitzone dort. Da gehen wir. Ich hoffe, das ergibt Sinn. Haben Sie ein wenig mit dem, was wir gerade gesehen haben. Vielen Dank für das Ansehen, und sehen Sie im nächsten Video. 20. If-Statements und Vergleiche: Herzlichen Glückwunsch dazu, so weit zu kommen. Dies ist ein neuer Abschnitt namens Control Flow und Loops. In diesem Abschnitt werden wir einen Blick auf einige neue Methoden werfen, wie if else Anweisungen und wir werden einen Blick auf Operatoren, switch-Anweisungen und verschiedene Arten von Schleifen. Wie immer werden wir uns dort ein oder zwei Herausforderungen stellen, damit wir das, was Sie gelernt haben, in die Praxis umsetzen können und sehen, wie es in realen Beispielen funktioniert. Das erste Video, mit dem wir beginnen werden, heißt if-Anweisungen und Vergleich. In JavaScript und vielen unserer Programmiersprachen können wir oft mit vielen Daten umgehen, wie Zahlen und Werte. Wir brauchen oft eine Möglichkeit, mehr als einen Wert mit einem anderen zu vergleichen und über ein Ergebnis zu entscheiden. JavaScript bietet uns eine Möglichkeit, die genannten Vergleichsoperatoren zu vergleichen. Dann wenn Anweisung testen, um zu sehen, ob eine Bedingung wahr ist. Wenn diese Bedingung wahr ist , führt sie Code aus. Werfen wir einen Blick auf einige Beispiele. Da wir uns in einem neuen Abschnitt befinden, möchten wir einen neuen Ordner erstellen. Ich werde diesen Ordnersteuerungsfluss und Schleifen aufrufen. Dann wollen wir in eines der vorherigen Videos gehen und kopieren Sie einfach eines davon, und fügen Sie dann ein, nur so dass wir einen Ausgangspunkt bekommen. Benennen Sie dann diese if-Anweisungen und den Vergleich um. Öffnen Sie das dann in Klammern oder Ihren Texteditor. Ziehen Sie es einfach dorthin und ändern Sie dann den Titel auf der Indexseite. Mein Fall ist, if-Anweisungen und Vergleich, und entfernen Sie dann den Code zwischen den Skript-Tags. Da gehen wir. Das brauchen wir auch nicht. Um zu beginnen, werden wir einen Blick auf einen einfachen Vergleich werfen, nur um zwei Variablen zu vergleichen. Variable a gleich 10 und auch Variable b gleich 20. Wir werden mit einer einfachen if-Anweisung beginnen, nur um zu überprüfen, ob der Wert von a und b gleich ist. Um zu beginnen, verwenden wir das if-Schlüsselwort und dann eine Reihe von Klammern, und danach ein Paar geschweifte Klammern. Mit einer if-Anweisung zwischen den Klammern hier setzen wir eine Bedingung, um zu testen. In unserem Fall wollen wir testen, ob a gleich b ist, also lassen Sie uns das einfach dort setzen, also a, und dann drei gleich und dann b. Wenn Sie sich erinnern, überprüfen Sie die drei Gleichheiten, ob die Werte gleich sind und auch gleich Typ. Lassen Sie uns überprüfen, ob a gleich b ist, und wenn es dann ist, wollen wir ein Dokument schreiben und dann druckt es sie an den Browser aus, nur um uns wissen zu lassen , dass die Bedingung wahr ist. Ich werde nur schreiben, Zustand wahr ist und es nur ein wenig größer machen. Lassen Sie uns ein paar Level-2-Überschriften-Tags hineinlegen. Also h2 vor und nach, und dann öffnen wir die App im Browser und sehen, was passiert. Auch hier wird nichts im Browser angezeigt, weil die Bedingung nicht wahr ist, weil a nicht gleich b ist. Wenn wir nur beide Werte ändern, um gleich zu sein und dann aktualisieren, sollten wir jetzt die Nachricht Bedingung wahr ist. Die if-Anweisung funktioniert alle korrekt. Neben den drei Gleichen gibt es viele andere Vergleiche, die wir verwenden können. Wir haben bereits erwähnt, dass mit zwei gleichen Symbolen überprüft wird , ob a und b gleich Wert, aber nicht gleich Typ ist. Zum Beispiel könnte man eine Zeichenfolge sein, und eine könnte eine Zahl sein. Wenn wir überprüfen wollen, ob die Werte nicht gleich sind, verwenden wir ein Ausrufezeichen und dann ein Gleichheitssymbol. Lassen Sie uns das einfach ändern, um nicht gleich zu sein, und wir sollten immer noch die Bedingung wahr ist, was wir dort tun. Dadurch wird auf den Wert überprüft. Wenn Sie nach Wert und Typ suchen möchten, könnten wir zwei gleich und das Ausrufezeichen verwenden. Dies bedeutet nicht gleich Wert oder Typ. Wir können auch weniger als oder größer als verwenden. Wenn a größer als b ist, was es ist, ist die Bedingung immer noch wahr. Wenn a kleiner als b war, sollte es nun leer sein, da die Bedingung falsch ist. Das Kombinieren von Kleiner als und Größer als mit einem Gleichheitssymbol bedeutet, wenn a kleiner oder gleich b ist, dann führen Sie diesen Code zwischen den geschweiften Klammern und genau dasselbe mit dem Größeren als aus. Wenn a größer oder gleich b ist, ist die Bedingung wahr. Lasst uns das auffrischen. Dies ist wahr, weil a größer als b. Wenn b auch 20 war, so dass sie gleich waren, sollten wir auch immer noch Zustand wahr ist. Gut. Also hoffe ich, dass das Sinn ergibt. Ich werde Ihnen nur ein kurzes Beispiel zeigen wie dies in einem echten Lebensprogramm verwendet werden kann. Ich werde nur überprüfen, ob ein Benutzer angemeldet ist und auch den Namen des Benutzers überprüfen. Eine if-Anweisung könnte überprüfen, ob ein Benutzer angemeldet ist und dann im Browser eine Willkommensnachricht an den angemeldeten Benutzer drucken. Mit einer Variablen, wie eingeloggt, möchte ich dies auf einen booleschen Wert von true setzen. Dies kann entweder wahr oder falsch sein. Dann eine Variable, die den Namen des Benutzers speichert. Ich will meinen auf Chris setzen. Dann wie zuvor erstellen wir eine if-Anweisung. Wenn Sie nur überprüfen möchten, ob ein Benutzer eingeloggt ist, können wir einfach überprüfen, ob eingeloggt ist. Wir müssen keine Vergleichsoperatoren wie equals verwenden, da dies bereits auf true gesetzt ist. Öffnen Sie die Variable. Wenn der Benutzer angemeldet ist, lassen Sie uns eine Nachricht für diesen Benutzer mit einem Dokument schreiben erstellen. Dies kann so einfach oder so kompliziert sein, wie Sie wollen. Ich werde nur eine Willkommensnachricht an diesen Benutzer erstellen und dann am Ende dieser Willkommensnachricht den Variablennamen des Benutzers hinzufügen . Das sollte sagen, willkommen Chris. Dann können Sie den Browser öffnen. Da gehen wir. Wir erhalten die Begrüßungsnachricht, da der Benutzer auf angemeldet eingestellt ist. Wenn Sie dies auf false ändern und dann den Browser erneut aktualisieren, sollten wir die Nachricht verlieren, da diese Bedingung nicht mehr erfüllt ist. Ich hoffe, das macht jetzt alles Sinn für dich. Wenn dies nicht der Fall ist, werfen Sie einen Blick auf einige der Beispiele, die wir gerade verwendet und versuchen Sie, Ihren Kopf um es zu bekommen, bevor wir zum nächsten Video gehen, wo wir auf die if-Anweisungen aufbauen, indem wir einen Blick auf if else Anweisungen werfen. 21. Else- und Else-If-Statements: Willkommen zurück, alle. Im letzten Video haben wir einen Blick auf if-Aussagen geworfen. Wenn Anweisungen überprüfen, ob eine Bedingung erfüllt ist, und wenn diese Bedingung wahr ist, führen wir dann Code aus. Wenn wir jedoch mehr als ein Ergebnis hätten, brauchen wir einen Weg, um damit umzugehen. Wir können damit umgehen, indem wir eine else-Anweisung oder eine else-if-Anweisung verwenden. Lasst uns das in einen neuen Ordner legen. Duplizieren Sie das letzte Video, in der Tat, wenn ich das nummeriere, sind sie in Ordnung. Nummer 1, und dann wird das Nummer 2 sein, das ist anders und else-if. Öffnen Sie dann Ihren Texteditor, und ändern Sie den Namen oben. Dies wird sonst Anweisungen sein, und else-if, nur zwischen den Skript-Tags nach unten zu bewegen. Anstatt zu löschen, ist das, was wir tatsächlich tun können, auf dem letzten Video zu bauen, mit dem zu beginnen. Wir checken ein, ob ein Benutzer eingeloggt ist. Wenn dieser Benutzer angemeldet ist, senden wir eine Nachricht an den Benutzer, aber dies bietet keine Sicherung für den Fall, dass der Benutzer nicht angemeldet ist. Hier kann eine else-Anweisung verwendet werden. Kurz nach der geschweiften Klammer können wir dann else eingeben und dann einen zweiten Satz geschweifter Klammern bereitstellen, und dies ist für die Bedingung, wenn der Benutzer nicht angemeldet ist. Wir können einfach das Dokument kopieren, zwischen die Klammern einfügen. Dieses Mal, wenn der Benutzer nicht eingeloggt ist, senden wir nur eine Nachricht an diesen Benutzer, um ihn anzumelden. Bitte melden Sie sich an, um die Seite anzuzeigen Wir haben immer noch die Variable von eingeloggt auf false gesetzt, also sollten wir jetzt die Login-Nachricht erhalten. Da gehen wir hin. Bitte melden Sie sich an, um die Seite anzuzeigen Dies wird als Fallback verwendet, falls die ursprüngliche Anweisung nicht wahr ist. IF-else-Anweisungen werden ziemlich regelmäßig in Programmiersprachen verwendet. Es ist ein wirklich nützliches Konzept, an das man sich gewöhnen kann. [ unhörbar] if-else-Aussage, und Sie fragen sich vielleicht, was zu tun ist, wenn es eine dritte Option oder eine dritte Bedingung zu erfüllen gibt, und das ist ziemlich einfach. Wir können einfach auf insgesamt und zwischen den if-Anweisungen und den else-Anweisungen aufbauen , wo Sie einfach ein else-if verwenden. Wir werden ein neues Beispiel erstellen. Löschen Sie einfach das alles. Ich werde ein Beispiel erstellen, nur um Ihnen zu zeigen, wie das verwendet wird. Dies basiert auf der Geschwindigkeit eines Autos. Wir werden eine Variable überprüfen, was die Geschwindigkeitsbegrenzung ist. Zum Beispiel werde ich die Geschwindigkeitsbegrenzungen auf 70 einstellen, und dann eine zweite Variable, die Ihre Geschwindigkeit ist, und dies auch auf 70 setzen, nur um damit zu beginnen. Als Beispiel drucken wir eine Nachricht auf das Display des Autos aus. Erstellen Sie eine if-Anweisung, und die if-Anweisung möchte überprüfen, ob Ihre Geschwindigkeit, setzen Sie diese Variable hinein, kleiner als die Geschwindigkeitsbegrenzung ist. Einfügen dort, so dass, wenn Ihre Geschwindigkeit, die Sie tun, ist weniger als die aktuellen Geschwindigkeitsbegrenzungen, können wir eine Nachricht mit einem Dokument Rechte erstellen, wie, danke für das Fahren sicher. Entfernen Sie einfach die Seitenleiste, um dort etwas mehr Platz zu bekommen, und dann können wir eine else-if und dann die Klammern und dann die geschweiften Klammern erstellen. Wenn Ihre Geschwindigkeit größer ist, kopieren wir einfach diese Bedingung basierend auf in der else-if, und sie ändert sich in größer als. Wenn Sie über die Geschwindigkeitsbegrenzung gehen, lassen Sie uns ein Überdokument direkt dort hineinlegen, und diesmal sagen, bitte verlangsamen. Dann werden wir das nur mit einem else Anweisungen als Backup beenden. Sie können mehrere else-if-Anweisungen dort einfügen, wenn Sie möchten, es muss nur direkt nach der letzten geschweiften Klammer gehen, aber stellen Sie sicher, dass eine else-Anweisung am Ende ist. Als Fallback, wenn die Geschwindigkeit gleich der Geschwindigkeitsbegrenzung ist, einfach eine einfache Nachricht hineingeben, wie, vorsichtig, Sie fahren mit den Geschwindigkeitsbegrenzungen. Wir brauchen keine Klammern mit einer Bedingung zu setzen, nur für diese Zeit, weil es nur eine [unhörbare] Bedingungen zu erfüllen gibt. Wir haben abgedeckt, wenn die Geschwindigkeit kleiner oder größer als die Geschwindigkeitsbegrenzung ist, das einzige übermögliche Ergebnis, das wir bekommen können, ist, wenn die Geschwindigkeiten gleich sind, und dies wird durch die else Aussage dort abgedeckt. Werfen wir einen Blick. Derzeit haben Sie die Geschwindigkeitsbegrenzung gleich Ihrer Geschwindigkeit zu sein, wir sollten die sorgfältige Nachricht am Ende dort bekommen. Lasst uns das aufmachen. Wir werden vorsichtig sein, dass du mit den Geschwindigkeitsbegrenzungen fährst. Lassen Sie uns die Variablen ändern. Wir haben euch auf 60 gesetzt, wir sollten euch danken, dass ihr sicher gefahren seid. Aktualisieren Sie das, und da gehen wir, sagt die Dankeschön Nachricht. Auf der letzten zu überprüfen ist, ob Ihre Geschwindigkeit größer ist als die Geschwindigkeitsbegrenzung, die Sie die Bitte verlangsamen Nachricht erhalten, was wir tun, das ist also großartig. Vielen Dank für das Ansehen, und das ist das Ende des Videos auf else Aussagen und else-if Aussagen. Im nächsten Video werden wir diese mit einer kleinen Mini-Herausforderung in die Praxis umsetzen. 22. Mini-Challenge: Alterschecker: Willkommen zurück. Nun, es ist deine Chance, wenn sonst Aussagen zu geben, um mit einer Mini-Herausforderung zu gehen. Es ist eine ganz einfache Herausforderung, wenn Sie die letzten paar Videos verstanden haben. Es gibt Ihnen jedoch die Möglichkeit, auf eigene Faust zu tippen, ohne mich zu beobachten, und so sollte es in Ihrem Gedächtnis ein bisschen besser bleiben. Duplizieren Sie einfach das letzte Video auf else-if-Anweisungen, und dann ist das Nummer 3, und die Mini-Herausforderung wird Age-Checker genannt werden. Öffnen Sie dann die App in Ihrem Texteditor, ziehen Sie in den Ordner, und öffnen Sie dann die Indexseite, ändern Sie den Titel in Alter Checker und löschen Sie diesen Code, damit wir nicht betrügen. Okay, das ist also ziemlich unkompliziert. Alles, was ich möchte, dass Sie tun, ist, ein paar Variablen, eine für ein Mindestalter und eine für Ihr aktuelles Alter zu erstellen.Dann erstellen Sie eine if-else-Anweisung, genau wie wir im letzten Video verwendet.Dann machen Sie ein paar Prüfungen. Überprüfen Sie zunächst, ob Ihr Alter unter dem Mindestalter liegt, und erstellen Sie dann eine Nachricht an den Browser. Wenn wir uns durchsuchen, kommen Sie bitte zurück, wenn Sie 18 sind. Dann ein paar weitere Bedingungen, wie wenn Sie alt genug sind oder wenn Sie ein bestimmtes Alter, um Ihre Identifikation zu überprüfen. Give the Ago, das nur Dinge verwendet, die wir im letzten Video gelernt haben. Es gibt nichts extra, dass Sie versuchen müssen, zu recherchieren oder Google. Probieren Sie das aus und sehen Sie, wie es weitergeht. Wenn Sie stecken bleiben oder wenn Sie sich nicht sicher genug fühlen, dies hier zu versuchen, folgen Sie einfach mit mir. Ich werde eine Variable des Mindestalters erstellen. Ich möchte das auf 18 setzen. Dann eine Variable, die dein Alter ist und es wird zum Beispiel 15 sein. Dann erstellen Sie Ihre if-Anweisung unten. Wenn Sie es vorziehen, das alles zuerst leer zu legen , nur um sicherzustellen, dass Sie alles an der richtigen Stelle haben. Genau so kann es nützlich sein, nur um sicherzustellen, dass wir keine Klammern oder Klammern verpassen. Ok. Also zuerst wollen wir überprüfen, ob du minderjährig bist. Wir überprüfen die Variable, YourAge. Wenn YourAge kleiner als das minAge ist, erstellen wir eine Nachricht an den Benutzer mit dem document.write. In den Klammern: „Tut mir leid, bitte komm zurück, wenn du 18 bist“. Dann werde ich eine else-if-Anweisung erstellen. Ich werde überprüfen, ob Ihr Alter 25 oder jünger ist, und dann eine Nachricht erstellen, um eine Identifizierung zu liefern. Wenn Ihr aktuelles Alter größer oder gleich 18 ist, dann werden die beiden kaufmännischen Und-Zeichen auch die zweite Bedingung überprüfen. Dann ist YourAge kleiner oder gleich 25. Wir wollen, dass es ein Größer-als-Symbol ist. Wenn Sie also über 18 Jahre alt sind, aber unter 25 Jahre alt sind, erstellen wir eine neue Nachricht, um eine Identifikation zu liefern. Diesmal lautet die Meldung „Bitte geben Sie eine Identifikation an“. Wir haben alle Bedingungen Materie, [unhörbar] Gebrauch ist gleich 25. Die else-Anweisung am Ende stellt den Fallback bereit, wenn der Benutzer über 25 ist. In diesem Fall erstellen wir einfach eine document.write, die dem Benutzer erlaubt, einzugeben. Bitte geben Sie das ein und speichern Sie es dann. Lassen Sie uns dies im Browser testen und sehen, dass alles funktioniert. Derzeit ist der Benutzer minderjährig. Wir sollten die bedauerliche Nachricht von der If-Anweisung erhalten, die wir tun: „Entschuldigung, bitte kommen Sie zurück, wenn Sie 18 sind.“ Wenn der Benutzer jetzt zwischen 18 und 25 ist, sollten wir die Bitte antworten Identifikationsmeldung erhalten. Dann schließlich, wenn der Benutzer über 25 Jahre alt ist, sollte es erlaubt sein, die Website zu betreten. Also erfrischen, und da gehen wir. Wir erhalten die letzte Nachricht von bitte geben. So gut gemacht, wenn Sie es schaffen, das auf eigene Faust zu tun, wenn es etwas war, mit dem Sie kämpfen, keine Sorge.Jetzt folgten Sie zusammen mit mir, kann ein Überspringen ein oder zwei Tage und versuchen Sie, dass wieder selbst und sehen, ob Sie Trainiere das nächste Mal. Beides jetzt, danke. Wir sehen uns im nächsten Video. 23. Logischer Operator: Also haben wir uns die Verwendung von if else Anweisungen angesehen. Wir haben Vergleichsoperatoren wie größer als, kleiner als oder gleich. In diesem Video werden wir einen Blick auf logische Operatoren werfen. Logische Operatoren werden auch häufig mit if else-Anweisungen verwendet. Werfen wir einen Blick darauf, wie wir sie benutzen können. Lassen Sie uns mit einem Ordner beginnen. Das ist Nummer 4. Dies wird als logische Operatoren bezeichnet. Öffnen Sie dann den Ordner oben in Klammern. Lass das einfach da rein. Also wieder, beginnen Sie auf die gleiche Weise wie üblich mit einem neuen Titel logischer Operatoren, und löschen Sie dann alles zwischen den Skript-Tags, die wir nicht brauchen. Also, um damit zu beginnen, werde ich ein paar Variablen erstellen, mit denen wir arbeiten können. Also einfach werden wir diese Nummer 1 nennen und das auf 10 setzen, und dann eine zweite Variable, Nummer 2. Ich werde das auf 20 setzen. Also, was wir in diesem Video betrachten werden, ist die Verwendung der und das ist die beiden kaufmännischen Unds. Wir werden uns überhaupt ansehen, das sind die beiden vertikalen Balken oder die Rohre, und schauen auf das Ausrufezeichen, was nicht bedeutet. Also werden wir anfangen mit und. Ich werde das mit einer if-Anweisung kombinieren. Lassen Sie uns also eine einfache if-Anweisung erstellen. Lassen Sie document.write erstellen nur sagen, dass Bedingung wahr ist, und tatsächlich werden wir einige h2-Tags um diese herum setzen, also nur ein bisschen größer. Also lasst uns mit einer Bedingung beginnen, die wahr ist. Also, wenn die Zahl 1 gleich 10 ist, dann ist die richtige Bedingung für den Browser wahr. Da gehen wir hin. Das ist also wahr. Wenn wir überprüfen wollten, ob mehr als eine Bedingung wahr war, können wir den logischen Operator und verwenden. So können wir eine zweite Bedingung testen. Dies ist also, wenn Zahl 1 gleich 10 ist, und auch wenn Zahl 1 kleiner als 20 ist und beide Bedingungen wahr sind. Also, wenn wir Refresh drücken, schauen wir uns die Bedingung ist wahr Aussage. Das ist also eine gute Möglichkeit, zu überprüfen, ob mehr als ein Wert wahr sein muss, um eine Aktion auszulösen. Sowie und, wenn wir nur überprüfen wollten, ob eine dieser Aussagen wahr war, können wir die beiden vertikalen Balken oder die beiden Rohre verwenden. Jetzt muss nur eine dieser Seiten wahr sein, damit es dieses Dokument richtig auslöst. Wenn die Zahl 1 gleich 10 ist oder die Zahl 2 gleich 10 ist. Also, jetzt ist nur die Nummer 1 wahr und Nummer 2 ist falsch. Also erfrischen, und da gehen wir. So bekommen Zustand ist wahr. Aber wenn wir das in zwei falsche Bedingungen ändern würden, verschwindet dieser Text jetzt. Die nächste werden wir uns nicht ansehen. Wenn Sie sich von früher an den Kurs erinnern, haben wir uns einige der Operatoren angesehen, die Sie verwenden könnten, z. B. kleiner als und größer als. Diese können mit dem Ausrufezeichen kombiniert werden, das genau das Gegenteil tut. Anstatt das Kleiner-als-Symbol würde das einfach nicht weniger bedeuten als. Also lassen Sie uns das einfach in unserer if-Anweisung testen und werfen Sie einen Blick. Also lasst uns einfach ein bisschen davon löschen. Also fangen wir mit einer wahren Aussage an. Wenn also Nummer 1 kleiner als Nummer 2 ist, sollten wir den Text dorthin bringen, aber wenn wir genau das Gegenteil machen wollten, würde ich diese Bedingung falsch machen. Wir werden das einfach mit dem Nicht-Symbol kombinieren. Also, wenn Nummer 1 ist nicht weniger als 2. Wenn wir also aktualisieren, sollten wir sehen, dass der Text verschwindet, und er muss nicht das Kleiner-als-oder Größer-als-Symbol sein. Wir können auch das Gleichheitssymbol verwenden. Also, wenn Nummer 1 nicht gleich 20 ist, dann drucken Sie diese Anweisung aus. Da gehen wir hin. Also, das ist nur wollte, dass zwei weitere Operatoren nachschlagen, was Sie vielleicht nützlich finden, und ich werde Sie im nächsten Video sehen, wo wir einen Blick auf die Verwendung von switch-Anweisungen werfen, und wir werden einen Blick darauf werfen, wie wir sie in JavaScript verwenden können, um mehrere Ergebnisse oder mehrere Fälle. Also danke und wir sehen uns dort. 24. Switch-Statements: In diesem Video werden wir einen Blick auf switch-Anweisungen werfen. Switch-Anweisungen funktionieren in ähnlicher Weise wie if else-Anweisungen, die wir uns zuvor im Abschnitt angesehen haben. In Switched Statement, bieten wir mehrere Ergebnisse oder Fälle. Wenn dann ein Ausdruck mit einem dieser Fälle übereinstimmt, wird eine Aktion ausgeführt. Werfen wir einen Blick darauf, wie switch-Anweisungen in JavaScript funktionieren. Lassen Sie uns einen neuen Ordner erstellen, und es ist Nummer 5, und es heißt switch-Anweisungen. Dann wurde es in unserem Texteditor geöffnet, und ziehen Sie dann in den Ordner switch-statement, und öffnen Sie dann die Indexseite. Ich werde es ein bisschen größer machen, damit du es sehen kannst. Dann ändern wir den Titel erneut, um die Anweisungen zu wechseln. Entfernen Sie dann all dies zwischen den Skript-Tags. Mit switch-Anweisung, wenn wir eine Anweisung zu vergleichen, oder in unserem Fall werden wir eine Variable erstellen. Ich werde diese Variable den Monat aufrufen, und wenn ich dies dann auf Januar setze und dann eine switch-Anweisungen zu erstellen, verwenden wir das switch-Schlüsselwort und öffnen dann einige Klammern und dann die geschweiften Klammern. Grundsätzlich sieht es ein bisschen wie ein if-Aussagen aus der Bühne aus. Wie die if-Anweisungen geben wir in die Klammern, die Bedingung, die wir überprüfen möchten. In unserem Fall wollen wir die Variable des Monats überprüfen. Dann werden wir mehrere Fälle zur Verfügung stellen, gegen die wir überprüfen möchten, und wir verwenden das Schlüsselwort für Groß-/Kleinschreibung. Dann fangen wir an, ihm einige Ergebnisse zu geben, die wir überprüfen möchten. Wenn wir überprüfen, ob der Wert ein Januar, und verwenden Sie dann einen Doppelpunkt, und wenn es Januar ist, können wir ein Ergebnis liefern. Ich werde einen Code umhergehen. Ich werde nur ein Dokument machen. schreiben, und jetzt ist es die Weitergabe einer Nachricht dort, wie glückliches neues Jahr. Anschließend möchten Sie das Schlüsselwort break verwenden, und wenn ein Ausdruck mit dem bestimmten Fall übereinstimmt, in diesem Beispiel stimmt Januar mit dem Fall überein, da dieser übereinstimmt , verwenden wir dann das Schlüsselwort break, und wir werden setzen Sie dies nach jedem Fall, und sobald die Bedingung erfüllt ist, bricht es dann die switch-Anweisungen. Aber wir haben früher gesagt, dass switch-Anweisungen nützlich sind , um viele verschiedene Ergebnisse zu überprüfen. Wir tun dies einfach mit mehr Fällen. Lassen Sie uns noch ein paar Monate hineinlegen. Lassen Sie uns im Juli dort und dann ein document.write. Diesmal sollte ich ein halbes Jahr durchs Jahr gehen. Dann wieder das Schlüsselwort break, direkt nach dem document.write, nur für den Fall, dass diese Bedingung übereinstimmt, stellen Sie sicher, dass alle Fälle zwischen den beiden geschweiften Klammern, warum Probleme auftreten. Wir können mit so vielen fortfahren, wie du willst. Ich werde einen für Dezember erstellen, und dann einen Doppelpunkt, in der Tat, wir werden einfach dieses document.write kopieren und dann einfügen. Dieses Mal für Dezember, werden wir in, fast das neue Jahr und dann die Pause, kurz danach. Dies ist im Wesentlichen, wie eine switch-Anweisung funktioniert. Es wird die einzelnen Fälle durchlaufen, bis die Anweisung übereinstimmt, und dann wird es aus der switch-Anweisung ausbrechen. Aber wenn ein Ergebnis nicht gefunden werden kann, müssen wir einen Standardfall bereitstellen. Dies ist ein Standardcode, der ausgeführt werden soll, es ist bekannt, dass die Fälle übereinstimmen. Standardwerte und einen Doppelpunkt, und dann wird der Standardcode dort eingefügt. Ich werde nur in den Monat setzen ist, und dann werde ich einfach die Monats-Variable dort hineinsetzen. Wenn wir viel eine der Aussagen zählen, und wenn die Nachricht nicht ausdruckt, wird nur den Standard erhalten, der Monat ist, und dann in unserem Fall im Januar. Also speichern Sie das, und dann wird es im Browser geöffnet. Weil wir den Monat Januar bekamen, haben wir den Fall für ein glückliches neues Jahr festgelegt, das nur das erste dort ist. Wenn wir den Monat auf Juli umstellen, sollten wir den halben Weg durch die Luftbotschaft bekommen. Aktualisieren Sie das, und die Hälfte des Jahres wird angezeigt. Versuchen wir es einfach im Dezember. Wie viel bekommen den dritten Fall von fast dem neuen Jahr und aktualisieren. Sie sehen gut aus, und wenn wir in einem Monat, das ist nicht einer dieser Fälle, so werden wir versuchen März. Hoffentlich sollten wir den Standardfall bekommen , der Monat ist, und dann März. Da gehen wir hin. Wir können auch so viele Fälle eingeben, wie Sie möchten, und Sie können sogar mehr als einen Fall mit demselben Code bereitstellen, um auszuführen. Zum Beispiel, wenn Sie es wollen, ein weiterer Fall dort, und wir wollen, dass es fast das neue Jahr für November und Dezember sagen , das ist kein Problem. Wir können einfach unsere Fälle so machen, und dann wird dieses document.write ausgeführt, wenn der Fall entweder November oder Dezember ist. Lass uns das einfach versuchen. Ändern Sie also die Variable in November. Fast das neue Jahr, und das sollte auch für Dezember gleich funktionieren. Noch fast das neue Jahr, wir werden nur noch eins versuchen. Also Oktober, wir haben keinen Fall für Oktober, also sollten wir den Standard bekommen , der unten unten ist, aktualisieren, und da gehen wir. Der Monat ist also Oktober. Ich hoffe, das macht Sinn und ich hoffe, Sie verstehen, dass switch-Anweisungen wirklich nützlich sind , wenn wir eine Bedingung gegen viele mögliche unterschiedliche Ergebnisse überprüfen möchten . Im nächsten Video werden wir uns von der Theorie entfernen. Ich werde auf eine Mini-Herausforderung gehen, wo Sie mit Ihren Fähigkeiten beginnen können, die Sie gelernt haben, im Abschnitt in die Praxis. 25. Mini-Challenge: higher or lower Game: Willkommen zurück. In diesem Video werden wir eine Pause von der Theorie machen und eine Mini-Herausforderung erstellen, die ein einfaches, höheres oder niedrigeres Spiel sein wird, höheres oder niedrigeres Spiel sein wird, und es wird im Grunde aus einer computergenerierten Zufallszahl bestehen zwischen eins und 10. Dann müssen wir erraten, ob die Zahl, die der Computer es generieren wird, höher oder niedriger als fünf ist. Wir werden eine einfache Webseite mit ein paar Schaltflächen erstellen, auf denen höher oder niedriger ist , und dann müssen wir eine Anzeige erstellen, die zeigt, ob die Vermutung korrekt ist oder nicht. Die meisten Dinge, die Sie für diese Herausforderung benötigen , wurden bereits in diesem Abschnitt behandelt. Das einzige, was wir noch nicht angesehen haben, sind onclick-Ereignisse und das ist im Grunde, wenn ein Benutzer auf die Schaltfläche auf der Webseite klickt und das eine Funktion oder ein Ereignis auslöst. Diese Funktion enthält den Code, der unsere Vermutung mit der generierten Nummer des Computers vergleicht . Also, wenn Sie das a go selbst geben möchten, fühlen Sie sich frei, das zu tun. Oder ich werde anfangen und mit dem HTML beginnen und Ihnen die onclick-Ereignisse zeigen. Also, wenn Sie es vorziehen, können Sie mit mir folgen, SoloLearn öffnen und dann das JavaScript geben, um am Ende zu gehen oder mit mir bis zum Ende zu folgen, wenn Sie es vorziehen. Lassen Sie uns also mit einem eigenen Ordner beginnen. In der Steuerung Flow and Loop-Abschnitt können wir das letzte Video duplizieren und es ist Nummer 6. So höher, niedrigeres Spiel. Öffnen Sie dann Ihren Texteditor und ändern Sie dann den Titel, höher oder niedriger Spiel. Wir brauchen die switch-Anweisung aus dem letzten Video nicht. Löschen Sie das einfach und kehren Sie zu einer grundlegenden HTML-Indexseite zurück. Ich werde damit beginnen, die Webseite der Benutzeroberfläche zu erstellen. Ich werde es mit einem div beginnen. Ich werde diese Klasse bekommen, na ja, das ist eine Bootstrap-Klasse, die alle divs enthält, an denen wir arbeiten. Es wird es mit einer Hintergrundfarbe hervorheben. Außerdem möchte ich die Klasse des Text-Centers verwenden, und dies wird den gesamten Text in die Mitte der Seite ziehen. Ich werde nur einige Anweisungen auf die Seite setzen, mit der du anfängst. Also ist es Titel zuerst, höher oder niedriger und dann eine Stufe 2 Überschrift, die die Anweisungen zum Spielen ist. So ist meine Nummer 5 oder weniger oder höher als fünf. Dann einige p-Tags unten. Dies wird nur die Reichweite zeigen. Der Bereich für die Zufallszahl ist 1-10. Dann brauchen wir unten ein leeres div. Also werde ich nur eine Stufe 3 Überschrift dort hineinlegen. Anfangs wird es keinen Inhalt zwischen diesen Tags geben, weil wir das in die Verwendung von JavaScript setzen werden. Dies wäre, wo der Text angezeigt wird, um zu sagen, ob Sie gewonnen oder verloren. Geben wir ihm eine ID, damit wir das später mit dem JavaScript markieren können. Also werde ich mein TextField anrufen. Schauen wir uns das einfach an und sehen, wie es aussieht. Wir haben den Namen auf den Anweisungen. Jetzt müssen wir unten ein paar Schaltflächen erstellen. Einer mit höher und einer mit niedrigerem. Lassen Sie uns das in eine Eingabe setzen. Der Eingabetyp ist also eine Taste. Lassen Sie uns einige Bootstrap-Klassen hinzufügen, nur um es ein wenig schöner aussehen zu lassen. Also btn und btn-info, und das wird eine schöne blaue Taste für uns zu schaffen. Der Wert, den wir brauchen, wird der Text sein, der in einem erscheint. Lassen Sie uns das als höher setzen. Dann haben wir am Anfang dieses Videos erwähnt, dass wir einen Blick auf onclick Ereignisse werfen werden. Diese werden wir später in diesem Kurs näher betrachten. Aber im Moment müssen wir nur wissen, ob wir die Attribute hinzufügen oder onclick. Dann können wir den Namen einer Funktion übergeben. Wenn diese Taste gedrückt wird, löst sie dann die Funktion aus. Lassen Sie uns den Funktionsnamen setzen. Obwohl wir die Funktion noch nicht erstellt haben, können wir sie immer noch einfügen. Dann, weil es eine Funktion ist, setzen Sie die geschweiften Klammern danach, genau so, wie wir normalerweise eine Funktion aufrufen oder aufrufen würden. Wir werden bald unsere Funktion erstellen. Das ist der höhere Knopf. Kopieren und einfügen oder duplizieren Sie unsere Eingaben und das wird die untere Taste und ändern Sie die Funktion dieses Mal zu senken. Dann schauen wir uns mal an. Großartig. Da sind unsere höheren und unteren Tasten. Nur das Letzte, was ich für die Benutzeroberfläche setzen möchte, ist eine dritte Schaltfläche, die nur eine Play Again Taste ist. Nach jedem Fall können wir „Play Again“ drücken und die Seite wird neu geladen. Ich werde dies in sein eigenes div setzen, so erscheint unten. Das div, wir geben diesem auch die Klasse von gut text-center, genau wie dieses div oben und dann eine Eingabe mit einer Art von Schaltfläche und dann einige Bootstrap Klassen von btn btn-info. Der Wert ist Wieder wiedergeben. Dann die onclick-Ereignisse und dann werden wir diesen zurücksetzen mit den Klammern danach aufrufen. Lassen Sie uns den Browser aktualisieren und werfen Sie einen Blick. Das sieht jetzt besser aus. Jetzt sind wir auf die Bühne gekommen, wo das HTML oder die Benutzeroberfläche vollständig ist. Wenn Sie möchten, dass gehen und beenden Sie sich selbst, fühlen Sie sich frei, das zu tun. Alles, was Sie tun müssen, ist eine Zufallszahl zu erstellen und dann einige Funktionen zu erstellen, die jedes Mal ausgelöst werden, wenn diese Tasten gedrückt werden und dann gegen die zufällig generierte Zahl zu überprüfen. Also gib es mal, wenn nicht, folge einfach mit mir. Gehen wir zurück zum Texteditor. Ich werde anfangen, zwischen den Skript-Tags zu arbeiten , weil wir nur das JavaScript jetzt tun müssen. Zunächst erhalten wir die zufällig generierte Zahl. Also werden wir das in eine Variable namens ComputerGuess setzen und dies wird ein math.random sein. Wenn Sie sich an ein paar Videos erinnern, generiert math.random eine Zufallszahl zwischen Null und eins. Weil wir 10 wollen, multiplizieren wir diesen Wert mit 10. Dann müssen wir diese Nummer aufrunden. Also lassen Sie uns das ComputerGuess jetzt ändern, um gleich math.ceil zu sein. Dies wird aufrunden und dann innerhalb der Klammern übergeben, die Variable, die wir aufrunden möchten, die ComputerGuess ist. Jetzt lassen Sie uns das einfach auf die Konsole drucken und überprüfen, ob alles korrekt mit einem Konsolenprotokoll funktioniert, und ich werde das ComputerGuess einfügen, und hoffentlich sollten wir eine Zufallszahl zwischen eins und 10 bekommen. Also gehen Sie in die Entwickler-Tools und da gehen wir. Wir haben den Wert von sieben in der Konsole und dann aktualisieren und als 4, 9, 9, 9 wieder und ein 1, ein 2. Das scheint gut zu funktionieren. Lassen Sie uns einfach die Entwickler-Tools loswerden und wir können weitermachen. Wir können das Konsolenprotokoll jetzt entfernen, das brauchen wir nicht. Innerhalb des HTML haben wir die onclick-Ereignisse erstellt. Ich werde mit der höheren Funktion beginnen, weil wir die Funktion aufgerufen haben, aber wir haben sie noch nicht deklariert. Zurück zwischen den Skript-Tags. Hoffentlich können Sie sich daran erinnern, wie Sie eine Funktion mit dem Funktionsschlüsselwort und dann dem Funktionsnamen mit den Klammern erstellen . Was soll diese Funktion tun? Nun, wir wollen, dass es überprüft, ob die Vermutung des Computers höher als fünf ist. Lassen Sie uns eine if-Anweisung dort erstellen, wenn die Vermutung des Computers größer als fünf ist. Jetzt möchten wir eine Nachricht anzeigen. Wenn Sie sich erinnern, haben wir ein leeres h3-Tag mit der ID TextField erstellt. So können wir JavaScript verwenden, um diese leere div oder leere Überschrift zu greifen und dann etwas Text in dort einfügen. Also document.getElementById, und die ID, die wir wollen, ist TextField und dann wollen wir die innerHTML verwenden. Also wähle innerHTML, ich werde das auf You Win gleich setzen. Wenn der Benutzer höher klickt und die Vermutung größer als fünf ist, gewinnt der Benutzer. Also, sonst lassen Sie uns dieses Dokument kopieren. GetElementById, sonst und dann die geschweiften Klammern. Also, wenn die Vermutung niedriger als fünf oder fünf selbst ist, können wir dann die TextField-Überschrift greifen und dieses Mal einen Text drucken, Sie verlieren. Das wird auch die höhere Funktion erzeugen und jetzt müssen wir die Funktion erstellen, wenn die untere Taste gedrückt wird. Da dies ziemlich ähnlich sein wird, können wir die Funktion kopieren, die wir gerade erstellt haben, und dann ändern wir dies in niedriger. Dieses Mal, wenn die Vermutung des Computers kleiner oder gleich fünf ist , gewinnt der Benutzer. Wenn nicht, verliert der Benutzer und die Nachricht wird angezeigt. Jetzt haben wir die Funktionalität, wenn die Vermutung höher oder niedriger ist. Jetzt müssen wir nur mit der Reset-Taste arbeiten, um den Bildschirm zu löschen oder den Bildschirm jedes Mal zu aktualisieren, wenn der Benutzer wieder spielen möchte. Dies wird eine einfache Funktion sein, aber es ist etwas, das wir in diesem Kurs noch nicht ganz betrachtet haben. Also Funktion zurücksetzen, und dann, um die Webseite neu zu laden, beschneiden wir die window.location.reload und dann die Klammern danach. Jedes Mal, wenn dieser Reset-Button gedrückt wird, wird die Webseite mit dieser Codezeile aktualisiert. Lassen Sie uns das speichern und werfen Sie einen Blick und aktualisieren Sie den Browser. Beginnen wir mit höher, so dass Sie gewinnen, spielen wieder, niedriger, Sie verlieren. Lass uns noch ein paar Mal versuchen, damit du verlierst. Du gewinnst, gewinnst, verlierst. Das scheint gut zu funktionieren. Das ist die grundlegende Funktionalität oder die Arbeit für das Spiel. Wenn Sie es etwas weiter nehmen möchten, wenn die Vermutung des Benutzers falsch ist und Sie verlieren, können Sie dann etwas Text einfügen, der die vom Computer generierte Zufallszahl anzeigt, nur damit Sie Überprüfe, was das war. Aber im Moment versuche ich, dieses Spiel dort zu lassen, und danke. Ich hoffe, du hast es geschafft, wenigstens etwas mehr selbst zu machen und mich im nächsten Video anzuschließen , wo wir uns Loops anschauen und wie sie in JavaScript verwendet werden. 26. while-Schleife: Loops sind in vielen Programmiersprachen sehr beliebt, und JavaScript ist keine Ausnahme. In diesen nächsten Videos werden wir uns für Schleifen, While-Schleifen und Do While Schleifen ansehen. Mach dir keine Sorgen, wenn das nicht bekannt ist. Wir werden einen Blick darauf werfen, wie jeder einzelne funktioniert, beginnend mit der While-Schleife in diesem Video. Loops können wirklich nützlich sein und es kann uns viel repetitives Tippen ersparen. Lassen Sie uns mit einem eigenen Ordner beginnen, und das ist Nummer 7. Ich werde das nennen, while-Schleifen. Öffnen wir es in Klammern und ziehen Sie es hinein und benennen Sie diese While-Schleifen um. Lassen Sie mich all diese aus dem letzten Video und auch alle HTML unten loswerden . Beginnen wir mit einer grundlegenden While-Schleife. Wir verwenden das while-Schlüsselwort und dann die Klammern und dann die geschweiften Klammern. Das könnte Ihnen vielleicht ein bisschen vertraut aussehen. Dies ist im Grunde das gleiche Layout wie die switch-Anweisungen und die if/else-Anweisungen, die wir uns zuvor angesehen haben. Hoffentlich sollte es nicht allzu ungewohnt sein. Die Klammern funktionieren danach auch auf die gleiche Weise wie if-Anweisungen wie in geben wir eine Bedingung in die Klammern, und während diese Bedingung wahr ist, und dann führen wir etwas Code dazwischen, und dieser Code hält Schleifen oder wiederholen, bis diese Bedingung nicht mehr erfüllt ist. Obwohl dies wahr ist, müssen wir dies tun oder was auch immer zwischen den Klammern ist. Lassen Sie uns ein grundlegendes Beispiel in diese While-Schleife setzen und beginnen. Wir müssen eine Variable erstellen. Diese Variable, ich werde i aufrufen, was ein ziemlich gebräuchlicher Variablenname für die Verwendung mit der Schleife ist. Aber du kannst es so nennen, wie du willst. Ich werde den Anfangswert von i so einstellen, dass er gleich eins ist. Während ich weniger als 10 ist, wollen wir etwas in den Klammern tun. Lassen Sie es uns einfach mit einem Dokument schreiben. Wir wollen den Wert von i jedes Mal, wenn wir Schleife in den Browser schreiben, und dann nur so, dass der Wert von i in seiner eigenen Zeile erscheint, werde ich ein Break-Tag darin setzen, und dann i++. Das sieht vielleicht ein bisschen seltsam aus, aber was hast du getan? Wenn wir den Wert von i auf eins setzen, und dann, während ich kleiner als der Wert von 10 ist, was es derzeit ist, wir dann auf den Bildschirm den Wert von i drucken. werden wir dann auf den Bildschirm den Wert von i drucken. Mal, wenn wir diesen Code durchlaufen, wird es i++ sein. Das nächste Mal, wenn die Schleife umgeht, weil wir ein i++ machen, werde ich dann auf zwei gesetzt und dann werden wir wieder schleifen und zwei drucken. Dann wird dies wieder auf drei erhöht und das wird weiter passieren, bis ich weniger als 10 ist, oder in unserem Fall bekommen wir Nummer 9. Also sollten wir auf dem Bildschirm gedruckte Nummer 1 bis Nummer 9 sehen. Werfen wir einen Blick in den Browser. Ok, da gehen wir. Wir haben den Wert von 1-9, und weil es auch die Ziellinie brechen wird, ist jeder dieser Werte auf seiner eigenen Zeile. Aber nur ein kleines Wort der Warnung, wenn Sie While Schleifen verwenden, ist es ziemlich einfach, den Browser abzustürzen, wenn wir sie nicht richtig machen. Wenn wir das i++ rausnehmen, so dass jedes Mal, wenn diese While Schleife läuft, der Wert von i immer eins sein wird. Also dann werden wir eine Endlosschleife erstellen, die nie enden wird, weil ich immer weniger als 10 sein werde und dies dazu führt, dass der Browser oder Ihr Programm abstürzt. Seien Sie wirklich vorsichtig, dass wir auf jeder Schleife inkrementieren. Eine weitere beliebte Möglichkeit, Schleifen zu verwenden, besteht darin ein Array zu durchlaufen und dann alle Werte des Arrays zu drucken. Lassen Sie uns jetzt ein Beispiel dafür zeigen. Erstellen Sie ein Array namens Lebensmittel und wir werden das auf die wörtliche Art und Weise setzen. Fügen Sie einfach einige Lebensmittel in das Array, getrennt durch Kommas, so Pasta, Pizza und Fisch. Da der Index von Arrays an Position Null beginnt, ändere ich nur die Variable von i auf Null. Wenn Sie sich aus dem Array-Abschnitt erinnern, können wir den Wert des Arrays drucken. Lassen Sie uns ein schnelles Dokument schreiben und dann übergeben wir den Namen des Arrays. Wenn wir ein einzelnes Element innerhalb des Arrays drucken wollten, könnten wir den Zahlen-Byte-Index auswählen. Wenn wir Pasta drucken wollten, ist das Index Null. Ich werde das einfach auskommentieren und dann ausdrucken. So erhalten wir den Wert eines Arrays. Aber wenn wir alle Werte des Arrays auf den Bildschirm drucken wollten, lassen Sie uns dies vorerst auskommentieren. Da wir eine Schleife verwenden, möchten wir die Indexnummer in die Schleife übergeben, also nehmen wir das einfach raus. Fügen Sie das in die Klammern ein. Wir wollen nicht nur die Position Null auswählen, wir wollen das auf i setzen, weil wir jeden Durchgang der Schleife durchlaufen und diese um eins erhöhen wollen. Anstatt den Wert von i zu drucken, möchten wir den Inhalt des Arrays drucken. Wir wollen die Lebensmittel drucken und die Lebensmittelnummer ist der Wert von i Was passieren wird, wird die Schleife ausgeführt werden und die Schleife wird mit dem Wert von Null beginnen, die Pasta ist. Dann drucken wir auf den Bildschirm den Wert von Pasta und dann werde ich auf eins erhöht werden, so dass ändert sich zu einem , der der zweite Index, also das ist der Wert der Pizza. Dann wird Pizza auf den Bildschirm gedruckt und das wird wieder umschleifen, und ich werde auf Nummer 2 erhöht, die Fisch ist, also 0, 1, 2 und dann Fisch auf den Bildschirm gedruckt werden. Dann wird die Schleife enden, weil das alle Werte des Arrays sind. Beginnen wir erneut mit Null, speichern Sie das und aktualisieren Sie den Browser. Da gehen wir, also gibt es unsere freien Werte des Arrays, und so funktioniert eine While-Schleife. Danke fürs Ansehen, und wir werden jetzt zum nächsten Video übergehen. Wir werden einen Blick auf eine leichte Variante der While-Schleife werfen, und dies wird die Do While Schleife genannt. 27. Erstelle eine while-Schleife: Im letzten Video haben wir uns die while-Schleifen angeschaut. Dieses Video dreht sich alles um eine leichte Variante der while-Schleife, und dies wird als do while-Schleife bezeichnet. Es funktioniert in ähnlicher Weise, aber mit nur wenigen subtilen Unterschieden. Lassen Sie uns einen neuen Ordner erstellen. Wir duplizieren while-Schleifen. Dies ist Nummer acht und es heißt do while-Schleifen. Öffnen Sie dann einen beliebigen Texteditor und erstellen Sie dann einen neuen Titel. Also machen Sie while-Schleifen. Lassen Sie diesen Code für jetzt in, wir können einige dieser Teile wiederverwenden. Während die while-Schleife aus dem letzten Video immer ausgeführt wird, während diese Bedingung wahr ist, wird eine do-while-Schleife immer mindestens einmal zuerst ausgeführt und dann überprüft, ob die Bedingung wahr ist, bevor sie weitergeht. Wir haben das do Schlüsselwort und dann innerhalb der geschweiften Klammern. Der Code im Inneren ist immer, einmal am Anfang ausgeführt, bevor wir überprüfen, ob irgendwelche Bedingungen erfüllt sind. Machen Sie mit diesem Code und dann überprüfen wir die Bedingung mit der while-Schleife. Wenn diese Bedingung wahr ist, wird der Code weiterhin ausgeführt und wenn er falsch ist, wird dieser Code nur einmal ausgeführt und danach stoppt er. Lassen Sie uns den Code aus dem letzten Video löschen. Wir werden ein Beispiel erstellen. Wir werden mit einer Variablen beginnen, also verwenden wir den Variablennamen von i erneut. Variable i ist gleich eins. Dann lassen Sie uns ein Dokument machen. Schreiben Sie nicht drinnen, wir werden nur den Wert von i drucken. Wieder die Break-Tags. Dann, genau wie die while-Schleife, werden wir um eins inkrementieren. Dann innerhalb des while-Abschnitts, in den Klammern, werden wir die Bedingung setzen. Während ich weniger als 10 ist, werden wir weiterhin durchlaufen und den Wert von i drucken. Diese Bedingung ist wahr, so dass die Werte weiterhin bis zu neun gedruckt werden, die Sie auf der linken Seite erhalten. Gehen wir zurück, wenn die Bedingung tatsächlich größer als 10 ist, sollten wir den Wert von i gedruckt erhalten, der eins ist, aber es wird keinen zweiten Wert zurückgeben, weil die Bedingung falsch ist. Jetzt lassen Sie uns einfach einen in den Browser drucken, weil eine do while-Schleife immer einmal läuft. Das ist alles, was es dazu gibt. Eine do-while-Schleife ist ziemlich einfach zu verstehen, wenn Sie bereits das Konzept von while-Schleifen erhalten. Vielen Dank. Im nächsten Video gehen wir zu einer anderen Art von Schleifen über, die for-Schleife ist. Vielen Dank und wir sehen uns dort. 28. Erstelle eine for-Schleife: Willkommen zurück, Jungs. Dieses Video dreht sich alles um die JavaScript for-Schleife, und dies ist die dritte und letzte Art von Schleife, die wir in diesem Abschnitt betrachten werden. Wenn Sie verstanden haben, wie die while-Schleife funktioniert und die do while-Schleife aus früheren Videos funktioniert, sollten Sie keine Probleme haben zu verstehen, wie eine for-Schleife funktioniert. Beginnen wir mit einem eigenen Ordner im Abschnitt Control Flow, und das ist Video Nummer 9: für Schleifen, und dann öffnen wir es in Klammern, und ändern Sie dann den Titel zu For Schleifen und wir können diese Schleife als Referenz verlassen. Für Schleifen sind nützlich, wenn wir wissen, wie oft wir diese Schleife wiederholen möchten. Während eine while-Schleife, wird ausgeführt, bis eine Bedingung nicht mehr wahr ist. In einer for-Schleife müssen wir sagen, wie oft es ausgeführt wird. Wir beginnen eine for-Schleife mit dem Schlüsselwort for, und dann ersten Blick ziemlich vertraut aus dem Rest der Videos. Wir verwenden die Klammern und dann eine Reihe von geschweiften Klammern. In einer while-Schleife oder einer do while-Schleife setzen wir die Variable und dies wird außerhalb der Schleife gesetzt. Während wir eine for-Schleife verwenden, müssen wir drei verschiedene Werte zwischen den Klammern setzen. Der erste ist der Anfangswert der Variablen. Ich möchte verwenden, ich muss noch einmal und die drei Werte müssen mit einem Semikolon getrennt werden. Der zweite Wert ist eine Bedingung, gegen die wir testen möchten. Als Beispiel möchten wir die Schleife ausführen, während ich weniger als 10 ist, und dann ein Semikolon, und genau wie vorherige Schleifen können wir so ziemlich verwenden, was hier drin ist, wir können gleich oder einen der Operatoren verwenden. Der dritte Wert wird unser Inkrementer sein. Wieder werde ich i plus plus verwenden, um den Wert in jeder Schleife um eins zu erhöhen. Wir können auch das gleiche Dokument schreiben aus dem letzten Video verwenden. Setzen Sie das also in die geschweiften Klammern. Wir können das vorerst löschen. So sieht eine for-Schleife aus. Wir setzen den Wert zunächst auf eins und die Schleife wird weiter laufen während der Wert von i kleiner als 10 ist und mit jeder möglichen Schleife i um eins erhöht wird. Also sollten wir die Werte von eins bis neun drucken lassen, wenn wir dies im Browser öffnen. Da gehen wir hin. Wir haben einen bis neun, solche funktionieren richtig. Genau wie while-Schleifen können wir auch eine for-Schleife verwenden , um die Werte eines Arrays zu durchlaufen. Werfen wir einen Blick darauf, wie wir das in einer for-Schleife tun können. Lassen Sie uns unser Lebensmittelbeispiel verwenden, dass wir das in der while-Schleife aussahen. Wieder werde ich Pasta, Pizza und dann Fisch einlegen und dann die for-Schleife erstellen, genau wie wir oben verwendet haben. Lassen Sie uns den Wert von i zunächst deklarieren, so dass i auf Null gesetzt ist, weil der Index von Null der erste Wert eines Arrays ist. Also, sobald das bei Null beginnt, und dann ist die Anzahl der Male, die wir durchlaufen wollen , gleich der Anzahl der Werte innerhalb des Arrays. Also, während ich weniger als foods.length ist, und Sie fragen sich vielleicht, warum wir weniger als anstatt gleich der Länge des Arrays verwenden , gut, dass einfach, weil die length Eigenschaft bei einem anstatt Null beginnt, also Deshalb müssen wir das tun, und dann ein Semikolon und der dritte Wert ist unser Inkrementer, also i plus und dann lassen Sie uns Dokument schreiben und dann wollen wir den Wert des Food-Arrays ausdrucken, und dann innerhalb der eckigen Klammern ein Durchgang in i. Anfangs wird ich auf Null gesetzt, was der Wert von Pasta ist, und dann werden wir durchlaufen und ich wird inkrementiert und dann der Wert eines sein, die Pizza ist, und dann die dritte und letzte Schleife, ich werde auf zwei gesetzt, was der dritte Wert des Fisches ist. Lassen Sie uns das jetzt mit dem Break-Tag ausführen, also sind sie alle in separaten Zeilen. Brechen Sie Tag da rein und dann lassen Sie uns das im Browser aktualisieren, und es gibt unsere drei Werte von Pasta, Pizza und Fisch. Da gehst du hin. So funktioniert eine for-Schleife in JavaScript. Im nächsten Video werden wir einen Blick darauf werfen, diese in einer Mini-Challenge zu verwenden. 29. Mini-Challenge: Telefonbuch: Willkommen zurück. In diesem Video werden wir einen Blick auf eine Mini-Herausforderung werfen, die die for-Schleifen, die wir im vorherigen Video verwendet haben, in die Praxis umsetzen wird. Auf dieser Mini-Herausforderung geht es darum, ein einfaches Telefonbuch zu erstellen. Das Telefonbuch wird die Werte aller Ihrer Freunde Namen in einem Array ausdrucken. Es wird sie in alphabetischer Reihenfolge sortieren. Wieder, ich würde gerne, wenn du es selbst ausprobieren könntest und sehen wie weit du gehst, bevor du mit mir folgst. Versuchen Sie einfach, das ohne meine Hilfe zum Laufen zu bringen. Aber keine Sorge, wenn es etwas ist, mit dem Sie kämpfen. Du kannst mir am Ende folgen, und ich zeige dir einen Weg, das zu tun. Lassen Sie uns den Ordner für dieses Projekt erstellen. Das ist Nummer 10. Ich möchte es die Herausforderung des Telefonbuchs nennen. Dann öffne das in Klammern. Legen Sie dann den Titel, Telefonbuch-Herausforderung fest und beginnen Sie mit einem leeren Skript-Tag. In dieser Herausforderung werde ich mit der Erstellung eines Arrays beginnen. Das Array wird die Werte Ihrer Freunde halten. Weil wir JavaScript verwenden wollen, um diese in alphabetischer Reihenfolge zu sortieren. Wenn Sie die Werte innerhalb des Arrays platzieren, versuchen Sie, sie nicht in alphabetischer Reihenfolge zu setzen. Weil wir wollen, dass JavaScript dies folgt. Beginnen Sie mit einem Array. Ich werde mit Chris anfangen, ich werde nur Werte von so vielen Menschen darin setzen, wie du willst. Ich fange mit fünf Werten an. Nur um uns damit anzufangen. Genau so. Dann werde ich eine for-Schleife verwenden, die wir im letzten Video angeschaut haben, um alle Werte zu durchlaufen und sie dann auf den Bildschirm zu drucken. Beginnen wir mit der for-Schleife und drucken Sie dann einfach die Werte des Arrays an den Browser. Ich werde zunächst auf Null gesetzt werden, was der erste Wert des Arrays ist. Dann wollen wir, dass die Schleife weitergeht. Während ich weniger als die Namen array.length ist. Dann wollen wir bei jedem Durchgang der Schleife I um eins erhöhen. Lassen Sie uns das mal ausprobieren und sehen, ob es funktioniert. Lassen Sie uns ein Dokument schreiben in den Browser. Dann schauen wir uns die Namen an, und dann ich. Mal sehen, was wir jetzt haben. Da haben wir, Chris, Paul, Mike, Andrew und Dave. Es gibt alle fünf Werte unseres Arrays, was in Ordnung ist, aber es sieht nicht sehr gut aus und wir wollen diese auch in alphabetischer Reihenfolge sortieren. Lassen Sie uns damit beginnen, sie alphabetisch zu sortieren. Wir haben derzeit alle unsere Namen in der Variablen der Namen gespeichert. Wir müssen diese alphabetisch einstellen. Wir machen das mit Namen. Dann verwenden wir die Sortiermethode. Es wird jetzt eine alphabetische Reihenfolge verwenden, wenn wir aktualisieren, da gehen wir. Das funktioniert in Ordnung. Wir haben Andrew, Chris, Dave, Mike und Paul. Das ist alles in alphabetischer Reihenfolge. Nur um diesem Projekt ein wenig Stil zu geben, werde ich einige Pre-Tags hinzufügen. Ich werde diese kurz davor hinzufügen und dann möchte ich auch eine kurz danach hinzufügen. Vergessen Sie nicht die Plus-Symbole dazwischen, wir setzen den Schrägstrich. Mal sehen, wie das jetzt aussieht. Das ist jetzt ein bisschen lesbarer. Wir haben alle unsere Namen in alphabetischer Reihenfolge und mit einem kleinen Hintergrund zu jedem Wert gedruckt . Wenn du so weit bist, gut gemacht. Ich möchte nur noch eine Sache hinzufügen, nur um das zu beenden. Ich möchte nur eine Nummer neben dem Namen jeder Person hinzufügen. 1, 2, 3, 4, 5, also wissen wir, wie viele Namen wir im Telefonbuch haben. Kurz nach dem Pre-Tag können wir diese Zahl mit dem Wert von i erhalten, weil mit jeder Schleife inkrementiert wird. Dann auch ein Doppelpunkt, nur um den Namen mit der Nummer zu trennen. Aktualisieren. Jetzt haben wir 0, 1, 2, 3, 4. Nur weil der erste Wert Null ist, werde ich i plus 1 hinzufügen, also beginnt er bei eins anstatt Null und aktualisiert. Das ist jetzt besser. Wir beginnen mit dem Wert eins und dann können wir sehen, wie viele verschiedene Namen wir in unserem Array haben, oder in unserem Telefonbuch. Hoffe, Sie haben es geschafft, das zu tun, oder zumindest geben Sie es einen Sprung und sehen, wie weit Sie gekommen sind und das ist das Ende der Mini-Herausforderung und das Ende des Abschnitts. Ich sehe Sie im nächsten Abschnitt, der JavaScript und das DOM genannt wird. 30. Was ist die DOM: Willkommen zurück und willkommen in diesem neuen Abschnitt namens JavaScript und das DOM. In diesem Video nehmen wir einen kurzen Überblick darüber, was genau das DOM ist. Das DOM ist die Abkürzung für das Document Object Model und ich bin nur auf der Wikipedia-Seite für das Document Object Model, und Sie können kleine Informationen genau dort herausfinden. Es beginnt damit, dass das DOM eine plattformübergreifende und sprachunabhängige Konvention für die Darstellung und Interaktion mit Objekten in HTML-, XHTML- und XML-Dokumenten ist. Du fragst dich vielleicht genau, was das bedeutet. Um es einfach zu halten, sind alle Abschnitte oder Elemente, oder alle Knoten in jedem Dokument oder Webseite in einer baumartigen Struktur organisiert. Wenn wir zum W3Schools Abschnitt auf dem DOM gehen, können Sie wahrscheinlich eine bessere Vorstellung davon bekommen, was genau vor sich geht. Wir können ein visuelles Diagramm aller HTML-DOM-Struktur von Objekten sehen. Dies ist unsere grundlegende Webseite, die mit den Dokumenten ganz oben beginnt. Wir haben bereits in diesem Kurs aufgebraucht, wenn wir Elemente nach ID ausgewählt haben. Wir begannen mit Dokument und dann erhalten Element nach ID. Wir haben das Dokument oben im Baum und dann alle verschiedenen Elemente auf der Webseite, einen Zweig nach unten aus dem Dokument. Wir haben den Kopfabschnitt und dann haben wir den Körperabschnitt, der die beiden wichtigsten Elemente innerhalb des HTML-Wurzelelements sind, und das sollte alles ziemlich vertraut von HTML-Webseite aussehen. In der Kopfabteilung haben wir einen Titel. Innerhalb des Body-Abschnitts haben wir die Attribute, die Elemente, wie die Überschriften, die Anker und dann den gesamten Text darin enthalten. Sie fragen sich vielleicht, was dies mit JavaScript zu tun hat. Nun, im Grunde kann JavaScript Webseiten dynamisch machen, da JavaScript alle Elemente im DOM-Baum steuern oder manipulieren kann. Wir können jedes dieser Elemente greifen und wir können es überschreiben, wir können es manipulieren, wir können hinzufügen, wir können bestimmte Attribute oder Elemente hinzufügen, wir können CSS-Stile ändern oder sogar eines dieser Elemente entfernen. In den nächsten Videos werden wir einen tieferen Blick darauf werfen, wie wir auf diese Elemente zugreifen können und wie wir diese Elemente manipulieren können. Aber bevor wir das tun, wollte ich Ihnen nur einen kurzen Überblick darüber geben wie wir das tun können und warum das DOM für JavaScript wichtig ist. Aber im Moment ist die Hauptsache zu verstehen, wie ein HTML-Dokument angelegt wird und auch verstehen, dass JavaScript auf alle Elemente im DOM-Baum zugreifen oder manipulieren kann . Wir gehen nun zum nächsten Video über und wir werden einen Blick darauf werfen, wie wir auf alle Elemente in diesem DOM-Baum zugreifen können. 31. So greifst du auf Elemente zu: Jetzt wissen wir, dass JavaScript mit DOM interagieren kann. In diesem Video zeige ich Ihnen einige Methoden zur Auswahl von Elementen auf einer Webseite. Beginnen wir mit einem neuen Ordner für den neuen Abschnitt und rufen Sie dann diesen Abschnitt das DOM. Wir müssen einen Ordner aus einem der vorherigen Videos erhalten. Nur die Starter-Vorlage. Kopieren Sie eine davon und fügen Sie sie ein. Dies ist Nummer 1, und dies wird als Zugriffselemente bezeichnet. Öffnen Sie es dann in Ihrem Texteditor. Ziehen Sie es so hinein. Wir müssen mit einem neuen Titel beginnen; Zugriff auf Elemente. Dann können wir den gesamten Code von unten zwischen den Skript-Tags löschen. In früheren Videos haben wir uns document.getElementById angesehen, und dann können wir ein Element der Webseite auswählen. Wenn wir eine Ebene 1 Überschrift hinzufügen und eine ID einfügen, zum Beispiel Titel. Wir können dann diese Ebene 1 Überschrift durch seine ID des Titels greifen, und dann können wir verschiedene Dinge tun, wie das Setzen der inneren HTML gleich alles, was Sie wollen. Also lassen Sie uns dies auf die Anzeige von JavaScripts in Webseiten setzen. Wenn dies im Browser geöffnet wird, sollte die leere Überschrift der Ebene 1 den Text haben, den Sie unten platziert haben. Also lasst uns aufmachen. Da gehen wir, da ist unsere Stufe 1 Überschrift. Es gibt auch andere Methoden, die wir verwenden können, um Elemente auf einer Webseite auszuwählen. Die nächste Methode, die ich Ihnen zeigen möchte, Elemente auf Webseiten zu greifen , indem Sie den QuerySelector verwenden. Neben der Auswahl von Elementen nach ihrer ID können wir auch Elemente auf die gleiche Weise wie im CSS auswählen, indem wir den CSS-Selektor verwenden. Lassen Sie uns ein Beispiel mit etwas Text erstellen. Lassen Sie uns also drei P-Tags mit einigen Klassennamen erstellen. Dieser kann zuerst sein und dann kann der Inhalt die erste Zeile sein, und Sie müssen das zweimal kopieren. Mit der zweiten und der Klasse der dritten. Lassen Sie diesen dritten leer für den Moment. Jetzt wissen wir, wie man auf ein Element durch seine ID zugreift. Als nächstes möchte ich mit seinem CSS-Selektor auf ein Element zugreifen. Wir können das mit Document.QuerySelector tun. Werfen wir einen Blick auf das. Document.querySelector. Innerhalb der Klammern möchten wir den CSS-Selektor übergeben. In unserem Fall werden wir in die Klasse einsteigen. Also lasst uns die Klasse der zweiten dort hineinlegen. Dann können wir einige Änderungen vornehmen. Wir werden style.backgroundColor hinzufügen und dann setzen wir, dass auf jeden Wert, den wir wollen, gleich sein. Lassen Sie uns das rot machen. Jetzt sollte die zweite Zeile eine Hintergrundfarbe von Rot haben. Lasst uns das retten. In der Tat können wir diesen Abschnitt einfach auskommentieren und dann innerhalb des Browsers aktualisieren. Jetzt haben wir die zweite Zeile durch ihre ID ausgewählt und die Hintergrundfarbe ersetzt. Wenn wir dies als Erster ändern würden, könnten wir es einfach durch seinen Klassennamen ändern und das würde die erste Zeile auswählen. Das kann sehr praktisch sein, um Elemente auf einer Webseite auszuwählen. So können wir nicht nur Elemente nach ihrem CSS-Namen auswählen, sondern auch Elemente nach ihrem Klassennamen auswählen. Lassen Sie uns einfach dieses Beispiel löschen. Wir können den Absatztext von vorher verwenden. Lassen Sie uns eine Variable namens Selektor erstellen. Dies wird auf documents.getElementsByClassName gesetzt werden. Seien Sie vorsichtig, dass dies ein S am Ende von Elementen hat, wo getElementById am Ende nicht das S hat , weil wir nur eine bestimmte ID auswählen. Während getElementsByClassName alle Elemente auf dieser Seite mit einem bestimmten Klassennamen zurückgeben wird . Dann möchten wir den Klassennamen auswählen, um das Ziel zu erreichen. Fügen wir also eine Klasse zur Überschrift der Ebene 1 der Überschrift hinzu und dann setzen wir dies einfach in die Klammern und dann ein Semikolon am Ende. Dies würde alle Elemente mit einem Klassennamen Überschrift auswählen. Wenn es mehr als eins gäbe, müssten wir dann erklären , welches Element wir durch seine Indexnummer anvisieren wollen. In unserem Fall wollen wir eins in der Klasse der Überschrift gehen. Das wird also die Indexnummer 0 sein. Wenn wir eine zweite Zeile mit der gleichen Klasse hätten, wäre dies die Indexnummer 1. Lassen Sie uns den inneren HTML-Code ändern und diesen auf einen Text setzen. Klassenname ausgewählt. Lassen Sie uns das im Browser ausführen. Da gehen wir. Das ist unsere Level-1-Überschrift mit ausgewähltem Klassennamen. Eine andere, die Sie wirklich nützlich finden, ist document.getElementsByTagName. Es funktioniert auf eine ziemlich ähnliche Weise wie das letzte Beispiel. Der Tag-Name ist entweder das H1 oder das P, oder es könnte eines der Elemente auf der Webseite sein. Es kann sogar ein GIF oder ein Bild sein. Diesmal wird der Selektor gleich document.getElementsByTagName sein. Wählen wir die P-Tags aus. Dann genau das gleiche wie zuvor, können wir dann eine Indexnummer setzen. Also 0, 1 und 2. Nummer 1 ist die zweite Textzeile dort. Dieses Mal, damit wir wissen, dass es funktioniert, drucken wir einfach den ausgewählten Tag-Namen aus. Speichern. Da gehst du. Nun wurde Zeile 2 zu Tag-Namen ausgewählt geändert. Wenn er sich auf Null ändert, sollte der ausgewählte Tagname nun die erste Zeile sein. Da gehst du. Das letzte Beispiel, das ich Ihnen in diesem Video zeigen werde, ist, die Anzahl der Bilder in den Dokumenten mit document.images auszuwählen . Um dies zu tun, müssen wir einige Bilder innerhalb der Webseite erstellen. Sie müssen eigentlich keine Bilder physisch da haben, wir können nur einige Bildnamen ausmachen. Also Bild 1, Bild 2, Bild 3 und dann Bild 4. Dann, wenn wir wissen wollen, wie viele Bilder auf dieser Webseite sind, könnten wir eine Variable namens Anzahl von Bildern erstellen. Die Anzahl der Bilder wird gleich document.images.length sein, und dann können wir auf dem Bildschirm die Anzahl der Bilder in einer Zeichenfolge drucken. Lassen Sie uns also ein leeres Element erstellen, um diese in anzuzeigen. Ein H1-Tag mit der ID zum Beispiel. Dann lassen Sie uns ein document.getElementById, und wählen Sie dann das Beispiel. Dann fügen Sie das ein. Wir können den Text mit dem inneren HTML setzen. Lassen Sie uns dies auf diese Seite gesetzt hat und dann ein Leerzeichen, plus die Variable, die die Anzahl der Bilder auf der Seite enthalten wird, dann plus, und dann wollen wir das Wort Bilder innerhalb einer Zeichenfolge. Okay, wenn das gut funktioniert, sollten wir den Text dieser Seite angezeigt haben, und dann vier Bilder. Lasst uns das speichern und einen Blick werfen. Großartig. Das funktioniert gut. Wenn wir eines dieser Bilder löschen würden, sollte das jetzt auf Sie drei geändert werden. Da gehen wir. Es gibt viele verschiedene Methoden, mit denen Sie auf Elemente auf einer Webseite zugreifen können. Ich empfehle Ihnen, einen Blick auf die Mozilla-Website zu werfen, auf die ich einen Link zur Verfügung stellen werde. Es gibt noch viele weitere Beispiele. Hoffentlich verstehen wir jetzt, dass wir so ziemlich auf jeden Teil eines Dokuments oder einer Webseite zugreifen können , den wir wollen. Im nächsten Video werden wir weitermachen, wie wir diese Elemente manipulieren oder ändern können. Danke fürs Ansehen, und wir sehen uns im nächsten Video. Danke fürs Zuschauen und wir sehen uns dort. 32. So manipulierst du Elemente: Willkommen zurück. Dieses Video wird als Manipulation von Elementen bezeichnet. Wie üblich, fangen wir mit unserem eigenen Ordner an, also ist dies Nummer zwei, Manipulating Elements. Dann lass uns das aufmachen. Dann lassen Sie es mit einem eigenen Titel und einem leeren Skript-Tag beginnen, also dieses Mal Elemente manipulieren, dann löschen Sie das alles. Wir beginnen mit unserer leeren Indexseite. Wir wissen aus dem letzten Video, wie man auf Elemente zugreift, also werfen wir jetzt einen Blick darauf, wie wir diese Elemente mit JavaScript ändern können. Lassen Sie uns also eine Überschrift der Ebene eins als Beispiel erstellen, und geben wir ihm eine ID des Titels und dann etwas Text zwischen der Ebene eins Überschrift der sich ändernden HTML-Elemente. Wir haben uns die Manipulation eines Wertes mit dem in HTML angesehen. Das war document.getElementById. Dann wissen wir, dass wir die ID des Elements, das Sie ändern möchten, erfassen müssen, was Titel ist. Dann haben wir inneres HTML verwendet, um den Inhalt der Elemente in alles zu ändern, was wir wollen. Wir werden jeden Text reinbringen, den wir wollen. Neben dem inneren HTML können wir auch das CSS oder die Stile eines bestimmten Elements ändern, und wir werden das mit.style tun. Sobald wir dann den Stil ausgewählt haben, können wir weiter in das CSS gehen, indem wir den Punkt verwenden. Sie können mit Klammern sehen, dass, sobald wir einen Punkt verwenden, erhalten wir dann eine Liste aller verfügbaren CSS-Eigenschaften, die wir auswählen können. Also werde ich es beginnen, indem ich die Farbe auswähle. Dann werden wir das gleich setzen, ich fange einfach mit Rot an. Lassen Sie uns das jetzt im Browser öffnen und werfen Sie einen Blick. Wir haben die Level-Eins-Überschrift, HTML-Elemente zu ändern. Dann fügen Sie gut in einem CSS-Stil, und dann werden wir in der Farbe des Textes rot zu sein. Also lasst uns das hoch. Es geht nun um den Text ganz rot auf der Seite dort. Wir können viele verschiedene CSS-Eigenschaften hinzufügen, wir können die Schriftgröße ändern, und lassen Sie uns diesen Text wirklich groß machen, damit wir seine Arbeit überprüfen können. Für 100 Pixel, also spielen Sie ein wenig herum und versuchen Sie , einige der verschiedenen CSS-Werte auszuwählen und zu sehen, was Sie mit ihnen erreichen können. Aber ich werde nicht fortfahren, um die Klassennamen oder die IDs von HTML-Elementen zu erhalten und zu setzen. Beginnen wir mit dem Abrufen des Klassennamens oder der ID. Um dies zu tun, müssen wir eine Klasse zu unserer Ebene 1 Überschrift hinzufügen. Also lassen Sie uns einfach eine Klasse von Rot hinzufügen und dann können wir herausfinden, was dieser Klassenname dieses bestimmten Elements ist. Lassen Sie uns das document.getElementById auswählen, also lassen Sie uns die Titel-ID und then.class Name, mit dem Semikolon am Ende. Also, weil wir einen ClassName packen. Ich möchte dies in einer Variablen speichern, damit wir leicht darauf zugreifen können. Variable des Klassennamens ist also gleich document.getElementById. Wir greifen in einen Titel, und dann werden wir im Klassennamen auswählen, lassen Sie uns jetzt ein Dokument richtig machen und dann überprüfen. Wir haben den Klassennamen korrekt in der Variablen gespeichert. Lasst uns das einfach in die Klammern setzen und dann aktualisieren. Sie können gerade sehen, dass wir den Klassennamen Rot am unteren Rand haben. Dies funktioniert auch mit ID. Sie müssen nur ClassName zu.ID ändern und dann nur die Ergebnisse wieder in einer Variablen anzeigen, also ID-Name, speichern Sie das. Wir haben die ID in diesem Fall auf Titel gesetzt. Das ist, wie wir greifen können oder wie wir den Klassennamen oder die ID eines Elements erhalten können. Manchmal möchten Sie eine ID oder eine andere Klasse oder sogar eine zusätzliche Klasse zu einem Element hinzufügen. Werfen wir einen Blick darauf, wie wir Klassen und Elemente hinzufügen können. Ich möchte einige Stile hinzufügen und ein paar neue Klassen erstellen, die wir zu diesem Element können. Lasst uns unsere rote Klasse benutzen. Lassen Sie uns die Farbe rot und machen es ein wenig lesbarer, wir setzen die Schriftgröße auf 2 ems. Dann ist es auch eine zweite Klasse von Blau erstellen, und dann können wir dies zu unseren Elementen hinzufügen und die Farbe in Blau ändern. Dann lassen Sie uns eine zusätzliche ID hinzufügen, die wir das Element zwei hinzufügen können. Ich werde nur die Schriftfamilie als Fantasie festlegen. Im Folgenden haben wir die ID und auch die Klasse der einzelnen Elemente erhalten. Aber wenn wir die ID setzen möchten, verwenden wir einfach die.ID und setzen sie dann gleich dem ID-Namen, der hinzugefügt werden soll, also ist es in unserem Fall ID1. Wenn dies richtig hinzugefügt wird, sollten wir jetzt die Schriftfamilie ändern, um Fantasy. Also speichern Sie das, und dann gehen Sie zum Browser und aktualisieren, da gehen wir. Großartig. Wir haben die unterschiedliche Schriftfamilie, so dass die ID dem Element hinzugefügt wird. Das Hinzufügen einer Klasse funktioniert genau auf die gleiche Weise, also lassen Sie uns diese Zeile duplizieren, und dann legen wir den ClassName fest. Schnappen Sie sich das Element nach ID des Titels und dann.ClassName. Dann fügen wir anstelle der roten Klasse die Klasse von Blau hinzu, die wir erstellt haben, und speichern Sie das, und lassen Sie uns den ID-Namen loswerden, also speichern Sie das und aktualisieren Sie es, und jetzt erhalten wir die blaue Farbe, so dass das alles korrekt funktioniert. Jetzt wissen wir, wie man IDs und Klassen zu Elementen hinzufügt, wir wissen auch, wie man auf die bestimmte Klasse oder ID zugreift. Als nächstes werde ich Ihnen zeigen, wie Sie neue Elemente erstellen und zu einer Seite hinzufügen. Beginnen wir mit einem leeren Skript-Tag, und ich werde diese in Variablen speichern. Ich werde eine Variable erstellen, die ein neues Element genannt wird. Das neue Element, das wir erstellen möchten, wird gleich documents.createElement sein. Dann müssen wir in die Klammern den Namen des Elements setzen, das wir erstellen möchten. Ich werde ein neues div erstellen. Dies wird ein neues div erstellen und es in der Variablen namens New Elements speichern. In diesem div möchte ich etwas Text erstellen, der darin eingefügt werden soll, also lassen Sie uns eine neue Variable namens AddText erstellen. Die Art und Weise, wie wir Text zu einem div oder zu einem Dokument hinzufügen können, ist die Verwendung von document.createTextNode. Dann werde ich innerhalb der Klammer in die Zeichenfolge einfügen, die wir erstellen möchten , neue Textzeichenfolge. Wir haben unsere Texte, und wir haben auch unser neues div. Um also den Text zum div hinzuzufügen, wählen wir die neue Elementvariable, die das div ist, und dann.appendChild. Das Kind, an das wir anhängen oder hinzufügen möchten, ist die AddText-Variable. Setzen Sie das einfach in die Klammern. Jetzt haben wir den neuen Text zum neuen div hinzugefügt. Fügen wir dies nun zu den Dokumenten hinzu, also document.body.insert Before. Hier sagen wir dem Browser genau, wo der Inhalt hinzugefügt werden soll. InsertBefore nimmt zwei Parameter an. Also der erste ist erforderlich, und das ist der Inhalt oder das Objekt, das wir hinzufügen möchten. Wir möchten die neue Elementvariable hinzufügen, die wir gerade erstellt haben, so dass es zuerst geht. Der zweite Wert ist optional, und dies ist die Markierung in HTML, wo das neue Element kurz davor hinzugefügt wird. Wenn wir kurz vor unserer Überschrift der Ebene eins neue Elemente hinzufügen wollten, erstellen wir eine neue Variable namens new content, und dann lassen Sie uns den Inhalt so einstellen, dass dieser Überschrift oben gleich ist. Also document.getElementById. Wir wollen die ID des Titels greifen, also setzen Sie das einfach zwischen die Klammern, genau so wollen wir nur sicherstellen, dass das eine Variable ist. Da ist also ein bisschen los, also schauen wir uns das noch mal an. Wir erstellen ein neues Element oder ein neues div. Fügt dann eine neue Textzeichenfolge zu diesem div mit AppendChild hinzu. Jetzt haben wir diese Informationen in einer Variablen namens new element gespeichert. Wir fügen dies dann dem Dokument hinzu, indem Sie vorher einfügen. Der Abschnitt des Codes, den wir hinzufügen möchten, ist dieses neue Element, das das neue div und die neue Textzeichenfolge enthält. Dann ist der zweite Wert des neuen Inhalts, wo wir dieses neue Element hinzufügen wollen zwei, und wir wollen es kurz vor unserer Ebene 1 Überschrift hinzufügen und dann zum Browser gehen und aktualisieren. Da gehen wir, da ist unsere neue Textzeichenfolge. Wenn Sie dieses bestimmte div und ID geben möchten, können Sie dies mit neuen Elementen oder der NewElement Variable.id tun. Wie wir im letzten Beispiel verwendet haben, werden wir die ID so einstellen, dass sie gleich ist, was Sie wollen. Ich möchte meine ID auf meine ID setzen und dann speichern, und jetzt, wenn wir die Seite aktualisieren, wenn Sie in die Entwickler-Tools gehen, und dann, wenn wir die neue Texturierung auswählen. Sie können das Innere des Körpers sehen, das wir ein neues div mit einer ID meines div haben, und der Inhalt ist eine neue Textzeichenfolge. diese Weise können Sie HTML mithilfe von JavaScripts neue Elemente hinzufügen. Also danke für das Ansehen und im nächsten Video gehen wir zu einer Mini-Herausforderung, die ist erstellen Sie einen Temperaturwandler und es wird in die Praxis umsetzen, was Sie in den letzten paar Videos gelernt haben. Vielen Dank und wir sehen uns im nächsten Video. 33. Mini-Challenge: Temperatur-Converter, Teil 1: Willkommen zurück. In dieser Mini-Challenge werden wir eine Temperatur-Konverter-App erstellen. Es kann einfach oder so kreativ sein, wie Sie möchten, aber das ist, was ich mir ausgedacht habe, nur als Beispiel. Es ist eine einfache HTML-Form, die die Eingaben des Benutzers nimmt, und dann können wir es in Celsius oder Fahrenheit mit JavaScript konvertieren, so versuchen Sie es und sehen, was Sie kommen können, sonst folgen Sie mir und ich werde Ihnen zeigen, wie ich erstellt das hier. Lassen Sie uns beginnen, indem Sie einen Ordner für das Projekt im Abschnitt dom erstellen. Dies ist die Nummer 3 und das ist der Temperaturwandler. Jetzt öffnen wir uns in Klammern und wir können loslegen. Der Titel ist Temperaturkonverter, und lassen Sie uns den gesamten Beispielcode aus den vorherigen Videos legen. Ich werde mit dem HTML-Abschnitt beginnen.1 Also werde ich nur ein Bootstrap HTML-Formular erstellen. Lassen Sie uns außerhalb der Skript-Tags beginnen. Lassen Sie uns einen Container erstellen , der der Bootstrap-Code ist, und dann lassen Sie uns eine Bootstrap-Zeile erstellen, und dann verwenden Sie das Bootstrap-Gitter, also col-sm-6. Wenn Sie das Emmet-Plugin wie ich verwenden, sollten Sie in der Lage sein, dieses Raster ziemlich schnell zu bekommen, wenn nicht, müssen Sie dies mit den Klassen eingeben und auch dieses div zu senden, fügen wir den col-sm-offset hinzu , der Versetzen Sie das Raster um drei und platzieren Sie es in der Mitte. Die Bootstrap-Klasse von Text-Center , die alles gut in der Mitte ausgerichtet halten wird, und schließlich habe ich eine Content-Klasse erstellt, und dies werden Sie verwendet, um es im CSS zu stylen. Beginnen wir mit einem Level 2 Überschrift, die nur der Titel unserer App ist, die Temperaturkonverter ist, und dann lassen Sie uns unser Formular erstellen. Da wir Bootstrap verwenden, erstellen wir ein div mit einer Klasse von Formulargruppe und dies wird sicherstellen, dass alles schön angelegt ist. Lassen Sie uns innerhalb der Formulargruppe eine Eingabe mit dem Typ der Zahl erstellen, und dies ist ein Abschnitt, in dem der Benutzer die Nummer eingeben kann, die er in Celsius oder Fahrenheit konvertieren möchte . Also die ID, ich werde auf UserInput setzen, und in der Tat geben wir diesem ein Label, also label 4, für die UserInputs-ID, und lassen Sie uns die Seitenleiste schließen. Lassen Sie uns speichern und prüfen, ob das funktioniert. Da gehen wir, da ist unsere Überschrift auf dem Eingang. Vervollständigen wir das Etikett jetzt. Lassen Sie uns in Geben Sie Ihre Nummer zu konvertieren. Einfach so, und dann erfrischen und da gehen wir. Da ist der Text vom Etikett. Jetzt werde ich zwei weitere Schaltflächen innerhalb des Formulars platzieren, was für den Celsius oder Fahrenheit ist. Lasst uns sie jetzt reinbringen. Ich werde diese in ein neues div oder eine neue Formgruppe platzieren und dann ist die erste Eingabe der Art der Schaltfläche und dann der Text innen. Wir fügen das mit dem Wert von To Celsius hinzu, und dann möchten wir, dass diese Schaltfläche tatsächlich etwas tut, wenn der Benutzer es drückt. Wir wollen ein onclick-Ereignis erstellen, das die Funktion auslöst und wir werden Ereignisse mehr im nächsten Video betrachten, aber für jetzt, erstellen Sie einfach ein onclick Ereignisse mit dem onclick Schlüsselwort und dann innerhalb der Zitate, fügen wir den Namen der Funktion, die wir auslösen möchten, sobald diese Taste gedrückt wird. Ich werde eine Funktion namens ToCelsius erstellen, und dann brauchen wir die Klammern danach. Also kopieren und einfügen oder duplizieren Sie dies. Das hier ist To Farhenheit, und dann ist die Funktion ToFarenheit, und lasst uns einfach einen Blick werfen. Da steht, da waren zwei Knöpfe drauf. Das letzte, was wir tun müssen, ist ein leeres div zu erstellen, das Sie den Text der Temperaturumwandlung anzeigen möchten. Genau wie die fertige Version, werden wir Textfeld am unteren Rand zu erstellen, wo die Konvertierung erscheint. Außerhalb des Formulars werde ich dies nur in ein leeres p-Tag mit der ID der Ergebnisse einfügen. Lassen Sie uns öffnen, wenn jetzt in HTML. Lassen Sie uns jetzt einfach nach oben gehen und wir fügen unserem Formular etwas Styling hinzu. Öffnen Sie die Kopfpartie hinten. Lassen Sie uns unsere eigenen Style-Tags erstellen. Wenn Sie sich an den unten im div erinnern, der den gesamten Inhalt enthält, fügen wir ihm eine Content-Klasse hinzu. Fügen wir das jetzt innerhalb der Style-Tags hinzu, und lassen Sie uns dann einige einfache Stile hinzufügen. Lassen Sie uns einen Rahmen hinzufügen, 1px solide. Wir fügen einige abgerundete Ecken mit einem Randradius hinzu. Ich werde minus 10px haben. Rand oben, nur um es von der Spitze des Bildschirms oder 30px und dann eine Hintergrundfarbe oder der grauen Farbe, die eee ist und dann lassen Sie uns einen Blick. Dann möchte ich nur die Hintergrundfarbe hinzufügen, die Sie auf der endgültigen Version dort sehen können. Gehen wir zurück in das CSS und lassen Sie uns den Körperabschnitt stylen. Um den Hintergrund zu erhalten, werde ich nur einen linearen Farbverlauf zum Hintergrund hinzufügen. Also linearen Farbverlauf und dann innerhalb der Klammern, können wir zwei hinzufügen, und dann fügen wir die beiden Farben hinzu, um zu verschmelzen. Zuallererst ist sein Rot und dann die zweite Farbe blau. Es wird mit Rot beginnen und dann, wie es nach rechts geht, wird es zu blau ändern. Gehen Sie in den Browser und da ist unser Farbverlauf auf dem Hintergrund. Das sieht besser aus. Vergessen Sie nicht, ob es sich um eine Live-Produktionsstätte handelt. Möglicherweise möchten Sie dem linearen Farbverlauf einige Browserpräfixe hinzufügen, nur um browserübergreifende Kompatibilität zu gewährleisten. Nun, das ist das HTML CSS alles fertig für die Benutzeroberfläche. Ich werde nur dieses Video dort verlassen und werde sich im nächsten Video fertig stellen wo wir das JavaScript hinzufügen und unseren Temperaturkonverter voll funktionsfähig machen. 34. Mini-Challenge: Temperatur-Converter, Teil 2: Willkommen zurück. So haben wir nun die Benutzeroberfläche für unsere Temperaturwandler-App fertiggestellt. In diesem Video werden wir alles beenden, indem die JavaScript-Funktionen hinzufügen, um sicherzustellen , dass die Benutzereingaben in Celsius oder Fahrenheit konvertiert werden. Also gehen wir zurück zu Ihrem Texteditor und dann arbeiten wir innerhalb der Skript-Tags. So erstellen wir zwei Funktionen. Der erste war zu Celsius und dann einer zu Fahrenheit, das wird die Eingabe in das Eingabefeld nehmen und dann in Celsius oder Fahrenheit konvertieren. Dann werden wir die Ergebnisse in diesem p-Tag dort anzeigen. Also lassen Sie uns die to Celsius Funktion zu Beginn erstellen. Erstellen Sie also die Funktion, bis Celsius. Um dies zu erstellen, werde ich eine Variable namens Celsius erstellen und dann innerhalb dieser Variablen möchte ich den Wert der Benutzereingabe speichern. Also document.getElementById, und die ID, die wir greifen möchten, ist die Benutzereingabe aus dem Formular. Platzieren Sie das also in die Klammern und dann wollen wir den Wert dieser Benutzereingabe greifen. Also, jetzt haben wir den Wert der Eingabe des Benutzers. Wir wollen eine Berechnung erstellen, um dies in Celsius zu konvertieren. Also beginnt es mit dem Wert minus 32 und dann, weil wir diesen Wert multiplizieren werden, lassen Sie uns dies in die Klammern setzen und dann multiplizieren wir diesen Wert mit 5 und dann müssen wir ihn durch 9 teilen. Dies ist die Berechnung, die wir in Celsius umwandeln müssen. Also, jetzt haben wir den Wert des Celsius in dieser Variablen gespeichert. Lasst uns es nun auf die nächste ganze Zahl aufrunden. So wird Celsius jetzt gleich Math.round sein. Die Zahl, die wir runden wollen, ist die Celsius-Variable. Also lege das in die Klammern. Lassen Sie uns nun den Wert von Celsius innerhalb der Ergebnisse anzeigen. Also document.getElementById. Also lasst uns die Results.innerHTML greifen und dann wollen wir das auf die Celsius-Variable setzen. Also lassen Sie uns das speichern und überprüfen Sie das im Browser. Also lasst uns eine Nummer da hineinlegen. Also lassen Sie uns einen Wert von 40 setzen. Also 40 Fahrenheit, und dann lasst es uns in Celsius umwandeln. Also ist die Bekehrung vier. Also lassen Sie uns dieses Label ein wenig besser machen, indem wir sagen, dass 40 Fahrenheit gleich vier Celsius ist. Also innerhalb des inneren HTML. Lassen Sie uns zunächst den Benutzer input.value nehmen. Dies ist also der Wert, den der Benutzer in das Feld eingibt. Dann plus dann fügen wir eine Zeichenfolge hinzu, sagen wir in einem Fahrenheit ist, und dann fügen wir am Ende die Celsius-Variable hinzu. Also zum Beispiel, wenn der Benutzer den Wert von fünf setzen, würde dies sagen, fünf Fahrenheit ist, und dann die richtige Konvertierung und dann wollen wir eine Zeichenfolge am Ende hinzufügen, um Celsius zu sagen. Also lasst uns das speichern und einen Blick werfen. Also fünf Fahrenheit und klicken Sie dann auf Celsius. Also, das wird gleich fünf Fahrenheit ist minus 15 Celsius und lassen Sie uns dies mit einem anderen Wert gehen. Acht ist also minus 13, 30. Okay, also jetzt diese Seite funktioniert, können wir die Fahrenheit Funktion erstellen. Lassen Sie uns das Leben leichter machen. Lassen Sie uns diese Funktion kopieren und dann können wir einige kleine Änderungen vornehmen. Das hier will also zwei Fahrenheit sein. Also die Variable von Fahrenheit. Also wollen Sie damit beginnen, das Gleiche zu tun. Also wollen wir das document.getElementById erstellen. Also wollen wir immer noch die Benutzereingabe und den Benutzereingabewert erfassen. Aber dieses Mal ist die Berechnung etwas anders, also multiplizieren wir sie mit 9 geteilt durch 5 plus 32. Also lasst uns einfach die Celsius-Variable zurück zu Fahrenheit und auch in der Math.round ändern. Wir möchten immer noch das Ergebnislabel greifen und den inneren HTML-Code ändern. Aber dieses Mal muss dies Celsius sein und dann muss dies die Fahrenheit Variable sein und die Zeichenfolge muss wieder Fahrenheit sein. Okay, also lasst uns das speichern und einen Blick werfen. Also lassen Sie uns einen Wert darin setzen und sehen, ob das funktioniert. Also, das funktioniert nicht, also gehen wir zurück und überprüfen, warum. Also haben wir die Fahrenheit Funktion bekommen. Nein, es sieht alles in Ordnung aus, also lassen Sie uns die Eingaben überprüfen, wir haben einen Rechtschreibfehler. Es muss H innerhalb des sein, also speichern Sie das und versuchen wir es erneut. Also sollte 30 Celsius gleich 86 Fahrenheit sein und versuchen wir es noch einmal. Also 10 Celsius ist 50 Fahrenheit. Okay großartig, also das funktioniert jetzt alles und das ist das Ende dieses Videos. Ich hoffe also, dass Sie es selbst geschafft haben, das zu erreichen und alles richtig zu funktionieren, und ich hoffe, Sie haben diese Herausforderung genossen. Wir sehen uns im nächsten Video, wo wir einen Blick auf JavaScript-Ereignisse werfen. 35. Javascript-Events: Willkommen zurück. In diesem Video werden wir einen Blick auf JavaScript-Ereignisse werfen. Beginnen wir mit unserem eigenen Ordner. innerhalb des dom-Abschnitts Lassen Sie unsinnerhalb des dom-Abschnittseinen neuen Ordner erstellen, der Nummer 4 ist. Ich werde diese Ereignisse anrufen, und dann lass uns aufmachen. Lasst uns in Klammern öffnen. Fügen Sie dann einen Titel, JavaScript-Ereignisse hinzu. Dann brauchen wir nicht die Style-Tags für diesen. Jetzt können wir auch HTML und auch die Skript-Tags löschen . Da gehen wir. JavaScript wird stark in Webseiten verwendet, um Interaktivität hinzuzufügen, und wir brauchen eine Möglichkeit für JavaScript, um die Aktionen eines Benutzers zu erkennen , um zu wissen, wie zu reagieren. Hier kommt Ereignisse oder Ereignisbehandlung ins Spiel. Sie können sich ein Ereignis auch als Auslöser vorstellen. Als Beispiel kann der Browser warten, bis ein Ereignis stattfindet, wie zum Beispiel ein Benutzer, der auf eine Schaltfläche klickt, die Sie in früheren Videos angesehen haben, wo der Button Klick eine Funktion ausgelöst wird. Also haben wir uns kurz den onclick Ereignishandler angesehen, um eine Funktion auszulösen. JavaScript kann auch auf Dinge reagieren, z. B. wenn eine Seite mit dem Laden beendet ist, wenn Tasten auf der Tastatur gedrückt werden, wenn eine Maus über ein Element schwebt oder sogar wenn Sie ein Formular senden. Lassen Sie uns eine Eingabe erstellen, mit der Sie arbeiten möchten, den Eingabetyp der Schaltfläche, und geben Sie uns dann eine ID der Schaltfläche, und dann fügen wir einige Bootstrap-Klassen hinzu. Wir können diese mit JavaScript-Ereignissen ändern. Fügen Sie eine Klasse, die Bootstrap-Klasse von btn und dann btn Erfolg hinzu. Lassen Sie uns einen Wert zu dieser Schaltfläche von Hallo hinzufügen, und dann, wie wir zuvor nachgeschlagen haben, können wir das onclick-Ereignis hinzufügen, um eine Funktion auszulösen. Ich werde den Funktionsnamen der Änderung zitieren, und dann bis zu den Skript-Tags, können wir diese Funktion innerhalb von dort erstellen, so dass die Funktion der Änderung. Das sollte jetzt ziemlich vertraut aussehen, weil wir es ein paar Mal benutzt haben. Also wollen wir ein document.getElementById tun. Jetzt werde ich die ID der Schaltfläche greifen, und dann, sobald diese Schaltfläche gedrückt wird, möchte ich nur, dass dies einen neuen Klassennamen auslöst. Dies kann wieder Bootstrap-Klassen oder btn, btn-danger gleich sein. Wir werden mit dem Button Erfolg beginnen. Sobald Sie darauf geklickt haben, ändert sich dies zu Schaltflächengefahr. Öffnen wir das und überprüfen Sie, dass das funktioniert. Das ist ein Button-Erfolg, der der grüne Hintergrund ist, und dann einmal darauf geklickt, erhalten wir den Klassennamen der Schaltfläche oder btn-danger hinzugefügt, was der rote Hintergrund ist. Das ist das onclick-Ereignis. Wir können auch eine ähnliche Art von Sache tun, wenn wir mit der Maus über die Schaltfläche bewegen, anstatt darauf zu klicken. Um dies zu tun, ändern wir einfach onclick, um onmouseover zu sein. Wenn wir nun den Mauszeiger über die Schaltfläche bewegen, sollten wir die Klassenänderung erhalten, genau so. Das tritt auf, sobald die Maus über die Schaltfläche geht. Wenn Sie möchten, dass es auftritt, wenn der Cursor die Schaltfläche verlässt, können wir onmouseover in onmouseout ändern, und es gibt einen einzigen Unterschied. Sobald wir über die Schaltfläche gehen, ändert sich die Klasse nicht, aber sobald die Maus den Knopf verlässt, erhalten wir dann die Änderung auf den roten Hintergrund. All diese Veranstaltungen finden hinter den Kulissen auf vielen Webseiten statt, die Sie täglich besuchen. Das nächste nützliche Ereignis, das ich betrachten möchte, ist onkeyup und onkeydown, und das klingt so ziemlich wie jedes Mal eine Taste auf der Tastatur gedrückt wird oder jedes Mal, wenn sie veröffentlicht wird. Dies kann ein Ereignis auslösen. Lassen Sie uns ein Beispielformular erstellen, um dies in Aktion zu sehen. Lassen Sie uns einfach die Eingabe auskommentieren und lassen Sie uns ein Formular erstellen. Dann der Eingabetyp von Text, eine ID, um ein JavaScript des Eingabefeldes zu erfassen, und dann, wie wir mit den onclick-Ereignissen verwendet haben, können wir dies in onkeyup ändern, und dies kann auch eine Funktion auslösen. Wir rufen die Funktion KeyPressed auf. Mit diesem Beispiel werde ich eine einfache Funktion erstellen, die jedes Mal ausgelöst wird , wenn eine Tastaturtaste gedrückt wird. Ich werde eine leere Überschrift der Ebene 2 erstellen, und ich möchte, dass die Funktion den Text anzeigt. Jedes Mal, wenn eine Schaltfläche innerhalb dieses Formulars gedrückt wird, möchte ich, dass die Überschrift der Ebene 2 den Wert dessen enthält, was in den Eingaben eingegeben wurde. Lassen Sie also den Inhalt für jetzt leer, und fügen Sie eine ID der Anzeige hinzu. Dann lassen Sie uns unsere Funktion von KeyPressed erstellen. Zunächst möchte ich die Anzeige mit einer document.getElementById erfassen, die die Anzeige-ID ist. Dann wollen wir den inneren HTML der Anzeige gleich dem Wert dieses InputField zu sein. Also brauche ich InputField.Value. Also gehen wir in die leere Überschrift der Ebene 2 nach oben, und dann setzen wir im Inhalt des inneren HTML gleich was auch immer die Benutzer in diesen Eingabefeldern eingeben. Dies wird jedes Mal ausgelöst, wenn eine Tastaturtaste gedrückt wird. Werfen wir einen Blick auf das in Aktion. Da ist das Formular in der oberen Ecke. Jedes Mal, wenn Sie eine Taste drücken, löst dies eine Funktion aus, und dann erhalten wir den Inhalt in der Überschrift Ebene 2 füllen. Diese Funktion wird also jedes Mal ausgelöst, wenn ein Schlüssel mit onkeyup freigegeben wird. Wir können auch onkeydown haben, und dies wird ausgelöst, sobald die Taste gedrückt wird. Also dann sind zwei Ereignisse ziemlich ähnlich, aber nur mit einem kleinen subtilen Unterschied. Dann möchte ich mich das onchange-Ereignis ansehen. Dies wird ausgelöst, wenn eine Änderung erkannt wird. Wir können die gleiche Form verwenden, aber dieses Mal anstelle von onkeydown, wollen wir es in onchange ändern. Dann lassen Sie uns eine Funktion erstellen. Jedes Mal, wenn eine Änderung erkannt wird, möchte ich die Schriftart erhöhen. Lassen Sie uns diese Funktion unten an der Unterseite erstellen. Wenn also eine Änderung erkannt wird, möchten wir das Eingabefeld greifen, das ist dieser Abschnitt, und dann akzeptieren, dass das CSS ein wenig größer ist. Also document.getElementById. Lassen Sie uns erneut das InputField und dann.style.FontSize löschen. Dann, damit wir sehen können, dass es funktioniert, lassen Sie uns die Schriftgröße viel größer, also 50 Pixel, und dann speichern wir das. Eigentlich soll es FontSize sein. Speichern Sie das und gehen Sie dann zum Browser. Geben wir da drinnen etwas ein. Sobald wir einen Klick davon haben, drücke ich eine Retur-Taste, und es sollte die Funktion auslösen. Da gehen wir. Jetzt haben wir den Text auf 50 Pixel geändert. So funktioniert der onchange Ereignishandler. Der letzte Ereignishandler, den ich Ihnen in diesem Video zeigen werde, verwendet onsubmit, das ausgelöst wird, wenn ein Formular gesendet wird. Lassen Sie uns also ein Beispielformular erstellen oder wir können das von kurz zuvor verwenden. Damit dies funktioniert, müssen wir es in die Formularelemente einfügen, also onsubmit. Dann müssen wir wieder eine Funktion ausführen, so runValidation, und dann werden wir ein Skript innerhalb dieser Funktion hinzufügen, um eine Formularvalidierung zu tun, wenn dies gesendet wird. Damit dies funktioniert, müssen wir eine Eingabe erstellen, die die Art der Übermittlung ist, und wir erhalten einen Wert von Absenden Formular. Speichern Sie das und gehen Sie dann zum Skript, und erstellen Sie dann eine Funktion, die RunValidation ist. Wir können jede Formularvalidierung, die Sie wollen, hier einfügen. Also, nur um zu überprüfen, dass es funktioniert, werde ich eine Warnung erstellen und nur einen Text erstellen, nur unsere Formularvalidierung, und dann den Browser aktualisieren. Jetzt, wenn wir das Formular absenden, löst dies die onsubmit Funktion und es gibt unseren Text vor der Formularvalidierung zu öffnen. Das ist wirklich nützlich, um einige Überprüfungen im Browser durchzuführen, um zu überprüfen, ob der Benutzer alle Felder ausgefüllt hat oder die Dinge korrekt eingegeben hat. Das ist also das Ende dieses Videos zu JavaScript-Ereignissen. Ich werde Sie im nächsten Video sehen, wo wir einen Blick auf eine Mini-Herausforderung werfen, die beinhaltet, auf onclick-Ereignisse zu reagieren, um einen Namen Animator zu machen. Wir sehen uns dort. 36. Mini-Challenge: Namensanimation: Willkommen zurück. In diesem Video werden wir einen Blick auf eine andere Mini-Herausforderung werfen, genannt Name-Animator. Wenn Sie verstanden haben, wie onclick Events funktionieren, insbesondere die Art und Weise, wie wir ein Element ändern, sobald auf eine Schaltfläche geklickt wird, sollten Sie keine Probleme haben, diese Herausforderung abzuschließen. Ich möchte nur, dass Sie Ihren Namen oben auf der Seite hinzufügen und dann einige Schaltflächen erstellen, die dann diese Elemente manipulieren. Also in meinem Fall habe ich einen erstellt, der den Text groß macht. Wir können die Farbe ändern, wir können sagen, dass alle Zeichen Großbuchstaben sind und dann können wir den Namen verstecken und dann wieder zeigen. Es ist also nur eine gute Chance, einige Dinge in die Praxis umzusetzen und sie in Erinnerung zu bringen. Sie sollten in der Lage sein, das zu gehen, und wenn nicht, folgen Sie einfach mit mir, wie ich das erschaffe. Zurück im Dom Abschnitt, lassen Sie uns einen neuen Ordner erstellen, der Nummer fünf ist, und dies ist Name Animator. Öffnen Sie das und ändern Sie den Titel, und beginnen Sie dann mit einer leeren Seite. In diesem Video möchte ich die Klicks auf eine etwas andere Weise behandeln. Sie können eine Funktion auslösen, wenn Sie möchten, aber ich werde Ihnen einen etwas anderen Weg zeigen, dies zu tun. Im Inneren des Körpers lassen Sie uns einfach unseren Namen erstellen. Ich werde das nur in p-Tags setzen, also die ID gleich dem Namen, und dann Ihren Namen darin setzen, und dann lassen Sie uns die fünf Schaltflächen erstellen, die alle Eingabetypen von Button sind. Sie können mehr Schaltflächen oder weniger Schaltflächen erstellen, wenn Sie es bevorzugen. Also der Typ ist Schaltfläche und dann, nur um es ein wenig schöner aussehen zu lassen, lassen Sie uns einige Bootstrap-Klassen hinzufügen, also, btn btn-info, der Wert , der nur ein Text ist, der innerhalb der Schaltfläche von big erscheint, und dann ein onclick-Ereignis. Onclick ist gleich, und dann werde ich dieses Mal, anstatt eine Funktion auszulösen, anstatt eine Funktion auszulösen,tatsächlich das JavaScript in die Zitate setzen. Also document.getElementById, und dann in den Klammern, müssen wir die Id setzen, die in unserem Fall Name ist. Platzieren Sie, dass innerhalb von dort und dann hoffentlich können Sie sich daran erinnern, wie man CSS-Stile aus dem Manipulator in Elemente Video hinzufügen, Das war Punkt-Stil und dann Punktschriftgröße gleich 100 Pixel, und dies in der Tat will sein in einfachen Anführungszeichen, da wir die doppelten Anführungszeichen ganz außen dort haben. Dies ist nur eine etwas andere Art, dies auszulegen, und es sollte genau gleich funktionieren Überprüfen Sie also beim Speichern im Browser. Also gibt es unseren Namen und dann haben Sie groß geklickt, wir sollten den Text auf 100 Pixel ändern. Kurz bevor wir weitermachen, werde ich ein paar Stile im Kopfbereich hinzufügen. Nur um dies in die Mitte zu bekommen, den Körper, lassen Sie uns die Breite auf 100 Prozent einstellen und dann Text in der Mitte ausrichten, und dann nur ein paar Stile zu unserem Namen. Fügen Sie also eine ID des Namens hinzu, lassen Sie uns die Schriftgröße von 60 Pixeln erstellen, und dann die Farbe, ich möchte, dass meine blau ist. [ unhörbar] hat alles in die Mitte geschoben und einfach etwas Farbe zu unserem Namen hinzugefügt, und Sie können das ändern, was Sie wollen, also seien Sie so kreativ, wie Sie wollen. Das ist unsere erste Schaltfläche, alle korrekt funktionieren, also ist es jetzt nur der Fall, mehr Schaltflächen mit verschiedenen CSS-Stilen zu erstellen. Wir können entweder alles eingeben, oder Sie können einfach kopieren und einfügen oder duplizieren. Also werde ich das einfach kopieren und das dann unten einfügen. Ich möchte, dass meine zweite Schaltfläche die Farbe des Textes ändert, also geben wir diesem einen Wert von Farbänderung, [unhörbar] an der Stil-Punktfarbe gleich Rot oder einer beliebigen Farbe, die Sie mögen, also wird meine rot sein. Wenn wir aktualisieren und auf Farbe ändern klicken, gibt es das rote Styling. Lassen Sie uns nun eine Schaltfläche erstellen, um den Text in Großbuchstaben umzuwandeln. Also der Schaltflächenwert ist Großbuchstaben, und dann dieses Mal wird der Stil Punkttext transformieren, und dann wird dies gleich Großbuchstaben sein, und dann zwei weitere Schaltflächen. Dieser ist, um die Schaltfläche zu verbergen, und um die Schaltfläche zu verbergen, machen wir die Stil-Punktsichtbarkeit. Die Sichtbarkeit ist also gleich ausgeblendet. Die letzte besteht darin, die Elemente wieder erscheinen zu lassen, dies ist Show, und dann Stil-Punkt-Sichtbarkeit wieder, dann ist dies gleich sichtbar. Da sind unsere fünf Knöpfe, also speichern Sie das. Ok. Lassen Sie uns alle Tasten ausprobieren und sehen, dass sie alle funktionieren, große arbeiten, Farbe ändern ist, alle in Großbuchstaben ändern, verstecken und dann zeigen. Da gehen wir hin. Ich hoffe, du schaffst es, das selbst zu tun. Es ist eine ziemlich einfache Herausforderung, aber es gibt Ihnen die Chance, in die Praxis umzusetzen, was Sie gelernt haben, also ist es wirklich nützlich, das selbst zu geben. Vielen Dank, und wir werden jetzt zum endgültigen Projekt übergehen. Wir werden eine Visitenkarten-Anwendung erstellen. Vielen Dank und wir sehen uns im nächsten Abschnitt. 37. So erstellst du die Benutzeroberfläche, Teil 1: Herzlichen Glückwunsch zum Ende dieses Kurses, und jetzt werden wir in einen wirklich lustigen Teil gehen, wo wir eine Visitenkarten-Anwendung erstellen werden. Dies ist ein Beispiel für das, was ich möchte, dass Sie bauen. Es ist etwas, das ich erschaffen habe, um dir zu zeigen, wie es geht. Ich habe es jedoch absichtlich ziemlich einfach gelassen, also möchte ich, dass Sie wirklich kreativ werden und zeigen, was Sie tun können. Also würde ich vorschlagen, uns vor wie üblich zu geben, und dann das gesamte grundlegende Layout erstellt zu bekommen und dann alle Funktionen mit JavaScript zu arbeiten. In meiner Version habe ich zwei Abschnitte erstellt. Die linke Seite ist die Eingaben eines Benutzers, wo er den Namen seines Unternehmens eingeben kann, und er kann auch verschiedene Texte wie Namen, Stellentitel und Kontaktinformationen hinzufügen . Sie können auch ein wenig Stil in die Visitenkarte mit den Hintergrundfarben hinzufügen und auch die Farbe des Textes und die Textausrichtung ändern, und dann gibt es ein rechtes div, das eine Beispiel-Visitenkarte enthält, und alle Änderungen, die innerhalb des linken div platziert und dann dynamisch in die Visitenkarte eingefügt werden. Sie können sehen, sobald Sie irgendwelche Informationen auf der linken Seite eingeben, es wird dann in die Visitenkarte repliziert. Sie können jeden dieser Werte ändern, und alles wird sofort geändert. es selbst zu replizieren und sehen Sie, was Sie erstellen können, und laden Sie es dann am Ende hoch. Ich würde gerne sehen, was Sie sich einfallen lassen können, und hoffentlich können Sie das alles von selbst erreichen. Wenn nicht, folge einfach mit mir, und ich zeige dir, wie ich das erstellt habe. Beginnen wir mit einem eigenen Ordner. Lassen Sie uns einfach kopieren eines der Videos, die das HTML-Skelett hat, und dann den Ordner umbenennen, business-card-Projekt, und ziehen Sie es in Klammern und ändern Sie den Titel. Das ist jetzt die saubere Seite, also werde ich die Style-Tags loswerden und alles andere befindet sich im HTML oder im JavaScript. Das Beispiel, das ich kopiert habe, hat die Indexseitenfotos und wir benötigen auch eine externe JavaScript-Datei. Ich habe bereits die alert.js, also werde ich dies nur in custom.js ändern und dann auch eine neue Seite für das Stylesheet erstellen. Dies ist eine style.css, und dann lassen Sie uns diese auf der nächsten Seite hinzufügen. Lassen Sie uns das Stylesheet hinzufügen, mit dem zu beginnen, und dies ist nur im Stammverzeichnis. Der Link ist Ihre style.css, und dann das Skript-Tag, werde ich direkt am unteren Rand des Körpers hinzufügen. Dann ist die Quelle wieder, es ist im Stammverzeichnis, so dass wir einfach zu custom.js gehen können. Lass uns dort etwas Platz schaffen. Um zu beginnen, werde ich einige divs erstellen und ich werde das Bootstrap-Grid verwenden , um uns dabei zu helfen. Beginnen wir mit der Überschrift der Seite. Lassen Sie uns ein div mit einer Klasse von Container-Fluid erstellen, und wir werden dies zu einem reaktionsfähigen Projekt machen. Dann das div mit der Klasse der Zeile, und dann, um dies die volle Breite der Seite zu machen, erstellen wir ein div mit der col, eine Klasse von col-sm-12, und dann die Ebene 1 Überschrift, die Visitenkarte ist Designer, und dann eine zweite Containerflüssigkeit, die der Container sowohl für das linke div als auch für das rechte div sein wird. Ein neues div mit der Klasse der Container-Fluid, und lassen Sie uns dort etwas Platz machen. Es wird also zwei Abschnitte zu diesem Teil geben. Es wird die Eingabe geben, wo der Benutzer die Formularinformationen eingibt. Lassen Sie uns einfach einen Kommentar des Eingabeabschnitts erstellen, und dann lassen Sie uns das Raster dafür erstellen. Lassen Sie uns ein div mit der Klasse erstellen, die Bootstrap-Klasse von col-sm-12. Es ist 12-Säulen-Raster für die Breite auf den kleineren Geräten. Die mittelgroßen Geräte machen es die Hälfte der Breite der Seite, so col-md-6. Dann, damit wir das selbst stylen können, werde ich unsere eigene benutzerdefinierte Klasse von Hintergründen hinzufügen, und wir werden das in nur ein bisschen im CSS verwenden. Jetzt müssen wir unser HTML-Formular für alle Benutzereingaben erstellen, und lassen Sie uns diesem Formular eine ID von CardInfo geben. Du kannst das nennen, was immer du willst. Es spielt keine Rolle. Dann lassen Sie uns einige Klassen hinzufügen, also eine Bootstrap-Klasse von Form-horizontal. Dann lassen Sie uns in diesem Formular einige Bootstrap-Formgruppen erstellen. Die erste Formgruppe in ihrem eigenen div. Innerhalb dieser Klasse von Form-Gruppe werden wir einige Abschnitte des Formulars erstellen. Wir werden die Etiketten auf der linken Seite und dann die Eingaben auf der rechten Seite erstellen. Wir möchten, dass das Etikett auf der linken Seite ein Bootstrap-Raster verwendet. Dies wird drei Spalten in Anspruch nehmen, die verbleibenden neun Spalten für die Eingabe belassen werden. Lassen Sie uns das Label jetzt erstellen. Dieses Label ist für die Eingabe, die eine ID von InputCompany gibt. Die Art und Weise, wie ich die IDs in diesem Projekt anordnen werde, ist alles auf der linken Seite, was ist, dass die Benutzereingabe eine ID mit Eingabe beginnt. Die erste ist InputCompany und Ebene der Eingabenachricht zum Beispiel, und dann auf der rechten Seite in der Visitenkarte, werde ich die ID erstellen, so dass dieser Abschnitt, mit der Ausgabe zu beginnen. Dies wird beispielsweise OutputCompany und OutputMessage sein. Nur damit es klar ist, sobald wir den JavaScript-Abschnitt bekommen, welche ID wir derzeit verwenden. Jetzt haben wir das Etikett für InputCompany. Lassen Sie uns die Bootstrap-Klassen hinzufügen. Dieser ist col-sm-3 und auch control-label, und der Text ist Firmenname, und dann ein Doppelpunkt, und dann die Eingabe als nächstes. Die Eingabe, die wir wollen, ist nur Text, und dann die Klasse, wieder, eine Bootstrap-Klasse von Form-Steuerung, und dann die ID. Es ist nur die ID, die wir in das Etikett gelegt haben. Die ID ist gleich InputCompany, und dann ist das letzte Ding der onkeyup. Jedes Mal, wenn ein Schlüssel freigegeben wird, möchten wir, dass er die Funktion von PrintCompany auslöst. Dadurch wird der Firmenname auf die Visitenkartenseite gedruckt. Speichern wir das und öffnen Sie den Browser. Es ist jetzt ein bisschen chaotisch. Ich denke, wir müssen nur die Eingabe in ein div setzen. Lassen Sie uns ein Bootstrap div mit der Klasse von col-sm-9 erstellen und dann das schließende div nach der Eingabe verschieben. Das Etikett hat die drei Teile. Die Eingabe ist neun Spalten geblieben. Das sieht jetzt ein bisschen besser aus. Lassen Sie uns auf die Firmennachricht zu bewegen.Sie können entweder all dies noch einmal eingeben oder Sie können einfach diesen div-Abschnitt kopieren, und fügen Sie dann einfach das unten ein, und dann nur ein einfacher Fall, einige der Werte zu ändern. Dieser ist InputMessage. Der Firmenname ist jetzt unsere Firmennachricht, und dann müssen wir die ID und dann auch den Funktionsnamen ändern, um PrintMessage zu sein, und das sollte alles sein, was wir für die Nachricht brauchen. Lassen Sie uns einfach aktualisieren und da ist die Nachricht. Jetzt müssen wir auf den Hintergrund der Textfarbe gehen. Gehen wir zurück zum Texteditor und dann können wir wieder in die Formulargruppe einfügen. Die Eingaben, ich werde meinen InputBG für den Hintergrund aufrufen, und dann die ID ändern. Ändern Sie die Beschriftung in Hintergrundfarbe. Aufgrund der Auswahl einer Farbe möchten wir den Eingabetyp ändern, um Farbe zu sein. Die ID ist korrekt, und dann müssen wir einen Wert hinzufügen, und dies wird der Anfangswert sein. Ich werde nur einen Wert hinzufügen, einen Hex-Wert oder ffb74d. Wir werden dieses Mal ein anderes Ereignis-Handle verwenden. Dieses Mal werde ich onchange verwenden. Jedes Mal, wenn die Farbe geändert wird, wird es dann die Funktion namens ChangeBG auslösen, und wir können diesen Teil auch wiederverwenden, weil der nächste ist, um die Textfarbe zu ändern. Dies muss auch den Eingabetyp der Farbe haben, aber wir müssen nur InputBg in InputText ändern. Ändern Sie die Eingabe-ID und dann dieses Mal müssen wir es in Textfarbe ändern. Ich werde den Rechtschreibfehler dort ändern. Die Textfarbe, ich habe den Eingabetyp der Farbe. Die ID ist korrekt. Der Wert, ich werde meinen auf 262626 ändern. Dann die Funktion, wieder ändern. Es geht zu ChangeText. Ich werde das speichern und überprüfen, wie das alles im Browser aussieht. Aktualisieren, so jetzt haben wir es sagt unseren Firmennamen, Firmennachricht, und dann haben wir auch die Farbauswahl erscheint, sobald wir die Hintergrundfarbe auswählen, und auch wenn wir die Textfarbe auswählen. Wir haben auch die Standardfarbe, die darin angezeigt wird. Wir lassen dieses Video dort und wir werden mit dem nächsten Video fortfahren. Wir beginnen mit dem Hinzufügen der Textausrichtungen und beenden den Formularabschnitt. Danke und ich sehe dich im nächsten Video. 38. So erstellst du die Benutzeroberfläche, Teil 2: Willkommen zurück. Wir werden weitermachen, wo wir im letzten Video aufgehört haben. Wir werden von den Textfarben fortfahren und dann werden wir den Rest des Formular-Abschnitts hinzufügen , der den Text ausrichten und auch verschiedene Namen und Kontaktinformationen enthält. Jetzt gehen wir zum Abschnitt Text ausrichten. Lassen Sie uns in den Texteditor gehen und dann direkt unter dem ChangeText-Abschnitt, kopieren Sie einfach diesen Abschnitt und fügen Sie ihn unten ein. Dieser wird etwas anders funktionieren als die letzten, die wir uns angesehen haben weil sie drei verschiedene Eingaben sein werden. Jedes Mal, wenn auf eine dieser Eingaben geklickt wird, möchten wir die ID erfassen und dann dieses JavaScript übergeben, um festzustellen, ob das CSS links, rechts oder zentriert ausgerichtet sein soll. Wir können das Etikett wiederverwenden, und dieses Mal wollen wir ihm nur ein Label namens Text Align geben. Dann noch innerhalb des col-sm-9 Abschnitts, werden wir drei verschiedene Eingaben erstellen. Der erste wird der Typ der Schaltfläche und dann die Klasse von btn btn-info sein. Der Wert, den wir übergeben werden, wird der Text innerhalb der Schaltfläche sein, also ist dies die linke Taste. Dann werden wir eine ID in den Text übergeben - links. Dies ist eigentlich eine Bootstrap-Klasse, aber ich zeige Ihnen genau, was wir in nur einer Sekunde tun werden. Wir werden einen Onclick-Ereignishandler erstellen und wenn die Schaltfläche gedrückt wird, wird es Triggerfunktion namens TextAlign beenden. Dann innerhalb der Klammern werden wir einen Parameter von this.id übergeben. Dieser Teil wird mehr Sinn machen, wenn wir zum JavaScript-Abschnitt gehen. Aber im Grunde, was wir tun, ist jedes Mal, wenn auf die Schaltfläche geklickt wird, werden wir dann die TextAlign-Funktion auslösen und je nachdem, welche der drei Tasten gedrückt wird , wird es dann die ID greifen. links. Dann mit JavaScript, werden wir diese text-left id hinzufügen und dann werden wir es als Klassennamen hinzufügen. Sobald er gedrückt wird, hat der Text in der Visitenkarte dann die Textlinksausrichtung und das gleiche für Textmitte und Text-rechts. Aber es sollte mehr Sinn machen, wenn wir zum JavaScript-Abschnitt kommen. Duplizieren Sie diese Schaltfläche noch zwei Mal und wir werden genau die gleiche TextAlign-Funktion verwenden. Aber wir müssen nur die ID ändern. Die mittlere wird text-center mit dem Wert von Center sein, und dann hat die dritte Schaltfläche den Wert Right und dann die ID von text-right. Alle drei Tasten lösen die gleiche Funktion aus, aber wir übergeben sie einfach in einer anderen ID, je nachdem, welche Taste gedrückt wird. Schauen wir uns das an und erfrischen wir uns. Sagt, ich habe drei Knöpfe. Jetzt können wir auf den Namen des Benutzers, die Job-Titel, E-Mail und Telefonnummer zu bewegen die Job-Titel, E-Mail , so dass es eine ziemlich einfache Abschnitte ist. Wir können einfach die Formulargruppen kopieren, die wir bereits erstellt haben, und fügen Sie sie dann unter den Schaltflächen ein. Der erste ist der InputName, der Beschriftungswert Ihres Namens, ändern Sie die ID. Ich werde den Wert entfernen, weil wir die Farbe nicht verwenden. Lassen Sie uns den Farbtyp entfernen und ihn zurück in Text ändern. Dann brauchen wir das auf Augenhöhe. Wenn die Taste gedrückt wird, löst dann eine Funktion namens PrintName aus. Dann lassen Sie uns dasselbe für den Job-Titel tun, also kopieren Sie diesen und fügen Sie ihn dann ein. InputJob ist die ID auch InputJob und dann ist das Label Job Title und dann onkeyup PrintJob und dann der E-Mail-Abschnitt. Lassen Sie uns noch einmal eine neue Formulargruppe erstellen. Fügen Sie einfach unten, so dass dies die InputeMail sein muss und ändern Sie dann die ID. Das Label ist einfach E-Mail und dieses Mal müssen wir den Eingabetyp ändern , um E-Mail zu sein, damit JavaScript einige Validierung darauf tun kann. Dann onkeyup PrintEmail Funktion. Dann ist die letzte, die wir tun müssen, für die Kontaktnummer. Lassen Sie uns einfach diese letzte Formulargruppe für die Telefonnummer kopieren, die InputTelephone ist, ändern Sie die ID, den Titel der Telefonnummer, und dann den Eingabetyp von tel, und dann onkeyup PrintTelephone. Speichern Sie das und überprüfen Sie das im Browser und das sollten alle Eingabetypen jetzt abgeschlossen sein. Wir müssen nur die Schaltfläche Senden hinzufügen und dann auch eine Schaltfläche, um das Formular zu löschen, also lassen Sie uns sie jetzt hinzufügen. Wir können diese auch in ihre eigene Formgruppe setzen. Erstellen Sie ein neues div mit der Klasse von form-group. Dann fügen wir das Bootstrap-Gitter so ein div hinzu, lassen Sie uns diesem eine Klasse von col-sm-3 geben, so dass es drei Spalten und dann auch ein Offset-col-sm-offset-3 einnimmt . Dann können wir innerhalb des div die Eingabe setzen. Der erste, den wir hinzufügen müssen, ist der Eingabetyp der Schaltfläche. Dies ist für die Schaltfläche „Senden“ und dann aufklicken. Wir werden die Funktion FormSubmit erstellen, und dann ist der Schaltflächenwert gleich Submit. Dann schließlich die Schaltfläche für das Formular zurücksetzen oder Löschen. Ich erstelle dieses vollständige div von dem obigen und entferne dieses Mal einfach den Offset. Auch hier brauchen wir den Eingabetyp der Taste. Onclick wird die Funktion FromReset mit dem Wert von Clear erstellen. Schauen wir uns den Browser an und überprüfen Sie, ob alles gut funktioniert. Also erfrischen Sie das und da gehen wir. Es gibt unsere Visitenkarte und alle Formulare, die Schaltfläche „Absenden“ und auch die Schaltfläche „Löschen“ am unteren Rand. Lassen Sie uns den HTML beenden, wir müssen nur das div auf der rechten Seite erstellen, das für die Visitenkarte ist. Dies wird alle Informationen haben, die der Benutzer in das Formular eingibt. Lassen Sie uns einen Kommentar erstellen, nur um ihn ein bisschen lesbarer zu machen. Dies ist der Ausgabe-Abschnitt. Ich möchte nur sicherstellen, dass wir das im richtigen Abschnitt haben, also werde ich darauf klicken. Das ist das Ende aller Formen. Lass uns das einfach ein bisschen aufräumen. Bringen Form nach oben. Dann sollte dieser der Schließbehälter für die Behälterflüssigkeit sein. Da gehen wir. Wir können jetzt all dies in der Containerflüssigkeit behalten, also stellen Sie sicher, dass das schließende div unterhalb des Ausgabe-Abschnitts liegt. Lassen Sie uns nun den Visitenkartenabschnitt erstellen. Lassen Sie uns ein Bootstrap-Gitter für diese Seite erstellen. Die Klasse muss col-sm-12 sein. Genau wie der linke Abschnitt wird es die volle Breite des Bildschirms auf kleineren Geräten sein. Sobald Sie dann zu einem größeren Gerät kommen, können wir eine col-md-6 hinzufügen und dies wird sechs Teile oder die Hälfte der Breite des Bildschirms in Anspruch nehmen. Der linke Abschnitt und der rechte Abschnitt werden nebeneinander sitzen. Dann ein neues div, und dies wird die ID gleich Karte haben , weil dies der Visitenkarten-Abschnitt ist. Wir verwenden diese ID für das Styling und auch für die JavaScript-Kreuzung. Lassen Sie uns den Firmennamen in eine Überschrift der dritten Ebene setzen, also setzen wir den Firmennamen. Wir setzen das nur als Platzhalter, bis der Benutzer einige Informationen in das Formular hinzufügt, und dann wird der Text des Firmennamens außer Kraft gesetzt. Wir müssen ihm eine ID geben. Da wir jetzt auf dem Ausgabe-Abschnitt sind, können wir die ID von OutputCompany hinzufügen. Dann müssen wir als nächstes die Ausgabemeldung tun, die dieser Abschnitt hier ist. Unterhalb der Überschrift der Ebene drei, lassen Sie uns dies in p-Tags und dann die ID von OutputMessage und dies wird eine Bootstrap-Klasse von klein haben, nur so ist es ein wenig kleiner als der Rest des Textes, und dann den Text der Unternehmensmeldung und duplizieren Sie diesen Abschnitt. Dies wird für Ihren Namen oder den Namen des Benutzers sein, also ist der Text Ihr Name. Wir können die Bootstrap-Klasse von klein halten, aber dieses Mal ändern Sie die Ausgabe, um eine ID von OutputName zu haben und diese erneut zu duplizieren. Dies ist der OutputJob. Auch hier ist die Klasse klein und der Name des Job-Titel. Werfen wir einen Blick. Es ist erledigt, es ist jetzt zusammengekommen. Nach der Berufsbezeichnung müssen wir auch die E-Mail und Telefonnummer hinzufügen. Lassen Sie uns dies noch zwei Mal duplizieren, damit OutputEmail und der Text von Email sein kann:. Schließlich OutputTelephone und der Name Tel: mit einem Doppelpunkt am Ende. Ich sollte das etwas näher bringen und sparen. Das sollte es sein, sobald Sie sich erfrischen. Wenn Sie zum Projekt gehen, und es gibt alle unsere Informationen auf der Visitenkarte auf der rechten Seite. Das ist der Abschnitt der Benutzeroberfläche komplett. Im nächsten Video werden wir mit dem Hinzufügen von CSS fortfahren und auch mit den JavaScripts fortfahren. 39. So fügst du CSS und Javascript hinzu: Okay, jetzt ist der Abschnitt der Benutzeroberfläche für unser Visitenkartenprojekt fertig. Lassen Sie uns nun zum Styling übergehen und fügen Sie auch ein bisschen JavaScript hinzu, um dies zu funktionieren. Gehen Sie also zurück zu Brackets, und dann müssen wir in der style.css beginnen. Das erste, was ich tun möchte, ist, die Level-1-Überschrift in die Mitte zu verschieben und es einfach ein wenig mehr Abstand zu machen. Also h1 und fügen Sie dann einige Textausrichtungen zur Mitte und auch etwas Padding hinzu. Also 20 Pixel oben und unten und Null auf der linken und rechten. Dann fügen wir der Visitenkarte etwas Styling hinzu. Auf der Indexseite geben wir der Visitenkarte eine ID der Karte, so dass wir diese in Stilen des CSS verwenden können. Also lassen Sie uns eine Breite von 400 Pixeln, eine Höhe von 250 Pixeln, und dann einen Rahmen, um die Visitenkarte von 1 Pixel und einer durchgezogenen Linie zu gehen, und dann nur ein wenig Polsterung von 10 Pixeln, und dies wird alle halten den Text innerhalb des äußeren Randes. Nun, es sieht nur ein bisschen mehr aus wie eine Visitenkarte. In der Tat werden wir einfach eine horizontale Regel direkt über Ihrem Namen setzen. Also zurück in die Indexseite. Lassen Sie uns einfach hr hinter die Firmenbotschaft setzen. Es gibt also Ihre [unhörbare] schwache horizontale Regel, nur um den Firmennamen mit den Informationen der Person zu trennen. Fügen wir nun einige Stile zum Hintergrundabschnitt des Formulars hinzu. Also geben wir diesem Formularabschnitt eine benutzerdefinierte Klasse von Hintergrund. Also lassen Sie uns das in der style.css verwenden. Lassen Sie uns also eine Hintergrundfarbe einer hellgrauen Farbe geben, die eee ist, und ein wenig Polsterung von 30 Pixeln, und dann etwas Rand auf der Unterseite und das, Sie werden auf 30 Pixel eingestellt werden. Dies ist nur für die mobile Ansicht. Also, wenn das Formular auf der Visitenkarte gestapelt ist, wird es nur ein wenig Abstand zwischen den beiden halten. Dann speichern Sie das. So haben wir jetzt eine leichte Hintergrundfarbe, um den Formularabschnitt von der Visitenkarte zu trennen. Das sieht jetzt ein bisschen besser aus. Wir haben die Benutzeroberfläche fertig gestellt, und wir haben etwas Styling hinzugefügt, um es ein bisschen schöner aussehen zu lassen. Lassen Sie uns nun zum Hinzufügen von JavaScript übergehen, um dies tatsächlich zum Laufen zu bringen. Wir möchten also, dass die Eingaben des Benutzers von links auf der rechten Seite erscheinen und dann die Visitenkarte füllen, damit der Benutzer genau sehen kann, wie seine Karte aussehen wird. Also lasst uns in die custom.js gehen. Wir können die Funktionen erstellen, die wir innerhalb der Indexseite erstellt haben. Das erste, was wir tun müssen, ist PrintCompany. Dies ist die erste Funktion, die erstellt werden soll. Also kopieren Sie das einfach und gehen Sie dann zur custom.js, Funktion PrintCompany. Okay, also was genau wollen wir diese Funktion tun? Nun, wenn wir einen Blick auf unsere Index-Seite werfen, was wir wollen, dass die Funktion tun, ist, die HTML-Elemente auf der rechten Seite zu greifen. Also müssen wir es mit document.getElementById tun. Das ist also OutputCompany, und dann müssen wir das innerHTML so ändern, dass es der Inhalt der InputCompany auf der linken Seite ist. Also lasst uns das jetzt machen. Also document.getElementById. Also müssen wir die OutputCompany greifen, und dann müssen wir die innerHTML setzen, um dann gleich der InputCompany.Value zu sein. Also lassen Sie uns das speichern und sehen, ob das in Ordnung ist. Aktualisieren, also sollten wir jetzt in der Lage sein, einen Firmennamen dort einzugeben und da wir auf keyup als Ereignishandler verwendet haben, können wir nun den Inhalt sehen, der auf der rechten Seite angezeigt wird, und dies löst eine Funktion aus, wenn ein Schlüssel gepresst. Gehen wir nun zur Unternehmensmeldung über. Kopieren Sie einfach diese Funktion, und dann können wir sie unten einfügen. Die Funktion hieß PrintMessage, und dann war das Element, das wir greifen wollten, OutputMessage. Also setzen wir das innerHTML von OutputMessage auf InputMessage. Dann müssen wir anstelle des innerHTML das CSS ändern, um die Hintergrundfarbe und auch die Textfarbe zu ändern. Also Funktion, und der Funktionsname war ChangeBG. Wenn Sie verschiedene Funktionsnamen auf der Indexseite verwenden, ändern Sie diese natürlich entsprechend in der JavaScript-Datei. Okay, also zunächst müssen wir den Wert oder den Eingabewert des Benutzers erfassen, und ich werde diesen in einer Variablen namens bgColor speichern. Die bgColor ist also gleich document.getElementById und die ID, die wir greifen möchten, ist die InputBg und dann.value. Also jetzt haben wir den Eingabewert des Benutzers in einer Variablen namens bgColor gespeichert. Jetzt können wir die Visitenkartenseite einstellen. Also document.getElementById, und die ID, die wir greifen möchten. Die Hintergrundfarbe, die wir ändern möchten, ist der vollständige Visitenkartenabschnitt, und dies hatte die ID der Karte. Also fügen Sie Karte dort und then.style.color hinzu, und dann werden wir dies gleich der Eingabe des Benutzers setzen, die in dieser Variablen gespeichert ist. Fügen Sie das also mit einem Semikolon ein. Lasst uns überprüfen, dass das gut funktioniert. Wechseln Sie zur Hintergrundfarbe und wählen Sie den gewünschten Hintergrund aus. Das ändert tatsächlich die Farbe des Textes, also müssen wir nur unseren style.background ändern. Also, sparen Sie das. Dann jetzt, wenn wir die Farbe ändern, sollte es die Hintergrundfarbe anstatt den Text ändern, also gehen wir. Dieser kleine Fehler dort hätte dir einen Hinweis geben sollen, wie wir die Textfarbe als nächstes machen werden. Kopieren Sie also diese Funktion und fügen Sie sie dann ein. Die Funktion ist ChangeText. Genau wie zuvor kann dies eine Variable namens TextColor sein. Dann Eingabe, die wir greifen wollen, ist InputText. Dies erfasst also den Wert, den der Benutzer ausgewählt hat. Auch hier Document.getElementById, und wir werden die vollständige Visitenkarte auswählen, und dann muss der Stil die Farbe Eigenschaft haben. Dies wird gleich der Variablen von TextColor sein. Lasst uns das einfach überprüfen. Die Hintergrundfarbe funktioniert einwandfrei, und dann die Textfarbe, okay, gut, das ändert sich alles. Also lasst uns das einfach auffrischen. Okay, jetzt funktionieren diese Farben alle. Wir lassen dieses Video dort, bevor es zu lang wird und kommen im nächsten Video zurück , wo wir den Rest des JavaScripts für das Projekt beenden werden. 40. Fertigstellung des Projekts: Willkommen zurück. Dies ist das letzte Video des Visitenkartendesigner-Projekts. Wir werden weitermachen, von wo aus wir im letzten Video abgereist sind. Wir werden beginnen, indem Sie die Eigenschaft „Text ausrichten“ setzen. Wenn Sie sich erinnern, innerhalb der Indexseite, wenn wir nach dem Abschnitt „Text ausrichten“ suchen, gerade da ist, haben wir einige Werte eingefügt und onclick haben wir eine Funktion erstellt, oder wir werden eine Funktion namens „TextAlign“ erstellen. Dies wird in einem Parameter nehmen und der Parameter, den wir verwenden werden, ist die ID dieser Schaltfläche. Wir setzen die ID auf die gleiche wie die Bootstrap-Klasse von „text-left“, „text-center“ und „text-right“. Jedes Mal, wenn auf die Schaltfläche geklickt wird, wird die ID in einen dieser drei Werte geändert, und dann können wir diese ID greifen und dann ändern, um eine „Klasse“ zu sein , und dann wird das die Bootstrap-Stile anwenden und den Text entsprechend ausrichten. Ich zeige Ihnen, wie Sie das jetzt in der JavaScript-Datei tun. Lassen Sie uns eine Funktion erstellen. Diese Funktion hieß TextAlign. Ich werde dem Parameter einen Namen von selected_id geben , dann innerhalb der Funktion werden wir ein document.getElementById machen. Dann wollen wir die Karte noch einmal auswählen, aber dann wollen wir einen Klassennamen hinzufügen, der der selected_id entspricht. Ich hoffe, das macht Sinn. Selected_ID zieht die ID aus der Bindung und dann, sobald sie die ID erhalten hat, wie text-right, verwenden Sie dann die ID und setzen sie als Klassennamen. Effektiv wird es so aussehen. ClassName ist gleich text-right. Das ist eine Bootstrap-Klasse , bei der der gesamte Text auf der rechten Seite angezeigt wird, und das gleiche für Text-links und Text-Center. Lass uns das speichern und überprüfen, dass es gut funktioniert. Text zentriert, rechts und links ausrichten. Jetzt müssen wir zu Ihrem Namen übergehen, und Ihr Name hatte eine Funktion namens PrintName. Dann lassen Sie uns das jetzt in der custom.js erstellen. Eine neue Funktion, PrintName. Wir könnten dies auf die gleiche Weise wie früher mit document.getElementById tun. Die Id, die wir greifen möchten, befindet sich im Ausgabe-Abschnitt. Wir müssen den Ausgabennamen erfassen und dann den inneren HTML-Code so einstellen , dass er mit dem Eingabe-Abschnitt identisch ist. InputName. Dann, wenn Sie den Wert scrub und speichern Sie den. Jetzt im Bereich Druckname, lassen Sie uns einfach etwas hinzufügen. Sie können sehen, wie wir tippen, wird es auf die Visitenkartenseite gedruckt. PrintJob ist auch ziemlich genau das Gleiche. Lassen Sie uns die Funktion kopieren. Dieses Mal PrintJob. Der Ausgabenname lautet OutputJob und der Eingabename wird in InputJob geändert. Dann E-Mail und Telefon Abschnitt. PrintEmail, greifen Sie OutputEmail und dann inputeMail.Value. Aber anstatt nur die E-Mail zu drucken, möchten wir, dass die Zeichenfolge der E-Mail kurz davor erscheint. Fügen Sie das einfach mit einem Doppelpunkt und einem Leerzeichen hinzu, und fügen Sie dann die Eingabe hinzu, die der Benutzer innerhalb des Formulars eingegeben hat. Dann das gleiche für die Telefonnummer. Kopieren Sie die Funktion. Diese Funktion ist PrintTelephone. Das Element, das wir greifen möchten, ist OutputTelephone. Die innerHTML ist InputTelephone. Ändern Sie dann die E-Mail in der Zeichenfolge, um Tel zu sein, und speichern Sie diese dann. Dann lassen Sie uns den Browser aktualisieren und dann können wir einige Werte in den Rest des Formulars hinzufügen und überprüfen, dass alles funktioniert. Firma 1. Ich werde nur etwas Text hinzufügen und überprüfen, dass alles funktioniert. Ändern Sie die Hintergrundfarbe. Das funktioniert, und auch die Steuer ändert sich. Der Text ausrichten, das funktioniert alles korrekt. Ihr Name, der Job-Titel, die E-Mail funktioniert korrekt. Es gibt eine Zeichenfolge, die wir vor der E-Mail setzen und wir sollten das gleiche für die Telefonnummer bekommen. Ich füge das da drin hinzu. Wir haben die Saite von Tell vor der Nummer. Großartig. Das funktioniert alles. Es gibt nur noch eine Sache zu tun, und das sind die Tasten unten. Ich beginne mit dem Formular „Absenden“. Alles, was ich mit dem FormSubmit tun möchte. Alles, was ich mit der Schaltfläche Senden tun möchte, ist eine Warnung zu erstellen , um den Benutzer zu warnen, wenn bestimmte Werte leer gelassen wurden, oder mit anderen Worten, wir können in die erforderlichen Felder einfügen und dann eine Funktion für die Schaltfläche Löschen erstellen , um alle -Abschnitte des Formulars. Beginnen wir mit der Schaltfläche „Senden“. Lassen Sie uns eine Funktion namens FormSubmit erstellen. Dies ist der Funktionsname, den wir innerhalb der Indexseite verwendet haben. Wenn wir nach unten scrollen und dann nach der Schaltfläche Absenden suchen, die gerade hier ist, und es gibt die Schaltfläche FormSubmit, die ich falsch geschrieben habe, also formSubmit und dann lassen Sie uns das jetzt erstellen, also wird es ein if-Anweisung. Also „if“ und ein Ausrufezeichen, was nicht bedeutet, so InputName.Value. Dies überprüft, ob innerhalb des Eingabennamens kein Wert vorhanden ist. Dann müssen wir eine Warnung für den Benutzer erstellen. „ Bitte füllen Sie alle erforderlichen Abschnitte aus.“ Speichern Sie das. Jetzt haben wir den InputName eingegeben und wir haben überprüft, ob es keinen Wert gibt. Wenn wir nun keinen Namen in die Eingabefelder einfügen und auf „ Absenden“ klicken, erhalten wir das Warnfeld, das heißt: „Bitte füllen Sie alle erforderlichen Abschnitte aus.“ Aber wenn wir dort einen Namen haben und dann auf „ Absenden“ klicken, wird die Warnung nicht auftauchen. Ich habe den Namensabschnitt nur als Pflichtfeld verwendet. Sie können beliebig viele in die „if“ -Anweisung einfügen , um zu testen, ob ein Wert vorhanden ist oder ob er leer gelassen wird. Nun, ich werde es jetzt nur als Namen belassen und dann weitermachen, um das FormReset zu erstellen. Eine neue Funktion an der Unterseite und wir werden dieses FormReset nennen. Die Art und Weise, wie ich die Seite aktualisieren werde, besteht darin, die window.location.reload auszuwählen und dies löscht alle Informationen innerhalb der Visitenkarte und auch das Formular durch eine Seitenaktualisierung. Das retten wir. Nur um einige Informationen in die Visitenkarte hinzuzufügen und klicken Sie dann auf die Schaltfläche Löschen und das sollte Seite neu laden. Lassen Sie uns einfach auf Rechtschreibfehler überprüfen, also FormReset, dann Indexseite. Das muss nur FormReset sein. Also speichern Sie das und das sollte unser Problem beheben und aktualisieren. Fügen Sie dort einige weitere Informationen hinzu. Dann jetzt hoffentlich, wenn wir klicken, Löschen, das löscht das Formular. Das war's. Das ist das Ende dieses Projekts. Ich hoffe wirklich, dass du es schaffst, selbst zum Ende zu kommen oder zumindest einen Teil davon auszufüllen. Fühlen Sie sich frei, dies so viel wie Sie wollen anpassen. Aber für jetzt, vielen Dank, und ich hoffe, Sie haben das Projekt genossen. 41. Vielen Dank: Also ein herzlicher Glückwunsch zum Ende dieses Kurses. Ich hoffe wirklich, dass Sie es genossen haben und viele Dinge daraus gelernt haben. Sie haben in diesem Kurs eine ganze Menge abgedeckt. Wir begannen mit JavaScript-Grundlagen und dem Verständnis Dingen, die Variablen, Strings und Arrays haben. Wir haben uns auch andere Grundlagen wie JavaScript-Funktionen, Umfang und Objekte angesehen. Dann betrachteten wir Mathematik und Daten und wie sie in JavaScript verwendet werden. Wir werden dann die Dinge ein wenig aufbauen und wir werden einen Blick auf Control-Flow und Schleifen werfen, die viele Anweisungen wie switch-Anweisungen und verschiedene Arten von Schleifen enthalten. Wir stellen Ihnen dann JavaScript und das DOM vor, und wir haben einen Blick darauf, wie wir auf Elemente auf einer Webseite zugreifen können und wie wir die Elemente manipulieren können, und wir haben verschiedene Mini-Herausforderungen auf dem Weg zu testen Ihre Fähigkeiten und wir hoffen wirklich, dass Sie es schaffen , mit etwas Kreatives für das endgültige Projekt zu kommen. Das war's also. Das ist also das Ende des Kurses. Ich danke Ihnen sehr. Wenn es Ihnen gefallen hat, hinterlassen Sie bitte eine Rezension. Es würde wirklich anderen Schülern helfen, und hoffentlich sehe ich Sie bald in einem meiner anderen Kurse. 42. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Also nochmals vielen Dank, viel Glück, und hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.