MooTools Basic: Downloading and Installing MooTools Core


MooTools Basic Tutorial - Part 1. You already know what it Mootools and why you should use it. Okay, now we are trying to start using Mootools. The first thing we should do is download the file Mootools. Next, try to install on your web page. In this post, we'll do it.

At the time of opening on the Mootools download page, you will get three options: YUI Compressor, JSMin, and uncompressed. Souce code from these versions are same. What distinguishes these are source code format only. YUI Compressor version and JSMin is a compressed version. Their file size smaller. Therefore, the characters that are not needed removed.

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

    MooTools 1-1
    Figure 1.1 MooTools download page

    Download that file. Save to your local hardisk.

    Mootools 1-2
    Figure 1.2 Save MooTools File

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

    MooTools 1.3
    Figure 1.3 Exercise File Structure

  3. Open the index.html file with your 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>
    
  4. Point Your browser to http://localhost/test/mootools/index.html. You should get like this:

    MooTools 1-4
    Figure 1.4 Result MooTools simple exercise

Fine, we'll analize the code we have created. We have written the code as follows:

  window.addEvent('domready' , function(){
	alert("Hello guys!");									
  });

In the code, we apply a method on an event. The event is called 'domready'. This event is run when the DOM is ready. So when the DOM is ready, function() is executed.

  function(){
	alert("Hello guys!");
  }

« Previous
Next »




Bookmark and Share Tag: MooTools, JavaScript Category: JavaScript Post : January 03rd 2010 Read: 19,424

advertisements


blog comments powered by Disqus