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:


										Ext.onReady(function(){

											// Code

										});

DOM Basics

1

2

Code Link 1 Link 2 Quellcode Dokumentation:


										Ext.get("id").setStyle("background", "blue");


											// Mehrere Elemente

										Ext.get(Ext.query("#id, .class, div")).setStyle("background", "blue");

DOM Filtering

1 2 3

Code Link 1 Quellcode Dokumentation:


										Ext.get(Ext.query("div p")).setStyle("background", "blue");

										Ext.get(Ext.query("div[rel='test']")).setStyle("background", "blue");

										Ext.get(Ext.query("div p:nth-child(odd)")).setStyle("background", "blue");

DOM Manipulation

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										Ext.DomHelper.append("id1", { tag: "p", html: "Zusätzlicher Inhalt" });

										Ext.DomHelper.overwrite("id2", { tag: "p", html: "Neuer Inhalt" });

										Ext.get("id3").remove();

Effekte

1 2 3

Code Link 1 Quellcode Dokumentation:


										Ext.get("id1").slideOut("t");

										Ext.get("id2").fadeOut({ duration: 1 });

										Ext.get("id3").shift({ opacity: 0.5, height: 20, duration: 1.5 });

Transitions

Code Link 1 Quellcode Dokumentation:


										Ext.get("id").shift({

											height: 20,

											duration: 1.5,

											easing: "bounceOut"

										});

Events

Code Link 1 Quellcode Dokumentation:


										Ext.get("id")

											.on("click", function(){

												this.setStyle("background", "red");

											})

											.on("mouseout", function(){

												this.setStyle("background", "blue");

											});

Eigene Funktionen

Code Link 1 Quellcode Dokumentation:


										Ext.override(Ext.Element, {

											eigeneFunktion: function(parameter){

												this.setStyle({

													"background": parameter.farbe,

													"border": parameter.rand

												});

											}

										});


										Ext.get("id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Ajax

1

2

Code Link 1 Link 2 Quellcode Dokumentation:


										Ext.get("id").load({ url: "ajax.html" });


										// Erweitert

										Ext.Ajax.request({

											url: "ajax.html",

											success: function(req){

												Ext.DomHelper.overwrite("id", req.responseText);

											}

										});

Klassen

Code Link 1 Quellcode Dokumentation:


										Entwickler = Ext.extend(Object, {

											constructor: function(name){

												this.name = name;

												this.firma = "Neue Firma";

											},


											aufgabe: function(){

												return "Entwicklung";

											},


											info: function(){

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

											}

										});


										Designer = Ext.extend(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