Kurzzusammenfassung einiger häufig benutzter JavaScript-Befehle

    + andere TechDocs
+ HTML
+ Java, Java-Plug-in
+


Inhalt

  1. Debugging und DOM Inspector
  2. Übliche Positionen für JavaScript-Funktionen und -Aufrufe im HTML-Dokument
  3. Variablen, Operatoren, Verzweigungen
  4. Event-Handler
  5. Links und Buttons
  6. 'onMouseOver' (OMO / Hover)
  7. Tooltip
  8. Objekt 'document'
  9. Objekt 'window'
  10. Optionen zu 'window.open()'
  11. Frames
  12. 'eval()'
  13. Beispiel: Bildschirmauflösung, Browser-Typ und JavaScript-Version
  14. Beispiel: String erfragen und überprüfen
  15. Beispiel: Formular mit Überprüfung
  16. Beispiel: Navigation per Auswahlliste
  17. Beispiel: Datum und Uhr
  18. Beispiel: Button mit Sound und Webseite ausdrucken
  19. Beispiel: Warnung vor Datenverlust bei Seitenwechsel
  20. Ajax (Asynchronous JavaScripting and XML)
  21. Weiterführende Informationen


Debugging und DOM Inspector

Wenn Sie Probleme bei der Ausführung der JavaScripts haben, sollten Sie Debugging-Hilfen einschalten. Um das DOM-Modell besser zu verstehen ist der DOM Inspector hilfreich.

Mozilla Firefox

Um im Mozilla Firefox JavaScript-Fehlermeldungen angezeigt zu bekommen, geben Sie als URL-Adresse ein: 'javascript:'. Alternativ können Sie auch wählen: 'Extras' | 'JavaScript-Konsole'.

Um im Firefox JavaScript zu debuggen, installieren Sie den Venkman JavaScript Debugger von: http://www.mozilla.org/projects/venkman/.

Um den Firefox DOM Inspector zu benutzen, müssen Sie Firefox nicht in der Installationsart 'Standard', sondern 'Benutzerdefiniert' installieren und bei 'Komponenten auswählen' die 'Developer Tools' aktivieren. Anschließend können Sie den DOM Inspector aufrufen über 'Extras' | 'DOM Inspector'.

Microsoft Internet Explorer

Im Microsoft Internet Explorer stellen Sie unter 'Extras' | 'Internetoptionen...' | 'Erweitert' | 'Browsing' ein:
'Skriptdebugging deaktivieren' ausschalten und
'Skriptfehler anzeigen' einschalten.

Wenn Sie nicht nur Fehler im JavaScript angezeigt bekommen wollen, sondern auch durch den JavaScript-Code durchsteppen wollen, sollten Sie zusätzlich zu obiger Einstellung den Microsoft Script Debugger for Windows scd10en.exe downloaden und installieren.



Übliche Positionen für JavaScript-Funktionen und -Aufrufe im HTML-Dokument

<html>
  <head>
    <script language="JavaScript"
            type="text/javascript"
            src="MeinJavaScript.js">
    </script>
    <script language="JavaScript"
            type="text/javascript">
    <!--
    function xy(p1,p2) {
      return p1*p2; }
    // -->
    </script>
    ...
  </head>
  <body>
    <a href="javascript:alert('Hallo!')">
       hier klicken</a>
    ...
  </body>
</html>
'<html>' Schließt das gesamte HTML-Dokument ein.
'<head>' Schließt den Header ein.
'<body>' Schließt den Hauptteil ein.
JavaScript-Programmteile können in einer separaten Datei ausgelagert sein (im Beispiel in 'MeinJavaScript.js'), dann muss in der Konfiguration des Web-Servers der Mime-Type 'text/javascript' für Dateien mit der Endung '.js´' eingetragen sein.
Eigendefinierte JavaScript-Funktionen (im Beispiel 'xy()') werden meistens im Header definiert, damit sichergestellt ist, das sie vollständig geladen sind, wenn sie benötigt werden.
JavaScript-Aufrufe erfolgen meistens im Hauptteil.


