MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework - Ebook - Ian Haycox, Garrick Cheung, Jacob Gube - Modern learning platform

E-book details

Log in, If you're interested in the contents of the item.

MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework

Ian Haycox, Garrick Cheung, Jacob Gube

Ebook

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.

MooTools 1.2 Beginners Guide
- Table of Contents
- MooTools 1.2 Beginner's Guide
- Credits
- About the Authors
- About the Reviewer
- Preface
  - What this book covers
  - What you need for this book
  - Who this book is for
  - Conventions
  - Reader feedback
  - Customer support
    - Errata
    - Piracy
    - Questions
- 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 actiondownloading and installing the MooTools Core
    - What just happened?
    - Different MooTools downloads
    - The domready event listener
  - Rolling your own MooTools
    - MooTools Core
  - Time for actionexploring the MooTools Core Builder
    - What just happened?
    - Have a go hero explore the MooTools Core Builder output
    - MooTools More
  - Time for actionexploring the MooTools More Builder
    - What just happened?
  - The API concept
  - MooTools resources
    - MooTools Docs
    - MooTools Users Google groups
    - mooforum
    - The MooTorial
  - Summary
- 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 actionrewriting our script unobtrusively
    - What just happened?
    - Removing our inline event handlers
    - Using the DOM to handle events
    - Pop quiz rewriting our script unobstrusively
  - Creating MooTools classes
    - What the heck is a class?
    - Real-world analogy
    - Creating a MooTools class
      - The Implements property
        
        The options property
        
        The initialize method
        
        Our own Dog class methods: .bark() and .sit()
  - Time for actioncreating an instance of Dog
    - What just happened?
    - Have a go hero use the .sit() class method
  - Time for actiongiving our class instance some custom options
  - Time for actiondetermining the value of our options
    - Extending classes
  - Time for actionextending the ShowDog class with the Dog class
    - What just happened?
      - Class inheritance
    - Have a go hero doing more with the thing
  - Using MooTools classes
    - The concept of chainability
    - The Chain class
    - A Chain example
    - A look ahead: Chaining Fx .Tween
  - Time for actioncreate a chain of Fx.Tween methods
    - What just happened?
      - Isn't MooTools classy?
      - Chainability
    - Have a go hero doing more with chaining Fx.Tween methods
  - Summary
- 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 actionselecting an element with the dollar function
  - Time for actionselecting elements with the dollars function
  - Time for actionselecting multiple sets of elements with the dollars function
    - What just happened?
    - $() versus document.getElementById()
    - Selecting multiple sets of elements
    - Have a go hero tween the list item element
    - Common errors with the dollar and dollars functions
      - The dollar function doesn't work with CSS selectors!
      - Drop the pound # sign when using the $() function
    - Pop quiz find the bad apple in the bunch
  - Selection using pseudo-classes
    - Pseudo-class example: Zebra striping a table
  - Time for actionusing pseudo-classes to zebra stripe a table
    - What just happened?
    - Other pseudo-class selectors
  - Working with attribute selectors
    - Attribute selector operators
    - Attribute selector example: Styling different types of links
  - Time for actionusing = attribute selector
    - Time for actionusing != attribute selector
      - Time for actionusing ^= attribute selector
        
        Time for actionusing $= attribute selector
        
        What just happened?
        
        Attribute selector case sensitivity
        
        DOM selection makes unobtrusive JavaScript do-able
        
        Summary
- 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 actiondetermining the client's rendering engine and version
    - Checking if the client is using a particular web browser
    - Have a go hero checking to see if your browser uses Gecko
      - 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
        
        SuperSoftware HTML
        
        SuperSoftware CSS
  - Time for actionusing Browser.Platform to customize SuperSoftware's download page
    - What just happened?
    - Pop quiz finding out information about the client's operating system
  - 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 actionthe $time() function
    - What just happened?
      - The $clear() function
  - Time for actionexploring the $clear() function with periodical()
    - What just happened?
    - Utility functions for working with objects
      - Extending objects with $extend()
      - Merging objects with $merge()
      - Iterating through objects using $each
  - Time for actionexploring the $each function
    - What just happened?
    - 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
        
        Creating a function placeholder with $empty
        
        Returning arguments using $lambda
        
        Creating a function that returns the specified value using $arguments
  - Summary
