JavaScript: Hinzufügen von Interaktivität

JavaScript ist eine leistungsstarke Programmiersprache, die einer Website Interaktivität verleihen kann. Sie wurde von Brendan Eich erfunden.

JavaScript ist vielseitig und anfängerfreundlich. Mit mehr Erfahrung können Sie Spiele, animierte 2D- und 3D-Grafiken, umfassende datenbankgetriebene Apps und vieles mehr erstellen!

JavaScript selbst ist relativ kompakt, aber sehr flexibel. Entwickler haben eine Vielzahl von Tools auf der Grundlage der Kern-JavaScript-Sprache entwickelt und damit eine große Menge an Funktionalitäten mit minimalem Aufwand freigeschaltet. Dazu gehören:

• Browser-Anwendungsprogrammierschnittstellen (APIs), die in Webbrowsern integriert sind und Funktionen wie das dynamische Erstellen von HTML und das Setzen von CSS-Stilen, das Sammeln und Bearbeiten eines Videostreams von der Webcam eines Benutzers oder das Erzeugen von 3D-Grafiken und Audiodateien bereitstellen.
• Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Inhaltsanbietern wie YouTube oder Facebook auf Websites einzubinden.
• Drittanbieter-Frameworks und -Bibliotheken, die Sie auf HTML anwenden können, um die Arbeit beim Erstellen von Websites und Anwendungen zu beschleunigen.

Es liegt außerhalb des Umfangs dieses Artikels — als eine leichte Einführung in JavaScript — die Details darzustellen, wie sich die Kern-JavaScript-Sprache von den oben genannten Tools unterscheidet. Mehr erfahren Sie in unseren Kernmodulen sowie in anderen Teilen von MDN.

Der folgende Abschnitt stellt einige Aspekte der Kernsprache vor und bietet die Gelegenheit, mit einigen Funktionen der Browser-API zu spielen. Viel Spaß!

JavaScript ist eine der beliebtesten modernen Webtechnologien! Wenn Ihre JavaScript-Fähigkeiten wachsen, werden Ihre Websites eine neue Dimension von Stärke und Kreativität erreichen.

Es ist jedoch herausfordernder, sich mit JavaScript vertraut zu machen, als mit HTML und CSS. Sie sollten klein anfangen und sich allmählich steigern. Beginnen Sie damit, zu untersuchen, wie Sie JavaScript zu Ihrer Seite hinzufügen können, um ein Hello world!-Beispiel zu erstellen. (Hello world! ist der Standard für einführende Programmierbeispiele.)

1. Erstellen Sie in Ihrem Ordner first-website einen neuen Ordner namens scripts.

2. Erstellen Sie innerhalb des Ordners scripts ein neues Textdokument namens main.js und speichern Sie es.

3. Gehen Sie zu Ihrer Datei index.html und fügen Sie diesen Code in einer neuen Zeile kurz vor dem schließenden </body>-Tag ein:

   htmlCopy to Clipboard

   <script src="scripts/main.js"></script>
   

   Dies tut die gleiche Aufgabe wie das <link>-Element für CSS. Es wendet das JavaScript auf die Seite an, sodass es Auswirkungen auf das HTML (zusammen mit dem CSS und allem anderen auf der Seite) haben kann.

4. Fügen Sie diesen Code zu Ihrer Datei scripts/main.js hinzu:

   jsCopy to Clipboard

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

5. Stellen Sie sicher, dass die HTML- und JavaScript-Dateien gespeichert sind, und laden Sie index.html in Ihrem Browser. Sie sollten etwas wie dieses sehen:

Wir haben JavaScript verwendet, um den Überschriftstext in Hello world! zu ändern. Wir haben dies getan, indem wir eine Funktion namens querySelector() verwendet haben, um eine Referenz zu Ihrer Überschrift zu erhalten und sie dann in einer Variablen namens myHeading zu speichern. Dies ist ähnlich wie das, was wir mit CSS-Selektoren gemacht haben. Wenn Sie etwas mit einem Element tun wollen, müssen Sie es zuerst auswählen.

