Websiteentwicklung: JavaScript: Objekte, Eigenschaften und Methoden
<< Schleifen | Inhaltsverzeichnis | Index | HTML-Objekte >>
Einleitung
BearbeitenJavaScript ist eine „objektorientierte“ Scriptsprache. Insofern ist es nur logisch, sich einmal intensiver mit den Objekten zu befassen. Dass dies erst so spät geschieht, hängt damit zusammen, dass „objektorientierte Programmierung“ und Objekte wegen ihrer Komplexität nicht unbedingt ein Einstiegsthema sind. Eine Einführung in die objektorientierte Programmierung kann und will dieses Kapitel nicht geben.
Was ist ein Objekt?
BearbeitenIn JavaScript haben wir es mit 3 Arten von Objekten zu tun.
Allen gemeinsam ist das Objekt-Konzept. Objekte verfügen über „Eigenschaften“ (auch Attribute oder Properties genannt) und „Methoden“ (auch Prozeduren oder Funktionen genannt). Eigenschaften und Methoden können - müssen aber nicht -
- geerbt (von übergeordneten Objekten) und
- vererbt (an untergeordnete Objekte)
werden. Wichtig ist, dass die Methoden und Eigenschaften des Objektes „gekapselt“ sind. Die Methode eines Objektes kann vom Anwendungsprogrammierer nicht verändert werden - sie verhält sich an allen Stellen des Programmes gleich. Die Eigenschaften und Methoden des Objektes bilden eine Einheit. Es können auch nur die Eigenschaften eines Objektes verändert werden, die der Konstrukteur dieses Objektes zum Schreiben freigegeben hat.
Alltagsbeispiel: Auto
BearbeitenWir wollen - obwohl solche Vergleiche naturgemäß etwas hinken - versuchen, den Objektbegriff an einer Situation aus dem Alltag zu verdeutlichen.
Ein Auto ist ein Objekt mit
- Eigenschaften:
- Farbe
- Anschaffungspreis
- Baujahr
- aktuelles Gewicht
- Leergewicht
- Geschwindigkeit
- Höchstgeschwindigkeit
- Tankinhalt
- ...
- Methoden
- starten
- beschleunigen
- bremsen
- schalten
- beladen
- entladen
- tanken
- ...
Das Objekt „Auto“ hat einige seiner Eigenschaften und Methoden vom hierarchisch übergeordneten Objekt „Fahrzeuge“ geerbt. Es vererbt einige seiner Eigenschaften und Methoden an das untergeordnete Objekt „Sportwagen“ oder „Cabriolet“. Einige Methoden sind bei allen diesen Typen gleich:
- mit der Methode „beschleunigen“ können wir die Eigenschaft „Geschwindigkeit“ bis zur Eigenschaft „Höchstgeschwindigkeit“ vergrößern
- mit der Methode „entladen“ können wir die Eigenschaft „Gewicht“ bis auf die Eigenschaft „Leergewicht“ reduzieren.
- mit der Methode „bremsen“ können wir die Eigenschaft „Geschwindigkeit“ bis auf „0“ verkleinern
- mit der Methode „lackieren“ des Objektes „Werkstatt“ können wir die Eigenschaft „Farbe“ ändern
- die Eigenschaft „Baujahr“ ist schreibgeschützt und kann nicht verändert werden
- die Eigenschaft „Anschaffungspreis“ ist schreibgeschützt und kann nicht verändert werden
- wenn die Eigenschaft „Tankinhalt“ = 0
- sinkt die Eigenschaft „Geschwindigkeit“ auf 0
- bis die Methode „Tanken„“ den Tank gefüllt hat (eventuell nach Nutzung der Methode „abschleppen“ eines anderen Fahrzeuges)
- und die Methoden „starten“, „schalten“, „beschleunigen“ die Eigenschaft „Geschwindigkeit“ wieder gesteigert haben.
EDV-Beispiele
BearbeitenBeispiele für HTML-Objekte und JavaScript-Objekte haben wir schon in den Kapiteln Das erste Programm (Hallo Welt), Werte und Variablen und Programmablauf und Kontrollstrukturen verwendet - nämlich „Form“, „Textfeld“ und „Button“. Auch JavaScript-Objekte haben wir bereits verwendet - nämlich die Objekte „window“ und das diesem untergeordnete Objekt „document“.
Objekt-Syntax
BearbeitenAllgemein: Eigenschaften + Methoden
Bearbeiten| Wikipedia: Objekteigenschaften – enzyklopädische Informationen |
Das Schlüsselwort „with“
BearbeitenUm das Aufrufen der Objekte innerhalb einer Hierarchie zu erleichtern (und Tipparbeit zu ersparen), gibt es das Schlüsselwort „with“.
Beispiel:
with(document.Formular1)
{
txtText1.value ....
txtText2.value ....
btnButton.value ....
radButton[i].value ....
chkBox[j].checked ....
....
....
....
btnButton.value ....
}
Alle untergeordneten Objekte können dann ohne das vorangestellte „document.Formular1.“ angesprochen werden. Die genauere Beschäftigung mit den einzelnen HTML-Objekten würde den Rahmen dieses WikiBooks sprengen. In den folgenden Abschnitten wird nur das Wichtigste zu diesen Objekten erklärt - der Schwerpunkt liegt auf der Handhabung der HTML-Objekte unter JavaScript.
Das Schlüsselwort „this“
BearbeitenDas Schlüsselwort „this“ bezieht die folgende Anweisung auf das aktuelle Objekt. Wenn zum Beispiel ein Formular (Name z.B. Form1) mit einem Eingabefeld und einem Button erstellt wird und der Anwender auf den Button klickt, tritt z.B. der Event-Handler „onclick“ in Aktion, der als eines der Attribute im input-Tag steht.
Im HTML/JavaScript-Code müsste eigentlich notiert werden:
<form name="Form1">
<input type="button" name="btnClick" value="ClickMe!" onClick="fAusgabe(window.document.Form1.btnClick.value);">
</form>
Innerhalb des Formulars, auf das sich die Anweisung bezieht, können Sie jedoch auch schreiben:
<form name="Form1">
<input type="button" name="btnClick" value="ClickMe!" onClick="fAusgabe(this.value);">
</form>
HTML-Objekte
BearbeitenUnter den JavaScript-Objekten „window“ und dem diesem untergeordneten Objekt „document“ liegen die HTML-Objekte. Dies können Frames (als eigene Windows), Formulare, Textfelder, Buttons, Checkboxen, Radiobuttons, Grafiken, Listen, Auswahllisten, Labels ... sein. Während im HTML-Code die Beschriftung mit name="oName" optional ist, ist sie unter JavaScript beinahe zwingend - das Objekt muss sonst umständlich und fehlerträchtig über „document.forms[n].elements[m]...“ angesprochen werden. Mit Namen wird das Objekt komfortabel aufgerufen, indem das hierarchisch oberste Objekt zuerst genannt wird (das Objekt „window“ kann entfallen) und die untergeordneten Objektnamen durch einen Punkt mit dem vorher genannten, übergeordneten Objekt verbunden werden.
var x=Object.SubObject.SubSubObject. ... .Method(Parameter); // z.B. für eine Methode
// oder
var x=Object.SubObject.SubSubObject. ... .Property.value; // für eine Eigenschaft
Wenn es im Dokument ein Formular „Form1“ gibt und im Formular ein Textfeld „txtText1“ so würde der Inhalt dieses Objektes - z.B in einer Alert-Box - angesprochen mit:
alert(document.Form1.txtText1.value);
und würde dann in einer Dialogbox den Inhalt des Textfeldes ausgeben.
Details zu HTML-Objekten finden Sie im nächsten Kapitel
JavaScript-Objekte
BearbeitenEine Vielzahl von Objekten wird direkt von JavaScript zur Verfügung gestellt - window, document, Math, String, Array ... . Details zu diesen JavaScript-Objekten finden Sie im Kapitel „screen, window, document, navigator“ und den daran anschließenden Kapiteln.
Selbst erstellte Objekte
BearbeitenIm Rahmen objektorientierter Programmierung bietet JavaScript auch die Möglichkeit, eigene Objekte zu definieren. Anlass kann zum Beispiel sein, einen ganzen Satz zusammengehöriger Variablen an eine Funktion zu übergeben. Auch kann das Objekt mit eigenen Methoden ausgestattet werden, die auf den Eigenschaften des Objektes operieren und mit diesen zusammen eine gekapselte Einheit bilden.
Die Definition des Objektes erfolgt mit dem Schlüsselwort „function“, dem Objekt-Namen und zwischen runden Klammern folgen die Übergabeparameter, die den Eigenschaften des Objektes zugewiesen werden sollen. Zwischen den geschweiften Klammern des Funktionsrumpfes werden dann die Namen der Eigenschaften mit „this.Eigenschaft“ festgelegt und mit einem Gleichheitszeichen mit dem Übergabeparameter verknüpft. Hinter dem Parameter kann hinter zwei Abwärtsstrichen („||“) ein Default-Wert für einen leeren bzw. undefinierten Übergabe-Parameter angegeben werden.
Zu definierende Methoden des Objektes werden durch den Namen der Methode und einen zugewiesenen Funktionsnamen erzeugt. Diese Funktion muss außerhalb der Objektdefinition angelegt werden. Auch für diese Funktionen können Übergabeparameter definiert werden.
Syntax:
function oObjektName(Parameter_1, Parameter_2, ...., Parameter_n)
{
this.Eigenschaft_1=Parameter_1 ||Defaultwert_1;
this.Eigenschaft_2=Parameter_2 ||Defaultwert_2;
...
this.Eigenschaft_n=Parameter_n ||Defaultwert_n;
this.Methode_1=fObjectMethode_1;
this.Methode_2=fObjectMethode_2;
...
this.Methode_n=fObjectMethode_n;
}
function fObjectMethode_1([MethodenParameter_1])
{
Anweisung_1 der Methode_1;
...
Anweisung_n der Methode_1;
}
......
......
......
function fObjectMethode_n([MethodenParameter_1])
{
Anweisung_1 der Methode_n;
...
Anweisung_n der Methode_n;
}
Alternativ kann eine Methode auch wie folgt eingeführt werden:
function oObjektName(Parameter_1, Parameter_2, ...., Parameter_n)
{
this.Eigenschaft_1=Parameter_1 ||Defaultwert_1;
this.Eigenschaft_2=Parameter_2 ||Defaultwert_2;
...
this.Eigenschaft_n=Parameter_n ||Defaultwert_n;
this.Methode_1=function ([MethodenParameter_1])
{
Anweisung_1 der Methode_1;
...
Anweisung_n der Methode_1;
}
...
...
...
this.Methode_n=function ([MethodenParameter_1])
{
Anweisung_1 der Methode_n;
...
Anweisung_n der Methode_n;
}
}
Diese Beschreibung hört sich ziemlich theoretisch an - die Implementierung von Eigenschaften und Methoden wird an den beiden folgenden Beispielen aber schnell deutlich.
Beispiel 1 - Kunden-Formular
BearbeitenIm folgenden Beispiel wird eine eigene Objektstruktur mit dem Namen Adresse über die Anweisung „function Adresse()“ definiert. Anschließend wird eine Variable „Kunde“ vom Typ „Adresse“ erzeugt. Mit der Schaltfläche „Objekt aus Textfeldern laden“ werden die Textfelder den Eigenschaften des Objektes „Kunde“ zugewiesen. Die Objektvariable bleibt auch nach Löschen der Textfelder geladen und kann wahlweise über die Schaltfläche „Objekt von außerhalb zeigen“ im mehrzeiligen Textfeld, über die Schaltfläche „Textfelder aus Objekt befüllen“ in den ursprünglichen Textfeldern oder über die Schaltfläche „Objekt-Methode : Objekt.Show“ mit Hilfe einer Objekt-Methode in einer Alert-Box dargestellt werden. Diese „Show“-Methode ist ein Beispiel für eine Objekt-Methode ohne Parameter.
<html>
<head>
<title>JavaScript - ObjectAddress</title>
<script type="text/javascript">
var Kunde = new Adresse;
function Adresse(Name, Vorname, Strasse, PLZ, Ort)
{
this.Name=Name;
this.Vorname=Vorname;
this.Strasse=Strasse;
this.PLZ=PLZ;
this.Ort=Ort;
this.Show=fObjectShowIntern;
}
function fObjectShowIntern()
{
var Meldung=""
Meldung = "Kunde.Vorname = " + this.Vorname + "\n";
Meldung = Meldung + "Kunde.Name = " + this.Name + "\n";
Meldung = Meldung + "Kunde.Strasse = " + this.Strasse + "\n";
Meldung = Meldung + "Kunde.PLZ = " + this.PLZ + "\n";
Meldung = Meldung + "Kunde.Ort = " + this.Ort;
alert(Meldung);
}
function fObjectLoad()
{
with (document.Form1)
{
Kunde.Name=txtName.value;
Kunde.Vorname=txtVorname.value;
Kunde.Strasse=txtStrasse.value;
Kunde.PLZ=txtPLZ.value;
Kunde.Ort=txtOrt.value;
}
}
function fTxtFill()
{
with (document.Form1)
{
txtName.value=Kunde.Name;
txtVorname.value=Kunde.Vorname;
txtStrasse.value=Kunde.Strasse;
txtPLZ.value=Kunde.PLZ;
txtOrt.value=Kunde.Ort;
}
}
function fObjectShowExtern()
{
with (document.Form1)
{
txtAusgabe.value = "Kunde.Vorname = " + Kunde.Vorname + "\n";
txtAusgabe.value = txtAusgabe.value + "Kunde.Name = " + Kunde.Name + "\n";
txtAusgabe.value = txtAusgabe.value + "Kunde.Strasse = " + Kunde.Strasse + "\n";
txtAusgabe.value = txtAusgabe.value + "Kunde.PLZ = " + Kunde.PLZ + "\n";
txtAusgabe.value = txtAusgabe.value + "Kunde.Ort = " + Kunde.Ort;
}
}
function fObjectShowMethod()
{
Kunde.Show()
}
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body>
<h2>JavaScript - ObjectAddress</h2>
<form target="" name="Form1">
<table >
<tr>
<td>Name : </td>
<td><input type="Text" name="txtName" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td>Vorname : </td>
<td><input type="Text" name="txtVorname" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td>Straße : </td>
<td><input type="Text" name="txtStrasse" value="" size="" maxlength="30"></td>
</tr>
<tr>
<td>PLZ : </td>
<td><input type="Text" name="txtPLZ" value="" size="" maxlength="5"></td>
</tr>
<tr>
<td>Ort</td>
<td><input type="Text" name="txtOrt" value="" size="" maxlength="30"></td>
</tr>
<tr>
<td>
<input type="Reset"
name="btnReset"
value="Alle Textfelder loeschen">
</td>
<td>
<input type="Button"
name="btnFill"
value="Textfelder aus Objekt befuellen"
onClick="fTxtFill()">
</td>
</tr>
<tr>
<td>
<input type="Button"
name="btnLoad"
value="Objekt aus Textfeldern laden"
onClick="fObjectLoad()">
</td>
<td>
<input type="Button"
name="btnShow"
value="Objekt von außerhalb anzeigen"
onClick="fObjectShowExtern()">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="Button"
name="btnShow"
value="Objekt-Methode : Objekt.Show"
onClick="fObjectShowMethod()">
</td>
</tr>
</table>
<br>
<textarea name="txtAusgabe" rows="5" cols="40"></textarea>
</form>
</body>
</html>
Beispiel 2 - Artikel-Formular
BearbeitenIm zweiten Beispiel sehen Sie eine Artikel-Maske. Das Objekt Artikel hat
- 8 Eigenschaften
- Nr
- Name
- EKPreis
- VKPreis
- LagerBestand
- LagerWert
- VKMenge
- VKWert
- 3 Methoden
- Show (zeigt das Objekt) - Beispiel für eine Methode ohne Übergabe-Parameter
- Einkauf (lagert eine bestimmte Stückzahl des Artikels zum EK-Preis ein) - Beispiel für eine Methode mit Übergabe-Parameter (Stückzahl)
- Verkauf (verkauft eine bestimmte Stückzahl des Artikels zum VK-Preis) - Beispiel für eine Methode mit Übergabe-Parameter (Stückzahl)
Die hier verwendeten Tags <fieldset> und <legend> haben nur eine optisch gliedernde Funktion, sind an dieser Stelle für JavaScript ohne Belang und sind im nächsten Kapitel HTML-Objekte näher beschrieben.
<html>
<head>
<title>JavaScript - Object Artikel-Stammsatz</title>
<script type="text/javascript">
var Artikel = new ArtikelStammsatz;
function ArtikelStammsatz(Nr, Name, EKPreis, VKPreis, LagerBestand, LagerWert, VKMenge,VKWert)
{
this.Nr=Nr;
this.Name=Name;
this.EKPreis=EKPreis;
this.VKPreis=VKPreis;
this.LagerBestand=LagerBestand;
this.LagerWert=LagerWert;
this.VKMenge=VKMenge;
this.VKWert=VKWert;
this.Show=fObjectShow;
this.Einkauf=fObjectEinkauf;
this.Verkauf=fObjectVerkauf;
}
function fObjectShow()
{
var Meldung=""
Meldung = "Artikel.Nr = " + this.Nr + "\n";
Meldung = Meldung + "Artikel.Name = " + this.Name + "\n";
Meldung = Meldung + "Artikel.EKPreis = " + this.EKPreis + "\n";
Meldung = Meldung + "Artikel.VKPreis = " + this.VKPreis + "\n";
Meldung = Meldung + "Artikel.LagerBestand = " + this.LagerBestand + "\n";
Meldung = Meldung + "Artikel.LagerWert = " + this.LagerWert + "\n";
Meldung = Meldung + "Artikel.VKMenge = " + this.VKMenge + "\n";
Meldung = Meldung + "Artikel.VKWert = " + this.VKWert;
alert(Meldung);
}
function fObjectEinkauf(Mg)
{
Artikel.LagerBestand=Artikel.LagerBestand + Mg;
Artikel.LagerWert=Artikel.EKPreis * Artikel.LagerBestand;
}
function fObjectVerkauf(Mg)
{
Artikel.LagerBestand=Artikel.LagerBestand - Mg;
Artikel.LagerWert=Artikel.EKPreis * Artikel.LagerBestand;
Artikel.VKMenge=Artikel.VKMenge + Mg;
Artikel.VKWert=Artikel.VKWert + (Mg*Artikel.VKPreis);
}
function fObjectLoad()
{
with (document.Form1)
{
Artikel.Nr=txtNr.value;
Artikel.Name=txtName.value;
Artikel.EKPreis=parseFloat(txtEKPreis.value);
Artikel.VKPreis=parseFloat(txtVKPreis.value);
Artikel.LagerBestand=parseInt(txtLagerBestand.value);
Artikel.LagerWert=Artikel.LagerBestand*Artikel.EKPreis;
Artikel.VKMenge=parseInt(txtVKMenge.value);
Artikel.VKWert=parseFloat(txtVKWert.value);
}
}
function fTxtFill()
{
with (document.Form1)
{
txtNr.value=Artikel.Nr;
txtName.value=Artikel.Name;
txtEKPreis.value=Artikel.EKPreis;
txtVKPreis.value=Artikel.VKPreis;
txtLagerBestand.value=Artikel.LagerBestand;
txtLagerWert.value=Artikel.LagerWert;
txtVKMenge.value=Artikel.VKMenge;
txtVKWert.value=Artikel.VKWert;
}
}
function fShow()
{
fTxtFill();
Artikel.Show()
}
function fEinkauf()
{
var EkMg=parseInt(prompt("Einkaufs-Menge : "));
Artikel.Einkauf(EkMg);
fTxtFill();
}
function fVerkauf()
{
var VkMg=parseInt(prompt("Verkaufs-Menge : "));
Artikel.Verkauf(VkMg);
fTxtFill();
}
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body>
<h2>JavaScript - Artikel-Stammdaten</h2>
<form target="" name="Form1">
<fieldset>
<legend><b><i>Artikel-Stammdaten</i></b></legend>
<table >
<tr>
<td bgcolor="#FFFF88">Nr : </td>
<td><input type="Text" name="txtNr" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">Name : </td>
<td><input type="Text" name="txtName" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">EK-Preis : </td>
<td><input type="Text" name="txtEKPreis" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">VK-Preis : </td>
<td><input type="Text" name="txtVKPreis" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">Lager-Bestand : </td>
<td><input type="Text" name="txtLagerBestand" value="" size="" maxlength="20"></td>
</tr>
<tr>
<tr>
<td bgcolor="#FFFF88">Lager-Wert : </td>
<td><input type="Text" name="txtLagerWert" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">VK-Menge : </td>
<td><input type="Text" name="txtVKMenge" value="" size="" maxlength="20"></td>
</tr>
<tr>
<td bgcolor="#FFFF88">VK-Wert : </td>
<td><input type="Text" name="txtVKWert" value="" size="" maxlength="20"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><b><i>Aktionen</i></b></legend>
<table>
<tr>
<td>
<input type="Reset"
name="btnReset"
value="Alle Textfelder loeschen">
</td>
<td>
<input type="Button"
name="btnFill"
value="Textfelder aus Objekt befuellen"
onClick="fTxtFill()">
</td>
</tr>
<tr>
<td>
<input type="Button"
name="btnLoad"
value="Objekt aus Textfeldern laden"
onClick="fObjectLoad()">
</td>
<td>
<input type="Button"
name="btnShow"
value="Objekt-Methode : Objekt.Show"
onClick="fShow()">
</td>
</tr>
<tr>
<td>
<input type="Button"
name="btnShow"
value="Artikel einlagern"
onClick="fEinkauf()">
</td>
<td>
<input type="Button"
name="btnShow"
value="Artikel verkaufen"
onClick="fVerkauf()">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Aufgaben + Lösungen
Bearbeiten<< Schleifen | HTML-Objekte >>