Dieses Einsteiger-Tutorial führt dich Schritt-für-Schritt zu deinem ersten JavaScript-Programm. Klassischerweise erstellen Anfänger meist das berühmte "Hallo Welt" Skript. Wir werden mit diese Tradition brechen und dein erstes Skript etwas spannender machen. Und zwar wirst du ein einfaches Skript programmieren, welches deinen Namen abfragt und im Anschluss in deinem Browser darstellt. Wenn du dieses Tutorial fertigstellst, hast du bereits ein interaktives "Hallo-Welt" bzw. "Hallo Vorname"-Programm. Danach kannst du hier mehr zu JavaScript erfahren.
Voraussetzungen
Für dieses Anleitung sind keine Installationen auf deinem Computer notwendig. Du brauchst nur einen modernen Browser. Da du dieses Anfänger-Tutorial gerade in einem Browser liest, ist die Anforderung bereits erfüllt. In der nachfolgenden Beschreibung gehe ich davon aus, dass du entweder Chrome oder Firefox benutzt. Es funktioniert aber im Grunde mit jedem Browser.
1. Entwicklerkonsole im Browser öffnen
Wenn du noch nie programmiert hast und nicht weißt, wo der Code überhaupt eingefügt wird, zeige ich dir in wenigen Schritten, wie du die Entwicklerkonsole in deinem Browser öffnen kannst. Damit hast du bereits alle Voraussetzungen erfüllt, um JavaScript-Code auszuführen.
Wenn du einen einfachen Rechtsklick in deinem Browser machst, öffnet sich ein Menü. Wähle hier die Option "Untersuchen" oder je nach Browser "Element untersuchen".
Im Anschluss öffnet sich ein Fenster am unteren (oder rechten Rand) deines Bildschirms. Das ist die Entwicklungsumgebung deines Browsers. Klicke jetzt auf die "Konsole" (oder "Console"). In dieses kleine Fenster kannst du JavaScript-Code einfügen und ausführen.
Wenn du mit dieser "Text"-Beschreibung Probleme hattest, kansnt du dir folgende Screenshots für Firefox und Chrome anschauen
Entwicklerkonsole in Mozilla Firefox finden und öffnen:
Entwicklerkonsole in Google Chrome finden und öffnen:
2. Dein erstes JavaScript programmieren
Um dein "Hallo Welt"-Programm zu coden, solltest du jetzt die Konsole deines Browsers geöffnet haben.
Es gibt zwei Möglichkeiten, das Skript in JavaScript zu erstellen:
- mit der alert()-Funktion und
- mit der console.log()-Funktion
2.1 Die alert()-Funktion
Die erste Möglichkeit, dieses Programm zu schreiben, ist die Verwendung der alert()
-Funktion. Wenn diese Funktion aufgerufen wird, erscheint eine Dialogbox im aktuellen Fenster mit einer zuvor bestimmten Textnachricht. Über einen "OK"-Button lässt sich die Dialogbox wieder schließen.
Innerhalb der alert-Funktion werden wir einen String definieren. Ein String ist ein sogenannter Datentyp. Im jetzigen Moment musst du nur wissen, dass du mit einem String einen Text wie z.B. "Hallo Welt" oder "Hallo LerneProgrammieren!" definieren kannst.
Wir werden diesen Text jetzt in unserer Dialogbox aufrufen.
Der Code dafür sieht wie folgt aus:
alert("Hallo LerneProgrammieren!");
Jetzt bist du gefragt: Füge die oben gezeigte Code-Zeile in deine Konsole ein. (Tipp: Du kannst die Zeile markieren, kopieren und dann in die Konsole einfügen.). Wenn du sie eingefügt hast, drücke "ENTER" auf der Tastatur.
Dir sollte jetzt folgende Dialogbox angezeigt werden:
Noch einmal kurz zusammengefasst, was wir gemacht haben:
- Du hast die alert()-Funktion aufgerufen und
- hier einen String definiert, nämlich den Text "Hallo LerneProgrammieren". Der String beginnt und endet mit "Anführungszeichen oben" (alternativ geht auch das 'Hochkomma' ).
- Die Code-Zeile endet mit einem Semikolon (;)
Jetzt kostenlosen Crashkurs sichern (Online Programmieren, keine Installation nötig)
2.2 console.log()-Funktion
Wenn du mehrer Ausgaben (z.B. Textausgaben) testen möchtest, ist die Dialogbox etwas unpraktisch. Stell dir vor, du musst bei jedem Test 8 Dialogboxen wegklicken. Um das gleiche Programm etwas cleverer zu lösen, kannst du auch die console.log()-Funktion benutzen.
Wir können damit den gleichen String ausgeben. Wenn du den Code in deiner Konsole mit der console.log()
-Funktion ausführst, wird jedoch keine Dialogbox angezeigt, sondern die Ausgabe wird direkt in deine Konsole geschrieben.
(Hinweis: Falls du schonmal mit einer Kommandozeile gearbeitet hast, wird dir diese Funktion bekannt vorkommen)
Jetzt bist du wieder gefragt. Füge folgenden Code in deine Konsole ein und drücke dann auf ENTER:
console.log("Hallo LerneProgrammieren!");
Wie bei alert()
übergeben wir die Zeichenfolge "Hallo LerneProgrammieren!" zwischen den Klammern an die Methode console.log(). Wir schließen unsere Anweisung mit einem Semikolon ab, wie es für JavaScript typisch ist.
Sobald wir ENTER drücken, wird die Nachricht "Hallo LerneProgrammieren!" in die Konsole gedruckt:
Im nächsten Schritt wollen wir dein Programm etwas interaktiver gestalten.
3. Dein Skript um eine Eingabe erweitern
Jedes Mal, wenn wir unser bestehendes "Hallo LerneProgrammieren"-Skript laufen lassen, zeigt es die gleiche Ausgabe. Das wird nach einer kurzen Zeit langweilig.
Lassen uns die Person, die unser JavaScript ausführt, nach ihrem Vornamen fragen. Diesen eingegebenen Vornamen zeigen wir dem Benutzer im Anschluss an.
Um den Benutzer nach seinem Namen zu fragen, benutzen wir die prompt()-Funktion. Der Benutzer wird dadurch aufgefordert eine Eingabe zu machen. In unsere Eingabeaufforderung schreiben wir den String ""Wie heißt du?". Dadurch weiß der Benutzer auch, was er hier eingeben soll.
Um die Eingabe auch zu speichern benutzen wir eine Variable. Eine Variable ist nichts anderes als ein Zwischenspeicher, um Daten zu einem späteren Zeitpunkt bequem aufrufen zu können.
Hier ist unsere Eingabeaufforderung, die wir in der Variable "vorname" speichern.
Hier ist der Code:
let vorname = prompt("Wie heißt du?");
Füge die obere Code-Zeile in deine Konsole ein und drücke auf ENTER. Du solltest jetzt eine Dialogbox sehen, die dich zu einer Eingabe auffordert.
Das Dialogfenster, das sich über Ihrem Webbrowser-Fenster öffnet, enthält ein Textfeld, in das der Benutzer Eingaben tätigen kann. Sobald der Benutzer einen Wert in das Textfeld eingibt, muss er auf OK klicken, damit der Wert gespeichert wird. Der Benutzer kann diesen Vorgang auch über die Schaltfläche "Abbrechen" unterbinden.
Es ist wichtig, die JavaScript-Prompt()-Methode nur dann zu verwenden, wenn sie im Kontext des Programms sinnvoll ist. Zu viele Eingaben können für den Webseiten-Besucher schnell langweilig werden.
In unserem oben gezeigten Beispiel gebe ich meinen Vornamen ein ("Daniel")
Nachdem wir nun den Wert des Benutzernamens zwischengespeichert haben, können wir damit fortfahren, diesen Wert zur Begrüßung zu verwenden.
4. Begrüßung des Besuchers mit alert()
Wie im letzten Schritt erwähnt, erzeugt die alert()-Methode eine Dialogbox im aktuellen Browserfenster. Wir können diese Methode auch verwenden, um den Benutzer zu begrüßen, indem wir den Variablennamen verwenden.
Wir werden die Strings miteinander verketten, damit wir am Anfang den Text "Hallo" und hinter dem Vornamen ein Ausfrufezeichen "!" darstellen können. Wir "verknüpfen" die Strings mit der Variable wie folgt:
"Hallo, " + vorname + "!"
Fügen wir diese Zeile nachfolgend in die alert()-Funktion ein:
alert("Hallo, " + vorname + "!");
Sobald wir hier ENTER drücken, erhalten wir das folgende Dialogfenster auf dem Bildschirm:
In diesem Fall ist der Vorname des Benutzers Daniel, so dass der Text "Hallo, Daniel!" ausgegeben wird.
Kannst du dieses Beispiel auch so umändern, dass die Ausgabe in der Konsole angezeigt wird?
5. Begrüßung des Besuchers mit console.log()
Wie wir in einem vorherigen Abschnitt gelernt haben, druckt die Methode console.log() eine Ausgabe in die Konsole (ähnlich wie bei Terminals/Kommandozeilen).
Wir werden den zuvor erstellten verketteten String erneut benutzen (hier müssen wir nichts ändern):
"Hallo, " + vorname + "!"
Setzen wir diese Zeile in unsere console.log()-Methode, dann sieht das so aus:
console.log("Hallo, " + vorname + "!");
Für einen Benutzer namens "Daniel" wird die Ausgabe auf der Konsole wie folgt aussehen.
Output in der Konsole:
Hallo, Daniel!
Fazit zu diesem Tutorial
Du hast jetzt dein erstes JavaScript-Programm gebaut, in dem du einen Vornamen deines Besuchers abfragst und die Antwort dann auf dem Bildschirm bzw. in deiner Konsole darstellen kannst. Mit weiteren Tutorials zu JavaScript kannst du jetzt lernen, wie du dieses simple Programm immer weiter ausbauen kannst. Spiele etwas mit dem Code rum und versuche doch mal zusätzlich die Lieblingsfarbe des Benutzers abzufragen und dann in einer Dialogbox auszugeben.
Wenn du weiter in die Tiefe von JavaScript gehen möchtest, empfehle ich dir unseren LerneProgrammieren Anfängerkurs und den JavaScript-Schnellstart. Beide Kurse eignen sich bestens für Anfänger ohne Vorwissen. Du lernst hier das Programmieren in JavaScript anhand von vielen praktischen Übungen. Wie auch immer du ab hier weitermachst, ich bin gespannt auf deine Programmideen und hoffe, dass dir dieses Anfänger-Tutorial zu JavaScript gefallen hat.
- Programmiere echte Apps als Anfänger
- Keine Installation, sofort loslegen
- Komplett praxisbezogen
- Zugriff auf Online-Editor