Hello, World!
Dauer: 40 Minuten bzw. restliche Zeit
- Beispielprogramm “Hello, World!”
Ziel: Live Coding zum Mitmachen beginnt
Die klassische Einführung in eine Programmiersprache besteht darin, ein Programm zu schreiben, das die Begrüßung
Hello, World!auf dem Bildschirm anzeigt bzw. ausgibt. Wir betrachten dies kurz in JavaScript.
Für alle, die schon Programmiererfahrungen haben:
Die ersten Schritte sollen zunächst diejenigen an die Programmierung heranführen, die noch nie oder nur wenig programmiert haben. Am Anfang könnte das meiste demnach schon bekannt sein, aber das Tempo wird sich schrittweise erhöhen und hoffentlich sind bald auch für Erfahrene einige unbekannte Aspekte oder nützliche Tipps dabei.
Strings für Text
→ Vorführung der Konsole in Chrome und/oder Firefox
→ Jeder kann mitmachen (Taste F12 im Chrome-Browser)
In fast allen Programmiersprachen wird beliebiger Text wie z. B.
Hello, World! als String (Zeichenkette) bezeichnet.
Strings werden in den meisten Programmiersprachen mit doppelten Anführungszeichen umgeben:
"Hello, World!"Für das Hello-World-Programm benötigen wir also den String "Hello, World!" und einen „Befehl”, um einen String auf dem Bildschirm
anzuzeigen bzw. auszugeben.
Ausgabe auf Bildschirm
Um etwas auf dem Bildschirm auszugeben, hat JavaScript z. B. die folgende Funktion:
console.log()Die runden Klammern deuten an, dass die Funktion verwendet bzw. aufgerufen wird.
Um mit dieser Funktion etwas bestimmtes auszugeben, müssen wir
beim Funktionsaufruf einen Parameter in den runden
Klammern einsetzen. Wir verwenden also den String
"Hello, World!":
.("Hello, World!")
Hello, World!In der Konsole wird der Text Hello, World! ausgegeben, d.h.
Hello, World! wird auf dem Bildschirm angezeigt.
Dies wird im Beispiel oben durch den blauen „Info-Block” angedeutet.
Es gibt auch Funktionen ohne Parameter und solche mit mehreren Parametern.
Ebenso können sie ein Ergebnis als Rückgabewert liefern
(dies ist hier bei console.log() nicht relevant).
Funktionen mit Parametern, Rückgabewerten, usw. werden später ausführlich behandelt.
Wichtig ist hier nur, dass wir mit dem Funktionsaufruf
console.log("mein Text") einen String (z. B. “mein Text”)
ausgeben können.
Für Fortgeschrittene: In der Programmierung werden oft verschiedene Begriffe synonym verwendet:
- Funktion und Methode — Eine Methode ist technisch eine Funktion,
die zu einem Objekt gehört (wie
console.log()zumconsole-Objekt). - Parameter und Argument — Parameter sind die Platzhalter in der Funktionsdefinition, Argumente die konkreten Werte beim Aufruf.
Im Alltag werden diese Begriffe oft austauschbar verwendet.
Kleine Übung: Geben Sie in der Konsole Ihren Namen aus, z. B.:
console.log("Max Mustermann")
Versuchen Sie auch, zwei Zeilen nacheinander auszugeben.
Nun haben wir eine korrekte Anweisung in JavaScript programmiert.
Grundlegend und stark vereinfacht gesagt besteht die Programmierung in vielen Sprachen daraus, aufeinanderfolgende Anweisungen zu schreiben, die dann ausgeführt werden.
Syntax-Hinweise
- In JavaScript können mehrere Anweisungen durch Zeilenumbruch oder Semikolon voneinander getrennt werden.
- Oft ist daher JavaScript-Code mit Semikolon am Ende einer Anweisung zu sehen:
console.log("Hello, World!"); - Im Unterrichtsmaterial wird meistens das Semikolon am Ende einer Anweisung angegeben.
- Text bzw. Strings können in JavaScript entweder mit doppelten (
"") oder einfachen ('') Anführungszeichen umgeben werden.
Praktische Hinweise
- Jeder Browser hat eine JavaScript-Konsole, in der JavaScript-Code ausprobiert werden kann. Dort funktioniert auch die Methode
console.log(). - Wir verwenden gerade die Konsole eines Browsers, um JavaScript-Code auszuführen. Dies ist praktisch für kleine Experimente. Bald werden wir „echte” Programmierumgebungen kennenlernen.
- Im Browser kann auch etwas in einem UI-Dialog mit
alert()angezeigt werden. - In dieser Vorlesung betrachten wir JavaScript weitestgehend ohne HTML und CSS (→ dies findet evtl. in der Vorlesung „Web-Engineering” statt).
Programmierumgebung
Für die Verwendung einer Programmiersprache werden zusätzliche Werkzeuge wie Editoren, Interpreter/Compiler oder komplette Entwicklungsumgebungen benötigt.
JavaScript ist leicht zugänglich, weil jeder Browser eine sogenannte
Konsole hat, in der mit JavaScript experimentiert werden kann
(außer auf dem Smartphone oder Tablet). Die Konsole
(console) ist Teil der Entwicklerwerkzeuge (developer tools)
eines Browsers und kann meistens mit der Funktionstaste F12
geöffnet werden.
Bald lernen wir weitere Programmierumgebungen wie z. B. den Editor VS Code und die JavaScript-Laufzeitumgebung Node.js kennen.
Inspiration
Es gibt einige spannende Programmierumgebungen für besondere Einsatzbereiche wie Grafik oder Spiele, die online im Browser funktionieren — ohne etwas installieren zu müssen. Ein paar Beispiele:
- Grafische Programmierung mit p5js — basiert auf Processing
- Spiele mit MakeCode Arcade — unterstützt Scratch, JavaScript und Python
- Spiele mit Kaplay
Kennen Sie weitere Programmierumgebungen, die direkt im
Browser verwendet werden können?
(Muss nicht unbedingt auf JavaScript ausgelegt sein.)
Falls genügend Zeit ist, dann kann das Setup vom nächsten Block vorgezogen werden.
Interpreter vs. Compiler
JavaScript wird in einem sogenannten Interpreter ausgeführt, der z. B. Teil eines Browsers (u.a. in der oben erwähnten Konsole) oder in Node.js enthalten ist. Der Interpreter führt den Code in einem JavaScript-Programm schrittweise aus, ohne ihn vorher zu überprüfen. Einen Compiler wie in Java, der den Programmcode vor der Ausführung auf mögliche Fehler untersucht, gibt es in gewöhnlichem JavaScript-Code nicht.
Einerseits ist dadurch der Einstieg in JavaScript im Vergleich zu Java mit weniger Aufwand möglich. Andererseits werden manche Fehler im Code erst zur Laufzeit des Programms im Interpreter bemerkt.
Aber auch in JavaScript ermöglichen Tools wie ESLint und insbesondere die Spracherweiterung TypeScript zuverlässige Überprüfungen des Codes vor seiner Ausführung. TypeScript hat einen Compiler, der den Code vor der Ausführung auf mögliche Fehler untersucht und den Code in JavaScript übersetzt.