Moo Tools | Java Script | Html

JavaScript Frameworks: Mootools 

Ashwag al­hargan KSU  Ashwag_al­

In the past, JavaScript was often a tedious business, with browsers each offering their own mercurial blend of   standard   and   nonstandard   functionality.   Modern   JavaScript   has   taken   off   with   the   advent   of   JavaScript   frameworks: libraries that enhance the JavaScript language itself and help you avoid all the pesky browser   bugs.   In this paper we look at one of these libraries “MooTools”. Why should we use it, how to download it, how to   use it, and where we can have more information about using this library?  KEYWORDS Mootools, Ajax, JavaScript Frameworks.

The users who visit your site will have expectations that it will be similar to other sites, and if yours doesn’t,  even if it looks great and has awesome content, it’ll look old. This might not drive people from using your site,  but it will certainly result in less usage of the features you develop. To meet these expectations, you’ll find that  you can’t do it with the skill sets traditionally required to build a web site. Back­end developers of Java, Perl, PHP, Python, Ruby, and so forth often find writing JavaScript to be tedious and fraught with frustration  when dealing with the browser quirks, while the people who spend most of their time working on the client  side creating the design, HTML, CSS, and images often don’t have a lot of serious programming experience. Presently, the most used programming language to build a web site is from open source. JavaScript is one of  the open source languages. It is a scripting language with which a programmer can activate effectively and  add strong changing behaviour to the applications and web pages.  Recently, JavaScript has become more advanced and can meet user expectations. Now, writing JavaScript is  one of the most interesting sources and is widely accepted by users interested in designing web sites and the  use   of   bites   provided   to  the   browser.   All   visitors  and   your   web   builder   will  get   help   when   using   a   good  JavaScript framework.  JavaScript is a very strong language which contains the most precise expressions.  When you are perfect at using it and able to make full use of a framework such as Moo Tool, this can be  easily noticed by your web users. You will feel that you’re starting as experienced and will enjoy it. This is the  purpose of spending time with Moo Tools.


As the user would like to develop his applications, this will result in Ajax, drag and drop, animation and other  UI   concepts   into   the   web   browsing   experience.   Years  ago,   it   was   very  hard   to   achieve   theses  things   in  JavaScript and it was tiresome job. This is why it was less used in the past. Everything changed JavaScript  framework.  JavaScript framework role is abstracting the code that you write from the engine that executed it  .By this way, developer can cope with the thwarting segments of the job with JavaScript and you have overall  control avoiding JavaScript history.   It is known that all browsers act in the same manner and so how they  deal with HTML and CSS.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies  are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy  otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission. The First Mini­Conference in Web Technologies and Trends (WTT) © 2009 Information Technology Department, CCIS, King Saud University, Riyadh, Saudi Arabia

By this way, developer can cope with the thwarting segments of the job with JavaScript and you have overall  control avoiding JavaScript history.   It is known that all browsers act in the same manner and so how they  deal with HTML and CSS. There are many JavaScript frameworks such as Prototype,, jQuery Mootools and others help  developers to design  interactive sites  with  less time.  It showed developers that writing  a framework,  that  made JavaScript itself better and easier and even kind of fun, was possible.

