Objekte - JavaScript Tutorial

document

Form-Objekt

Mit dem Form-Objekt werden Formularelement angesprochen. Die Verbindung zwischen den Formularelement und Java Script

erfolgt über die „onclick“ Funktion im Formularelement „Button“. Die onclick Funtion bewirkt, dass mit einem Klick auf den Butten

die gewünscht JavaScript Function gestartet wird.

z.B.      <form name="Person">                      

<Input Type="text" name="Vorname" value="" size=20>

<Input Type="Button" Value="Anzeigen" name="Anzeige" onclick="zeigen()">

</form>

<script language="javascript" type="text/javascript">

function zeigen()

{

            alert(window.document.Person.Vorname.value

}

            window.document.Person.Vorname = Objekt bzw. Objektelement

            value =  Eigenschaft

Image-Objekt

Mit dem Image Objekt werden Grafiken angesprochen.

z.B.      <img src="C:\Inetpub\wwwroot\Intranet\IMAGES\asphelper.gif" name="erstesBild">

<img src="C:\Inetpub\wwwroot\Intranet\IMAGES\gmx.gif" name="zweitesBild">

<script language="javascript" type="text/javascript">

alert(window.document.images[0].src)

alert(window.document.zweitesBild.src)

</script>

Grafiken können mit Hilfe von Arrays angesprochen werden:

window.document.images[0].src

window.document.images[1].src

od. über den Namen des images

                        window.document.erstesBild.src

window.document.zweitesBild.src

            window.document.erstesBild = Objekt bzw. Objektelemente

            src = Eigenschaft gibt den Pfad des Bildes zurück

            weitere Eigenschaften:

            window.document.erstesBild.height

            window.document.erstesBild.width

Eigene Objekte

Einleitung

Bei dem untenstehenden Array Objekt handelt es sich um eine Objekt, dass dem Browser bereits bekannt ist.

Für Objekte die dem Browser noch nicht bekannt sind, brauch man eine sogen. Kontruktor-Funktion! Mit der

Konstruktor-Funktion macht man also eine  eigenes Objekt dem Browser verständlich.

var meinArray = new Array();

meinArray[0] = "A"

meinArray[1] = "B"

meinArray[2] = "C"

meinArray[3] = "D"

Hauptobjekt

            ’Konstrukturfunktion

function Buch(pTitel, pVerlag, pSeiten)

{

                        this.Titel = pTitel;                                            ’Eigenschaften

                        this.Verlag = pVerlag;

                        this.Seiten = pSeiten;

}

            ‘ Hier werden die Werte/Inhalt definiert)

diesesBuch = new Buch("JavaScript Workshop", "Addison-Wesley", 300)

‘hiermit können die Eigenschaften/Werte aufgerufen werden

document.write(diesesBuch.Titel)

bei den oben definierten Werten (pTitel, pVerlag, pSeiten) handelt es sich um Eigenschaften. Diese könnten

auch direkt wie folgt definiert werden:

{

            this.Titel = „JavaScript“;

            this.Verlag = „Addison-Wesley“;

            this.Seiten = 300;

}

wie auch siehe späteres Beispiel

            this.offen = „nicht offen“

Zusatzobjekt

Man könnte zudem weitere Eigenschaften  bzw. Objekte von Objekte definieren. So z.B. der Einband.

Der Einband ist eine extra Bestandteil des Buches, hat eigene Eigenschaften und ist somit ebenfalls ein

Objekt!

            ’Ergänzung Haupt Kontruktor-Funktion

function Buch(pTitel, pVerlag, pSeiten, pFarbe, pArt)

{

this.Titel = pTitel;

this.Verlag = pVerlag;

this.Seiten = pSeiten;

this.Einband = new Einband(pFarbe, pArt);                 ’hiermit wird die untere Kontruktur-Funktion aufgerufen

}

diesesBuch = new Buch("JavaScript Workshop", "Addison-Wesley", 300, "gelb", "Taschenbuch");

            ’Extra Konstruktor-Funktion für Zusatzobjekt, diese wird oben im Hauptobjekt aufgerufen

