MooTools

<h2 id="overview">Overview</h2>
MooTools provides the user with a number of options beyond native JavaScript. These include:

<ul><li>An extensible and modular framework allowing developers to choose their own customized combination of components.<a class="footnote-ref" id="fnref:3" href="#fn:3">3</a></li>
<li>MooTools follows object-oriented practices and the <a href="/facts/Don%27t_repeat_yourself/pUF8abIM">DRY</a> principle.<a class="footnote-ref" id="fnref:4" href="#fn:4">4</a></li>
<li>An advanced effects component, with optimized transitions such as easing equations used by many Flash developers.<a class="footnote-ref" id="fnref:5" href="#fn:5">5</a></li>
<li>Enhancements to the <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a>, enabling developers to easily add, modify, select, and delete DOM elements. Storing and retrieving information with Element storage is also supported.<a class="footnote-ref" id="fnref:6" href="#fn:6">6</a></li></ul>
The framework includes built-in functions for manipulation of <a href="/facts/CSS/tA90XBQo">CSS</a>, <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a> elements, native JavaScript objects, <a href="/facts/Ajax_(programming)/cS0P0whT">Ajax</a> requests, DOM effects, and more. MooTools also provides a detailed, coherent <a href="/facts/Application_programming_interface/GMlN4vUr">application programming interface</a> (API),<a class="footnote-ref" id="fnref:7" href="#fn:7">7</a> as well as a custom downloads module allowing developers to download only the modules and dependencies they need for a particular app.<a class="footnote-ref" id="fnref:8" href="#fn:8">8</a><a class="footnote-ref" id="fnref:9" href="#fn:9">9</a>

<h2 id="history">History</h2>
Valerio Proietti first authored the framework and released it in September 2006<a class="footnote-ref" id="fnref:10" href="#fn:10">10</a> taking as his inspiration <a href="/facts/Prototype_JavaScript_Framework/qnWQsVeo">Prototype</a> and Dean Edward's <a href="https://code.google.com/p/base2/">base2</a>. MooTools originated from Moo.fx, a popular <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> effects library released in October 2005 by Valerio Proietti as an add-on to the <a href="/facts/Prototype_Javascript_Framework/qnWQsVeo">Prototype Javascript Framework</a>.<a class="footnote-ref" id="fnref:11" href="#fn:11">11</a> It can be used as a lighter alternative to <a href="/facts/Script.aculo.us/FEPX3QAz">script.aculo.us</a> or other, bigger libraries. It provides simple, basic effects, and guarantees a small library size.
Whereas Prototype extended—prototyped—many of JavaScript's native String, Array, and Function objects with additional methods, Proietti desired a framework that (at the time)<a class="footnote-ref" id="fnref:12" href="#fn:12">12</a> further extended the native Element object as well<a class="footnote-ref" id="fnref:13" href="#fn:13">13</a> to offer greater control of the <a href="/facts/Document_Object_Model/GglE6jGx">Document Object Model</a> (DOM).<a class="footnote-ref" id="fnref:14" href="#fn:14">14</a>

<h2 id="components">Components</h2>
MooTools includes a number of components, but not all need to be loaded for each application. Some of the component categories are:

<ul><li>Core: A collection of utility functions that all the other components require.<a class="footnote-ref" id="fnref:15" href="#fn:15">15</a></li>
<li>More: An official collection of add-ons that extend the Core and provide enhanced functionality.<a class="footnote-ref" id="fnref:16" href="#fn:16">16</a></li>
<li>Class: The base library for Class object instantiation.<a class="footnote-ref" id="fnref:17" href="#fn:17">17</a></li>
<li>Natives: A collection of <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> Native Object enhancements. The Natives add functionality, compatibility, and new methods that simplify coding.</li>
<li>Element: Contains a large number of enhancements and compatibility standardization to the <a href="/facts/HTML_Element/s4TKzjUP">HTML Element</a> object.<a class="footnote-ref" id="fnref:18" href="#fn:18">18</a></li>
<li>Fx: An advanced effects-API to animate page elements.<a class="footnote-ref" id="fnref:19" href="#fn:19">19</a></li>
<li>Request: Includes <a href="/facts/XMLHttpRequest/3FHofhdx">XHR</a> interface, Cookie, <a href="/facts/JSON/bs1rUAhd">JSON</a>, and <a href="/facts/HTML/sSc3fT78">HTML</a> retrieval-specific tools for developers to exploit.<a class="footnote-ref" id="fnref:20" href="#fn:20">20</a></li>
<li>Window: Provides a cross-browser interface to client-specific information, such as the dimensions of the window.<a class="footnote-ref" id="fnref:21" href="#fn:21">21</a></li></ul>
<h2 id="browser-compatibility">Browser compatibility</h2>
MooTools is compatible and tested with:<a class="footnote-ref" id="fnref:22" href="#fn:22">22</a>

