JavaScript: Interaktivität hinzufügen

JavaScript ist eine leistungsstarke Programmiersprache, die einer Website Interaktivität hinzufügen 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 datenbankgestützte Apps und vieles mehr erstellen!

JavaScript selbst ist relativ kompakt, aber sehr flexibel. Entwickler haben eine Vielzahl von Werkzeugen auf Grundlage der Kern-JavaScript-Sprache geschrieben, wodurch eine enorme Funktionalität mit minimalem Aufwand freigeschaltet wird. Dazu gehören:

• Browser-Schnittstellen (APIs), die in Webbrowsern integriert sind und Funktionen wie das dynamische Erstellen von HTML und das Setzen von CSS-Stilen, das Sammeln und Verarbeiten 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, in Websites zu integrieren.
• Drittanbieter-Frameworks und -Bibliotheken, die Sie auf HTML anwenden können, um die Erstellung von Websites und Anwendungen zu beschleunigen.

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

Der folgende Abschnitt stellt einige Aspekte der Kernsprache vor und bietet Ihnen die Möglichkeit, ein paar Funktionen der Browser-API auszuprobieren. Viel Spaß!

JavaScript ist eine der beliebtesten modernen Webtechnologien! Mit zunehmenden JavaScript-Kenntnissen werden Ihre Websites eine neue Dimension an Leistung und Kreativität erreichen.

Allerdings ist es herausfordernder, sich mit JavaScript vertraut zu machen als mit HTML und CSS. Sie sollten klein anfangen und sich allmählich steigern. Um zu beginnen, lassen Sie uns untersuchen, wie Sie JavaScript zu Ihrer Seite hinzufügen, um ein Hallo Welt! Beispiel zu erstellen. (Hallo Welt! ist der Standard für Programmierbeispiele.)

1. Erstellen Sie in Ihrem first-website-Ordner einen neuen Ordner mit dem Namen scripts.

2. Erstellen Sie im Ordner scripts ein neues Textdokument namens main.js und speichern Sie es.

3. Gehen Sie zu Ihrer index.html Datei und geben Sie diesen Code in einer neuen Zeile ein, direkt vor dem schließenden </body> Tag:

   html

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

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

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

   js

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

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

Wir haben JavaScript verwendet, um den Überschriftstext in Hallo Welt! zu ändern. Dies haben wir mit einer Funktion namens querySelector() gemacht, 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 an einem Element ändern möchten, müssen Sie es zuerst auswählen.

Danach setzte der Code den Wert der textContent Eigenschaft der Variable myHeading (die den Inhalt der Überschrift darstellt) auf Hallo Welt!.

Um Ihnen ein besseres Verständnis dafür zu geben, wie JavaScript funktioniert, erklären wir einige der Kernfunktionen der Sprache. 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 mit der Deklaration einer Variablen mit dem Schlüsselwort let, gefolgt von dem Namen, den Sie der Variable geben:

let myVariable;

Ein Semikolon am Ende einer Zeile gibt an, wo eine Anweisung endet. Es ist nur erforderlich, wenn Sie Anweisungen in einer einzigen Zeile trennen müssen. Einige Leute glauben jedoch, dass es eine gute Praxis ist, Semikolons am Ende jeder Anweisung zu haben. Es gibt weitere Regeln dafür, wann Semikolons verwendet werden sollten und wann nicht. Für weitere Details siehe Ihr Leitfaden zu Semikolons in JavaScript.

Sie können eine Variable fast beliebig benennen, aber es gibt einige Einschränkungen. (Siehe diesen Abschnitt über Namensregeln.) Wenn Sie unsicher sind, können Sie den Namen Ihrer Variable überprüfen, um zu sehen, ob er gültig ist.

JavaScript ist case-sensitiv. Das bedeutet myVariable ist nicht dasselbe wie myvariable. Wenn Sie Probleme in Ihrem Code haben, überprüfen Sie die Groß- und Kleinschreibung!

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

myVariable = "Bob";

Außerdem können Sie beide Vorgänge in derselben Zeile durchfü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 mit unterschiedlichen Datentypen enthalten können:

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

