unslug de: move

1 files changed, 407 insertions, 0 deletions

diff --git a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..65a31710d3
--- /dev/null
+++ b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,407 @@
+---
+title: JavaScript-Grundlagen
+slug: Learn/Getting_started_with_the_web/JavaScript_basis
+tags:
+  - Anfänger
+  - JavaScript
+  - Lernen
+  - Web
+  - Webdesign
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript ist eine Programmiersprache, mit der man interaktive Inhalte zu einer Webseite hinzufügen kann (zum Beispiel: Spiele, Reaktionen durch das Drücken von Buttons oder Eingaben in Formulare, dynamisches Aussehen, Animationen, usw.). Dieser Artikel hilft Ihnen, erste Schritte mit dieser spannenden Sprache zu machen und eine Vorstellung zu verschaffen, was möglich ist.</p>
+</div>
+
+<h2 id="Was_ist_JavaScript_wirklich">Was ist JavaScript wirklich?</h2>
+
+<p>{{Glossary("JavaScript")}} (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem {{Glossary("HTML")}} Dokument hinzufügt, für Dynamik und Interaktion mit dem Nutzer sorgt. JS wurde von Brendan Eich erfunden, Mitbegründer des Mozilla Projektes, der Mozilla Foundation, und der Mozilla Corporation.</p>
+
+<p>JavaScript ist unglaublich vielseitig. Man beginnt ganz einfach mit simplen Features, wie z.B. Karussels, (Bilder-)Galerien, variablen Layouts und Reaktionen auf Button-Klicks. Wenn Sie dann später erfahrener im Umgang mit der Sprache sind, können Sie damit ganze Spiele, animierte 2D- und 3D-Grafiken, auf Datenbanken basierende Apps und vieles mehr erstellen!</p>
+
+<p>JavaScript an sich ist sehr kompakt und trotzdem flexibel. Viele Entwickler haben noch weitere Tools/Erweiterungen für die Arbeit mit JavaScript geschrieben, um noch mehr Effizienz mit wenig Aufwand aus JS herauszuholen. Diese Funktionen sind:</p>
+
+<ul>
+ <li>Programmierschnittstellen ({{Glossary("API","APIs")}}), die in Browsern implementiert wurden, um diese um JS-Funktionen zu erweitern, z.B. das dynamische Erstellen von HTML oder das Einstellen eines CSS-Styles, Abfangen und Manipulieren von Videostreams, Erzeugen von 3D-Grafiken/Audio-Samples und vieles mehr...</li>
+ <li>Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Seiten in eigene Seiten einzubinden, z.B. von Twitter oder Facebook.</li>
+ <li>Drittanbieter-Frameworks und Bibliotheken, die man zu HTML hinzufügen kann, die es ermöglichen, Webseiten und Apps schnell zu erzeugen.</li>
+</ul>
+
+<p>Da dieser Artikel dazu gedacht ist, Ihnen eine leichte Einführung in die Grundlagen von JavaScript zu geben, werden wir uns hier nicht über die Unterschiede zwischen der Basis der JavaScript-Sprache und den obengenannten Erweiterungen unterhalten. Sie können später im Detail lernen, was es damit auf sich hat in unserem <a href="/de/docs/Learn/JavaScript">JavaScript Lernbereich</a>.</p>
+
+<p>Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!</p>
+
+<h2 id="Ein_Hallo_Welt!_Beispiel">Ein "Hallo Welt!" Beispiel</h2>
+
+<p>Der vorhergehende Absatz klingt sehr aufregend und das zurecht. JavaScript ist eine der spannendsten Internet-Technologien und wenn Sie damit beginnen, wird Ihre Webseite sehr viel mächtiger.</p>
+
+<p>Jedoch ist JavaScript etwas komplexer als HTML und CSS. Daher werden Sie klein anfangen, und in kurzen, regelmäßigen Schritten vorangehen müssen. Zum Start zeigen wir Ihnen, wie man JavaScript-Code zu einer Seite hinzu fügt, um ein "Hallo Welt!" Beispiel zu erstellen (<a href="https://de.wikipedia.org/wiki/Hallo-Welt-Programm">der Standard in elementaren Programmierbeispielen</a>).</p>
+
+<div class="warning">
+<p><strong>WICHTIG</strong>: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">laden Sie dieses Codebeispiel herunter</a> und benutzen es als Einstieg.</p>
+</div>
+
+<ol>
+ <li>Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen <code>main.js</code>. Speichern Sie diese Datei in Ihrem skripts-Ordner.</li>
+ <li>Dann gehen Sie zur <code>index.html</code> Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden <code>&lt;/body&gt;-</code>Tag ein:
+  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Dies macht dasselbe, wie das {{htmlelement("link")}} Element für CSS — Es bindet die JavaScript-Datei auf der Seite ein, damit es einen Einfluss auf den HTML Code haben kann (und auch auf den CSS-Code und alles andere auf der Seite).</li>
+ <li>Fügen Sie nun den folgenden Code in die <code>main.js-</code>Datei ein:
+  <pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hallo Welt!';</pre>
+ </li>
+ <li>Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden <code>index.html</code> in einen Browser. Die Webseite sollte wie folgt aussehen:<img alt="" src="https://mdn.mozillademos.org/files/15479/beginner-js1-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></li>
+</ol>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Hinweis</strong></span>: Das {{htmlelement("script")}}-Element haben wir am Ende des &lt;body&gt;-Elements geschrieben, da das HTML vom Browser in der Reihenfolge geladen wird, wie es in der Datei geschrieben wurde. Wenn der JavaScript-Code geladen wird, bevor die HTML-Seite aufgebaut wurde, hat es möglicherweise keinen Einfluss auf die HTML-Elemente, die später geladen werden. Also ist es meistens am besten, JavaScript-Code eher am Ende der HTML Seite einzubinden.</p>
+</div>
+
+<h3 id="Was_ist_passiert">Was ist passiert?</h3>
+
+<p>Ihre Überschrift wurde durch die Benutzung von JavaScript zu "Hello world!" geändert. Wir haben dies dadurch ermöglicht, indem wir zuerst eine Funktion mit dem Namen {{domxref("Document.querySelector", "querySelector()")}} benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen <code>myHeading</code> gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den Selektoren gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.</p>
+
+<p>Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen  <code>myHeading</code> (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!". </p>
+
+<div class="note">
+<p><strong>Hinweis: </strong>Beide Funktionen die Sie genutzt haben<strong> </strong>sind Teile<strong> </strong>des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a></p>
+</div>
+
+<h2 id="Programmier-Crash-Kurs">Programmier-Crash-Kurs</h2>
+
+<p>Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verständnis der Zusammenhänge zu vermitteln. Diese Eigenschaften sind anderen Programmiersprachen gemeinsam. Wenn Sie diese Grundlagen verstehen, sollte es Ihnen möglich sein, mit dem Programmieren zu beginnen.</p>
+
+<div class="warning">
+<p><strong>Wichtig</strong>: Versuchen Sie, die Zeilen des Beispielcodes dieses Artikels, in die JavaScript-Konsole einzufügen, um zu sehen, was geschieht. Weitere Details zur JavaScript-Konsole entnehmen Sie aus <a href="/en-US/Learn/Discover_browser_developer_tools">Entdecke Browser Entwickler-Werkzeuge</a>.</p>
+</div>
+
+<h3 id="Variablen">Variablen</h3>
+
+<p>{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort <code>var </code>deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:  Jede Befehlszeile in JavaScript muss mit einem Semikolon abgeschlossen werden, um das Ende der Befehlszeile zu markieren. Tun Sie dies nicht, erwarten Sie unerwartete Ergebnisse.</p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>:  Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe <a href="http://www.codelifter.com/main/tips/tip_020.shtml">diesen Artikel über die Regeln von Benennung von Variablen</a>.)  Wenn Sie unsicher sind, können Sie <a href="https://mothereff.in/js-variables">den Variablennamen prüfen</a>, um die Gültigkeit zu prüfen.</p>
+</div>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: JavaScript beachtet Groß-/Kleinschrift  — <code>myVariable</code> ist unterschiedlich zur Variablen <code>myvariable</code>. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! </p>
+</div>
+
+<p>Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden: </p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p>Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: </p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>Beachten Sie, dass Variablen unterschiedliche <a href="/en-US/docs/Web/JavaScript/Data_structures">Datentypen</a> aufweisen:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Erklärung</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.</td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.</td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Ein wahr/falsch (true/false) Wert. Die Worte <code>true</code> und <code>false</code> sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichen</td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>
+    <p>Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.</p>
+   </td>
+   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+    Bezieht sich auf jedes Mitglied des arrays wie dieses:<br>
+    <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p>Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Gedächtnis, während Sie lernen.</p>
+   </td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    Und ebenso alle der obigen Beispiele.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Warum werden Variablen benötigt? Nun, Variablen werden benötigt, um alles Interessante beim Programmieren abzudecken. Wenn sich Werte nicht ändern könnten, dann könnte nichts Dynamisches geschaffen werden, wie zum Beispiel eine Willkommensmeldung zu personalisieren oder ein Bild, das in einer Bildgallerie angezeigt wird.</p>
+
+<h3 id="Kommentare">Kommentare</h3>
+
+<p>Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:</p>
+
+<pre class="brush: js">/*
+Alles hier drin ist ein Kommentar.
+*/</pre>
+
+<p>Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// Dies ist ein Kommentar
+</pre>
+
+<h3 id="Operatoren">Operatoren</h3>
+
+<p>Ein {{Glossary("operator")}} ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren, gefolgt von einigen Beispielen, die Sie in der JavaScript Konsole ausprobieren können. </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Operator</th>
+   <th scope="col">Erklärung</th>
+   <th scope="col">Symbol(e)</th>
+   <th scope="col">Beispiel</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">addieren/verbinden</th>
+   <td>Wird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">subtrahieren, multiplizieren, teilen </th>
+   <td>Verhalten sich so, wie aus der Mathematik bekannt.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // in JS ist der Multiplikationsoperator ein Stern<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Zuweisungsoperator</th>
+   <td>Sie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Gleichheitsoperator</th>
+   <td>
+    <p>Prüft zwei Werte auf Gleichheit und liefert <code>true</code>/<code>false</code> (Boolean) als Ergebnis</p>
+   </td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Verneinung, ungleich</th>
+   <td>
+    <p>Liefert als Ergebnis das logische Gegenteil; dreht ein <code>true</code> in ein <code>false, </code>etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.</p>
+   </td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>Der Basis-Ausdruck ist <code>true</code>, aber der Vergleich liefert <code>false</code> weil er negiert wurde:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>Hier wird geprüft, ob <code>myVariable</code> ungleich 3 ist. Der Rückgabewert ist <code>false, weil myVariable </code>den Wert 3 aufweist.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Ausdrücke und Operatoren</a>.</p>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das Vermischen von Datentypen kann bei Berechnungen unerwartete Ergebnisse liefern. Achten Sie darauf, die Variablen korrekt zu verwenden und prüfen Sie, ob das erwartete Ergebnis zurückgegeben wird. Tippen Sie beispielsweise "35" + "25" in die Konsole ein und schauen sich das Ergebnis an. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt und somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.</p>
+</div>
+
+<h3 id="Bedingungen">Bedingungen</h3>
+
+<p>Bedingungen sind Code-Strukturen, die Ihnen erlauben, zu prüfen, ob ein Ausdruck wahr oder falsch ist und in Abhängigkeit des Ergebnisses unterschiedlichen Code auszuführen. Die gebräuchlichste Art von Bedingungen sind <code>if ... else.</code> Zum Beispiel:</p>
+
+<pre class="brush: js">var eis = 'Schokolade';
+if (eis === 'Schokolade') {
+  alert('Yuhu, ich liebe Schokoladeneis!');
+} else {
+  alert('Awwww, ich mag lieber ein Schokoladeneis...');
+}</pre>
+
+<p>Der Ausdruck innerhalb des <code>if ( ... ) </code>ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable <code>eis</code> mit dem String S<code>chokolade</code> zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich <code>true</code>, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem <code>else</code> Befehl ausgeführt.</p>
+
+<h3 id="Funktionen">Funktionen</h3>
+
+<p>{{Glossary("Function", "Functions")}} ist ein Weg, um Funktionalitäten zusammenzupacken, die wiederverwendet werden sollen. Immer wenn die Funktionalität benötigt wird, wird die Funktion unter ihrem Namen aufgerufen, statt denselben Code immer wieder erneut schreiben zu müssen. Sie haben bereits einige Verwendungen von Funktionen gesehen, zum Beispiel:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('Hallo!');</pre>
+ </li>
+</ol>
+
+<p>Die Funktionen <code>document.querySelector</code> and <code>alert</code> sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.</p>
+
+<p>Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — <code>()</code> — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "arguments")}} auf, um die Funktionalität zu gewährleisten. Diese Argumente werden innerhalb der runden Klammern platziert und von Komma getrennt, wenn mehr als ein Argument übergeben wird.</p>
+
+<p>Beispielsweise erzeugt die Funktion <code>alert()</code> eine Pop-Up-Box  innerhalb des Browser-Fensters. Dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.</p>
+
+<p>Die guten Nachrichten sind, dass Sie Ihre eigenen Funktionen definieren können. Im nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente aufnimmt und diese multipliziert:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p>Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>Anmerkung</strong>: Das <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> Kommando teilt dem Browser mit, die Variable <code>result</code> aus der Funktion zurückzuliefern. Somit ist es möglich, diese zu benutzen. Dies ist notwendig, weil Variablen, die innerhalb der Funktion verwendet werden, nur dort gültig sind. Diese Verhaltensweise wird {{Glossary("Scope", "scoping")}} genannt. (Lesen Sie <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">mehr über den Gültigkeitsbereich von Variablen</a>.)</p>
+</div>
+
+<h3 id="Ereignisse_Events">Ereignisse (Events)</h3>
+
+<p>Um wirkliche Interaktivität auf einer Website herzustellen, werden Ereignisse (events) benötigt - dieses sind Code-Strukturen, die auf Ereignisse achten, die im Browser geschehen und Ihnen dann erlauben, Code auszuführen, um auf diese Ereignisse zu reagieren. Das offensichtlichste Beispiel ist das <a href="/en-US/docs/Web/Events/click">Klick-Ereignis</a>, das vom Browser abgefeuert wird, wenn man mit dem Mauszeiger auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Hey! Nicht so viel klicken!');
+}</pre>
+
+<p>Es existieren viele Möglichkeiten, ein Ereignis mit einem Element zu verbinden. Hier wählen wir das Element HTML aus und setzen die Eigenschaft des <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a>-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.</p>
+
+<p>Beachten Sie, dass</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>gleichbedeutend ist mit</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>Es ist nur kürzer.</p>
+
+<h2 id="Dynamische_Inhalte_für_unsere_Beispielwebseite">Dynamische Inhalte für unsere Beispielwebseite</h2>
+
+<p>Nun, da wir einige Grundlagen von JavaScript kennengelernt haben, lassen Sie uns einige dynamische Inhalte in Ihre erste Webseite einfügen, damit Sie sehen was mit JavaScript möglich ist.</p>
+
+<h3 id="Bilder_wechseln">Bilder wechseln</h3>
+
+<p>Wir werden der Webseite ein weiteres Bild hinzufügen. Mit etwas JavaScript-Code werden wir zwischen den beiden Bildern wechseln, wenn auf diese mit der Maus geklickt wird.</p>
+
+<ol>
+ <li>Suchen Sie sich zuerst ein zweites Bild für Ihre Webseite aus. Es sollte möglichst die selbe Größe haben, wie das Bild, das Sie schon auf der Webseite haben.</li>
+ <li>Speichern Sie dieses Bild in Ihrem <code>bilder</code>-Ordner.</li>
+ <li>Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es <code>'firefox2.png'</code> genannt.</li>
+ <li>Gehen Sie in Ihre <code>main.js</code> Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben)
+  <pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'bilder/firefox-icon.png') {
+      myImage.setAttribute ('src','bilder/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','bilder/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Speichern Sie alle Dateien und laden Sie <code>index.html</code> in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!</li>
+</ol>
+
+<p>Wir erstellen die Variable <code>myImage</code> und speichern in dieser eine Referenz zu unserem Bild-Element(<code>img</code>). Als nächstes setzen wir das <code>onclick</code>-Event dieser Variablen gleich mit einer Funktion ohne Namen (einer<em>anonymen</em> Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:</p>
+
+<ol>
+ <li>Wir holen uns den Wert des <code>src</code> Attributes von unserem Bild.</li>
+ <li>Wir benutzen eine <code>if</code>-Bedingung, um zu überprüfen ob der <code>src</code>-Wert derselbe ist, wie der Pfad unseres original Bildes:
+  <ol>
+   <li>Wenn die Bedingung wahr ist, ändern wir den <code>src</code>-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.</li>
+   <li>Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den <code>src</code>-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Ein_persönlicher_Willkommensgruß">Ein persönlicher Willkommensgruß</h3>
+
+<p>Als nächstes fügen wir unserer Webseite einen persönlichen Willkommensgruß hinzu, welcher vom Benutzer beim ersten Besuch der Seite geändert werden kann. Die Änderung soll auch erhalten bleiben, wenn der Benutzer die Seite verlässt und später wieder zurück kommt. Wir werden auch eine Option haben, den Nutzer zu ändern, so das der Gruß dementsprechend geändert wird.</p>
+
+<ol>
+ <li>In der <code>index.html</code>-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein:
+
+  <pre class="brush: html">&lt;button&gt;Name ändern&lt;/button&gt;</pre>
+ </li>
+ <li>In <code>main.js</code> fügen Sie den folgenden Code am Ende hinzu. Achten Sie darauf, das Ihr Code genauso aussieht wie hier gezeigt. Damit erstellen wir zwei neue Variablen und speichern in der Ersten eine Referenz zu unserem neu erstellten button und in der Zweiten zu unserer Hauptüberschrift auf der Webseite:
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>Fügen Sie nun die folgende Funktion ein. Diese erstellt den personalisierten Willkommensgruß. Jetzt macht diese Funktion noch nichts, aber wir werden sie gleich benutzen:
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Bitte geben Sie Ihren Namen ein.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla ist cool, ' + myName;
+}</pre>
+  Innerhalb der Funktion wird in der ersten Zeile die neue Variable <code>myName</code> erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der <a href="/de/docs/Web/API/Window.prompt"><code>prompt()</code></a>-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der <code>alert()</code>-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf <strong>OK</strong> bestätigen kann. Als nächstes Rufen wir eine API namens <code>localStorage</code> auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die s<code>etItem()</code>-Funktion von <code>localStorage</code>, um ein Datenobjekt mit dem Namen <code>'name'</code> zu erstellen und setzen für den Wert die Variable <code>myName</code> ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (<code>textContent</code>) von <code>myHeading</code> mit unserem Gruß welcher den Namen des Benutzers beinhaltet.</li>
+ <li>Fügen Sie als nächstes diesen <code>if ... else</code> Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla ist cool, ' + storedName;
+}</pre>
+  Dieser Code-Block benutzt eine logische Verneinung, um zu überprüfen ob es schon einen gespeicherten Namen gibt. Wenn der Name nicht existiert, dann wird die Funktion <code>setUserName()</code> aufgerufen, um einen Namen zu bekommen. Wenn der Name existiert, der Benutzer also diesen schon bei einem vorherigen Besuch der Webseite angegeben hat, dann wird der gespeicherte Name mit der <code>getItem()</code>-Funktion geladen, in der Variablen <code>storedName</code> gespeichert und dem String für den Willkommensgruß hinzugefügt.</li>
+ <li>Als letztes fügen wir unserem Button den unten stehenden <code>onclick</code>-Eventhandler hinzu, welcher die <code>setUserName()</code>-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt:
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>Wenn Sie Ihre Seite jetzt im Browser aufrufen, werden Sie beim ersten Besuch nach Ihrem Namen gefragt und der Willkommensgruß wird personalisiert. Sie können den Namen jederzeit ändern, indem Sie auf den Button drücken. Der personalisierte Willkommensgruß wird auch wieder angezeigt, wenn Sie die Seite verlassen und danach wieder aufrufen, da der Name in <code>localStorage</code>, im Browser, gespeichert wird!</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (<a href="https://mdn.github.io/beginner-html-site-scripted/">sehen Sie sich unsere Version an</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15477/beginner-js2-de.jpg"></p>
+
+<p>Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">unseren Code auf Github anschauen</a>.</p>
+
+<p>Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>