Hello, World!
Dauer: 45-60 Minuten
(abhängig von Diskussion während Live Coding)
- 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 (manchmal auch Methode genannt):
console.log()Die runden Klammern deuten bei Funktionen (und Methoden) an, dass diese verwendet bzw. aufgerufen werden.
Um mit dieser Funktion etwas bestimmtes auszugeben, müssen wir
hier beim Funktionsaufruf (oder Methodenaufruf) einen
Parameter (manchmal auch Argument genannt) in den runden
Klammern einsetzen. Wir verwenden also den String
"Hello, World!":
.("Hello, World!")
Hello, World!Oft sagen wir hierzu auch, dass „der Funktion bzw. Methode beim Aufruf ein Parameter oder ein Argument übergeben wird“.
Es gibt auch Funktionen/Methoden 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).
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.
Ein paar Bemerkungen dazu:
- 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.
- Jeder Browser hat eine JavaScript-Konsole, in der JavaScript-Code ausprobiert werden kann. Dort funktioniert auch die Methode
console.log(). - 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).
- Text bzw. Strings können in JavaScript entweder mit doppelten (
"") oder einfachen ('') Anführungszeichen umgeben werden.
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.
Später lernen wir weitere Programmierumgebungen wie z.B. den Editor VS Code, die JavaScript-Laufzeitumgebung NodeJS und die Online-Programmierumgebung replit.com kennen. Letztere unterstützt neben JavaScript auch viele weitere Programmiersprachen.
JavaScript wird in einem sogenannten Interpreter ausgeführt, der z.B. Teil eines Browsers (u.a. in der oben erwähnten Konsole) oder in NodeJS 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.
Wir werden den JavaScript-Code in den ersten Vorlesungsterminen und für die Übungen in kleinen Beispielen im Browser schreiben. Es muss also nichts installiert werden.
Für das Programmierprojekt kann später auch NodeJS zur Programmierung direkt auf dem Laptop installiert werden — eventuell ist dies jedoch nicht unbedingt nötig (siehe spätere Infos zum Projekt).
Für die Programmierung von JavaScript kann im Prinzip jeder Texteditor eingesetzt werden (VS Code, Web-/PhpStorm, Notepad++, usw.).
Beim Programmierprojekt sollten alle Mitglieder einer Gruppe die gleiche Entwicklungsumgebung einsetzen, damit die Teamarbeit einheitlich abläuft. Hierzu ist dann auch die Verwendung von git sinnvoll.
Inspiration
Es gibt einigende spannende Programmierungen 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 Kaboom von replit.com
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 die Übung vom nächsten Block vorgezogen werden.