VI. JavaScript

Einsatzmöglichkeiten
Probleme
Digitaluhr
Persönlicher Counter
JavaScript-Sammlungen

Einsatzmöglichkeiten

Mit JavaScript werden HTML-Dokumente dynamisch. Damit meine ich, daß in einer Page kleine Programme ablaufen, die die Page selbst oder auch andere Seiten verändern können. So ist es z.B. möglich, die Pages auf den jeweiligen Browser anzupassen, Eingaben zu überprüfen, Laufschriften zu erzeugen, bei einem "Klick" mehrere Aktionen auszuführen usw. Seit JavaScript gibt auch die nicht unumstrittenen Cookies, die eine Information auf Deinem Rechner ablegen können. Mit Hilfe eines Cookies kann man z.B. eine WWW-Site auf den Benutzer anpassen: Du gibst einmal an "diese Site ohne Frames laden", und jedesmal, wenn Du wieder auf diese Site kommst, wird nachgeschaut, ob dieses Cookie existiert. Falls ja, geht's zur No-Frame-Page, ansonsten zur Seite mit Frames.
Meine Meinung zur allgemeinen Panikmache bei Cookies: Cookies werden schwer überbewertet, weil man mittels CGI auf dem Server oder eben auch JavaScript sowieso ein ganze Menge über Dich rausbekommen kann - damit lassen sich zum Beispiel wesentlich zuverlässigere Userprofile erstellen als mit Cookies, die Du ja wieder löschen kannst.

Probleme

JavaScript gibt es erst seit dem Netscape Navigator 2.0 und ältere Browser können damit nichts anfangen - das Script wird nicht ausgeführt. Damit kann's also passieren, daß manche Pages nicht mehr richtig funktionieren. Daher sollte man beim Einsatz von Scripts immer darauf achten, daß zumindest das Wichtigste in dieser Page auch ohne Script zu sehen ist!
Ein weiteres Problem von JavaScript ist (noch) die relativ freizügige Sprachsyntax. Die verschiedenen Browser nehmen's damit unterschiedlich streng, und so kann's (wieder mal) sein, daß das Script auf'm Navigator läuft und woanders einen Fehler verursacht. Auch reagieren die verschiedenen Browser auf einen Befehl nicht immer gleich, deshalb: Immer mit allen üblichen Browsern testen!

Tadaaaaa, gleich ein Problem (Danke an Gent für den Tip!!):
Der Navigator 2.0 (ist jetzt mein 5ter Browser zum Testen auf meiner Platte <g>) hat Probleme mit Scripts in Tabellen, sprich er führt sie mehrmals aus (...sehr sehr seltsam). Ab 3.0 ist der Bug behoben. Entweder läßt man die Scripts also nicht in Tabellen laufen, oder man merkt sich mit einer globalen Variable, wie oft das Script schon ausgeführt wurde.
Nächster Bug: Auf Macs scheinen die Umwandlungen zwischen Strings und Zahlen (z.B. das ParseInt) Probleme zu machen - wie, wo und warum weiß ich noch nicht.

Digitaluhr

Natürlich kann mit JavaScript auch Grafiken in's Dokument einbinden. Ein Beispiel dafür ist eine Digitaluhr. Dazu nehmen wir einfach die aktuelle Zeit, zerlegen diese Zeichenkette (da sollten dann nur Ziffern drinstehen) und hängen die Ziffer einfach an den Namen der entsprechenden Grafik. Dann schreiben wir einen Verweis auf diese Grafik in die Page - und das war's!

Das Script fügst Du mit dem Text-Editor in Deine Page ein, nicht einfach im HTML-Editor! Der wandelt nämlich die Steuerzeichen <> in ASCII-Codes um, so daß das Script dann ein normaler Text ist.
Tip: Um im Text-Editor die richtige Stelle zu finden, schreib vorher im HTML-Editor eine Zeile wie "Script hierher!" rein. Dann sollte irgendwo im Text etwas wie <p>Script hierher!</p> stehen und Du weißt, wo Du das Script einfügen mußt.

(Anmerkungen sind grün, was reinkommen muß ist blau)

<script language="JavaScript"><!-- // Digital-Zeiteisen
var date = new Date();

// Die Zeit als Zeichenketten holen
var Stunde = "" + date.getHours();
var Minute = "" + date.getMinutes();
while (Stunde.length < 2) // Falls nötig, vorne mit Nullen füllen
 Stunde = "0" + Stunde; 
while (Minute.length < 2)
 Minute = "0" + Minute;

