JavaScript-Grundlagen

JavaScript ist eine leistungsstarke Programmiersprache, die einer Website Interaktivität hinzufügen kann. Es wurde von Brendan Eich erfunden.

JavaScript ist vielseitig und einsteigerfreundlich. Mit mehr Erfahrung können Sie Spiele, animierte 2D- und 3D-Grafiken, umfassende datenbankgesteuerte Anwendungen und vieles mehr erstellen!

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

• Browseranwendungsprogrammierschnittstellen (APIs), die in Webbrowser integriert sind und Funktionen wie das dynamische Erstellen von HTML und das Festlegen von CSS-Stilen bieten; das Erfassen und Manipulieren eines Videostreams von der Webcam eines Benutzers oder das Generieren von 3D-Grafiken und Audiobeispielen.
• Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Inhaltsanbietern wie Disqus oder Facebook in Websites zu integrieren.
• 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 Rahmens dieses Artikels – als leichten Einstieg in JavaScript – die Details darüber zu präsentieren, wie sich die Kern-JavaScript-Sprache von den oben aufgeführten Tools unterscheidet. Sie können mehr im MDN JavaScript-Lernbereich sowie in anderen Teilen von MDN lernen.

Der untenstehende Abschnitt stellt einige Aspekte der Kernsprache vor und bietet die Möglichkeit, sich auch mit einigen Funktionen von Browser-APIs zu beschäftigen. Viel Spaß!

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

Sich mit JavaScript vertraut zu machen, ist jedoch herausfordernder als mit HTML und CSS. Sie müssen möglicherweise klein anfangen und sich schrittweise verbessern. Beginnen wir damit, wie Sie JavaScript zu Ihrer Seite hinzufügen, um ein Hallo Welt! Beispiel zu erstellen. (Hallo Welt! ist der Standard für einführende Programmierbeispiele.)

1. Gehen Sie zu Ihrer Test-Website und erstellen Sie einen neuen Ordner mit dem Namen scripts. Erstellen Sie innerhalb des Scripts-Ordners ein neues Textdokument namens main.js und speichern Sie es.

2. Geben Sie in Ihrer index.html-Datei diesen Code in einer neuen Zeile unmittelbar vor dem schließenden </body>-Tag ein:

   html

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

3. 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 (zusammen mit dem CSS und allem anderen auf der Seite) haben kann.

4. Fügen Sie diesen Code in die Datei scripts/main.js ein:

   js

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

5. Stellen Sie sicher, dass die HTML- und JavaScript-Dateien gespeichert sind. Laden Sie dann index.html in Ihrem Browser. Sie sollten etwas Ähnliches wie dies sehen:

Der Text der Überschrift wurde mit JavaScript in Hello world! geändert. Sie haben dies erreicht, indem Sie eine Funktion namens querySelector() verwendet haben, um eine Referenz auf Ihre Überschrift zu erhalten und dann in einer Variablen namens myHeading zu speichern. Dies ist ähnlich zu dem, was wir mit CSS-Selektoren gemacht haben. Wenn Sie etwas mit einem Element tun möchten, müssen Sie es zuerst auswählen.

Anschließend setzte der Code den Wert der textContent-Eigenschaft der myHeading-Variable (die den Inhalt der Überschrift repräsentiert) auf Hello world!.

Um Ihnen ein besseres Verständnis dafür zu geben, wie JavaScript funktioniert, lassen Sie uns einige der Kernfunktionen der Sprache erklären. Es ist erwähnenswert, dass diese Funktionen in allen Programmiersprachen üblich sind. Wenn Sie diese Grundlagen meistern, 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 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 Leute glauben jedoch, dass es eine gute Praxis ist, Semikolons am Ende jeder Anweisung zu haben. Es gibt andere Regeln dafür, wann man Semikolons verwenden sollte und wann nicht. Weitere Details finden Sie in Ihr Leitfaden zu Semikolons in JavaScript.

Sie können einer Variablen fast jeden Namen geben, aber es gibt einige Einschränkungen. (Siehe diesen Abschnitt über Namensregeln.) Wenn Sie sich unsicher sind, können Sie Ihren Variablennamen ü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 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 mit unterschiedlichen Datentypen haben können:

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

