Benutzer-Passwort

Gepflegte Meckereien im

JavaScript - Ein Tutorial

JavaScript-Tutorial von Daniel Schwamm (03.11.2000)

Aus "Heimat des Dilettantismus"
http://www.daniel-schwamm.de/index.php?pg=web-tutorials/javascript

Inhalt

1. HTML und JavaScript - eine coole Kombination

Auch wenn es bisweilen kühn behauptet wird, ist HTML keine Programmiersprache, sondern nur eine ... nun ja, Datenformatierungssprache. HTML erlaubt es aber, diverse Erweiterungen einzubinden, u.a. auch JavaScript, welches eine echte Programmiersprache ist. Und nebenbei den grossen Vorteil besitzt, in Klartext im HTML-Dokument eingebettet zu sein. Dadurch kann man sich leicht den Code abgreifen, den man so zum Leben braucht. Ein paar kleine Beispiele will ich im Folgenden ausführen.

2. JavaScript am Beispiel

2.1. Beispiel I: "Hello, world!"-Programm

Man nehme einen x-beliebigen ASCII-Editor, z.B. Notepad in Windows, und tippe Folgendes ein:

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011

<html>
<body>
  <H1>JavaScript-Tutorial Teil 1</H1>
  <H2>Ausgabe von 'Hello, world' mit JavaScript-Befehl 'writeln'</H2>
  <hr>

  <script language='javascript' type='text/javascript'>
   document.writeln('Hello world');
  </script>
</body>
</html>

Man speichere dies als "jskurs1.html" und betrachte sich das Ergebnis z.B. mit Netscape.

(=> jskurs1.html)

2.2. Beispiel II: Datum des Quellcodes ausgeben

Okay, okay, das wäre auch einfacher gegangen (siehe mein HTML-Kurs auf dieser Homepage, Beispiel 1). Doch schon das folgende Beispiel ist mit HTML pur nicht mehr möglich: Die Einbindung des aktuellen Datums in das Dokument, und zwar zentriert und mit einer Fünfer-Schrift. Let us take a look!

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013

<html>
<body>
  <H1>JavaScript-Tutorial Teil 2</H1>
  <H2>'Hello, world'- und Datum-Ausgabe per JavaScript</H2>
  <hr>

  <script language='javascript' type='text/javascript'>
   document.writeln('Hello, world<br>');
   d=new Date();
   document.writeln('Aktuelles Datum: '+d);
  </script>
</body>
</html>

(jskurs2.html)

2.3. Beispiel III: dynamisch änderbare Hintergrundfarbe

Schön, oder? Nur der weisse Hintergrund ist öde. Und etwas normales HTML wollen wir auch noch programmieren. Verbannen wir daher zuerst den JavaScript-Sourcecode in den Header. Dann machen wir den Text "ereignisempfangsfähig", indem wir ihn zu einer Dummy-Referenz auf sich selbst umstricken. Wenn nun mit der Maus über diese Referenz gefahren wird, ändert sich die Hintergrundfarbe in zufälliger Weise (funktioniert erst ab höheren Browser-Versionen). Und als Bonbon wird noch angezeigt, wann der HTML-Datei die letzte Änderung widerfahren ist. Wenn das kein Service ist ...

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040

<html>
<head>
  <script language='javascript' type='text/javascript'>
   function chgbgcolor(r,g,b){
    document.bgColor=r*256*256+g*256+b;
   }
   function setrandomcolor(){
    r=Math.random(255);g=Math.random(255);b=Math.random(255);
    chgbgcolor(r,g,b);
   }
   function prtdate(){
    d=new Date();
    document.writeln(
     '<a href=jskurs3.html onMouseOver=setrandomcolor()>'
    );
    document.writeln(d+'</a>');
   }
  </script>
</head>
<body onLoad='javascript:chgbgcolor(255,0,0)'>
  <center>
   <font size='4' color='#ffffff'>
    Aktuelle(s) Zeit/Datum ist:
    <script language='javascript' type='text/javascript'>
     prtdate();
    </script>

    <nt>

    Letzte Aenderung am Programm wurde vorgenommen am:
    <script language='javascript' type='text/javascript'>
     var d='';
     d=document.lastModified;
     document.writeln(d);
    </script>

   </font>
  </center>
</body>
</html>

(=> jskurs3.html)

2.4. Beispiel IV: scrollende Texte

Nun ja, kommen wir zu etwas ganz anderem: zu den allseits beliebten, aber ziemlich nervigen Scrollern. Im Folgenden haben wir gleich zwei davon - einmal in einer eigenen Form und einmal in der Browser-Statusbar. Und das soll es dann auch schon wieder gewesen sein ...

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033

