JavaScript – Prototyping – jQuery

Prototyping

Mit Prototyping kann man einem Objekt neue Funktionen zuweisen. Bspw. dem bereits in JavaScript existierenden Objekt Array wird die Funktion „heuhaufen“ zugewiesen, mit der man dann global in Arrays nach einem String suchen kann. Die Funktion gibt TRUE oder FALSE zurück, je nach Erfolg:

// neuen Prototyp erzeugen
// nadel ist der Parameter
Array.prototype.heuhaufen = function (nadel) {
    // 'this' bezieht sich auf den Array-Namen
    // bzw. das spezifisch angesprochene Array
    var i = this.length;
    while (i--) {
        if (this[i] === nadel) return true;
    }
    return false;
}
var arr = ["Hase", "Igel", "Maus", "Tiger"];
var erg = arr.heuhaufen("Maus");
// erg => TRUE

var zahlen = [1,2,3,4,5,6,7,8,9];
var result = zahlen.heuhaufen(4);
// 'result' => TRUE
var result = zahlen.heuhaufen(123);    
// 'result' => FALSE

Das geht mit allen Objekten.
Wir definieren ein neues Objekt Namens „Player“ und fügen anschließend eine Methode hinzu die alle Eigenschaften eines Players zur einer Ausgabe zusammenfügt und zurückgibt. Die Rückgabevariable ‚html‘ wird dann ausgegeben.

<button id="btn">CLICK</button>
<button id="del">Delete</button>
<div id="info"></div>

<script>
var Players = [];
// Mannschaft, alle Player werden hier gesammelt

// Deklaration des neuen Objektes "Player"
var Player = function (id, name, age) {https://vpix.de/wp-admin/post.php?post=3422&action=edit
    // Objekt hat diese Eigenschaften:
    this.id = id;
    this.name = name;
    this.age = age;

    // neuen Player zu Array "Players" hinzufüg.
    Players.push(this);
}

// hinzufuegen einer neuen Methode fuer 
// das eben erstellte Objekt Player
Player.prototype.printPlayer = function () {
    var html = "Player Name: " + this.name;
    html += "<br>ID: " + this.id;
    html += "<br>Age: " + this.age + "<hr>";
    info.innerHTML += html;
    return html;
}

// Erstellen neuer Objekte "Player"
var player1 = new Player(15, "Fritz", 45);
var player2 = new Player(27, "Emil", 78);
var player3 = new Player(77, "Elvis", 18);

// Ausgabe aus Knopfdruck aller Spieler
document.getElementById("btn").onclick = function () {
    console.log(Players);
    for (var i=0; i<Players.length; i++) {
        document.getElementById("info").innerHTML += Players[i].printPlayer();
    }
}

// Ausgabefeld löschen
document.getElementById('del').onclick = function() {
    document.getElementById('info').innerHTML = '';
}
</script>

jQuery

(auch: jQuery Core) ist eine freie JavaScriptBibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. Die von John Resig entwickelte Bibliothek wurde im Januar 2006 auf dem BarCamp (NYC) in New York veröffentlicht und wird laufend weiterentwickelt.

Derzeit werden mit 1.x und 2.x zwei unabhängige Versionsstränge gepflegt, die sich hinsichtlich der Browserkompatibilität unterscheiden. Die Versionen 1.x (ab 1.9) und 2.x besitzen eine kompatible API.

(Quelle: Wikipedia)

jQuery wird mit einem Tag eingebunden in die eigene Website:

 

Print Friendly, PDF & Email

Schreibe einen Kommentar