Video: JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour [2019] 2024
Von John Paul Mueller
JavaScript verwendet Objekte ausgiebig. Zu wissen, welche Objekte zu verwenden sind und wann wichtige Teile der Arbeit mit JavaScript sind. Wenn Sie die Browser-, Core Document Object Model- (DOM-) und HTML-DOM-Objekte kennen, können Sie einen beträchtlichen Teil jeder Standardanwendung (und vieler einfacher Anwendungen) aufbauen. Dies sind die am häufigsten verwendeten JavaScript-Objekte. Halten Sie sie also griffbereit.
Verwendung von JavaScript-Browserobjekten zur Verwaltung der Anwendungsumgebung
JavaScript-Browserobjekte ermöglichen das Erkennen und Ändern der Anwendungsumgebung. Wenn Sie wissen, wohin der Benutzer gegangen ist, wo sich der Benutzer gerade befindet und wohin Sie den Benutzer führen können, können Sie den Anwendungsfluss effektiv steuern. Natürlich ist es wichtig zu wissen, welche Bildschirmgröße der Benutzer hat, damit Sie Daten so präsentieren können, dass sie die physische Beschaffenheit des Geräts des Benutzers widerspiegeln.
Die folgende Tabelle enthält einige der interessantesten JavaScript-Browseroptionen.
| Objekt | Beschreibung |
|---|---|
| Verlauf | Bietet die Möglichkeit, zwischen URLs, die in der Historie des Browsers gespeichert sind,
zu untersuchen und zu verschieben. Eine vollständige Liste der -Methoden und -Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / obj_history. asp. |
| location | Enthält Informationen zur aktuellen URL. Dieses Objekt
bietet außerdem die Möglichkeit, Aufgaben wie das Laden einer neuen Seite oder das Neuladen der aktuellen Seite auszuführen. Eine vollständige Liste der -Methoden und -Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / obj_location. asp. |
| navigator | Enthält Informationen zum aktuellen Browser. Mit
können Sie beispielsweise den Browsertyp festlegen und festlegen, ob im Browser -Cookies aktiviert sind. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / obj_navigator. asp. |
| Bildschirm | Gibt die physischen Eigenschaften des Geräts an, mit dem
die Seite angezeigt wird, einschließlich Seitenhöhe, -breite und Farbtiefe. Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / obj_screen. asp. |
| Fenster | Ermöglicht den Zugriff auf das Browserfenster, sodass Sie
Aufgaben wie das Anzeigen von Meldungsfeldern ausführen können. Wenn Sie mit Seiten arbeiten, die Frames enthalten, erstellt der Browser ein Fenster für das gesamte HTML-Dokument und ein weiteres Fenster für jeden Frame.Sie können eine vollständige Liste der Methoden und Eigenschaften anzeigen, die diesem -Objekt unter www zugeordnet sind. w3schools. com / jsref / obj_window. asp. |
Verwendung von Kern-DOM-Objekten zur Verwaltung von Anwendungsinhalten
Das Ziel jeder JavaScript-Anwendung ist die Verwaltung von Inhalten. Dies bedeutet das Hinzufügen, Löschen und Bearbeiten des HTML-Dokuments, das die verschiedenen Elemente enthält, die den Inhalt strukturieren und unterstützen. Diese Objekte bieten Zugriff auf alle Dokumentdetails in Bezug auf den Inhalt.
| Objekt | Beschreibung |
|---|---|
| Attr | Bietet Zugriff auf einzelne Attribute innerhalb des Dokuments.
Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_attr. asp. |
| document | Bietet Zugriff auf das gesamte Dokument. Sie können dieses Objekt
verwenden, um auf einen beliebigen Teil des Dokuments zuzugreifen. Außerdem können Sie mit diesem Objekt Informationen direkt auf der Seite anzeigen und andere Aufgaben ausführen, die sich auf die Benutzeroberfläche beziehen. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_core_document. asp. |
| Element | Enthält ein einzelnes Dokumentelement eines beliebigen Typs, der
als XML unterstützt wird. Dieses Objekt bietet Zugriff auf Attribute über das Attr-Objekt und Eigenschaften über das Node-Objekt. Eine vollständige Liste der -Methoden und -Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_element. asp. |
| Ereignisse | Unterstützt den Zugriff auf vorhandene Ereignisse und die Erstellung neuer Ereignisse.
Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_event. asp. |
| HTMLElement | Enthält ein einzelnes HTML-Dokumentelement, z. B. einen
Absatz oder ein Steuerelement. Verwenden Sie die Elemente und Knotenobjekte, um Zugriff auf -Elementattribute und -Eigenschaften zu erhalten. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_all. asp. |
| Knoten | Definiert die Einzelheiten eines bestimmten Knotens, der
das Dokument als Ganzes, ein Element innerhalb des Dokuments und ein Attribut als Teil eines Elements, Textes und Kommentars enthalten kann.. Sie können eine vollständige Liste der Methoden und Eigenschaften anzeigen, die mit diesem Objekt unter www zugeordnet sind. w3schools. com / jsref / dom_obj_node. asp. |
| NodeFilter | Gibt an, welche Knoten als Teil eines NodeIterators angezeigt werden, mit dem die Liste der Nodes
in einem Dokument durchlaufen wird. Eine vollständige Liste der Methoden und -Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter // developer. Mozilla. org / de-DE / docs / DOM / NodeFilter. |
| NodeIterator | Stellt eine Methode zum Abrufen einer Liste von Knoten in einem
-Dokument bereit. Wenn Sie die Liste der Knoten durchsuchen, können Sie bestimmte -Knoten lokalisieren und mit ihnen interagieren. Zum Beispiel könnten Sie alle der Tag-Knoten finden und ein bestimmtes Attribut hinzufügen. Eine vollständige Liste der -Methoden und -Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter // developer.Mozilla. org / de-DE / docs / DOM / NodeIterator. |
| NodeList | Enthält eine geordnete Liste aller Knoten im Dokument
oder in einem bestimmten Bereich des Dokuments. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_nodelist. asp. |
| NamedNodeMap | Enthält eine ungeordnete Liste aller Knoten im Dokument
oder in einem bestimmten Bereich des Dokuments. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_namednodemap. asp. |
Verwendung von HTML-DOM-Objekten zur Verwaltung der Struktur
Es ist wichtig, die Informationen zu organisieren, die der Benutzer auf dem Bildschirm in einer zusammenhängenden Präsentation mit JavaScript sieht. Der Benutzer sollte die HTML-Dokumentstruktur sehen, aber die Struktur sollte den Inhalt unterstützen - er sollte nicht auf sich selbst aufmerksam machen. Beim Arbeiten mit einer Seite umfasst die Struktur alles von Tabellen bis hin zu Steuerelementen, mit denen der Inhalt, den der Benutzer am meisten interessiert, interagiert und verwaltet. Die folgenden HTML-DOM-Objekte helfen Ihnen beim Ausführen dieser Aufgabe bei der Arbeit mit JavaScript.
| Objekt | Beschreibung |
|---|---|
| Dokument | Bietet Zugriff auf alle Elemente einer ganzen Seite. Jede
Seite, die in einen Browser geladen wird, wird zu einem Dokumentobjekt, auf das Sie mit dem Schlüsselwort document zugreifen. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_document. asp. |
| Ereignis | Ermöglicht die Interaktion mit den Ereignissen und Ereignishandlern , die einer Seite zugeordnet sind. Jedem Elementtyp sind bestimmte Ereignisse
zugeordnet, z. B. das Klickereignis, das dem Schaltflächenobjekt zugeordnet ist. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_event. asp. |
| HTMLElement | Stellt eine Basisklasse bereit, von der alle HTML-Elemente abgeleitet werden.
Diese Basisklasse definiert die Eigenschaften und Methoden, die alle HTML -Elemente bereitstellen. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_all. asp. |
| Anker | Stellt einen HTML-Hyperlink dar. Eine vollständige Liste der
Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_anchor. asp. |
| Bereich | Definiert den Bereich innerhalb einer HTML-Imagemap, der zum Erstellen von
klickbaren Regionen für ein Grafikelement verwendet wird. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_area. asp. |
| Base | Gibt die Standardadresse oder ein Standardziel für alle Links
auf einer Seite an. Eine vollständige Liste der Methoden und Eigenschaften, die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_base. asp. |
| Body | Stellt den Tag
-Teil einer Seite dar, einschließlich aller Elemente, die in diesem -Tag enthalten sind. Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www.w3schools. com / jsref / dom_obj_body. asp. |
| Button | Stellt eine Schaltfläche auf einer Seite dar. Dieses Objekt ist spezifisch , das mit dem Tag
verknüpft ist, und nicht mit der Tag-Form von . Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_pushbutton. asp. |
| Form | Stellt ein Formular dar und enthält alle Elemente in diesem
-Formular. Eine vollständige Liste der Methoden und Eigenschaften , die diesem Objekt zugeordnet sind, finden Sie unter www. w3schools. com / jsref / dom_obj_form. asp. |
| Frame und IFrame | Stellt einen Frame (das
-Tag) oder einen Inline-Frame (das |