Julie C.

Meloni

SamsTeach Yourself

HTML, CSS
and JavaScript

All
One
in
SECOND EDITION

800 East 96th Street, Indianapolis, Indiana, 46240 USA

Sams Teach Yourself HTML, CSS and JavaScript All in One, Acquisitions Editor
Second Edition Mark Taber
Copyright © 2015 by Pearson Education Managing Editor
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, Kristy Hart
or transmitted by any means, electronic, mechanical, photocopying, recording, or other-
wise, without written permission from the publisher. No patent liability is assumed with
Project Editor
respect to the use of the information contained herein. Although every precaution has Elaine Wiley
been taken in the preparation of this book, the publisher and author assume no responsi-
bility for errors or omissions. Nor is any liability assumed for damages resulting from the
Copy Editor
use of the information contained herein. Cheri Clark
ISBN-13: 978-0-672-33714-7 Indexer
ISBN-10: 0-672-33714-2 Ken Johnson
Library of Congress Catalog Card Number: 2014945244 Proofreader
Printed in the United States of America Debbie Williams
First Printing: October 2014 Technical Editor
Phil Ballard
Trademarks
Publishing Coordinator
All terms mentioned in this book that are known to be trademarks or service marks have
been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this Vanessa Evans
information. Use of a term in this book should not be regarded as affecting the validity of Designer
any trademark or service mark.
Gary Adair
Warning and Disclaimer Cover Designer
Every effort has been made to make this book as complete and as accurate as possible, Mark Shirar
but no warranty or fitness is implied. The information provided is on an “as is” basis. The
author and the publisher shall have neither liability nor responsibility to any person or Senior Compositor
entity with respect to any loss or damages arising from the information contained in this Gloria Schurick
book or from the use of the CD or programs accompanying it.

Special Sales
For information about buying this title in bulk quantities, or for special sales opportunities
(which may include electronic versions; custom cover designs; and content particular to
your business, training goals, marketing focus, or branding interests), please contact our
corporate sales department at [email protected] or (800) 382-3419.

For government sales inquiries, please contact [email protected].

For questions about sales outside the U.S., please contact [email protected].

Contents at a Glance PART IV: Getting Started with Dynamic
Sites
CHAPTER 13: Understanding Dynamic Websites
PART I: Getting Started on the Web and HTML5 Applications
CHAPTER 1: Understanding How the Web Works CHAPTER 14: Getting Started with JavaScript
CHAPTER 2: Structuring an HTML Document Programming

CHAPTER 3: Understanding Cascading Style CHAPTER 15: Working with the Document Object
Sheets Model (DOM)

CHAPTER 4: Understanding JavaScript CHAPTER 16: Using JavaScript Variables, Strings,

and Arrays
CHAPTER 5: Validating and Debugging Your Code
CHAPTER 17: Using JavaScript Functions and
Objects
PART II: Building Blocks of Practical
CHAPTER 18: Controlling Flow with Conditions
Web Design and Loops
CHAPTER 6: Working with Fonts, Text Blocks, CHAPTER 19: Responding to Events
Lists, and Tables
CHAPTER 20: Using Windows
CHAPTER 7: Using External and Internal Links
CHAPTER 8: Working with Colors, Images, and PART V: Advanced JavaScript
Multimedia
Programming
PART III: Advanced Web Page Design CHAPTER 21: JavaScript Best Practices
with CSS CHAPTER 22: Using Third-Party JavaScript
Libraries and Frameworks
CHAPTER 9: Working with Margins, Padding,
Alignment, and Floating CHAPTER 23: A Closer Look at jQuery
CHAPTER 10: Understanding the CSS Box Model CHAPTER 24: First Steps Toward Creating Rich
and Positioning Interactions with jQuery UI
CHAPTER 11: Using CSS to Do More with Lists, CHAPTER 25: AJAX: Remote Scripting
Text, and Navigation
PART VI: Advanced Website Functionality and
CHAPTER 12: Creating Fixed or Liquid Layouts Management
CHAPTER 26: Working with Web-Based Forms
CHAPTER 27: Organizing and Managing a Website
 CHAPTER 3: Understanding Cascading Style
Table of Contents Sheets 55
How CSS Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
CHAPTER 1: Understanding How the
Web Works 1 A Basic Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A Brief History of HTML and the A CSS Style Primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Using Style Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Creating Web Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Using Style IDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Understanding Web Content Delivery . . . . . . . . . . . . . . 3 Internal Style Sheets and Inline Styles . . . . . . . . . . . 70
Selecting a Web Hosting Provider . . . . . . . . . . . . . . . . . . 6 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Testing with Multiple Web Browsers . . . . . . . . . . . . . . . 8 Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Creating a Sample File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Using FTP to Transfer Files . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHAPTER 4: Understanding JavaScript 77
Understanding Where to Place Files on the
Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Learning Web Scripting Basics . . . . . . . . . . . . . . . . . . . . . 77
Distributing Content Without a Web Server . . . . . 19 How JavaScript Fits into a Web Page . . . . . . . . . . . . . 79
Tips for Testing Web Content . . . . . . . . . . . . . . . . . . . . . . 20 Exploring JavaScript’s Capabilities . . . . . . . . . . . . . . . . 82
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Displaying Time with JavaScript. . . . . . . . . . . . . . . . . . . . 84
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Testing the Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
CHAPTER 2: Structuring an HTML
Document 25 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Getting Prepared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 CHAPTER 5: Validating and Debugging
Getting Started with a Simple Web Page . . . . . . . . 26 Your Code 95
HTML Tags Every Web Page Must Have . . . . . . . . . 30 Validating Your Web Content . . . . . . . . . . . . . . . . . . . . . . . 95
Organizing a Page with Paragraphs and Debugging HTML and CSS Using Developer
Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Organizing Your Content with Headings . . . . . . . . . . 34 Debugging JavaScript Using Developer
Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Understanding Semantic Elements . . . . . . . . . . . . . . . 36
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Using <header> in Multiple Ways . . . . . . . . . . . . . . . . 43
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Understanding the <section> Element . . . . . . . . . 44
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Using <article> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Implementing the <nav> Element . . . . . . . . . . . . . . . . . 46 CHAPTER 6: Working with Fonts, Text Blocks,
Lists, and Tables 121
When to Use <aside>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Working with Special Characters . . . . . . . . . . . . . . . . 122
Using <footer> Effectively . . . . . . . . . . . . . . . . . . . . . . . . . 49
Boldface, Italics, and Special Text
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Tweaking the Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Using Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Aligning Text on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
The Three Types of HTML Lists . . . . . . . . . . . . . . . . . . 138
Placing Lists Within Lists. . . . . . . . . . . . . . . . . . . . . . . . . . 140 Turning Images into Links . . . . . . . . . . . . . . . . . . . . . . . . . 220
Creating a Simple Table . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Using Background Images . . . . . . . . . . . . . . . . . . . . . . . . 223
Controlling Table Sizes ............................ 150 Using Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Alignment and Spanning Within Tables ........ 153 Linking to Multimedia Files . . . . . . . . . . . . . . . . . . . . . . . 231
Page Layout with Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Embedding Multimedia Files . . . . . . . . . . . . . . . . . . . . . . 235
Using CSS Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Using Pure HTML5 for Audio and Video
Playback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Additional Tips for Using Multimedia . . . . . . . . . . . 241
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
CHAPTER 7: Using External and Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Internal Links 169
Using Web Addresses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 CHAPTER 9: Working with Margins,
Padding, Alignment,
Linking Within a Page Using Anchors . . . . . . . . . . . 172
and Floating 249
Linking Between Your Own Web Content . . . . . . 175
Using Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Linking to External Web Content . . . . . . . . . . . . . . . . . 178
Padding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Linking to an Email Address . . . . . . . . . . . . . . . . . . . . . . 179
Keeping Everything Aligned . . . . . . . . . . . . . . . . . . . . . . . 261
Opening a Link in a New Browser Window. . . . . 181
Understanding the Float Property . . . . . . . . . . . . . . 262
Using CSS to Style Hyperlinks . . . . . . . . . . . . . . . . . . . 181
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
CHAPTER 10: Understanding the CSS Box
CHAPTER 8: Working with Colors, Model and Positioning 269
Images, and Multimedia 189
The CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Best Practices for Choosing Colors . . . . . . . . . . . . . 190
The Whole Scoop on Positioning . . . . . . . . . . . . . . . . 273
Understanding Web Colors. . . . . . . . . . . . . . . . . . . . . . . . 192
Controlling the Way Things Stack Up . . . . . . . . . . . 278
Using Hexadecimal Values for Colors . . . . . . . . . . 194
Managing the Flow of Text . . . . . . . . . . . . . . . . . . . . . . . . 280
Using CSS to Set Background, Text,
and Border Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Choosing Graphics Software. . . . . . . . . . . . . . . . . . . . . . 198 Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

The Least You Need to Know About Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
CHAPTER 11: Using CSS to Do More
Preparing Photographic Images . . . . . . . . . . . . . . . . . . 200 with Lists, Text, and
Creating Banners and Buttons . . . . . . . . . . . . . . . . . . . 206 Navigation 285
Reducing or Removing Colors in an Image . . . . 208 HTML List Refresher ............................... 286
Creating Tiled Background Images . . . . . . . . . . . . . . 209 How the CSS Box Model Affects Lists. . . . . . . . . . 286
Creating Animated Web Graphics ............... 211 Placing List Item Indicators . . . . . . . . . . . . . . . . . . . . . . . 290
Placing Images on a Web Page . . . . . . . . . . . . . . . . . . 212 Creating Imagemaps with List Items
and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Describing Images with Text . . . . . . . . . . . . . . . . . . . . . . 214
How Navigation Lists Differ from
Specifying Image Height and Width . . . . . . . . . . . . . 216 Regular Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Aligning Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Creating Vertical Navigation with CSS . . . . . . . . . . 296 CHAPTER 15: Working with the Document
Creating Horizontal Navigation with CSS . . . . . . . 307 Object Model (DOM) 367

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Understanding the Document

Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Using window Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Working with the document Object . . . . . . . . . . . . . 369
CHAPTER 12: Creating Fixed or Liquid Accessing Browser History . . . . . . . . . . . . . . . . . . . . . . . . 372
Layouts 315
Working with the location Object . . . . . . . . . . . . . 374
Understanding Fixed Layouts . . . . . . . . . . . . . . . . . . . . . 316
More About the DOM Structure . . . . . . . . . . . . . . . . . . 376
Understanding Liquid Layouts . . . . . . . . . . . . . . . . . . . . 318
Working with DOM Nodes . . . . . . . . . . . . . . . . . . . . . . . . . 378
Creating a Fixed/Liquid Hybrid Layout . . . . . . . . . . 321
Creating Positionable Elements (Layers) . . . . . . . 380
Considering a Responsive Web Design . . . . . . . . 332
Hiding and Showing Objects . . . . . . . . . . . . . . . . . . . . . . 385
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Modifying Text Within a Page . . . . . . . . . . . . . . . . . . . . . 387
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Adding Text to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
CHAPTER 13: Understanding Dynamic Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Websites and HTML5
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Applications 337
Understanding the Different Types of CHAPTER 16: Using JavaScript Variables,
Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Strings, and Arrays 395
Including JavaScript in HTML . . . . . . . . . . . . . . . . . . . . . 338 Using Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Displaying Random Content . . . . . . . . . . . . . . . . . . . . . . 340 Understanding Expressions and Operators . . . . 399
Understanding the Document Data Types in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Converting Between Data Types . . . . . . . . . . . . . . . . . 401
Changing Images Based on User
Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Using String Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Thinking Ahead to Developing HTML5 Working with Substrings . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Using Numeric Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Using String Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Sorting a Numeric Array . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
CHAPTER 14: Getting Started with Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
JavaScript Programming 353 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Basic Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
CHAPTER 17: Using JavaScript Functions
JavaScript Syntax Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 and Objects 419
Using Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Using Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Best Practices for JavaScript . . . . . . . . . . . . . . . . . . . . . 362 Introducing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Understanding JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Using Objects to Simplify Scripting. . . . . . . . . . . . . . 427
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Extending Built-in Objects . . . . . . . . . . . . . . . . . . . . . . . . . 432
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Using the Math Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Working with Math Methods . . . . . . . . . . . . . . . . . . . . . . 436
Working with Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 CHAPTER 21: JavaScript Best Practices 503
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Scripting Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441 Reading Browser Information . . . . . . . . . . . . . . . . . . . . . 514
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 Cross-Browser Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Supporting Non-JavaScript-Enabled
CHAPTER 18: Controlling Flow with Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520
Conditions and Loops 445
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
The if Statement .................................. 445
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Using Shorthand Conditional Expressions . . . . . 448
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526
Testing Multiple Conditions with
if and else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449 CHAPTER 22: Using Third-Party JavaScript
Using Multiple Conditions with switch . . . . . . . . 452 Libraries and Frameworks 529
Using for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Using Third-Party JavaScript Libraries. . . . . . . . . . . 529

Using while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456 Adding JavaScript Effects Using a Third-Party

Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
Using do...while Loops ........................ 457
Using JavaScript Frameworks . . . . . . . . . . . . . . . . . . . . 537
Working with Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Looping Through Object Properties . . . . . . . . . . . . . . 459
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 CHAPTER 23: A Closer Look at jQuery 541
Preparing to Use jQuery ........................... 541
CHAPTER 19: Responding to Events 465
Becoming Familiar with the
Understanding Event Handlers . . . . . . . . . . . . . . . . . . . 465 $(document).ready Handler . . . . . . . . . . . . . . . . . . . 542
Using Mouse Events ............................... 471 Selecting DOM and CSS Content . . . . . . . . . . . . . . . . 544
Using Keyboard Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 Manipulating HTML Content . . . . . . . . . . . . . . . . . . . . . . 545
Using the onload and onunload Events . . . . . 477 Putting the Pieces Together to Create a
jQuery Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
Using onclick to Change a <div>’s
Appearance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 Handling Events with jQuery . . . . . . . . . . . . . . . . . . . . . . 553
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

CHAPTER 20: Using Windows 489 CHAPTER 24: First Steps Toward Creating
Rich Interactions with
Controlling Windows with Objects . . . . . . . . . . . . . . . 489
jQuery UI 557
Moving and Resizing Windows . . . . . . . . . . . . . . . . . . . 493
Preparing to Use jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . 557
Using Timeouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Using Selectors in jQuery UI . . . . . . . . . . . . . . . . . . . . . . 558
Displaying Dialog Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Positioning UI Elements with
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Applying jQuery UI Effects . . . . . . . . . . . . . . . . . . . . . . . . . 564
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Using jQuery UI Widgets for Advanced
Interactions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Where to Go from Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 CHAPTER 27: Organizing and Managing
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 a Website 641
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 When One Page Is Enough . . . . . . . . . . . . . . . . . . . . . . . . 642

Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 Organizing a Simple Site . . . . . . . . . . . . . . . . . . . . . . . . . . 644

Organizing a Larger Site . . . . . . . . . . . . . . . . . . . . . . . . . . . 648
CHAPTER 25: AJAX: Remote Scripting 589
Writing Maintainable Code . . . . . . . . . . . . . . . . . . . . . . . . 652
Introducing AJAX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Thinking About Version Control . . . . . . . . . . . . . . . . . . 654
Using XMLHttpRequest .......................... 592
Using HTML and CSS Frameworks . . . . . . . . . . . . . . 657
Creating a Simple AJAX Library .................. 594
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Creating an AJAX Quiz Using the Library . . . . . . . 596
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658
Debugging AJAX-Based Applications . . . . . . . . . . . . 601
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Using jQuery’s Built-in Functions for AJAX . . . . . 606
INDEX 661
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608

CHAPTER 26: Working with Web-Based