function Einband(pFarbe, pArt)

{

            this.Farbe = pFarbe;

            this.Art = pArt;

}

‘hiermit können die Eigenschaften/Werte aufgerufen werden

document.write(diesesBuch.Farbe)

Methoden

Mit Methoden werden Eigenschaften des Objektes verändert/bearbeitet.

            Var pSeite = 5                         ’Seite 5 wird aufgeschlagen

            ’Ergänzung Haupt Kontruktor-Funktion

function Buch(pTitel, pVerlag, pSeiten, pFarbe, pArt)

{

                        this.Titel = pTitel;

                        this.Verlag = pVerlag;

                        this.Seiten = pSeiten;

                        this.Einband = new Einband(pFarbe, pArt);

                        this.offen = 0;                                                              ’Eigenschaft die durch Methoden verändert werden kann

                        this.zuschlagen = zuschlagen;                                       ’hiermit wird die untere Funktion „zuschlagen aufgerufen“

                        this.aufschlagen = aufschlagen;                                     ’hiermit wird die untere Funktion „zuschlagen aufschlagen“

}

diesesBuch = new Buch("JavaScript Workshop", "Addison-Wesley", 300, "gelb", "Taschenbuch");

function Einband(pFarbe, pArt)

{

                        this.Farbe = pFarbe;

                        this.Art = pArt;

}

            ’folgende Methoden müssen hinzugefügt werden

function zuschlagen()

{

                        this.offen = 0;                          ’Seite wird auf „0“ gesetzt

}

function aufschlagen(pSeite)

{

                        this.offen = pSeite;                   ’pSeite wird aufgeschlagen

}

Methoden werden grundsätzlich folgendermaßen aufgerufen:

            DiesesBuch.zuschlagen()

             od.

            DiesesBuch.aufschlagen(pSeite)

Eigenschaften u. Methoden Objekten hinzufügen

Beim hinzufügen von Eigenschaften u. Methoden muss man sich im Klaren sein. Für welche Objekte die Eigenschaft/Methoden

gilt. Im unteren Beispiel wird die Eingeschaft/Methode nur an  das Objekt Buch weitergegeben. Das Zusatz-Objekt „Buecher“

hat diese Eigenschaft/Methode nicht!

function Buecherei(pOrt, pTitel, pVerlag, pArt)

{

                        this.Ort = pOrt;

                        this.Buecher = new Buecher(pTitel, pVerlag, pArt)

                        Buecherei.Ausleih = "nicht ausgeliehen";

                        Buecherei..ausleihen = ausleihen;

                        Buecherei.zurueckgeben = zurueckgeben;

}

