JavaScript für Anfänger:innen: Ein praktischer Leitfaden zur Beherrschung der Grundlagen mit Projekten

1. Einführung in den Kurs: Hallo, da. Willkommen zu den Ergebnissen auf JavaScript für Absolute Bgners Und ich freue mich, Sie durch die Reise in die Welt von JavaScript führen zu dürfen , einer der wichtigsten und beliebtesten Programmiersprachen wenn es um Webentwicklung geht Apropos JavaScript: JavaScript ist überall. Es unterstützt heute dynamische Websites, interaktive Anwendungen und sogar Backends Egal, ob Sie neu im Programmieren sind oder Ihre Fähigkeiten verbessern möchten, dieser Kurs bietet eine Bigna-freundliche , praktische Lernerfahrung, die Ihnen hilft, Javascript von Grund auf zu beherrschen Wer bin ich? Ich bin facil, ein erfahrener Unternehmer und Pädagoge, der bereit ist, das Wissen, das ich in all meinen Karrieren gesammelt habe, mit Ihnen zu teilen in all meinen Karrieren gesammelt habe Lassen Sie uns also anfangen, darüber zu sprechen, was wir behandeln werden. Also werden wir zuerst die Grundlagen von JavaScript behandeln, wo wir verstehen werden, was Jascript ist, wo es verwendet wird, wie man es verwenden kann und wie man die Umgebung einrichtet und all das Dann werden wir die Grundlagen von JavaScript aufdecken, wo wir über Variablen, Operatoren, Ausdrücke, Arrays, Objekte und alles andere sprechen werden Operatoren, Ausdrücke, Arrays, Objekte und Hier werden wir also etwas über die Bausteine von JavaScript lernen über die Bausteine Und dann werden wir praktische Projekte durchführen, in denen wir all das, was wir bisher gelernt haben , vertiefen werden, und wir werden ein paar Projekte erstellen, um zu verstehen, wie die Dinge funktionieren, wenn man von der Lernumgebung zur projektorientierten Umgebung übergeht denen wir all das, was wir bisher gelernt haben , vertiefen werden bisher gelernt haben , und wir werden ein paar Projekte erstellen, um zu verstehen, wie die Dinge funktionieren, wenn man von der Lernumgebung zur projektorientierten Umgebung übergeht von der Lernumgebung zur die Dinge funktionieren, wenn man von der Lernumgebung zur projektorientierten Umgebung Am Ende dieses Kurses verfügen Sie über solide JavaScript-Grundlagen , die es Ihnen ermöglichen, selbstbewusst interaktive Webanwendungen und Webseiten zu erstellen und Ihre Programmierreise fortzusetzen Nun, dieser Kurs ist perfekt für Entwickler aller Niveaus. Egal, ob Sie ein Anfänger sind , der nur JavaScript erkunden möchte und es Schritt für Schritt sehr strukturiert lernen möchte, und es ist auch für Entwickler auf mittlerem und fortgeschrittenem Niveau, die einige der grundlegenden Konzepte von JavaScript auffrischen möchten einige der grundlegenden Konzepte von JavaScript auffrischen der grundlegenden Konzepte von JavaScript Dann können Sie diesem Kurs folgen, da wir in diesem Kurs nicht so häufig Folien verwenden Ich liebe es, auf der ID selbst zu unterrichten, und ich glaube, Softwareingenieure lieben es, an IDEs zu arbeiten und Dinge zu tun, die sie lernen. Also, bist du bereit, deinen ersten Schritt in die Welt von JavaScript zu machen ? Bin ich. Lassen Sie uns eintauchen und gemeinsam mit dem Programmieren beginnen. Wir sehen uns dann im Kurs. 2. JavaScript in Aktion: Was wir jetzt tun werden, ist JavaScript in Aktion zu sehen. Ich würde also empfehlen den Browser Ihrer Wahl zu öffnen. Ich bin hier bei Google Chrome. Sie können sogar Firefox verwenden, wenn Sie möchten. Klicken Sie einfach mit der rechten Maustaste und gehen Sie zur Inspektion. Und hier haben Sie die Möglichkeit, die Konsole zu öffnen. Okay? Sie können die Größe ändern, wie Sie möchten Nun, diese Konsole ist die Browser-Konsole, die eingebaut ist, und hier können wir unsere JavaScript-Anweisungen ausführen Die erste Anweisung, die wir hier ausführen werden, ist also Console Dot Log. Sie können den automatischen Vorschlag sehen und ich werde Hallo Welt sagen. Okay. Etwas wie das hier. Okay, ich mache W Großbuchstaben und hier drüben drücke ich Endo Sie können sehen, dass Hello World auf der Konsole gedruckt wird Okay? Wenn Sie also etwas auf die Konsole drucken möchten, können Sie dieses Statement Console Dot Log verwenden, und es ist Teil von Ja Script. Wir können hier sogar mehr drucken. Ich kann also Console Dot Log sagen und ich kann sagen, ich liebe Jascript Okay, so etwas. Also das wird mir diesen Output geben , den ich liebe. Okay. Ich hätte es mit einem einzigen Code schließen sollen, und du wirst die Ausgabe sehen. Ich liebe JavaScript, okay? Also habe ich es mit einfachem Code geöffnet und versucht, es mit doppeltem Code zu schließen. Deshalb der Fehler, okay? Aber die Behandlung funktioniert absolut einwandfrei. Ich liebe Jar-Skript. Okay? Sie können diese Konsole sogar als Taschenrechner verwenden . Sie können also zwei plus vier sagen und Sie werden sehen, dass sechs ST 16 plus 16 ausgeben. Sie werden eine Ausgabe von 32 SE sehen. Es kann also als Taschenrechner verwendet werden. Sie können die Konsole sogar verwenden , um Warnfelder oder Popup-Boxen anzuzeigen. Und Sie müssen bei der Verwendung dieser Webanwendungen viele Warn-Popup-Felder gesehen haben . Lassen Sie mich Ihnen zeigen, wie Sie das auslösen können. Ich lösche zuerst meine Browserkonsole mit dieser Löschfunktion. Okay? Alles ist gelöscht, oder Sie können sogar mit der rechten Maustaste klicken und Konsole löschen sagen. Okay, das sollte auch funktionieren. Jetzt bin ich hier, ich werde eine Alarmbox einbauen. Also kann ich hier Alarm sagen. Okay. Und ich kann sagen, das ist eine Alarmbox. Okay. Jetzt muss ich das schließen und wenn ich die Eingabetaste drücke, siehst du, dass es sich um eine Warnmeldung handelt. Nun, welche Nachricht Sie auch eingeben oder welche Nachricht Sie hier hinzufügen. Dies ist eine neue Warnbox. Lass mich sehen. Lass mich neue Endkappen machen. Okay. Du wirst sehen, dass das reinkommt als. Hier im Pop. Also, welche Botschaft auch immer du hier weitergibst, sie kommt hier rein. Also ja, so können Sie Jascript-Code in Ihrem Webbrowser ausführen, und das waren einige der Jascript-Anweisungen, die wir haben 3. Software-Tools: Hallo, alle zusammen. Also, um JavaScript auszuführen, werden wir einige Einstellungen auf unserem lokalen Computer vornehmen, richtig? Jetzt können Sie natürlich JavaScript ausführen, indem Sie im Browser mit der rechten Maustaste auf diese Weise klicken und zur Konsole wechseln und hier JavaScript-Behandlungen schreiben. Dies ist jedoch nicht ideal, wenn Sie lange, umfangreiche Skripts für Webanwendungen in Produktionsqualität schreiben möchten . Nun, hier benötigen Sie ein Setup auf Ihrem lokalen Computer. Was wir also tun werden, ist eine IDE zu verwenden. Falls Sie diesen Begriff IDE nicht kennen , steht er für integrierte Entwicklungsumgebung, die Ihnen die Tools bietet um Code zu schreiben und auszuführen. Also werde ich nach Visual Studio-Code suchen , weil wir ihn verwenden werden. Nun, wenn Sie bereits einen Visual Studio-Code auf Ihrem System installiert haben oder wenn Sie wissen, wie man ihn installiert, dann ist das gut. Aber ich gehe davon aus, dass Sie ihn nicht auf Ihrem System installiert haben um den Schülern zu helfen , die sich dieses Prozesses nicht bewusst sind. Also gehe ich zu dieser speziellen Website, code.visualstudio.com Okay? Ein bisschen reinzoomen. Nun, hier, der Screenshot , den Sie sehen, zeigt wie Visual Studio-Code aussieht, okay? Und Sie können sehen, dass es eine Syntaxhervorhebung gibt, die Sie sehen können. Die Benutzeroberfläche wird also in einer anderen Farbe hervorgehoben. Button-Requisiten werden in einer anderen Farbe hervorgehoben. Das sind also alle Vorteile der IDE, okay? Sie können die schöne Ordnerstruktur auf der linken Seite sehen . Unten befindet sich ein Terminal mit der ganzen Farbcodierung und all dem. Es bietet dem Entwickler viele Vorteile. Wenn Sie also nach unten scrollen, können Sie sehen, dass Visual Studio-Code unterstützt. Während ich dieses Video aufnehme, unterstützt es so viele Programmiersprachen, okay? Sie können sogar Erweiterungen hinzufügen. Was sind nun Erweiterungen? Erweiterungen erweitern oder erweitern im Grunde die Fähigkeiten, die Visual Studio-Code standardmäßig bietet. Okay? Also, wenn du etwas Unterstützung für Python hinzufügen willst, okay? Also mehr Unterstützung für Python. Sie können diese Erweiterung also hinzufügen. Wenn Sie Unterstützung für GeucPilot hinzufügen möchten oder KI beim Programmieren verwenden möchten, können Sie Get up Copilot CC plus hinzufügen Sie können sehen, dass es Unmengen von Erweiterungen gibt, und es gibt einen Marktplatz für Erweiterungen, von dem Sie all das herunterladen und installieren können , und das Du kannst dir Git Up Copilot ansehen, ein bisschen von. Es hebt also alles verschiedene Funktionen hervor. Sie können die Farbthemen, Einstellungen und Profile anpassen. Es gibt eine Menge Zeug, okay? Es hat eine wirklich gute Integration mit dem Bewegungssteuerungssystem und all dem Okay? Sie können sich also diese Website ansehen und nachschauen, was sie zu bieten hat. Aber wenn du oben nach oben scrollst, wirst du hier diese Schaltfläche zum Herunterladen für Windows sehen , okay? Wenn Sie jetzt einen Mac oder Linux verwenden, wird Ihnen die Download-Option für Ihr entsprechendes Betriebssystem angezeigt. Oder wenn Sie aus irgendeinem Grund nicht sehen, können Sie zu anderen Plattformen gehen und hier sehen , welche Plattformen alle unterstützt werden. Okay? Ich habe also bereits Visual Studio-Code auf meinem System installiert, also werde ich ihn nicht installieren, aber die Installation ist sehr einfach. Es ist wie jede Anwendung, die Sie auf dem System installieren. Es gibt keine komplexe Konfiguration, die Sie selbst für Mac vornehmen müssen , es ist einfacher, und Sie können hier sehen, dass es mehrere Versionen gibt, wenn und Sie können hier sehen, dass es mehrere Versionen gibt, wenn Sie also einen Intel-Chip verwenden , können Sie diese installieren. Apple Silicon, du hast diesen hier drüben. Und auch für Linux Ubuntu-basierte Systeme haben Sie hier die Möglichkeit, es herunterzuladen und zu installieren. Okay? Jetzt habe ich das definitiv auf meinem System installiert, okay? Also hier habe ich es installiert, wie Sie sehen können. Okay? Also, wenn du es installierst und zum ersten Mal öffnest, wirst du Folgendes sehen. So wird es dich präsentieren. Ihre Ansicht könnte ein wenig abweichen da ich bereits Visual Studio Code verwende, also sehe ich mir die letzten Projekte an, die ich verwendet habe. Also werde ich das einfach schließen, okay? Und hier fragt es mich: Hey, du hast noch keinen Ordner geöffnet. Ja, Sie können Ordner hier in der linken Seitenleiste öffnen, und es wird Ihnen die Baumstruktur angezeigt. Sie können Dateien von hier aus erstellen und verwalten, oder Sie können sogar ein Repository klonen. Und wie gesagt, es hat eine wirklich gute Integration mit den Git of Ocean-Kontrollsystemen. Sie können das also auch nutzen . Ordnung? Nun, ich möchte Sie alle bitten, einfach zu Ihrer Ordnerstruktur zu gehen und einen Ordner zu erstellen, wenn Sie Jascript üben wollen Okay? Also das ist mein Ordner, in dem ich Ja Script üben werde , okay? Und öffne einfach diesen Ordner hier im Visual Studio-Code. Öffnen Sie den Ordner, Sie können Ordner öffnen sagen und Sie können zu dem Ordner navigieren, den Sie gerade erstellt haben. Oder alternativ, Sie sind unter Windows, Sie haben eine Option. Sie können mit der rechten Maustaste klicken. Sie können hier die Option „Mehr anzeigen “ und „Mit Visual Studio-Code öffnen“ sagen. Öffne hier mit Code. Das ist was es ist. Das ist also Visual Studio, was kein Visual Studio-Code ist, es ist anders. Also musst du dir dieses Logo ansehen. Okay? Dieser. Okay? Und wenn du „Öffnen“ sagst, wirst du sehen, dass der Ordner hier geöffnet wird. Okay. Maximiere es. Okay? Du kannst es sehen. Jetzt habe ich zwei Instanzen oder zwei Windows oder Visual Studio-Code hier drüben. Okay? Das ist mein Ordner , den ich mit dem Namen JavaScript erstellt habe. Und hier werde ich all meine Ja-Skriptdateien und alles , worüber ich lernen werde, erstellen Ja-Skriptdateien und alles , worüber . Das war es also auch schon. Ich hoffe, Sie konnten dieses Setup auch erfolgreich auf Ihrem System durchführen. 4. Unser erstes JavaScript-Programm: Jetzt ist es an der Zeit, dass wir anfangen Code in JavaScript zu schreiben Ich hoffe also, dass Sie in Visual Studio Code Open diesen Ordner Ihrer Wahl öffnen konnten , okay, wo auch immer Sie die Ja Script-Programme schreiben möchten Also habe ich diesen Ordner geöffnet, und neben diesem Ordnernamen sehen Sie dieses Symbol namens Neue Datei. Die erste Datei, die wir erstellen werden, wäre eine HTML-Datei. Okay? Also werde ich das als Indexpunkt-HTML bezeichnen. Nun, warum erstelle ich eine HTML-Datei? Das liegt daran, dass wir HTML verwenden werden , um Ja Script zu laden und es im Browser auszuführen. Ja, wir werden Ja Script im Browser ausführen und die Ausgabe sehen. Okay. Hier können Sie also diesen Indexpunkt-HTML sehen und auch notieren, dass Sie hier in Visual Studio Code auch dieses Tag apa sehen, dieses Tag-Symbol, das den Dateityp darstellt, den Sie erstellen. Okay? Jetzt ist diese Datei erstellt. Was ich tun werde, ist Ausruf zu sagen. Okay? In dem Moment, in dem Sie Ausrufezeichen sagen, bietet Visual Studio-Code eine gute Unterstützung für HTML, oder? Ich habe das ständig gesehen. Es wird uns also helfen, einen Standardcode zu generieren , und dafür müssen Sie Ausrufezeichen und Enter drücken und Sie werden also sehen, dass ein Standardcode generiert wird. Du kannst das sehen, okay. Also werde ich das einfach zusammenklappen, indem ich auf dieses Symbol klicke. Und hier kannst du das anpassen. Also werde ich diesen Titel hier als Jascript-Kurs hier drüben bezeichnen , so etwas Und hier drüben kann ich etwas Code einschreiben. Jetzt ist diese Datei nicht gespeichert. Woher weißt du das? Also hier kannst du sehen, wie dieser Punkt erscheint. Wenn Sie damit fertig sind, erscheint ein Kreuz, aber Sie können diesen weißen Punkt neben der Dateispur sehen . Das bedeutet, dass die Datei nicht gespeichert ist. Achten Sie darauf, alle Änderungen, die Sie in Visual Studio Code vornehmen, zu speichern . Wenn Sie dieses Symbol sehen, bedeutet das, dass die Datei nicht gespeichert wurde und Sie die Änderungen, die Sie an der Datei vorgenommen haben, nicht sehen Sie würden ständig aktualisieren und sehen, warum Sie nicht die gewünschte Ausgabe erhalten. Aber tatsächlich haben Sie den Code nicht gespeichert. Alles klar? Also das passiert ziemlich oft, also musst du einfach Kontrolle sagen und du wirst sehen, dass ich sofort weggehen kann, was ich tun würde, ist innerhalb des Körpers, ich werde H eins hinzufügen, okay? Und ich werde JavaScript sagen. Kurs hier drüben. Okay. Ich werde hier auch das Konsolenprotokoll hinzufügen. Okay? Nun, das Konsolenprotokoll ist eine JavaScript-Behandlung. Also, wie werde ich das machen? Also kann ich es nicht in ein HTML-Tag schreiben, okay? Dafür muss ich ein spezielles Tag namens Script-Tag verwenden . Okay? Also hier, nach dem Körper, sage ich Drehbuch. Okay. Und hier sage ich Console Dot Log. Und hier sage ich Hallo Welt, so etwas in der Art. Okay? Also das ist Ja Script, und ich habe es gespeichert. Im Grunde genommen funktioniert das Schreiben von JavaScript in HTML mit Hilfe von Skript-Tags, oder? Was wir nun tun müssen, ist die Ausgabe zu sehen, ob wir das richtig ausführen können . Also werde ich hier mit der rechten Maustaste klicken und im Datei-Explorer Reveal sagen. Okay, das öffnet also den Datei-Explorer. Auf dem Mac wird Reveal im Finder angezeigt. Das öffnet also den Datei-Explorer. Sie können sehen, wie dieser Indexpunkt-HTML erstellt wurde. Was Sie tun können, ist, dies im Browser zu öffnen. Stellen Sie also sicher, dass Sie einen Browser, Ihren Lieblingsbrowser oder Ihren bevorzugten Browser Ihrer Wahl haben Ihren Lieblingsbrowser oder Ihren bevorzugten Browser Ihrer Wahl Öffnen Sie ihn hier und der Ordner wird ebenfalls geöffnet. Und was Sie tun können, ist, diese Datei per Drag & Drop hierher in den Browser zu ziehen und dort abzulegen. Okay. Also, was das bewirken wird, ist diese Datei hier zu öffnen. Sie können sehen, dass dies ein Pfad der Datei ist und Sie können sehen, wie der Ja Script-Kurs hier gezeigt wird. Nun, warum kommt es hierher? Das liegt daran, dass du das in der Headrotax hinzugefügt hast. Sie können mit der rechten Maustaste klicken, Inspizieren sagen, und Sie können zur Konsole gehen und Sie werden Hello World Upper sehen Das ist also das Konsolenprotokoll, das wir hier gezeigt haben, okay? Ich minimiere das hier, und was ich tun würde, ist, dass ich diese Ansicht Seite an Seite hätte, okay, diese Ansicht Seite an Seite hätte, okay, was ich bevorzuge wenn ich kodiere oder wann immer ich Webentwicklung mache, okay? Ich werde also diese Ansicht von Seite zu Seite verwenden, und Sie werden auch eine gewisse Klarheit darüber haben welche Ausgabe Sie erhalten welche Änderungen wir vornehmen und warum sehen Sie diese Ausgabe? Okay. Also egal, welche Änderung du vornimmst, wenn du ein paar weitere Ausrufezeichen hinzufügst, wenn du auf Speichern klickst und wenn du hier aktualisierst, wirst du sehen, dass die Ausgabe übernommen wird Okay? Aber achten Sie darauf, die Datei zu speichern. Okay? Es sollte nicht so sein, als hättest du es nicht gespeichert und du wirst die Ausgabe nicht sehen, du aktualisierst einfach weiter und sagst, warum erhalte ich die Ausgabe nicht? Okay? Stellen Sie außerdem sicher , dass Sie genau die Syntax verwenden, in der ich hier schreibe. Sie können die Konsole sehen. Alles ist klein. Loggen Sie auch, dass alles klein ist. Wenn du versuchst, Großbuchstaben hier drüben zu schreiben , wenn ich das speichere und wenn du aktualisierst, wirst du sehen, dass es nicht definiert ist. Das ist nicht definiert. Wird nicht funktionieren. Es sagt dir auch, wo der Fehler ist, okay? Also werde ich dir hier auch zeigen , wie du Fehler lesen kannst. Sie können den Referenzfehler sehen, Konsole ist nicht definiert und der Fehler ist auf 12. Okay? Also das ist Zeile Nummer 12, richtig? Und das ist die fünfte Position , das sagt es dir. Die fünfte Position. Wenn ich das auf kleines C ändere und wenn ich Refresher sage, sollte es mir die Ausgabe zeigen Okay. Außerdem fügen wir am Ende ein Semikolon hinzu , weil das das Ende der Ja-Skriptanweisung markiert. In Ordnung. Also ja, das ist dein erstes Javascript-Programm, das du geschrieben hast und du hast es mit Hilfe von HTML geladen Also ich hoffe, das war nützlich. 5. Struktur der JavaScript-Datei: Lassen Sie mich hier etwas mehr über Ja Script sprechen. Also hier, wenn Sie sich diese spezielle Datei ansehen, ist eine TrEML-Datei, die ein Ja-Skript enthält, oder? Nun, diese Dinge hier sind als Tags bekannt und für JavaScript ist das als Statement bekannt JavaScript hat keine sogenannten Tags. Tags gibt es in HTML, aber Jascript wird etwas haben, das als Statements bezeichnet wird, und Statement ist nur eine einzelne Codezeile , die ausgeführt werden kann Jetzt werden Sie auch feststellen, dass Jascript-Code innerhalb des Skript-Tags geschrieben ist Wir haben das am Ende der Datei hinzugefügt. Nun möchte ich hier eine Sache hervorheben. Sie können dies von hier aus entfernen und es auch oben in Head hinzufügen. Das ist auch möglich, wenn Sie das speichern und es hier ausführen. Okay. Wenn Sie sehen, dass es läuft, werden Sie sehen, dass die Ausgabe dieselbe ist. Okay? Wenn ich versuche, irgendeine Art von Änderung vorzunehmen, okay, so und wenn ich aktualisiere, wirst du sehen, dass die Ausgabe so kommt. Okay? Es gibt also kein Problem als solches, aber es ist immer eine gute Praxis, dieses Skript-Tag am Ende zu haben, was bedeutet, dass Sie Jascript am Ende laden sollten , nachdem alle HTML-Elemente geladen wurden Nun, dafür gibt es Gründe. Der wichtigste Grund ist die Vermeidung unbekannter Fehler. Das Ja-Skript fügt also, wie wir wissen, unseren Webseiten Verhalten hinzu, was bedeutet, dass es mit den auf der HTML-Seite definierten Elementen funktioniert . Nun besteht die Möglichkeit, dass das Ja-Skript sogar versucht, die Elemente je nach Status zu ändern, oder? Wenn Sie auf eine Schaltfläche klicken, möchte sie vielleicht einige Informationen anzeigen oder etwas mit den Elementen auf der Seite tun . Nun, wenn Sie dieses Skript hier im Kopf innerhalb der Head-Tags hinzufügen . Das Problem ist, dass dieses Skript möglicherweise ausgeführt noch bevor alle HTML-Tags geladen sind. Es besteht also die Möglichkeit, dass Ja Script die gewünschten Tags möglicherweise nicht finden kann und dass ein Fehler auftritt. Es kann also zu Fehlern führen, und aus diesem Grund wird empfohlen, das Skript-Tag immer am Ende der HTML-Datei zu platzieren. Und der Grund ist ziemlich klar, so dass alle HTML-Tags geladen wurden. Okay? Der eine Grund. Ein weiterer Grund ist die Beschleunigung der Website. Wenn also das Skript-Tag oben im Kopfbereich hinzugefügt wird, was passieren würde, ist, wenn es viel Skript gibt, wir haben im Moment nur eine Codezeile, oder? Also ist es in Ordnung. Wenn jedoch viele Skripte geschrieben wurden , kann es eine Weile dauern, bis das Skript ausgeführt oder geladen ist . Okay? Und HTML-Elemente unter dem Skript oder hinter dem Head-Tag würden erst geladen, wenn das Skript vollständig geladen ist, was zu einer langsamen Antwortzeit auf der Webseite führen kann. Und das ist aus Sicht der Benutzererfahrung nicht gut, und aus diesem Grund ist es immer eine gute Praxis, das Ja-Skript am Ende der Seite zu laden , um diese Probleme zu vermeiden Ja Script-Programme können natürlich auch mehrere Anweisungen haben natürlich auch mehrere Anweisungen Ich kann hier eine weitere Codezeile hinzufügen und ich kann Refresh sagen, und Sie werden die Ausgabe hier sehen. Ordnung. Also ja, das sind mehr Informationen über das Jascript-Programm 6. Verbesserung Ihrer Entwicklungsumgebung: Lassen Sie uns nun darüber sprechen, wie Sie Ihre Entwicklungsumgebung verbessern können . Ordnung? Also, was jetzt passiert, ist, dass wir diese HTML-Datei haben. Darin laden wir Jascript und wir haben diesen Jascript-Code im Browser verfügbar Was wir nun getan haben, ist , diese HTML-Datei tatsächlich geöffnet zu haben , um die Ausgabe hier in der Browserkonsole zu sehen , oder Jetzt gibt es bessere Möglichkeiten. Nun, was passiert, ist, wenn Sie hier irgendwelche Änderungen vornehmen. Zum Beispiel füge ich hier noch einen Punkt hinzu. Okay? Wenn ich die Datei speichere, wird diese Änderung hier nicht übernommen. Ich muss eine Aktualisierung durchführen , um die Änderung zu sehen, okay? Wenn Sie ständig Änderungen vornehmen und sie ständig testen, das etwas umständlich sein, und wenn Sie an großen Projekten arbeiten, könnte das irritieren, könnte das irritieren, Dinge können also viel einfacher sein, und es gibt einige gute Tools, die Sie in Visual Studio Code konfigurieren können und die Ihnen das Leben als Entwickler oder Programmierer erleichtern können Ihnen das Leben als Entwickler oder Programmierer Lassen Sie mich Sie hier durch einige Schritte führen, mit denen Sie Ihre Entwicklungsumgebung verbessern können Ihre Entwicklungsumgebung Hier in der linken Seitenleiste sehen Sie also diese Option namens Erweiterungen. Jetzt können Sie in Visual Studio-Code sogenannte Erweiterungen hinzufügen oder installieren , die die Standardfunktionen von Visual Studio-Code erweitern können . Okay? Ich habe also schon ziemlich viele Erweiterungen installiert. Okay? Ich werde über diejenigen sprechen, die ich für Ja Script HTML oder Webentwicklung empfehle, okay Nun, du kannst hier drüben sehen, ich habe diese Erweiterung für Dev-Container, okay? Ich arbeite also auch viel mit Docker. Okay? Also ich habe diese Erweiterung installiert, aber sie wird nicht für die Webentwicklung benötigt, okay? Also werde ich einfach über die sprechen, die es sind. Also diese erste Erweiterung, bei der Sie hier das Tag zur automatischen Umbenennung sehen. Okay? Also, wenn du diese TML-Datei siehst, besteht sie aus einem Tag, okay? Eines ist das öffnende Tag, andere ist das schließende Tag Also, wenn Sie das Tag umbenennen möchten. Also sagen wir, wenn dieser H eins ist, möchte ich, dass dieser H zwei ist. Wenn ich hier also H zwei mache, kannst du sehen, dass das schließende Tag ebenfalls automatisch umbenannt wurde . Wie wird das gehandhabt? Dies wird aufgrund dieser Erweiterung behandelt. Also, wenn ich das hier deaktiviere, okay? Und wenn ich jetzt hierher komme, wenn ich es umbenenne, dann lass mich das ein bisschen zusammenklappen. Wenn ich das jetzt hier in H One umbenenne, funktioniert es immer noch, ich glaube, die Änderungen wurden nicht wirksam. Okay. Aber lass mich das H zwei umbenennen. Okay. jetzt nach dem Neustart der Erweiterungen sehen, Wenn Sie jetzt nach dem Neustart der Erweiterungen sehen, dass, wenn ich das in H two umbenenne , es nicht umbenannt wird Okay? Wenn Sie also an einer großen HTML-Datei arbeiten und sagen wir, wenn Sie dieses Tag umbenannt haben, müssen Sie auch das passende Tag umbenennen, sonst erhalten Sie eine Fehlermeldung. Also, wenn ich das aktualisiere Okay. Es wird kein Fehler ausgegeben, okay, aber die Ausgabe entspricht nicht Ihren Wünschen. Okay. Also könnte das wahrscheinlich in H zwei oder H eins gezeigt werden. Okay? Also das ist nicht das , was du dir wünschen würdest. Idealerweise sollte ein öffnendes Etikett auch ein schließendes Etikett haben. Genau dabei hilft Ihnen dieses Tag zur automatischen Umbenennung. Okay, mir wurde klar, dass ich die Datei nicht gespeichert habe, also speichere ich die Datei einfach und führe eine Aktualisierung durch. Okay. Das ist es also, was Sie mit diesem Tag zur automatischen Umbenennung tun können. Also habe ich das der Einfachheit halber hier installiert. Okay, ich habe das jetzt aktiviert, und wenn ich es in H One umbenenne, speichere ich es einfach. Okay? Dabei hilft dir dieser Autor-Nim-Tag Okay? Hier drüben gibt es eine Beschreibung, die du durchgehen kannst. Okay? Also das ist ein Tag, die Einfärbung von Klammerpaaren Also, was macht diese Erweiterung? Also, wenn du an einer großen Datei arbeitest, okay, dann hast du vielleicht diese geschweiften Klammern , um einen Codeblock zu trennen Jetzt möchten Sie vielleicht die Farbcodierung sehen. Auf diese Weise können Sie die Farbcodierung des öffnenden und des schließenden Paares ermitteln. Sie können es hier im Symbol selbst sehen . Das ist es also, was das macht. Okay? Ich habe einige andere Erweiterungen wie DV-Container, Jango, Talker, einige beziehen sich auf Python, Jupiter-Notebooks, alles klar Dann gibt es noch eine weitere Erweiterung, die als Live Server bezeichnet wird Das ist auch auf meinem System installiert. Sie können also hier nach einer Erweiterung suchen. Also all diese Erweiterungen habe ich vergessen zu erwähnen, falls Ihnen eine der Erweiterungen fehlt, können Sie hier auf dem Markt suchen. Sie können sie auswählen und „Installieren“ sagen. Das ist es. Das ist ziemlich einfach. Okay? Live Server ist also eine Erweiterung, die einen kleinen oder leichten Server Ihre Entwicklungsumgebung einbindet. Okay. Also, wenn du diese Erweiterung installierst, bekommst du dieses Ding hier drüben. Sie können das unten sehen, schalten Sie diese Schaltfläche ein. Wenn ich das deaktiviere und neu starte, verschwindet diese Schaltfläche. Okay, wenn ich das aktiviere, siehst du den Button hier oben. Wenn ich also sage, live gehen , würde mir das einen Live-Server geben. Sie können Port 50 50 sehen. Das hat mir also einen leichten Server auf 5500 gegeben. Es ist nicht 50 50. Es sind 5500. Okay, das ist ein Hafen Und wenn Sie das auf Ihrem lokalen Computer ausführen können, wenn Sie versuchen, darauf zuzugreifen, dann wird die Datei, die Sie haben , auf dem lokalen Server ausgeführt. Sie können das sehen. Es läuft jetzt auf dem lokalen Server. Und wenn ich jetzt versuche, hier irgendwelche Änderungen vorzunehmen , okay? Wenn ich also, sagen wir, ein paar von vier Fragezeichen hinzufüge . Okay. Und ich öffne die Konsole, bevor die Datei speichere, damit ihr alle sehen könnt, was passiert. Okay, Fabricon ist es nicht unhöflich. Wenn ich das speichere, werden Sie sehen dass Sie direkt nach dem Speichern der Änderungen sehen, dass die Änderungen live wiedergegeben werden Es ist also sehr hilfreich. Es ist wirklich praktisch. Sie müssen also nicht immer wieder die Refresh-Taste drücken . Es kümmert sich darum, Ihnen die Ausgabe anzuzeigen , ohne dass Sie eine Aktualisierung durchführen müssen. Die Änderungen, die Sie vornehmen, werden also automatisch neu geladen. Okay? Also es ist wirklich hilfreich, diese Erweiterung Live-Server, ja, ich benutze sie die ganze Zeit. Hübscher. Das ist also ein Codeformat, das Ihnen hilft, Ihren Code zu formatieren Das ist es also, was es tut. Ich habe es hier installiert. Das ist es also. Das war's für HTML - und JavaScript-Code. Das sind die Erweiterungen. Ich habe viel mehr andere Erweiterungen wie Tailwind, Python Okay, ich programmiere also alle möglichen Arten. Sie werden also viele Erweiterungen in meinem Visual Studio-Code finden , und ich lösche sie ständig, installiere sie neu oder installiere die neuen, probiere neue aus, all das Zeug, das ich mache. In Ordnung. Also ja, hier geht es um die Erweiterungen, die Ihnen helfen können, Ihre Entwicklungsumgebung zu verbessern. Ich würde Ihnen also empfehlen, auf einen Live-Server umzusteigen , wenn Sie eine HTML-Datei verwenden , um Ihren JavaScript-Code zu sehen da Sie so Ihre Änderungen in Echtzeit sehen können 7. JS in derselben Datei vs. separat: Jetzt ist es an der Zeit, dass wir verstehen, wie Sie JavaScript skalierbar schreiben können ? Also, was ich mit skalierbar meine, ist, dass wir im Moment JavaScript innerhalb der Skript-Tags schreiben , richtig? Also, wann immer Sie in einem realen Szenario oder in einer produktionstauglichen Anwendung arbeiten einem realen Szenario oder , werden Sie kein zweizeiliges JavaScript haben, oder? Es wäre so, dass Dateien sehr lang sind, zum Beispiel, wenn in einigen Projekten viel Javascript involviert ist . In diesem Fall ist es also nicht gut, Ihr JavaScript auf diese Weise zu schreiben. Es ist am besten, wenn Sie den JavaScript-Code von HTML trennen könnten . Das werde ich dir also zeigen. Was Sie also tun können, ist, was wir hier tun werden, ist, eine neue Ja Script-Datei zu erstellen, und ich werde sie als Indexpunkt Gs bezeichnen . Sie können also den Moment sehen, in dem ich Punkt JS eingegeben habe, Sie können das Dateisymbol hier sehen. Das ist eine JS-Datei, und das ist eine HTML-Datei Dies ist also eine Darstellung durch Visual Studio-Code, anhand derer Sie den Dateityp identifizieren können. Okay? Also, was ich tun werde, ist , diese beiden Codezeilen zu streichen. Ich werde es hierher bringen. Okay. Und wenn ich das jetzt speichere, wirst du keine Ausgabe sehen. Okay, weil es hier kein Ja-Skript gibt, das in die eSTIML-Datei geschrieben oder hier nicht einmal verlinkt ist. Wenn Sie also kein JavaScript in die EstimL-Datei schreiben, können Sie es tatsächlich verlinken und in eine externe Datei schreiben, bei der es sich um eine E-T-JS-Datei handelt, die für Ja-Skript steht. Was ich also tun kann, ist das im Grunde genommen in derselben Zeile zu nehmen und hier ein Attribut hinzuzufügen Es gibt also ein Attribut namens SRC für das Skript-Tag, dem Sie den Dateinamen angeben Okay? Also kann ich Index sagen, und Sie können den automatischen Vorschlag hier sehen, Indexpunkt Q. Das ist also Autovorschlag aus Visual Studio-Code Und ich kann „Speichern“ sagen. Und in dem Moment, in dem du Speichern sagst, siehst du hier drüben, hallo, Old, und es kommt vom Index JS rein Und Sie können hier tatsächlich Änderungen vornehmen, wenn Sie möchten, und sehen, wie die Änderungen hier widergespiegelt werden. Okay? Also ja, das war es auch schon. Nun, eine Sache, die ich hier erwähnen möchte , betrifft den Live-Server. Wenn Sie also den Server schließen möchten, müssen Sie auf diese Schaltfläche klicken. Das wird also diesen Server entsorgen. Und wenn Sie es aktualisieren, dann okay, es wird einfach nicht neu geladen. Du kannst es sehen Und wenn du wieder live gehen willst, kannst du es starten und es wird geöffnet. Richtig? Also, ja, so können Sie den JS-Code vom HTML-Code trennen. 8. Kommentare in JavaScript: Lassen Sie uns jetzt über Commons sprechen. Was sind Commons? Kommentare sind also wie Knoten in deinem Code. Nun, das sind die Anweisungen , die nicht ausgeführt und ignoriert werden, und sie dienen nur als Referenz für Sie Wenn Sie also aus einer anderen Programmiersprache wie Java oder Python kommen , ist es wahrscheinlich, dass Sie dieses Konzept von Commons kennen und wissen, was es ist. In JavaScript gibt es nun zwei Arten von Kommentaren , die unterstützt werden. Einer ist ein einzeiliger Kommentar und der andere ist ein mehrzeiliger Kommentar. Ich kann hier also zwei Schrägstriche haben und sagen, das ist ein einzeiliger Kommentar, ungefähr so Okay? Nun, wenn ich das speichere, hat das buchstäblich keine Auswirkungen auf die Ausgabe, weil es nie ausgeführt wird. Ich kann diese Codezeile sogar kommentieren. Und wenn ich das speichere, wird diese eine Zeile auskommentiert und nicht ausgeführt. Also ja, so können Sie einzeilige Kommentare verwenden. Sie können auch hier im Visual Studio-Code unter Bearbeiten hierher kommen . Sie werden den Kommentar zur Umschaltzeile sehen. Also das ist eine Abkürzung hier drüben. Also die Abkürzung für mich ist Control plus Schrägstrich. Okay. Da ich Windows verwende, kann ich den Cursor auf dieser Zeile halten und Schrägstrich sagen, und Sie können sehen, ich kann zwischen dem einzeiligen Kommentar hin- und herschalten Okay, ich kann sogar den gesamten Codeblock auswählen und sehe Strg und Schrägstrich Nun, wenn Sie auf einem Mac oder Linux arbeiten, kann sich diese Tastenkombination unterscheiden, aber ich zeige Ihnen nur, wie Sie sich die Tastenkombination selbst besorgen können. In Ordnung. Außerdem gibt es etwas, das als Blockkommentar bezeichnet wird, wie Sie hier sehen können. Nun, ich habe dir gesagt, dass es sich um einen einzeiligen Kommentar handelt oder dass er auch als Zeilenkommentar bezeichnet wird. Jetzt gibt es etwas , das als Blockkommentar oder auch als mehrzeiliger Kommentar bezeichnet wird. Okay? Sie können also mehrere Codezeilen auf diese Weise kommentieren, indem Sie diese beiden Schrägstriche in jeder Zeile haben Aber es würde Situationen geben , in denen Sie diesen Weg gehen möchten In diesem Fall können Sie also mehrzeilige Kommentare verwenden. Um also einen mehrzeiligen Kommentar zu machen, schauen wir uns den Screenshot an oder, tut mir leid, nicht den Screenshot, die Abkürzung Sie können also Shift LT und A sehen, oder Sie können diese Option sogar hier auswählen. Sie können also sehen, dass diese beiden Codezeilen, die ich ausgewählt hatte, jetzt in dieser Syntax stehen, was für mehrzeilige Kommentare gilt, und sie werden nicht ausgeführt Wenn ich diese Datei speichere, siehst du buchstäblich keine Ausgabe auf der Konsole Okay? Also das ist ein mehrzeiliger Kommentar Okay, und ich kann das umschalten. Also waren es Control-Shift und E hier drüben. Ups, ich habe einen Fehler gemacht. Was war eine Abkürzung? Also waren es Schicht Old und E. Es tut mir leid. Okay, also ich kann das auswählen und ich kann Shift Old und E auf mein System sagen. Hoppla. Okay, bei mir funktioniert es nicht Schicht alt und A. Ich sollte idealerweise arbeiten. Aber ja, ich weiß es nicht. Shortcut funktioniert aus irgendeinem Grund nicht. Lass es mich noch einmal versuchen, Schicht alt und A. Okay, es hat funktioniert. Wahrscheinlich habe ich es auf der Tastatur nicht richtig gemacht . Okay? Es hat funktioniert. Und ich speichere das, damit du sehen kannst, dass die Warteschlangen voll sind. Okay? Also das ist ein einzeiliger Kommentar, und wenn ich das in eine neue Zeile übernehme und wenn ich hier drüben so etwas sehe, okay? Das sind mehrzeilige Kommentare. Also füge ich diese Zeile hier hinzu. Okay? Also das ist ein mehrzeiliger Kommentar. Okay. Nun, es gibt noch eine weitere Möglichkeit, die Art und Weise, wie Sie kommentieren, zu verbessern, die als Dokumentkommentare bekannt ist, okay? Es wird also auch als Dokumentationskommentare oder Dokumentkommentare bezeichnet Dokumentationskommentare oder Dokumentkommentare und besteht aus Anmerkungen. Okay? Nun, was passiert, ist dass normalerweise eine Menge Code wie Funktionen, Klassen, Objekte im Code erstellt wird, und Sie möchten eine Beschreibung darüber haben welche Art von Parametern jemand, der diese spezielle Funktion verwendet , übergeben soll und warum diese Parameter benötigt werden und all das. Okay? Im Grunde können Sie mit Hilfe von Dokumentkommentaren Anmerkungen verwenden und all diese Informationen spezifizieren Also füge ich hier einfach ein einfaches Beispiel für Diskussionskommentare hinzu, okay? Also hier kannst du sehen, dass wir eine Funktion haben, okay? Wenn Sie sich dieses Konzepts von Funktion und Methoden nicht bewusst sind, machen Sie sich keinen Stress. Aber wenn Sie aus einer anderen Programmiersprache kommen, müssen Sie sich Dinge wie Funktionen, Methoden und allem anderen bewusst sein , oder? Also verwende ich das nur , um dieses Beispiel zu zeigen. Nun, hier können Sie sehen, dass dies ein Kommentar ist. Das ist die Syntax, okay? Und Sie können hier sehen, was diese Funktion im Wesentlichen macht, ist, dass sie zwei Zahlen addiert, und ich habe auch den Parameter angegeben. Also verwende ich hier die Annotation a para. Annotation beginnt mit Ad Derate. Okay? Das ist es also, was Annotation ist. Und ich spezifiziere, dass dies eine Zahl ist und der Name A ist, und das ist die erste Zahl. Und wieder beschreibe ich den zweiten Parameter und dann, was der Rückgabetyp dieser Funktion ist. Wenn Sie nun mit der Maus darauf zeigen, wenn Sie mit der Maus auf diese Funktion zeigen, werden Sie sehen, dass diese Dokumentation tatsächlich angezeigt wird Sie können es in diesem Popup sehen Jeder, der versucht, diese Funktion in einer anderen Datei zu verwenden , kann sehen, was Sie alles geschrieben haben, oder viele weitere Informationen zu dieser speziellen Das bedeutet es, okay? Die Frage ist, wenn Sie sich die Syntax ansehen, werden Sie sich ein bisschen Sorgen machen, Sie werden sagen: Hey, ich muss diese Sternchen in jeder Zeile hinzufügen . Die Antwort lautet also Das wird automatisch für Sie generiert. Was Sie also tun können, ist, einen Schrägstrich zu verwenden und Sie können hier zweimal Sternchen verwenden. Wenn Sie also zweimal Asterix hinzufügen, weiß die IDE, dass Sie Kommentare im Doc-Stil hinzufügen möchten , und Sie können tatsächlich Dinge hinzufügen, die Sie benötigen. Okay? Und du kannst sie nutzen, du kannst die Anmerkung hier benutzen. Du kannst sehen. Okay? Wenn Sie jetzt die Eingabetaste drücken, wird ein neuer Stern hinzugefügt Okay, Sie müssen sich also nicht darum kümmern, es in jeder Zeile hinzuzufügen Okay. Also das ist der Grund, warum Leute ID benutzen. Das ist ein weiterer Grund. Okay. Du kannst all das, was wir machen, auch in Notepad machen, aber du wirst keinen Zugriff auf all diese Funktionen bekommen , weißt du, diese Vorschläge und die automatische Generierung von Sternchen und all das wird in Notepad nicht passieren, und das ist der Grund, aber du wirst keinen Zugriff auf all diese Funktionen bekommen, weißt du, diese Vorschläge und die automatische Generierung von Sternchen und all das wird in Notepad nicht passieren, und das ist der Grund, warum Leute IDs verwenden Ein weiterer Anwendungsfall für die Dokumentation von Code auf diese Weise ist morgen, wenn Sie eine EPA-Dokumentation generieren möchten Nehmen wir an, Sie haben eine EPI in JavaScript oder eine Bibliothek in JavaScript geschrieben JavaScript oder eine Bibliothek in JavaScript und möchten eine Dokumentation dafür generieren Sie können also die verfügbaren Tools nutzen . Es gibt externe Tools wie zum Beispiel ein Tool ist Jstok drei. Okay? Und Sie können das nutzen und die Dokumentation generieren. Und die Dokumentation wird damit generiert. Wenn Sie das also wie alle Funktionen und alle EPIs hinzugefügt haben , was auch immer Sie suchen müssen, erhalten Sie die Dokumentation, die Sie mit Ihren Frontend-Entwicklern oder mit wem auch immer Sie sie teilen möchten, teilen können mit Ihren Frontend-Entwicklern oder mit , okay? Nun möchte ich Sie auch fragen, ob Sie mehr über diese Art der Dokumentation von Dingen erfahren möchten mehr über diese Art der Dokumentation von Dingen Ich möchte Sie bitten, auf diese Website Jsto Dot App zu verweisen diese Website Jsto Dot Okay. Und das ist im Grunde Standard, würde ich sagen, oder Stil, um Ihren Jascrit-Code zu dokumentieren Und wenn Sie das hier sehen, werden Sie hier eine Liste mit mehreren Anmerkungen oder mehreren Tags sehen mehreren Anmerkungen oder mehreren Tags Sie können sehen, dass wir Param verwendet haben , was Sie irgendwo hier sehen sollten. Okay? Du kannst Param sehen. In Ordnung. Und es gibt viele Dinge , die Sie nutzen können. Wenn Sie darauf klicken, erhalten Sie Zugriff auf weitere Informationen darüber, wie sie verwendet werden können. Okay? Und ja, das ist es. Sie können hier auf der rechten Seite oben klicken und auch zu ihrem Github-Repository gehen , um mehr zu erfahren. Okay? Also ja, hier geht es um GS-Aktien, die du dir genauer ansehen kannst , wenn du daran interessiert bist, okay? Aber ja, hier geht es um Kommentare, und ich werde das hier vorerst loswerden. Ordnung. Also ich hoffe, du konntest mir folgen, und ich hoffe, das war nützlich. 9. JavaScript mit Nodejs: Hey, was ist los, Leute. Lassen Sie mich zeigen, wie Sie Node Gus verwenden können , um Ihren Jar-Script-Code auszuführen. Bisher haben wir unser Jar-Skript direkt im Browser selbst ausgeführt , und hier verwende ich VS-Code mit Live-Servererweiterung, und ich benötige eigentlich keine Erweiterung und ich benötige eigentlich keine Erweiterung außer für Live-Reloads, aber ja, Live-Reloads machen mir das Leben einfach bequemer, wissen Sie, als Entwickler können Sie diese Schätzdatei sogar direkt in der Browser und die Ausgabe in der Konsole sehen Aber Sie müssen bei jeder Änderung, die Sie vornehmen, jedes Mal eine Aktualisierung durchführen, was meiner Meinung nach nicht praktisch ist. Also, was ist NodeJS, NodeJS bietet eine Laufzeitumgebung Wenn Sie also einfach NodeJS googeln, kommen Sie vorbei, oder Sie werden diesen Link nogs.org sehen , der Link zur , Nun, wie NodeJS ins Bild kam. Was also passiert ist, ist ein Ingenieur namens Ryan Dahl, der den V-8-Motor genommen hat Von Google, damit Ja Script in Google Chrome ausgeführt werden kann. In Google Chrome sehen Sie also, dass Ja Script ausgeführt wird, und zwar mit Hilfe von acht Engines. Also hat Ryan einfach diese Vet-Engine genommen und NodeJS erstellt. NodeJS ist also im Wesentlichen diese Acht-Engine, mit der Sie Ja Script überall ausführen können. Alles klar? Nun, um das zu bekommen oder NodeJS ohne die Hilfe von Oh, sorry, Nod Js auszuführen NodeJS ohne die Hilfe von Oh, sorry, Nod Wenn Sie also Ja Script ohne die Hilfe von Browsern ausführen möchten , müssen Sie Nojs auf Ihrem System installieren Richtig. Und Sie können einfach auf diese Website kommen. Sie können entweder zum Herunterladen gehen oder Sie werden diesen Download-Link hier auf der Homepage sehen . Okay? Klicken Sie einfach auf diesen Download-Button und es wird auf Ihr System heruntergeladen. Oder Sie können auch zu Download gehen und die Version auswählen. Achten Sie darauf, die neueste Version auszuwählen. Welches Betriebssystem du verwendest, okay, und hol es dir einfach auf dein System. Sie können es also sogar mit diesen Befehlszeilenprogrammen installieren , okay? Oder Sie können auch ein vorgefertigtes Installationsprogramm haben. Okay, es gibt also verschiedene Installationsoptionen. Ich würde den Installer empfehlen. Sie sollten den Installer verwenden, also laden Sie ihn einfach herunter und führen Sie ihn aus. Es ist also ziemlich einfach zu installieren. Es ist wie jede andere Software , die Sie normalerweise auf Ihrem System installieren würden. Alles klar? Nun, sobald Sie mit der Installation fertig sind, werde ich Ihnen die Installationsschritte nicht zeigen. Es ist ziemlich normal. Gehen Sie also einfach zum Terminal oder zu einem beliebigen Terminal außerhalb von Visual Studio-Code wenn Sie Ihr natives Betriebssystem-Terminal bevorzugen möchten . Das können Sie auch tun. Aber da ich Visual Studio-Code verwende , hat er eine eingebaute Terminalfunktionalität, die mir helfen wird, dieses Terminal hier zu öffnen. Okay? Jetzt können Sie im Terminal den Befehl Node Hyphen ausführen , der tatsächlich in der Node-Version gedruckt wird , die Sie auf Ihrem System haben Es ist also sehr wahrscheinlich , dass eine andere Sohnnummer gedruckt wird hier eine andere Sohnnummer gedruckt wird, je nachdem, wann Sie sich dieses Video ansehen Aber wenn Sie eine Sohnnummer drucken lassen, ist das völlig in Ordnung, solange sie gedruckt wird. Okay, sie sollte gedruckt werden. Andernfalls gibt es ein Problem mit der Nodejs-Installation auf Ihrem System Entweder wurde es nicht richtig installiert oder es ist überhaupt nicht installiert Okay? Also vor der Installation oder vor dem Herunterladen würde ich Ihnen auch empfehlen, diesen Befehl auszuführen und zu überprüfen, ob der Knoten auf Ihrem System existiert, oder? Es existiert also auf meinem System. Ich weiß, dass ich es früh installiert habe. Sobald der Knoten existiert, würde ich das löschen, ich sage NP oder ich sage Knoten hier. Das ist also ein Befehl, und ich würde den Dateinamen für die Ja Script-Datei übergeben . Dieser Indexpunkt chg. Bevor Sie diesen Befehl ausführen, stellen Sie jedoch sicher, dass Sie sich im richtigen Verzeichnis befinden Also werde ich mein Verzeichnis hier überprüfen. Moment bin ich in diesem Verzeichnis, und das ist ein Verzeichnis, in dem sich auch meine Ja Script-Datei befindet. Okay? Also werde ich hier Node sagen. Und ich werde Indexpunkt Gs sagen. Und wenn ich Enter sage, siehst du die Ausgabe hierher kommen, okay? Mit diesem Ansatz können Sie also das Terminal verwenden und benötigen die Browserkonsole hier nicht , okay? Und du brauchst nicht einmal den Live-Server, oder? Im Grunde schreibst du hier irgendeinen Code , der einfach JavaScript ist, und du siehst wie er auf der Konsole so ausgeführt wird. Okay? Es wird keine TML-Datei, kein Live-Server oder keins von beidem benötigt. Der Browser auch, okay? Weil Sie jetzt Ja Script außerhalb des Browsers ausführen . Ich habe erklärt, was Node JS ist und wie es dazu kam. Okay? Also benutzt du NodeJS hier drüben Aber ich möchte euch allen diese Methodik nur zeigen, okay? Ich werde das nicht persönlich verwenden, okay, weil ich Ihnen zeigen möchte, wie Ja Script mit HTML funktioniert. Also bleiben wir bei dieser Methode. Aber ja, ich wünschte , du würdest auch die anderen Methoden kennen. Und deshalb habe ich beschlossen , es dir zu zeigen. Ordnung, ich hoffe, Sie konnten mir folgen, und ich hoffe, das war nützlich 10. DOM-Manipulation mit JavaScript: Lassen Sie uns über Dom-Manipulation sprechen. Nun, was meinst du mit Doom-Manipulation? Nun, wenn Sie über JavaScript sprechen, müssen Sie von diesem Begriff namens Dom gehört haben Jetzt steht Dom für Document Object Model. Wenn Sie nun eine Webseite im Browser anzeigen, wird sie in eine Struktur umgewandelt, die auf der Webseite angezeigt wird. Und diese Struktur ist das, was als Dokumentobjektmodell bekannt ist , oder? Jetzt kann JavaScript mit diesem Dom interagieren und ihn sogar verändern. Das ist die Stärke von JavaScript. Wenn wir sagen, dass Ja Script den Webseiten Verhalten hinzufügt, ist das die Fähigkeit, die es mit sich bringt. Es kann also mit dem Dom interagieren und ihn sogar verändern. Jetzt zeige ich Ihnen nur einige Möglichkeiten, wie es Dinge von Ja Script selbst ändern kann, okay? Also hier haben wir diesen Titel für den JavaScript-Kurs, okay? Hier drüben siehst du H one Javascript Cure. Also werde ich hier wahrscheinlich ein PTAC hinzufügen Okay, sagen wir, es ist ein P-Tag. Ich werde nichts hinzufügen. Ich füge eine ID hinzu, okay? Und ich sage, das ist der Name hier drüben, okay? Also habe ich ein P-Tag hinzugefügt und ihm ein Attribut namens ID gegeben, das den Wert name hat. Okay? Also, warum habe ich ihm einen Ausweis gegeben? Da wir von Ja Script aus auf dieses P-Tag und auf jedes beliebige Tag aus HTML zugreifen möchten , sollte es von Jascript anhand einer Kennung abgerufen Und ID ist diese eindeutige Kennung. Wenn Sie also mit der Maus darauf zeigen, werden Sie sehen, dass sie eine eindeutige Kennung definiert, die im gesamten Dokument eindeutig sein muss Das ist also das gesamte Dokument, und es sollte einzigartig sein damit Ja Script es richtig aufnimmt Okay? Also hier, was ich tun werde, ist, dass ich zuallererst, wenn du das aktualisierst, siehst du, dass es hier keine Ausgabe gibt , weil wir buchstäblich nichts hinzugefügt haben, oder? Das ist ein MTP-Tag. Also hier kann ich sagen, dass Dokument Punkt für Punkt Element für ID erhält. Okay? Also, wir sehen aus dem Dokument, finde dieses Element anhand der ID. Nun, nach welchem Element fragen wir? Okay? Also fragen wir nach einem Namen. Das ist der Name unseres Elements hier drüben. Okay? Jetzt kann ich von hier aus auf sein Eigentum zugreifen. Ich kann also sagen, dass innerer Text gleich ist, ich kann Hallo hier drüben hinzufügen, so etwas. Okay. Und ich füge ein Semikolon hinzu und speichere das Jetzt siehst du Hallo hier drüben. Okay? Also dieses Hallo wird mit Hilfe von ChavScript in das HTML-Dokument oder in den HTML-Code eingefügt. Sie können sehen, dass dies die Codezeile ist, die das tut Okay? Und es ist auch ziemlich einfach. Wir sagen Dokument oder aus dem Dokument, holen Sie sich dieses Element anhand der ID, die das Element ist. Also musst du hier den Namen eingeben. Okay und du kannst es hier sehen. Dieses Get-Element nach ID gibt zurück oder verweist auf das erste Objekt mit dem angegebenen Wert des ID-Attributs. Das ist es, was es durchgeht. Und dann sehen wir den inneren Text, okay? Also modifizieren wir den inneren Text hier und fügen dort Hallo hinzu. Okay? Also das ist es, was wir tun, in Ordnung. Jetzt zeige ich Ihnen noch ein paar Beispiele. Also, was ich tun werde, ist hier, also innerhalb dieses HTML-Codes, was ich tun kann, ist, dass ich hierher kommen kann. Ich habe dieses P-Tag. Ich kann dieses P-Tag in ein H-Tag ändern, damit es besser sichtbar ist. Okay? Die Größe ist größer. Jetzt hier drüben, was ich tun werde ist, dass hier Hallo angezeigt wird. Okay. Ich kann wieder sagen, dass Dokument Punkt für Punkt Element für ID erhält, okay? Ich hole mir dieses Element, dessen Name hier drüben ist, okay? Und dann kann ich Tot On Click sagen oder ich kann Tout Innerer Text sagen, okay? Oder 1 Sekunde Lassen Sie mich hier auch einen Button hinzufügen. Okay? Ich habe das Hinzufügen eines Buttons verpasst, also füge ich hier einen Button hinzu. Was wir also tun werden, ist das, was ich zu zeigen versuche , ist, mit einem Klick auf diese Schaltfläche zu ändern, den Text zu ändern. Taste. Okay. Und das ist nur ein Button mit der Textänderung hier drüben. Das kannst du sehen. Ich werde das nur ein bisschen minimieren. Okay. Also statt des Namens nehme ich Wechselgeld. Also, was war die ID, es ist die Schaltfläche „Text ändern“. Ich gebe es einfach hier her. Okay? Und dann sage ich Punkt bei Klick auf diesen Button. Okay. Sie können das sehen, wenn Sie hier klicken. ich auf diese Schaltfläche klicke, muss ich nur eine Funktion haben. Okay? Das ist eine Funktion und der Funktionsstatus. Ups. Okay, also ich habe das geklärt und hier drüben, ein paar lockigen Lobeshymnen, okay, ich werde sagen, was passieren soll, wenn Sie auf diese Schaltfläche klicken Okay? Wenn Sie also auf diese Schaltfläche klicken , sollte sich dieser Text ändern. Also werde ich diese Zeile hierher kopieren weil das die Zeile ist, die uns hilft, den Text zu ändern, und ich kann sagen, Hallo, ich kann hier nochmal Hallo sagen, so etwas in der Art. Okay. Also ich hoffe, das macht Sinn. Was wir hier versuchen zu tun. Alles klar. Wir sagen eigentlich, dass Dokument Punkt für Punkt Element für ID erhält. Wir bekommen dieses Element. Das ist ein Knopf. Und wenn Sie auf diese Schaltfläche klicken, sagen wir, führen Sie diese Funktion aus. Was sind Funktionen, falls Sie sich dessen nicht bewusst sind, Funktionen sind nichts anderes als Codeblöcke , die für eine bestimmte Aufgabe entwickelt wurden. Und die Aufgabe, die wir hier versuchen , ist einfach den Text eines bestimmten Elements hier drüben zu ändern , und dieses spezielle Element ist ein H-One-Tag, okay? Also bekommen wir das H-One-Tag und wir ändern den inneren Text wieder in Hallo. Richten Sie das mit einem Semikolon aus. Das spare ich mir Und wenn du jetzt Veränderung sagst, wirst du wieder Hallo sehen. Okay? Also das ist eine Macht von JavaScript, okay? Sie können sehen, wie mächtig es ist. Wir haben gerade einen Onclick-Listener hinzugefügt, und mit Hilfe der Funktion können wir den Namen tatsächlich aktualisieren Oder ich sollte sagen, dass wir den Namen einfach nicht aktualisieren Wir ändern tatsächlich ein bereits vorhandenes Element oder ein Tag auf der Seite. Okay? Das ist also eine Macht von JavaScript , die Sie spüren können. Es geht also nicht darum, den Text zu ändern, sondern Sie können die Stile sogar im Handumdrehen aktualisieren. Okay? Und um das zu demonstrieren, nehmen wir an, wenn ich auf Ändern klicke und ich auf Ändern klicke, möchte ich die Hintergrundfarbe eines Elements in etwas anderes ändern , ich kann das sogar mit JavaScript tun. Also werde ich diese Zeile einfach hier duplizieren. Und hier drüben, sagen wir, ich möchte den Stil dieses bestimmten Elements in den Stil von Rot ändern dieses bestimmten Elements in den , sagen wir zum Beispiel. Ich kann also sagen, wenn ich dieses bestimmte Element habe, kann ich statt des inneren Textes den Stil sehen, alles, ich kann den Hintergrund sehen Sie können sehen, dass es so viele, so viele Eigenschaften gibt die Sie Zugriff haben, okay? Sie haben hier auch Zugriff auf die Textfarbe. Okay. Keine Textfarbe. Das tut mir leid. Es ist nur die Farbe. Okay? Also, wir sprechen über Hintergrundfarbe, also nehme ich hier einfach die Hintergrundfarbe, und hier kann ich Rot sagen. Und ich werde sehen, ob das ist. Wenn Sie jetzt auf Ändern klicken, sehen Sie, dass sich der Text ebenfalls geändert hat und die Hintergrundfarbe jetzt rot ist. Wenn Sie möchten, können Sie sogar die Farbe und die Textfarbe in Weiß ändern . Ich kann diese Zeile einfach duplizieren und ich kann sagen, dass Farbe weiß sein kann. Okay. Und du kannst sagen, hier drüben, oder? So weiß, weil Schwarz auf Rot für mich nicht so gut aussah. Okay, meine Präferenz. Aber das ist mit JavaScript möglich. Sie können sehen, wie HTML-Elementen eine Menge Verhalten hinzugefügt werden kann , und eine statische HTML-Seite hat jetzt Verhalten und Dinge, die sich dynamisch auf die Ereignisse aktualisieren , die Sie auf der Webseite ausführen, okay? Ich hoffe, Sie konnten dem folgen, und ich hoffe, das war hilfreich. 11. Variablen in JavaScript: Lassen Sie uns anfangen darüber zu sprechen , was eine Variable ist. Wenn Sie nun aus einer anderen Programmiersprache kommen , ist es sehr wahrscheinlich , dass Sie Variablen als Konzept kennen. Eine Variable ist wie eine Aufbewahrungsbox, in der Sie eine Information aufbewahren können , um sie später zu verwenden. Nun, was bedeutet das? Nun, wenn Sie große Programme in einer beliebigen Programmiersprache erstellen, ist es sehr wahrscheinlich, dass Sie Informationen speichern möchten . Wenn Sie beispielsweise einen Taschenrechner erstellen, möchten Sie möglicherweise Zahlen und das Ergebnis speichern , damit Sie es dem Benutzer anzeigen können. Möglicherweise möchten Sie auch Zahlen speichern. Der Grund dafür ist , dass Sie Berechnungen mit diesen Zahlen durchführen möchten , oder? Vielleicht möchten Sie es irgendwo speichern, und diese Zahlen müssen für Sie zugänglich sein, oder? Hier kommt also das Konzept der Variablen ins Spiel. Es ermöglicht Ihnen, die Informationen während der Ausführung des Programms zu speichern . Das sagt also die Definition. Eine Variable ist wie eine Aufbewahrungsbox. Eine Aufbewahrungsbox, weil Sie damit Informationen speichern können, oder? Im nächsten Teil erfahren Sie also, wo Sie die Informationen aufbewahren können , damit sie sie später verwenden können, oder? Sie können es sich als ein Etikett vorstellen , das Sie auf etwas kleben, an das Sie sich erinnern möchten. Stellen Sie sich also dieses Feld hier vor und nehmen wir an, Sie haben hier ein Feld mit dem Namen oder dem Namen. Anstelle eines Labels sehen Sie hier einen Namen. Und in die Schachtel schreibst du den Namen Alice. Wenn Sie jetzt den Namen Alice verwenden möchten, können Sie einfach auf das Namensfeld verweisen und es verwenden, anstatt jedes Mal Alice einzugeben. Nun, das ist ein sehr einfaches Beispiel. Natürlich können Variablen auch eine Menge komplexer Dinge speichern , wie Sätze und so, die Sie während der Ausführung des Programms verwenden können , oder? Jetzt ist das Erstellen einer Variablen in JavaScript ziemlich einfach. Also werden wir unsere erste Variable erstellen, okay, und wir werden sehen, wie wir sie nutzen können Lassen Sie uns jetzt mit der Erstellung einer ersten Variablen beginnen. Ich werde sagen, wie Sie Variablen in JavaScript erstellen und den Variablennamen hinzufügen , den Sie haben möchten. Nehmen wir an, ich möchte die Anzahl speichern , um etwas zu zählen. Ich habe diese Variable namens count erstellt. Nun, nach dieser Anweisung, wenn ich das Programm speichere, habe ich tatsächlich eine Variable erstellt, aber ich verwende sie nicht wirklich. Deshalb sehe ich in der Ausgabe nichts, oder? Jetzt kann ich Console Dot sagen, mich hier anmelden und ich kann sofort die Variable drucken oder verwenden Ich benutze es also, ich drucke es einfach gerade aus. Okay, ich führe keinerlei Operationen mit den Variablen durch. Also werde ich das speichern und Sie werden sehen undefined hier gedruckt wird. In dieser Variablen ist also nichts enthalten. Sie können sich also vorstellen , dass die Schachtel, auf der Sie das Etikett haben, keinerlei Informationen enthält. Warum? Weil Sie ihm keine Informationen zugewiesen haben. Sie können also Informationen auf diese Weise zuweisen, sodass Sie sagen können, dass die Anzahl hier gleich Null ist. Und wenn Sie das speichern, werden Sie sehen dass Null auf der Konsole gedruckt wird, oder? Sie können diesen Code viel übersichtlicher gestalten , indem Sie diese beiden Anweisungen kombinieren Das ist also die Deklaration, und das ist der Initialisierungsteil der Variablenerstellung Initialisierungsteil der Variablenerstellung Also was ich tun kann ist, dass ich diese beiden tatsächlich kombinieren kann , okay? Also lass mich die Rücktaste drücken und lass mich das kombinieren, okay, so etwas Wenn ich das jetzt speichere, wird die Ausgabe dieselbe sein. Ich werde mich nicht ändern. Aber im Moment habe ich statt drei Codezeilen zwei Zeilen. So können Sie also Variablen erstellen und verwenden. Natürlich ist die Verwendung, die ich hier gezeigt habe , ziemlich einfach. Ich drucke nur die Variable. Okay? Und Sie können es während der Ausführung des Programms beliebig oft verwenden. Es liegt ganz bei dir. Du kannst also hier drüben sehen, oder? Und Sie können es sogar in arithmetischen Operationen verwenden. Also ich kann hier Console Dot Log sagen, und ich kann hier Zählen plus zehn sagen Sie können die Ausgabe von zehn Basen sehen. Okay. Nun, wenn die Anzahl zehn ist, sehen Sie 1010, zehn werden gedruckt und Sie können sehen, dass 20 Basen ausgegeben werden. Sie können sogar den Wert der Variablen ändern. Also hier, irgendwo in der Mitte der Angaben, kann ich sagen, dass die Anzahl zum Beispiel gleich 40 ist Okay. Und ich kann das speichern und du kannst sehen, dass hier dreimal zehn ist, und dann ist es 40, 40, 50, richtig? 50, weil ich zehn hinzufüge. Das ist also die einfachste Erklärung für Variablen. Um ein paar Punkte wegzunehmen: Eine Variable ist wie eine Aufbewahrungsbox, in der Sie die Information , die Sie später verwenden möchten, aufbewahren oder speichern können. Sie können es sich als ein Etikett vorstellen, das Sie auf etwas kleben, an das Sie sich erinnern möchten, oder? Also hier erinnere ich mich an Count. Ich speichere den Wert von count und verwende ihn tatsächlich während der Ausführung des Programms. Die Variablenerstellung umfasst zwei Schritte. Zuerst ist der Deklarationsteil und dann der Initialisierungsteil, richtig? Jetzt kombiniere ich hier Initialisierung und Deklaration zu einem, okay? Und Sie können, äh, Variablen während der Ausführung des Programms so oft verwenden , wie Sie möchten, Sie können den Wert einer Variablen sogar so oft neu zuweisen , wie Sie Also kann ich das sogar wieder neu zuweisen. Statt 40 kann ich das, sagen wir, 80 machen und ich kann es speichern Sie werden die Änderung in der Ausgabe sehen. Okay? Also das sind Variablen für dich, und ich hoffe, das war ziemlich klar und die einfachste Erklärung. 12. Variablennamen: Jetzt ist es nicht so, dass Sie in einem Programm nur eine Variable erstellen können. Sie können in einem Programm so viele Variablen erstellen , wie Sie möchten. Wenn ich also, sagen wir, einen Zähler hier drüben speichern möchte , Zähler ist fünf, kann ich das tun und ich kann ihn überall im Programm verwenden. Am Ende des Programms kann ich Console Dot Log sagen und ich kann den Wert ausdrucken. Hoppla. Es tut mir leid Sie können den Wert des Zählers hier ausdrucken. Okay. Und Sie werden sehen, dass fünf gedruckt werden. Nun, wenn es etwas gibt, das aufgrund von Variablen eine Menge erzeugen darf, können Sie in den Programmen so viele erstellen , wie Sie möchten, okay? Wenn es also so etwas gibt, dann ist es wichtig, dass die Erstellung dieser Dinge durch Regeln geregelt wird, oder? Ähnlich wie bei Variablen gibt es einige Regeln, die Sie bei der Erstellung und Benennung von Variablen beachten müssen . Jetzt gibt es also einige Regeln, nicht viele, aber ein paar Regeln, die Sie bei der Verwendung von Variablen beachten sollten . Nun, Sie sollten diese Regeln nicht auswendig lernen, aber im Allgemeinen werden Sie sie mit etwas Übung beherrschen, oder? Und wenn Sie eine moderne ID wie Visual Studio-Code verwenden, stellen wie Visual Studio-Code verwenden, die IDs auch sicher, dass sie auf Fehler hinweisen , die Sie machen oder von der Regel abweichen Okay? Wenn Sie also versuchen, eine Variable zu benennen , die nicht erlaubt ist, dann helfe ich Ihnen auch dabei , das Problem hervorzuheben. Alles klar? Also werden wir eins nach dem anderen über Regeln sprechen. Die wichtigste Regel, die ich hier auf dem Bildschirm habe, lautet also, dass Variablennamen mit einem Buchstaben, Dollar oder einem Unterstrich beginnen müssen Dollar oder einem Unterstrich Okay. Sie können also einen Variablennamen haben. Also lass mich das ein bisschen klären, okay. Also werde ich das alles einfach loswerden, okay? Ich werde einfach alles sauber halten. Also hier beginnt diese Variable tatsächlich mit einem Buchstaben, okay? Sie können Variablen haben mit etwas wie diesem beginnen. Okay? Das ist ein gültiger Variablenname. Okay? Sie können eine Variable namens underscore-name hier drüben haben , sie können hoch sagen Okay. Das ist auch gültig. Das sind also alles gültige Variablennamen. Jetzt können Sie keinen Variablennamen verwenden, der mit einem Buchstaben beginnt. Sie können hier also einen Namen sagen. Das ist nicht gültig, okay? Wenn du das versuchst, bekommst du eine Fehlermeldung. Sie können sehen, wie ich bereits erwähnt habe, dass IDs Ihnen helfen. Sie können sehen, es ist so, als würde man sagen identifizieren Sie sich, es ist nicht in der Lage, das zu bekommen, was Sie versuchen. Okay? Also, warum würdest du eine Variable so benennen wollen? Ein Name macht keinen Sinn, oder? Das ist also nicht erlaubt. Ich kommentiere das einfach aus, okay? Das ist also eine der Regeln, die du beachten solltest. Und wenn Sie sich nicht daran erinnern, machen Sie sich darüber natürlich keine Sorgen, denn moderne IDs, wie ich schon sagte, wenn Sie irgendeine Art von moderner ID verwenden, helfen Ihnen die IDs dabei, jede Art von Abweichung von den Regeln zu lokalisieren , oder? Das ist also Regel Nummer eins. Regel Nummer zwei besagt nun, dass es nach dem ersten Zeichen Buchstaben, Ziffern, Dollar und Unterstriche enthalten kann , Ziffern, Dollar und Unterstriche . Okay? Also kannst du variabel sein. Sie können also keine Variable namens user haben. Das ist nicht erlaubt. Ups. Also hat es die Benutzeraktivierung aufgenommen Okay. Sie können keine Variable namens user haben, oder so, oder? Das ist nicht erlaubt, weil es mit einer Zahl beginnt. Sie können jedoch eine Variable mit dem Namen „Benutzer eins“ haben. Das ist erlaubt, weil hier die Zahl am Ende oder nach dem ersten Zeichen steht . Sie können auch eine Zahl nach dem ersten Zeichen angeben. Okay? Das ist auch erlaubt. Jetzt können Sie sogar Dollar haben, also können Sie hier Dollar haben , oder Sie können auch einen Unterstrich verwenden Jetzt ist ein Unterstrich hilfreich, wenn Sie zwei Wörter trennen möchten Wenn ich also einen ersten Unterstrichnamen haben möchte, kann hier der Unterstrich verwendet Okay? Also ja, das ist die zweite Regel, die besagt, dass die Variablennamen, nicht Sie, Variablennamen Buchstaben, Ziffern, Dollar und Unterstriche nach dem ersten Zeichen enthalten können Ziffern, Dollar und Unterstriche nach dem ersten Zeichen Nun, die dritte Regel besagt, dass Variablennamen schlüsselabhängig sind, okay? Das heißt also, wenn Sie zwei Variablennamen haben, lassen Sie mich sagen, wenn es der Name hier drüben ist, okay, der Name ist, sagen wir, Alice hier drüben. Ups. Wenn es Alice hier ist und sagen wir, Sie haben noch einen Variablennamen , nämlich Name hier drüben. Okay, und es ist Tom, sagen wir. Das sind also zwei verschiedene Variablennamen, und ich kann sie dir zeigen. Sie können also Console Dot Log sagen, und Sie können den Namen hier drüben ausdrucken. Okay. Und du kannst Console, Dot Log sagen und du kannst hier Name sagen, ungefähr so. Okay. Wenn du die Ausgabe siehst, wirst du Alice und Tom als Ausgabe sehen. Okay, das ist die Regel Nummer drei, bei der bei Variablennamen Groß- und Kleinschreibung unterschieden wird. Die nächste Regel besagt , dass Variablennamen kein reserviertes Schlüsselwort verwenden dürfen. Was sind nun reservierte Schlüsselwörter? Nun, in Programmiersprachen gibt es im Allgemeinen Wörter mit einer vordefinierten Bedeutung. Zum Beispiel ist let ein Schlüsselwort. Es hat eine vordefinierte Bedeutung und wird verwendet, um Variablen zu erstellen, oder? Wenn Sie also versuchen, eine Variable mit dem hier angegebenen Namen zu erstellen , okay, das ist nicht erlaubt. Du kannst es sehen. Wenn Sie also mit der Maus darauf zeigen, wird angezeigt, dass let nicht in einem Namen in let - oder cons-Deklarationen verwendet werden darf einem Namen in let - oder cons-Deklarationen Okay, das ist also nicht erlaubt, okay, also werde ich das einfach auskommentieren Sie können also keine reservierten Schlüsselwörter verwenden. Okay? Jetzt werden Sie sagen: Oh, ich muss mir alle reservierten Schlüsselwörter merken, überhaupt nicht, denn mit etwas Übung, wenn Sie anfangen, Programme zu erstellen, werden Sie wissen, was reservierte Schlüsselwörter sind Okay, try ist ein reserviertes Schlüsselwort, catch ist ein reserviertes Schlüsselwort All das wirst du wissen, wenn du neue Konzepte erlernst, und das ist eigentlich nur mit Übung möglich . Selbst ich habe die Liste der reservierten Keywords nicht auswendig können. Okay? Wenn du weiter übst, wirst du lernen, das alles nur für dich reservierte Stichwörter sind, und an Stellen, an denen du dich vergisst oder nicht mehr erinnerst, helfen dir Ausweise, oder? Aber das ist eine Regel , die du im Hinterkopf behalten solltest. nächste Regel besagt, dass Variablennamen keine Arten haben sollten. Wenn Sie versuchen, zwischen den Variablennamen ein Leerzeichen einzufügen , ist das nicht erlaubt. Wenn ich versuche, einen Variablennamen hinzuzufügen, da Vorname, sagen wir, zehn entspricht, können Sie sehen, dass das nicht erlaubt ist. Das ist nicht erlaubt. Du musst sie kombinieren. Es ist ein einziges Wort. Du musst es auf diese Weise kombinieren. Vorname. Diese Konvention hier , bei der Sie zwei Wörter in einem einzigen Variablennamen haben und das zweite Wort Großbuchstaben hat, wird als Camelcase bezeichnet Okay. Also hier machen wir N zu Großbuchstaben setzen N hier als Großbuchstaben , damit es lesbar ist. Es gibt zwei Wörter. Das ist es, was wir hervorheben. Das Erste ist ein Wort und der Name ist ein Wort. Das ist eine gute Benennungspraxis hier. Sie sollten kein Leerzeichen in einem Variablennamen haben. Es sind also keine Leerzeichen erlaubt. Das Letzte hier ist, beschreibende Namen zu verwenden. Dies ist eigentlich keine Regel, sondern eine gute Praxis, Variablennamen als beschreibend zu Variablennamen als beschreibend Nehmen wir zum Beispiel an, wenn ich einen Variablennamen habe und speichern möchte, sagen wir H hier drüben. Und wenn ich hier drüben einen Variablennamen A erstelle und H als, sagen wir, 22 speichere . Ich bin nicht 22 Jahre alt, aber ich gebe nur ein Beispiel Okay? Nehmen wir an, ich versuche H zu speichern und habe diesen Variablennamen erstellt. Nun, für jeden, der diesen Code liest, weiß A nicht, welchen Wert A hat. Natürlich hat es 22, aber was ist es? Es ist eigentlich ein H, oder? Eine bessere Vorgehensweise hier ist es also einen richtigen Variablennamen zu haben, bei dem der Variablenname selbst welchen Wert die Variable hat. Hier ist es also ziemlich klar, dass diese Variable erstellt wurde, um das Alter eines Benutzers zu speichern Richtig? Also, wenn du ein Mitarbeitermanagement-Projekt oder so etwas aufbaust, okay? Und wenn jemand, der Ihren Code liest , auf dieses variable Alter stößt, weiß er, dass, hey, das das Alter des Mitarbeiters darstellt, okay? Es ist also immer besser, Variablennamen als beschreibende Variablennamen zu haben , ich würde sagen, im Gegensatz zu beschreibenden und es ist besser , beschreibende Namen zu haben , weil Variablennamen wie X , A, B, C, X eins , X zwei überhaupt keine gute Praxis sind, okay Ich bin absolut dagegen . Also ja, das ist die Regel hier oder das ist eigentlich keine Regel. Sie werden keinerlei Fehler erhalten, wenn Sie es als A oder X deklarieren, aber das ist eine gute Vorgehensweise, die Sie befolgen sollten. In Ordnung. paar weitere Dinge , die ich hier über die Variablenerstellung hervorheben möchte , sind, dass Sie auch mehrere Variablen in einer einzigen Zeile deklarieren können . Also kann ich eine haben. Okay. Eine Zwei, und ich kann eine Drei haben. Das sind also drei Variablen, die in einer einzigen Zeile erzeugt werden , okay? Und Sie haben sie durch Kommas getrennt. Sie können sie sogar hier initialisieren. Ich kann sie also mit verschiedenen Werten initialisieren, fünf, zehn, und ich habe A drei hier nicht initialisiert Ich kann A Drei sogar als 15 initialisieren, okay? Und ich kann hier das Konsolenprotokoll hinzufügen. Lassen Sie mich also schnell das Konsolenprotokoll hinzufügen und Ihnen die Ausgabe zeigen. Okay? Das ist eine Eins. Okay. Das ist eine Zwei und das ist für eine Drei. Okay. Und wenn ich das speichere, siehst du fünf, zehn und 15. Und wenn ich den Wert Zwei hier drüben weglassen würde. Okay? Und wenn ich das speichere, ist eine Zwei undefiniert, okay? Also bringe ich den Wert Zwei zurück , der hier zehn ist Sie können also absolut mehrere Variablen in einer einzigen Zeile erstellen, deklarieren und initialisieren Aber normalerweise machen die Leute das nicht, okay? Bei JavaScript ist es allgemein üblich, auf diese Weise vorzugehen. Also würdest du eine haben wollen, so etwas. Okay? Und dann habe ich eine Zwei einer separaten Zeile und dann eine Drei einer separaten Zeile, ungefähr so. Also das ist es, was dieser Art von Syntax vorgezogen wird , weil sie viel klarer und leichter zu lesen ist, okay? Jetzt siehst du hier alle roten Markierungen. Warum? Weil Variablennamen in einem einzelnen Programm eindeutig sein müssen, oder zumindest in einem bestimmten Bereich. Okay. Innerhalb eines Bereichs muss der Variablenname also eindeutig sein. Sie können hier also sehen, dass ich versuche , einen Variablennamen A zu erstellen, und Sie können hier sehen, dass A bereits existiert, oder? Wenn ich also A 11 oder e22e3 hinzufüge, darf ich etwas erstellen. Okay. Also ja, achten Sie darauf, eindeutige Variablennamen zu haben. Und das ist auch eine Konvention oder eine Sache, eine Regel, ich sollte sagen, dass Sie sich der Variablen bewusst sein sollten. Du kannst sogar Zuweisungen verketten, sodass ich hier Variablen wie X, Y und Zt erstellen kann . Okay und ich kann zum Beispiel sagen, dass X gleich Y ist gleich Z ist gleich 30. Okay. Und alle werden den Wert 30 haben. Also, wenn du willst, kann ich es dir zeigen. Okay? Also ist es X. Okay. Und dann ist es hier Y und hier ist es s. Okay, ich das speichere, siehst du 30, 30, 30. Okay? Sie haben alle den gleichen Wert. Okay? Also ja, hier geht es um Variablen und darum, wie man sie benennen kann und die Regeln, die man beachten sollte. Behalte also diese allgemeinen Regeln als solche im Hinterkopf, du musst sie dir nicht schwer machen. Es ist völlig okay. Mach dir deswegen keinen Stress. Aber wenn du mit dem Programmieren anfängst, okay, ich möchte mich nicht wundern, dass ich damit keine Variablen mit diesem Namen erstellen kann. Das wird es natürlich nicht tun, denn das ist eine Regel, die Sie kennen sollten. In Ordnung? Und moderne IDs, wie ich schon sagte, helfen dir immer und geben dir ausführliche Fehlermeldungen Ich hoffe also, das war nützlich. 13. var vs let vs const: Jetzt ist es an der Zeit , über verschiedene Möglichkeiten zur Erstellung von Variablen in JavaScript zu sprechen verschiedene Möglichkeiten zur Erstellung von Variablen in JavaScript In JavaScript können Sie also Variablen mit diesen Schlüsselwörtern erstellen . Du hast Const verlassen und warst hier, okay? Oder es wird auch als Krieg ausgesprochen. Krieg hier ist also eine ältere Methode, Variablen zu erstellen, okay? Sie können also War verwenden und sagen, dass Counter gleich 100 ist und Sie können Console oder Log hier drüben sagen Console oder Log hier drüben und Sie können Counter hier sehen. Okay, ich füge Semikolon hinzu. Jetzt können Sie sehen, wie das gedruckt wird. Dies ist jedoch eine ältere Methode zum Erstellen von Variablen. Normalerweise verwenden wir ab heute nur noch Let Over hier. Wenn Sie also den Wert „Wenn Sie Zähler hier speichern möchten“ verwenden möchten, können Sie 100 sagen und Sie können Console, Dot Log und einen neuen Zähler sagen . Okay? So erstellt man heute Variablen. Was ist nun const Wenn Sie also aus einer anderen Programmiersprache kommen , werden Sie sich der Konstanten bewusst sein Const ist also das Schlüsselwort, mit dem Sie Konstanten deklarieren oder erstellen können Nun, Konstante ist etwas, dessen Wert sich nie ändert. Zum Beispiel kann ich hier für einen neuen Zähler einen Wert neu zuweisen, oder? Ich kann sagen, dass der Zähler 200 entspricht. Okay? Und wenn ich den Zähler noch einmal ausdrucke, sehe ich 200 als Ausgabe. Das kannst du hier sehen. Okay. Aber es wird Zeiten oder Szenarien geben, in denen Sie nicht möchten, dass sich der Wert einer Variablen ändert. Okay? Und in diesem speziellen Fall können Sie const verwenden Sie können hier also const sagen und sagen wir einen Wert von Du kannst also 3.14 sagen. Das ist der Wert von Pi, oder? Jetzt kopiere ich das einfach. Und Sie können den Wert von Pi eingeben. Sie können 3.14 sehen. Nun, wenn ich versuche, diesen Wert hier zu ändern, wenn ich sage, dass Pi gleich 400 ist Okay. Und wenn ich versuche, das zu speichern, wirst du eine Fehlermeldung bekommen, dass die Zuweisung zu einer konstanten Variablen nicht erlaubt ist, okay? Und du siehst die Ausgabe nicht. Und du siehst auch. Hier können Sie also auch sehen, wie Sie Ihren Fehler debuggen können. Sie sehen also, dass der Indexpunkt die Zeilennummer 17 hat. Und das ist Zeile Nummer 17, Sie im Visual Studio-Code sehen können Sie hebt Ihre Zeilennummer hervor. Alternativ können Sie sogar darauf klicken, sodass Sie auf diesen Link klicken können. Wenn Sie darauf klicken, werden Sie zum Code hier weitergeleitet. Sie können sehen, dass dies die Zeile ist, in der der Fehler liegt. Und wenn Sie mit der Maus darüber fahren, werden Sie sehen, dass dies eine Zeile ist, die den Fehler verursacht Unerfasster Typfehler bei der Zuweisung zu einer konstanten Variablen. In Ordnung. Also zurück zur Konsole hier drüben. Also, wenn du diese Zeile loswirst, ja. Und wenn Sie speichern, erhalten Sie die Ausgabe wie erwartet. In Ordnung. Also konstant ist der Punkt, an dem Sie nicht möchten, dass der Wert der Variablen geändert wird. Und es gibt viele Szenarien, in denen Sie Konstanten erstellen müssen Wenn Sie beispielsweise an einer Bankanwendung arbeiten, möchten Sie vielleicht eine Variable erstellen oder einen Zinswert speichern Nun, der Zinssatz ändert sich nicht, oder? Es ist behoben. Vorausgesetzt, es ist für Ihre Bank, für das gesamte Projekt oder für das Projekt, an dem Sie gerade arbeiten, repariert . Wenn das Problem behoben ist, möchten Sie vielleicht eine Konstante verwenden, weil Sie nicht möchten , dass Sie oder Sie später versehentlich den Wert des Zinssatzes im Programm ändern . Und wenn Sie in einem Team arbeiten, möchten Sie auch nicht, dass jemand anderes diesen Wert ändert. Deshalb erwähnst du dort explizit const, okay? Und das sagt allen anderen, dass, hey, das ist konstant und darf nicht geändert werden Eine Konvention hier ist auch , dass, wenn Sie Konstanten deklarieren , normalerweise Konstanten in Großbuchstaben deklariert werden Okay. Also zum Beispiel ist Pi hier in Großbuchstaben geschrieben. Okay? Also ja, das ist ungefähr Let Const und wo Okay? Denken Sie also daran, dass Sie Variablen mit all diesen drei Schlüsselwörtern erstellen können. Sie sollten let verwenden , wenn Sie eine normale Variable erstellen möchten , deren Wert Sie ändern können. R ist eine ältere Methode zum Erstellen von Variablen. Es wird heute nicht verwendet. Okay? Ich habe in meiner Umgebung keine Entwickler gesehen, die sie benutzen, oder? Es ist ein älterer Weg. Also vergiss es einfach. Aber es ist gut zu wissen, denn wenn Sie an einer veralteten Codebasis arbeiten , wenn Sie einem Unternehmen beitreten, wenn Sie an einem veralteten Code-Bit arbeiten , ist es am besten, es zu wissen, okay, damit Sie ein Upgrade durchführen können, oder? Natürlich, wenn Sie nicht möchten, dass sich der Wert ändert, um gleich zu bleiben, ich meine, okay, Sie sollten diesen Keeper verwenden Ich hoffe also, das war nützlich. 14. Datentypen: Hallo, willkommen, und jetzt ist es an der Zeit, dass wir anfangen, über Datentypen in JavaScript zu sprechen Datentyp ist also nichts anderes als Datentypen definieren die Art von Wert , den eine bestimmte Variable enthält Nun, wenn Sie aus einem anderen Programmierhintergrund wie Java, Python oder etwas Ähnlichem kommen anderen Programmierhintergrund wie Java, , dann müssen Sie wissen, was Datentypen sind, oder? Und für diejenigen, die sich dessen nicht bewusst sind, ist dies eine Definition. Es definiert einfach die Art von Wert, den eine Variable enthält. Nun werden Datentypen in JavaScript grob in zwei Typen eingeteilt. Einer davon sind primitive Typen, und dann haben wir Referenztypen. Lassen Sie uns also zunächst über primitive Typen sprechen. Nun, das sind die primitiven Typen von Datentypen in JavaScript. Sie haben also eine Zahl, Sie haben eine Zeichenfolge, einen booleschen Wert, eine undefinierte Zahl. Ja, undefiniert ist auch ein Datentyp, und Sie haben Null. Number steht also, wie es heißt, sowohl für Ganzzahlen als auch für Fließkommazahlen Okay? Also, wenn du Zahlen willst, wir sind das alles, eins, zwei, drei und sogar Fließkommazahlen, die Zahlen mit Dezimalstellen wie 1,1, 1,2, all das fällt in die Kategorie Zahlen. Dann hast du Zeichenketten. Jetzt ist Zeichenfolge nichts anderes als die Abfolge von Zeichen wie Ihr Name und all der Stadtname, der Landesname, all das wird unter Zeichenfolge zusammengefasst. Boolean, das nur zwei Werte hat, wahr oder falsch, dann haben wir undefined, was bedeutet, dass kein Wert zugewiesen wurde, und dann haben Sie Null Jetzt bedeutet Null, dass der Wert absichtlich fehlt Lassen Sie mich jetzt die Zahl hier demonstrieren. Also hier kann ich eine Variable namens H erstellen Ich kann ihr eine Zahl zuweisen. Okay? Nehmen wir an, H ist oder sagen wir, H ist 70 hier drüben, irgendeine Zahl. Und Sie können hier das Konsolenprotokoll erstellen, o, und Sie können jede Datei ausdrucken. Okay. Und du wirst die Ausgabe hier sehen. Sie können sehen, dass 70 die Ausgabe ist. Okay? Nun, wenn Sie drucken möchten, um welche Art von Variable es sich handelt, dann können Sie Type Off verwenden. Also kann ich sagen Typ aus. Sie können das sehen, um es vorzuschlagen. Und fügen Sie ein Leerzeichen hinzu, und dann klicken Sie auf Speichern. Sie können also sehen, dass der Typ dieser Variablen eine Zahl ist. Okay? Nun, wenn ich das auf Dezimal ändere, also wenn ich hier 70,5 sage, kann H natürlich nicht dezimal sein, aber ich mache das trotzdem zu Demonstrationszwecken, du wirst sehen, dass der Typ von H immer noch eine Zahl ist, okay? Im Gegensatz zu anderen Programmiersprachen wie Java gibt es in Java also separate Datentypen für Fließkommawerte und Ganzzahlwerte Aber in JavaScript gibt es so etwas nicht, okay? Je nachdem, welchen Wert es hat, okay, es kann eine Zahl sein, keine Zahl kann ein Dezimalwert oder sogar eine ganze Zahl sein. Also hier, diese ganze Zahl, das wird auch eine Zahl sein, wie wir sie gesehen haben. Okay? Also das ist die Zahl. Und dann haben wir Saiten. Also hier, wenn du nach unten scrollst , dann zeige ich dir, was Saiten sind. Also kannst du hier nennen sagen und du kannst sagen, John oder Alice hinzufügen , was auch immer, und dann kannst du Console, Tot og hier drüben sagen , und ich kann hier Name sagen. Okay. Nun, das wird natürlich in John gedruckt, aber Sie können Typ von sagen und Sie können das speichern und Sie werden sehen, dass die Zeichenfolge gedruckt wird. Und das liegt daran, dass der Typ von John nichts anderes als eine Zeichenfolge ist. Okay? Jetzt werde ich hier eine weitere Variable erstellen. Okay. Ich kann hier eine Stadt erstellen und du kannst sie auch zuweisen oder du kannst sogar eine Zeichenfolge mit einem einzigen Code erstellen. Also hier verwende ich Double De, du wirst sehen. Sie können hier sogar einen einzigen Code verwenden. Hier drüben sagt City Jose, okay. Und ich kopiere das hier drüben, diesen Teil. Und statt eines Namens können Sie eine Stadt haben und Sie können sie speichern Sie werden trotzdem sehen, dass eine Zeichenfolge erstellt wird. Okay? Eine Zeichenfolge kann also auf verschiedene Arten erstellt werden, okay? Sie können sehen Doppelcodes und auch Einzelcodes verwendet werden. Jetzt kannst du sogar eine Zeichenfolge verketten, okay? Du kannst also Console sagen. Entschuldigung, hier ist Console Dot Log zu bestätigen, und du kannst sagen, du kannst Namen sagen, okay. Und ich sage Plus, und du kannst viel Platz dazwischen sehen, und du kannst Stadt wie diese sagen. Du wirst John San Jose sehen. Okay? Nun, John Sin Jose macht keinen Sinn, aber wenn Sie separate Variablen für Vor- und Nachnamen haben , können Sie sie natürlich auf diese Weise verketten, um einen vollständigen Namen zu erhalten Ich sehe, dass viele Entwickler einzelne Codes für die Erstellung von Zeichenketten bevorzugen einzelne Codes für die Erstellung von , wenn sie mit JavaScript arbeiten Der nächste Datentyp, den wir haben, ist Boolean. Okay? Nun, Boolean steht einfach für zwei Werte, wahr oder falsch Also kann ich hier drüben einen booleschen Wert erstellen oder ich kann sagen, dass er hier abgeschlossen ist, und es kann wahr sein und ich kann Console, Punkt, Log sagen und ich kann sagen, Type off und ich kann sagen Jetzt siehst du Boolean als Ausgabe hier drüben, okay? Sie können es auch einfach als abgestuft eingeben, und Sie werden eine echte AE-Ausgabe sehen. Alles klar? Nun, boolesche Datentypen werden tatsächlich häufig verwendet , wenn Sie Entscheidungen treffen, okay Entscheidungsfindung bedeutet, wenn ein Student seinen Abschluss gemacht hat, können Sie ihm wahrscheinlich ein Zertifikat ausstellen, oder? Oder Sie können die Berechnung der Teilnahme beenden. Wenn der Benutzer Admin ist, können Sie einen Booleschen Wert namens I Admin haben Wenn ein Benutzer Administrator ist, gewähren Sie ihm Zugriff auf bestimmte Funktionen in der App Wenn er kein Administrator ist, schränken Sie ihn von all diesen Dingen aus. Je nach Wert der Variablen hat der Administrator also graduiert, die Entscheidungen werden getroffen, und das wird häufig bei der Entscheidungsfindung verwendet. Alles klar? Also das ist ein Anwendungsfall für Boolean. Es steht einfach für wahr oder falsch. Dann hast du undefiniert. Undefiniert bedeutet also, dass die Variable deklariert wurde , aber noch kein Wert zugewiesen wurde, okay? Also kannst du hier Console Dot Log sagen. Und lassen Sie mich zuerst eine Variable erstellen. Okay. Also werde ich einen variablen, vermieteten Bereich haben. Und nehmen wir an, ich habe dafür keinen Wert. Okay? Ich füge hier einen Bereich hinzu, okay und du wirst sehen, dass undefined gedruckt wird Okay? Also, wenn ich Typ sage, dann wirst du sehen, dass undefined gedruckt wird Okay? Das ist also undefiniert, wobei der Variablen, die erstellt wurde, kein Wert zugewiesen wird Variablen, die erstellt wurde, kein Wert zugewiesen Der nächste Wert, den wir haben, ist Null, was das absichtliche Fehlen eines Werts darstellt Nehmen wir an, Sie haben eine Variable, die Sie erstellt haben , und Sie möchten ihr noch keinen Wert zuweisen So kann ich eine Variable namens leerer Wert erstellen. Nennen wir es selbst leeren Wert. Okay. Und ich werde ihm Null zuweisen lassen. Wenn ich nun Console Dot Log sage und wenn ich Leerer Wert sage, werde ich sehen, dass Null auf der Konsole gedruckt wird. Okay? Nun kann ich Typ sagen und das speichern und Sie werden sehen, dass der Typ Objekt ist. Also Null ist eigentlich vom Objekttyp, okay? Aber das ist eigentlich ein Typ-Datentyp in JavaScript. Okay? Also ja, hier geht es um Null. Okay? Ich werde das einfach los und wir lassen es drucken. Bevor ich zum Referenztyp übergehe, möchte ich hier nur eine kleine Sache hervorheben. Als wir hier den Typ eines leeren Werts sagten, Null ist , sahen wir, dass ein Objekt gedruckt wurde. Aber in Wirklichkeit enthält dieses Ding Null, oder? Es sollte also idealerweise Null drucken , wenn Null ein Datentyp ist. Okay. Nun, ich möchte hier nur einen Stack-Overflow-Artikel hervorheben, dem es heißt: Warum ist der Typ eines Null-Objekts, richtig Hier nun, das wurde idealerweise vorgeschlagen. Wenn Sie also zu diesem Link hier gehen, wurde vorgeschlagen, das zu ändern, es dauerte 1 Sekunde , nicht dieser, sondern dieser. Okay. Also wurde vorgeschlagen , es hier auf Null zu ändern. Okay? Also das ist der gesamte Artikel hier und das ist die Stack-Overflow-Sache Okay. Es wurde also vorgeschlagen, das zu ändern, aber es wurde tatsächlich abgelehnt. Wenn Sie also diesen Code hier ausführen, sehen Sie immer noch Objekt o als Ausgabe. Aber das spielt keine Rolle, okay? Denken Sie daran, dass Sie in JavaScript Nullwerte haben können. Sie können Variablen mit Nullwerten haben. Das ist es, worauf es ankommt. Gehen wir nun zu den Referenztypen über. Also werden wir über zwei sprechen. Eins ist Objekt, und dann haben wir etwas, das als Rs bezeichnet wird. Was ist nun ein Objekt? Jetzt wird das Objekt tatsächlich verwendet, um komplexe Daten in Form von Schlüssel-Wert-Paaren zu speichern . Okay? Nun, warum müssen wir komplexe Daten speichern? Nehmen wir an, ich erstelle eine Anwendung und möchte in meiner Anwendung den Überblick über einen Benutzer behalten. In Ordnung. Jetzt sage ich Nutzer lassen. Nehmen wir an, ich möchte die Benutzer H verfolgen . Nehmen wir an, Benutzer H ist 22, und ich möchte auch den Benutzernamen hier verfolgen . Okay? Nehmen wir an, der Name ist John , sagen wir zum Beispiel, alles klar. Jetzt habe ich zwei Variablen, die einen einzelnen Benutzer stehen. Nehmen wir an, meine Anwendung lässt sich skalieren und ich habe Hunderte und Tausende von Benutzern, was würden Sie in diesem Fall tun? Würden Sie diese vielen Variablen erstellen? Absolut nicht. Okay? Dann ist es gut, das zu gruppieren. Diese beiden Eigenschaften oder diese beiden Variablen gehören also einem einzelnen Benutzer, oder? Warum also nicht gruppieren und als Objekt speichern? Was Sie hier also tun können, ist ein besserer Ansatz , eine Person zu haben, denn statt einer Person werde ich einen Benutzer haben, weil wir hier über Benutzer sprechen, okay? Ich nehme das Gleiche wie jetzt hier drüben, was ich machen werde, ist, ein paar lockige Stellen zu haben , so etwas Und darin werde ich Schlüsselwertpaare haben, die die Attribute dieses bestimmten Benutzers sein werden Okay? Also kann ich den Vornamen sagen, okay. Der Name ist John hier drüben. Okay. Und dann kann ich H haben und H ist sagen wir 22. In Ordnung. Nun kann ich sagen, wenn du nach unten scrollst, kann ich sagen, dass ich tatsächlich auf einzelne Immobilien zugreifen kann. Okay? Ich kann Benutzerpunkt sagen und du siehst Name und H. Ich habe Zugriff auf Name und H, also kann ich auf diese Weise darauf zugreifen. Okay? Ein Fehler, den ich hier gemacht habe, ich sagte, es ist ein Schlüssel-Wert-Paar, aber ich habe tatsächlich das Gleiche, als würde da drüben benutzt werden. Das ist nicht richtig. Also ändere ich das einfach in Colin und du wirst es hier sehen, okay, Konsole Ich habe DotLog auch verpasst. Was mache ich? Jetzt können Sie also sehen, wie 22 auf die Konsole gedruckt werden, oder? Benutzerpunkt H. Sie können den Namen auch hier ausdrucken und darauf zugreifen. Das ist Name, oder? Wenn Sie den Namen ändern möchten, können Sie den Benutzerpunktnamen ändern und ihn in , sagen wir, Alice ändern. Okay. Und wenn du dann erneut versuchst, darauf zuzugreifen, wirst du Alice als neuen Namen sehen. Das kannst du hier sehen, oder? Nun, das können Sie mit dem Objekt machen. Sie können verwandte Attribute gruppieren. Nun, das unterscheidet sich geringfügig von Programmiersprachen wie Java. In Java können Sie ein Objekt nicht direkt erstellen. Du brauchst zuerst eine Klasse, oder? Sie definieren also zuerst eine Klasse, die sich wie eine Vorlage verhält, und dann instanziieren Sie die Klasse und erstellen ein Objekt, und dann können Sie Variablen oder Klassenmitglieder innerhalb dieser bestimmten Klasse haben Klassenmitglieder innerhalb dieser bestimmten Klasse Aber so funktioniert das in Ja Script nicht. In Javascript können Sie solche Objekte direkt erstellen, und sie können Schlüssel-Wert-Paare haben, und das ist sehr praktisch. Richtig? Mal sehen, was passiert, wenn du versuchst einzudrucken , also übernehme ich die Kontrolle. Und ich werde einfach versuchen, hier im Benutzermodus zu drucken. Okay. Wenn Sie jetzt versuchen, im Benutzermodus zu drucken, werden Sie sehen, dass das gesamte Objekt gedruckt wird. Ihr Name ist Alice. Sie ist 22 Jahre alt. Okay? Und Sie können sogar auf die einzelnen Immobilien zugreifen. Nun, eine weitere Sache, die ich hier hervorheben möchte, ist, ich sagte, Sie können auf einzelne Eigenschaften wie diese zugreifen , oder? Das haben wir gesehen. Diese Art des Zugriffs auf einzelne Eigenschaften wird als Punktnotation bezeichnet , weil Sie hier einen Punkt verwenden, hier einen Punkt, das Symbol, okay? Und Sie verwenden es mit dem Objekt und versuchen, auf sein Attribut zuzugreifen. Das ist es also, was du versuchst zu tun, oder? Und diese Syntax ist einfach als Punktnotation bekannt. In Ordnung. Es gibt also etwas, das du im Hinterkopf behalten kannst, richtig. Aber ja, der Knackpunkt bleibt, dass Sie solche Objekte in Ja Script erstellen können Sie können auch mehr Attribute haben, ich kann zum Beispiel Attribute wie Stadt hier haben, ich kann San Francisco sagen. Okay, so etwas. Okay. Und Sie können hier drüben sehen, dass das gedruckt wird. Und ich kann auch mit Punktnotation auf die Stadt zugreifen. Ordnung? Also das sind Objekte in JavaScript. Lassen Sie uns weiter über Arrays sprechen. Jetzt bei Arrays. Jetzt ist Arrays ein Referenztyp in JavaScript, ein Referenztyp in JavaScript verwendet wird , um mehrere Werte zu speichern Nehmen wir an, Sie erstellen ein Programm und möchten eine Liste von Werten oder, sagen wir, mehrere Werte speichern oder, sagen wir, mehrere Werte Wenn Sie zum Beispiel bereit sind, eine Liste mit Früchten zu speichern , nehme ich nur ein Beispiel. Also, wie macht man das mit Variablen? Du wirst eine Variable haben, eine Fruchtvariable. Und du wirst es hier einem Wert zuweisen, richtig? Wenn Sie zehn Früchte speichern möchten, erstellen Sie zehn Variablen. Aber so sollte es nicht sein. Das ist nicht praktisch, oder? Verwaltung von zehn Variablen. Wenn Sie stattdessen zehn Werte oder mehrere Werte speichern möchten , mehr als einen, können Sie eine einzelne Variable erstellen. Sie können es ein Array nennen. Sie können es nennen , wie Sie wollen, Obst, und es wird vom Typ Array sein. Also hier werde ich eckige Klammern verwenden. Und innerhalb der eckigen Klammern werde ich die Liste der Werte nacheinander haben. Also zuerst, sagen wir Apple, ich kann hoppen Ich kann hier Banane essen. Okay, und ich kann, sagen wir, Erdbeere essen. Okay, so etwas. Also das ist ein Array hier drüben, okay? Und ich kann hier Console Dot Log sagen. Ich kann Obst sagen. Und wenn ich das ausdrucke, siehst du Apfel, Banane, Erdbeere. Okay. Und schauen wir uns die Obstsorte an. Okay. Du wirst sehen, dass es hier ein Objekt ist. Okay? Also ja, hier erfahren Sie, wie Sie Arrays in JavaScript erstellen und verwenden 15. Statisch oder dynamisch getippt: Lassen Sie uns nun über statisch typisierte und dynamisch typisierte Programmiersprachen sprechen typisierte und dynamisch typisierte Programmiersprachen Jetzt werden wir zuerst über statisch typisierte sprechen. Was ist also eine statisch typisierte Programmiersprache? In dieser Art von Programmiersprache müssen Sie also den Typ jeder Variablen explizit deklarieren Und sobald Sie den Typ der Variablen deklariert haben, kann der Variablentyp während der Ausführung des Programms nicht mehr geändert werden. Und ein sehr gutes Beispiel dafür ist Java. Wenn Sie also in Java programmiert haben, werden Sie es wissen, oder auch wenn Sie nicht programmiert haben, gebe ich Ihnen nur ein sehr einfaches Beispiel. Nehmen wir an, Sie möchten jeden Benutzer speichern. Okay? Also, Alter 30, das ist ein Java-Code, den ich versuche zu schreiben, okay? Nun, hier drüben können Sie Variablen nicht einfach auf diese Weise deklarieren. Sie müssen den Typ hier angeben. Okay? Also sagst du Integer, jeder ist gleich 30. Jetzt können Sie dieser bestimmten Variablen keine Zeichenfolge zuweisen . Ordnung. Das ist in Java einfach nicht akzeptabel. Okay? Sie erhalten sofort die Fehlermeldung, dass, Hey, H als Ganzzahl deklariert wurde und eine Ganzzahl erwartet Während der Ausführung des Programms können Sie den Typ also nicht ändern Das ist nicht erlaubt. Selbst wenn irgendeine Art von Zeichenfolge, okay, wenn du hier Java so hinzufügst, ist das nicht erlaubt, weil es immer noch eine Zeichenfolge ist. Das ist also ein Beispiel dafür wie sich statisch typisierte Programmiersprachen verhalten Wenn Sie versuchen, so etwas zu tun, würden sie Ihnen einen Fehler bei der Kompilierung geben. Alles klar? Nun, wenn Sie über JavaScript sprechen, ist JavaScript eine dynamisch typisierte Programmiersprache Was bedeutet das nun? In JavaScript können Variablen also den Typ während der Ausführung des Programms ändern . Alles klar? zunächst anerkennen, Lassen Sie uns zunächst anerkennen, dass Sie in JavaScript den Typ der Variablen, die Sie erstellen, nicht deklarieren müssen . Nehmen wir an, ich habe eine Variable mit dem Namen meine Variable und lassen Sie mich sagen, okay, ich werde sagen, dass ich ihr momentan keinen Wert zugewiesen habe , okay? Also sage ich hier Console Dot Log. Ich sage meine Variable, wir können sie gedruckt sehen. Es ist undefiniert, oder? Wenn ich nun den Operatortyp verwende und versuche, den Typ dieser Variablen zu drucken, werden Sie feststellen, dass der Typ undefiniert ist. Alles klar? Lassen Sie mich nun diese spezielle Variable zuweisen. Also warte eine Minute. Ich werde das einfach duplizieren, o. Lassen Sie mich nun dieser bestimmten Variablen eine Ganzzahl zuweisen. Okay? Also scrolle ich zur besseren Sichtbarkeit hier nach unten und sagen wir, wir weisen ihr eine zu, jetzt ist der Typ dieser Variablen Zahl weil sie eine Zahl enthält, richtig? Also hat sich der Typ in Zahl geändert. Also lass mich dir noch eine Magie zeigen. Wenn ich das hier ändere, o, und wenn ich das zu einer Zeichenfolge ändere, wirst du sehen, dass der Typ jetzt Zeichenfolge ist, was bedeutet, dass er jetzt eine Folge von Zeichen enthält. Und die Zeichenfolge kann alles sein. Es kann eine Zeichenfolge wie Jascript hier drüben sein. Okay. Und das wirst du sehen. Und wenn ich diese Zeile dupliziere, lass mich das auch duplizieren. Okay. Also, wenn ich das los werde, okay. Und wenn ich das speichere, wirst du sehen, dass Ja Script gedruckt wird. Okay. Und es wird auch die Nummer drucken, wie bei einer normalen Sache. Okay? Sie können also sehen, wie sich der Typ meiner Variablen , einer Variablen, die wir erstellt haben, während der Ausführung des Programms dynamisch ändert während der Ausführung des Programms dynamisch , oder? Und das ist ein Merkmal der dynamisch typisierten Sprache, oder? Und JavaScript wird als dynamisch typisierte Sprache klassifiziert als dynamisch typisierte Sprache Und das ist das Beispiel oder ein Beweis dafür, wie es sich verhält. Lassen Sie mich Ihnen nun ein weiteres Beispiel anstelle von Zeichenfolge und Zahl geben . Wenn ich versuche, ihm einen booleschen Wert zuzuweisen, sagen wir, okay Wenn ich es speichere, wirst du sehen, dass es boolesch ist und dass es wahr ist. Ein Punkt, den ich hier beachten sollte, ist, dass ich keine neuen Variablen erstelle Es ist dieselbe Variable, die einmal erstellt wurde, und sie wird wiederverwendet und ihr werden verschiedene Arten von Werten zugewiesen, oder? Es ändert sich also spontan während der Ausführung Das ist also Javascript. Sie müssen sich also daran erinnern, dass Variablen in JavaScript den Typ während der Ausführung des Programms ändern können , okay? Und wenn Sie eine Variable in JavaScript deklarieren, müssen Sie den Typ nicht angeben Es ist also eine dynamisch typisierte Sprache. Jetzt haben wir diese Art von Operator verwendet. Zuallererst ist es ein Operator. Okay, ich würde sagen, wir haben diese Art von Schlüsselwort ziemlich oft verwendet . Und die Verwendung von Schlüsselwörtern, wissen Sie, wie es hier verwendet wird, um den Typ einer Variablen zu ermitteln. Dafür verwenden wir es, oder? Eine Sache, die ich hier hervorheben möchte, ist, diesem Typ um einen Operator handelt. Innerhalb des Ja-Skripts, okay? Also ist es ein Operator. Ich habe diesen Begriff so verwendet würden wir den Operatortyp und so weiter verwenden. Ich möchte nicht, dass die Schüler verwirrt werden. Deshalb erwähne ich ausdrücklich, dass dies ein Operator in JavaScript ist, oder? Und ich hoffe, dieses Beispiel zeigt ziemlich deutlich, Ja Script eine dynamisch typisierte Programmiersprache ist, und ich hoffe, das ist nützlich 16. Ausdrücke und Operatoren: Jetzt ist es an der Zeit , über einige weitere Konzepte wie Ausdrücke, Literale und Operatoren in JavaScript zu sprechen einige weitere Konzepte wie Ausdrücke, Literale und Operatoren in JavaScript Was sind nun Ausdrücke? Nun, Ausdruck ist jede gültige Codeeinheit , die einen einzelnen Wert erzeugt. zum Beispiel hier Wenn ich zum Beispiel hier auf der Konsole schreibe drei plus drei sage, erhalte ich die Ausgabe als sechs. Nun, das ist ein Ausdruck, aufgrund dieser Aussage hat er einen einzigen Wert erzeugt, richtig? Das ist also ein Ausdruck. Was ist ein wörtliches Wort? Ein Literal ist ein fester Wert, den Sie direkt in den Code schreiben Also hier ist drei ein Literal. Okay? Also, wenn ich sage, dass A gleich 30 ist, dann ist 30 hier wortwörtlich, und die ganze Sache ist ein Ausdruck, oder? Weil das hier eine Aufgabe ist. Okay? Also, was hier passiert, ist, dass der Wert auf der rechten Seite der Variablen auf der linken Seite zugewiesen wird . Okay? Also das ist ein wörtliches Wort Nun, es gibt mehrere Arten von Literalen. Zum Beispiel gibt es etwas, das so heißt , wie ich sagen kann, es gibt etwas, das so heißt, als ob ich heranzoome Es gibt ein numerisches Literal, also ist es ein numerisches Literal Es gibt ein auf Zeichenketten basierendes Literal, also kann ich hier JavaScript sagen. Das ist eine Zeichenfolge hier drüben, oder? Sie können sogar boolesche Literale haben. Okay? Also kann ich hier drüben die Wahrheit sagen. Das ist ein boolesches Literal Okay. Literale können also viele Typen haben, numerische Literale, Zeichenkettenliterale, boolesche Literale, und das hängt von der Art des Werts ab, den Sie dem Code hinzufügen, okay Ich füge das jetzt in der Konsole hinzu, aber eigentlich würdest du Wenn Sie also sagen, dass A gleich wahr ist, dann ist hier ein boolesches Literal wahr Ich hoffe, das macht Sinn, oder? Das ist also, was A Literal bedeutet. Jetzt sind wir uns über Ausdruck im Klaren, Ausdruck ist alles, was zu einem einzigen Wert ausgewertet Wenn Sie also zum Beispiel eine arithmetische Berechnung durchführen oder etwas initialisieren, irgendeine Art von Berechnung oder Initialisierung, irgendeine Art von Berechnung oder die Ihnen einen Wert gibt, dann ist das ein ist das Was sind nun Operatoren? Nun, Operatoren in JavaScript sind Symbole, die Operationen an den Operationen ausführen würden. Okay. Also ein paar Terminologien hier drüben. Also ist hier drüben ein Operator, okay? Division ist ein Operator minus ist ein Operator. Die Multiplikation, die auf diese Weise als Sternchen dargestellt wird , ist ebenfalls ein Das sind also alles Operatoren, die wir auch im wirklichen Leben verwenden, um Additionen, Abstraktionen, Divisionen und Multiplikationen vorzunehmen, oder? Abstraktionen, Divisionen und Multiplikationen vorzunehmen, Das sind also auch Operatoren in Programmiersprachen wie JavaScript Nun, wann immer Sie diese Operatoren verwenden möchten, würden Sie sagen drei plus drei, richtig? Oder Sie könnten eine Variable verwenden , oder? Sie könnten also A plus B sagen, wobei A und B jeweils einige Werte haben. Okay. Also hier, was passiert ist, dass Sie diesen Operator verwenden , also ist Ihr Plus der Operator. Diese beiden Werte, für die die Operation ausgeführt wird, werden jedoch als Opernt bezeichnet Okay, ich wiederhole es hier. Also hier ist Plus ein Operator. Es ist ein Symbol. Es geht um die Art von Operation, die Sie durchführen möchten. Du willst zwei Dinge hinzufügen, oder? Nun, die beiden Dinge, die Sie hier drüben, drei, drei und hier drüben, A und B, addieren , sind Ausdrucke, weil die Additionsoperation für diese beiden Werte ausgeführt wird Ich hoffe, das macht Sinn. In Ordnung. Also hier drüben, wenn Sie drei plus drei sehen, ergibt sechs. Also drei und drei sind Prints und Plus ist ein Operator. Stimmt? Das sagt das also. Operatoren in JavaScript sind Symbole, die Operationen ausführen. Was ist die Operation , die ausgeführt wird? Hinzufügung. Es führt die Operation an Opernen Was sind die Opernen? Drei hier in diesem Fall und A und B in diesem Fall, richtig? Und es sind Symbole, heißt es. Es ist also ein Symbol plus Division minus Multiplikation. Das sind alles Symbole, oder? Das sind also Operatoren, oder? Und je nachdem , welche Programmiersprache Sie lernen, werden Operatoren klassifiziert. Es gibt also Arten von Operatoren in JavaScript. Okay? Der erste Typ sind arithmetische Operatoren Nun, natürlich Operator, die Operatoren werden im Grunde genommen verwendet, um arithmetische Berechnungen durchzuführen, arithmetische Berechnungen durchzuführen Wie bei Addition, Subtraktion, Multiplikation, Division gibt es Modulus, Inkrement, Dekrement Division gibt es Modulus, Inkrement, Dekrement . All das sind arithmetische Operatoren, okay? Zuweisungsoperatoren, okay? Zuweisungsoperatoren sind also gleich. Wenn Sie etwas zuweisen, Sie eine Additionszuweisung, eine Subtraktionszuweisung, eine Multiplikationszuweisung oder eine divisionsbasierte Zuweisung Nach den Zuweisungsoperatoren kommen nun die Vergleichsoperatoren Nun, was sind Vergleichsoperatoren. Vergleichsoperatoren werden, wie der Name schon sagt, verwendet, um zwei Dinge zu vergleichen, oder? Oder vergleichen Sie Opernen. Sie haben also Gleichheit, strikte Gleichheit, Ungleichheit, dann strikte Ungleichheit, größer als weniger als, größer als gleich, weniger als gleich Okay? Das sind die wenigen Vergleichsoperatoren, die es gibt, oder? Logische Operatoren. Nun, diese werden verwendet, um logische Operationen auszuführen, oder Knoten, richtig? Sie haben uniäre Operatoren , also logische Knoten vom Typ Inkrement, Dekrement Und dann haben Sie die ternären Operatoren o, die diese Art von Syntax haben Okay? Wenn Sie also aus einer anderen Programmiersprache wie Java kommen , wüssten Sie, was ein ternärer Operator ist, und Sie haben einen ähnlichen Operator in Ja Script Aber wenn Sie keine andere Programmiersprache kennen , ist das absolut in Ordnung Wir werden das alles behandeln. Alles klar. Nun, das ist die Klassifikation, richtig, und das ist das Konzept von Ausdruck, Literal und Operatoren Ich hoffe, Sie haben es bis jetzt mitverfolgen können, und ich hoffe, das war hilfreich 17. Arithmetische Operatoren: Jetzt ist es an der Zeit, dass wir die arithmetischen Operatoren in JavaScript durchgehen arithmetischen Das ist also eine Liste von Operatoren, die als arithmetische Operatoren klassifiziert sind Natürlich müssen Sie mit einigen davon vertraut sein: Gradation, Subtraktion Als ob wir das auch in unserem wirklichen Leben benutzt haben. Also füge ich hier ein Beispiel ein, okay, das uns eine Vorstellung davon gibt, wie Addition, Subtraktion, Multiplikation und Division zu dem Ergebnis führen können Also, wenn ich das speichere, wirst du es hier sehen. Okay, lass mich ein bisschen rauszoomen. Okay, damit du das Ergebnis richtig sehen kannst. Sie können also sehen, dass das Additionsergebnis Subtraktion sieben, Multiplikation 24 und die Division fünf ergibt. Okay? Nun, wenn ich das natürlich auf so ändere, ist das klar, Additionsergebnis, fünf plus drei. Okay, zehn minus drei, das ergibt sieben. Okay? Wenn ich das auf 13 ändere, wirst du sehen, dass die Ausgabe negativ wird. Das ist also auch möglich. Okay? Wenn Sie hier nach unten scrollen, ist das Multiplikationsergebnis einfach, okay, es wird eine positive Zahl sein, es sei denn Sie versuchen, mit Null zu multiplizieren , wäre die Ausgabe Null Okay? Wenn du das Divisionsergebnis herunterscrollst, siehst du hier eine Zahl , okay? B 20 ist teilbar durch vier. Wenn ich das jetzt auf sieben ändere, sagen wir, das Ergebnis der Division hier in Dezimalzahlen angegeben ist. In Ordnung Wenn es also keine ganze Zahl ist, erhalten Sie als Ergebnis der Division ein Dezimalergebnis . In Ordnung. Nun, hier geht es um Multiplikation, Subtraktion, Addition. Dies sind die Standardarithmetikoperationen , die wir auch in unserem täglichen Leben ausführen. Was ist Modul? Wenn Sie also aus einer Programmiersprache wie Java kommen, müssen Sie sich mit Modulus auskennen Aber nur für den Fall, dass du nicht weißt, was Modulus ist, gebe ich dir einfach eine Demo, okay, also ich werde Modulus hier drüben haben. Okay. Und der Modulo-Operator wird hier mit Hilfe eines Prozentsymbols dargestellt . Okay. Und hier lasse ich Modulus schreiben Okay, so etwas in der Art. Okay, lass uns sehen, was Modulus ist, okay? Also Modulus hier drüben und ich gebe die Ausgabe als Modulus-Ergebnis Statt Division ändere ich das jetzt in Prozent. Okay, weil wir hier den Modulo-Operator verwenden. Ich spreche ihn manchmal auch als Modulus Modulo aus, o Es gibt verschiedene Arten Sie können also sehen, dass das Modul-Ergebnis momentan Null ist. Okay? Also, der Modulus wird dir den Rest geben, nachdem du die Division durchgeführt Die Division macht das, sie teilt und gibt dir das Ergebnis. Aber Modulus führt die Division durch und gibt dir den Rest . Das ist es, was es verlangt. Nehmen wir also an, dass 20 eindeutig durch vier teilbar ist, dann ist die Leistung Null Es ist auch durch fünf teilbar, sodass die Ausgabe Null sein wird, wie Sie sehen können Aber bei sechs bekommst du die Ausgabe als zwei, okay? Weil 18 durch sechs teilbar ist, oder? Sechs Dreier sind 18, und dann ist zwei der Rest. Sie bekommen also den Rest als Ergebnis, zwei hier drüben. Okay? Wenn du versuchst, das durch sieben zu teilen, solltest du sechs als Ergebnis erhalten. Sie können sechs sehen, weil 14 durch 772 14 teilbar ist, oder? Und dann ist sechs der Rest, richtig? Also sechs ist das, was Sie als Ergebnis erhalten. Modulus gibt Ihnen also im Grunde den Rest, nachdem Sie die Division durchgeführt haben. In Ordnung. Nun würden Sie mich fragen, warum Sie einen solchen Operator wollen würden. Zum Beispiel, warum Sie nach der Ausführung von Di Okay einen Rest benötigen, es gibt mehrere Anwendungsfälle und Szenarien oder Anforderungen, in denen Sie das Ergebnis ausführen oder erhalten möchten. Ein Beispiel, das ich Ihnen hier geben kann ist die Identifizierung einer ungeraden und einer geraden Zahl. Okay? Nehmen wir an, Sie schreiben Code oder ein Programm, bei dem Sie herausfinden möchten, ob die angegebene Zahl ungerade oder gerade ist. Was Sie normalerweise tun würden, ist, diesen Restoperator hier drüben zu verwenden , Modulus, okay? Also sieben Modulo und du machst es mit zwei. Okay. Also bekommst du die Ausgabe als eins. Das ist also eine ungerade Zahl. Okay? Sechs Modulo zwei, du kriegst Null als Rest Okay. Das bedeutet also, dass sechs eine gerade Zahl ist. Okay? Auf diese Weise können Sie Modulo verwenden und das Ergebnis erzielen Es geht also um Modulo. Du hast auch etwas, das Inkrement genannt wird, okay? Also werde ich das loswerden. Okay? Das ist jetzt falsch. Okay. Jetzt zeige ich dir etwas, das als Inkrement bezeichnet wird. Jetzt wird der Inkrementoperator verwendet oder in etwa so dargestellt, plus plus. Okay? Also lass mich nach unten scrollen. Und lassen Sie uns sagen, wenn Sie einen Wert haben, sagen wir, ich habe eine Variable. X entspricht fünf, okay? Und ich kann hier Console Dot Log sagen, ich kann die Ausgabe von X oder den Wert von X drucken. Sie werden fünf als Ausgabe sehen. Okay? Okay, lass mich das auch herbringen. Okay? Ich hole mir das und ich kann sagen, mit steigendem Ergebnis. Okay? Also, das ist noch nicht inkrementiert. Sie weisen fünf zu und Sie erhalten fünf als Ausgabe Okay? Aber was Sie tun können, ist, den Wert von zu erhöhen, sagen wir, wenn Sie den Wert von X um eins erhöhen möchten . Es gibt also zwei Ansätze, Sie können entweder sagen, dass X gleich X plus eins ist. Okay? Das ist machbar. Wenn du das speicherst, bekommst du die Ausgabe als sechs, okay? Es gibt jedoch eine alternative Methode , bei der Sie einfach diesen Inkrementoperator verwenden können und dasselbe Ergebnis in Kurzform erzielen Das ist also eine Kurzversion dieser Aussage hier drüben. Sie sagen, X ist gleich X plus eins, aber in Wirklichkeit erhöhen Sie nur den Wert von X. Also warum machen Sie es nicht so? In Ordnung. Und du kannst es so oft erhöhen, wie du willst. Ich kann es also noch einmal erhöhen, und Sie sehen die Ausgabe als sieben. In Ordnung. Also das ist der Inkrementoperator. Es ist eine Kurzversion der Erhöhung des Werts einer Variablen Alles klar? Hier geht es um Inkrement, dann gibt es etwas, das Dekrement genannt wird Jetzt funktioniert Dekrement auch auf ähnliche Weise, okay? Also hier, wenn ich mich das einfach kopieren lasse. Okay. Also statt X werde ich hier ein Beispiel für Y nehmen. Okay? Und lassen Sie mich Ihnen die Langversion davon geben. Okay? Also würde ich das loswerden und sagen, Y ist gleich Y minus eins. Okay? Also das ist keine Kurzschrift, okay? Und hier sage ich dekrementiertes Ergebnis. Okay, und ich drucke den Wert als Y. In Ordnung. Wenn ich das jetzt speichere, wirst du sehen das dekrementierte Ergebnis vier ist, oder? Jetzt kann ich hier den Decrement-Operator verwenden. Okay, und ich kann hier sagen, Y minus minus. Es wird mir das gleiche Ergebnis geben. Ich kann das zweimal oder so oft machen, wie ich will, okay. Also im Grunde ist es dem Inkrementoperator ähnlich, okay, aber es wird verwendet, um den Wert zu dekrementieren. In Ordnung Nun wird der Inkrementoperator verwendet, um den Wert in Kurzform zu erhöhen , wie wir gesehen haben , und der Dekrementierungsoperator wird verwendet, um den Wert in Kurzform zu dekrementieren, wie wir es hier sehen. In Ordnung. Also das sind die arithmetischen Operatoren , die es in JavaScript gibt Ordnung. Ich hoffe, das ist klar, und aus all dem ist es wichtig, verstehst du. Die übrigen Operatoren sind einfach, aber ich würde sagen es ist wichtig, dass Sie verstehen, wie das Modell funktioniert. Und ich würde Ihnen empfehlen, auch einige Beispiele in der Browserkonsole auszuprobieren . Du kannst es direkt eintippen. Dafür benötigen Sie keinen Visual Studio-Code. Sie können hier also direkt etwas eingeben und sehen , wie sich dieser Operator bei verschiedenen Wertesätzen verhält Okay? Also ich hoffe, das ist nützlich und du konntest mitmachen. 18. Aufgaben-Operatoren: Dies sind die Zuweisungsoperatoren , die wir in Ja Script haben, und lassen Sie uns anfangen, über jeden einzelnen von ihnen zu sprechen. Dieser erste ist also etwas, das wir bis jetzt schon einige Male gesehen haben. Es wird verwendet, um den Wert auf der rechten Seite der Variablen auf der linken Seite zuzuweisen der rechten Seite . Jetzt habe ich ein sehr einfaches Beispiel hinzugefügt veranschaulicht, was diese Zuweisung ist Okay, es sollte sehr einfach und für Sie überhaupt nicht schwer zu verstehen Okay? Also weise ich dieser Variablen A einfach den Wert fünf zu und wir drucken diesen Wert einfach Alles klar? Dann haben wir einen zusätzlichen Auftrag. Okay? Also, was das macht, ist, dass es zusammen mit der Zuweisung auch die Addition durchführt. Lassen Sie mich Ihnen ein Beispiel dafür geben. Also füge ich hier etwas Code hinzu. Sie können die zusätzliche Aufgabe hier in der Praxis sehen. Ich habe eine neue Variable erstellt und sie B genannt. Und was ich hier mache, ist, dass ich drei zu B hinzufügen möchte Also eine Möglichkeit ist, dass ich so etwas mache. Okay? Also lass mich dir das zuerst zeigen. Okay. Und ich werde das auskommentieren. Wenn ich das jetzt speichere, siehst du die Ausgabe als 13. Es wurde auf zehn initialisiert, aber die Ausgabe ist jetzt 13. In Ordnung. Nun, wenn ich das auskommentiere und wenn ich das auskommentiere, ist das dasselbe, als würde ich das schreiben. Die Ausgabe wäre dieselbe Das bedeutet also, dass B gleich B plus drei ist. Stimmt das? Also addiert es zuerst drei zu B und dann weist es der Variablen B den Gesamtwert oder das Ergebnis zu. Okay? Und dann drucken wir es aus, um die Ausgabe zu sehen. So funktionieren Addition und Zuweisung also zusammen. Dies ist im Grunde eine Abkürzung oder sollte ich sagen, eine bequeme Methode, um eine Zahl zu einer bestimmten Variablen zu addieren oder hinzuzufügen eine Zahl zu einer bestimmten Variablen zu addieren So wie wir jetzt die Additionszuweisung haben, haben wir auch die Subtraktionszuweisung Das macht im Wesentlichen den gleichen Job wie die Additionszuweisung. Nehmen wir an, wir haben diese Variable 15 und Sie möchten fünf davon subtrahieren Sie können entweder eine solche Einstellung haben, in Ordnung. Ich speichere das und du wirst zehn hier sehen, okay, oder du kannst das auskommentieren, und du wirst dieselbe Ausgabe hier sehen, wenn du diese Abkürzungszuweisung verwendest diese Abkürzungszuweisung Es führt also im Wesentlichen zuerst die Subtraktion von der Variablen durch und dann weist es der Variablen den Wert zu, und wir drucken ihn dann Das ist es also, was Subtraktionszuweisung ist. Als nächstes kommt die Multiplikationszuweisung . Okay. wie eine Kurzversion der Multiplikation eines Werts mit sich selbst Es ist auch eine ähnliche Version, wie eine Kurzversion der Multiplikation eines Werts mit sich selbst, okay? Im Wesentlichen multiplizieren Sie tatsächlich einen Wert einer Variablen und weisen diesen Wert dann derselben Variablen zu Okay? Nun, das entspricht, wie Sie hier in den Kommentaren sehen können, D gleich D in zwei, also werde ich das zuerst demonstrieren. Okay. Sie werden sehen, dass die Antwort 12 ist. Okay? Aber wenn ich das auskommentiere und wenn ich das auskommentiere, siehst du in der Ausgabe wieder 12 selbst Das bedeutet also, dass es sich zu D erweitert, was gleich D zu zwei ist Okay. Und das ist nur eine weitere Kurzform, in der man dasselbe vorführt, aber auf eine kurze und präzise Art und Weise Sie haben etwas, das als Divisionszuweisung bezeichnet wird, wenn Sie das hier sehen Okay? Auf ähnliche Weise können Sie einen eine Variable oder einen Wert in einer Variablen durch etwas teilen Variable oder einen Wert in einer Variablen durch etwas und das Ergebnis dann der Variablen selbst zuweisen. Okay? Also, wenn ich das speichere, siehst du die Ausgabe als fünf, okay? Das sind also alle Zuweisungsoperatoren , die es in JavaScript gibt. 19. Vergleichsoperatoren: Jetzt ist es an der Zeit, über die Vergleichsoperatoren in JavaScript zu sprechen über die Vergleichsoperatoren in JavaScript zu und zu sehen, was die einzelnen Operatoren bedeuten. Also gehen wir die Liste durch und sehen uns ein paar Beispiele an. Also werden wir zuerst über den Gleichheitsoperator sprechen. Was ist nun der Gleichheitsoperator? Natürlich vergleicht der Gleichheitsoperator zwei Operns und gibt eine Pollan-Ausgabe zurück Nun, eine Sache, die ich hier hervorheben möchte, alle Vergleichsoperatoren geben dir als Ergebnis einen booleschen Wert , weil sie für Vergleiche verwendet werden, oder? Das sagt die Kategorie, Vergleichsoperatoren. Also ob ihr Vergleich wahr oder falsch ist. Das wird das Ergebnis sein. Als Beispiel kann ich hier Console Dot Log sagen , okay? Und ich kann sagen, dass fünf hier gleich fünf ist. Sie können sehen, dass der Wert wahr ist. Wenn ich das jetzt mit sechs mache , erhalte ich natürlich einen falschen Wert. Nun, das kann sogar mit Variablen funktionieren. Nehmen wir an, wir haben A und B hier drüben und P hat sechs. Okay? Und wenn ich diese Zeile dupliziere, kann das auch mit den Variablen hier funktionieren. Also kann ich hier P sagen, und das kann A sein. Sie werden also sehen, dass die Ausgabe falsch ist. Okay? Aber wenn ich das auf Pi ändere , wird die Ausgabe natürlich wahr sein. Okay? Nun, so funktioniert ein Vergleichsoperator. Was passiert nun, wenn Sie eine Zeichenfolge im Vergleich haben? Nehmen wir an, ich mache Console Dot Log, fünf entspricht sechs. Wenn ich das in eine Zeichenfolge umwandle, nehmen wir an, das ist keine Ganzzahl, sondern das ist tatsächlich eine Zeichenfolge, oder? Lassen Sie mich Ihnen nun auch zeigen , dass es auch eine Zeichenfolge ist. Also Console Dot Log hier drüben. Ich werde Typus von ihr gebrauchen. Du kannst sehen, dass das eine Zeichenfolge ist, oder? Wenn ich auf diese Weise einen Vergleich anstelle, werden Sie sehen, dass ich hier Stürze bekomme. Okay. Also, was passiert, wenn ich das im Grunde auf fünf umrechne , so? Das wird mir Wahrheit geben. Okay? Ich verschiebe das einfach bis zum Ende. Das ist also auf der Konsole leichter zu sehen. Die Ausgabe hier ist also wahr. Nun, warum ist es wahr? Weil du hier die Zahl Ups benutzt. Hier benutzt du eine Zahl, und hier ist das eine Zeichenfolge. Warum ist es wahr? Denn was passiert, ist intern, es findet eine Umwandlung von einer Zeichenfolge in eine Zahl statt, und so wird diese Sache gehandhabt. Alles klar? Also das wäre die Ausgabe, oder? Ich hoffe, das macht Sinn. Es geht also um Gleichheit, okay. Jetzt haben Sie etwas, das man strikte Gleichheit nennt. Jetzt unterscheidet sich das von anderen Programmiersprachen wie Java. Wenn Sie nach dem Erlernen von Java kommen, gibt es etwas, das für Sie neu sein wird. Okay? Also was passiert ist, wir sagten, wenn Phi der String-Version von fünf entspricht, wird es als wahr gedruckt, oder? Was passiert nun, wenn ich den strikten Gleichheitsoperator verwende, was gleich dreimal bedeutet. Alles klar? Also, wenn ich das speichere, bekommst du eine falsche SE-Ausgabe. Okay. Strikte Gleichheit funktioniert also so sie auch überprüft, ob der Wert verglichen wird, und es wird auch der Typ überprüft, was bedeutet, dass keine Typkonvertierung durchgeführt wird. Und wenn es sich bei den Werten um unterschiedliche Typen handelt, gibt der Vergleich sofort den Wert Falsch zurück. Okay? Denn obwohl die Werte identisch sind, ist der Typ unterschiedlich. Das wird also scheitern. Alles klar? Also, wenn das aus irgendeinem Grund sechs sind, wird dir das auch eine Falschmeldung geben. Damit das wahr ist, wenn das wahr ist, muss es vom gleichen Typ sein, muss es vom gleichen Typ sein, und dann wirst du hier wahr. In Ordnung. Nun, behalte diese Sache im Hinterkopf, Ordnung, diese Gleichheit, strikte Gleichheit wie diese Sache hier drüben, die implizite Konvertierung hier drüben oder die automatische Umwandlung hier von einer Zeichenfolge in eine Zahl. Okay, behalten Sie diese Dinge im Hinterkopf, denn wenn Sie aktuelle JavaScript-Programme schreiben, echten Ja-Script-Code, dann werden Sie diese Vergleichsoperatoren unter den gegebenen Bedingungen häufig verwenden, und das ist der Punkt, an dem das wichtig wäre, oder ? Ja-Script-Code, dann werden Sie diese Vergleichsoperatoren unter den gegebenen Bedingungen häufig verwenden , und das ist der Punkt, an dem das wichtig wäre, oder Das ist also strikte Gleichheit. Denken Sie daran, dass strikte Gleichheit strikt ist. Alles klar? Der Name sagt, dass es streng ist, und es prüft sowohl den Typ als auch den Wert. Wenn der Typ hier also derselbe ist, weil beide Zeichenketten sind, wenn ich den Wert ändere, sehe ich, dass das jetzt falsch ist. Okay? Also ich hoffe, das macht Sinn. Okay, was ist strikte Gleichheit? Und Gleichheit ist nicht streng, okay? Weil der Name nichts Strenges enthält. Also wird es tatsächlich den Wert sehen. Und wenn die Werte unterschiedlichen Typs sind, wird es konvertiert. Ich werde eine Konvertierung durchführen und dann wird das Ergebnis angezeigt, oder? Das ist also der Unterschied zwischen zwei. Dann hast du Ungleichheit. Nun, Ungleichheit ist ziemlich einfach. Okay. Also gebe ich dir ein Beispiel. Okay? Ich werde keine Variablen erstellen, aber ich gebe Ihnen hier gleich ein Beispiel. Also ist fünf gleich drei? Was denkst du wäre das Ergebnis? Fünf ist gleich drei. Ausgabe wäre natürlich falsch, wie Sie sehen, fällt hier ab. Fünf ist nicht gleich drei. Nein gleich drei, nicht drei. Es tut mir leid. Also, wenn du das hier in Ungleichheit umrechnest, o und wenn du das speicherst, bekommst du zwei als Ausgabe, weil das genau die Umkehrung von Gleichheit ist. Okay? Also hier prüfen wir, ob die Werte nicht beide gleich sind. Wenn sie einander gleich sind, wird das hier zu Stürzen führen. Richtig. Ich hoffe, das macht jetzt Sinn, okay? Das ist also Ungleichheit. Dann haben Sie etwas, das als strikte Ungleichheit bezeichnet wird. Was ist nun strikte Ungleichheit? Natürlich haben wir eine strikte Version von Gleichheit gesehen. Das ist eine strikte Abneigung gegen Ungleichheit. Einfach. Okay. Also hier, wenn du siehst, okay, lass mich diese Zeile duplizieren, okay? Also, wenn ich diese Zeile jetzt dupliziere , wird uns das natürlich falsch machen. Okay. Aber wenn das eine Zeichenfolge ist, dann wird uns das auch eine Falschmeldung geben. Okay? Weil beide einander nicht gleich sind. Okay? Also, was passiert, wenn ich zur strikten Ungleichheit übergehe, okay? Wenn ich so etwas mache, wirst du sehen, dass das wieder wahr ist. In Ordnung. Jetzt natürlich hier, wo wir es mit der normalen Ungleichheit gemacht haben , ohne Strict zu verwenden. Okay. Also hier wurde nur der Wert verglichen und nicht der Typ. Aber hier wird auch der Typ verglichen. Der Wert ist also derselbe, aber der Typ ist nicht gleich, deshalb gibt er true zurück. So funktioniert es. Ich hoffe, das macht Sinn, oder? Und wenn ich das hier drüben dupliziere, dann wirst du natürlich sehen, ob ich das auf fünf ändere. Okay, du wirst wieder wahr sehen, okay? Aber wenn das jetzt fünf ist, okay, wenn ich das auf fünf ändere, so etwas, wirst du sehen, dass es hier fällt. Okay. Also das ist strikte Ungleichheit, okay? Das ist die strikte Version, und das ist eine lockere Version. Normalerweise werden Sie also im Internet verschiedene Begriffe finden, die mit diesen Begriffen Gleichheit verlieren, Ungleichheit verlieren, strikte Ungleichheit, strikte Ungleichheit verwendet werden. Alles klar? Dann hast du mehr als weniger. Okay? Also mehr als eine Lektion sind ziemlich einfach. Lass mich diese Hops kopieren. Lassen Sie mich diese beiden kopieren. Okay. Ich komme her und füge ein hinzu, ich wandle das in Kommentare um, okay? Schauen wir uns das jetzt an, okay? Das ist also ein ziemlich einfaches Punktprotokoll für die Konsole. Okay. Ich fünf mehr als drei. Ist es? Nach dem Vergleich gibt dieser Operator „ Größer als“ also Operator „ Größer als ein boolesches Ergebnis zurück Also ist fünf größer als drei, ja. Also würde es wieder wahr werden, oder? Du kannst die Wahrheit hier drüben sehen. Okay. Nun, wenn ich auf der rechten Seite eine größere Zahl hinzufüge. Okay? Nehmen wir an , wir haben sieben. Und wenn ich das speichere, wird es doppelt zurückgegeben , weil fünf nicht mehr als sieben ist. Das ist größer als. ist weniger als genau das Gegenteil davon, okay? Und ich füge hier einfach immer weniger hinzu. Okay, Sie können sehen, dass der Zustand jetzt umgekehrt ist. Die frühere Bedingung ist also falsch, und dann ist sie wahr, weil sieben größer als fünf ist Ist drei größer als fünf? Nein. Entschuldigung, bin ich drei größer als fünf? Ja, also ist es das eigentlich nicht, oder? Also ist es weniger als tatsächlich. Deshalb gibt es eine falsche SE-Ausgabe. Ordnung. Also ich hoffe, das macht Sinn. Also hier drüben, das ist eine Version von größer als und kleiner als, okay? Das heißt also, das gleiche Symbol darin zu haben. Ich werde auch vergleichen, um das Gleiche zu tun. Wenn Sie dieses Beispiel hier nehmen, wenn Sie fünf auf beiden Seiten haben. Okay? Was ist die Leistung , die Sie erwarten können? Sie können hier sehen, dass Sie hier eine falsche Ausgabe erhalten . Okay? Falsch, weil beide tatsächlich gleich sind. Diese Bedingung stimmt also nicht überein. Aber wenn Sie diesen Wert hier gleich oder kleiner als oder gleich aktualisieren . Das wird wieder wahr sein. kannst du sehen. Okay. Du kannst sogar hier drüben davon Gebrauch machen, du kannst sehen, dass es wieder wahr wird. Okay. Also ich hoffe, das macht Sinn in Bezug darauf, wie dieses Ding funktioniert, und ich hoffe, Sie sind sich über Vergleichsoperatoren im Klaren. Denken Sie also daran, dass Vergleichsoperatoren nach dem Vergleich der Operanten einen booleschen Wert zurückgeben nach dem Vergleich der Operanten einen booleschen Wert Vergleich Jetzt gibt es mehrere Vergleichsoperatoren wie Gleichheit und Ungleichheit Wir haben eine strengere Version davon, die auch den Typ berücksichtigt weil die normale Version den Typ nicht berücksichtigt, oder? Dann haben Sie mehr als weniger als größer als gleich oder kleiner als gleich Ordnung? Also ich hoffe, das hat Sinn gemacht und ich hoffe, es war nützlich 20. Logischer Operator: Jetzt ist es an der Zeit, dass wir anfangen über die logischen Operatoren zu sprechen. Nun gibt es drei logische Operatoren, und das werden wir untersuchen. Was sind also zunächst logische Operatoren? Logische Operatoren werden also verwendet, um mit Pollan-Werten zu arbeiten, was wahr und falsch ist, und sie ermöglichen es Ihnen, diese Werte zu kombinieren oder aufzurufen, Es gibt also drei davon. Sie können sehen, was logisch ist und was mit diesem bestimmten Symbol dargestellt wird . Sie haben logisches oder, was auf diese Weise dargestellt wird, logisches Nichts, das durch einen Ausruf dargestellt wird durch einen Ausruf dargestellt In Ordnung. Lassen Sie uns also über Logik und Operator sprechen. Was ist nun logisch und operativ? Neun Kommentare, ich habe einige Punkte zur Logik hinzugefügt sodass der logische Operator und überprüft ob beide Bedingungen zutreffen. Okay? Zuallererst funktioniert es unter zwei Bedingungen Das müssen Sie hier beachten. Beide Bedingungen, das heißt, es funktioniert unter zwei Bedingungen, und wenn beide wahr sind, dann ist die Ausgabe wahr. Okay? Sie können also sehen, dass es nur dann wahr zurückgibt , wenn beide wahr sind. Andernfalls wird False zurückgegeben. Okay? Wenn ich das anhand eines Beispiels demonstrieren muss, sage ich hier Console Dot Log. Okay? Stimmt. Und Sie können logische und hier drüben verwenden und Sie können die booleschen Werte einfach fest codieren Okay. Ich kann mir das Ergebnis als wahr ansehen. Okay? Also, wenn ich diese Zeile dupliziere und wenn hier eine falsch ist, dann siehst du in diesem Fall falsch als Ausgabe. Um also die Wahrheit daraus zu machen, müssen beide wahr sein. Okay? Also, wenn einer von beiden falsch ist, wird das Ergebnis quasi falsch sein. Okay? Also wenn ich hier falsch sage, wirst du sehen, dass es falsch wird, weil beide falsch sind, oder? Nun, wenn der erste falsch ist, obwohl Sie eine falsche SA-Ausgabe erhalten. Wir werden also nur in einem Fall wahr , wenn beide wahr sind. Okay? Also, das ist sehr nützlich, wenn du zwei Bedingungen bewerten willst, okay? Nun, diese beiden Werte oder zwei Operanten, mit denen wir arbeiten können jede Art von Ausdruck sein , der zu einem booleschen Wert ausgewertet wird Okay? Lassen Sie mich Ihnen jetzt ein Beispiel geben. Nehmen wir an, Sie erstellen ein Programm und nehmen wir an, es handelt sich um eine Website , die für die Verwaltung eines Konzerts bestimmt ist. Okay? Stellen Sie sich vor, um sich für das Konzert einzuloggen, benötigen Sie sowohl Ihre Tickets als auch den Ausweis. Okay? Also was ich machen werde, ist hier drüben, ich werde ein Beispiel hier drüben schreiben lassen. Okay. Beispiel. Okay. Nehmen wir an, wir haben Tickets als eine der booleschen Variablen Okay. Nehmen wir an, der Anfangswert ist wahr. Okay. Und nehmen wir an, ich habe noch eine Variable, nämlich die ID. Also, ob der Benutzer eine ID hat oder nicht und ob der Benutzer Tickets hat oder nicht, das hilft uns, den Überblick zu behalten, oder? Jetzt sage ich hier „Console Dot Log“. Okay. Ich möchte ein Mandat haben, dass der Benutzer beide haben sollte. Wenn es also ein Mandat gibt, müssen beide Bedingungen erfüllt sein oder beide Voraussetzungen erfüllt sein, damit der Ausdruck als wahr bewertet wird, dann benutzt man ihn und operiert hier. Also ich sage, hat Tickets und hat einen Ausweis. Und ich werde das speichern. Jetzt werden Sie hier als C-Ausgabe true sehen , weil beide wahr sind. Nun, wenn einer von beiden falsch ist, so lass mich seine ID auf die von hier drüben aktualisieren. Okay? Ich sage, es hat keinen Ausweis, sagen wir, und ich drucke das Ergebnis erneut aus. Also wirst du hier Fälschungen sehen. Okay? Also so funktioniert es. Jetzt verwenden wir hier Variablen, okay? Nun, das kann hier jede Art von Ausdruck sein. Okay? Das kann ein beliebiger Ausdruck sein, der natürlich den Wert A Pollan ergibt. Okay? Wenn ich dir ein Beispiel geben muss, okay, sagen wir hier, anstatt dass es Tickets gibt, sagen wir, ich habe fünf, mehr als drei. Okay. Ist fünf größer als drei? Ja. Okay. Nehmen wir an, ich habe noch ein Beispiel oder hier noch einen Ausdruck, fünf größer als sechs. Ist fünf größer als sechs? Absolut nicht. Okay? Also wird das als A-Ausgabe False ergeben , weil dieser zweite Ausdruck False zurückgibt. Und wenn ich das speichere, siehst du False als A-Ausgabe. Okay? So logisch und kann in Ausdrücken und bei komplexen Entscheidungen verwendet werden. Ordnung. Wenn Sie jetzt anfangen, komplexe Programme zu schreiben, werden Sie diese logischen Operatoren natürlich häufig verwenden. Okay? Also ist es am besten, das Konzept zu verstehen. Logisch und wir sind fertig, was logisch ist und um es zusammenzufassen und wir werden überprüfen, ob beide Bedingungen wahr sind Es funktioniert mit zwei booleschen Werten als Operatoren, und diese booleschen Werte können auch aus den Ausdrücken abgeleitet werden Ausdrücken abgeleitet Okay? Also, es geht um ein logisches. Lassen Sie uns nun über Logik sprechen. Was ist nun logisch oder? Ich füge hier einen Kommentar als Definition von logisch hinzu oder so, dem logischen Operator oder Operator, okay, der logische Operator oder sagt, dass er prüft, ob mindestens eine Bedingung wahr ist, okay? Also der Operan, an dem er arbeitet, sollte mindestens einer wahr sein, damit er wahr zurückgibt Also und war sehr streng, okay, und sagte, dass beides wahr sein sollte Aber O ist ein bisschen nachsichtig. Es heißt, dass mindestens eine Bedingung wahr sein sollte, und damit bin ich einverstanden, okay? Es gibt also wahr zurück, wenn mindestens eine der Bedingungen wahr ist. Wenn beide falsch sind, wird falsch zurückgegeben. In Ordnung. Um das zu demonstrieren, kopiere ich dieses Beispiel hier drüben, diese Eingabe, die ich gemacht habe. Okay, und wir werden alles durch oder hier ersetzen. Nun, das sind im Wesentlichen zwei Pfeifensymbole. Sie können diese Pfeifensymbole sehen. Ich füge das hinzu. Oops, okay, und das ist erledigt. Nun, das Erste, das wird wahr werden. Das wird auch wahr werden. Das wird auch wahr sein. Nun, diese drei Aussagen werden uns als wahr erweisen, weil in diesem Fall mindestens einer der Punkte hier wahr ist Und das wird uns falsch machen , weil beide falsch sind Okay? Also wenn ich das speichere, wirst du sehen, wahr, wahr, wahr, und dann gibt es uns falsch. Nun, wie kann das verwendet werden? Stellen Sie sich also vor, Sie erstellen ein Programm, das Ihnen bei der Entscheidung hilft, ob Sie draußen spielen sollten oder nicht. Okay? Nehmen wir an, du gehst draußen spielen, entweder wenn es sonnig ist oder du einen Regenmantel hast. Ein sehr einfaches Beispiel Okay? Also, wir nutzen oder operieren hier, weil diese Aussage besagt, dass ich draußen spielen kann, wenn es entweder sonnig ist oder ich einen Regenmantel habe, richtig? Es heißt nicht, ob das Wetter sonnig ist und ich einen Regenmantel Wenn da und steht, setzen wir nur dann einen Operator ein. Aber im Moment heißt es entweder. Die Wahl liegt also natürlich beim logischen Operator. Also werde ich sagen, dass es hier sonnig ist. Okay. Ist es draußen sonnig? Ich sage Falso, und tut mir leid, es hat keinen Regenmantel Okay. Dann sage ich hier drüben wahr, so etwas in der Art. Okay. Und ich werde hier ein Punktprotokoll für die Konsole machen. Okay. Und ich würde sagen, es ist sonnig und hat einen Regenmantel Okay, ziemlich einfach. Was wäre die Ausgabe? Die Ausgabe sollte wahr sein. Ich kann spielen gehen, weil die Bedingung war dass es entweder sonnig sein muss oder ich entweder den Regenmantel brauche Die Ausgabe ist also wahr. Okay, hier kann ich sehen ob ich den Wert von Has Raincoat, sagen wir, auf False ändere Has Raincoat, sagen wir, auf False Jetzt habe ich keinen Regenmantel mehr und es ist nicht mal sonnig In diesem Fall wird False zurückgegeben. Okay? Also im Falle der Entscheidungsfindung wird das viel genutzt werden, oder? Ich hoffe das macht Spaß. Der dritte logische Operator, über den wir sprechen sollten, ist logisches Nichts. Nun kehrt der logische Nulloperator den Wert im Grunde genommen in einen booleschen Wert Wenn es also wahr ist, wird es in falsch geändert, und wenn es falsch ist, wird es in wahr geändert, wie es in der Aussage heißt . Okay? Lass uns das testen. Also wenn ich Konsole sage, logge dich hier ein. Okay. Also, wenn ich hier „ wahr“ sage, wird es als wahr gedruckt, wie Sie sehen können, oder? Es wird wahr gedruckt. Aber nehmen wir an, ich möchte drucken ich möchte das mit einem logischen Operator invertieren, also heißt es hier falsch, okay? Eine andere Frage ist, warum sollten Sie diesen Nein-Operator verwenden wollen diesen Nein-Operator verwenden Was sind die Anwendungsfälle? Ich gebe dir ein Beispiel, oder? Es gibt viele Szenarien , in denen dieser Operator verwendet werden kann. Nehmen wir an, Sie möchten drinnen bleiben, wenn es nicht regnet, oder Sie möchten ausgehen, wenn es regnet Nehmen wir an, du möchtest eine Entscheidung treffen , okay? Und ich lasse es regnen, weil alles vom Regen abhängt, oder? Meine Entscheidung. Also werde ich eine Variable erstellen. Ich weise es einem booleschen Wert zu. Okay? Und ich sage, wir sollten drinnen bleiben. Okay, so etwas. Also, der Wert davon wäre nicht Regen. So etwas in der Art. Okay. Und ich kann das Konsolenprotokoll haben und ich sollte drinnen bleiben. Okay? Also regnet es Nein, das liegt nicht daran, dass dieser Wert falsch ist. Also sollte ich drinnen bleiben? Ja, solltest du. Das kannst du sehen. Nun, falls es hier regnet. Solltest du drinnen bleiben? Nein. Du kannst sehen. Ich würde sagen , dass Boolean keinen logischen Knoten darstellt logische Knotenoperator funktioniert, richtig, und er funktioniert auf eine Weise , die Ihnen hilft, eine bestimmte Bedingung umzukehren Er wird auch häufig bei der Entscheidungsfindung verwendet, und wenn Sie anfangen, Ja-Script-Code zu schreiben, werden Sie mehrere Anwendungsfälle dafür sehen Ordnung? Also, hier geht es um den Knotenoperator Ich möchte hier auch ein weiteres Konzept hervorheben. Bei dem Konzept geht es nun um boolesche Ausdrücke. Was sind also boolesche Ausdrücke? Ein boolescher Ausdruck ist ein Ausdruck , der zu einem booleschen Wert ausgewertet Okay? Also wenn du hier rüber scrollst. Okay, das ist ein boolescher Ausdruck. Okay. Sie haben das als booleschen Ausdruck, als booleschen Das Ganze ist ein boolescher Ausdruck, weil es einen einzigen booleschen Wert ergibt , richtig? Das sind also alles boolesche Ausdrücke, die mit logischen Operatoren und oder und nicht konstruiert werden mit logischen Operatoren und oder und nicht konstruiert Ordnung. Also ich hoffe, du konntest mir folgen, und ich hoffe, das war nützlich. 21. Ternäre Operatoren: Jetzt ist es an der Zeit, dass wir über ternäre Operatoren sprechen Was ist nun der ternäre Operator? Sie können also hier den bedingten Operator sehen. Es ist also eine sehr kurze Methode, schnelle Entscheidungen zu treffen oder zwischen zwei Werten zu wählen, okay? Und hier können Sie sehen, dass das die Syntax ist. Lassen Sie mich das anhand eines Beispiels demonstrieren , ok? Nehmen wir an, ich habe eine Variable. Sagen wir, nennen wir es X, in Ordnung. X hat also einen Wert von zehn. Okay? Nehmen wir an, ich habe einen Pullen-Gesichtsausdruck. Okay? Also kann ich hier Pollen sagen ohne einen Pollan-Ausdruck zu Ich kann sofort eine Nachricht hier drüben haben. Okay? Nehmen wir wenn X größer als fünf ist, möchte ich drucken, X ist größer als fünf, se, ich möchte drucken, dass X nicht größer als fünf ist, oder? Also was ich tun würde wäre, wenn ich hier eine Krankheit hätte, okay? Wir werden dieselbe Syntax verwenden. Okay? Ich kopiere das. Okay, was ist der Zustand? Bedingung ist X größer als fünf. Das ist es, wonach wir suchen, oder? Wenn X also größer als fünf ist, heißt es in diesem Teil, wenn diese Bedingung erfüllt ist, dann wird sie ausgewertet oder sie wird verwendet. Wenn diese Bedingung falsch ist, wird daran gearbeitet. Oder das wird benutzt. Okay? Was auch immer es da drüben ist. Okay? Zustand ist also etwas, das wir hier hinzugefügt haben. Zustand wurde hinzugefügt. Was ist Wert eins? Wenn X größer als fünf ist, wollte ich eine Nachricht drucken. X ist größer als fünf, vorerst okay. Und wenn es falsch ist, nehme ich, dass X weniger als fünf ist, ungefähr so. Ups. Also ja Okay. Und was ich tun werde, ist, Console Dot Log zu sagen und Nachricht hier drüben auszudrucken. Okay. Nun, was denkst du wäre das Ergebnis? X ist zehn, also sollte es sein, dass X größer als fünf ist. Wenn ich das speichere, wirst du sehen, dass X größer als fünf ist. Okay? Wenn nun der Wert von X auf den Wert von vier reduziert wird, werden Sie sehen, dass X kleiner als fünf ist. Okay? Also treffen wir hier Entscheidungen, okay? Wir sind Altstspace hier drüben. Wir treffen hier Entscheidungen mit Hilfe des ternären Operators. Okay. Nun, hier, in diesem ganzen Ausdruck, brauche ich nicht, dass das in einer runden Klammer eingeschlossen Sie können also sehen, dass das auch in Ordnung ist. Aber normalerweise ist es eine gute Praxis , die Bedingung zu haben, dass Sie hier in Klammern oder, ich sollte sagen, in runden Klammern schreiben . Okay? Wenn Sie das speichern, werden Sie sehen, dass dies die Ausgabe ist und die Ausgabe nicht beeinträchtigt wird. In Ordnung. Hier können Sie anstelle eines Booleschen Ausdrucks sogar einen booleschen Wert Okay. Also ich kann hier einfach true eingeben und Sie können sehen, dass X größer als fünf ist. Und wenn ich hier falsch sage, siehst du, dass X weniger als fünf ist. Okay? Ich mache einfach das Kontrollset und wir bringen unseren Pollenausdruck zurück, den wir hatten. Okay? Also das ist der ternäre Operator Wenn die Bedingung also wahr ist, wird der Wert, der wahre Wert zurückgegeben. Das ist der wahre Wert. Und wenn die Bedingung falsch ist, wird dies zurückgegeben. Okay? Und all das steht zwischen einem Fragezeichen und einem Doppelpunkt Sie können die Syntax hier sehen. Okay. Also ja, das ist ein ternärer Operator Lassen Sie mich Ihnen nun ein Beispiel geben. Okay. Lassen Sie uns ein einfaches Programm schreiben, das prüft, ob der Wert boolesch ist oder nicht oder, sorry, kein Der Wert O ist gerade oder nicht, eine Zahl ist gerade oder nicht. In Ordnung. Hier können wir also den ternären Operator verwenden. Nehmen wir an, ich habe diese Nummer vier. Okay. Und was ich tun würde, ist, dass ich hier ein Ergebnis hätte . Nun, was ist ein Ergebnis? Okay, das Ergebnis wird also tatsächlich der Rest nach der Division durch zwei sein. Okay? Also, was ist eine gerade Zahl? Eine gerade Zahl ist eine Zahl, die durch zwei teilbar ist, oder? Also werde ich hier einfach Zahl sagen. Okay? Prozentsatz zwei ist gleich Null. Und ich mache von strikter Gleichheit Gebrauch. Okay? Also das hier drüben wird jetzt ein boolescher Wert Okay? Ich lagere jetzt nicht den Rest hier drüben. Ich speichere nur einen booleschen Wert, der das Ergebnis dieses Ausdrucks ist Okay? Und 1 Sekunde. Also hier, ich kann sagen, lass EX P hier drüben. Okay? Das ist was es ist. Okay. Und jetzt kann ich sagen, ob EXP wahr ist, dann können Sie die Ausgabe als gerade angeben, oder Sie können die Ausgabe als ungerade ausgeben, ungefähr so Und du kannst das speichern und es sollte zurückkehren. Okay, wir drucken hier kein Ergebnis, also muss ich das Ergebnis auch drucken. Ups, ich muss das auf eine neue Linie bringen, richtig, und ich muss ein Ergebnis erzielen Jetzt ist die Ausgabe gerade, und wenn es hier zum Beispiel fünf sind, wäre die Ausgabe ungerade Okay? Anstatt EXP als Variable zu verwenden, können Sie den gesamten Ausdruck hier rausschneiden gesamten Ausdruck und dann hierher bringen Okay, das ist auch machbar. Ich werde das loswerden Okay. Das ist jetzt machbar. In Ordnung. Sie können sehen, wie diese Ausgabeausgabe einwandfrei funktioniert. Okay? Also ja, das ist das Programm. Wir prüfen derzeit , ob die Zahl wahr ist oder nicht. Okay? Also die Entscheidungsfindung ist ein wirklich wichtiger Teil des Programms. Nehmen wir an, Sie bauen einen E-Commerce-Shop und möchten, dass ein Rabatt nur für einige privilegierte Mitglieder gilt . Sie können also diese Art der Entscheidungsfindung treffen. Wenn ein Mitglied privilegiert ist, handelt es sich um einen Rabattwert. Ist dies nicht der Fall, handelt es sich um einen Rabattwert. All diese Arten der Entscheidungsfindung machen also einen großen Teil Ihrer JavaScript-Programmierung aus , und nicht nur Jaw-Skript , jede Programmierung Okay, bei der Entscheidungsfindung dreht sich alles darum, okay? Ich hoffe, Sie sind sich über den bedingten Operator oder ternären Operator im Klaren . Ich sollte sagen, er ist übrigens auch als bedingter Operator bekannt, okay, an einigen Stellen, aber ich nenne ihn lieber ternär In Ordnung? Nun, eine weitere Sache, über die ich hier in Bezug auf Ternär sprechen möchte über die ich hier in Bezug auf Ternär sprechen ist, dass Sie sogar verschachtelte ternäre Operatoren haben können Also, was ist ein verschachtelter ternärer Operator, okay? Also füge ich hier ein Beispiel hinzu. Nehmen wir an, wir erstellen eine Anwendung und möchten das Alter auf mehreren Ebenen bewerten. Okay? Also, wenn das Alter unter 13 ist, okay, wir sagen, dass die Person ein Kind ist. Okay? Wenn das Alter unter 20 ist, okay, dann sagen wir, die Person ist ein Teenager, o. Und wenn das Alter unter 20 liegt, als Sie sagen können, oder über 20. Okay, wir sagen, dass er erwachsen ist. Okay. Also hier werden es nicht weniger als 20 sein, aber das werden 13-20 sein. Okay? Also, wenn er 13 bis 20 Jahre alt ist, ist er ein Teenager, und wenn älter als 20 ist, ist er ein Erwachsener Wie würden Sie das mit Hilfe des Turnary-Operators machen? Lass es mich dir zeigen Okay? Also zuerst sage ich, Alter ist gleich, ich habe einen Wert für Alter. Nehmen wir an, es ist 16. Okay? Nun, wie lautet die Syntax des ternären Operators Das ist eine Syntax. Ich hole mir die Syntax, okay? Ich werde es tun, also nennen wir es Kategorisierung, Kind, Teenager, Erwachsener Okay? Also ich sage, die Kategorie hier ist gleich und das ist Syntax. Also die erste Bedingung ist, dass du weniger als 13 Jahre alt bist, richtig? Das Alter liegt also unter 13 Jahren, es ist besser, das in runden Klammern anzugeben. Das werde ich tun. Was sagen wir, wenn das Alter unter 13 ist? Wir nennen das hier als Kind. Okay. Also das ist ein Kind, oder? Also, ich drehe die Lücken um und das ist T. Okay? Nun, was ist Wert zwei? Okay? Wert zwei, statt Wert zwei können Sie hier tatsächlich einen anderen ternären Operator starten hier tatsächlich einen anderen ternären Operator Okay. Lass mich dir zeigen, wie. Also hier, du kannst sagen, eine weitere Krankheit hier drüben, ich bin unter 20 Jahre alt. Also eines ist bestätigt Wenn Sie diesen Teil des Codes ausführen, ist er mindestens 13 Jahre alt, oder? Dieser Teil ist bestätigt, richtig? Wenn dieser Teil ausgeführt wird, ist er jünger als 13, oder? Also, du würdest herkommen, fallen, wenn er älter als 13 ist , du würdest nachschauen, ob es weniger als 20 ist. Sind es weniger als 20? Wenn es weniger als 20 sind, dann sagst du, er ist ein Teenager. Etwas wie das hier. Und wenn nicht, würdest du sagen, er ist erwachsen. Verstanden. Das macht Sinn. Lassen Sie mich sehen, ob ich das auf eine neue Linie bringen kann. Das ist jetzt also in einem einzigen Computer lesbar . Lassen Sie mich die Kategorie hier zeigen. Okay. Okay, also füge ich die Kategorie hier hinzu. Okay? Nun, er ist 16 Jahre alt, also kannst du sehen, dass er ein Teenager ist. Okay. Lass mich das Alter auf zehn setzen. Er ist ein Kind. Lass mich mit 22 Jahren alt werden. Er ist erwachsen. Wie funktioniert das? Also schauen wir hier zuerst nach dem Alter. Wenn das Alter unter 13 ist, okay? Er ist ein Kind. Okay? Und wenn das falsch ist, wenn das Alter höher als 13 ist, dann prüfen wir, ob das Alter unter 20 oder mehr als 20 ist ? Okay? Denn jetzt ist diese Bedingung erfüllt, oder? Das ist falsch. Wenn es also in die Fallgruppe kommt, prüfen wir, ob er größer als 20 oder weniger als 20 ist. Wenn er unter 20 ist, sagen wir Teenager, wenn er es nicht ist, sagen wir, er ist erwachsen. So funktioniert es. Und dieses Beispiel hier ist ein Beispiel für einen verschachtelten ternären Operator. Sie können auch hier weiter verschachteln . Sie können auch einen weiteren ternären Operator hinzufügen, und Sie können das einfach weiter richtig machen Es ist jedoch keine gute Praxis, viele ternäre Operatoren zu verschachteln Ein oder zwei sind in Ordnung, okay? Eins ist in Ordnung. Ich würde sogar sagen, dass das okay ist. In Ordnung. Aber darüber hinaus würde ich sagen es ist nicht lesbar und es ist keine gute Praxis. Ordnung. Aber ja, hier geht es um ternäre Operatoren oder bedingte Operatoren, und ich hoffe, Sie sind sich darüber im Klaren Ternäre Operatoren helfen uns, Bedingungen zu bewerten und einige Aktionen in unserem Code auszuführen Ich hoffe, Sie konnten dem folgen, und ich hoffe, das war hilfreich 22. Arrays in JavaScript: Ordnung. Jetzt ist es an der Zeit , über eines der interessanten Themen namens Arrays zu sprechen der interessanten Themen namens Arrays Nun, es wird Szenarien geben, in denen Sie Programme schreiben , in denen Sie nicht nur einen einzigen Wert speichern möchten, sondern stattdessen mehrere Werte eines ähnlichen Objekts speichern möchten , okay? Lassen Sie mich Ihnen nun ein Beispiel geben. Sie können eine Variable erstellen, um Informationen zu einem Schüler zu speichern. Sie können beispielsweise eine Variable namens Rollennummer erstellen , um die Rollennummer eines Schülers zu speichern. Was ist, wenn Sie die Rollennummer von tausend Schülern speichern möchten? Werden Sie 1.000 Variablen erstellen? Absolut nicht. Und dann können Sie Arrays erstellen Arrays können Sie also mehrere Werte in einer einzigen Variablen speichern , okay? Und Sie können Arrays mit Hilfe von eckigen Klammern wie dieser erstellen mit Hilfe von eckigen Klammern wie dieser Wir werden also viel mehr über Arrays sprechen. Lassen Sie mich also ein Array für Sie erstellen. Ich werde ein Array namens Nummer erstellen. Zahlen hier drüben und ich werde eins, zwei, drei und vier hier drüben haben . Okay. Und du kannst es auf diese Weise drucken. Okay. Du kannst Zahlen sagen. Okay. Das gibt dir die Ausgabe als eins, zwei, drei, vier. Jetzt können Sie sogar direkt auf der Konsole Arrays erstellen. Dies ist eine JavaScript-Konsole. Sie können also sagen, dass Num gleich ist, dass ich das hinzufügen kann. Okay. Und du kannst hier drüben in Num drucken, so etwas, du kannst es sehen, oder? Das ist also auch eine Möglichkeit, okay, aber wir bleiben beim Visual Studio-Code. So können Sie Zahlen erstellen Okay, ein Zahlenarray. Und Sie können sogar ein Array von Zeichenketten erstellen. Also kann ich sagen, lasst Früchte. Nehmen wir ein Beispiel für Obst, und Sie können Äpfel haben, oder Sie können eine Banane haben. Du kannst Orange haben. Ordnung. Und Sie können sich hier für Console Lock entscheiden. Okay. Also mache ich Console Log und drucke Früchte. Ups. Und ich speichere das, Sie sehen können, wie die Ausgabe hier drüben. Nun, die Sache ist, Sie haben Arrays erstellt, und das Erstellen von Arrays ist relativ einfach, oder? Nun, wie greifen Sie auf Elemente in einem Array zu? Alles klar? Also, wenn du diese vielen Elemente hast, okay? Das ist eine Liste von Elementen im Array. Nun möchte ich hier erwähnen, dass auf die Elemente in Arrays mit Hilfe eines sogenannten Index zugegriffen werden kann Hilfe eines sogenannten Index Okay? Also Index, also die Position des Elements. Eins ist also an Position Null, weil die Indizes immer bei Null beginnen Okay? Also hast du Null, Eins, Zwei und dann hast du drei in der Reihe. Okay? Nun, wie können Sie diese Indizes oder Positionen nutzen diese Indizes oder Positionen Es ist eigentlich die Position, richtig, die bei Null beginnt Okay, sie sind Null, daraus folgt Null Beast-Indizierung nennen sie, Aber die Frage ist, okay, das ist die Position, das ist der Index , den ich habe, okay Wie nutze ich ihn? Sie können hier also Console Dot Log sagen. Okay? Nehmen wir an, ich möchte auf Zahlen zugreifen und ich möchte auf die Nummer an Position oder Index drei zugreifen, okay? Sie können also sehen, wie vier gedruckt werden. Okay? Ich kann es Obst haben. Ich kann es retten. Okay, also an Position Nummer drei gibt es keine Früchte , weil 01 und zwei. Okay, das ist der Grund, warum wir undefiniert werden, aber du kannst einen hier drüben haben und du wirst Panana hier drüben sehen Okay? JavaScript hat also eine nullbasierte Indizierung, und das ist bei vielen Programmiersprachen üblich Programmiersprachen Wenn Sie von Java kommen, werden Sie sich der Indizierung hier bewusst sein. Okay. Sie können die Array-Elemente sogar mithilfe von Indizes ändern. Okay? So können Sie zum Beispiel, wie ich Ihnen gezeigt habe, mithilfe von Indizes auf die Elemente im Array zugreifen Sie können also Obst sagen und sagen wir , die Frucht an Index eins, ich möchte statt Banane haben, ich möchte Kirsche haben, sagen wir zum Beispiel Okay. Und wenn du dann versuchst, es hier zu drucken, wirst du Cherry als Ausgabe sehen. Du kannst es sehen. Also haben wir das Element am ersten Index hier geändert , das ist die zweite Position im Array. Okay? Also hier geht es um Array. Sie können sogar ein Array innerhalb eines Arrays haben. Sie können also hier eine Art Matrix erstellen. Also kann ich Matrix sagen. Nennen wir es Matrix selbst. Sie erstellen ein Array mit den oberen eckigen Klammern, richtig. Jetzt werden Sie wieder eckige Klammern haben und Sie können eins, zwei, drei sagen. Du kannst noch vier haben, tut mir leid, vier, fünf, sechs, okay. Und du kannst sechs oder sieben haben, tut mir leid, nicht sechs. Es sollten sieben, acht und neun sein. Okay. Und das kannst du ausdrucken. Okay, wir bekommen eine Fehlermeldung, wir können nicht lesen, okay? Okay, das liegt wahrscheinlich daran, dass ich ein Komma vergessen habe, also muss es durch Kommas getrennt werden, und Sie können sehen, dass das Problem behoben Also vergiss das Komma nicht, wenn du versuchst, ein inestd-Array zu erstellen und du kannst es hier in einer Matrix drucken , ungefähr so Und Sie werden die Ausgabe hier sehen. Okay? Also du kannst sehen, es ist ein Array von Arrays Also kannst du es auf diese Weise drucken, Null. Und du wirst sehen, dass zum Beispiel das Array mit dem ersten Index gedruckt wird. Sie können sogar das erste Element drucken. Sie können also so etwas verwenden, doppelte Indizierung, und Sie können hier eine bekommen. Okay. Wenn du eins sagst, ups, nicht Q eins, wirst du sehen, dass zwei gedruckt werden Okay? Also das ist 00, Null Komma eins, Null Komma zwei Okay? Also diese Null steht zuerst für die Zeile, und das steht für die Spalte. Ordnung. Also das werden zwei Komma zwei sein Ordnung. Ich hoffe, das macht Sinn. In Ordnung. So können Sie verschachtelte Arrays verwenden , oder diese werden auch als multidimensionale Arrays bezeichnet Lassen Sie uns nun über einige Methoden sprechen , die uns bei der Arbeit mit Arrays zur Verfügung stehen uns bei der Arbeit mit Arrays zur Verfügung stehen Lassen Sie uns nun über einige der Methoden sprechen , die Entwicklern wie uns zur Verfügung stehen , um Arrays in JavaScript besser zu nutzen, oder Sie können also sehen, dass es mehrere Methoden gibt , wie push ein Element am Ende des Arrays hinzugefügt wird, pop, mit dem das letzte Element entfernt wird, shift, mit dem das erzwungene Element entfernt wird, und shift, dem Elemente am Anfang des Arrays hinzugefügt werden können Elemente am Anfang des Arrays hinzugefügt Slice, das einen Teil eines Arrays kopiert, und dann haben wir Slice, mit dem die Elemente am spezifischen Index hinzugefügt oder entfernt werden können . Schauen wir uns also jeden einzelnen von ihnen einzeln an , oder? Also fangen wir hier drüben mit Push an. Okay, also schieb. Okay. Also, was ist Push? Es heißt, dass es am Ende ein Element hinzufügt. In Ordnung. Nun, bevor wir über Push sprechen, möchte ich Sie auch an eine interessante Eigenschaft erinnern , die dieses Array besitzt, nämlich eine Länge. Okay? Also kannst du die Länge des Arrays und des Ja-Skripts hier wie folgt abrufen. Sie können sehen, wie drei gedruckt werden, was bedeutet, dass Früchte drei Elemente enthalten. Okay? Sie können sehen, dass es drei Elemente hat. Ordnung. Also, wenn Sie ein Element in ein Array verschieben wollen, können Sie sagen: fruits, dot, push, okay, ich kann jedes Element hierher schieben Okay, ich kann wahrscheinlich Orange sagen. Okay, so wie das. Okay. Und ich kann hier Console Dot Log sagen und ich kann Obst sagen. Okay. Wenn du das ausdruckst, siehst du Apfel, Kirsche, Orange, Orange. Orange wurde hier zweimal hinzugefügt. Okay? Wenn ich hier Banane hinzufüge, siehst du Apfel, Kirsche, Orange, Banane. Das ist was es ist. Okay. Also schiebst du ein Element ans Ende des Arrays. Und wenn Sie die Länge des Arrays hier drüben nehmen, ist die Länge nach dem Verschieben des Elements jetzt vier. Vorher waren es drei. In Ordnung. Das sagt uns also, dass die Arrays in JavaScript dynamisch sind, oder? Sie können Elemente hinzufügen und entfernen, und Größe des Arrays kann sich dynamisch ändern Okay? Und die Länge ist eine erstaunliche Eigenschaft , die uns helfen kann, die Länge des Arrays zu ermitteln. Okay? Also hier geht es um Push. Es ist ziemlich einfach. Es wird verwendet, um ein Element an das Ende des Arrays zu schieben. Alles klar? Das steht hier. Dann haben wir Pop. Was ist jetzt Pop? Alles klar. Also die Definition besagt, dass das letzte Element entfernt wird, richtig. Lassen Sie uns nun sehen, wie es uns hilft, das letzte Element zu entfernen. Okay? Also ich kann sagen, ich kopiere das Punktprotokoll der Konsole hierher. Und vor dem Konsolen-Dotlog sage ich Obst, Punkt, ich kann Pop hier drüben sagen. Okay. Und früher hatte es vier Elemente. Jetzt wird es drei haben. So kannst du Apfel, Kirsche und Orange sehen. Okay? Sie können dieses Element sogar in eine Variable einfügen, sodass Sie zum Beispiel Last Fruit sagen können. Okay. Und du kannst sogar die letzten Früchte drucken, die du hast, okay? Das ist auch möglich. Es ist also möglich, das letzte Element zu fangen. Du kannst hier Äpfel, Kirschen, Orangen sehen und du hast Banane als letzte Frucht. Sie können die Definition hier sehen. entfernt das letzte Element aus dem Array und gibt es zurück. Okay? Also kehrt es auch zurück. Wenn das Array leer ist, wird undefined zurückgegeben und das Array wird nicht geändert Okay? Also hier geht es um Pop und das nächste, was du hast, ist Schicht. Was ist nun Shift? Alles klar? Also Shift entfernt das erzwungene Element. Okay? Also wie Pop das letzte Element entfernt, entfernt es das erzwungene Element. Also hole ich das einfach her. Okay, oder ich hole diesen Teil einfach her. Okay. Und diese Sache werde ich vorerst kommentieren und du kannst hier drüben „ Schicht“ sagen. Wenn du das jetzt ausführst, wirst du sehen, dass Apple der Erste war. Jetzt hast du nur noch zwei Kirschen und Orangen. Okay? Du kannst hier sogar die ersten Früchte bekommen. ob wir die letzte Frucht haben, lass die erste Frucht hier drüben. Okay, so etwas. Und lass mich die ersten Früchte drucken, okay, hier drüben. Siehst du, Apfel ist die erste Frucht. In Ordnung. Also wie Pop zurückkehrt, das letzte Element, Shift, wenn Sie den Mauszeiger darüber bewegen, entfernt es das erste Element und gibt es auch zurück Das ist es, was Shift macht. Ordnung. Dann hast du etwas namens Unshift Away, das benutzt wird, um ein Element am Anfang hinzuzufügen Okay? Also lass mich diese Methode hier finden. Okay. Lass uns wechseln. Komm her und lass uns Unhefto hier erleben. Okay? Also, was ich tun kann, ist sagen wir, ich habe Früchte. Also, das ist es, was Früchte enthalten, okay? Was ich tun kann, ist, Obst Punkt und Schicht zu sagen, und ich kann hinzufügen, sagen wir, ich kann Apple hinzufügen. Schon wieder Apple, so etwas in der Art. Okay. Und lass uns drucken. Lassen Sie uns ein Konsolenprotokoll erstellen. Sie können sehen, wie Apple wieder hinzugefügt wird. Okay? Also vorhin hatten wir einen Apfel , der entfernt wurde, okay? Und dann haben wir wieder Apple. Kannst du sehen? Hier drüben. Okay? Also, das wird unverändert hinzugefügt, hat dieses besondere Element hier drüben am Anfang hinzugefügt , okay? Und Sie können sehen, dass ein neues Element am Anfang des Arrays eingefügt wird und die neue Länge des Arrays zurückgegeben Es gibt also tatsächlich die neue Länge des Arrays zurück. Okay? Wenn du willst, kannst du hier „Neue Länge“ sagen. Okay. Und du kannst Console, Dot Log hier drüben sagen und du kannst in neuer Länge drucken , etwa so. Okay. Sie werden die neue Länge des Arrays sehen. Okay, hier drüben. Vorher war es eine Länge von zwei. Jetzt hat es eine Länge von drei. In Ordnung. Also das ist Unshift. Das nächste, was wir haben, ist Slice. Jetzt kopiert Slice einen Teil des Arrays. Lassen Sie uns einen Blick darauf werfen, was das bedeutet, okay? Also das ist ein Stück für uns, okay. Nehmen wir an, wir haben ein Array. Okay, das ist also das Array von vier Elementen. In Ordnung. Lass mich das in Scheiben schneiden, okay? Nehmen wir an, ich möchte die Elemente von Index eins bis zwei schneiden, also von Kirsche bis Orange, okay? Weil es drei Elemente gibt, nicht vier, okay? Lassen Sie mich hier ein Array mit vier Elementen zusammenstellen. Okay? Also kann ich dieses Array hier neu deklarieren, neu erstellen oder es mir zeigen. Okay, deine Orange, ich kann Kirsche oder Erdbeere sehen , so etwas Okay. Jetzt haben wir also Elemente ein Array mit vier Elementen. In Ordnung. was ich tun kann, ist, ich hätte vermieten können, ich kann in Scheiben schneiden und ich kann sagen, dass Obst punktet Ich kann sagen, also hier kannst du es sehen, S. Wenn du S eingibst, hast du Slice Wir verwenden Slice One, Komma Three. Okay. Und du kannst hier Console Dot Log sagen und du kannst Sliced Array sagen Ups. Es heißt also, okay, das wurde bereits deklariert und wir können es nicht wieder verwenden Also ich kann sagen, dass es hier neue Früchte gibt. Okay. Ich hätte den neuen Namen verwenden sollen, okay. Neue Früchte, neue Früchte Ich hebe mir das auf und du kannst Bananen-Orange sehen. Ordnung. Also das ist Index eins und dann ist das Index zwei, und Sie können von hier aus sehen, wie es aufgeteilt Okay? Das ist also das Kopieren des Elements von Index eins nach zwei. Das ist es, was passiert. Okay? Also sehen wir ein Komma drei Also, was es macht, ist 1-2 hier drüben, okay? Die beiden werden in Scheiben geschnitten. In Ordnung. Und wenn Sie mit der Maus darüber fahren, werden Sie sehen, dass es eine Kopie eines Abschnitts eines Arrays sowohl für den Start als auch für das Ende zurückgibt Abschnitts eines Arrays sowohl für den Start als auch für das Ende Und ein negativer Index kann verwendet werden, um einen Offset vom Ende des Arrays anzugeben Wenn Sie also minus zwei sagen, bezieht sich minus zwei auf das vorletzte Element des Arrays. Okay? Was bedeutet vorletzter. Also minus zwei wird hier orange sein. Okay? Es ist eine vorletzte. Ordnung. So kann Slice also verwendet werden. Es wird verwendet, um ein Array im Wesentlichen zu segmentieren. Und dann haben Sie hier Slice, das verwendet werden kann, um ein Element an einem bestimmten Index zu entfernen oder hinzuzufügen. Okay? Also lass mich dieses Stück hier probieren. Okay. Jetzt hast du Obst hier drüben. Also was ich tun werde, ist hier Fruits Dot, Splice zu sagen hier Fruits Dot, Splice Okay. Und was wir tun werden, ist ein Element an Index eins zu entfernen. Okay? Also kannst du ein Element sagen. Okay? Wenn Sie also mit der Maus darüber fahren, werden Sie einige Dokumentationen sehen. Okay. Es akzeptiert also ein paar Parameter. Fangen Sie an, wie viele Werte Sie löschen möchten, okay, und fügen Sie die Zeichenfolge hier ein. Sie können also sehen, dass Start die Null-Basisposition in einem Array bedeutet die Null-Basisposition in , von der aus Sie mit dem Entfernen von Elementen beginnen möchten. Anzahl der gelöschten Elemente gibt an, wie viele Elemente Sie aus dieser Zahl entfernen möchten. Wenn Sie also von Position eins aus sagen, ich möchte zwei entfernen, müssen Sie hier ein Komma zwei hinzufügen, so etwas Ich entferne zwei Elemente von Position eins, okay? Und drittens gibt es ein Element zurück, gibt es ein Element zurück das enthält, was es zurückgibt. Es gibt das Array zurück , das die gelöschten Elemente enthält. Okay? Also lass uns das hier versuchen. Also ich würde hier sagen, ich würde zuerst Console Dot Log hier drüben sagen, und ich werde Früchte eindrucken. Okay? Jetzt entfernen wir zwei Elemente, angefangen bei Position eins, okay? Also, wenn ich das speichere, wirst du wieder sehen, dass Apple nur gedruckt wird. Okay? Also das ist ein Array, das wir hatten. Also entfernen wir zwei Elemente, beginnend mit Position eins. Okay, Sie können also sehen, dass es wieder Apple und Kirsche und Orange gab. bleibt also wieder nur Apple übrig, weil zwei Elemente von Position eins bedeuten am Ende beide Elemente entfernt werden. Okay? Nun, in der Dokumentation steht, dass sie ein Array zurückgibt , das die gelöschten Elemente enthält. Okay? Also kannst du sie tatsächlich bekommen. Sie können sagen, gelöschte Artikel hier lassen. Okay. Und ich kann gelöschte Artikel ausdrucken, quasi hier drüben. Okay? Also kann ich sagen, gelöschte Artikel. Hoppla, und ich kann das speichern und Sie können sehen, das waren die Elemente, die hier gelöscht wurden. Okay? Nun, was ist Magie nach dem Löschen? Wir haben Slice verwendet , um das Element zu löschen. Okay. Jetzt kann dies auch verwendet werden, um Elemente gleichzeitig zu löschen und hinzuzufügen. Nun, wenn ich hier ein Element spezifiziere. Okay, du kannst Artikel sehen. Das sind also Elemente, die anstelle gelöschter Elemente in das Array eingefügt werden sollen. Sie können sehen, dass dies automatisch angezeigt wird. Sie hatten also angefangen, die Anzahl der gelöschten Dateien zu zählen, und jetzt haben Sie eine Liste mit Elementen Ich kann hier also „neuer Artikel“ sagen, und ich kann ihn speichern und Sie werden sehen, dass ein neuer Artikel hinzugefügt wurde. Okay. Lassen Sie mich hier noch einen Punkt hinzufügen. Okay. Ich kann wieder einen neuen Artikel hinzufügen. Und Sie werden sehen, dass Sie anstelle der gelöschten Elemente sogar neue Elemente mit Hilfe von Slice hinzufügen können . Du kannst sehen. So funktioniert es, Spleißen im Grunde, und es ist im Wesentlichen hilfreich das Array nach Ihren Anforderungen zu modifizieren Alles klar? Dies sind einige der Methoden, auf die Sie Zugriff haben. Ich hoffe, Sie konnten dem folgen und ich hoffe, das war hilfreich. 23. Objekte in JavaScript: Jetzt ist es an der Zeit, dass wir anfangen, über Objekte zu sprechen. Nun, was sind Objekte? Objekte in JavaScript ermöglichen es Ihnen also, verwandte Daten und sogar Funktionen zu gruppieren. Ja, wir kommen zum Funktionsteil. Aber vorerst werden wir über den Datenteil sprechen. Objekte ermöglichen es Ihnen also, verwandte Daten und Funktionen zu gruppieren. Ein Objekt wird mit einem Paar lockiger Brisen erzeugt. Wenn Sie also ein Objekt erstellen müssten, würden Sie so etwas erstellen Sie würden sagen, lassen Sie uns sagen, wenn ich einige Daten speichern möchte, die sich auf eine Person beziehen, oder? Ich kann hier also sagen, Person, ich kann ein Paar lockiger Brisen wie dieses haben, und dann könnte ich Schlüssel-Wert-Paare darin haben, wobei jeder Schlüssel auch als Eigenschaft bekannt ist und mit einem Wert verknüpft Ordnung. Also kann ich sagen, was eine Person haben würde? Also kann eine Person eine Menge Informationen haben, okay? Nehmen wir an, ich erstelle ein Programm und möchte die Informationen einer Person speichern. Also entweder kann ich mehrere Variablen erstellen, ich kann sagen, lass Person eins, und ich kann Alter Person einen Namen geben. Dann kann ich für Person zwei sagen, Person zwei, jeder usw., aber das ist nicht der ideale Weg, das zu tun, oder? Stattdessen möchten Sie also ein Objekt haben, in dem Sie verwandte Daten zu einer bestimmten Person gruppieren können . Für Person eins könnte ich also Name sagen und ich könnte den Namen Alice haben, zum Beispiel, o, ich könnte H haben und jeder kann 25 sein. Okay? Jetzt notieren Sie sich hier drüben. Hier drüben ist eine Schnur, oder? Das ist eine Schnur. Das ist keine Zahl. Das ist eine Zahl hier drüben, und ich kann hier auch Boolean verwenden Ich kann also sagen, dass die Person ein Student ist und ich kann sagen, dass wahr hier drüben liegt Okay. Notieren Sie sich also, dass Sie hier Daten verschiedener Typen haben können. Okay. Also zurück, ein Objekt wird mit einem Paar von Abfragesätzen erstellt , wie wir es hier machen, es enthält Schlüsselwertpaare. Das ist also ein Schlüssel und das ist ein Wert. Okay? Jeder Schlüssel wird auch als Eigentum bezeichnet. Das ist also auch eine Eigenschaft des Objekts. Die Person hat also drei Eigenschaften, nämlich den Namen. Du kannst sehen, wenn du den Mauszeiger drüber bewegst, da drüben steht Eigentum, okay? Und es heißt Name und der Datentyp ist Zeichenfolge. Wenn Sie mit der Maus darauf zeigen, wenn ich darauf zeige, ist es Eigenschaft H und der Typ ist Zahl Wenn Sie den Mauszeiger hierüber bewegen, ist die Eigenschaft Student und sie ist boolesch Und wenn Sie mit der Maus darüber fahren, können Sie die gesamte Definition von Person sehen die gesamte Definition von Person Und Sie würden hier den Datentyp anstelle der Werte sehen hier den Datentyp anstelle der Werte Ordnung. Also wird jeder Schlüssel eine Eigenschaft genannt und ihr ist ein Wert zugeordnet, richtig? Das haben wir also getan, indem wir eine Person geschaffen haben. Und um es hier zu drucken, können Sie es natürlich auch in etwa so ausdrucken. Ordnung? Und du wirst sehen, dass das auf der Konsole gedruckt wird. Alles klar? Nun gibt es mehrere Möglichkeiten , auf die Objekteigenschaften zuzugreifen. Ordnung. Also hier drucken wir das gesamte Objekt hier drüben, richtig? Aber wenn Sie auf eine bestimmte Eigenschaft zugreifen möchten, können Sie das sogar tun, und dafür gibt es mehrere Möglichkeiten. Nehmen wir an, ich kann Console Dot Log sagen. Jetzt können Sie etwas verwenden, das als Punktnotation bezeichnet wird. Also Person Dot Age hier drüben. Also drucken wir H als 25. Das ist eine Art, Dinge zu tun. Eine andere Möglichkeit ist, dass ich das duplizieren werde . Eine andere Möglichkeit besteht darin, dass Sie diese Art von Syntax verwenden. Als ob Sie eckige Klammern haben, und darin steht der Name der Immobilie. Sie können es sehen. Und dann können Sie sogar auf diese Weise darauf zugreifen und die Ausgabe auf der Konsole sehen. Ordnung. Das sind also die beiden Möglichkeiten , wie Sie auf Eigenschaften von Objekten in JavaScript zugreifen können . Die Sache ist die, wenn Sie sich den Quellcode online ansehen, werden Sie in den meisten Fällen feststellen, genau das verwendet wird, okay? Wie überall in Ihrer Produktionsanwendung, Ihrem Arbeitsplatz oder jedem beliebigen Quellcode , über den Sie online lesen, werden Sie feststellen, dass dies die Konvention ist, an mehreren Stellen verwendet wird. Das ist sehr selten, und der offensichtliche Grund dafür ist, dass es nicht so einfach ist , nachzuschauen und sogar zu tippen, oder? Das ist also viel einfacher als die Punktnotation, und deshalb wird sie auch häufig verwendet. Alles klar? Nun, wir haben darüber gesprochen, ein Objekt zu erstellen. Wir haben über den Zugriff auf Immobilien gesprochen. Sie können die Eigenschaften sogar hinzufügen oder aktualisieren. Okay? Lassen Sie uns jetzt zuerst über das Update sprechen. Also werden wir zuerst das Alter aktualisieren. Also du kannst sehen, dass der Punkt H der Person hier gleich ist , sagen wir mal 66. Okay? Und wenn du das hier drüben ausdruckst und speicherst, siehst du, das Alter der Person auf 66 aktualisiert wird. Und selbst wenn ich das gesamte Objekt ausdrucke , werden Sie sehen, dass es den Wert 66 hat, den es enthält. Alles klar? Also, hier geht es ums Aktualisieren. So aktualisierst du. Es ist ziemlich einfach. Sie verwenden Punktnotation oder Sie können hier sogar diese Art von Syntax mit den eckigen Klammern verwenden diese Art von Syntax mit den eckigen Klammern verwenden, und Sie können die Eigenschaft aktualisieren indem Sie ihr einen neuen Wert zuweisen Nun, wie würden Sie eine neue Eigenschaft hinzufügen? Nehmen wir an, ich möchte eine neue Immobilie hinzufügen, in der ich den Job der Person speichern möchte. Ich kann hier also Person Dot Job sagen und ich kann Ingenieur sagen. So etwas wie das hier. In Ordnung. Und ich kann dieses Objekt hier drüben ausdrucken. Und wenn Sie es jetzt ausdrucken, werden Sie sehen, dass es eine neue Eigenschaft namens JOB enthält. , dass diese Eigenschaft zunächst können sehen, dass diese Eigenschaft zunächst nicht existierte, als wir die Person erstellt haben. Sie existierte nicht. Es hatte nur drei Eigenschaften : Name, Alter und Student, Sie sehen können, oder? Aber später haben wir eine Immobilie hinzugefügt, auf der stand: Person, Punkt JOB. Und wir haben ihr einen Wert zugewiesen, der Ingenieur genannt wird. Das Hinzufügen einer neuen Eigenschaft ist so einfach wie der Zugriff auf diese neue Eigenschaft mithilfe der Punktnotation. Wenn Sie also einen neuen Eigenschaftsnamen in Punktnotation hinzufügen, können Sie ihn einem Wert zuweisen, und dieser wird dem Objekt hier hinzugefügt. Okay? Sie können sogar mit der Punktnotation darauf zugreifen, wenn Sie hier drüben möchten, als ob Sie auf die anderen Eigenschaften zugreifen würden. Sie können den Motor hier sehen. In Ordnung. Also das alles ist hier möglich, wenn Sie erstellen oder Eigenschaften erstellen oder hinzufügen oder aktualisieren möchten. Alles klar? Jetzt können Sie einem Objekt eine Eigenschaft hinzufügen. Sie können sogar eine Eigenschaft löschen. Wie würdest du das machen? Schauen wir uns also das Löschen von Eigenschaften an. Okay? Nehmen wir an, ich möchte löschen, ich möchte seinen Schüler hier löschen. Okay? Im Moment kann ich also das Schlüsselwort Dell verwenden, Schlüsselwort löschen, tut mir leid, nicht sagen. Es ist Schlüsselwort löschen. Sie können in der Reihenfolge vorschlagen, Sie können die Person sehen, die unterrichtet wurde und Sie haben die Liste der Eigenschaften hier. Welches möchtest du löschen? Ich möchte seinen Schüler löschen? Okay. Und wenn du dann versuchst, auf seinen Student hier drüben zuzugreifen, und wenn du ihn speicherst, wirst du sehen, dass er undefiniert wird Ordnung. Und wenn Sie die Person einfach ausdrucken, werden Sie den Schüler nicht als Teil davon sehen. Sie können früher sehen, ob der Student in diesem bestimmten Objekt war, aber später haben Sie seine Person nicht hier drüben. Diese Eigenschaft wird also tatsächlich mit Hilfe des Schlüsselworts delete gelöscht. Ordnung. Es ist also möglich, Eigenschaften dynamisch hinzuzufügen, nachdem das Objekt erstellt wurde, und Sie können die Eigenschaften auch löschen , nachdem das Objekt erstellt wurde. Damit alles möglich ist, okay? Jetzt ist es auch möglich zu überprüfen, ob eine bestimmte Eigenschaft tatsächlich in einem bestimmten Objekt existiert, okay? Jetzt wird es natürlich Szenarien geben, denen Sie eine Eigenschaft aktualisieren möchten , wenn diese Eigenschaft existiert. Nehmen wir an, wenn für diese Person ein Job existiert, dann möchten Sie den Job vielleicht aktualisieren. Wenn Sie dieses Häkchen nicht hinzufügen, würde Folgendes passieren, wenn Job nicht persönlich existiert, er würde hinzugefügt, er würde neu erstellt werden, und Sie möchten nicht, dass das passiert. Sie möchten nur aktualisieren, wenn es existiert. Okay? Also als Erstes, was wir tun können, ist, okay, 1 Sekunde nachschauen. Wir werden prüfen, ob Eigentum existiert. Okay? Wie machst du das? Also scrolle ich einfach hier runter. Okay. Und ich würde sagen, Console Dot Log, und ich kann den Namen persönlich sehen. Okay? Nun, das wird zu einem booleschen Wert führen Du kannst es hier drüben sehen. Warum ist es wahr? Weil der Name tatsächlich persönlich existiert. Sie können sehen, dass wir hier einen Namen hinzugefügt haben. Wenn Sie sich die vorherigen Punktlog-Anweisungen der Konsole ansehen , werden Sie feststellen, dass der Name vorhanden ist. Okay? Das ist eine Möglichkeit, das zu überprüfen. Es gibt noch eine weitere Möglichkeit, also kannst du hier Console Dot Log sagen. Okay. Und du kannst sagen Person, Punkt und du kannst sagen, hat eigenes Eigentum, so etwas, und dann kannst du hier Alter sagen. Okay. Hier drüben wirst du wieder wahr, okay? Also das hat Eigentum bestimmt, Sie können die Dokumentation hier sehen, bestimmt, ob ein Objekt eine Eigenschaft mit dem angegebenen Namen hat , okay? Also, wenn ich das auf Alter eins ändere, wenn ich es hier auf eins umbenenne. Natürlich existieren diese beiden nicht. Also wenn ich das speichere, wirst du dich hier irren, oder? Weil diese beiden nicht existieren. Ich mache Control Z einfach hier drüben und speichere es, damit ich es auf der Konsole ausdrucken kann. Alles klar? Also, das ist wirklich nützlich. Wie ich schon sagte, wenn Sie eine Aktualisierung von Eigenschaften durchführen möchten , je nachdem, ob die Eigenschaft in einem Objekt existiert oder nicht, können Sie jede dieser Syntaxen verwenden, okay? Und normalerweise verwenden Sie dies mit bedingten Anweisungen, und wenn es wahr ist, würden Sie die Eigenschaft wahrscheinlich aktualisieren Stimmt das? Und das Ding hier drüben , das ist ein Operator hier drüben. Okay? Und mit dieser Hilfe können Sie im Wesentlichen überprüfen, was der Anwendungsfall von hier drüben ist . In Ordnung. Also ja, hier geht es darum zu überprüfen , ob die Immobilie existiert. Nun, es gibt so etwas wie verschachtelte Objekte, okay? Das heißt, ein Objekt kann ein anderes Objekt oder auch andere Objekte enthalten Nun hier drüben, die Objektdefinition, die wir gesehen haben, Objekt hat Schlüsselwertpaare, richtig? Es ist nichts darin verschachtelt. Es wird also Szenarien geben, in denen Sie vielleicht komplexe Daten speichern möchten , denen Sie vielleicht ein Objekt innerhalb eines Objekts haben möchten , oder? Lassen Sie mich Ihnen nun ein Beispiel geben. Nehmen wir an, Sie erstellen Objekte, um den Überblick über die Schüler zu behalten, und nehmen wir an, Sie haben eine Online-Akademie, sich ein Student für Kurse einschreibt Sie würden also Studenten hier drüben haben. Okay? Ich hätte ein Objekt zum Speichern von Studenteninformationen und ich hätte den Namen des Studenten. Wie lautet der Name? Der Name ist, sagen wir mal, komm hier vorbei. Okay. Jetzt möchte ich eine Liste der Kurse haben, für die sich der Student eingeschrieben hat Also kann ich hier Kurse sagen. Okay. Und in diesem Zusammenhang ist dieser Kurs ein Objekt, weil er eine Liste sein wird, oder? Also kannst du Matte hier haben. Okay. Nun, hier kannst du wahr sagen, okay. Du kannst Anzeichen haben. Du kannst hier Stürze haben und so weiter. In Ordnung. Also, wenn du das ausdrucken willst, kannst du Console Dot Log sagen und du kannst Student hier drüben sehen. So etwas in der Art. Sie können also den Namen sehen und dann ist der Kurs wieder hier verschachtelt, was Sie mit Namen und Signatur erweitern können Entschuldigung, Mathe und Naturwissenschaften hier drüben. In Ordnung. Nun ist die Frage, Sie haben ein Objekt innerhalb eines Objekts. Es ist ein verschachteltes Objekt, oder? Wie würden Sie auf die Eigenschaftsmathematik zugreifen? Lassen Sie mich Ihnen das auch zeigen. Also gut. Also hier drüben, du hast einen Schüler. Sie können Student Dot sagen und Sie können den Vorschlag sehen. Sie also einen Namen ein, wenn Sie auf das Alter zugreifen möchten Natürlich können Sie hier den Punkt verwenden. Okay, Alter existiert nicht. Also ich kann den Namen hier benutzen und du bekommst Zugriff auf Pop. Okay. Also, wenn du auf Kurse zugreifen willst, kannst du hier sofort Kurse sagen, und du bekommst Zugriff auf diesen Jason, das verschachtelte Objekt hier drüben. Du kannst Mathe sehen, stimmt Die Wissenschaft ist falsch. In Ordnung. Und wenn Sie Zugriff auf eine dieser Eigenschaften haben möchten , können Sie die Punktnotation weiter verwenden und Sie können hier Mathe sagen und Sie werden wahr. Okay? Also kannst du diese Punktbezeichnungen auf diese Weise verketten Man kann sagen, dass Schüler Punktkurse Punktmathematik machen. Okay? Also sagst du hier studentische Punktkurse, Punktmathematik. Ordnung. Und es gibt dir die Ausgabe als wahr. Alles klar? Nun, wie das äußere Objekt, kann auch das innere Objekt Eigenschaften mit unterschiedlichen Datentypen haben . Im Moment verwenden wir Boolean. Natürlich können Sie Zeichenketten speichern. Sie können Zahlen haben. In Ordnung. Es liegt ganz bei Ihnen, was Sie lagern möchten, und es richtet sich auch ganz nach Ihren Anforderungen. In Ordnung. Also ich hoffe, das macht Sinn. Also, es geht um Objekte. Und bevor ich schließe, möchte ich Ihnen eine interessante Sache zeigen , wenn Sie mit Objekten arbeiten, was als Objekt-D-Strukturierung bekannt ist. Strukturierung. In Ordnung. Also, was ist Objekt-D-Strukturierung? Nun, die Strukturierung von Objekt D ist ein Konzept oder eine bequeme Methode, ich sollte sagen, um mehrere Eigenschaften aus einem Objekt zu extrahieren und sie Variablen zuzuweisen. Schauen Sie sich nun dieses Objekt hier an. Es hat mehrere Eigenschaften, oder? Jedes Objekt, das Sie in JavaScript erstellen , wird mehrere Eigenschaften haben. Es wird also Zeiten geben, in denen Sie diese Eigenschaften extrahieren und einzelnen Variablen zuweisen möchten diese Eigenschaften extrahieren und einzelnen Variablen zuweisen . Das ist jetzt mit Hilfe der Objektdestrukturierung möglich. Wir haben also ein Objekt hier drüben. Lass es uns damit versuchen. Sie haben also zwei Eigenschaften wie Name und Kurse. Ordnung. Ich will einen Namen. Ich möchte hier eine Variable namens Name haben, die hier einen Namenswert für dieses Objekt hat, und Kurse werden den Kurswert haben. Okay? Also, was ich tun werde, ist, lass zu sagen. Ich werde diese Art von Syntax hier verwenden. Ich werde hier Namen und Kurse sagen. Okay? Und dann werde ich es einem Schüler zuweisen. Ordnung. Was glaubst du, würde passieren? Das ist hier absolut gültig. Okay. Aber was hier tatsächlich passiert, ist dieses Objekt tatsächlich zerlegt ist und die Eigenschaften zugewiesen werden. Der Wert von Eigenschaften wird diesen Variablen zugewiesen . In Ordnung. Also, wenn ich in der Konsole drucken will, logge dich hier und ich kann den Namen sagen. Sie werden sehen, dass der Name hier als Bob gedruckt wird. Okay, das ist eigentlich der Name, den Sie zugewiesen haben, und dann können Sie statt Name Kurse haben und Sie können das speichern, Sie werden die Ausgabe hier sehen. Okay. Also ich hoffe, das macht Sinn. Wenn Sie nun hier den Variablennamen von name in name two ändern , sagen wir zum Beispiel, wenn Sie das speichern, sehen Sie, dass Name undefiniert ist Jetzt. Warum ist es undefiniert Denn damit die Destrukturierung perfekt funktioniert, sollte hier der Name dem Namen zugewiesen werden, dann muss dieser Name tatsächlich mit dem Namen in dieser Eigenschaft innerhalb dieses Objekts übereinstimmen dem Namen in dieser Eigenschaft innerhalb , tut mir leid Okay. Wenn ich zum Beispiel den Namen von Kursen auch in Kurse ändere, werden Sie sehen, dass er undefiniert ist Okay, der Name muss also dem der Immobilie ähnlich sein der Immobilie ähnlich Der Name der Variablen muss mit dem der Eigenschaft identisch sein , damit die Destrukturierung funktioniert Wenn Sie eine der Variablen hier überspringen, wenn ich Kurse überspringe, werden Sie sehen, dass Kurse nicht destrukturiert sind. In Ordnung. Also, ja, genau das ist Objektdestrukturierung. Und hier dreht sich alles um Objekte in Jascript. Und ich hoffe, dieses Video hilft Ihnen dabei , jeden Code zu verstehen , den Sie sehen und der in Zukunft Jascript-Objekte verwendet . Viel Glück 24. Typkonvertierung: Jetzt ist es an der Zeit , über die Typkonvertierung in JavaScript zu sprechen . Was ist nun zuallererst Typkonvertierung? Wenn Sie also eine Variable erstellen, speichern Sie Werte darin. Die Variable hat einen Typ, oder? Also entweder könnten Sie eine Zeichenfolge, einen booleschen Wert oder eine Zahl speichern , Nun, die Typkonvertierung ist ein Prozess, bei dem Sie einen Wert von einem Typ in einen anderen konvertieren Okay? Wenn Sie also Zeichenketten in Zahlen oder Zahlen in Zeichenketten umwandeln, wird das als Typkonvertierung bezeichnet. Nun, eine Sache, die Sie wissen müssen, ist , was Sie bereits wissen JavaScript ist eine lose typisierte Sprache, was bedeutet, dass Sie den Typ einer Variablen nicht deklarieren müssen , Und der Typ der Variablen kann sich dynamisch ändern , je nachdem, welche Werte Sie speichern Okay. Eine andere Sache ist, dass JavaScript implizite und explizite Konvertierungen unterstützt Implizit bedeutet also implizite Konvertierung ein Typ ist, bei dem in JavaScript selbst der Wert automatisch von einem Typ in einen anderen konvertiert wird der Wert automatisch von einem Typ in einen anderen konvertiert Bei einer expliziten Anweisung weisen Sie als Programmierer an, einen Wert von einem Typ in einen anderen zu konvertieren Wert von einem Typ in einen anderen Alles klar? Schauen wir uns also die Typkonvertierung an. Lassen Sie mich Ihnen hier ein Beispiel geben. Nehmen wir an, ich habe X, O und sagen wir, ich habe fünf plus eins. Okay. Jetzt mache ich hier das Konsolen-Dotlog. Okay. Und ich drucke den Wert von X aus. In Ordnung. Ich werde hier auch Console Dot Log machen. Okay, und ich sage Abtippen. Ich sage X hier drüben. Wenn ich das speichere, wirst du sehen, dass die Ausgabe natürlich sechs ist und dass die Ausgabe auch Zahl ist, weil das den Wert vom Typ Zahl enthält. Lassen Sie mich jetzt ein bisschen experimentieren, oder? Nehmen wir nun an, ich konvertiere diesen Wert fünf in den Wert einer Zeichenfolge, indem ich einzelnen Code hinzufüge. Sie können sogar Doppelcodes hinzufügen. Das ist absolut okay. Was glaubst du wird das Ergebnis sein? Werden es sechs sein? Und wenn Sie glauben, dass es sechs was wird uns das dann bringen? Was wird hier die Ausgabe des Operatortyps sein? Wenn ich das speichere, siehst du, dass die Ausgabe 51 ist, und dann hast du hier eine Zeichenfolge. Okay? Also, was hier passiert , ist, dass Sie fünf haben, was eine Zeichenfolge ist, Sie haben einen Plus-Operator. Sie verwenden den Plus-Operator für zwei Operanten. Ein Operant ist also eine Zeichenfolge und ein anderer Operant ist Also was passiert ist, das ist keine gültige Ergänzung, oder? Was JavaScript also implizit oder intern tut, ist, dass es eins in eine Zeichenfolge konvertiert Okay? Also dann wird es so, dass dieser Gleichung im Grunde p wird. Ich habe fünf hier drüben und einen hier in dieser Form. Okay? Also, was ergibt hier fünf plus eins? In diesem Fall? Es wird 51, weil beide Saiten sind, oder? Und eine Zeichenkettenverkettung wird durchgeführt. Also, wenn du es gelassen hast oder wenn ich Konsole sage, logge dich hier ein, und wenn ich Hallo sage, okay hier drüben, okay hier drüben Also werde ich als High Hello ausgeben weil hier eine Zeichenkettenverkettung durchgeführt wird Okay? So verhält sich der Plus-Operator bei Zeichenketten Und in Bezug auf Zahlen wird er diese beiden Zahlen addieren Okay? Das ist also ein Beispiel für implizite Typkonvertierung Alles klar? Ich kommentiere das einfach aus. Okay? Lass mich dir ein anderes Beispiel geben, okay? Nehmen wir an, ich habe Beispiel zwei hier drüben, okay? Und lassen Sie mich das hier als Beispiel eins nennen, okay? Also, so etwas. Okay? Ups, irgendwas Okay, diese Aussage ist also noch nicht vollständig. Deshalb erhalte ich eine Fehlermeldung. Okay? Nehmen wir Beispiel zwei an. Was ist Beispiel zwei, anstatt fünf als Zeichenfolge plus eins zu haben. Okay? Also lass mich das zuerst als Ganzzahl haben. Also habe ich minus fünf minus eins. Okay. Ich kopiere diese beiden Zeilen der Aussage. Ich werde sie hier drüben platzieren. Und das wird natürlich Beispiel zwei. Okay? Das sind auch zwei. Wenn ich das jetzt speichere, werden Sie sehen die Ausgabe vier ist, weil fünf minus eins natürlich vier ist und die Ausgabe hier eine Zahl ist, was auf die Art des Operators zurückzuführen ist. Okay? Das ist es, was du siehst. Lassen Sie mich jetzt diese beiden ändern. Eine Schnur. Nun, was denkst du wäre das Ergebnis? Okay? Denn hier, wenn du diese Zeichenfolge änderst, wurde daraus 51, richtig? Sie können sehen, dass es 51 druckt. Was glaubst du, wird das Ergebnis hier sein, okay? Irgendwelche Vermutungen? Also wenn ich das speichere, ist die Ausgabe immer noch vier und der Typ von Beispiel zwei ist immer noch eine Zahl. Warum ist das nun so? Also hier, wenn Sie den Plus-Operator verwenden, okay, das wurde konvertiert. Das war ASIS, und das wurde tatsächlich in eine Zeichenfolge umgewandelt , und die Ausgabe als Ergebnis war eine Zeichenfolge. Sie können die Ausgabe hier sehen. Aber im Falle eines Minus hat sich das geändert, oder? Aber das ist nicht so, wie es sich verhält wenn du Plus mit dem Meer oder den Prinzen benutzt hast, oder? Also das Verhalten, die Antwort darauf ist, dass das Verhalten von Plus- und Minusoperatoren mit Zeichenketten und Zahlen unterschiedlich ist, und deshalb sehen Sie eine Verhaltensänderung in der Ausgabe. Lassen Sie mich das erklären. Wenn Sie Plus-Operatoren mit Zeichenketten verwenden , okay? Bei Zeichenketten gibt es eine Option für JavaScript zur Verkettung Okay? JavaScript kann Zeichenketten verketten und JavaScript kann Additionen ausführen, wenn Plus-Operator mit Zahlen verwendet wird Okay? Also, wenn du das mit Zahlen verwendest, weiß es, okay, ich muss eine Addition durchführen. Wenn Sie das mit Zeichenketten verwenden, weiß es, dass ich eine Verkettung durchführen muss Aber wenn Sie einen gemischten Typ verwenden, wird er Zahlen in Zeichenketten konvertieren. Okay? Nun, in diesem Fall hat Minus weder eine Rolle noch ein Verhalten, wenn es mit Zeichenketten verwendet wird. Kannst du hoch minus Hallo drucken? Okay? Das ergibt keinen Sinn, oder? Also hier, da Umwandlung von eins in eine Zeichenfolge keinen Sinn machte, hat Ja Script fünf in eine Zahl umgewandelt, richtig? Und das Ergebnis war die arithmetische Operation, die vier ist, und der Typ der endgültigen Ausgabe war auch gleich vier Okay. Und das ist etwas Ähnliches. Und so funktioniert es, wenn Sie auch Multiplikation verwenden, oder? Also lass mich dir das auch zeigen. Okay? Also werde ich das hier einfach duplizieren. Das ist unser Beispiel drei, Beispiel drei und Beispiel drei, und ich habe fünf zu eins gemacht. Was wird Ihrer Meinung nach das Ergebnis sein? Macht eine Zeichenfolge wie fünf in einer Zeichenfolge multipliziert mit eins in einer Zeichenfolge Sinn Nein. Also, das wird natürlich eine Nummer sein. Okay. Also ja, so funktionieren die Dinge. Und wie Sie sich vorstellen können, führt JavaScript in diesem Fall intern hier eine implizite Konvertierung durch, wobei es hier automatisch den Wert von fünf umwandelt, was hier eine Zeichenkettendarstellung in eine Zahl ist . Okay? Und wie Sie sehen können, bekommen Sie hier eine Ausgabe. Wenn Sie das jetzt duplizieren, lassen Sie mich das natürlich duplizieren und lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Wenn ich nach unten scrolle, wenn ich das auf Beispiel vier ändere , tut mir leid, nicht fünf. Das sind vier. Das sind auch vier, und das ist auch vier. Okay. Nun, statt fünf hier drüben, nehmen wir an, Sie haben es getan, lassen Sie mich das loswerden. Nehmen wir an, Sie haben ein wahres. Okay. Und du kannst sagen, wahr plus eins. Okay. Was glaubst du, wird das Ergebnis sein? Die Ausgabe wäre hier also zwei, weil wahr als eins betrachtet wird. Also wenn ich das speichere, siehst du zwei und die Ausgabe ist Zahl. Okay? Wenn ich sage, dass das falsch ist, werden Sie sehen, dass die Ausgabe eins ist , weil falsch Null ist. Okay. Also bleibe ich hier einfach bei der Wahrheit. Okay, und Sie können die Ausgabe sehen. Okay, also so funktionieren die Dinge, und Sie können sehr gut sehen wie sich die implizite Konvertierung hier verhält. Ordnung. Lassen Sie uns nun über explizite Konvertierungen sprechen. Ordnung. Also werde ich herkommen. Okay. Und wir werden über die explizite Konvertierung von Werten sprechen. Ordnung. Nun, es wird zuallererst Szenarien geben, okay. Es wird Szenarien geben, in denen eine implizite Konvertierung nicht ausreicht und Sie Dinge explizit tun möchten , oder? Nehmen wir an, Sie bitten den Benutzer, beispielsweise ein H oder Markierungen einzugeben Nun, diese Dinge werden immer als Zahlen eingegeben, oder? Und dein Jobskriptprogramm bezieht das aus HTML. Okay? Sie würden das also bestimmte Berechnungen verwenden wollen für bestimmte Berechnungen verwenden wollen. Nehmen wir an, Sie haben NUM hier drüben, okay? Eins, zwei, drei, okay? Also in meinem Beispiel, von dem ich gesprochen habe, wo Sie Dinge wie Alter und Alterszeichen akzeptieren, möchten Sie vielleicht eine explizite Konvertierung durchführen , bei der die eingegebene Zahl tatsächlich eine Zahl ist, aber es könnte sein, dass sie als Eingabe für Ihr Programm als Zeichenfolge übergeben wird. Vielleicht möchten Sie es also explizit konvertieren, oder? Lassen Sie mich Ihnen ein Beispiel geben. Nehmen wir an, Sie haben hier eine Nummer und nehmen wir an, Sie haben hier einen Pool. Das. Ich habe zwei Variablen. Okay. Um nun explizit eine Typkonvertierung durchzuführen, bietet Ja Script hier eine Reihe von Funktionen , die Sie sehen können. Wenn Sie also mit Zeichenketten arbeiten , sind dies die Funktionen. Sie haben hier zwei Saiten und eine Zeichenfolge. Sie haben auch Number, Parsent und Parse Float, wenn Sie mit Zahlen arbeiten Und wenn Sie mit dem booleschen Datentyp arbeiten möchten, können Sie Boolean hier verwenden Lassen Sie uns also untersuchen, wie Sie sie einzeln verwenden können Also zuerst werden wir hier über Saiten sprechen, okay? Jetzt habe ich schon ein paar Zeichenketten erstellt. Also würde ich sie einfach in diesen Block hier verschieben, nicht nach den Kommentaren blockieren. Okay? Lassen Sie mich jetzt konvertieren oder lassen Sie mich Ihnen zeigen, wie Sie die String-Funktion verwenden. Also kann ich hier sagen, lass num to string, und ich kann Zeichenfolge wie diese sagen, und ich kann Num sagen. Okay? Also übergibst du einfach den Parameter hierher, okay? Und ich kann hier Console Dot Log sagen. Ich kann sehen, dass die Zeichenfolge taub ist. Ich kann ein Koma hinzufügen Und dann kann ich hier Typ von sagen und lass uns Typ von Zahl zu Zeichenfolge ausgeben. Okay. Wenn ich das speichere, siehst du eins, zwei, drei und eine Zeichenfolge als Ausgabe. Okay? Also ja, das ist tatsächlich eine Zahl und sie wird in eine Zeichenfolge umgewandelt. Nun, der Wert ist derselbe, eins, zwei, drei, aber er ist momentan im Zeichenkettenformat. Okay? Nun, das ist eine Sache. Wie kannst du Boolean hier benutzen ? Also Boolean kannst du auch konvertieren, okay? Also lass mich hier eine neue Variable erstellen. Sagen wir hier Bool zu Zeichenfolge, und ich kann Zeichenfolge sagen Okay, ich kann hier drüben Bool sagen, so etwas in der Art. Und lass mich das kopieren. Und Sie können Bool zu String und Pull zu String vom Typ Pull sagen String und Pull zu String vom Typ Sie können true sehen und es wird jetzt als Zeichenfolge dargestellt Also so funktioniert diese Zeichenfolge hier drüben. Das kannst du sehen, oder? Es geht also um Schnur. Jetzt hast du auch zwei Saiten , die du hier siehst. Also kannst du tatsächlich sagen lassen. Lassen Sie mich also taub zu einer Zeichenfolge sagen oder lassen Sie mich das tatsächlich kopieren Ordnung. Ich kopiere einfach die ganze Sache. Okay. Und hier drüben nenne ich das als eins. Hier drüben gibt es auch einen. Das hat auch einen. Ich werde am Ende einen anhängen. Okay. Und statt Schnur kann ich hier taub, tot, to string sagen Okay. So wie das hier. Und für Bool sage ich auch bool, tot, um eine Zeichenfolge wie diese zu verwenden Und ich werde sehen, ob das ist. Sie können also sehen, dass die Ausgabe dieselbe ist. Okay. Also entweder können Sie hier zwei Saiten verwenden oder nur eine Zeichenfolge auf diese Weise. Alles klar? Lass uns jetzt über Zahlen sprechen, okay? Wenn Sie also einen Wert in einer Zeichenfolge haben, sagen wir, SDR Num. Okay, du kannst es nicht für Berechnungen verwenden. Nehmen wir an, Sie haben vier, fünf, sechs hier drüben. Okay? Du kannst das nicht für Berechnungen verwenden . Möglicherweise möchten Sie dies explizit in eine Zahl umwandeln , damit Sie sie verwenden können. Ordnung. Nehmen wir an, Sie haben auch acht Dezimalzahlen. Ich sage SDR Float hier drüben. Okay, oder du kannst sagen, nenne es Dezimal, wie auch immer du willst Nehmen wir an, das ist zum Beispiel 12,55. Ordnung. Du kannst jede beliebige Zahl nehmen. Okay. Schauen wir uns also zunächst die Zahl an. Okay? Also kannst du sagen, lass SDR zu Num hier drüben sagen. Okay? Du kannst Nummer sagen. Sie können die Zahl sehen und Sie können SDR num übergeben Sorry, nicht float, STR, num. Okay. So wie das hier. Okay. Lassen Sie mich nun den Wert hier drüben und auch den Typ eindrucken. Okay. Also werde ich das kopieren und hier einfügen. Und wenn ich das speichere, siehst du, dass 456 die Ausgabe ist, und das ist jetzt vom Typ Nummer. In Ordnung. Also das wurde in eine Zahl umgewandelt, wie Sie sehen können. Okay? Nun, ich kann diese Zeile duplizieren, lassen Sie uns diese Zeile duplizieren und lassen Sie uns hier ein Beispiel mit parse int sehen . Wenn ich also parse int verwende, kannst du hier int sagen, okay, STR zu int und ich ersetze das durch parsint und ich Jetzt kannst du sehen, dass das wieder eine Zahl ist, okay? Also das konvertiert die Zeichenfolge tatsächlich in eine Ganzzahl. Okay? Also, was passiert, wenn du SDR hinzufügst und hier drüben schwebst Okay. Wenn Sie STR-Float hinzufügen, werden Sie sehen, dass dieser Dezimalteil gekürzt wird Sie können sehen, dass nur 12 gedruckt werden. 12.55 wird nicht gedruckt. Okay? Also das ist nützlich , wenn du eine ganze Zahl willst, oder? Aber wie würden die Dinge aussehen wenn Sie auch Dezimalzahlen beibehalten und auch eine Konvertierung in Zahlen durchführen und aus Gründen der Genauigkeit auch die Dezimalzahl beibehalten möchten Okay? Weil es einen Datenverlust gibt, oder? Der Dezimalwert ist verloren gegangen. Hier kommt also der Sparse Float ins Spiel. Also was Sie tun können, ist, mich das hier duplizieren zu lassen , STR auf Float Hier drüben. Und ich werde das hier drüben zusammenfügen und ich werde sehen, ob das ist. Statt Parse End sage ich Parse, sage ich Parse, Wenn ich das speichere, siehst du 12.55. Der Dezimalwert wird also ebenfalls beibehalten und dieser wird als Zahl gedruckt Okay? Es gibt also drei Dinge, an die Sie sich erinnern sollten: Zahl, die verwendet wird, um eine Zeichenfolge in eine Zahl umzuwandeln, parse int, die verwendet wird, um jeden beliebigen Wert, den Sie haben, in eine Ganzzahl umzuwandeln Dann haben Sie parse float, was Ihnen helfen kann, den gesamten Wert zu ermitteln oder den gesamten Wert zusammen mit der Dezimalzahl zu speichern Okay. Nun, eine Sache, die ich hier erwähnen möchte, wenn Sie versuchen, eine Zeichenfolge in eine Zahl umzuwandeln , wird das nicht funktionieren. Sie können also SDR oder ungültig oder Num ungültig sagen. Ungültig, Zahl. Sagen wir, weil das ungültig sein wird, ich weiß. Nehmen wir an, ich sage Zahl. Ich werde hier keine Variable erstellen, aber ich habe direkt eine Nummer und kann Hallo sagen. Okay. Also, das ist überhaupt nicht gültig, okay? Also kannst du das nehmen und du kannst es hier ausdrucken. Aber das ist nicht gültig, okay? Wenn ich das speichere, wirst du sehen, dass es keine Zahl ist, NN bedeutet keine Zahl, NN, und der Typ ist Zahl, okay? Aber der Wert ist verloren. Es ist NAN. In Ordnung. Also ja, wenn Sie eine Typumwandlung oder eine Typumwandlung in eine Zahl durchführen , stellen Sie sicher, dass die Quelle tatsächlich eine gültige Zahl Okay? Wenn ich die Zeichen zu vier, fünf, sechs, ich sage vier, fünf, sechs hinzufüge, dann wäre es wieder NN , weil es keine gültige Zahl ist, oder? Ich hoffe, das macht Sinn. Okay? Lass uns hier drüben über Boolean sprechen Also werden wir Null erstellen, okay. Und ich habe auch eine nicht leere boolesche Zeichenfolge hier drüben gelassen oder ich lasse die boolesche Zeichenfolge von hier entfernen. Es wird länger Okay. Und dann werde ich hallo haben. Okay. Und lassen Sie uns sehen, wie Sie Boolean nutzen können Sie können sagen, lass Null zu Boolean werden. Lassen Sie uns also zuerst Null in einen booleschen Wert umwandeln. Ich sage hier Boolean und ich sage Null. Okay. Was glaubst du, wird das Ergebnis sein? Lassen Sie mich diese Aussage hier abrufen, Console Lock. Ich ersetze diesen ungültigen Wert durch einen booleschen Wert Null und Sie erhalten Null bedeutet also tatsächlich falsch, wenn es in einen booleschen Wert umgewandelt wird Und jetzt okay, ich habe versehentlich Null hinzugefügt, das sollte Okay? Die Ausgabe wird dieselbe sein. Aber wenn du die Null in Eins umwandelst, erhältst du Wahrheit. Okay? Wenn du eins, fünf, sechs oder eine beliebige Zahl sagst, bleibt es wahr. Also fallen hier nur 40. Okay. Ich hoffe, das macht Sinn. In Ordnung. Also, wenn du diese Zeichenfolge hier drüben hast, was passiert, wenn du versuchst, sie in Poulin umzuwandeln, okay? Also lass mich das hier drüben kopieren. Okay. Ich gehe zur nächsten Zeile. Und statt Null zu Boolean sage ich Zeichenfolge zu Boolean Zeichenfolge zu Boolean Und hier werde ich eine nicht leere Zeichenfolge haben. Okay. Und ich kopiere die Zeichenfolge in einen booleschen Wert und füge sie hier hinzu. Lassen Sie uns sehen, was die Ausgabe ist. Du wirst sehen, dass es wahr ist. Okay? Also jede nicht leere Zeichenfolge Sie haben, und wenn Sie versuchen, sie in einen booleschen Wert zu konvertieren, werden Sie true als Ausgabe sehen Okay? Werte wie Null oder leere Zeichenfolge, Null, undefiniert und NN sind also falsch, was bedeutet, dass sie in falsch umgewandelt werden Also selbst anstelle von Null, wenn Sie eine leere Zeichenfolge haben, eine leere Zeichenfolge wenn Sie eine leere Zeichenfolge haben, eine leere Zeichenfolge. Okay, es wird falsch sein. Du kannst es sehen. Wenn es irgendein Ende ist, sagen wir, ein Ende. Und wenn ich das speichere, wird es falsch sein. Okay? Wenn es Null ist, wird es wieder falsch sein. Okay. Aber ich bleibe bei Null. Okay. Und alles andere, außer Null, leerer Zeichenfolge, Null, undefinierter NN, sind alles falsche Werte Wenn diese konvertiert werden, werden sie in Bolin als falsch übersetzt, und alles andere außer dem ist wahr, oder Ich hoffe, das hat Sinn gemacht, wenn es darum geht, wie Typkonvertierungen explizit in Jascript funktionieren Okay. Okay. Das war ein Fehler hier drüben. Ich hoffe, das ist nützlich. 25. Projekt: Einen Farbgenerator erstellen: Lassen Sie uns also einen Farbgenerator mit JavaScript in HTML erstellen , oder? Also hier bin ich bei Indexpunkt-HTML, also habe ich diese Datei Index-Punkt-HTML und Indexpunkt Hs. Dies ist eine JavaScript-Datei , in der sich unser Ja Script-Code befinden wird Ich füge eine weitere Datei und nenne das Astyles Dot CSS. Also werden wir ein bisschen verschönern, nicht viel, aber wir werden dafür sorgen, dass unsere Webseite ein bisschen anständig aussieht Also, hier in Indexpunkt-HTML werde ich Ausrufezeichen eingeben und den Standardcode für eine HTML-Seite hier drüben abrufen für eine In Ordnung. Nun, du kannst sehen, dass ich das Gerät und alles hier habe, okay. Und hier füge ich den Titel des Dokuments oder den Titel der Webseite hinzu, richtig? Und dieser Titel wird ein zufälliger Farbgenerator sein. Etwas wie das hier. In Ordnung. Also, hier unter dem Körper, werde ich H als Markierung haben , weil ich hier anfangen werde , den Code einzuschreiben. Also werde ich Zufallsfarbgenerator sagen. Und anstatt zu tippen, kann ich das direkt abrufen. Okay. Das ist erledigt, und so wird diese App funktionieren, wir werden eine Schaltfläche haben, die jedes Mal, wenn Sie auf die Schaltfläche klicken, zufällige Farben generiert. Ordnung. Also brauchen wir diesen Knopf. Also füge ich hier einen Button hinzu. Sie können dieses Button-Element sehen. In Ordnung. Ich schließe das und nenne diese Schaltfläche „ Farbe generieren“. Okay. Okay. Das ist erledigt. Und dann müssen wir auch die Farbcodes anzeigen, richtig. Jetzt wird die Farbe, die generiert wird, im Xassimol-Code enthalten sein Das wird ein Exad-Assimil-Code sein, den wir auch dem Benutzer anzeigen können. In Ordnung. Also werden wir den Farbcode anzeigen. Ich sage Ptag hier drüben. Okay. Und wir werden hier einen Farbcode drucken lassen. Das ist erledigt, oder? Jetzt müssen wir auch das JavaScript laden. Also, was ich hier machen kann, ist, dass ich die JavaScript-Datei laden kann. Also haben wir die Ja Script-Datei als Indexpunkt qs erstellt. Also werde ich aus dem Body-Tag herauskommen und Script SRC sagen, und ich werde hier Index Dot S sagen. Und ich werde den Stapel schließen. Ordnung. Wir haben noch keine Links für CSS erstellt, aber wir werden uns das in Kürze ansehen. Ordnung. Ich werde diese Konsole schließen. Wir müssen die Konsole nicht mehr sehen, oder? Nun, hier drüben, wenn ich das sehe, okay, das sollte eigentlich diesen speziellen HTML-Code hier drüben anzeigen. Sie können den Zufallsfarbgenerator sehen und Farben erzeugen. Ordnung. Jetzt gehen wir zu Index Dot JS, richtig. Und hier werden wir das Java-Skript schreiben , das mit diesen HTML-Elementen arbeitet und ihnen Leben einhaucht. Wenn Sie also wie gesagt auf Farbe generieren klicken, sollte ein neuer Farbcode generiert werden und der Hintergrund dieser gesamten Webseite sollte auf diesen bestimmten Farbcode eingestellt sein, und wir sollten dem Benutzer den Farbcode auch hier anzeigen . Ordnung. Also, was ich tun werde , ist hier, wenn du kommst. Hier haben wir dieses PTAC. Wir haben einige Elemente und wir müssen auch den Farbcode hier drüben anzeigen, werde ich dem eine ID zuweisen, weil ich im JavaScript darauf verweisen muss Okay? Also werde ich das hier als Farbcode codieren. Etwas wie das hier. Okay, und ich werde es speichern. Okay. Und lassen Sie mich diesen Code einfach von hier entfernen. Okay? Ich nehme einfach Farbe. Ich werde herkommen. Okay. Und was ich tun werde, ist Dokument zu sagen. Also brauche ich dieses P-Tag , an dem wir die Farbe anzeigen wollen. Also werde ich sagen, dass Dokument Punkt für Punkt Element für ID abruft. Also hole ich mir das Element anhand der ID aus dem Dokument. Jetzt werde ich hier die Idee des Elements erwähnen. Die Idee des Elements ist also ein Farb- oder Farbbindestrichcode, was auch immer Sie dort hinzugefügt haben Okay? Und wir können das einer Variablen zuweisen, okay? Also ich kann Farbe sagen und ich kann Absatz sagen, okay, Absatz. Und ich werde das speichern. Okay? Also haben wir jetzt Zugriff auf das P-Tag, okay? Und wenn Sie möchten, können Sie hier wählen, ob Sie das Dot Log in der Konsole verwenden möchten. Oder ich würde sagen, dass Sie, anstatt die Punktprotokollierung auf der Konsole durchzuführen , Color para Tot Textinhalt sagen , Color para Tot Textinhalt und hier einen Test hinzufügen können. Okay. Und wenn du das speicherst, solltest du sehen dass der Test hier hinzugefügt wird, okay? Das bedeutet, dass Sie mit dieser ID auf das Absatz-Tag zugreifen können , bei dem es sich um ein P-Tag handelt, okay? Und wenn Sie mit der Maus auf dieses Dokument zeigen, Punkt für Punkt abrufen, können Sie sehen, dass ein Verweis auf das erste Objekt mit dem angegebenen Wert des ID-Attributs zurückgegeben das erste Objekt mit angegebenen Wert des ID-Attributs Das ID-Attribut ist in diesem Fall also Farbe. Okay? Und wir können auf das D-Element zugreifen. Jetzt können Sie auch hier einen Standard-Farbcode anzeigen lassen. Okay? Also kann ich einen Farbcode als Hash hinzufügen. Farbcodes beginnen also mit Hash, und ich kann FF FF, FF sagen. Okay. Sie können also einen Standard-Farbcode hinzufügen, der tatsächlich angezeigt wird, wenn die Seite geladen wird. In Ordnung. Sobald Sie dies getan haben, müssen Sie nur noch auf diese Schaltfläche klicken. also auf diese Schaltfläche klicken, sollte der Farbcode generiert werden, und die Art und Weise, wie wir ihn generieren werden, ist dass wir eine zufällige Generierung durchführen werden. Ordnung. Also, was ich tun werde, ist , hierher zu kommen und wir müssen Zugriff auf die Schaltfläche bekommen, weil beim Klicken auf diese Schaltfläche irgendein Code ausgeführt werden sollte, oder? Also ich werde hier sagen, ich werde dem hier eine ID zuweisen und die ID kann generiert werden. Okay. E wird nicht da sein. Okay. Das ist da und hier werde ich kommen. Ich kopiere das und sehe, wie das Dokument „Element nach ID abrufen“ hier generiert wird. Okay. Nun, sobald wir Zugriff auf die Schaltfläche haben, sage ich bei einem Klick auf diese Schaltfläche. Okay. Also müssen wir beim Klicken auf diese Schaltfläche Anweisungen Ich muss hier eine Funktion hinzufügen. Okay. Nun, das ist die Syntax für die Definition einer Funktion in JavaScript. Okay. Und wir werden eine Funktion definieren. Was jetzt passiert, ist dieser Codeblock. Diese Funktion bedeutet, dass dieser Codeblock, den wir hier definieren, ausgeführt wird, wenn auf die Schaltfläche geklickt wird Okay? Ziemlich einfach. Ich sage lass und ich lasse eine zufällige Farbe generieren. Nun, wie werden wir eine zufällige Farbe erzeugen? Weil dies eine zufällige Farbe ist, die wir auch anzeigen würden. Um diese zufällige Farbe zu generieren, verwenden wir nun eine Formel. Wenn Sie nun Farbcodes darstellen, beginnt es mit einem Hash, und dann haben Sie einen Hexadezimalwert wie FF, CC, FF, ungefähr so Okay? Also müssen wir diesen hexodeimalen Zufällig, Hash, du kannst es manuell anhängen, oder? Also was ich tun würde, ist, hierher zu kommen. Wir werden die Formel verwenden , okay? Und wir werden etwas verwenden , das als mathematisches Objekt bezeichnet wird. Okay? Also werde ich hier Mathe sagen und ich werde sagen, dass Punkt jetzt Mathe oder Math-Objekt in JavaScript Zugriff auf viele Funktionen innerhalb von JavaScript bietet. Eine der Funktionen ist zufällig. Mit dieser Funktion können Sie jetzt Zufallszahlen generieren. Okay? Wenn Sie den Mauszeiger darüber bewegen, werden Sie sehen, dass eine Pseudo-Zufallszahl 0-1 zurückgegeben Okay? Nun, jedes Mal, wenn das ausgeführt wird, generiert es eine Zufallszahl. Also lass mich dir das hier zeigen. Okay? Also Alco to Console, hier drüben kannst du Mathe straff und zufällig sehen Ups, Mt Taut, Random, so etwas, und du kannst eine Zufallszahl generieren Also jedes Mal, wenn Sie das ausführen, wird es eine Zufallszahl generieren Okay? Nun, was wir tun werden , ist, das zu nutzen und eine Hexadezimalzahl zu generieren Wie? Also werde ich diese generierte Zufallszahl generieren, okay? Lassen Sie mich also diese Zufallszahl kopieren , die generiert wird. Das ist also eine Zufallszahl , die generiert wird. Ich lösche die Konsole und multipliziere diese Zufallszahl mit einer Zahl. Diese Zahl ist nun 1627 bis 15. Nun, warum multipliziere ich sie mit dieser Zahl? Der Grund, warum ich es mit dieser Zahl multipliziere, ist , dass dies der Maximalwert ist Okay? Diese Zahl steht für den höchstmöglichen oder maximalen Wert für eine 24-Bit-Farbe, also in Hexadezimalzahl Damit werde ich es also multiplizieren. Okay. Und wenn wir mit der Multiplikation fertig sind, erhalten wir ein Ergebnis Und dann werde ich Mathe Dot Floor benutzen Was ist nun Math Dot Floor? Also habe ich diesen Wert nach der Multiplikation kopiert. Was ist Mathe Floor? Matt Floor ist eine Floor-Funktion, die dir also, wenn ich einen Dezimalwert von eins, vier, fünf, sechs habe, die Ausgabe eins wäre. Okay? Also, wenn Sie eine beliebige Zahl haben, erhalten Sie den niedrigsten Wert in der Dezimalzahl. Okay? Wenn Sie also 1,4 4636 haben, wird dieser Wert hier gelöscht oder ignoriert . Eins ist also die Ausgabe Wenn ich das hier drüben einfüge, erhalte ich natürlich acht doppelt zwei, 8937 hier drüben. Okay? Und dann nehme ich diesen Wert, diesen Wert hier drüben, und ich werde ihn in eine hexadezimale Darstellung der Zeichenfolge umwandeln ihn in eine hexadezimale Darstellung der Zu einer hexadezimalen Zeichenfolge kann ich sagen. In Ordnung Also sage ich diese Zahl, Punkt zwei, eine Zeichenfolge, und ich gebe 16 als Argument ein, was bedeutet, dass ich davon einen exa-Dezimalwert benötige Okay? Also hat es mir hier einen Fehler gegeben. Okay. Lass mich sehen. Okay, das muss also sein, damit das funktioniert, es muss in der Zeichenkettenform sein. Also kopiere ich das nochmal. Ich sage hier Hash. Ich zerlege das. Okay. Und dann sage ich zu Schnur und lass mich diese 16 hier versuchen. Lass uns sehen. Okay, ungültiges oder unerwartetes Token. 1 Sekunde. Lass es mich nochmal versuchen. Das sollte also idealerweise funktionieren. Okay, das funktioniert also. Sie können sehen, dass es aus irgendeinem Grund nicht auf der Konsole funktioniert, okay. Aber lass mich dir das auf dem Ausweis selbst zeigen, oder? Also hier haben wir gesagt, dass wir eine Zufallszahl bekommen werden. Ich werde es mit 16777 multiplizieren, okay, auf eins, fünf Ups, das müssen fünf sein. In Ordnung. Und diese ganze Sache, diese ganze Sache muss in einer runden Zahnspange sein, und dann gebe ich das Ding hier drüben zur Etage weiter. Okay. Also bekommen wir den Flow-Wert. In Ordnung. Jetzt lass mich das Console Dot Log hier drüben aufrufen. Anstatt das Konsolenprotokoll zu verwenden, können wir es tatsächlich in Coal Para anzeigen. Der Inhalt von Color Para Text entspricht einer zufälligen Farbe. Okay? Also können wir die Ausgabe hier selbst sehen. In Ordnung. Nun, wenn ich mich aktualisiere, lass mich sehen, was hier passiert. Es wird also ausgelöst, wenn Sie auf Farbe generieren klicken. Sie können also sehen, dass diese Zahlen generiert werden. Okay. Aber im Moment ist das nicht die exadimale Repräsentation, Also, was ich hier tun würde, ist, dass ich herkommen würde. Ich würde sagen, hier wurde die Saite gelehrt, und ich würde sagen, ein Wert von 16, ungefähr so. Und das würde ich mir sparen. Okay? Ich würde sagen, Farbe erzeugen. Jetzt können Sie sehen, dass diese Werte generiert werden. Sie können diese Prüfungswerte sehen. Okay? Du musst dem Hash voranstellen Okay? Also sage ich hier drüben hat, so etwas, und ich sage plus Okay. Jetzt werden hier also Farbcodes generiert. Ich bin mir nicht sicher, ob Weiß auf der Konsole nicht funktioniert. Wenn du es weißt, lass es mich bitte wissen. In Ordnung. Aber es funktioniert hier ganz gut, wie Sie sehen können, alles klar. Jetzt ist das erledigt, okay? Und was wir tun müssen, ist, dass wir tatsächlich die zufällige Farbe anzeigen. Was wir auch tun müssen, ist, dass wir den Hintergrund auf die Farbe ändern können , die generiert wird. Ich kann also Dokument, Tot Body sagen und ich kann Tot Style, Tot sagen, und ich kann die Hintergrundfarbe ermitteln. Ups. Hintergrundfarbe hier drüben. Und die Hintergrundfarbe wird eine zufällige Farbe sein. Und wenn ich das speichere, kannst du Fun sehen, oder? Also mit einfachem JavaScript, wie viele Zeilen Java-Skript hast du geschrieben? Nicht einmal eine, zwei, drei, vier, fünf, sechs Codezeilen, Sie sind in der Lage, so viel Magie zu erzeugen. In Ordnung, du kannst es sehen. Mit dieser Formel generieren wir also einen Farbcode, den wir dem Benutzer anzeigen, und wir legen ihn auch als Hintergrundfarbe fest. Jetzt kommt dstyle dot CSS, oder? Also was ich tun werde, ist, dass wir herkommen. Okay, und fang hier mit dem Styling an. Okay. Also ich sage hier Schriftfamilie. Und ich füge Fond Familia als Aerial hinzu. Okay. Und wir können Text Align sagen. Ich lasse den Text zentriert ausrichten. Okay, Rand hier drüben, Rand, wir können auf Null setzen. Hoppla. Und dann hier drüben nehme ich Polster Ich werde eine Polsterung von 20 Pixeln haben. Okay, und ich habe eine Hintergrundfarbe. Ich kann hier eine Hintergrundfarbe haben, um sie zu hashen und wenn ich so etwas Okay. Also ja, das ist das erste CSS. Okay, aber wir müssen das CSS auch mit der HTML-Datei verknüpfen. Nur dann wird es sich widerspiegeln, richtig, was wir nicht getan haben. Also was ich tun kann, ist Link hier drüben zu sagen. RL entspricht Stylesheets. Okay. Stylesheet hier drüben und ich kann HRF haben Und das wird Styles Dot CSS sein, und ich werde es schließen. So etwas wie das. Okay? Sie werden jetzt sehen, wie CSS hier angewendet wird, okay? Jetzt ist der Körper fertig, in Ordnung. Wir können es ein bisschen mehr stylen. Okay. Er hat einen Tag. Was ich tun kann, ist, hier Farbe hinzuzufügen. Farbe kann sein, okay, stattdessen kann ich hier 333 hinzufügen. Okay. Dann müssen wir den Button stylen. Welchen Stil können wir dem Button also geben? Okay. Also geben wir ihm eine bläuliche Farbe Also ich habe einen Farbcode im Kopf, also kann ich sagen, dass ich hier blau haben kann, blaue Farbe, du kannst sehen Okay. Scrollen Sie jetzt nach unten. Farbe Hoppla. Die Farbe ist weiß, 55. Okay. Und Border, ich kann hier nichts sagen. Okay, Boter ist weg. Wir können jetzt Polsterung hinzufügen, damit es anständig aussieht, also ich kann sagen, zehn px und 20 px, speichern. Okay? Sieht anständig aus. Oder Sie können die Polsterung reduzieren, wenn Sie möchten. Okay. Marge. Ich kann einen Rand von zehn Pixeln haben. Okay. Und ich kann eine Schriftgröße von, sagen wir, 16 haben. Okay. Oder wir können Cursor, Zeiger hier drüben haben. Okay, Grenzradius. Okay, der Grenzradius kann hier fünf Pixel betragen. Okay. Und dann kann ich hier einen Übergang vornehmen, einen Übergang der Hintergrundfarbe. 0,3 Sekunden. Okay. Okay. Also das ist es. Sie können sehen, wie das CSS angewendet wird, okay? Und wenn du ein bisschen hineinzoomst. Also musst du ein bisschen hineinzoomen, okay. Also das ist Button-CSS. Oder du kannst den Button auch über die Maus bewegen lassen, okay? Also Knopf. Okay, H. Okay. Und hier kannst du Hintergrundfarbe sagen, und du kannst Dunkelblau hinzufügen. Okay. Sie können sehen, dass der CS in Aktion ist. In Ordnung. Also das ist erledigt. Sie können sogar das Display haben auf dem Sie den Farbcode anzeigen , oder? Sie können also auch diesen Stil verwenden. Also drücke ich versehentlich auf etwas anderes. Okay, also wir zeigen es hier in Farbe an. Okay. Also was ich tun würde, ist, hierher zu kommen. Eine Farbe. Ich hole das, ich beziehe mich auf diese ID, und ich sage Schriftgröße, du kannst hier 24 sagen. Okay, die Schriftstärke ist hier fett gedruckt. Sie haben Zugriff auf Fett. Okay. Und du kannst hier Farbe sagen. Farbe kannst du hinzufügen, okay. Du kannst einfach 333 behalten. Du kannst es hier sehen. Okay. Und dann können Sie Rand und Rand von 20 Pixeln und 100 haben. Okay. Das ist erledigt. Nun, ja, das ist es. Ich denke nicht, dass wir hinzufügen sollten, okay, das ist erledigt, und wir können mehr haben, wenn du willst. Aber vorerst machen wir hier halt, okay? Das ist so ziemlich alles, richtig. Und es ist ein sehr einfacher Farbgenerator. Sie können sehen, wie wir mit Hilfe von einfachem JavaScript, kaum fünf von einfachem JavaScript, kaum fünf, sechs Codezeilen, unserer statischen Webseite so viel Leben einhauchen konnten , richtig. Also ja, Sie können sich sogar dafür entscheiden , Rückenwind zu verwenden, wenn Sie möchten Aber ja, ich habe mich einfach dafür entschieden, ein bisschen Roh-CSS zu schreiben , okay Ich hoffe, das gibt Ihnen einige Einblicke, wie Sie hier Selektoren verwenden können. Und wie Sie Listener zu Schaltflächen hinzufügen können und wie Sie einen Code ausführen lassen können , nachdem Sie Ihrem JavaScript-Code einen Listener hinzugefügt Listener hinzugefügt Ordnung. Also ja, ich hoffe, das ist nützlich und ich hoffe, du konntest mir folgen. 26. Projekt: Temperaturkonverter bauen: Schauen wir uns also an, wie Sie eine Währungsumrechner-Anwendung erstellen können . In Ordnung. Also werden wir hier mit drei Dateien arbeiten , wie Index Dot Has, Index Dot HTML und Style Dot CSS. In Ordnung. Also fangen wir an, den Code in die HTML-Datei zu schreiben. Was diese Anwendung nun alles haben wird, ist, dass sie ein Drop-down-Menü haben wird, das den Benutzern helfen wird, auszuwählen, von wo sie wollen oder in welche Einheit die Temperatur umrechnen möchten, richtig Und dann haben wir auch ein Textfeld, in das der Benutzer die Temperatur eingeben kann, die er umrechnen möchte Und dazu haben wir eine Konvertierungsschaltfläche, die der Benutzer klicken kann, um die Temperatur umzurechnen. Also lass uns gehen. Ich mache hier einfach Ausrufezeichen und bereite hier etwas Standardcode In Ordnung. Sobald wir den Standardcode haben, aktualisiere ich den Titel, also sage ich Temperatur Konverter hier drüben. Okay. Und dann werde ich im Körper wieder das H-One-Tag haben. Also kopiere ich das einfach komplett und benenne es einfach in H eins um. Ordnung. Sie haben also einen Temperaturkonverter. Okay. Ja, du kannst es sehen. Also, was wir jetzt tun müssen, ist, eine Eingabe hinzuzufügen. Okay? Also die Eingabe ist hier vom Typ Text. Okay, also gib Text und ich werde auch einen Platzhalter haben Ich sage, gib die Temperatur ein. Okay. Und wir werden das schließen. Lassen Sie uns auch hier ein ID-Element hinzufügen. Die ID dafür kann also hier Oops sein, also ist so, dass die ID dafür Temperatur oder Temperatur sein kann, was auch immer Sie möchten Ich werde es einfach kurz halten, was die Temperatur angeht. Okay. Falls du siehst, dass du hier dieses Textfeld für die Temperaturen zwischen den Temperaturen hast. Ordnung. Jetzt ist das erledigt. Jetzt müssen wir eine Auswahl treffen, es sich um ein Drop-down-Menü handelt. Ich werde das nennen. Ich werde diese Geräte-ID zuweisen. Und innerhalb dessen werde ich die Wahl haben . Hier drüben. Okay. Jetzt hat die Option den Typ Wert und der Wert ist C. Jetzt ist die Anzeige Celsius. Etwas in der Art. Und wenn du hierher kommst, wirst du hier oben Celsius sehen. Ich werde das gerne hier duplizieren. Statt C werde ich hier F nehmen und ich werde Farin Fahrenheit nehmen , so etwas in Okay? Also, wenn du jetzt herkommst, wirst du Celsius und Fahrenheit sehen, was gut genug ist Also gut. Abhängig von der Auswahl werden nun C und F an die Anwendung oder einen beliebigen Selektor oder wo auch immer Sie den Wert übergeben Nun, hier drüben kannst du einen Button haben. Okay. Ich füge hier die Schaltfläche „ Konvertieren“ hinzu, die ID lautet „konvertieren“ und „ Text hinzufügen“ hier. Okay? Und dann müssen wir auch den umgerechneten Wert anzeigen, also sage ich hier die umgerechnete Temperatur. Was ist also die umgerechnete Temperatur? Ich füge eine Spanne hinzu, um die Temperatur anzuzeigen. Okay? Also ich sage hier Span und wir haben zunächst Null, und ich kann eine ID hinzufügen, um so etwas umzuwandeln. Okay. Das ist erledigt, du kannst es dir hier ansehen. So sieht die Oberfläche im Moment aus. In Ordnung. Jetzt können wir es schnell mit unserer Anwendung verknüpfen, also sage ich hier Skript. Ich sage SRC und ich sage Index s und ich werde es schließen. Wir werden auch den CSS-Teil verlinken. Also sage ich Link RL und ich sage Stylesheet. Okay. Und ich werde sagen, dass ich HRF hier als Styles Dot CSS und LCLoss hinzufügen werde. Also das ist soweit so gut gemacht, Sie können die Anwendung sehen. Jetzt müssen wir mit dem JavaScript-Teil beginnen, richtig. Also, was wir jetzt tun müssen, ist zuerst, also zuerst, wenn Sie darauf klicken, sollte der Code ausgeführt werden, oder? Also müssen wir uns diesen Button besorgen. Okay? Wir können also sagen, dass Dokument Punkt für Punkt Element für ID erhält , weil wir hier ID verwenden. Okay? Und ich kann sagen, konvertieren Sie hier, oder? Und was sollte passieren? Wenn wir darauf klicken, wollen wir also etwas ausführen. Also sage ich bei Klick hier drüben und ich führe eine Funktion aus. Eine Funktion hat keinen Namen, sie hat keinerlei Parameter, und ich richte das zuerst mit einem Semikolon Und jetzt können wir innerhalb dieser Funktion hinzufügen, was auch immer wir wollen oder welchen Code wir anzeigen möchten oder welchen Code wir im Grunde beim Klicken auf die Schaltfläche ausführen möchten im Grunde beim Klicken auf die Schaltfläche ausführen Also erstelle ich hier zuerst ein paar Variablen, die Temperatur, und ich hole mir auch die Einheit. Jetzt müssen wir zuerst die Temperatur und die Einheit ermitteln. Okay. Also sage ich Dokument, Taut, Element nach ID abrufen, und wir müssen den temporären Taut-Wert Nun, warum Temp-Punktwert. Also hier, das ist Temp. Wir erhalten also zuerst den Wert, den der Benutzer eingegeben hat Und dann müssen wir auch die Einheit abrufen , die der Benutzer ausgewählt hat, oder? Also würde ich das hier rüberkopieren oder eine Minute warten , wir müssen das abschließen. Der Wert, den wir hier bekommen wird im Zeichenkettenformat sein. Ich möchte keine Zeichenfolge verwenden, also müssen wir auch die Dezimalwerte beibehalten. Also, was ist hier die richtige Wahl? Ja, wie Sie sehen können, verwende ich Parse Float. Warum verwende ich Parse Float? Weil der Benutzer möglicherweise einen Dezimalwert eingibt. Ich brauche auch den Dezimalwert. Aus Gründen der Präzision. Ordnung. Ich hole das Dokument mit dem Punkt Get Element ID hier drüben, und ich hole das Gerät hierher. Okay, also das muss drin sein Das muss als Zeichenfolge sein. Also sage ich Einheit, so etwas in der Art. Okay. Das ist erledigt, so weit, so gut. Okay. Und sobald wir die Einheit und die Temperatur haben, können wir tatsächlich Code schreiben , auf dessen Grundlage die Konvertierung erfolgt, oder? Nun, was sollte dieser Code sein? Also müssen wir die Entscheidungsfindung hier drüben nutzen , oder? Also, wenn der Benutzer Farenhight auswählt. Eine Formel wird angewendet. Wenn der Benutzer Celsius auswählt und auf Umrechnen klickt, wird eine andere Formel angewendet. Je nachdem, was hier ausgewählt ist, ändert sich die Formelanwendung. Ordnung. Also lass mich dir zuerst die Formel zeigen, okay? Die Formel lautet also, Celsius in Fahrenheit umzurechnen, wir sagen, Temperatur ist hier 9/5 plus 32. Das ist eine Formel, die wir verwenden werden, um C in F umzurechnen . Und um dann Fahrenheit in Celsius umzurechnen, sagen wir Temperatur -32 und wir sagen, 9/5. In Ordnung. Diese beiden sind die Formeln. Lassen Sie mich das auch hier erwähnen. Das wird F in das von C umwandeln. In Ordnung? Nun, woher wissen wir , welche Formel wir ausführen wollen, richtig? Also werde ich sagen. Also werde ich sagen, ob Einheit gleich C ist . Also meine Einheit ist C, richtig? Also, wenn der Benutzer hier oben unten Celsius ausgewählt hat , was passieren sollte, ist, dass wir C in F umrechnen sollten, richtig? Denn dann sollten wir das ausführen, oder? Oder wenn es nicht wahr ist , können wir das ausführen. In Ordnung. Und wir können diesen Teil in der runden Zahnspange haben und aus Gründen der Übersichtlichkeit sogar diesen Teil in der runden Zahnspange. Alles klar? So etwas wie das hier. Okay. Und dann kann ich die Ausgabe der Konvertierung zuweisen. Temperatur hier drüben, was eine Variable ist. Okay. Und wenn ich herkomme. Ups. Also wenn ich herkomme, kann ich das tun, damit wir diese umgerechnete Aushilfe haben. Wir können diese umgerechnete Temperatur anzeigen. Wie werde ich es also anzeigen? Ich kopiere diesen Text und wir müssen ihn in ID-Konvertierung anzeigen, richtig? Ist das der Ausweis, den wir geben? Okay, also die ID ist konvertiert, ja, wir müssen sie in der Spanne anzeigen, oder? Also umgewandelter Punkt. Ich sage Textinhalt und ich sage konvertierter temporärer Punkt Ich kann einfach die konvertierte Temperatur anzeigen. Lassen Sie uns sehen, welchen Wert wir sehen. Nehmen wir an, die Temperatur ist 100, ich wähle Celsius. Das ist Celsius, oder? Also muss ich es in Fahrenit konvertieren. Also das sind 21, zwei Okay. Wenn Sie das überprüfen möchten, können Sie einfach Celsius nach Fahrenit googeln und Sie werden auf diesen Rechner bei Google selbst, der Google-Suche, stoßen auf diesen Rechner bei Google selbst, der Google-Suche, stoßen Sie können also 100 eingeben und die Ausgabe wird als Eins, Zwei angezeigt Ordnung. Wir können dasselbe für Fahrenit tun, wenn Sie Fahrenit auswählen und konvertieren sagen Die Temperatur in Celsius beträgt 122,4, und Sie können Ich habe jetzt Google von Fahrenit bis Celsius. Das ist also Celsius in Fahrenit. Das ist Farenit zu Celsius. Also, wenn ich 100 sage, verstehe ich, okay, also da ist etwas 1 Sekunde Also, da sind 100 Fahrenit und ich Okay, also meine Umrechnung scheint falsch zu sein, also sollte es eigentlich 37 Grad Celsius sein, Aber ich kriege 122. Also, wenn du herkommst, stimmt vielleicht etwas mit der Formel nicht. Okay, das kann also nicht sein. Okay, das sollte also nicht neun mal fünf sein, hier sollte es fünf mal neun sein. Also, wenn Sie kommen, finden Sie 100 Fahrenheit umgerechnet, Sie können 37,77 78 sehen Okay. Also jetzt ist es richtig. In Ordnung. Es gab einen Fehler in der Formel, also stellen Sie sicher, dass Sie diese Formel verwenden , oder? Also, das sieht jetzt nicht gut aus, oder? Es sind 7777, viele sieben und dann acht. Also würde ich es auf feste Dezimalzahlen oder auf eine feste Position mit zwei Stellen verschieben wollen feste Dezimalzahlen oder auf eine feste Position Also, was ich hier tun kann, ist, eine temporäre, straffe, in eine feste Zahl umwandeln und ich kann zwei über sagen straffe, in eine feste Zahl umwandeln und ich kann zwei Sie können sehen, Anzahl der Ziffern. Auf diese Weise können Sie die Anzahl der Ziffern nach dem Komma angeben und sie muss im Bereich von 020 bis 20 liegen, tut mir leid, einschließlich Also, wenn ich das speichere und wenn du hierher kommst, wenn ich 100 Celsius eingebe, ist das in Ordnung Okay. Ich gebe Null, Null. Wenn Sie Fahrenheit hinzufügen, sehen Sie 37,78. Ordnung. Also so funktioniert der Temperaturkonverter ziemlich einfach, alles klar. Aber mit Hilfe von JavaScript können wir viel tun, oder? Schauen wir uns nun das Styling hier an. Okay. Wir werden das Styling hier so einfach wie möglich halten. Ich tippe einfach ein paar ein. Ich tippe einfach ein paar Stile ein, okay, Beispiel Stil, ich tippe nur ein paar Stilelemente ein. Also füge ich hier einfach ein paar Stilelemente hinzu. Also, was die Familie angeht, sagen wir mal so wie diesen hier drüben. Okay, Textzeile. Ich lasse Mitte und Rand bei Null. Und ich sage für den Abstand 20. Wahrscheinlich. Okay. Und ich werde wie wahrscheinlich eine Hintergrundfarbe hinzufügen. Wir können Hintergrund hinzufügen , sagen wir, Azure. Mal sehen, wie es aussieht. Okay. Sieht es gut aus? Es ist okay. Azure sieht anständig aus. Courier sieht auch anständig aus, okay? Oder du kannst die Schriftfamilie aktualisieren wenn dir das nicht gefällt, okay? Schriftfamilie kann also sein, Sie können den Alvita-Luftsensor auswählen Du kannst es sehen. Das ist auch okay. Abhängig von Ihrer Wahl können Sie die Schriftfamilie wählen. Komm rüber zu H One hier drüben. Okay. Nun zu H one, ich werde Farbe sehen. Was ist die Farbe? Sie können wahrscheinlich nach unten gehen und Sie können schwärzlich wählen . Ich kann es auch aktualisieren, also kannst du es auf so etwas aktualisieren Es liegt ganz bei dir, oder du kannst hier bei Schwarz bleiben . Ich werde das einfach los. Ich werde Schwarz einfach halten. Okay. Okay. Das ist erledigt. Jetzt können wir hier die Auswahl und die Eingabe sehen. Ich kann also Eingabe für Text als Text sagen. Okay. Und für Select hier drüben. Das ist ein CSS. Hier drüben kann ich sagen, eine Polsterung von Null Pixeln. Okay. Ich kann hier eine Schriftgröße von 16 sagen. Okay. Dann kannst du hier einen Spielraum für zehn Pixel haben, okay? Sie können einen größeren Radius von fünf Pixeln haben. In Ordnung. Du kannst hier ein Pixel haben, fest, und ich sage Hashtag, und ich sage Hashtag dann kannst du hier eine Breite von 200 Pixeln haben Lass uns speichern und sehen, du kannst es sehen. Das hat sich ein bisschen geändert, oder? Sieht ziemlich anständig aus, oder? Sie können mehr Polsterung hinzufügen, wenn Sie möchten. Okay. Ich kann die Polsterung auf sagen wir zehn erhöhen. Okay. Polsterung sah nicht so gut aus, aber jetzt sieht sie anständig aus, wie Sie sehen können Okay. Und jetzt kommen wir zu diesem Thema, das nächste ist Muster hier drüben. Schauen wir uns also das Muster an, was wir alles hinzufügen können. Okay? Also was den Button angeht, werde ich hier Muster sagen und ein bisschen nach unten scrollen. Okay. Also für den Button können wir sagen, Hintergrundfarbe von, äh, lass mich Blau hinzufügen. Okay. Ich kann sagen, die Farbe ist weiß, und der Rand ist keins. Und ich kann hier Polsterung hinzufügen, zehn Pixel, 20 Pixel, so etwas Und du kannst Schrift sagen, okay, nicht Schrift, Schriftgröße Die Schriftgröße kann 16 sein, sollte anständig aussehen. Wir werden das ändern, wenn nicht, okay, Mauszeiger hier drüben. Ich kann sagen, der Pulverradius beträgt fünf Pixel, ungefähr so. Und ja, ich glaube, das ist es. Wenn du herkommst, okay, es sieht ziemlich anständig aus. Wenn du willst, kannst du einen Hover-Effekt hinzufügen, okay? Ich kann also sagen, Hover on Button. Okay, der Hover-Button kann also die Hintergrundfarbe haben, und ich kann sagen, dunkelblau Komm her. Du kannst diesen Effekt sehen, oder? So ziemlich das. In Ordnung. Und jetzt können Sie ein Styling für PTAC hinzufügen. Okay? Ich kann sagen, dass Schriftgröße und DIN-Pixel etwas größer sind als die Schaltfläche. Und die Schriftstärke ist fett gedruckt. Und dann ist Farbe 333. Margin of Ich kann 20 Pixel und Null sagen. Wenn du herkommst, okay? Lassen Sie uns also dieses Ding hinzufügen, das wir haben das umgewandelt wurde, wir werden dem etwas hinzufügen. Okay. Ich komme hierher und hier, konvertiere es. Dafür sage ich Farbe. Farbe von Wir können sagen, ich kann es ein bisschen blau. Okay. Je nach Präferenz können Sie Schriftgröße sagen. Ich sage groß und gewichtet, fett gedruckt. Mal sehen, wie es aussieht. Man sieht also ziemlich anständig, richtig, hervorstechend. Du kannst es konvertieren. Okay. Also, das ist unser Temperaturkonverter, und wie er funktioniert hat, haben wir etwas HTML gebaut oder geschrieben, einfaches HTML, einfache Tags, die wir benutzt haben, wir haben verlinkt, wie JavaScript und CSS. In JavaScript erhalten wir die Konvertierungsschaltfläche und wir fügen sie beim Klicken auf Lissner hinzu, was ausgelöst wird, wenn Sie darauf klicken, und dann haben Sie diese Werte , die Sie abrufen, weil Sie auf dieser Grundlage die Konvertierung durchführen werden Stellen Sie sicher, dass Sie den Temperaturwert als Gleitkommawert abrufen Acht. Dann rechnen wir die Temperatur mit Hilfe von, wie Sie hier sehen können, mit Hilfe des ternären Operators um, richtig? Also überprüfst du zuerst. Das ist eine Bedingung. Okay, du überprüfst zuerst , ob die Einheit Celsius entspricht. Wenn es Celsius entspricht, müssen Sie Celsius in Ferrenit umrechnen Wenn die aktuelle Einheit nicht Celsius ist, wenn es Ferrenit ist, müssen Sie von Ferrenit in Celsius umrechnen, und das sind die Formeln Und dann zeigen Sie das umgerechnete Ergebnis an, indem Sie die Dezimalstellen auf bis zu zwei trennen, richtig Und dann haben Sie einige grundlegende Stile zur Verschönerung hinzugefügt. Ich hoffe also, dass Sie mir folgen konnten, und ich hoffe, das war hilfreich 27. Vorlagen-Literals: Jetzt ist es an der Zeit, über Vorlagenliterale zu sprechen und zu verstehen, was sie sind Also, wann immer Sie mit Zeichenketten arbeiten, okay, wie erstellt man eine Zeichenfolge, richtig. Entschuldigung für die Mützen. Sie können auf diese Weise eine Zeichenfolge erstellen, sodass Sie sagen können, et name entspricht W-Doppelcodes Sie können hier einen Namen zuweisen. Okay? Anstatt Doppelcodes können Sie jetzt sogar Einzelcodes verwenden. Okay, ich kann den Text auswählen und einen einzelnen Code eingeben. Also das ist auch hier eine gültige Zeichenfolge, okay? Nun, dies ist eine Möglichkeit , Zeichenketten zu erstellen und eine andere Möglichkeit ist die Verwendung von Vorlagenliteralen Was sind nun Vorlagenliterale? Sie ermöglichen es Ihnen also, flexibler und lesbarer mit Zeichenketten zu arbeiten . Was bedeutet nun flexibler und lesbarer? Das ist auch flexibel, oder? Aber das ist gut für einfache Anwendungsfälle. Nun wird es Anwendungsfälle geben, in denen Sie, sagen wir, eine weitere Variable erstellen müssen. Okay? Ich möchte eine weitere Variable erstellen und Hallo sagen. Okay? Und ich hätte gerne einen Namen hier drüben, oder? Also werde ich so etwas sagen müssen. Okay. Okay. Also, wenn ich hier das Console Dot Log mache, kann ich grüßen. Okay. Also, du wirst Hello Alice hier drüben sehen. In Ordnung. Also, wenn du zwei Zeichenketten verketten willst, benutzt du hier Plus, oder? Nun, das ist eine Möglichkeit, aber wenn Sie mehrere Arten von machen möchten , wenn Sie eine Zeichenfolge im Handumdrehen erstellen möchten und wenn Sie beim Konstruieren einer Zeichenfolge mehrere Variablen verwenden möchten, weil wir hier nur eine Variable verwenden nur eine Wir verwenden nicht mehrere Variablen. Also das ist immer noch okay. Wenn Sie jedoch mehrere Variablen haben, bei denen Sie mehrere Variablen verwenden , um eine Zeichenfolge dynamisch zu erstellen ist dieser Ansatz überhaupt nicht einfach und überhaupt nicht flexibel oder lesbar. Ordnung. In diesem Fall können Sie also das Template-Literal verwenden Also werde ich dir zeigen, was Template-Litters sind. Also hier verwenden wir einfache Anführungszeichen, okay? Und wir haben hier Plus verwendet , um die Variable am Ende hinzuzufügen. Aber hier drüben, wenn Sie die literale Vorlagensyntax verwenden , können Sie Hallo sagen , und ich werde hier Taller verwenden weil ich hier einen Namen hinzufügen möchte, oder? Und ich werde einen Namen sagen. Okay. Template-Literal ist also im Wesentlichen eine Syntax, die Sie verwenden, um Zeichenketten im Handumdrehen zu erstellen Ordnung? Also, das wird nicht funktionieren. Ich habe die Datei nicht gespeichert. Das wird nicht funktionieren, weil es immer noch in einzelnen Codes ist. Also, um das Template-Literal zum Laufen zu bringen. Okay, lass mich das Kontrollset machen. Lassen Sie mich dieselbe Syntax verwenden. Okay? Wenn ich das speichere, siehst du Hello Dollar Name. Dieser Wert wird also nicht ersetzt. Um diesen Wert zu ersetzen, muss ich Bates hinzufügen , anstatt einen einzigen Code zu verwenden Sie können Backticks sehen. Jetzt haben Sie hier eine Art Syntaxhervorhebung, und Sie können den Namen hier sehen Okay? Nun, das funktioniert mit jeder Art von Variablen. Wenn ich eine Variable namens Studentenname habe, okay, ich kann den Studentennamen hier drüben haben, und hier kann ich sagen, dass jeder gleich 17 ist. Sagen wir zum Beispiel. Hallo Student, okay? Und ich kann sagen, dass du es bist. Ich kann es gebrauchen, also ich möchte jetzt im Alter drucken, oder? Ich kann also Dollar, Alter sagen. Okay. Und du bist Du bist alt. Okay. Also hier wirst du es sehen. Hallo Alice, du bist 17 Jahre alt. Kannst du das sehen? Okay. Wenn ich den Editor etwas verkleinere, siehst du, dass das gedruckt wird. In Ordnung. So können Vorlagenliterale nützlich sein. Stellen Sie sich nun vor, Sie tun dies mit Hilfe des Verkettungsoperators, des Plus-Operators, den wir verwendet haben In Ordnung? Es ist nicht gut, wenn die Zeichenfolge etwas komplex ist Es ist etwas komplex aufgebaut. Okay? Und es ist nicht einfach. Wenn Sie mehrere Variablen verwenden, ist das Erstellen von Zeichenketten ohne die Hilfe von Vorlagenliteralen nicht praktisch Okay? So können Sie sehen, wie praktisch die Syntax ist. Sie ist auch lesbar. Die Definition hier drüben besagt also, dass es lesbar ist, oder? Und es ist lesbar. Jeder, der Ihren Code liest, wird also wissen, was Sie hier zu tun versuchen. Okay? Und ID macht hier auch hervorragende Arbeit bei der Syntaxhervorhebung. Sobald Sie also Dollar und diese geschweiften Klammern hinzufügen, wird dies in einer anderen Syntax hervorgehoben Ordnung? Also Vorlage, was sind Vorlagenliterale Vorlagenliterale sind eine Syntax, mit der Sie Zeichenketten erstellen und damit flexibler und, ich würde sagen, lesbarer arbeiten flexibler und, ich würde sagen, lesbarer Und was ist eine Syntax? Normalerweise können Sie also eine Zeichenfolge mit einfachen Codes oder doppelten Anführungszeichen erstellen , oder? Und Sie können mit dem Plus-Operator verketten, oder? Aber hier benutzt du Bates. Wenn Sie also Backtexte verwenden, sagen Sie Jascript, dass, Hey, ich möchte Template-Literale verwenden und diese Zeichenfolge könnte Ausdrücke enthalten Richtig? Nun, das ist ein Ausdruck, bei dem der Wert hier ersetzt wird. Alles klar? Also das ist eine einzeilige Zeichenfolge. Jetzt wird es auch Szenarien geben, in denen Sie eine mehrzeilige Zeichenfolge erstellen möchten eine mehrzeilige Zeichenfolge erstellen Okay. Lassen Sie mich Ihnen ein anderes Beispiel geben. Okay. Ich füge hier einen Kommentar hinzu. Schauen wir uns Multiline an. Schnur hier drüben. Okay? Also nehme ich mehrere Zeilen und okay, 1 Sekunde. Ich werde eine mehrzeilige Zeichenfolge haben, also so. Okay. Und ich kann sagen, dass dies eine mehrzeilige Zeichenfolge ist. Okay. Nun, sobald Sie das tun, werden Sie Fehler bekommen. Das ist nicht richtig. Okay? Weil Sie eine solche Zeichenfolge im Ja-Skript nicht erstellen können. Selbst wenn Sie einzelne Codes hinzufügen, wird es nicht funktionieren. Nun, wie erstellt man mehrzeilige Zeichenketten, richtig? Im Jar-Skript Sie können also, wie gesagt, Vorlagenliterale und Backticks verwenden Das wird also keinerlei Fehler geben, oder? Und Sie können einfach Console Dot Log sagen und Sie können in einer mehrzeiligen Zeichenfolge drucken Sie können also sehen, dass dies eine mehrzeilige Zeichenfolge ist, oder? Okay, jetzt kann ich sogar jedes Wort in einer neuen Zeile aufnehmen , was auch hier machbar ist. Wenn ich das speichere, kannst du sehen, dass es sich um eine mehrzeilige Zeichenfolge handelt , oder? Das ist also die Macht von, von Vorlagenliteralen. Und die Syntax ist im Wesentlichen , dass Sie hier Backticks haben werden, okay, so etwas, und Sie haben eine normale Zeichenfolge, und sie kann hier Ausdrücke haben. Okay, du kannst einen Ausdruck wie diesen sagen. Also das ist eine Syntax, okay, und lass mich eintippen. Es ist Syntax hier drüben. Okay. So können wir es also nutzen. Lassen Sie mich Ihnen nun mehrere Anwendungsfälle zeigen, richtig. Jetzt ersetzen wir hier nur Variablen, richtig? Aber du kannst sogar Ausdrücke haben, okay? Sie können also Ausdrücke sagen und Ausdrücke in Vorlagenliteralen verwenden in Vorlagenliteralen Acht. Lass mich sehen. Nehmen wir an, ich habe E hier gleich fünf gesetzt. Ich habe B gleich zehn gelassen, zum Beispiel sage ich hier let result. Okay. Jetzt habe ich Backticks Ich sage die Summe von in Ordnung, und ich sage A, und ich sage, B ist Nun, was ist die Summe? Okay, wir müssen die Summe ausdrucken, oder? Also sage ich A plus P. In Ordnung. Und dann sage ich Console Dot Log und ich sage Ergebnis. Sie werden also sehen, dass die Summe aus fünf und zehn 15 ist. Okay? Also betten wir jetzt Ausdrücke in das Template-Literal ein, okay? Das funktioniert also absolut einwandfrei, und Sie können sehen, wie Ausdrücke auch im laufenden Betrieb ausgewertet werden und die Zeichenfolge erstellt wird Alles klar? Also das ist auch möglich. Wir können sogar Vorlagenliterale mit Ja-Skript-Objekten verwenden Vorlagenliterale mit Ja-Skript-Objekten Nehmen wir an, ich habe hier ein Benutzerobjekt, das einen Vornamen hat, und ich werde John als Vornamen verwenden Okay. Ich nehme nur zwei Immobilien und einen Nachnamen. Okay. Entschuldigung, statt gleich werden das Schlüssel-Wert-Paare sein. In Ordnung, also John und ich sagen hier zwei. Also, das ist ein JavaScript-Objekt, oder? Was ich also tun kann, ist, Benutzerinformationen hier drüben zu lassen. Lassen Sie Benutzerinformationen Benutzerinformationen sein, und ich werde mit der nächsten Zeile fortfahren. Ich sage, der Name ist. Nun, wie lautet der Name? Ich sage größer und ich sage Benutzer Tt, Vorname. Okay. Und ich sage größer, Benutzer tot, Nachname, so etwas Und dann kann ich Console Dot Log sagen. Sie können Benutzerinformationen sagen. Etwas wie das. In Ordnung. Und du wirst Benutzerinformationen sehen, Colin, der Name ist John Doe Wenn Sie nun beispielsweise mehr Benutzerinformationen haben, können Sie hier das Alter angeben. Okay. Nehmen wir zum Beispiel an, es ist 33, oder? Sie können hier immer noch eine weitere Zeile hinzufügen. Man kann sagen, Alter ist höher und Benutzeralter, ungefähr so Sie können sehen, dass das Alter 33 ist. Okay. Also ja, das kann auch mit Dingen wie Objekten funktionieren. In Ordnung. Nun, die Sache ist, wenn Sie das getan haben, wie würden Sie mit Zeichenketten arbeiten , in denen bereits ein B-Häkchen steht? Okay? Also lass mich eine Zeichenfolge erstellen. Nehmen wir an, Sie haben eine Zeichenfolge E, die besagt, dass dies ein Backtick ist Okay. Okay, ich mag es, es druckt einfach eine Nachricht und es heißt, das ist ein Backtick, okay? Jetzt werden Sie sehen, dass dieses Häkchen hier gedruckt wird. Okay. Aber sobald ich das in ein String-Literal oder sorry, Template-Literal umwandle, wirst du sehen, dass es ein Problem gibt Okay? Also denkt es, dass das der letzte Backtick ist Wie würdest du mit einer solchen Saite arbeiten? In diesem Fall müssen Sie sich also der Bedeutung entziehen. Um zu entkommen, können Sie hier einen umgekehrten Schrägstrich hinzufügen. Okay? Und sobald du das gespeichert hast, wirst du sehen, dass es ein Backtick ist. Richtig? Dieser umgekehrte Schrägstrich wird also nicht berücksichtigt, aber er macht die Bedeutung des Backticks hier zunichte Und dieses Ding hier drüben ist bekannt als Flucht. Okay? Also du fliehst hier tatsächlich vor Tick zurück, was bedeutet, dass du der Bedeutung von Bac Tick entkommst und es zu einem Teil der Zeichenfolge machst . In Ordnung? Also dieses hintere Häkchen wird berücksichtigt und nicht dieses, wenn man die Schablone hier seitlich zuklappt. Ordnung. Also ja , es geht um Template-Literale. Wenn Sie mit JavaScript arbeiten, werden Sie im Code viele Vorlagenliterale sehen Wenn Sie lesen oder Ihre eigenen Projekte erstellen, werden Sie dieses Konzept häufig verwenden Ordnung, wenn Sie mit Zeichenketten in JavaScript arbeiten , richtig? Also ja, das sind Template-Literale für dich. 28. Mehr mit console.log: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen, über Console Dot Log zu sprechen. In Ordnung. Nun, wir haben JavaScript-Code verwendet, oder falls Sie irgendeinen JavaScript-Code gesehen haben, müssen Sie schon gesehen haben oder wissen, was Konsolen-Dot Log ist. In Ordnung, es wird also verwendet, um Dinge auf die Konsole zu drucken. Also, wenn ich Hallo Welt sage und wenn ich das speichere, werde ich Hello World hier drüben als Ausgabe sehen. Was auch immer ich hier zwischen diesen beiden Codes oder einem einzigen Code aufgebe, ich kann auch einzelnen Code verwenden. Ich werde das Ding als Ausgabe hier drüben sehen, okay? Und ich kann auch, also wenn ich Console Dot Log sage, eins, zwei, drei, und wenn ich speichere, dass RC 123 gedruckt wird. Okay? Das ist also die grundlegende Form der Protokollierung, die Sie durchführen, und Log ist eine der Methoden oder Funktionen Sie auf diesem Konsolenobjekt sehen können. Console ist also eigentlich ein Objekt, okay? Und Sie verwenden das Protokoll, um Werte abzurufen und sie in die Konsole zu drucken. In Ordnung. Nun, was wir hier sehen, ist einfaches Logging, oder? Sie können natürlich mehrere Werte protokollieren. Wie würden Sie also mehrere Werte protokollieren? Okay, lassen Sie uns mehrere Werte nehmen. Also kannst du hier Console Dot Log sagen. Okay. Und ich kann im Namen drucken. Okay. Und ich kann sagen, ich kann Alice hinzufügen und dann kann ich jedes haben, so etwas in der Art und ich kann 25 sagen. Okay. Nun, das kann auch durch Variablen ersetzt werden. Okay, du kannst den Namen Ale im Alter von 25 Jahren sehen. Okay. Und ich trenne alles mit Hilfe eines Kommas Ich kann hier sogar Plus gebrauchen. Also, wenn ich das kopiere, okay, du kannst ein Plus hinzufügen. Stattdessen kannst du also Plus sagen. Okay, es wird eine ähnliche Leistung liefern. Du kannst es sehen. Also ja, das ist eine Möglichkeit, mehrere Werte zu drucken. Und natürlich können diese Werte auch mit Hilfe von Variablen ersetzt werden , oder? Sie können also Variablen verwenden, wie ich schon sagte, okay, also Sie können sagen, dass X hier gleich zehn ist und Y gleich 20 ist. Okay. Und wenn ich drucken muss, kann ich hier das Console Dot Log sagen, D-Wert von X ist, und ich kann X hinzufügen . Okay. Sie können sehen, dass es hier eine Variable ist. Ordnung. Man kann sogar Gesichtsausdrücke haben. Du kannst also sagen, Summe ist okay, X plus Y. Du wirst 30 sehen. Du kannst es sehen So funktionieren verschiedene Dinge. Sie können hier auch Vorlagenliterale verwenden. Okay, ich kann also buchstäblich hierher kommen. Anstatt Doppelcodes zu verwenden, kann ich das hier viel lesbarer machen, und ich kann größer sagen, so etwas in der Art, und ich kann das haben. Das kannst du sehen Die Summe ist 30. Okay, Sie verwenden also Vorlagenliterale und erhalten die Werte. In Ordnung. Wenn Sie jetzt ein Objekt erstellt haben, können Sie das Objekt auch protokollieren. Lass mich dir das zeigen. Okay? Also Objekte protokollieren, richtig? Lassen Sie mich jetzt hier ein Objekt namens Person erstellen. Okay? Und ich sage den Namen. Ich sage Charlie. Okay. Und ich sage, das Alter ist, sagen wir, wir sagen 28, und ich kann sagen, dass der Beruf entwickelt ist. Okay. Okay. Also eine Person namens Charlie ist 28 und ihr Beruf ist Entwickler. Okay. Jetzt kann ich einfach Console Dot Log sagen. Okay, ich kann Name sagen, tut mir leid, Punktname der Person. Und das wird im Namen gedruckt, oder? Du kannst Charlie sehen. Jetzt kann ich einfach den Namen hier loswerden und einfach das gesamte Personenobjekt ausdrucken. Das ist auch mit Console Log möglich, oder? Sie können sogar im C-Stil arbeiten oder Sie können sogar eine formatierte Ausgabe haben Okay? Also diese Art von formatierter Ausgabe, du musst gesehen haben, ob du dich mit C-Programmierung auskennst , okay? Also, wenn ich Console Dot Log sage, okay, und lass mich das holen Okay. Also wenn ich hier den Wert von X sage. X ist Prozentsatz D. Okay? Und wenn ich das speichere, werden Sie sehen, dass der Wert von Wert ist, es sollte sein, dass die Aussage falsch formuliert ist, also sollte der Wert Prozent D sein, oder Sie können den Wert von X hier drüben haben, D. Sie verwenden Prozentsatz D , der als Platzhalter dient um die Werte zu ersetzen. Stimmt das? Nun, wenn Sie diesen Platzhalter verwenden , nur einen Platzhalter Und wenn Sie hier mehrere Ersatzwerte hinzufügen , okay? Und wenn du das ausführst, wirst du sehen es am Ende einfach angehängt wird, okay? Und ja, so funktioniert es. Jetzt können Sie hier auch mehrere Platzhalter haben hier auch Okay, du kannst also Console Dot Log sagen. Und ich kann Hallo sagen, Prozentsatz S. Also, Prozentsatz S steht für Zeichenfolge. Prozentsatz D steht für Dezimalwerte. Prozentsatz D, weil H Prozentsatz D ist und ich sage Jahre alt. Sie können sehen, dass Prozent S, Prozent D Jahre alt sind. Jetzt kann ich Ale hier haben und ich kann 22 hier haben. Wenn ich das speichere, siehst du Hello Alice, du bist 22 Jahre alt Alles klar? So kann das Konsolenprotokoll also auf verschiedene Arten verwendet werden. Das Protokoll ist eine Methode oder eine Funktion, ich habe es dir gesagt, oder? Es ist eine Methode, die mit Console Object verfügbar ist. Jetzt gibt es mehrere andere Methoden, okay? Also Konsolenmethoden. Okay? Jetzt gibt es mehrere andere Methoden. Was sind sie? Wir haben also Console Log, das wir gesehen haben. Sie haben hier einen Console-Punktfehler, Sie können sehen, dass Fehler auch Methode ist, und ich kann sehen, dass dies ein Fehler ist. Sie können jede Art von Fehlermeldung eingeben und Sie werden sehen, dass es sich um einen Fehler handelt. Du kannst sehen, wie es reinkommt, oder? Ich kann das kopieren und statt eines Fehlers kann ich hier eine Warnung haben. Das ist eine Warnung. Und wenn ich das speichere, wirst du sehen, dass das eine Warnung ist, oder? Und wenn ich das dupliziere, kannst du hier auch eine Informationsnachricht haben , damit ich Informationen sagen kann Das sind also Informationen. Das ist informativ. Und wenn ich das speichere, wirst du sehen, dass es informativ ist, oder? Die Warnung wird also auf diese Weise angezeigt. Informationsmeldungen werden auf diese Weise angezeigt und Fehler werden auf diese Weise angezeigt, richtig? Also ja, das sind mehrere Möglichkeiten, wie Sie Konsolenmethoden verwenden können Konsolenmethoden verwenden Jetzt können Sie auch die Konsolentabelle verwenden. Okay? Also das ist eine weitere tolle Sache. Also gut. Nehmen wir an, ich habe dieses Objekt Person genannt, okay? Und wenn ich sage, okay, lass mich Console Dot Log sagen. Wenn ich Console Log verwende und Person sage, wirst du sehen, dass die Anzeige nicht so gut ist. Es werden Schlüsselwertpaare im JCN-Format angezeigt , was erweiterbar ist Ich möchte das als Ausgabe in Form einer Tabelle haben. Ich kann Konsole, Tabelle hier sehen und ich kann hier persönlich vorbeigehen und ich kann ein Semikolon haben Wenn ich das speichere, siehst du, Index ist Name, Wert ist Index H, Wert ist 28, Index ist Beruf, Wert ist Entwickler. Sie können es auch sortieren. Okay. Also ein bisschen Funktionalität auch hier drüben, und das ist das Objekt, nur für den Fall, dass Sie es in Json- oder Objektform sehen möchten . Richtig? Das ist also die Funktionalität von Table, mit der Sie komplexe Dinge wie Objektdatenstruktur oder Objektvariable auf der Konsole drucken komplexe Dinge wie Objektdatenstruktur können. Ordnung. Und Sie können sehen, dass es so aussieht. Ordnung. Also die Konsole ist in der Tat sehr wertvoll. Sie können das Protokoll verwenden. Sie werden es sehr häufig verwenden. Sie können es verwenden, um Objekte und Vorlagenliterale zu drucken, Werte zu ersetzen und im Handumdrehen Zeichenketten zu erstellen, um sie als Ausgabe anzuzeigen Sie können das formatierte Ausgabeformat verwenden wenn Sie einen Programmierhintergrund wie C, C plus plus haben, okay Sie können diese formatierte Ausgabe auch in Java verwenden Okay? Sie können diese Art von formatierter Ausgabe auch in Java erhalten, oder? Und dann können Sie verschiedene Konsolenmethoden verwenden um Fehlermeldungen, Warnmeldungen und Infomeldungen zu drucken Warnmeldungen und Infomeldungen Und am Ende haben Sie eine Tabelle, um Dinge wie Objekte im Tabellenformat anzuzeigen, oder? Ich hoffe, das ist nützlich und ich wünsche Ihnen viel Spaß beim Erkunden von Console Object. 29. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser unglaublichen Reise in die Welt von JavaScript angelangt. In diesem Kurs haben Sie eine solide Grundlage in JavaScript aufgebaut und gleichzeitig die Grundlagen von JavaScript wie Arrays, Operatoren, Objekte und verschiedene Datentypen kennengelernt die Grundlagen von JavaScript wie Arrays, Operatoren, Objekte und verschiedene Datentypen Sie haben auch verstanden, wie JavaScript in realen Umgebungen funktioniert Wir haben auch über einige praktische Anwendungen und einige Projekte gesprochen praktische Anwendungen , die wir in der Klasse durchgeführt haben. Ich hoffe, dieser Kurs hat dir geholfen , Jascript aus einer ganz anderen Perspektive Aber denken Sie daran, dass das Erlernen von Jascript hier nicht aufhören sollte und wird Der beste Weg, als Programmierer zu wachsen , besteht darin, weiter zu üben, weiter Dinge zu entwickeln und sogar Denn wenn Sie Projekte erstellen, würden Sie alle Konzepte anwenden, die Sie gelernt haben, und das würde Ihnen auch helfen , etwas Selbstvertrauen zu gewinnen bevor Sie zu Projekten in der realen Welt übergehen Jetzt möchte ich Sie bitten, weiter zu üben, weiter zu forschen und weiter zu experimentieren Bei diesem speziellen Kurs finden Sie im Projektbereich ein Klassenprojekt, das ich Ihnen empfehlen möchte, abzuschließen und es mit der gesamten Klasse zu teilen Danke, dass du mich auf dieser Reise begleitet hast. Ich hoffe, dieser Kurs hat Ihnen geholfen, Vertrauen in JavaScript zu gewinnen , und Sie dazu inspiriert, weiter zu lernen Viel Spaß beim Programmieren und alles Gute.