Welcome to 3DMICK
info@3dmick.com
+91 (971) 119-1127

MOOTOOLS

2h

MOOTOOLS

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer which can spice up the interactivity and beauty of a site. User Interface plays an important role in the success of any website; JavaScript, CSS and AJAX are commonly used to provide users the leisure of rich user interface over past few years. But using one of the most famous JavaScript libraries, MooTools you can add extra smoothness and interactivity to your website. In this post we have covered some MooTools tutorials which can be very handy if you are just entering in the world of MooTools.
JavaScript isn’t perfect and doesn’t have a lot of native functions and methods to deal with modern user demands. Mootools are Independent, open-source, and very robust JavaScript framework that allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. You already know what are Mootools? And why you should it be used? Now we are trying to start using them. The first thing we should do is download the file Mootools and then install it. In this post, we’ll do it.
On opening the Mootools download page, three options are provided: YUI Compressor, JSMin, and uncompressed. All three of them are distinguished by the format of source code only. YUI Compressor version and JSMin are compressed versions. Their file size is compact. Hence, the characters that are not needed have been removed.

1. Open your browser. Point to http://mootools.net/download. You will get something like this:

image001

Download & Save this file.

image003

For this exercise, we saved the files in C: \ AppServ \ www \ test \ Mootools. We will use AppServ as a web server. Inside the folder, we put two files: index.html and Mootools file.

image005

Open the index.html file in the editor. Write the following code in it:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Trying MooTools</title>

<script type=”text/javascript” src=”mootools-1.2.4-core-nc.js”></script>

<script type=”text/javascript”>

window.addEvent(‘domready’ , function(){

alert(“Hello guys!”);

});

</script>

</head>

<body>

</body>

</html>

Type  http://localhost/test/mootools/index.html in the address bar of your browser window. You will get the following output:

image007

Now, we’ll analyze the code we have created till now. We have written the code as follows:
window.addEvent(‘domready’ , function(){alert(“Hello guys!”); });
In this code, we have applied a method on an event. The event is called ‘domready’. This event is executed when the DOM is ready. Hence, function() is executed when the DOM is ready.

view source:
print?
function(){alert(“Hello guys!”);}