MooTools 1.2 Beginner's Guide


MooTools 1.2 Beginner's Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • Learn how to build super-charged web forms
  • Learn how to write powerful and flexible cross-browser code
  • Make your web applications more dynamic and user-interactive with AJAX
  • Packed with examples that will show you step by step the most important aspects of getting started with MooTools

Book Details

Language : English
Paperback : 280 pages [ 235mm x 191mm ]
Release Date : December 2009
ISBN : 1847194583
ISBN 13 : 9781847194589
Author(s) : Jacob Gube, Garrick Cheung
Topics and Technologies : All Books, Web Development, Java, Open Source


Table of Contents

Preface
Chapter 1: MooTools and Me
Chapter 2: Writing JavaScript with MooTools
Chapter 3: Selecting DOM Elements
Chapter 4: The Core's Useful Utility Functions
Chapter 5: Working with Events
Chapter 6: Bringing Web Pages to Life with Animation
Chapter 7: Going 2.0 with Ajax
Chapter 8: Beefing Up MooTools: Using the MooTools More Plugins
Chapter 9: Creating Your Own Plugin
Index
  • Chapter 1: MooTools and Me
    • What is MooTools?
    • Why use MooTools?
      • The advantages of using MooTools
        • Writing terse and elegant code
        • Extending native JavaScript
        • Cross-browser compatibility
        • Working with the Document Object Model
        • The advantage of using open-source projects
    • Downloading and installing MooTools
    • Time for action – downloading and installing the MooTools Core
      • Different MooTools downloads
      • The domready event listener
    • Rolling your own MooTools
      • MooTools Core
    • Time for action – exploring the MooTools Core Builder
      • MooTools More
    • Time for action – exploring the MooTools More Builder
    • The API concept
    • MooTools resources
      • MooTools Docs
      • MooTools Users Google groups
      • mooforum
      • The MooTorial
    • Summary
  • Chapter 2: Writing JavaScript with MooTools
    • Writing unobtrusive JavaScript with MooTools
      • An "obtrusive" JavaScript example
      • What's so bad about it?
        • Don't repeat it if you don't have to
        • It'll be hard to maintain
        • It's a bad practice to have functionality in your content structure
    • Time for action – rewriting our script unobtrusively
      • Removing our inline event handlers
      • Using the DOM to handle events
    • Creating MooTools classes
      • What the heck is a class?
      • Real-world analogy
      • Creating a MooTools class
        • The Implements property
    • Time for action – creating an instance of Dog
    • Time for action – giving our class instance some custom options
    • Time for action – determining the value of our options
      • Extending classes
  • Time for action – extending the ShowDog class with
  • the Dog class
    • Class inheritance
  • Using MooTools classes
    • The concept of chainability
    • The Chain class
    • A Chain example
    • A look ahead: Chaining Fx .Tween
  • Time for action – create a chain of Fx.Tween methods
    • Isn't MooTools classy?
    • Chainability
  • Summary
  • Chapter 3: Selecting DOM Elements
    • MooTools and CSS selectors
    • Working with the $() and $$() functions
      • The $() dollar function
      • The $$() dollars function
      • When to use which
    • Time for action – selecting an element with the dollar function
    • Time for action – selecting elements with the dollars function
    • Time for action – selecting multiple sets of elements
    • with the dollars function
      • $() versus document.getElementById()
      • Selecting multiple sets of elements
      • Common errors with the dollar and dollars functions
    • Selection using pseudo-classes
      • Pseudo-class example: Zebra striping a table
    • Time for action – using pseudo-classes to zebra stripe a table
      • Other pseudo-class selectors
    • Working with attribute selectors
      • Attribute selector operators
      • Attribute selector example: Styling different types of links
    • Time for action – using = attribute selector
    • Time for action – using != attribute selector
    • Time for action – using ^= attribute selector
    • Time for action – using $= attribute selector
      • Attribute selector case sensitivity
    • DOM selection makes unobtrusive JavaScript do-able
    • Summary
  • Chapter 4: The Core's Useful Utility Functions
    • What is the Core?
    • Browser: Getting information about the client
      • Determining if the client has a specific feature
        • Browser.Features.xpath
        • Browser.Features.xhr
      • Getting information about the client's rendering engine
        • Determining the client's rendering engine and version
    • Time for action – determining the client's rendering engine and version
      • Checking if the client is using a particular web browser
      • Determining if the client has Adobe Flash installed
    • Finding out information about the client's operating system
      • Potential uses of this property
      • Example scenario: Offering the correct download based on the client's platform
  • Time for action – using Browser.Platform to customize SuperSoftware's download page
  • Exploring the Core utility functions
    • Checking to see if objects are defined
      • Seeing if an object has a value with $chk
      • Checking if an object is defined with $defined
      • Selecting the first defined object using $pick
      • Getting the return of first working function with $try
    • Dealing with time and intervals
      • The $time() function
  • Time for action – the $time() function
    • The $clear() function
  • Time for action – exploring the $clear() function with periodical()
    • Utility functions for working with objects
      • Extending objects with $extend()
      • Merging objects with $merge()
      • Iterating through objects using $each
  • Time for action – exploring the $each function
    • Other utility functions in the Core
      • Generating a random number with $random
      • Converting objects to arrays with $splat
      • Determining the data type using $type
      • Limited use functions
  • Summary
  • Chapter 5: Working with Events
    • What are events exactly?
      • Window events
      • Form events
      • Keyboard events
      • Mouse events
      • MooTools custom mouse events
    • Adding event listeners
      • Adding a single event listener
    • Time for action – highlighting focused fields of web forms
      • Adding multiple event listeners
  • Time for action – adding tooltips to the web form
  • Creating custom events
  • Time for action – creating a custom event for showing help tips
  • Removing, cloning, and firing off events
    • Removing events from elements
      • Removing a single event from elements
  • Time for action – removing an event
    • Removing a type of event, or all events, from elements
    • Cloning events from another element
    • Firing off events
  • Time for action – firing off a click event
  • The MooTools event object
    • Using event object methods
      • Preventing the default behavior
  • Time for action – preventing the default behavior of a hyperlink
    • Preventing event bubbling
  • Time for action – preventing event bubbling
    • Stopping default behavior and event propagation
  • Using event properties
  • Summary
  • Chapter 6: Bringing Web Pages to Life with Animation
    • MooTools' Fx class
      • Basic syntax
      • Fx options
    • Animating a CSS property with Fx.Tween
    • Time for action - creating a hide/show FAQ page
      • Tweening a single CSS property using the tween() method
    • Time for action – toggling the visibility of a div
      • Fading elements
    • Time for action - fading an image in and out
      • Highlighting elements
    • Time for action - indicating blank form fields that are required
    • Animating multiple CSS properties with Fx.Morph
    • Time for action - enlarging an image
      • Using the morph() shortcut method
    • Time for action - experimenting with morph
    • Other Fx methods
      • Starting an effect
      • Setting properties immediately
      • Cancelling a transition
      • Pausing effect
      • Resuming a paused effect
    • Summary
  • Chapter 7: Going 2.0 with Ajax
    • What you'll need
    • Creating a Request object
      • Request object options
      • Request events options
        • Running a function immediately when a request is made
        • Running a function when the request is completed
        • Running a function when the request is cancelled
        • Other Request events
    • Requesting data
    • Time for action – requesting remote data
      • Requesting HTML and JSON data
        • Working with HTML data
    • Time for action – updating a web page with HTML
      • Loading HTML documents remotely
  • Time for action – loading HTML data
    • Working with JSON data
  • Time for action – working with Ajax and JSON
    • Cancelling a Request
  • Sending data
  • Time for action – sending data to PHP
  • Setting and getting HTTP headers
    • Setting an HTTP header for an Ajax Request object
    • Getting an HTTP header
  • Time for action – getting the Last-Modified HTTP header
  • Summary
  • Chapter 8: Beefing Up MooTools: Using the MooTools More Plugins
    • Downloading MooTools More plugins
    • Time for action – downloading the Fx.Accordion plugin
    • Installing MooTools plugins
    • Time for action – installing Fx.Accordion
    • Discovering a handful of MooTools More plugins
      • Creating engaging content using Fx.Accordion
    • Time for action – creating an accordion
      • Fx.Accordion options
    • Downloading all the MooTools More plugins we need
  • Time for action – downloading more Mootools More plugins
    • Extending JavaScript's native Date object
  • Time for action – building a Date calculator tool
    • Making web forms more user-friendly with the OverText plugin
  • Time for action – creating a web form that uses OverText
    • Drag-and-drop with Drag and Drag.Move
  • Time for action – creating a simple drag-and-drop game
  • Summary
  • Chapter 9: Creating Your Own Plugin
    • Why create a plugin?
    • Designing the plugin
    • Time for action – creating a design sheet for our plugin
    • Creating the ImageCaption script
    • Time for action – writing the ImageCaption script
      • Noting down pitfalls and places of improvement to the script
    • Converting the script to a flexible plugin
    • Time for action – creating the ImageCaption plugin
    • Instantiating the plugin
    • Time for action – basic instantiation of the ImageCaption plugin
      • Creating a more complex instance of the plugin
    • Time for action – creating new instances of the plugin
      • Creating multiple instances of the plugin
    • Time for action – multiple instances of the ImageCaption plugin
    • Preparing your plugin for the public
      • Documenting your plugin with comments
    • Time for action – documenting the ImageCaption plugin
      • External documentation
    • Time for action – creating a basic download page for the ImageCaption plugin
    • Summary