Danach hat der Code den Wert der textContent-Eigenschaft der myHeading-Variablen festgelegt (der den Inhalt der Überschrift darstellt) auf Hello world!.

Um Ihnen ein besseres Verständnis dafür zu geben, wie JavaScript funktioniert, werden wir einige der grundlegenden Funktionen der Sprache erklären. Es ist erwähnenswert, dass diese Funktionen in allen Programmiersprachen üblich sind. Wenn Sie diese Grundlagen beherrschen, haben Sie einen Vorsprung beim Programmieren in anderen Sprachen!

Variablen sind Container, die Werte speichern. Sie beginnen damit, eine Variable mit dem Schlüsselwort let zu deklarieren, gefolgt von dem Namen, den Sie der Variablen geben:

let myVariable;

Ein Semikolon am Ende einer Zeile zeigt an, wo eine Anweisung endet. Es ist nur erforderlich, wenn Sie Anweisungen in einer einzigen Zeile trennen müssen. Einige Menschen glauben jedoch, dass es eine gute Praxis ist, Semikolons am Ende jeder Anweisung zu haben. Es gibt andere Regeln dafür, wann Sie Semikolons verwenden sollten und wann nicht. Weitere Details finden Sie in Your Guide to Semicolons in JavaScript.

Sie können einer Variablen fast jeden Namen geben, aber es gibt einige Einschränkungen. (Siehe diesen Abschnitt über Namensregeln.) Wenn Sie unsicher sind, können Sie Ihren Variablennamen überprüfen, um zu sehen, ob er gültig ist.

JavaScript ist groß-/kleinschreibungssensitiv. Das bedeutet myVariable ist nicht dasselbe wie myvariable. Wenn Sie Fehler in Ihrem Code haben, überprüfen Sie die Groß-/Kleinschreibung!

Nachdem Sie eine Variable deklariert haben, können Sie ihr einen Wert zuweisen:

myVariable = "Bob";

Außerdem können Sie beide Operationen in derselben Zeile ausführen:

let myVariable = "Bob";

Sie rufen den Wert ab, indem Sie den Variablennamen aufrufen:

myVariable;

Nachdem Sie einer Variablen einen Wert zugewiesen haben, können Sie ihn später im Code ändern:

let myVariable = "Bob";
myVariable = "Steve";

Beachten Sie, dass Variablen Werte halten können, die unterschiedliche Datentypen haben:

Warum benötigen wir also Variablen? Variablen sind notwendig, um alles Interessante in der Programmierung zu tun. Wenn Werte sich nicht ändern könnten, könnten Sie nichts Dynamisches tun, wie z. B. eine Begrüßungsnachricht personalisieren oder ein Bild in einer Bildergalerie ändern.

Kommentare sind Textausschnitte, die zusammen mit Code hinzugefügt werden können. Der Browser ignoriert den als Kommentare markierten Text. Sie können Kommentare in JavaScript genauso schreiben wie in CSS:

/*
Everything in between is a comment.
*/

Wenn Ihr Kommentar keine Zeilenumbrüche enthält, können Sie ihn hinter zwei Schrägstrichen platzieren, wie folgt:

// This is a comment

Ein Operator ist ein mathematisches Symbol, das ein Ergebnis basierend auf zwei Werten (oder Variablen) erzeugt. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren sowie einige Beispiele zum Ausprobieren in der JavaScript-Konsole.

Es gibt noch viele weitere Operatoren zu erkunden, aber das reicht für den Anfang. Eine komplette Liste finden Sie unter Expressions and operators.

Bedingte Anweisungen sind Code-Strukturen, die verwendet werden, um zu überprüfen, ob ein Ausdruck wahr ist oder nicht. Eine sehr gängige Form der bedingten Anweisungen ist die if...else-Anweisung. Beispielsweise:

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

