MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework - Helion
ebook
Autor: Ian Haycox, Garrick Cheung, Jacob GubeTytuł oryginału: 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
stron: 280, Format: ebook
Data wydania: 2009-12-27
Księgarnia: Helion
Cena książki: 129,00 zł
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.
Osoby które kupowały "MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework", wybierały także:
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
- Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)
- Od hierarchii do turkusu, czyli jak zarządzać w XXI wieku 58,64 zł, (12,90 zł -78%)
Spis treści
MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework eBook -- spis treści
- 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
- The advantages of using MooTools
- 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()
- The Implements property
- 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
- What just happened?
- 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
- What just happened?
- Summary
- Writing unobtrusive JavaScript with MooTools
- 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
- Time for actionusing $= attribute selector
- Time for actionusing ^= attribute selector
- Time for actionusing != attribute selector
- 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
- Determining if the client has a specific feature
- 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
- Checking to see if objects are defined
- Time for actionthe $time() function
- What just happened?
- The $clear() function
- What just happened?
- 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
- What just happened?
- 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
- Removing events 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
- Using event object methods
- 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
- What just happened?
- Summary
- What are events exactly?
- 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
- MooTools' Fx class
- 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
- What just happened?
- 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
- What just happened?
- 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