From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../building_blocks/values_and_units/index.html | 333 ++++++++++++++++++ .../learn/css/first_steps/how_css_works/index.html | 106 ++++++ .../index.html | 123 +++++++ .../conflicting/learn/css/first_steps/index.html | 60 ++++ .../learn/javascript/objects/index.html | 390 +++++++++++++++++++++ 5 files changed, 1012 insertions(+) create mode 100644 files/de/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/de/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html create mode 100644 files/de/conflicting/learn/css/first_steps/index.html create mode 100644 files/de/conflicting/learn/javascript/objects/index.html (limited to 'files/de/conflicting/learn') diff --git a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..be9302eb6e --- /dev/null +++ b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,333 @@ +--- +title: Color +slug: Web/Guide/CSS/Getting_started/Farbe +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des CSS Getting Started Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.

+ +

Information: Farbe

+ +

In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primärred lime blue 
sekundäryellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ +
+
Details
+ +

Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:

+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Mehr Details zur erweiterten Liste finden Sie unter SVG color keywords im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.

+
+ +

Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei hexadezimalen Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
schwarz #000
reines rot #f00
reines grün #0f0
reines blau #00f
weiß #fff
+ +


+ Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
schwarz #000000
reines rot #ff0000
reines grün #00ff00
reines blau #0000ff
weiß #ffffff
+ +

Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.

+ +
+
Beispiel
+ +

Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Starten Sie mit reinem rot: #f00
Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu: #f77
Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu: #fa7
Um es dunkler zu machen, reduzieren sie alle Farbkomponenten: #c74
Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an: #c98
Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau: #ccc
+ +

Für einen Pastellton wie ein blasses blau:

+ + + + + + + + + + + + + + +
Starten Sie mit reinem weiß: #fff
Reduzieren Sie die anderen Farbkomponenten ein wenig: #eef
+
+ +
+
Mehr Details
+ +

Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.

+ +

Das ist zum Beispiel Kastanienbraun (dunkles rot):

+ +
rgb(128, 0, 0)
+
+ +

Alle Details zur Angabe von Farben finden sie unter Colors in der CSS Spezifikation.

+ +

Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter CSS2 System Colors in der CSS Spezifikation.

+
+ +

Farbeigenschaften

+ +

Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.

+ +

Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.

+ +

Hintergründe können auf transparent gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.

+ +
+
Beispiel
+ +

Die Beispiel-Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:

+ +
background-color: #fffff4;
+
+ +

Die Mehr Details-Boxen verwenden dieses blasse grau:

+ +
background-color: #f4f4f4;
+
+
+ +

 

+ +

Aktion: Farbcodes verwenden

+ +
    +
  1. Bearbeiten Sie Ihre CSS Datei.
    2. +
  2. Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.) + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
    +
    3. +
  3. Save the file and refresh your browser to see the result.
    4. +
+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Herausforderung
+ +

In your CSS file, change all the color names to 3-digit color codes without affecting the result.

+ +

(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)

+ +
+
Possible solution
+ +

The following values are reasonable approximations of the named colors:

+ +
strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+
+ +

 

+Hide solution
+Sehen Sie sich die Lösung an.
+ +

What next?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The next section explains how you can make exceptions to this strict separation.

diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..01933a9171 --- /dev/null +++ b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,106 @@ +--- +title: Why use CSS? +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des  CSS Getting Started Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.

+ +

Warum CSS ?

+ +

Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den <Kopfbereich> (head) Ihres Dokumentes einbetten (eingebettetes Stylesheet) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (externes Stylesheet). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den <Kopfbereich> Ihres Dokumentes einbauen.

+ +

Die Trennung von Inhalt und Form mithilfe eines externen Stylesheets hat viele Vorteile:

+ + + +
+
Beispiel
+ +

Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.

+ +

Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.

+ +

Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.

+
+ +

Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.

+ +
+
Weitere Details
+ +

Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.

+ +

Beispielsweise können Sie in HTML einen <b>Tag verwenden um Text fett darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des <body>Tags festlegen.

+ +

Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.

+
+ +

Action: Ein CSS-Stylesheet anlegen

