Grundlagen der Webentwicklung: Javascript

1. Einführung: Hallo und willkommen bei Web Development Fundamentals: JavaScript. Ich bin Chris, ich bin ein Autodidakt Web-Entwickler und Schöpfer drei der Klassen hier auf Skillshare, Verstehen Web Development, How to Effizient Build Wordpress Sites mit Divi, und zuletzt Web Development Fundamentals: HTML und CSS. Diese Klasse ist der nächste Schritt in unserer Web Development Fundamentals Serie. In der vorherigen Klasse haben wir beschrieben, wie man Webseiten mit HTML erstellt und sie dann mit CSS formatiert. In diesem Kurs lernen wir, wie wir mehr interaktive Funktionen zu unseren Websites und Webanwendungen mit JavaScript hinzufügen können. JavaScript ist natürlich eine der drei Kerntechnologien des weltweiten Webs. Es wird gesagt, dass es die beliebteste Programmiersprache der Welt ist und es ist die Programmiersprache für Front-End-Web-Entwicklung seit Beginn des Web. Also, unabhängig davon, welchen Pfad Sie folgen, als Webentwickler, werden Sie ein wenig Verständnis von JavaScript benötigen und insbesondere, wie es in Ihre Webseiten integriert wird, um interaktive Websites und Web zu erstellen Anwendungen wie viele von denen, die Sie heute verwenden. Also, wenn Sie bereit sind, eintauchen und lernen Sie die Grundlagen der Entwicklung für das Web mit JavaScript, weiter zu beobachten und ich werde Sie im nächsten Video sehen. 2. WAS DU BRAUCHST: Also, bevor wir anfangen, ist es wichtig, dass wir über das erforderliche Wissen sprechen. Wie ich bereits im letzten Video erwähnt habe, ist dieser Kurs der nächste Schritt in unserer Web Development Fundamentals-Reihe. Also, wenn Sie neu in der Web-Entwicklung sind, empfehle ich Ihnen auf jeden Fall, meine letzte Klasse Web Development Fundamentals zu nehmen : HTML & CSS. Andernfalls, wenn Sie wissen, wie man Webseiten erstellt, dann sind Sie an der richtigen Stelle, um zu lernen, wie man sie interaktiv macht. Nun, für diejenigen von Ihnen, die meine letzte Klasse für HTML und CSS absolviert haben, möchte ich mich nicht zu sehr wiederholen in Bezug auf die beiden wesentlichen Tools, die ein Webbrowser und ein Code-Editor sind. Chancen stehen, wenn Sie bereits etwas HTML und CSS getan haben, verstehen Sie, was diese Tools sind und wie Sie sie verwenden. Wenn nicht, empfehle ich, zur letzten Klasse in HTML und CSS zu gehen und die Lektion „Was Sie brauchen“ für diese Klasse zu überprüfen. Im Grunde, abgesehen von einigen Kenntnissen in HTML und CSS, einem Webbrowser und einem Code-Editor, sind Sie bereit, direkt in das Lernen von JavaScript zu springen. Also, wir sehen uns auf dem nächsten Video. 3. Einführung in Javascript: Bevor wir also anfangen, mit etwas JavaScript zu arbeiten, lassen Sie uns ein wenig darüber reden, was JavaScript ist und wie es in die Web-Entwicklung passt. Zunächst einmal ist JavaScript einfach eine Programmiersprache. Was ist eine Programmiersprache? Nun, laut Wikipedia ist eine Programmiersprache eine formale Sprache, die eine Reihe von Anweisungen angibt , die verwendet werden können, um verschiedene Arten von Ausgaben zu erzeugen. Warum erwähne ich das? Nun, es ist wichtig, eine Programmiersprache von den anderen beiden Sprachen, aus denen das Frontend besteht, zu unterscheiden : HTML und CSS. HTML ist eine Markup-Sprache, und CSS ist eine Stylingsprache. Ich weiß, dass das abstrakt klingen mag, aber es gibt bestimmte Dinge, die Programmiersprachen alle tun, dass HTML und CSS nicht tun. Ich spreche von expliziten Berechnungen, Schleifen und Funktionen. Für unsere Zwecke mit Web-Entwicklung, alles, was Sie über Programmiersprachen wissen müssen, ist, dass wir sie brauchen, um unsere Websites interaktiv zu machen. Also, um mit Ihnen ein paar Beispiele zu teilen, was JavaScript tun kann, habe ich hier eine grundlegende Webseite geöffnet, die wir tatsächlich in einem späteren Video erstellen werden. Aber im Moment haben wir nur eine Überschrift, wir haben einen Knopf und wir haben ein leeres div. Was ich in meiner Textdatei hier habe einige JavaScript-Anweisungen, die ich früher vorbereitet habe , die wir verwenden können, um diese Seite zu manipulieren. Also, wenn ich hier in die Konsole gehe, kann ich diese JavaScript-Anweisungen direkt in der Konsole ausführen, und wir können sehen, dass diese Änderungen sofort geschehen. Also, der erste wird den Pokemon-Button bekommen , der diese ist, und es wird es verstecken. Also, ich werde das in meine Konsole legen, Enter drücken, und Sie können sehen, dass es weg ist. Eine andere Sache, die wir tun können, ist , den inneren HTML-Code zu ändern , den inneren HTML-Code zu ändern, der nur den Inhalt in einem bestimmten Element ist, also wird dieser uns tatsächlich etwas Text zu unserem leeren div geben. Wie Sie sehen können, heißt es jetzt: „Willkommen in der Klasse“. Wenn wir zu den Elementen gehen und in unseren Inspektor schauen, wird es auch dort aktualisiert. Die nächste, können wir auch eine beliebige Anzahl von Styling zu diesem div hinzufügen. Ich werde einen 20-Pixel-Rand hinzufügen. Jetzt können Sie sehen, wir haben einen 20 Pixel-Rand. Schließlich werde ich die Überschrift Tag greifen, und ich werde es von Pokemon zu Digimon ändern. Wenn ich auf die Eingabetaste klicke, geschieht die Änderung sofort. Also, wir werden all dies in der Klasse eingehen, wie das funktioniert, aber im Moment sind dies einige Beispiele für Dinge, die Sie mit JavaScript tun können. Nun, der Grund, warum wir JavaScript verwenden müssen, um diese Art von Sachen zu tun, ist weil die Software, die wir verwenden, um JavaScript auszuführen, unsere Browser sind. Denken Sie daran, dass der Browser das Programm ist, das Sie gerade verwenden, um im Internet zu surfen. Derzeit gibt es eine 90 Prozent Chance, dass der Browser, den Sie gerade verwenden, ist entweder Firefox, Safari, Internet Explorer, oder Edge. Wenn also eine Website auf all diesen Browsern funktioniert, müssen sie sich alle darüber einigen, welche Programmiersprache sie laufen werden. Das ist tatsächlich in den späten 90ern passiert, wenn Sie an Geschichte interessiert sind. Aber wirklich, warum wir JavaScript verwenden müssen, ist nicht so wichtig. Wir müssen nur wissen, dass wir es für die Frontend-Webentwicklung verwenden müssen. Dies unterscheidet sich von Backend-Programmiersprachen, da diese alle auf der Service-Seite ausgeführt werden. Denken Sie daran, dass HTML, CSS und JavaScript in Ihrem Browser ausgeführt werden und das Backend auf einem Server ausgeführt wird. Also, für unsere Zwecke müssen wir nur JavaScript als Programmiersprache für das Frontend betrachten. Jedes Mal, wenn Sie möchten, dass etwas passiert, ohne eine ganz neue Seite neu zu laden, ist JavaScript genau das, was Sie verwenden müssen. Ein Beispiel, das ich gerne verwende, ist die Web-App Google Sheets. Sehen Sie, wie ich hier auf mehrere Spalten klicke und ziehe, gibt es Feedback auf der Seite, ohne dass ich die Seite neu lade. Ich bin in der Lage, die Hintergrundfarbe der Zellen zu ändern. Ich bin in der Lage, Text in Zellen einzufügen und die Farbe dieses Textes zu ändern, ohne die Seite neu zu laden. Dies ist nun nur mit JavaScript möglich. Wenn ich hier zu diesem Plug-in gehe ich habe, und deaktivieren Sie JavaScript auf der Seite, und dann lade ich diese Seite neu, Sie werden jetzt sehen, dass Google mir nicht erlaubt, diese Anwendung zu verwenden , weil es einfach nicht funktioniert ohne JavaScript. Das einzige, was wirklich auf dieser Seite funktioniert, sind Links, die natürlich kein JavaScript benötigen. Aber wenn ich auf meine Homepage für Blätter klicken sollte, gibt es mir diese Warnung wieder. „ JavaScript ist nicht aktiviert, daher kann es nicht geöffnet werden. Aktivieren und neu laden.“ So, wie Sie hier sehen können, ist auf dieser Seite nicht viel ohne JavaScript möglich. Jetzt haben wir behandelt, wie JavaScript eine Programmiersprache ist, wie es vorwiegend eine Frontend-Programmiersprache ist, und schließlich, dass JavaScript die einzige Wahl ist, wenn interaktive Websites erstellt werden. Wenn Sie immer noch nicht klar sind, was JavaScript tut, sich keine Sorgen, wir werden diesen ganzen Kurs verwenden, um viele der Dinge zu durchlaufen , die Sie mit JavaScript erreichen können. Also, ohne weitere Umschweife, lassen Sie uns mit JavaScript im nächsten Video beginnen. 4. Einstieg mit JS: So scheint es uns in der vorherigen Klasse auf HTML und CSS so gut gedient zu haben, werde ich noch einmal w3schools.com als Lehrplan für diese Klasse bezeichnen. Also, was ich tun werde, ist ein neues Fenster zu öffnen und w3schools.com einzugeben . Jetzt, da wir auf w3schools.com sind, können wir Menüs hier unten und hier für HTML, CSS, JavaScript, Server Side sehen . Denken Sie daran, in der letzten Klasse, haben wir HTML und CSS mit diesem Curriculum behandelt. Aber lassen Sie uns auf JavaScript klicken und klicken Sie auf JavaScript lernen. Also, als nächstes möchte ich, dass Sie Ihre Entwickler-Tools öffnen, und im Webbrowser, den ich derzeit verwende, was Google Chrome auf Mac OSX ist, kann ich Option Befehl I drücken, um die Entwickler-Tools aufzurufen. Das ist eine Verknüpfung, die mir hilft, die Entwicklertools wirklich schnell zu öffnen , aber ansonsten kann ich Entwickler finden, indem ich in Ansicht, Entwickler gehe und auf Entwicklertools klicke. Also, wie ich in der letzten Klasse sagte, verwenden Sie vielleicht Firefox oder Sie verwenden Safari. Es ist eine ähnliche Sache in jedem dieser Programme. In Firefox glaube ich, dass Sie zu Tools gehen, dann gehen Sie zu Web Developer, dann drücken Sie die Webkonsole und Sie können hier eine ziemlich ähnliche Schnittstelle erhalten. Auf Safari müssen Sie nur zuerst eine beliebige Seite aufrufen. Sobald Sie sich auf einer Seite befinden, können Sie auf Entwickeln klicken und dann auf Webinspektor anzeigen klicken, und dann erhalten Sie eine ähnliche Schnittstelle auch hier. Also, in dieser Klasse werden wir hauptsächlich mit der JavaScript-Konsole arbeiten, also ist es der letzte Tab auf Safari, aber auf Google Chrome ist es tatsächlich der zweite Tab. Also, wenn ich die Entwickler-Tools wieder aufrufe, haben wir Console hier. Wenn Sie sich an die letzte Klasse erinnern, haben wir viel mit dieser Registerkarte Elemente gearbeitet, um unseren HTML-Code zu überprüfen und zu sehen, welche Stile wir hier in unseren CSS-Regeln anwenden. Nun, der Grund, warum ich sofort in die Konsole gesprungen bin, ist, weil es sehr hilfreich ist , uns zu helfen, JavaScript auszuführen und auch das JavaScript zu debuggen, das auf unserer Seite läuft. Die Konsole ermöglicht es uns also im Grunde, mit einer Webseite zu interagieren, indem wir entweder JavaScript-Ausdrücke im Kontext dieser Seite ausführen oder unser JavaScript etwas an diese Konsole ausgeben , damit wir Sehen Sie es tatsächlich an und finden Sie heraus, was los ist. Das ist wahrscheinlich schwer zu konzeptualisieren wenn Sie keine Erfahrung mit JavaScript haben, aber Sie werden sehr bald sehen, wenn wir anfangen, einige JavaScript zu erstellen , dass Sie beginnen, die Konsole hier zu verwenden. Also, was ich tun könnte, ist, das in ein neues Fenster zu brechen. Also, ich kann das tun, indem ich hier klicke und Entdocken in ein separates Fenster drücke, also habe ich es jetzt zur Seite. Nun, was wir in dieser JavaScript-Konsole tun können, wie ein Beispiel, ist, dass wir jedes JavaScript ausführen können. Also, sagen wir zum Beispiel, wir wollten 5 mal 5, und wir drücken Enter, es gibt uns 25. Das ist also ein einfaches mathematisches Problem. Wir können eine Variable namens x erstellen und nennen, dass 5, und dann können wir, mal 5 mal x, und sehen, was passiert, und wir erhalten das gleiche Ergebnis. Also, wir sind in der Lage, JavaScript direkt hier auszuführen. Wie Sie sehen werden, werden wir einige der Webseite verwenden, um sie tatsächlich mit dieser Konsole zu beeinflussen. Sie können hier klicken, um zu löschen und dann sind Sie wieder an der Stelle, an der Sie angefangen haben. Nun, die Konsole ist großartig, um Dinge herauszufinden und Dinge zu testen, aber sobald wir die Seite neu laden, verlieren wir alles, was wir hier getan haben. Also, wenn ich eine Variable von x setzen und es 10 machen sollte, wie Sie vorher gesehen haben, können wir jetzt Variablen verwenden, um hier jede Mathematik für Probleme zu tun. Aber wenn ich die Seite neu lade und dann zurück zu diesem Fenster gehe , muss ich zuerst das ganze Chaos hier beseitigen. Aber wenn ich x eintippe, wird es mit einem Fehler kommen, x ist nicht definiert. Also, was wir brauchen, ist eine JavaScript-Datei, in der wir alle unsere JavaScript-Zeilen speichern können. Nun, das wird eine Zukunft sein , die wir tun werden, wenn wir mit der Umsetzung in unser Projekt beginnen. Wenn Sie das Verständnis der Webentwicklung genommen haben, würden Sie sehen, wie wir eine JavaScript-Datei in unser Projekt integrieren können. Wenn Sie die letzte Klasse für HTML und CSS genommen haben, würden Sie wissen, wie Sie ein externes Stylesheet einbringen. Es ist im Grunde das gleiche Konzept wie ein externes Stylesheet, wir setzen einfach all unseren Code in eine andere Datei und bringen ihn dann in unser Projekt. Aber noch einmal, für den Moment, werden wir nur verwenden, was in unserem Browser ist. Also, lasst uns jetzt direkt auf einige Beispiele eingehen. Also, hier unten, heißt es Learn by Examples. So können wir auf diesen Link klicken, um einige Javascript-Beispiele zu sehen, und wir können auf Beispiele erklärt klicken. Also, hier sind einige der Dinge, die JavaScript tun kann. Es kann HTML-Inhalt ändern. Eine der vielen JavaScript-Methoden im Kontext von HTML ist also getElementById (). Was wir hier tun, ist, dass wir das Dokument packen, wir finden ein Element durch die ID der Demo, und wir ändern dieses Attribut hier, das innerHTML zu Hallo JavaScript ist. Ok? Also, lasst uns auf Try it Yourself klicken, um das Ergebnis zu sehen. Wenn ich auf diese Schaltfläche klicke, die Click Me sagt, plötzlich, das wurde geändert. Nun, wenn ich gehe und auf Ausführen klicken, um hier zu aktualisieren, werden Sie sehen, dass dieses Absatz-Tag eine ID von Demo hat. Also, was ich in dieser Schaltfläche mache, mit diesem Attribut, und keine Sorge, wir werden behandeln, was hier vor sich geht in einem späteren Video. Aber im Wesentlichen haben wir im Beispiel hier diese Schaltfläche, die eine onclick-Methode auslöst, die jedes Element mit einer ID von Demo setzt , um ein innerHTML von Hello JavaScript zu haben, und innerHTML nur bedeutet im Grunde alles innerhalb dieser beiden Tags. So, Sie können sehen, wenn wir auf die Schaltfläche klicken, wird alles zwischen diesen beiden Tags jetzt Hallo JavaScript, und Sie können sehen, dass geschieht live auf der Seite. Das ist, was an JavaScripts großartig ist, die Änderungen passieren sofort, ohne dass Sie eine andere Seite neu laden müssen. So gehen wir zurück zu den Beispielen, können wir auch Attributwerte ändern. Nun, für diesen hier, was ich möchte, dass Sie tun, ist die Entwicklerkonsole aufzurufen. Wir werden klären, und ich möchte, dass Sie dieses Bild inspizieren und sehen, was hier vor sich geht. Das ist das Gute an dem Inspektor, wir können sehen, welche Attribute sich ändern, wenn wir etwas tun. Also, ich muss diese Seite an Seite laufen, damit wir sehen können, was los ist. Aber werfen Sie einen Blick auf sowohl das Licht als auch hier drüben, wenn ich auf diese Schaltflächen klicke. Also, wenn ich das Licht anschalte, geht das Licht an. Schalten Sie das Licht aus, das Licht erlischt. Aber wie Sie hier sehen können, was tatsächlich im eigentlichen Code passiert, sind die Tonhöhen, die sich hier ändern. Also, ich möchte, dass du hier rüber schaust, wenn ich Licht ausschalten klicke, los gehst du. Jetzt können Sie sehen, dass es Pic_ Bulboff ist. Also, es tauscht vollständig das SRC-Feld aus, das Ihnen sagt, tut mir leid, dass ich darauf klicken muss, und dann können Sie die Bilder vollständig geändert sehen. Es tauscht tatsächlich das SRC-Attribut hier aus, um ein anderes Bild zu erstellen. Also, das ist wirklich cool. Wir können Attributwerte auch ändern. So können wir auch den HTML-Stil ändern, also CSS im Grunde. Ich werde für dieses Beispiel erweitern und klicken Sie auf Try it Yourself. Wenn ich hier klicke, können Sie sehen, dass die Schriftgröße geändert wird, und wir haben das getan, indem wir die ID der Demo erneut auf ein p-Tag setzen und wir ändern das Attribut Stil und das Unterattribut der Schriftgröße auf 35 Pixel. Das passiert, sobald wir wegen dieses onclick Attributs auf die Schaltfläche Click Me klicken. Auch hier werden wir dies abdecken, was in einem späteren Video als Event-Handler bezeichnet wird. Aber jetzt, nur zum Beispiel, ist es gut zu wissen, was JavaScript tun kann. Sie können auch Elemente ausblenden und anzeigen, so dass dies ziemlich einfach ist. Sie klicken auf die Schaltfläche und es kann bestimmte Elemente ausblenden, und das ist nur, indem Sie die Stilanzeigeeigenschaft auf none setzen. Also, hier ist das Beispiel für die Show, nur um es vollständig zu machen. Da gehst du. Das ist genau das Gegenteil. Also setzen wir das Anzeigeattribut auf Block statt keines. Nun, wenn Sie sich wieder in die HTML- und CSS-Klasse erinnern, habe ich darüber gesprochen, warum wir ein bestimmtes Element so einstellen würden, dass keines angezeigt wird, und das ist die perfekte Situation, warum. Also, wir haben dieses p, es ist verfügbar, es ist im Dokument, aber es wird nicht angezeigt. Der Grund, warum wir das tun wollen, ist, dass wir eine Situation haben , in der wir seinen Anzeigestil ändern, damit es angezeigt wird. Also, genau hier, wenn die Seite geladen wird, wird sie nicht angezeigt, weil der Stil so eingestellt ist, dass keine angezeigt wird, aber sobald wir auf diese Schaltfläche klicken, wurde die Anzeige in Block geändert. Also, das ist eine gute Bindung an die letzte Klasse. Wenn Sie nicht wüssten, warum wir das taten, oder Sie brauchen nur ein Beispiel zu sehen, da ist es genau da. Cool. Also, das sind die grundlegenden Beispiele von JavaScript und ich denke, das ist eine ziemlich gute Einführung in das, was JavaScript tun kann. Im nächsten Video werden wir die wichtigen Dinge abdecken. Wir werden Syntax und Aussagen abdecken. Dann werden wir auf all die verschiedenen Dinge in dieser Liste eingehen, nicht notwendigerweise all diese, sondern alle wichtigen, die mit den Grundlagen von JavaScript zu tun haben. Also, danke fürs Ansehen, ich sehe dich im nächsten Video. 5. JS Syntax und Aussagen: Im letzten Video haben wir eine Einführung in JavaScript behandelt. Wir haben auch einige gängige Beispiele für das, was JavaScript tun kann. Nun, in diesem Video, wir gehen zu decken ist etwas, das sehr wichtig ist, wenn jede Programmiersprache zu lernen, und das ist Syntax. Also, ich werde auf diesen Menüpunkt für JS-Syntax klicken, und wir werden uns einige der Syntax für JavaScript ansehen. Wenn Sie nicht mit dem Wort Syntax vertraut sind, ist es im Grunde der Satz von Regeln, die bestimmen, wie Sie JavaScript-Code schreiben, oder Syntax im Allgemeinen, ist im Grunde die Grammatik, wie Sie Code in einer bestimmten Sprache schreiben. Es gibt bestimmte Dinge, die in jeder Programmiersprache üblich sind , wie das Deklarieren von Variablen, Zuweisen von Werten und das Berechnen von Werten. Hier sind einige Beispiele dafür, wie es in JavaScript aussehen würde. Aber wir werden jetzt tiefer hineingehen. In Bezug auf Datentypen haben wir hier einige gängige, Zahlen und Strings. Zahlen, müssen Sie keine einfachen oder doppelten Anführungszeichen setzen. Sie geben nur buchstäblich einige Ziffern ein und es spielt keine Rolle ob es sich um eine Dezimalzahl oder eine ganze Zahl handelt, die auch Ganzzahl genannt wird. Es wird immer noch als eine Zahl in JavaScript betrachtet. Für Strings und Strings denke ich als Programmierbegriff, aber es ist nicht so schwer zu verstehen. Es ist im Grunde nur Text. Immer wenn Sie eine Zeichenfolge schreiben, damit Sie sie von ähnlichen Schlüsselwörtern in Ihrem Code unterscheiden können, haben Sie immer entweder doppelte Anführungszeichen oder einfache Anführungszeichen. also nach unten scrollen, können wir Variablen sehen, und wir können sehen, wie man zuerst eine Variable deklariert und dann auch einen Wert ihm zuweist. Normalerweise ist das auf einmal erledigt. Wenn ich klicke, Probieren Sie es selbst, Sie können hier sehen wir eine Variable deklarieren hier. Also, wir haben das Schlüsselwort von var, space und dann ein X. Also, wir erklären zuerst, dass wir eine Variable namens X haben wollen, und dann nehmen wir diese Variable und wir weisen ihr einen Wert von sechs in dieser Operation zu. Dann setzen wir den Wert von X in den Bildschirm durch dieses Element namens Demo. Nun, normalerweise geschieht dies in einer kurzen Weise, und wir können einfach Rücktaste dort, klicken Sie auf Ausführen, und wir können sowohl eine Variable in einer Zeile deklarieren und zuweisen. Das ist genug oft der Fall, es sei denn, wir wollten es in einem anderen Bereich deklarieren und dann in einem anderen Bereich zuweisen, was ich Ihnen später zeigen werde, wenn wir JavaScript-Bereich abdecken. Also, wir haben Operatoren, die ziemlich üblich. Sie haben gerade Plus, minus den Asterix für die Multiplikation und Sie haben den Schrägstrich für Division. So können Sie hier sehen, wie Sie ein mathematisches Problem für das Ergebnis von fünf plus sechs Mal von 10 schreiben würden . Nun, eine Sache, die Sie mit Programmiersprache verwechselt werden könnte, ist dieses Gleichheitszeichen. Es bedeutet nicht, dass X gleich fünf ist. Es bedeutet, dass fünf der Variablen von X zugewiesen ist. Ist das nicht das gleiche, was Sie vielleicht fragen? Nun, nein. Wenn wir eine if-Anweisung schreiben würden, die im Grunde nur eine Anweisung ist, die Code ausführt. Wenn etwas der Fall ist, verwenden wir double equals oder triple equals. Aber wir werden in der Lektion über Vergleichsoperatoren darauf eingehen, aber im Moment, wenn Sie dies gleich sehen, bedeutet dies, dass wir einer Variablen oder einem Wert zuweisen. Hier decken wir Ausdrücke ab. Das ist ziemlich selbsterklärend. Wir bekommen eine Fünf und wir messen es um 10, wir nehmen den Wert von X und wir nehmen es um 10. Aber hier ist vielleicht nicht so offensichtlich, und so können wir Saiten zusammenfügen. Also, wenn wir eine Zeichenfolge konstruieren wollten, wollten wir vielleicht eine Variable hier einfügen, wir sind in der Lage, den Plus-Operator zu verwenden. Sie können also eine Zeichenfolge von John plus eine Zeichenfolge von einem Leerzeichen plus eine Zeichenfolge von Doe machen, und das wird zu John Space Doe ausgewertet. Im Moment macht das nicht wirklich Sinn, aber wenn wir bestimmte Variablen einfügen würden, könnte dies durch eine bestimmte Variable ersetzt werden. In der Tat könnte ich das jetzt für euch zeigen. Wie Sie hier sehen können, John plus Space plus Doe bewertet John plus Space plus Doezu John Doe. Aber sagen Sie zum Beispiel, ich kann hier reingehen und Variable X gleich machen, und ich tippe eine Zeichenfolge ein, also denken Sie daran, dass ich unsere öffnenden und schließenden Anführungszeichen bekommen habe, und vielleicht ist es eine Initiale, also setzen wir J. Also hier, anstelle eines Leerzeichens, würden wir in X setzen. Nun, wenn wir das ausführen, werden Sie sehen, dass der Wert von X, und es sollte eine Zeichenfolge sein, weil wir Strings zusammenstellen , J ist, und so legt es zwischen diesen. Das ist ein gutes Beispiel, wenn Sie wie literale Zeichenfolgen, die Sie hier definieren, und andere Variablen, die Strings enthalten, zusammenstellen möchten. So würdest du es tun. Sie sprechen auch von Schlüsselwörtern, die in diesem Zusammenhang als blau erscheinen. Wir haben uns bereits das Schlüsselwort var angesehen, das dem Browser anweist, Variablen zu erstellen. Was Sie tun, ist var, Leerzeichen und dann den Variablennamen zu deklarieren. Möchten Sie mehrere Variablen gleichzeitig deklarieren? Sie können einfach ein Komma verwenden und dann eine andere Variable dort einfügen. Dann, nachdem wir es deklariert haben, weisen wir nun diesen verschiedenen Variablen Werte zu. Wie Sie hier sehen können, verwenden wir eine Variable, die wir bereits deklariert und zugewiesen haben , setzen wir das Ergebnis davon gegen 10 hier, und wir bekommen eine neue Variable, die Y ist. andere Sache, die Sie ziemlich oft sehen werden, ist Kommentare. Dies ist unabhängig davon, ob Sie HTML, CSS, JavaScript oder eine andere Sprache verwenden. Manchmal möchten Sie Dinge in den Code schreiben, die Sie nicht ausführen möchten. Zum Beispiel möchten Sie vielleicht erklären, was in dieser Zeile vor sich geht. Vielleicht möchten Sie sagen, dies weist der Variablen X fünf zu. Sie müssten normalerweise keinen Kommentar schreiben, der grundlegend ist, weil dies eine so grundlegende Funktion ist. Eigentlich gibt es hier einen Fehler. Ich werde sicherstellen, dass dieses Semikolon nicht im Kommentar ist. Wenn ich das durchführe, ändert sich nichts. Ist nur ein Kommentar im Code. Wie Sie hier sehen können, können wir auch Kommentare verwenden, um Code zu behalten, den wir geschrieben haben, aber nicht ausführen zu lassen. Wenn ich diesen Kommentar einfach entferne und den Kommentar von dort gestoppt habe, sehen Sie,dass und den Kommentar von dort gestoppt habe, sehen Sie, X jetzt sechs wird und es den letzten zugewiesenen Wert von X nimmt und ihn dort ablegt. Aber wenn wir dort einige Kommentarzeichen einfügen wollen, wird es auf fünf zurückgehen. Denken Sie nun daran, dass dies den Kommentar direkt danach in einer separaten Zeile startet. Wenn wir also zu einer neuen Zeile gehen und var y eingeben, können Sie sehen, dass es jetzt nicht grün ist, weil wir eine neue Zeile beginnen. Aber wenn Sie einen Kommentar über mehrere Zeilen machen wollten, können Sie mit einem Schrägstrich und einem Sternchen öffnen und dann mit Asterix und einem Schrägstrich schließen. So können wir eine beliebige Anzahl von Code aus mehreren Zeilen schreiben und es wird alles ein Kommentar sein. Also, es wird nicht ausführen. Wenn ich sage, Y entspricht sieben und dann, lassen Sie uns das hier unten bewegen, und sagen wir, dass X gleich sieben ist. Lassen Sie uns das laufen. Sie werden sehen, dass es nicht ausgeführt wird, weil es sich in einem Kommentar befindet. Wenn ich diese entferne und führe es aus, wirst du sehen, dass x jetzt sieben ist. Eigentlich ist das eine schlechte Syntax, weil ich die Variable neu deklariere. Ich kann es einfach so sagen und X wird jetzt der Wert von sieben sein. Also, fortzufahren, gibt es einige andere Dinge in JavaScript, die wirklich wichtig sind. Eines ist, dass JavaScript Groß-/Kleinschreibung beachtet. Wie Sie hier sehen können, unterscheidet sich Nachname mit der N Großschreibung von Nachname, alles Kleinbuchstaben. Wenn Sie diese Variable vollständig in Großbuchstaben schreiben würden, wäre es eine ganz andere Variable. Das könnte für einige verwirrend sein, die aus Programmiersprachen stammen, bei denen die Groß- und Kleinschreibung nicht berücksichtigt wird. Aber meiner Meinung nach ist es ein sehr gutes Feature zu haben und das liegt daran, dass wir etwas namens Camel Case verwenden können. Also Camel Case, für diejenigen von Ihnen, die vielleicht nicht viel programmiert haben, ist eine gute Möglichkeit für uns, Variablennamen zu erstellen wenn wir mehrere Wörter in dem einen Namen haben. Also, wie Sie hier sehen können, könnten wir versucht sein, Vornamen zu machen und wir werden nur die Wörter aufteilen, aber das ist in JavaScript nicht erlaubt. Eine Sache, die wir tun können, ist, Unterstriche zu verwenden, um Wörter zu trennen, aber ein viel sauberer Weg, den viele Entwickler bevorzugen, ist Camel Case. also, dass der erste Buchstabe eines der Wörter oder beider Wörter groß geschrieben wird. Also, in diesem Beispiel werden alle ersten Buchstaben jedes Wortes groß geschrieben, aber häufiger ist niedriger Camel Case, der mit Kleinbuchstaben beginnt und dann, wenn es zu einem neuen Wort kommt, ist der erste Buchstabe dieses Wortes Großbuchstaben. Also, das ist Camel Case. Also, jetzt haben wir das Ende der Seite erreicht und es ist Zeit, zu JavaScript-Anweisungen zu gehen. Also, indem wir einfach auf JS-Anweisungen klicken, können wir einen Blick auf eine JavaScript-Anweisung haben und wir können sie nach den verschiedenen Teilen aufteilen, die aus zusammengesetzt ist. Also, wir haben Werte Operatoren, Ausdrücke, Schlüsselwörter und Kommentare. Hier unten können wir sehen, dass diese bestimmte Aussage dem Browser sagt , „Hello Dolly“ in einem HTML-Element mit der ID der Demo zu schreiben. Also, wenn wir diese Aussage durchlaufen, beginnen wir mit einem Objekt an der Spitze, das Dokument ist und das nur auf das gesamte Dokument abzielt , dann können wir einen Schritt tiefer gehen, indem ein Element für die ID der Demo innerhalb dieses Dokuments erhalten, dann können wir ein Attribut basierend auf diesem bestimmten Element ändern. Wir weisen einen Wert zu, also verwenden wir einen Zuweisungsoperator und setzen dann einen Wert ein. Also, in die andere Richtung zurückgehen, nehmen wir einen Wert, wir weisen ihn einem Attribut zu, das sich auf einem bestimmten Element befindet, das wir verwenden, um zu finden, indem wir den Kontext des Dokuments nehmen und dann tiefer eingraben. Auch hier werden wir diesen bestimmten Teil des Codes in späteren Videos durchgehen, also mach dir keine Sorgen darüber, dies zu verstehen. Aber im Wesentlichen brechen wir nur auf, was gerade in einer einzigen Aussage passiert. sehr wichtiger Teil von Anweisungen ist Semikolons. Daher sind Semikolons erforderlich, um eine ausführbare Anweisung zu beenden. Also, wenn Sie zum Beispiel sagen, eine Reihe von Variablen deklarieren und dann einige Variablen zuweisen, sobald Sie eine Anweisung abgeschlossen haben, müssen Sie ein Semikolon einfügen. Also, bei einigen Sprachen, wenn Sie etwas in eine neue Zeile setzen, weiß die Programmiersprache, dass es eine neue Anweisung ist, und sie führt sie separat aus. Da wir Semikolons mit JavaScript verwenden müssen, können wir tatsächlich alle diese Anweisungen auf die gleiche Zeile setzen. Normalerweise ist das nicht die beste Idee, weil wir immer noch einen Code schön anlegen wollen, mit Verschachtelung und neuen Zeilen, so dass wir verschiedene Anweisungen sehen können, aber das ist eine Option, die uns zur Verfügung steht. Die andere Sache zu beachten, ist, dass es mehrere Leerzeichen ignoriert, so dass Sie Ihrem Projekt oder Ihrem Code so viel Leerraum hinzufügen können, wie Sie möchten , um es besser zu verstehen. Also, diese beiden Zeilen sind äquivalent, aber ich denke, die meisten von uns werden zustimmen, dass dies ein bisschen schöner ist , weil es uns ein bisschen mehr Leerraum gibt, ein bisschen mehr Atemraum um den Zuweisungsoperator, den Wert und die Variable. Wie hier steht, ist es eine gute Idee, Leerzeichen um Operatoren zu legen. Aber wir könnten im Wesentlichen alle Räume hier, hier, hier und hier entfernen . Wir konnten diesen Raum nicht entfernen, weil dies ein Schlüsselwort ist und mit einem Leerraum enden muss, aber in diesem Sinne könnten wir den gesamten Leerraum entfernen und es wird immer noch funktionieren, aber es wird nur hässlich aussehen. Es wird also empfohlen, Platz um Operatoren zu legen, aber nicht wichtig. Also, wieder wird jede Anweisung durch ein Semikolon beendet, und das bedeutet, dass wir mehrere Anweisungen in derselben Zeile setzen können, wie wir es hier getan haben, oder alternativ können wir eine wirklich lange Anweisung aufbrechen, indem wir sie auf mehrere Zeilen setzen. Solange wir mit einem Semikolon brechen, wenn es fertig ist, es in Ordnung, es über mehrere Zeilen aufzuteilen. Die nächste Sache sind Codeblöcke, die, wenn wir eine Funktion oder eine Schleife definieren, werden wir einen Block starten, der als Teil dieser Funktion oder Teil dieser Schleife ausgeführt wird. Wir tun das, indem wir Semikolons verwenden. Also, in einigen Programmiersprachen, brauchen wir nur eine neue Zeile oder wir haben ein Schlüsselwort, das Ende am Ende sagen wird, aber in JavaScript beginnen wir eine geschweifte Klammer und dann enden wir mit einer geschweiften Klammer. Also, alles in diesen beiden geschweiften Klammern ist Teil dieser Funktion. Davon abgesehen können wir auch Schlüsselwörter verwenden, um einen Block zu beenden. Also, Sie müssen diese geschweiften Klammern nicht ständig verwenden, wir können tatsächlich Schlüsselwörter verwenden, aber wir könnten einige Beispiele dafür in einem späteren Video sehen. Moment ist der Standardweg, nur diese geschweiften Klammern hinzuzufügen und dann ist alles in den geschweiften Klammern Teil dieses Codeblocks. In Ordnung. Also, wir haben eine Menge Dinge behandelt, um eine Syntax in diesem Video zu tun. Viele Dinge, über die wir hier sprechen Lektionen, die wir noch nicht in JavaScript gelernt haben, also seien Sie nicht zu besorgt, wenn Sie nicht alles verstehen, was hier vor sich geht. Es ist wichtig, diese syntaktischen Dinge gerade nach oben zu decken , denn sagen Sie zum Beispiel, dass Sie einen syntaktischen Fehler weiter unten auf der Strecke machen , vielleicht weil Sie in einer anderen Programmiersprache erlebt haben und es nicht dasselbe ist wie in JavaScript, könnten Sie frustriert werden, wenn Sie nicht wissen, wovon Sie sprechen. Wenn es um die Syntax geht, ist es am besten, einfach den Beispielen zu folgen, nicht zu versuchen, das System zu stark zu ändern , und auf diese Weise werden Sie weniger wahrscheinlich Brüche in Ihrem Code haben. Also, das ist Syntax, im nächsten Video werden wir die Ausgabe abdecken. 6. JS Output: Also, in diesem Video werden wir die Anzeigemöglichkeiten mit JavaScript abdecken. Also, wenn ich auf JS-Ausgabe im Menü hier klicke, können wir sehen, dass JavaScript Daten auf verschiedene Arten „anzeigen“ kann. Also, wir haben es mit innerem HTML gesehen, so dass wir direkt in HTML-Element mit innerem HTML schreiben können. Wir können auch mit document.write in eine HTML-Ausgabe schreiben. So, wie wir zuvor gesehen haben, ist dies ein Objekt namens „Dokument“, das das gesamte Dokument darstellt. Dann rufen wir eine Methode auf, die von „write“. Dann hier drin, können wir in ein paar Ausgabe setzen. Wir werden in nur einer Sekunde zu diesem Beispiel kommen, wir können Alarm verwenden, und das ist eine wirklich grundlegende, dass Sie viel in einem JavaScript-Training sehen, aber wenn ich zu meiner Konsole gehe und ich einfach klar, was da ist, kann ich eine Warnung richtig starten jetzt. Also, ich kann gehen „Hallo Skillshare!“ Nun, Sie können sehen, erscheint eine Warnung, die sagt: „Hallo Skillshare!“ Also, das ist eine Möglichkeit, Alarm ist jetzt irgendwie veraltet, es wird normalerweise nur verwendet, wenn Sie etwas löschen möchten, und es ist wirklich wichtig, Ihre Aufmerksamkeit zu bekommen, damit Sie dies vielleicht schon einmal gesehen haben. Wenn wir das ausführen, könnte es sagen: „Oh, bist du sicher, dass du löschen möchtest?“ und drücken Sie dann „OK“, und Sie haben das Löschen beendet. Die gemeinsame, die ich viel zum Debuggen verwende, ist console.log. Das ermöglicht es uns, in die Browser-Konsole zu schreiben. Das wird jetzt nicht unbedingt Sinn ergeben. Tun Sie es hier, weil wir bereits in der Konsole sind, aber innerhalb des Codes, den wir erstellen, kann ich es etwas an der Konsole protokollieren lassen. Sagen wir einfach: „Hallo Konsole“. Wenn ich das ausführe, wird es mit Hello Console zurückkommen. Kein sehr praktisches Beispiel, weil wir es importieren und wir es direkt zurück bekommen. Aber was Sie innerhalb Ihres Codes in Ihrem JavaScript tun können , das tatsächlich auf der Seite ausgeführt wird, können Sie eine console.log festlegen und so dass Sie Feedback darüber erhalten können, was passiert, auf Ihrer Seite zu Ihrer Konsole hier. Dann können Sie sehen: „Oh, das ist das, was diese Variable ist, okay. Ich muss das ändern.“ Aber wieder, wir gehen später zu, wie Code zu debuggen später in dieser Klasse. Das erste Beispiel ist die Verwendung von InnerHTML und ich möchte nicht lange damit verbringen, weil wir es bereits in einigen der grundlegenden Beispiele behandelt haben. Wir können im Grunde in einigen HTML zwischen diesen beiden p-Tags setzen. Also, wenn ich das Beispiel hier verwende, ist JavaScript eigentlich ziemlich clever, erkennt, dass wir versuchen, eine Zeichenfolge hier zu setzen, aber wir haben eine Operation mit Zahlen hier. Es nimmt das Ergebnis der Berechnung hier, wandelt es in eine Zeichenfolge um, so dass es hier als Text in unserem p-Tag angezeigt wird. Also, wenn wir hier inspizieren, lege ich das hier ab, damit wir es sehen können. Sie können sehen, das ist unsere p id=demo und innen, wir haben das Ergebnis dieser Gleichung, die 11 ist. Also, das nächste Beispiel ist document.write. Also, wir können es für Testzwecke verwenden, ich finde mich nie selbst mit Dokumentschreibungen persönlich, weil ich immer console.log verwende, aber wir können das Beispiel hier ausprobieren. Sie können hier sehen, dass wir es bereits ausgeführt haben. Aber Sie können sehen, dass wir jetzt die Ergebnisse von fünf plus sechs auf die Seite schreiben. Also, der Unterschied zwischen dem und dem letzten, wenn ich reingehe und inspiziere, das runter und die 11 inspiziere, es sitzt gerade im Dokument. Es hat kein p-Tag oder irgendetwas, weil wir es im Grunde in den Abschnitt des Dokuments schreiben , in dem der Code speziell geschrieben wird, wenn das Sinn ergibt. Anstatt im vorherigen Beispiel ein bestimmtes Element zu finden und dann ein Attribut zu ändern, um das Ergebnis direkt in ein HTML-Element zu setzen , das überall auf der Seite existiert, sagen wir einfach: überall dort, wo dies ausgeführt wird, schreiben Sie es auf den Bildschirm. Vielleicht können wir dieses Skript-Tag hier einfügen. Auch hier ist dies kein sehr sauberer Code, aber vielleicht wird es funktionieren. Wir können hier sehen, dass, wenn ich das inspizieren werde, jetzt werden Sie sehen, dass 11 in diesem p-Tag geschrieben ist , weil wir ein Skript in diesem p-Tag haben. Aber das ist nicht sehr guter Code, das ist nicht sehr sauber, also würde ich nicht empfehlen, dass, wenn Sie möchten, dass es an diesem p ausgegeben wird, wir das vorherige Beispiel mit innerem HTML verwenden sollten. In diesem Fall finde ich mich deshalb nie wirklich mit document.write, aber das ist eine Option dort. Also, wir haben Warnung kurz zuvor abgedeckt, und console.log ist diejenige, die ich so oft zum Debuggen verwende. Wie Sie hier sehen, heißt es: „Sie werden in einem späteren Kapitel mehr über das Debuggen erfahren.“ Definitiv für unsere Zwecke, werden wir später auch über das Debuggen von JavaScript lernen. In Ordnung. Also, das deckt die Ausgabe ab, dies ist diejenige, die Sie am häufigsten verwenden werden, oder Sie werden den Inhalt auf der Seite ändern, sich keine Sorgen um Fensterwarnung oder document.write. Im nächsten Video werden wir über Variablen sprechen. Also, ich freue mich darauf, Sie in der nächsten zu sehen. 7. JS Variablen: In diesem Video werden wir Variablen abdecken. Wenn ich hier zu JS-Variablen gehe, können wir einige Beispiele von Dingen sehen, die wir bereits aus den Lektionen zur Syntax gesehen haben. Aber lassen Sie uns nach unten scrollen und einige der Dinge abdecken, die wir noch nicht gesehen haben. Ich empfehle definitiv, auf diese Seite zurückzukehren und sie zu lesen, damit Sie alles verstehen, was Sie wirklich über Variablen wissen müssen. Aber wenn Sie verstanden haben, als wir Variablen in der Einführung und Video über Syntax durchgingen, dann sollten Sie genug wissen, um weiterzumachen. Wir haben behandelt, wie Sie viele Variablen in einer Anweisung erstellen können, indem Sie ein Komma verwenden, und diese Deklaration kann mehrere Zeilen umfassen, solange wir diese Anweisung mit einem Semikolon beenden. Etwas, das wir noch nicht besprochen haben, ist der Wert von undefined. Wenn ich hier eine Variable von carName deklariere und ich ihr keinen Wert zuweise, wie ist der Wert davon? Das ist also eine gute Frage. Wenn Sie keinen Wert für etwas definieren, hat es am Ende einen Wert von undefined. Um das in unserer Konsole zu sehen, wenn ich var carName machen und dann CarName ausgegeben habe, kommt es als undefiniert auf. Wenn ich einen Wert von Mazda zuweisen, das ist das Auto, das ich fahre, wird es zu Mazda dort auflösen. Aber dann, wenn ich meine CarName wieder eintippe und drücken Sie die Eingabetaste, kommt es mit einer Reihe von Mazda. Bevor wir ihm einen Wert zuweisen, ist er einfach undefiniert und wird später sehen, warum das wirklich wichtig ist. Eine weitere wichtige Sache, die Sie hier beachten müssen, ist, wenn Sie eine JavaScript-Variable erneut deklarieren, wird sie ihren Wert nicht verlieren. Die Variable carName, wir werden immer noch den Wert von vulvar nach der Ausführung der Anweisungen haben. Indem Sie diese Anweisung einfügen, nachdem Sie einen Wert für eine Variable definiert haben, wird sie nicht wirklich gelöscht und auf undefined zurückgesetzt. Wie Sie hier sehen können, können wir Arithmetik machen. Wir können auch Strings zusammen hinzufügen. Der Fachbegriff dafür wird Verkettung genannt. Ich würde nicht mehr darüber reden, weil wir das bereits im vorherigen Beispiel getan haben, aber Sie können diese Operatoren auch verwenden, um Zahlen hinzuzufügen, sondern auch Strings zusammen hinzuzufügen. Jetzt ist JavaScript eigentlich ziemlich clever und die Tatsache, dass es keinen Fehler wenn Sie versuchen, eine Zeichenfolge und eine Variable zusammen zu setzen. Wenn wir von hier nach unten scrollen, können wir sehen, dass Sie tatsächlich den Plus-Operator in einer einzigen Anweisung mit Strings und Zahlen verwenden können . Jetzt würden einige Programmiersprachen Ihnen das nicht erlauben, weil es sehen würde , dass dies ein Datentyp von String ist und dies ein Datentyp von Zahl ist, und es würde nicht wissen, was zu tun ist. Vielleicht möchten Sie fünf und zwei zusammen hinzufügen, um sieben zu machen, in diesem Fall würden Sie dies als eine Zahl behandeln, keine Zeichenfolge, o r vielleicht möchten Sie die Zeichenfolge von zwei zu der Zeichenfolge von fünf hinzufügen, und in diesem Fall würden Sie 52. In JavaScript werden diese als Zeichenfolgen behandelt, da der erste Wert eine Zeichenfolge ist. Wenn wir also hier klicken und es ausprobieren, können Sie sehen, dass das Ergebnis des Hinzufügens von fünf als Zeichenfolge und dann zwei und drei als Zahl fünf, zwei, drei ist. Es ist das gleiche, als ob wir hierher gingen, und wir haben diese Strings explizit aufgerufen, indem wir doppeltes Anführungszeichen zeigen , wo der tatsächliche Wert x zugewiesen wird, erhalten Sie die gleichen Ergebnisse, weil es nur diese beiden Zahlen und sie tatsächlich in Zeichenfolgen ändern, die auf dem Datentyp der ersten Zahl basieren , die tatsächlich als String deklariert wird. Wenn ich die doppelten Anführungszeichen von der ersten Zahl entfernen würde, würde es zu einer Datentypnummer zurückgehen. Wenn ich renne, dann bekommst du fünf plus zwei plus drei, und das Ergebnis davon ist 10. Das könnte einige Zeit dauern, bis Sie den Kopf umwickeln und das ist cool. Im Allgemeinen sollten Sie Datentypen nicht für weniger Vorgänge mischen. Wenn Sie eine arithmetische Operation mit Zahlen durchführen möchten, setzen Sie die Anführungszeichen nicht ein. Wenn Sie Zeichenfolgen zusammen hinzufügen möchten, stellen Sie sicher, dass Sie doppelte Anführungszeichen verwenden. Wenn du es so kombinieren willst, dann fängt es an, ein wenig knifflig zu werden, und oft wirst du das nicht tun, es sei denn, es ist ein Fehler. Du brauchst dir keine Sorgen zu machen. Die umgekehrte Seite ist, indem Sie die Reihenfolge ändern. Wenn wir das ausprobieren, können wir sehen, dass die ersten beiden Zahlen addiert werden, aber dann, weil es eine Zeichenfolge am Ende hinzufügt, fügt es fünf als String hinzu, wenn das sinnvoll ist. Es ist das gleiche, als ob wir diese in Klammern setzen und auf Ausführen klicken. Alles, was wir die Ergebnisse davon explizit als fünf setzen, würden wir das gleiche Ergebnis erhalten. Was es tut, ist, diese beiden Zahlen zu lösen, indem sie in einer arithmetischen Operation zusammenfügen und diese dann in eine Zeichenfolge verwandeln und sie mit dieser Zeichenfolge verketten. Auch hier ist das Zeug, mit dem ich mich nicht regelmäßig beschäftigen muss , weil ich nur die allgemeine Regel befolge. Wenn ich Arithmetik mache, benutze ich Zahlen. Wenn ich Strings verkette, verwende ich Strings, so einfach. Aber wenn Sie versuchen, Strings und Zahlen zu kombinieren , dann fangen Sie an, einige dieses flippige Verhalten zu sehen. Das sind JavaScript-Variablen. Im nächsten Video werden wir ein wenig mehr über die Betreiber sprechen. Also sehe ich dich in der nächsten. 8. JS Operatoren: In diesem Video werden wir JavaScript-Operatoren abdecken. Das ist wirklich wichtig, denn wie wir hier erwähnt haben, bedeutet dies nicht gleich, es bedeutet Zuordnung. Das ist einer der häufigsten Fehler bei Operatoren, aber lassen Sie uns jetzt tiefer in sie eingraben. Dieses Gleichheitszeichen bedeutet Zuweisung und das ist der häufigste Operator, den Sie in JavaScript sehen werden oder so ziemlich jede Programmiersprache ist müssen wir Variablen Werte zuweisen. Das Gleichheitszeichen ist der Zuweisungsoperator und weist einer Variablen einen Wert zu. Der Additionsoperator fügt zu gegebenen Zahlen hinzu, aber es ist auch, wie wir gesehen haben, bevor es hinzufügen kann, um eine Zeichenkette zu geben , oder ein richtiger Begriff wäre Verkettung. Es kombiniert Strings zusammen, um eine größere Zeichenfolge zu bilden. Der Multiplikationsoperator multipliziert Zahlen, das ist Dinge, die Sie wissen sollten, indem Sie eine grundlegende mathematische Klasse, Addition, Subtraktion, Multiplikation und Division nehmen, können Sie auch etwas tun, das einen Modulus nennt, der Ihnen den Rest nach dem Dividieren von zwei Zahlen. Es gibt zwei andere Operatoren hier, den Inkrement- und Dekrementoperator in JavaScript. Wie Sie hier sehen können, werden diese arithmetischen Operatoren im Kapitel über JS Arithmetik vollständig beschrieben, das wir am Ende dieser Lektion kurz eingehen werden. Gehen zu JavaScript-Zuweisungsoperatoren, Zuweisungsoperatoren weisen JavaScript-Variablen Werte Die einfache ist gleich, aber es gibt tatsächlich ein paar verschiedene. Es gibt diese Kurzschriftenoperatoren, die es uns erlauben, im Grunde Platz zu sparen. Sie sind offensichtlich nicht so wichtig, ich meine, der Unterschied zwischen dem Schreiben und dem Schreiben ist nicht riesig aber wenn Sie Zeit sparen und im Grunde y zu x hinzufügen wollten, können Sie das damit tun. Wenn Sie y von x subtrahieren wollten und dann x der Unterschied zwischen diesen sein, können Sie diesen Operator verwenden. Wie wir bereits gesehen haben, haben wir auch JavaScript-String-Operatoren. Wir können Strings mit dem Plus verketten, und wir können auch die Kurzschrift plus gleich verwenden, um Strings zu verketten , so was wir tun können, ist eine Zeichenfolge hier für Text 1 zu haben, und dann können wir es hinzufügen, indem wir diesen Verkettungszuweisungsoperator . Lassen Sie uns das nur als Beispiel zeigen. Wir haben 'was ist ein sehr' Raum und dann fügen wir zu diesem „schönen Tag“ hinzu. Wenn wir Text 1 ausgeben, erhalten wir die vollständige Zeichenfolge. Dies ist das Äquivalent dazu, das heißt, in Text 1 erneut zu setzen und dann ein Plus zu setzen, damit Sie genau das gleiche Ergebnis erhalten, es ist nur Abkürzung. auf die Seite zurückgehen, können wir Strings und Zahlen zusammen hinzufügen, wie wir zuvor gesehen haben. Dies sind Beispiele, die wir in einer der vorherigen Lektionen behandelt haben, ich werde nicht noch einmal darüber gehen, aber das Wichtige, was hier zu beachten ist, ist Vergleichsoperatoren. Wie ich bereits sagte, eines der Dinge, die selbst als erfahrener Programmierer, die man manchmal vergessen könnte, und vor allem als Neuling, ist, dass der Zuweisungsoperator, der Single gleich, nicht gleich und dafür ist es entweder doppelt gleich oder dreifach gleich. Double equals ist die gemeinsame, aber es gibt einen leichten Unterschied zwischen diesen beiden. Dieser wird auf true ausgewertet, wenn die linke Seite gleich Wert auf der rechten Seite ist. Dieser wird nur auf true ausgewertet, wenn die linke Seite gleich der rechten Seite ist und sie vom gleichen Typ sind. Das ist ein bisschen technischer und wir könnten später darauf eingehen , aber vorerst sollte dies ausreichen damit Sie vergleichen können, ob zwei Variablen gleich sind. Dieser ist nicht gleich, also setzen Sie einfach ein Ausrufezeichen und ein Gleichheitszeichen, und dies wird wahr bewerten, wenn die linke Seite nicht die gleiche wie die rechte Seite ist, und das ist dasselbe, aber das Gegenteil, wir können auch größer als, kleiner als, größer oder gleich, kleiner als oder gleich, und dann gibt es auch diesen ternären Operator. Ich weiß nicht, ob wir in dieser bestimmten Klasse ternäre Operatoren eingehen werden, aber wenn Sie mehr über ternäre Operatoren erfahren möchten, schauen Sie es auf jeden Fall nach. Es ist nur eine kürzere Art, wenn-then-Anweisungen im Grunde zu tun. Wir haben auch logische Operatoren. Wenn wir überprüfen würden, ob zwei Aussagen wahr sind, könnten wir das tun. Hoffentlich gibt es hier ein Beispiel. Das gibt es nicht. Lassen Sie uns hier unser eigenes Beispiel erstellen. Lassen Sie uns etwas testen. Setzen wir eine Aussage ein, fünf ist gleich fünf. Es kommt wieder wahr. Lassen Sie uns vier gleich fünf setzen, falsch, das ist, was wir erwartet haben. Mit einem nicht gleich, wenn ich vier nicht gleich fünf tun, sollten wir wahr werden. Das ist das Gegenteil. Du denkst vielleicht, Chris, es ist offensichtlich, dass fünf und fünf gleich sind und vier und fünf nicht gleich sind, warum machen wir das? Wir können diese expliziten Werte durch Variablen ersetzen. Wenn ich eine Variable von x gleich 10 deklarieren und eine Variable von y gleich 20 deklarieren sollte. Wenn ich eine Aussage wie diese eintragen sollte, kommt es falsch zurück. Wenn ich eine Aussage wie diese eintragen sollte, kommt es wieder wahr, weil sie nicht die gleichen sind. Jetzt, wo die logischen Operatoren hereinkommen, kann ich zwei Anweisungen kombinieren. Lassen Sie uns die ersten beiden kombinieren. Wir haben fünf gleich fünf, denen wir wissen, dass es wahr sein wird, aber wir wollen, dass die Aussage nur wahr ist, wenn x auch gleich y ist. Wenn wir setzen in x gleich y ist, es falsch zurückkommen, weil der erste Teil wahr ist, aber der zweite Teil ist falsch. Es ist nur, wenn beides wahr ist, aber wir können auch Rohre für alle verwenden. Wenn ich die gleiche Aussage machen und stattdessen in Pipes setzen sollte, kommt es als wahr, weil eine dieser Seiten wahr sein muss, damit das Ganze wahr ist, weil es O ist aber nur einer von ihnen muss wahr sein, damit das Ganze wahr ist. Wir können auch logische Knoten verwenden, was ein Ausrufezeichen ist. Es ist vielleicht nicht klar, wofür wir das jetzt verwenden würden, aber wenn ich in Ausrufezeichen true setzen würde, wird es als falsch zurückkommen und wenn ich in Ausrufezeichen falsch setzen würde, wird es als wahr zurückkommen, weil es im Grunde sagt, die entgegengesetzt. Es sagt nicht wahr und hier sagt es nicht falsch. Wenn ich hier in Klammern setze, fünf gleich fünf, das wird als falsch erscheinen, weil das wahr ist und das fragt, ob es nicht wahr ist. Es ist im Grunde das komplette Gegenteil. Hier unten können wir die Art von Operatoren sehen und ich benutze das nur wirklich, das häufigste Beispiel, das ich mir vorstellen kann wäre zu überprüfen, ob etwas undefiniert ist. Lassen Sie uns eine andere Variablennamen verwenden, auch wir x vorher verwendet haben. Ich werde es nur wahrscheinlich nicht den besten Namen nennen, sondern Variable. Wenn ich eine Art von hier mache und offene Klammern, die in variable schließende Klammern gesetzt sind, die Anweisung mit dem Semikolon beenden, werden Sie sehen, dass es als undefiniert zurückkommt. Während wenn ich der Variablen einen Wert von einem zugewiesen habe, der nur eine Zahl ist , und dann geben wir den Typ der Variablen ein, kommt zurück Nummer und wenn wir das in eine Zeichenfolge ändern würden, sagen wir einfach hallo und wir haben den Typ der Variablen eingegeben, würden Sie sagen, dass es jetzt eine Zeichenfolge ist, weil wir ihm eine Zeichenfolge zuweisen. Typ des Operators ist manchmal praktisch, um herauszufinden, welcher Datentyp Ihre Variable ist. Hier unten haben wir einen Bitwise-Operator. Ehrlich gesagt, ich muss diese so ziemlich nie benutzen. Ich werde sie nicht abdecken, wenn du mehr über sie wissen willst, gibt es ein ganzes Kapitel über Bitwise. Das ist eine Übersicht der Operatoren, es gibt hier auch ein paar verschiedene Menüs für Arithmetik und Zuweisung. Denken Sie daran, dass wir über das Inkrement und Dekrement gesprochen haben. Ich werde jetzt einfach runterscrollen. Wie Sie sehen können, es den Rest, gibtes den Rest,den Sie versuchen können, wenn Sie eine Zahl um nur eins erhöhen möchten, müssen wir nicht die lange Form x gleich x plus 1 schreiben. Wir können einfach x plus plus machen. Es ist eine sehr kürzere Art, es zu tun. Zum Beispiel, wenn ich dies entfernen sollte, indem ich einen Kommentar einfüge, wird es nur fünf sein und ich kann genau dasselbe tun, indem ich x gleich x plus 1 mache, und sie werden als sechs zurückkommen. Dieses x gleich x plus 1 ist genau das gleiche wie das Verwenden dieses. Es ist nur eine Abkürzung. Lassen Sie uns das noch einmal auskommentieren und wenn ich ein Minus machen sollte, werden Sie jetzt sehen, dass es 5 minus 1 ist, aber wir können auch die Abkürzung dafür verwenden, also werde ich das entfernen. Anstatt Plus Plus auf dem x zu verwenden, werde ich ein Minus machen und Sie werden sehen, dass wir genau das gleiche Ergebnis erhalten. Wir sehen diesen Operator oft mit Schleifen als eine Kurzschrift, die wir nicht eingeben müssen x gleich x plus 1, wenn wir einfach in diesen Kurzschrift-Operator einfügen können. auf die Seite zurückgehen, können wir uns die Operatorpriorität ansehen, aber ich bin mir ziemlich sicher, dass dies der gleichen Reihenfolge folgt wie die Standardmathematik. Wenn Sie Ihre Mathematik verstehen, dann sollten Sie damit einverstanden sein. Hier können Sie einige weitere technische Mumbo-Jumbo sehen. Ehrlich gesagt, wahrscheinlich müssen Sie nicht zu weit hineinschauen. Der letzte Menüpunkt wird in gehen, ist eine Zusammenfassung der Zuweisungsoperatoren. Wie Sie hier sehen können, gibt es all diese verschiedenen Möglichkeiten, Variablen zuzuweisen, und sie sind im Grunde Kurzzeichen. Hier können Sie sehen, dass dies das Gleiche ist. Dies sind wahrscheinlich eher die häufigsten, die Sie verwenden werden, wenn überhaupt und das ist genau das gleiche wie in dieser Spalte. Wir haben die Zuordnung schon ziemlich viel abgedeckt, aber wenn Sie einige dieser Kurzhade sehen wollen , können Sie zu diesem Menü gehen, ehrlich gesagt ist nicht so wichtig. Wenn Sie dies in Ihren Code einfügen, ist es nicht wirklich wichtig. Es ist nur, wenn du ein bisschen kniffliger sein und etwas Platz sparen willst, kannst du es so machen. Das ist alles, worüber ich bei den Betreibern sprechen wollte. Das größte und der größte Anfängerfehler ist zu denken, dass dies ein Vergleichsoperator ist. Es ist nicht, es ist Zuweisung und Sie können sehen, dass es sehr oft für die Zuweisung verwendet wird , aber manchmal, wenn es darum geht, eine if then Anweisung oder eine Vergleichsaussage zu erstellen , sind die Leute oft versucht, so etwas zu sagen, fünf gleich fünf, aber dann, wie Sie hier sehen können, denkt es, dass Sie fünf bis fünf zuweisen und fünf ist nur eine Zahl, die Sie nicht nur einer expliziten Zahl etwas zuweisen können, es muss eine Variable sein. Wenn Sie diese beiden vergleichen wollten, müssten Sie das zusätzliche Gleichheitszeichen einfügen und so erhalten Sie Gleichheitsvergleichsoperator. Das war die Hauptsache, über die ich hinauskommen wollte, Sie können hier einige andere Beispiele von Operatoren sehen. Dies ist alles im Internet verfügbar, so dass Sie zurückkommen und darauf verweisen können , wenn Sie etwas besitzen. Im nächsten Video werden wir mehr über Datentypen behandeln. Wir sehen uns in der nächsten. 9. JS Datentypen: In diesem Video werden wir mehr über Datentypen sprechen. Auch hier haben wir bereits ein wenig über Datentypen in den Einführungsstunden behandelt , aber lassen Sie uns ein wenig tiefer tauchen. Gehen wir zum Menüpunkt J, S Datentypen hier und Sie können hier sehen, sobald wir zuvor gesprochen haben, eine Zahl und eine Zeichenfolge, aber es ist auch sehr häufig in JavaScript Objekte zu haben. Objekte könnten eine schwierige Sache sein, um Ihren Kopf herum zu bekommen, aber wenn wir hier im Menüpunkt J, S Objekte gehen , können wir sehen, dass Objekte im wirklichen Leben spiegeln. Im wirklichen Leben ist ein Auto ein Objekt und ein Auto hat Eigenschaften wie Gewicht und Farbe und Methoden wie Start und Stopp. Sie können beginnen, hier zu sehen, dass wir in JavaScript die gleiche Sache haben könnten, wir könnten ein Objekt namens Auto haben und innerhalb, dass wir alle diese Eigenschaften haben könnten, und wie wir definieren oder wie wir diese Eigenschaften referenzieren, ist mit einem Punkt und dann ihren Namen, so dass wir einen Namen von Fiat zu einem Auto zuweisen können, können wir ein Modell von 500 geben, so weiter, so weiter. Dann können wir auch Methoden zu einem Objekt zuweisen, so dass wir im Grunde eine Funktion haben können, auf dem Auto, dass, wenn wir car.start anrufen, etwas passiert. Aber wieder, ich springe ein wenig weit, vor mir selbst, gehen wir zurück zum Menü über Datentypen, wie wir ein Objekt definieren, ich werde vor Zahlen und Strings überspringen und zu ein paar anderen Code-Booleans gehen. Grundsätzlich können Booleans nur zwei Werte haben, also denken Sie daran, bevor wir diese Aussagen bewerten, wie fünf gleich fünf? Ja, das stimmt, wahr ist ein boolescher Wert, also können wir einer Variablen tatsächlich einen Booleschen Wert als Wert zuweisen. Anstatt nur fünf gleich fünf zu sagen und das auszudrücken und zu sagen, dass das wahr ist, können wir hier tatsächlich eine Variable zuweisen und sagen wir einfach, dass der Code der Variablen, ist es wahr, wir können tatsächlich die Ergebnisse des Vergleichsoperators hier, so können wir sagen, ist fünf das gleiche wie fünf, wenn ja, zuweisen wahr, ist es wahr? Wenn nicht falsch zuweisen, ist es wahr. Wenn ich jetzt eintippe, ist es wahr, wird es als wahr wiederkommen. Wie Sie sehen werden, macht das wahrscheinlich jetzt nicht viel Sinn, aber es hilft mir tatsächlich, eine Show Ahead-Operation zu erstellen, wir sind nicht in if then Anweisungen vorher gegangen, aber im Wesentlichen, wenn ich eine logische Anweisung hier mit if, ich könnte einfach sagen, ist es wahr und dann einen Code ausführen, anstatt den expliziten Vergleich einzugeben , den wir vor fünf gleich fünf hatten. Jetzt ist es sehr klein, also spielt es keine Rolle, aber vielleicht haben Sie eine riesige Anweisung und Sie möchten die große Anweisung als eine andere Variable speichern, Sie können das tun und dann wäre dieser Datentyp boolescher Wert. Wenn wir jetzt überprüfen, ist die Art von es wahr, und es wird Boolean zurückkehren. Nummer eins ist Arrays, und Arrays könnten etwas Zeit in Anspruch nehmen, sich daran zu gewöhnen, aber sie sind in jeder Programmiersprache üblich, wir können einer Variablen eine Gruppe von Werten zuweisen und sie dann basierend auf Indizes aufrufen. Um das jetzt zu demonstrieren, werden wir meine Konsole löschen und das Beispiel hier machen. Anstatt neu zu erfinden, was ich hier getan habe, denke ich, das ist ein ziemlich gutes Beispiel. Jetzt haben wir Autos, wenn wir Autos gesetzt haben, werden wir bekommen, wie die Konsole ein Array darstellt, es ist so und die erste Zahl sagt uns tatsächlich wie viele Werte im Array sind oder wie viele Elemente in dort und dann können wir diese klicken, um die verschiedenen Elemente in ihrem Index zu sehen. Dieses Beispiel ist ziemlich einfach, es ist ziemlich einfach zu sehen, dass Saab der erste Wert ist, das ist der zweite Wert, das ist der dritte und tatsächlich eines der verwirrenden Dinge hier ist dass die erste tatsächlich durch Nullen repräsentiert wird, also werden Sie nicht verwirrt. Wenn ich Autos mit einer quadratischen Klammer eintippe, dann Null, dann beende die eckige Klammer und lege dann ein Semikolon hinein und drücke Enter, wird es mit Saab kommen. Das ist eine verwirrende, du wärst auch Entwickler, ist, dass der erste Wert in einem Array Null ist, natürlich, wenn wir den nächsten wollten, geben wir einfach einen ein und dann bekommen wir Volvo. Das Mächtige daran ist, wenn wir ein Gewehr Werte haben, können wir sie tatsächlich durchlaufen und ähnliche Dinge auf allen Werten tun , und Sie werden das in einem späteren Video sehen, aber ein Array ist das, was wir einer Schleife geben könnten, , um alle diese zu durchlaufen und HTML auf der Seite zu erstellen. Arrays sind sehr häufig und sehr mächtig, also definitiv eine gute Sache zu lernen. Jetzt kommen wir zurück zu unserem guten Freund, dem JavaScript-Objekt. Dieser wird wahrscheinlich ein wenig mehr Zeit brauchen, um zu erklären weil es der komplexeste Datentyp ist, den es gibt, und der Grund dafür ist, dass wir einen Namenswertpaare haben, die durch Kommas getrennt sind, also viele Dinge in die eine Variable oder das Potenzial, viele Dinge in der einen Variablen zu speichern. Hier haben wir ein Objekt und ein Objekt, das wir mit diesen geschweiften Klammern definieren können und wie Sie hier sehen können, haben wir Namenswertpaare oder Schlüsselwertpaare, und semantisch ist das viel schöner. Wenn wir zurück zu dem Beispiel er und Objekte, sehen Sie hier, wie wir in der Lage sind, den Namen eines Autos zu greifen oder den Namen dieses Autos als Fiat zuweisen. Nun, wenn wir hier runtergehen und das Beispiel sehen, werde ich das einfach in meine Konsole kopieren, löschen Sie das, wenn ich das mache, jetzt kann ich car.type anrufen und es kommt ein Fiat. Ich kann car.color ausführen und es kommt mit Weiß, und das ist viel schöner als das, was wir vorher mit Indexnummern hatten, denn vielleicht gibt es eine Reihe von verschiedenen Eigenschaften und es macht keinen Sinn, sie auszurichten. Sie werden sie nicht unbedingt iterativ durchlaufen, Sie möchten nur in ein bestimmtes Auto graben und bestimmte Attribute erhalten können, das ist, wo Objekte sehr gut sind. Was wir hier tun können, ohne das ganze Objekt neu zu definieren , ist, dass wir den Wert einiger von ihnen ändern können, also könnte ich car.color gleich gehen, sagen wir schwarz statt weiß. Jetzt, wenn ich Auto wieder ausgebe, können Sie sehen, dass Ihre Konsole ein Objekt für Sie darstellen wird, und wenn ich darauf klicke, wie es mit Arrays gemacht hat, anstelle dieser Indexnummern, haben wir Namen. Wir haben Farbe schwarz, modal 500 Typ Fiat, und so ist das eine nette Möglichkeit, was wir mit Objekten in JavaScript arbeiten können. Ich springt zwischen Datentypen in Objekten zurück, aber Objekte sind ein sehr wichtiger Datentyp, also gehen diese Hand in Hand und es gibt einige Informationen über Objekte und dann geht es weiter ins Detail hinein. Wir haben einen Typ, von dem wir über undefined gesprochen haben, dem wir über leere Werte gesprochen haben. Wenn wir also nur eine leere Zeichenfolge einfügen würden, lassen Sie uns das jetzt versuchen. Sie denken vielleicht, dass es undefiniert sein könnte, weil die Zeichenfolge leer ist aber sie ist tatsächlich noch als String definiert, weil wir diese Anführungszeichen setzen. Es ist trotzdem eine leere Zeichenfolge, aber es ist immer noch eine Zeichenfolge. Ein anderer Wert ist null, und null ist im Grunde nichts. Wie es hier sagt, ist der Datentyp von null leider in JavaScript tatsächlich ein Objekt. Es kann ein bisschen verwirrend sein und Sie können sogar einen Fehler in JavaScript betrachten , dass ein Typ von null ein Objekt ist, es sollte nur null sein, aber im Grunde können Sie ein Objekt leeren, indem Sie es auf null setzen. Wenn wir dieses Beispiel verwenden würden, haben wir eine Person, die offensichtlich ein Objekt ist , weil wir hier geschweifte Klammern haben und wir Namenswertpaare haben, aber dann können wir diesem Objekt einen Wert von null zuweisen, und wenn wir greifen Sie den Typ davon, es ist immer noch ein Objekt. Dies sind nur einige Quarks in JavaScript, wäre in den meisten anderen Programmiersprachen nicht dasselbe, aber es ist nur eine kleine Sache, mit JavaScript zu decken. Es ist wichtig zu beachten, dass Sie ein Objekt auch leeren können, indem Sie es auf undefined setzen, und der Unterschied zwischen undefined und null ist ein wenig nuanciert, aber im Grunde wird der Typ von undefined nicht definiert sein, aber der Typ von null wird ein Objekt sein, wie wir hier oben gesprochen haben. Denken Sie hier unten daran, dass wir gelernt haben, die Vergleichsoperatoren zu verwenden , die zwei Gleichheitszeichen in ihnen und drei Gleichheitszeichen in ihnen haben. Nun, wenn wir sie Wert gegen einen Wert betrachten, wird es als wahr ausgewertet, aber wenn wir sie betrachten, sind sie der gleiche Datentyp? Zwar sind sie definitiv nicht, weil wir gerade den Typ hier und die verschiedenen überprüft haben, so wird es als falsch herauskommen. Dies ist immer in das Unglück und ehrlich gesagt, Sie müssen damit nicht zu vertraut sein, aber es ist nur etwas zu decken und es gibt einige komplexere Beispiele hier, aber jetzt fängt es an, in das komplexere Zeug zu kommen. Grundsätzlich ist es wichtig zu wissen, welche Objekte sind und es ist wichtig, Methoden für Objekte aufrufen zu können und auch die Eigenschaften von Objekten zu verstehen , und deshalb werden wir hier nur ein wenig tiefer in Objekte graben. Wie Sie sehen können, haben wir hier eine Dekoration des Autos, mit dem wir zuvor gearbeitet haben, wir können das auch über mehrere Zeilen wie diese aufbrechen, also statt Auto, haben wir eine Person hier und wir können Attribute dieser Person festlegen. Wieder, wie wir zuvor gezeigt haben, können wir einen Punkt und dann den Eigenschaftsnamen verwenden, um auf eine Eigenschaft auf diesem Objekt zuzugreifen, wir können ihm Werte zuweisen oder einfach nur die Ergebnisse ausgeben, wir können es auch auf diese Weise durch ein Quadrat Klammer und dann den Namen in eine Zeichenfolge einfügen, das ist auch eine Option, also ist dies das gleiche wie diese und wir können auch Methoden wie diese einfügen. Wir haben Funktionen noch nicht abgedeckt, aber so würden Sie Funktion deklarieren, wir können sie in ein Objekt setzen und es dem Namen von etwas zuweisen. Ich werde nicht tief in das eingehen, weil wir Funktionen noch nicht abgedeckt haben, aber das ist, was hier vor sich geht. Hier ist ein häufiges Beispiel, dass Sie viel in JavaScript-Schulungen finden, ist das vollständige Namensbeispiel, dies ist nur eine einfache Funktion, die die Verkettung von zwei der Eigenschaften des Objekts zurückgibt . Wir haben Vor- und Nachnamen, und vielleicht wollen wir keinen vollständigen Namen angeben, weil er auf den Werten dieser vorherigen Attribute basiert. Was wir tun können, ist eine Methode definieren, die den Vornamen nimmt, fügt ein Leerzeichen dazwischen, und gibt dann den Nachnamen aus, und wir können dieses Schlüsselwort verwenden, um das aktuelle Objekt zu referenzieren, in dem wir sind. Wenn wir uns in diesem Objekt befinden, wurde es noch nicht vollständig definiert, so dass wir das Wort Person im Moment nicht verwenden möchten Während wir es definieren, beziehen wir uns auf dieses Objekt, in dem wir derzeit das Schlüsselwort verwenden, das hier. Wenn wir das innere HTML dieses P auf die Ergebnisse dieser Methode ändern , die wir hier definiert haben, erhalten wir Vorname mit einem Leerzeichen und dann Nachnamen. Hoffentlich sind das nicht zu viele Informationen, wieder, wir werden in Funktionen gehen, ich denke, es könnte sogar das nächste Video sein, aber wir werden definitiv sehr bald darauf eingehen. bis zum Ende der Seite scrollen, können wir hier einige komplexere Sachen sehen, nicht alles, was wichtig ist, wenn wir jetzt die Grundlagen abdecken. Dies sind die wichtigsten Datentypen, wieder, wir haben Nummer und Zeichenfolge in früheren Lektion abgedeckt und Booleans sollten nicht zu schwer zu verstehen sein, es gibt nur zwei mögliche Werte, true oder false, Objekte könnten einige Zeit in Anspruch nehmen , um Ihren Kopf herum zu bekommen und Arrays sind sehr häufig. Wenn Sie müssen, kommen Sie zurück auf diese Seite oder andere Seiten hier in gibt es ein ganzes Menü über Arrays hier und wir könnten tiefer in einer späteren Lektion eingehen. Wenn Sie auf einem dieser klar werden müssen, die wichtigsten natürlich eine Zahl, einen String, ein Objekt und ein Array. Das ist ein bisschen über Datentypen, im nächsten Video werden wir tatsächlich direkt in Funktionen eintauchen, was gut ist, weil ich dich in das tiefe Ende geworfen habe , indem ich hier eine Funktion einfüge. Im nächsten Video werden wir Funktionen abdecken. Wir werden mehr darüber erklären, was hier vor sich geht und es außerhalb des Kontextes eines Objekts nehmen. Wir sehen uns im nächsten Video. 10. JS Funktionen: Alles klar, in diesem Video werden wir etwas abdecken, das in JavaScript sehr wichtig ist , und das ist Funktionen. Wenn ich also auf den Menüpunkt für Funktionen hier klicke, können wir lernen, was eine Funktion ist und was sie tut. Eine Funktion ist also nur ein Codeblock, der entworfen wurde, um eine bestimmte Klasse auszuführen , und sie wird ausgeführt, wenn etwas sie aufruft. Im Grunde, was wir tun können, ist eine Reihe von Code in eine Funktion zu setzen und dann können wir es an verschiedenen Stellen unseres Projekts codieren. Jetzt ist dies wichtig, wenn wir Code wiederverwenden müssen, also haben wir eine gemeinsame Funktion. Da gehe ich mit dem Wort natürlich. Aber ja, wenn wir eine gemeinsame Sache haben, die wir regelmäßig ausführen müssen, macht keinen Sinn, es jedes Mal auszuschreiben, wenn wir es tun müssen. Es ist besser, es einmal zu definieren und dann mehrmals auszuführen , indem Sie nur diese Funktion aufrufen. Die andere Sache, die wir tun können, ist, Dinge an die Funktion zu senden , damit wir Variablen wie diese durchsetzen können. Also hier ist ein sehr einfaches Beispiel. Probieren wir es selbst aus. Wir nehmen im Grunde, was das erste Argument, das wir durch diese Funktion und das zweite Argument, das wir durch diese Funktion setzen, und wir geben das Produkt von beiden zurück, und das Produkt bedeutet, dass wir multiplizieren sie beide zusammen. Also, was kommen diese beiden Zahlen? Nun, wenn wir die Funktion tatsächlich aufrufen, können wir hier, was man Argumente nennt, einfügen. Also wird das erste Argument, die vier, hier gehen, in der p1 und das zweite Argument wird drei sein und hier gehen. Also im Grunde, was diese Funktion tut, ist, dass sie die erste Zahl und die zweite Zahl nimmt und sie zusammen mischt und ausgibt, was das Ergebnis davon ist. Wenn wir also vier und drei setzen, bekommen wir 12, weil wir diese Funktion definiert haben. Also nimmt es Eingabe hier. Also werde ich stattdessen 10 dort platzieren, das laufen lassen, und jetzt wirst du sehen, dass es 30. Aber natürlich sind wir uns selbst ein bisschen voraus. Einige von Ihnen haben vielleicht noch nicht einmal eine Funktion gesehen, und so lassen Sie uns die Syntax kurz abdecken. Also definieren wir eine Funktion, indem wir zuerst das Wort Funktion angeben, und dann setzen wir den Namen dieser Funktion, wenn es keine Argumente gibt, die hineingehen. Vielleicht geben wir diese Zahlen nur explizit an. Es wird immer 10 mal drei zurückkehren. Dann brauchen wir diese Argumente nicht, und was wir tun würden, ist, dass wir immer noch eine offene und enge Klammern haben müssen, aber wir müssen nichts hineinsetzen. Dann haben wir eine geschweifte Klammern, um den Codeblock zu öffnen. In Erinnerung an die Syntax-Lektion sprachen wir über Codeblöcke. Alles in diesen beiden geschweiften Klammern wird Teil der Funktion sein. So können Sie hier so viel komplexes Zeug einfügen, wie Sie wollen, Variablen und all das Zeug definieren. Aber am Ende wird es einen Satz von Wert zurückgeben und wir können das mit dem Return Schlüsselwort zurückgeben. Also jetzt werden wir das gleiche Ergebnis erhalten, aber wir können keine dynamischen Argumente mehr einfügen. Wenn ich also fünf und 10 einfüge, wird nichts passieren, und wenn wir unsere Konsole überprüfen, könnte es sogar einen Fehler geben, weil wir hier keine Argumente akzeptieren. Das ist also im Grunde die Syntax einer Funktion, und wenn Sie hier mehr über die Syntax erfahren möchten, können Sie hier ein Beispiel sehen. Sie haben die Keyword-Funktion, Sie haben den Namen der Funktion, Sie haben eine offene schließen und ein Ende schließen und Sie haben hier so viele Parameter, wie Sie wollen. Sie können eine unendliche Menge setzen, ich bin mir ziemlich sicher, Sie würden wahrscheinlich keine 100 Parameter einfügen wollen, aber ich denke, Sie können es nicht tun, wenn Sie wirklich wollten. Dann ist dies natürlich der Code, der zwischen diesen geschweiften Klammern ausgeführt werden soll. Wir haben in diesem Beispiel über die return-Anweisung gelernt, und genau hier spricht es darüber, warum ich Funktion verwende. Wie ich bereits erwähnt habe, möchten wir vielleicht Code wiederverwenden. Also definieren wir Code einmal und verwenden ihn oft. Im obigen Beispiel hätten wir dies einfach tun können, anstatt eine Funktion zu haben , und wir hätten leicht vier Mal drei machen können, und das gleiche Ergebnis würde herauskommen. Wir müssen diese ganze Sache nicht schreiben, aber vielleicht führen wir eine Art komplexer Berechnungen durch. Vielleicht überprüfen wir ein Datenbankmodell, wenn wir eine Datenbankverbindung herstellen müssen, vielleicht können wir, aber wir wollen nicht all das hier reinstellen. Also vielleicht wollen wir nur MyFunction setzen und einige Variablen einfügen und dann, MyFunction setzen und einige Variablen einfügen und was auch immer komplexe Berechnungen in dieser Funktion passieren, alles, was es tut, ist etwas zurückzugeben und es wird direkt hier hineingehen. Aber auch hier ist es schwer, das ohne ein kompliziertes Beispiel zu demonstrieren. Aber wissen Sie nur, dass diese Funktionen ziemlich groß werden können, und so macht es viel Sinn, dass wir den gesamten Code in eine Funktion einfügen müssen und dann in der Lage sind, ihn einige Male wiederzuverwenden und ihn auch viel einfacher zu verwenden, zu wissen, was es zu uns zurückkehren wird. Also hier ist ein weiteres Beispiel. Wir können eine einfache Funktion namens ToCelsius erstellen, und wenn dies der Fall ist, wird es einen Parameter nehmen, ein Argument, das die Temperatur in Fahrenheit sein wird, und dann wird es die Fahrenheit Temperatur nehmen und ausführen die Berechnung notwendig, um es in Celsius zu verwandeln. Also alles, was wir hier tun müssen, ist eine Funktion von Celsius zu rufen , die durch einen Umfang der Temperatur in Fahrenheit läuft und dann wird es uns die äquivalente Temperatur in Celsius zurückschicken. Das könnte also ein praktischeres Beispiel für euch sein, aber es kann viel komplexer werden. Es ist wichtig zu beachten, dass die öffnende und schließende Klammer für den Aufruf der Funktion unerlässlich ist. Genau hier, wenn ich einfach Tocelsius setze, ohne das Öffnen und Schließen zu setzen, selbst wenn Sie nichts darin setzen, müssen Sie es immer noch dort hineinlegen, denn sonst wird es nur zurückgeben , dass die Funktionsdefinition eher als das Funktionsergebnis. Das ist vielleicht ein bisschen Nuancenunterschied für Anfänger Entwickler. Aber ja, weiß nur, dass es nicht funktionieren wird, wenn du nicht öffnende und schließende Klammern einlegst. Sie können auch Funktionen verwenden, um Werten Variablen zuzuweisen. Was wir also tatsächlich tun können, ist, dass wir die Ergebnisse dieser Funktion oder was auch immer diese Funktion zurückgibt, nehmen und sie direkt in eine Variable direkt hier zuweisen können . Das dauert also 77 Grad Fahrenheit und konvertiert es in Celsius und setzt es dann direkt in diese Variable. Dann können wir es hier in eine Zeichenfolge setzen und das Ergebnis erhalten, und wir können diesen Schritt auch einfach überspringen, wo wir es zuweisen und es einfach in Zeile setzen. Das ist auch eine Option. Das sind im Grunde Funktionen. Es wird ein wenig komplexer, wenn Sie anfangen, Callbacks und verschiedene Dinge zu verwenden. Aber für jetzt, das ist die grundlegende Funktionsweise einer Funktion. Sie haben Parameter oder vielleicht nicht einmal Parameter, und Sie haben einen wiederverwendbaren Codeblock dazwischen, und dann rufen Sie ihn erneut mit diesem Namen auf, aber stellen Sie sicher, dass Sie diese öffnenden, schließenden Klammern verwenden. Also, das sind Funktionen. Im nächsten Video werden wir Scope behandeln, dem wir jetzt wissen, wie Funktionen funktionieren. Es ist wichtig zu betrachten, was passiert, wenn wir Variablen definieren, Variablen eher außerhalb von Funktionen und innerhalb von ihnen deklarieren, und nicht nur Funktionen, sondern Codeblöcke im Allgemeinen. Also sehe ich dich im nächsten Video. 11. JS Reichweite: Also in diesem Video werden wir etwas abdecken, das vielleicht nicht so offensichtlich ist, während Sie JavaScript entwickeln, aber sehr wichtig und es könnte Sie tatsächlich manchmal stürzen, während Sie für JavaScript entwickeln, und das ist die Idee des Umfangs. Also lassen Sie uns in den Menüpunkt für den Bereich gehen, und wir werden hier in JavaScript sehen, gibt es zwei Arten von Umfang, Local und Global Scope. Jetzt wird keine dieser Theorien ohne ein Beispiel viel Sinn ergeben. Also lasst uns direkt in ein Beispiel hier eintauchen. Lokale JavaScript-Variablen sind Variablen in einer JavaScript-Funktion deklariert. Sie werden also zu Local für diese Funktion und haben einen lokalen Bereich. So kann auf sie nur innerhalb der Funktion zugegriffen werden. S Dies ist ein ziemlich explizites Beispiel. Wenn ich hier oben einen Code zu CarName einfüge, wird es nicht funktionieren, es ist nicht in diesem Bereich deklariert. Aber ich kann es hier verwenden, weil es im Rahmen dieses Codeblocks liegt. Die Alternative ist global, und so mache ich gerade jetzt eine Variable. Also deklariere ich und weise einen Wert zu einer Variablen statt Volvo dem Autonamen zu, und dann ist er in meiner Funktion im globalen Bereich deklariert. Also kann ich tatsächlich in meine Funktion gehen und sie ändern, und das wird die Variable im globalen Bereich ändern. Das mag jetzt offensichtlich klingen, aber sobald wir anfangen, beides im selben Kontext zu verwenden, können Sie beginnen zu sehen, wie es Sie stolpern könnte. Hier unten können Sie sehen, dass, wenn Sie Variablen einen Wert zuweisen, die nicht deklariert wurde, automatisch eine globale Variable wird. Dies ist also ein interessanter in JavaScript. Wenn wir dies nicht zuerst mit dem Schlüsselwort var deklarieren, wird dies tatsächlich eine globale Variable sein, obwohl wir es nicht tatsächlich deklariert haben, selbst im lokalen Bereich oder im globalen Bereich. Nun gibt es einen Modus, den Sie in JavaScript verwenden können, der als Strict-Modus bezeichnet wird. Im strikten Modus müssen Sie Ihre Variablen immer deklarieren, aber wir müssen nicht zu viel darüber aufregen. Es ist immer eine gute Idee, Ihre Variablen zu deklarieren. Wenn Sie also so etwas wollen, wäre der schönere Weg, es zu tun, bereits eine Deklaration für die Variable im globalen Bereich einzugeben . Das wird Ihnen ersparen, wenn Sie strikt getroffen werden, aber es ist auch gut zu beachten, wie es eine gute Gelegenheit ist, Ihre Erklärung und Ihren Umfang explizit zu machen. Also hier ist es offensichtlich, dass in unserem globalen Umfang waren, wir deklarieren diese Variable im globalen Bereich. Jetzt ist es global zugänglich, aber dann weisen wir ihm in dieser Funktion einen Wert zu, aber wir können diesen Wert auch ändern und diesen Wert außerhalb dieser Funktion kommen lassen, weil er global ist. Das ist auch ein Grund, warum, denken Sie daran, wir haben uns angesehen, wie Sie eine Variable wie diese definieren können, und dann in einer neuen Zeile einen Wert wie diesen geben können. Oftmals weisen Sie einer neuen Variablen immer einen Wert zu. Es macht also oft keinen Sinn, warum Sie es deklarieren und in einem anderen Schritt zuweisen würden , aber wenn Sie etwas explizit in den globalen Bereich wie diesen einfügen möchten, macht es viel Sinn. Wenn wir es also hier unten deklarieren würden, wäre es nur im lokalen Bereich verfügbar, aber wenn ich das ausziehe und es hier aufstelle,deklarieren wir es jetzt im globalen Bereich und in der Lage, deklarieren wir es jetzt im globalen Bereich und in der Lage es in der Funktion zu ändern, aber es ist immer noch global. Hoffentlich beginnt das wieder Sinn zu machen, wenn Sie mehr Erfahrung mit diesem sammeln, wird es beginnen, ein wenig mehr zu verfestigen. Dies ist etwas über den Kontext von HTML. Der globale Bereich in HTML ist das Fensterobjekt, es ist nicht wichtig, dass Sie das verstehen müssen. Aber im Wesentlichen ist die Sache mit dem Bereich, wenn Sie zum Beispiel dieses Beispiel haben und nur in der Funktion einen Wert zuweisen, aber Sie wollten diesen Wert außerhalb dieser Funktion verwenden. Also sagen wir zum Beispiel, ich wollte, lassen Sie uns einfach dokumentieren. Ich weiß, ich habe gesagt, dass ich das nicht sehr oft benutze, aber in diesem Zusammenhang wird es uns erlauben, sofort etwas auf der Seite zu bekommen. Wenn ich richtig carName dokumentiere, werden Sie sehen, dass nichts herauskommt, und der Grund dafür liegt darin, dass es sich im lokalen Bereich befindet. Also, wenn ich das wieder hier reinlegen und die Funktion ausführen sollte, werden Sie sehen, dass der CarName ausgegeben wird. Wenn wir es in unser Beispiel zurücksetzen, das wir vorher hatten, das nicht funktionierte, und anstatt die Variable hier zu deklarieren, haben wir gerade die Deklaration aus diesem Teil der Zuweisung entfernt und wir deklarierten sie außerhalb der Funktion in der globalen Geltungsbereich , jetzt sind wir in der Lage, das zu tun. Es ist also ein sehr kleines Detail, denke ich in JavaScript, aber es ist wichtig zu beachten, weil man so etwas nicht kennt und hier mit „Nun, warum kann ich diesen Variablennamen nicht ausgeben?“ Es könnte dich stolpern, wenn du den Umfang nicht verstehst. Es ist also wichtig, es zu wissen. Das ist ziemlich viel, was ich auf dem Geltungsbereich sagen werde. Im nächsten Video werden wir Events abdecken. Also seh ich dich auf der nächsten. 12. JS Events: In diesem Video werden wir kurz EventListener vorstellen. EventListener ist etwas, das wir näher eingehen sobald wir in den HTML-DOM-Abschnitt gehen. Dies ist die gebräuchlichste Art, einen EventListener anzugeben. Aber Sie haben bereits ein Beispiel für einen Inline-EventListener gesehen , also dachte ich, wir würden einfach reingehen und es jetzt vorstellen. Nun, wenn Sie nicht klar sind, was Ereignisse sind, sind es im Grunde Dinge, die auf der Seite passieren, und ich weiß, dass das vage ist, aber im Grunde müssen Sie einen EventListener einrichten, wann immer Sie etwas passieren möchten, wenn etwas anderes passiert. Für ein Beispiel hier, wenn eine Webseite geladen wurde, können Sie etwas passieren lassen. Wenn ein Eingabefeld geändert wird, können Sie etwas passieren lassen, und wenn auf eine HTML-Schaltfläche geklickt wird, können Sie auch Code ausführen. In HTML ist es Ihnen erlaubt, einen EventHandler mit einem Attribut inline zu setzen. Die Syntax oder die Art und Weise, wie Sie dies tun, besteht darin, den Ereignisnamen in als Attribut gleich zu setzen, und dann fügen Sie die Anweisung, die Sie ausführen möchten, als Zeichenfolge ein. Hier ist ein Beispiel hier unten, das wir etwas Ähnliches gesehen haben, wir sind leicht in der Lage zu sehen, dass wir wollen, dass diese Codezeile auf dem onclick-Ereignis auf dieser bestimmten Schaltfläche ausgeführt wird. Es ist sehr explizit, weil der Code direkt auf der Schaltfläche angegeben ist. Dies ist nicht immer der beste Weg, Dinge zu tun, wie wir in der vorherigen Klasse auf HTML und CSS gesehen haben, gibt es einen Grund, warum Sie Ihren Code in eine andere Datei anstatt in Ihrem tatsächlichen Element einfügen möchten , besonders, wenn Sie möchten, dass bestimmte JavaScript auf mehreren Elementen ausgeführt werden soll. Im Allgemeinen ist es nur sauberer, eine separate Datei zu haben und einen EventListener einzurichten. Wie wir hier in dieses Video bekommen, wenn wir über EventListener im Kontext des DOM sprechen, werden Sie sehen, dass wir in der Lage sind, eine Schaltfläche oder eine beliebige Anzahl von Elementen zu zielen und dann eine Anweisung basierend auf bestimmten Ereignissen auszuführen. Wenn wir also nach unten scrollen, können wir einige gängige HTML-Ereignisse sehen. Manchmal, wenn Sie nur ein Ereignis auf der Seite haben und vielleicht kein ganzes JavaScript-Dokument schreiben möchten, können Sie einfach eine Schaltfläche haben und darauf klicken, nur um ein bestimmtes Ergebnis zu erhalten. Aber da Ihr Code komplexer wird, ist es am besten, ihn in eine eigene Datei zu verschieben. Also kurze kleine Lektion hier zu JavaScript-Ereignissen, ich wollte schnell erklären, was wir früher mit dieser onclick-Methode gesehen haben, aber im Wesentlichen, was Sie wissen müssen, ist mehr in diesem Abschnitt, den wir behandeln, sobald wir in HTML DOM sind. Das ist alles, was ich in diesem speziellen Video abdecken wollte. Im nächsten Video werden wir tiefer in Arrays schauen und wie wir durch Arrays, durch Schleifen iterieren können. Also sehe ich dich im nächsten Video. 13. JS Arrays: In dieser Lektion werden wir tiefer in einen der zuvor entdeckten Datentypen eintauchen , nämlich Arrays. Wir werden mehr darüber erfahren, wie Arrays funktionieren, und auch über Looping lernen, weil Looping und Arrays oft Hand in Hand gehen. Um loszulegen, klicken wir hier auf den Menüpunkt JS Arrays. Wie Sie sehen können, haben wir dieses Beispiel bereits gesehen. Wir können nach unten scrollen und wir können sehen, dass wir ein neues Array definieren können , nicht nur indem die eckigen Klammern und die verschiedenen Werte durch Kommas getrennt setzen, sondern wir können es auch als neues Datentyp-Array und dann als -Parameter innerhalb dieser Funktion. Jetzt, wenn ich nach unten gehe, können Sie hier sehen, wie wir die verschiedenen Elemente in einem Array anvisieren, denken Sie daran, dass Null die erste ist. Wenn wir das erste Element des Autos Arrays in den inneren HTML eines Elements der ID der Demo setzen wollten , würden wir es so machen. Hier ist es wieder, Null ist das erste Element im Array, eins ist das zweite. Array-Indizes beginnen bei Null. Das könnte dich ein bisschen stürzen, weil es nicht die intuitivste Sache für jemanden ist, der Nicht-Programmierer ist. Hier unten können wir auch auf das vollständige Array zugreifen und sehen, wie das aussehen würde. Genau hier können Sie sehen, dass JavaScript intelligent genug ist , um zu wissen, dass es sich um eine Reihe von drei Strings handelt, und es gibt nur alle Strings zusammen als eine Zeichenfolge aus. Es kommt als Saab Komma Volvo Komma BMW ohne Wortraum. Die andere Sache, die an JavaScript interessant ist, ist Arrays sind Objekte. Wenn wir den Typ des Operators in JavaScript verwenden, gibt es ein Objekt für Arrays zurück. Das wirft die Frage auf, was ist der Unterschied zwischen einem Array und einem Objekt? Sie sollten sich Arrays vorstellen, wie Zahlen verwenden, um auf ihre Elemente zuzugreifen. Person Null hier wird John zurückgeben, Person in eckigen Klammern wird man Doe zurückgeben, und Person in eckigen Klammern zwei wird 46. Obgleich Objekte Namen verwenden, um auf ihre „Mitglieder“ zuzugreifen. Im Fall von Arrays ist das, wofür Sie es verwenden, etwas, das einem linearen Fluss folgt. Wie wir sehen werden, wenn wir weiter unten gehen und über Schleifen sprechen, würden Sie nicht unbedingt alles durchlaufen wollen, vielleicht möchten Sie nur eine Kante greifen, es gibt keine besondere lineare Reihenfolge für diese Felder. Aber vielleicht gibt es damit, ich weiß, dass das wahrscheinlich ein bisschen abstrakt klingt, aber Sie werden sehen, wenn wir in Schleifen kommen, es macht viel sinnvoller, ein Array zu durchlaufen, als es ein Objekt tut. Die andere Sache, die an Arrays in JavaScript großartig ist, ist, dass sie in Array-Eigenschaften und -Methoden gebaut sind Wenn wir also die Länge eines Arrays finden möchten, können wir die Eigenschaft length verwenden, können wir die Eigenschaft length verwenden, und wenn wir unser Array, können wir dies tun, indem wir die Methode der Sortierung verwenden. Hier können wir ein Beispiel für die length Eigenschaft sehen, und wir haben ein Array mit offensichtlich vier Elementen hier, wir können einfach Punktlänge auf diesem Array aufrufen und wir erhalten die Länge dieses Arrays. Wie ich schon sagte, wir wollten über Looping sprechen, da es sich um Arrays handelt, und der beste Weg, ein Array zu durchlaufen, ist eine „for“ -Schleife. Ich werde das öffnen, und Sie können hier sehen, vielleicht möchten wir diese Liste als HTML-Liste formatieren, damit wir eine „for“ -Schleife verwenden können. Nun, was hier los ist, möchte ich die Schleife hier trennen, was passiert, ist die erste Anweisung in der „for“ -Schleife einen Ausgangspunkt für diesen Iterator setzt, also Null, und dann ist dies die boolesche Anweisung, dass, solange es wahr ist, die Schleife fortgesetzt wird, und das ist, was Sie jedes Mal passieren möchten, wenn die Schleife ausgeführt wird. Es sieht wirklich kompliziert aus, aber wirklich ist es ziemlich einfach. Es sagt nur, dass den Marker bei Null starten, den Marker jedes Mal um eins erhöhen, wenn die Schleife geht, und solange diese Zahl kleiner als fLen ist, und FLen hier oben ist nur die Länge des Arrays. Grundsätzlich zu sagen, ohne die Mumbo Jumbo, ist, fügen Sie diesen Listeneintrag für jede Frucht in diesem Frucht-Array. Hier können Sie sehen, dass wir die Indexnummer durch eine Variable ersetzen können , die durchläuft. In der ersten Schleife wird es Null sein, und gibt den Wert an Position Null aus, die sich daran erinnern, ist die erste Position, und dann macht es eine zweite Schleife und diese Zahl wird eins, also gibt es Orange, und dann wird es drei, gibt Apple aus, und der Grund, warum es jedes Mal um eins erhöht ist, weil wir diesen Operator hier verwendet haben. Die Aussage hier könnte für Neulinge Programmierer verwirrend sein, aber es ist eine ähnliche Konvention jedes Mal, wenn Sie es tun, es ist im Grunde starten Sie den Marker weg, wie Sie es wollen, das ist ziemlich Standard am Ende, und nur mit einem booleschen Wert, um zu bestimmen, wie lange Sie es ausführen möchten. Hier, wenn Sie sich erinnern, ist der Verkettungsoperator, also beginnen wir eine ungeordnete Liste, und wir enden hier in einer ungeordneten Liste, und dazwischen fügen wir so viele Listenelemente hinzu, wie wir durch die ganze Liste von Früchten hier in einem Array. Jetzt können Sie sehen, wie Arrays und Loops gut zusammenarbeiten. Nun, wenn dies ein Objekt wäre, wäre es vielleicht nicht sinnvoll, eine ganze Liste zu durchlaufen, und das ist vielleicht, wo Objekte und Arrays, der Unterschied zwischen ihnen wird ein wenig offensichtlicher. Zurück zu unserer Seite auf JavaScripts Arrays, können wir einige Methoden verwenden, um Array-Elemente hinzuzufügen. Einer der häufigsten ist Push. Wir können Lemon zu diesem Array hinzufügen, Es wird einfach am Ende gehen. Wir können die Methode der Push verwenden, und dann den Wert, den wir in setzen wollen. Wenn wir hier nur einen Blick werfen, fügen wir Lemon zum Array hinzu, und dann geben wir das ganze Array auf den Bildschirm aus, ich werde das einfach noch einmal ausführen. Wie Sie hier sehen können, haben wir eine Funktion, die mit einem Ereignis auf einer Schaltfläche verknüpft ist, also, wenn wir auf diese Schaltfläche klicken, wird es diese Funktion ausführen, und wenn wir hier nach unten gehen, was mit der Funktion passiert, dauert es dieses Array die wir hier aufteilen, was Früchte sind. Es schiebt ein zusätzliches Element am Ende, und dann ändert es den inneren HTML unseres Elements mit der ID der Demo, die hier ist, in das vollständige Array, das gerade geändert wurde. Da ist viel los, aber hoffentlich macht das Sinn. hier zurück gehen, können wir sehen, dass es einen anderen Weg gibt, dies zu tun , indem wir einen dynamischen Wert für den Index verwenden. Ich würde empfehlen, dass Sie es einfach halten, und wir können auch genau angeben, welche Position in dem Array wir unser Element platzieren möchten. Wenn wir zum Beispiel nur Banana ändern wollten, könnten wir dies tun, indem wir hier einfach Null setzen. Lassen Sie uns das jetzt demonstrieren. Was wir hier haben, ist, dass wir ein Array haben und wenn wir hier als Position 0, 1, 2, 3 zählen , und wie ich in Position 6 sagte, wollen wir Lemon, und dann berechnen wir die Länge dieses ganzen Arrays, erstellen wir eine leere Textvariable, nur um loszulegen, und dann fahren wir durch die verschiedenen Früchte, setzen sie in Text und fügen dann ein Break-Tag hinzu. Dann, sobald diese „for“ -Schleife fertig ist, setzen wir diesen Text als den inneren HTML eines Elements durch die ID der Demo, die genau hier ist. Das Interessante, was Sie hier sehen werden, ist, dass es diese anderen beiden Positionen erstellt , denn im Grunde, wie ich Ihnen gerade hier gezeigt habe, zählen wir zusammen, um die Indexnummer zu erhalten. Wenn Sie anfangen, in Position 6, die tatsächlich Position 7 ist, zu setzen , dann gibt es hier eine offensichtliche Lücke. Das ist die Position 0, 1, 2, 3, 4. Fünf und dann sechs. Was passieren wird, ist, Sie werden sehen, dass Ihr Array in den beiden Indizes, die nicht definiert wurden, nicht definiert ist. Ich würde mir nicht zu sehr darum sorgen, weil ich das nicht oft sehe. Wenn Sie möchten, nur um Zitrone am Ende eines Arrays hinzuzufügen, alles, was Sie tun werden, ist, dies zu ändern, die Gleichen loszuwerden, und dann, was der Index als nächstes kommt, wird es dieses Element ihm zuweisen. Wenn ich das durchführe, dann bekommst du nicht das Undefinierte. Aber wenn Sie spezifisch angeben möchten, wo Sie es im Array gehen möchten, wird alles davor, das nicht definiert wurde, als undefiniert angezeigt. Die andere Sache, die Sie hier demonstrieren müssen, ist, wenn Sie eines davon ändern möchten, müssen Sie nur seine Indexnummer kennen. Sagen wir zum Beispiel, wir wollten Orange zu Zitrone ändern. Das ist an Position 1, und wenn ich das laufen, jetzt werden Sie sehen, dass unsere Orange eine Zitrone geändert wurde bevor ich beginne, das Array auf den Bildschirm zu setzen. man auf die Seite zurückgeht, gibt es eine andere Sache, die Associative Arrays genannt wird. Aber in JavaScript unterstützt es keine Arrays mit benannten Indizes. Wenn Sie so etwas tun, wo Sie den Namen als Index setzen, definiert JavaScript das Array in ein Standardobjekt neu. Dies ist nicht etwas, an dem Sie aufhängen sollten, wenn Sie neu in der Programmierung sind. Grundsätzlich ist eine andere Sprache, dass es etwas gibt, das ein assoziatives Array genannt wird, und dieses assoziative Array ermöglicht es Ihnen, Elemente in einem Array nach einem Namen auszuwählen. Während in JavaScript, wenn Sie ein Array tun, ist es nur nach Index, andernfalls verwenden Sie nur ein Objekt. Sagen Sie zum Beispiel hier, wir haben ein Personenarray definiert und wir haben ihm Werte an drei verschiedenen Positionen gegeben, und wenn wir die Länge erhalten, wird es drei zurückgeben, und wenn wir uns Position 0 ansehen, ist es offensichtlich John weil wir es genau hier definiert haben. Aber wenn wir dasselbe tun und keine nummerierten Indizes verwenden, sondern stattdessen Zeichenfolgen benennen, können wir diesen nummerierten Index nicht verwenden, und er wird tatsächlich ein Objekt sein. Lassen Sie uns das einfach in unserer Konsole demonstrieren. Ich habe meine Konsole hier geöffnet. Wenn ich ein Array definieren und dann seine Werte basierend auf Indizes geben sollte, die auf einer Zeichenfolge basieren, nicht einer Zahl, und ich drücke das. Wenn ich jetzt Person eintippe, wird es sich wie ein Objekt verhalten, und wir können das erste Attribut nicht mit Null anvisieren. Wenn ich das getan habe, wird es als undefiniert erscheinen. Grundsätzlich müssen Sie damit nur wissen, dass JavaScript keine Arrays mit benannten Indizes unterstützt. Wenn Sie versuchen, das zu tun, was Sie tun, ist ein Objekt. Das wirft natürlich die Frage auf, was der Unterschied zwischen Arrays und Objekten ist? Hier ist eine wirklich einfache Möglichkeit, es zu verstehen oder den Unterschied zusammenzufassen, in JavaScript-Arrays verwenden nummerierte Indizes und Objekte verwenden benannte Indizes. In dem Auto Beispiel vor, der Name, die Marke des Autos, wir zielten sie, indem wir ihren Namen nehmen, und die Ausgabe. Ich gehe zurück zu dieser Lektion, wir sind in der Lage, den Namen des Autos zu bekommen. Aber wenn Sie möchten, dass es linear mit nummerierten Indizes durchläuft, dann würden Sie ein Array verwenden. Hier ist es nur das Gleiche auf eine andere Art und Weise zu sagen. Hier wird darüber gesprochen, wie Sie den neuen Konstruktor verwenden können, um ein Array zu erstellen, das sollten Sie wahrscheinlich vermeiden. Versuchen Sie es auf diese Weise zu tun, nicht auf diese Weise. Wenn wir weiter runter gehen, kommen wir in noch komplizierteres Territorium. Wenn der Typ des Operators ein Objekt für ein Array zurückgibt, woher wissen Sie dann, dass es sich um ein Array handelt? Es gibt tatsächlich eine Methode, die Sie verwenden können, um herauszufinden, ob ein Array tatsächlich ein Array oder ein Objekt ist. Aber wieder, Sie müssen das nicht wirklich oft verwenden. Was ich will, dass ihr versteht, ist, was ein Array ist? Wie aktualisiere ich ein Array? Wie gibt man ein Array aus? Wie durchläuft man ein Array? Was ist der Unterschied zwischen einem Array und einem Objekt? Technisch gesehen sind Arrays Objekte, aber der Unterschied zwischen dem, was wir zuvor in dieser JavaScript-Objekt-Lektion gezeigt haben, was wir jetzt mit Arrays tun. Schließlich, bevor wir Arrays einschließen, gibt es einige andere Menüpunkte, die Sie vielleicht auschecken möchten. Auf dieser Seite können Sie sich über andere Methoden informieren, die Sie auf Arrays auf String anwenden können. Sie können Pop statt Push, die ein Element entfernt, drücken wir vorher gesehen. Wir können verschieben, das ist das gleiche wie Pop, das entfernt es von der Vorderseite. Es gibt Unverschiebung, und wir haben gesehen, wie es Elemente verändert hat. Wenn Sie mehr darüber erfahren möchten, gibt es viele verschiedene Möglichkeiten, wie wir Arrays beeinflussen können, aber ich fürchte, ich werde zu lange damit verbringen, wenn ich diese Seite vollständig durchgehe, gibt es auch die Methode zum Sortieren von Arrays. Wenn Sie wissen möchten, wie Sie Ihre Liste hier, die Sie in einem Array gespeichert haben, nehmen und sie auf verschiedene Arten sortieren, nach numerischen Wegen, indem Sie sie mit einem bestimmten booleschen Wert vergleichen alle möglichen komplexen Berechnungen durchführen, kommen Sie auf jeden Fall hier zurück und schauen Sie sich diese Menüs an. Aber im Moment möchte ich, dass Sie über Arrays wissen, ist, sie nur eine Möglichkeit sind, mehrere Werte in einer einzigen Variablen zu speichern. Sie können auf diese verschiedenen Variablen zugreifen, indem Sie einen nummerierten Index verwenden. Leute, das war alles, worüber ich auf Arrays in Bezug auf Datentypen sprechen wollte , die wir in JavaScript haben, wir haben Strings, Zahlen, Objekte, Arrays, das sind wahrscheinlich die häufigsten, aber wir haben Daten, Mathematik , Booleans, die wir früher behandelt haben. Ich möchte nicht zu sehr ins Detail gehen, ihr könnt sie in der Referenz hier überprüfen. Aber im Grunde habe ich das Gefühl, dass wir alle gut auf die Grundlagen der wichtigsten Datentypen sind, und im nächsten Video werden wir endlich die Bedingungen abdecken. Wir sehen uns in diesem Video. 14. JS Konditionen: Im letzten Video haben wir über die wichtigsten Datentypen in JavaScript gesprochen. Jetzt in diesem Video werden wir über etwas sprechen, das wirklich wichtig in JavaScript und wirklich üblich ist. Sie haben vielleicht eine „if then“ -Anweisung gesehen, im Grunde, was das ist, ist eine Bedingung. Also gehen wir in diesen Menüpunkt hier für JS-Bedingungen und erfahren Sie mehr über „wenn dann sonst“. Sehr oft, wenn Sie Code schreiben, möchten Sie verschiedene Aktionen basierend auf verschiedenen Entscheidungen ausführen. Wie Sie das tun können, verwenden Sie bedingte Anweisungen. Jedes Mal, wenn es etwas gibt, das Sie passieren möchten, wenn etwas wahr ist, dann werden Sie eine bedingte Anweisung verwenden. Es ist, als würdest du zu deinem Freund sagen: „Ich gehe ins Kino, wenn wir uns diesen Film ansehen. Aber wenn wir es nicht tun, dann gehe ich nicht.“ Das ist eine „if then else“ -Anweisung. Also, wenn Sie sich fangen, etwas in JavaScript oder in der Programmierung im Allgemeinen zu tun , wo Sie etwas nur passieren wollen, wenn etwas wahr oder falsch ist, dann brauchen Sie eine bedingte Aussage. Es sollte ziemlich einfach für uns sein zu verstehen, was eine „if“ -Anweisung tut. Alles, was passiert, ist, dass wir das Schlüsselwort „if“ verwenden, wir setzen eine Bedingung in einige Klammern wie diese, und dann verwenden wir die geschweiften Klammern, erinnern Sie sich, als Codeblock, um Code auszuführen, basierend darauf, ob diese Bedingung wahr ist. Schauen wir uns das Beispiel hier an. Es sagt: „Wenn Stunde weniger als 18 ist, dann wollen wir die Zeichenfolge „Guten Tag“ der Variablen der Begrüßung zuweisen.“ Probieren wir es selbst aus. Wie Sie sehen können, haben wir ein neues Datumsobjekt, das wir früher nicht behandelt haben, weil es etwas ist, das Sie nicht oft verwenden, aber Datum ist ein anderer Datentyp, den Sie verwenden können. Wir können diesen Teil hier verwenden, um zu bestimmen, wie viele Stunden am Tag vergangen sind. Wenn also die Anzahl der Stunden, die am Tag vergangen sind, weniger als 18 ist, dann werden wir „Guten Tag“ in den inneren HTML des Elements mit der ID der Demo setzen , die genau hier ist. Statt „Guten Abend“ wird es also „Guten Tag“ sagen denn jetzt ist es 10:00 Uhr in meiner Zeitzone, also ist das ein ziemlich einfaches Beispiel. wir nach unten gehen, können wir sehen, dass wir auch eine alternative Anweisung oder Codeblock ausführen können, wenn diese Bedingung tatsächlich falsch ist. Im Falle, ob die Stunde weniger als 18 ist, können wir sagen „Guten Tag“, sonst können wir sagen „Guten Abend“. Ich denke, das ist ziemlich einfach zu verstehen, und wir können auch einen Schritt weiter gehen und zwischen unserem „if“ und unserem „else“, können wir ein „else if“ setzen und eine andere Bedingung in setzen. Werfen wir einen Blick auf dieses Beispiel. Im Grunde, was wir hier haben, ist, dass wir eine Zeit haben, in der wir die aktuellen Stunden am Tag vergangen bekommen und sie einer Variablen der Zeit zuweisen, und dann ändern wir die Begrüßung basierend auf der Zeit. Wenn es weniger als 10 ist, wird es „Guten Morgen“ sonst sein, wenn die Zeit weniger als 20 ist, also offensichtlich, wenn es nicht weniger als 10 ist, dann wird es zwischen 10 und 20. Wenn das der Fall ist, dann sagen wir „Guten Tag“. Wenn das nicht der Fall ist, dann sagen wir „Guten Abend“. Also im Wesentlichen, was wir hier sagen, wenn die Zeit gleich oder größer 20 ist, dann sagen wir: „Guten Abend“. Das Wichtigste ist hier zu beachten, dass alles in der Reihenfolge passiert, wir schauen zuerst, ob die Zeit 10 ist und wenn nicht, dann gehen wir zu diesem. Also, wenn dieser auslöst, bedeutet das, dass dies nicht wahr ist. Es wird diese „if“ „else if“ -Anweisungen durchlaufen, und sobald es wahr ist, wird es jeden Codeblock auf dieser Ebene ausführen, so dass es nicht zum nächsten gehen wird. Ich erwähne das nur, um sicherzustellen, dass Sie es wissen, diese nicht isoliert sind. Also, wenn ich das in seine eigene „if“ -Anweisung verschieben und das „else“ loswerden und das ausführen sollte. Im Moment erhalten wir die gleichen Ergebnisse, weil es gerade 10 bestanden hat. Aber lassen Sie uns einfach sagen 11 statt, und ich klicke auf „Ausführen“ auf, dass und klicken Sie auf „Probieren Sie es“ sehen, wie es sagt „Guten Tag“. Das liegt daran, dass beide wahr sind, und weil dieses passiert an zweiter Stelle, wird es den Wert überschreiben, den wir hier festgelegt haben. Wenn wir dies auf das zurücksetzen, was es vorher war, und wieder, ändern Sie dies auf 11, klicken Sie auf „Ausführen“ und klicken Sie auf „Versuchen Sie es“. Es wird „Guten Morgen“ sagen, weil es zuerst trifft, und dann, sobald eine dieser Bedingungen in dieser ganzen „i“ -Anweisung wahr ist, wird es diesen Code ausführen und nichts davon wird sogar einen Blick bekommen. Ich hoffe, dass ich das wirklich klar gemacht habe, den Unterschied zwischen „else if“ und einer völlig neuen „if“ -Aussage. Wenn Sie beginnen, einen Haufen von verschiedenen „else ifs“ zu setzen, also wenn wir „sonst, wenn“ Zeit weniger als 25 ist, und dann würden wir in einem anderen setzen „sonst wenn“. Das sollte ein Zeichen dafür sein, dass Sie Ihren Code ändern müssen, und was Sie wahrscheinlich tun möchten, ist eine switch-Anweisung zu verwenden. Gehen wir zurück zu diesem Dokument hier, und wir gehen zum nächsten Menüpunkt für „Switch“. Wie Sie hier sehen können, wird die switch-Anweisung verwendet, um verschiedene Aktionen basierend auf verschiedenen Bedingungen auszuführen, und wirklich ist es die Alternative zu „if then“, wenn Sie viele verschiedene Fälle haben. Anstatt ein wirklich langes „if this“, „dann dieses“ „else if“ „dies dann dieses“ „else if“zu schreiben „dann dieses“ „else if“ „dies dann dieses“ „else if“ und nur eine wirklich lange, „if“ -Anweisung mit vielen „else ifs“ zu haben , ist es viel effizienter, diesen Schalter zu verwenden -Anweisung, und es ermöglicht Ihnen auch, einen Standardwert zu definieren. So funktioniert es: Sie beginnen mit dem Schlüsselwort „Switch“ und setzen die Variable oder die Sache, die Sie überprüfen möchten, in den ersten Satz von Klammern. Dann öffnen Sie geschweifte Klammern und machen einen Codeblock und verwenden dann das Schlüsselwort „Case“, um zu überprüfen, ob dieser Wert hier gleich ist, was in Ihrem Fall ist. Dann führen Sie Ihren Code aus, und dann verwenden Sie das Schlüsselwort „Break“. ist eine Menge los. Aber im Grunde, wenn Sie das verstehen, ist das sehr einfach. Wir schauen uns nur den Tag an, ob es Sonntag, Montag, Dienstag ist, und das wird durch diese Zahlen dargestellt. Also Sonntag ist 0, Montag ist 1. Wenn wir Fall 0 sagen, wollen wir, dass der Tag Sonntag gleich ist. Wenn es Fall 1 ist, wollen wir, dass der Tag Montag gleich ist. Sie können sehen, ob wir dies in einer „if then“ -Anweisung oder einer „if then else if“ -Anweisung geschrieben haben, würden wir so viele „else ifs“ haben und es wäre einfach chaotisch. Dies ist also eine viel sauberere Möglichkeit, eine Bedingung zu machen , in der mehrere Fälle vorhanden sind, nach denen Sie suchen müssen. Hier unten können Sie mehr über das Schlüsselwort break erfahren. Grundsätzlich hilft es uns nur, aus einem Codeblock zu verlassen. Anstatt geschweifte Klammern für jeden Fall zu haben, haben wir einen Doppelpunkt und dann verwenden wir das Schlüsselwort „Break“, um diesen bestimmten Codeblock zu beenden. Sie nach unten scrollen, gibt es auch das Standardschlüsselwort. Grundsätzlich, wenn es keine Übereinstimmung gibt, wird es nur standardmäßig auf das, was hier in der Standardeinstellung ist. Das ist immer gut in dem Sinne, dass Sie vielleicht Code haben, der später auf Text in Ihrer Datei basiert. Wenn der Fall nicht sechs oder Null war, haben Sie möglicherweise undefinierte Texte und das würde später Probleme in Ihrem Code verursachen. Es ist also immer gut, einen Standard dort zu haben, nur auf dem Randfall oder in dem Fall, dass es nicht mit sechs oder null übereinstimmt oder was auch immer Sie in Ihrer switch-Anweisung definiert haben. Hier gibt es noch ein paar weitere Beispiele. Eine Sache zu beachten ist, dass geschaltete Fälle einen strengen Vergleich verwenden. Wenn Sie sich daran erinnern, was dieses drei Gleichheitszeichen bedeutet, müssen die Werte vom gleichen Typ und vom gleichen Wert sein, damit sie übereinstimmen. Denken Sie daran, strikter Vergleich ist der gleiche Wert Endtyp. Während, wenn Sie sich erinnern, ist der doppelte gleich nur der gleiche Wert, aber nicht notwendigerweise der gleiche Typ. Das ist etwas Wichtiges zu beachten, aber nicht notwendigerweise etwas, das nicht in den Sinn kommt, bis Sie tatsächlich beginnen, einige Probleme mit Ihrem Code zu haben und etwas ändern möchten. Ich denke, das reicht wahrscheinlich aus, wenn es um Bedingungen geht. Konditionale sind genau wie im wirklichen Leben, ob man jemandem ein Ultimatum geben würde, ist es genau das Gleiche. Es sollte nicht zu lange dauern, um Ihren Kopf um „if then“ - „if else“ -Anweisungen zu wickeln, sehr häufig in JavaScript und einem der gebräuchlichsten Codeblöcke Sie sehen werden, wenn Sie JavaScript entwickeln. Im nächsten Video werden wir tiefer in einen anderen gemeinsamen Codeblock gehen , den Sie sehen werden, und das sind Schleifen. Wenn Sie sich in dem Video auf Arrays erinnern, haben wir ein wenig über eine for-Schleife abgedeckt, durch ein Array zu schleifen, aber wir werden tiefer in Loops gehen und Ihnen einige andere Loops im nächsten Video zeigen. Ich seh dich in diesem. 15. JS Schleifen: Alles klar, Leute, wir sind fast fertig damit, allgemeines JavaScript zu lernen. Denken Sie daran, JavaScript ist eine eigenständige Programmiersprache, aber die Art und Weise, wie es mit dem Web interagiert, ist über das DOM. Wir werden mehr über HTML DOM im nächsten Abschnitt der Klasse lernen. Aber um unser Lernen über allgemeines JavaScript und wie die Programmiersprache funktioniert zu beenden , werde ich nur ein wenig mehr über Schleifen sprechen. Wenn Sie sich erinnern, als wir über Arrays gesprochen haben, haben wir eine JavaScript-for-Schleife abgedeckt und hier ist ein perfektes Beispiel dafür, wofür Sie eine Schleife verwenden würden. Denken Sie daran, dass wir vorher eine for-Schleife gesehen haben, und dies ist die Standardkonvention dafür. Warum sollten wir eine Schleife verwenden? Nun, vielleicht wollen wir das nicht schreiben. Das Problem damit ist vielleicht, dass das Array länger als sechs Elemente ist und wir wollen, dass das dynamisch ist. Also möchten wir die gesamte Liste der Autos durchlaufen und wir wollen nicht den gleichen Code immer und immer wieder wiederholen müssen. Nun, eine for-Schleife ist perfekt dafür, wie wir vorher gesehen haben. Aber es gibt auch andere Arten von Schleifen. Wenn wir hier mehr über die for-Schleife erfahren, ist dies eine gute Referenz für diejenigen von Ihnen, die vielleicht mit der for-Schleife ein bisschen verloren gegangen sind. Diese erste Anweisung wird ein Mal vor der Ausführung des Codeblocks ausgeführt, und die zweite Anweisung definiert die Bedingung für die Ausführung des Codeblocks, und Anweisung 3 wird jedes Mal ausgeführt, wenn der Codeblock ausgeführt wurde. Ein gängiges Beispiel ist das Festlegen eines i-Markers, das Starten bei Null und das Senden einer Bedingung, dass er ausgeführt werden soll, bis eine bestimmte Zahl erreicht ist, und das Erhöhen dieser Zahl jedes Mal. Es ist eine komplizierte Art, es zu betrachten, aber es gibt uns eine Menge Kontrolle darüber, wie wir die Schleife laufen wollen. Auf dieser Seite erfahren Sie alles über for-Schleifen, aber wir haben diese Standardkonvention bereits vorher behandelt. Also, was ich euch zeigen wollte, war für drin. Wir sahen, wie mit for-Schleifen wir ein Array durchlaufen konnten, aber wir können auch durch ein Objekt schleifen, indem wir diese for in-Anweisung verwenden. Wenn wir die Eigenschaften eines Objekts durchlaufen wollten, wie wir durch ein Array schleifen würden, können wir diese Anweisung hier verwenden. Wie Sie sehen können , werden alle Schlüsselnamen, alle benannten Indizes und nur die Werte ausgegeben. Es ist also eine Möglichkeit für uns, ein Objekt zu durchlaufen, wie wir es in einem Array tun würden. Gehen wir zur while-Schleife, bei der es sich um eine andere Schleife handelt, die wahrscheinlich ein bisschen einfacher zu verstehen ist. Die while-Schleife wird fortgesetzt und daher ist diese Anweisung nicht wahr. Jetzt kann dies manchmal ein bisschen eine Gefahr sein weil Sie sicherstellen möchten, dass dies irgendwann nicht wahr ist, sonst wird es nur in einer Endlosschleife schleifen und manchmal Ihren Code abstürzen. Wie es hier heißt, wenn Sie vergessen, den Wert der Variablen zu erhöhen , die in der Bedingung verwendet wird, wird die Schleife nie enden und es wird Ihren Browser abstürzen. In der for-Schleife Beispiel setzen Sie hier immer eine Bedingung ein, um es länger zu machen, so dass Sie normalerweise dieses Problem nicht haben, aber weil es einfacher ist und nur eine einzige Bedingung verwendet, haben Sie die Chance, dass, wenn Sie Ihre Nummer nicht iterieren oder diese Bedingung ändern, könnte es in eine Endlosschleife gehen. Dies ist im Wesentlichen eine ähnliche Sache wie die for-Schleife, sie ist nur ein wenig anders strukturiert. Anstatt es als tatsächlichen Parameter in der Anweisung zu iterieren, setzen wir es stattdessen in den Codeblock. Es gibt auch die do while-Schleife, die eigentlich ziemlich ähnlich ist. Der Unterschied zwischen while und do while ist, wird der Codeblock einmal ausgeführt, bevor überprüft wird, ob die Bedingung wahr ist. Dann wird es wiederholt, solange die Bedingung wahr ist. Do wird immer tun, aber es wird nicht fortgesetzt, es sei denn, diese Bedingung ist wahr. Ich finde mich nicht sehr oft mit do while, also würde ich mich nicht zu sehr darum kümmern. Hier können Sie einen Side-by-Side-Vergleich von für und während sehen und das ist darüber. Das war wahrscheinlich eine kurze kleine Lektion über Schleifen, weil wir bereits ein bisschen darüber in der Array-Lektion behandelt haben. Aber Schleifen erlauben uns, etwas immer und immer wieder zu wiederholen und es dynamischer zu machen. Wie Sie hier sehen können, perfektes Beispiel. Anstatt zu schreiben, dass wir für jeden Index zwei Autos hinzufügen wollten, können wir stattdessen eine Schleife schreiben. Auch das ermöglicht es uns, die Länge des Arrays zu überprüfen und dies für so viele Elemente im Array zu tun , wie es gibt. Das deckt allgemeines JavaScript ab. Im nächsten Video werden wir direkt darauf eingehen, wie JavaScript mit dem DOM funktioniert. Wir haben es bereits ein wenig gesehen, aber hier steckt JavaScript in Ihre bestehende Webseite und tut, was es bekannt ist, interaktive Webseiten zu erstellen. Wir sehen uns im nächsten Video. 16. JS HTML DOM Einführung: Okay, Leute, ich hoffe, ihr seid aufgeregt, denn im nächsten Abschnitt werden wir uns darum kümmern, wie JavaScript mit HTML interagiert und interaktive Webseiten erstellt. Lassen Sie uns nach unten zu diesem Menü hier für JavaScript HTML DOM scrollen, und lassen Sie uns das Intro hier klicken. Wenn Sie mit dem Modell des Dokumentobjekts nicht vertraut sind, und es wird erstellt der Browser bei jedem Laden einer Webseite ein Dokumentobjektmodell der Seite als Baumstruktur von Objekten erstellt, im Grunde die HTML-Struktur. Wenn wir in „Entwickler-Tools“ gehen und in „Elemente“ gehen, all diese HTML, all diese Elemente und wie sie alle strukturiert sind , wird das Dokumentobjektmodell. Wie Sie sehen können, wenn ich über verschiedene Elemente schwebe, hebt es dieses Element hervor und dann kann ich einklicken und weiter den Baum hinunter gehen. Eine einfachere Möglichkeit, dies zu sehen, habe ich online ein großartiges Beispiel gefunden. Wenn Sie diese Adresse nur in Ihren Browser kopieren möchten, können Sie sonst einfach einen Blick auf meinen Bildschirm werfen. Im Grunde ist dies eine vereinfachte Version von dem, was wir zuvor mit all den verschiedenen Details in diesen verschiedenen Elementen gesehen haben . Hier können Sie sehen, dass wir beginnen mit, an der Spitze des Dokumentobjektmodells ist der Körper, und dann haben wir alles, was wir eingerichtet haben. Dies wird je nach Seite, die Sie haben, unterschiedlich sein. Aber das Tolle an diesem Beispiel ist, wenn ich darauf klicke, wird es den entsprechenden Teil der Seite hervorheben. Ich weiß nicht, was div5 und div6 sind, aber nichts taucht auf. Wenn ich auf den Körper klicke, dauert es den ganzen Körper der Seite. Wenn ich tiefer in div gehe, können Sie sehen, dass es ein Sub-div dieses div hervorhebt. Dann können Sie die verschiedenen Elemente direkt in diesem sehen. Wie Sie sehen können, gibt es hier einen Baum, so dass wir die ganze Linie hinunter verschachteln können. Wir können ganz am Ende den ersten Header und den zweiten Header für Tabellen haben. Wenn ich diese durchklicke, können Sie sie auf der Seite hier hervorgehoben sehen. Wenn wir ganz oben anfangen, haben wir die Leiche und dann haben wir dieses div. Dann gehen wir in dieses kleinere div, dann gehen wir in dieses div für andere Informationen und wir können in den Listencontainer gehen, den Absatz oben betrachten und dann die tatsächliche Liste, schauen Sie sich die einzelnen Listenelemente an und dann , die den Baum beendet. Oder wir können von hier wieder anfangen und in dieses Kind dieses Elements gehen und dann in ein anderes Kind davon gehen, das eine Tabelle tbody ist. Dann können wir uns die einzelnen Zeilen anschauen, und dann innerhalb dieser Zeilen können wir die Tabellenzellen sehen. Hoffentlich macht diese visuelle Darstellung es für Sie ein wenig einfacher. Aber im Grunde HTML, das wir auf der Seite einrichten, wenn wir auf diese bestimmte Seite schauen, erstellt dies ein Dokumentobjektmodell. Nun ist dies eine wirklich konzeptionelle Sache, aber im Wesentlichen ermöglicht uns das Dokumentobjektmodell, durch ein HTML-Dokument zu navigieren, indem es sich durch diesen Baum von Objekten bewegt. Vielleicht ist dieses Beispiel zu komplex, aber wenn ich eine einfache Webseite aufrufe und hier auf diesen Link klicke. Dies ist eine einfache Webseite, die ich buchstäblich gerade gefunden habe. Wenn wir in unsere Entwickler-Tools für diesen Klick gehen „Inspect“, können wir hier ein einfacheres Beispiel sehen. Sie können hier sehen, wir können die verschiedenen Teile unseres Dokumentobjektmodells hier ausblenden und erweitern. Das Tolle an der Verwendung des Elementabschnitts Ihrer Entwicklertools ist, dass Sie auch die HTML-Tags und alle darin enthaltenen Informationen sehen können. Wir können hier sehen, wir haben Körper und wenn wir das erweitern und wir in diese Tabelle gehen, ist dies nicht das beste Beispiel, weil diese Website als nur eine Tabelle eingerichtet ist, die nicht die moderne Art, es zu tun, aber gut, wir können hier sehen, dass alle diese Verschachtelung geht in einer baumartigen Struktur. Wenn wir den Mauszeiger über diese verschiedenen Elemente bewegen, können wir sehen, dass das Äquivalent auf der Webseite angezeigt wird. Vielleicht ist es eine schwierige Sache zu konzeptualisieren, aber im Grunde, wenn wir diese Baumstruktur haben, erlaubt es uns zu sagen, naja, zum Beispiel möchte ich, dass das erste div, das ein Kind dieser td ist, ein Attribut von etwas hat. Oder ich möchte dem ersten Kind dieser td eine On-Click-Methode hinzufügen, die das erste Kind davon ist. Es ermöglicht Ihnen, Selektoren zu schreiben, die den ganzen Weg über den Baum und den Baum hinunter arbeiten. Sie werden dies ein bisschen mehr sehen, wenn wir anfangen, Selektoren zu verwenden. Aber wenn Sie mehr über das Dokumentobjektmodell und die dahinter liegende Theorie erfahren möchten, sollten Sie es hier lesen, aber es ist wichtig, es nur einzuführen. Jedes Mal, wenn ich über das Dokumentobjektmodell spreche, das ist es, worüber ich spreche. Es ist die Webseite, die als Baum von Objekten dargestellt wird, die uns hilft, unsere HTML-Seite zu konzeptualisieren und auch auf Elemente innerhalb dieser Seite zu zielen. Das ist die Einführung in HTML DOM. Wieder, wenn Sie mehr darüber lesen möchten, hier ist die Seite. Im nächsten Video werden wir alles über das Targeting mit HTML DOM lernen. Wir sehen uns im nächsten Video. 17. DOM Navigation: Im letzten Video haben wir das Document Object Model vorgestellt und Sie fragen sich vielleicht, na ja, das ist alles in der Theorie großartig, aber was macht es eigentlich und warum ist das Document Object Model wichtig? Das ist eine gute Frage und eine Frage, die wir hoffentlich in dieser Lektion beantworten werden , wenn wir diskutieren, wie tatsächlich HTML-Elemente ausgerichtet werden und verschiedene Dinge auf der Seite basierend auf dem Dokumentobjektmodell ändern . Wenn ich hier DOM-Elemente Menüpunkt gehe, können wir HTML-Elemente nach ID, Tag-Name, Klassenname, CSS-Selektoren und Objektsammlungen finden Tag-Name, Klassenname, . Wenn Sie sich in der letzten Klasse auf HTML und CSS erinnern, können wir HTML-Elemente mit einer Vielzahl von Mitteln und einige davon, die Sie vorher gesehen haben. So können wir definitiv Elemente durch Klasse und ID und den Typ des Elements, das sie sind, anvisieren , genau wie wir es mit CSS tun können. Hier können wir ein Beispiel sehen, das wir zu Beginn unserer Klasse entdeckt haben wir das Dokument nehmen, denken Sie daran, dass es oben im Baum ist. Dann setzen wir einen Punkt ein, um eine Methode darauf zu setzen , und wir finden ein Element mit der ID des Intro. Nur um das wieder zu demonstrieren, ist dieser Absatz hier ein Intro und wir wollen dieses bestimmte Element mit seiner ID anvisieren. Es gibt also nichts Neues. Wenn wir hier nach unten gehen, können wir auch Elemente durch ihren Tag-Namen anvisieren. Genau wie wenn wir einen Level-Selektor eines Elements in CSS gemacht haben, können wir eine ähnliche Sache in JavaScript tun, um alle Elemente mit einem Tag-Namen von P anzusprechen . Die Methode, die wir dafür verwenden, ist getElementsByClassName. Diese funktionieren alle auf ähnliche Weise. Ich verbringe keine Tonne Zeit mit ihnen. Hier ist ein Weg, mit dem wir verschiedene Selektoren wie in CSS zusammenfassen und in JavaScript einfügen können. Mit dem Abfrage-Selektor all können wir alle Ps mit der Klasse der Intro finden. Anscheinend sollten Sie bereits ein Verständnis von CSS- und CSS-Selektoren haben , bevor Sie diese Klasse nehmen, werde ich nicht tief in das eintauchen, was hier vor sich geht. Wenn Sie darüber sind, gehen Sie auf jeden Fall zurück und sehen Sie sich die Grundlagen der Webentwicklung, HTML und CSS an. Dies sind verschiedene Möglichkeiten, mit denen Sie HTML-Elemente abzielen können. Wenn ich in das nächste Menü gehe, nehmen wir das, was wir ausgewählt haben, und ändern den Inhalt. Eine gängige Art, dies zu tun, ist mit dot innerHTML. Das ändert also eine Eigenschaft dieses bestimmte Element, das wir nach ID ausgerichtet haben, und gibt ihm einen neuen Wert. Also haben wir das schon mal gesehen. Das ist nur die Erweiterung, zuerst ein Element auszuwählen und ihm dann einen neuen Wert zuzuweisen. Wenn ich nach unten scrolle, können wir nicht nur in einem HTML ändern. Wir können ein Attribut wie den SRC eines Bildes ändern. Wir können im Grunde ändern, welches Bild auf einem bestimmten Bild-Tag angezeigt wird. Das ist es im Grunde für diese Lektion. Wenn ich dann in CSS gehe, können wir auch Stile mit JavaScript ändern. Wir können die Farbe der Dinge ändern. Wir können die Schriftgröße ändern, all das Zeug. Dies würde natürlich häufig mit Ereignissen verwendet werden. Wenn wir auf eine Schaltfläche klicken, möchten wir, dass etwas rot wird. Werfen wir einen Blick auf das Beispiel. Wenn ich auf die Schaltfläche klicke, wird die Überschrift rot. Wir zielen dieses Element anhand seiner ID ab und greifen es Stil an. Dann im Stil, greifen Sie seine Farbe und ändern Sie sie in rot. Also, das sollte jetzt ziemlich einfach sein, wenn Ihr Verständnis von JavaScript. Gehen wir ein wenig tiefer und schauen uns die Navigation an. All diese verschiedenen Elemente können hier als Knoten im Dokumentobjektmodell betrachtet werden. Das gesamte Dokument ist also ein Dokumentknoten. Jedes HTML-Element ist ein Elementknoten. Der Text innerhalb von HTML-Elementen sind Textknoten. Jedes HTML-Attribut ist ein Attributknoten. Eigentlich ist das jetzt veraltet. Ignoriere das einfach. Kommentare sind Kommentarknoten. Grundsätzlich gibt es all diese Knoten, und sie sind alle miteinander verknüpft und wir können das Dokumentobjektmodell und die Beziehung zwischen diesen Knoten verwenden das Dokumentobjektmodell und die Beziehung zwischen , um verschiedene Dinge anzusprechen und sie neu anzuordnen. Nur eine Warnung, wir werden wieder ein wenig theoretisch gehen und ein wenig über Knotenbeziehungen abdecken. Wenn wir diese grundlegende HTML betrachten, M eins, zwei visualisieren die Beziehung zwischen all diesen Elementen, die Knoten im Dokumentobjektmodell sind. Wir können uns hier ansehen. Wir haben das Wurzelelement, das oben steht, das unser HTML-Tag ist. Dann haben wir den Kopf, das ist das erste Kind. Es ist also das erste Element, das ein Unterelement davon ist. Dann ist Körper das zweite Kind. Es ist auch das letzte Kind. Wir können es als erstes Kind am Kopf anvisieren. Wir können den Körper auch als letztes Kind anvisieren, denn es ist das letzte Kind, das offensichtlich ist. Umgekehrt ist die Beziehung von HTML zu diesem ersten untergeordneten Knoten von Kopf ein übergeordneter Knoten, und dann ist die Beziehung zwischen Kopf und Körper ein Geschwister. Es ist wie eine Familienstruktur. Wenn du diese beiden gebären hast, dann sind das Kinder und wie du wissen solltest, wenn du zwei Kinder mit den gleichen Eltern hast, dann sind sie Geschwister. Aus dem obigen HTML können Sie lesen, dass HTML der Stammknoten ist, weil er sich oben befindet. Es hat keine Eltern, aber Kopf und Körper haben ein Elternteil von HTML. Head ist das erste Kind von HTML und body ist das letzte Kind von HTML. Jetzt können Sie sehen, dass wir einen weiteren Schritt tiefer gehen können, und hier beginnen wir komplexe Bäume innerhalb des Dokumentobjektmodells zu bilden. Wir können sehen, dass der Kopf auch ein Kind hat, nur das eine Kind, und wir können sehen, dass es zwei Kinder hat. Warum ist das so wichtig? Nun, es ist wichtig, um zwischen Knoten zu navigieren. Werfen wir einen Blick auf ein Beispiel hier. Wir haben das Beispiel gemacht, in dem wir den inneren HTML eines Elements geändert haben, es durch seine ID abzielen. Aber was wäre, wenn wir ein Element anhand seiner ID anvisieren wollten, sein erstes Kind finden und dann seinen Wert ändern wollten. Nun, Sie können durch den Baum treten, indem Sie eine Eigenschaft wie das erste Kind verwenden. Sie können auch das erste untergeordnete Element anvisieren, indem Sie explizit den Index angeben, den Sie anvisieren möchten. Das erlaubt es Ihnen, das zweite Kind anzusprechen, indem Sie hier ein einziges setzen. Der dritte Job, indem er eine Zwei hier. Denken Sie daran, Arrays Indizes beginnen bei Null. Sie müssen immer einen in Ihrem Kopf subtrahieren, nur um ihn zurück zu bringen, was Sie denken würden, ist der erste Index. Nach diesem Beispiel können wir hier sehen, dass wir nicht nur den inneren HTML eines Elements mit der ID dieses greifen und ihm einen Wert zuweisen können. Aber wir können auch einen Wert zuweisen, der auf einem anderen Wert innerhalb unseres DOM basiert. Also kopieren wir im Grunde den inneren HTML-Code des Elements mit der ID 01, die hier in dieses ist. Es sollte ziemlich offensichtlich sein, was hier vor sich geht. Aber Sie können hier sehen, dass wir den inneren HTML-Code des H1 in dieses P-Tag kopiert haben. Zurück zur Seite, können wir hier sehen, wie wir durch das Document Object Model Schritt. Wenn wir dies ausprobieren, können wir sehen, dass wir das gleiche Ergebnis mit dem Schlüsselwort des Knotenwerts erhalten. Knotenwert ist nicht etwas, das ich oft verwende, und wir werden über eine intuitivere Möglichkeit sprechen, Elemente mit jQuery zu adressieren. Also lassen Sie sich hier nicht allzu mit diesen Schlüsselwörtern verfangen. Aber die Sache, die ich möchte, dass Sie hier verstehen, ist, dass wir in der Lage sind , nicht nur, indem beispielsweise dieses Beispiel bereitstellen, indem wir eine ID bereitstellen und dort darauf abzielen. Aber auch wir sind in der Lage, Elemente oder Knoten in Bezug auf ein bestimmtes Element oder Knoten zu zielen . Auch hier werde ich das nicht in einem späteren Video demonstrieren, also mach dir nicht allzu besorgt. Eines der Dinge, die Sie oft immer und immer wieder sehen, ist Dokument. Wir starten jeden Selektor mit Dokument, weil es der Stammknoten ist. Also fangen wir an an der Wurzel. Wenn wir nur Dokumente eingeben. Wenn ich in die Konsole gehe und ein Dokument eingippe, gibt es nur ein Dokument auf der HTML-Seite und es ist das ganze Dokument. Sie müssen also nicht angeben , wo sich dieses Dokument befindet, weil es die Wurzel ist, wenn das Sinn ergibt. Die Konvention, die Sie verwenden würden, ist das Dokument, das das Wurzelelement und dann ein Unterelement davon ist. Also im Wesentlichen ein untergeordneter Knoten. Es wird jetzt ein bisschen komplex und ich wiederhole mich oft. Aber im Wesentlichen möchte ich, dass Sie in diesem Video verstehen ist, wie wir verschiedene Elemente innerhalb des Baumes ansprechen können. Es muss nicht getElementById sein und wir können nur auf dieses Element zielen, aber wir können Elemente, die das umgeben, anvisieren. Wir können einen Elternteil davon ins Visier nehmen. Wir können eine beliebige Anzahl von untergeordneten Elementen dieses Elements anvisieren. So können wir ein Dokumentobjektmodell nach oben und unten bewegen. Wir werden mehr darüber in den jQuery-Lektionen mit dem, was Vanilla JavaScript genannt wird, eintauchen , was wir jetzt verwenden. Wir verwenden JavaScript ohne Framework. Wir können dies viel einfacher machen, indem wir jQuery verwenden. Lassen Sie sich nicht zu verfangen. Ich wollte euch nur die Idee von DOM Navigation vorstellen und euch wissen lassen, dass wir Elemente in jeder Beziehung auf etwas zielen können , das wir mit ID oder Klasse oder was auch immer anvisieren. Hoffentlich, wenn wir zur Auswahl mit jQuery kommen, habt ihr ein ziemlich fundiertes Wissen darüber, was vor sich geht und wir können im Grunde einfach damit laufen und ihr werdet wissen, was ihr tut. Das spricht ein wenig über die Navigation und die Suche, wie wir das Ziel erreichen können. Wenn wir zurück zu hier, wie wir verschiedene Elemente oder verschiedene Knoten durch ihren Tag-Namen, ID, Klassennamen zielen können . Im nächsten Video gehen wir in Ereignis-Listener. Denken Sie daran, dass wir Ereignisse früher in einer Lektion gemacht haben, als wir über allgemeines JavaScript sprachen. Aber im nächsten werden wir lernen, wie man einen Ereignis-Listener in unserem JavaScript-Code einrichtet. Ich werde Sie im nächsten Video sehen. 18. DOM Event Listeners: Wenn Sie sich hier in der Lektion zu JavaScript-Ereignissen erinnern, haben wir beschrieben, wie Sie einen Ereignis-Listener direkt auf ein Element setzen können, indem Sie ein Attribut verwenden. Aber es gibt tatsächlich eine schönere Art, dies zu tun, und das werden wir in diesem Video lernen. Gehen wir zuerst zu „DOM Events“. Wie Sie hier sehen können, sind einige Beispiele von Ereignissen, mit der Maus über Ereignis und das Click-Ereignis. Wie Sie sehen können, passiert beim Mauszeiger etwas, als ich darauf klickte, eine ganze Reihe von Dingen passierte. Wir sahen, bevor wir ein Ereignisattribut hinzufügen konnten, aber eine andere Möglichkeit, dies zu tun , ist die Zuweisung von Ereignissen mit dem HTML-DOM. Das HTML-DOM ermöglicht es uns, HTML Elemente mit JavaScript zuzuweisen und dies ist etwas, das wir in einem separaten Abschnitt unseres Dokuments setzen können. Es muss nicht in der Schlange gehen. Grundsätzlich können wir das Element anvisieren, wie wir normalerweise durch ID oder durch einen bestimmten Knoten würden , und dann können wir die auf Klick setzen, um eine bestimmte Sache zu tun. Es ist im Grunde nur das gleiche Schlüsselwort wie wir verwenden, wenn wir ein Attribut verwenden, aber wir setzen es auf die Kette hier, um das Element auszuwählen und dann das Ereignis auf den On Click-Ereignis-Listener zu setzen. Es gibt auch beim Laden und beim Wechseln. Ich möchte nicht unbedingt über all die verschiedenen Ereignisse gehen, die Sie tun können. Sie können sie auf jeden Fall durch diese Beispiele nachschlagen und mehr über die spezifischen erfahren. Was ich abdecken möchte, ist, wie man diese Ereignis-Listener mit dem DOM einrichtet. Wir haben das Beispiel hier oben gesehen, aber es gibt einen anderen Weg, es zu tun, und wenn wir in DOM-Ereignis-Listener gehen, können wir die Add-Ereignis-Listener-Methode sehen. Wir können einen Ereignis-Listener auf Klick hinzufügen, und wenn Klick ausgelöst wird, wird es diese Funktion tun. Ich probiere das aus. Wir haben eine Funktion namens Anzeigedatum, und jetzt fügen wir ein, was ein Ereignis-Listener genannt wird, ein bestimmtes Ereignis zuhört. Wir definieren, welches Ereignis das ist, und wir definieren die Funktion, die wir passieren wollen, wenn dieses Ereignis passiert. Wenn wir es versucht haben, indem wir auf die Schaltfläche klicken, können wir sehen, dass der Ereignis-Listener, den wir bei Klick an unsere Schaltfläche anhängen , tut, was wir tun wollten, indem wir diese Funktion tun. Das ist nichts Neues, das wir Ereignisse in der früheren Lektion behandelt haben, aber diese ganze Add-Ereignis-Listener-Methode ist vielleicht ein neues Konzept. Wenn wir hier runter gehen, können wir die Syntax sehen. Wir können einfach auf einem bestimmten Element sagen, einen Ereignis-Listener einrichten, um zu hören, auf ich klicke und führe den Codeblock hier aus. Die andere Sache, die Sie beachten sollten, ist, dass Sie viele Ereignishandler zu demselben Element hinzufügen können . Wir haben hier zweimal Ereignis-Listener hinzufügen, und wir sind in der Lage, einen Ereignis-Listener an das gleiche Element anzuhängen, aber mit verschiedenen Funktionen. Es gibt viel mehr Dinge, die Sie hier tun können, einschließlich dem Entfernen des Ereignis-Listener, so dass Sie die gleichen Argumente oder Parameter wie zuvor verwenden können , aber dieses Mal verwenden Sie einfach die Methode remove event listener und so können Sie entfernen Sie den Ereignis-Listener, den Sie hinzugefügt haben. Es gibt mehr Dinge, die Sie mit Ereignis-Listener tun können , aber im Wesentlichen wollte ich in diesem Video darauf hinweisen, wie man einen Ereignis-Listener hinzufügt, nicht unbedingt in der Reihe, wie wir es zuvor gesehen haben, aber in einem JavaScript auf eine andere Seite oder sogar am unteren Rand der Seite. Ich habe bereits erwähnt, dass j-Abfrage es uns ermöglicht , Ereignis-Listener auf eine intuitivere Art und Weise zu setzen. Es ist also nicht zu viel wichtig, sich darüber zu informieren. Wir werden wieder in Ereignis-Listener kommen, sobald wir in JavaScript geraten. Ich wollte es nur noch einen Schritt weiter gehen und euch zeigen, wie wir Ereignis-Listener an Objekte anhängen können , nachdem sie über das Dokumentobjektmodell ausgerichtet wurden. 19. Einführung in Ajax: An diesem Punkt habe ich das Gefühl, dass wir alle wesentlichen Kenntnisse in Bezug allgemeine JavaScript und wie JavaScript sich auf das DOM bezieht, um auf jQuery weiterzugehen, die hier oben ist, jQuery ist eine JavaScript-Bibliothek, die wir in nur einer Sekunde abdecken werden. Aber bevor wir das tun, denke ich, dass es hier ein fortgeschrittenes Level-Thema gibt, das wir zumindest vorstellen müssen, und das ist AJAX. Wenn Sie hier auf „AJAX Intro“ klicken, AJAX ist ein Entwickler Traum, nach W3Schools, weil es Daten von einem Webserver lesen kann , nachdem die Seite geladen ist, aktualisieren Sie eine Webseite, ohne die Seite neu zu laden, und im Hintergrund Daten an einen Webserver senden. Grundsätzlich ermöglicht AJAX uns, mit Daten auf einer bereits geladenen Seite zu arbeiten , ohne die Seite neu laden zu müssen. In dieser kurzen Lektion wollte ich euch nur die Idee von AJAX vorstellen , denn jederzeit, wenn Sie mit Daten interagieren möchten, mit JavaScript, ist AJAX wirklich wichtig. Aber in Bezug auf die tatsächliche Code-Implementierung hilft uns jQuery, das viel mehr zu rationalisieren. Im nächsten Video, wenn wir in jQuery und die restlichen Videos kommen, werden wir lernen, wie man tatsächlich einen AJAX-Aufruf mit jQuery macht. Aber im Moment möchte ich nur nach Hause ziehen, was AJAX ist und wofür Sie es verwenden können. Wenn ich hier auf „Inhalt ändern“ klicke, sehen Sie, dass der Inhalt der Seite geändert wurde. Aber woher kam das? Eigentlich, wenn wir auf „Probieren Sie es selbst“ klicken, werden wir hier sehen, und das sieht wie ein Chaos aus. Deshalb sage ich dir, dass du warten sollst, bis wir zu jQuery kommen weil das nur ein bisschen zu chaotisch für meinen Geschmack ist, jQuery, ich fühle, dass es viel einfacher macht. Aber im Wesentlichen möchte ich hier hinüberkommen , ist, wenn Sie auf „Inhalt ändern“ klicken, Sie sehen keinen dieser Inhalte im eigentlichen Code oder auf der Seite. Was passiert ist, ist, dass Sie es aus einer anderen Datei laden, und diese Datei ist hier. Es ist ajax_info.txt. Alle diese Informationen werden dort gespeichert. Was Sie mit AJAX tun können, ist, ob es sich um Daten handelt, ob es sich um Inhalte von einer anderen Seite handelt, Sie können eine Anfrage öffnen und andere Inhalte einholen , die sich nicht auf dieser aktuellen Seite befinden und sie einbinden, ohne neu laden zu müssen auf der Seite. Immer wenn Sie sich auf einer Webseite befinden und Daten übermitteln oder neue Daten und die Webseite nicht neu laden muss, verwenden Sie AJAX, da Sie Daten über JavaScript laden und Daten übermitteln können. Zurück zu hier, können wir eine Funktion sehen, die hier LoadDoc genannt wird. Hier ist die LoadDoc Funktion. Dies ist nicht etwas, das ich zu sehr eingeholt werden würde, da wir es in jQuery abdecken werden. Aber im Wesentlichen können wir einen Ereignis-Listener festlegen, um diesen AJAX-Aufruf auszuführen, wenn offensichtlich auf die Schaltfläche geklickt wird. Wenn wir nach unten scrollen, können wir mehr über die Theorie von AJAX lernen. Es handelt sich um asynchrone JavaScript und XML. Es ist keine Programmiersprache. Es verwendet nur eine Kombination aus diesem XMLHttpRequest-Objekt und dem HTML-DOM und JavaScript, um die Daten anzuzeigen oder zu verwenden. Im Grunde ist es ein bisschen technisch, und Sie müssen nicht alle inneren Funktionen davon kennen. Aber normalerweise, wenn Sie auf einer Website sind, und Sie auf etwas Neues klicken, sagen wir zum Beispiel, wenn wir hier einen neuen Menüpunkt klicken, werde ich einfach darauf klicken, sehen, wie die gesamte Webseite neu geladen wird. Nun, in dem Beispiel, das wir zuvor gezeigt haben, als wir den Inhalt geändert haben, brachte er Inhalt von einer anderen Seite oder aus einer anderen Datei, ohne dass wir die Seite neu laden müssen. Das ist im Wesentlichen das, was AJAX tut. Wie ich bereits erwähnt habe, können wir auch tun, wenn wir einige Daten einreichen anstatt neue Daten auf der Seite erscheinen zu lassen, ohne die Seite neu zu laden oder eine neue Seite zu laden. Sie zum Diagramm zurückkehren, passiert dies im Hintergrund, wenn Sie einen AJAX-Aufruf ausführen. Ein Ereignis tritt ein, es erstellt ein XMLHttpRequest-Objekt und sendet es über das Internet an den Server, und der Server erstellt eine Antwort, sendet sie zurück und dies geschieht alles, ohne dass Sie die Seite neu laden müssen. Ehrlich gesagt, müssen Sie das innere Funktionieren noch nicht kennen. Aber im Wesentlichen wollte ich Ihnen AJAX vorstellen, bevor wir in jQuery kommen , weil die meisten Websites heutzutage Daten verwenden und ein Backend verwenden. Manchmal ist es nicht am besten für die Benutzererfahrung, jedes Mal eine ganz neue Seite neu zu laden, wenn Sie etwas tun möchten. AJAX ist etwas, das ich häufig benutze, und Sie werden sich wahrscheinlich auch mit finden. Aber wieder werden wir behandeln, wie eine AJAX-Abfrage oder AJAX-Aufruf im jQuery-Abschnitt ausgeführt wird. Ohne weitere Umschweife springen wir in der nächsten Lektion in jQuery. All das, was Sie hier gelernt haben, alle Schlüsselwörter, wir werden das jetzt mit einem wirklich coolen JavaScript-Framework viel einfacher machen. Wir sehen uns im nächsten Video. 20. Einführung in jQuery: Willkommen zurück, Jungs. In diesem Video befassen wir uns mit einer Einführung in jQuery. Wenn all diese verschiedenen Befehle, die wir früher gelernt haben, lang und ärgerlich schien, wo sind sie? Wenn all dies ein bisschen lang und ärgerlich erscheinen, Sie Glück, denn in jQuery werden wir eine viel einfachere Art lernen, einige der Dinge zu tun , die wir in dem namens Vanilla JavaScript gelernt haben, das ist JavaScript ohne Framework oder Bibliothek. Um die Grundlagen abzudecken, ist jQuery eine JavaScript-Bibliothek. Es ist im Grunde nur eine Reihe von Code, die wir in unser Projekt bringen, und dann sind wir in der Lage, diese jQuery-Methoden zu verwenden. Es vereinfacht die JavaScript-Programmierung erheblich und es ist leicht zu erlernen. Hier ist ein klassisches Beispiel für jQuery. Grundsätzlich wählen Sie etwas aus und das das Objekt greift und Sie können eine Methode ausführen oder Sie können ein Attribut darin finden. Hier sehen Sie, dass wir in der Lage sind, das Dokument als Ganzes anzusprechen. Aber dann auch hier werden Sie als String sehen, die wir p haben und was dies tut, ist es auf alle p -Tags abzielt. Nun, was an jQuery großartig ist, ist, dass es genau die gleiche Weise wie CSS abzielt. Wenn wir hier einen Nachfolgeselektor einfügen wollten, könnten wir, wenn Sie sich von CSS erinnern. Versuchen wir es jetzt. Wir haben nur drei Absätze. Aber sagen wir zum Beispiel, wenn wir innerhalb dieses Absatzes eine Spanne nach vorne hätten, könnten wir einen abhängigen Selektor verwenden, um nur die Spanne zu zielen. Wenn wir wegklicken, verschwindet es. Während, wenn wir die Spannweite entfernen und zurück zu nur p gehen, können Sie die ganze Sache wegklicken. Der Grund, warum es das Ganze ist, ist, weil wir das Schlüsselwort „this“ verwenden. Tut mir leid, ich bin ein bisschen vorgesprungen. In Bezug auf Selektoren ist jQuery wirklich gut, weil Sie eine beliebige Anzahl von Möglichkeiten auswählen können , genau wie Sie CSS verwenden würden. Aber schauen wir uns mal an, was hier vor sich geht. Zuallererst wählen wir das „Dokument“ über diesen jQuery-Selektor aus und verwenden diese Methode namens ready. Sie werden dies ziemlich oft in jQuery sehen. Wir führen den Code nur aus, wenn das Dokument fertig ist. Hier fügen wir eine Funktion hinzu und dann innerhalb dieser geschweiften Klammer ist das, was wir ausführen werden. Stellen Sie sicher, weil hier eine öffnende Klammer vorhanden ist, dass Sie sie auch schließen. Und dann beenden Sie die Anweisung wie in JavaScript mit einem Semikolon. Sie werden dies sehr oft in jQuery sehen. Sie können es auch dort sehen. Wir haben gewartet, bis die Seite oder das Dokument fertig ist , und dann setzen wir einen Ereignis-Listener ein. Dies ist, wie ich sagte, in jQuery, es gibt eine jQuery-Art, es im Ereignis-Listener zu tun, und das ist es. Wir können einfach „.click“ setzen und dann eine Funktion hinzufügen, und wir können auch das Schlüsselwort „this“ verwenden, um zu zielen, was auch immer die Sache, die wir ausgewählt haben, ist. Wenn wir „p“, „on click“, „this“ .hide“, das ist, was wir wählen, so das p-Tag zu verstecken, und erinnern Sie sich, bevor wir Spanne hatten und wir setzen eine Spanne um die „weg“ und wir klicken auf „Ausführen“. Nun, das wird sich nicht verstecken, es wird nur die Spanne beeinflussen, die ein Nachkomme von p ist . Es muss nicht unbedingt das erste Kind sein. Es könnte ein Enkelkind sein oder weiter unten in der Kette. In diesem Beispiel weiß ich, dass wir eine Menge neuer Sachen auf Sie geworfen haben, aber im Wesentlichen was wir in jQuery haben ist ein Selektor und dann eine Methode und mit dem Selektor ist es super mächtig, weil anstatt ein Dokument zu schreiben . getElementsByTagName und dann 'p' gehen , so können wir stattdessen einfach $ ('p') tun, und das wird nicht funktionieren, es sei denn, jQuery ist auf der Seite. Das ist es tatsächlich, und so können wir tatsächlich dasselbe Ziel haben. Es kommt als eine andere Ausgabe, weil dies uns eine HTMLCollection schnappen wird. Dies packt uns standardmäßig den eigentlichen HTML. Aber im Wesentlichen können Sie sehen, dass dies viel länger ist als das. So vereinfacht jQuery die JavaScript-Programmierung für uns und macht es ein bisschen einfacher zu lernen. Eigentlich, um diese Einführung in jQuery abzuschließen , weil dies ein ziemlich schweres Beispiel war, möchte ich über die jQuery-Website gehen. Wenn Sie nur solche jQuery in Google, können Sie einige Beispiele dafür sehen, was jQuery wirklich gut macht. Die wichtigsten Dinge, die jQuery für uns optimiert, sind DOM Traversal und Manipulation. Wir können wählen, wie wir es in CSS, um eine Schaltfläche mit der Klausel fortfahren zu wählen, und wir können seine HTML in eine bestimmte Zeichenfolge von Text ändern. Das wirst du bald sehen. Wir können seine eigenen Ereignis-Listener verwenden, und wir können Ajax auf eine viel schönere Art und Weise machen. Wenn Sie sich erinnern, was wir früher mit dem Ajax-Anruf gesehen haben, war es viel messierer als der Ajax-Anruf hier. Dies sind drei der Hauptmerkmale von jQuery. Sie werden nicht vollständig verstehen, wie viel einfacher es ist, jQuery zu verwenden, bis Sie es tatsächlich verwenden. Aber jetzt, da wir jQuery für Sie eingeführt haben, ist es Zeit, einige der Funktionen von jQuery kennenzulernen und Sie schließlich dazu bringen, einige Ihrer eigenen Funktionen zu erledigen. Ich werde Sie im nächsten Video sehen. 21. JQuery Effects und Events: Willkommen zurück Jungs. In diesem Video werden wir mit jQuery arbeiten, um Effekte zu erzeugen, und wir werden über Ereignisse sprechen. Wie ich bereits erwähnt habe, als wir zuerst Ereignisse behandelt haben und dann Ereignis-Listener in Bezug auf das DOM behandelt haben, sagte ich, dass wir irgendwann zu jQuery springen und lernen würden , wie man dort Ereignis-Listener einrichtet. Sie wissen bereits, welche Ereignisse sind und Sie bereits im Ereignis-Listener gesehen haben, aber mit jQuery können wir einfach einen Ereignis-Listener durch diese Syntax definieren. Im Wesentlichen legen Sie nur die Methode Click auf das Element oder die Gruppe von Elementen ein, die der Ereignis-Listener weitergehen soll , und fügen Sie dann eine Funktion als erste Eigenschaft dieses Ereignisses ein. Jetzt, genau hier sehen Sie eine sehr häufig verwendete jQuery-Ereignismethode, und das ist die dokumentbereite Methode. Dies ermöglicht es uns, eine Funktion auszuführen, wenn das Dokument vollständig geladen ist. Wenn wir zur Erklärung im jQuery-Syntaxabschnitt gehen , den wir tatsächlich nicht übergegangen sind, aber Sie können zurückkommen und sich darauf beziehen. Sie werden feststellen, dass viele der Beispiele, die Sie online sehen werden und alle Beispiele, die Sie auf dieser Website sehen, mit document.ready beginnen. Dies ist gut, um zu verhindern, dass jeder jQuery-Code ausgeführt wird, bevor das Dokument geladen wird. Es ist nur empfehlenswert, zu warten, bis das Dokument geladen wurde, und dann Ihren Code auszuführen. Einige Beispiele für Aktionen, die fehlschlagen würden wenn versucht wird, auszuführen, bevor das Dokument vollständig geladen ist, versucht wird, ein Element auszublenden, das noch nicht erstellt wurde, oder versuchen, die Größe eines Images zu erhalten, das noch nicht geladen ist , irgendetwas mit einem Element, das noch nicht geladen wurde, verursacht Probleme, also sollten Sie document.ready verwenden und dann eine offene Funktion hier definieren und Sie können all Ihre jQuery dort einfügen. Du wirst das immer wieder sehen, also mach dir keine Sorgen über das Auswendiglernen, das wirst du im Laufe der Zeit lernen. Wie Sie sehen können, können wir einfach ersetzen, wenn wir danach sind, und wie wir zuvor gesehen haben, können wir das Schlüsselwort dieses innerhalb des jQuery-Selektors verwenden, können wir das Schlüsselwort dieses innerhalb des jQuery-Selektors verwenden um darauf zu verweisen, was auch immer darauf geklickt wird. Wenn wir in diesem Fall auf ein bestimmtes p doppelklicken, wird das bestimmte p, auf das wir doppelgeklickt haben, dadurch dargestellt. Wir haben Beispiele für mehr Ereignisse, Mouseenter, Mouseleave, Mousedown, Mouseup, so weiter, so weiter. Wir können auch einen Ereignishandler anhängen, indem Sie die on-Methode verwenden. Die on -Methode fügt einen oder mehrere Ereignishandler für ausgewählte Elemente an. Es ist im Grunde nur eine andere Möglichkeit, einen Ereignishandler anzulegen, und so ist es mit dieser bestimmten Methode nur eingeschaltet, und dann zwei Parameter, der erste Parameter ist der Ereignisname , der in diesem Fall Click ist, und dann ist der zweite Parameter die Funktion, in der Sie Ihren Codeblock einfügen. So ziemlich genau das Gleiche, nur etwas andere Methode und Eigenschaften. Wie Sie hier unten sehen können, können wir mehrere Ereignisse für den gleichen Methodenaufruf definieren , indem Sie diese geschweiften Klammern verwenden und sie mit Kommas aufteilen. Aber das sehe ich meistens nicht. Es ist in Ordnung, das einfach zu tun oder das zu tun. Das ist ein wenig über die Syntax, wie Sie Ihre Ereignis-Listener in jQuery definieren. Lassen Sie uns ein wenig darüber reden, was einige der Dinge sind, die Sie tun könnten, wenn etwas angeklickt wird. Wie Sie hier sehen können, gibt es ein Beispiel, ausblenden und anzeigen. Werfen wir einen Blick auf Verstecken und zeigen vor allem. Wenn ich auf dieses Panel klicke, wird dieser Teil hier ausgeblendet und angezeigt. Das ist eine wirklich gängige jQuery-Methode und es ist ziemlich einfach. Alles, was hier los ist, ist, wenn Sie auf ein Element klicken, das die ID von hide hat, es wird alle Ps ausblenden, und wenn Sie auf ein Element klicken, das die ID von show hat, wird es alle Ps anzeigen. Nun, was hinter den Kulissen hier los ist, ist der Stil der Anzeige ändert sich. Schauen wir uns das jetzt an. Das ist der Teil, nach dem wir suchen. Es ist genau hier im Code, aber wenn wir tatsächlich mit der rechten Maustaste darauf klicken und auf „Inspect“ klicken, um es in unserem Inspektor zu sehen. Leider blockiert es jetzt, also lege ich es hier runter. Aber wenn wir wieder auf „Inspect“ klicken, können wir hier sehen wir haben eine P. Mal sehen, was passiert. Eigentlich müssen wir unser Browserfenster hier rüber bewegen. Schauen wir uns an, was passiert, wenn wir auf „Ausblenden“ klicken. Sie können hier aus dem Blitz sehen, dass sich etwas ändert und das ist die Stil-Eigenschaft. Jetzt hat die Stileigenschaft keine Anzeige. Wenn wir auf „Anzeigen“ klicken, verschwindet die Anzeigeeigenschaft von none, also ausblenden fügt eine Anzeigeeigenschaft von keiner hinzu und zeigt es entfernt diese Anzeigeeigenschaft. Dort können Sie sehen, wie mit einer Methode wir in der Lage sind, die Eigenschaft für diese Methode zu ändern, was im Wesentlichen die gleiche wäre, als ob wir ausdrücklich gesagt hätten, zu dieser Stileigenschaft zu gehen, zur Anzeige zu gehen und sie auf keine zu setzen, aber in jQuery ist es wirklich einfach, alles, was Sie tun müssen, ist die Hide-Methode darin einzufügen. Show funktioniert ungefähr gleich. Eine andere Sache, die Sie tun können, ist einen Parameter zum Verbergen hinzuzufügen und der die Geschwindigkeit bestimmt, die Sie verstecken möchten . Wenn Sie also ein wenig Verzögerung wünschen, können Sie eine Geschwindigkeit eingeben, es ist in Millisekunden, also wäre das 1 Sekunde. Sie können auch eine Toggle-Methode verwenden, mit der Sie grundsätzlich dieselbe Schaltfläche verwenden oder dieselbe Eingabe zum Ein- und Ausblenden verwenden können. Wir können auf die gleiche Schaltfläche klicken und es wird ein- oder ausblenden. Wenn es gerade angezeigt wird und Sie darauf klicken, wird der Schalter ein- und ausgeblendet, und wenn er gerade angezeigt wird und Sie darauf klicken, wird der Schalter als Äquivalent von Punkt-Show fungiert. Ausblenden und Anzeigen ist ein gemeinsamer jQuery-Effekt. Wir können auch in diesem Beispiel, dem Panel, ein- und ausblenden, aber in jedem Element für diese Angelegenheit können wir ein- und ausblenden und wir können definieren, wie schnell wir das wollen. Auch hier möchte ich nicht zu lange auf all den verschiedenen Effekten gehen , weil ihr Jungs einfach in eurer eigenen Zeit blättern könnt, aber wir können auch so gleiten. Was auch immer Sie Phantasie haben, es hat alles die ähnliche Konvention. Sie müssen nur den Methodennamen nachschlagen und Sie können einige Animationen mit Ihrem Ausblenden und Anzeigen haben. Mal sehen, was Animation tut. Wenn ich auf „Animation starten“ klicke, werden Sie sehen, dass es den Stil dieses Elements animiert und ändert. Was hier geschieht, ist, dass wir eine Methode der animieren und in dieser Methode setzen wir in ein Objekt, wo wir alle Stile definieren, die wir am Ende dieser Animation wirksam werden wollen . Wenn wir klicken und es selbst versuchen, wird dies dieses div animieren, so dass es um 250 Pixel übrig bleibt, es wird eine Deckkraft von 50 Prozent am Ende haben, es wird seine Höhe und Breite ändern. Wenn ich auf „Animation starten“ klicke, geht es plötzlich von dem, was es ursprünglich war, zu diesem jetzt. Das ist ziemlich cool. Wie Sie sehen können, gibt es eine Reihe von Effekten, die Sie in jQuery tun können. Sie können die Animation auch unterbrechen, wenn sie mit dieser Stopp-Methode geschieht. das noch nie wirklich benutzt. Eine andere Sache, die Sie tun können, ist ein Rückruf. Der Deal mit Callbacks besteht darin, dass JavaScript-Anweisungen zeilenweise ausgeführt werden, aber mit Effekten kann die nächste Codezeile ausgeführt werden, obwohl der Effekt nicht beendet ist. Im Wesentlichen können Sie mehrere Codezeilen gleichzeitig ausführen. Es wird nicht immer linear mit Effekten sein. Eine Sache, die Sie tun können, und das ist nicht nur mit jQuery-Effekten, sondern Programmierkonzept im Allgemeinen, insbesondere mit JavaScript, ist ein Callback. Genau hier können Sie sehen, dass wir verstecken und wir haben den ersten Parameter als langsam, aber dann können wir auch einen Callback setzen. Diese Funktion ist ein Callback genannt und wird erst ausgeführt, wenn dies beendet ist. Es gibt tatsächlich ein paar verschiedene Situationen, in denen Sie einen Callback verwenden würden , aber in dieser Situation ist es offensichtlich, dass wir nur wollen, dass diese Warnung besagt der Absatz jetzt ausgeblendet ist, angezeigt wird, wenn der Absatz vollständig ausgeblendet ist. Wenn wir dies ausführen, können Sie jetzt sehen, dass dies nur angezeigt wird, wenn der Absatz ausgeblendet ist. Wir können tatsächlich anhängen, was ein Callback am Ende genannt wird, und es wird sagen, wenn dies beendet ist, führen Sie diese Anweisung aus. Das hilft beim Timing in JavaScript. In diesem letzten Menüpunkt haben wir jQuery-Verkettung und wir können im Wesentlichen eine ganze Reihe von Methoden miteinander verketten, was ziemlich cool ist. Zum Beispiel würde dieser die Farbe eines Elements mit der ID p1 in Rot ändern, dann nach oben gleiten und dann nach unten gleiten. Wenn wir uns das ansehen, wenn wir darauf klicken, wird es nach oben gleiten und nach unten gleiten, nachdem es die Farbe Rot geändert hat und eine nach dem anderen passiert. Kein sehr praktisches Beispiel, sondern ein Beispiel dafür, wie Sie Methoden trotzdem verketten können. Das ist ziemlich viel es für jQuery-Ereignisse und -Effekte. Ich hoffe, Sie können hier jetzt sehen, wie cool jQuery ist und wie wir Ereignis-Listener und Effekte kombinieren können , um etwas Interaktivität auf unserer Webseite zu erhalten und wie ich Ihnen gezeigt habe, als wir auf die jQuery-Seite gingen, wenn ich hier zurück zur Seite gehe, Ereignisbehandlung und beeinflusst ist eines der häufigsten Dinge, die Sie mit jQuery und einer seiner Kernfunktionen tun können. Im nächsten Video werden wir über Traversal und Manipulation sprechen, und dann im Video danach werden wir über Ajax sprechen. Auf diese Weise werden wir die drei Hauptmerkmale von jQuery abdecken. Wir sehen uns im nächsten Video. 22. jquery Traversal: Alles klar, Leute, in diesem Video werden wir weiter über jQuery lernen und wir werden die nächsten wichtigen Funktionen in jQuery abdecken, die durchläuft und manipuliert. Das klingt sehr schicke Hosen, aber was ist eigentlich durchquert? Nun, es bedeutet, sich durch verschiedene HTML-Elemente zu bewegen, basierend auf ihrer Beziehung zu anderen. diesem Grund habe ich so viel Zeit damit verbracht über das DOM zu sprechen und über Knoten zu sprechen und wie alles funktioniert. Hier können Sie eine weitere Abbildung des DOM-Baums sehen und mit jQuery Traversing sind wir leicht in der Lage, nach oben, unten und seitwärts zu bewegen, ausgehend von einem ausgewählten Element und dies wird als Traversing bezeichnet. Jetzt kann ich Ihnen nicht wirklich erklären, wie wichtig es ist, dies zu tun, bis Sie tatsächlich stecken bleiben und versuchen, viele dieser Dinge mit einem Live-Dokument einzurichten. Aber manchmal können Sie diese Spanne nicht wirklich beeinflussen oder Sie möchten alle Spannen einer Listenklasse von etwas anvisieren. Sie müssen in der Lage sein, flexibel zu sein, wie Sie Elemente und Sammlungen von Elementen ansprechen können . Wenn diese Illustration für Sie nicht besonders sinnvoll ist, können Sie hier mehr lesen. Zum Beispiel sind die div-Elemente ein Elternteil von ul und es ist der Vorfahre von allem darin. All dies sind Nachkommen dieser ul. Wie durchqueren wir das DOM? Nun, wir haben diese ganze Speisekarte hier. Lassen Sie uns über Vorfahren sprechen. Die Art und Weise, wie wir den Baum durchqueren können, ist die Verwendung von Eltern oder Eltern oder ElternsUntil. Ein gemeinsames ist übergeordnetes Element und was dies tun wird, ist, dass es beginnt, indem Sie eine beliebige Spanne auswählen und alle unmittelbaren Eltern einer Spanne zurückgeben. Werfen wir einen Blick auf ihr Beispiel hier. Jetzt fangen wir an, ein wenig komplizierter zu werden, aber im Wesentlichen werden Sie sehen, dass wir Spannweiten hier in einem p in diesem Fall verschachtelt haben und wir haben eine in einem li-Tag hier verschachtelt. Was wir tun können, ist, anstatt für jeden von ihnen Targeting Spanne, können wir das Elternteil jeder Spanne anvisieren. Wir können span gehen und dann können wir die Methode Elternteil und dann alle Eltern von span verwenden. Wir werden nun diese Stilregel 2 anwenden. Sie einen Blick hier. Hier ist eine visuelle Darstellung dessen, was vor sich geht. Wir haben diese beiden Spannweiten, die wir durch das Ziel haben, und wir sagen, dass jeder unmittelbare Elternteil einer Spanne, wir wollen auch die rote Grenze anwenden. Sie können hier in diesem Fall sehen, dass es ein li ist, in diesem Fall ist es ein p. Es spielt keine Rolle welchen bestimmten Tag-Typ es ist, nur solange es das unmittelbare Elternteil dieses Elements ist, auf das wir zielen oder eine Gruppe von -Elemente in diesem Fall. Wir können auch Eltern zurückgeben, die alle Vorfahren Elemente eines Selektor-Elements bis zum Dokument-Stammelement zurückgibt . Es wählt nicht nur das unmittelbare übergeordnete Element aus, sondern wählt alle Vorfahren aus. Sie können hier sehen, dass wir etwas Ähnliches tun. Wir beginnen mit allen Spannweiten und dann zielen wir auf alle Eltern aller Spannen. Wie Sie hier sehen können, haben wir eine Spanne und anstatt einen Stil direkt auf diese Spanne anzuwenden, wenden wir ihn auf alle seine Vorfahren an . Du hast Li, ul, div und body, alle werden diese rote Grenze haben. In Ordnung? zurück gehen, haben wir eine andere und das ist parentsUntil, also mit parentsUntil wird es alle Ahnenelemente zwischen zwei gegebenen Argumenten zurückgeben. Was uns das erlaubt, ist einen Grenzpunkt zu geben, so dass es nicht den ganzen Weg hinauf geht, weil wir den ganzen Weg hinauf bis zum ganzen Körper gehen konnten und oft ist das nicht allzu praktisch. Was wir hier tun, ist, dass wir wieder alle Spannen auswählen und dann wenden wir die Methode an, die wir hier haben, was in diesem Fall eine rote Grenze anwendet, wir wollen, dass sie für alle Eltern gilt, bis sie div trifft. Wir fangen hier an und wir durchqueren das DOM, erinnern Sie sich an das Wort Traversal? und so schauen wir uns alle Eltern an. Hier ist der erste Elternteil. Ja, wir haben div noch nicht getroffen, also wenden Sie den roten Rand an. Als nächstes ist es kein div, der einen roten Rahmen anwendet, und dieser ist auch ein Elternteil ist auch ein Vorfahren, aber wir wollen den Stil nicht anwenden, weil wir den bis Punkt getroffen haben, der div ist. Da dies ein div ist, greifen wir nicht mehr durch die Vorfahren. Ziemlich cool, richtig? Die Alternative sind Nachkommen, und das ist ein bisschen häufiger. Wir können alle Kinder anvisieren, oder wir können diese wirklich coole Finds-Methode verwenden, um die Kinder eines bestimmten Elements basierend auf einem Selektor zu durchsuchen . Genau hier sind wir in der Lage, alle Kinder von div anzusprechen. wir einen Blick auf das Beispiel, hier, wo wir den Startpunkt aller divs verwenden und dann alle Kinder aller divs anvisieren. Hier haben wir ein div und wir zielen auf alle direkten Kinder dieses div. Mit Kindern ist es anders als Eltern. Wir zielen nur auf die unmittelbaren Kinder ab, nicht auf die Enkelkinder oder weiter unten, damit es nicht auf alle Nachkommen ausgerichtet ist. Alternativ, wenn wir alle Nachkommen zielen wollten und wir auch alle Nachkommen nach einem bestimmten Selektor wie hier filtern können , können wir die find-Methode verwenden und was das tut, ist, dass es mit div beginnt und dann findet es alle Spannen innerhalb alle divs und dann können wir eine Methode darauf anwenden. Schauen wir uns das Beispiel dafür an. Auch hier wenden wir den roten Rand von zwei Pixeln fest an und was wir hier tun, ist, dass wir alle divs finden und dann innerhalb von divs, wo alle Spannen finden. Es wirkt sich auf alle Spannen aus, die sich innerhalb eines div befinden, was ziemlich üblich ist. Moment können Sie sehen, dass alle Spannweiten innerhalb von divs sind, aber wenn wir setzen und jetzt die Spanne auf der Außenseite eines div. Wie Sie sehen können, ist diese Spanne nicht innerhalb eines div und wir klicken auf Ausführen. Dies hat keinen Rand von rot, zwei Pixel durchgefärbt. Es muss innerhalb eines div sein. Sie können sich das fast vorstellen, da alle mit Vorfahren von div überspannt. Zurück zu hier, können wir auch alle Nachkommen eines div zurückgeben, indem wir dieses Sternchen verwenden. versuchen, dass selbst, wenn wir alles anvisieren wollten, was ein Nachkomme eines div ist, können wir dieses Sternchen verwenden. Jetzt sagte ich, ich wollte hier zurück und was wir tun können ist diesen kleinen Filter hier zu verwenden, den wir in Fund verwendet haben , und wir können es als Eigenschaft in die Children-Methode als auch setzen und so, was das tut, sehr ähnlich wie finden. Es wird Nachkommen finden, die nur unmittelbare untergeordnete Elemente aller divs sind und diese bestimmte Auswahlregel passen. Denken Sie daran, von CSS, dies wird alle p mit einer Klasse von zuerst auswählen. Wir haben ein p mit einer Klasse von zuerst hier und es hat einen unmittelbaren Vorfahren von div, im Grunde ist div sein Elternteil. Wir wenden diesen Stil an, während wir hier hinuntergehen können und wir sehen können, dass dies nicht die Klasse der ersten hat, also hat es hier keinen Einfluss. Wenn ich diesen Teil entfernen sollte , der nach Klasse filtert und erneut ausgeführt wird, werden Sie sehen, dass jedes unmittelbare Kind, das ein p-Tag eines div ist, diese Grenze hat. Aber wenn wir diesen Filter nach Klasse entfernen würden und wir nicht wirklich ein p in ein p setzen können . Nehmen wir einfach an, wir suchen nach div-Kindern von div und denken Sie daran, dass dies nur unmittelbare Kinder sind. Wenn ich in ein anderes div setzen sollte, sagen wir hier und dann dieses div, ich werde sagen: „Hallo.“ Lassen Sie uns das ausführen und Sie können hier sehen, dass wir jetzt auf unmittelbare Kinder divs eines div abzielen. Also, da gehen wir, das sind zwei Methoden, die wir verwenden können, um Nachkommen zu zielen und den DOM-Baum zu durchqueren. Wir können auch seitlich im DOM-Baum mit all diesen verschiedenen Geschwisterselektoren durchqueren . Auch hier möchte ich nicht ins Detail eingehen. Wenn Sie Vorfahren und Nachkommen verstehen, dann werden Sie in der Lage sein, Geschwister ziemlich leicht zu verstehen. Dies wird auf alle Geschwister jeder h2 zielen und dies wird auf alle Geschwister von h2 zielen , die ein Tag von p haben. Alles klar, so ziemlich die gleiche Konvention wie zuvor. Anstelle von Kindern zielen wir jetzt auf Geschwister. Also, wenn Sie diese verstehen können, können Sie diese auch ziemlich gut verstehen, denke ich. Aber es ist alles hier als Referenz, wenn Sie darauf verweisen müssen, wir haben nextUntil genau wie die ParentUntil, also sehr ähnliche Konzepte. Schließlich haben wir jQuery-Filterung und wir können dies verwenden um das erste Kind mit der ersten Methode zu finden, das letzte Kind mit der letzten Methode und die eq-Methode, die ein untergeordnetes Element mit diesem Index auswählt. Das zeige ich Ihnen nur kurz. Sie können hier sehen, dass wir eine Reihe von p-Tags haben und in diesem Fall das erste p wäre das erste Kind, zweites Kind, drittes Kind, viertes Kind und so in diesem Fall können wir die zweite p nehmen unter Verwendung von Indexnummern hier, so dass man tatsächlich den zweiten Index darstellt. Wir können den zweiten Index anvisieren, indem wir hier eq verwenden. Also, wenn wir das erste Absatz-Tag anvisieren wollten, setzen Sie einfach eine Null, um das dritte Absatz-Tag zu Ziel, setzen Sie die beiden und da gehen Sie. Wir können eine Hintergrundfarbe darauf anwenden. Ordnung, wir können auch diese Filtermethode verwenden, die eine andere Bedingung auf diesen Selektor setzt , so dass wir alle p wollen, aber dann wollen wir nur nach p filtern, die die Klasse des Intro haben. bin mir nicht sicher, warum das existiert, weil wir wahrscheinlich dasselbe erreichen könnten , indem wir es einfach so in den Selektor setzen. Mal sehen, ob das funktioniert. Ja, also hat das den gleichen Effekt nicht sicher, was der Unterschied ist , und wir können auch das Gegenteil tun, das Ziel oder p ist und dann alles herausfiltern, was Klasse von Intro in unserer Auswahl ist. Das macht viel mehr Sinn. Alle P's außer denen mit der Klasse von Intro, werden wir dies anwenden. Alles klar, so dass so ziemlich viele Dinge, die Sie tun können, wenn Sie durchqueren. Im Falle der Manipulation, ich meine, Sie haben hier eine Reihe von verschiedenen Optionen. Werfen wir einen Blick auf jQuery get. Es gibt so viele verschiedene Methoden, die Sie ändern können, HTML ist eine gemeinsame. In Bezug auf die Manipulation denke ich, dass dieses Video über Traversal bereits lange genug gegangen ist. Ich werde die Manipulation im nächsten Video abdecken, und wir gehen durch dieses Menü, so dass ich Sie im nächsten sehen werde. 23. jQuery Manipulation: Alles klar, alle. Denken Sie daran, im letzten Video, wir haben gerade die Durchquerung in jQuery beendet. Jetzt wissen wir, wie man einen Startpunkt erhält, ein bestimmtes Element oder eine Gruppe von Elementen und dann den DOM-Baum nach oben und unten durchläuft. Aber jetzt, wenn wir in der Lage sind, ein bestimmtes Element der Gruppe von Elementen auszuwählen, was sind einige der Dinge, die wir tun können, um sie zu manipulieren? In diesem Menü für jQuery HTML haben wir einige Beispiele und Informationen zur DOM-Manipulation. Einige gängige hier, Text, HTML und val, diese tun verschiedene Dinge je nach Kontext. In diesem speziellen Kontext, in dem wir versuchen, eine Zeichenfolge zu verketten, und wir nur Text hier ohne Argument einfügen, bitten wir jQuery, uns den Text dieses bestimmten Elements zu geben. Also jedes Element mit der ID des Tests, wir wollen den Text davon einbringen, und hier, genau wie Text, gibt es ein anderes namens HTML, das das HTML-Markup nicht nur Text enthält. Zum Beispiel, wenn dieses Element mit einer ID des Tests verschachtelte Elemente hätte, würde es auch das einbringen. Werfen wir einen Blick auf das Beispiel. Wie Sie hier sehen können, haben wir zwei Ereignis-Listener eingerichtet Taste 1 auf Klick wir diese Funktion ausführen, die uns eine Warnung geben wird. Es wird mit dem String-Text beginnen und dann den Textwert von test hinzufügen, was in diesem Fall ist dies, weil dies das Element mit einer ID von Tests ist. Lassen Sie uns Text zeigen. Da gehen wir und wir können hier Text sehen. Dies ist ein fetter Text im Absatz, der genau das ist, was wir hier haben. Wenn wir auf Show HTML klicken, können wir den Unterschied sehen. Wir können sehen, dass es auch unser HTML-Markup enthält. also zurück nach hier unten gehen, können Sie sehen, dass Sie auch den Wert greifen können. Der Wert wird oft mit Eingaben verwendet. Also, wenn Sie ein Formular machen, können Sie hier sehen wir Mickey Mouse als Wert haben, aber wir können das ändern, und wenn wir auf diese Schaltfläche klicken, nehmen Sie den Wert dieser Eingabe, und wir können hier sehen Mickey Maus Wenn wir das nur in Mickey ändern und Wert zeigen würden, würde es mit Mickey kommen. Denken Sie daran, ich sagte, dass es vom Kontext abhängt. Indem Sie es hier einfügen, im Kontext einer Ausgabe-Warnung, alles, was es tut, ist, etwas Text auf dem Bildschirm auszugeben, indem wir diese Zeichenfolge mit dem Ergebnis davon verketten, bekommen wir einfach den Text. Aber wenn wir hier in das Setup-Menü gehen, können wir sagen, dass wir genau die gleiche Methode in einem anderen Kontext verwenden können, und es wird tatsächlich etwas Text setzen. Anstatt den Text auf einem Element zu erhalten, das eine ID von test1 hat, können wir den Text auf einem Element setzen, das die ID von test1 hat. Werfen wir einen Blick auf das Beispiel. Hier haben wir drei Ereignis-Listener und drei Buttons. Wenn wir auf die erste Schaltfläche klicken, wird es diese Funktion ausführen, die den Text dieses Absatzes hier setzt , die eine ID von test1 auf „Hallo Welt“ hat. Wenn ich auf Text setzen klicke, werden Sie dort sehen, dass wir in der Lage sind, den Text in diesem Text zu manipulieren, um das zu sein, was wir sagen, es zu sein. Hier können wir einige HTML in test2 einfügen. Lassen Sie uns auf Set HTML klicken und sehen, dass wir in der Lage sind, in diesem HTML zu setzen, und Sie sehen, dass es bereits pausiert den HTML für uns. Wir sehen diese Tags nicht wirklich, aber wir sehen das Ergebnis des HTML. Schließlich können wir den Wert dieses Eingabefeldes auf Dolly Duck setzen, wie wir es hier gesagt haben, und Wallah, da gehst du. Das ist eine wichtige Lektion zu beachten, diese drei Methoden werden verschiedene Dinge basierend auf dem Kontext bedeuten, und dies ist etwas, das Sie in jQuery sehen können haben oft die gleichen Methoden, aber der Kontext ändert, was sie tatsächlich tun. Das ist alles dafür, abgesehen von der attr-Methode. Attr wird den Wert eines bestimmten Attributs erfassen, so dass wir das href Attribut eines bestimmten Elements greifen können. Dies wird wahrscheinlich ein Link in diesem Fall sein, weil es href hat. Hier können Sie sehen, wir haben dies ein Tag. Was wäre, wenn wir den Wert dieses Attributs erhalten wollten? Nun, wir können es bekommen, indem wir diese Methode hier verwenden, A-T-T-R verwenden und dann den Namen des Attributs eingeben, das wir greifen möchten. Wenn wir dies anklicken, können wir sehen, dass der href-Wert jetzt auf unserem Bildschirm ausgegeben wird. Wenn wir zurück gehen und zum Setmenü gehen, werden Sie sehen, dass wir das Gleiche mit dem Attribut tun können, aber es einstellen. Anstelle eines Parameters haben wir jetzt zwei, also greifen wir unabhängig von dem Attributnamen, den wir ändern möchten, und wir setzen den Wert ein, den wir wollen. Wir werden auch eine geschweifte Klammern mit Attribut öffnen und mehrere gleichzeitig definieren. Wir können sagen href, wir wollen dies und Titel sein, wir wollen dies sein. Werfen wir einen Blick darauf, was das tatsächlich tut. Wenn wir auf diese klicken, um die href und den Titel zu ändern, können wir hier nichts sehen, was sich auf unserer Seite ändert, aber wenn wir auf inspizieren klicken und einen Blick auf den Code werfen, können wir sehen, dass die href jetzt ist, worauf wir es gesetzt haben . Wenn ich dies zur Seite schiebe, können wir sehen, dass die href jetzt dies ist, weil wir diesen Wert hier mit attr festgelegt haben, und wir haben auch das title-Attribut auf w3Schools jQuery Tutorial hier gesetzt. Wenn ich das ändern sollte, um einen tollen Link zu titeln, lassen Sie uns das ausführen, und dann werden wir dieses Element untersuchen. Sie werden hier sehen, dass der Titel ein Titel ist, bis wir auf die Schaltfläche klicken und dann ist es ein toller Link. Wir können sowohl bekommen als auch mit attr setzen. das Menü hinunter gehen, können wir hier hinzufügen sehen. Für das Hinzufügen von Elementen und Inhalten haben wir anhängen, voran, nach und vor. Der Unterschied zwischen all diesen ist, dass append Inhalt am Ende der ausgewählten Elemente einfügen wird . Prepend wird es am Anfang setzen, nachdem wir den Inhalt nach den ausgewählten Elementen setzen, und bevor wir ihn vor den ausgewählten Elementen einfügen. Sehen Sie sich das hier an. Wir haben ein p-Tag, und wir werden etwas Text an dieses p-Tag anhängen. Wenn ich hier in das Beispiel gehe und auf Text anhängen klicke, haben wir Ereignis-Listener auf dieser Schaltfläche und sobald ich auf diese Schaltfläche1 klicke, wird es alle ps finden und diese bestimmte Zeichenfolge von HTML anhängen. Wir haben zwei ps hier und jetzt, wenn wir mit der rechten Maustaste klicken und auf diese überprüfen, werden wir sehen, dass wir ein Stück angehängter Text mit den b Tags darin haben , um es fett innerhalb dieses p zu machen. Wieder, es gibt viele Möglichkeiten, wie wir dies tun können. Wir können auch davor und nachher vorangehen. Ich ermutige Sie zu gehen und diese Referenz zu lesen. Lassen Sie uns jetzt nicht in alle Beispiele eingehen, aber Sie können auch bestimmte Elemente entfernen, die untergeordneten Elemente eines ausgewählten Elements leeren. Sie können CSS auch manipulieren, indem Sie Klassen hinzufügen, Klassen entfernen, Klassen umschalten und Sie können die CSS-Eigenschaft verwenden , um den Wert der Einstellung von Eigenschaften zu ändern. Wie Sie sehen können, hetze ich hier nur durch das Ende. Sie haben die Referenz genau hier, wenn Sie sie brauchen. Aber im Wesentlichen, was ich Ihnen zeigen wollte, waren diese gemeinsamen Dinge, die Sie tun müssen, wenn Sie durch das DOM durchqueren, auswählen, was Sie auswählen möchten, und dann hierher kommen, um zu manipulieren. Das deckt so ziemlich das zweite Kernfeature von jQuery, Traversal und Manipulation ab. Im nächsten Video werden wir das drittgrößte Feature von jQuery abdecken und das ist AJAX, und danach werden Sie in Ihre Klassenprojekte bringen. Nicht lange, bis du bereit bist, in die Welt zu gehen und das selbst zu tun. Ich freue mich darauf, Sie im nächsten Video auf AJAX zu sehen. Dann seh ich dich. 24. jquery AJAX: Alles klar, Jungs, in unserem letzten Video über jQuery werden wir AJAX abdecken. Lassen Sie uns einfach direkt eintauchen und die Einführung abdecken. Wie Sie hier sehen können, verwendet es das gleiche Beispiel vorher, dass wir gesehen haben, als wir eine Einführung in AJAX und JavaScript behandelt haben, haben wir bereits behandelt, was AJAX tut. Aber in Bezug auf jQuery, was wir mit AJAX tun können, ist, einen AJAX-Aufruf mit jQuery zu erstellen, sind Methoden, die Sie hier unten ohne jQuery sehen können, AJAX-Codierung kann ein bisschen schwierig sein. Es ist schwierig, weil wie verschiedene Browser mit unterschiedlicher Syntax, und wie Sie zuvor gesehen haben, wenn ich nur dieses AJAX-Beispiel aufbringe, als wir Vanille-JavaScript gemacht haben, das ist, was Sie tun, wenn Sie einen AJAX-Aufruf mit JavaScript ohne jQuery. Hier auf der nächsten Seite können Sie sehen, wie wir jQuery verwenden können, um einige Inhalte mit AJAX zu laden. Genau hier ist das einfachste Beispiel Last. Dot Load ist einfach, aber sehr mächtig, wie es hier angibt und ermöglicht uns, Daten von einem Server zu laden und legt diese Daten in ein ausgewähltes Element zurück. Dies ist ein Geschenk des Himmels, also lassen Sie es uns selbst versuchen, und wie Sie hier sehen, können wir diesen ganzen komplexen AJAX-Aufruf vereinfachen, indem wir einfach die.load verwenden, und das wird jeden Inhalt in dieser Datei in das laden, was hier ausgewählt ist. Wir wählen alle Elemente mit einer ID von div aus, die, weil wir ID verwenden, nur eins auf der Seite sein sollte, und es ist genau hier. Wenn ich nun auf diese Schaltfläche klicke, werden Sie jetzt sehen, dass sich alles in diesem div geändert hat , weil es in einigen externen Inhalten geladen ist. Wirklich cool. Sie können auch einen jQuery-Selektor zum URL-Parameter hinzufügen. Hier laden Sie den Inhalt des Elements mit einer ID von p in der Datei demo test.txt in ein div. Es erlaubt Ihnen grundsätzlich, zu filtern. Ich möchte nur, dass Elemente mit einer ID von p1 aus dieser bestimmten Datei in dieses bestimmte Element geladen werden, das auf unserer Seite ist. Wenn wir schauen und versuchen es selbst. Auch hier können wir den Inhalt dieser Seite nicht sehen, aber wir können es uns vorstellen. Wenn ich darauf klicke, können Sie sehen, dass wir nur den Teil der Textdatei erhalten werden , der ein Element der ID von p1 ist. Hier erhalten wir nur das Element mit einer ID von p1. Wahrscheinlich häufiger als Laden in meiner Erfahrung, ist das Erhalten und Posten von AJAX. Auch hier benötigen Sie ein Backend für diese oder eine Datenquelle, in die Sie sich anschließen können, so dass es schwierig ist, ein konkretes Beispiel zu zeigen, aber wir könnten im Klassenprojekt dazu kommen, die jQuery GetMethod wird Daten von einem Server mit einer GET-Anfrage anfordern. In der Web-Entwicklung und Back-End-Programmierung gibt es diese Anfragen, Code, get und posts. Hier geht es mehr um die Backend-Webentwicklung. Aber im Wesentlichen, was wir hier tun, ist, Daten zu bekommen, wenn wir eine Get-Anfrage machen. Genau hier, wenn ich diese GetMethod verwende, kann ich die spezifische Adresse ansprechen, dann starte ich eine Funktion mit zwei Parametern, Daten und Status, und ich kann die Daten und den Status zurückbekommen. Werfen wir einen Blick darauf, wie das aussieht. Wenn ich auf diese Schaltfläche klicke, erhalte ich eine Warnung und es wird mit den Daten zurückkommen , dass es von dieser Adresse zurückkommt, und es wird auch mit einem Status zurückkommen. Wenn ich auf diese Daten klicke, sind dies einige Texte von hier zu externen ASP-Datei, Status, Erfolg. Offensichtlich ist der Status Erfolg, weil wir die Daten zurückbekommen haben. Das ist ziemlich gut. Wenn ich das inspiziere und ins Netzwerk gehe, kann ich Ihnen hoffentlich zeigen, was hier vor sich geht. Lassen Sie uns das zur Seite bewegen, und lassen Sie uns diese Konsole löschen. Wenn ich darauf klicke, werden Sie sehen, dass wir einen Aufruf zur Demo Unterstrich test.ASP gemacht haben, und jetzt können wir tatsächlich hineingehen und untersuchen, was passiert ist. Wir haben eine Get-Anfrage an diese bestimmte URL gestellt, und der Statuscode ist 200, was grün und so gut ist, und wir bekommen hier eine Reihe von anderen Informationen. Aber ich wollte nur zeigen, Sie nicht vollständig verstehen müssen, wie Sie dieses Panel verwenden, aber ich zeige nur, dass eine Anfrage im Hintergrund passiert ist, und wir haben einige Daten erfolgreich zurückbekommen. Wenn ich hierher zurückgehe, können wir Daten mit der jQuery-Post-Methode posten, also sind die Parameter dafür der Ort, an dem wir ihn senden möchten, die zu sendenden Daten und der Callback-Parameter, was wir am Ende passieren möchten. Wir haben eine ähnliche Sache hier. Es wird bestätigen, dass wir in der Lage waren, diese Daten an diese bestimmte Adresse zu senden. Wenn ich darauf klicke, heißt es, Daten: Lieber Donald Duck. Ich hoffe, Sie leben gut in Duckburg“ und der Status ist erfolgreich. Anstatt diese Informationen abzurufen, haben wir tatsächlich die Informationen hier und wir senden sie an diese Adresse. Auch hier macht keinen vollkommenen Sinn, perfekter praktischer Sinn, bis wir ein Backend oder einen Datenpunkt zum Senden oder Abrufen haben, aber das ist AJAX. Im Wesentlichen ist dies die JavaScript-Schnittstelle mit dem Backend. und Sie müssen also verstehen, was in diesen speziellen Adressen passiert, die entweder durch Ihr eigenes Wissen über das Backend, das Sie selbst behandelt haben , oder jemand, der ein Back-End ist, an Sie weitergegeben werden müssen -Entwickler oder -Datenquelle oder eine API verwenden, müssen Sie möglicherweise deren Dokumentation überprüfen und sehen, was Sie benötigen, um Ihre Anfrage zu stellen. Aber natürlich ist AJAX wahrscheinlich eines der komplexesten Themen in jQuery. Sie können mehr darüber lesen. Aber wirklich, Sie werden AJAX nicht vollständig verstehen bis Sie auch ein Verständnis von Backend haben, weil Backend ist, wo Sie die Daten erhalten werden. Das deckt jQuery für uns ab. Ich freue mich jetzt Jungs, denn es ist Zeit für dein Klassenprojekt. Wir haben alle Grundlagen abgedeckt, die Sie brauchen, um mit JavaScript zu arbeiten. Im nächsten Video werden wir mit dem Klassenprojekt beginnen und Sie tatsächlich dazu bringen, Code zu schreiben. Darauf freue ich mich. Ich werde Sie im nächsten Video sehen. 25. Kursprojekt – Intro: In den nächsten Videos werden wir über Ihre Klassenprojekte sprechen. Da JavaScript in dem, was es erreichen kann, ziemlich breit ist, ist Ihr Klassenprojekt auch ziemlich breit. Ich möchte nur, dass Sie Ihr neues Wissen über JavaScript verwenden, um entweder ein neues Webprojekt zu erstellen oder ein bestehendes Webprojekt zu verbessern, das Sie haben. Wenn Sie zuversichtlich genug sind, um abzuhauen und Ihr eigenes Projekt zu erstellen, dann gehen Sie direkt vor. Andernfalls habe ich dieses Beispielprojekt erstellt, das wir im nächsten Video übergehen werden. Meine Idee für diese einfache kleine Anwendung ist eine Seite, die eine Liste von Pokemon bietet. Es gibt nur zwei Schritte, um das zu tun. Wir werden eine Schaltfläche haben, die in einer Liste von Pokemon von einer externen Quelle geladen wird, und dann werden wir dem Benutzer erlauben, jeden von ihnen mit einem Klick auf eine Schaltfläche zu verstecken. Ehrlich gesagt, es gibt so viele verschiedene Dinge, die Sie mit JavaScript tun können und sie verlassen sich auf andere Elemente und andere Datenquellen, so dass es irgendwie in der Mitte sitzt. Es funktioniert am besten, wenn Sie Funktionen in eine bereits vorhandene App aufnehmen möchten. Dies ist ein ziemlich einfaches Beispiel, aber selbst immer noch, werden Sie viel lernen, wenn Sie so etwas tun können. Auch hier können Sie einfach mit dieser kleinen Beschreibung laufen, Ihr neues Projekt erstellen oder ein bestehendes Projekt verbessern. Wenn Sie jedoch ahnungslos sind oder nicht wissen, was zu tun ist, können Sie mit unserem Klassenprojekt folgen. Sobald wir dies als Ausgangspunkt haben, haben Sie vielleicht mehr Ideen darüber, wie Sie es verbessern können, und es könnte Ihnen ein wenig Vertrauen geben, dieses Projekt zu erweitern, oder bringen Sie dieses Wissen zurück in Ihre eigenen Projekte. Wieder, zögern Sie nicht, das nächste Video zu überspringen, wenn Sie nur Ihr eigenes Projekt erstellen möchten. Nach dem nächsten Video gehen wir in die Schlussfolgerung. Fühlen Sie sich frei, zu dem zu überspringen. Andernfalls, wenn du mit mir mitmachen willst, wie ich diese kleine Anwendung baue, dann bleib dran für das nächste Video. Ich seh dich dort. 26. Kursprojekt – Mitmachen: In diesem Beispiel Klassenprojekt werden wir einige der Dinge verwenden, die wir in den vorherigen Lektionen gelernt haben, wie Ajax, wie Ereignis-Listener und ein wenig Traversal des DOM als auch. Der erste Schritt, laden Sie eine Liste von Pokemon von einer externen Quelle. Wir werden natürlich Ajax dafür benutzen. Und die externe Quelle ist eine so genannte API. Ich möchte nicht auf eine große Menge an Details über APIs eingehen, denn für mich finde ich es zumindest viel einfacher zu verstehen wenn ich beginne, eines zu verwenden, anstatt es mir erklären zu lassen. Wir werden gerade in das eintauchen, und dann der zweite Teil ist, dass wir dem Benutzer erlauben, jeden von ihnen mit einem Klick auf eine Schaltfläche zu verstecken. Ehrlich gesagt, könnten wir hier eine Liste von zehn verschiedenen Dingen hinzufügen, aber das ist nur, um Sie zu beginnen, und die ersten Schritte werden für jedes JavaScript-Projekt die gleichen sein, um eine Webseite zu erstellen, jQuery und erste Schritte mit der Ausführung einiger Ereignis-Listener und verschiedener Funktionen. Das erste, was ich tun werde, ist ein Finder-Fenster zu öffnen. Ich gehe zu meinem Desktop und erstelle einen neuen Ordner für unser Projekt. Ich werde es nur JS-Projekt nennen, nicht den erfindersten Namen, und genau wie ich es in der vorherigen Klasse für HTML und CSS getan habe, werde ich nur das Beispiel auf W3-Schulen für das HTML kopieren. Wenn Sie das Gleiche tun und zu w3schools.com gehen möchten, klicken Sie einfach auf HTML und sie geben Ihnen ein einfaches Beispiel. Ich werde das kopieren. Ich werde dann einen Code-Editor öffnen. Meines ist Atom, und ich werde eine neue Datei erstellen, diesen Code einfügen und sofort speichern, ohne etwas zu ändern. Ich werde in mein Projekt gehen und ich werde es Index.html nennen, genau wie wir es in der vorherigen Klasse getan haben. Gehen einige Einrückungen hier zu tun, und was ich tun werde, ist ändern Sie den Seitentitel auf Pokemon, ändern Sie die erste Überschrift zu Pokemon, und anstelle dieses Absatz-Tags mit einem zufälligen Absatz dort, werde ich Ersetzen Sie das durch ein div, in das wir den Inhalt einfügen werden. Ich werde es zuerst öffnen und schließen, ein Leerzeichen für die ID lassen, und ich werde dies die Poke-Liste nennen. Davor werde ich eine Schaltfläche erstellen, die ich verwenden kann, um auf klicken, und dann werde ich in der Liste der Pokemon von der externen Quelle bringen. Ich werde diesem eine ID der Pokemon-Schaltfläche geben, und dann werde ich den Text dort schreiben, cool. Ich werde das zur Seite stellen. Was Sie jetzt tun möchten, ist es in Ihren Browser zu laden. Gehen, um das zu greifen, ziehen Sie es hier rein, und im Moment wird nichts passieren, weil wir noch kein JavaScript haben. Zwei Dinge, die ich in das Projekt einsteigen möchte, bevor wir tatsächlich anfangen, selbst Code zu schreiben, sind Bootstrap und jQuery. Sie hätten Bootstrap in der vorherigen Klasse auf HTML und CSS gesehen. Wenn nicht, ist Bootstrap nur ein CSS-Framework. Es ist die beliebteste HTML-, CSS- und JavaScript-Bibliothek der Welt nach ihrer eigenen Website, was ich tun werde, ist, klicken Sie einfach hier herunterladen, und es wird Ihnen alle verschiedenen Dateien innerhalb von Bootstrap, aber wir sind nur an den CSS-Dateien interessiert. Ich werde das herunterladen. Es wird ziemlich schnell herunterladen. Öffnen Sie ein neues Finder-Fenster, um meine Download's zu durchsuchen. Ich werde dieses Verzeichnis erweitern, das alte Verzeichnis in den Papierkorb löschen, und ich gehe in CSS und hole einfach bootstrap.css und ziehe es dann hier hinein. Ich werde keines der anderen Sachen verwenden, also bin ich glücklich, einfach den ganzen Ordner zu löschen, und da gehst du. Wir haben Bootstrap in unserem Projekt. Das nächste, was wir herunterladen müssen, ist jQuery. Wenn wir nur nach jQuery suchen und auf ihre Website gehen, können wir hier wieder jQuery herunterladen und wir können die komprimierte oder die Entwicklung bekommen, spielt keine Rolle. Ich werde nur komprimiert, weil das die erste Verbindung war. Ich gehe erneut zu unserem Projekt und klicke auf Speichern. Cool. Wir haben die beiden Akten da drin. Die nächste Stufe besteht darin, zu verlinken, und Sie sollten sich daran erinnern, aus der vorherigen Klasse, oder wenn Sie bereits ein wenig HTML wissen, werden wir dies im Kopf tun. Ich werde das Stylesheet verknüpfen, indem ich link rel="stylesheet“ sage, und dann glaube ich, dass das Attribut href ist, und es ist nur bootstrap.css. Dann werde ich das jQuery-Skript einbringen. Ich werde zwei Skript-Tags erstellen. Ich werde hier eine Adresse eintragen. Ich werde nur den genauen Dateinamen kopieren und einfügen, ihn dort einfügen. Nun, was ich tun möchte, während wir hier sind, ist in unsere eigene JavaScript-Datei, die wir noch nicht wirklich gebaut haben, und ein gemeinsamer Name dafür ist app.js oder index.js oder main.js. Ich werde es nur app.js nennen. Es spielt keine Rolle, wie man es nennt. Um zu überprüfen, ob das alles gut funktioniert, klicke ich auf eine neue Datei, und ich werde ein Konsolenprotokoll der geladenen js-Datei einfügen. Dann werde ich das speichern und in mein Projekt gehen und den exakt gleichen Namen verwenden, den ich in das Quellattribut eingefügt habe. Das war app.js, wie Sie hier sehen können, app.js, app.js. Wir werden ein Semikolon darauf setzen, um sicherzustellen, dass das das Ende der Aussage ist, und jetzt kann ich die Seite aktualisieren. Nun, eine Sache, die Sie bemerken werden, ist, dass das Styling vollständig geändert hat und das liegt daran, dass wir Bootstrap verwenden. Nur um eine Datei, HTML ein wenig mehr zu booten , bevor wir fortfahren, werde ich dem Button eine Klasse von BTN und dann BTN primär geben, und das wird uns etwas Styling von Bootstrap geben, und dann ist die andere Sache, Ich werde das alles in einem div mit dem Klassencontainer platzieren. Das wird es ein bisschen schöner machen. Sie werden in nur einer Sekunde sehen, was das tut. Wenn ich nun die Seite aktualisiere, sie sich in einem Container, der reagiert. Cool. Das letzte, was zu überprüfen ist, ob alles funktioniert, ist, in meine Konsole zu gehen. Ich werde das mit dem Alt-Befehl I auf dem Mac tun, und voila, es sagt hier js-Datei geladen, was bedeutet, dass wir darin laden. Wir können sagen, dass es in Bootstrap geladen wird, weil wir diese Stile bekommen. Wir können sagen, dass es unsere Datei app.js lädt, weil es diesen Code ausgeführt wird, sind wir noch nicht bestätigt, ob es jQuery läuft. Wir können tatsächlich etwas direkt im Browser mit einem jQuery-Selektor ausführen. Ich wähle das Dokument aus. Ich werde das ausführen, und Sie können sehen, dass es das Dokument auswählt. Wir wissen, dass wir jQuery funktioniert haben. Wir wissen, dass wir unsere JavaScript-Datei verknüpft haben, und wir wissen, dass Bootstrap ebenfalls verlinkt ist. Jetzt sind wir bereit, etwas Code zu schreiben. Jetzt ist die API, um das Pokemon zu erhalten, @pokeyapi .co. Ich gehe zu dieser Webseite, und wie Sie hier sehen können, können Sie verschiedene Dinge in dieses Feld einfügen, klicken Sie auf „Senden“, und es wird Ihnen sagen, was die Antwort ist. Ich habe mit diesem vorher experimentiert, und um die Liste der Pokemon zu bekommen, müssen wir nur diese Adresse ausführen, und Sie können buchstäblich nur das Ganze kopieren, es lässt Sie nicht wirklich kopieren von hier. Aber wenn ich in einen anderen Ort in meinem Browser gehen und einfach kopieren, dass über, werden Sie hier sehen, es wird so kommen. Ich habe eigentlich ein Plug-in, das die Daten ein bisschen schöner aussehen lässt. Ihr wird genau so aussehen, wie es vorher hatte, bevor es eingetreten ist. Es wird also nur eine Reihe von Texten sein, wie es für eine Sekunde war. Das Plug-In, das ich dafür verwende, wenn Sie interessiert sind, ist JSON-Ansicht. Ja, wenn Sie möchten, dass Ihr JSON so schön auftaucht, mit der Fähigkeit, sich zu erweitern und zusammenzuziehen. Überprüfen Sie definitiv JSON-Ansicht. Jedenfalls, genug von dieser Tangente. Ich werde diese genaue Adresse griffbereit halten, weil wir in unserem Ajax-Aufruf diese spezielle API aufrufen werden. Zurück zu hier, was ich tun werde, ist, dieses Konsolenprotokoll zu entfernen, und ich werde mit einem jQuery-Dokument beginnen, und es beginnt immer mit der dokumentbereiten Funktion. Lass dich nicht mit dem einholen, was ich hier mache. Es ist eine ziemlich Standardfunktion, die immer ziemlich gleich aussehen wird. Es ist nur eine Frage des Auswendigens, und innerhalb dieser Funktion werden Sie alle anderen Funktionen, die Sie ausführen möchten, auf der Seite setzen. Dies stellt nur sicher, dass das Dokument bereit ist, bevor Sie mit der Ausführung dieser Funktionen beginnen. Das erste, was ich tun möchte, ist ein Ereignis-Listener einrichten, und der Ereignis-Listener, den ich einrichten möchte, ist zu überprüfen, ob diese Schaltfläche geklickt wird, und auf den Klick werden wir in der Pokemon-Liste laden. Ich werde einen jQuery-Selektor starten. Denken Sie daran, dass wir den Button aufgerufen haben, erhalten Pokemon-Schaltfläche. Ich werde das öffnen, ein # einfügen, weil wir auf IDs zielen, und ich werde diese Methode verwenden, um einen Ereignis-Listener zu erstellen. Funktion und dann alles, was wir in diesem Code-Block setzen wird sein, was passiert, wenn wir auf diese Pokemon-Schaltfläche klicken. Wir könnten dies testen und setzen in Konsolenprotokoll Schaltfläche geklickt, und jetzt, wenn ich auf diese Seite mit meiner Konsole geöffnet, wenn ich auf die Schaltfläche klicke, können Sie sehen, und diese Nummer wird nach oben gehen. Es wird es nicht wirklich wiederholen. Es wird nur eine Nummer daneben setzen. Wenn es genau das gleiche ist, werden Sie sehen, dass diese Nummer nach oben geht und der Text herauskommt, Schaltfläche geklickt. Wir wissen, dass dieser Ereignis-Listener funktioniert. Aber was ich passieren möchte, ist, dass ich eine Ajax-Anfrage an diese API stellen und diese Pokemon einbringen möchte . Was ich tun werde, ist eine get-Anfrage mit jQuery zu machen, und der erste Parameter wird die URL sein. Dies ist die URL hier. Der zweite Parameter wird eine Funktion sein. Um sich daran zu erinnern, wie wir diese Get-Funktion erstellen, gehe ich zurück zu den W3-Schulen und gehe zum jQuery-Abschnitt und gehe zum jQuery get posts Menü. Wie Sie hier sehen können, ist der erste Parameter die URL und der zweite Parameter ist der Callback, und dann der Callback, können wir eine Funktion mit zwei Parametern setzen. Einer wird die Daten sein und einer wird der Status sein. Ich werde diese Parameter einfügen, meine geschweiften Klammern setzen, und ich mag es immer, jede Anweisung sofort mit einem Semikolon zu beenden , damit ich nicht verwirrt werde. Ich werde hier einige Abstände schaffen, nur um uns etwas Atemraum zu geben es leichter zu lesen. Nun, da wir diese Funktion erhalten geschrieben haben, was wir tun können, ist die Daten zu greifen. Auch das ist etwas, das ich oft mache. Ich werde nur Konsolenprotokoll in verschiedenen Phasen, um zu sehen, wo wir sind. Wenn ich auf „Get Pokemon“ klicke, und es dauert ein wenig Zeit, weil es packt es von einer externen Quelle. Sie werden sehen, dass wir dieses Objekt jetzt in unsere Konsole kommen. Dies sind die Daten, die von dieser URL zurückgegeben werden. Wie Sie sehen können, gibt es verschiedene Elemente in diesem Objekt. Einer von ihnen ist ein Array namens Ergebnisse mit all den verschiedenen Ergebnissen in hier. Dies ist die Liste, nach der wir suchen, um auf dem Bildschirm zu veröffentlichen. Was ich tun werde, ist eine Schleife zu verwenden, um all diese zu durchlaufen und eine Zeichenfolge zu erstellen , die dann in dieses div eingefügt wird, das wir direkt hier erstellt haben, aber es hat nichts darin. Ertragen Sie mit mir, wie ich das tue. Dies wird ein bisschen Code sein, aber im Wesentlichen werden wir die Zeichenfolge zuerst erstellen. Ich werde es var string nennen. Um es zu starten, werde ich eine UL öffnen, also ein ungeordnetes Listen-Tag. Sie können hier den Verkettungsoperator sehen, der zur Zeichenfolge hinzugefügt wird. In der Tat sollten wir dies zunächst mit einer leeren Zeichenfolge einrichten. Ich werde in die UL setzen, weil wir das vor der Schleife wollen. Ich werde etwas für nach der Schleife einfügen, die das schließende Tag sein wird. Dann werde ich die Schleife machen. Wir haben definitiv behandelt, wie man Schleifen macht, aber wir haben Ihnen nicht den jQuery-Weg gezeigt, eine Schleife zu machen. Die jQuery-Methode, eine Schleife zu machen, ist mit diesem Punkt jede Methode. Gehen wir einfach zur jQuery-Dokumentation und geben Sie jeweils jQuery ein. Hier können Sie eine Beschreibung sehen. Es kann verwendet werden, um sowohl Objekte als auch Arrays zu iterieren. Wirklich coole kleine Funktion. Wie Sie hier sehen können, setzen wir das Objekt oder das Array als erstes Argument, und dann haben wir die Funktion oder den Rückruf als zweites Argument oder Parameter in dieser Funktion. Wir können hier Parameter für Index und Wert setzen. In diesem Sinne werde ich Datenergebnisse erfassen. Denken Sie daran, dass war, wo die Liste der Pokemon war. Dann werde ich meinen Callback-Indexwert einfügen. Ich werde ein Semikolon da reinlegen. Was ich hier tun werde, ist ein Listenelement zu dieser Liste hinzuzufügen, die wir gerade erstellt haben. Ich werde das LI-Tag eintragen. Ich werde dieses LI-Tag schließen und ein Semikolon einfügen, nur um klar zu sein, dass wir fertig sind. Dann werde ich in den Wert setzen. Der letzte Schritt besteht darin, dies auf den Bildschirm zu stellen. Wie ich schon sagte, wir werden es in dieses Poke-List-div einfügen. Der erste Schritt besteht darin, dieses div mit einem jQuery-Selektor auszuwählen. Ich werde den Hash verwenden, um ein beliebiges Element mit einer ID der Poke-Liste auszuwählen, die nur dieses ist. Dann werde ich die HTML-Methode im festgelegten Kontext verwenden , um die Zeichenfolge einzugeben, die wir gerade generiert haben. Wenn ich auf „Speichern“ drücken, gehen Sie zurück zum Projekt, klicken Sie auf „Get Pokemon“. Sie können sehen, es kommt nur mit Objekt, Objekt, Objekt. Der Grund, warum es das tut, ist, weil in jedem dieser Ergebnisse gibt es ein anderes Objekt. Sie können hier auf dem ersten Ergebnis sehen, wir haben ein Objekt mit zwei Attributen, einem Namen und einer URL. Wir müssen diese wirklich ausbrechen und sie separat verwenden. Was ich tun werde, ist scheinbar, dass wir dort einen Link haben, ich werde ein Link-Tag einrichten. Ich werde hier einen Href einlegen. Dies könnte ein bisschen verwirrend sein, weil ich hier String-Interpolation verwende. Aber was hier passiert, ist, dass wir Anführungszeichen verwenden müssen, um die String-Definition zu öffnen. Dann versuchen wir hier, tatsächlich ein Zitat für das Attribut zu setzen. Wir müssen nur sicherstellen, dass wir zwischen doppelten Anführungszeichen und einfachen Anführungszeichen wechseln, und es sollte uns gut gehen. Dies bedeutet, dass wir eine Zeichenfolge beginnen, dann setzen wir ein Anführungszeichen, das ein Teil der Zeichenfolge sein wird. Dann schließen wir die Schnur. Mit Pluspunkten können wir verketten und dann wird dies bedeuten, dass wir wieder öffnen und dann in und endet dort. Eigentlich müssen wir dort ein schließendes Etikett einfügen. Hier drin werde ich die URL eintragen. Es ist tatsächlich ein Wert innerhalb dieses Wertes, der ein Punktobjekt ist. Das wird wert.url sein. Dann hier wird es wert.name. Ich glaube nicht, dass Wert in diesem Zusammenhang wirklich sinnvoll ist. Wir sind in der Lage, diesen Parameternamen zu ändern. Ich gehe zurück und ich werde es Artikel nennen. Ich denke, das ist ein bisschen beschreibender. Es ist die item.url und der item.name. Wenn ich das speichern, aktualisieren Sie die Seite, klicken Sie auf „Get Pokemon“, Sie können sehen, eine Liste erscheint jetzt. Ich kann auf jede dieser klicken und es wird mich auf die detailliertere API-Kern für diese bestimmte Pokemon, wo Sie auf ihre Fähigkeiten schauen können, können Sie auf ihre Statistiken und andere Bits von Daten im Zusammenhang mit diesem spezifischen Pokemon suchen. Was Sie tun möchten, ist eine bestimmte Seite dafür zu erstellen, die Daten einziehen. In diesem Video werden wir nicht in diesen zweiten Schritt gehen, aber fühlen Sie sich frei, dies zu tun. Was ich stattdessen tun werde, ist ein weiteres onclick EventListener zu demonstrieren, und mit diesem onclick EventListener können wir verschiedene Elemente dieser Liste ausblenden. Wenn ich hier reingehe, will ich nicht mehr auflisten. Ich möchte das in einen Tisch verwandeln. Was ich tun werde, ist UL in Tabelle zu ändern. Ich werde LI für eine Tabellenzeile in TR ändern. Natürlich wird dies eine Tabellenzelle werden müssen, also werde ich eine offene und geschlossene Tabellenzelle dort setzen. Dann werde ich eine andere Tabellenzelle erstellen. Innerhalb dieses TD werde ich in eine andere Schaltfläche setzen, so dass Tags geöffnet und geschlossen werden. Innerhalb dieser die Beschriftung für die Schaltfläche. Hier, damit ich es ausrichten kann, werde ich einen Klassennamen der Schaltfläche Ausblenden einfügen. Denken Sie daran, dass wir bereits doppelte Anführungszeichen verwenden, um die Zeichenfolge zu definieren, also müssen wir hier einfache Anführungszeichen verwenden, wenn wir möchten, dass diese Anführungszeichen Teil der Zeichenfolge sein. Wenn ich auf Speichern klicken und ich dies ausführen, können Sie sehen, dass wir jetzt eine Tabelle haben, oder vielleicht ist es nicht so offensichtlich, aber dies ist eine Tabelle mit Hide Buttons. Auch hier verwenden wir Bootstrap, damit wir das wirklich viel schöner aussehen können. Was ich tun werde, ist in einigen Klassen zu setzen, um es schöner aussehen zu lassen. Primär und hier werde ich der Tabelle eine Klasse von Tabelle geben. Nun, wenn ich auf Run Pokemon klicken, können Sie sehen, der Stil hat sich ein wenig geändert. Es gibt mehr Abstand, es gibt Linien zwischen den Zeilen und die Tasten sind ein bisschen schöner. Cool. Der nächste und letzte Schritt besteht darin, diese Hide-Buttons anzuschließen und sie tatsächlich dazu zu bringen, die Zeile zu verbergen, in der sie sich befinden. Um dies zu tun, werde ich einen anderen EventListener einrichten und ich werde den Punkt verwenden, weil ich eine Klasse anvisiere. Ich werde alle versteckten Schaltflächen finden und einen EventListener darauf setzen. Schaltfläche „Ausblenden“. Ich werde die gleiche Konvention wie zuvor verwenden. Wir haben klicken, dann funktionieren, Code Block öffnen. Was ich in diesem EventListener passieren möchte, werde ich hier nur erweitern, damit Sie die ganze Zeile auf der Seite sehen können. Grundsätzlich bin ich in der Lage zu finden, auf welche Schaltfläche geklickt wurde, indem ich den Selektor verwende. Aber dann will ich nicht nur den Knopf verstecken, ich möchte die ganze Reihe verstecken. Wenn wir unser Wissen über DOM Traversal verwenden, um den Baum hinauf zu gehen, haben wir diese Schaltfläche und das Elternteil dieser Schaltfläche ist eine Tabellenzelle. Das übergeordnete Element dieser Tabellenzelle ist die Zeile. Wir sind in der Lage, die übergeordnete Zeile der Schaltfläche anzusprechen, indem wir zuerst einen jQuery-Selektor mit dem Schlüsselwort this starten und dann das DOM nach oben bewegen, indem wir einmal übergeordnetes Element verwenden und dann ein zweites Mal, um es hier zu bekommen. Dann können wir von diesem Punkt aus einfach die Funktion ausführen, die wir darauf ausführen möchten. Ich klicke auf „Speichern“ und wir gehen zurück und wir werden sehen, ob das funktioniert. Ich klicke darauf und es funktioniert nicht. Es gibt einen klaren Grund, warum. Ich wollte es eigentlich falsch machen, weil ich denke, dies ist der intuitive Weg, es zu tun. Warum können wir die Knöpfe nicht verstecken? Dies ist die Sache, die ein Problem mit JavaScript ist, das Sie wahrscheinlich nicht in anderen Programmiersprachen bekommen, es ist tatsächlich asynchron. In JavaScript wird dies nicht beendet und dann wird es ausgeführt, dies wird gestartet und während das läuft, wird dies gehen. Vor allem beim Abrufen von Daten aus externen Quellen könnte das eine beliebige Anzahl von Zeit in Anspruch nehmen. Während dies ausgeführt wird, möchte es den Rest des Codes nicht verzögern. Was das für uns bedeutet, ist, dass wir das an einen Ort bringen müssen , an dem es erst laufen wird, wenn das fertig ist. Der Weg, dies zu tun, besteht darin, den Status hier zu verwenden. Ich werde eine if-Anweisung eintragen. Wenn es eine Statusbedeutung gibt, wenn es einen erfolgreichen Anruf gab, gehe ich hinein und lege den EventListener hier ein. Keine Sorge, wir können EventListener ineinander verschachteln, es ist total cool. Stellen Sie etwas Platz da rein. Wir klicken auf „Get Pokemon“. Wenn wir nun auf die Schaltfläche Ausblenden klicken, sollte sie sich verstecken. Sie können sehen, dass es ist. Es findet das übergeordnete Element der Schaltfläche, auf die wir geklickt haben, nämlich TD. Dann findet es das übergeordnete Element dessen, was die übergeordnete Zeile sein wird , und es versteckt es. Ich kann dies für alle Pokemon in der Liste tun. Ich kann die vollständige Liste wieder holen, indem ich auf „Get Pokemon“ klicke. Sie können hier unten sehen, wir haben immer noch unser Konsolenprotokoll. Das kann ich jetzt einfach loswerden. Jetzt haben wir eine saubere Konsole und eine saubere funktionierende App. Ich hoffe, das hilft Ihnen, in einem praktischen Rahmen zu sehen , wie Sie Ihr Wissen über Java-Skripte einbringen würden. Ich hoffe, das war nicht zu verwirrend für euch. Wieder wirst du lernen, indem du es tust. Was ich vorschlagen würde, dass Sie dieses Zeug lernen, ist, Ihre eigenen Projekte zu erstellen, zu erforschen, wie man diese Dinge macht, und dann gehen Sie voran und probieren Sie sie aus. Wenn es nicht funktioniert, beginnen Sie mit dem Debuggen, was wir eigentlich im nächsten Video abdecken werden, das wird unsere Bonusstunde sein. Wir werden lernen, wie man Dinge in der nächsten Lektion debuggt. Wenn Sie jemals stecken und debuggen möchten, schauen Sie sich das an oder möchten Sie es sofort auschecken. Es liegt an dir. Aber das sind im Grunde die Anfänge unseres kleinen Beispiel-Klassenprojekts. Ich freue mich, zu sehen, was du dir einfällt, und ich sehe dich im nächsten Video. 27. Bonus: Debug mit Console.log: Jetzt haben wir ein bisschen davon in der vorherigen Lektion gesehen, als wir diese Pokemon App erstellt. Aber ich wollte ein wenig genauer darüber eingehen, wie Sie herausfinden würden , was die Probleme mit Ihrem Code sind und sie dann debuggen würden. Zuvor gab es ein gutes Beispiel, in dem es nicht funktionierte wenn ich diesen Ereignis-Listener außerhalb dieses AJAX-Aufrufs hatte. Wenn ich das einfach ausziehe und das auch lösche, nur damit es nicht leer schwebt. Geh hier, und hier war es vorher, ich glaube nein, eigentlich war es hier. Jedenfalls. Es spielt keine Rolle, es war der falsche Ort, egal. Ich klicke auf „Hol dir Pokemon“. Jetzt, wie ich sehe, funktioniert es nicht, ich denke vielleicht, warum ist das? Ich gehe vielleicht zurück und sehe mir diesen Code an, und ich könnte sehen, dass es keine Tippfehler gibt. Es sollte auslösen. Dies verbirgt diese Schaltfläche nicht. Eine Sache, die ich oft verwende, ist das Konsolenprotokoll , da es in JavaScript keinen Pfeil gibt, wenn es this.parent nicht finden kann. Es wird einfach nichts tun. Das ist frustrierend, wenn Sie wissen wollen, was das Problem ist. Ein wirklich praktisches Tool ist console.log. Ich werde das kommentieren, damit es nicht mehr läuft, und ich werde eine console.log verwenden, um nur zu überprüfen, ob der Ereignis-Listener tatsächlich funktioniert. Ich werde nur setzen die Wörter Taste geklickt in, drücken Sie „Speichern“, gehen Pokemon zu bekommen, und ich werde auf diese Schaltflächen klicken. Der Text kommt nicht in unserer Konsole heraus, was bedeutet, dass dies nicht tatsächlich läuft, es stimmt etwas nicht mit diesem Teil des Codes. Es ist nicht unbedingt dieser Teil des Codes, weil es immer noch nicht passiert, selbst wenn wir das loswerden. Dann müssen wir uns überlegen, was mit diesem Teil und einer der Dinge mit JavaScript nicht stimmt , wie ich im letzten Video sagte, das ist ein Problem ist das Timing. Damit dies tatsächlich funktioniert, muss es bereits eine Reihe von Hide Buttons auf der Seite geben. Sobald dieser Code ausgeführt wird, wird der Ereignis-Listener eingerichtet und er wird nicht aktualisiert wenn neue Elemente auf der Seite mit dieser Klasse eintreffen. Sie müssen sicherstellen, dass alle Hide-Schaltflächen, die der Ereignis-Listener anwenden soll , bereits auf der Seite geladen wurden, bevor Sie mit der Ausführung dieses Ereignis-Listener beginnen. Das ist etwas, das sogar erfahrene Entwickler antreibt. Sie müssen berücksichtigen, wenn der Ereignis-Listener ausgeführt wird, da er keine neuen Elemente berücksichtigt, wenn sie auf der Seite ankommen. Eine der Möglichkeiten, die wir beheben, war, indem wir sicherstellen, dass wir gewartet haben, bis der AJAX-Aufruf beendet war, bevor wir dies ausgeführt haben. Ich werde das hier wieder hineinlegen und sehen, ob der angeklickte Button jetzt auftaucht, was es tut. Wir können das Konsolenprotokoll jetzt loswerden, sehen, ob diese Codezeile funktioniert, was es sein sollte. Ja, das ist es. Der andere Bereich, in dem ich console.log hier helfen kann , ist herauszufinden, was diese verschiedenen Dinge sind. Sie haben diese API und Sie können sie hier sehen. Dies sind die Daten, aber um sie zu navigieren, können Sie verschiedene Teile der Antwort ausrichten, denen es sich um eine JSON-Antwort handelt. Vielleicht suchen Sie an den falschen Stellen. Wie wir vorher hatten, werde ich vielleicht nur Artikel hier haben und ich werde nicht tiefer in den Artikel gehen , um die URL und den Namen herauszuziehen. Wenn ich wieder in die App gehe und ich auf „Get Pokemon“ klicke, wird es Klassenobjekt Objekt haben. Wenn Sie in der tatsächlichen schauen, kann ich Sie nicht zur gleichen Zeit zeigen, aber direkt über der Konsole hier, wenn Sie schauen, während ich den Mauszeiger über bin, ist die Link-Adresse auch Objekt Objekt. Wenn Sie darauf klicken, wird das offensichtlich ein defekter Link sein. Pokemon wieder holen. In diesem Fall sind wir wie, okay, das ist nicht sehr beschreibend. Wie bekomme ich den tatsächlichen Namen davon? Eine der Möglichkeiten, wie wir dies tun können, ist die Verwendung von Konsolenprotokoll. Ich gehe in das Konsolenprotokoll und ich werde nur das Element ausgeben. Also werde ich auf „Get Pokemon“ klicken, und Sie können hier sehen es gibt den Gegenstand für jeden Listeneintrag. Wie Sie hier sehen können, haben wir diese Objekte. Sie sollten in der Lage sein zu verstehen, dass dies ein Objekt ist, es ist eine geschweifte Klammer mit einem Namenswertpaar. Wenn ich auf „Erweitern“ klicke, habe ich Namen und URL darin. An diesem Punkt solltest du so sein, wie ich sehe, ich habe hier ein Objekt. Kein Wunder, denn ich lege es als eine Zeichenfolge heraus , die nicht funktioniert und es kommt nur mit diesem zufälligen Text. Ich muss tatsächlich in das Objekt gehen, wo es Strings gibt, genau hier und hier. Wenn ich zurück zu unserem Projekt gehe, werde ich diese beiden Änderungen rückgängig machen und wir sind wieder da, wo wir angefangen haben. Wir können auch den Index untersuchen und vielleicht wollen wir Index in unserem Projekt verwenden. Ich werde nur noch einmal das Konsolenprotokoll verwenden. Wenn ich nun auf „Get Pokemon“ klicke, können Sie sehen, dass es die Indexnummer hat, die nur Null ist, wie viele es gibt. Eine andere Sache, die wir tun können, wenn wir eine Konsole sind, die mehrere Dinge protokolliert, weil wir vielleicht mehrere Dinge überprüfen möchten, ist, dass wir tatsächlich eine Zeichenfolge mit einer Variablen kombinieren können. Ich kann Index, Doppelpunkt setzen und dann ein Komma einfügen und dann den tatsächlichen Index einfügen. Wir können hier sehen, dass es uns Index sagt und es sagt uns den Wert, den wir ziehen. Dies sind ein paar Beispiele für die Verwendung des Konsolenprotokolls, um Dinge in Ihrem Code zu untersuchen und dann herauszufinden, wo Probleme auftreten, und ein wenig zu beheben, debuggen Sie ein wenig. Wenn Sie ein komplexeres Projekt aufbauen, müssen Sie komplexere Probleme lösen , und das ist nur die Natur der Bestie. Ich hoffe, dass dieses Video mit Ihnen einen vollständigen Prozess in JavaScript teilt , wenn Sie ein Problem haben und Sie keine Fehler zurück bekommen, wie Sie tatsächlich herausfinden würden, was tatsächlich in der Karte passiert und herauszufinden, was bestimmte Dinge verwenden Konsolenprotokoll. Das war die Bonusfolge. Ich habe, das war wertvoll. Im nächsten Video werden wir die Klasse abschließen und Sie werden mit Ihrem Klassenprojekt beginnen, wenn Sie es noch nicht getan haben. Ich werde Sie im nächsten Video sehen. 28. Schlussbemerkung: Ich hoffe, Sie sind jetzt bereit, etwas JavaScript in Ihre eigenen Webprojekte einzubinden. Wieder, wie ich in dieser Klasse erwähnt habe, ist es ein wenig schwierig, alles, was wir heute hier gelernt haben, in ein einziges Projekt zu bringen, aber ich hoffe, Sie nehmen das, was wir hier gelernt haben, und bauen einige Ihrer eigenen Website-Ideen auf. Oder fügen Sie einfach eine gewisse Interaktivität zu Ihrer bestehenden Website hinzu. Denken Sie daran, wenn Sie irgendwelche Tipps oder Anleitungen benötigen, achten Sie darauf, einen Kommentar in der Diskussionsbox zu hinterlassen, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Damit wird diese Klasse auf JavaScript abgeschlossen. Wie wir in dieser Klasse gelernt haben, ist JavaScript eine der drei Hauptsprachen, die wir verwenden, um am Frontend zu entwickeln Jetzt mit dieser Klasse und der vorherigen Klasse sollten Sie sich mit der Entwicklung für das Frontend sehr wohl fühlen. Natürlich wird es komplizierter, wenn Sie komplexere JavaScript-Frameworks wie React, Angular oder Backbone einbringen . Aber das ist ein ganz anderes Thema an sich und vielleicht ein Thema für zukünftige Klassen. Wie auch immer, Jungs, danke fürs Ansehen, und ich hoffe, Sie wieder in einigen anderen Klassen zu sehen.