Der Ausdruck innerhalb der if () ist der Test. Dieser verwendet den strikten Gleichheitsoperator (wie oben beschrieben), um die Variable iceCream mit dem String chocolate zu vergleichen, um zu sehen, ob die beiden gleich sind. Wenn dieser Vergleich true zurückgibt, läuft der erste Block von Code. Wenn der Vergleich nicht wahr ist, läuft stattdessen der zweite Block von Code — nach dem else-Schlüsselwort.

Funktionen sind eine Möglichkeit, Funktionalität zu verpacken, die Sie wiederverwenden möchten. Es ist möglich, einen Codekörper als Funktion zu definieren, die ausgeführt wird, wenn Sie den Funktionsnamen in Ihrem Code aufrufen. Dies ist eine gute Alternative dazu, denselben Code wiederholt zu schreiben. Sie haben bereits einige Verwendungen von Funktionen gesehen. Beispielsweise:

let myVariable = document.querySelector("h1");

alert("hello!");

Die Funktionen document.querySelector() und alert() sind im Browser integriert.

Wenn Sie etwas sehen, das wie ein Variablenname aussieht, aber von Klammern — () — gefolgt wird, handelt es sich wahrscheinlich um eine Funktion. Funktionen nehmen oft Argumente an: Datenbits, die sie benötigen, um ihre Aufgabe zu erfüllen. Argumente kommen in die Klammern, getrennt durch Kommas, wenn es mehr als ein Argument gibt.

Beispielsweise lässt die Funktion alert() ein Popup-Fenster im Browserfenster erscheinen, aber wir müssen ihr ein Argument in Form eines Strings geben, um der Funktion zu sagen, welche Nachricht sie anzeigen soll.

Sie können auch Ihre eigenen Funktionen definieren. Im nächsten Beispiel erstellen wir eine einfache Funktion, die zwei Zahlen als Argumente nimmt und sie multipliziert:

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

Versuchen Sie, dies in der Konsole auszuführen; testen Sie dann mit mehreren Argumenten. Beispielsweise:

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

Echte Interaktivität auf einer Website erfordert Ereignishandler. Dies sind Code-Strukturen, die auf Aktivitäten im Browser hören und Code als Reaktion ausführen. Das offensichtlichste Beispiel ist die Handhabung des Klickereignisses, das vom Browser ausgelöst wird, wenn Sie mit der Maus auf etwas klicken. Um dies zu demonstrieren, geben Sie das Folgende in Ihre Konsole ein und klicken Sie dann auf die aktuelle Webseite:

document.querySelector("html").addEventListener("click", function () {
  alert("Ouch! Stop poking me!");
});

Es gibt eine Reihe von Möglichkeiten, einen Ereignishandler an ein Element anzuhängen. Hier wählen wir das <html>-Element. Anschließend rufen wir seine Funktion addEventListener() auf, indem wir den Namen des Ereignisses, auf das gehört werden soll ('click'), und eine Funktion, die ausgeführt werden soll, wenn das Ereignis eintritt, übergeben.

Die Funktion, die wir hier gerade an addEventListener() übergeben haben, wird als anonyme Funktion bezeichnet, da sie keinen Namen hat. Es gibt eine alternative Möglichkeit, anonyme Funktionen zu schreiben, die wir als Pfeilfunktion bezeichnen. Eine Pfeilfunktion verwendet () => anstelle von function ():

document.querySelector("html").addEventListener("click", () => {
  alert("Ouch! Stop poking me!");
});

Mit unserem Rückblick auf die JavaScript-Grundlagen abgeschlossen, lassen Sie uns einige neue Funktionen zu unserer Beispielseite hinzufügen.

Bevor Sie weitermachen, löschen Sie den aktuellen Inhalt Ihrer main.js-Datei — der Teil, den Sie zuvor während des "Hello world!"-Beispiels hinzugefügt haben — und speichern Sie die leere Datei. Wenn Sie dies nicht tun, kollidiert der vorhandene Code mit dem neuen Code, den Sie hinzufügen werden.

