Mit Hilfe von Variablen wird der Programmablauf gesteuert und die Eigenschaften von "Objekten", die auf dem Bildschirm ausgegeben werden, festgelegt. Diese Eigenschaften können mit Hilfe von Funktionen verändert werden. Ein solches Objekt kann ein Text sein oder eine Klickfläche (Button), genauso wie ein Bild oder einfach alles, was der Computer ausgeben kann (auf dem Bildschirm, mit dem Drucker, über Lautsprecher, über das Internet,...).
Solche Objekte können viele verschiedene Eigenschaften haben. Daher bietet JavaScript die Möglichkeit ein JavaScript-Objekt festzulegen, in dem unter einem Namen alle diese unterschiedlichen Eigenschaften in Form von Variablen und Funktionen gespeichert werden können. Der Vorteil eines solchen Ansatzes ist, dass du beim Aufruf einer Eigenschaft oder einer Funktion genau weisst, zu welchem Objekt diese gehört, da du zuerst den Namen des Objekts nennen musst.
Im folgenden Beispiel werden die Eigenschaften eines Kreises in einem Objekt obj_kreis festgelegt, dadurch weisst du immer, zu was die Variable z.B. fuellfarbe gehört. Verändere die Eigenschaften und beobachte den Kreis.
Hat man jetzt zwei Objekte mit gleichen Variablen, kann man diese klar voneinander trennen, da die Variablen nur dann verwendet werden können, wenn man den Objektnamen davorsetzt.
Auf die Eigenschaften kann man auch mit einer anderen Schreibweise zugreifen.
Neben den Eigenschaften kann man in einem Objekt auch Funktionen speichern, welche dieses Objekt verändern. Eine Funktion, die in einem Objekt gespeichert wird, nennt man Methode.
Zusätzlich zu den Eigenschaften wird jetzt ein Methode obj_kreis.verschieben(x_richtung, y_richtung) festgelegt, welche den Kreis um die angegebenen Werte in x- bzw. y-Richtung verschiebt.
Wenn ein Objekt mehrmals mit verschiedenen Eigenschaftswerten genutzt werden soll (wenn zum Beispiel viele gleichartige Kreise auf dem Bildschirm herumfliegen sollen), dann kann man dazu eine Objekt-Schablone erstellen. Mit Hilfe dieser Objekt-Schablone kann man dann neue Objekte erzeugen.
Wir legen jetzt eine Objekt-Schablone
function kreis_schablone(fuellfarbe, linienfarbe, dicke, durchmesser, xkoord, ykoord)
für die Kreise fest. Nachdem diese festgelegt ist, kannst du leicht neue Kreise mit einer einzigen Zeile anlegen:
var kreis01 = new kreis_schablone('skyblue', 'seagreen', 5, 80, 50, 50);
Ein Kreis wird gezeichnet, indem man die Objekt-Methode kreis01.zeichnen(); aufruft. Verschieben kann man einen Kreis mit der Objekt-Methode kreis01.verschieben(1, 2);.
Auf diese Weise bleibt die Hauptprogramm-Funktion function draw() übersichtlich.