Objekte


Objekte, Methoden, Eigenschaften


Die einzelnen Komponenten einer HTML-Seite sind Objekte für JAVA-Script. Zum Verständnis des Begriffs Objekt kann man ein Auto betrachten:
Objekte besitzen Eigenschaften (Auto: Typ, Farbe, Anzahl der Gänge, ...). Funktionen, die mit einer Klasse von Objekten verknüpft sind, werden Methoden genannt (Auto: höheren/ niedrigeren Gang einlegen,..). Wird eine Funktion als Methode eines Objekts definiert, so wird sofort erkennbar, mit welchem Objekt sie arbeitet. Eigenschaften und Methoden von Objekten stehen - durch Punkte getrennt - nach dem Objekt.

(Auto:
  1. mein_wagen.typ = Golf
  2. mein_wagen.farbe = weiß
  3. mein_wagen.anzahl_gaenge = 6)
Eigenschaften sind veränderlich und können daher auch den aktuellen Zustand des Objekts beschreiben (Auto: mein_wagen.aktueller_gang = 4).Dieser Zustand wird durch den Aufruf einer Methode verändert (Auto: mein_wagen.hochschalten() ).

In JAVA-Script gibt es String-Objekte (Zeichenketten), Math-Objekte (math. Funktionen) und Date-Objekte (Zeit- und Datumsfunktionen), eigene Objekte lassen sich mit der new-Anweisung definieren.


A: Das DATE-Objekt


BEISPIEL: (Dein Rechner muss natürlich richtig eingestellt sein!)



<SCRIPT LANGUAGE="JavaScript">
<!--
heute=new Date()
uhrzeit=heute.getHours()
datum=heute.getDate()
monat=heute.getMonth()+1
jahr=heute.getYear()+00
wochentag=heute.getDay()
document.write("HEUTE: ",heute);document.write("<br>");document.write("<br>")
document.write("TAG: ",datum);document.write("<br>");
document.write("MONAT: ",monat);document.write("<br>");
document.write("JAHR: ",jahr);document.write("<br>");document.write("<br>")
document.write("WOCHENTAG: ")
if (wochentag==0) document.write("Sonntag")
if (wochentag==1) document.write("Montag ")
if (wochentag==2) document.write("Dienstag")
if (wochentag==3) document.write("Mittwoch")
if (wochentag==4) document.write("Donnerstag")
if (wochentag==5) document.write("Freitag")
if (wochentag==6) document.write("Samstag")
document.write("<br><br> oder auch: <br><br>")
if (wochentag==0) document.write
                  ("Heute ist Sonntag, der ",datum,". ",monat,". ",jahr)
if (wochentag==1) document.write
                  ("Heute ist Montag, der ",datum,". ",monat,". ",jahr)
if (wochentag==2) document.write
                  ("Heute ist Dienstag, der ",datum,". ",monat,". ",jahr)
if (wochentag==3) document.write
                  ("Heute ist Mittwoch, der ",datum,". ",monat,". ",jahr)
if (wochentag==4) document.write
                  ("Heute ist Donnerstag, der ",datum,". ",monat,". ",jahr)
if (wochentag==5) document.write
                  ("Heute ist Freitag, der ",datum,". ",monat,". ",jahr)
if (wochentag==6) document.write
                  ("Heute ist Samstag, der ",datum,". ",monat,". ",jahr)
// -->

</SCRIPT>





B: Das DOCUMENT-Objekt

Beim Laden eines Dokumentes wird eine Anzahl von JavaScript-Objekten erzeugt, deren Eigenschaften vom jeweiligen HTML-Dokument abhängen. Vorder- und Hintergrundfarbe seien standardmäßig eingestellt.

document.title "Nur ein Beispiel" //Festlegung zw. den TITLE-Tags
document.fgColor #000000
document.bgColor #ffffff
location.href "http://www.guweb.com/cgi-bin/postcard?id=ASTIPOST"


Für die Ausgabe mit dem document-Objekt gibt es zwei Methoden (document.write und document.writeln- Ausgabe mit Zeilenumbruch), für Texteingaben müssen Formulare verwendet werden.

BEISPIEL für eine Texteingabe



Zahl eingeben
ist das Quadrat dieser Zahl


Das zugehörige Skript mit dem Formular:

<SCRIPT LANGUAGE="JavaScript">

<!--
function berechnen(form)
{document.quadrieren.ergebnis.value =eval(document.quadrieren.eingabe.value
* document.quadrieren.eingabe.value)}

// -->
</SCRIPT>
<form name="quadrieren">
<input type="text" name="eingabe" size=10> Zahl eingeben
<input type="button" value="Ausrechnen"
onClick=berechnen(this.quadrieren)><BR><BR>
<input type="text" name="ergebnis" size=20> ist das Quadrat dieser Zahl.
</form>