Forms 611
How HTML Forms Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612
Accepting Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
Naming Each Piece of Form Data . . . . . . . . . . . . . . . 618
Labeling Each Piece of Form Data . . . . . . . . . . . . . . 618
Grouping Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Exploring Form Input Controls . . . . . . . . . . . . . . . . . . . . 621
Using HTML5 Form Validation . . . . . . . . . . . . . . . . . . . . 629
Submitting Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Accessing Form Elements with JavaScript . . . . . 633
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635
Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638
About the Author
Julie C. Meloni is a software development manager and technical consultant living in Washington,
D.C. She has written several books and articles on web-based programming languages and
database topics, including the bestselling Sams Teach Yourself PHP, MySQL and Apache All in One.
We Want to Hear from You!
As the reader of this book, you are our most important critic and commentator. We value your opin-
ion and want to know what we’re doing right, what we could do better, what areas you’d like to see
us publish in, and any other words of wisdom you’re willing to pass our way.
You can email or write to let us know what you did or didn’t like about this book—as well as what
we can do to make our books stronger.
Please note that we cannot help you with technical problems related to the topic of this book, and
that due to the high volume of mail we receive, we might not be able to reply to every message.
When you write, please be sure to include this book’s title, edition number, and author, as well as
your name and contact information.
Email: [email protected]
Mail: Sams Publishing
800 East 96th Street
Indianapolis, IN 46240 USA

Reader Services
Visit our website and register this book at informit.com/register for convenient access to any
updates, downloads, or errata that might be available for this book.
This page intentionally left blank
 CHAPTER 4
Understanding JavaScript

The World Wide Web (WWW) began as a text-only medium—the first WHAT YOU’LL LEARN IN
browsers didn’t even support images within web pages. The Web has THIS CHAPTER:
come a long way since those early days. Today’s websites include a ▶ What web scripting is and
wealth of visual and interactive features in addition to useful content: what it’s good for
graphics, sounds, animation, and video. Web scripting languages, ▶ How scripting and
such as JavaScript, are one of the easiest ways to spice up a web page programming are different
(and similar)
and to interact with users in new ways.
▶ What JavaScript is and
The first part of this chapter introduces the concept of web scripting where it came from
and the JavaScript language. As the chapter moves ahead, you’ll ▶ How to include JavaScript
learn how to include JavaScript commands directly in your HTML commands in a web page
documents, and how your scripts will be executed when the page is ▶ What JavaScript can do for
viewed in a browser. You will work with a simple script, edit it, and your web pages
test it in your browser, all the while learning the basic tasks involved ▶ Beginning and ending
scripts
in creating and using JavaScript scripts.
▶ Formatting JavaScript
statements
▶ How a script can display a
Learning Web Scripting Basics result
You already know how to use one type of computer language: ▶ Including a script within a
HTML. You use HTML tags to describe how you want your document web document
formatted, and the browser obeys your commands and shows the ▶ Testing a script in your
formatted document to the user. But because HTML is a simple text browser
markup language, it can’t respond to the user, make decisions, or ▶ Modifying a script
automate repetitive tasks. Interactive tasks such as these require a ▶ Dealing with errors in
scripts
more sophisticated language: a programming language or a scripting
language. ▶ Moving scripts into
separate files
Although many programming languages are complex, scripting
languages are generally simple. They have a simple syntax, can
78 CHAPTER 4: Understanding JavaScript

NOTE perform tasks with a minimum of commands, and are easy to learn.
Interpreted languages have JavaScript is a web scripting language that enables you to combine
their disadvantages—they scripting with HTML to create interactive web pages.
can’t execute really quickly,
so they’re not ideally suited
for complicated work, such as Scripts and Programs
graphics. Also, they require the
interpreter (in JavaScript’s case, A movie or a play follows a script—a list of actions (or lines) for the
usually a browser) in order to actors to perform. A web script provides the same type of instructions
work. for the web browser. A script in JavaScript can range from a single line
to a full-scale application. (In either case, JavaScript scripts usually run
within a browser.)

Some programming languages must be compiled, or translated, into

machine code before they can be executed. JavaScript, on the other
hand, is an interpreted language: The browser executes each line of
script as it comes to it.

There is one main advantage to interpreted languages: Writing or

changing a script is very simple. Changing a JavaScript script is
as easy as changing a typical HTML document, and the change is
enacted as soon as you reload the document in the browser.

NOTE Introducing JavaScript

A bit of history: JavaScript was
originally called LiveScript and JavaScript was developed nearly 20 years ago by Netscape
was first introduced in Netscape Communications Corporation, the maker of the long-defunct Netscape
Navigator 2.0 in 1995. It was web browser. JavaScript was the first web scripting language to be
soon renamed JavaScript to supported by browsers, and it is still by far the most popular.
indicate a marketing relationship
with Sun’s Java language, JavaScript is almost as easy to learn as HTML, and it can be included
although there is no other directly in HTML documents. Here are a few of the things you can do
relationship, structurally or with JavaScript:
otherwise, between Java and
JavaScript. ▶ Display messages to the user as part of a web page, in the
browser’s status line, or in alert boxes
▶ Validate the contents of a form and make calculations (for
example, an order form can automatically display a running
total as you enter item quantities)
▶ Animate images or create images that change when you move
the mouse over them
▶ Create ad banners that interact with the user, rather than simply
displaying a graphic
 How JavaScript Fits into a Web Page 79

▶ Detect the browser in use or its features and perform advanced

functions only on browsers that support them
▶ Detect installed plug-ins and notify the user if a plug-in is
required
▶ Modify all or part of a web page without requiring the user to
reload it
▶ Display or interact with data retrieved from a remote server

You can do all this and more with JavaScript, including creating entire
applications. We’ll explore the uses of JavaScript throughout this book.

How JavaScript Fits into a Web Page

Using the <script> tag, you can add a short script (in this case, just
one line) to a web document, as shown in Listing 4.1. The <script> tag
tells the browser to start treating the text as a script, and the closing
</script> tag tells the browser to return to HTML mode. In most cases,
you can’t use JavaScript statements in an HTML document except
within <script> tags. The exception is event handlers, described later
in this chapter.

LISTING 4.1 A Simple HTML Document with a Simple Script

<!DOCTYPE html>

<html lang="en">
<head>
<title>The American Eggplant Society</title>
</head>

<body>
<h1>The American Eggplant Society</h1>
<p>Welcome to our site. Unfortunately, it is still
under construction.</p>
<p>We last worked on it on this date:
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
</p>
</body>
</html>
80 CHAPTER 4: Understanding JavaScript

JavaScript’s document.write statement, which you’ll learn more

about later, sends output as part of the web document. In this case, it
displays the modification date of the document, as shown in
Figure 4.1.

FIGURE 4.1
Using document.write to display
a last-modified date.

In this example, we placed the script within the body of the HTML
document. There are actually four places where you might use scripts:
▶ In the body of the page—In this case, the script’s output is
displayed as part of the HTML document when the browser loads
the page.
▶ In the header of the page between the <head> tags—Scripts
in the header should not be used to create output within the
<head> section of an HTML document, since that would likely
result in poorly-formed and invalid HTML documents, but these
scripts can be referred to by other scripts here and elsewhere. The
<head> section is often used for functions—groups of JavaScript
statements that can be used as a single unit. You will learn more
about functions in Chapter 14, “Getting Started with JavaScript
Programming.”
 How JavaScript Fits into a Web Page 81

▶ Within an HTML tag, such as <body> or <form>—This is called

an event handler and it enables the script to work with HTML
elements. When using JavaScript in event handlers, you don’t
need to use the <script> tag. You’ll learn more about event
handlers in Chapter 14.
▶ In a separate file entirely—JavaScript supports the use of files
with the .js extension containing scripts; these can be included
by specifying a file in the <script> tag. While the .js extension
is a convention, scripts can actually have any file extension, or
none.

TIP
Using Separate JavaScript Files External JavaScript files have
When you create more complicated scripts, you’ll quickly find that a distinct advantage: You can
your HTML documents become large and confusing. To avoid this link to the same .js file from
two or more HTML documents.
problem, you can use one or more external JavaScript files. These are
Because the browser stores this
files with the .js extension that contain JavaScript statements. file in its cache, this can reduce
the time it takes your web
External scripts are supported by all modern browsers. To use an
pages to display.
external script, you specify its filename in the <script> tag:
<script type="text/javascript" src="filename.js"></script>

Because you’ll be placing the JavaScript statements in a separate file,

you don’t need anything between the opening and closing <script>
tags—in fact, anything between them will be ignored by the browser.

You can create the .js file using a text editor. It should contain one
or more JavaScript commands, and only JavaScript—don’t include
<script> tags, other HTML tags, or HTML comments. Save the .js file
in the same directory as the HTML documents that refer to it.

Understanding JavaScript Events

Many of the useful things you can do with JavaScript involve
interacting with the user, and that means responding to events—for
example, a link or a button being clicked. You can define event
handlers within HTML tags to tell the browser how to respond to
an event. For example, Listing 4.2 defines a button that displays a
message when clicked.
82 CHAPTER 4: Understanding JavaScript

LISTING 4.2 A Simple Event Handler

<!DOCTYPE html>

<html lang="en">
<head>
<title>Event Test</title>
</head>

<body>
<h1>Event Test</h1>
<button type="button"
onclick="alert('You clicked the button.')">
Click Me!</button>
</body>
</html>

In various places throughout this book, you’ll learn more about

JavaScript’s event model and how to create simple and complex event
handlers.

Exploring JavaScript’s Capabilities

If you’ve spent any time browsing the Web, you’ve undoubtedly
seen lots of examples of JavaScript in action. Here are some brief
descriptions of typical applications for JavaScript, all of which you’ll
explore further, later in this book.

Improving Navigation
Some of the most common uses of JavaScript are in navigation systems
for websites. You can use JavaScript to create a navigation tool—for
example, a drop-down menu to select the next page to read, or a
submenu that pops up when you hover over a navigation link.

When it’s done right, this kind of JavaScript interactivity can make a
site easier to use, while still remaining usable for browsers that don’t
support JavaScript (or HTML5/CSS3, which can also be used to create
great navigation).

Validating Forms
Form validation is another common use of JavaScript, although the
form validation features of HTML5 have stolen a lot of JavaScript’s
 Exploring JavaScript’s Capabilities 83

thunder here as well. A simple script can read values the user types
into a form and make sure they’re in the right format, such as with ZIP
Codes, phone numbers, and e-mail addresses. This type of client-side
validation enables users to fix common errors without waiting for a
response from the web server telling them that their form submission
was invalid. You’ll learn how to work with form data in Chapter 26,
“Working with Web-Based Forms.”

Special Effects
One of the earliest and most annoying uses of JavaScript was to create
attention-getting special effects—for example, scrolling a message in
the browser’s status line or flashing the background color of a page.

These techniques have fortunately fallen out of style, but thanks to

the W3C DOM and the latest browsers, some more impressive effects
are possible with JavaScript—for example, creating objects that can be
dragged and dropped on a page, or creating fading transitions between
images in a slideshow. Some developers have HTML5, CSS3, and
JavaScript working in tandem to create fully functioning interactive
games.

Remote Scripting (AJAX)

For a long time, the biggest limitation of JavaScript was that there
was no way for it to communicate with a web server. For example,
you could use JavaScript to verify that a phone number had the right
number of digits, but not to look up the user’s location in a database
based on the number.

Now that some of JavaScript’s advanced features are supported by

most browsers, this is no longer the case. Your scripts can get data from
a server without loading a page, or send data back to be saved. These
features are collectively known as AJAX (Asynchronous JavaScript and
XML), or remote scripting. You’ll learn how to develop AJAX scripts in
Chapter 25, “AJAX: Remote Scripting."

You’ve seen AJAX in action if you’ve used Google’s Gmail mail

application, Facebook, or any online news site that allows you to
comment on stories, vote for favorites, or participate in a poll. All
of these use remote scripting to present you with a responsive user
interface that works with a server in the background.
84 CHAPTER 4: Understanding JavaScript

NOTE
Displaying Time with JavaScript
UTC stands for Universal Time
(Coordinated), and is the atomic One common use of JavaScript is to display dates and times in the
time standard based on the old browser, and that’s where we’ll start putting some scripting pieces
GMT (Greenwich Mean Time) together. Because JavaScript runs on the browser, the times it displays
standard. This is the time at
the prime meridian, which runs
will be in the user’s current time zone. However, you can also use
through Greenwich, London, JavaScript to calculate “universal” (UTC) time.
England.
Your script, like most JavaScript programs, begins with the HTML
<script> tag. As you learned earlier in this chapter, you use the
CAUTION <script> and </script> tags to enclose a script within the HTML
Remember to include only document.
valid JavaScript statements
between the starting and To begin creating the script, open your favorite text editor and type the
ending <script> tags. If the beginning and ending <script> tags as shown:
browser finds anything but valid <script type="text/javascript"></script>
JavaScript statements within the
<script> tags, it will display a
JavaScript error message. In this script, you’ll use JavaScript to determine the local and UTC
times and then display them in the browser. Fortunately, all the hard
parts, such as converting between date formats, are built in to the
JavaScript interpreter—this is one of the reasons that displaying dates
and times is a good starting place for beginners.

Storing Data in Variables

To begin the script, you will use a variable to store the current date.
You will learn more about variables in Chapter 16, “Using JavaScript
Variables, Strings, and Arrays,” but for now just understand that a
variable is a container that can hold a value—a number, some text, or,
in this case, a date.

NOTE To start writing the script, add the following line after the first <script>
Notice the semicolon at the end tag. Be sure to use the same combination of capital and lowercase
of the code snippet creating letters in your version because JavaScript commands and variable
a variable called now. This names are case sensitive.
semicolon tells the browser
now = new Date();
that it has reached the end of
a statement. Semicolons are
optional, but using them helps This statement creates a variable called now and stores the current date
you avoid some common errors. and time in it. This statement and the others you will use in this script
We’ll use them throughout this use JavaScript’s built-in Date object, which enables you to conveniently
book for clarity. handle dates and times. You’ll learn more about working with dates in
Chapter 17, “Using JavaScript Functions and Objects.”
 Displaying Time with JavaScript 85

Calculating the Results NOTE

The localtime and utctime
Internally, JavaScript stores dates as the number of milliseconds variables store a piece of text,
since January 1, 1970. Fortunately, JavaScript includes a number of such as January 1, 2001
functions to convert dates and times in various ways, so you don’t 12:00 PM. In programming
have to figure out how to convert milliseconds to day, date, and time. parlance, a piece of text is
called a string.
To continue your script, add the following two statements before the
final </script> tag:
localtime = now.toString();
utctime = now.toGMTString();

These statements create two new variables: localtime, containing

the current time and date in a nice readable format, and utctime,
containing the UTC equivalent.

Creating Output
You now have two variables—localtime and utctime—which contain
the results we want from our script. Of course, these variables don’t do
us much good unless we can see them. JavaScript includes several ways
to display information, and one of the simplest is the document.write
statement.

The document.write statement displays a text string, a number, or

anything else you throw at it. Because your JavaScript program will
be used within a web page, the output will be displayed as part of the
page. To display the result, add these statements before the final
</script> tag:
document.write("<p><strong>Local time:</strong> " + localtime +
"</p>");
document.write("<p><strong>UTC time:</strong> " + utctime +
"</p>");

These statements tell the browser to add some text to the web page
containing your script. The output will include some brief strings
introducing the results, and the contents of the localtime and utctime
variables.

Notice the HTML elements, such as <p> and <strong>, within the
quotation marks—because JavaScript’s output appears within a web
page, it needs to be formatted using HTML.
86 CHAPTER 4: Understanding JavaScript

NOTE Adding the Script to a Web Page

Notice the plus signs (+) used
between the text and variables You should now have a complete script that calculates a result and
in the document.write() code displays it. Your listing should match Listing 4.3.
snippets. In this case, it tells
the browser to combine the LISTING 4.3 The Complete Date and Time Script
values into one string of text. If
<script type="text/javascript">
you use the plus sign between now = new Date();
two numbers, they are added localtime = now.toString();
together. utctime = now.toGMTString();
document.write("<p><strong>Local time:</strong> " + localtime +
"</p>");
document.write("<p><strong>UTC time:</strong> " + utctime +
"</p>");
</script>

To use your script, you’ll need to add it to an HTML document. If you

use the general template you’ve seen in the chapters so far, you should
end up with something like Listing 4.4.

LISTING 4.4 The Date and Time Script in an HTML Document

<!DOCTYPE html>

<html lang="en">
<head>
<title>Displaying Times and Dates</title>
</head>

<body>
<h1>Current Date and Time</h1>
<script type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.toGMTString();
document.write("<p><strong>Local time:</strong> "
+ localtime + "</p>");
document.write("<p><strong>UTC time:</strong> " + utctime
+ "</p>");
</script>
</body>
</html>

Now that you have a complete HTML document, save it with an .html
extension.
 Testing the Script 87

Testing the Script NOTE

Notepad and other Windows text
To test your script, you simply need to load the HTML document you editors might try to be helpful
created in a web browser. If you typed the script correctly, your browser and add the .txt extension to
should display the result of the script, as shown in Figure 4.2. (Of your script. Be sure your saved
file has the correct extension.
course, your result won’t be the same as mine, but it should be the
same as the setting of your computer’s clock.)

FIGURE 4.2
Using JavaScript to display the
date and time.

A note about Internet Explorer: Depending on your security settings,

the script might not execute, and your browser might display a security
warning. In this case, follow your browser’s instructions to allow your
script to run. (This happens because the default security settings allow
JavaScript in online documents, but not in local files.)

Modifying the Script

Although the current script does indeed display the current date and
time, its display isn’t nearly as attractive as the clock on your wall or
desk. To remedy that situation, you can use some additional JavaScript
features and a bit of HTML to display a large clock.
88 CHAPTER 4: Understanding JavaScript

To display a large clock, we need the hours, minutes, and seconds in

separate variables. Once again, JavaScript has built-in functions to do
most of the work:
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

These statements load the hours, mins, and secs variables with the
components of the time using JavaScript’s built-in date functions.

After the hours, minutes, and seconds are in separate variables, you
can create document.write statements to display them:
document.write("<p><strong>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</p></strong>");

The first statement displays an HTML <h2> header tag to display the
clock as a second-level header element. The second statement displays
the hours, mins, and secs variables, separated by colons, and the third
adds the closing </h2> tag.

You can add the preceding statements to the original date and time
script to add the large clock display. Listing 4.5 shows the complete
modified version of the script.

LISTING 4.5 The Date and Time Script with Large Clock Display
<!DOCTYPE html>

<html lang="en">
<head>
<title>Displaying Times and Dates</title>
</head>

<body>
<h1>Current Date and Time</h1>
<script type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.toGMTString();
document.write("<p><strong>Local time:</strong> "
+ localtime + "</p>");
document.write("<p><strong>UTC time:</strong> " + utctime
+ "</p>");
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write("<h2>");
document.write(hours + ":" + mins + ":" + secs);
 Testing the Script 89

document.write("</h2>");
</script>
</body>
</html>

Now that you have modified the script, save the HTML file and open
the modified file in your browser. If you left the browser running, you
can simply use the Reload button to load the new version of the script.
Try it and verify that the same time is displayed in both the upper
portion of the window and the new large clock. Figure 4.3 shows the
results.

FIGURE 4.3
Displaying the modified Date and
Time script.

Dealing with JavaScript Errors NOTE

