JavaScript: Interaktivität hinzufügen
JavaScript ist eine Programmiersprache, die Interaktivität zu Websites hinzufügt. Dies geschieht in Spielen, beim Auslösen von Antworten, wenn Tasten gedrückt werden, oder bei der Dateneingabe in Formulare, mit dynamischem Styling, mit Animationen usw. Dieser Artikel hilft Ihnen, mit JavaScript zu beginnen und Ihr Verständnis darüber zu erweitern, was möglich ist.
Voraussetzungen: | Grundlegende Vertrautheit mit dem Betriebssystem Ihres Computers, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden, und Dateisystemen. |
---|---|
Lernziele: |
|
Was ist JavaScript?
JavaScript ist eine leistungsstarke Programmiersprache, die Interaktivität zu einer Website 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 datenbankgesteuerte Apps und vieles mehr erstellen!
JavaScript selbst ist relativ kompakt, aber sehr flexibel. Entwickler haben eine Vielzahl von Tools auf Basis der Kern-JavaScript-Sprache geschrieben, die eine enorme Menge an Funktionen mit minimalem Aufwand freischalten. Dazu gehören:
- Browser-Anwendungsprogrammierschnittstellen (APIs), die in Webbrowser integriert sind und Funktionen wie das dynamische Erstellen von HTML und das Einstellen von CSS-Stilen, das Erfassen und Manipulieren eines Video-Streams von der Webcam eines Benutzers oder das Erzeugen von 3D-Grafiken und Audio-Samples bieten.
- Drittanbieter-APIs, mit denen Entwickler Funktionalitäten von anderen Content-Anbietern wie YouTube oder Facebook in ihre Websites integrieren können.
- 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 leichte Einführung in JavaScript - die Details darzustellen, wie sich die Kernausführung von JavaScript von den oben genannten Tools unterscheidet. Mehr erfahren Sie in unseren Kernmodulen sowie in anderen Teilen von MDN.
Der unten stehende Abschnitt stellt einige Aspekte der Kernsprache vor und bietet die Möglichkeit, mit einigen Funktionen der Browser-APIs zu experimentieren. Viel Spaß!
Ein "Hello world!" Beispiel
JavaScript ist eine der beliebtesten modernen Webtechnologien! Wenn Ihre JavaScript-Fähigkeiten wachsen, werden Ihre Websites in eine neue Dimension von Kraft und Kreativität eintreten.
Es ist jedoch herausfordernder, sich mit JavaScript vertraut zu machen, als mit HTML und CSS. Sie sollten klein anfangen und allmählich Fortschritte machen. Um zu beginnen, lassen Sie uns untersuchen, wie Sie JavaScript auf Ihre Seite hinzufügen, um ein Hello world! Beispiel zu erstellen. (Hello world! ist der Standard für einführende Programmiertests.)
Warnung: Wenn Sie dem Rest unseres Kurses noch nicht gefolgt sind, laden Sie diesen Beispielcode herunter und verwenden Sie ihn als Ausgangspunkt.
-
Erstellen Sie in Ihrem Ordner
first-website
einen neuen Ordner namensscripts
. -
Erstellen Sie innerhalb des Ordners
scripts
ein neues Textdokument namensmain.js
und speichern Sie es. -
Gehen Sie zu Ihrer Datei
index.html
und geben Sie diesen Code in einer neuen Zeile ein, kurz vor dem schließenden</body>
Tag:html<script src="scripts/main.js"></script>
Dies erfüllt dieselbe Aufgabe, wie das
<link>
Element für CSS. Es wendet das JavaScript auf die Seite an, sodass es einen Effekt auf das HTML haben kann (zusammen mit dem CSS und allem anderen auf der Seite). -
Fügen Sie diesen Code Ihrer Datei
scripts/main.js
hinzu:jsconst myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!";
-
Stellen Sie sicher, dass die HTML- und JavaScript-Dateien gespeichert sind, laden Sie dann
index.html
in Ihrem Browser. Sie sollten etwas sehen, das so aussieht:
Hinweis:
Der Grund, warum die obigen Anweisungen das <script>
Element in der Nähe des unteren Endes der HTML-Datei platzieren, ist, dass der Browser den Code in der Reihenfolge liest, in der er in der Datei erscheint.
Wenn das JavaScript zuerst geladen wird und es HTML beeinflussen soll, das noch nicht geladen ist, könnte es Probleme geben. JavaScript nahe dem Ende einer HTML-Seite zu platzieren, ist eine Möglichkeit, dieser Abhängigkeit Rechnung zu tragen.
Was ist passiert?
Wir haben JavaScript verwendet, um den Text der Überschrift in Hello world! zu ändern. Dies haben wir erreicht, indem wir eine Funktion namens querySelector()
verwendet haben, um eine Referenz zu Ihrer Überschrift zu erhalten, und sie in einer Variablen namens myHeading
zu speichern. Dies ist ähnlich wie das, was wir mit CSS-Selektoren getan haben. Wenn Sie etwas mit einem Element machen wollen, müssen Sie es zuerst auswählen.
Danach hat der Code den Wert der textContent
-Eigenschaft der myHeading
-Variablen (die den Inhalt der Überschrift darstellt) auf Hello world! gesetzt.
Hinweis: Beide Funktionen, die Sie in dieser Übung verwendet haben, sind Teile der Document Object Model (DOM) API, die die Fähigkeit hat, Dokumente zu manipulieren.
Grundlagen der Sprache - Schnellkurs
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 Codieren in anderen Sprachen!
Warnung: In diesem Artikel sollten Sie versuchen, die Beispielcodezeilen in Ihre JavaScript-Konsole einzugeben, um zu sehen, was passiert. Weitere Details zu JavaScript-Konsolen finden Sie unter Entdecken Sie Browser-Entwicklungstools.
Variablen
Variablen sind Container, die Werte speichern. Sie beginnen, indem Sie eine Variable mit dem Schlüsselwort let
deklarieren, gefolgt vom Namen, den Sie der Variablen geben:
let myVariable;
Ein Semikolon am Ende einer Zeile markiert das Ende einer Anweisung. Es ist nur erforderlich, wenn Sie Anweisungen in einer einzigen Zeile trennen müssen. Einige Menschen glauben jedoch, dass es gute Praxis ist, Semikolons am Ende jeder Anweisung zu haben. Es gibt andere Regeln, wann man Semikolons verwenden sollte und wann nicht. Weitere Details finden Sie unter Ihr Leitfaden zu Semikolons in JavaScript.
Sie können einer Variablen fast jeden Namen geben, aber es gibt einige Einschränkungen. (Sehen Sie sich diesen Abschnitt über Namensregeln an](/de/docs/Web/JavaScript/Guide/Grammar_and_types#variables).) 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, dass myVariable
nicht dasselbe ist wie myvariable
. Wenn Sie Probleme in Ihrem Code haben, überprüfen Sie die Groß-/Kleinschreibung!
Nach der Deklaration einer Variablen können Sie ihr einen Wert zuweisen:
myVariable = "Bob";
Sie können diese beiden Operationen auch 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 diesen später im Code ändern:
let myVariable = "Bob";
myVariable = "Steve";
Beachten Sie, dass Variablen Werte verschiedener Datentypen halten können:
Variable | Erklärung | Beispiel |
---|---|---|
String | Dies ist eine Textfolge, bekannt als Zeichenkette. Um anzuzeigen, dass der Wert eine Zeichenkette ist, umgeben Sie ihn mit einfachen oder doppelten Anführungszeichen. | let myVariable = 'Bob'; oder let myVariable = "Bob"; |
Number | Dies ist eine Zahl. Zahlen haben keine Anführungszeichen. | let myVariable = 10; |
Boolean |
Dies ist ein Wahr-/Falsch-Wert. Die Wörter true und
false sind spezielle Schlüsselwörter, die keine Anführungszeichen benötigen.
|
let myVariable = true; |
Array | Dies ist eine Struktur, die es Ihnen ermöglicht, mehrere Werte in einer einzigen Referenz zu speichern. |
let myVariable = [1,'Bob','Steve',10]; Beziehen Sie sich auf jedes Element des Arrays wie folgt: myVariable[0] ,
myVariable[1] , usw.
|
Object | Dies kann alles sein. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Hinterkopf, während Sie lernen. |
let myVariable = document.querySelector('h1'); Alle obigen Beispiele auch. |
Warum brauchen wir Variablen? Variablen sind notwendig, um in der Programmierung etwas Interessantes zu tun. Wenn Werte sich nicht ändern könnten, dann könnten Sie nichts Dynamisches machen, wie z. B. eine Begrüßungsnachricht personalisieren oder ein Bild in einer Bildergalerie ändern.
Kommentare
Kommentare sind Textschnipsel, die zusammen mit dem Code hinzugefügt werden können. Der Browser ignoriert Text, der als Kommentar markiert ist. Sie können Kommentare in JavaScript schreiben, genau wie in CSS:
/*
Everything in between is a comment.
*/
Wenn Ihr Kommentar keine Zeilenumbrüche enthält, können Sie ihn wie folgt hinter zwei Schrägstrichen platzieren:
// This is a comment
Operatoren
Ein Operator
ist ein mathematisches Symbol, das auf Basis zweier Werte (oder Variablen) ein Ergebnis liefert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren sowie einige Beispiele zum Ausprobieren in der JavaScript-Konsole.
Operator | Erklärung | Symbol(e) | Beispiel |
---|---|---|---|
Addition | Addiert zwei Zahlen oder kombiniert zwei Zeichenfolgen. | + |
6 + 9;
|
Subtraktion, Multiplikation, Division | Diese machen das, was Sie von ihnen in der Grundmathematik erwarten. | - , * , / |
9 - 3;
|
Zuweisung | Wie Sie bereits gesehen haben: dient dies zur Zuweisung eines Wertes zu einer Variablen. | = |
let myVariable = 'Bob'; |
Strikte Gleichheit |
Es wird ein Test durchgeführt, um festzustellen, ob zwei Werte gleich und vom selben Datentyp sind. Es ergibt ein
true /false (Boolean) Ergebnis.
|
=== |
let myVariable = 3;
|
Nicht, Ungleich |
Diese liefert den logisch gegenteiligen Wert von dem, was sie vorangeht. Es verwandelt
ein true in ein false , usw. Wenn es zusammen mit dem Gleichheitsoperator verwendet wird, testet der Negationsoperator, ob zwei Werte nicht gleich sind.
|
! , !== |
Für "Nicht" ist der grundlegende Ausdruck
"Ungleich" ergibt im Wesentlichen dasselbe Ergebnis mit anderer Syntax. Hier testen wir "ist
|
Es gibt viele weitere Operatoren zu erkunden, aber das reicht für jetzt. Siehe Ausdrücke und Operatoren für eine vollständige Liste.
Hinweis:
Das Mischen von Datentypen kann zu merkwürdigen Ergebnissen bei Berechnungen führen. Achten Sie darauf, dass Sie Ihre Variablen richtig referenzieren und die erwarteten Ergebnisse erzielen. Geben Sie zum Beispiel '35' + '25'
in Ihre Konsole ein. Warum erhalten Sie nicht das erwartete Ergebnis? Weil die Anführungszeichen die Zahlen in Zeichenfolgen verwandeln, sodass Sie am Ende Zeichenfolgen zusammenfügen statt Zahlen zu addieren. Wenn Sie 35 + 25
eingeben, erhalten Sie die Summe der beiden Zahlen.
Bedingungen
Bedingungen sind Code-Strukturen, die verwendet werden, um zu testen, ob ein Ausdruck wahr zurückgibt 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 in if ()
ist der Test. Dieser verwendet den strikten Gleichheitsoperator (wie oben beschrieben), um die Variable iceCream
mit der Zeichenkette chocolate
zu vergleichen, um zu sehen, ob die beiden gleich sind. Wenn dieser Vergleich true
ergibt, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht wahr ist, wird der zweite Codeblock – nach dem else
-Schlüsselwort – stattdessen ausgeführt.
Funktionen
Funktionen sind eine Möglichkeit, Funktionalitäten 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. Zum Beispiel:
let myVariable = document.querySelector("h1");
alert("hello!");
Die document.querySelector()
- und alert()
-Funktionen sind im Browser integriert.
Wenn Sie etwas sehen, das wie ein Variablenname aussieht, aber von Klammern gefolgt wird — ()
— ist es wahrscheinlich eine Funktion. Funktionen nehmen oft Argumente entgegen: Bits von Daten, die sie für ihre Aufgabe benötigen. Argumente gehen in die Klammern, durch Kommas getrennt, wenn es mehr als ein Argument gibt.
Zum Beispiel lässt die alert()
-Funktion ein Popup-Fenster innerhalb des Browserfensters erscheinen, aber wir müssen ihr eine Zeichenfolge als Argument geben, um der Funktion zu sagen, 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 dann mit verschiedenen Argumenten. Zum Beispiel:
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
Hinweis:
Die return
-Anweisung sagt dem Browser, die result
-Variable aus der Funktion zurückzugeben, sodass sie verfügbar ist. Dies ist notwendig, weil Variablen, die innerhalb von Funktionen definiert sind, nur innerhalb dieser Funktionen verfügbar sind. Dies wird Scoping von Variablen genannt. (Lesen Sie mehr über Scoping von Variablen.)
Ereignisse
Echte Interaktivität auf einer Website erfordert Ereignis-Handler. Dies sind Code-Strukturen, die auf Aktivitäten im Browser hören und Code als Reaktion darauf ausführen. Das offensichtlichste Beispiel ist das Behandeln des Click-Events, das vom Browser ausgelöst wird, wenn Sie auf etwas mit Ihrer Maus 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, einen Ereignis-Handler an ein Element anzuhängen.
Hier wählen wir das <html>
-Element aus. Wir rufen dann ihre addEventListener()
-Funktion auf und übergeben den Namen des zu hörenden Ereignisses ('click'
) und eine Funktion, die ausgeführt wird, wenn das Ereignis eintritt.
Die Funktion, die wir gerade an addEventListener()
übergeben haben, ist eine anonyme Funktion, da sie keinen Namen hat. Es gibt eine alternative Schreibweise für anonyme Funktionen, die wir einen Pfeilfunktion nennen.
Eine Pfeilfunktion verwendet () =>
anstelle von function ()
:
document.querySelector("html").addEventListener("click", () => {
alert("Ouch! Stop poking me!");
});
Unser Beispiel-Website aufladen
Mit unserem Überblick über die JavaScript-Grundlagen abgeschlossen, lassen Sie uns einige neue Funktionen zu unserem Beispiel-Website hinzufügen.
Bevor Sie weitermachen, löschen Sie den aktuellen Inhalt Ihrer main.js
-Datei — den Teil, den Sie vorher während des „Hello world!“-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, in Konflikt geraten.
Einen Bildwechsler hinzufügen
In diesem Abschnitt lernen Sie, wie Sie mit JavaScript und DOM-API-Funktionen den Wechsel zwischen zwei Bildern ermöglichen. Dieser Wechsel erfolgt, wenn ein Nutzer auf das angezeigte Bild klickt.
-
Wählen Sie ein weiteres Bild aus, das Sie auf Ihrer Beispiel-Website zeigen möchten. Idealerweise sollte das Bild dieselbe Größe wie das Bild haben, das Sie zuvor hinzugefügt haben, oder zumindest ähnlich groß sein.
-
Speichern Sie dieses Bild in Ihrem
images
-Ordner. -
Fügen Sie den folgenden JavaScript-Code in Ihrer
main.js
-Datei hinzu und ersetzen Sie dabeifirefox2.png
und beide Instanzen vonfirefox-icon.png
durch Ihren zweiten und ersten Bildnamen.jsconst 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"); } });
-
Speichern Sie alle Dateien und laden Sie
index.html
im Browser. Jetzt, wenn Sie auf das Bild klicken, sollte es sich in das andere verändern.
In dem obigen Code haben Sie eine Referenz auf Ihr <img>
-Element in myImage
gespeichert. Als Nächstes haben Sie ihm eine click
-Ereignis-Handler-Funktion zugewiesen, ohne einen Namen (eine "anonyme" Funktion). Jedes Mal, wenn dieses Element angeklickt wird, führt die Funktion Folgendes aus:
-
Ruft den Wert des
src
-Attributs des Bildes ab. -
Verwendet eine Bedingung, um zu überprüfen, ob der
src
-Wert gleich dem Pfad des Originalbildes ist:- Wenn es ist, ändert der Code den
src
-Wert auf den Pfad des zweiten Bildes, wodurch das andere Bild im<img>
-Element geladen wird. - Wenn es nicht der Fall ist (d. h., es muss bereits geändert worden sein), wechselt der
src
-Wert zurück zum ursprünglichen Bildpfad.
- Wenn es ist, ändert der Code den
Eine personalisierte Begrüßungsnachricht hinzufügen
Als Nächstes ändern wir die Seitenüberschrift in eine personalisierte Begrüßungsnachricht, wenn der Benutzer die Seite zum ersten Mal besucht. Diese Begrüßungsnachricht bleibt bestehen. Falls der Benutzer die Site verlässt und später zurückkehrt, speichern wir die Nachricht mithilfe der Web Storage API. Wir werden auch eine Option enthalten, um den Benutzernamen zu ändern und damit die Begrüßungsnachricht.
-
Fügen Sie in
index.html
die folgende Zeile unmittelbar vor dem<script>
-Element hinzu:html<button>Change user</button>
-
Fügen Sie in
main.js
den folgenden Code am unteren Rand der Datei genau so hinzu, wie er geschrieben ist. Dies erstellt Referenzen für die neue Schaltfläche und die Überschrift und speichert sie jeweils in Variablen.jslet myButton = document.querySelector("button"); let myHeading = document.querySelector("h1");
-
Fügen Sie die folgende Funktion hinzu, um die personalisierte Begrüßung einzustellen. Dies wird noch nichts tun; wir werden die Funktion später aufrufen.
jsfunction setUserName() { const myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = `Mozilla is cool, ${myName}`; }
Die
setUserName()
-Funktion enthält eineprompt()
-Funktion, die ein Dialogfeld anzeigt, ähnlich wiealert()
. Dieseprompt()
-Funktion tut mehr alsalert()
, indem sie den Benutzer auffordert, Daten einzugeben und sie in einer Variablen speichert, nachdem der Benutzer auf OK geklickt hat. In diesem Fall fragen wir den Benutzer, einen Namen einzugeben. Als Nächstes ruft der Code dielocalStorage
-API auf, die es uns ermöglicht, Daten im Browser zu speichern und sie später abzurufen. Wir verwenden die MethodesetItem()
der lokalen Speicherung, um ein Datenelement namens"name"
zu erstellen und zu speichern, wobei wir seine Wertigkeit auf diemyName
-Variable setzen, die die Namenvorgabe des Benutzers enthält. Schließlich setzen wir dentextContent
der Überschrift auf eine Zeichenkette und den neu gespeicherten Namen des Benutzers. -
Fügen Sie den folgenden Bedingungsblock nach der Funktionsdeklaration hinzu. Wir könnten dies Initialisierungscode nennen, da es die App strukturiert, wenn sie zum ersten Mal geladen wird.
jsif (!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 NOT, dargestellt durch das
!
), um zu überprüfen, ob dasname
-Datenelement bereits imlocalStorage
gespeichert ist. Wenn nicht, wird diesetUserName()
-Funktion ausgeführt, um sie zu erstellen. Wenn es existiert (d. h., der Benutzer einen Namen bei einem vorherigen Besuch gesetzt hat), rufen wir den gespeicherten Namen mitgetItem()
ab und setzen dentextContent
der Überschrift auf eine Zeichenkette und den Benutzernamen setzen, wie wir es innerhalb vonsetUserName()
getan haben. -
Fügen Sie eine
click
Ereignis-Handler-Funktion der Schaltfläche hinzu, wie unten gezeigt. Wenn sie angeklickt wird, wirdsetUserName()
ausgeführt. Dadurch kann der Benutzer einen anderen Namen eingeben, indem er auf die Schaltfläche klickt.jsmyButton.addEventListener("click", () => { setUserName(); });
Ein Benutzername von null?
Wenn Sie das Beispiel ausführen und das Dialogfenster erhalten, das Sie auffordert, Ihren Benutzernamen einzugeben, versuchen Sie, die Abbrechen-Schaltfläche zu drücken. Sie sollten mit einem Titel enden, der Mozilla ist cool, null sagt. Dies passiert, weil der Wert als null
gesetzt wird, wenn Sie die Aufforderung abbrechen. Null ist ein spezieller Wert in JavaScript, der sich auf das Fehlen eines Wertes bezieht.
Versuchen Sie auch, auf OK zu klicken, ohne einen Namen einzugeben. Sie sollten mit einem Titel enden, der Mozilla ist cool, sagt, da Sie myName
auf eine leere Zeichenkette 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 so:
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 das: 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 Sie ihn als den Text der Überschrift.
Fazit
Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie am Ende eine Seite haben, die wie das Bild unten aussieht. Sie können auch unsere Version ansehen.
Wenn Sie stecken bleiben, können Sie Ihre Arbeit mit unserem fertigen Beispielcode auf GitHub vergleichen.
Jetzt, da Sie Ihre Website fertiggestellt haben, ist der nächste Schritt, sie online zu stellen, damit andere sie ansehen können. Wir zeigen Ihnen, wie Sie dies in unserem nächsten Artikel tun können — Veröffentlichen Ihrer Website.
Siehe auch
- Dynamisches Skripting mit JavaScript
-
Wir haben in diesem Artikel nur an der Oberfläche von JavaScript gekratzt. Im weiteren Verlauf unseres Lernpfads finden Sie viel mehr JavaScript, beginnend mit unserem Modul Dynamisches Skripting mit JavaScript.
- Learn JavaScript
-
Dies ist eine hervorragende Ressource für angehende Webentwickler! Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, angeleitet von einer automatisierten Beurteilung. Die ersten 40 Lektionen sind kostenlos. Der vollständige Kurs ist für eine geringe Einmalzahlung verfügbar.