Einführung
Das Programm „Hello, World!“ Ist eine klassische und altehrwürdige Tradition in der Computerprogrammierung. Es ist ein kurzes und vollständiges erstes Programm für Anfänger und ein guter Weg, um sicherzustellen, dass Ihre Umgebung richtig konfiguriert ist.
In diesem Tutorial erfahren Sie, wie Sie dieses Programm in JavaScript erstellen. Um das Programm jedoch interessanter zu gestalten, werden wir das herkömmliche Programm "Hello, World!" So ändern, dass der Benutzer nach seinem Namen gefragt wird. Wir werden den Namen dann in einer Begrüßung verwenden. Wenn Sie mit diesem Tutorial fertig sind, haben Sie ein interaktives "Hallo, Welt!" - Programm.
Voraussetzungen
Sie können dieses Lernprogramm mit der JavaScript Developer Console in Ihrem Webbrowser ausführen. Bevor Sie mit diesem Tutorial beginnen, sollten Sie mit der Arbeit mit diesem Tool vertraut sein. Um mehr darüber zu erfahren, lesen Sie unser Tutorial „https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[How To Use the JavaScript Developer Console]“.
[[creating-the-“hello-world-”-program]] === Erstellen des Programms "Hello, World!"
Um das Programm "Hello, World!" Zu schreiben, öffnen Sie zunächst die JavaScript-Konsole Ihres bevorzugten Webbrowsers.
Es gibt zwei Möglichkeiten, wie Sie das Programm "Hello, World!" In JavaScript mit der Methode "+ alert () " und der Methode " console.log () +" erstellen können.
Mit + alert () +
Die erste Möglichkeit, dieses Programm zu schreiben, ist die Verwendung der Methode "+ alert () ", mit der ein Warnfeld über Ihrem aktuellen Fenster mit einer bestimmten Meldung angezeigt wird (in diesem Fall "Hello, World!"). ) und eine Taste " OK +", mit der der Benutzer die Warnung schließen kann.
Innerhalb der Methode übergeben wir den Datentyp string als Parameter. Diese Zeichenfolge wird auf den Wert "+ Hello, World! +" Gesetzt, damit dieser Wert in das Warnfeld gedruckt wird.
Um diesen ersten Stil des "Hello, World!" - Programms zu schreiben, setzen wir den String in die Klammern der "+ alert () +" - Methode. Wir beenden unsere JavaScript-Anweisung mit einem semicolon.
alert("Hello, World!");Sobald Sie die Taste "+ ENTER +" in Ihrer JavaScript-Zeile gedrückt haben, sollte die folgende Warnmeldung in Ihrem Browser angezeigt werden:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Beispiel für JavaScript-Konsolenwarnung]
Die Konsole gibt auch das Ergebnis der Auswertung eines Ausdrucks aus, der als "+ undefined +" angezeigt wird, wenn der Ausdruck nicht explizit etwas zurückgibt.
Es kann mühsam sein, Popup-Warnungen weiterhin auszublenden. Lassen Sie uns daher das Erstellen desselben Programms durch Protokollieren in der Konsole mit "+ console.log () +" erläutern.
Mit + console.log () +
Mit der Methode + console.log () + können wir dieselbe Zeichenfolge ausgeben, außer diesmal an die JavaScript-Konsole. Die Verwendung dieser Option ähnelt dem Arbeiten mit einer Programmiersprache in der Terminalumgebung Ihres Computers.
Wie bei + alert () + übergeben wir die Zeichenfolge " Hello, World! " In Klammern an die Methode + console.log () +. Wir beenden unsere Anweisung mit einem Semikolon, wie es für JavaScript-Syntaxkonventionen typisch ist.
console.log("Hello, World!");Sobald wir "+ ENTER " drücken, wird die Nachricht " Hello, World! +" Auf der Konsole gedruckt:
OutputHello, World!Im nächsten Abschnitt wird erläutert, wie dieses Programm für den Benutzer interaktiver gestaltet werden kann.
Eingabeaufforderung
Jedes Mal, wenn wir unser bestehendes Programm "Hello, World!" Ausführen, wird dieselbe Ausgabe erzeugt. Lassen Sie uns die Person, die unser Programm ausführt, nach ihrem Namen fragen. Diesen Namen können wir dann verwenden, um die Ausgabe anzupassen.
Für jede unserer oben verwendeten JavaScript-Methoden können wir mit einer Zeile beginnen, die zur Eingabe auffordert. Wir verwenden die JavaScript-Methode + prompt () + und übergeben ihr die Zeichenfolge " Wie heißt du? ", Um den Benutzer nach seinem Namen zu fragen. Die vom Benutzer eingegebene Eingabe wird dann in der variable + name + gespeichert. Wir beenden unseren Ausdruck mit einem Semikolon.
let name = prompt("What is your name?");Wenn Sie "+ ENTER +" drücken, um diese Codezeile auszuführen, wird eine Popup-Eingabeaufforderung angezeigt:
image: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/js-prompt.png [Beispiel für JavaScript-Eingabeaufforderung]
Das Dialogfeld, das über Ihrem Webbrowserfenster angezeigt wird, enthält ein Textfeld, in das der Benutzer Eingaben eingeben kann. Sobald der Benutzer einen Wert in das Textfeld eingibt, muss er auf "+ OK " klicken, damit der Wert gespeichert wird. Der Benutzer kann auch verhindern, dass ein Wert aufgezeichnet wird, indem er auf die Schaltfläche " Abbrechen +" klickt.
Es ist wichtig, die JavaScript-Methode + prompt () + nur zu verwenden, wenn dies im Kontext des Programms sinnvoll ist, da eine übermäßige Verwendung für den Benutzer mühsam werden kann.
Geben Sie an dieser Stelle den Namen ein, den das Programm empfangen soll. In diesem Beispiel verwenden wir den Namen "+ Sammy +".
Nachdem wir den Wert des Benutzernamens erfasst haben, können wir mit diesem Wert fortfahren, um den Benutzer zu begrüßen.
Begrüßung des Benutzers mit + alert () +
Wie oben erläutert, erstellt die Methode "+ alert () " ein Popup-Fenster über dem Browserfenster. Wir können diese Methode verwenden, um den Benutzer zu begrüßen, indem wir die Variable " name +" verwenden.
Wir werden string concatenation verwenden, um einen Gruß von "Hello!" Zu verfassen spricht den Benutzer direkt an. Verketten wir also die Zeichenfolge von "+ Hello +" mit der Variablen für "name":
"Hello, " + name + "!"Wir haben zwei Zeichenfolgen, "" Hello "" und ""! "", Mit der dazwischen liegenden Variablen "+ name " kombiniert. Jetzt können wir diesen Ausdruck an die Methode ` alert () +` übergeben.
alert("Hello, " + name + "!");Sobald wir hier "+ ENTER +" drücken, wird das folgende Dialogfeld auf dem Bildschirm angezeigt:
image: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/prompt-output.png [JavaScript-Eingabeaufforderung]
In diesem Fall lautet der Name des Benutzers Sammy, sodass die Ausgabe Sammy begrüßt hat.
Schreiben wir dies jetzt neu, damit die Ausgabe stattdessen auf der Konsole gedruckt wird.
Begrüßung des Benutzers mit + console.log () +
Wie wir in einem vorherigen Abschnitt gesehen haben, druckt die Methode + console.log () + die Ausgabe auf die Konsole, ähnlich wie die Funktion + print () + die Ausgabe auf das Terminal in Python drucken kann.
Wir werden die gleiche verkettete Zeichenfolge verwenden, die wir mit der + alert () + -Methode verwendet haben, die die Zeichenfolgen `+" Hello "," + "und" + "!" + "Mit der Variablen" + name + "kombiniert :
"Hello, " + name + "!"Dieser gesamte Ausdruck wird in die Klammern der Methode + console.log () + gesetzt, damit wir eine Begrüßung als Ausgabe erhalten.
console.log("Hello, " + name + "!");Für einen Benutzer namens Sammy sieht die Ausgabe in der Konsole wie folgt aus:
OutputHello, Sammy!Sie haben jetzt ein JavaScript-Programm, das Eingaben von einem Benutzer entgegennimmt und sie wieder auf dem Bildschirm ausgibt.
Fazit
Nachdem Sie nun wissen, wie man das klassische Programm „Hello, World!“ Schreibt, den Benutzer zur Eingabe auffordert und als Ausgabe anzeigt, können Sie daran arbeiten, Ihr Programm weiter zu erweitern. Fragen Sie zum Beispiel nach der Lieblingsfarbe des Benutzers und lassen Sie das Programm sagen, dass seine Lieblingsfarbe Rot ist. Sie könnten sogar versuchen, mit dieser Technik ein Mad Lib-Programm zu erstellen.