The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks

By James Edwards & Cameron Adams

Expert Reviewers: Bobby van der Sluis & Derek Featherstone

The most complete question and answer book on JavaScript. The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks provides you with tried and tested real-world solutions to your web scripting problems. Following the same format as SitePoint's hugely popular The CSS Anthology, this is the most complete question-and-answer book on JavaScript. It's a collection of over 100 thoroughly-tested, customizable and elegant solutions that will show you how to add usable and accessible interactivity to your site: from slick drop-down menus, to style sheet switchers, to AJAX applications, and much more.

The JavaScript Anthology also includes download access to all of the best practice code samples used throughout the book -- plug them right into your own web sites without any retyping!

Among the 101 Tips, Tricks & Hacks you'll learn how-to:

  • Create a slick yet accessible drop-down menu system
  • Take control of your web pages with the DOM
  • Validate forms in real time using regular expressions
  • Optimize your code so that it runs faster
  • Manage style sheets and modify styles on-the-fly
  • Produce sophisticated drag-and-drop interaction
  • Enhance your site with slick, animated transitions
  • Create AJAX applications with the XMLHttpRequest object

...and much more besides!

What's in the book?

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20

Chapter 1: Getting Started with JavaScript

This chapter, slightly more theoretical than the rest, is an overview of the capabilities and limitations of JavaScript, and introduces some core best-practices that we'll be using through the rest of the book. It's not a beginners' tutorial nor a ground-up summary of the language, but is focused more on finding the best ways of doing basic tasks, including practical solutions for the problems encountered with making scripts work together.

Chapter 2: Working with Numbers

This chapter looks at techniques for using and processing numbers in JavaScript. It covers basic computation, number rounding, generating and constraining random numbers, and using currency values, ordinals and other formatted numbers.

Chapter 3: Working with Strings

Text is the meat and drink of the web, and processing text is one of the most common tasks in web scripting. This chapter looks at ways of manipulating strings to find information, store data, and prepare text for output, including a thorough introduction to regular expressions in JavaScript.

Chapter 4: Working with Arrays

This chapter introduces one of the most powerful data-storage structures in JavaScript - the array. We'll talk about reading and writing data from an array, sorting and processing arrays, and using multi-dimensional arrays. We'll also discuss a similar data structure - the object literal.

Chapter 5: Navigating the Document Object Model

The DOM is an interface for manipulating individual parts of a document. This chapter introduces and explores the DOM, and looks at how to create and read the data from elements, attributes and text.

Chapter 6: Processing and Validating Forms

In this chapter we look at reading and writing data from different kinds of form widget, validating and processing form data, and improving the usability of form-based interfaces.

Chapter 7: Working with Windows and Frames

For this chapter we take a cautious look at the abilities of JavaScript to create and manipulate windows, and script across frames. These are the most controversial parts of the language, for their potential to create usability and accessibility barriers, and so this chapter is firmly centered on techniques that try to avoid or alleviate these problems.

Chapter 8: Working with Cookies

Cookies are the simplest and most reliable method for maintaining state-persistence in JavaScript, allowing for pages and applications to "remember" who you are and what you're doing. This chapter introduces cookies and shows you how to use them effectively.

Chapter 9: Working with Date and Time

It won't win any prizes for glamour, but this chapter shows you how to get the date and time in JavaScript, how to compare and process dates and times, and output the final data in different formats and conventions.

Chapter 10: Working with Images

Images are still an important part of most web designs, and in this chapter we look at the basic techniques involved in scripting for them. The chapter moves from simple tasks like pre-loading, randomly-selecting, swapping and cross-fading of images, through to more complex slideshow, progress-indicator and image-based clock scripts.

Chapter 11: Detecting Browser Differences

This short chapter outlines techniques for dealing with different browsers and rendering modes, when and where it's appropriate to use browser detection or object detection, and how to combine those techniques to get the most robust information.

Chapter 12: Using JavaScript with CSS

In this chapter we'll look at how to read and write the styles from a single element or group of elements, how to read and write CSS rules to an existing or created style sheet, and how to build a style sheet switcher.

Chapter 13: Basic Dynamic HTML

DHTML uses HTML, the DOM and CSS to bring static content to life, and although the term DHTML is disparaged in some quarters, we still believe it's a useful and relevant way of describing this kind of scripting. In this chapter we'll cover event-handling in all its flavors, detecting the position and size of an object, tracking the mouse, and making elements appear or disappear. We'll also begin to look at re-arranging the DOM dynamically, with a neat table-sorting script.

Chapter 14: Time and Motion

In this chapter we advance the ideas from Chapter 13 into more complex forms of scripting, using motion and animation. We'll look at timers in JavaScript, and how to use them for both simple and more sophisticated animations. We'll also cover drag 'n' drop and its practical uses for selecting or sorting information, and we'll look at creating scrollers, sliders and transition effects.

Chapter 15: DHTML Menus and Navigation

This chapter enters the complex arena of DHTML menus with two major scripts - a dropdown or flyout menu, and a foldertree or expanding menu. For each menu we'll create a core navigation structure using clean, semantic code, then we'll improve on each script with usability and accessibility enhancements, including submenu indicator arrows, open and close timers, and automatic repositioning (so that a menu never goes over the edge). This chapter also includes solutions for the problem of menus going over select elements in Windows IE5 and IE6.

Chapter 16: JavaScript and Accessibility

This chapter is an overview of the current state of play regarding JavaScript and accessibility. It's focused on ideas and techniques for making scripts accessible to the keyboard, and also touches on how scripting may impact on people with learning or cognitive disabilities. We'll also examine a range of different scripts, including AJAX applications, to see how they behave in screen readers.

Chapter 17: Using JavaScript with Flash

In this chapter we look at the narrow alliance between these two technologies - detecting whether a user has the plugin, and communicating between JavaScript and Flash.

Chapter 18: Building Web Applications with JavaScript

This chapter delves into the exciting area of online application design, including data retrieval using XMLHttpRequest, as well as the older technique of using an iframe. We'll also talk about creating custom dialogs, building editable elements like rich-text entry fields, and controlling and creating text-selections to make an auto-complete search field.

Chapter 19: Object Orientation in JavaScript

Object Orientation is generally considered the best approach to large-scale programming projects, and in this chapter we introduce OOP, its core concepts and benefits. We'll cover the practical techniques involved in creating an object-oriented or object-based script, and we'll talk about scope, inheritance, and object-namespacing.

Chapter 20: Keeping up the pace

The final chapter looks at everyday techniques for writing faster, more efficient code, that's smaller and uses less memory. We'll also cover more brutal techniques for optimizing and obfuscating production code, but with a cautious mind to remember that some optimizations are more trouble than they're worth!

Find out more

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits