You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

Converting into a jQuery Plug-in

Converting the bouncy sprite application into a jQuery plug-in adds functionality that takes advantage of jQuery’s ability to easily search for DOM elements via CSS selectors and return them as a list for further processing. The plug-in will search for any specified elements and attach multiple bouncySprite instances to them via the bouncyBoss object. It will also allow you to change the background color of the elements being attached to and the number of bouncySprite instances being attached.

Although converting the bouncy sprite application into a flexible jQuery plug-in may sound like a substantial job, there’s actually less work involved than you might expect. Because of the modular and self-contained way in which the DHTMLSprite, bouncySprite, and bouncyBoss objects were developed, they will slip unobtrusively into a jQuery plug-in structure.

The initial solitary semicolon may seem odd (it is not a typo), but it protects against problems arising from cases where the code preceding the plug-in does not end with a semicolon as expected. Normally, this is not an issue, as JavaScript will identify the plug-in code after a line break as a new statement. However, if the preceding code and the plug-in were minified, the whitespace—including line breaks—would probably be removed. The plug-in would subsequently fail due to the lack of an identifying break between it and the preceding code.

;    // Initial solitary semicolon.

Here, we define an anonymous function. ...

The best content for your career. Discover unlimited learning on demand for around $1/day.