1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: Einführung
slug: Web/JavaScript/Guide/Einführung
tags:
- Beginner
- Guide
- Introduction
- JavaScript
- 'l10n:priority'
translation_of: Web/JavaScript/Guide/Introduction
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</div>
<p class="summary">Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.</p>
<h2 id="Was_solltest_du_bereits_wissen">Was solltest du bereits wissen</h2>
<p>Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:</p>
<ul>
<li>Ein allgemeines Verständnis vom Internet und dem World Wide Web ({{Glossary("WWW")}}).</li>
<li>Gute praktische Kenntnisse in der HyperText Markup Language ({{Glossary("HTML")}}).</li>
<li>Etwas Programmiererfahrung. Falls du erst mit dem Programmieren beginnst, folge einem der Tutorials, die auf der Hauptseite zu <a href="/de/docs/Web/JavaScript" title="/en-US/docs/">JavaScript</a> verlinkt sind.</li>
</ul>
<h2 id="Wo_findest_du_Informationen_zu_JavaScript">Wo findest du Informationen zu JavaScript</h2>
<p>Die Dokumentation zu JavaScript im MDN umfasst Folgendes:</p>
<ul>
<li><a href="/de/Learn">Learning the Web [de]</a> vermittelt Informationen für Einsteiger und präsentiert grundlegende Konzepte der Programmierung und des Internets.</li>
<li><a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide [de]</a> (dieser Artikel) gibt einen Überblick über JavaScript und die Komponenten der Sprache.</li>
<li><a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> enthält ausführliches Referenzmaterial über JavaScript.</li>
</ul>
<p>Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von <a href="/de/Learn">Learning the Web [de]</a> und dem <a href="/de/docs/Web/JavaScript/Guide" title="en/Core_JavaScript_1.5_Guide">JavaScript Guide [de]</a>. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die <a href="/de/docs/Web/JavaScript/Reference">JavaScript Referenz [de]</a> nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.</p>
<h2 id="Was_ist_JavaScript">Was ist JavaScript?</h2>
<p>JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.</p>
<p>JavaScript beinhaltet eine Standardbibliothek von Objekten wie <code>Array</code>, <code>Date</code>, und <code>Math</code>, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:</p>
<ul>
<li><em>Clientseitiges JavaScript</em> erweitert die Kernsprache durch die Bereitstellung von Objekten, mit denen ein Browser und sein Document Object Model (DOM) steuern lassen. Zum Beispiel ermöglichen clientseitige Erweiterungen einer Anwendung, Elemente in einem HTML-Formular anzulegen und auf Benutzerereignisse wie Mausklicks, Formulareingaben und Seitennavigation zu reagieren.</li>
<li><em>Serverseitiges JavaScript</em> erweitert die Kernsprache durch Bereitstellung von Objekten, die für die Ausführung von JavaScript auf einem Server von Bedeutung sind. Zum Beispiel ermöglichen es serverseitige Erweiterungen einer Applikation, mit einer Datenbank zu kommunizieren, Information von einem Aufruf der Applikation zum nächsten zu erhalten oder Änderungen an Dateien auf einem Server vorzunehmen.</li>
</ul>
<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript und Java</h2>
<p>JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.</p>
<p>Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.</p>
<p>JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.</p>
<p>Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.</p>
<p>Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.</p>
<table class="standard-table">
<caption>JavaScript im Vergleich zu Java</caption>
<thead>
<tr>
<th scope="col">JavaScript</th>
<th scope="col">Java</th>
</tr>
</thead>
<tbody>
<tr>
<td>Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.</td>
<td>Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.</td>
</tr>
<tr>
<td>Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)</td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">Datentypen von Variablen müssen deklariert werden (statische Typisierung)</span></td>
</tr>
<tr>
<td>Kein automatischer Schreibzugriff auf die Festplatte.</td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">Kein automatischer Schreibzugriff auf die Festplatte.</span></td>
</tr>
</tbody>
</table>
<p>Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel <a href="/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Einzelheiten des Objektmodells</a>.</p>
<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript und die ECMAScript-Spezifikation</h2>
<p>JavaScript wird durch <a class="external" href="http://www.ecma-international.org/">Ecma International</a> standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter <a href="/de/docs/Web/JavaScript/New_in_JavaScript">Neu in JavaScript</a> erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.</p>
<p>ECMA-262 ist auch von der <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">der Website von Ecma International</a>. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> und der <a href="https://whatwg.org">WHATWG (Web Hypertext Application Technology Working Group)</a> standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel <a href="/de/docs/Web/JavaScript/JavaScript_technologieuebersicht">JavaScript Technologieübersicht</a>.</p>
<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript-Dokumentation vs. ECMAScript-Spezifikation</h3>
<p>Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.</p>
<p>Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.</p>
<p>Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.</p>
<p>Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.</p>
<h2 id="Erste_Schritte_mit_JavaScript">Erste Schritte mit JavaScript</h2>
<p>Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.</p>
<p>Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.</p>
<h3 id="Die_Web-Konsole">Die Web-Konsole</h3>
<p>Die <a href="/de/docs/Tools/Web_Konsole">Web-Konsole</a> zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine <a href="/de/docs/Tools/Web_Konsole#Der_Kommandozeileninterpreter">Kommandozeile</a>, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.</p>
<p>Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="JavaScript-Umgebung_(Scratchpad)">JavaScript-Umgebung (Scratchpad)</h3>
<p>Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die <a href="/de/docs/Tools/Scratchpad">JavaScript-Umgebung</a> die bessere Wahl.</p>
<p>Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13468/scratchpad.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 631px;"></p>
<h3 id="Hello_world">Hello world</h3>
<p>Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:</p>
<pre class="brush: js">function greetMe(yourName) {
alert("Hello " + yourName);
}
greetMe("World");
</pre>
<p>Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.</p>
<p>Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.</p>
<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}</p>
|