- 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 actionhighlighting focused fields of web forms
    - What just happened?
      - Adding multiple event listeners
  - Time for actionadding tooltips to the web form
    - What just happened?
  - Creating custom events
  - Time for actioncreating a custom event for showing help tips
    - What just happened?
    - Have a go hero create your own custom event
  - Removing, cloning, and firing off events
    - Removing events from elements
      - Removing a single event from elements
  - Time for actionremoving an event
    - Removing a type of event, or all events, from elements
    - Cloning events from another element
    - Firing off events
  - Time for actionfiring off a click event
  - The MooTools event object
    - Using event object methods
      - Preventing the default behavior
  - Time for actionpreventing the default behavior of a hyperlink
    - Preventing event bubbling
  - Time for actionpreventing event bubbling
    - What just happened?
      - Stopping default behavior and event propagation
    - Using event properties
  - Summary
- 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
    - What just happened?
    - Have a go hero modifying the hide/show transition effect
    - Tweening a single CSS property using the tween() method
  - Time for actiontoggling the visibility of a div
    - What just happened?
    - Fading elements
  - Time for action - fading an image in and out
    - What just happened?
    - Highlighting elements
  - Time for action - indicating blank form fields that are required
    - What just happened?
  - Animating multiple CSS properties with Fx.Morph
  - Time for action - enlarging an image
    - What just happened?
    - Have a go hero modify the transition type
    - Using the morph() shortcut method
  - Time for action - experimenting with morph
    - What just happened?
  - Other Fx methods
    - Starting an effect
    - Setting properties immediately
    - Cancelling a transition
    - Pausing effect
    - Resuming a paused effect
  - Summary
- 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 actionrequesting remote data
    - What just happened?
    - Requesting HTML and JSON data
      - Working with HTML data
  - Time for actionupdating a web page with HTML
    - What just happened?
      - Loading HTML documents remotely
  - Time for actionloading HTML data
    - Working with JSON data
  - Time for actionworking with Ajax and JSON
    - What just happened?
    - Cancelling a Request
  - Sending data
  - Time for actionsending data to PHP
    - What just happened?
  - Setting and getting HTTP headers
    - Setting an HTTP header for an Ajax Request object
    - Getting an HTTP header
  - Time for actiongetting the Last-Modified HTTP header
    - What just happened?
    - Have a go hero get the content length of the requested page
  - Summary
- 8. Beefing Up MooTools: Using the MooTools More Plugins
  - Downloading MooTools More plugins
  - Time for actiondownloading the Fx.Accordion plugin
    - What just happened?
  - Installing MooTools plugins
  - Time for actioninstalling Fx.Accordion
    - What just happened?
  - Discovering a handful of MooTools More plugins
    - Creating engaging content using Fx.Accordion
  - Time for actioncreating an accordion
    - What just happened?
      - Fx.Accordion options
    - Downloading all the MooTools More plugins we need
  - Time for actiondownloading more Mootools More plugins
    - Extending JavaScript's native Date object
  - Time for actionbuilding a Date calculator tool
    - What just happened?
    - Making web forms more user-friendly with the OverText plugin
  - Time for actioncreating a web form that uses OverText
    - What just happened?
    - Drag-and-drop with Drag and Drag.Move
  - Time for actioncreating a simple drag-and-drop game
    - What just happened?
  - Summary
- 9. Creating Your Own Plugin
  - Why create a plugin?
  - Designing the plugin
  - Time for actioncreating a design sheet for our plugin
    - What just happened?
  - Creating the ImageCaption script
  - Time for actionwriting the ImageCaption script
    - What just happened?
    - Noting down pitfalls and places of improvement to the script
  - Converting the script to a flexible plugin
  - Time for actioncreating the ImageCaption plugin
    - What just happened?
  - Instantiating the plugin
  - Time for actionbasic instantiation of the ImageCaption plugin
    - What just happened?
    - Creating a more complex instance of the plugin
  - Time for actioncreating new instances of the plugin
    - Creating multiple instances of the plugin
  - Time for actionmultiple instances of the ImageCaption plugin
    - What just happened?
  - Preparing your plugin for the public
    - Documenting your plugin with comments
  - Time for actiondocumenting the ImageCaption plugin
    - What just happened?
    - External documentation
  - Time for actioncreating a basic download page for the ImageCaption plugin
    - What just happened?
  - Summary
- Index

Title: MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework
Author: Ian Haycox, Garrick Cheung, Jacob Gube
Original title: MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework
ISBN: 9781847194596, 9781847194596
Date of issue: 2009-12-27
Format: Ebook
Item ID: e_3cxe
Publisher: Packt Publishing

select a language

Categories

E-book details