Ein benutzerdefiniertes Objekt, dass von einem Html Element erbt

Hier geht es darum, dass man ein Objekt erstellt, dass von einem HTML Element erbt. So hat man die Möglichkeit das HTML Element zu erweitern um Eigenschaften, Methoden und Events.

Web Api Referenz listet die HTML Elemente auf.
Siehe auch benutzerdefinierte Elemente

Wenn man ein benutzerdefiniertes Element erstellt, muss man dieses auf der Seite registrieren mittels:
CustomElementRegistry.define() Die Parameter sind:

  1. Ein Dom String, welcher den Namen repräsentiert.
    Dieser selbst vergebene Name muss einen Bindestrich enthalten z.B.: thumb-nail
  2. Ein Klassenobjekt welches zuvor definiert wurde ThumbNail
  3. Ein Optionsobjekt, das eine extends -Eigenschaft enthält. Es wird angegeben von wem das Objekt erbt.
   customElements.define('thumb-nail', ThumbNail, { extends: 'p'});

Wie schon auf der vorigen Seite wird eine Klasse erzeugt, doch hier erbt sie vom HTML Paragraph Element anstatt von Image. Weitere HTML Elemente siehe hier unter HTML. Anschließend erfolgt die Registrierung. Nun kann man Instanzen erzeugen.

        class ThumbNail extends HTMLParagraphElement {
            constructor(wort) {
                // super Funktion im Konstruktor aufrufen
                super();
                // Hier werden eigene Eigenschaften und Methoden definiert
                this.innerHTML = wort;
            }
        }
        
        customElements.define('thumb-nail', ThumbNail, {
            extends: 'p'
        });
        
        let t1 = new ThumbNail("Hallo");
        document.body.appendChild(t1);

Ein Div Element für ein Spiel erweitern

Ich zeige hier ein paar Step by Step Beispiele für die Praxis. Entnehmen Sie den Quellcode den Beispielen. Es handelt sich dabei um laufende Kamele in der Wüste, welche explodieren, wenn man sie anklickt. Im letzten Beispiel werden neue Kamel erzeugt, wenn man die Wüste anklickt. Ein Camel Case mal ganz anders.

Beispiel 0

Ein Objekt wird erzeugt, dass von einem Div Element erbt. Es bekommt CSS Eigenschaften und ein Bild.

Beispiel 1

Das Objekt bekommt ein Funktion namens move, in der das Objekt von rechts nach links wandert. Dazu werden die CSS Eigenschaften position:absolute; und left genutzt.

Beispiel 2

Das Objekt bringt sich selbst auf die Seite mit document.body.appendChild(this);

Das Objekt selbst wird mit setInterval() bewegt. Das ist nicht ganz einfach, denn man kann innerhalb von setInterval nicht this benutzen. Siehe dazu iTecNote Über var _this=this; wird das Problem gelöst.

Beispiel 3

Hier eine Alternative zur vorigen Version. Es wird setInterval mit einer Big Arrow Funktion versehen, da diese kein eigenes this kennt. Siehe dazu iTecNote Außerdem wird setInterval der Eigeschaft this.go zugewiesen, damit man es später stoppen kann. Siehe auch setInterval

Es gibt eine neue Methode this. explode(). Durch Anklicken erscheint anstatt des Kamel-Bildes ein Explosions-Bild und die Animation wird gestoppt mit clearInterval. Die Methode this. explode() wird einem EventListener zugewiesen.

Beispiel 4

Im letzten Schritt wird das Objekt nach dem Anklicken entfernt remove(). Diese Funktion wird mittels setTimeout aufgerufen, damit das erst geschieht, wenn die Gif-Animation abgelaufen ist. Wie bei setInterval wird auch in setTimeout eine Big Arrow Funktion genutzt, da diese kein eigenes this hat.

In allen vorigen Versionen entstehen horizontalen Scrollleisten, da die Objekte über den linken oder rechten Fensterrand hinaus positioniert werden. Dieser Schönheitsfehler wird hier korrigiert. Es wird ein Elternelement im Body erzeugt und mit CSS overflow:hidden ausgestattet. Dieses Element wird dem Objekt als Parameter übergeben. Mittels appendChild wird das Objekt in diesen Elterncontainer geladen.

Da der Elterncontainer position:relative hat, richten sich die Objekte an ihm aus. Die vertikale Positionierung per CSS wurde geändert in this.style.bottom. Die Objekte bekommen neue yPos Werte von der Unterkante aus. Das ist einfacher.

Da das Explosions-Bild zu tief erscheint, wird das Objekt etwas höher gesetzt. (yPos + 50)+"px"

Das Explosionsbild wird im Head Bereich vorausgeladen. <link rel="preload" href="xPlode.gif" as="image">

Beipsiel5

Hier werden neue Kamele erzeugt, wenn man die Wüste anklickt. Hier sieht man auch den Vorteil der Objekt orientierten Programmierung, denn das erstellen einer new Camel() Instanz ist sehr simple. Die Mausposition liefert der Event Parameter. evt.clientX und evt.clientY.

Der Container der Kamele bekommt den Event Listener, für die makeCamel() Funktion. Wenn man ein einzelnes Camel anklickt, um es zu zerstören oder um die Methode this.explode() aufzurufen, wird dieses Ereignis weitergereicht an den Container, dadurch wird beim Zerstören auch der Befehl makeCamle() aufgerufen. Damit diese Weiterreichung nicht stattfindet muss der Eventfluß gestoppt werden mit stopPropagation. siehe dazu Event Phasen

let e = evt || window.event; // Event holen
e.stopPropagation();

Beipsiel6

In diesem Beispiel wurde eine grundlegende Änderung vorgenommen und zwar wurde requestAnimationFrame() eingesetzt, statt setInterval. Um eine unterschiedliche Laufgeschwindigkeit zu erzeugen, wurde der Parameter speed dahingehend geändert, dass er nicht mehr die Aktualisierung des Zeitintervals definiert sondern, die Pixelgröße um die sich ein Camel nach links bewegt. Der Wert wurde dann in allen Objekten zwischen 1 und 2 gesetzt. requestAnimationFrame ist eigentlich der bessere Weg, da die Animation performanter läuft.

Weitere Beispiele Objekt Car setInterval, clearInterval

Hier sind 3 weitere Step by Step Beispiele. Die Image Klasse wird erweitert. Es ist ein fahrendes Auto, welches man auf Anklicken startet und nochmaliges Klicken wieder stoppt, siehe Quelltexte.

Car 1, Car 2, Car 3

 

Javascript Tipps