Kommentare sind Textfragmente, die zusammen mit Code hinzugefügt werden können. Der Browser ignoriert Texte, die als Kommentare gekennzeichnet sind. Sie können Kommentare in JavaScript genauso schreiben, wie Sie es in CSS tun:

/*
Everything in between is a comment.
*/

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

// 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, zusammen mit einigen Beispielen, die Sie in der JavaScript-Konsole ausprobieren können.

Es gibt noch viele weitere Operatoren zu entdecken, aber das ist für jetzt genug. Siehe Ausdrücke und Operatoren für eine vollständige Liste.

Bedingte Anweisungen sind Code-Strukturen, die dazu verwendet werden, zu testen, ob ein Ausdruck wahr ist oder nicht. Eine sehr häufige Form von Bedingungen ist die if...else Anweisung. Zum Beispiel:

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 prüfen, ob die beiden gleich sind. Wenn dieser Vergleich true zurückgibt, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht wahr ist, wird stattdessen der zweite Codeblock nach dem Schlüsselwort else ausgeführt.

Funktionen sind eine Möglichkeit, Funktionalität zu verpacken, die Sie wiederverwenden möchten. Es ist möglich, einen Codeblock als Funktion zu definieren, die ausgeführt wird, wenn Sie den Funktionsnamen in Ihrem Code aufrufen. Dies ist eine gute Alternative zum wiederholten Schreiben desselben Codes. Sie haben bereits einige Verwendungen von Funktionen gesehen. Zum Beispiel:

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

alert("hello!");

Die document.querySelector()- und alert()-Funktionen sind in den Browser eingebaut.

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: Datenelemente, die sie für ihre Aufgaben benötigen. Argumente stehen innerhalb der Klammern, getrennt durch Kommata, wenn es mehr als ein Argument gibt.

Zum Beispiel zeigt die Funktion alert() ein Popup-Fenster im Browserfenster an, aber wir müssen ihr ein String als Argument geben, um der Funktion mitzuteilen, welche Nachricht angezeigt werden 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, und testen Sie es dann mit mehreren Argumenten. Zum Beispiel:

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

Echte Interaktivität auf einer Website erfordert Ereignis-Handler. Diese sind Code-Strukturen, die auf Aktivität im Browser hören und Code als Reaktion darauf ausführen. Das offensichtlichste Beispiel ist die Behandlung des Klick-Ereignisses, 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 dann auf die aktuelle Webseite:

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

Es gibt verschiedene Möglichkeiten, einem Element einen Ereignishandler zuzuordnen. Hier wählen wir das <html> Element. Dann rufen wir seine addEventListener()-Funktion auf, geben den Namen des Ereignisses an, auf das gehört werden soll ('click'), und eine Funktion, die ausgeführt wird, wenn das Ereignis eintritt.

Die Funktion, die wir gerade an addEventListener() übergeben haben, wird als anonyme Funktion bezeichnet, da sie keinen Namen hat. Es gibt eine alternative Schreibweise für anonyme Funktionen, die wir Arrow-Funktion nennen. Eine Arrow-Funktion verwendet () => anstelle von function ():

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

Nachdem wir unseren Überblick über die JavaScript-Grundlagen abgeschlossen haben, lassen Sie uns einige neue Funktionen zu unserer Beispiel-Website hinzufügen.

Bevor Sie fortfahren, löschen Sie den aktuellen Inhalt Ihrer main.js Datei — das, was Sie vorher im "Hallo Welt!" Beispiel hinzugefügt haben — und speichern Sie die leere Datei. Wenn Sie dies nicht tun, wird der vorhandene Code mit dem neuen Code, den Sie hinzufügen möchten, in Konflikt geraten.

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 auf Ihrer Beispielseite vorgestellt werden soll. Ideal ist ein Bild, das dieselbe Größe wie das vorher hinzugefügte Bild hat, oder so nah wie möglich.

2. Speichern Sie dieses Bild in Ihrem images Ordner.

3. Fügen Sie den folgenden JavaScript-Code zu Ihrer main.js Datei hinzu und stellen Sie sicher, dass Sie firefox2.png und beide Instanzen von firefox-icon.png mit Ihren zweiten und ersten Bildnamen ersetzen.

   js

   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. Nun sollte sich das Bild ändern, wenn Sie darauf klicken.