Bemerkungen:
  1. für document.quadrieren kann auch einfach form geschrieben werden!
  2. this ist ein reserviertes Wort in JAVA-Script und dient als Referenz auf das aktuelle Objekt
  3. Mit Hilfe von EVENT-Handlern (onClick, onSubmit, onBlur, onAbort, onChange, onError, onFocus, onLoad, onMouseOver, onMouseOut, onSelect, onUnload) bietet JAVA-Script die Möglichkeit, bereits während der Eingabe auf Events (Ereignisse) zu reagieren.
  4. eval(string) wertet die entsprechende Zeichenkette als arithmetischen Ausdruck aus und berechnet Summen, Differenzen, ...
Im ff. Programm wird 'modulo' (JAVA-Script: %) verwendet: modulo gibt den ganzzahligen Wert einer Division an. 17 mod 5 = 2 (Auf die Darstellung des Skripts wurde verzichtet, da es fast identisch zum vorigen Skript ist.)

Zahl eingeben



Beispielprogramm zum Wechseln der Hintergrundfarbe:



Funktioniert leider nur, wenn der Verweis auf das Stylesheet aus dieser Datei gelöscht wird, vermutlich einer von den Fehlern, die man beim Korrekturlesen immer wieder übersieht. Für eine email (email-Adresse beim copyright-Vermerk) mit Fehlerkorrektur wäre ich dankbar !!!

Zum Ausprobieren klicke HIER

Das zugehörige Skript:

<script language="Javascript">
<!--
function eins()
{document.bgColor="darkcyan"}
function zwei()
{document.bgColor="slateblue"}
function drei()
{document.bgColor="blueviolet"}
// -->
</script>

<form name=" farbwechsel">
<CENTER>
<TABLE border=8 cellpadding=6 cellspacing = 2>
<TR><TD> <input type="button" value="1. mistyrose" onClick="eins()">

<TD> <input type="button" value="2. powderblue" onClick="zwei()">
<TD><input type="button" value="3. peachpuff" onClick="drei()">
</TABLE>
</CENTER>
</form>


C: Das MATH-Objekt


Eigenschaften sind gängige mathematische Konstanten (e, pi, ln(10), ln(2), wurzel (1/2) und wurzel (2)), Methoden sind einige math. Funktionen (sin, cos, tan, acos, asin, atan, abs, exp, log, max, min, pow random, sqrt) sowie drei Rundungsfunktionen ceil (rundet zur nächst größeren Zahl), round (rundet mathematisch korrekt) und floor (schneidet die Kommastellen ab).



Das zugehörige Skript:


<script language="Javascript">
<!--
var p= Math.PI
document.write ("pi = ",p," <BR>")
document.write( "pi (gerundet mit ceil) = ",Math.ceil(p),"<BR>")
document.write( "pi (gerundet mit round) = ",Math.round(p),"<BR>")
document.write( "pi (gerundet mit floor) = ",Math.floor(p),"<BR>")
document.write( "pi (gerundet auf 4 Kommastellenl)
= ",Math.round(p*10000)/10000,"<BR>")
// -->

</script>


Beispiel zur Schriftausgabe mit dem Math-Objekt>



Schreibt man die zugehörigen Funktionen in den Kopf des HTML-Dokuments, so kann man wesentlicher schneller als mit HTML-Tags auf- oder absteigende Schriftgrößen realisieren:



Die beiden zugehörigen Skripte:

<script language="Javascript">
<!--
function buchstabengroesser (string)
{
var max_hoehe=Math.ceil(string.length/2)
//bei n-buchstabigen Wörtern
soll die Maximalhöhe n/2 sein
var groesse=0
var zeichen=""
var abbildung=""

for ( j=0; j<string.length;j++)

{
zeichen=string.charAt(j)
groesse=-1*(max_hoehe - j-1)

if (groesse >=0)
abbildung += zeichen.fontsize("+"+groesse)
else
abbildung +=zeichen.fontsize (groesse)
}

return abbildung
}

document.write(buchstabengroesser("Dokumente"))
// -->
</script>


<script language="Javascript">
<!--
function buchstabenkleiner (string)
{
var max_hoehe=Math.ceil(string.length/2)
//bei n-buchstabigen Wörtern
soll die Maximalhöhe n/2 sein
var groesse=0
var zeichen=""
var abbildung=""

for ( j=0; j<string.length;j++)

{
zeichen=string.charAt(j)
groesse=1*(max_hoehe - j-1)

if (groesse >=0)
abbildung += zeichen.fontsize("+"+groesse)
else
abbildung +=zeichen.fontsize (groesse)
}

return abbildung
}

document.write(buchstabenkleiner("Dokumente"))
// -->
</script>


















































































































Modulo gibt den Rest einer ganzzahligen Division an.

Es gilt:
17 : 5 = 3 Rest 2

Also

17 mod 5 = 2

































© 2010 Asti PoVRay-Site Mathematische Streiflichter