~~NOTOC~~ ====== Getting Started with the Moo! ====== We're glad you want to learn Mootools! :D Mootools is a lightweight javascript framework. Mootools offers enhanced functionality and richer tools for writing Javascript, taking what may have been a painful experience with Javascript and presents you with a better experience. By adding Mootools to your applications, you are able to write faster and write better applications then you could otherwise. Mootools, at it's lowest level re-creates psudeo-classical inheritance with Classes that allow for extensible and reusable behaviors. Additionally, it provides its own set of classes to allow you to quickly and easily make effects such as resizing, fading, moving, dragging, and more. There is also much more in the additional plugins you can add, and even make if you'd like. Mootools also allows developers to use extensive DOM tools to allow you select unique elements from the document, create new elements and alter them. There are also many shortcut methods that make DOM coding a breeze. With Mootools, you are able to write far more rich client side applications. ===== So What Does it Mean to Me? ===== A lot! Using the power of Mootools, you can add allot to your application. But don't worry if you don't understand everything from above. We'll be going over much of what was above and a lot more too. Mootools offers many things to people just coming into Javascript for the first time too, here is a little list! (Provided you at least know Javascript and what these things are.) * Page Effects * Ajax * Easy Syntax * Freedom * Dedicated Team Behind It! Of course, there is plenty of stuff for those who are coming to the framework, from somewhere like Prototype or Dojo, even someone who has used Javascript for a long time too. There are many advanced features of Mootools, and it's Objected Oriented style is one of them. You can make your own Classes and Objects for your own code and even share them among the world! ===== So What do I need to Know before I Start? ===== If you know Javascript already, then you're set to go! If you don't know Javascript, you should learn about it first. * [[http://video.yahoo.com/video/search?p=douglas+crockford+javascript+programming+language&x=0&y=0|Douglas Crockford: The Javascript Programming Language]] - These are great videos about Javascript. A must watch! * [[http://rds.yahoo.com/_ylt=A0WTQ1d1bW1G8iMBoSYCP88F;_ylu=X3oDMTBjMHZkMjZyBHBvcwMxBHNlYwNzcg--/SIG=122e20mkk/EXP=1181662965/**http%3A//video.yahoo.com/video/play%3Fvid=111597|Joe Hewitt Presents Firebug]] - The greatest Firefox plug in ever, Firebug. This will make your Javascript debugging days so much better. Unless you prefer pulling out your hair, download Firefox and firebug! * [[http://w3schools.com/js/default.asp|http://w3schools.com/js/default.asp]] (You should read this and the HTML DOM section.) - Great place to learn functions and all about Javascript. You can also learn XHTML and CSS and more too. * [[http://developer.mozilla.org/en/docs/|Mozilla Developer Center]] - Great for reference. ==== Download Mootools! ==== Downloading Mootools is really easy. Let me explain the [[http://www.mootools.net/download|Download Page]] first before you go there. When you first go there, you'll see a long list of components that you can add to your download. You can add as few or as many as you'd like. Just simply select the component you'd like, and then when you scroll all the way down and hit download, you'll get that included in your file. Wait! Don't download it yet, there is more. For the purpose of learning Mootools and debugging, while developing your application too, you should use the **Uncompressed** version of Mootools. When you have selected all of the components you want in your download, also click on //Choose compression type//. This will drop down a menu, where you should pick //No Compression//. That will give you the full source code of Mootools. //Tip: For testing and learning, you'll probably want download all of Mootools. Rather then selecting every thing by hand, if you have downloaded Firebug, open it and type **Download.all()** in it's command line. Then hit download. :D If you **don't** have Firebug, you can also enter **javascript:Download.all()** into your address bar to do the same thing. // ===== Getting it to run ===== Here is a little skeleton HTML file you could make. Just set the path to the Mootools.js you downloaded, and you'll be set. [[the-plan|Next Page: The Plan]]