<ul><li><a href="/facts/Safari_(web_browser)/9R8v7tNl">Safari</a> 3+</li>
<li><a href="/facts/Internet_Explorer/uL8a4Y5l">Internet Explorer</a> 6+</li>
<li><a href="/facts/Firefox/xez2zv8H">Mozilla Firefox</a> 2+</li>
<li><a href="/facts/Opera_(web_browser)/2NYCcTj1">Opera</a> 9+</li>
<li><a href="/facts/Google_Chrome/4INfWq37">Chrome</a> 4+</li></ul>
<h2 id="emphasis-on-modularity-and-reusability">Emphasis on modularity and reusability</h2>
Every JavaScript framework has its philosophy, and MooTools is interested in taking full advantage of the flexibility and power of JavaScript in a way that emphasizes greater modularity and code reuse. MooTools accomplishes these goals intuitively to a developer coming from a <a href="/facts/Class-based_programming/n3wudt1B">class-based inheritance</a> language like Java with the MooTools Class object.
Class is an object of key/value pairs containing either properties or methods (functions). Class is effortlessly mixed and extended with other Class instantiations allowing for the most excellent focus of MooTools: Code reuse achieved through maximizing the power of JavaScript's prototypical inheritance but in a Class object syntax more familiar to classical inheritance models.<a class="footnote-ref" id="fnref:23" href="#fn:23">23</a>

<h2 id="object-oriented-programming">Object-oriented programming</h2>
MooTools contains a robust Class creation and inheritance system that resembles most classically based <a href="/facts/Object-oriented_programming_language/TxNMEcao">Object-oriented programming languages</a>. For example, the following is MooTools' equivalent of the <a href="/facts/Polymorphism_in_object-oriented_programming/S3cCKsVT">examples</a> in Wikipedia's polymorphism page:

var Animal = new Class({

initialize: function(name) {
        this.name = name;
    }

});

var Cat = new Class({
    Extends: Animal,

talk: function() {
        return 'Meow!';
    }

});

var Dog = new Class({

Extends: Animal,

talk: function() {
        return 'Arf! Arf!';
    }

});

var animals = {
    a: new Cat('Missy'),
    b: new Cat('Mr. Bojangles'),
    c: new Dog('Lassie')
};

Object.each(animals, function(animal) {
    alert(animal.name + ': ' + animal.talk());
});
 
// alerts the following:
//
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

<h2 id="see-also">See also</h2>
<ul>
<li>Free and open-source software portal</li></ul>
<ul><li><a href="/facts/Ajax_framework/cS0P0whT">Ajax framework</a></li>
<li><a href="/facts/Rich_Internet_application/en12v9La">Rich Internet application</a></li>
<li><a href="/facts/Web_2.0/mn8W4Xnu">Web 2.0</a></li>
<li><a href="/facts/Comparison_of_JavaScript_frameworks/74bS48ah">Comparison of JavaScript frameworks</a></li>
<li><a href="/facts/XMLHttpRequest/3FHofhdx">XMLHttpRequest</a></li>
<li><a href="/facts/JavaScript_framework/8f1CVHDX">JavaScript framework</a></li>
<li><a href="/facts/JavaScript_library/vjUJ5DGC">JavaScript library</a></li></ul>

