Discuss MooTools ”; Previous Next The full form of MooTools is My Object-Oriented Tools. It is an object-oriented, lightweight JavaScript framework. It is released under the free, open-source MIT License. It is one of the most popular JavaScript libraries. In this tutorial, we will walk through MooTools and its features. Print Page Previous Next Advertisements ”;
MooTools – Using Arrays ”; Previous Next MooTools is a lightweight JavaScript library which helps to create dynamic web pages. While managing DOM element, we need to select all DOM elements of a web page. This collection can be handled using arrays. This chapter explains about how to use arrays to manage DOM elements. each() method This is the basic method to deal with arrays. It iterates all the elements through a list. You can use this method based on the requirement. For example, if you want to select all the div elements of a page, follow the script given below. Take a look at the following html page which contains multiple divs. <div>One</div> <div>Two</div> You can use the following script to select each individual div from a collection of divs on the page. The script will select each div and pass an alert. Take a look at the following script. Script $$(”div”).each(function() { alert(”a div”); }); You can use the following syntax to handle the above given example. Take a look at the HTML page. Script <div id = “body_div”> <div>One</div> <div>Two</div> </div> Here, the two divs are enclosed with another div — body_div. While designing a script, we have to select only one external div. Later, by using getElements() method, we can select the two internal divs. Take a look at the following script. Script $(”body_wrap”).getElements(”div”).each(function() { alert(”a div”); }); You can use a different method to write the above script as follows. Here, we are using a separate variable to select the body_div. Script var myArray = $(”body_div”).getElements(”div”); myArray.each(function() { alert(”a div”); }); Select Specific Elements from an Array While manipulating an array of elements, we can select a specific element from an array of elements. The following are some important methods used to manipulate the DOM elements − getLast() This method returns the last element of an array. Let us set up an array to understand this method. var myArray = $(”body_div”).getElements(”div”); We can now grab the last element within the array. var lastElement = myArray.getLast(); The variable lastElement now represents the last element within myArray. getRandom() getRandom() method works the similar way like the getLast() method, but will get a random element from array. Syntax var randomElement = myArray.getRandom(); The variable randomElement now represents a randomly chosen element within myArray. Copy of an Array MooTools provides a way to copy an array using the $A() function. The following is the syntax for the $A() function. Syntax var <variable-name> = $A ( <array-variable>); Add an Element to an Array There are two different methods for adding elements into an array. The first method lets you add elements one by one or you can merge two different arrays into one. include() include() method is used to add an item into an array of DOM elements. For example, consider the following HTML code which contains two div elements and one span element under a single and enclosed div — body_div. Syntax <div id = “body_div”> <div>one</div> <div>two</div> <span id = “add_to_array”>add to array</span> </div> In the above code, if we call getElements(”div”) method on the body_div element, we get one and two div but the span element is not included into the array. If you want to add it into the array you call include() method on the array variable. Take a look at the following script. Script //creating array variable by selecting div elements var myArray = $(”body_wrap”).getElements(”div”); //first add your element to a var var newToArray = $(”add_to_array”); //then include the var in the array myArray.include(newToArray); Now, the myArray contains both divs and span element. combine() This method is used to combine the elements of one array with the elements of another array. This also takes care of duplicate content. For example, consider the following HTML code which contains two div elements and two span elements under single and enclosed div — body_div. Syntax <div id = “body_div”> <div>one</div> <div>two</div> <span class = “class_name”>add to array</span> <span class = “class_name”>add to array, also</span> <span class = “class_name”>add to array, too</span> </div> In the above code, call getElements(”div”) method on the body_div element. You get one and two div. Call $$(”.class_name”) method selects the two span elements. You now have one array of div elements and another array of span elements. If you want to merge these two arrays, then you can use the combine method(). Take a look at the following script. Script //create your array just like we did before var myArray= $(”body_wrap”).getElements(”div”); //then create an array from all elements with .class_name var newArrayToArray = $$(”.class_name”); //then combine newArrayToArray with myArray myArray.combine(newArrayToArray ); Now, the myArray contains all the elements of newArrayToArray variable. Example This will help you understand arrays in MooTools. Suppose, we apply the background color to the array of element which contains divs and span. Take a look at the following code. Here, the second array of elements does not belong to any id or class group and that is why it does not reflect any background color. Take a look at the following code. <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”, function() { var myArray = $(”body_wrap”).getElements(”.class_name”); var addSpan = $(”addtoarray”); var addMany = $$(”.addMany”); myArray.include(addSpan); myArray.combine(addMany); var myArrayFunction = function(item) { item.setStyle(”background-color”, ”#F7DC6F”); } myArray.each(myArrayFunction); }); </script> </head> <body> <div id = “body_wrap”> <div class = “class_name”>one</div> <div>two</div> <div class = “class_name”>three</div> <span id = “addtoarray”>add to array</span> <br /><span class = “addMany”>one of many</span> <br /><span class = “addMany”>two of many</span> </div> </body> </html> You will receive the following output − Output Print Page Previous Next Advertisements ”;
MooTools – Functions ”; Previous Next Functions in MooTools is a concept from JavaScript. We already know how to use functions in JavaScript. Generally, it is better to keep the function outside the page body in the script tag. In MooTools, we follow the same pattern. Here, you can design your own function according to the requirement. We now have to call all the user-defined functions in the domready function. Take a look at the following syntax to understand how to use generalized function in MooTools. Syntax <script type = “text/javascript”> /* Function definitions go here */ window.addEvent(”domready”, function() { /* Calls to functions go here */ }); </script> Basic Structure There are a few basic ways to define a function in MooTools. There is no difference between the function syntaxes of JavaScript and MooTools but the difference is in calling a function. Let us take a small example that defines a function named demo_function. Take a look at the following code. Example <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> //Define simple_function as a function var simple_function = function(){ document.write(”This is a simple function”); } window.addEvent(”domready”, function() { //Call simple_function when the dom(page) is ready simple_function(); }); </script> </head> <body> </body> </html> You will receive the following output − Output Single Parameter Function You can also create a function that accepts a parameter. To use parameters with functions, you need to add a variable name in the parenthesis. Once you provide it, the variable is available inside for use. Let us take an example that defines a function that takes a single parameter and prints a message along with the parameter. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var single_parameter_function = function(parameter){ document.write(”The parameter is : ” + parameter); } window.addEvent(”domready”, function(){ single_parameter_function(”DEMO PARAMETER”); }); </script> </head> <body> </body> </html> You will receive the following output − Output Returning a Value Whenever you want to use the result of one function as input for another variable, you are required to use the return value for that function. You can use the return keyword for returning a value from the function. Let us take an example that defines a function that will accept two parameter values and return the sum of those two parameters. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var two_parameter_returning_function = function(first_number, second_number){ var third_number = first_number + second_number; return third_number; } window.addEvent(”domready”, function(){ var return_value = two_parameter_returning_function(10, 5); document.write(“Return value is : ” + return_value); }); </script> </head> <body> </body> </html> You will receive the following output − Output Print Page Previous Next Advertisements ”;
MooTools – Regular Expression ”; Previous Next MooTools provides a way to create and use Regular Expression (regex). This tutorial will explain the basics and extreme uses of regexes. Let us discuss a few methods of the regular expressions. test() test() is a method used to test the regular expression with the input string. While JavaScript already provides the RegExp object along with the test() function, MooTools adds more features to the RegExp object. Let us take an example and understand how to use the test() method. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var regex_demo = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_1_result”).set(”html”, “Matched”); } else { $(”regex_1_result”).set(”html”, “Not Match”); } } window.addEvent(”domready”, function() { $(”regex”).addEvent(”click”, regex_demo); }); </script> </head> <body> String: <input type = “text” id = “regex_value”/><br/><br/> Reg Exp: <input type = “text” id = “regex_match”/><br/><br/> <input type = “button” id = “regex” value = “TEST”/><br/><br/> <Lable id = “regex_1_result”></Lable> </body> </html> You will receive the following output − Output Ignore Case This is one of the important situations in regular expressions concept. If you don’t want a regular expression to be case sensitive, you call the test method with an option ”I”. Let us take an example that will explain the ignore case in regular expression. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var regex_demo = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match”).get(”value”); var test_result = test_string.test(regex_value, “i”); if (test_result){ $(”regex_1_result”).set(”html”, “Matched”); } else { $(”regex_1_result”).set(”html”, “Not Match”); } } window.addEvent(”domready”, function() { $(”regex”).addEvent(”click”, regex_demo); }); </script> </head> <body> String: <input type = “text” id = “regex_value”/><br/><br/> Reg Exp: <input type = “text” id = “regex_match”/><br/><br/> <input type = “button” id = “regex” value = “TEST”/><br/><br/> <Lable id = “regex_1_result”></Lable> </body> </html> You will receive the following output − Output Regex starts with ”^” The regex ”^” (cap) is a special operator that allows you to check the regular expression in the beginning of a given string. This operator is used as prefix to the regular expression. Let us take an example that will explain how to use this operator. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var regex_demo = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_1_result”).set(”html”, “Matched”); } else { $(”regex_1_result”).set(”html”, “Not Match”); } } window.addEvent(”domready”, function() { $(”regex”).addEvent(”click”, regex_demo); }); </script> </head> <body> String: <input type = “text” id = “regex_value”/><br/><br/> Reg Exp: <input type = “text” id = “regex_match”/><br/><br/> <input type = “button” id = “regex” value = “Match”/><br/><br/> <Lable id = “regex_1_result”></Lable> </body> </html> You will receive the following output − Output Regex ends with ”$” The Regex ”$” (dollar) is a special operator that allows you to check the regular expression at the end of a given string. This operator is used as suffix to the regular expression. Let us take an example that will explain how to use this operator. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var regex_demo = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_1_result”).set(”html”, “Matched”); } else { $(”regex_1_result”).set(”html”, “Not Match”); } } window.addEvent(”domready”, function() { $(”regex”).addEvent(”click”, regex_demo); }); </script> </head> <body> String: <input type = “text” id = “regex_value”/><br/><br/> Reg Exp: <input type = “text” id = “regex_match”/><br/><br/> <input type = “button” id = “regex” value = “Match”/><br/><br/> <Lable id = “regex_1_result”></Lable> </body> </html> You will receive the following output − Output Character Classes Character classes are a phase of regular expressions that allow you to match specific characters (A or Z) or range of characters (A — Z). For example, you want to test if either of the words foo and zoo exist in a string, classes allow you to do this by placing the characters in the box brackets [] with the regular expressions. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> var regex_demo_1 = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match_1”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_1_result”).set(”html”, “Matched”); } else { $(”regex_1_result”).set(”html”, “Not Match”); } } var regex_demo_2 = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match_2”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_2_result”).set(”html”, “Matched”); } else { $(”regex_2_result”).set(”html”, “Not Match”); } } var regex_demo_3 = function(){ var test_string = $(”regex_value”).get(”value”); var regex_value = $(”regex_match_3”).get(”value”); var test_result = test_string.test(regex_value); if (test_result){ $(”regex_3_result”).set(”html”, “Matched”); } else { $(”regex_3_result”).set(”html”, “Not Match”); } } window.addEvent(”domready”, function() { $(”regex_1”).addEvent(”click”, regex_demo_1); $(”regex_2”).addEvent(”click”, regex_demo_2); $(”regex_3”).addEvent(”click”, regex_demo_3); }); </script> </head> <body> String: <input type = “text” id = “regex_value”/><br/><br/> Reg Exp 1: <input type = “text” id = “regex_match_1″/> <input type = “button” id = “regex_1” value = “Match”/>  <Lable id = “regex_1_result”></Lable><br/><br/> Reg Exp 2: <input type = “text” id = “regex_match_2″/> <input type = “button” id = “regex_2” value = “Match”/> <Lable id = “regex_2_result”></Lable><br/><br/> Reg Exp 3: <input type = “text” id = “regex_match_3″/> <input type = “button” id = “regex_3” value = “Match”/> <Lable id = “regex_3_result”></Lable> </body> </html> You will receive the following output − Output escapeRegExp() This method is used to ignore the escape characters from a given string while checking it with a regular expression. Usually, the escape characters are − – . * + ? ^ $ { } ( ) | [ ] / Let us take an example wherein,
MooTools – Introduction ”; Previous Next MooTools is an object-oriented, lightweight JavaScript framework. The full form of MooTools is My Object-Oriented Tools. It is released under the free, open-source MIT License. It is one of most popular JavaScript libraries. MooTools is a powerful, lightweight JavaScript library. It creates an easy interaction of JavaScript in web development. It can also do a lot of things as CSS extensions. MooTools has all sorts of nifty extensions, which gives you the ability to create animated effects. Components of MooTools MooTools includes a number of components. The following are the different component categories − Core − A collection of utility functions that all the other components require. More − An official collection of add-ons that extend the core and provide enhanced functionality. Class − The base 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 a large number of enhancements and compatibility standardization to the HTML Element Object. FX − An Advanced effects-API that helps to animate page elements. Request − Includes XHR interface, Cookie JSON, and HTML retrieval-specific tools for developers to exploit. Window − Provides a cross-browser interface to client-specific information, such as the dimensions of the window. MooTools – Advantages MooTools come with a number of advantages over native JavaScript. These advantages include the following − MooTools is an extensive and modular framework that allows developers to create their own customized combination of components. MooTools follows object-oriented paradigm and the DRY principle (Don”t Repeat Yourself). MooTools provides advanced component effects, with optimized transitions. It is mostly used for flash developers. MooTools provides different enhancements to the DOM. This helps the developers to add, modify, select, and delete DOM elements. And, it also supports storing and retrieving element storage. Print Page Previous Next Advertisements ”;
MooTools – DOM Manipulations ”; Previous Next We already know that every HTML page is designed using DOM elements. Using MooTools you can manipulate DOM elements which means you can create, remove and change the style of DOM elements. Basic methods The following are the basic methods that capture and help to modify the properties of the DOM elements. get() This method is used to retrieve the element properties such as src, value, name, etc. The following statement is the syntax of the get method. Syntax //this will return the html tag (div, a, span…) of the element $(”id_name”).get(”tag”); You will receive the following list of properties while retrieving the element using the get() method. id name value href src class (will return all classes if the element) text (the text content of an element) set() This method is used to set a value to a variable. This is useful when combined with events and lets you change values. The following statement is the syntax of the set method. Syntax //this will set the href of #id_name to “http://www.google.com” $(”id_name”).set(”href”, ”http://www.google.com”); erase() This method helps you erase the value of an elements property. You need to choose which property you want to erase from the element. The following statement is the syntax of the erase() method. Syntax //this will erase the href value of #id_name $(”id_name”).erase(”href”); Moving Elements Moving element means moving an existing element from one position to another position around the page. You can use the inject() method to move an element around the page. Let us take an example wherein, one HTML page contains three div elements which contains the content A, B, and C respectively in an order. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”, function() { var elementA = $(”elemA”); var elementB = $(”elemB”); var elementC = $(”elemC”); }) </script> </head> <body> <div id = “body_wrap”> <div id = “elemA”>A</div> <div id = “elemB”>B</div> <div id = “elemC”>C</div> </div> </body> </html> You will receive the following output − Output Now, using the inject() method in MooTools, we can change the order from ABC to ACB. This means, we need to place elementB after elementC and place the elementC before elementB. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”, function() { var elementA = $(”elemA”); var elementB = $(”elemB”); var elementC = $(”elemC”); //translates to: inject element C before element B elementC.inject(elementB, ”before”); //translates to: inject element B after element C elementB.inject(elementC, ”after”); }); </script> </head> <body> <div id = “body_wrap”> <div id = “elemA”>A</div> <div id = “elemB”>B</div> <div id = “elemC”>C</div> </div> </body> </html> You will receive the following output − Output Create New Element MooTools provides an option to create any type of DOM element and insert it into the HTML page. But, we have to maintain a proper syntax for every element. Let us take an example wherein, the following code snippet is the syntax for creating an (anchor) element. Syntax var el = new Element(”a”, { id: ”Awesome”, title: ”Really?”, text: ”I”m awesome”, href: ”http://MooTools.net”, events: { ”click”: function(e) { e.preventDefault(); alert(”Yes, really.”); } }, styles: { color: ”#f00” } }); Let us take an example that will create an anchor element using MooTools library. Take a look at the following code. Example <!DOCTYPE html> <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”, function() { var el = new Element(”a”, { id: ”Awesome”, title: ”Really?”, text: ”I”m awesome”, href: ”http://www.tutorialspoint.com”, events: { ”click”: function(e) { e.preventDefault(); alert(”Yes, really.”); } }, styles: { color: ”#f00” } }); el.inject(document.body); }); </script> </head> <body> </body> </html> You will receive the following output − Output Print Page Previous Next Advertisements ”;
MooTools – Selectors ”; Previous Next Selectors are used to select HTML elements. Whenever you want to make interactive web pages, you need to select some data or an action from that web page. Selectors help us receive data through HTML request from elements. Basic Selector($) The $ is the basic selector in MooTools. Using this, you can select DOM element by its ID. For example, suppose you have an HTML element (such as div) named body_id. <div id = “body_id”> </div> If you want to select this div, use the following syntax − Syntax //selects the element with the ID ”body_id” $(”body_id”); getElement( ) getElement() is a method which extends basic selector ($). It allows you to refine your selection using element ID. getElement() only selects the single element and will return the first if there are multiple options. You can also use Class name to get the first occurrence of an element. But it will not get array of elements. Multiple Selector ($$) The $$ is used to select multiple elements and place those multiple elements into an array. From that array we can manipulate, retrieve, and reorder the list in different ways. Take a look at the following syntax. It defines how to select all div elements from a collection of HTML elements on a webpage. Syntax <div> <div>a div</div> <span id = “id_name”>a span</span> </div> If you want to select all divs, use the following syntax − Syntax //all divs in the page $$(”div”); If you want to select multiple divs with the same id name, use the following syntax − Syntax //selects the element with the id ”id_name” and all divs $$(”#id_name”, ”div”); getElements() getElements() method is similar to getElement() method. This method returns all elements according to the criteria. You can use either element name (a, div, input) to select those collections or a particular element class name for selecting collection of elements of the same class. Include and exclude results with operators MooTools supports different operators used to refine your selections. You can use all these operators in getElements() method. Each of these operators can be used to select an input element by name. Take a look at the following table. It defines the different operators that MooTools supports. Operator Description Example = (equal to) Select input element by its name. $(”body_wrap”).getElements (”input[name = phone_number]”); ^= (starts with) Select input element by comparing its starting letters of the name. $(”body_wrap”).getElements (”input[name^=phone]”); $= (ends with) Select the input element by comparing its ending letters of the name. $(”body_wrap”).getElements (”input[name$ = number]”); != (is not equal to) De-select the input element by is name. $(”body_wrap”).getElements (”input[name!=address]”); *= (Contains) Select the input element which contains particular letter pattern. $(”body_wrap”).getElements (”input[name*=phone]”); Selectors based on element order MooTools selectors follow a particular order in element selection. The selectors mainly follow two orders; one is even and the other is odd. Note − This selector starts at 0, so the first element is even. Even order In this order, the selector selects the elements which are placed in an even order. Use the following syntax to select all even divs in your HTML page. Syntax // selects all even divs $$(”div:even”); Odd order In this order, the selector selects the element placed in an odd order. Use the following syntax to select all odd divs in your HTML page. Syntax // selects all odd divs $$(”div:odd”); Example The following example shows how a selector works. Suppose, there is a textbox and a list of technologies on a webpage. If you pick one technology from the list by entering that name into the textbox, then the list shows the filtered results based on your input. This is possible using the MooTools selector. Using selector, we can add an event to the textbox. The event listener will pick the data from the textbox and check it from the list. If it is there in the list, then the list shows the filtered results. Take a look at the following code. <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javascript”> window.addEvent(”domready”,function(){ var input = $(”filter”); // set the title attribute of every element // to it”s text in lowercase $$(”ul > li”).each(function(item){ item.set(”title”, item.get(”text”).toLowerCase()); }); // the function we”ll call when the user types var filterList = function(){ var value = input.value.toLowerCase(); $$(”li”).setStyle(”display”,”none”); // check the title attribute if it contains whatever the user is typing $$(”ul > li[title*=” + value + ”]”).setStyle(”display”,””); }; // make it happen input.addEvent(”keyup”, filterList); }); </script> </head> <body> <p><input id = “filter” type = “text” /></p> <ul> <li>C</li> <li>Cpp</li> <li>Java</li> <li>JavaScript</li> <li>Hadoop</li> <li>Hive</li> <li>CouchDB</li> </ul> </body> </html> You will receive the following output − Output Print Page Previous Next Advertisements ”;
MooTools – Installation ”; Previous Next MooTools is a powerful, JavaScript library to design DOM objects using object-oriented paradigm. This chapter explains how to install and use MooTools library along with JavaScript. To install MooTools library, follow the steps given below − Step 1: Download MooTools Core and MooTools More library You can download the latest version of MooTools Core and MooTools More libraries from the following link MooTools-Core and MooTools-More. When you click on the links, you will be directed to the following screens in your browser − And, Click on the download buttons, you will get the latest version of MooTools libraries. For this tutorial, we are using MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js libraries. Step 2: Upload the MooTools Core and More libraries into the server You now have the MooTools libraries in your file system. We have to copy these libraries into the server (the workspace) where the application web pages are available. For this tutorial, we are using C:MooToolsworkspace directory location. Therefore, copy the MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js files into the given directory location. Step 3: Link the MooTools Core and More libraries into the script tag The JavaScript library is a .js file. If you include this library into your JavaScript code, include it with the script tag as follows. Take a look at the following code snippet. <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> Print Page Previous Next Advertisements ”;
MooTools – Program Structure ”; Previous Next MooTools is a tool which can be used to design object-oriented models. Let us discuss in this chapter a simple example of MooTools library. Example Here we will design a model named Rectangle using Class. For this, we need to declare the properties — Width and Height. Take a look at the following code, and save it into sample.html. <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javaScript”> var Rectangle = new Class({ //properties width: 0, height: 0, //methods initialize: function(widthVal, heightVal) { this.width = widthVal; this.height = heightVal; }, details: function() { document.write(“Welcome to MooTools demo program”); document.write(“Width: “+this.width+” Height: “+this.height); }, }); var rec = new Rectangle(5,4); rec.details(); </script> </head> <body> </body> </html> You will receive the following output − Output Print Page Previous Next Advertisements ”;
MooTools – Quick Guide ”; Previous Next MooTools – Introduction MooTools is an object-oriented, lightweight JavaScript framework. The full form of MooTools is My Object-Oriented Tools. It is released under the free, open-source MIT License. It is one of most popular JavaScript libraries. MooTools is a powerful, lightweight JavaScript library. It creates an easy interaction of JavaScript in web development. It can also do a lot of things as CSS extensions. MooTools has all sorts of nifty extensions, which gives you the ability to create animated effects. Components of MooTools MooTools includes a number of components. The following are the different component categories − Core − A collection of utility functions that all the other components require. More − An official collection of add-ons that extend the core and provide enhanced functionality. Class − The base 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 a large number of enhancements and compatibility standardization to the HTML Element Object. FX − An Advanced effects-API that helps to animate page elements. Request − Includes XHR interface, Cookie JSON, and HTML retrieval-specific tools for developers to exploit. Window − Provides a cross-browser interface to client-specific information, such as the dimensions of the window. MooTools – Advantages MooTools come with a number of advantages over native JavaScript. These advantages include the following − MooTools is an extensive and modular framework that allows developers to create their own customized combination of components. MooTools follows object-oriented paradigm and the DRY principle (Don”t Repeat Yourself). MooTools provides advanced component effects, with optimized transitions. It is mostly used for flash developers. MooTools provides different enhancements to the DOM. This helps the developers to add, modify, select, and delete DOM elements. And, it also supports storing and retrieving element storage. MooTools – Installation MooTools is a powerful, JavaScript library to design DOM objects using object-oriented paradigm. This chapter explains how to install and use MooTools library along with JavaScript. To install MooTools library, follow the steps given below − Step 1: Download MooTools Core and MooTools More library You can download the latest version of MooTools Core and MooTools More libraries from the following link MooTools-Core and MooTools-More. When you click on the links, you will be directed to the following screens in your browser − And, Click on the download buttons, you will get the latest version of MooTools libraries. For this tutorial, we are using MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js libraries. Step 2: Upload the MooTools Core and More libraries into the server You now have the MooTools libraries in your file system. We have to copy these libraries into the server (the workspace) where the application web pages are available. For this tutorial, we are using C:MooToolsworkspace directory location. Therefore, copy the MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js files into the given directory location. Step 3: Link the MooTools Core and More libraries into the script tag The JavaScript library is a .js file. If you include this library into your JavaScript code, include it with the script tag as follows. Take a look at the following code snippet. <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> MooTools – Program Structure MooTools is a tool which can be used to design object-oriented models. Let us discuss in this chapter a simple example of MooTools library. Example Here we will design a model named Rectangle using Class. For this, we need to declare the properties — Width and Height. Take a look at the following code, and save it into sample.html. <html> <head> <script type = “text/javascript” src = “MooTools-Core-1.6.0.js”></script> <script type = “text/javascript” src = “MooTools-More-1.6.0.js”></script> <script type = “text/javaScript”> var Rectangle = new Class({ //properties width: 0, height: 0, //methods initialize: function(widthVal, heightVal) { this.width = widthVal; this.height = heightVal; }, details: function() { document.write(“Welcome to MooTools demo program”); document.write(“Width: “+this.width+” Height: “+this.height); }, }); var rec = new Rectangle(5,4); rec.details(); </script> </head> <body> </body> </html> You will receive the following output − Output MooTools – Selectors Selectors are used to select HTML elements. Whenever you want to make interactive web pages, you need to select some data or an action from that web page. Selectors help us receive data through HTML request from elements. Basic Selector($) The $ is the basic selector in MooTools. Using this, you can select DOM element by its ID. For example, suppose you have an HTML element (such as div) named body_id. <div id = “body_id”> </div> If you want to select this div, use the following syntax − Syntax //selects the element with the ID ”body_id” $(”body_id”); getElement( ) getElement() is a method which extends basic selector ($). It allows you to refine your selection using element ID. getElement() only selects the single element and will return the first if there are multiple options. You can also use Class name to get the first occurrence of an element. But it will not get array of elements. Multiple Selector ($$) The $$ is used to select multiple elements and place those multiple elements into an array. From that array we can manipulate, retrieve, and reorder the list in different ways. Take a look at the following syntax. It defines how to select all div elements from a collection of HTML elements on a webpage. Syntax <div> <div>a div</div> <span id = “id_name”>a span</span> </div> If you want to select all divs, use the following syntax − Syntax //all divs in the page $$(”div”); If you want to select multiple divs with the same id name, use the following syntax − Syntax //selects the element with the id ”id_name” and all divs $$(”#id_name”, ”div”); getElements() getElements() method is similar to getElement() method. This method returns all elements according to the criteria. You can use either element name (a, div, input) to select those collections or a particular element class name for selecting collection of elements of