In diesem Abschnitt lernen Sie, wie Sie JavaScript und DOM-API-Funktionen verwenden, um die Anzeige zwischen zwei Bildern zu wechseln. Diese Änderung erfolgt, wenn ein Benutzer auf das angezeigte Bild klickt.

1. Wählen Sie ein weiteres Bild aus, das Sie auf Ihrer Beispielseite zeigen möchten. Idealerweise hat das Bild dieselbe Größe wie das zuvor hinzugefügte Bild oder ist ihm so nah wie möglich.

2. Speichern Sie dieses Bild in Ihrem Ordner images.

3. Fügen Sie den folgenden JavaScript-Code in Ihre main.js-Datei ein und ersetzen Sie dabei firefox2.png und beide Instanzen von firefox-icon.png durch Ihre zweiten und ersten Bildnamen.

   jsCopy to Clipboard

   const myImage = document.querySelector("img");
   
   myImage.addEventListener("click", () => {
     const 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. Speichern Sie alle Dateien und laden Sie index.html im Browser. Jetzt, wenn Sie auf das Bild klicken, sollte es auf das andere wechseln.

Im obigen Code haben Sie eine Referenz auf Ihr <img>-Element in myImage gespeichert. Als nächstes haben Sie ihm eine Funktion für den click-Ereignishandler mit keinem Namen („anonyme“ Funktion) gegeben. Jedes Mal, wenn dieses Element angeklickt wird, führt die Funktion aus:

1. Der Wert des src-Attributs des Bildes wird abgerufen.

2. Ein Bedingter wird verwendet, um zu prüfen, ob der src-Wert dem Pfad des ursprünglichen Bildes entspricht:

   1. Wenn dies der Fall ist, ändert der Code den src-Wert auf den Pfad des zweiten Bildes, wodurch das andere Bild im <img>-Element geladen wird.
   2. Wenn nicht (was bedeutet, dass es sich bereits geändert haben muss), wird der src-Wert auf den ursprünglichen Bildpfad zurückgesetzt.

Als nächstes ändern wir die Seitenüberschrift in eine personalisierte Willkommensnachricht, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Willkommensnachricht bleibt bestehen. Sollte der Benutzer die Seite verlassen und später zurückkehren, speichern wir die Nachricht mit dem Web Storage API. Außerdem fügen wir eine Option hinzu, um den Benutzernamen zu ändern und damit die Willkommensnachricht.

1. Fügen Sie in index.html die folgende Zeile direkt vor dem <script>-Element hinzu:

   htmlCopy to Clipboard

   <button>Change user</button>
   

2. Platzieren Sie in main.js den folgenden Code am unteren Rand der Datei, genau wie er geschrieben wurde. Dies erstellt Referenzen auf den neuen Button und die Überschrift und speichert jede in Variablen.

   jsCopy to Clipboard

   let myButton = document.querySelector("button");
   let myHeading = document.querySelector("h1");
   

3. Fügen Sie die folgende Funktion hinzu, um die persönliche Begrüßung festzulegen. Dies wird noch nichts bewirken; wir werden die Funktion später aufrufen.

   jsCopy to Clipboard

   function setUserName() {
     const myName = prompt("Please enter your name.");
     localStorage.setItem("name", myName);
     myHeading.textContent = `Mozilla is cool, ${myName}`;
   }
   

   Die Funktion setUserName() enthält eine prompt()-Funktion, die ein Dialogfeld anzeigt, ähnlich wie alert(). Diese prompt()-Funktion tut mehr als alert(), indem sie den Benutzer auffordert, Daten einzugeben, und sie in einer Variablen speichert, nachdem der Benutzer auf OK geklickt hat. In diesem Fall bitten wir den Benutzer, einen Namen einzugeben. Anschließend ruft der Code auf die localStorage-API zurück, die es uns ermöglicht, Daten im Browser zu speichern und später abzurufen. Wir verwenden die setItem()-Funktion von localStorage, um ein Datenobjekt namens "name" zu erstellen und zu speichern, wobei wir seinen Wert auf die Variable myName setzen, die den Eintrag des Benutzers für den Namen enthält. Schließlich setzen wir den textContent der Überschrift auf einen String, plus den neu gespeicherten Namen des Benutzers.

4. Fügen Sie den folgenden Bedingungsblock nach der Funktionsdeklaration hinzu. Wir könnten dies Initialisierungscode nennen, da es die App beim ersten Laden strukturiert.

   jsCopy to Clipboard

   if (!localStorage.getItem("name")) {
     setUserName();
   } else {
     const storedName = localStorage.getItem("name");
     myHeading.textContent = `Mozilla is cool, ${storedName}`;
   }
   

   Diese erste Zeile dieses Blocks verwendet den Negationsoperator (logisches NICHT, dargestellt durch das !), um zu prüfen, ob das Datenobjekt name bereits in localStorage gespeichert ist. Wenn nicht, wird die Funktion setUserName() ausgeführt, um sie zu erstellen. Wenn es existiert (d.h. der Benutzer hat bei einem vorherigen Besuch einen Benutzernamen festgelegt), holen wir den gespeicherten Namen mit getItem() ab und setzen den textContent der Überschrift auf einen String, plus den Namen des Benutzers, wie wir es innerhalb von setUserName() getan haben.

5. Fügen Sie dem Button eine click-Ereignishandler-Funktion hinzu, wie unten gezeigt. Wenn er angeklickt wird, läuft setUserName(). Auf diese Weise kann der Benutzer einen anderen Namen eingeben, indem er den Button drückt.

   jsCopy to Clipboard

   myButton.addEventListener("click", () => {
     setUserName();
   });
   

Wenn Sie das Beispiel ausführen und das Dialogfeld erhalten, das Sie auffordert, Ihren Benutzernamen einzugeben, versuchen Sie, die Abbrechen-Schaltfläche zu drücken. Sie sollten mit einem Titel enden, der Mozilla is cool, null lautet. Dies geschieht, weil der Wert auf null gesetzt wird, wenn Sie das Eingabefeld abbrechen. null ist ein spezieller Wert in JavaScript, der sich auf das Fehlen eines Werts bezieht.

Versuchen Sie auch, OK zu drücken, ohne einen Namen einzugeben. Sie sollten mit einem Titel enden, der Mozilla is cool, lautet, weil Sie myName auf einen leeren String gesetzt haben.

Um diese Probleme zu vermeiden, könnten Sie sicherstellen, dass der Benutzer keinen leeren Namen eingegeben hat. Aktualisieren Sie Ihre setUserName()-Funktion auf diese:

function setUserName() {
  const myName = prompt("Please enter your name.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

In menschlicher Sprache bedeutet dies: Wenn myName keinen Wert hat, führen Sie setUserName() erneut von Anfang an aus. Wenn es einen Wert hat (wenn die obige Aussage nicht wahr ist), dann speichern Sie den Wert in localStorage und setzen ihn als den Text der Überschrift.

Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie mit einer Seite enden, die ungefähr so aussieht wie das Bild unten. Sie können sich auch unsere Version ansehen.

Wenn Sie hängen bleiben, können Sie Ihre Arbeit mit unserem fertigen Beispielcode auf GitHub vergleichen.

Jetzt, da Sie Ihre Website erstellt haben, ist der nächste Schritt, sie online zu stellen, damit andere sie überprüfen können. Wir zeigen Ihnen, wie Sie dies in unserem nächsten Artikel tun können — Publishing your website.

Dynamisches Skripting mit JavaScript

In diesem Artikel haben wir nur die Oberfläche von JavaScript angekratzt. Sie werden später auf unserem Lernpfad viel mehr JavaScript finden, beginnend mit unserem Dynamisches Skripting mit JavaScript-Modul.

JavaScript lernen

Dies ist eine hervorragende Ressource für angehende Webentwickler! Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, begleitet von einer automatischen Bewertung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist gegen eine kleine einmalige Zahlung verfügbar.

• Zurück
• Übersicht: Ihre erste Website
• Weiter