Kleiner JavaScript Kurs

Klassen

Wenn man in einem Programm mehrere ähnliche Objekte benötigt, kann man sich als "Vorlage" eine Klasse erstellen
Wir werden in diesem Beispiel eine Klasse für Tiere erzeugen und damit Tier - Objekte für einen Hund, eine Katze, einen Vogel und einen Frosch erstellen.
Für weitere Experimente habe ich im Ordner "images" die Bilder

cat.png

dog.png

bird.png

frog.png

und die Sounds im Ordner "sound"

cat.wav

dog.wav

bird.wav

frog.wav

gespeichert.

Im Script gibt es dafür das Schlüsselwort class. Außerdem sollte man in der Klasse einen Constructor anlegen, in dem die Übergabe - Eigenschaften in Variable gespeichert werden.

class Animal{
      constructor(art, klasse, bild){
        this.art = art;
        this.klasse = klasse;
        this.bild = bild;
      }

Die Klasse und die Variablen kann man im Programm folgendermaßen verwenden:

const katze = new Animal("Katze", "Säugetier", "images/cat.png");
alert(katze.art);

Nach dem Constructor kann man auch noch weitere Methoden definieren, z.B. zum Anzeigen eines Bildes, oder zum Ausgeben eines Sounds, oder für Berechnungen, ...

class Animal{
      constructor(art, klasse, bild){
        this.art = art;
        this.klasse = klasse;
        this.bild = bild;
      }
    bildAnzeigen(){
       var DOM_img = document.createElement("img");
       DOM_img.src = this.bild;
       document.body.appendChild(DOM_img);
        }  
    }
katze.bildAnzeigen();

Hier die HTML-Seite mit dem kompletten Beispiel

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        
    </head>                   
    <body>
		<h1>Klassen in JavaScript</h1>
        <h2 id="ausgabe"></h2>
        
      	<script>
            var ausgabe = document.getElementById("ausgabe");
      		class Animal{
              constructor(art, klasse, bild){
                this.art = art;
                this.klasse = klasse;
                this.bild = bild;
              }
            bildAnzeigen(){
               var DOM_img = document.createElement("img");
			   DOM_img.src = this.bild;
			   document.body.appendChild(DOM_img);
            	}  
            }
           const katze = new Animal("Katze", "Säugetier", "images/cat.png");
           //alert(katze.art);
      	   ausgabe.innerHTML = katze.art;
           ausgabe.innerHTML += "<br>" + katze.klasse;
      	   katze.bildAnzeigen();
           const frosch = new Animal("Frosch", "Amphibie", "images/frog.png");
           frosch.bildAnzeigen();
        </script>
    </body>
</html>