2.1 Why you should use a javascript framework [3]
• • • •   Abstract your code from routine environment (browser)  Create foundation base on which you can build and grow. Create a common environment for groups to contribute (with their own expression, Plug­ins and bug  fixes  Encourage   the   use   of   similar   patterns   across   disperate   web   sites   on   that   users   can   refuse   the  knowledge they learn.

MooTools   is   a   collection   of   files   written   with   JavaScript   and   it   extends   the   functionality   of   the   language  designed   for   the   intermediate   to   advanced   JavaScript   developers   .The   author   of   MooTools   JavaScript  framework is Valerio Proietti, who gets the idea from a prototype.js in addition to other series. It started when  Valerio issued and add­on to Prototype.js. "Moo.fx" 1.It was a lightweight only (3KB), easy to use and small  volume.   The   author   started   his   own   framework   Mootool   (My   Object   Oriented   Tools)   That   is   because  Prototype.js with numerous short cuts to the Prototype of array. String, Function and more, did not extent the  element prototype and he was fed up because of frequently typing prototype's component generic.    

Essentially, MooTools is a JavaScript framework that gives three essential things, previously mentioned about  prototype.js. That gives short cuts and establishing classless to make work easy. It spreads local objects to  provide them with functionality.  The significance is that library itself works as description to write JavaScript,  definitely, how to use MooTools when writing in JavaScript. All most all JavaScript frameworks do such work with different value of results. MooTools is unique because  it's perfect coding.

3.1 Characteristics of mootools [3]
• • • • • • • • • • • Do not make duplication for code.  Add suitable functionality to principle to JavaScript's own design concepts. Standards wok will but not yet used replaced by the implemented standard. Native objective are to be extended such as (string, function, array and so on. Number as JavaScript was built to perform. Write understandable clean well named code to make easy for the reader  Do not demand too much of the browser (memory, Cup cycles and so on.)  Take as much as you can from out the browser.  When ever possible, make it still feel line you are writhing JavaScript. Try to make it easy a fun job. Make it Modular.    

It is built in a modular way. You do have to use it all to make a page works. When you need only Ajax delivers  less JavaScript because and less bytes. When you do a good work that makes JavaScript better, keep on  following the basic principles. It does not appear as CSS or C++. It is a powerful tool it takes small footprint  than prototype and script aculo .us together.

3.2 Downloading mootools 
Downloading MooTools is easy, but you have some options to consider and some choices to make. Go to (see figure 1)

Figure 1. Mootools download page It contains many elements such as download builder application rests on the mootools site where the user  can download parts from the library as well as choosing compression level outcome download. Below are  some categories: [5] • • • • • •   core a collection of utility functions that all the other component.  " Class is Moo Tools library for class object instantiation Natives:   a   collection   of   Javascript   Native   object   enhancements.   The   Natives   add   functionality  compatibility and new methods that simplify coding. Element contains slew of enhancements and capability to the HTML Element object. Request : provides XHR interface, Cookie Jason and HTML retrieval specific tools for developers to  exploit.  Window: provides a cross –we browser interface to client specific information."

3.3 Adding it to the web page
If you have JavaScript file add it to your HTML documents, than if you done you can write JavaScript using  MooTools methods and classes.

This is simple example for how to add MooTools to your page:[3] "<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN" "­strict.dtd"> <html xmlns="" xml:lang="en" lang="en" dir="ltr"> <head profile=""> <meta http­equiv="Content­Type" content="text/html; charset=UTF­8" /> <title>Your title</title> <script type="text/javascript" src="MooTools.js"></script> <script type="text/javascript" src="yourSiteCode.js"></script> <script type="text/javascript"> //or write some code in­line </script> </head> <body> …. </body> </html>" Check   out   the   script   line   where   src="mootools.js".   This   line   will   autmatically   load   the   MooTools   source  JavaScript in the file.  I'll show you how to add Mootools to HTML file by demo in the conference.

           Comfortably,   I   can   say  JavaScript   has   been   changed   a   lot   to  the   best.   It   has   become   easier   and   more  enjoyable by developing MooTool and JavaScript framework. The most distinguished features of MootTools  rest in a number of aspects. Its lightweight, it provides short cuts and foundation classes that make doing  things easy and its coding style makes it unique to the degree that you do not need all of it to make a page   work and takes up a much smaller footprint. 

To   know  more   on   how   to   use   the   library   and   to  know   how   to  use   the   function   and   the   syntax   of   these  functions just visit the official site for Mootorial ( that it can help you. If you read  these pages (I recommend reading them in order) you should learn how each function and class in MooTools  works. And there is another tutorial for it just visit:­howtowriteamootoolsclass


[1] MooFX official site Located on the Internet at http:// [2]Mootools official site Located on the Internet at Last visited: 10 December, 2008.  [3]Newton,   Aaron.  MooTools  Essentials:   The   Official   MooTools   Reference   for   JavaScript™   and   Ajax   Development, Apress. 2008. [4] The web Developer resourse site Located on the Internet at Last visited:  10 December, 2008.  [5] Wikipedia Located on the Internet at Last visited: 10 December,  2008. 

Sign up to vote on this title
UsefulNot useful