AJAX mit JavaScrpt, lade JSON Daten dynamisch aus API | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

AJAX mit JavaScrpt, lade JSON Daten dynamisch aus API

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

66 Einheiten (9 Std. 22 Min.)
    • 1. 0 Einführung

      0:57
    • 2. 1 Code-Editor Einrichtung

      6:38
    • 3. 2 Einführung in JSON und AJAX

      11:28
    • 4. 3 JSON JavaScript

      16:43
    • 5. 4 JavaScript-Objekte und Arrays

      18:01
    • 6. 5 Strings zu Objekten JSON Parse

      6:21
    • 7. 6 AJAX

      13:35
    • 8. 7 AJAX Teil Teil

      7:46
    • 9. 8 JavaScript-Objekte

      15:16
    • 10. 9 JavaScript

      16:10
    • 11. 10 JavaScript-Methoden 2

      11:15
    • 12. 11 JavaScript DOM

      20:36
    • 13. 12 JavaScript DOM, Teil 2

      24:10
    • 14. 0 Einführung

      0:57
    • 15. 1 Web-APIs AJAX

      11:22
    • 16. 2 API mit with

      18:57
    • 17. 3 API mit Data StackExchange

      24:02
    • 18. 4 API mit Data GitHub

      24:53
    • 19. 5 JSON Platzhalter

      10:24
    • 20. 6 JSON Platzhalter CRUD

      21:36
    • 21. 7 JSON Platzhalter CRUD 2

      8:44
    • 22. 8 Mockend REST Server

      3:36
    • 23. 9 Node JSON Server

      7:32
    • 24. JSONAPI

      2:48
    • 25. 1 Einführung in die AJAX und JSON Kurs

      5:10
    • 26. Die Ressourcen zur Einrichtung der 2 Kurse

      4:20
    • 27. 3 Einführung in AJAX und JSON

      5:35
    • 28. 5 Die Einladungen

      7:41
    • 29. 7 Einführung in die Objektbereiche

      4:42
    • 30. 9 Looping durch die Objekte

      6:57
    • 31. 11 Lösung zur Herausforderung, Loop erstellen

      4:25
    • 32. 13 JSON Parse in JavaScript, die sich in JavaScript-Objekte interessieren.

      6:07
    • 33. 14 AJAX Connect zur Datei XMLHttpRequest

      6:37
    • 34. 15 Belaste externe Dateiinhalte in JavaScript

      6:15
    • 35. 16 Erstellen von JavaScript Object mit externen JSON

      5:46
    • 36. 18 AJAX Challenge

      2:36
    • 37. 19 HTTP erklärt

      6:15
    • 38. 21 Erstellung von PHP zum Empfang und Anrufen von Antwortdaten 21

      10:15
    • 39. 22 Daten über AJAX auf Server

      5:59
    • 40. 24 24 Get die Ausgabe von Postwerten für Benutzer

      3:14
    • 41. 25 Einrichtung von MySQL

      3:37
    • 42. 27 27 Füge die Daten in die MySQL von AJAX hineinzu

      9:32
    • 43. 28 Server als JSON

      10:51
    • 44. 30 einfache jQuery file

      5:30
    • 45. 32 jQuery Abforderung, die du herunterladen kannst, um Dateidaten zu ermitteln.

      4:19
    • 46. 33 Abhole JSON-Daten

      4:04
    • 47. 35 Postdaten zu Server jQuery AJAX

      11:29
    • 48. 36 Postdaten mit AJAX in der MySQL

      7:37
    • 49. 38 AJAX-Methode in jQuery

      9:51
    • 50. 40 jQuery AJAX

      4:45
    • 51. 41 Bereinigung von JavaScript Tipps

      5:13
    • 52. 43 Verwende PHP zur Erstellung von MySQL-Daten aus einer Datenbank in einem JSON-Format

      8:11
    • 53. 45 getJSON zum Erhalten von Database

      2:52
    • 54. 46 Datenbankinhalte auf der Webseite

      6:57
    • 55. 47 Code und Optionen

      3:45
    • 56. 49 Hinzufügen von jQuery Event-Listener

      3:17
    • 57. 50 Post mit jQuery auf dem Event

      10:08
    • 58. 51 Einrichtungsdaten für Setup

      7:52
    • 59. 53 Update mit HTML-Elementen

      4:27
    • 60. 55 Füge der Datenbank Inhalte hinzu

      7:37
    • 61. 57 Update für die Löschung

      5:23
    • 62. 58 Bereinigung von bereinigung Code jQuery Dies

      7:03
    • 63. 59 Server löschen, die aus der Datenbank löschen

      2:32
    • 64. 61 Post zum php löschen

      3:35
    • 65. 62 Update CSS für Projekt

      9:03
    • 66. 63 Kursübersicht

      6:56
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

293

Teilnehmer:innen

--

Projekte

Über diesen Kurs

AJAX JSON mit dem Programmieren von setup

AJAX JSON JavaScript Dynamische und interaktive Webinhalte

Lerne, wie du AJAX nutzst, um Daten auf deinen Webserver zu senden und die Reaktionsdaten wieder in deiner Webanwendung zu bringen. Entdecke JavaScript-Code, um dich mit Web-APIs zu verbinden und JSON Daten zurück zu deinen Webseiten, die die Daten in deine Website ausgeben. Dynamisch

  • Was ist JSON und wie es funktioniert

  • Wie du mit AJAX Server angehen kannst.

  • AJAX und welche Technologien machen AJAX

  • Wie du mit JavaScript verwenden kannst, um die DOM-Elemente zu aktualisieren.

  • Manipulate Elemente auf deiner Website mit dem Code.

  • Interaktive Webseiten – Hinzufügen und page

  • JSON Daten und Objects, Arrays und Datentypen

  • Ausgabe und Iteration von JSON-Daten

  • Verwendung von JavaScript innerhalb der Webseite

  • Erstellen interaktiven AJAX

  • Beispiel für beliebte web mit dir

Dynamische JavaScript AJAX JSON Einfacher
Anleitungen So kannst du mit AJAX Daten auf deinen Webserver verwenden und Antwortdaten zurück erhalten.

Erstelle fantastische dynamische Anwendungen, die die Daten zwischen deiner Datenbank und deinem html synchronisieren können.

Die Inhalte in diesem Kurs Einzigartig, die du nicht anderen Personen findest Wir zeigen dir, wie du in diesem Kurs ein benutzerdefiniertes Projekt aufbaust, das a mit dem Database für diesen Kurs Grundlegen: Grundlegende Programmierung, HTML, JavaScript (DOM) und
jQuery. Dies ist ein schneller Schritt, um die vordersten Verbindungen mit dem Back-End-Code zu machen.

In diesem Kurs geht es um die Erstellung von AJAX mit JavaScript. Bitte beachte die folgenden Themen, die behandelt werden.




Java-Objekte

ObjectsJSONAJAX GET und POST in
JavaScript, getJSON(), Post(), get(), ajax() In
jQueryMySQL und Abfragen zur Durchführung VON Abfragen

JSON ist ein hervorragendes Format für Daten, dessen menschliche lesbar und flexibel genug, um von den Strings in verwendbaren JavaScript-Objekten umgewandelt zu werden.

AJAX ist die perfekte Lösung für die Erstellung von Verbindungen zwischen Daten und web Du kannst deine Website hochladen, mit dem du die Seite neu lädtst, und deinen Webbesuchern ein nahtloses Erlebnis für deine Webbesucher. AJAX gibt dir die Möglichkeit, Daten von Servern und externen Dateien zu anfordern und zu empfangen. Das alles geschieht, nachdem deine Web-Seite geladen hat, und die Inhalte für die Web-Nutzer bereits sichtbar sind. Du kannst auch AJAX verwenden, um Daten auf einen Server zu senden.

Die Daten vom ersten Übertragen, das sie auf den Server zu senden ermöglicht die Tür, diese Daten mit Datenbanken zu verbinden und vieles mehr zu verbinden.

Dieser Kurs bietet Schritt für Schritt, um JSON und AJAX kennenzulernen. Das Zusammenfassen dieser Daten kann dir helfen, bessere Benutzererlebnisse und weitere Möglichkeiten für die Datenmanipulation in deinem JavaScript-Code zu entwickeln.

Im Kurs bereitgestellte




Code-Muster und Beispiele Die in diesem Kurs verwendete
Ressour, damit du auch mitmachen can und Herausforderung,
wobei du in deinem Code
mitzumachen, und VOR welchem Erweitere das Objekt mit Objektfeldern und object Lass dich durch die Objekte durchgehen und JSON-Daten ausgehen.

Er, wie du AJAX verwenden kannst, um externe Inhalte zu finden, einschließlich Datenbankinhalte, to und JSON-Daten zu finden. Durch das Hinzufügen von AJAX zu Web-Anwendungen kannst du unendliche Möglichkeiten. Dieser Kurs enthält auch mehrere Möglichkeiten, von JavaScript-Methoden mit jQuery.

Sieh dir, wie du PHP-Code an, um deine Web-Anwendungen zu supercharge Füge Daten in deine Datenbank ein, aktualisiere eine Datenbank und lösche Inhalte von einer Datenbank von allen von der Stirnseite von AJAX.

