Supercharged JavaScript Graphics

Supercharged JavaScript Graphics

by Raffaele Cecco
Released July 2011
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449393632

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

With HTML5 and improved web browser support, JavaScript has become the tool of choice for creating high-performance web graphics. This faced-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for computers and mobile devices.

By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications. This book serves complex subjects in easily digestible pieces, and each topic acts as a foundation for the next.

  • Tackle JavaScript optimization and understand how it impacts performance
  • Create fast-moving graphics by combining old-school DHTML with jQuery
  • Learn advanced UI techniques using the jQuery UI and Ext JS libraries
  • Build games with collision detection, object handling, and JavaScript scrolling techniques
  • Master HTML5 Canvas basics for drawings, fills, bitmaps, animation, and more
  • Create applications for the small screen with jQuery Mobile and PhoneGap
  • Use Google’s data visualization tools to create interactive dashboards

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Audience and Assumptions
    2. Organization
    3. Conventions Used in This Book
    4. Using Code Examples
      1. Target Browsers
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  2. 1. Code Reuse and Optimization
    1. Keeping It Fast
    2. What and When to Optimize
    3. Homespun Code Profiling
    4. Optimizing JavaScript
      1. Lookup Tables
      2. Bitwise Operators, Integers, and Binary Numbers
        1. A quick recap of binary numbers
        2. JavaScript’s bitwise operators
          1. Bitwise AND (x & y)
          2. Bitwise OR (x | y)
          3. Bitwise XOR (x ^ y)
          4. Bitwise NOT (~x)
          5. Shift left (x << numBits)
          6. Shift right with sign (x >> numBits)
          7. Shift right with zero fill (x >>> y)
        3. Loop unrolling: An inconvenient truth
    5. Optimizing jQuery and DOM Interaction
      1. Optimizing CSS Style Changes
      2. Optimizing DOM Insertion
    6. Other Resources
  3. 2. DHTML Essentials
    1. Creating DHTML Sprites
      1. Image Animation
      2. Encapsulation and Drawing Abstraction (aka Hiding Stuff)
      3. Minimizing DOM Insertion and Deletion
      4. The Sprite Code
      5. A Simple Sprite Application
      6. A More Dynamic Sprite Application
    2. Converting into a jQuery Plug-in
    3. Timers, Speed, and Frame Rate
      1. Using setInterval and setTimeout
      2. Timer Accuracy
      3. Achieving Consistent Speed
    4. Internet Explorer 6 Background Image Caching
  4. 3. Scrolling
    1. CSS-Only Scrolling Effects
    2. Scrolling with JavaScript
      1. Background Image Scrolling
      2. Tile-Based Image Scrolling
        1. Snapping...
        2. ...and Wrapping
        3. Keeping things fast
        4. Tile scrolling code
        5. Creating tile maps with Tiled
          1. Tiled file format
        6. Tile scroller page layout
  5. 4. Advanced UI
    1. HTML5 Forms
    2. Using JavaScript UI Libraries
      1. Using jQuery UI for Enhanced Web Interfaces
        1. Loading and using jQuery UI
        2. Theming jQuery UI
      2. Heavy Duty UI with Ext JS
        1. Loading and using Ext JS
    3. Creating UI Elements from Scratch
      1. Creating a 3D Carousel
        1. Carousel specifications
        2. Carousel image loading
        3. Carousel item objects
        4. The carousel object
        5. The jQuery plug-in part
        6. Carousel page layout
  6. 5. Introduction to JavaScript Games
    1. Game Objects Overview
    2. The Game Code
      1. Game-Wide Variables
      2. Reading Keys
      3. Moving Everything
      4. A Simple Animator
      5. Collision Detection
      6. Aliens
        1. Alien bombs
        2. Alien invaders
        3. Aliens manager
      7. The Player
        1. Tank
        2. Laser
      8. Shields
      9. Mystery Saucer
      10. The Game
      11. Putting It All Together
  7. 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
      1. The Canvas Element
      2. The Drawing Context
      3. Drawing Rectangles
      4. Drawing Paths with Lines and Curves
      5. Drawing Bitmap Images
      6. Colors, Strokes, and Fills
    8. Animating with Canvas
    9. Canvas and Recursive Drawing
      1. Canvas Tree Page Layout
    10. Replacing DHTML Sprites with Canvas Sprites
      1. The New CanvasSprite Object
      2. Other Code Changes
    11. A Graphical Chat Application with Canvas and WebSockets
      1. The WebSockets Advantage
      2. WebSockets Support and Security
        1. Turning on WebSockets in Firefox 4 and Opera 11
      3. The Chat Application
        1. The socket server
        2. Installing a web hosting environment locally
        3. The camera
        4. The avatars
        5. The chat text
        6. The background
        7. Initialization
        8. The page code
  8. 7. Vectors for Games and Simulations
    1. Operations on Vectors
      1. Addition and Subtraction
      2. Scaling
      3. Normalization
      4. Rotation
      5. Dot Product
    2. Creating a JavaScript Vector Object
    3. A Cannon Simulation Using Vectors
      1. Simulation-Wide Variables
      2. The Cannonball
      3. The Cannon
      4. The Background
      5. The Main Loop
      6. Page Layout
    4. Rocket Simulation
      1. The Game Object
      2. The Obstacle Object
      3. The Rocket Object
      4. Background
      5. Collision Detection and Response
      6. Page Code
      7. Possible Improvements and Modifications
  9. 8. Google Visualizations
    1. Limitations
    2. Chart Glossary
    3. Image Charts
      1. Data Formats and Chart Resolution
        1. Basic text format
        2. Text format with custom scaling
        3. Simple encoding format
        4. Extended encoding format
      2. Using Dynamic Data
      3. Summary
    4. Interactive Charts
      1. Interactive Charts Events
        1. Retrieving event information
  10. 9. Reaching the Small Screen with jQuery Mobile
    1. jQuery Mobile
    2. TilePic: A Mobile-Friendly Web Application
      1. TilePic Game Description
      2. TilePic Game Code
        1. Application-wide variables
        2. The tile object
        3. Checking whether the puzzle is solved
        4. Moving tiles
        5. Shuffling the tiles
        6. TilePic setup code
        7. TilePic events
        8. TilePic page layout
    3. PhoneGap
  11. 10. Creating Android Apps with PhoneGap
    1. Installing PhoneGap
      1. Installing the Java JDK
      2. Installing the Android SDK
      3. Installing Eclipse
      4. Installing Android Development Tools
      5. Installing PhoneGap
    2. Creating a PhoneGap Project in Eclipse
      1. Altering the App.java File
      2. Altering the AndroidManifest.xml File
      3. Creating and Testing a Simple Web Application
      4. Testing the TilePic Application
  12. Index
  13. About the Author
  14. Colophon
  15. Copyright

Product information

  • Title: Supercharged JavaScript Graphics
  • Author(s): Raffaele Cecco
  • Release date: July 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449393632