<html>
<head>
  <script language='javascript' type='text/javascript'>
   var id,pause=0,position=0;
   function scrollit(){
    var i,k;
    var msg='*** Scroll, scroll, scroll *** '+
      'Scroll munter herum *** HURZ!!! ';
    k=(191/msg.length)+1;
    for(i=0;i<=k;i++)
      msg+=' '+msg;
    document.scrollform.scroller.value=
      msg.substring(position,position+100);
    window.status=msg.substring(position,position+100);
    if(position++==191)
      position=0;
    id=setTimeout('scrollit()',191);
   }
  </script>
</head>

<body onLoad='javascript:scrollit()'>
  <H1>JavaScript-Tutorial Teil 4</H1>
  <H2>Scrollen im Input-Feld und in der Browser-Statuszeile per JavaScript</H2>
  <hr>

  <center>
   <form action='' name='scrollform' method='get'>
    <input type='text' name='scroller' size='70'>
   </form>
  </center>
</body>
</html>

(=> jskurs4.html)

2.5. Beispiel V: dynamischer Bilderaustausch

Nein, die Dinger kann ich nicht leiden. Darum wenden wir uns nun etwas zu, mit dem man relativ leicht Eindruck schinden kann: interaktive Grafiken. Und zwar soll im Folgenden die hübsche Daisy Duck durch die noch hübschere Heather Locklear ersetzt werden, sowie man mit der (Micky) Maus darüber fährt. Weil ältere Browser Fehlermeldungen bei solcherart Hightech produzieren, wird zuvor die Browser-Version ermittelt; erst ab Versionen 3.0 wird reagiert. And here is the code:

<html>
<head>
  <script language='javascript' type='text/javascript'>
   browserVer=parseInt(navigator.appVersion);
   if(browserVer>=3)
    version='n3';
   else
    version='n2';
   if(version=='n3'){
    p1an=new Image(200,170);
    p1an.src='daisy.jpg';
    p1aus=new Image(200,170);
    p1aus.src='heather.jpg';
   }
   function pan(pn){
    if(version=='n3'){
     pican=eval(pn+'an.src');
     document[pn].src=pican;
    }
   }
   function paus(pn){
    if(version=='n3'){
     picaus=eval(pn+'aus.src');
     document[pn].src=picaus;
    }
   }
  </script>
</head>
<body>
  <H1>JavaScript-Tutorial Teil 5</H1>
  <H2>Bildwechsel bei 'OnMouseOver'-Ereignis per JavaScript</H2>
  <hr>

  <center>
   <a href='jskurs5.html' onMouseOver='paus('p1')' onMouseOut='pan('p1')'>
    <img src='daisy.jpg' alt='daisy' name='p1' border='0'>
   </a>
  </center>
</body>
</html>

(=> jskurs5.html)

2.6. Beispiel VI: Benutzereingaben-Überprüfung

Gut, bisher war es nur Spielerei. Aber JavaScript taugt auch zu sinnvolleren Anwendungen, z.B. zur User-Input-Validierung. Im folgenden Beispiel wird nur dann auf die Basisseite zurückgesprungen, wenn das Formular korrekt ausgefüllt wurde.

<html>
<head>
  <script language='javascript' type='text/javascript'>
   var errok=false;
   function isInt(theField){
    inStr=theField.value;
    inLen=inStr.length;
    for(var i=0;i<inLen;i++){
     var ch=inStr.substring(i,i+1)
     if(ch<'0' || '9'<ch) return false;
    }
    return true;
   }
    function isFieldBlank(theField) {
    if(theField.value=='') return true; else return false;
   }
   function submit_page(){
    errok=false;
     if(isFieldBlank(document.sf.kname)){
     alert('Namensfeld ist leer!');
     errok=true;
    }
    else if(isFieldBlank(document.sf.kid)){
     alert('Kundennummernfeld ist leer!');
     errok=true;
    }
    else if(!isInt(document.sf.kid)){
     alert('Eintrag im Kundennummernfeld ist falsch!');
     errok=true;
    }
    if(!errok){document.sf.submit();}
    return errok;
   }
  </script>
</head>
<body>
  <H1>JavaScript-Tutorial Teil 6</H1>
  <H2>Validierung von Eingaben in ein Formular per JavaScript</H2>
  <hr>

  <center>
   <form name='sf' action='index.php' method='get'>
    <strong>Name</strong> (darf nicht leer sein)<br>
    <input type='text' name='kname' SIZE=12><br>
    <strong>Kundennummer</strong>
     (darf nicht leer sein + muss Zahl sein)<br>
    <input type='text' name='kid' SIZE=7><br>
    <input type='button' value='Senden' onClick='submit_page()'>
   </form>
  </center>
</body>
</html>

Achtung: Ich war zu faul für eine Browser-Versionskontrolle. Bei älteren Browsern bewirkt der Klick auf den folgenden Link unter Umständen einen Rechnerabsturz!