Variablen, Operatoren, Verzweigungen

var x = 2;
var s = "Text";
var b = true;
Variablen (Fließkomma 64 bit, Strings, Booleans).
var arr1 = new Array( "", "Januar", "Februar" );
var arr2 = new Array();
arr2[0] = "";
arr2[1] = "Januar";
arr2[2] = "Februar";
arr2.length;
arr2.sort();
arr2.sort( meineSortierfunktion );
Arrays ('arr1' und 'arr2' sind gleich).
'arr.length' gibt die Länge des Arrays an.
'arr.sort()' sortiert das Array (alphabetisch oder mit übergebener Sortierfunktion).
\', \", \\, \t, \n Sonderzeichen in Strings:
', ", \, Tabulator, Zeilenwechsel.
+, ++, -, --, *, /, % Arithmetische Operatoren.
&&, ||, !, ==, !=, <, <=, >, >= Logische Operatoren.
if( ... ) ... else ...;
for( ...; ...; ... ) ...;
while( ... ) ...;
Bedingte Verzweigungen, Schleifen.
In neueren Browsern wird auch 'do...while(...)' und 'switch(...)...' unterstützt.


Event-Handler

onLoad, onAbort, onBeforeUnload, onUnload, onError, onResize Laden (z.B. im '<body>'-Tag), Ladeabbruch, Dokument/Fenster wird geschlossen, JavaScript-Fehler, Fenstergrößenänderung.
onMove, onMouseOver, onMouseOut,
onMouseDown, onMouseUp
Mausbewegung, Maus-Cursor über Objekt, Maus-Cursor verlässt Objekt, Maustaste herunterdrücken, Maustaste loslassen.
onClick, onDbClick, onDragDrop Mausklick, Mausdoppelklick, Maus-Drag&Drop.
onKeyDown, onKeyPress, onKeyUp Taste herunterdrücken, Tastendruck, Taste loslassen.
onFocus, onBlur Fokus (z.B. für Hilfstext in Statuszeile),
Fokus weg (z.B. für Formularelemente-Überprüfung).
onSelect, onChange, onSubmit, onReset Auswahl von Text, Änderung, Formular abschicken, Formular zurücksetzen.


Links und Buttons

<a href="javascript:alert('Hallo!')">
javascript in href</a>

JavaScript im 'href'-Link
(statt 'alert()' gewünschte andere JavaScript-Funktion einsetzen)
<a href="#" onClick="alert('Hallo!');">
JavaScript im 'a'-Tag mit onClick</a>

JavaScript im 'a'-Tag mit onClick
<a href="index.htm"
onClick="return confirm('Wirklich umschalten?')">
Bestätigung vor Link-Aufruf</a>
Bestätigung vor Link-Aufruf
(Zuerst wird 'onClick=...' ausgeführt. 'href=...' wird nur geöffnet, wenn der JavaScript-Return-Wert 'true' ist.)
<form action="#" name=FormHid>
  <input type="hidden" name="myHid" value="">
  <a href='#'
    onClick='document.FormHid.myHid.value="Butt1";
      document.FormHid.submit();
      return false;'>

    <img src='../img/imgoff.gif' border=0>
  </a>
</form>
Bild als Button mit:
1.) Setzen eines Hidden-Formfields (z.B. zur Unterscheidung der Buttons),
2.) Formular-Submit-Funktion und
3.) JavaScript-Return-False, damit nicht 'href'-Link, sondern nur 'form-action' aufgerufen wird.
<input type="button" value="Hyperlink-Button"
onClick="self.location.href=
  'https://www.google.de/search?q=%22my%20car%22'">

