Hallo HTML!

Bevor wir mit JavaScript weitermachen, sollten wir die ersten Schritte zum Anlegen von Websiten machen. Websiten werden auf der Basis von HTML erstellt. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. HTML legt den Inhalt und die Struktur einer Website fest. Browser stellen HTML-Seiten dar. HTML-Seiten werden in Dateien mit der Endung html gespeichert. Das Grundgerüst einer solchen Seite sieht wie folgt aus:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hallo Welt</title>
  </head>
  <body>
    Hallo Welt!
  </body>
</html>

In der ersten Zeile findest du die sogenannte Dokumenttyp-Deklaration. Mit <!doctype html> legen wir fest, dass wir ein HTML5-Dokument schreiben. Eine andere Dokumenttyp-Deklaration sollte man heute für HTML nicht mehr verwenden.

Ab Zeile 2 folgt das eigentliche HTML-Dokument. HTML-Dokumente bestehen aus HTML-Elementen. html, head, meta, title und body sind die Elemente, die wir im obigen Beispiel verwendet haben. HTML5 kennt noch viele weitere Elemente. HTML-Elemente werden durch Tags beschrieben. Tags werden durch den Elementnamen mit spitzen Klammern notiert. Die meisten Elemente besitzen ein einleitendes und ein schließendes Tag. Das html-Element wird durch <html> eingeleitet und durch </html> geschlossen. Dazwischen befindet sich der Inhalt des Elements. Der Inhalt eines Elements besteht entweder aus weiteren Elementen oder aus Text. Dadurch entsteht eine hierarchische Struktur.

Jedes HTML-Dokument beginnt mit dem html-Element. Es ist das sogenannte Wurzel-Element. Das html-Element enthält genau zwei Elemente: den head und den body. Im body, dem Körper, befindet sich der eigentliche Inhalt des HTML-Dokuments. In unserem Beispiel den Text „Hallo Welt!“. Im head, dem Kopf, befinden sich Informationen über den im body befindlichen Inhalt.

Mit dem obigen meta-Element sagen wir, dass wir unser Dokument mit dem Zeichensatz UTF-8 geschrieben haben. Ohne genauer auf Zeichensätze einzugehen, empfehlen wir, HTML-Dokumente immer in UTF-8 zu schreiben. Dies stellt man in seinem Editor unter „Einstellungen“ ein. Das meta-Element ist ein Standalone-Tag. Es besitzt keinen Inhalt und wird deshalb nur mit einem Tag beschrieben. Dieses Tag kann entweder wie ein einleitendes Tag (<...>) oder wie eine Kombination aus einleitendem und schließendem Tag (<.../>) geschrieben werden. Zur besseren Unterscheidung empfehlen wir letzteres. Das meta-Element besitzt verschiedene Eigenschaften. „charset“ ist eine Eigenschaft des meta-Elements. Der Wert von chartset im obigen Beispiel in „utf-8“. Die meisten Elemente besitzen neben ihrem Inhalt Eigenschaften.

Mit dem title-Element geben wir unserem Dokument einem Titel. Der Titel wird an verschiedenen Stellen angezeigt. U.a. in der Titelleiste des Browserfensters, in der Titelleiste des Tabs und als Überschrift von Einträgen in Suchmaschinen.

Kommentare

Neben dem eigentlichen Code kann man Kommentare schreiben. Kommentare dienen dazu, Programme zu erklären. Sie helfen uns Menschen, Programme zu verstehen und zu verwenden. Computer, die Programme ausführen, ignorieren Kommentare. Es gibt zwei Möglichkeiten, Kommentare zu schreiben. Zeilen-Kommentare werden mit // eingeleitet und gelten immer bis zum Ende der Zeile. Block-Kommentare werden mit /* eingeleitet und mit */ beendet. Alles dazwischen in Kommentar. Hier ein paar Beispiele:

<script>

  // Das ist ein Zeilenkommentar.

  // Dieser Zeilenkommentar geht
  // über 2 Zeilen.

  /* Das ist ein Blockkommentar. */

  /* Dieser Blockkommentar geht
     über mehrere Zeilen. */

  /**
   * Auch dies ist ein Blockkommentar.
   * Die Sterne zwischen dem Beginn und
   * dem Ende des Bereichskommentars
   * dienen nur der Verzierung.
   * So sieht ein längerer Blockkommentar
   * übersichtlicher aus und sticht hervor.
   * Dies wird meist für allgemeine
   * Kommentare benutzt.
   */

</script>

Und so könnte unseres letztes Beispiel kommentiert werden:

<script>

  /**
   * Demonstration boolescher Werte.
   * Weise x und y verschiedene Werte zu
   * und schaue, was herauskommt.
   * Erstelle für &&, || und ! die
   * sogenannten Wahrheitstafeln.
   */
    
  // Aendere hier die Werte von x und y.
  var x = true;
  var y = false;

  alert(/* UND */ x && y); // ergibt false
  alert(/* ODER */ x || y); // ergibt true
  alert(/* NICHT */ !x); // ergibt false

</script>

Bereichs-Kommentare können auch im Codefluss stehen.

Datentypen und Operatoren

Daten werden in Programmiersprachen meist in Datentypen, z.B. Zahlen oder Zeichenketten, unterteilt. Damit ist es möglich, Daten zu verarbeiten. Mit Zahlen kann man rechnen, Zeichenketten kann man z.B. zusammensetzen. JavaScript kennt drei grundlegende Datentypen: Zeichenketten, Zahlen und Wahrheitswerte.

Zeichenketten

Zeichenketten haben wir schon kennengelernt: 'Hallo Welt!' ist eine Zeichenkette. Eine Zeichenkette nennt man auch String. Zeichenketten schreibt man in einfache oder doppelte Anführungszeichen. 'Hallo Welt!' ist dasselbe wie "Hallo Welt!". Zeichenketten kann man z.B. aneinanderhängen:

  <script>
    var name = prompt('Wie heisst Du?');
    var begruessung = "Hallo " + name + "!"; 
    alert(begruessung);
  </script>

Die Funktion ‚prompt‘ fragt den Benutzer nach einer Eingabe. Die Eingabe wird in der Variablen ’name‘ gespeichert. Anschließend wird der Inhalt dieser Variable mit zwei weiteren Zeichenketten verkünpft und ausgegeben. Das ‚+‘ wird auch Operator genannt.

Zahlen

Zahlen, auch Number genannt, schreibt man wie gewöhnliche Zahlen. Als Dezimalpunkt wird der Punkt verwendet. Mit Zahlen sind die üblichen mathematischen Operationen möglich:

  <script>

    var sekundenProTag = 24 * 60 * 60;
    alert('Ein Tag hat ' + sekundenProTag + ' Sekunden.');

    var x = 85.7;
    var y = 23.8;
    var z = 5.1;
    var ergebnis = (x + y) / z;
    alert('(' + x + ' + ' + y + ') / ' + z + ' = ' + ergebnis);

  </script>

Bei der ersten Rechnung werden drei Zahlen miteinander multipliziert. Das Ergebnis wird in einer Variablen gespeichert und ausgegeben. Etwas verwunderlich sind die beiden ‚Additionen‘ in der Ausgabe. Hier werden Zeichenketten mit Zahlen ‚addiert‘. Das funktioniert nur, weil JavaScript eine impliziete Typkonvertierung vornimmt. Verknüpft man eine Zahl mit einem String, so wir die Zahl zunächst in einen String umgewandelt. Anschließend werden die beiden Strings verknüpft. Der Wert der Variablen ’sekundenProTag‘ ist die Zahl 86400. Diese wird bei der Ausgabe in den String '86400' umgewandelt. Dann werden die drei Strings 'Ein Tag hat ', '86400' und ' Sekunden.' aneinander gehängt.
Bei der zweiten Rechnung werden 2 Zahlen addiert und die Summe dann durch eine dritte Zahl geteilt. Wie üblich gilt Punkt vor Strich-Rechnung. Möchte man zuerst Addieren und anschließend dividieren muss man Klammern benutzen.

Wahrheitswerte

Wahrheitswerte, auch boolesche Werte genannt, kennen nur zwei Werte: ‚true‘ oder ‚false‘. Mit booleschen Werten kann man ähnlich ‚rechnen‘ wie mit Zahlen. Die drei wichtigsten Operatoren sind && (und), || (oder) sowie ! (nicht). Finde selbst heraus, wie diese Operatoren funktionieren. Dazu definierst du zwei boolesche Variablen und verknüpfst sie mit den Operatoren. Hier ein paar Beispiele:

  <script>

    var x = true;
    var y = false;
    alert(x && y);
    alert(x || y);
    alert(!x);

  </script>

Mit booleschen Werten kann man vor allen den Programmablauf steuern. Dazu später mehr. Der Name ‚boolescher Wert‘ geht auf George Boole, dem Begründer der modernen mathematischen Logik, zurück.

Variablen

Programme verarbeiten Daten. Und Daten werden in Variablen gespeichert. Fügen wir in unser ‚Hallo Welt!‘ – Programm eine Variable ein:

  <script>
    var ausgabe = 'Hallo Welt!'; 
    alert(ausgabe);
  </script>

In der Variablen ‚ausgabe‘ wird der Wert ‚Hallo Welt!‘ gespeichert. Mit der Funktion ‚alert‘ wird der Inhalt der Variablen ‚ausgabe‘ ausgegeben. Variablen werden in JavaScript mit dem Schlüsselwort ‚var‘ angelegt. Mit dem Gleichheitszeichen wird einer Variablen ein Wert zugewiesen.
Variablen kann man jederzeit einen neuen Wert zuweisen:

  <script>
    var ausgabe = 'Hallo Welt!';
    alert(ausgabe);
    ausgabe = "Auf Wiedersehen!";
    alert(ausgabe);
  </script>

Verwendet man eine Variable zum zweiten Mal, so lässt man das Schlüsselwort ‚var‘ weg. Sie muss nur einmal angelegt werden.
Man kann eine Variable auch ohne Wertzuweisung anlegen. Dann ist sie ‚undefined‘:

  <script>
    var ausgabe;  
    alert(ausgabe);
  </script>

Übrigends: Programmzeilen in JavaScript sollte man mit einem Semikolon beenden. Dies ist nicht zwingend erforderlich. Es ist jedoch guter Stil, es immer zu tun. Dadurch vermeidet man seltene, aber schwer zu findende Fehler.

Hallo JavaScript!

Lernt man eine neue Programmiersprache, so gibt man am besten als erstes ‚Hallo Welt!‘ aus. Das möchten wir jetzt mit der JavaScript, der Programmiersprache des Web, machen. JavaScript läuft in jedem Browser. Wir brauchen dazu eine Textdatei, einen Editor, mit dem wir den Text in die Datei schreiben und einen Browser, mit dem wir die Datei öffnen. Hast du einen Windows-Rechner benutzt du zum Schreiben deines ersten Programms am besten ’notepad‘, auf einem Apple ‚TextEdit‘ und unter Linux ‚gedit‘. Du öffnest den Editor, legst ein neues Dokument an und schreibst folgenden Code:

  <script>
    alert('Hallo Welt!');
  </script>

Nun speicherst du die Datei unter dem Namen ‚index.html‘ in einem Ordner deiner Wahl. Klickst du in diesem Ordner doppelt auf die Datei, so öffnet sich dein Browser und begrüßt dich mit ‚Hallo Welt!‘.
Du hast dein erstes JavaScript-Programm geschrieben.

Die Programmierwerkstatt

Herzlich willkommen in der Programmierwerkstatt! Die Werkstatt dient der Begleitung eines Programmierkurses an der Gesamtschule Bremen Mitte (GSM). Die Werkstatt wendet sich auch an alle, die Programmieren lernen möchten.

Im Mittelpunkt der Werkstatt steht die Programmiersprache JavaScript und das Web, also HTML und CSS. Später kommen wir vielleicht auch zu PHP. Du wirst lernen mit Variablen, Bedingungen, Schleifen, Funktionen und Objekte umzugehen; du wirst Anwendungen programmieren und Webseiten erstellen.

Man lernt am besten, wenn man was macht. Hier soll eine kleine Webanwendung, ein Vokabeltrainer, erstellt werden.

Über Kommentare freue ich mich. Direkt hier im Blog oder per Mail.