book

JavaScript Cookbook

Name: JavaScript Cookbook
Author: Shelley Powers
ISBN: 9780596806132

by Shelley Powers

July 2010

Intermediate to advanced

552 pages

12h 40m

English

O'Reilly Media, Inc.

Read now

Unlock full access

A Note Regarding Supplemental Files
Preface
Audience, Assumptions, and ApproachConventions Used in This BookUsing Code ExamplesHow to Contact UsSafari® Books OnlineAcknowledgments
1. Working with JavaScript Strings
1.0. Introduction1.1. Concatenating Two or More Strings1.2. Concatenating a String and Another Data Type1.3. Conditionally Comparing Strings1.4. Finding a Substring in a String1.5. Extracting a Substring from a String1.6. Checking for an Existing, Nonempty String1.7. Breaking a Keyword String into Separate Keywords1.8. Inserting Special Characters1.9. Processing Individual Lines of a textarea1.10. Trimming Whitespace from the Ends of a String1.11. Left- or Right-Pad a String
2. Using Regular Expressions
2.0. Introduction2.1. Testing Whether a Substring Exists2.2. Testing for Case-Insensitive Substring Matches2.3. Validating a Social Security Number2.4. Finding and Highlighting All Instances of a Pattern2.5. Replacing Patterns with New Strings2.6. Swap Words in a String Using Capturing Parentheses2.7. Using Regular Expressions to Trim Whitespace2.8. Replace HTML Tags with Named Entities2.9. Searching for Special Characters
3. Dates, Time, and Timers
3.0. Introduction3.1. Printing Out Today’s Date3.2. Printing Out the UTC Date and Time3.3. Printing Out an ISO 8601 Formatted Date3.4. Converting an ISO 8601 Formatted Date to a Format Acceptable to the Date Object3.5. Creating a Specific Date3.6. Scheduling a Future Date3.7. Tracking Elapsed Time3.8. Creating a Timeout3.9. Creating Recurring Timers3.10. Using Function Closures with Timers
4. Working with Numbers and Math
4.0. Introduction4.1. Keeping an Incremental Counter4.2. Converting a Decimal to a Hexadecimal Value4.3. Creating a Random Number Generator4.4. Randomly Generating Colors4.5. Converting Strings in a Table to Numbers4.6. Summing All Numbers in a Table Column4.7. Converting Between Degrees and Radians4.8. Find the Radius and Center of a Circle to Fit Within a Page Element4.9. Calculating the Length of a Circular Arc
5. Working with Arrays and Loops
5.0. Introduction5.1. Looping Through an Array5.2. Creating a Multidimensional Array5.3. Creating a String from an Array5.4. Sorting an Array5.5. Store and Access Values in Order5.6. Store and Access Values in Reverse Order5.7. Create a New Array as a Subset of an Existing Array5.8. Searching Through an Array5.9. Flatten a Multidimensional Array5.10. Search and Remove or Replace Array Elements5.11. Applying a Function Against Each Array Element5.12. Applying a Function to Every Element in an Array and Returning a New Array5.13. Creating a Filtered Array5.14. Validating Array Contents5.15. Using an Associative Array to Store Form Element Names and Values
6. Building Reusability with JavaScript Functions
6.0. Introduction6.1. Creating a Block of Reusable Code6.2. Passing Single Data Values to and from a Function6.3. Passing Complex Data Objects to a Function6.4. Creating a Dynamic Runtime Function6.5. Passing a Function As an Argument to Another Function6.6. Implementing a Recursive Algorithm6.7. Create a Function That Remembers Its State6.8. Improving Application Performance with a Generalized Currying Function6.9. Improve Application Performance with Memoization (Caching Calculations)6.10. Using an Anonymous Function to Wrap Global Variables
7. Handling Events
7.0. Introduction7.1. Detecting When the Page Has Finished Loading7.2. Capturing the Location of a Mouse Click Event Using the Event Object7.3. Creating a Generic, Reusable Event Handler Function7.4. Canceling an Event Based on Changed Circumstance7.5. Preventing an Event from Propagating Through a Set of Nested Elements7.6. Capturing Keyboard Activity7.7. Using the New HTML5 Drag-and-Drop7.8. Using Safari Orientation Events and Other Mobile Development Environments
8. Browser Pieces
8.0. Introduction8.1. Ask the Web Page Reader to Confirm an Action8.2. Creating a New, Stripped-Down Browser Window8.3. Finding Out About the Browser Accessing the Page8.4. Warning the Web Page Reader About Leaving a Page8.5. Changing Stylesheets Depending on Color Support8.6. Modifying Image Dimensions Depending on Page Size8.7. Creating Breadcrumbs in a CMS Template Page8.8. Bookmarking a Dynamic Page8.9. Preserving State for Back Button, Page Refresh

