2.1
Erste JavaScript-Beispiele
Ohne lange Vorrede sollen einige kleine Beispielen folgen.
Dabei wird das Paradebeispiel am Beginn stehen, was in jeder Programmiertechnik
seit Urzeiten als erstes Exempel durchgespielt wird – ein »Hello World«-Programm bzw. Script.
|
Die nachfolgenden Beispiele können Sie in jedem |
<HTML>
<BODY>
<script
language="JavaScript">
<!–
alert("Hello World");
//–>
</script>
</BODY>
</HTML>
Listing 2.1: Das Listing für das klassische »Hello
World« in JavaScript
Wenn Sie das Script in einen JavaScript-fähigen Browser
laden, werden Sie von einem Dialogfenster mit dem Text "Hello World"
begrüßt.
Das zweite Beispiel ist eine kleine Demonstration dessen,
was als personalisierte bzw. dynamische Webseiten gilt. So etwas ist in komplexerer Form eines der Haupteinsatzgebiete von Scripten. Es werden dabei
beim Generieren einer Webseite Informationen verwendet, die beim Erstellen der
Webseite noch nicht vorhanden sind und durch Techniken wie JavaScript erst beim
Laden der Seite ermittelt und in die Webseite eingebaut werden. Im
nachfolgenden Listing wird einfach das Systemdatum des Besuchers der Webseite
abgefragt und in die Webseite mit aufgenommen.
<HTML>
<BODY>
<h1>Sag mir quando, sag mir wann</h1>
<h3>
<script
language="JavaScript">
<!–
document.write(new Date());
//–>
</script></h3>
</BODY>
</HTML>
Listing 2.2: Dynamische Informationen werden in
der Webseite verwendet
Wenn Sie die Datei mit dem Script in einen
JavaScript-fähigen Browser laden, werden Sie in der Webseite eine Mischung aus
statischen HTML-Informationen und mit JavaScript erzeugten dynamischen
Informationen (das jeweilige Systemdatum des Besuchers) angezeigt bekommen.
Auch das dritte Beispiel demonstriert Grundlagen von
personalisierten Webseiten. Beim Laden der Webseite wird ein Besucher über ein
Eingabefenster nach seinem Namen gefragt. Dieser Name wird dann als Text in der
Webseite verwendet. Beachten Sie die Verwendung von einer Variablen, die den
Namen aufnimmt. Ebenso sollte schon einmal beachtet werden, dass in dem Script
vorgegebene Texte (mit HTML-Tags inklusive) mit dem Wert einer Variablen
zusammengesetzt und dann ausgegeben werden.
<HTML>
<BODY>
<center>
<h1>Herzlich Willkommen auf meiner
Homepage</h1>
<script language="JavaScript">
<!–
var name =
prompt("Bitte geben Sie Ihren Namen
ein","");
document.write("<h3>Ich begrüsse Sie –
liebe(r) "
+ name +
" zu dem auf Ihre Bedürfnisse zugeschnittenen
" +
"Angebot</h3>");
//–>
</script>
</center>
</BODY>
</HTML>
Listing 2.3: Die Verwendung von dynamischen Informationen in einer Webseite zusammen mit vorgegebenen Passagen
Wenn Sie die Datei in einen JavaScript-fähigen Browser
laden, werden Sie wie beim letzten Beispiel in der Webseite eine Mischung aus
statischen HTML-Informationen und mit JavaScript erzeugten dynamischen
Informationen angezeigt bekommen. Allerdings müssen Sie beim Laden der Webseite
ein Dialogfeld ausfüllen (ein Teil der Webseite ist bereits vorher sichtbar).
Nachdem Sie dort einen Namen eingegeben und das Dialogfenster mit Ok
verlassen haben, wird der Rest der Webseite aufgebaut.
|
Wenn Sie das Dialogfenster mit Cancel |
Das letzte Beispiel im Einstiegskapitel zeigt, wie man mit
JavaScript den Browser eines Besuchers samt dessen Versionsnummer abfragen
kann.
<HTML>
<BODY>
<center>
<script
language="JavaScript">
<!–
document.write("Sie verwenden folgenden Browser:
" +
navigator.appName + " " +
navigator.appVersion);
//–>
</script>
</center>
</BODY>
</HTML>
Listing 2.4: Die Abfrage des Browsers
Wenn Sie die Datei in verschiedene Browser laden, werden Sie
in der Webseite das sehen, was der Browser bzgl. seines Typs und der Version
von sich gibt.