(Hyperlink inklusive Parameter '?q=...', bei dem " durch %22 und Leerzeichen durch %20 ersetzt sind)
<input type="button" value="Formular-Button"
onClick="alert('Hallo!')">

(alternativ auch mit 'type="submit"' als Submit-Button)
<button type="button" onClick="alert('Hallo!')">
Andere Button-Art</button>

(alternativ auch mit 'type="submit"' als Submit-Button)
<button type="button" onClick="alert('Hallo!')">
<img src="../img/imgoff.gif">Button mit Bild</button>

(siehe auch unten mit Hover-Effekt)


'onMouseOver' (OMO / Hover)

<html>
<body>
<script language="JavaScript" type="text/javascript">
  function changeImage( imgName, imgFile ) {
    if( document.images )
      document.images[imgName].src = imgFile;
  }
</script>
<a href="Xy.htm"
  onMouseOver="changeImage('img1','../img/imgon.gif')"
  onMouseOut="changeImage('img1','../img/imgoff.gif')">
  <img name="img1" src="../img/imgoff.gif" border="0">
  (Grafik mit Maus überfahren ohne zu klicken)</a>
<button type="button"
  onClick="self.location.href='Xy.htm'"
  onMouseOver="changeImage('img2','../img/imgon.gif')"
  onMouseOut="changeImage('img2','../img/imgoff.gif')">
  <img name="img2" src="../img/imgoff.gif" border="0">
  Buttontext
</button>
</body>
</html>
Folgende Kommandos sind equivalent
  document.images[0].src
  document.images['img1'].src
  document.img1.src



Grafik mit Maus überfahren ohne zu klicken
(Grafik mit Maus überfahren ohne zu klicken)




(Button mit Maus überfahren ohne zu klicken)




Tooltip

<html>
<head>
<script language="JavaScript" type="text/javascript">

var tjs_w3c = (document.getElementById)  ? true : false;
var tjs_ie4 = (document.all && !tjs_w3c) ? true : false;
var tjs_ie5 = (document.all &&  tjs_w3c) ? true : false;
var tjs_ns4 = (document.layers) ? true : false;
var mouseX = 0;
var mouseY = 0;

function tjs_getElement( id ) {
  if( tjs_ns4 ) return findlayer( id, document );
  else if( tjs_ie4 ) return document.all[id];
  else return document.getElementById( id );
}
function tjs_show( id ) {
  var elem = tjs_getElement( id );
  if( tjs_ns4 ) elem.visibility       = "show";
          else  elem.style.visibility = "visible";
}
function tjs_hide( id ) {
  var elem = tjs_getElement( id );
  if( tjs_ns4 ) elem.visibility       = "hide";
          else  elem.style.visibility = "hidden";
}
function tjs_move( id, x, y ) {
  var elem = tjs_getElement( id );
  if( tjs_ns4 ) elem.moveTo( x, y );
         else { elem.style.left = x + 'px';
                elem.style.top  = y + 'px'; }
}
function tjs_trackMouseEvent( evt ) {
  if( !tjs_ie4 && !tjs_ie5 ) {
    mouseX = evt.pageX;
    mouseY = evt.pageY;
  } else {
    mouseX = event.clientX;
    mouseY = event.clientY;
    if( document.body.scrollLeft )
      mouseX += document.body.scrollLeft;
    if( document.body.scrollTop  )
      mouseY += document.body.scrollTop;
  }
  return false;
}
</script>
</head>
<body>
  <script language="JavaScript" type="text/javascript">
    window.onload = function() {
      document.onmouseover=tjs_trackMouseEvent;
    }
  </script>
  <p>Tooltip Overlay Window</p>
  <a href="#"
    onmouseover="tjs_show( 'meinToolTip' );
                 tjs_move( 'meinToolTip', mouseX + 10,
                                          mouseY + 10 );
                 window.status = 'Info-Tooltip';
                 return true;"
    onmouseout= "tjs_hide( 'meinToolTip' );
                 window.status = '';">
    --&gt; Mit Maus überfahren ohne zu klicken</a>
</body>
<div id="meinToolTip"
     style="position:absolute; left:0px; top:0px;
            visibility:hidden;">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr><td>
      <table cellspacing="1" cellpadding="1"
             border="0" width="130"
             style="background-color:#000099">
        <tr><td bgcolor="#DFE5EF">
          Hier ist mein Tooltip-Infotext.</td></tr>
      </table>
    </td></tr>
  </table>
</div>
</html>

Tooltip Overlay Window

--> Mit Maus überfahren ohne zu klicken



Im Internet finden Sie viele weitere und meistens wesentlich ausgefeiltere Skripe zu Tooltipps, zum Beispiel: http://www.walterzorn.de/tooltip/tooltip.htm.



Objekt 'document'

document.referrer   Von dieser URL wurde Dokument angefordert. Aktuell:
document.URL   Eigene URL. Manchmal ohne URL-Parameter. Falls von Festplatte und unter Windows im IE: mit '\' statt '/'. Aktuell:
window.location.href   Eigene URL. Kein '\', nur '/'. Inklusive '#'-Anker und '?'-Parametern (z.B. '#ank' oder '?x=y'). Aktuell:
document.write( "AusgabeText" );
Text ausgeben.
document.images
document.images[0].src = ...;
document.images['GrafikName'].src = ...;
document.GrafikName.src = ...;
Array der Grafiken.
Drei equivalente Versionen
zum Zugriff auf die URL
des Bildes "GrafikName".
document.FormularName.MyElementName
document.FormularName.MyTextFieldName.value
document.FormularName.MyChkBxRadName.checked
document.FormularName.MySelectName.selectedIndex
Formular-Element.
Texteingabefeld-String.
Checkbox oder Radiobutton.
Select-Listenfeld-Index (oder -1).
document.FormularName.MyElementName.focus(); Fokus auf bestimmtes Formularelement setzen.
<input type="text" onFocus="this.blur();"> Read-only-Texteingabefeld, nur für Textausgabe ('blur()' entfernt Fokus).


Objekt 'window'

window
'window' ist das Defaultobjekt, deshalb kann dieser Name auch weggelassen werden ('window.alert()' == 'alert()').
window.alert( Meldung );
window.confirm( Frage );
window.prompt( FrageText, TextVorgabe );
window.status = StatusZeilenText;
Meldung ausgeben (mit 'OK').
Frage stellen (mit 'OK' + 'Abbrechen').
String einlesen.
Text in Statuszeile.
if( window.print ) window.print( document );
Dialog zum Drucken des Dokuments.
window.moveTo( x, y );
window.resizeTo( width, height );
<body onload="window.resizeTo(600,400)">
Fensterposition und -größe einstellen.
window.open( URL, FensterName, Optionen );
if( MeinFenster && !MeinFenster.closed )
  MeinFenster.close();
window.opener
window.opener.parent.frames[0].location.href = URL;
Zusätzliches Fenster öffnen (siehe Optionen zu 'window.open()').
Fenster schließen.
Aufrufendes Fenster.
In anderem Fenster URL laden.
window.frames
if( window.focus ) window.focus();
Frames: siehe Frames.
Fokus setzen (auch bei Frames).
window.setTimeout( meineFunktion(), zeitMilliSek );
setTimeout( 'location.reload(true)', 5000 );
window.location.replace( url );
Zeitverzögert Funktion aufrufen.
Seite alle 5 Sekunden neu laden.
Neue Seite so laden, dass "Zurück" auf vorletzte Seite verweist.
window.location.search
strUrlParm = escape( strOrig );
strOrig = unescape( strUrlParm );
'location.search': Teil der aufgerufenen URL ab einem '?' (über die URL übertragene GET-Parameter).
'escape' wandelt bestimmte Zeichen um, damit sie in URL-Parametern nicht stören (z.B. Leerzeichen ' ' zu '%20' und '=' zu '%3D').
'unescape' wandelt zurück.
<a href="index.htm" target="popup" onClick="javascript:window.open('index.htm', 'popup', 'height=200,width=200,location=no')">Mein Link</a> Mit oder auch ohne JavaScript neues Fenster öffnen: Mit JavaScript mit vorgegebenen Optionen.
<html>
<script language="JavaScript" type="text/javascript">
  var meinTOFenster;
  function fensterMitTimeout() {
    meinTOFenster = window.open(
      "http://www.google.de",
      "meinTOFensterName",
      "width=600,height=400" );
    window.setTimeout( "fensterSchliessen()", 5000 );
  }
  function fensterSchliessen() {
    meinTOFenster.close(); }
</script>
<body onload="fensterMitTimeout()">
 ...
</body>
</html>
Popup-Fenster für nur 5 Sekunden anzeigen.


Optionen zu 'window.open()'

<html>
<body>
<script language="JavaScript" type="text/javascript">
  function neuesFenster() {
    window.open(
      "javascript.htm",   // URL (or "")
      "meinFensterName",  // name
      // options (all in one line without spaces!):
      "width=400,height=300,
       resizable=1,scrollbars=1,
       menubar=1,toolbar=1,location=1,status=1" );
  }
</script>
<input type="button" value="Fenster erzeugen"
                     onClick="neuesFenster()">
</body>
</html>
URL
'width' (Breite)
'height' (Höhe)
'left' (Abstand links)
'top' (Abstand oben)
'resizable' (Fenstergröße änderbar)
'fullscreen' (IE: Fenstergröße voll)
'scrollbars' (Scrollbars)
'menubar' (Menüleiste)
'toolbar' (Icon-Leiste)
'location' (URL-Adressenfeld)
'directories' (spez. Schaltfl.)
'status' (Statuszeile)
'dependent' (NN: Mutterfenster-abhängig)

Maximale Fenstergröße für Bildschirm 1024 x 768 Innenfläche 960 x 680
Fenster erzeugen
mit width x height
resultiert in
body.client
Fenster erzeugen
mit width x height
resultiert in
body.client
Fenster erzeugen
mit width x height
resultiert in
body.client
MS IE 6.0 1024 x 737 995 x 590 1012 x 700 995 x 700 977 x 680 960 x 680
Mozilla 1.3 1014 x 560 995 x 560 1014 x 700 995 x 700 979 x 680 960 x 680
Opera 7 1006 x 485 989 x 485 1006 x 511 989 x 511 977 x 680 960 x 680
Voraussetzungen: in Bildschirmeinstellungen Windows-Default-Schriftgrad auf 'Normal' und DPI auf '96 dpi', Windows-Taskbar ein, im Startbrowserfenster Menüs und Toolbars ein, im Zielbrowserfenster vertikaler Scrollbar.


Frames

Frame A
Fr
B
Frame C    

Zur Erstellung von Framesets in HTML siehe: html.htm#Frames.
this
self
name
'this' und 'self' sind Referenzen auf den aktuellen Frame (oder auf das aktuelle Fenster, wenn die Seite keine Frames enthält).
'name' enthält den Namen des Frames, wenn er im Frameset vergeben wurde.
parent
top
'parent': Eltern-Frameset-Fenster.
'top': oberstes Frameset-Fenster.
window.frames[0]
window.frames['MeinFrameName']
window.MeinFrameName
parent.MeinFrameName
top.MeinFrameName
parent.parent.Frame1.Frame2
Drei equivalente Versionen zum Zugriff auf den Frame "MeinFrameName".
'window' kann durch 'parent' oder 'top' ersetzt werden.
Auch eine Verschachtelung ist möglich.
top.MeinFrameName.location.href = neueUrl;
Fremden Frame-Inhalt ändern.
<head>
  <script language='JavaScript'>
    if( top != self )
      top.location = self.location;
  </script>
</head>
Bei Anzeige in (fremden) Frames:
Umschalten auf volles Browser-Fenster (ohne übergeordnete Frames).

<head>
  <script language='JavaScript'>
    if( self == top )
      location.href = "_MeinFrameset.htm";
  </script>
</head>
Bei Anzeige eines einzelnen Frame-Inhalts ohne den übergeordneten dazugehörenden Frameset kann hiermit auf das Frameset umgeschaltet werden. Allerdings werden bei dieser einfachen Variante immer die Start-Frame-Seiten angezeigt und nicht ein vielleicht umgeschalteter Frame-Inhalt.


'eval()'

var monat7 = "Juli";
var str = "7";
// Folgende Zeile liefert nur "monat7":
document.write( "monat" + str );
// Aber die folgende liefert "Juli":
document.write( eval( "monat" + str ) );
'eval()' ist eine Funktion, die es ermöglicht Code auszuführen, der als Text-String vorliegt.


Beispiel: Bildschirmauflösung, Browser-Typ und JavaScript-Version

<html>
<body>
<script language="JavaScript" type="text/javascript">
  document.write( screen.width
          + " x " + screen.height + "<br>" );
  document.write( screen.availWidth
          + " x " + screen.availHeight + "<br>" );
  document.write( window.innerWidth
          + " x " + window.innerHeight + "<br>" );
  document.write( document.body.clientWidth
          + " x " + document.body.clientHeight );
</script>
</body>
</html>
('screen...' und 'screen.avail...' funktionieren mit den meisten Browsern.
'window.inner...' funktioniert mit Mozilla, Netscape und Opera, aber nicht mit Microsoft Internet Explorer.
'document.body.client...' funktioniert mit Microsoft Internet Explorer 5 und 6 und mit Mozilla 1.3, aber nicht mit Netscape 4, Netscape 6 und Opera 5. Mit Netscape 4 bricht das JavaScript sogar mit Fehler ab.)
<html>
<body>
<script language="JavaScript" type="text/javascript">
  document.write( navigator.appName    +
         "<br>" + navigator.appVersion +
         "<br>" + navigator.userAgent  +
         "<br>" + navigator.platform   +
         "<br>" + navigator.javaEnabled() );
</script>
</body>
</html>

(Leider täuschen einige Browser eine falsche Identität vor, um Kompatibilitätsprobleme zu vermeiden. Bei Opera kann die Identität sogar frei eingestellt werden.)
<html>
<body>
<script language="JavaScript" type="text/javascript">
  <!-- // this script must be after "<body>" !
  w3c = ( document.getElementById )
        ? true : false;
  ie  = ( document.styleSheets && document.all )
        ? true : false;
  ie5 = ( ie && w3c )
        ? true : false;
  ns4 = ( document.layers ) ? true : false;
  ns6 = ( w3c && !document.all && document.bgColor )
        ? true : false;
  opera = ( window.opera ) ? true : false;
  document.write(
    "ie="  + ie  + "<br>" + "ie5=" + ie5 + "<br>" +
    "ns4=" + ns4 + "<br>" + "ns6=" + ns6 + "<br>" +
    "opera=" + opera + "<br>" );
  // -->
</script>
</body>
</html>
Browser-Erkennung auf Grund proprietärer Eigenschaften:
<html>
<body>
<script language="JavaScript" type="text/javascript">
  var v = "?";
</script>
<script language="JavaScript1.1">v=1.1;</script>
<script language="JavaScript1.2">v=1.2;</script>
<script language="JavaScript1.3">v=1.3;</script>
<script language="JavaScript1.4">v=1.4;</script>
<script language="JavaScript1.5">v=1.5;</script>
<script language="JavaScript1.6">v=1.6;</script>
<script language="JavaScript1.7">v=1.7;</script>
<script language="JavaScript1.8">v=1.8;</script>
<script language="JavaScript1.9">v=1.9;</script>
<script language="JavaScript2.0">v=2.x;</script>
<script language="JavaScript" type="text/javascript">
  document.write( "JavaScript Version " + v );
</script>
</body>
</html>


Beispiel: String erfragen und überprüfen

<html>
<body>
<script language="JavaScript" type="text/javascript">
function EingabeAusgabe() {
  var w = true;
  while( w ) {
    w = false;
    var s = window.prompt(
             "Bitte String eingeben:",
             " ... " );
    window.status = s;
    if( s != null && s != "" && s != " ... " )
      alert( "Eingabe-String:\n" + s );
    else
      w = confirm(
           "Eingabe fehlt. Nochmal?" );
  }
  window.status = "";
}
</script>
<input type="button"
       value="Eingabe/Ausgabe testen"
       onClick="EingabeAusgabe()">
</body>
</html>


Beispiel: Formular mit Überprüfung

<html>
<body>
<script language="JavaScript" type="text/javascript">
  function pruefen() {
    var f = document.MeinFormular;
    if( 0 >= f.L.selectedIndex )
      { alert( "Nichts ausgewählt!" );
        return false; }
    if( null == f.T.value || "" == f.T.value )
      { alert( "Text fehlt!" );
        return false; }
    if( !(f.R[0].checked ||
          f.R[1].checked) )
      { alert( "Kein Radiobutton angeklickt!" );
        return false; }
    alert( "Alle Eingaben o.k." );
    return true;
  }
</script>
<form method="post" name="MeinFormular"
      onSubmit="return pruefen()">
  Auswählen:<br>
  <select name="L">
    <option>keine Auswahl</option>
    <option>Opt1</option><option>Opt2</option>
  </select><br>
  Text eintragen:<br>
  <input type="text" name="T"><br>
  Radiobutton anklicken:<br>
  A<input type="radio" name="R" value="A">,
  B<input type="radio" name="R" value="B"><br>
  <input type="submit"
         value="Prüfen + Abschicken">
</form>
</body>
</html>
Auswählen:

Text eintragen:

Radiobutton anklicken:
A oder B


Beispiel: Navigation per Auswahlliste

<html>
<body>
<form>
<select name="selectUrl" onChange=
  "top.location.href=
   this.form.selectUrl.options[
   this.form.selectUrl.selectedIndex].
   value">
<option value="javascript.htm">JavaScript</option>
<option value="index.htm#Java">Java</option>
<option value="index.htm#JSP">JSP</option>
<option value="ms-asp.htm">MS-ASP</option>
<option value="html.htm">HTML</option>
</select>
</form>
</body>
</html>


Beispiel: Datum und Uhr

<html>
<head>
<title>Datum und Uhrzeit</title>
<script language="JavaScript" type="text/javascript">
<!--
var bUhrAktiv = false;
var timerID   = null;
function stoppeUhr()
{
  if( bUhrAktiv )
    clearTimeout( timerID );
  bUhrAktiv = false;
}
function zeigeZeit()
{
  var date = new Date();
  var jahr = date.getYear();
  var mona = date.getMonth() + 1;
  var tag  = date.getDate();
  var stun = date.getHours();
  var minu = date.getMinutes();
  var seku = date.getSeconds();
  if( jahr < 200 )  jahr = jahr + 1900;
  if( mona <  10 )  mona = "0" + mona;
  if( tag  <  10 )  tag  = "0" + tag;
  if( minu <  10 )  minu = "0" + minu;
  if( seku <  10 )  seku = "0" + seku;
  document.uhr.ausgabeDatum.value =
    jahr + "-" + mona + "-" + tag;
  document.uhr.ausgabeZeit.value =
    stun + ":" + minu + ":" + seku;
  timerID = setTimeout( "zeigeZeit()", 1000 );
  bUhrAktiv = true;
}
function starteUhr()
{
  stoppeUhr();
  zeigeZeit();
}
// -->
</script>
</head>
<body onLoad="starteUhr()">
<form name="uhr" onSubmit="0">
  <input type="text" name="ausgabeDatum" size=10><br>
  <input type="text" name="ausgabeZeit"  size=10>
</form>
</body>
</html>



Beispiel: Button mit Sound und Webseite ausdrucken

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function playSound()  // only MS IE
{
  if( document.all )
    document.all.MeinSound.src = "../img/Bleep.wav";
}
// -->
</script>
</head>
<body>
<bgsound id="MeinSound">
<form>
<input type="button" value="Webseite ausdrucken"
       onMouseOver="playSound()"
       onclick="print(document)">
</form>
</body>
</html>
Sound:
'onMouseOver="playSound()"' startet einen Sound beim Überfahren des Buttons mit der Maus, allerdings in der hier gezeigten einfachen Variante leider nur im Microsoft Internet Explorer.
Für andere Webbrowser wurde oft eine Variante ähnlich zu '<embed src="..." hidden="..." autostart="..." ...>' verwendet, allerdings funktioniert auch dies zum Beispiel im Mozilla 1.3 nicht (ohne Installation zusätzlicher Plug-ins).
Siehe hierzu auch: Hintergrundmusik bei SelfHtml.
Eine Alternative zum Abspielen von Sound kann Flash sein.

Drucken:
'onClick="print(document)"' startet einen Druckdialog beim Anklicken des Buttons (auf Browsern ab JavaScript 1.2, z.B. ab NN 4 und IE 5).


Beispiel: Warnung vor Datenverlust bei Seitenwechsel

Falls Eingaben in Formularfelder eingetragen wurden, aber noch nicht der Speichern-Submit-Button betätigt wurde, würden bei einem Verlassen der Webseite alle Eingaben verloren gehen. Davor warnen die folgenden beiden Beispiele.

Das erste Beispiel ist einfacher, aber warnt auch dann, wenn kein Eingabefeld verändert wurde:

<html>
<head>
<script language="JavaScript" type="text/javascript">
  function seitenwechselWarnung( einschalten ) {
    unloadMessage = "Es wurden eventuell Daten geändert, aber noch nicht gespeichert.\nSoll trotzdem die Seite verlassen werden?";
    window.onbeforeunload = einschalten ? function() { return unloadMessage; } : null;
  }

  seitenwechselWarnung( true );
</script>
</head>
<body>
  <p>Seitenwechsel: Gehe zu: <a href="http://www.google.de">Google</a></p>
  <form methode="post">
    Name:  <input type="text" name="name"><br>
    Email: <input type="text" name="email"><br>
    <input type="submit" value="Speichern" onclick="seitenwechselWarnung( false )" >
  </form>
</body>
</html>

Das zweite Beispiel warnt nur dann, wenn tatsächlich ein Eingabefeld verändert wurde:

<html>
<head>
<script language="JavaScript" type="text/javascript">
  function seitenwechselWarnung( einschalten ) {
    unloadMessage = "Es wurden eventuell Daten geändert, aber noch nicht gespeichert.\nSoll trotzdem die Seite verlassen werden?";
    window.onbeforeunload = einschalten ? function() { return unloadMessage; } : null;
  }
  function anzeigen() {
    var f = document.MeinFormular;
    alert( "L=" + f.L.value + ", T=" + f.T.value + ", R=" + f.R.value );
    return true;
  }
</script>
</head>
<body>
<p>Seitenwechsel: Gehe zu: <a href="http://www.google.de">Google</a></p>
<form name="MeinFormular">
  Auswählen:<br>
  <select name="L" onchange="seitenwechselWarnung(true)">
    <option></option>
    <option>Opt1</option><option>Opt2</option>
  </select><br>
  Text eintragen:<br>
  <input type="text" name="T" onchange="seitenwechselWarnung(true)"><br>
  Radiobutton anklicken:<br>
  A<input type="radio" name="R" value="A" onchange="seitenwechselWarnung(true)">,
  B<input type="radio" name="R" value="B" onchange="seitenwechselWarnung(true)"><br>
  <input type="submit" value="Fertig" onClick="seitenwechselWarnung(false); anzeigen()">
</form>
</body>
</html>



Ajax (Asynchronous JavaScripting and XML)

Ajax kombiniert JavaScript, HTML, DHTML, DOM und XML, um die Programmierung interaktiver Webseiten zu erleichtern.

Weiteres zu Ajax finden Sie unter javascript-ajax.htm.



Weiterführende Informationen



Weitere Themen: andere TechDocs | HTML | Java | JSP | SQL | Webanwendungen | ASCII
© 1998-2007 Torsten Horn, Aachen