// Jetzt die Namen der Grafiken angeben
var ImgHeader ='<img src="images/dig'; // Das kommt vor die Ziffer
var ImgFooter ='.gif" height="21" width="16" border="0" hspace="0">'; // Das kommt dahinter
var ImgTag = ""; // Da kommen die gesamten Tags rein

// Die HTML-Tags für die Stunde
for (i = 0; i < Stunde.length; i++)
 ImgTag += ImgHeader + Stunde.substring (i, i+1) + ImgFooter;
// Der Doppelpunkt
ImgTag += ImgHeader + 'dp.gif" height="21" width="9" border="0" hspace="0">';
// Die HTML-Tags für die Minuten
for (i = 0; i < Minute.length; i++)
 ImgTag += ImgHeader + Minute.substring (i, i+1) + ImgFooter;

// Und jetzt in das Dokument schreiben
document.write(ImgTag);
// --></script>

Dieses Skript ist noch nicht schlau genug, die Zeit selbständig zu aktualisieren, dann wird's nämlich ziemlich aufwendig. Es soll ja auch nur ein Beispiel sein, wie man Grafiken einbindet. Wenn Du das Skript ein wenig veränderst, kannst Du z.B. auch je nach Tageszeit ein anderes Bild anzeigen.
Der blinkende Doppelpunkt ist übrigens ein animiertes GIF.

Persönlicher Counter

Mit Hilfe von JavaScript und Cookies kann man einen persönlichen Besuchs-Counter basteln. Dazu legt man ein Cookie bei dem Besucher ab, das jedesmal um eins hochgezählt wird.
Zuerst mußt Du oben im Page-Kopf die Cookie-Funktionen einbauen - ich erkläre jetzt nicht, wie die im Einzelnen funktionieren (Hauptsache, sie tun's <g>) - kopiere einfach den ganzen (blauen) Block und füg's mit'm Text-Editor in Deine Page ein.

(Anmerkungen sind grün, was reinkommen muß ist blau)

<html>
<head>
<title>Meine Homepage</title>
Füge die ganzen Cookie-Funktionen unter dem <head>-Tag ein

<script language="JavaScript"><!-- // Cookie-Funktionen

function getCookieVal (offset)
 {
 var endstr = document.cookie.indexOf (";", offset);
 if (endstr == -1)
  endstr = document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
 }

function GetCookie (name)
 {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen)
  {
  var j = i + alen;
  if (document.cookie.substring(i, j) == arg)
   return getCookieVal (j);
  i = document.cookie.indexOf(" ", i) + 1;
  if (i == 0)
   break;
  }
 return null;
}

function SetCookie (name, value)
 {
 var argv = SetCookie.arguments;
 var argc = SetCookie.arguments.length;
 var expires = (2 < argc) ? argv[2] : null;
 var path = (3 < argc) ? argv[3] : null;
 var domain = (4 < argc) ? argv[4] : null;
 var secure = (5 < argc) ? argv[5] : false;
 document.cookie = name + "=" + escape (value) +
     ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
     ((path == null) ? "" : ("; path=" + path)) +
     ((domain == null) ? "" : ("; domain=" + domain)) +
     ((secure == true) ? "; secure" : "");
 }
// --></script>

</head> Ab hier geht's wieder normal weiter...
.
.

Jetzt kommt irgendwo in der Page (wo Du's halt haben willst :-)) das JavaScript rein, das die Besuche zählt und dann in die Page schreibt.

<script language="JavaScript"> <!-- // Persönlicher Counter
var expdate = new Date();
var visits;

// Cookies haben ein "Verfallsdatum", hier ist's ein Jahr
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));

// Das Counter-Cookie lesen
if(!(visits = parseInt(GetCookie("Visits"))))
 visits = 0; // Falls es nicht existiert, auf 0 setzen
visits++; // Eins hochzählen
// Das Cookie wieder setzen
SetCookie("Visits", visits, expdate, "/", null, false);

// Hier wird die Meldung in's Dokument geschrieben
document.write("Du hast meine Homepage schon "+visits+" mal besucht!");

// --></script>

JavaScript-Sammlungen

Eine sehr umfangreiche JavaScript-Sammlung gibt's auf dem JavaScript Planet und Links auf JavaScript-Sites auch bei Gamelan.
Wer was über JavaScript lernen will, der schaue sich mal Self-JavaScript von Stefan Münz (in deutsch) oder die Introduction to JavaScript von Stefan Koch (warum heißen die alle Stefan??!!) an. Die offizielle Site dazu gibt's bei Netscape und alles rund um JavaScript bei Kakao & Keksen!