Ü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>
'<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 s = "Text";
var b = true;
var arr2 = new Array();
arr2[0] = "";
arr2[1] = "Januar";
arr2[2] = "Februar";
arr2.length;
arr2.sort();
arr2.sort( meineSortierfunktion );
'arr.length' gibt die Länge des Arrays an.
'arr.sort()' sortiert das Array (alphabetisch oder mit übergebener Sortierfunktion).
', ", \, Tabulator, Zeilenwechsel.
for( ...; ...; ... ) ...;
while( ... ) ...;
In neueren Browsern wird auch 'do...while(...)' und 'switch(...)...' unterstützt.
Event-Handler
onMouseDown, onMouseUp
Fokus weg (z.B. für Formularelemente-Überprüfung).
Links und Buttons
javascript in href</a>
(statt 'alert()' gewünschte andere JavaScript-Funktion einsetzen)
JavaScript im 'a'-Tag mit onClick</a>
onClick="return confirm('Wirklich umschalten?')">
Bestätigung vor Link-Aufruf</a>
(Zuerst wird 'onClick=...' ausgeführt. 'href=...' wird nur geöffnet, wenn der JavaScript-Return-Wert 'true' ist.)
<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>
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)
onClick="alert('Hallo!')">
(alternativ auch mit 'type="submit"' als Submit-Button)
Andere Button-Art</button>
(alternativ auch mit 'type="submit"' als Submit-Button)
<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>
document.images[0].src
document.images['img1'].src
document.img1.src
(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 = '';">
--> 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.images[0].src = ...;
document.images['GrafikName'].src = ...;
document.GrafikName.src = ...;
Drei equivalente Versionen
zum Zugriff auf die URL
des Bildes "GrafikName".
document.FormularName.MyTextFieldName.value
document.FormularName.MyChkBxRadName.checked
document.FormularName.MySelectName.selectedIndex
Texteingabefeld-String.
Checkbox oder Radiobutton.
Select-Listenfeld-Index (oder -1).
Objekt 'window'
window.confirm( Frage );
window.prompt( FrageText, TextVorgabe );
window.status = StatusZeilenText;
Frage stellen (mit 'OK' + 'Abbrechen').
String einlesen.
Text in Statuszeile.
window.resizeTo( width, height );
<body onload="window.resizeTo(600,400)">
if( MeinFenster && !MeinFenster.closed )
MeinFenster.close();
window.opener
window.opener.parent.frames[0].location.href = URL;
Fenster schließen.
Aufrufendes Fenster.
In anderem Fenster URL laden.
if( window.focus ) window.focus();
Fokus setzen (auch bei Frames).
setTimeout( 'location.reload(true)', 5000 );
window.location.replace( url );
Seite alle 5 Sekunden neu laden.
Neue Seite so laden, dass "Zurück" auf vorletzte Seite verweist.
strUrlParm = escape( strOrig );
strOrig = unescape( strUrlParm );
'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.
<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>
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>
| 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 |
Frames
| Frame A | |
| Fr B |
Frame C |
self
name
'name' enthält den Namen des Frames, wenn er im Frameset vergeben wurde.
top
'top': oberstes Frameset-Fenster.
window.frames['MeinFrameName']
window.MeinFrameName
parent.MeinFrameName
top.MeinFrameName
parent.parent.Frame1.Frame2
'window' kann durch 'parent' oder 'top' ersetzt werden.
Auch eine Verschachtelung ist möglich.
<head>
<script language='JavaScript'>
if( top != self )
top.location = self.location;
</script>
</head>
Umschalten auf volles Browser-Fenster (ohne übergeordnete Frames).
<head>
<script language='JavaScript'>
if( self == top )
location.href = "_MeinFrameset.htm";
</script>
</head>
'eval()'
var str = "7";
// Folgende Zeile liefert nur "monat7":
document.write( "monat" + str );
// Aber die folgende liefert "Juli":
document.write( eval( "monat" + str ) );
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>
'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>
<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>
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>
'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).