Kommentare sind Textschnipsel, die zusammen mit dem Code hinzugefügt werden können. Der Browser ignoriert Text, der als Kommentare markiert ist. Sie können Kommentare in JavaScript genau wie in CSS schreiben:

/*
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) liefert. 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 erkunden, aber das reicht für jetzt. Siehe Ausdrücke und Operatoren für eine vollständige Liste.

Bedingungen sind Code-Strukturen, die verwendet werden, um zu testen, ob ein Ausdruck wahr oder nicht ist. 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 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, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht zutrifft, 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 Codekörper als Funktion zu definieren, der beim Aufruf des Funktionsnamens in Ihrem Code ausgeführt wird. Dies ist eine gute Alternative, um denselben Code wiederholt zu schreiben. Sie haben bereits einige Verwendungen von Funktionen gesehen. Zum Beispiel:

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

alert("hello!");

Diese Funktionen, document.querySelector und alert, sind in den Browser eingebaut.

Wenn Sie etwas sehen, das wie ein Variablenname aussieht, aber Klammern folgen – () – ist es wahrscheinlich eine Funktion. Funktionen nehmen oft Argumente an: Datenteile, die sie für ihre Aufgabe benötigen. Argumente kommen in die Klammern, getrennt durch Kommas, wenn es mehr als ein Argument gibt.

Zum Beispiel lässt die Funktion alert() ein Pop-up-Fenster im Browserfenster erscheinen, aber wir müssen ihr einen 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; 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 Ereignishandler. Dies sind Code-Strukturen, die auf Aktivitäten im Browser lauschen und als Reaktion darauf Code ausführen. Das offensichtlichste Beispiel ist die Behandlung des Klickereignisses, das vom Browser ausgelöst wird, wenn Sie mit Ihrer Maus auf etwas klicken. Um dies zu demonstrieren, geben Sie Folgendes 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, einem Element einen Ereignishandler zuzuweisen. Hier wählen wir das <html>-Element aus. Dann rufen wir dessen addEventListener()-Funktion auf, geben den Namen des zu hörenden Ereignisses ('click') ein und eine Funktion, die ausgeführt werden soll, wenn das Ereignis eintritt.

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

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

Mit diesem Überblick über die JavaScript-Grundlagen (oben) fügen wir unserer Beispiel-Website einige neue Funktionen hinzu.

Bevor Sie fortfahren, löschen Sie den aktuellen Inhalt Ihrer main.js-Datei – den Teil, den Sie zuvor während des "Hallo Welt!"-Beispiels 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 werden, kollidieren.

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

1. Wählen Sie ein Bild aus, das Sie auf Ihrer Beispiel-Website präsentieren möchten. Idealerweise sollte das Bild die gleiche Größe haben wie das zuvor hinzugefügte Bild oder möglichst ähnlich sein.

2. Speichern Sie dieses Bild in Ihrem images-Ordner.

3. Benennen Sie das Bild in firefox2.png um.

4. Fügen Sie den folgenden JavaScript-Code in Ihre main.js-Datei ein.

   js

   const myImage = document.querySelector("img");
   
   myImage.onclick = () => {
     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");
     }
   };
   

5. Speichern Sie alle Dateien und laden Sie index.html im Browser. Jetzt sollten Sie beim Klicken auf das Bild sehen, dass es zum anderen wechselt.

Das ist passiert. Sie haben in myImage eine Referenz auf Ihr <img>-Element gespeichert. Als nächstes haben Sie seine onclick-Ereignishandler-Eigenschaft auf eine Funktion ohne Namen (eine "anonyme" Funktion) gesetzt. Jedes Mal, wenn auf dieses Element geklickt wird:

1. Der Code ruft den Wert des src-Attributs des Bildes ab.

2. Der Code verwendet eine Bedingung, um zu überprüfen, ob der src-Wert dem Pfad des Originalbildes entspricht:

   1. Wenn ja, ändert der Code den src-Wert zum Pfad des zweiten Bildes, sodass das andere Bild im <img>-Element geladen wird.
   2. Wenn nicht (was bedeutet, dass es sich bereits geändert haben muss), wechselt der src-Wert zurück zum Pfad des Originalbildes, in den ursprünglichen Zustand.

Als nächstes wollen wir den Seitentitel in eine personalisierte Willkommensnachricht ändern, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Willkommensnachricht wird bestehen bleiben. Sollte der Benutzer die Seite verlassen und später zurückkehren, speichern wir die Nachricht mit der Web Storage API. Wir werden auch eine Option einschließen, um den Benutzer zu ändern und damit die Willkommensnachricht.

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

   html

   <button>Change user</button>
   

2. Platzieren Sie in main.js diesen Code am unteren Rand der Datei, exakt so, wie er geschrieben ist. Dies nimmt Referenzen auf die neue Schaltfläche und die Überschrift und speichert jede in Variablen:

   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. Diese wird noch nichts tun, aber das ändert sich bald.

   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 Dialogfenster anzeigt, ähnlich wie alert(). Diese prompt()-Funktion tut mehr als alert(), indem sie den Benutzer auffordert, Daten einzugeben und diese in einer Variablen zu speichern, nachdem der Benutzer auf OK geklickt hat. In diesem Fall bitten wir den Benutzer, einen Namen einzugeben. Als nächstes ruft der Code eine API localStorage auf, 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 der Wert auf die myName-Variable gesetzt wird, 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 nach der Funktionsdeklaration den folgenden Bedingungsblock hinzu. Wir könnten dies Initialisierungscode nennen, da es die App strukturiert, wenn sie das erste Mal geladen wird.

   js

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

   Die erste Zeile dieses Blocks verwendet den Negationsoperator (logisches NICHT, dargestellt durch das !), um zu überprüfen, ob die name-Daten existieren. Wenn nicht, führt die setUserName()-Funktion aus, um sie zu erstellen. Wenn es existiert (das heißt, der Benutzer hat während eines vorherigen Besuchs einen Benutzernamen festgelegt), rufen wir den gespeicherten Namen mit getItem() ab und setzen den textContent der Überschrift auf einen String plus den Benutzernamen, wie wir es in setUserName() getan haben.

5. Setzen Sie diesen onclick-Ereignishandler (unten) auf die Schaltfläche. Wenn darauf geklickt wird, führt setUserName() aus. Dies ermöglicht es dem Benutzer, einen anderen Namen einzugeben, indem er die Schaltfläche drückt.

   js

   myButton.onclick = () => {
     setUserName();
   };
   

Wenn Sie das Beispiel ausführen und das Dialogfeld erhalten, das Sie auffordert, Ihren Benutzernamen einzugeben, versuchen Sie, die Abbrechen-Taste zu drücken. Sie sollten mit einem Titel enden, der Mozilla ist cool, null lesen. Dies passiert, weil – wenn Sie den Prompt abbrechen – der Wert als null gesetzt wird. Null ist ein spezieller Wert in JavaScript, der das Fehlen eines Wertes bezeichnet.

Versuchen Sie auch, auf OK zu klicken, ohne einen Namen einzugeben. Sie sollten mit einem Titel enden, der Mozilla ist cool, liest, aus ziemlich offensichtlichen Gründen.

Um diese Probleme zu vermeiden, könnten Sie überprüfen, ob der Benutzer keinen leeren Namen eingegeben hat. Aktualisieren Sie Ihre setUserName()-Funktion auf dies:

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 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 auch unsere Version ansehen.

Falls Sie irgendwo feststecken, können Sie Ihre Arbeit mit unserem fertigen Beispielcode auf GitHub vergleichen.

Wir haben nur einen kleinen Teil von JavaScript behandelt. Wenn Ihnen das Spielen Spaß gemacht hat und Sie weiter machen möchten, nutzen Sie die unten aufgeführten Ressourcen.

Dynamisches clientseitiges Skripting mit JavaScript

Tauchen Sie viel tiefer in JavaScript ein.

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, begleitet von einer automatisierten Bewertung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist gegen eine kleine Einmalzahlung verfügbar.

• Zurück
• Übersicht: Einführung ins Web
• Weiter