+ +
    +
  1. Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.
    2. +
  2. Speichern Sie Ihre datei als: style1.css. Das wird nun Ihr Stylesheet.
    3. +
  3. Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses. + 
    strong {color: red;}
+
    +
    4. +
+ +

Verknüpfung von Dokument und Stylesheet

+ +
    +
  1. Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei.  Fürgen Sie die unten hervorgehobene Zeile hinzu: + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    2. +
  2. Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt: + + + + + + +
    Cascading Style Sheets
    +
    3. +
+ +

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

+ +
+
Challenge
+ +

Außer rot (red) erlaubt CSS noch andere Farbnamen.

+ +

Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.

+ +
+
Possible solution
+ +

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

+Hide solution
+See a solution for the challenge.
+ +

Was nun?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Wie CSS funktioniert.")}}Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes lernen Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.

diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html new file mode 100644 index 0000000000..8e980ce43c --- /dev/null +++ b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html @@ -0,0 +1,123 @@ +--- +title: Wie CSS funktioniert +slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des CSS Getting Started Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.

+ +

Wie CSS funktioniert

+ +

Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:

+ +
    +
  1. Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das DOM (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.
    2. +
  2. Der Browser stellt den Inhalt des DOM dar.
    3. +
+ +

Eine Auszeichnungssprache verwendet Elemente um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von Tags. Das sind Schlüsselworte zwischen zwei '<' spitzen Klammern '>'. Die meisten Elemente haben paarweise Tags - einen Start-Tag <schluesselwort> und einen End-Tag </schluesselwort>, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.

+ +

Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. <schluesselwort/>.

+ +

Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem Container. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!

+ +

Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein Knoten (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.

+ +

Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.

+ +
+
Beispiel
+ +

In Ihrem Beispieldokument erzeugen der <p>-Tag und sein End-Tag </p> einen Container:

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Live Beispiel

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die STRONG- und die nachfolgenden Knoten. Der STRONG Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Action: Ein DOM analysieren

+ +

Den DOM Inspector verwenden

+ +

Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's DOM Inspector (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).

+ +
    +
  1. Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .
    2. +
  2. Wählen Sie Tools > DOM Inspector aus der Menüleiste oder Tools > Web Development > DOM Inspector. +
    +
    Weitere Details
    + +

    Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der Add-ons Seite installieren und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.

    + +

    Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.

    +
    +
    3. +
  3. In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken. +

    Anmerkung: Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.

    + +

    Je nachdem welche Knoten Sie expandiert haben könnte ein  Teil des Ergebnisses so aussehen:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.

    + +

    Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.

    +
    4. +
+ +
+
Challenge
+ +

Klicken Sie in DOMi auf einen STRONG Knoten.

+ +

Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Hide solution
+Lösung.
+ +

Web X-Ray Goggles

+ +

Web X-Ray Goggles zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.

+ +
    +
  1. Gehen Sie auf die Seite Web X-Ray Goggles.
    2. +
  2. Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.
    3. +
  3. Öffnen Sie Ihr HTML Dokument.
    4. +
  4. Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.
    5. +
  5. Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.
    6. +
+ +

Was nun?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The next page explains more about these interactions.

diff --git a/files/de/conflicting/learn/css/first_steps/index.html b/files/de/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..9472041b96 --- /dev/null +++ b/files/de/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,60 @@ +--- +title: Einführung +slug: Web/Guide/CSS/Getting_started +tags: + - CSS + - 'CSS:Einführung' +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Einleitung

+

Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.

+

Die Führung durch die grundlegenden Möglichkeiten von CSS ist mit einigen praktischen Beispielen zum Testen auf dem eigenen Computer untermalt. Das Tutorial gliedert sich in zwei Teile:

+ + +

Diese Einführung basiert auf der CSS 2.1 Spezifikation.

+

An wen richtet sich dieses Tutorial?

+

Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.

+

Anfänger, die noch wenig über CSS wissen, sollten den ersten Teil dieses Tutorials lesen, um CSS zu verstehen und zu lernen wie man es benutzt. Danach bietet sich der zweite Teil an, um die Möglichkeiten in Mozilla Produkten kennen zu lernen.

+

Fortgeschrittene, die schon etwas über CSS wissen, können einfach die Teile überspringen, die sie schon kennen und nur die Teile lesen, die sie interessiert.

+

Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.

+

Was braucht man bevor man anfängt?

+

Am Besten versteht man dieses Tutorial, wenn man die Beispiele direkt nachvollzieht. Benötigt wird dazu ein Editor für Textdateien und der Mozilla Firefox mit dem man grundlegend umgehen sollte.

+

Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.

+

Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.

+

Hinweis:  CSS ermöglicht das Arbeiten mit Farben. Einige Teile dieses Tutorials sind von Farben abhängig. Diese Teile können nur benutzt werden, wenn ein Farbdisplay mit normalen Farbeinstellungen verfügbar ist.

+

Wie man dieses Tutorial benutzen sollte

+

Um dieses Tutorial zu verwenden, sollten die Seiten sorgfältig und der Reihe nach, gelesen werden. Wird eine Seite ausgelassen, könnte es schwierig werden die nachfolgenden Seiten zu verstehen.

+

Auf jeder Seite gibt es einen Informationsbereich, um zu verstehen wie CSS funktioniert und einen Aktionsbereich, um CSS auf dem eigenen Computer selbst auszuprobieren.

+

Um das Wissen zu überprüfen, gibt es am Ende jeder Seite eine Aufgabe. Die Lösungen einiger Aufgaben ergeben sich aus den nachfolgenden Seiten des Tutorials.

+

Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter Weite Details zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.

+

Erster Teil

+

Eine Schritt für Schritt Einführung in CSS:

+
    +
    2. +
  2. Warum CSS
    3. +
  3. Wie CSS funktioniert
    4. +
  4. Kaskade und Vererbung
    5. +
  5. Selektoren
    6. +
  6. Lesbares CSS
    7. +
  7. Textformatierung
    8. +
  8. Farbe
    9. +
  9. Inhalt Boxen
    10. +
  10. Boxes
    11. +
  11. Layout
    12. +
  12. Tabellen
    13. +
  13. Medien
    14. +
+

Zweiter Teil

+

Beispiele, die die Anwendung von CSS in Mozilla zeigen:

+
    +
  1. JavaScript
    2. +
  2. XBL bindings
    3. +
  3. CSS in XUL
    4. +
  4. CSS in SVG
    5. +
  5. CSS in XML
    6. +
diff --git a/files/de/conflicting/learn/javascript/objects/index.html b/files/de/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..41d67bc025 --- /dev/null +++ b/files/de/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,390 @@ +--- +title: Einführung in objektorientiertes JavaScript +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - Constructor + - Encapsulation + - Inheritance + - Intermediate + - JavaScript + - Members + - Namespace + - OOP + - Object + - Object-Oriented +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +

Im Kern ist JavaScript eine objektorientierte Programmiersprache mit mächtigen und flexiblen Fähigkeiten der {{Glossary("OOP")}}. Dieser Artikel beginnt mit einer Einführung in die objektorientierte Programmierung. Im zweiten Teil wird das Objektmodel von JavaScript erläutert. Danach folgt eine praktische Vorstellung der objektorientierten Programmierung in JavaScript. Dieser Artikel beschreibt nicht die neuere Syntax für {{jsxref("Classes", "objektorientierte Programmierung in ECMAScript 6", "", 1)}}.

+ +

JavaScript Review

+ +

Wenn Sie nicht mit den Konzepten in JavaScript, wie zum Beispiel Variablen, Typen, Funktionen und Geltungsbereich, vertraut sind, lesen Sie bitte zuerst den Artikel Eine Wiedereinführung in JavaScript. Sie können ebenfalls auf den JavaScript Guide zurückgreifen.

+ +

Objektorientierte Programmierung

+ +

Die objektorientierte Programmierung ist ein Paradigma, in dem über Abstraktion Modelle basierend auf der realen Welt erstellt werden. Es verwendet Techniken, die von zuvor etablierten Paradigmen eingeführt wurden. Darunter befinden sich Modularität, Polymorphismus und Datenkapselung. Heutzutage unterstützen viele populäre Programmiersprachen (z.B.: Java, JavaScript, C#, C++, Python, PHP, Ruby und Objective-C) die objektorientierte Programmierung (OOP).

+ +

Objektorientierte Programmierung kann als das Design einer Software unter der Verwendung von kooperierenden Objekten angesehen werden. Die traditionelle Ansicht dagegen sieht ein Programm als eine Menge von Funktionen oder noch einfacher als eine Abfolge von Instruktionen an den Computer. In der OOP kann jedes Objekt Nachrichten empfangen, Daten verarbeiten und Nachrichten an andere Objekte senden. Jedes Objekt kann als eine unabhängige kleine Maschine mit einer bestimmten Rolle oder Verantwortlichkeit angesehen werden.

+ +

Die Objektorientierte Programmierung versucht höhere Flexibilität und Wartbarkeit in Programmen zu ermöglichen und wird deshalb oft beim Software Engineering von hochskalierenden Programmen eingesetzt. Durch die starke Konzentration auf Modularität hat objektorientierter Code den Vorteil, dass er einfacher zu entwickeln und zu verstehen ist. Sie konzentriert sich direkter auf die Analyse, die Codierung und das Verstehen von komplexen Situationen und Prozeduren als weniger modulare Programmiermethoden.1

+ +

Begriffsdefinitionen

+ +
+
{{Glossary("Namespace")}}
+
Ein Container, der Entwicklern die Bündelung von Funktionalität unter einem eindeutigen, applikationsspezifischen Namen ermöglicht.
+
{{Glossary("Klasse")}}
+
Definiert die Eigenschaften eines Objekts. Sie ist die Definition einer Vorlage von Variablen und Methoden eines Objekts.
+
{{Glossary("Objekt")}}
+
Eine Instanz einer Klasse.
+
{{Glossary("Eigenschaft")}}
+
Eine Eigenschaft eines Objekts, wie zum Beispiel eine Farbe.
+
{{Glossary("Methode")}}
+
Eine Fähigkeit eines Objekts, wie zum Beispiel laufen. Sie ist eine Unterroutine oder Funktion, die mit der Klasse assoziiert ist.
+
{{Glossary("Konstruktor")}}
+
Eine spezielle Methode, die zur Instanziierung eines Objekts aufgerufen wird. Sie hat gewöhnlicherweise denselben Namen wie die Klasse, zu der sie gehört.
+
{{Glossary("Vererbung")}}
+
Eine Klasse kann die Eigenschaften und Fähigkeiten von anderen Klassen erben und somit für sich verwenden.
+
{{Glossary("Datenkapselung")}}
+
Die Datenkapselung ist eine Technik, um die Daten und die Methoden, die diese Daten verwenden, miteinander zu bündeln.
+
{{Glossary("Abstraktion")}}
+
Die Verknüpfung von komplexer Vererbung, Methoden und Eigenschaften eines Objekts müssen ein Modell der Realität simulieren können.
+
{{Glossary("Polymorphismus")}}
+
Poly bedeute "viele"  und Morphismus bedeutet "Formen". Verschiedene Klassen können dieselbe Methode oder dieselbe Eigenschaft definieren.
+
+ +

Lesen Sie bitte den Artikel {{interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia für eine umfassendere Beschreibung der objektorientierten Programmierung.

+ +

Prototypenbasierte Programmierung

+ +

Prototypenbasierte Programmierung ist eine Art der objektorientierten Programmierung bei der keine Klassen gegenwärtig sind. Die Wiederverwendung von Verhalten (bekannt als Vererbung in klassenbasierten Programmiersprachen) wird über das Dekorieren von existierenden Objekten erreicht, die als Prototyp dienen. Dieses Modell wird als klassenlose, prototyporientierte oder instanzorientierte Programmierung bezeichnet.

+ +

Das ursprüngliche (und am meisten kanonische) Beispiel einer prototypenbasierten Programmiersprache ist {{interwiki("wikipedia", "Self (Programmiersprache)")}}, welche von David Ungar and Randall Smith entwickelt wurde. Seitdem wurde die klassenlose Programmierung immer mehr populär und wurde für andere Programmiersprachen wie JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (wenn das Viewer Framework zur Manipulation von Morphic Komponenten verwendet wird) und einige andere adoptiert.2

+ +

Objektorientierte Programmierung mit JavaScript

+ +

Namespace

+ +

Ein Namespace ist ein Container in dem Entwickler Funktionalitäten unter einem eindeutigen, applikationsspezifischen Namen zusammenfassen können. In JavaScript ist ein Namespace ein gewöhnliches Objekt, welches Methoden, Eigenschaften und Objekte enthält.

+ +
+

Im Gegensatz zu manchen anderen objektorientierten Programmiersprachen gibt es in der Sprachebene von JavaScript keinen Unterschied zwischen einem regulären Objekt und einem Namespace.

+
+ +

Die Idee hinter der Erstellung eines Namespaces in JavaScript ist simpel: es wird ein globales Objekt erstellt, welches alle Variablen, Methoden und Funktionen als Eigenschaften besitzt. Zusätzlich kann die Verwendung von Namespaces Namenskonflikten in der Applikation vorbeugen.

+ +

Es wird ein globales Objekt names MYAPP erstellt:

+ +
// global namespace
+var MYAPP = MYAPP || {};
+ +

Im obigen Code wird zuerst geprüft, ob MYAPP bereits definiert wurde (entweder in derselben oder einer anderen Datei). Wenn MYAPP bereits definiert wurde, wird das globale Objekt MYAPP verwendet. Anderenfalls wird ein leeres Objekt names MYAPP erstellt, welches später Methoden, Funktionen, Variablen und andere Objekte kapseln kann.

+ +

Innerhalb eines Namespaces können weitere Namespaces erstellt werden:

+ +
// sub namespace
+MYAPP.event = {};
+ +

Der folgende Code erstellt einen Namespace und fügt diesem Variablen, Funktionen und Methoden hinzu:

+ +
// Create container called MYAPP.commonMethod for common method and properties
+MYAPP.commonMethod = {
+  regExForName: "", // define regex for name validation
+  regExForPhone: "", // define regex for phone no validation
+  validateName: function(name){
+    // Do something with name, you can access regExForName variable
+    // using "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // do something with phone number
+  }
+}
+
+// Object together with the method declarations
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    //  code stuff
+    },
+   removeListener: function(el, type, fn) {
+    // code stuff
+   },
+   getEvent: function(e) {
+   // code stuff
+   }
+
+   // Can add another method and properties
+}
+
+//Syntax for Using addListner method:
+MYAPP.event.addListener("yourel", "type", callback);
+ +

Standardmäßig eingebaute Objekte

+ +

JavaScript besitzt verschiedene Objekte im Kern. Darunter befinden sich zum Beispiel die Objekte Math, Object, Array, und String. Das folgende Beispiel zeigt, wie das Math Objekt mit der random() Methode eine Zufallszahl generiert.

+ +
console.log(Math.random());
+
+ +
Hinweis: Dieses und folgende Beispiele setzen voraus, dass {{domxref("console.log()")}} global definiert wurde. Die console.log Funktion ist kein eigentlicher Sprachteil von JavaScript, jedoch implementieren viele Browser diese zum Debuggen.
+ +

Siehe JavaScript Reference: Standard built-in objects für eine List aller Objekte im Kern von JavaScript.

+ +

Jedes Objekt in JavaScript ist eine Instanz des Objekts Object und erbt somit alle Eigenschaften und Methoden von diesem.

+ +

Eigene Objekte

+ +

Die Klasse

+ +

JavaScript ist eine prototypenbasierte Programmiersprache, welche im Gegensatz zu C++ oder Java keine class Anweisung enthält. Dies kann für Programmierer manchmal verwirrend sein, wenn sie normalerweise Programmiersprachen mit einer class Anweisung verwenden. JavaScript verwendet stattdessen Funktionen als Klassen. Die Definition einer Klasse erfolgt analog zu der einer Funktion. Im folgenden Beispiel wird eine neue Klasse namens Person definiert.

+ +
var Person = function(){ }
+
+ +

Das Objekt (Instanz einer Klasse)

+ +

Um eine neue Instanz eines Objekts obj zu erstellen, wird die Anweisung new obj ausgeführt. Das Ergebnis der Anweisung (welches den Typ obj hat) wird für eine spätere Verwendung einer Variablen zugewiesen.

+ +

Im folgenden Beispiel wird eine Klasse mit dem Namen Person definiert und zwei Objekte (person1 and person2) instanziiert.

+ +
var person1 = new Person();
+var person2 = new Person();
+
+ +
Lesen Sie bitte {{jsxref("Object.create()")}} für eine neue, alternative Methode zur Objektinstanziierung.
+ +

Der Konstruktor

+ +

Der Konstruktor wird zum Zeitpunkt der Instanziierung (wenn eine Objektinstanz erstellt wird) aufgerufen. Er ist als eine Methode der Klasse definiert. In JavaScript agiert die Funktion als Konstruktor für das Objekt. Somit muss keine Methode explizit für den Konstruktor definiert werden. Jede deklarierte Anweisung in der Klasse wird zum Zeitpunkt der Instanziierung ausgeführt.

+ +

Der Konstruktor wird zur Initialisierung der Eigenschaften oder vorbereitende Methodenaufrufe zur Verwendung des Objekts verwendet. Das Hinzufügen von Klassenmethoden und deren Definitionen verwendet eine andere Syntax, welche später im Artikel erläutert wird.

+ +

Im folgenden Beispiel loggt der Konstruktor der Klasse Person eine Nachricht, wenn ein Person Objekt instanziiert wird.

+ +
function Person() {
+  console.log('Instanz erstellt');
+}
+
+var person1 = new Person();
+var person2 = new Person();
+
+ +

Die Eigenschaft (Objektattribut)

+ +

Eigenschaften sind Variablen innerhalb einer Klasse. Jede Instanz des Objekts besitzt diese Eigenschaften. Eigenschaften sollten im Prototyp der Eigenschaft in der Klasse (Funktion) gesetzt werden, damit die Vererbung korrekt funktioniert.

+ +

Eigenschaften können innerhalb eines Objekts mit dem Schlüsselwort this, welches das aktuelle Objekt referenziert, verwendet werden. Der Zugriff (lesen oder schreiben) auf eine Eigenschaft von außerhalb der Klasse wird durch die Syntax InstanceName.Property ermöglicht. Diese Syntax ist analog zu C++, Java und zahlreichen anderen Programmiersprachen. Innerhalb der Klasse wird die Syntax this.Property zum Lesen oder Schreiben des Werts verwendet.

+ +

Im folgenden Beispiel wird die Eigenschaft firstName für die Person Klasse definiert. Bei der Instanziierung wird ihr ein Wert zugewiesen.

+ +
function Person(firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+}
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Zeigt die Eigenschaft firstName des Objektes
+console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
+
+ +

Die Methoden

+ +

Methoden befolgen beinahe dieselbe Logik wie Eigenschaften mit dem Unterschied, dass sie Funktionen sind und deshalb als Funktionen definiert werden. Der Aufruf einer Funktion erfolgt analog zu Eigenschaften gefolgt von () am Ende des Methodennames. Innerhalb der Klammern können der Methode Argumente übergeben werden. Um eine Methode zu definieren, muss eine Funktion einer benannten Eigenschaft der prototype Eigenschaft der Klasse zugewiesen werden. Der Name der benannten Eigenschaft dient nun als Methodenname über den die Methode auf dem Objekt aufgerufen werden kann.

+ +

Im folgenden Beispiel wird die Methode sayHello() für die Person Klasse definiert.

+ +
function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// Aufrufen der Methode sayHello der Person.
+person1.sayHello(); // logs "Hello, I'm Alice"
+person2.sayHello(); // logs "Hello, I'm Bob"
+
+ +

Methoden in JavaScript sind gewöhnliche Funktionsobjekte, die als eine Eigenschaft an ein Objekt gebunden werden. Dadurch können Methoden auch "außerhalb des Kontexts" aufgerufen werden. Das folgende Beispiel veranschaulicht dies:

+ +
function Person(firstName) {
+  this.firstName = firstName;
+}
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// logs "Hello, I'm Alice"
+person1.sayHello();
+
+// logs "Hello, I'm Bob"
+person2.sayHello();
+
+// logs "Hello, I'm undefined" (oder schlägt
+// mit einem TypeError im strict mode fehl)
+helloFunction();
+
+// logs true
+console.log(helloFunction === person1.sayHello);
+
+// logs true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// logs "Hello, I'm Alice"
+helloFunction.call(person1);
+ +

Das Beispiel zeigt, dass alle Referenzen zur sayHello Funktion — die auf person1, auf Person.prototype, in der helloFunction Variable, etc. — dieselbe Funktion referenzieren. Der Wert von this während eines Funktionsaufrufs hängt von der Art ab, wie die Funktion aufgerufen wird. In allgemeinen Fällen, wenn die Funktion in einem Ausdruck  über die Eigenschaft aufgerufen wird — person1.sayHello() — referenziert this das Objekt, auf der die Funktion aufgerufen wird (person1). Deshalb verwendet person1.sayHello() den Namen "Alice" und person2.sayHello() den Namen "Bob". Wenn die Funktion über andere Arten aufgerufen wird, ist this unterschiedlich definiert: Der Aufruf von der Variablen aus — helloFunction() — setzt this auf das globale Objekt (window, in Webbbrowsern). Da dieses Objekt (wahrscheinlich) keine firstName Eigenschaft besitzt, gitb die Funktion "Hello, I'm undefined" aus. (Dieses Ergebnis wird im Loose Mode produziert. Im Strict Mode verhält sich die Funktion anders und es könnte ein Fehler ausgelöst werden. Um Verwirrungen zu vermeiden wird dies nicht weiter im Detail besprochen) this kann auch explizit über Function#call (oder Function#apply) definiert werden. Die geschieht in der letzten Zeile des obigen Beispiels.

+ +
Hinweis: Mehr über this können Sie unter Function#call und Function#apply finden.
+ +

Vererbung

+ +

Vererbung ist eine Methode, um eine Klasse zu erstellen, die eine spezialisierte Version von einer (Einfachvererbung) oder mehrerer (Mehrfachvererbung) Klassen ist (JavaScript unterstützt nur Einfachvererbung). Die spezialisierte Klasse wird normalerweise als child bezeichnet. Die Klasse, von der geerbt wird, wird als parent bezeichnet. Vererbung in JavaScript funktioniert indem eine Instanz der parent Klasse der child Klasse zugewiesen und dann spezialisiert wird. In modernen Webbrowsern kann die Vererbung auch mittels der Verwendung von Object.create implementiert werden.

+ +
Hinweis: JavaScript erkennt den Konstruktor prototype.constructor (siehe Object.prototype) der child Klasse nicht. Er muss manuell angegeben werden. Sehe dazu zusätzlich den Beitrag "Why is it necessary to set the prototype constructor?" (englisch) auf Stackoverflow an.
+ +

Im folgenden Beispiel wird die Klasse Student als child Klasse von Person definiert. Dann wird die Methode sayHello() neu definiert und die Methode sayGoodBye() zur Klasse Person hinzugefügt.

+ +
// Definiert den Person Konstruktor
+function Person(firstName) {
+  this.firstName = firstName;
+}
+
+// Fügt Methoden zum Person.prototype hinzu
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Definiert den Student Konstruktor
+function Student(firstName, subject) {
+  // Call the parent constructor, making sure (using Function#call)
+  // that "this" is set correctly during the call
+  Person.call(this, firstName);
+
+  // Initialize our Student-specific properties
+  this.subject = subject;
+};
+
+// Erstellt ein Student.prototype Objekt das von Person.prototype erbt.
+// Hinweis: Ein häufiger Fehler ist der Einsatz von "new Person()" beim erstellen vomeines
+// Student.prototype. Das ist falsch aus einigen Gründen, nicht nur
+// das wir keinen Parameter der Person für "firstName" mitgeben können.
+// Der korrekte Ort für den Aufruf von Person ist oben, wo wir es
+// von Student aufrufen.
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// Setzt die "constructor" Eigenschaft um auf Student zu referenzieren.
+Student.prototype.constructor = Student;
+
+// Ersetzt die "sayHello" Methode
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// Fügt die "sayGoodBye" Methode hinzu
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// Beispieleinsatz:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Check that instanceof works correctly
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+
+ +

Unter Betrachtung der Zeile Student.prototype = Object.create(Person.prototype);: In älteren JavaScript Engines ohne Object.create, kann ein "polyfill" (auch "shim", siehe den verlinkten Artikel) oder eine Funktion, die dasselbe Ergebnis erzielt, verwendet werden:

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Einsatz:
+Student.prototype = createObject(Person.prototype);
+
+ +
Lesen Sie Object.create, um mehr zum obigen Beispiel zu erfahren.
+ +

Stellen sie sicher, dass this zum richtigen Objekt referenziert unabhängig davon, wie das Objekt erstellt wird. Es gibt eine einfache Methode dieses sicherzustellen:

+ +
var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName
+  } else {
+    return new Person(firstName)
+  }
+}
+ +

Datenkapselung

+ +

Im obigen Beispiel muss die Student Klasse nicht wissen, wie die Methode walk() der Person Klasse implementiert ist, um sie verwenden zu können. Die Student Klasse muss die Methode nicht explizit definierten, solange Sie unverändert übernommen werden soll. Dabei handelt es sich um Datenkapselung, bei der jede Klasse ihre Daten und Methoden in einer Einheit bündeln.

+ +

Information Hiding ist ein gängiges Feature in anderen Programmiersprachen, bei dem Methoden und Eigenschaften als privat oder geschützt definierten werden können. Obwohl Information Hiding mit JavaScript realisiert werden kann, ist es keine Voraussetzung für objektorientierte Programmierung.3

+ +

Abstraktion

+ +

Abstraktion ist ein Mechanismus, der die Modellierung eines Teils der Problemstellung erlaubt. Dazu kann Vererbung (Spezialisierung) oder Komposition eingesetzt werden. JavaScript ermöglicht die Spezialisierung mit Vererbung. Komposition wird realiseirt, indem Instanzen einer Klasse als Werte von Eigenschaften eines Objekts gesetzt werden.

+ +

Die Function Klasse in JavaScript erbt von der Object Klasse (Spezialisierung). Die Function.prototype Eigenschaft ist eine Instanz der Object Klasse (Komposition).

+ +
var foo = function(){};
+
+// logs "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// logs "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));
+ +

Polymorphismus

+ +

Wie alle Methoden und Eigenschaften innerhalb der prototype Eigenschaft definiert werden, können unterschiedliche Klassen Methoden mit demselben Namen definieren. Methoden sind im Scope der Klasse, in der sie definiert sind, verfügbar. Das gilt solange die Klassen keine parent-child Beziehung besitzen (wenn die eine Klasse nicht innerhalb einer Kette von der anderen Klasse erbt).

+ +

Anmerkungen

+ +

Die im Artikel präsentierten Techniken umfassen nicht alle Möglichkeiten der objektorientierten Programmierung in JavaScript, da JavaScript sehr flexibel in der Umsetzung der objektorientierten Programmierung ist.

+ +

Die vorgestellten Techniken zeigen nicht alle verfügbaren Hacks in JavaScript und mimen nicht die Implementierung der Objektorientiertheit in anderen Programmiersprachen.

+ +

Es gibt weitere Techniken, welche eine fortgeschrittenere objektorientierte Programmierung in JavaScript ermöglichen. Diese gehen aber über den Umfang dieses einführenden Artikels hinaus.

+ +

Referenzen

+ +
    +
  1. Wikipedia. "Object-oriented programming" und "Objektorientierte Programmierung"
    2. +
  2. Wikipedia. "Prototype-based programming" und "Prototypenbasierte Programmierung"
    3. +
  3. Wikipedia. "Encapsulation (object-oriented programming)" und "Datenkapselung (Programmierung)"
    4. +
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf