3. Interaktion mit dem Server

Bis jetzt waren alle unsere Seiten statisch. Das heißt, wir haben HTML und CSS nur verwendet, um Texte und Inhalte zu formatieren. Wir haben HTML also im Prinzip wie Latex verwendet. Auch haben wir bis jetzt keinen Web-Server benötigt. Ab jetzt wird das aber nicht mehr ausreichen, denn

  1. normalerweise liegen die HTML-Seiten, die wir anschauen wollen, nicht auf unserem Rechner selbst, sondern "irgendwo im Web";
  2. wir wollen nicht nur Seiten anschauen, sondern interagieren: wir wollen suchen, übersetzen, E-Mails verschicken, Inhalte posten, Sachen kaufen, etc.

Für Punkt 1 benötigen wir einen Webserver (auch HTTP-Server genannt). Der kann auch lokal auf Ihrem Rechner laufen. Damit wir echte "Web-Experience" haben, habe ich auf AWS (Amazon Web Services) einen virtuellen Rechner eingerichtet, auf dem zur Zeit mehrere Webserver laufen.

Für Punkt 2 (und auch für Punkt 1) müssen Sie eine weitere Sprache lernen: Javascript. Zwar kann man den HTTP-Server in jeder beliebigen Sprache schreiben, wir tun es aber der Einfachheit halber in Javascript, weil Sie das für interaktive Webseiten sowieso brauchen werden.

3.1 Aufwärmübungen

Übung

Stellen Sie sicher, dass Sie Node.js installiert haben. Das sollte im Rechnerraum bereits der Fall sein. Falls Sie es auf Ihrem Rechner installieren sollen, geben Sie ein: 

    npm install --global http-server
Übung

Erstellen Sie eine HTML-Seite example.html, füllen Sie diese mit etwas HTML (ein kurzer Satz reicht, aber fügen Sie irgendwelche HTML-Formatierungsbefehle ein, wie <strong> oder <em>, damit man dann auch optisch erkennt, dass es HTML ist) und speichern Sie diese in einem Verzeichnis. Öffnen Sie eine Konsole, gehen Sie in dieses Verzeichnis und starten Sie den http-server auf Port 8080 mittels 

    http-server . -p 8080

Öffnen Sie nun einen Browser und geben folgenden URL ein:

localhost:8080/example.html

Schauen Sie nun zurück auf die Konsole, auf der http-server läuft und lesen Sie den Output.

Übung

Erstellen Sie eine Kopie von example.html und nennen diese example.txt. Der Inhalt soll aber genau der gleiche sein. Wiederholen Sie die vorherige Übung, geben Sie in Ihrem Browser aber localhost:8080/example.txt ein.