<h2 id="further-reading">Further reading</h2>
<ul><li><a href="https://www.scientific.net/AMM.496-500.2328">"The Introduction to MooTools Architecture"</a>. Applied Mechanics and Materials.</li>
<li><a href="https://www.scientific.net/AMM.496-500.2042">"Interactive Consultation Based on MooTools Long Polling Techniques"</a>. Applied Mechanics and Materials.</li>
<li>Orchard, Leslie M.; Pehlivanian, Ara; Koon, Scott; Jones, Harley (August 31, 2009). <a href="http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-Frameworks-Prototype-YUI-ExtJS-Dojo-and-MooTools.productCd-047038459X.html">Professional JavaScript Frameworks: Prototype, YUI, ExtJS, Dojo and MooTools</a> (1st ed.). <a href="/facts/Wrox_Press/4pfQvkJF">Wrox Press</a>. p. 888. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-0-470-38459-6.</li>
<li>Newton, Aaron (September 18, 2008). <a href="http://apress.com/book/view/1430209836">MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development</a> (1st ed.). <a href="/facts/Apress/pxdyEeD3">Apress</a>. p. 300. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-1-4302-0983-6.</li>
<li>Lecomte, Xavier (June 1, 2012). <a href="http://javascript.developpez.com/livres/index/?page=Frameworks#L2815030152">Découvrez MooTools : Un framework JavaScript pour un site dynamique et interactif (FR)</a> (1st ed.). DigitBooks. p. 260. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-2-8150-0215-8.</li></ul>
<h2 id="external-links">External links</h2>
<ul><li><a href="http://mootools.net">Official website</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1">"MooTools at FOSDEM slides" (PDF). Archived from the original (PDF) on 2011-07-23. Retrieved 2010-02-17. <a href="https://web.archive.org/web/20110723055127/http://cpojer.net/Talks/MooToolsFOSDEM.pdf" target="_blank">https://web.archive.org/web/20110723055127/http://cpojer.net/Talks/MooToolsFOSDEM.pdf</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></li>
<li id="fn:2">The Official MooTools Website <a href="http://mootools.net" target="_blank">http://mootools.net</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></li>
<li id="fn:3">MooTools' Core Download Page <a href="http://mootools.net/core" target="_blank">http://mootools.net/core</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></li>
<li id="fn:4">MooTools Class Object Archived 2008-08-31 at the Wayback Machine <a href="http://docs.mootools.net/Class/Class" target="_blank">http://docs.mootools.net/Class/Class</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></li>
<li id="fn:5">MooTools' Effects (FX) Class Archived 2008-06-23 at the Wayback Machine <a href="http://docs.mootools.net/Fx/Fx" target="_blank">http://docs.mootools.net/Fx/Fx</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></li>
<li id="fn:6">MooTools' Element Class - A comprehensive list of Element manipulation methods. Archived 2008-09-05 at the Wayback Machine <a href="http://docs.mootools.net/Element/Element" target="_blank">http://docs.mootools.net/Element/Element</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></li>
<li id="fn:7">A Better Way to Use Elements <a href="http://mootools.net/blog/2010/03/19/a-better-way-to-use-elements/" target="_blank">http://mootools.net/blog/2010/03/19/a-better-way-to-use-elements/</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></li>
<li id="fn:8">MooTools Core Builder <a href="http://mootools.net/core" target="_blank">http://mootools.net/core</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></li>
<li id="fn:9">MooTools More Builder <a href="http://mootools.net/more" target="_blank">http://mootools.net/more</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></li>
<li id="fn:10">Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development (1st ed.). Apress. pp. xvi. ISBN 978-1-4302-0983-6. <a href="978-1-4302-0983-6" target="_blank">978-1-4302-0983-6</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></li>
<li id="fn:11">Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development (1st ed.). Apress. pp. xv. ISBN 978-1-4302-0983-6. <a href="978-1-4302-0983-6" target="_blank">978-1-4302-0983-6</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></li>
<li id="fn:12">Version 1.6.1 of Prototype includes "an element metadata storage system." Prototype 1.6.1 released Archived 2010-03-01 at archive.today
by Sam Stephenson, written September 1st, 2009. Retrieved March 21, 2010. <a href="http://www.prototypejs.org/2009/9/1/prototype-1-6-1-released" target="_blank">http://www.prototypejs.org/2009/9/1/prototype-1-6-1-released</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></li>
<li id="fn:13">Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development (1st ed.). Apress. pp. xvi. ISBN 978-1-4302-0983-6. <a href="978-1-4302-0983-6" target="_blank">978-1-4302-0983-6</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></li>
<li id="fn:14">Note that MooTools does not extend the native Object—all JavaScript primitives like String and Function inherit from it—but instead provides a convenient Hash for the purpose: Think of it like having a set of utility methods that allow for nearly effortless object manipulation of regular JavaScript objects that are otherwise unaffected by the process. (Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development (1st ed.). Apress. pp. xvi. ISBN 978-1-4302-0983-6.) <a href="978-1-4302-0983-6" target="_blank">978-1-4302-0983-6</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></li>
<li id="fn:15">MooTools Core Archived 2009-10-02 at the Wayback Machine <a href="http://mootools.net/docs/core" target="_blank">http://mootools.net/docs/core</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></li>
<li id="fn:16">MooTools More Archived 2009-10-04 at the Wayback Machine <a href="http://mootools.net/docs/more" target="_blank">http://mootools.net/docs/more</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></li>
<li id="fn:17">MooTools Class Archived 2008-08-31 at the Wayback Machine <a href="http://docs.mootools.net/Class/Class#Class" target="_blank">http://docs.mootools.net/Class/Class#Class</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></li>
<li id="fn:18">MooTools Element Archived 2008-09-05 at the Wayback Machine <a href="http://docs.mootools.net/Element/Element" target="_blank">http://docs.mootools.net/Element/Element</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></li>
<li id="fn:19">MooTools Fx Class Archived 2008-06-23 at the Wayback Machine <a href="http://docs.mootools.net/Fx/Fx" target="_blank">http://docs.mootools.net/Fx/Fx</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></li>
<li id="fn:20">MooTools Request Class Archived 2008-07-30 at the Wayback Machine <a href="http://docs.mootools.net/Request/Request" target="_blank">http://docs.mootools.net/Request/Request</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></li>
<li id="fn:21">In addition to getting the size for any Element, you can easily get the dimensions of the window Archived 2008-09-11 at the Wayback Machine <a href="http://docs.mootools.net/Element/Element.Dimensions#Element:getSize" target="_blank">http://docs.mootools.net/Element/Element.Dimensions#Element:getSize</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></li>
<li id="fn:22">MooTools lists its compatibility on its homepage. <a href="http://mootools.net/" target="_blank">http://mootools.net/</a> <a href="#fnref:22" class="footnote-back-ref">↩</a></li>
<li id="fn:23">jQuery versus Mootools <a href="http://jqueryvsmootools.com/" target="_blank">http://jqueryvsmootools.com/</a> <a href="#fnref:23" class="footnote-back-ref">↩</a></li>
</ol>

MooTools open-in-new

MooTools