AJAX ist in Angriff und Lerne, wie du AJAX zusammen mit JSON und PHP verwendest, wird dich von den verschiedenen Elementen ausheben. Ich helfe dir, das Lernen zu lernen und dich bei Fragen zu beantworten, die du vielleicht hast.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. 0 Einführung: In diesem Abschnitt finden Sie einige lustige Projekte, mit denen Sie sich mit der Ausführung von Ajax mit JavaScript vertraut machen und Anfragen an verschiedene gängige Web-APIs stellen können. Es wird also einige der beliebten Web-APIs geben, z. B. die Verbindung zum Stack Overflow. Es gibt auch eine Verbindung zur GitHub-API, bei der es sich um sehr reichhaltige APIs mit viel Inhalt handelt. Es sind sehr große Objekte. Und Sie können all diese Inhalte in Ihre Praxiswebanwendung aufnehmen um sich damit vertraut die Daten aus dem JSON-Objekt herauszuholen und sie dann mithilfe von JavaScript auf Ihrer Webseite auszugeben. Es wird auch eine Verbindung zur zufälligen Benutzer-API und mehreren anderen beliebten APIs herstellen. Und das Ziel dieses Abschnitts ist es, zu üben und sich einfach besser mit der Arbeit mit JSON vertraut zu machen, diese Verbindungen herzustellen und diese JSON-Daten auf die Webseite auszugeben . Lasst uns anfangen. 2. 1 Code-Editor Einrichtung: In dieser Lektion werden wir erläutern, wie Sie den Code-Editor einrichten , den Sie in der kommenden Lektion verwenden werden , Visual Studio Code. Jetzt können Sie gerne Ihren eigenen Editor verwenden. In dieser Lektion erfahren Sie, wie Sie den Visual Studio-Code auf Ihrem Computer einrichten und dann auf den Live-Server zugreifen, dem Sie einen lokalen Host direkt auf Ihrem eigenen Computer ausführen können. Dies wird also einen Server simulieren, und das werden wir für die bevorstehenden Lektionen brauchen, da wir Ajax und JSON üben und Verbindungen zum Back-End-Code herstellen. Dies ist Visual Studio-Code , der auf der Website Code dot Visual Studio.com verfügbar ist . Und es kommt in Versionen von Mac, Windows und Linux. Also fahren Sie fort und laden Sie die Version herunter , die für Ihr Betriebssystem bestimmt ist. Und ich werde auf einem Mac sein, also lade die Mac-Version herunter und gehe durch das Installations-Setup. Es hat auch einige Dokumentationen. Es hat verschiedene Erweiterungen. Und eine der Erweiterungen , die wir uns ansehen werden, ist der Live-Server. Sobald Sie das installiert und eingerichtet haben, öffnen Sie Ihren Code-Editor und gehen Sie nach oben, wo die Einstellungen aufgeführt sind. Und wir werden uns unter Extensions ansehen. Sie können die Verknüpfung auch verwenden , um die Erweiterungen zu öffnen. Und ich habe eine Auflistung aller Erweiterungen , die ich derzeit installiert habe. Der, nach dem wir suchen werden, ist der Live-Server. Also habe das tatsächlich installiert. Wenn Sie also eine Erweiterung installiert haben, können Sie sie jederzeit deinstallieren oder neu installieren. Suchen Sie nach Erweiterungen und suchen Sie nach Live Server. Dies ist diejenige, die wir verwenden möchten. Es heißt Live Server von Rick Quick Day. Und Sie können einen lokalen Entwicklungsserver direkt in Ihrem Computer direkt vom Code-Editor aus starten einen lokalen Entwicklungsserver direkt in Ihrem Computer direkt vom . Sobald Sie es ausgewählt haben, können Sie die Installation durchführen, indem Sie auf die Schaltfläche Installieren klicken. Sie können es auch jederzeit deaktivieren oder deinstallieren. Und sobald es installiert ist, haben Sie Zugriff, um es zu verwenden. Gehen Sie zurück zur Homepage und Sie können jederzeit zur Begrüßungsseite unter der Registerkarte Hilfe oben zurückkehren zur Begrüßungsseite unter der Registerkarte Hilfe oben und dann zur Begrüßungsseite gehen. Und dies wird die Startseite für den Visual Studio-Code sein, wenn Sie ihn öffnen. Und es gibt hier die Möglichkeit, die Neue und dann auch die aktuelle Arbeit auszuwählen , die Sie geleistet haben. gibt es auch einige Optionen Hier gibt es auch einige Optionen für verschiedene Tools und Sprachen, Einstellungen und Schlüsselbindungen. Und Sie können Ihr Farbthema auch hier aktualisieren. Dann können diese alle auch im gesamten Layout angepasst werden . Es gibt also eine Reihe von Optionen, um das Aussehen Ihres Editors anzupassen. Also werden wir damit beginnen, eine brandneue Datei zu erstellen. Das kannst du auch machen. Unter der Registerkarte Datei oben im Menü erstelle ich einen Ordner namens Ajax. Dann werde ich in Ajax meine Dateien einrichten, wo ich damit beginne, eine Datei index.html zu erstellen. Dies wird als Front-End-Webseite dienen , die wir im Browser ausführen werden , um den JavaScript-Code zu rendern. Dies befindet sich also nur in einem brandneuen Ordner, den ich erstellt habe, namens Ajax diesen mit dem Visual Studio-Code speichern, Wenn Sie diesen mit dem Visual Studio-Code speichern, werden wir fortfahren und diesen zum Workspace hinzufügen . Wir fügen also einen Ordner zum Workspace hinzu, und Sie müssen dies tun, um den Live-Server auszuführen. Also gehe ich fort und wähle Hinzufügen aus. Und dann tippen wir hier einfach Hello World ein. Und wir können auch die Standard-HTML-Tags hinzufügen, einschließlich des Doctype, der wichtigsten HTML-Wrapper-Tags, Kopf-Tags und Titel-Tags. Wir erstellen unsere HTML-Seite , die als Startseite dienen wird , wenn wir den Live-Server, die Body-Tags, starten . Und dann verschiebe ich diese einfach nach unten , damit wir uns um die Hello World wickeln. Versuchen wir es jetzt. Live-Server zu starten und dieses Menü aufzurufen , können Sie mit der rechten Maustaste oder bei gedrückter Ctrl-Taste auf Ihren Mac-Computer klicken Wenn Sie die Statusleiste unten haben , können Sie sie unter dem Anzeigedarstellung auswählen. Dies gibt Ihnen eine Option für das Go-Live. Sie können das Häkchen deaktivieren und zeigen, wenn Sie möchten. Normalerweise habe ich es nicht angezeigt, aber es hat das Go-Live unten , wenn Sie es auf diese Weise starten möchten. Und Sie können auch mit der rechten Maustaste auf eine beliebige Stelle klicken , um mit Live Server zu öffnen. Solange Sie einen Ordner mit Hauptindexseite haben, können Sie den Live-Server öffnen und ausführen. Und dies wird standardmäßig innerhalb des Browserfensters geöffnet, das Sie derzeit geöffnet haben. Gehen Sie jetzt zum Hauptbrowserfenster zurück, gehen Sie zum Visual Studio und ich öffne das mit Live Server. Sie können die Verknüpfungen auch verwenden , um sie mit dem Live-Server zu öffnen. Und jetzt sehen wir, dass die Ausgabe der Webseite unter unserer lokalen Adresse angezeigt wird, die 1270018 ist, unter Verwendung von Port 5.500. Und Sie können den Port auch innerhalb von Visual Studio-Code mithilfe des HTTP-Protokolls anpassen . HTTP-Protokoll wird das sein , was sich vor einer IP-Adresse befindet. Und das ist die lokale IP-Adresse, HTML, die im Browser gerade gerendert wird. Wenn Sie es also innerhalb des Dateiprotokolls ausführen möchten, können Sie dies auf diese Weise tun. Beachten Sie, dass ich im Browser den Chrome-Browser verwende und darauf hinweist , dass er das Dateiprotokoll verwendet. Kennen Sie den Unterschied zwischen der Verwendung des Dateiprotokolls, wenn Sie den lokalen Pfad zu dem Ort haben , an dem sich die Datei auf Ihrem Computer befindet im Gegensatz zum HTTP-Protokoll, das das ist wir möchten, dass das nur eine IP-Adresse hat und das Stammverzeichnis des Ordners als Basisdomäne verwendet des Ordners als Basisdomäne und dann die HTML-Datei direkt danach anwendet. Das ist also diejenige, die wir wollen. Werfen Sie also einen Blick in den Browser und stellen Sie sicher, dass Sie bei der Ausgabe der Datei index.html das Dateiprotokoll nicht verwenden, damit es nicht angezeigt wird und Sie nicht den vollständigen Pfad dorthin sehen Die Datei befindet sich, weil wir den lokalen Computer in den kommenden Lektionen verwenden müssen , während wir unsere Ajax-Anfragen ausführen. Sobald Sie eingerichtet sind und die HTML-Datei auf dem lokalen Computer geöffnet wurde. Du wirst bereit sein, mit der nächsten Lektion fortzufahren. 3. 2 Einführung in JSON und AJAX: In dieser Lektion werden wir untersuchen, was JSON ist und wie es auf ein JavaScript-Objekt bezieht, werden ein schnelles Beispiel für JSON haben, und dann werden wir diese JSON-Datei mit JavaScript Fetch, das die Ajax-Anfrage erstellt und die Daten sendet, sammelt die Daten aus der Datei und lädt sie dann auf unsere Webseite. Wir können sehen, dass dieser Inhalt , der gerade im Browser angezeigt wird, aus der Datenpunkt-JSON-Datei stammt. Und es sitzt eigentlich nicht in der Anwendung, die geladen wird , nachdem die Anwendung die die Webseite geladen hat. Es zieht also dynamisch den Inhalt ein und der bereit ist, JavaScript auf unserer Webseite zu verwenden . Schauen wir uns JSON an und wie es sich auf JavaScript- und JavaScript-Objekte bezieht . Wir haben den Redakteur in allem geöffnet um ihn auf der linken Seite zu halten. Und ich werde das Browserfenster mit der Webseite auf der rechten Seite geöffnet haben . Dies ist die Seite index.html. Wenn ich Änderungen an der Indexseite vornehme, wird dies innerhalb des Browsers reflektiert. Ich werde auch Chrome verwenden, damit ich die DevTools im Chrome-Browser öffnen kann . Unter den weiteren Tools, Entwicklertools, können Sie dafür auch die Verknüpfung verwenden. Ich werde diese Anzeige hier unten auf der Webseite auf der rechten Seite haben . Und ich vergrößere die Größe der Entwickler-Tools. Dies ist im Chrome-Browser , in dem wir JavaScript ausführen können. So können Sie JavaScript erstellen und direkt im Browser ausführen. Und es wird auch die Ausgabe sein, es ist auch die Ausgabekonsole für JavaScript. Erstellen wir also unsere Skriptdatei und verlinken Sie auf app.js. Dies könnte die JavaScript-Datei sein, in der wir den Inhalt Creighton ausgeben werden. Im Moment haben wir keine App js , dort werfen wir den Fehler aus. Erstellen Sie diese brandneue Datei. Ich habe es als app.js im selben Ordnerverzeichnis gespeichert. Und jetzt kann ich mit dem Inhalt interagieren , der den JavaScript-Code lädt. Und wir wollten uns einen kurzen Überblick darüber verschaffen was JSON ist und wie es funktioniert. JSON ist also die Abkürzung für JavaScript-Objektnotation. Es ist also im Grunde ein für Menschen lesbares Textformat , das Smiths Daten über das Internet ausprobiert. Und normalerweise verwenden wir Ajax, um eine Verbindung zu einem Server herzustellen, und dann erhalten wir die Daten in einem JSON-Typformat zurück. Es kann auch ein XML sein. Aber jetzt wird JSON immer mehr benutzt. Wir werden den Kurs auf das Schreiben von JSON konzentrieren. Json ähnelt einem JavaScript-Objekt, bei dem es mehrere Datentypen enthalten kann. Wenn wir eine Variable namens data haben, können wir ein Objekt erstellen. Im Moment ist dies nur ein JavaScript-Objekt. Und da JSON und JavaScript sehr eng miteinander verwandt sind, gibt es einige Unterschiede. Während Sie bei JSON die doppelten Anführungszeichen mit den JavaScript-Objekten verwenden müssen doppelten Anführungszeichen mit den JavaScript-Objekten verwenden . Tust du nicht. Javascript-Objekt, das auch einem JSON ähnlich sein wird. Es wird JSON das JavaScript-Objekt formatiert , wobei erneut die doppelten Anführungszeichen verwendet werden. Und alle Objekte und Daten werden das sogenannte Namenspaar enthalten. Die Namenwerte mit den Paaren. Sie sind zusammen gepaart. Auf der linken Seite ist der Name. Auf der rechten Seite befindet sich der Wert. Und wir verwenden einen Doppelpunkt, dann die Mitte , um den Wert mit dem Namen zu verknüpfen. Die verschiedenen Datentypen , die gespeichert werden können. Wir haben also Strings, die innerhalb eines JSON-Formats gehalten werden können . Wir können auch einen booleschen Wert haben. Das sind also diejenigen, die entweder wahr oder falsch sind. Und dies ist Groß- und Kleinschreibung zu beachten. Und ich schreibe es nur mit Kleinbuchstaben. Das trifft also zu. Dies ist also ein boolescher Wert, Zahlen oder Ganzzahlen. Innerhalb des Datenobjekts selbst. Es kann auch Arrays halten, und diese sind mit eckigen Klammern gekennzeichnet. Und Sie würden die Anzahl der Elemente innerhalb des Arrays auflisten , die es mit dem Komma trennen. Und dann können wir diese mit dem Index aufheben. Ich gebe Ihnen ein Beispiel dafür. Und dann hat jedes dieser Objekte, das durch ein Komma getrennt werden muss, Objekte innerhalb des Objekts selbst. Sie können ziemlich komplex werden, wo Sie eine Kombination aus Arrays und Objekten haben können , ähnliche Beispiele dafür später. Und die Struktur wird immer dieselbe sein , wo wir den Namen und dann den Wert auf der rechten Seite haben . So verweisen wir also auf den Inhalt des Objekts. Und ich werde einfach noch eins erstellen. Und wir können fortfahren und wir können dieses JavaScript-Objekt auf der HTML-Seite speichern JavaScript-Objekt auf der HTML-Seite und wir werden es uns im Browser ansehen. Wir machen eine Aktualisierung und schauen uns Daten an, und die Daten werden in dieser Art von Format zurückgegeben. Das ist das Gleiche, was du mit dem JSON sehen wirst. Und wir sehen, dass wir Zugriff auf einen der Werte erhalten können , indem wir die Daten, Altersdatenkurse, Daten , Daten von Freunden usw. auswählen. Wenn wir den Datenwert von first sehen wollen, können wir den Datenwert von first zurückgeben. Wir können auch die Punktnotation oder die Klammernotation verwenden. Normalerweise verwenden Sie die Punktnotation, aber bei JSON-Objekten können Sie auch Leerzeichen innerhalb der Namen haben. Manchmal müssen Sie also die Klammerschreibweise verwenden. Sie können einen von ihnen benutzen. Es wird denselben Wert referenzieren und zurückgeben , der mit dem Namen verknüpft ist , den Sie innerhalb des Datenobjekts referenzieren. Es gibt also eine Reihe von Websites, auf denen Sie JSON fusseln können. Und im Grunde bedeutet das, dass Sie validieren können , dass dies eine gültige JSON-Struktur ist. Was ich tun werde, ist, dass ich das gerade erstellte JavaScript-Objekt nehme . Und ich werde es dem JSON-Fussel überbringen. Und wenn JSON-Fusseln nicht verfügbar ist, gibt es eine Reihe anderer Websites, die dasselbe tun. Sie müssen nur Google einen JSON-Validator durchsuchen, und es gibt eine Reihe von ihnen in der Leitung. Wenn Sie in Ihr JSON-Objekt eingefügt haben, können Sie JSON validieren drücken. Und du wirst sehen, dass es sich um einen gültigen JSON handelt. Wenn Sie also einige der Zitate ausgelassen hätten, erhalten Sie einen Fehler. Es gibt Ihnen einen Hinweis darauf , um welche Art von Fehler es sich handelt und wo es sich um den Fehler innerhalb des Codes handelt. Und wenn wir jetzt die Anführungszeichen entfernen, wird es kein gültiges JSON-Objekt sein, aber es wird immer noch als gültiges JavaScript-Objekt bleiben . Das ist einer der wichtigen Unterschiede , dass dies in JavaScript immer noch gültig sein wird. Selbst wenn wir es nicht zitiert haben, aber innerhalb von JSON ist es das nicht. Json hat ein strengeres Format als wir es mit JavaScript haben. Die zweite Technologie , die wir uns ansehen werden , ist Ajax. Ajax ist die Abkürzung für asynchrones JavaScript XML. Es wird darauf hinweisen, dass hier anstelle der Halloworld Ajax aufschreiben wird. Und dafür wird es kurz sein. Asynchrone JavaScript und XML. Aber obwohl wir jetzt mehr JSON verwenden, haben wir ein Akronym und dann haben wir ein anderes Akronym. Manchmal sieht man vielleicht, dass Ajax auf einen Jock oder so bezieht, aber am häufigsten bezeichnen wir es immer noch als XML, obwohl wir jetzt überwiegend JSON-Daten verwenden, ist Ajax eigentlich kein Sprache. Es sind Webentwicklungstechniken viele Webtechnologien , die auf Clientseite arbeiten und asynchrone Webanwendungen erstellen. Das bedeutet also, dass innerhalb der Webanwendung Verbindung hergestellt wird und wir Daten laden. Damit wir Daten senden können, können wir Daten von einem Server im Hintergrund abrufen und abrufen , ohne die Anzeige der Webseite zu beeinträchtigen. Was wir haben, ist nur eine Möglichkeit , dies auszulösen und dann damit zu interagieren. Und was das bedeutet, ist, dass die Webseite tatsächlich aktualisiert eine dynamische Webseite erstellt wird, die Daten aus externen Quellen lädt , je nachdem, welche Interaktionen des Benutzers und der Code angefordert wird. Es kopiert die Datenaustauschschicht tief von der Präsentationsebene und ermöglicht es Webseiten, Inhalte dynamisch zu ändern , ohne die gesamte Seite neu laden zu müssen . Was wir tun werden, ist, dass wir dieses JavaScript-Objekt speichern eine brandneue JSON-Datei erstellen. Ich nenne es Data Dot JSON. Dies wird also eine gültige JSON-Datei sein. Dann verwenden wir das JavaScript, um eine Verbindung herzustellen und diesen Inhalt in Daten zu laden, den Wert der Daten zu löschen und zu speichern. Im Moment haben wir für Daten keine Werte. Und wir möchten uns mit unserer JavaScript-Datei verbinden und Inhalte hineinladen. Ajax stellt eine Verbindung zu einer externen Datei und lädt diese Daten dann in die Seite. Und wir werden eine Funktion verwenden, eine Methode namens fetch. Und ich richte einige der Parameter ein. Fetch erfordert den einen Parameter, der die Web-URL sein wird. Und derzeit, da sich die Datei im selben Ordner wie unsere Indexdatei befindet , können wir sie einfach als JSON, data, JSON bezeichnen. Es wird also unsere Web-URL sein. Also stellen wir eine Abrufanfrage. Holt Versprechen Abstand ab. Es wird die Ergebnisse zurückgeben , sobald die Anfrage abgeschlossen ist. kehren zurück und wir haben eine Antwort Spock. Dann können wir diese Antwort annehmen und sie an den nächsten Teil der Versprechen zurückschicken. Wir müssen das Format angeben , das wir abrufen möchten. Und ich werde das später ausführlicher behandeln . Und sobald die Antwort die Daten enthält, wird das Versprechen abgeschlossen und es wird letztendlich die Daten an die Konsole senden. Also können wir es uns im Terminal ansehen . Also lasst uns das speichern und wir sehen, dass wir diese Ausgabe bekommen. Die Ausgabe befindet sich nicht innerhalb eines JavaScript-Objektformats, daher können wir sie nicht referenzieren oder wir können sie nicht als Daten verwenden , da sie im Textformat-Batch zurückgegeben Es gibt einige Optionen und ich werde einfach daher können wir sie nicht referenzieren oder wir können sie nicht als Daten verwenden, da sie im Textformat-Batch zurückgegeben wird. Es gibt einige Optionen und ich werde einfach einrücken, damit es ein bisschen einfacher zu lesen ist. Anstatt es also als Text zurückzuholen, können wir, wenn wir wissen, dass wir JSON-Daten erwarten, als JSON referenzieren. Und jetzt sehen wir, dass der Browser die Struktur tatsächlich ändert und in dieselben Daten lädt . Das JavaScript-Objekt , das wir zuvor gesehen haben Es wird also aus dieser externen Datei geladen. Und das bedeutet, dass wenn ich eines davon ändere, Inhalt der neuen Datei geladen wird. Und dann wäre der nächste Teil von Ajax, diesen Inhalt zu nehmen und auf die Seite auszugeben. Und natürlich werden wir später in den kommenden Lektionen mehr davon behandeln . 4. 3 JSON JavaScript: Diese Lektion wird ein Beweis dafür sein, wie wir JavaScript-Objekte verwenden und den Inhalt des JavaScript-Objekts auf unsere Webseite ausgeben können JavaScript-Objekte verwenden und den Inhalt des JavaScript-Objekts auf unsere Webseite ausgeben . Was wir verwenden, ist das Dokumentobjekt. Und dies ist auch ein Objekt, das vom Browser generiert wird. Und es kann mit JavaScript zugegriffen werden. Und das gibt uns die Möglichkeit zu interagieren, den Inhalt der Webseite zu aktualisieren sie sogar zu manipulieren. Wenn Sie sprechen würden, das Dokument anzuheften, würden Sie sehen, dass es die gesamte Webseite und den gesamten Inhalt davon in der Konsole zurückgibt die gesamte Webseite und den gesamten Inhalt davon in der Konsole . Es ist eine virtuelle Darstellung des HTML-Codes. Und dann kann JavaScript mit diesem Objekt interagieren, die Daten aktualisieren und manipulieren und auch Ereignis-Listener erstellen. Wir wählen die zweiseitigen Elemente aus. Also haben wir Ausgabe eins und geben zwei aus. Diese geben uns also Container auf der Seite, in denen wir Inhalte ausgeben oder ein Objekt konstruieren können , ein ziemlich komplexes Objekt, das ein Array hat, Strings, Zahlen sowie Booler. Dann werden wir auch mit einigen kleineren Objekten arbeiten. Und unter Verwendung der Werte, die in diesen Objekten enthalten sind, werden wir sie auf der Seite ausgeben und auch die Vorteile der Verwendung der Bracket-Notation im Gegensatz zur Punktnotation zur Auswahl der Werte besprochen der Bracket-Notation im Gegensatz zur vom Objekt aus. In dieser Lektion werden wir uns JavaScript-Objekte ansehen. Also verwenden wir die Datei index.html, eine brandneue App erstellt, drei Punkte JS. Hier wird unser JavaScript also hingehen und hier werden wir das JavaScript für diese Lektion präsentieren . Wenn ich also ein div erstelle, weise ich eine Ausgabeklasse zu. Dies gibt uns also einen Container , in den wir Inhalte aus JavaScript aus unserem JavaScript-Code ausgeben können . Und dies ist auch in Vorbereitung, um mehr darüber zu erfahren , was mit Ajax möglich ist. Der Live Server wurde gestoppt und ich öffne den Live-Server erneut. Wir haben das Beispiel der Webseite auf der rechten Seite, den Code auf der linken Seite , der im Code-Editor geschrieben wird. Ich werde auch die Entwickler-Tools mit dem Inspect öffnen, der die Dev-Tools-Konsole öffnet. So können wir auch interagieren und die Ausgabe aus dem JavaScript sehen. Zunächst möchten wir das Element auswählen, und ich gebe ihm einfach einen Variablennamen der Ausgabe. Sie mithilfe der Dokumentabfrageauswahl das Element mit einer Ausgabeklasse aus. Dies gibt uns einen Container, in dem wir Inhalte mit JavaScript aktualisieren können . Um Inhalte zu aktualisieren , die sich innerhalb eines Elements befinden, können wir ihm einfach TextContent zuweisen. Und wie wir sehen, wird die Seite das dynamisch aktualisieren. Dies ist nicht im HTML. Es ist mit JavaScript fertig. Und das wird Teil des Ajax-Prozesses sein, bei dem wir den Code mit JavaScript im Hintergrund laden . Und dann geben Sie es ehrlich gesagt auf der Seite mit dem Document Object Model aus, dem Browser repr, Darstellung des HTML-Codes. Und hier kann JavaScript ins Spiel kommen und Aktualisierungen an diesen Inhalten vornehmen. Also wollen wir eigentlich nicht Hallo dorthin bringen. Das war nur eine Demonstration. Ich werde das innerhalb des JavaScript-Codes kommentieren. Wir wollen ein Objekt erstellen und müssen es einfach als mein Objekt bezeichnen. Geben Sie ihm einen Variablennamen und Sie können const verwenden. Wie bei Objekten. In JavaScript verweisen Objekte auf einen Speicherort, und deshalb schreiben wir JavaScript, wenn wir mit einem Objekt verbunden sind, z. B. eines der Elemente auf der Webseite. Wir können es auch aktualisieren, manipulieren, obwohl wir es mit dem Schlüsselwort const deklarieren. Das deutet also darauf hin, dass es sich nicht ändern soll. Solange wir dieses Objekt noch referenzieren , können wir die im Objekt enthaltenen Elemente manipulieren. Und es wird immer noch auf dasselbe Objekt verweisen. Wir können dasselbe Objekt aus mehreren Variablen innerhalb der JavaScript-Seite referenzieren innerhalb der JavaScript-Seite , nur um dies ebenfalls zu demonstrieren. Es erstellt also eine Variable namens div und verwendet dann den Dokumentabfrage-Selektor, das Element div ausgewählt wird. Wir haben also nur einen auf der Seite. Das wählen wir aus. Und wenn wir den Inhalt von DIV eins aktualisieren, also wenn wir den Textinhalt aktualisieren würden, um Hallo div zu sagen und das zu speichern. Wir werden die Ausgabe von hallo div erhalten, aber es referenziert immer noch denselben Ausgabebereich. Wenn wir Punkt, Punktelement referenzieren , wird es auf dasselbe verweisen , das gerade aktualisiert wurde. Sie verweisen also beide auf dasselbe Objekt. Und das liegt daran, dass es auf den Speicherort verweist , der im Dokumentobjekt gespeichert ist . ein Objekt in JavaScript erstellen, verwenden wir die geschweiften Klammern mit dem Objekt selbst. Wir können mehrere Werte in diesem Objekt enthalten. Wenn wir eine Freundesliste hätten. Das wird also ein Array sein und den Doppelpunkt benutzen. Wir haben also den Wert auf der rechten Seite und den Namen der Eigenschaft auf der linken Seite. Dies gibt uns die Möglichkeit , ein Array zu haben. Das Array kann auch mehrere Objekte enthalten. Wenn wir Objekte in dieser Art von Struktur hätten, können wir sie ausgeben. Füllen wir einige Inhalte innerhalb des Objekts aus. Jetzt haben wir also nur den einen Eigenschaftswert des ersten. Wir können später so viele hinzufügen, wie wir wollen. Solange wir immer noch denselben Schlüssel verwenden , wird es einfach sein , wenn wir durch das Array gehen , um die Objektinformationen auszuwählen. Ich ändere einfach die Namen hier und speichere sie. Wenn wir jetzt auf mein Objekt verweisen , können wir sehen, dass wir innerhalb meines Objekts ein Array, das Array eines Freundes haben und dass das Freundes-Array mehrere Elemente im Objekt enthält. Ich gebe dir noch ein paar Beispiele für Objekte. Erstellen Sie also ein anderes Objekt. Dieses Objekt wird, da wir die doppelten Anführungszeichen verwenden, auch für JSON formatiert. Dies ist auch ein gültiges JSON-Format für die Anwendung. Sobald es in JavaScript enthalten ist, können Sie entweder ein JavaScript-Objekt oder ein JSON-formatiertes Objekt verwenden . Es wird es genauso lesen. Dies ist in Vorbereitung, wo wir die JSON-Daten abrufen werden. Es sind also alles ein bisschen die benannten Paarwerte. Also erstellen wir innerhalb eines Objekts mit den geschweiften Klammern und dann können wir die verschiedenen Namen auflisten. Wenn wir also im ersten Beispiel einen Namen haben, ist dies nur der einzige Gegenstand innerhalb der Objekte. Dies werden also alle verwandte Werte zu diesem ersten Punkt sein . Auf diese Weise ist dies auch ein Objekt, aber es wird nur das eine Objekt darin haben. Und dies ist ein Beispiel oben , in dem wir ein Objekt haben, das ein Array enthält, das mehrere Objekte darin enthält. Der Vorteil, es mit dem Array innerhalb der Objekte zu haben dem Array innerhalb der Objekte besteht darin, dass Sie dort auch verschiedene Werte anwenden können. Auf der Wurzel können wir alle Freunde auflisten lassen. Sie können auch eine andere für meine Daten haben, oder Sie könnten einfach meinen Namen haben. Dies kann also nur auf einen Zeichenfolgenwert verweisen. Dann können wir insgesamt haben. Dies kann also auch ein ganzzahliger boolescher Wert sein. Daher wird die Groß- und Kleinschreibung beachtet. Stellen Sie also sicher, dass Sie alle Kleinbuchstaben verwenden, es sei denn, es wird erneut innerhalb des JSON gültig sein. Hier haben wir also ein Beispiel für eine Array-Zeichenfolge, eine Ganzzahl sowie einen booleschen Wert. Und alles, was Sie tun müssen, ist Komma, trennen Sie sie. So wie wir hier unten sehen , wo wir zuerst und zuletzt haben, wird dies die gleiche Idee sein außer dass wir arbeiten, anstatt eine Reihe von Boolean oder eine Ganzzahl zu haben, wir haben hier ein Array. Und dann hat dieses Array zufällig eine Reihe von Objekten als Elemente innerhalb des Arrays. Was wir tun wollen, sobald wir es im JavaScript-Objektformat haben , das bedeutet, dass wir es auf unserer Webseite nutzen können. Ich erstelle einen zweiten Ausgabebereich. Und ich nenne diese Ausgabe eins, Ausgang zwei. Ich aktualisiere den Code entsprechend. Ich werde diesen Teil kommentieren , weil wir ihn nicht mehr brauchen. Wir werden sie als brauchbare Variablen innerhalb des JavaScript auswählen . Auf diese Weise können wir sie mit dem einen Variablennamen referenzieren . Wenn wir also einen Teil des Inhalts, den wir in einem dieser Objekte haben, auf die Seite ausgeben möchten , können wir den inneren Text, den inneren HTML-Code aktualisieren , und es gibt eine Reihe von Wellen, um den Inhalt auszugeben. Wir wählen das Containerelement und legen die textinhalts-Eigenschaft dieses Containerelements fest. Also lasst uns zuerst mein Objekt eins benutzen. Wie würde ich den Vor- und Nachnamen des Inhalts meines Objekts ausgeben ? Ihre Referenz, der Hauptobjektname , der mein Objekt ist. Und ich werde die eckigen Klammern in diesem Beispiel verwenden. Sie haben auch die Möglichkeit, die Punktnotation zu verwenden. Das zeige ich dir also auch. Und weil dies eine Zeichenfolge ist, verketten wir sie zusammen. Ich füge dort einfach einen Raum hinzu. Und um dann den zweiten Gegenstand mit einem Schlüssel von letzter zu erhalten, können wir ihn auch innerhalb der Klammerschreibweise referenzieren. Und speichern Sie das einfach, ich setze die Ansicht auf den Zeilenumbruch , damit wir die gesamte Aussage auf der Seite sehen können . Jetzt wurde unsere Ausgabe eines Elements aktualisiert und wir erhalten den Inhalt, der von diesem JavaScript-Objekt stammt, das der Inhalt des Maya-Objekts ist. Lasst uns diese zweiten Elemente aktualisieren. Also haben wir auch Output zu. Und dieses Mal werden wir die Syntax mit der Punktnotation verwenden . Es gibt einige Einschränkungen bei der Punktnotation sowie einige Vorteile für die Bracket-Notation. Welchen Sie sich auch entscheiden. Ich gebe dir noch ein paar Beispiele dafür. Jetzt haben wir die Ausgabe. In Textinhalt. Und ich zeige dir, wie das mit der Punktnotation funktioniert. Sie dann auch zum letzten Mal sicher, dass dort keine Leerzeichen vorhanden sind und wir keines der Zitate benötigen , die denselben Inhalt ausgeben. Und wenn wir Änderungen daran vornehmen, wird sich das auch innerhalb der Ausgabe beider ändern . Wenn wir sehen wollten, was der Unterschied zwischen der Klammerschreibweise und der Punktnotation ist. Die Bracket-Notation ist also viel dynamischer und ermöglicht es uns auch , Objekte mit den Leerzeichen innerhalb der Namen zu haben . Wenn wir zum Beispiel etwas wie FirstName, LastName hätten , geben wir ihm einfach den Namen von Objekt zwei. Und wenn wir nun den Inhalt mit den Schlüsselnamen ausgeben , beachten Sie, dass sich dort ein Leerzeichen befindet. Das wird bei der Punktnotation nicht gut funktionieren. Und ich sperre diese einfach in die Konsole. Wir können auch den Inhalt meines Objekts abrufen. Aber mit der Bracket-Notation können wir den Vornamen erhalten, der funktioniert. Aber was passiert, wenn wir versuchen, die Punktnotation zu verwenden? Und Sie werden sehen, dass dies einen Fehler auslösen wird , da wir die Leerzeichen innerhalb des Objektnamens nicht behandeln können. Es wird einen Fehler auslösen, weil es nicht versteht , wie man die Räume verwaltet. Es sucht nach einem Objekt, bei dem mein Objekt zuerst zwei Punkte hat, und es verwaltet die Leerzeichen nicht. Wenn Sie Leerzeichen innerhalb des Objektnamens haben, sollten Sie die Klammerschreibweise verwenden. Json unterstützt diese Art von Struktur auch dies. Sie werden sehen , dass Sie dieses CamelCase verwenden, wenn wir diese Art von Eigenschaftsnamen haben dieses CamelCase verwenden, wenn wir diese Art von Eigenschaftsnamen . So können wir den Nachnamen innerhalb der Punktnotation verwenden . Das wird so funktionieren. Die andere Sache mit der Bracket-Notation, wir können auch eine dynamische Auswahl davon haben , da alles, was sie erwartet hier in einem String-Wert liegt. Wenn wir zum Beispiel eine Variable haben, ist diese Variable zufällig Vorname. Wir können die variable Zeichenfolge verwenden. Was wir aus dem Objekt auswählen möchten. Verwenden Sie das Objekt erneut. Und wir versuchen einfach dasselbe Beispiel und zeigen Ihnen den Unterschied zwischen der Punktnotation in der Klammerschreibweise. Hier für Objekt zwei können wir es als String referenzieren und einfach den Wert verwenden. Aber wenn wir versuchen, es mit der Punktnotation zu tun , wird ein Fehler ausgelöst. Oder es wird den Wert nicht finden können und er wird undefiniert zurückgegeben, da es keinen Wert gibt , der diesem Namen entspricht. Weil wir es wieder sind, haben wir den Platz da drin. Wenn ja, verwenden Sie eine dynamische Methode, um den Wert auszuwählen? Die Bracket-Notation akzeptiert String-Werte, was ein deutlicher Vorteil ist, wenn wir versuchen, darauf zuzugreifen. Und vielleicht haben wir dies dynamisch innerhalb des Codes aktualisiert, und das ermöglicht es uns immer noch, es mit der Zeichenfolge auszugeben. Dies sind nur einige Beispiele dafür, wie Sie die JavaScript- und JavaScript-Objekte verwenden und den Inhalt mithilfe der Klammer-Notation oder der Punktnotation auf der Seite ausgeben können. Probieren Sie es also aus und geben Sie es aus, wählen Sie aus, erstellen Sie einige Seitenelemente. Wählen Sie sie im JavaScript-Code aus. Erstellen Sie einige Objekte, um den Inhalt der Objekte auf die Seite auszugeben . Verwenden Sie sowohl die Klammer-Notation als auch die Punktnotation, eines der komplexeren Objekte wie mein Objekt, und wählen Sie eine Ausgabe von dort auch auf der Seite aus. Lasst uns also den Aufnahmeausgang eins aktualisieren. Und ich stelle einfach den Textinhalt von Ausgabe eins ein. Dieses Mal benutze ich mein Objekt. Wir werden den ganzen Weg nach unten zum Wort John navigieren . In meinem Objekt haben wir den Eigenschaftsnamen „Freunde“. Wir können die Klammer-Notation verwenden , um Freunde auszuwählen. Was wir dann wollen, möchten wir die ersten Freunde auswählen. Das ist also ein Array. Auswahl des ersten Freundes innerhalb des Freundes-Arrays. Dies wird immer noch als Objekt zurückkommen. Innerhalb des Freundes-Arrays. Wir wählen den ersten Freund aus. Eigentlich möchten wir diejenige mit dem Indexwert von zwei auswählen . Dann wird das Eigentum des Freundes zuerst sein , dass wir zurückkommen wollen. Und ich gehe durch, wie ich auswähle, treffe die Auswahl, die den Namen John ausgibt , der von diesem komplexeren Objekt stammt. Darüber hinaus ist eine der Möglichkeiten, wie ich normalerweise ein komplexeres Objekt durchquere, und Sie können dies auch in Ihrem Browser tun. Wenn Sie also das Objekt haben, können Sie es auflisten. Und dann können Sie von hier aus alle Werte und Eigenschaftsnamen der Werte abrufen, die im Objekt enthalten sind. Ich weiß also, wenn ich mein Objekt auswähle, wenn ich meinen Namenswert möchte, kann ich das ausgeben. Wenn ich mein Objekt auswähle und wenn ich Freunde auswähle, wird das ein Array zurückgeben. Und genau wie bei jedem Array können wir den Index verwenden, um das gewünschte Objektelement aus dem Array abzurufen. Und in diesem Fall können wir den ersten auswählen. Und dann mit get, kehren Sie über den Eigenschaftsnamen zuerst zurück. Und es wird den Namen Mike zurückgeben. Wenn wir das dritte Element zurückgeben wollen, das einen Indexwert von zwei hat und den Eigenschaftsnamen zuerst erhält, können wir das zurückgeben und dort bekommen wir John. Das wird mit dem übereinstimmen, was wir für die Ausgabe tun und sie auf die Seite ausgeben. Für dieses komplexere Objekt ist es wichtig, sich mit diesen komplexen Objekten vertraut zu machen , da viele JSON-Daten und komplexere Formate und Strukturen erscheinen werden . Und es wird Sie herausfordern , nach unten zu navigieren und die richtigen Werte auszuwählen , mit denen Sie arbeiten und auf Ihre Seite ausgeben möchten. 5. 4 JavaScript-Objekte und Arrays: In dieser Lektion werden wir Arrays und dann auch Objekte behandeln und wie wir den in den Arrays enthaltenen Inhalt durchlaufen und abrufen und diesen Inhalt auf der Seite ausgeben können den Arrays enthaltenen Inhalt durchlaufen und abrufen . Also wählen wir das Seitenelement aus, wir erstellen ein einfaches Array, das verschiedene Datentypen enthält und diese Datentypen dann ausgeben wird . Ich zeige dir, wie du es mit einer for-Schleife machen kannst. Und dann, äh, für jeden, und erstellen Sie dann ein komplexeres Objekt , das ein Array von Objekten enthalten wird. Und beachten Sie, dass die Struktur trotzdem gleich sein wird, was es uns leicht machen wird , wenn wir dieses Array durchlaufen und es auf der Seite ausgeben. Also als Musik, um die Werte auszuwählen , um diese Werte in unserem Code zu verwenden. Sowohl Objekte als auch Arrays können mehrere Werte enthalten. Lassen Sie uns ein paar Beispiele für ein Array und dann auch für ein Objekt machen. Die Idee für ein Array ist also , dass wir die eckigen Klammern verwenden und mehrere Elemente innerhalb des Arrays enthalten können. Und dann können wir sie mit dem Indexwert referenzieren. Und der Indexwert ist nur die Reihenfolge , in der der bestimmte Wert erscheinen wird. Und dies kann auch Objekte enthalten und Arrays enthalten. Wir haben eine Vielzahl verschiedener Datenwerte, die wir hier verwenden können und auch Arrays enthalten können. So können Strahlen in Arrays verschachtelt werden. Wir können auf die Werte dieser Artikel zugreifen. Werfen wir einen Blick darauf und wir werden sehen, wie das Array im Terminal aussieht. Ich werde das etwas größer machen damit es ein bisschen einfacher ist, dieses spezielle Array zu sehen. Wir haben also eine Längeneigenschaft und alle Strahlen werden mit einem Längenwert geliefert. Mit dem Array können Sie die Länge jederzeit zurückrufen, können Sie die Länge jederzeit zurückrufen da dies eine Standardeigenschaft des Arrays ist. Es wird Ihnen also im Grunde sagen wie viele Elemente es innerhalb des Arrays gibt. Und das liegt nur an den Wurzeln, also wird es das nicht zählen. Es hat ein anderes Array und dann gibt es einige Elemente in diesem Array. Wir müssten auf dieses Array zugreifen , um die Länge der Anzahl der Elemente innerhalb dieser bestimmten Rate herauszufinden , die in unserem Haupt-Array verschachtelt ist. Und das siehst du in der Konsole, wo es den Link gibt. Dieser spezielle hat also drei Gegenstände und es ist nur 012. Wir können auch auf den Wert der Länge dieses bestimmten Arrays zugreifen . Also lasst uns das machen. Und dazu müssen wir das Element nach seinem Indexwert auswählen. Und Arrays beginnen mit dem Indexwert von 0. Wenn wir also einen Items haben, der mit 0 beginnt, bedeutet das, dass der letzte einen Indexwert von sieben hat. Mal sehen, ob das stimmt. Und Sie können sehen, dass im Terminal und der Konsole das bestimmte Array ausgegeben wird. Also lasst uns das benutzen. Und hier, wenn wir die Länge der Elemente in diesem Array ermitteln wollen , können wir dies auf diese Weise tun und wir können den Eigenschaftswert von drei zurückgeben , da sich drei Elemente in diesem verschachtelten Array befinden. Lasst uns das Terminal räumen. Sie können das Terminal mit den abgerundeten Klammern löschen oder die klare Konsole hier oben drücken, oder Sie können die Tastenkombinationen verwenden, um den Inhalt der Konsole zu löschen. Lassen Sie uns nun tiefer in die Auswahl einiger Inhalte von hier aus eingehen. Wenn wir die Artikel haben, wenn wir wieder auf den Wert von zuerst zurückkehren wollen, ist das relativ einfach, da wir einfach eine Auswahl mit dem Indexwert treffen können . Ich richte eine Variable ein. Dann aktualisieren wir den Wert der Variablen. Das wird jetzt einfach ins Terminal ausgegeben. Im Moment setze ich den Wert einfach auf „None“. Und innerhalb des Terminals oder der Konsole verwenden wir das Konsolenprotokoll, um den Wert auszugeben. Dies wird also den Wert von Val darstellen. Und jetzt wählen wir einige der Elemente innerhalb des Arrays aus. Wenn wir das erste auswählen möchten, wie weisen wir den Wert von Val als erstes Element innerhalb des Arrays zu? Arrays basieren auf Null und beginnen daher mit dem Index von 0. Wenn es sich also um eine Zeichenfolge handelt, die wir zuweisen möchten, ist es relativ einfach, wo wir einfach die Zeichenfolge auswählen , um zu dem zu gelangen , was tatsächlich der Indexwert von einem sein wird. Dadurch wird das zweite Element innerhalb des Arrays zurückgegeben , das den Wert zwei hat. Um die komplexeren zu bekommen. Gehen wir bis zu sechs. Dies wird ein Objekt zurückgeben. Für das Objekt selbst. Es kann mehrere Elemente innerhalb dieses Objekts enthalten, und alle werden mit dem Namen referenziert , um den Wert aus dem Inhalt des Objekts zu erhalten . Wenn wir in diesem Fall den Namen Lawrence zurückgeben wollen , könnte er sehr gut mehrere Werte haben. Und ich kann einfach anfangen, zuerst einen zu erstellen. Wenn wir den ersten auswählen wollen, wie würden wir das dann machen? Wir müssen auf den Eigenschaftsnamen verweisen, wie wir es zuvor bei den Objekten in der letzten Lektion gesehen haben, wir können die Klammerschreibweise oder die Punktnotation verwenden. Wenn Sie also zuerst auswählen, wird dieser bestimmte Wert zurückgegeben. Weisen wir es zu. Das ist mein voller Name dort. Und das gibt es zurück. Wir können auch noch tiefer gehen, wenn wir zu Inhalten zurückkehren und durch ihn navigieren. Und es ist wichtig , das auszuprobieren. Erstellen Sie also ein Array und erstellen Sie dann einige Objekte und Arrays darin. Und Sie können dort auch zusätzliche Objekte und Arrays verschachteln . Einer der Vorteile eines Arrays gegenüber einem Objekt besteht darin, dass diese Elemente innerhalb des Arrays sind. Es ist also viel einfacher zu durchlaufen, da es nur eine Zählung des Indexwerts ist. Wir wissen, dass wir bei einem Array den Index verwenden , der ein numerischer Wert ist. Und wir wissen, dass wir so viele Elemente haben, und wir können sie einfach durchzählen und auf den Inhalt zurückverweisen. Gehen wir zurück und wählen den Indexwert von sieben aus, das Array zurückgibt , das die mehreren Elemente enthält. Je nachdem, was wir zurückgeben möchten, würden wir den Indexwert verwenden, um den zugehörigen Wert zurückzugeben, bei dem es sich alle um Zahlen handelt. Und sie entsprechen tatsächlich den Indizes. Moment suchen wir in meinem Array, wo wir das Element verwenden, das Element mit dem Indexwert von sieben zurückgeben, was dieses gesamte Array sein wird. Und dann wählen wir aus diesem Array das Element mit dem Indexwert von einem aus, der das zweite Element im Array sein wird. Und so können wir diesen zweiten Wert zurückholen und zurückgeben. Es sind auch Arrays viel einfacher, Inhalte auszugeben. Sagen wir zum Beispiel, wir wollen eine einfache Schleife machen. Wir möchten den Inhalt des Arrays durchlaufen. Wir wissen, dass Arrays eine Längeneigenschaft haben. Wir können also sagen, dass x weniger als Länge oder Lexis weniger als acht ist . Aber wir wissen, dass wir, wenn wir zusätzliche Elemente in das Array hinzufügen und hinzufügen zusätzliche Elemente in das Array es dynamisch machen möchten, wenn wir durchlaufen. Wir wollen nicht immer einen festgelegten Wert haben , den wir durchlaufen. Und hier würden wir die Länge verwenden , um die Schleife zu erstellen, die Elemente zu durchlaufen und den Inhalt auszugeben. Wir können es so machen, wo wir das Konsolenprotokoll haben, wir haben mein Array und wir verwenden den Wert von x, um den Index bereitzustellen und auf den Inhalt zu verweisen , der damit verknüpft ist. Das gibt uns eine schnelle Möglichkeit, den gesamten Inhalt des Arrays zu durchlaufen . Javascript hat eine Reihe von Möglichkeiten, dies zu tun. Eine meiner bevorzugten Möglichkeiten, dies zu tun, ist die Verwendung der für jede Methode. Und dies ist eine Möglichkeit, die Werte schnell zu durchlaufen. Sie können auch den Indexwert abrufen und dann das Gesamt-Array abrufen. Also der gesamte Inhalt des Arrays. Und ich verwende das Pfeilformat. Dies gibt also nur die Funktion zurück, anonyme Funktion mit dem Pfeil. Und dann ist hier draußen zwischen den geschweiften Klammern, wo wir mit der Ausgabe arbeiten können, die Antwort zurück. Zurück zum Wert von Val. Kommentiere das aus und ich werde das auskommentieren. Wir haben also keine zusätzlichen Inhalte in der Konsole. Jetzt listen wir die ersten 230100 auf, stimmt. Und das geht nur durch alle Elemente innerhalb des Arrays und gibt uns eine schnelle und einfache Möglichkeit , den Inhalt auszugeben. Wir haben auch Zugriff auf seinen Indexwert. Der Index wird also genau was auch immer sein , denn dies ist eine Array-Straße, die die Indexwerte enthält. Im Moment machen wir den Wert und dann den Indexwert , der damit verknüpft ist. Das Gesamt-Array wird nur die vollständige Sammlung sein, die innerhalb des Haupt-Arrays verfügbar ist , das innerhalb der Schleife gesendet wird. Sie haben Zugriff darauf. Sie können es jetzt als Gesamt-Array referenzieren. Myarray wird immer noch auf dasselbe Array verweisen. Wenn Sie das Total-Array nehmen und dem Array am Ende etwas hinzufügen würden, was wird Ihrer Meinung nach mit dem ursprünglichen Array passieren ? Und wenn Sie das sagen, wird mit dem ursprünglichen Array passieren , dass wir es aktualisieren werden. Sie haben Recht, denn wenn ich jetzt das Terminal lösche und wenn ich mein Array tippe, haben wir es mit end gefüllt. Obwohl wir es als Gesamt-Array referenzieren und dieses Array aktualisieren. Es referenziert immer noch genau wie die Objekte am selben Speicherort. Es unterscheidet also nicht zwischen den beiden Möglichkeiten, auf dieses Objekt zu verweisen. Und es aktualisiert das Hauptobjekt, das das Array mit dem Inhalt ist. Deshalb werden beide jetzt dieselben Werte enthalten . Und wir können keinen Zugriff auf das gesamte Array außerhalb der geschweiften Klammern erhalten , da dies im Rahmen der für jede Schleife liegt. Dies war nur eine Demonstration , welche Art von Inhalt wir hinzufügen können. Und wenn Sie ein Konto hinzufügen möchten, können Sie das auch tun. Sparen Sie es. Dadurch wird jedes Mal ein Konto hinzugefügt, wenn es die Elemente durchläuft , die im ursprünglichen Array enthalten sind . Eine andere Sache, die Sie auch beachten sollten. Obwohl das Array, der ursprüngliche Strahl größer wird, wirkt sich dies nicht auf diese Schleife aus, weil wir reinkommen und es entsprechend dem ursprünglichen Array ausgeben . Wir aktualisieren also das Gesamt-Array, was sich nicht auf das auswirken wird. Es wird ständig aktualisiert und eine weitere Iteration innerhalb der Elemente erstellt . Von diesem Array wählen Sie normalerweise am häufigsten nur den Wert aus. Aber der Index und das Gesamt-Array werden vorhanden sein, wenn Sie ihn benötigen. Dann einer der Vorteile der Verwendung des Arrays, ich werde das kommentieren, ist, dass es uns eine einfache Möglichkeit bietet , die darin enthaltenen Elemente zu durchlaufen , da dies numerisch ist. Also gib dir ein paar Beispiele dafür. Deshalb sind oft, wenn wir JSON-Daten haben , JavaScript-Objekte, die wir in einem Array strukturiert haben die wir in einem Array strukturiert , das im Hauptobjekt enthalten sein wird . Erstellen wir also ein Objekt. Ich nenne es einfach mein Objekt , um die geschweiften Klammern zu benutzen. Wenn wir dann eine Liste von Personen haben und dies wird mit einem Array verknüpft sein. Um es lesbarer zu machen, Was kann als separate Zeile tun dann etwas Leerzeichen, um es lesbarer zu machen. Jetzt müssen Sie es nicht tun, um die richtige Struktur zu erstellen, aber das macht sie einfach lesbar. Einer der Gründe , warum wir JSON- und JavaScript-Objekte verwenden , ist, dass es wirklich einfach ist, die im Objekt enthaltenen Inhalte zu lesen . Lassen Sie uns eine Liste von Personen erstellen. Sie können den Vornamen benennen und dem Vornamen einen Wert zuweisen. Dann haben wir gerade Saug-Kommas gefangen, die die Elemente trennen , die im Objekt enthalten sind. Und eigentlich muss das ein Objekt sein. Weil wir mehrere Elemente innerhalb des Arrays haben möchten. Wir können mit nur dem einen Punkt beginnen. Lasst uns sie auflisten. Ich widerspreche dagegen. Wir haben ein Array namens People, und dann haben wir innerhalb von Menschen nur den einen Gegenstand. Fügen wir noch ein paar andere hinzu. Nachname. Wenn ich diese Objekttypen erstelle, erstelle ich das erste Element nur als Vorlage. Und dann kann ich das wiederverwenden, um andere Elemente in das Array hinzuzufügen. Lasst uns das aufheben. Ich habe den Inhalt meines Objekts in die Konsole gelegt. Es gibt den ersten Gegenstand. Und wie ich bereits erwähnt habe, ist es vorteilhaft, es mit einem Array zu haben , damit Sie ausgewählte Personen durchlaufen und dann den Inhalt von Personen durchlaufen können. Dies wird nur ein Element innerhalb des Arrays sein, genau wie wir die Strings hatten und genau wie wir es hier oben in diesem Beispiel hatten. Das bedeutet, dass es durch Kommas getrennt sein sollte. Wir wollen die Struktur auf die gleiche Weise beibehalten. Wir haben den Vornamen, den Nachnamen und das Alter. Auf diese Weise können wir, wenn wir das Personen-Array durchlaufen, die Eigenschaftsnamen auswählen und wir wissen, dass sie sich nicht ändern werden. Und das ist eines der Dinge , die Sie benötigen, wenn Sie diese komplexen Objekte mit Arrays erstellen, in denen ich mehrere Elemente habe , die Sie auflisten möchten. Sie möchten sicherstellen, dass Sie in der Struktur gleich bleiben . Lassen Sie uns einige Aktualisierungen des Inhalts vornehmen. Jetzt haben wir innerhalb des, mein Objekt zu, ein paar Leute innerhalb des Arrays. Wir werden sie durchlaufen und dann auf der Seite ausgeben. Fügen wir eine weitere hinzu, die dieselbe Vorlagenstruktur verwendet , die wir gerade erstellt haben. Wir haben den Vornamen, den Nachnamen und das Alter. Drei Personen oder drei Elemente innerhalb des Arrays. Wir haben auch mit dem Array bemerkt, wir die Länge für das Array haben. Die Herausforderung besteht also darin, sie auf der Seite zu durchlaufen und auszugeben. Bereits Ausgabe eins ausgewählt. Also fügen wir es einfach zur Ausgabe eins hinzu. Wir wählen sie aus, gegen die ich Einwände erheben kann. Das Problem hier ist , dass es kein Array ist, also können wir es nicht durchlaufen. Wir müssen das Array auswählen, welches das Element mit der Eigenschaft von Personen ist. Wählen Sie das aus und das gibt uns das Array, genau wie wir hier gesehen haben, das wir durchlaufen können. Erstellen Sie dann die anonyme Funktion , bei der wir den Inhalt jedes Elements innerhalb des Arrays als Variable namens val aufnehmen den Inhalt jedes Elements innerhalb des . Und dann benutze sie gib sie innerhalb ihrer Antwort aus. Im Moment gebe ich einfach den Inhalt von Val aus. Das gibt uns also die drei Personen , die sich derzeit in unserer Array-Struktur befinden. Weil der Name, der Nachname und das Alter alle Eigenschaftsnamen sind, die wir wiederverwenden können. Wenn wir den FirstName auswählen , werden alle Vornamen angegeben. Wenn wir es jetzt ausgeben und zur Ausgabe hinzufügen wollen, können wir dies tun, indem wir den inneren HTML-Code abrufen. Und dann fügen wir einfach zuerst den Vokal hinzu, Name. Und ich füge auch einen Zeilenumbruch hinzu , damit wir zwischen jedem der Elemente unterscheiden können. Jetzt geben wir es auf der Seite aus. dies zu aktualisieren, wechsle ich von der Verkettung der Strings in der Ausgabe zu den Vorlagenliteralen . Diese verwenden die Back-Ticks, die Sie auf den meisten Tastaturen links neben dem haben . Und um Variablen einzubringen, können Sie das Dollarzeichen und die geschweiften Klammern verwenden , die den Inhalt auf diese Weise auf die Seite ausgeben. Ich kann es etwas größer machen, damit es einfacher zu lesen ist. Wählen wir auch den Nachnamen aus. Wir geben den gesamten Inhalt jedes dieser Elemente aus. Und schließlich, sagen wir mal, setze das Alter auf die Seite und speichere das. Die Struktur des Objekts gleich zu machen und sie als Elemente innerhalb des Arrays zu behalten , macht es sehr einfach , mit den darin enthaltenen Daten zu arbeiten. Und Sie werden feststellen, dass viele dieser komplexen JSON-Objekte auf diese Weise strukturiert sind , nur weil es einfach sein wird den Inhalt zu lesen und für Menschen lesbar zu sehen. Und dann wird es auch einfacher sein, damit zu arbeiten und die Inhalte zu durchlaufen, die im Objekt enthalten sind. 6. 5 Strings zu Objekten JSON Parse: Wir werden uns einige integrierte Methoden in JavaScript ansehen , nämlich JSON Stringify, JSON-Parse, und wie Sie diese verwenden können, um Ihre Zeichenfolge in ein JSON-JavaScript-Objekt zu konvertieren und es innerhalb der kodieren. Darüber hinaus können Sie Ihr JavaScript-Objekt verwenden, es in eine Zeichenfolge konvertieren und es dann in ein brauchbares JavaScript-Objekt analysieren, das JSON-formatiert sein wird. Wir haben festgestellt, dass selbst in diesem Beispiel hier unter Verwendung von JSON stringify immer noch innerhalb einer richtigen JSON-Struktur ausgeben wird diesen Zeichenfolgenwert immer noch innerhalb einer richtigen JSON-Struktur ausgeben wird, obwohl das Original mein Objekt nicht die doppelte Anführungszeichen. Es gibt einige Fälle, in denen Sie bei der Übergabe von Daten nur eine Möglichkeit haben, sie als String zu übergeben. Dies ist also eine ideale Möglichkeit Ihr JSON-JavaScript-Objekt in eine Zeichenfolge zu konvertieren und es dann wieder zu analysieren, wenn Sie die darin enthaltenen Daten verwenden möchten. Ich zeige dir ein paar Beispiele dafür. Manchmal, wenn Sie Ihre JSON-Objekte abrufen , werden sie mit einem Zeichenfolgenformat zurückkommen. Und es gibt verschiedene Methoden, die Sie verwenden können, um es in eine Zeichenfolge umzuwandeln. Und wenn Sie Daten erhalten, verwandeln Sie sie in eine Zeichenfolge, solange sie JSON-formatiert sind, dann wird es in ein brauchbares JavaScript-Objekt umgewandelt. Und dann gibt es auch die Stringify, die es in eine String-Parse verwandelt, die Zeichenfolge nimmt und sie in ein brauchbares JavaScript-Objekt verwandelt . Also schauen wir uns das in dieser Lektion an. Wir erstellen ein Objekt. Und dann fügen wir in diesem Objekt einige Werte hinzu. Lass uns einen ganz einfachen machen, bei dem ich Hallo habe. Also benutzen wir das Objekt. Und jetzt, wenn ich das Objekt lade, befindet es sich in einem Objektformat. Das bedeutet, dass ich Zugriff auf Nachrichten und so weiter habe. Was passiert, wenn es sich um eine Zeichenfolge handelt? Zuerst zeige ich Ihnen, wie Sie ein Objekt in eine Zeichenfolge verwandeln können . Also haben wir hier einen String-Wert und wir werden den JSON verwenden. Dies ist eine JavaScript-Methode. Json stringify innerhalb der abgerundeten Klammern, hier können wir das Objekt platzieren. Und was mit diesem Objekt passiert , ist, dass es in eine Stärke verwandelt wird. In der Konsole. Es wird ganz rot sein, und das wird ein reguläres String-Format sein. Das heißt, wenn dieses Objekt als String erstellt wird, erstellen Sie ein zweites Objekt desselben. Beachten Sie, dass wir nicht den gleichen Abstand haben. Es ist nicht einfach zu lesen und es wird sich tatsächlich nicht innerhalb der geschweiften Klammern weil es eine Zeichenfolge ist, sondern nur in den Anführungszeichen sitzt. Die Eigenschaften werden anders sein. Wenn wir versuchen, das my object to zu verwenden, kommt es einfach als String zurück. Wir haben also keine Möglichkeit, den Eigenschaftswert von message zu erhalten . Während wir mit meinem Objekt diese Elemente mit dem Namen zurückgeben können , um den Wert zurückzugeben. Das Problem ist, dass wenn Sie Daten zurückerhalten , manchmal innerhalb eines Textformats oder Zeichenfolgenformats liegen. Und du musst es wieder in ein brauchbares Objekt umwandeln. Und hier können Sie Parse verwenden JSON Stringify verwandelt es in ein String-Objekt, und ich bin etwas drüben im Mozilla Developer Network. MDM hat also eine großartige Ressource für zusätzliche Dokumentation zu JavaScript-, HTML- und Webentwickler-Technologien. Und es gibt Ihnen auch einige Beispiele dafür. Sie zeigen Ihnen ein Beispiel für ein JSON-Objekt innerhalb eines Zeichenfolgenformats. Und solange die Struktur korrekt ist, können Sie sie in ein brauchbares JavaScript- oder JSON-Objekt analysieren. So können wir laufen und so zeigt es auch hier , dass Sie den Wert von count und Ergebnis aus dem String-Wert abrufen können . Und dann haben sie hier noch ein paar Beispiele dafür , es zu benutzen. Und dann sagen sie dir, dass es keine nachfolgenden Kommas zulässt. Das wird also keine richtige JSON-Struktur mit einem nachfolgenden Komma sein . Und das wird einen Fehler auslösen, denn das wird wieder keine JSON sein, die richtige JSON-Struktur. Sie können also die einfachen Anführungszeichen nicht verwenden. Es wird nicht in der Lage sein, ein Objekt oder eine Zeichenfolge zu analysieren ein Objekt oder eine Zeichenfolge , die sich nicht im JSON-Format befindet. Mein Objekt drei, mit JSON-Parse, weil wir eine Zeichenfolge haben, die wir in eine JavaScript-Objektkonsole verwandeln möchten , melden Sie sich ab. Also gehe ich wieder hier rein, das ist mein Objekt drei. Jetzt kann ich sie auswählen, ich objektiere drei, und ich kann die Werte nur mit den Namen abrufen, und das gibt sie zurück. Auch dies muss richtig strukturiert sein. Falls es sich um ein JavaScript handelt, eine Typobjektstruktur einer Zeichenfolge. Und wir haben versucht, das zu benutzen. Und wenn es sich um ein einzelnes Anführungszeichen handelt, verwenden Sie die Back-Ticks , um es als String zu behalten. Wenn wir also versuchen würden, dies als Objekt drei zu analysieren, sehen Sie, dass der Fehler ausgelöst wird. Es muss eine richtige JSON-Struktur sein, um sie analysieren und dann nutzbar machen zu können. Wenn wir also ein JavaScript-Objekt nehmen würden, wandeln Sie es in eine Zeichenfolge um . Lassen Sie uns also ein paar Updates dazu machen. Hier drüben wandeln wir es in eine Zeichenfolge um. Es wird immer noch dieselbe JSON-Struktur beibehalten. Beachten Sie, dass es sich zwar um ein JavaScript-Objekt handelte und wir nicht die richtige JSON-Struktur hatten, in der wir die doppelten Anführungszeichen um die Namen haben . Es fügt es automatisch hinzu, wenn wir die JSON-Stringify verwenden , die es in einen String umwandeln kann , der dann verwendet und dann wieder in JSON konvertiert werden kann. Und das funktioniert, weil es das richtig als richtiges JSON-Objekt strukturiert , wenn Sie das JavaScript-Objekt bringen und es stringifizieren. Das war also richtig strukturiert. Und das bedeutet auch , dass Sie es analysieren können. Und wenn Sie es analysieren, wird es in Ihrem JavaScript-Code wieder verwendbar. 7. 6 AJAX: Wir werden Ajax in dieser Lektion demonstrieren. Das bedeutet also, dass wir das interaktive Element auf der Seite erstellen müssen das interaktive Element auf , das die Ajax-Anfragen auslöst und eine Verbindung zu der Datenquelle herstellen wird, die nicht gefunden wird innerhalb des JavaScript-Codes, und das wird Daten sechs Punkt JSON sein. Erstellen Sie also eine einfache JSON-Datei, mit der wir eine Verbindung herstellen können , wenn der Benutzer die Option Click Me auslöst, und die eine Verbindung zu dieser Datei herstellen wird. Es wird immer noch prüfen, ob es irgendwelche Fehler gibt. also sicher, dass die Verbindung in Ordnung ist bevor sie versucht, den Inhalt als JSON zurückzugeben. Und dann lege ich das in die Konsole. Wir haben auch die Option, dass, wenn es nicht in Ordnung ist , ein boolescher Wert sein wird. Wenn wir also eine erfolgreiche Verbindung hergestellt haben, Inhalt zurückgeben, wird die Antwort in Ordnung sein. Andernfalls werden wir einen Fehler beim Erstellen eines neuen Fehlerobjekts ausgeben, das nur sagt, dass nicht verbunden ist . Und dann können wir diesen Fehler in der Abrufanforderung abfangen und etwas damit machen. Und im Moment werden wir nur diesen Fehler in die Konsole ausgeben. Dies gibt uns die Möglichkeit, alle Antworten abzufangen , die möglicherweise nicht ordnungsgemäß verbunden sind, dass wir die Daten nicht ordnungsgemäß verbinden und abrufen. Ajax steht für Asynchrone JavaScript und XML. Und die neuere Technik ist ein Jock , bei dem wir die JSON-Daten verwenden werden. Geben Sie also einfach ein kurzes Beispiel für XML-Daten. Das ist also die Abkürzung für Extensible Markup Language, also XML. So gibt es es seit vielen Jahren seit 1996. Und die Struktur ist so ähnlich wie bei HTML, wo es Tags zum Öffnen und Schließen gibt. Es erfordert einige zusätzliche Schemainformationen so einfach zu lesen sind wie JSON. Wir werden uns nicht auf den XML-Teil für Ajax konzentrieren, und wir werden uns weiterhin auf JSON konzentrieren um JSON-Daten abzurufen und auf unserer Seite ausgegeben zu werden. Da JSON häufig in mehr als 90% der Daten verwendet wird. Natürlich können Sie mehr über XML erfahren. Also W3C org Forward Slash XML. Um