9. Form Elements and Validation
9.0. Introduction9.1. Accessing Form Text Input Values9.2. Dynamically Disabling and Enabling Form Elements9.3. Getting Information from a Form Element Based on an Event9.4. Performing an Action When a Radio Button Is Clicked9.5. Checking for a Valid Phone Number9.6. Canceling a Form Submission9.7. Preventing Duplicate Form Submissions9.8. Hiding and Displaying Form Elements9.9. Modifying a Selection List Based on Other Form Decisions
10. Debugging and Error Handling
10.0. Introduction10.1. Gracefully Handling No JavaScript Support10.2. Checking for Errors in Functions10.3. Using an Alert for Simple Debugging10.4. Catching an Error and Providing Graceful Error Handling10.5. Initiating Manageable Errors10.6. Using Firebug with Firefox10.7. Setting a Breakpoint and Examining Data with Firebug10.8. Firefox and the Console10.9. Using IE’s Built-in Debugger10.10. Setting a Breakpoint with IE Developer Tools10.11. Opera’s Dragonfly10.12. Setting a Breakpoint with Dragonfly10.13. Turning on Safari’s Development Tools10.14. Setting a Breakpoint with Safari’s Debugger10.15. Debugging in Chrome
11. Accessing Page Elements
11.0. Introduction11.1. Access a Given Element and Find Its Parent and Child Elements11.2. Accessing All Images in the Web Page11.3. Discover All Images Within an Article11.4. Discover all Images in Articles Using the Selectors API11.5. Finding the Parent Element for a Group of Elements11.6. Highlighting the First Paragraph in Every Element11.7. Apply a Striping Theme to an Unordered List11.8. Creating an Array of All Elements of a Given Class11.9. Finding All Elements That Share an Attribute11.10. Finding All Checked Options11.11. Summing All the Values in a Table Row11.12. Get Element Attributes11.13. Get Style Information for an Element
12. Creating and Removing Elements and Attributes
12.0. Introduction12.1. Using innerHTML: A Quick and Easy Approach to Adding Content12.2. Inserting Elements Before Existing Page Elements12.3. Appending a New Element to the End of a Page12.4. Triggering Older Versions of IE to Style New Elements12.5. Inserting a New Paragraph12.6. Adding Text to a New Paragraph12.7. Adding Attributes to an Existing Element12.8. Testing for a Boolean Attribute12.9. Removing an Attribute12.10. Moving a Paragraph12.11. Replacing Links with Footnote Bullets12.12. Adding Rows to an Existing Table12.13. Removing a Paragraph from a div Element12.14. Deleting Rows from an HTML Table12.15. Changing the Element’s CSS Style Properties
13. Working with Web Page Spaces
13.0. Introduction13.1. Determining the Area of the Web Page13.2. Measuring Elements13.3. Locating Elements in the Page13.4. Hiding Page Sections13.5. Creating Collapsible Form Sections13.6. Adding a Page Overlay13.7. Creating Tab Pages13.8. Creating Hover-Based Pop-up Info Windows13.9. Collapsing or Resizing the Sidebar
14. Creating Interactive and Accessible Effects with JavaScript, CSS, and ARIA
14.0. Introduction14.1. Displaying a Hidden Page Section14.2. Creating an Alert Message14.3. Highlighting Form Field with Missing or Incorrect Data14.4. Adding Keyboard Accessibility to a Page Overlay14.5. Creating Collapsible Form Sections14.6. Displaying a Flash of Color to Signal an Action14.7. Adding ARIA Attributes to a Tabbed Page Application14.8. Live Region
15. Creating Media Rich and Interactive Applications
15.0. Introduction15.1. Creating Basic Shapes in Canvas (Using the canvas Element)15.2. Implementing Canvas Applications in IE15.3. Creating a Dynamic Line Chart in Canvas15.4. Adding JavaScript to an SVG File15.5. Accessing SVG from Web Page Script15.6. Emulating SVG in Internet Explorer15.7. Enable Interactive SVG Embedded in HTML15.8. Using the Math Functions to Create a Realistic, Ticking Analog Clock in SVG15.9. Integrating SVG and the Canvas Element in HTML15.10. Turning on WebGL Support in Firefox and WebKit/Safari15.11. Running a Routine When an Audio File Begins Playing15.12. Controlling Video from JavaScript with the video Element
16. JavaScript Objects
16.0. Introduction16.1. Defining a Basic JavaScript Object16.2. Keeping Object Members Private16.3. Expanding Objects with prototype16.4. Adding Getter/Setter to Objects16.5. Inheriting an Object’s Functionality16.6. Extending an Object by Defining a New Property16.7. Enumerating an Object’s Properties16.8. Preventing Object Extensibility16.9. Preventing Object Additions and Changes to Property Descriptors16.10. Preventing Any Changes to an Object16.11. One-Off Objects and Namespacing Your JavaScript16.12. Rediscovering “this” with Prototype.bind16.13. Chaining Your Object’s Methods
17. JavaScript Libraries
17.0. Introduction17.1. Packaging Your Code17.2. Testing Your Code with JsUnit17.3. Minify Your Library17.4. Hosting Your Library17.5. Using an External Library: Building on the jQuery Framework17.6. Using Existing jQuery Plug-ins17.7. Convert Your Library to a jQuery Plug-in17.8. Safely Combining Several Libraries in Your Applications
18. Communication
18.0. Introduction18.1. Accessing the XMLHttpRequest Object18.2. Preparing the Data for Transmission18.3. Determining the Type of Query Call18.4. Adding a Callback Function to an Ajax Request18.5. Checking for an Error Condition18.6. Processing a Text Result18.7. Making an Ajax Request to Another Domain (Using JSONP)18.8. Populating a Selection List from the Server18.9. Using a Timer to Automatically Update the Page with Fresh Data18.10. Communicating Across Windows with PostMessage
19. Working with Structured Data
19.0. Introduction19.1. Process an XML Document Returned from an Ajax Call19.2. Extracting Pertinent Information from an XML Tree19.3. Generate a JavaScript Object with JSON, Old-School Style19.4. Parse a JSON Formatted String19.5. Convert an Object to a Filtered/Transformed String with JSON19.6. Convert hCalendar Microformat Annotations into a Canvas Timeline19.7. Glean Page RDFa and Convert It into JSON Using rdfQuery and the jQuery RDF Plug-in
20. Persistence
20.0. Introduction20.1. Attaching Persistent Information to URLs20.2. Creating a Cookie to Persist Information Across Pages20.3. Persisting Information Using the History.pushState Method and window.onpopevent20.4. Using sessionStorage for Client-Side Storage20.5. Creating a localStorage Client-Side Data Storage Item20.6. Persisting Data Using a Relational Data Store
21. JavaScript Outside the Box
21.0. Introduction21.1. Creating a Browser Add-0n, Plug-in, or Extension21.2. Creating Desktop and Mobile Widgets21.3. Creating JavaScript Applications for the iPhone, Android, and BlackBerry with PhoneGap21.4. Enhancing Tools with JavaScript21.5. Creating Efficient Desktop Applications with Web Workers and the File API
Index
About the Author
Colophon
Copyright

