Blue Flower

 

  1. Grundlagen und erste Beispiele

Wir beginnen nun mit der Erstellung von Webseiten und der JavaScript-Programmierung. Dazu möchte ich Ihnen zu Beginn dieses Kapitels direkt ein paar einfache JavaScript-Beispiele vorstellen. Bevor wir uns dann jedoch in die Details einarbeiten und zuerst auf die konkrete Erstellung von Webseiten stürzen, schaffen wir uns in diesem Kapitel ein paar weitere Grundlagen, damit die nachfolgenden Schritte leichter verständlich werden. Es erleichtert viele Folgeschritte, wenn wir bei einigen Fachbegriffen von den gleichen Voraussetzungen ausgehen. Sie lernen in diesem Kapitel etwas über:

  • JavaScript mit ersten kleinen Skripten,
  • das Internet im Allgemeinen,
  • die Idee des Programmierens und die spezielle Situation beim Programmieren im Internet und
  • die Funktion eines Browsers.

1.1         Erste JavaScript-Beispiele

Sie wollen sicher JavaScript möglichst schnell in der Praxis erleben und sehen, was man damit machen kann. Was eignet sich besser als selbst ein paar kleine Beispiele einzugeben und auszuprobieren? Wir springen mit dieser Aufgabe direkt ins kalte Wasser. Dabei kalkuliere ich ein, dass Sie unter Umständen nicht so genau nachvollziehen können, was hier getan wird. Das klärt sich im Laufe des Buchs. Geben Sie nur den Quelltext exakt wie vorgegeben ein (mit Beachtung der Groß- und Kleinschreibung, Klammern, Semikolon, etc.). Wichtig ist hier, dass Sie den Umgang mit einem Editor und der grundsätzlichen Erstellung von Quelltext sowie einem Browser üben und dabei erste Effekte sehen, die auf JavaScript beruhen.

1.1.1      Ein einfaches Mitteilungsfenster

Geben Sie den nachfolgenden Quelltext in einem Editor ein und nennen Sie die Datei kap2_1.html. Nun möchte ich bereits den ersten einfachen Beispielen einen Weg gehen, der bei umfangreicheren Beispielen unabdingbar wird. Wir wollen mit einer Projektstruktur arbeiten, was erst einmal hauptsächlich die Strukturierung in Verzeichnissen bedeutet. Dazu möchte ich Ihnen den Einsatz von einer IDE anhand von Aptana (unserer Referenz-IDE) erklären[1]. Wenn Sie also mit Aptana arbeiten, verwendet diese IDE einen sogenannten Workspace. Das ist ein verwaltetes Verzeichnis, in dem Sie alle Projektverzeichnisse speichern. Innerhalb des Workspace erzeugen Sie in Aptana ein neues Web-Projekt mit Namen kap2 (File -> New -> Web Project).

Wählen Sie die Vorgabevorlage für das Projekt aus und vergeben Sie im folgenden Dialog den Projektnamen. Erzeugen wir in dem Projekt nun eine Datei kap2_1.html. Das geht am besten mit File -> New From Template -> HTML. Für unsere Zwecke genügt dann eine Webseite nach dem HTML4-Standard.

Da Aptana einen eigenen Webserver mitbringt, können Sie das Web-Projekt an einer beliebigen Stelle speichern, solange es unter der Verwaltung von Aptana bekannt ist.

Sie müssen nun natürlich nicht den Workspace von Aptana oder überhaupt die Projektverwaltung von Aptana verwenden, sondern Sie können auch eine andere Basisstruktur wählen. Gerade wenn Sie - wie im letzten Kapitel beschrieben - einen Webserver zur Verfügung haben und diesen verwenden wollen. In dem Fall speichern Sie diese Datei (und auch alle anderen Beispieldateien in diesem Buch) in dem Verzeichnis, das über Ihren Webserver freigegeben ist. Im Fall einer XAMPP-Installation ist dies das Verzeichnis htdocs. Legen Sie dort am besten ein Unterverzeichnis mit Namen kap2 an. Dort hinein soll diese Datei gespeichert werden.

CHV_BOX_ID_02
icn002 HinweisDie Beispieldateien der nächsten Kapitel sollten dementsprechend in analogen Unterverzeichnissen auf dem Webserver oder dem Workspace von Aptana abgelegt werden. Sie können auch den Workspace von Aptana so konfigurieren, dass das htdocs-Verzeichnis von Apache das Workspace-Verzeichnis darstellt.  

Doch kommen wir nun zum Quelltext. Dies soll der Inhalt der Quelltextdatei kap2_1.html sein:

Listing 1.1       Das erste JavaScript-Beispiel

<html>

<body>

<script>

alert("Hallo Welt");

</script>

</body>

</html>

In den Zeilen 3 bis 5 der Webseite finden Sie einen stark vereinfachten Skript-Container und die eigentliche JavaScript-Anweisung steht in der vierten Zeile. Rufen Sie die Datei mit Ihrem Standardbrowser über den Webserver auf. Wenn der Webserver auf den gleichen Rechner läuft wie ihr Webbrowser, würde der Aufruf wie folgt lauten, wenn Sie sich an meine Empfehlung bezüglich der Wahl eines Verzeichnisses gehalten haben:

http://localhost/kap2/kap2_1.html

In Aptana können Sie die Datei auch direkt aus der IDE ausführen. Dazu müssen Sie die Datei bloß selektieren und im Menü den Befehl Run -> Run as... -> JavaScript Web Application aufrufen. Aptana startet dann seinen integrierten Webserver und stellt die Webseite darüber in dem zugeordneten Standardbrowser dar. Alternativ können Sie auch mit dem Kontextmenü arbeiten. Ihr Browser sollte in jedem Fall ein kleines Dialogfenster mit dem Text Hallo Welt anzeigen.

Troubleshooting

Sollte das Beispiel nicht funktionieren, überprüfen Sie zuerst Ihren Quelltext. Achten Sie vor allen Dingen auf Klammern, Hochkommata, Semikolon sowie Groß- und Kleinschreibung.

Stimmt der Quellcode exakt mit der Vorgabe überein und das Beispiel funktioniert dennoch nicht, wird eventuell JavaScript in Ihrem Browser deaktiviert sein. Dann müssen Sie JavaScript in den Einstellungen Ihres Browsers aktivieren. Wo das genau gemacht wird, ist von Browser zu Browser unterschiedlich. Mittelweile ist auch die Tendenz in Browsern zu beobachten, dass Anwender JavaScript gar nicht mehr direkt deaktivieren können. Von daher ist die potentielle Fehlerquelle auch nicht sonderlich wahrscheinlich. Aber eventuell haben Sie auch in Firefox das Add-on NoScript aktiviert. Dann müssen Sie ggf. die Ausführung für das Skript noch erlauben (das kann in der Regel individuell für jede geladene Datei ausgewählt werden - wenn Sie die Ausführung individuell zulassen, schwächen Sie Ihren allgemeinen Schutz des Browsers damit nicht).

Sollte nach Aktivierung der JavaScript-Unterstützung das Beispiel (scheinbar) immer noch nicht funktionieren, kann es daran liegen, dass das Dialogfenster geblockt wird. Auf Grund diverser Sicherheitsprobleme im WWW, verhindern einige (vor Allem neuere) Browser so genannte aktive Inhalte. Sollten Sie eine entsprechende Warnung bekommen, müssen Sie zur Ausführung von dem Beispiel die aktiven Inhalte für dieses Beispiel zulassen

CHV_BOX_ID_04
icn004 HintergrundinformationDer Zugriff über http://localhost wird in der Regel (bei den meisten Browsereinstellungen) als sicher angesehen, der Zugriff über das file-Protokoll hingegen oft nicht. Wenn Sie die Sicherheitseinstellungen Ihres Browsers nicht schwächen wollen, Sie die ständigen Warnmeldungen aber nerven, haben Sie hier ein Argument mehr, warum Sie auch bei einem lokalen Laden einer Webseite den Zugriffsweg über den Webserver wählen sollten.  

1.1.2      Schreiben eines angepassten Aktualisierungsdatums

Spielen wir ein weiteres Beispiel durch, in dem das Aktualisierungsdatum der Webseite dynamisch mit JavaScript geschrieben wird. Geben Sie den nachfolgenden Quelltext in einem Editor ein (wieder ohne die vorangestellten Zahlen):

Listing 1.2       Das zweite JavaScript-Beispiel

<html>

<body>

Die Webseite wurde zuletzt am

<script>

document.write(new Date());

</script>

aktualisiert.

</body>

</html>

Speichern Sie die Datei unter dem Namen kap2_2.html. In den Zeilen 4 bis 6 finden Sie wieder einen Skript-Container und die eigentliche JavaScript-Anweisung steht in der fünften Zeile. Beachten Sie, dass vor dem Skript-Container  als auch danach reiner Text steht, der nicht zum Skript zählt. Hier sind wir noch in der HTML-Welt. Öffnen Sie die Datei in Ihrem Standardbrowser, um zu sehen was der Quellcode bewirkt. Im Anzeigebereich des Browsers sollte ein Text zu sehen sein, der aus den statischen Textpassagen und einer dynamisch per JavaScript generierten Information (dem Tagesdatum mit einer Genauigkeit von dem Bruchteil einer Sekunde) besteht.

1.1.3      Entgegennahme einer Benutzereingabe

Geben Sie für ein abschließendes Einstiegsbeispiel den nachfolgenden Quelltext in einem Editor ein und speichern Sie diesen unter dem Namen kap2_3.html:

Listing 1.3       Entgegennahme einer Benutzereingabe

<html>

<body>

Das ist die Webseite von

<script>

document.write(prompt("Ihr Name"));

</script>

.

</body>

</html>

In den Zeilen 4 bis 6 finden Sie wieder den Skript-Container und die eigentliche JavaScript-Anweisung steht in der fünften Zeile. Auch in diesem Beispiel steht vor dem Skript-Container als auch danach reiner Text, der nicht zum Skript zählt. Beim Öffnen der Datei in einem Browser sollten Sie ein kleines Eingabefenster angezeigt bekommen, in dem Sie Ihren Namen eingeben sollen.

Im Anzeigebereich des Browsers werden Sie nach der Eingabe eines Namens und der Bestätigung des Dialogs einen Text sehen, der aus den statischen Textpassagen und der Eingabe durch den Anwender besteht.