Buecherei = new Buecherei("Offenburg", "Workshop JavaScript", "Addison", "Sachbuch“)

function Buecher(pTitel, pVerlag, pArt)

{

            this.Titel = pTitel;

                        this.Verlag = pVerlag;

                        this.Art = pArt;

                        this.Ausleih = "nicht ausgeliehen";

                        this.ausleihen = ausleihen;

                        this.zurueckgeben = zurueckgeben;

}

Buecherei.ausleihen() – funktioniert

            aber

Buecherei.Buecher.ausleihen() – funktioniert nicht da die Eigenschaft/Methode nur für Hauptobjekt „Buecherei“ gilt

Will man das das Zusatzobjekte „Buecher“ auch diese Eingschaften/Methode hat, dann erfolgt dies mit dem Wert „prototype“.

function Buecherei(pOrt, pTitel, pVerlag, pArt)

{

                        this.Ort = pOrt;

                        this.Buecher = new Buecher(pTitel, pVerlag, pArt)

                        Buecherei.prototype.Ausleih = "nicht ausgeliehen";                              ‚hier muss Buecherei statt this stehen

                        Buecherei.prototype.ausleihen = ausleihen;

                        Buecherei.prototype.zurueckgeben = zurueckgeben;

}

            Buecherei = new Buecherei("Offenburg", "Workshop JavaScript", "Addison", "Sachbuch)

            im Unterobjekt müssen die Methoden/Eigenschaften ebenfalls angegeben werden!!!!

            function Buecher(pTitel, pVerlag, pArt)

{

                        this.Titel = pTitel;

                        this.Verlag = pVerlag;

                        this.Art = pArt;

                        this.Ausleih = "nicht ausgeliehen";                                           

                        this.ausleihen = ausleihen;

                        this.zurueckgeben = zurueckgeben;

}

function ausleihen()

{

            this.Ausleih = "ausgeliehen";                                                                ‚hier muss kein prototype stehen

}

function zurueckgeben()

{

            this.Ausleih = "nicht ausgeliehen";

}

Jetzt funktioniert unsere Methode auch für folgendes:

Buecherei.Buecher.ausleihen()

Info! Wichtig ist dass die Eigenschaft u. die Methoden ebenfalls im Zusatz-Objekt angegeben werden!

C:\Inetpub\wwwroot\Intranet\JAVA\INFO\buecherei1.htm

Alternative Darstellung

Die Variablen von Unterobjekten (Bucher) können auch alternativ einfacher dargestellt werden. Somit

Werden keine Variablen des Hauptobjektes (Buecherei) mit Variablen des Unterobjektes (Buecher)

vermischt.

Beispiel:

(Buecherei = new Buecherei("Offenburg", "Workshop JavaScript", "Addison", "Sachbuch“)

Alternativ:

function Buecherei(pOrt)

{

this.Ort = pOrt;

this.Buecher = new Buecher("JavaScript", "Hilbi", "Sachbuch")            ‘Die Variablen werden direkt hier angegeben

Buecherei.prototype.Ausleih = "nicht ausgeliehen";

Buecherei.prototype.ausleihen = ausleihen;

Buecherei.prototype.zurueckgeben = zurueckgeben;

}

Buecherei = new Buecherei("Offenburg");                                           ‚hier werden die Variablen nicht mehr vermischt

            function Buecher(pTitel, pVerlag, pArt)

{

this.Titel = pTitel;

this.Verlag = pVerlag;

this.Art = pArt;

this.Ausleih = "nicht ausgeliehen";

this.ausleihen = ausleihen;

this.zurueckgeben = zurueckgeben;

}

function ausleihen()

{

this.Ausleih = "ausgeliehen";

}

function zurueckgeben()

{

this.Ausleih = "nicht ausgeliehen";

}

Dies ist auch Vorraussetzung für die nächste Darstellungsart.

Strukturiertes Eigenes Objekt

In dem oberen Beispiel sind die Wert der einzelnen Objekte alle in einer Funktion zusammengewürfelt.

            Buecherei = new Buecherei("Offenburg", "Workshop JavaScript", "Addison", "Sachbuch)

Zudem ist nicht gleich klar zu welcher Wert welchem Objekte od. Zusatzobjekte angehört. Dies kann man jedoch auch strukturierter

wie folgt lösen:

            ’Werte des Zusatz-Objekts werden definiert

            Buecher[0] = new Buecher("ASP", "bhv", "Sachbuch")

            Buecher[1] = new Buecher("Gianna Nannini", "Ultimo", "Biographie")

            ’Hauptobjekt

            function Buecherei(pOrt)

{

                        this.Ort = pOrt;

                        this.Buecher = Buecher

                        Buecherei.prototype.Ausleih = "nicht ausgeliehen";

                        Buecherei.prototype.ausleihen = ausleihen;

                        Buecherei.prototype.zurueckgeben = zurueckgeben;

}

Buecherei = new Buecherei("Offenburg")

function Buecher(pTitel, pVerlag, pArt)

{

            this.Titel = pTitel;

            this.Verlag = pVerlag;

            this.Art = pArt;

            this.Ausleih = "nicht ausgeliehen";

            this.ausleihen = ausleihen;

            this.zurueckgeben = zurueckgeben;

}

function ausleihen()

{

this.Ausleih = "ausgeliehen";

}

function zurueckgeben()

{

this.Ausleih = "nicht ausgeliehen";

}

            document.write (Buecherei.Buecher[0].Titel)

            document.write (Buecherei.Buecher[1].Titel)

            Buecherei.Buecher[0].ausleihen