Javascript-Funktionen
Aufgabe 3
Nachstehend sehen Sie die Befehle zur Erstellung einer Tabelle mit Angaben
über diverse Browser- bzw. Fenstereigenschaften (siehe
Aufgabe 2):
document.write("<center><table border=1>"); /* Tabellenbeginn
*/
document.write("<tr>"); /* Zeilenbeginn */
document.write("<td colspan=2 align=center><b>Angaben zur
verwendeten Browsersoftware</b></td>"); /* 1. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><b>Merkmal</b></td>"); /*
1. Spalte */
document.write("<td><b>aktueller Wert</b></td>");
/* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Spitzname</i></td>");
/* 1. Spalte */
document.write("<td>"+navigator.appCodeName+"</td>"); /*
2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Browsername</i></td>");
/* 1. Spalte */
document.write("<td>"+navigator.appName+"</td>"); /* 2. Spalte
*/
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Browserversion</i></td>");
/* 1. Spalte */
document.write("<td>"+navigator.appVersion+"</td>"); /* 2.
Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Sprachvariante</i></td>");
/* 1. Spalte */
document.write("<td>"+navigator.language+"</td>"); /* 2.
Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Betriebssystem</i></td>");
/* 1. Spalte */
document.write("<td>"+navigator.platform+"</td>");
/* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td colspan=2 align=center><b>aktuelle Fenstereinstellungen</b></td>");
/* 1. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>innere Fensterhöhe</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.innerHeight)?window.innerHeight+'
Pixel':'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>innere Fensterbreite</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.innerWidth)?window.innerWidth+'
Pixel':'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>äußere Fensterhöhe</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.outerHeight)?window.outerHeight+'
Pixel':'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>äußere Fensterbreite</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.outerWidth)?window.outerWidth+'
Pixel':'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Inhalt der Statusleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.status)?window.status:'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Standardtext in der Statusleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+window.defaultStatus+"</td>"); /* 2.
Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Adressleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.locationbar)?('Anzeige der Adressleiste
ist'+((window.locationbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Menüleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.menubar)?('Anzeige der Menüleiste
ist'+((window.menubar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>pers. Adressleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.personalbar)?('Anzeige der persönlichen
Adressleiste ist'+((window.personalbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Bildlaufleisten</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.scrollbars)?('Anzeige der Bildlaufleisten
ist'+((window.scrollbars.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Statusleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.statusbar)?('Anzeige der Statusleiste
ist'+((window.statusbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Navigationsleiste</i></td>");
/* 1. Spalte */
document.write("<td>"+((window.toolbar)?('Anzeige der Navigationsleiste
ist'+((window.toolbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Bildschirmhöhe</i></td>");
/* 1. Spalte */
document.write("<td>"+screen.height+" Pixel</td>"); /* 2.
Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Bildschirmbreite</i></td>");
/* 1. Spalte */
document.write("<td>"+screen.width+" Pixel</td>"); /* 2.
Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>verfügbare Bildschirmhöhe</i></td>");
/* 1. Spalte */
document.write("<td>"+screen.availHeight+" Pixel</td>");
/* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>verfügbare Bildschirmbreite</i></td>");
/* 1. Spalte */
document.write("<td>"+screen.availWidth+" Pixel</td>"); /*
2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Farbtiefe</i></td>");
/* 1. Spalte */
document.write("<td>"+((screen.colorDepth)?(screen.colorDepth+'
Bit/Pixel'):'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr><tr>"); /* nächste
Zeile */
document.write("<td><i>Farbauflösung</i></td>");
/* 1. Spalte */
document.write("<td>"+((screen.pixelDepth)?(screen.pixelDepth+'
Bit/Pixel'):'Keine Angaben verfügbar')+"</td>"); /* 2. Spalte */
document.write("</tr></table></center>"); /* Tabellenende
*/
JavaScript bietet die Möglichkeit, eigene Funktionen zu definieren.
Bei wiederkehrenden Aufgaben kann mit ihrer Hilfe der Schreibaufwand wesentlich
verkürzt werden.
Die Definition einer Funktion geschieht im Header des HTML-Dokuments
innerhalb eines Javascript-Bereichs.
function Funktionsname(Argumente)
{ Javascript-Anweisungen;
return(Rückgabewert);
}
-
Das (kleingeschriebene) Schlüsselwort function weist den Browser
daraufhin, daß nun eine Funktion definiert wird.
-
Die Funktion erhält einen Funktionsnamen, welcher vom Anwender vergeben
wird. Die Schreibweise ist beim Funktionsaufruf konsequent zu beachten.
-
Eine Funktion kann (durch Komma getrennte) Argumente haben. Funktionen
ohne Argument sind ebenfalls möglich.
-
Innerhalb der geschweiften Klammern stehen die Javascriptanweisungen (jeweils
mittels Semikolon abgeschlossen).
-
Eine Funktion liefert im allgemeinen einen (Rückgabe-)Wert als Ergebnis
zurück.
Als Beispiel werden hier Funktionen zur Ausgabe der HTML-Befehle für
die Tabellen definiert:
function neuezeile(){document.write("</tr><tr>");}
/* Beenden und Neubeginn einer Tabellenzeile */
function zelle(inhalt){document.write("<td>"+inhalt+"</td>");}
/* Zelle mit Inhalt schreiben */
function fett(inhalt){return("<b>"+inhalt+"</b>");}
/* Inhalt fett ausgeben */
function kursiv(inhalt){return("<i>"+inhalt+"</i>");}
/* Inhalt kursiv ausgeben */
Nun soll der obige Quelltext umgeschrieben werden:
document.write("<center><table border=1>"); /* Tabellenbeginn
*/
document.write("<tr>"); /* Zeilenbeginn */
document.write("<td colspan=2 align=center>"+fett("Angaben zur
verwendeten Browsersoftware")+"</td>"); /* 1. Spalte */
neuezeile();
zelle(fett("Merkmal")); zelle(fett("aktueller Wert"));neuezeile();
zelle(kursiv("Spitzname")); zelle(navigator.appCodeName);neuezeile();
zelle(kursiv("Browsername"));zelle(navigator.appName);neuezeile();
zelle(kursiv("Browserversion"));zelle(navigator.appVersion);neuezeile();
zelle(kursiv("Sprachvariante"));zelle(navigator.language);neuezeile();
zelle(kursiv("Betriebssystem"));zelle(navigator.platform);neuezeile();
document.write("<td colspan=2 align=center>"+fett("aktuelle
Fenstereinstellungen")+"</td>");neuezeile();
zelle(kursiv("innere Fensterhöhe"));zelle((window.innerHeight)?window.innerHeight+"
Pixel":"Keine Angaben verfügbar");neuezeile();
zelle(kursiv("innere Fensterbreite"));zelle((window.innerWidth)?window.innerWidth+"
Pixel":"Keine Angaben verfügbar");neuezeile();
zelle(kursiv("äußere Fensterhöhe"));zelle((window.outerHeight)?window.outerHeight+"
Pixel":"Keine Angaben verfügbar");neuezeile();
zelle(kursiv("äußere Fensterbreite"));zelle((window.outerWidth)?window.outerWidth+"
Pixel":"Keine Angaben verfügbar");neuezeile();
zelle(kursiv("Inhalt der Statusleiste"));zelle((window.status)?window.status:"Keine
Angaben verfügbar");neuezeile();
zelle(kursiv("Standardtext in der Statusleiste"));zelle(window.defaultStatus);neuezeile();
zelle(kursiv("Adressleiste"));zelle((window.locationbar)?("Anzeige
der Adressleiste ist"+((window.locationbar.visible)?" nicht":"")+" unterdrückt"):"Keine
Angaben verfügbar");neuezeile();
zelle(kursiv("Menüleiste"));zelle((window.menubar)?('Anzeige
der Menüleiste ist'+((window.menubar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar');neuezeile();
zelle(kursiv("pers. Adressleiste"));zelle((window.personalbar)?('Anzeige
der persönlichen Adressleiste ist'+((window.personalbar.visible)?'
nicht':'')+' unterdrückt'):'Keine Angaben verfügbar');neuezeile();
zelle(kursiv("Bildlaufleisten"));zelle((window.scrollbars)?('Anzeige
der Bildlaufleisten ist'+((window.scrollbars.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar');neuezeile();
zelle(kursiv("Statusleiste"));zelle((window.statusbar)?('Anzeige
der Statusleiste ist'+((window.statusbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar');neuezeile();
zelle(kursiv("Navigationsleiste"));zelle((window.toolbar)?('Anzeige
der Navigationsleiste ist'+((window.toolbar.visible)?' nicht':'')+' unterdrückt'):'Keine
Angaben verfügbar');neuezeile();
zelle(kursiv("Bildschirmhöhe"));zelle(screen.height+" Pixel");neuezeile();
zelle(kursiv("Bildschirmbreite"));zelle(screen.width+" Pixel");neuezeile();
zelle(kursiv("verfügbare Bildschirmhöhe"));zelle(screen.availHeight+"
Pixel");neuezeile();
zelle(kursiv("verfügbare Bildschirmbreite"));zelle(screen.availWidth+"
Pixel");neuezeile();
zelle(kursiv("Farbtiefe"));zelle((screen.colorDepth)?(screen.colorDepth+'
Bit/Pixel'):'Keine Angaben verfügbar');neuezeile();
zelle(kursiv("Farbauflösung"));zelle((screen.pixelDepth)?(screen.pixelDepth+'
Bit/Pixel'):'Keine Angaben verfügbar');
document.write("</tr></table></center>"); /* Tabellenende
*/
Webdesign by: Dipl.-Math. Horst Liske,
EDV-Beratung
HolyWare©,
E-Mail
an Horst@holyware.de