Im obigen Code haben Sie eine Referenz zu Ihrem <img> Element in myImage gespeichert. Anschließend haben Sie ihm eine click Ereignishandler-Funktion ohne Namen (eine "anonyme" Funktion) gegeben. Jedes Mal, wenn dieses Element angeklickt wird, führt die Funktion folgende Schritte aus:

1. Sie ermittelt den Wert des src Attributs des Bildes.

2. Sie verwendet eine Bedingung, um zu überprüfen, ob der src Wert dem Pfad des ursprünglichen Bildes entspricht:

   1. Wenn ja, ändert der Code den src Wert in den Pfad des zweiten Bildes und zwingt das andere Bild dazu, im <img> Element geladen zu werden.
   2. Wenn nein (was bedeutet, dass es sich bereits geändert haben muss), wechselt der src Wert zurück zum ursprünglichen Bildpfad.

Als Nächstes lassen Sie uns die Seitenüberschrift in eine personalisierte Willkommensnachricht ändern, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Willkommensnachricht wird beibehalten. Wenn der Benutzer die Seite verlässt und später zurückkehrt, speichern wir die Nachricht mithilfe der Web Storage API. Wir werden auch eine Option hinzufügen, um den Benutzernamen zu ändern und damit auch die Willkommensnachricht.

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

   html

   <button>Change user</button>
   

2. Platzieren Sie in main.js den folgenden Code am Ende der Datei, genau so wie er geschrieben ist. Dadurch werden Referenzen zu der neuen Schaltfläche und der Überschrift erstellt, wobei jede in Variablen gespeichert wird:

   js

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

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

   js

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

   Die setUserName() Funktion enthält eine prompt() Funktion, die ein Dialogfeld anzeigt, ähnlich wie alert(). Diese prompt() Funktion macht mehr als alert(), indem sie den Benutzer auffordert, Daten einzugeben, und diese 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 die localStorage API auf, die uns das Speichern von Daten im Browser ermöglicht, um sie später abzurufen. Wir verwenden die Funktion setItem() von localStorage, um ein Datenelement mit dem Namen "name" zu erstellen und zu speichern, dessen Wert auf die myName Variable gesetzt wird, die den Namenseintrag des Benutzers enthält. Schließlich setzen wir den textContent der Überschrift auf eine Zeichenkette plus den neu gespeicherten Namen des Benutzers.

4. Fügen Sie nach der Funktionsdeklaration den folgenden Bedingungsblock hinzu. Wir könnten dies Initialisierungscode nennen, da er die App strukturiert, wenn sie zum ersten Mal geladen wird.

   js

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

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

5. Fügen Sie der Schaltfläche eine click Ereignishandler-Funktion hinzu, wie unten gezeigt. Wenn sie geklickt wird, läuft setUserName(). Dies ermöglicht es dem Benutzer, einen anderen Namen einzugeben, indem er die Schaltfläche drückt.

   js

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

Wenn Sie das Beispiel ausführen und das Dialogfeld erhalten, das Sie auffordert, Ihren Benutzernamen einzugeben, versuchen Sie auf die Abbrechen Taste zu klicken. Sie sollten mit einem Titel enden, der Mozilla ist cool, null lautet. Dies passiert, weil der Wert als null gesetzt wird, wenn Sie die Eingabeaufforderung abbrechen. null ist ein spezieller Wert in JavaScript, der das Fehlen eines Wertes angibt.

Versuchen Sie auch, auf OK zu klicken, 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 überprüfen, ob der Benutzer keinen leeren Namen eingegeben hat. Aktualisieren Sie Ihre setUserName()-Funktion zu folgendem:

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

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

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

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

Wir haben in diesem Artikel gerade einmal an der Oberfläche von JavaScript gekratzt. Sie werden viel mehr JavaScript in unseren Kern- und Erweiterungsmodulen finden, beginnend mit Dynamisches Scripting mit JavaScript.

Lernen Sie JavaScript

Dies ist eine ausgezeichnete Ressource für angehende Webentwickler! Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, angeleitet durch eine automatisierte Beurteilung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist für eine geringe einmalige Zahlung erhältlich.

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