Objekte und Methoden

Ein Objekt hat Eigenschaften und Methoden.

Für eine Objekt namens Person sind das die Eigenschaften name und alter und die Methode welche das Alter ausgeben soll getAlter.
Im Anschluss daran erzeuge ich zwei Instanzen des Objektes: mom und dad. Die Methode getAlter gibt jetzt das Alter der jeweiligen Instanz aus, z.B.
mom.getAlter()

Beispiel:

function Person( name, alter ){

   // Eigenschaften von Person
   this.name = name;
   this.alter = alter;

   // Methode von Person
   this.getAlter = function(){
      return this.alter;
   }
}

// Erzeugen der Instanzen für Mutter und Vater
const mom = new Person('Anna',35);
const dad = new Person('Ben',40);

// Ausgabe des jeweiligem Alters
alert( 'Das Alter von Mutter ist: ' + mom.getAlter() );
alert( 'Das Alter von Vater ist: ' + dad.getAlter() );

Doch sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel
Alter der Mutter:
Alter des Vaters:

Gib mir bitte das Alter der Mutter
Gib mir bitte das Alter des Vaters

Code


HTML:

Alter der Mutter: <span id="mom_alter"></span><br>
Alter des Vaters: <span id="dad_alter"></span><br>
<br>
<a href="javascript:writeToSpan('mom')">
Gib mir bitte das Alter der Mutter</a><br>
<a href="javascript:writeToSpan('dad')">
Gib mir bitte das Alter des Vaters</a><br>



CSS:




JavaScript:

function Person( name, alter ){

// Eigenschaften von Person
   this.name = name;
   this.alter = alter;

// Methode von Person
   this.getAlter = function(){
      return this.alter;
   }
}

// Erzeugen der Instanzen und ablegen in einem Array
const instanz = [];
	  instanz['mom'] = new Person('Anna',35);
	  instanz['dad'] = new Person('Ben',40);

// Ausgabe des jeweiligem Alters
function writeToSpan( who ){
	
	// Id des Spans zusammenschrauben
	let whoId = '#'+who+'_alter';
	
	// Schreiben in den jeweiligen Span
	document.querySelector( whoId ).innerText = instanz[who].getAlter();	
}