(=> jskurs6.html)

2.7. Beispiel VII: Tabellen mit Farbverlauf

Das folgende Beispiel ist wieder mehr Fun. Beim Aufruf der Seite erfolgt zunächst eine Warnung, die es erlaubt, den Ladevorgang abzubrechen und zu einer alternativen Seite springen (beachte: top.location.href). Auf Basis eines Textes wird dann dynamisch eine kunterbunte Tabelle erstellt. Zu guter Letzt wird dem Besucher beim Verlassen der Webseite mitgeteilt, wie lange er sich auf derselben aufgehalten hat. Und all dies wird alleine auf Client-Seite (Webbrowser) realisiert. So verschafft man den Webservern etwas Luft.

<html>
<head>
  <script language='javascript' type='text/javascript'>
   var firstok=0,checkok=0;
   function raus(){
    d=new Date();
    zeitdif=(d.getTime()-enter.getTime())/1000;
    zeitdif=Math.round(zeitdif);
    if(checkok==1)
     alert('Sie waren hier fuer '+zeitdif+' Sekunden!');
   }
   function watchdog(){
    if(!confirm(
     'ACHTUNG! Diese Seite ist oede. Trotzdem weitermachen?'
    )){
     history.go(-1);
    }
    else
     checkok=1
    firstok=1;
   }
   if(firstok==0){
    enter=new Date();
    watchdog();
   }
  </script>
</head>
<body bgcolor=000000 onUnLoad='javascript:raus()' text=ff0000>
  <H1>JavaScript-Tutorial Teil 7</H1>
  <H2>Eingabe-Dialoge und automatisierter Tabellenaufbau mit Farbverlauf per JavaScript</H2>
  <hr>

  <center>
  <script language='javascript' type='text/javascript'>
  txt='Daniel Schwamm ist lieb';
  document.writeln('<table border=2 cellpadding=0 cellspacing=3 width=70%>');
  col=0;
  for(r=0;r<txt.length;r++){
   col=r*255*255;
   document.writeln('<tr>');
   for(c=0;c<txt.length;c++){
    document.writeln('<th bgcolor='+col+c+'>');
    if(txt.substring(c,c+1)==' ')
     document.writeln(' ');
    else
     document.writeln(substring(c,c+1));
    document.writeln('</th>');
   }
   document.writeln('</tr>');
  }
  document.writeln('</tr></table>');
  </script>
  </center>
</body>
</html>

(=> jskurs7.html)

2.8. Beispiel VIII: Kommunikation zwischen Frames

Frame-Kommunikation - das ist es, was nun betrachtet wird. Es geht darum, Informationen von einem Frame in den nächsten zu bringen. Der "Trick" hierbei ist das beiden Frames gemeinsame Superobjekt parent, welches als Container für alle anderen Objekte dient. Man achte auf eine konsequente Namensgebung der Objekte, damit sie über JavaScript nicht unnötig komplex mit Elementindizes angesprochen werden müssen. Demonstriert wird auch die Verwendung von "onMouseOver"-Ereignissen, Radio-Buttons, Select-Tabellen sowie das Öffnen von neuen, individuell konfigurierbaren Browserfenstern.

2.8.1. Frame-Container

Zuerst haben wir hier den Frame-Container-Code (jskurs8.html), welcher zwei Content-Frames wl und wl referenziert.

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010

<html>
<frameset cols='300,*'>
  <frame src='flinks.html' name='wl' scrolling='auto'>
  <frame src='frechts.html' name='wr' scrolling='auto'>
  <noframes>
   Sorry, die Nutzung dieser Seiten setzt einen
   FRAME-faehigen Browser voraus.
  </noframes>
</frameset>
</html>

2.8.2. Linker Content-Frame

Der linke Rahmen (=> flinks.html) ist folgendermassen aufgebaut:

<html>
<head>
  <script language='javascript' type='text/javascript'>
   function mktxt(){
    i=document.frm.frmselect.selectedIndex;
    s=document.frm.frmselect.options[i].text;
    i=i+1;
    s='Gewaehlt wurde Zeile <'+i+'> mit dem Text: '+s;
    parent.wr.settxt(s);
   }
   function mkreftxt(s){
    parent.wr.settxt(s);
   }
  </script>
</head>
<body bgcolor=#000000 text=#ff0000 link=#6060ff vlink=#6060a0>
  <center>
   <form name='frm' action='' method='get'>
    <br>Waehlen Sie eine Zeile!<br>
    <select name='frmselect' size=3 onChange='javascript:mktxt()'>
     <option>C++ ist gut</option>
     <option>Java ist besser</option>
     <option>Delphi ist am besten</option>
    </select>
    <br>
    Waehlen Sie eine URL fuer das neue Fenster!<br>
    <font size=2 color=#7070ff>
     <input type=radio name='url' checked>http://www.henrys.de
     <input type=radio name='url'>http://www.daniel-schwamm.de
     <input type=radio name='url'>http://www.uwe-melzer.de
    </font>
    <br>
    Hoehe und Breite des neuen Fensters in Pixeln!<br>
     <input type=text name='hoehe' size=4 value='230'>
     <input type=text name='breite' size=4 value='300'>
   </form>
   <br>Ziehen Sie  mit der Maus drueber!<br>
   <a href='' onMouseOver=javascript:mkreftxt('Hallo')>O</a>
   <a href='' onMouseOver=javascript:mkreftxt('wie')>n</a>
   <a href='' onMouseOver=javascript:mkreftxt('geht')>M</a>
   <a href='' onMouseOver=javascript:mkreftxt('es')>o</a>
   <a href='' onMouseOver=javascript:mkreftxt('denn')>u</a>
   <a href='' onMouseOver=javascript:mkreftxt('so?')>s</a>
   <a href='' onMouseOver=javascript:mkreftxt('Das')>e</a>
   <a href='' onMouseOver=javascript:mkreftxt('Leben')>O</a>
   <a href='' onMouseOver=javascript:mkreftxt('ist')>v</a>
   <a href='' onMouseOver=javascript:mkreftxt('schoen!')>e</a>
   <a href='' onMouseOver=javascript:mkreftxt('HURZ!!!!')>r</a>
  </center>
</body>
</html>

Die Funktion mktxt() zeigt, wie man den gewählten Eintrag einer SELECT-Tabelle erkennt, und wie man eine Funktion aufruft, die in einer anderen Webseite definiert ist. Dies ist aber nur möglich, weil beide Fenster ein gemeinsames Parent-Frame-Container-Fenster besitzen.

2.8.3. Rechter Content-Frame

Und nun sehen wir uns noch den Code des rechten Rahmens an: (=> frechts.html). Zu beachten: Diesmal rufen wir keine Funktion eines anderen Fensters auf, sondern greifen direkt auf die Objekte des anderen Fensters zu (u.a. über b=parent.wl.document.frm.breite.value, das liest sich ungefähr wie: "Weise der Variablen b denjenigen Wert zu, der im wl-Fenster innerhalb der frm-Form dem breite-Input-Objekt in dem value-Attribut zugewiesen wurde").

<html>
<head>
  <script language='javascript' type='text/javascript'>
   function settxt(s){
    document.frm.ta.value=s;
   }
   function neufenster(){
    b=parent.wl.document.frm.breite.value;
    h=parent.wl.document.frm.hoehe.value;
    if(parent.wl.document.frm.url[0].checked){
     s='Steigern, steigern, steigern';
     url='http://www.henrys.de';
    }
    else if(parent.wl.document.frm.url[1].checked){
     s='Kompliment. Ausgezeichnete Wahl. Schwamm for fun!';
     url='http://www.daniel-schwamm.de';
    }
    else{
     s='Nein, nicht zu meinem Chef, nicht zur Konkurrenz :-)';
     url='http://www.uwe-melzer.de';
    }
    settxt(s);
    args='width='+b+',height='+h+',resizeable=1,'+
     'scrollbars=1,toolbar=0,status=0,alwaysRaised=yes';
    window.open(url,'Titel',args);
   }
  </script>
</head>
<body bgcolor=#000000 text=#ff0000 link=#6060ff vlink=#6060a0>
  <center>
   <form name='frm' action='' method='get'>
    Beschreibung<br>
    <textarea name='ta' rows=10 cols=40>
     Beschreibungen
    </textarea>
   </form>
   <a href='javascript:neufenster()'>Neues Browserfenster</a>
  </center>
</body>
</html>

Achtung: Ich war zu faul für eine Browser-Versionskontrolle. Bei älteren Browsern bewirkt der Klick auf den folgenden Link unter Umständen einen Rechnerabsturz!

(=> jskurs8.html)

2.9. Mehr Beispiele

Weitere JavaScripts ohne Sourcecode-Beschreibung:

3. JavaScript - Nutzen und Missbrauch

JavaScript ist 'ne nette Geschichte. Leider wird es bisweilen auch derart missbraucht, dass beim Anklicken von Links oder Verlassen von Fenstern eine Unmenge neuer Browserfenster geöffnet wird, damit Kohle für Werbung reinkommt. Da muss man ab und zu schon JavaScript deaktivieren, um halbwegs vernünftig surfen zu können, nur um dann bei der nächsten wichtigen Funktion, die JavaScript benötigt, nicht weiter zu kommen. Aber wo Licht ist, ist halt auch Schatten ...