Content preview from JavaScript Cookbook

Chapter 15. Creating Media Rich and Interactive Applications

15.0. Introduction

Pretty pictures. Cool videos. Sound!

The Web of the future will be a richer place, indeed, with the new and improved innovations ready to use. Our old friends SVG and Canvas are getting new life and generating new interest. Added to them are the new video and audio elements included in HTML5, and the near-future potential of 3D graphics.

JavaScript and CSS provide a malleable palette in which to paint web pages, but SVG and the canvas element provide the capability to take those pages into new and exciting territory.

SVG, or Scalable Vector Graphics, is an XML-based vector graphics language that can be used to create scalable vector graphics within web pages. You can insert the SVG into object elements, or in certain circumstances embed the SVG directly in the web page. New advances also allow you to include SVG using the img element, and CSS.

SVG is normally a static XML markup, and not dependent on JavaScript. However, as will be demonstrated later in the chapter, SVG and JavaScript can be used to create any number of dynamic graphics.

The canvas element originated with Apple, and is now becoming standardized as part of the HTML5/Web Applications 1.0 effort. Unlike SVG, the canvas element is totally dependent on JavaScript. We add canvas elements into our page and then use a 2D context API in order to draw into these elements.

SVG and Canvas are implemented in varying degrees in all of this book’s target ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Object-Oriented JavaScript - Second Edition

Publisher Resources

ISBN: 9781449390211Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript Cookbook

by Shelley Powers

Chapter 15. Creating Media Rich and Interactive Applications

15.0. Introduction

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.