MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Diese Übersetzung ist in Arbeit.

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.

Was ist JavaScript wirklich?

JavaScript (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem 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.

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!

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:

  • Programmierschnittstellen (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...
  • Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Seiten in eigene Seiten einzubinden, z.B. von Twitter oder Facebook.
  • Drittanbieter-Frameworks und Bibliotheken, die man zu HTML hinzufügen kann, die es ermöglichen, Webseiten und Apps schnell zu erzeugen.

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 JavaScript Lernbereich.

Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!

Ein "hello world" Beispiel

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.

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 "hello world!" Beispiel zu erstellen (der Standard in elementaren Programmierbeispielen).

WICHTIG: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, laden Sie dieses Codebeispiel herunter und benutzen es als Einstieg.

  1. Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen main.js. Speichern Sie diese Datei in Ihrem skripts-Ordner.
  2. Dann gehen Sie zur index.html Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden </body>-Tag ein:
    <script src="scripts/main.js"></script>
  3. Dies macht dasselbe, wie das <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).
  4. Fügen Sie nun den folgenden Code in die main.js-Datei ein:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden index.html in einen Browser. Die Webseite sollte wie folgt aussehen:

Hinweis: Das <script>-Element haben wir am Ende des <body>-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.

Was ist passiert?

Also, 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 querySelector() benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen gmyHeading gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den "selectors" gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.

Anschließend setzen wir den Wert der Eigenschaft textContent der Variablen  myHeading (die den Inhalt des Headers repräsentiert) auf "Hello world!". 

Hinweis: Beide der Funktionen etwas weiter oben sind Teile des Document Object Model (DOM) API

Language basics crash course

Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verstänis 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.

Wichtig: 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 Entdecke browser Entwickler-Werkzeuge.

Variablen

Variables sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort var deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:

var myVariable;

Anmerkung:  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.

Anmerkung:  Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe diesen Artikel über die Regeln von Benennung von Variablen.)  Wenn Sie unsicher sind, können Sie den Variablennamen prüfen, um die Gültigkeit zu prüfen.

Anmerkung: JavaScript beachtet Groß-/Kleinschrift  — myVariable ist unterschiedlich zur Variablen myvariable. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! 

Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:

myVariable = 'Bob';

Beide Schritte können in einem Schritt zusammengefasst werden: 

var myVariable = 'Bob';

Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: 

myVariable;

Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:

var myVariable = 'Bob';
myVariable = 'Steve';

Beachten Sie, dass Variablen unterschiedliche Datentypen aufweisen:

Variable Erklärung Beispiel
String Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen. var myVariable = 'Bob';
Number Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet. var myVariable = 10;
Boolean Ein wahr/falsch (true/false) Wert. Die Worte true und false sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichen var myVariable = true;
Array

Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.

var myVariable = [1,'Bob','Steve',10];
Bezieht sich auf jedes Mitglied des arrays wie dieses:
myVariable[0], myVariable[1], etc.
Object

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.

var myVariable = document.querySelector('h1');
Und ebenso alle der obigen Beispiele.

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.

Kommentare

Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:

/*
Everything in between is a comment.
*/

Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:

// This is a comment

Operatoren

Ein 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. 

Operator Erklärung Symbol(e) Beispiel
additieren/verbinden Wir verwendet, um zwei Zahlen zu addieren, oder zwei Srtings zusammenzusetzen. + 6 + 9;
"Hello " + "world!";
subtrahieren, multiplizieren, teilen  Verhalten sich so, wie aus der Mathematik bekannt. -, *, / 9 - 3;
8 * 2; // in JS ist der Multiplikatinsoperator ein Stern
9 / 3;
Zuweisungsoperator Sie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet = var myVariable = 'Bob';
Gleichheitsoperator

Prüft zwei Werte auf Gleichheit und liefert true/false (Boolean) als Ergebnis

=== var myVariable = 3;
myVariable === 4;
Verneinung, ungleich

Liefert als Ergebnis das logische Gegenteil; dreht ein true in ein false, etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.

!, !==

Der Basis-Ausdruck ist true, aber der Vergleich liefert false weil er negiert wurde:

var myVariable = 3;
!(myVariable === 3);

Hier wird geprüft, ob myVariable ungleich 3 ist. Der Rückgabewert ist false, weil myVariable den Wert 3 aufweist.

var myVariable = 3;
myVariable !== 3;

Es gibt novh viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in Ausdrücke und Operatoren.

Anmerkung: 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. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt uns somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.

Bedingungen

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 if ... else. Zum Beispiel:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Der Ausdruck innerhalb des if ( ... ) ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable iceCream mit dem String chocolate vergleicht, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich true, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem else Befehl ausgeführt.

Funktionen

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:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Die Funktionen document.querySelector and alert, sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.

Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — () — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft 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.

Beispielsweise erzeugt die Funktion alert() eine Pop-Up-Box  innerhalb des Browser-Fensers, aber dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.

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 Argument aufnimmt und diese multipliziert:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Anmerkung: Das return Kommando teilt dem Browser mit, die Variable result 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 scoping genannt. (Lesen Sie mehr über den Gültigkeitsbereich von Variablen.)

Ereignisse (Events)

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 Klick-Ereignis, das vom Browser abgefeuert wird, wenn die Mouse auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

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 onclick-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.

Beachten Sie, dass

document.querySelector('html').onclick = function() {};

gleichbedeutend ist mit

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Es ist nur kürzer.

Supercharging our example website

Now that we've gone over a few JavaScript basics, let's add a few cool basic features to our example site to give you some first idea of what is possible.

Adding an image changer

In this section, we'll add another image to our site, and add some simple JavaScript to change between the two when the image is clicked on.

  1. First of all, find another image that you'd like to feature on your site. Make sure it is the same size as your first image, or as close as possible.
  2. Save the image in your images folder.
  3. Go to your main.js file, and enter the following JavaScript. (If your "hello world" JavaScript is still there, delete it.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  4. Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

So here, we are storing a reference to our image element in the myImage variable. Next, we make this variable's onclick event handler property equal to a function with no name (an "anonymous" function). Now, every time this image element is clicked:

  1. We retrieve the value of the image's src attribute.
  2. We use a conditional to check whether the src value is equal to the path to the original image:
    1. If it is, we change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <image> element.
    2. If it isn't (meaning it must already have changed), we change the src value back to the original image path, to flip it back to how it was originally.

Adding a personalized welcome message

Next we will add another bit of code, to change the page's title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and, therefore, the welcome message anytime it is required.

  1. In index.html, add the following line just before the <script> element:
    <button>Change user</button>
  2. In main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Now add the following function to set the personalized greeting — this won't do anything yet, but we'll use it later on:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    This function contains a prompt() function, which brings up a dialog box, a bit like alert() except that prompt() asks the user to enter some data, and stores that data in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser and retrieve it later on. We use localStorage's setItem() function to create and store a data item called 'name', and set its value to the myName variable that contains the name the user entered. Finally, we set the textContent of the heading to a string, plus the user's name.
  4. Next, add this if ... else block — we could call this the initialization code, as it sets up the app when it first loads:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    This block first uses the negation operator (logical NOT) to check whether the name data item exists. If not, the setUserName() function is run to create it. If so (that is, the user set it during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, the same as we did inside setUserName().
  5. Finally, put the below onclick event handler on the button, so that when clicked the setUserName() function is run. This allows the user to set a new name whenever they want by pressing the button:
    myButton.onclick = function() {
      setUserName();
    }
    

Now when you first visit the site, it'll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of JavaScript. If you have enjoyed learning about it and want to go deeper with your studies, go to our JavaScript Guide.

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: hapeit,