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:


										window.addEvent("domready", function(){

											// Code

										});

DOM Basics

1

2

Code Link 1 Link 2 Quellcode Dokumentation:


										$("id").setStyle("background", "blue");


											// Mehrere Elemente

										$$("#id", ".class", "div").setStyle("background", "blue");

DOM Filtering

1 2 3

Code Link 1 Quellcode Dokumentation:


										$$("div p").setStyle("background", "blue");

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

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

DOM Manipulation

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										$("id1").grab(new Element("p", { html: "Zusätzlicher Inhalt" }));

										$(new Element("p", { html: "Neuer Inhalt" })).replaces($("id2"));

										$("id3").dispose();

Effekte

1 2 3

Code Link 1 Link 2 Link 3 Quellcode Dokumentation:


										$("id1").tween("height", 0);

										$("id2").set("tween", { duration: 1000 }).fade("out");

										$("id3").get("morph", { duration: 1500 }).start({ opacity: 0.5, height: 20 });

Transitions

Code Link 1 Quellcode Dokumentation:


										$("id").get("morph", {

											duration: 1500,

											transition: Fx.Transitions.Bounce.easeOut

										}).start({

											height: 20

										});

Events

Code Link 1 Quellcode Dokumentation:


										$("id").addEvents({

											"click": function(){

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

											},

											"mouseout": function(){

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

											}

										});

Eigene Funktionen

Code Link 1 Quellcode Dokumentation:


										Element.implement({

											eigeneFunktion: function(parameter){

												this.set("styles", {

													background: parameter.farbe,

													border: parameter.rand

												});

											}

										});


										$("id").eigeneFunktion({

											farbe: "red",

											rand: "3px blue solid"

										});

Ajax

1

2

Code Link 1 Link 2 Quellcode Dokumentation:


										$("id").load("ajax.html");


										// Erweitert

										new Request({

											url: "ajax.html",

											method: "get",

											onSuccess: function(req){

												$("id").innerHTML = req;

											}

										}).send();

Klassen

Code Link 1 Quellcode Dokumentation:


										var Entwickler = new Class({

											initialize: function(name){

												this.name = name;

												this.firma = "Neue Firma";

											},


											aufgabe: function(){

												return "Entwicklung";

											},


											info: function(){

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

											}

										});


										var Designer = new Class({Extends: 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 / Photoshop