DE EN

Die JavaScript Framework Matrix

soll einen Überblick der bekanntesten JavaScript-Frameworks und deren Funktionen geben. Zu jedem Framework gibt es verschiedene Beispiele und die dazugehörigen Links zur offiziellen Dokumentation. Die Wahl eines Frameworks hängt von vielen Faktoren ab und kann nicht ausschließlich durch dieses Dokument getroffen werden. Die Matrix soll lediglich die unterschiedlichen API-Stile sowie die Funktionsweisen der JavaScript-Bibliotheken veranschaulichen. Es gibt zudem noch weitere interessante Frameworks, die hier aufgelistet sind.

Sortierung:

Allgemein jQuery MooTools The Dojo Toolkit Prototype / Script.aculo.us Ext JS Adobe Spry BBC Glow Yahoo! UI Library

DOM Ready

Code Link 1 Quellcode Dokumentation:


										dojo.addOnLoad(function(){

											// Code

										});

DOM Basics

Code Link 1 Quellcode Dokumentation:


										dojo.query("#id, .class, div").style("background", "blue");

DOM Filtering

1 2 3

Code Link 1 Quellcode Dokumentation:


										dojo.query("div p").style("background", "blue");

										dojo.query("div[rel='test']").style("background", "blue");

										dojo.query("div p:nth-child(odd)").style("background", "blue");

DOM Manipulation

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										dojo.create("p", { innerHTML: "Zusätzlicher Inhalt" }, "id1");

										dojo.place(dojo.create("p", { innerHTML: "Neuer Inhalt" }), "id2", "replace");

										dojo.destroy("id3");

Effekte

1 2 3

Code Z Link 1 Link 2 Link 3 Zusatz Quellcode Dokumentation:


										dojo.fx.wipeOut({ node: "id1" }).play();

										dojo.fadeOut({ node: "id2", duration: 1000 }).play();

										dojo.anim("id3", { opacity: 0.5, height: 20 }, 1500);

Transitions

Code Z Link 1 Zusatz Quellcode Dokumentation:


										dojo.anim(

											"id",

											{ height: 20 },

											1500,

											dojo.fx.easing.bounceOut

										);

Events

Code Link 1 Quellcode Dokumentation:


										dojo.connect(dojo.byId("id"), "click", function(){

											dojo.style(this, "background", "red");

										});


										dojo.connect(dojo.byId("id"), "onmouseout", function(){

											dojo.style(this, "background", "blue");

										});

Eigene Funktionen

Code Link 1 Quellcode Dokumentation:


										dojo.extend(dojo.NodeList, {

											eigeneFunktion: function(parameter){

												this.style({

													"background": parameter.farbe,

													"border": parameter.rand

												});

											}

										});


										dojo.query("#id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Ajax

Code Link 1 Quellcode Dokumentation:


										dojo.xhrGet({

											url: "ajax.html",

											load: function(req){

												dojo.byId("id").innerHTML = req;

											}

										});

Klassen

Code Link 1 Quellcode Dokumentation:


										dojo.declare("Entwickler", null, {

											constructor: function(name){

												this.name = name;

												this.firma = "Neue Firma";

											},


											aufgabe: function(){

												return "Entwicklung";

											},


											info: function(){

												alert(this.name + ", " + this.aufgabe() + ", " + this.firma);

											}

										});


										dojo.declare("Designer", Entwickler, {

											aufgabe: function(){

												return "Design";

											}

										});


										var neuerEntwickler = new Entwickler("Tim");

										var neuerDesigner = new Designer("Tom");


										neuerEntwickler.info(); // Ausgabe: "Tim, Entwicklung, Neue Firma"

										neuerDesigner.info(); // Ausgabe: "Tom, Design, Neue Firma"

Die JavaScript Framework Matrix

Matthias Schütz - Mediendesigner / Webdesigner / Grafiker / Freelancer