You are previewing MooTools 1.2 Beginner's Guide.
O'Reilly logo
MooTools 1.2 Beginner's Guide

Book Description

Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework

  • 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

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

Table of Contents

  1. MooTools 1.2 Beginner's Guide
  2. Credits
  3. About the Authors
  4. About the Reviewer
  5. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Errata
      2. Piracy
      3. Questions
  6. 1. MooTools and Me
    1. What is MooTools?
    2. Why use MooTools?
      1. The advantages of using MooTools
        1. Writing terse and elegant code
        2. Extending native JavaScript
        3. Cross-browser compatibility
        4. Working with the Document Object Model
        5. The advantage of using open-source projects
    3. Downloading and installing MooTools
    4. Time for actiondownloading and installing the MooTools Core
      1. What just happened?
      2. Different MooTools downloads
      3. The domready event listener
    5. Rolling your own MooTools
      1. MooTools Core
    6. Time for actionexploring the MooTools Core Builder
      1. What just happened?
      2. Have a go hero explore the MooTools Core Builder output
      3. MooTools More
    7. Time for actionexploring the MooTools More Builder
      1. What just happened?
    8. The API concept
    9. MooTools resources
      1. MooTools Docs
      2. MooTools Users Google groups
      3. mooforum
      4. The MooTorial
    10. Summary
  7. 2. Writing JavaScript with MooTools
    1. Writing unobtrusive JavaScript with MooTools
      1. An "obtrusive" JavaScript example
      2. What's so bad about it?
        1. Don't repeat it if you don't have to
        2. It'll be hard to maintain
        3. It's a bad practice to have functionality in your content structure
    2. Time for actionrewriting our script unobtrusively
      1. What just happened?
      2. Removing our inline event handlers
      3. Using the DOM to handle events
      4. Pop quiz rewriting our script unobstrusively
    3. Creating MooTools classes
      1. What the heck is a class?
      2. Real-world analogy
      3. Creating a MooTools class
        1. The Implements property
          1. The options property
          2. The initialize method
          3. Our own Dog class methods: .bark() and .sit()
    4. Time for actioncreating an instance of Dog
      1. What just happened?
      2. Have a go hero use the .sit() class method
    5. Time for actiongiving our class instance some custom options
    6. Time for actiondetermining the value of our options
      1. Extending classes
    7. Time for actionextending the ShowDog class with the Dog class
      1. What just happened?
        1. Class inheritance
      2. Have a go hero doing more with the thing
    8. Using MooTools classes
      1. The concept of chainability
      2. The Chain class
      3. A Chain example
      4. A look ahead: Chaining Fx .Tween
    9. Time for actioncreate a chain of Fx.Tween methods
      1. What just happened?
        1. Isn't MooTools classy?
        2. Chainability
      2. Have a go hero doing more with chaining Fx.Tween methods
    10. Summary
  8. 3. Selecting DOM Elements
    1. MooTools and CSS selectors
    2. Working with the $() and $$() functions
      1. The $() dollar function
      2. The $$() dollars function
      3. When to use which
    3. Time for actionselecting an element with the dollar function
    4. Time for actionselecting elements with the dollars function
    5. Time for actionselecting multiple sets of elements with the dollars function
      1. What just happened?
      2. $() versus document.getElementById()
      3. Selecting multiple sets of elements
      4. Have a go hero tween the list item element
      5. Common errors with the dollar and dollars functions
        1. The dollar function doesn't work with CSS selectors!
        2. Drop the pound # sign when using the $() function
      6. Pop quiz find the bad apple in the bunch
    6. Selection using pseudo-classes
      1. Pseudo-class example: Zebra striping a table
    7. Time for actionusing pseudo-classes to zebra stripe a table
      1. What just happened?
      2. Other pseudo-class selectors
    8. Working with attribute selectors
      1. Attribute selector operators
      2. Attribute selector example: Styling different types of links
    9. Time for actionusing = attribute selector
      1. Time for actionusing != attribute selector
        1. Time for actionusing ^= attribute selector
          1. Time for actionusing $= attribute selector
            1. What just happened?
            2. Attribute selector case sensitivity
          2. DOM selection makes unobtrusive JavaScript do-able
          3. Summary
  9. 4. The Core's Useful Utility Functions
    1. What is the Core?
    2. Browser: Getting information about the client
      1. Determining if the client has a specific feature
        1. Browser.Features.xpath
        2. Browser.Features.xhr
      2. Getting information about the client's rendering engine
        1. Determining the client's rendering engine and version
    3. Time for actiondetermining the client's rendering engine and version
      1. Checking if the client is using a particular web browser
      2. Have a go hero checking to see if your browser uses Gecko
        1. Determining if the client has Adobe Flash installed
      3. Finding out information about the client's operating system
        1. Potential uses of this property
        2. Example scenario: Offering the correct download based on the client's platform
          1. SuperSoftware HTML
          2. SuperSoftware CSS
    4. Time for actionusing Browser.Platform to customize SuperSoftware's download page
      1. What just happened?
      2. Pop quiz finding out information about the client's operating system
    5. Exploring the Core utility functions
      1. Checking to see if objects are defined
        1. Seeing if an object has a value with $chk
        2. Checking if an object is defined with $defined
        3. Selecting the first defined object using $pick
        4. Getting the return of first working function with $try
      2. Dealing with time and intervals
        1. The $time() function
    6. Time for actionthe $time() function
      1. What just happened?
        1. The $clear() function
    7. Time for actionexploring the $clear() function with periodical()
      1. What just happened?
      2. Utility functions for working with objects
        1. Extending objects with $extend()
        2. Merging objects with $merge()
        3. Iterating through objects using $each
    8. Time for actionexploring the $each function
      1. What just happened?
      2. Other utility functions in the Core
        1. Generating a random number with $random
        2. Converting objects to arrays with $splat
        3. Determining the data type using $type
        4. Limited use functions
          1. Creating a function placeholder with $empty
          2. Returning arguments using $lambda
          3. Creating a function that returns the specified value using $arguments
    9. Summary
  10. 5. Working with Events
    1. What are events exactly?
      1. Window events
      2. Form events
      3. Keyboard events
      4. Mouse events
      5. MooTools custom mouse events
    2. Adding event listeners
      1. Adding a single event listener
    3. Time for actionhighlighting focused fields of web forms
      1. What just happened?
        1. Adding multiple event listeners
    4. Time for actionadding tooltips to the web form
      1. What just happened?
    5. Creating custom events
    6. Time for actioncreating a custom event for showing help tips
      1. What just happened?
      2. Have a go hero create your own custom event
    7. Removing, cloning, and firing off events
      1. Removing events from elements
        1. Removing a single event from elements
    8. Time for actionremoving an event
      1. Removing a type of event, or all events, from elements
      2. Cloning events from another element
      3. Firing off events
    9. Time for actionfiring off a click event
    10. The MooTools event object
      1. Using event object methods
        1. Preventing the default behavior
    11. Time for actionpreventing the default behavior of a hyperlink
      1. Preventing event bubbling
    12. Time for actionpreventing event bubbling
      1. What just happened?
        1. Stopping default behavior and event propagation
      2. Using event properties
    13. Summary
  11. 6. Bringing Web Pages to Life with Animation
    1. MooTools' Fx class
      1. Basic syntax
      2. Fx options
    2. Animating a CSS property with Fx.Tween
    3. Time for action creating a hide/show FAQ page
      1. What just happened?
      2. Have a go hero modifying the hide/show transition effect
      3. Tweening a single CSS property using the tween() method
    4. Time for actiontoggling the visibility of a div
      1. What just happened?
      2. Fading elements
    5. Time for action - fading an image in and out
      1. What just happened?
      2. Highlighting elements
    6. Time for action - indicating blank form fields that are required
      1. What just happened?
    7. Animating multiple CSS properties with Fx.Morph
    8. Time for action - enlarging an image
      1. What just happened?
      2. Have a go hero modify the transition type
      3. Using the morph() shortcut method
    9. Time for action - experimenting with morph
      1. What just happened?
    10. Other Fx methods
      1. Starting an effect
      2. Setting properties immediately
      3. Cancelling a transition
      4. Pausing effect
      5. Resuming a paused effect
    11. Summary
  12. 7. Going 2.0 with Ajax
    1. What you'll need
    2. Creating a Request object
      1. Request object options
      2. Request events options
        1. Running a function immediately when a request is made
        2. Running a function when the request is completed
        3. Running a function when the request is cancelled
        4. Other Request events
    3. Requesting data
    4. Time for actionrequesting remote data
      1. What just happened?
      2. Requesting HTML and JSON data
        1. Working with HTML data
    5. Time for actionupdating a web page with HTML
      1. What just happened?
        1. Loading HTML documents remotely
    6. Time for actionloading HTML data
      1. Working with JSON data
    7. Time for actionworking with Ajax and JSON
      1. What just happened?
      2. Cancelling a Request
    8. Sending data
    9. Time for actionsending data to PHP
      1. What just happened?
    10. Setting and getting HTTP headers
      1. Setting an HTTP header for an Ajax Request object
      2. Getting an HTTP header
    11. Time for actiongetting the Last-Modified HTTP header
      1. What just happened?
      2. Have a go hero get the content length of the requested page
    12. Summary
  13. 8. Beefing Up MooTools: Using the MooTools More Plugins
    1. Downloading MooTools More plugins
    2. Time for actiondownloading the Fx.Accordion plugin
      1. What just happened?
    3. Installing MooTools plugins
    4. Time for actioninstalling Fx.Accordion
      1. What just happened?
    5. Discovering a handful of MooTools More plugins
      1. Creating engaging content using Fx.Accordion
    6. Time for actioncreating an accordion
      1. What just happened?
        1. Fx.Accordion options
      2. Downloading all the MooTools More plugins we need
    7. Time for actiondownloading more Mootools More plugins
      1. Extending JavaScript's native Date object
    8. Time for actionbuilding a Date calculator tool
      1. What just happened?
      2. Making web forms more user-friendly with the OverText plugin
    9. Time for actioncreating a web form that uses OverText
      1. What just happened?
      2. Drag-and-drop with Drag and Drag.Move
    10. Time for actioncreating a simple drag-and-drop game
      1. What just happened?
    11. Summary
  14. 9. Creating Your Own Plugin
    1. Why create a plugin?
    2. Designing the plugin
    3. Time for actioncreating a design sheet for our plugin
      1. What just happened?
    4. Creating the ImageCaption script
    5. Time for actionwriting the ImageCaption script
      1. What just happened?
      2. Noting down pitfalls and places of improvement to the script
    6. Converting the script to a flexible plugin
    7. Time for actioncreating the ImageCaption plugin
      1. What just happened?
    8. Instantiating the plugin
    9. Time for actionbasic instantiation of the ImageCaption plugin
      1. What just happened?
      2. Creating a more complex instance of the plugin
    10. Time for actioncreating new instances of the plugin
      1. Creating multiple instances of the plugin
    11. Time for actionmultiple instances of the ImageCaption plugin
      1. What just happened?
    12. Preparing your plugin for the public
      1. Documenting your plugin with comments
    13. Time for actiondocumenting the ImageCaption plugin
      1. What just happened?
      2. External documentation
    14. Time for actioncreating a basic download page for the ImageCaption plugin
      1. What just happened?
    15. Summary