Jacob Gube

Jacob Gube is a massive MooTools developer. He is the Founder and Chief Editor of Six Revisions, a website dedicated to web developers and web designers. He's also written for other popular web publications such as Read Write Web and Smashing Magazine discussing web technologies and development. A web professional for 8 years, Jacob is an in-house web developer specializing in distance-learning education and web accessibility, using PHP, MooTools, and jQuery to get the job done.


Garrick Cheung

Garrick Cheung is a designer-developer and a member of the official Mootools Community team. He's currently a Senior Technical Producer for CBS Interactive developing for sites such as GameSpot.com, TV.com and MP3.com. He's passionate about code optimization and loves to teach and develop in MooTools. Garrick also writes about code and development at his site, http://www.garrickcheung.com.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 3 submitted: last submission 30 Oct 2013

Errata type: Others | Page number: 89 | Errata date: 04 Sep 08

Please describe the errata.: userPlatform!='other' || userPlatform!='ipod' should be userPlatform!='other' && userPlatform!='ipod' Later in the chapter, where the whole script is shown in one piece, this has been in fact corrected.

 

Errata Type: Code

Page Number: 137

The following:

alert('You clicked on #' + this.get('id'));

Should be:

alert('You clicked on #' + this.get('id'));

e.stop();

Errata Type: Code

