JavaScript Frameworks

There is a large variety of JavaScript frameworks. In this article, we document how to go about performing common tasks in Prototype, MooTools, Dojo (AMD), jQuery, and ExtJS.

Task 1: Perform a Task on DOM Content Loaded

Prototype

document.observe("dom:loaded", function() {
	alert("DOM Content Loaded!");
});

MooTools

window.addEvent('domready', function() {
	alert("DOM Content Loaded!");
});

Dojo

require(["dojo/domReady!"], function() {
	alert("DOM Content Loaded!");
});

jQuery

$(document).ready(function(){
	alert("DOM Content Loaded!");
});

ExtJS

Ext.onReady(function(){
	alert("DOM Content Loaded!");
});

Task 2: Add a Click Listener to a Button and Alert the Button's Label

Prototype

$('myButton').observe('click', function(event) {
	var element = event.element();
	var text = element.textContent;
	alert("You Clicked My Button: "+text);
});

MooTools

$('myButton').addEvent('click', function(){
	var text = this.get('text');
	alert("You Clicked My Button: "+text);
});

Dojo

require(["dojo/query"], function(query){
	query("#myButton").on("click", function(e){
		var text = this.textContent;
		alert("You Clicked My Button: "+text);
	});
});

jQuery

$("#myButton").click(function(){
	var text = $(this).text();
	alert("You Clicked My Button: "+text);
});

ExtJS

Ext.get("myButton").on("click", function(event, element, options){
	var text = element.textContent; // option 1: use the DOM
	var text = this.getHTML(); // option 2: use ExtJS's API
	var text = Ext.get(element).getHTML(); // option 3: useful when the scope of the callback is not an Ext Element
	alert("You Clicked My Button: "+text);
});

// Alternative syntax that also allows you to pass parameters:
Ext.get("myButton").on({
    "click": {
        fn: function(event, element, options){
	        var text = element.textContent;
	        alert("You Clicked My Button: "+text+" "+options.hello);
        },
        hello: "world"
    }
});

Task 3: Create a new list item containing a strong tag, and then append it to the document

Prototype

var li = Builder.node('li', {
	title: "My New List Item"
}, [
	Builder.node('strong', "To Do:"),
	"Water The Garden"
]);
$("myList").appendChild(li);

MooTools

var li = new Element('li', {
	title: "My New List Item"
});
var strong = new Element('strong');
strong.appendText("To Do:");
li.inject(strong);
li.appendText("Water the Garden");
$("myList").inject(li);

Dojo

require(["dojo/dom-construct"], function(domConstruct){
	var li = domConstruct.create("li", {
		title: "My New List Item",
		innerHTML: "<strong>To Do:</strong> Water the Garden"
	}, "myList");
});

jQuery

var li = $("<li><strong>To Do:</strong> Water the Garden</li>");
li.attr("title", "My New List Item");
$("#myList").append(li);

ExtJS

Ext.DomHelper.useDom = true; // optional: forces text node creation on strings rather than innerHTML manipulation

Ext.DomHelper.append("myList", {
	tag: "li",
	title: "My New List Item",
	children: [
		{ tag: "strong", html: "To Do: " },
		"Water the Garden"
	]
});

References

Much of the content on this page was inspired by http://davidwalsh.name/mootools-jquery-dojo