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), and jQuery.

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!");
});

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);
});

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);

References

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