JavaScript Frameworks - Revision history

Shane: Adding "Former Content" category tag

2014-08-25T08:11:41Z

Adding "Former Content" category tag

Shane: categorizing

2013-02-24T23:22:44Z

categorizing

Shane at 20:04, 10 February 2013

2013-02-10T20:04:05Z

Shane: Adding ExtJS

2013-02-10T20:03:36Z

Adding ExtJS

Shane: /* jQuery */

2013-02-04T09:43:53Z

jQuery

Shane: Created page with '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 …'

2013-02-04T09:37:34Z

Created page with '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 …'

New page

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 ===

<source lang="javascript">
document.observe("dom:loaded", function() {
alert("DOM Content Loaded!");
});
</source>

=== MooTools ===

<source lang="javascript">
window.addEvent('domready', function() {
alert("DOM Content Loaded!");
});
</source>

=== Dojo ===

<source lang="javascript">
require(["dojo/domReady!"], function() {
alert("DOM Content Loaded!");
});
</source>

=== jQuery ===

<source lang="javascript">
$(document).ready(function(){
alert("DOM Content Loaded!");
});
</source>

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

=== Prototype ===

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

=== MooTools ===

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

=== Dojo ===

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

=== jQuery ===

<source lang="javascript">
$("#myButton").click(function(){
var text = $(this).text();
alert("You Clicked My Button: "+text);
});
</source>

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

=== Prototype ===

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

=== MooTools ===

<source lang="javascript">
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);
</source>

=== Dojo ===

<source lang="javascript">
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");
});
</source>

=== jQuery ===

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

== References ==

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

← Older revision		Revision as of 08:11, 25 August 2014
Line 172:		Line 172:

	[[Category:Module 6]]		[[Category:Module 6]]
		+	[[Category:Former Content]]

← Older revision		Revision as of 23:22, 24 February 2013
Line 170:		Line 170:

	Much of the content on this page was inspired by http://davidwalsh.name/mootools-jquery-dojo		Much of the content on this page was inspired by http://davidwalsh.name/mootools-jquery-dojo
		+
		+	[[Category:Module 6]]

@@ Line 93: / Line 93: @@
 	alert("You Clicked My Button: "+text);
 });
 // Alternative syntax that also allows you to pass parameters:

@@ Line 1: / Line 1: @@
-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.
+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 ==
@@ Line 31: / Line 31: @@
 <source lang="javascript">
 $(document).ready(function(){
 	alert("DOM Content Loaded!");
 });
@@ Line 73: / Line 81: @@
 	var text = $(this).text();
 	alert("You Clicked My Button: "+text);
 });
 </source>
@@ Line 120: / Line 151: @@
 li.attr("title", "My New List Item");
 $("#myList").append(li);
 </source>