diff options
Diffstat (limited to 'files/de/conflicting/learn')
5 files changed, 0 insertions, 1018 deletions
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 deleted file mode 100644 index 12f194ed66..0000000000 --- a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Color -slug: conflicting/Learn/CSS/Building_blocks/Values_and_units -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/Guide/CSS/Getting_started/Farbe ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des <a href="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.</p> - -<h2 class="clearLeft" id="Information_Farbe">Information: Farbe</h2> - -<p>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:</p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primär</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>sekundär</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<div class="tuto_details"> -<div class="tuto_type">Details</div> - -<p>Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:</p> - -<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> -</table> - -<p>Mehr Details zur erweiterten Liste finden Sie unter <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.</p> -</div> - -<p>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 <em>hexadezimalen</em> Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>schwarz</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>reines rot</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>reines grün</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>reines blau</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>weiß</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>schwarz</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>reines rot</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>reines grün</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>reines blau</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>weiß</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p>Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.</p> - -<div class="tuto_example"> -<div class="tuto_type">Beispiel</div> - -<p>Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>Starten Sie mit reinem rot:</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu:</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu:</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>Um es dunkler zu machen, reduzieren sie alle Farbkomponenten:</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an:</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau:</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p>Für einen Pastellton wie ein blasses blau:</p> - -<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>Starten Sie mit reinem weiß:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>Reduzieren Sie die anderen Farbkomponenten ein wenig:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">Mehr Details</div> - -<p>Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.</p> - -<p>Das ist zum Beispiel Kastanienbraun (dunkles rot):</p> - -<pre class="brush:css">rgb(128, 0, 0) -</pre> - -<p>Alle Details zur Angabe von Farben finden sie unter <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in der CSS Spezifikation.</p> - -<p>Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in der CSS Spezifikation.</p> -</div> - -<h3 id="Farbeigenschaften">Farbeigenschaften</h3> - -<p>Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.</p> - -<p>Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.</p> - -<p>Hintergründe können auf <code>transparent</code> gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.</p> - -<div class="tuto_example"> -<div class="tuto_type">Beispiel</div> - -<p>Die <strong>Beispiel-</strong>Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:</p> - -<pre class="brush:css">background-color: #fffff4; -</pre> - -<p>Die <strong>Mehr Details</strong>-Boxen verwenden dieses blasse grau:</p> - -<pre class="brush:css">background-color: #f4f4f4; -</pre> -</div> - -<p> </p> - -<h2 id="Aktion_Farbcodes_verwenden">Aktion: Farbcodes verwenden</h2> - -<ol> - <li>Bearbeiten Sie Ihre CSS Datei.</li> - <li>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.) - <pre class="brush:css;highlight:[13]">/*** 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;} -</pre> - </li> - <li>Save the file and refresh your browser to see the result.</li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">Herausforderung</div> - -<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p> - -<p>(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.)</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>The following values are reasonable approximations of the named colors:</p> - -<pre class="brush: css">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 */ -} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Sehen Sie sich die Lösung an.</a></div> - -<h2 id="What_next">What next?</h2> - -<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p> 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 deleted file mode 100644 index a9787ad03f..0000000000 --- a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Why use CSS? -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.</span></p> - -<h2 class="clearLeft" id="Warum_CSS">Warum CSS ?</h2> - -<p>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 (<em>eingebettetes Stylesheet</em>) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (<em>externes Stylesheet</em>). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den <Kopfbereich> Ihres Dokumentes einbauen.</p> - -<p><span style="line-height: 16.7999992370605px;">Die Trennung von Inhalt und Form mithilfe eines</span> externen Stylesheets hat viele Vorteile:</p> - -<ul> - <li>Sie müssen nicht alles doppelt und mehrfach tun</li> - <li>Die Wartung wird vereinfacht</li> - <li>Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Beispiel</div> - -<p>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.</p> - -<p>Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.</p> - -<p>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.</p> -</div> - -<p>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.</p> - -<div class="tuto_details"> -<div class="tuto_type">Weitere Details</div> - -<p>Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.</p> - -<p>Beispielsweise können Sie in HTML einen <b>Tag verwenden um Text <strong>fett</strong> darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des <body>Tags festlegen.</p> - -<p>Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.</p> -</div> - -<h2 id="Action_Ein_CSS-Stylesheet_anlegen">Action: Ein CSS-Stylesheet anlegen</h2> - -<ol> - <li>Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.</li> - <li>Speichern Sie Ihre datei als: <code>style1.css</code>. Das wird nun Ihr Stylesheet.</li> - <li>Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses. - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="Verknüpfung_von_Dokument_und_Stylesheet">Verknüpfung von Dokument und Stylesheet</h3> - -<ol> - <li>Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei. Fürgen Sie die unten hervorgehobene Zeile hinzu: - <pre class="brush: html; highlight:[6];"><!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> -</pre> - </li> - <li>Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt: - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">Challenge</div> - -<p>Außer rot (red) erlaubt CSS noch andere Farbnamen.</p> - -<p>Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Was_nun">Was nun?</h2> - -<p>{{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 <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">lernen</a> Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.</p> 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 deleted file mode 100644 index 9a5325863a..0000000000 --- a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Wie CSS funktioniert -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400 -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 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.</span></p> - -<h2 class="clearLeft" id="Wie_CSS_funktioniert">Wie CSS funktioniert</h2> - -<p>Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:</p> - -<ol> - <li>Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.</li> - <li>Der Browser stellt den Inhalt des DOM dar.</li> -</ol> - -<p>Eine Auszeichnungssprache verwendet <em>Elemente</em> um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von <em>Tags</em>. Das sind Schlüsselworte zwischen zwei '<' spitzen Klammern '>'. Die meisten Elemente haben <em>paarweise Tags</em> - 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.</p> - -<p>Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. <schluesselwort/>.</p> - -<p>Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem <em>Container</em>. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!</p> - -<p>Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein <em>Knoten</em> (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.</p> - -<p>Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.</p> - -<div class="tuto_example"> -<div class="tuto_type">Beispiel</div> - -<p>In Ihrem Beispieldokument erzeugen der <p>-Tag und sein End-Tag </p> einen Container:</p> - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="Live_Beispiel">Live Beispiel</h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p>Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die <small>STRONG</small>- und die nachfolgenden Knoten. Der <small>STRONG</small> Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Action_Ein_DOM_analysieren">Action: Ein DOM analysieren</h2> - -<h3 id="Den_DOM_Inspector_verwenden">Den DOM Inspector verwenden</h3> - -<p>Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).</p> - -<ol> - <li>Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .</li> - <li>Wählen Sie <strong>Tools > DOM Inspector</strong> aus der Menüleiste oder <strong>Tools > Web Development > DOM Inspector</strong>. - <div class="tuto_details"> - <div class="tuto_type">Weitere Details</div> - - <p>Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">Add-ons Seite installieren</a> und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.</p> - - <p>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.</p> - </div> - </li> - <li>In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken. - <p><strong>Anmerkung:</strong> Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.</p> - - <p>Je nachdem welche Knoten Sie expandiert haben könnte ein Teil des Ergebnisses so aussehen:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>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.</p> - - <p>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.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Challenge</div> - -<p>Klicken Sie in DOMi auf einen <small>STRONG</small> Knoten.</p> - -<p>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.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Lösung.</a></div> - -<h3 id="Web_X-Ray_Goggles">Web X-Ray Goggles</h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.</p> - -<ol> - <li>Gehen Sie auf die Seite <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li>Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.</li> - <li>Öffnen Sie Ihr HTML Dokument.</li> - <li>Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.</li> - <li>Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.</li> -</ol> - -<h2 id="Was_nun">Was nun?</h2> - -<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p> diff --git a/files/de/conflicting/learn/css/first_steps/index.html b/files/de/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index cd2ed7137a..0000000000 --- a/files/de/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Einführung -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - CSS:Einführung -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/Guide/CSS/Getting_started ---- -<h3 id="Einleitung">Einleitung</h3> -<p>Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.</p> -<p>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:</p> -<ul> - <li>Der erste Teil verdeutlicht die grundlegenden Möglichkeiten von CSS, die in Mozilla Browsern und in den meisten anderen modernen Browsern funktionieren.</li> -</ul> -<ul> - <li>Der zweite Teil beinhaltet einige Beispiele über spezielle Möglichkeiten, die in Mozilla Browsern funktionieren, aber nicht unbedingt von anderen Browsern unterstützt werden.</li> -</ul> -<p>Diese Einführung basiert auf der <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Spezifikation</a>.</p> -<h4 id="An_wen_richtet_sich_dieses_Tutorial">An wen richtet sich dieses Tutorial?</h4> -<p>Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.</p> -<p>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.</p> -<p>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.</p> -<p>Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.</p> -<h4 id="Was_braucht_man_bevor_man_anfängt">Was braucht man bevor man anfängt?</h4> -<p>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.</p> -<p>Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.</p> -<p>Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.</p> -<p><strong>Hinweis: </strong> 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.</p> -<h4 id="Wie_man_dieses_Tutorial_benutzen_sollte">Wie man dieses Tutorial benutzen sollte</h4> -<p>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.</p> -<p>Auf jeder Seite gibt es einen <em>Informationsbereich</em>, um zu verstehen wie CSS funktioniert und einen <em>Aktionsbereich</em>, um CSS auf dem eigenen Computer selbst auszuprobieren.</p> -<p>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.</p> -<p>Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter <em>Weite Details</em> zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.</p> -<h3 id="Erster_Teil">Erster Teil</h3> -<p>Eine Schritt für Schritt Einführung in CSS:</p> -<ol> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">Was ist CSS</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Warum CSS</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Wie CSS funktioniert</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Kaskade und Vererbung</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selektoren</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Lesbares CSS</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Textformatierung</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Farbe</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Inhalt Boxen</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabellen</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Medien</a></li> -</ol> -<h3 id="Zweiter_Teil">Zweiter Teil</h3> -<p>Beispiele, die die Anwendung von CSS in Mozilla zeigen:</p> -<ol> - <li><a href="/de/docs/Web/Guide/CSS/Getting_started/JavaScript" title="de/CSS/Einführung/JavaScript">JavaScript</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_started/XBL_bindings" title="de/CSS/Einführung/XBL_bindings">XBL bindings</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XUL" title="de/CSS/Einführung/CSS_in_XUL">CSS in XUL</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_SVG" title="de/CSS/Einführung/CSS_in_SVG">CSS in SVG</a></li> - <li><a href="/de/docs/Web/Guide/CSS/Getting_started/CSS_in_XML" title="de/CSS/Einführung/CSS_in_XML">CSS in XML</a></li> -</ol> diff --git a/files/de/conflicting/learn/javascript/objects/index.html b/files/de/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index d09b4c33bc..0000000000 --- a/files/de/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Einführung in objektorientiertes JavaScript -slug: conflicting/Learn/JavaScript/Objects -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 -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<div>{{jsSidebar("Introductory")}}</div> - -<p>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)}}.</p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">JavaScript Review</h2> - -<p>Wenn Sie nicht mit den Konzepten in JavaScript, wie zum Beispiel Variablen, Typen, Funktionen und Geltungsbereich, vertraut sind, lesen Sie bitte zuerst den Artikel <a href="/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript">Eine Wiedereinführung in JavaScript</a>. Sie können ebenfalls auf den <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> zurückgreifen.</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">Objektorientierte Programmierung</h2> - -<p>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).</p> - -<p>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.</p> - -<p>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.<a href="#cite-1"><sup>1</sup></a></p> - -<h2 id="Terminology" name="Terminology">Begriffsdefinitionen</h2> - -<dl> - <dt>{{Glossary("Namespace")}}</dt> - <dd>Ein Container, der Entwicklern die Bündelung von Funktionalität unter einem eindeutigen, applikationsspezifischen Namen ermöglicht.</dd> - <dt>{{Glossary("Klasse")}}</dt> - <dd>Definiert die Eigenschaften eines Objekts. Sie ist die Definition einer Vorlage von Variablen und Methoden eines Objekts.</dd> - <dt>{{Glossary("Objekt")}}</dt> - <dd>Eine Instanz einer Klasse.</dd> - <dt>{{Glossary("Eigenschaft")}}</dt> - <dd>Eine Eigenschaft eines Objekts, wie zum Beispiel eine Farbe.</dd> - <dt>{{Glossary("Methode")}}</dt> - <dd>Eine Fähigkeit eines Objekts, wie zum Beispiel laufen. Sie ist eine Unterroutine oder Funktion, die mit der Klasse assoziiert ist.</dd> - <dt>{{Glossary("Konstruktor")}}</dt> - <dd>Eine spezielle Methode, die zur Instanziierung eines Objekts aufgerufen wird. Sie hat gewöhnlicherweise denselben Namen wie die Klasse, zu der sie gehört.</dd> - <dt>{{Glossary("Vererbung")}}</dt> - <dd>Eine Klasse kann die Eigenschaften und Fähigkeiten von anderen Klassen erben und somit für sich verwenden.</dd> - <dt>{{Glossary("Datenkapselung")}}</dt> - <dd>Die Datenkapselung ist eine Technik, um die Daten und die Methoden, die diese Daten verwenden, miteinander zu bündeln.</dd> - <dt>{{Glossary("Abstraktion")}}</dt> - <dd>Die Verknüpfung von komplexer Vererbung, Methoden und Eigenschaften eines Objekts müssen ein Modell der Realität simulieren können.</dd> - <dt>{{Glossary("Polymorphismus")}}</dt> - <dd>Poly bedeute "<em>viele</em>" und Morphismus bedeutet "<em>Formen</em>". Verschiedene Klassen können dieselbe Methode oder dieselbe Eigenschaft definieren.</dd> -</dl> - -<p>Lesen Sie bitte den Artikel {{interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia für eine umfassendere Beschreibung der objektorientierten Programmierung.</p> - -<h2 id="Prototypenbasierte_Programmierung">Prototypenbasierte Programmierung</h2> - -<p>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.</p> - -<p>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.<a href="#cite-2"><sup>2</sup></a></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Objektorientierte Programmierung mit JavaScript</h2> - -<h3 id="Namespace">Namespace</h3> - -<p>Ein Namespace ist ein Container in dem Entwickler Funktionalitäten unter einem eindeutigen, applikationsspezifischen Namen zusammenfassen können. <strong>In JavaScript ist ein Namespace ein gewöhnliches Objekt, welches Methoden, Eigenschaften und Objekte enthält.</strong></p> - -<div class="note"> -<p>Im Gegensatz zu manchen anderen objektorientierten Programmiersprachen gibt es in der Sprachebene von JavaScript keinen Unterschied zwischen einem regulären Objekt und einem Namespace.</p> -</div> - -<p>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.</p> - -<p>Es wird ein globales Objekt names MYAPP erstellt:</p> - -<pre class="brush: js">// global namespace -var MYAPP = MYAPP || {};</pre> - -<p>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.</p> - -<p>Innerhalb eines Namespaces können weitere Namespaces erstellt werden:</p> - -<pre class="brush: js">// sub namespace -MYAPP.event = {};</pre> - -<p>Der folgende Code erstellt einen Namespace und fügt diesem Variablen, Funktionen und Methoden hinzu:</p> - -<pre class="brush: js">// 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);</pre> - -<h3 id="Core_Objects" name="Core_Objects">Standardmäßig eingebaute Objekte</h3> - -<p>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 <code>random()</code> Methode eine Zufallszahl generiert.</p> - -<pre class="brush: js">console.log(Math.random()); -</pre> - -<div class="note"><strong>Hinweis:</strong> Dieses und folgende Beispiele setzen voraus, dass {{domxref("console.log()")}} global definiert wurde. Die <code>console.log</code> Funktion ist kein eigentlicher Sprachteil von JavaScript, jedoch implementieren viele Browser diese zum Debuggen.</div> - -<p>Siehe <a href="/de/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a> für eine List aller Objekte im Kern von JavaScript.</p> - -<p>Jedes Objekt in JavaScript ist eine Instanz des Objekts <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> und erbt somit alle Eigenschaften und Methoden von diesem.</p> - -<h3 id="Custom_Objects" name="Custom_Objects">Eigene Objekte</h3> - -<h4 id="The_Class" name="The_Class">Die Klasse</h4> - -<p>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.</p> - -<pre class="brush: js">var Person = function(){ } -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">Das Objekt (Instanz einer Klasse)</h4> - -<p>Um eine neue Instanz eines Objekts <em><code>obj</code></em> zu erstellen, wird die Anweisung <code>new <em>obj</em></code> ausgeführt. Das Ergebnis der Anweisung (welches den Typ <em><code>obj</code></em> hat) wird für eine spätere Verwendung einer Variablen zugewiesen.</p> - -<p>Im folgenden Beispiel wird eine Klasse mit dem Namen <code>Person</code> definiert und zwei Objekte (<code>person1</code> and <code>person2</code>) instanziiert.</p> - -<pre class="brush: js">var person1 = new Person(); -var person2 = new Person(); -</pre> - -<div class="note">Lesen Sie bitte {{jsxref("Object.create()")}} für eine neue, alternative Methode zur Objektinstanziierung.</div> - -<h4 id="The_Constructor" name="The_Constructor">Der Konstruktor</h4> - -<p>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.</p> - -<p>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.</p> - -<p>Im folgenden Beispiel loggt der Konstruktor der Klasse <code>Person</code> eine Nachricht, wenn ein <code>Person</code> Objekt instanziiert wird.</p> - -<pre class="brush: js">function Person() { - console.log('Instanz erstellt'); -} - -var person1 = new Person(); -var person2 = new Person(); -</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Die Eigenschaft (Objektattribut)</h4> - -<p>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.</p> - -<p>Eigenschaften können innerhalb eines Objekts mit dem Schlüsselwort <code>this</code>, welches das aktuelle Objekt referenziert, verwendet werden. Der Zugriff (lesen oder schreiben) auf eine Eigenschaft von außerhalb der Klasse wird durch die Syntax <code>InstanceName.Property</code> ermöglicht. Diese Syntax ist analog zu C++, Java und zahlreichen anderen Programmiersprachen. Innerhalb der Klasse wird die Syntax <code>this.Property</code> zum Lesen oder Schreiben des Werts verwendet.</p> - -<p>Im folgenden Beispiel wird die Eigenschaft <code>firstName</code> für die <code>Person</code> Klasse definiert. Bei der Instanziierung wird ihr ein Wert zugewiesen.</p> - -<pre class="brush: js">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" -</pre> - -<h4 id="The_methods" name="The_methods">Die Methoden</h4> - -<p>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 <code>()</code> 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 <code>prototype</code> Eigenschaft der Klasse zugewiesen werden. Der Name der benannten Eigenschaft dient nun als Methodenname über den die Methode auf dem Objekt aufgerufen werden kann.</p> - -<p>Im folgenden Beispiel wird die Methode <code>sayHello()</code> für die <code>Person</code> Klasse definiert.</p> - -<pre class="brush: js">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" -</pre> - -<p>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:</p> - -<pre class="brush: js">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);</pre> - -<p>Das Beispiel zeigt, dass alle Referenzen zur <code>sayHello</code> Funktion — die auf <code>person1</code>, auf <code>Person.prototype</code>, in der <code>helloFunction</code> Variable, etc. — <em>dieselbe Funktion</em> referenzieren. Der Wert von <code>this</code> 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 — <code>person1.sayHello()</code> — referenziert <code>this</code> das Objekt, auf der die Funktion aufgerufen wird (<code>person1</code>). Deshalb verwendet <code>person1.sayHello()</code> den Namen "Alice" und <code>person2.sayHello()</code> den Namen "Bob". Wenn die Funktion über andere Arten aufgerufen wird, ist <code>this</code> unterschiedlich definiert: Der Aufruf von der Variablen aus — <code>helloFunction()</code> — setzt <code>this</code> auf das globale Objekt (<code>window</code>, in Webbbrowsern). Da dieses Objekt (wahrscheinlich) keine <code>firstName</code> Eigenschaft besitzt, gitb die Funktion "Hello, I'm undefined" aus. (Dieses Ergebnis wird im Loose Mode produziert. Im <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict Mode</a> 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) <code>this</code> kann auch explizit über <code>Function#call</code> (oder <code>Function#apply</code>) definiert werden. Die geschieht in der letzten Zeile des obigen Beispiels.</p> - -<div class="note"><strong>Hinweis:</strong> Mehr über <code>this</code> können Sie unter <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> und <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a> finden.</div> - -<h4 id="Inheritance" name="Inheritance">Vererbung</h4> - -<p>Vererbung ist eine Methode, um eine Klasse zu erstellen, die eine spezialisierte Version von einer (Einfachvererbung) oder mehrerer (Mehrfachvererbung) Klassen ist (<em>JavaScript unterstützt nur Einfachvererbung</em>). Die spezialisierte Klasse wird normalerweise als <em>child</em> bezeichnet. Die Klasse, von der geerbt wird, wird als <em>parent</em> bezeichnet. Vererbung in JavaScript funktioniert indem eine Instanz der <em>parent</em> Klasse der <em>child</em> Klasse zugewiesen und dann spezialisiert wird. In modernen Webbrowsern kann die Vererbung auch mittels der Verwendung von <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> implementiert werden.</p> - -<div class="note"><strong>Hinweis:</strong> JavaScript erkennt den Konstruktor <code>prototype.constructor</code> (siehe <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>) der child Klasse nicht. Er muss manuell angegeben werden. Sehe dazu zusätzlich den Beitrag "<a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" (englisch) auf Stackoverflow an.</div> - -<p>Im folgenden Beispiel wird die Klasse <code>Student</code> als <em>child</em> Klasse von <code>Person</code> definiert. Dann wird die Methode <code>sayHello()</code> neu definiert und die Methode <code>sayGoodBye()</code> zur Klasse <code>Person</code> hinzugefügt.</p> - -<pre class="brush: js">// 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 -</pre> - -<p>Unter Betrachtung der Zeile <code>Student.prototype = Object.create(Person.prototype);</code>: In älteren JavaScript Engines ohne <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, kann ein "polyfill" (auch "shim", siehe den verlinkten Artikel) oder eine Funktion, die dasselbe Ergebnis erzielt, verwendet werden:</p> - -<pre class="brush: js">function createObject(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// Einsatz: -Student.prototype = createObject(Person.prototype); -</pre> - -<div class="note">Lesen Sie <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>, um mehr zum obigen Beispiel zu erfahren.</div> - -<p>Stellen sie sicher, dass <code>this</code> zum richtigen Objekt referenziert unabhängig davon, wie das Objekt erstellt wird. Es gibt eine einfache Methode dieses sicherzustellen:</p> - -<pre>var Person = function(firstName) { - if (this instanceof Person) { - this.firstName = firstName - } else { - return new Person(firstName) - } -}</pre> - -<h4 id="Encapsulation" name="Encapsulation">Datenkapselung</h4> - -<p>Im obigen Beispiel muss die <code>Student</code> Klasse nicht wissen, wie die Methode <code>walk()</code> der <code>Person</code> Klasse implementiert ist, um sie verwenden zu können. Die <code>Student</code> Klasse muss die Methode nicht explizit definierten, solange Sie unverändert übernommen werden soll. Dabei handelt es sich um <strong>Datenkapselung</strong>, bei der jede Klasse ihre Daten und Methoden in einer Einheit bündeln.</p> - -<p>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.<a href="#cite-3"><sup>3</sup></a></p> - -<h4 id="Abstraction" name="Abstraction">Abstraktion</h4> - -<p>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.</p> - -<p>Die Function Klasse in JavaScript erbt von der Object Klasse (Spezialisierung). Die <code>Function.prototype</code> Eigenschaft ist eine Instanz der Object Klasse (Komposition).</p> - -<pre class="brush: js">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));</pre> - -<h4 id="Polymorphism" name="Polymorphism">Polymorphismus</h4> - -<p>Wie alle Methoden und Eigenschaften innerhalb der <code>prototype</code> 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).</p> - -<h2 id="Anmerkungen">Anmerkungen</h2> - -<p>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.</p> - -<p>Die vorgestellten Techniken zeigen nicht alle verfügbaren Hacks in JavaScript und mimen nicht die Implementierung der Objektorientiertheit in anderen Programmiersprachen.</p> - -<p>Es gibt weitere Techniken, welche eine fortgeschrittenere objektorientierte Programmierung in JavaScript ermöglichen. Diese gehen aber über den Umfang dieses einführenden Artikels hinaus.</p> - -<h2 id="References" name="References">Referenzen</h2> - -<ol> - <li><a name="cite-1"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Object-oriented_programming">Object-oriented programming</a>" und "<a href="https://de.wikipedia.org/wiki/Objektorientierte_Programmierung">Objektorientierte Programmierung</a>"</li> - <li><a name="cite-2"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">Prototype-based programming</a>" und "<a href="https://de.wikipedia.org/wiki/Prototypenbasierte_Programmierung">Prototypenbasierte Programmierung</a>"</li> - <li><a name="cite-3"></a>Wikipedia. "<a href="https://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29">Encapsulation (object-oriented programming)</a>" und "<a href="https://de.wikipedia.org/wiki/Datenkapselung_%28Programmierung%29">Datenkapselung (Programmierung)</a>"</li> -</ol> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li>{{jsxref("Function.prototype.call()")}}</li> - <li>{{jsxref("Function.prototype.apply()")}}</li> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Strict_mode", "Strict mode")}}</li> -</ul> |