Page Number: 60

The following:

var listItem = $(document.getElementById);

Should be:

var element = $(listItem);

The following:

listItem.setStyle('color', 'red');

Should be:

element.setStyle('color', 'red');

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

MooTools 1.2 Beginner's Guide +    Oracle SOA Suite 11g R1 Developer's Guide =
50% Off
the second eBook
Price for both: €23.79

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Bringing web pages to life using animation
  • Boosting the responsiveness of your web applications using AJAX with MooTools
  • Building a web form dynamically responsive to a multitude of browser events
  • The basics core functions of MooTools and how they work
  • Creating your own versatile plug-ins that can be customized to fit your own personal requirements
  • How to rapidly build a quick and easy web application using the power of MooTools

In Detail

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.

Get to grips with MooTools so that you can start to create web pages and web applications worthy of the Web 2.0 world

Approach

This is a Packt Beginner's Guide, which means it is packed with clear step-by-step instructions for performing the most useful tasks in MooTools. You will learn by doing and you will start learning immediately. As each chapter in the book progresses, the topics will get increasingly more complex. It starts by explaining the fundamentals of MooTools before undertaking tasks and challenges that encourage experimentation.

Who this book is for

This book is perfect for MooTools newcomers. You do not require any familiarity with MooTools whatsoever, only a willingness to learn. Basic knowledge of JavaScript syntax and concepts is the only requirement. This book will allow you to grasp the basics of MooTools so that you will be well on the way to creating exciting, customizable web pages and applications.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software