The time formatting produced by
As you develop more complex JavaScript applications, you’re going to this script isn’t perfect: Hours
run into errors from time to time. JavaScript errors are usually caused after noon are in 24-hour time;
by mistyped JavaScript statements. and there are no leading zeroes,
so 12:04 is displayed as 12:4.
To see an example of a JavaScript error message, modify the statement See Chapter 17 for solutions to
you added in the preceding section. We’ll use a common error: these issues.
omitting one of the parentheses. Change the last document.write
statement in Listing 4.5 to read
document.write("</h2>";
90 CHAPTER 4: Understanding JavaScript

Save your HTML document again and load the document into the
browser. Depending on the browser version you’re using, one of two
things will happen: Either an error message will be displayed, or the
script will simply fail to execute.

If an error message is displayed, you’re halfway to fixing the problem

by adding the missing parenthesis. If no error was displayed, you
should configure your browser to display error messages so that you
can diagnose future problems:
▶ In Firefox, you can also select Tools, JavaScript Console from the
menu.
▶ In Chrome, select Tools, JavaScript Console from the Options
menu. A console displays in the bottom of the browser window.
The console is shown in Figure 4.4, displaying the error message
you created in this example.
▶ In Internet Explorer, select Tools, Internet Options. On the
Advanced page, uncheck the Disable Script Debugging box and
check the Display a Notification About Every Script Error box. (If
this is disabled, a yellow icon in the status bar still notifies you of
errors.)

FIGURE 4.4
Showing an error in the JavaScript
console in Chrome.
 Summary 91

The error we get in this case is Uncaught SyntaxError and it points

to line 25. In this case, clicking on the name of the script takes you
directly to the highlighted line containing the error, as shown in
Figure 4.5.

FIGURE 4.5
Chrome helpfully points out the
offending line.

Most modern browsers contain JavaScript debugging tools such as

the one you just witnessed. You’ll learn more about this in the next
chapter.

Summary
During this chapter, you’ve learned what web scripting is and what
JavaScript is. You’ve also learned how to insert a script into an
HTML document or refer to an external JavaScript file, what sorts of
things JavaScript can do, and how JavaScript differs from other web
languages. You also wrote a simple JavaScript program and tested it
using a web browser. You also learned how to modify and test scripts,
and what happens when a JavaScript program runs into an error.

In the process of writing this script, you have used some of JavaScript’s
basic features: variables, the document.write statement, and functions
for working with dates and times.
92 CHAPTER 4: Understanding JavaScript

Now that you’ve learned a bit of JavaScript syntax, you’re ready

to continue on to learn all manner and sorts of things about web
development before settling in to write interactive websites using client-
side scripting.

Q&A
Q. Do I need to test my JavaScript on more than one browser?
A. In an ideal world, any script you write that follows the standards for
JavaScript will work in all browsers, and 98% of the time (give or take)
that’s true in the real world. But browsers do have their quirks, and you
should test your scripts in Chrome, Internet Explorer, and Firefox at a
minimum.

Q. If I plan to learn PHP, Ruby, or some other server-side programming

language anyway, will I have any use for JavaScript?
A. Certainly. JavaScript is the ideal language for many parts of a web-
based application, such as form validation. Although PHP, Ruby, and
other server-side languages have their uses, they can’t interact directly
with the user on the client side.

Q. When I try to run my script, the browser displays the actual script in
the browser window instead of executing it. What did I do wrong?
A. This is most likely caused by one of three errors. First, you might be
missing the beginning or ending <script> tags. Check them, and verify
that the first reads <script type="text/javascript">. Second, your
file might have been saved with a .txt extension, causing the browser
to treat it as a text file. Rename it to .htm or .html to fix the problem.
Third, make sure your browser supports JavaScript, and that it is not
disabled in the Preferences dialog.

Q. Why are the <strong> and <br /> tags allowed in the statements
to print the time? I thought HTML tags weren’t allowed within the
<script> tags.

A. Because this particular tag is inside quotation marks, it’s considered a

valid part of the script. The script’s output, including any HTML tags, is
interpreted and displayed by the browser. You can use other HTML tags
within quotation marks to add formatting, such as the <h2> tags we
added for the large clock display.
 Workshop 93

Workshop
The workshop contains quiz questions and exercises to help you
solidify your understanding of the material covered. Try to answer all
questions before looking at the “Answers” section that follows.

Quiz
1. When a user views a page containing a JavaScript program, which
machine actually executes the script?
a. The user’s machine running a web browser
b. The web server
c. A central machine deep within Netscape’s corporate offices

2. What tool do you use to create and edit JavaScript programs?

a. A browser
b. A text editor
c. A pencil and a piece of paper

3. What are variables used for in JavaScript programs?

a. Storing numbers, dates, or other values
b. Varying randomly
c. Causing high-school algebra flashbacks

4. What should appear at the very end of a JavaScript script embedded in

an HTML file?
a. The <script type="text/javascript"> tag
b. The </script> tag
c. The END statement

Answers
1. a. JavaScript programs execute on the web browser. (There is actually a
server-side version of JavaScript, but that’s another story.)
2. b. Any text editor can be used to create scripts. You can also use a
word processor if you’re careful to save the document as a text file with
the .html or .htm extension.
94 CHAPTER 4: Understanding JavaScript

3. a. Variables are used to store numbers, dates, or other values.

4. b. Your script should end with the </script> tag.

Exercises
▶ Add a millisecond field to the large clock. You can use the
getMilliseconds function, which works just like getSeconds but
returns milliseconds.
▶ Modify the script to display the time, including milliseconds, twice.
Notice whether any time passes between the two time displays when
you load the page.
 INDEX

Symbols accessibility, JavaScript best

practices, 513
interpreting response
data, 594
@font-face feature (CSS3), 132-134 Adaptive Path, AJAX, 590 JavaScript client, 590
< > tags. See individual entries addEventListener function, 468 sending, 593
indexed according to tag names Adjust Hue/Lightness/Saturation tool server-side scripts, 590,
: selectors. See individual entries (GIMP), 204 603-605
indexed according to selector Adobe Photoshop, 198 XML and, 591
names AJAX (Asynchronous JavaScript + XMLHttpRequest
$(document).ready event handler XML), 83, 589. See also JavaScript awaiting responses to
(jQuery JavaScript library), 542-543 debugging applications, 601-606 requests, 593
\ (forward slashes) and HTML, 170 examples of, 591-592 creating requests, 592-593
. (periods), JavaScript objects, 355 frameworks, 592 interpretting request response
+ (plus signs), JavaScript jQuery and AJAX-related data, 594
statements, 86 functionality, 606-607 opening URLs, 593
+= operator, 398 libraries, 592 sending requests, 593
; (semicolons), JavaScript statements, ajaxRequest function, 595 alerts (dialog boxes), 499
84, 354 ajaxResponse function, 595 align property (CSS), 249
creating, 594-595 aligning
quiz building example, images
596-601 horizontal alignment, 216-218
A using, 596 vertical alignment, 218-220
live searches text
A Small Orange web hosting forms, 602-606 attributes, 135
provider, 7
front end, 605 block-level elements, 136-137
<a> tags (HTML), 172-175, 222
HTML file example, 603 tables, 153-156
absolute addresses and web pages,
quiz building example, 596-601 text-align property, 67, 262
170-171
requests text-align style rule, 136-137
absolute links and web pages, 170
awaiting responses, 593 text-decoration property
absolute positioning, 273
back end, 590, 603-604 (CSS), 67
display property (CSS), 63
creating, 592-593 vertical-align property (CSS), 262
positioning property, 274-277
front end, 590, 604-605 alternate text, 214-215
662 Amazon.com

Amazon.com, 592, 648-649 B border-style property, 64-65

analogous color schemes, 191 border-top property, 64-65
anchor objects (DOM), 372 <b> tags (HTML), 122, 125-126 border-width property, 64
anchor tags Backbone.js JavaScript box model, 270
naming, 173 framework, 538 tables
web pages back end (AJAX requests), 590, color, 195-198
identifying locations 603-604 creating, 148-149
within, 172 Back/Forward buttons, adding to spacing, 156
linking to anchor locations, documents, 373-374 box model (CSS), 269
172-175 backgrounds borders, 270
AngularJS JavaScript framework, 538 background-position style content, 270
animation, 211-212 property, 224
lists and, 286-290
HTML elements and jQuery background-repeat style
property, 224 margins, 270
JavaScript library, 548-553
color padding, 270
jQuery UI library, 566
background-color property sizing elements, 270-272
Apple Safari web browser. See Safari
web browser (CSS), 66 <br /> tags, 32-33, 128
arguments (JavaScript functions), 420 background-color style break statements (JavaScript), 458
property, 223 breakpoints, debugging JavaScript,
Arial font (text), 129
CSS and, 195-198 115-116
arithmetic mean, 437
images, 223-224 browsers (web)
arrays (JavaScript), 340-342
tiled backgrounds, 209-211 Chrome, 9
declaring, 408
bad websites, examples of, 193 cross-browser scripting, 519
elements of, accessing, 409
bandwidth, web hosting providers, 7 140 cross-browser color
length of, 408-409 names, 192
banners, creating, 206-208
numeric arrays, 408, 411-413 debugging browsers, 520
BAWSI.org, website organization, 651
string arrays, 409-411 feature sensing, 509, 519
Berners-Lee, Sir Tim, 2
<article> tags (HTML5), 25, 37-41, CSS, 62
45-46 block-level elements, aligning text in,
136-137 debugging, 520
ASCII (American Standard Code for
Information Interchange), 475 block value (CSS display property), 63 Developer Tools
formatted text, 122 blogs, 20 CSS Inspector, 106-107, 110
web content, creating, 27, 34 <body> tags, 27, 31-33 debugging CSS, 98,
boldface text, 125-126 106-107, 110
<aside> tags (HTML5), 25, 37-41,
47-49 Boolean operators. See logical debugging HTML, 98-100,
operators (JavaScript) 103-105
.asp file extensions, 27
Boolean values (JavaScript), 400 debugging JavaScript, 111-117
attributes, 135, 169
Bootstrap framework, 657 HTML Inspector, 100, 103-105
default values, 136
borders viewing source code, 110
style attribute and text-align style
rule, 136-137 CSS development of, 2
audio border-bottom property, 64-65 dialog boxes, displaying, 497-499
<audio> element, embedding border-color property, 64-65 distributing, 20
multimedia files, 238-239 border-left property, 64-65 Firefox, 9
HTML5 audio playback, 238-239 border property, 64-65 graceful degradation, 506
auto image loading and web border-right property, 64-65 helper applications, defining, 231
browsers, 21
 color 663

history, 2, 372-374 built-in objects, 356, 425, 430-433 error messages, displaying, 90
HTML development, 2 date object, 438 Sources panel, debugging
images, auto loading, 21 converting date formats, 440 JavaScript, 114-117
information, reading via JavaScript creating, 438 clarity, coding for, 653-654
dishonest browsers, 517-518 local time values, 440 Classic FTP client
displaying information, reading date values, 439 server connections, 14
515-516 setting date values, 439 website connections, 12-13
Internet Explorer, 9, 470 time zones, 440 clear property (CSS) and text
links, opening in new browser definitions, extending, 431 property, 281
windows, 181 math object, 434-435 client-side scripting, 338, 349
lists, displaying, 140 generating random numbers, clip art, 199
margins, 287-288 435-438 closing/opening browser windows,
non-Internet Explorer event rounding decimal 491-493
properties, 470 numbers, 434 closing slashes (HTML tags), 33
non-JavaScript browsers, 520 truncating decimal closing tags (HTML), 30
avoiding errors, 522-525 numbers, 435 cm value (CSS height/width
detecting, 521 bulleted lists, 142 properties), 63
JavaScript optionality, 521-522 buttons, creating, 206-208 code (source), viewing via Developer
<noscript> tags, 521 buying domain names, 7 Tools, 110
non-viewable window areas, 316 color
Opera, 9 140 cross-browser color
names, 192
padding, 287-288
analogous color schemes, 191
plug-ins, defining, 231 C background color
popularity of, 26
case-sensitivity, JavaScript background-color style
pop-up windows, 181 property, 223
progressive enhancement, syntax, 360
case statements (JavaScript), 453 CSS and, 195-198
506-507
categorizing elements, 44 best practices, 190-191
QuickTime support, 233
CD-ROM, transferring photos to, 200 border color (tables) and CSS,
Safari, 9 195-198
search engines, 521 cells (tables)
color property (CSS), 67
sensing. See feature sensing creating, 146
color style rule (CSS), 129
servers, basic browser server sizing, 151-153
color theory, 191
interaction, 3-5 Champeon, Steve, 507
color wheel, 191
text, adjusting font size, 21, 60 character entity, 123
Colorblind Web Page Filter
websites checkboxes (forms), 621-623 tool, 198
comparing, 26 child objects (JavaScript), 426 complementary color
testing, 8-9, 26 children (DOM), 377 schemes, 191
windows child tags. See nested tags (HTML) graphics, adjusting color in, 204
creating, 490-491 Chrome (Google), 9 hexadecimal color codes,
moving, 493-495 Console, debugging JavaScript, 192-195
opening/closing, 491-493 111-112 links and, 192
resizing, 493-495 Developer Tools monitors and, 192
timeouts, 495-497 CSS Inspector, 108-109 names and case sensitivity, 192
debugging JavaScript, 111-117 tables and, 155-156
HTML Inspector, 101-103
664 color

text selecting web hosting external style sheets, 56-62

color and CSS, 195-198 providersl, 6-8, 26 float property, 249, 262-266, 281
formatting in style sheets, 56 viewing locally, 5 formatting properties, 63
triadic color schemes, 191 continue statements (JavaScript), 459 background-color property, 66
using, 190-191 continuing loops (JavaScript), 459 border property, 64-65
W3C color standards, 192 control panels, selecting web hosting border-bottom property, 64-65
columns providers, 7-8 border-color property, 64-65
CSS, 158-162 converting border-left property, 64-65
fixed/liquid hybrid layouts between data types, 401-402 border-right property, 64-65
defining columns in, 323-325 date formats, 440 border-style property, 64-65
setting column height in, string case, 405 border-top property, 64-65
326-330 copyrights, 123, 199 border-width property, 64
combining string object values, counters (JavaScript), for loops, 453 color property, 67
403-404 Creative Commons licenses, 199 font property, 67
command chaining, 549 cropping images, 200-202 font-family property, 66
comments cross-browser scripting font-size property, 66
JavaScript code comments, debugging browsers, 520 font-style property, 66
340-342, 361-362, 511-512 event handlers and JavaScript, font-weight property, 66
websites, maintaining code via, 508-509
652-653 line-height property, 67
feature sensing, 509, 519
complementary color schemes, 191 padding property, 67
CSS (Cascading Style Sheets)
compression (graphics), 199, 205 text-align property, 66-67
align property, 249
concatenation operators text-decoration property, 67
box model, 269
(JavaScript), 343 text-indent property, 66
borders, 270
conceptualizing web pages, 38-43 frameworks, 657
content, 270
conditional expressions, 387, HTML documents, linking to, 61
lists and, 286-290
446-449 imagemaps, 292-296
margins, 270
conditional operators (JavaScript), inline styles, 71-72
446-447 padding, 270
Inspector, debugging CSS,
conditional statements sizing elements, 270-272 106-107, 110
(JavaScript), 356 browser support for, 62 internal style sheets, 56, 70-72
conditions (for loops), 454 cascading components, 56 jQuery JavaScript library and, 544
confirmations (dialog boxes), 499 clear property and text flow, 281 layouts
Console (Chrome), debugging color, specifying, 195-198 elastic layouts, 334
JavaScript, 111-112 columns, 158-162 fixed layouts, 316-317
constructor functions creating, 57-62 fixed/liquid hybrid layouts,
(JavaScript), 428 CSS1, 57 321-332
containers, 376 CSS 2, 57 liquid layouts, 315, 318-321
content CSS3, 57 properties, 63
CSS box model, 270 CSS Zen Garden and layouts, 315 responsive web design,
JavaScript best practices, 505 debugging via Developer Tools, 332-333
web content 98, 106-107, 110 <link /> tag, 61
creating, 2-3 definition of, 55-56 links
delivering, 3-5 <div> tags, 56, 70 linking to HTML
publishing, 19-20 DOCTYPE declarations, 272 documents, 61
styling, 181-185
 document objects (DOM) 665

lists sizing, 60 design patterns, JavaScript best

horizontal navigation, 307-311 strikethrough text, 67 practices, 513
list-style-image property, 286 text-align property, 262 Developer Tools
list-style-position property, underline text, 67 debugging
286, 290-292 validating, 72 CSS, 98, 106-107, 110
list-style-type property, 286 vertical-align property, 262 HTML, 98-100, 103-105
navigation lists, 296-311 z-index property, 278-280 JavaScript, 111-117
vertical navigation, 296-306 CSS3 (Cascading Style Sheets source code, viewing, 110
margin property, 249-257 version 3), @font-face feature, dialog boxes, displaying, 497-499
mouse actions, events and event 132-134 directories (web content), 169-170
handling, 478-484 current line and text flow, 280 dishonest browsers, 517-518
overflow property and text custom objects (JavaScript), 356 displaying
flow, 281 customer service, web hosting document information, 369-371
padding property, 249, 257-261 providers, 6 error messages, 90
positioning Cyberduck FTP client, 12 time (JavaScript example)
absolute positioning, 273-277 adding scripts to web
overlapping elements, pages, 86
278-280 creating output, 85
positioning property, 274 D Date objects, 84
relative positioning, 273-275 error handling, 89-91
z-index property, 278-280 DailyRazor web hosting provider, 7 modifying scripts, 87-89
properties, hyphenating, 382 dashed value (CSS border-style <script> tags, 84-85
reference guide online properties), 65
statements, 84-85
resource, 57 data types (JavaScript), 400-402
testing scripts, 87
selectors, 68 date objects (JavaScript)
variables, 84-85
<span> tags, 70 creating, 438
DisplayKey function, keyboard events,
style classes, 68-69 date formats, converting, 440 475-476
style ID, 70 date values, 439 display property (CSS), 63
style properties, 68 local time values, 440 distributing web browsers, 20
style rules, 56, 60 time display example, 84 <div> tags
color style rule, 129 time zones, 440 CSS, 56, 70
font-family style rule, 129 debugging HTML, 222
font-size style rule, 129 AJAX applications, 601-606 onclick events, 478-484
font weight style rule, 126 browsers, 520 DOCTYPE declarations, 272
list-style-type style rule, 144 CSS, 98, 106-107, 110 documenting code, 511-512,
multiple style properties in, 69 HTML, 98-100, 103-105 652-653
viewing, 62 JavaScript, 111-117 document node (DOM), 379
tags, 60 decimal numbers document objects (DOM)
elements and, 56 rounding, 434 anchor objects, 372
selectors, 68 truncating, 435 document information, displaying,
text declaring variables (JavaScript), 396 369-371
formatting color, 56 decrementing/incrementing variables link objects, 371, 375
italic text, 67 (JavaScript), 398 methods of, 371
line-through text, 67 definition lists, 138-140, 286
666 document objects (DOM)

properties of, 369 dotted value (CSS border-style <embed /> element, 237
text, writing within properties), 65 embedding multimedia files, 235-238
documents, 371 double value (CSS border-style Ember JavaScript framework, 538
document roots, 14-18 properties), 65 emphasized (italic) text, 67, 125-126
document.write statements doɃwhile loops (JavaScript), 457 empty tags (HTML), 30
(JavaScript), 80, 85 draggable() widget (jQuery UI library), error handling
Dojo JavaScript library, 534 575-578, 581-584
JavaScript best practices,
DOM (Document Object Model), 367 droppable() widget (jQuery UI library), 510-511
children, 377 575, 580-584
JavaScript scripts, 89-91
jQuery JavaScript library and, 544 dynamic websites, 337
non-JavaScript browsers, 522-525
layers client-side scripting, 338
error messages, displaying, 90
controlling positioning via DOM, 345-346
errors, avoiding, 524
JavaScript, 381-385 images, changing based on user
interaction, 346-347 escaping loops (JavaScript), 458
creating, 380-381 ESPN.com, website organization, 646
moveable layers, 381-385 JavaScript
changing images based on European languages, formatting text
nodes, 377 for, 122-124
user interaction, 346-347
document node, 379 event handlers, 465
comments in HTML files, 340
methods of, 380 $(document).ready handler (jQuery
displaying random content in
properties, 378-379 HTML files, 340-344 JavaScript library), 542-543
objects, 425 scripting in HTML files, creating, 466-467
anchor objects, 372 338-339 defining, 467-468
document objects, server-side scripting, 338 event objects, 466, 469-470
369-372, 375 VBScript, 338 functions and, 594
hiding/showing, 385-387 JavaScript and, 81-82, 357,
history objects, 372-374 360, 507
link objects, 371, 375 best practices, 358
location objects, 374-375 E cross-browser scripting,
methods, 368 508-509
naming, 368 editors (blog), 20 W3C event model, 508
parents, 377 effects (JavaScript), 83, 534-536 jQuery JavaScript library, 542-543,
properties, 368 553-554
elastic layouts, 334
referencing, 368 keyboard events, 474-476
elements
showing/hiding, 385-387 mouse events
block-level elements, aligning text
siblings, 378 in, 136-137 mousestatus function, 473
window objects, 368, 489-499 categorizing, 44 onClick, 471-474, 478-484
parents, 377 definition of, 56 onDblClick, 472
readiness and, 542 flow content, 44 onMouseDown, 472-474
siblings, 378 form elements, grouping, 619-620 onMouseOut, 471
structure of, 376-377 else keyword (JavaScript), 448-452 onMouseOver, 471
text <em> tags (HTML), 125-126 onMouseUp, 472-474
adding to web pages, 389-391 email addresses rollover images, 471
modifying web pages, 387-388 email address encoders, 180 multiple event handlers, 468
DOM objects (JavaScript), 356 linking to, 179-180 onLoad events, 477
domain names, purchasing, 7 validating, 629 onUnload events, 478
parentheses and, 594
 forms 667

quotation marks and, 466 infinite loops, 457-458 border property, 64-65
syntax of, 466 loops border-right property, 64-65
Yahoo! UI Library, 509 break statements, 458 border-style property, 64-65
event objects, 466, 469-470 continue statements, 459 border-top property, 64-65
expressions (JavaScript), 399 escaping, 458 border-width property, 64
external scripts (JavaScript), 81 switch statements, using multiple color property, 67
external style sheets (CSS), 56-62 conditions, 452-453 font-family property, 66
while loops, 456-457 font property, 67
flowing text, 280-281 font-size property, 66
fluid layouts. See liquid layouts font-style property, 66
F folders (web content), 169-171 font-weight property, 66
fonts (text) line-height property, 67
feature sensing, 509, 519 Arial font, 129 padding property, 67
Fetch FTP client, 12 CSS text-align property, 66-67
finding substrings (JavaScript), 407 color style rule, 129 text-decoration property, 67
Firefox web browser, 9, 90 font property, 67 text-indent property, 66
FireFTP FTP client, 11-12 font-family property, 66 style sheets, 56, 60
FireZilla FTP client, 12 font-family style rule, 129 text
fixed layouts, 316-317 font-size property, 66 aligning text, 135
fixed/liquid hybrid layouts, 321, font-size style rule, 129 boldface text, 125-126
330-332 font-style property, 66 bulleted lists, 142
columns font-weight property, 66 customizing fonts in HTML,
defining in layouts, 323-325 font weight style rule, 126 128-132
height, 326-330 <font> tags (HTML), 122, 128 definition lists, 138-140, 286
minimum width, setting, 325-326 foreign languages, 122-124 emphasized text, 126
structure of, 321-323 HTML, customizing in, 128-132 foreign languages, 122-124
Flickr, 212-214 resumes, creating, 130-132 italic (emphasized) text,
float property (CSS), 249, sans-serif font, 129 125-126
262-266, 281 sizing, 21, 60 multitiered lists, 144-145
flow content elements, 44 special characters, 122-124 nested lists, 140-141, 286
flow control (JavaScript), 445 Times Roman font, 129 older HTML tags, 122
break statements, 458 web fonts, 132-134 ordered lists, 138-140, 286
case statements, 453 <footer> tags, HTML5, 25, 37-41, outlines, 141-142
continue statements, 459 49-50 resumes, creating, 130-132
do…while loops, 457 foreign languages, formatting text for, special characters, 122-124
for…in loops, 459-462 122-124 subscript text, 126
for loops, 453-455 for loops (JavaScript), 453-455 superscript text, 126
if statements, 445 for…in loops (JavaScript), 459-462 unordered lists, 138-140, 286
conditional expressions, formatting web fonts, 132-134
446-449 CSS formatting properties, 63 web pages, creating, 34
conditional operators, 446-447 background-color property, 66 forms, 611
else keyword, 448-452 border-bottom property, 64-65 checkboxes, 621-623
logical operators, 447-448 border-color property, 64-65 creating, 612-617
testing multiple conditions, border-left property, 64-65
450-452
668 forms

data Cyberduck, 12 Google searches, 4

displaying in pop-up windows, Fetch, 12 Google Chrome web browser. See
633-635 FireFTP, 11-12 Chrome (Google)
labeling, 618-619 FireZilla, 12 Google Images, 212
naming, 618 Fuchs, Thomas, 533 Google Picasa, 199
submitting, 631-632 functions (JavaScript), 80, 419 graceful degradation, 506. See also
elements arguments, 420 progressive enhancement
accessing via JavaScript, 633 calling, 354, 421-422 graphics
grouping, 619-620 constructor functions, 428 Adobe Photoshop, 198
hidden data, 620 defining, 420-422 aligning
HTML5, 613, 629-630 math functions, 435-438 horizontal alignment, 216-218
JavaScript events, 632 naming, 361 vertical alignment, 218-220
passwords, 617 parameters, 354, 420 animated graphics, 211-212
pull-down pick lists, 624-626 values, returning, 423-424 backgrounds, 224
radio buttons, 623-624 background-image style
scrolling lists, 624-626 property, 223
selection lists, 624-626 tiled backgrounds, 209-211
banners, creating, 206-208
sending, 613 G buttons, creating, 206-208
text fields, 627-628
user input, accepting, 617-618 Garrett, Jesse James, 590 CD-ROM, transferring graphics
to, 200
validating get methods (JavaScript ojects), 439
clip art, 199
HTML5 form validation, Gickr, animated graphics, 211
629-630 color, adjusting, 204
.GIF (Graphics Interchange
JavaScript, 82 Format), 208 compression, 199
for statements (JavaScript), 357 animated graphics, 211-212 copyrighted graphics, 199
Forward/Back buttons, adding to tiled backgrounds, 209-211 Creative Commons licenses, 199
documents, 373-374 transparent images, 209 cropping, 200-202
forward slashes (\) and HTML, 170 GIMP (GNU Image Manipulation file sizes, 199
frameworks Program), 198 Flickr, 212-214
AngularJS, 538 Adjust Hue/Lightness/Saturation .GIF, 208
Backbone.js, 538 tool, 204 animated graphics, 211-212
Bootstrap, 657 banners, creating, 206-208 tiled backgrounds, 209-211
Ember, 538 buttons, creating, 206-208 transparent graphics, 209
Foundation, 657 images GIMP, 198
HTML5 Boilerplate, 657 adjusting color, 204 adjusting graphic color, 204
Knockout, 538 cropping, 201-203 banners, 206-208
MVC pattern, 537 .JPEG compression, 205 buttons, 206-208
front end (AJAX requests), 590, resizing, 203-204 cropping graphics, 201-203
604-605 Red Eye Removal, 204 JPEG compression, 205
FTP (File Transfer Protocol), 10, 29 Git website version control, 656 resizing graphics, 203-204
Classic FTP client global variables (JavaScript), 396 Google Images, 212
server connections, 14 Gmail (Google), 522, 591 Google Picasa, 199
website connections, 12-13 GMT (Greenwich Mean Time), height/width, specifying, 216
JavaScript time display example, 84
 HTML (HyperText Markup Language) 669

image maps, 225-230, 292-296 height development of, 2

.JPEG CSS box model, adjusting in, <embed /> element, embedding
compression, 205 270-272 multimedia files, 237
tiled backgrounds, 209-211 fixed/liquid hybrid layouts, setting event handlers
links, turning graphics into, column height in, 326-330 JavaScript, 507-509
220-223 height property (CSS), 63 Yahoo! UI Library, 509
Pixlr, 199 images, specifying height in, 216 files
.PNG, 209 Hello World HTML file, creating, 10 creating, 10, 27-36
Red Eye Removal, 204 help index pages, 18-19
republishing, 214 CSS reference guide online managing, 16-18
resizing, 203-204 resource, 57 organizing, 16-18
resolution, 199-200 web hosting providers, transferring, 10-14, 29
selecting, 6
responsive graphics, 216 viewing, 29
helper applications, defining, 231
rollover graphics, 471 forms, 611
hexadecimal color codes, 192-195
software, choosing, 198 accessing elements via
hiding/showing JavaScript, 633
storing, 213
DOM objects, 385-387 checkboxes, 621-623
text descriptions, 214-215
form data, 620 creating, 612-617
transparent graphics, 209
HTML elements via jQuery displaying data in pop-up
user interaction, changing JavaScript library, 547-548
graphics based on, 346-347 windows, 633-635
history objects (DOM), 372-374 grouping elements, 619-620
uses of, 200
horizontal image alignment, 216-218 hidden data, 620
web pages
horizontal navigation, 307-311 JavaScript events, 632
grabbing graphics from, 199
horizontal rule tags (HTML), 33 labeling form data, 618-619
placing graphics on web
pages, 212-214 <hr /> tags, 33 naming form data, 618
Windows Media Video, linking to, HTML (HyperText Markup Language) passwords, 617
232-233 AJAX pull-down pick lists, 624-626
groove value (CSS border-style live search forms, 602 radio buttons, 623-624
properties), 65 quiz building example, scrolling lists, 624-626
grouping 596-597
selection lists, 624-626
form elements, 619-620 attributes, 135-137, 169
sending, 613
statements (JavaScript). <audio> element, embedding
multimedia files, 238-239 submitting form data, 631-632
See loops (JavaScript)
Bootstrap framework, 657 text fields, 627-628
character entity, 123 text input, 617-618
containers, 376 user input, 617-618
forward slashes (\), 170
H CSS
frameworks, 657
box model, 269-272, 286-290
<head> tags, 27, 31-33, 80 external style sheets, 61-62 FTP clients, 10-14
<header> tags (HTML5), 25, 36, linking style sheets to HTML <head> tags and functions, 80
39-44 documents, 61 Hello World sample file, 10
heading tags (HTML), 34-36 debugging history of, 2
headings (tables), creating, 146 Developer Tools, 98-100, .html file extensions, 27
103-105 HTML-compatible word
HTML Inspector, 100, 103-105 processors, 27
670 HTML (HyperText Markup Language)

images list-style-type style rule, <font> tags, 122, 128

imagemaps, 228-230 142-145 </font> tags, 122
placing images on web pages, multitiered lists, 144-145 formatting and older HTML
212-214 nested lists, 140-141, 286 tags, 122
Inspector, debugging HTML, 100, ordered lists, 138-140, 286 <head> tags, 27, 31-33
103-105 outline creation, 141-142 </head> tags, 33
JavaScript unordered lists, 138-140, 286 heading tags, 34-36
adding scripts to HTML marked-up text, 3 horizontal rule tags, 33
documents, 86 multiple conditions, testing, <hr /> tags, 33
advantages over HTML, 367 450-451 <html> tags, 27, 31-33
comments in HTML files, 340 Notepad, creating HTML files, 27 </html> tags, 33
displaying random content in <object> element, embedding <i> tags, 122, 125
HTML files, 340-344 multimedia files, 235-237 </i> tags, 122, 125
scripting in HTML files, outlines, creating, 141-142
338-339 <img> tags, 212-214
pseudoclasses, 182-185 lang attribute, 31
jQuery JavaScript library and, style rules, 136, 142-145
545-546 line breaks, 32-33
tables naming files with, 27
animating elements, 548-553
aligning within, 153-156 nested tags, 141
hiding/showing elements,
547-548 borders, 148-149 opening tags, 30
.js files, linking to, 81 cells, 146, 151-153 <p> tags, 31-33
layouts color, 155-156 paragraphs, 32-33
elastic layouts, 334 creating, 146-150 <pre> tags, 126-127
fixed layouts, 316-317 headings, 146 </pre> tags, 126-127
fixed/liquid hybrid layouts, images, 156 pseudoclasses, 182-185
321-332 page layouts, 157 saving files with, 27
liquid layouts, 315, 318-321 rows, 146 <section> tags, 177
responsive web design, sizing, 150-153 <strike> tags, 126
332-333 spacing borders, 156 <strong> tags, 125-126
links spanning within, 156 </strong> tags, 125-126
absolute links, 170 tags, 5, 28 _{tags, 126
anchor tags, 172-175 <a> tags, 172-175, 222} tags, 126
images as, 181 attributes, 135, 169 ^{tags, 126
linking between web content, <b> tags, 122, 125-126} tags, 126
175-178 </b> tags, 122, 125-126 <table> tags, 146
linking to email addresses, <body> tags, 27, 31-33
179-180 <tbody> tags, 150
</body> tags, 33 <td> tags, 146-149
linking to external web content, <br /> tags, 32-33, 128
178-179 <tfoot> tags, 150
closing slashes, 33 <th> tags, 146, 149
opening links in new browser
windows, 181 closing tags, 30 <thread> tags, 150
relative-root links, 171 <div> tags, 222 <title> tags, 27, 31-33, 36
styling via CSS, 181-185 <em> tags, 125-126 </title>tags, 33
lists </em> tags, 125-126 <tr> tags, 146-147
bulleted lists, 142 empty tags, 30 <u> tags, 126
definition lists, 138-140, 286 event handlers, 81, 358
 images 671

text, formatting, 122 relative-root links, 171 I

aligning text, 135 selecting web hosting
boldface text, 125-126 providers, 6-8, 26 <i> tags (HTML), 122, 125
customizing fonts, 128-132 styling links via CSS, 181-185 if statements (JavaScript), 445
definition lists, 138, 286 website architectures, conditional expressions, 387,
emphasized text, 126 creating, 171 446-449
foreign languages, 122-124 whitespace, 32 conditional operators, 446-447
italic text, 125-126 Word, creating HTML files, 27 logical operators, 447-448
multitiered lists, 144 word processors and HTML multiple conditions, testing
compatibility, 27
nested lists, 140-141, 286 else keyword, 448-452
WYSIWYG editors, creating HTML
older HTML tags, 122 HTML files, 450-451
files, 27
ordered lists, 138, 286 JavaScript files, 451-452
HTML5 (HyperText Markup Language
outlines, 141 version 5) images
resumes, 130-132 application development, 348-349 aligning
special characters, 122-124 Boilerplate framework, 657 horizontal alignment, 216-218
subscript text, 126 client-side scripting, 349 vertical alignment, 218-220
superscript text, 126 forms, 613, 629-630 animated images, 211-212
unordered lists, 138, 286 JavaScript, 349 auto loading in web browsers, 21
web fonts, 132-134 multimedia background images, 224
whitespace, 32 audio playback, 238-239 background-image style
validating, 95-96, 105 property, 223
video playback, 238-241
<video> element, embedding tiled backgrounds, 209-211
Outline tool, 43
multimedia files, 240-241 banners, creating, 206-208
semantic elements, 25, 36-50
web content buttons, creating, 206-208
server-side scripting, 349
absolute addresses, 170-171 CD-ROM, transferring images
tags
absolute links, 170 to, 200
<article> tags, 25, 37-41,
anchor tags, 172-175 clip art, 199
45-46
creating, 2-3 color, adjusting, 204
<aside> tags, 25, 37-41,
delivering, 3-5 47-49 compression, 199
directories, 169-170 <footer> tags, 25, 37-41, copyrighted images, 199
folders, 169-171 49-50 Creative Commons licenses, 199
images as links, 181 <header> tags, 25, 36, 39-44 cropping, 200-202
linking between, 175-178 <nav> tags, 25, 37-41, 46-47 file sizes, 199
linking to email addresses, <section> tags, 25, 37-41, Flickr, 212-214
179-180 44-45 .GIF, 208
linking to external web content, web pages, conceptualizing, animated images, 211-212
178-179 38-43 tiled backgrounds, 209-211
opening links in new browser hyperlinks. See links transparent images, 209
windows, 181 hyphenating CSS properties, 382 Google Images, 212
organizing, 169-170 Google Picasa, 199
publishing, 19-20 height/width, specifying, 216
relative addresses, 170-171 imagemaps, 225-230, 292-296
relative-root addresses, 170
672 images

.JPEG input controls and forms comments, 361-362, 511-512

compression, 205 checkboxes, 621-622 content, 505
tiled backgrounds, 209-211 radio buttons, 623-624 design patterns, 513
links, turning images into, 181, selection lists, 624-626 documenting code, 511-512
220-223 text fields, 627-628 error handling, 510-511
Pixlr, 199 inset value (CSS border-style event handlers, 507-509
PNG, 209 properties), 65 graceful degradation, 506
Red Eye Removal, 204 Inspector, debugging overusing JavaScript, 504-505
republishing, 214 CSS, 106-107, 110 presentation, 505
resizing, 203-204 HTML, 100, 103-105 progressive enhancement,
resolution, 199-200 internal style sheets (CSS), 56, 70-72 506-507
responsive images, 216 Internet service providers (ISP), reusing code, 514
rollover images, 471 selecting, 26 usability, 512
storing, 213 Internet Explorer, 9 web standards and browser
tables and, 156 DOCTYPE declarations, 272 specificity, 509
text descriptions, 214-215 error messages, displaying, 90 break statements, 458
transparent images, 209 event properties, 470 breakpoints, debugging, 115-116
user interaction, changing images interpreted languages, 78 browsers
based on, 346-347 ISP (Internet Service Providers), reading information on,
uses of, 200 selecting, 26 515-518
web pages italic (emphasized) text, 67, 125-126 specificity and web
grabbing images from, 199 standards, 509
placing images on web pages, capabilities of, 78, 82
212-214 case statements, 453
Windows Media Video, linking to, J client-side scripting, 338
232-233 comments, 340-342, 511-512
<img> tags (HTML), 212-214 JavaScript concatenation operators, 343
in value (CSS height/width accessibility, 513 conditional expressions, 446-449
properties), 63 AJAX, 83, 537 conditional operators, 446-447
increment expressions jQuery and AJAX-related continue statements, 459
(for loops), 454 functionality, 606-607 cross-browser scripting
incrementing/decrementing variables live search forms, 604-606 debugging browsers, 520
(JavaScript), 398 quiz building example, feature sensing, 509, 519
indenting 598-600 CSS, jQuery JavaScript
code, 653-654 requests, 590, 604-605 library, 544
text, web page creation, 34 arrays, 340-342 data types, 400-402
index pages, HTML file management, accessing elements of, 409 Date objects, time display
18-19 declaring, 408 example, 84
indexes (JavaScript), for loops, 453 length of, 408-409 debugging, 111-117
infinite loops (JavaScript), 457-458 numeric arrays, 408, 411-413 design patterns, 513
initial expressions (for loops), 454 string arrays, 409-411 development of, 78
inline styles (CSS), internal style best practices, 358, 362-363, documenting code, 511-512
sheets and, 71-72 503-504 document.write statements,
inline value (CSS display property), 63 accessibility, 513 80, 85
behvaior, 505 Dojo library, 534
 JavaScript 673

DOM, 345-346, 367 onUnload events, 478 jQuery JavaScript library,

adding text to web pages, quotation marks and, 466 545-553
389-391 syntax of, 466 scripting in, 338-339
anchor objects, 372 W3C event model, 508 HTML5, 349
children, 377 expressions, 399 if statements, 445
document objects, external scripts, 81 conditional expressions,
369-372, 375 flow control, 445 446-449
hiding/showing objects, break statements, 458 conditional operators, 446-448
385-387 else keyword, 448-452
case statements, 453
history objects, 372-374 testing multiple conditions,
continue statements, 459
jQuery JavaScript library, 544 450-452
continuing loops, 459
layers, 380-385 images, changing based on user
do…while loops, 457 interaction, 346-347
link objects, 371, 375
escaping loops, 458 infinite loops, 457-458
location objects, 374-375
for loops, 453-455 jQuery library, 531-532
modifying text in web pages,
387-388 for…in loops, 459-462 $(document).ready event
naming objects, 368 if statements, 445-452 handler, 542-543
nodes, 377-380 infinite loops, 457-458 AJAX-related functionality,
object methods, 368 switch statements, 452-453 606-607
object properties, 368 while loops, 456-457 animating elements, 548-553
objects, 425 for loops, 453-455 command chaining, 549
parents, 377 for…in loops, 459-462 CSS content, 544
referencing objects, 368 forms DOM content, 544
showing/hiding objects, accessing elements, 633 downloading, 541
385-387 events, 632 event handling, 553-554
siblings, 378 validating, 82 hiding/showing elements,
structure of, 376-377 frameworks, 537-538 547-548
window objects, 368, 489-499 functions, 80, 419 HTML content, 545-553
do…while loops, 457 arguments, 420 storing, 541
effects, 83, 534-536 calling, 354, 421-422 jQuery UI library
else keyword, 448-452 constructor functions, 428 animation easing, 566
error handling, 89-91, 510-511, defining, 420-422 applying effects, 564-573
522-525 math functions, 435-438 :data() selector, 558
event handlers, 81-82, 357-360, naming, 361 downloading, 557-558
465, 507 parameters, 354, 420 :focusable() selector, 559
creating, 466-467 returning values, 423-424 positioning elements, 559-564
cross-browser scripting, Gmail and, 522 storing, 557
508-509 graceful degradation, 506 :tabbable selector, 559
defining, 467-468 history of, 78 visibility effects, 570-573
event objects, 466, 469-470 HTML widgets, 573-585
keyboard events, 474-476 comments, 340 .js files, 81
mouse events, 471-474, 478 displaying random content in, JSON, 363-364, 591
multiple event handlers, 468 340-344 layers, controlling positioning of,
onclick events, 478-484 JavaScript advantages 381-385
onLoad events, 477 over, 367
674 JavaScript

libraries, 529-530 operators, precedence of, testing

adding effects via, 534-535 399-400 multiple conditions, 450-452
building scripts, 535-536 order of script operation, scripts, 87
Dojo, 534 determining, 359-360 text editors, 87
jQuery, 531-532, 541-554, output creation, time display time display example, 84-91
606-607 example, 85
toLowerCase() method, 405
jQuery UI, 557-585 overusing, 504-505
toUpperCase() method, 405
Prototype, 532-533 parseFloat() function, 402
.txt file extension, 87
Script.aculo.us, 533-536 parseInt() function, 402
unobtrusive scripting, 503,
using effects, 535 progressive enhancement, 363, 523-525
506-507
Yahoo! UI Library, 534 usability, 80-81, 512
Prototype library, 532-533
logical operators, 447-448 variables, 355, 361, 395
remote scripting, 83
loops assigning values to variables,
reusing code, 514 397-398
break statements, 458
Script.aculo.us library, 533 declaring, 396
continue statements, 459
<script> tags, 79-81, 84-85 global variables, 396
escaping, 458
statements incrementing/
modifying scripts, 87-89
conditional statements, 356 decrementing, 398
modulo operators, 437
for statements, 357 local variables, 396
multiple conditions, testing,
451-452 function calls, 354 localtime variable, 85
non-JavaScript browsers, 520 loops, 357 naming, 395-396
avoiding errors, 522-525 objects, 355-356, 361 scope of, 396
detecting, 521 plus signs (+) in, 86 time display example, 84-85
JavaScript optionality, 521-522 semicolons, 84 UTC variable, 85
<noscript> tag, 521 time display example, 84-85 web pages, adding scripts to,
objects stepping into/out of code, 115 79-80, 86
built-in objects, 356, 425, stepping over code, 115-116 websites, navigating, 82
430-435, 438-440 strings while loops, 456-457
child objects, 426 calculating length of, 404-405 Yahoo! UI Library, 534
creating, 426, 429-430 converting case, 405 join() method, 413
custom objects, 356 string arrays, 409-411 .JPEG (Joint Photographic Experts
date objects, 438-440 string objects, 402-404, 433 Group) files
defining, 427-428 substrings, 405-407 compression, 205
defining methods, 428-429 switch statements, 452-453 tiled backgrounds, 209-211
DOM objects, 356, 425 syntax, 403 jQuery JavaScript library, 531-532
math objects, 434-438 case-sensitivity, 360 $(document).ready event handler,
functions, 361 542-543
methods, 355-356, 426, 439
objects, 361 AJAX-related functionality,
naming, 361 606-607
properties, 355, 426 reserved words, 361
command chaining, 549
prototypes, 432-433 spacing (whitespace), 361
CSS content, 544
simplifying scripting via, variables, 361
DOM content, 544
427-430
downloading, 541
 live search 675

event handling, 553-554 layouts email addresses, 179-180

HTML content, 545-546 elastic layouts, 334 images, 181
animating elements, 548-553 fixed layouts, 316-317 linking to Windows Media
hiding/showing elements, fixed/liquid hybrid layouts, Video, 232-233
547-548 330-332 turning images into links,
storing, 541 defining columns in, 323-325 220-223
jQuery UI library, 557 setting column height, .js files, linking to, 81
animation easing, 566 326-330 multimedia files, 231-233
applying effects, 564-573 setting minimum width, opening, 181
:data() selector, 558 325-326 relative-root links, 171
downloading, 557-558 structure of, 321-323 styling via CSS, 181-185
:focusable() selector, 559 layout properties (CSS), 63 web content
positioning elements, 559-564 liquid layouts, 318-321 linking between, 175-178
storing, 557 responsive web design, 332-333 linking to external web content,
:tabbable selector, 559 web resources, 315 178-179
visibility effects, 570-573 leading (text), line-height property Windows Media Video, linking
(CSS), 67 images to, 232-233
widgets, 573, 585
libraries liquid layouts, 315, 318-321
draggable() widget, 575-578,
581-584 AJAX, 592 list-item value (CSS display
ajaxRequest function, 595 property), 63
droppable() widget, 575,
580-584 ajaxResponse function, 595 lists
mouse interaction widget, creating, 594-595 bulleted lists, 142
574-575 quiz building example, CSS box model, 286-290
.js files, 81 596-601 definition lists, 138-140, 286
JSON (JavaScript Object Notation), JavaScript, 529-530 list item indicators, 290-292
363-364, 591 Dojo, 534 list-style-image property
.jsp file extensions, 27 effects, 534-535 (CSS), 286
jQuery, 531-532, 541-554, list-style-position property (CSS),
606-607 286, 290-292
jQuery UI, 557-585 list-style-type property (CSS), 286
K–L Prototype, 532-533 list-style-type style rule, 142-145
Script.aculo.us, 533-536 multitiered lists, 144-145
keyboard events, 474-476 scripts, 535-536 navigation lists, 296-311
Knockout JavaScript framework, 538 Yahoo! UI Library, 534 nested lists, 140-141, 286
Koch, Peter-Paul, 520 line breaks, web page creation, 32-33 ordered lists, 138-140, 286
line-height property (CSS), 67 outlines, building via lists,
labeling form data, 618-619 141-142
line-through text, 67
lang attribute (HTML tags), 31 unordered lists, 138-140, 286
<link /> tags (CSS), 61
languages (foreign), formatting text LiveScript, JavaScript
for, 122-124 link objects (DOM), 371, 375
development, 78
layers (DOM) links
live search
creating, 380-381 absolute links, 170
example, 606
moveable layers, 381-385 anchor tags, 172-175
forms, creating via AJAX, 602-606
positioning, controlling via color and, 192
requirements for, 606
JavaScript, 381-385 documents, 371, 375
676 loading web content, timing of

loading web content, timing of, 21 math functions, 435-438 moveable layers (DOM), 381-385
local time values, date object random numbers, generating, moving browser windows, 493-495
(JavaScript) and, 440 435-438 Mozilla Firefox web browser. See
local variables (JavaScript), 396 methods Firefox web browser
localtime variable (JavaScript), 85 DOM nodes, 379-380 multimedia, 242
location objects (DOM), 374-375 DOM objects, 368 audio files, HTML5 playback,
logical operators (JavaScript), document objects, 371 238-239
447-448 history objects, 372 creating, 232
loops (JavaScript), 357 location objects, 375 defining, 189
break statements, 458 JavaScript objects, 355-356, 426 embedding files, 235-238
continue statements, 459 defining, 428-429 linking to files, 231-233
continuing, 459 get methods, 439 MIME types, 236
do…while loops, 457 prototypes, 432-433 <object> element, 235-237
escaping, 458 string objects and, 433 QuickTime support, 233
for…in loops, 459-462 Microsoft Internet Explorer web streaming files, 235
for loops, 453-455 browser. See Internet Explorer video files, HTML5 playback,
infinite loops, 457-458 MIME types, multimedia files, 236 238-241
while loops, 456-457 mm value (CSS height/width multiple event handlers, 468
LunarPages web hosting provider, 7 properties), 64 multitiered lists, 144-145
modifying MVC (Model-View-Controller)
JavaScript scripts, 87-89 JavaScript framework pattern, 537
text in web pages, 387-388
M modulo operators (JavaScript), 437
monitors
managing color and, 192 N
domain names, 7 resolution, 207
HTML files, 16-19 mouses naming
web page headings, 34-35 events and event handling anchor tags, 173
websites mousestatus function, 473 DOM objects, 368
coding clarity, 653-654 onClick event handler, files with HTML tags, 27
comments, 652-653 471-475, 478-484 form data, 618
documenting code, 652-653 onDblClick event handler, 472 JavaScript
indenting code, 653-654 onMouseDown event handler, functions, 361
maintainable code, 652-654 472-474 objects, 361
version control, 654-656 onMouseOut event variables, 361, 395-396
handler, 471 NaN (Not a Number), 402
margins
onMouseOver event <nav> tags, HTML5, 25, 37-41, 46-47
browsers and, 287-288 handler, 471
CSS box model, 270 navigating websites, 82
onMouseUp event handler, navigation lists
margin property (CSS), 249-257 472-474
marked-up text, 3 horizontal navigation, 307-311
mouse interaction widget (jQuery
math object (JavaScript) UI library), 574-575 primary navigation, 296
decimal numbers rollover images, 471 regular lists vs, 296
rounding, 434 secondary navigation, 296
truncating, 435
 parseFloat() function (JavaScript) 677

vertical navigation, 296-299 link objects, 371, 375 operators (JavaScript), precedence of,
multilevel vertical navigation, location objects, 374-375 399-400
302-306 methods, 368, 371-372, 375 Opera web browser, 9
single-level vertical navigation, naming, 368 optional JavaScript coding, 521-522
300-302 parents, 377 ordered lists, 138-140, 286
nested lists, 140-141, 286 properties, 368-369, 372-375 organizing
nested tags (HTML), 141 referencing, 368 HTML files
nodes (DOM), 377-378 showing/hiding, 385-387 document roots, 16-18
document node, 379 siblings, 378 index pages, 18-19
methods of, 380 window objects, 368, 489-499 web content, 169-170
properties, 378-379 JavaScript web page headings, 34-35
none values (CSS) built-in objects, 356, 425, websites, 641
border-style properties, 65 430-434, 438-440 Amazon.com, 648-649
display property, 63 child objects, 426 BAWSI.org, 651
non-viewable window areas creating, 426 ESPN.com, 646
(browsers), 316 custom objects, 356 larger websites, 648-651
<noscript> tag (JavaScript), detecting date objects, 438-440 Peet’s Coffee & Tea, 649
non-JavaScript browsers, 521
defining, 427-428 simple websites, 644-648
Notepad, creating HTML files, 27
instance creation, 429-430 single-page websites, 642-643
null values (JavaScript), 401
math objects, 434-438 Outline tool (HTML5), 43
numbers
methods, 355-356, 426-429, outlines, building via lists, 141-142
arithmetic mean, 437 432-433, 439 outset value (CSS border-style
decimal numbers naming, 361 properties), 65
rounding, 434 properties, 355, 426, 432-433 overflow property (CSS) and
truncating, 435 prototypes, 432-433 text flow, 281
numeric arrays (JavaScript), 408, scripting, 427-430 overlapping elements, 278-280
411-413 overusing JavaScript, 504-505
string objects, 402-404, 433
numeric data types
(JavaScript), 400 onClick event handler, 471-474, 478
random numbers, generating, onclick event (JavaScript) and mouse
435-438 actions, 478-484
onDblClick event handler, 472 P
online resources, CSS
browser support, 62 <p> tags, 31-33
reference guide, 57 padding
O browsers and, 287-288
onLoad events, 477
<object> element, embedding onMouseDown event handler, CSS box model, 270
multimedia files, 235-237 472-474 padding property (CSS), 67, 249,
objects onMouseOut event handler, 471 257-261
DOM, 425 onMouseOver event handler, 471 paragraphs, web page creation, 32-33
anchor objects, 372 onMouseUp event handler, 472-474 parameters (JavaScript functions),
onUnload events, 478 354, 420
document objects,
369-372, 375 opening/closing browser windows, parent folders, 171
hiding/showing, 385-387 491-493 parents (DOM), 377
history objects, 372-374 opening tags (HTML), 30 parseFloat() function (JavaScript), 402
678 parseInt() function (JavaScript)

parseInt() function (JavaScript), 402 plug-ins, defining, 231 Q–R

passwords and forms, 617 plus signs (+), JavaScript
Peet’s Coffee & Tea, website statements, 86 QuickTime, web browser support, 233
organization, 649 PNG (Portable Network QuirksMode, debugging code, 520
periods (.), JavaScript objects, 355 Graphics), 209
quiz building example (AJAX),
peripherals pop-up windows, 181, 633-635 596-601
monitors positionable elements. quotes (pull), 48
color and, 192 See layers (DOM)
positioning radio buttons (forms), 623-624
resolution, 207
absolute positioning, 273-277 random content, displaying in HTML
mouses
overlapping elements, 278-280 files via JavaScript, 340-344
events and event handling,
relative positioning, 273-275 random numbers, generating,
471-474, 478-484
435-438
mouse interaction widget <pre> tags (HTML), 126-127
readiness and DOM, 542
(jQuery UI library), 574-575 presentation, JavaScript best
practices, 505 Red Eye Removal, 204
rollover images, 471
pricing web hosting providers, 7 registered trademark symbol, 123
photos, 200
primary navigation, 296 relationship properties (DOM
aligning, 216-220
nodes), 379
background photos, 223-224 programming languages and
strings, 85 relative addresses and web pages,
cropping, 200-202 170-171
Flickr, 212-214 progressive enhancement, 363,
506-507. See also graceful relative positioning, 63, 273-275
Google Images, 212 degradation relative-root addresses and web
height/width, specifying, 216 prompts (dialog boxes), 499 pages, 170
imagemaps, 225-230, 292-296 properties relative-root links and web
links, turning photos into, pages, 171
DOM nodes, 378-379
220-223 reliability, web hosting providers, 6
DOM objects, 368
Red Eye Removal, 204 remote scripting. See AJAX
document objects, 369
republishing, 214 republishing images, 214
history objects, 372
resizing, 203-204 reserved words and JavaScript
location objects, 374-375
responsive images, 216 syntax, 361
JavaScript objects, 355
storing, 213 resizing
prototypes, 432-433
text descriptions, 214-215 browser windows, 493-495
values, 426
user interaction, changing photos images, 203-204
based on, 346-347 Prototype JavaScript library, 532-533
resolution
web pages, placing photos on, pseudoclasses, 182-185
graphics, 199-200
212-214 pt value (CSS height/width
screen, 207
Windows Media Video, linking to, properties), 64
responsive images, 216
232-233 publishing web content
responsive web design, 332-333
Photoshop (Adobe), 198 blog publication, 20
reusing JavaScript code, 514
PHP, 612 local publication, 19-20
ridge value (CSS border-style
AJAX live search forms, 603-604 pull-down pick lists (forms), 624-626
properties), 65
.php file extensions, 27 pull quotes, 48
rollover images, 471
Picasa (Google), 199 purchasing domain names, 7
rounding decimal numbers, 434
Pixlr, 199 px value (CSS height/width
rows (tables), creating, 146
plain text, 27, 34, 122 properties), 64
Ruby on Rails and Prototype
JavaScript library, 533
 scripting 679

S frameworks error handling, 89-91

AngularJS, 538 escaping loops, 458
Safari web browser, 9 Backbone.js, 538 event handlers, 81-82,
sans-serif font (text), 129 Ember, 538 357-360, 465-478, 507-509
saving files Knockout, 538 events, 81
files with HTML tags, 27 MVC pattern, 537 expressions, 399
.js files, 81 graceful degradation, 506 external scripts, 81
scaling images, 203-204 interpreted languages, 78 flow control, 445-462
screen resolution, 207 JavaScript for loops, 453-455
Script.aculo.us JavaScript library, accessibility, 513 for…in loops, 459-462
533-536 adding scripts to web form events, 632-633
<script> tags (JavaScript), 79-81, pages, 86 functions, 80, 354, 361,
84-85 adding to web pages, 79-80 419-424, 428, 435-438
scripting advantages over HTML, 367 Gmail and, 522
AJAX, 537, 589 AJAX, 83, 590, 598-600, history of, 78
ajaxRequest function, 595 604-607 if statements, 445-452
ajaxResponse function, 595 arrays, 408-413 infinite loops, 457-458
back end, 590, 603-604 best practices, 358, 362-363, jQuery library, 531-532,
debugging applications, 503-514 541-554, 606-607
601-606 break statements, 458 jQuery UI library, 557-585
examples of, 591-592 breakpoints, 115-116 .js files, 81
frameworks, 592 capabilities of, 78, 82 JSON, 363-364, 591
front end, 590, 604-605 case statements, 453 libraries (third-party),
JavaScript client, 590 comments, 361-362, 511-512 529-536, 541
jQuery and AJAX-related conditional expressions, logical operators, 447-448
functionality, 606-607 446-449 modifying scripts, 87-89
libraries, 592-601 conditional operators, 446-447 navigating websites, 82
live search forms, 602-606 continue statements, 459 non-JavaScript browsers,
quiz building example, continuing loops, 459 520-525
596-601 cross-browser scripting, 509, objects, 355-356, 361,
requests, 590-594, 603-605 519-520 425-435, 438-440
server-side scripts, 590, data types, 400-402 operators, 399-400
603-605 Date objects, 84 order of script operation,
XML and, 591 debugging via Developer Tools, 359-360
XMLHttpRequest, 592-594 111-117 output, 85
client-side scripting, 338, 349 design patterns, 513 overusing, 504-505
cross-browser scripting development of, 78 parseFloat() function, 402
debugging browsers, 520 do…while loops, 457 parseInt() function, 402
event handlers and JavaScript, documenting code, 511-512 plus signs (+) in
508-509 document.write statements, statements, 86
feature sensing, 509, 519 80, 85 progressive enhancement
Dojo library, 534 strategies, 363
effects (third-party libraries),
534-536 DOM, 367-391, 489-499 Prototype library, 532-533
error handling, 510-511 effects, 83 reading browser information,
515-518
else keyword, 448-452
680 scripting

remote scripting, 83 searches images, 203-204

saving js files, 81 Google searches, 4 tables, 150-153
<script> tags, 79-81, 84-85 live search forms, creating via text
Script.aculo.us library, 533 AJAX, 606 font-size style rule (CSS), 129
simplifying, 427-430 HTML forms, 602 style sheets, 60
statements, 84-85, JavaScript front end, 604-605 skeleton pages. See templates, web
353-357, 361 PHP back end, 603-604 page creation
stepping into code, 115 secondary navigation, 296 solid value (CSS border-style
stepping out of code, 115-116 <section> tags properties), 65
stepping over code, 115-116 HTML, 177 sorting
strings, 402-411, 433 HTML5, 25, 37-41, 44-45 numeric arrays (JavaScript),
switch statements, 452-453 selection lists (forms), 624-626 411-413
syntax, 360-361 selectors (CSS), 68 string arrays (JavaScript), 411
testing scripts, 87 semantic elements (HTML5), 36-38 source code, viewing via Developer
Tools, 110
time display example, 84-91 <article> tags, 25, 39-41, 45-46
source editors, blogs, 20
toLowerCase() method, 405 <aside> tags, 25, 39-41, 47-49
Sources panel (Chrome), debugging
toUpperCase() method, 405 <footer> tags, 25, 39-41, 49-50 JavaScript, 114-117
unobtrusive scripting, 503, <header> tags, 25, 39-44 spacing (whitespace), JavaScript
523-525 <nav> tags, 25, 39-41, 46-47 syntax, 361
usability, 512 recommendations, 39 <span> tags (CSS), 70
using, 80-81 <section> tags, 25, 39-41, 44-45 spanning with tables, 156
validating forms, 82 semicolons (;), JavaScript statements, special characters (symbols),
variables, 84-85, 355, 361, 84, 354 122-124
395-398 server-side scripts, 338 special effects (JavaScript), 83
web standards and browser AJAX requests, 590, 603-605 splitting string arrays (JavaScript),
specificity, 509 HTML5, 349 410-411
while loops, 456-457 servers statements (JavaScript), 353
Yahoo! UI Library, 534 browsers, basic server conditional statements, 356
JSON, 591 interaction, 3-5 for statements, 357
languages, 77 document roots, 14-18 function calls, 354
PHP, 612 FTP client connections, 14 loops, 357
progressive enhancement, space, 6 objects, 355
506-507 uptime, 6 built-in objects, 356
remote scripting. See AJAX web hosting providers, custom objects, 356
reusing code, 514 selecting, 6 DOM objects, 356
server-side scripts, 338 shorthand conditional expressions naming, 361
AJAX requests, 590, 603-605 (JavaScript), 448-449
plus signs (+) in, 86
HTML5, 349 siblings (DOM), 378
semicolons (;), 84
text editors, 87 single-page websites, 642-643
time display example, 84-85
.txt file extension, 87 sizing
variables, 355, 361
unobtrusive scripting, 503, browser windows, 493-495
523-525 naming, 361
cells (tables), 151-153
scrolling lists (forms), 624-626 Stephenson and Prototype JavaScript
elements (CSS box model), library, Sam, 532-533
search engines, 521 270-272
stepping into JavaScript code, 115
 style sheets 681

stepping out of JavaScript code, style sheets line-height property, 67

115-116 align property, 249 padding property, 67
stepping over JavaScript code, box model, 269 text-align property, 66-67
115-116 borders, 270 text-decoration property, 67
streaming multimedia files, 235 content, 270 text-indent property, 66
<strike> tags (HTML), 126 lists and, 286-290 frameworks, 657
strikethrough text, 67 margins, 270 HTML documents, linking to, 61
strings (JavaScript), 85, 401 padding, 270 imagemaps, 292-296
case, converting, 405 sizing elements, 270-272 inline styles, 71-72
length of, calculating, 404-405 browser support for, 62 Inspector, debugging CSS,
string arrays, 409 cascading components, 56 106-107, 110
sorting, 411 clear property and text flow, 281 internal style sheets, 56, 70-72
splitting, 410-411 color, specifying, 195-198 jQuery JavaScript library and, 544
string objects columns, 158-162 layouts
adding methods to, 433 creating, 57-62 elastic layouts, 334
assigning values, 403-404 CSS1, 57 fixed layouts, 316-317
combining values, 403-404 CSS 2, 57 fixed/liquid hybrid layouts,
creating, 402-403 CSS3, 57 321-332
substrings CSS Zen Garden and layouts, 315 liquid layouts, 315, 318-321
finding, 407 debugging via Developer Tools, properties, 63
getting single characters, 98, 106-107, 110 responsive web design,
406-407 definition of, 55-56 332-333
using parts of strings, <div> tags, 56, 70 <link /> tag, 61
405-406 links
DOCTYPE declarations, 272
<strong> tags (HTML), 125-126 linking to HTML
external style sheets, 56-62
strong text. See boldface text documents, 61
float property, 249, 262-266, 281
style attribute and text-align style styling, 181-185
rule, 136-137 formatting properties, 63
lists
style classes (CSS), 68-69 background-color property, 66
horizontal navigation, 307-311
style ID (CSS), 70 border property, 64-65
list-style-image property, 286
style properties (CSS), 68 border-bottom property, 64-65
list-style-position property,
style rules, 56, 60 border-color property, 64-65 286, 290-292
color style rule, 129 border-left property, 64-65 list-style-type property, 286
default values, 136 border-right property, 64-65 navigation lists, 296-311
font weight style rule, 126 border-style property, 64-65 vertical navigation, 296-306
font-family style rule, 129 border-top property, 64-65 margin property, 249-257
font-size style rule, 129 border-width property, 64 mouse actions, events and event
list-style-type style rule, 142-145 color property, 67 handling, 478-484
multiple style properties in, 69 font property, 67 overflow property and
text-align, 136-137 font-family property, 66 text flow, 281
viewing, 62 font-size property, 66 padding property, 249, 257-261
font-style property, 66 positioning
font-weight property, 66 absolute positioning, 273-277
overlapping elements,
278-280
682 style sheets

positioning property, 274 switch statements (JavaScript) <section> tags, 177

relative positioning, 273-275 multiple conditions, using, <span>, CSS, 70
z-index property, 278-280 452-453 HTML, 5, 28
properties, hyphenating, 382 syntax of, 453 <a> tags, 172-175, 222
reference guide online symbols (special characters), attributes, 135, 169
resource, 57 122-124 <b> tags, 122, 125-126
selectors, 68 syntax, JavaScript, 403 </b> tags, 122, 125-126
<span> tags, 70 case-sensitivity, 360 <body> tags, 27, 31-33
style classes, 68-69 functions, 361 </body> tags, 33
style ID, 70 objects, 361 <br /> tags, 32-33, 128
style properties, 68 reserved words, 361 closing slashes, 33
style rules, 56, 60 spacing (whitespace), 361 closing tags, 30
color style rule, 129 variables, 361 containers, 376
font-family style rule, 129 <div> tags, 222
font-size style rule, 129 <em> tags, 125-126
font weight style rule, 126 </em> tags, 125-126
list-style-type style rule, 144 T empty tags, 30
multiple style properties in, 69 event handlers, 81
viewing, 62 <table> tags (HTML), 146
<font> tags, 122, 128
tags, 60 tables
</font> tags, 122
elements and, 56 aligning within, 153-156
<head> tags, 27, 31-33, 80
selectors, 68 borders
</head> tags, 33
text creating, 148-149
heading tags, 34-36
formatting color, 56 spacing, 156
horizontal rule tag, 33
italic text, 67 specifying color via CSS,
195-198 <hr /> tags, 33
line-through text, 67 <html> tags, 27, 31-33
cells
sizing, 60 </html> tags, 33
creating, 146
strikethrough text, 67 <i> tags, 122, 125
sizing, 151-153
text-align property, 262 </i> tags, 122, 125
color in, 155-156, 195-198
underline text, 67 <img> tags, 212-214
creating, 146-150
validating, 72 lang attribute, 31
columns, 158-162
vertical-align property, 262 line breaks, 32-33
headings, creating, 146
z-index property, 278-280 naming files with, 27
images in, 156
<sub> tags (HTML), 126 nested tags, 141
page layout via, 157
subscript text, 126 older HTML tags, formatting
rows, creating, 146
substrings and, 122
sizing, 150-153
finding, 407 opening tags, 30
spanning within, 156
parts of strings, using, 405-406 <p> tags, 31-33
tags
single characters, getting, paragraphs, 32-33
406-407 CSS, 60
<pre> tags, 126-127
Subversion website version elements and, 56
</pre> tags, 126-127
control, 656 <link /> tags, 61
pseudoclasses, 182-185
<sup> tags (HTML), 126 selectors, 68
saving files with, 27
superscript text, 126 <div> tags, 70, 478-484
<strike> tags, 126
 third-party JavaScript libraries 683

<strong> tags, 125-126 color forms

</strong> tags, 125-126 color property (CSS), 67 accepting text input in,
_{tags, 126 CSS and, 195-198 617-618} tags, 126 CSS columns, 158-162 passwords, 617
^{tags, 126 documents, writing text text fields, 627-628} tags, 126 within, 371 graphics, 214-215
<table> tags, 146 editors, 87 HTML, whitespace, 32
<tbody> tags, 150 flowing text, 280-281 indenting, web page creation, 34
<td> tags, 146-149 fonts italic (emphasized) text, 67
<tfoot> tags, 150 Arial font, 129 leading, line height property
<th> tags, 146, 149 color style rule (CSS), 129 (CSS), 67
<thread> tags, 150 font property (CSS), 67 line breaks, web page creation,
font-family property (CSS), 66 32-33
<title> tags, 27, 31-33, 36
font-family style rule line-through text, 67
</title> tag, 33
(CSS), 129 lists
<tr> tags, 146-147
font-size property (CSS), 66 definition lists, 138-140
<u> tags, 126
font-size style rule (CSS), 129 ordered lists, 138-140
HTML5
font-style property (CSS), 66 unordered lists, 138-140
<article> tags, 37
font-weight property (CSS), 66 paragraphs, web page creation,
<aside> tags, 37 32-33
<footer> tags, 37 font weight style rule
(CSS), 126 plain text, 27, 34, 122
<header> tags, 36 sizing, 60, 129
sans-serif font, 129
<nav> tags, 37 strikethrough text, 67
Times Roman font, 129
<section> tags, 37 style sheets
formatting
semantic elements, 36-38 formatting color, 56
aligning text, 135
JavaScript sizing, 60
boldface text, 125-126
<script> tags, 79-81, 84-85 text-align property (CSS), 67
bulleted lists, 142
<tbody> tags (HTML), 150 text-align style rule, 136-137
color, 56
<td> tags (HTML), 146-149 text-decoration property (CSS), 67
customizing fonts in HTML,
templates, web page creation, 31 128-132 text-indent property (CSS), 66
testing definition lists, 138-140, 286 underline text, 67
AJAX quiz building example, emphasized text, 126 web browsers, adjusting font size
600-601 settings, 21
foreign languages, 122-124
JavaScript scripts, 87 web pages
italic text, 125-126
web content, 20-21 adding to web pages, 389-391
multitiered lists, 144-145
websites, multiple web browsers, modifying text in, 387-388
8-9, 26 nested lists, 140-141, 286
ordered lists, 138-140, 286 <tfoot> tags (HTML), 150
text
outlines, 141-142 <th> tags (HTML), 146, 149
aligning
resumes, 130-132 third-party JavaScript libraries,
attributes, 135 529-531
block-level elements, 136-137 special characters, 122-124
subscript text, 126 Dojo, 534
tables, 153-156 effects, 534-536
text-align style rule, 136-137 superscript text, 126
unordered lists, 138-140, 286 jQuery, 531-532
alternate text, 214-215 $(document).ready event
ASCII formatted text, 27, 34, 122 web fonts, 132-134
handler, 542-543
web page creation, 34
684 third-party JavaScript libraries

AJAX-related functionality, transparent images, 209 localtime variable, 85

606-607 triadic color schemes, 191 naming, 361, 395-396
animating elements, 548-553 truncating decimal numbers, 435 scope of, 396
command chaining, 549 .txt file extensions, 87 time display example, 84-85
CSS content, 544 UTC variable, 85
DOM content, 544 values, assigning to variables,
downloading, 541 397-398
event handling, 553-554 U VBScript (Microsoft), client-side
hiding/showing elements, scripting, 338
547-548 <u> tags (HTML), 126 version control and websites,
HTML content, 545-553 underline text and style sheets, 67 654-656
storing, 541 unobtrusive scripting, 503, 522-525 vertical image alignment, 218-220
jQuery UI, 557-585 unordered lists, 138-140, 286 vertical navigation, 296-299
Prototype, 532-533 unregistered trademark symbol, 123 multilevel vertical navigation,
Script.aculo.us, 533-536 302-306
uptime and servers, 6
scripts, building, 535-536 single-level vertical navigation,
URL (Uniform Resource Locators), 300-302
Yahoo! UI Library, 534 opening, 593
video
<thread> tags (HTML), 150 usability, JavaScript best
practices, 512 HTML5 video playback, 238-241
tiled backgrounds, 209-211
USB (Universal Serial Bus) drivers and <video> element, embedding
time, displaying (JavaScript example) multimedia files, 240-241
creating output, 85 web browser distribution, 20
user input in forms viewing
Date objects, 84 CSS style rules, 62
error handling, 89-91 accepting input, 617-618
passwords, 617 HTML files, 29
scripts web pages, 29
adding to web pages, 86 UTC (Universal Time Coordinated)
JavaScript time displaying visibility effects (jQuery UI library),
modifying, 87-89 570-573
example, 84
<script> tags, 84-85 visual editors and blogs, 20
UTC variable (JavaScript), 85
testing, 87
statements, 84-85
variables, 84-85
timeouts (browser windows), 495-497
V W
Times Roman font (text), 129
time zones and date objects validating W3C color standards, 192
(JavaScript), 440 W3C CSS Validator, 72
email addresses, 629
timing loading of web content, 21 W3C event model, 508
forms
<title> tags, 27, 31-33, 36 W3C Validation Service, 96-97, 105
HTML5, 629-630
toLowerCase() method web browsers
(JavaScript), 405 JavaScript, 82
style sheets, 72 Chrome, 9
tooltips, 215 CSS support, 62
toUpperCase() method web content, 95-96, 105
variables (JavaScript), 355 Developer Tools
(JavaScript), 405
declaring, 396 CSS Inspector, 106-107, 110
<tr> tags (HTML), 146-147
global variables, 396 debugging CSS, 98,
trademark (registered/unregistered) 106-107, 110
symbols, 123 incrementing/decrementing, 398
transferring HTML files, 10-14, 29 local variables, 396
 web content 685

debugging HTML, 98-100, hexadecimal color codes, labeling form data, 618-619
103-105 192-195 naming form data, 618
debugging JavaScript, 111-117 names and case passwords, 617
HTML Inspector, 100, 103-105 sensitivity, 192 pull-down pick lists, 624-626
viewing source code, 110 using, 190-191 radio buttons, 623-624
development of, 2 W3C color standards, 192 scrolling lists, 624-626
distributing, 20 comparing, 26 selection lists, 624-626
Firefox, 9 creating, 2-3 sending, 613
graceful degradation, 506 ASCII text, 27, 34 submitting form data, 631-632
helper applications, defining, 231 comparing web content HTML text fields, 627-628
history of, 2 codes, 36
text input, 617-618
HTML development, 2 formatting text, 34
user input, 617-618
images, auto loading, 21 HTML tags, 27-33
graphics
Internet Explorer, 9 indenting text, 34
adjusting color, 204
lists, displaying, 140 line breaks, 32-33
Adobe Photoshop, 198
Opera, 9 organizing content via
headings, 34-35 aligning graphics, 216-220
plug-ins, defining, 231 animated graphics, 211-212
overview of, 29
popularity of, 26 background graphics, 223-224
paragraphs, 32-33
progressive enhancement, banners, 206-208
506-507 plain, text, 27, 34
templates, 31 buttons, 206-208
QuickTime support, 233 choosing software, 198
Safari, 9 CSS box model, 269
borders, 270 clip art, 199
servers, basic browser server compression, 199
interaction, 3-5 content, 270
lists and, 286-290 copyrights and, 199
text, adjusting font size
settings, 21 margins, 270 Creative Commons
licenses, 199
websites padding, 270
cropping, 200-202
comparing, 26 sizing elements, 270-272
file sizes, 199
testing, 8-9, 26 delivering, 3-5
Flickr, 212-214
web content directories, 169-170
.GIF, 208-212
absolute addresses, 170-171 floating elements, 249
GIMP, 198, 201-208
aligning float property (CSS), 249,
262-266, 281 Google Images, 212
align property (CSS), 249
folders, 169-171 Google Picasa, 199
text-align property (CSS), 262
forms, 611 grabbing from web pages, 199
vertical-align property
(CSS), 262 accessing elements via graphics, placing on web
JavaScript, 633 pages, 212-214
clear property (CSS) and
text flow, 281 checkboxes, 621-623 height, 216
color creating, 612-617 imagemaps, 225-230
140 cross-browser color displaying data in pop-up .JPEG, 205, 209-211
names, 192 windows, 633-635 Pixlr, 199
best practices, 190-191 grouping elements, 619-620 .PNG, 209
Colorblind Web Page Filter hidden data, 620 Red Eye Removal, 204
tool, 198 JavaScript events, 632 republishing, 214
686 web content

resizing, 203-204 overflow property (CSS) and text sizing, 150-153

resolution, 199-200 flow, 281 spacing borders, 156
text descriptions, 214-215 padding spanning within, 156
tiled backgrounds, 209-211 browsers, 287-288 testing, 20-21
transparent graphics, 209 padding property (CSS), 249, text
turning graphics into links, 257-261 adding to web pages, 389-391
220-223 progressive enhancement, flowing, 280-281
uses of, 200 506-507
modifying, 387-388
width, 216 publishing, 19-20
text, formatting, 122
links random content, displaying via
JavaScript, 340-344 aligning text, 135
absolute links, 170 boldface text, 125-126
relative addresses, 170-171
anchor tags, 172-175 customizing fonts in HTML,
relative-root addresses, 170
email addresses, 179-180 128-132
responsive web design, 332-333
images as, 181 definition lists, 138, 286
style sheets
linking between, 175-178 emphasized text, 126
creating, 57-62
linking to external web content, foreign languages, 122-124
178-179 definition of, 55
italic (emphasized) text,
opening in new browser external style sheets, 56-62 125-126
windows, 181 formatting properties, 63-67 multitiered lists, 144
relative-root links, 171 formatting text color, 56 nested lists, 140-141, 286
styling via CSS, 181-185 inline styles, 71-72 older HTML tags, 122
lists internal style sheets, 56, ordered lists, 138, 286
CSS box model and, 286-290 70-72
outlines, 141
horizontal navigation, 307-311 layout properties, 63
resumes, 130-132
navigation lists, 296-311 linking to HTML
documents, 61 special characters, 122-124
placing list item indicators, subscript text, 126
290-292 selectors, 68
sizing text, 60 superscript text, 126
vertical navigation, 296-306 unordered lists, 138, 286
loading, timing loads, 21 style classes, 68-69
style ID, 70 web fonts, 132-134
managing transferring, FPT, 29
coding clarity, 653-654 style properties, 68
style rules, 56, 60-62, 69 validating, 95-96, 105
comments, 652-653 viewing, 5, 29
documenting code, 652-653 validating, 72
tables web hosting providers, selecting,
indenting code, 653-654 6-8, 26
maintainable code, 652-654 aligning within, 153-156
website architectures, 171
version control, 654-656 borders, 148-149
web design, progressive
margins cells, 146, 151-153 enhancement, 506-507
browsers, 287-288 color in, 155-156 web fonts, 132-134
margin property (CSS), creating, 146-150 web hosting providers
249-257 CSS columns, 158-162 A Small Orange, 7
organizing, 169-170, 641-642 headings, 146 bandwidth, 7
larger websites, 648-651 images in, 156 control panels, 7-8
simple websites, 644-648 page layout via, 157 customer service, 6
single-page websites, 642-643 rows, 146 DailyRazor, 7
 web pages 687

domain names, purchasing, 7 lists and, 286-290 copyrights and, 199

LunarPages, 7 margins, 270 Creative Commons
pricing, 7 padding, 270 licenses, 199
reliability, 6 sizing elements, 270-272 cropping, 200-202
selecting, 6-8, 26 directories, 169-170 file sizes, 199
server space, 6 elements, defining, 56 Flickr, 212-214
web pages. See also web content floating elements, 249 .GIF, 208-212
absolute addresses, 170-171 float property (CSS), 249, GIMP, 198, 201-208
aligning (CSS) 262-266, 281 Google Images, 212
align property, 249 folders, 169-171 Google Picasa, 199
text-align property, 262 forms, 611 grabbing from web pages, 199
vertical-align property, 262 accessing elements via height, 216
clear property (CSS) and JavaScript, 633 imagemaps, 225-230
text flow, 281 checkboxes, 621-623 .JPEG, 205, 209-211
color creating, 612-616 links, turning graphics into,
140 cross-browser color displaying data in pop-up 220-223
names, 192 windows, 633-635 Pixlr, 199
best practices, 190-191 grouping elements, 619-620 placing on web pages,
Colorblind Web Page Filter hidden data, 620 212-214
tool, 198 JavaScript events, 632 .PNG, 209
hexadecimal color codes, labeling form data, 618-619 Red Eye Removal, 204
192-195 naming form data, 618 republishing, 214
names and case passwords, 617 resizing, 203-204
sensitivity, 192 pull-down pick lists, 624-626 resolution, 199-200
using, 190-191 radio buttons, 623-624 text descriptions, 214-215
W3C color standards, 192 scrolling lists, 624-626 tiled backgrounds, 209-211
conceptualizing, 38-43 selection lists, 624-626 transparent graphics, 209
creating sending, 613 uses of, 200
ASCII text, 27, 34 submitting form data, 631-632 width, 216
comparing web page HTML text fields, 627-628 JavaScript, adding to web pages,
codes, 36 79-80
text input, 617-618
formatting text, 34 links
user input, 617-618
HTML tags, 27-33 absolute links, 170
graphics
indenting text, 34 anchor tags, 172-175
adjusting color, 204
line breaks, 32-33 email addresses, 179-180
Adobe Photoshop, 198
organizing content via images as, 181
headings, 34-35 aligning graphics, 216-220
animated graphics, 211-212 linking between web pages,
overview of, 29 175-178
paragraphs, 32-33 background graphics, 223-224
banners, 206-208 linking to external web pages,
plain text, 27, 34 178-179
templates, 31 buttons, 206-208
opening in new browser
CSS box model, 269 choosing software, 198 windows, 181
borders, 270 clip art, 199 relative-root links, 171
content, 270 compression, 199 styling via CSS, 181-185
688 web pages

lists random content, displaying via text, formatting, 122

CSS box model and, 286-290 JavaScript, 340-344 aligning text, 135
horizontal navigation, 307-311 relative addresses, 170-171 boldface text, 125-126
navigation lists, 296-311 relative-root addresses, 170 customizing fonts in HTML,
placing list item indicators, responsive web design, 332-333 128-132
290-292 scripts, adding to web pages, 86 definition lists, 138, 286
vertical navigation, 296-306 style sheets emphasized text, 126
loading, timing loads, 21 creating, 57-62 foreign languages, 122-124
managing definition of, 55 italic text, 125-126
coding clarity, 653-654 external style sheets, 56-62 multitiered lists, 144
comments, 652-653 formatting properties, 63-67 nested lists, 140-141, 286
documenting code, 652-653 formatting text color, 56 older HTML tags, 122
indenting code, 653-654 inline styles, 71-72 ordered lists, 138, 286
maintainable code, 652-654 internal style sheets, 56, outlines, 141
version control, 654-656 70-72 resumes, 130-132
margins layout properties, 63 special characters, 122-124
browsers, 287-288 linking to HTML subscript text, 126
margin property (CSS), documents, 61 superscript text, 126
249-257 selectors, 68 unordered lists, 138, 286
multimedia, 242 sizing text, 60 web fonts, 132-134
<audio> element, 238-239 style classes, 68-69 transferring FTP, 29
audio/video playback via style ID, 70 validating, 95-96, 105
HTML5, 238-241 style properties, 68 viewing, 29
creating, 232 style rules, 56, 60-62, 69 website architectures, 171
defining, 189 validating, 72 web scripting. See scripting
<embed /> element, 237 tables web servers
embedding files, 235-238 aligning within, 153-156 document roots, 14-18
linking to files, 231-233 borders, 148-149 FTP client connections, 14
MIME types, 236 cells, 146, 151-153 websites
<object> element, 235-237 color in, 155-156 align property (CSS), 249
QuickTime support, 233 creating, 146-150 text-align property (CSS), 262
streaming files, 235 CSS columns, 158-162 vertical-align property
<video> element, 240-241 headings, 146 (CSS), 262
organizing, 169-170, 641 images in, 156 architectures, creating, 171
larger websites, 648-651 page layout via, 157 bad website examples, 193
simple websites, 644-648 rows, 146 clear property (CSS) and
single-page websites, 642-643 sizing, 150-153 text flow, 281
overflow property (CSS) and text spacing borders, 156 color
flow, 281 spanning within, 156 140 cross-browser color
padding text names, 192
browsers and, 287-288 adding to web pages, 389-391 best practices, 190-191
padding property (CSS), 249, flowing, 280-281 Colorblind Web Page Filter
257-261 modifying, 387-388 tool, 198
progressive enhancement,
506-507
 websites 689

hexadecimal color codes, sending, 613 uses of, 200

192-195 submitting form data, 631-632 width, 216
names and case text fields, 627-628 links
sensitivity, 192 text input, 617-618 absolute links, 170
using, 190-191 user input, 617-618 anchor tags, 172-175
W3C color standards, 192 graphics email addresses, 179-180
comparing, 26 adjusting color, 204 images as, 181
connecting to, Classic FTP client, Adobe Photoshop, 198 linking between web pages,
12-13 175-178
aligning graphics, 216-220
CSS box model, 269 linking to external web pages,
animated graphics, 211-212
borders, 270 178-179
background graphics, 223-224
content, 270 opening in new browser
banners, 206-208
lists and, 286-290 windows, 181
buttons, 206-208
margins, 270 relative-root links, 171
choosing software, 198
padding, 270 styling via CSS, 181-185
clip art, 199
sizing elements, 270-272 lists
compression, 199
dynamic websites, 337 CSS box model, 286-290
copyrights, 199
changing images based on horizontal navigation, 307-311
user interaction, 346-347 Creative Commons
licenses, 199 navigation lists, 296-311
client-side scripting, 338 placing list item indicators,
cropping, 200-202
DOM, 345-346 290-292
file sizes, 199
JavaScript, 338-347 vertical navigation, 296-306
Flickr, 212-214
server-side scripting, 338 managing
.GIF, 208-212
VBScript, 338 coding clarity, 653-654
GIMP, 198, 201-208
floating elements, 249 comments, 652-653
Google Images, 212
float property (CSS), 249, documenting code, 652-653
262-266, 281 Google Picasa, 199
indenting code, 653-654
forms, 611-612 grabbing from web pages, 199
maintainable code, 652-654
accessing elements via height, 216
version control, 654-656
JavaScript, 633 imagemaps, 225-230
margins
checkboxes, 621-623 .JPEG, 205, 209-211
browsers, 287-288
creating, 612-617 Pixlr, 199
margin property (CSS),
displaying data in pop-up placing on web pages, 249-257
windows, 633-635 212-214
navigating, 82
grouping elements, 619-620 .PNG, 209
organizing, 641-642
hidden data, 620 Red Eye Removal, 204
Amazon.com, 648-649
JavaScript events, 632 republishing, 214
BAWSI.org, 651
labeling form data, 618-619 resizing, 203-204
ESPN.com, 646
naming form data, 618 resolution, 199-200
larger websites, 648-651
passwords, 617 specifying height/width, 216
Peet’s Coffee & Tea, 649
pull-down pick lists, 624-626 text descriptions, 214-215
simple websites, 644-648
radio buttons, 623-624 tiled backgrounds, 209-211
single-page websites, 642-643
scrolling lists, 624-626 transparent graphics, 209
overflow property (CSS) and text
selection lists, 624-626 turning graphics into links, flow, 281
220-223
690 websites

padding widgets (jQuery UI library),

573-574, 585
X–Z
browsers, 287-288
padding property (CSS), 249, draggable() widget, 575-578, XHTML (Extensible HyperText Markup
257-261 581-584 Language), 3, 31, 61
progressive enhancement, droppable() widget, 575, 580-584 XML (Extensible Markup Language)
506-507 mouse interaction widget, and AJAX, 537, 591, 598
single-page websites, 642-643 574-575 XMLHttpRequest, 592-594
style sheets width
CSS box model, adjusting in, Yahoo! Developer Network, JavaScript
creating, 57-62
270-272 design patterns, 513
definition of, 55
fixed/liquid hybrid layouts, setting Yahoo! UI Library, 509, 534
external style sheets, 56-62
minimum width in, 325-326
formatting properties, 63-67 z-index property (CSS), 278-280
images, specifying width in, 216
formatting text color, 56 Zen Garden (CSS), 315
width property (CSS), 63
inline styles, 71-72
window objects (DOM), 368, 489
internal style sheets, 56,
70-72 browser windows
layout properties, 63 creating, 490-491
linking to HTML moving, 493-495
documents, 61 opening/closing, 491-493
selectors, 68 resizing, 493-495
sizing text, 60 timeouts, 495-497
style classes, 68-69 dialog boxes, displaying, 497-499
style IDs, 70 properties of, 489-490
style properties, 68 windows
style rules, 56, 60-62, 69 browser windows
validating, 72 creating, 490-491
testing, 8-9, 26 moving, 493-495
text non-viewable window
adding to web pages, 389-391 areas, 316
flowing text, 280-281 opening/closing, 491-493
modifying, 387-388 resizing, 493-495
web content timeouts, 495-497
absolute addresses, 170-171 pop-up windows, displaying form
data in, 633-635
directories, 169-170
Windows Media Video, linking images
folders, 169-171 to, 232-233
organizing, 169-170 Word, creating HTML files, 27
relative addresses, 170-171 WordPress Theme Gallery and
relative-root addresses, 170 layouts, 315
web sockets, 349 WWW (World Wide Web),
while loops (JavaScript), 456-457 development of, 2
whitespace (spacing) WYSIWYG (what-you-see-is-what-you-
HTML, 32 get) editors, creating HTML files, 27
JavaScript syntax, 361