JAVASCRIPT This page intentionally left blank FIFTH EDITION JAVASCRIPT DON GOSSELIN Australia • Brazil • Japan • Korea • Mexico • Singapore • Spain • United Kingdom • United States JavaScript, Fifth Edition Don Gosselin Marie Lee: Executive Editor Acquisitions Editor: Amy Jollymore Senior Product Manager: Alyssa Pratt Development Editor: Ann Shaffer Editorial Assistant: Zina Kresin Senior Content Project Manager: Jill Braiewa Art Director: Marissa Falco Quality Assurance Testers: John Freitas, Serge Palladino, Danielle Shaw Text Designer: Shawn Girsberger © 2011 Course Technology, Cengage Learning ALL RIGHTS RESERVED. No part of this work covered by the copyright herein may be reproduced, transmitted, stored or used in any form or by any means graphic, electronic, or mechanical, including but not limited to photocopying, recording, scanning, digitizing, taping, Web distribution, information networks, or information storage and retrieval systems, except as permitted under Section 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the publisher. For product information and technology assistance, contact us at Cengage Learning Customer & Sales Support, 1-800-354-9706 For permission to use material from this text or product, submit all requests online at cengage.com/permissions Further permissions questions can be emailed to permissionrequest@cengage.com Cover Image: © CSA Images Print Buyer: Julio Esperas Library of Congress Control Number: 2009942878 Copyeditor: Jeri Freedman, Foxxe Editorial Services ISBN-13: 978-0-538-74887-2 ISBN-10: 0-538-74887-7 Proofreader: Vicki Zimmer Course Technology 20 Channel Center Street Boston, MA 02210 USA Indexer: Rich Carlson Compositor: Integra Software Services Some of the product names and company names used in this book have been used for identification purposes only and may be trademarks or registered trademarks of their respective manufacturers and sellers. Any fictional data related to persons or companies or URLs used throughout this book is intended for instructional purposes only. At the time this book was printed, any such data was fictional and not belonging to any real persons or companies. Course Technology, a part of Cengage Learning, reserves the right to revise this publication and make changes from time to time in its content without notice. The programs in this book are for instructional purposes only. They have been tested with care, but are not guaranteed for any particular intent beyond educational purposes. The author and the publisher do not offer any warranties or representations, nor do they accept any liabilities with respect to the programs. Cengage Learning is a leading provider of customized learning solutions with office locations around the globe, including Singapore, the United Kingdom, Australia, Mexico, Brazil, and Japan. Locate your local office at: www.cengage.com/global Cengage Learning products are represented in Canada by Nelson Education, Ltd. To learn more about Course Technology, visit www.cengage.com/coursetechnology Purchase any of our products at your local college store or at our preferred online store: www.CengageBrain.com Printed in the United States of America 1 2 3 4 5 6 7 16 15 14 13 12 11 10  I dedicate this book to my late grandparents, John and Edith Howe, for teaching me how to laugh. Brief Contents vi Pref ace . . . . . . . . . . . . . . . . xvii CHAPT ER 1 I nt ro duct i o n t o J av aScri pt CHAPT ER 2 Wo r ki ng w i t h Functi ons, Data Ty pes, and Oper at o rs . . . . . . . . . . . . . . . . 72 CHAPT ER 3 B ui ldi ng A rr ay s and Control Structures . . . 135 CHAPT ER 4 M ani pul at in g t he Browser Obj ect Model . . . 190 CHAPT ER 5 Val idat i ng F orm Data wi th Jav aScri pt . . . . 245 CHAPT ER 6 U si ng Obj ect - Ori ented Jav aScri pt . . . . . 311 CHAPT ER 7 M ani pul at in g Dat a i n Stri ngs and Array s . . 373 CHAPT ER 8 Debu g g in g and E rror Handl i ng. . . . . . . 440 CHAPT ER 9 M anag i ng S tat e I nformati on and Securi ty . . 510 CHAPT ER 10 I nt ro duct i o n t o t he Document Obj ect M o del (DOM) . . . . . . . . . . . . . . 574 CHAPT ER 11 Creat in g Dynam i c HTML (DHTML) CHAPT ER 12 U pdat in g Web P ages wi th AJAX . . . . . . 679 APPEN DIX A Bu il din g a Web Dev el opment Env i ronment . . 750 APPEN DIX B I nt ro duct i o n t o P HP . . . . . . . . . . . 772 APPEN DIX C Wo rk in g w it h Wel l - Formed Web Pages APPEN DIX D J av aScr ipt R ef erence APPEN DIX E So l ut i o ns t o Sho r t Qui z z es . . . . . . . . 830 I ndex . . . . . . . . . 1 . . . . . 624 . . . 798 . . . . . . . . . . 809 . . . . . . . . . . . . . . . . . 885 Contents vii P ref ace CHAP TER 1 . . . . . . . . . . . . . . . . I nt ro duct i on t o Jav aScri pt xvii . . . . . . . . . Introduction to the World Wide Web . . . . . . . . . . Understanding Web Browsers . . . . . . . . . . . . Creating Web Pages . . . . . . . . . . . . . . . . Basic HTML Syntax. . . . . . . . . . . . . . . . . Creating an HTML Document . . . . . . . . . . . . Working with XHTML and Well-Formed Web Pages . . . Introduction to Web Development . . . . . . . . . . . Understanding Client/Server Architecture . . . . . . JavaScript and Client-Side Scripting . . . . . . . . . Understanding Server-Side Scripting . . . . . . . . . Should You Use Client-Side or Server-Side Scripting? . Adding JavaScript to Your Web Pages . . . . . . . . . Using the Element. . . . . . . . . . . . Understanding JavaScript Objects . . . . . . . . . . Using the write() and writeln() Methods . . . . Case Sensitivity in JavaScript . . . . . . . . . . . . Adding Comments to a JavaScript Program. . . . . . Writing Basic JavaScript Code . . . . . . . . . . . . Using Variables . . . . . . . . . . . . . . . . . . Assigning Variable Names . . . . . . . . . . . . . Building Expressions . . . . . . . . . . . . . . . . Understanding Events . . . . . . . . . . . . . . . Structuring JavaScript Code . . . . . . . . . . . . . Including a Element for Each Code Section Placing JavaScript in the Document Head or Document Body . . . . . . . . . . . . . . . . Creating a JavaScript Source File . . . . . . . . . . Validating Web Pages . . . . . . . . . . . . . . . Writing Valid JavaScript Code . . . . . . . . . . . . 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 . 4 . 5 . 5 . 9 . 9 . 14 . 15 . 17 . 19 . 20 . 22 . 22 . 23 . 24 . 28 . 28 . 30 . 30 . 30 . 35 . 35 . 41 . 41 . . . . . . . . . 42 . 43 . 45 . 46 CONTENTS Summing Up . . . . . Comprehension Check . Reinforcement Exercises Discovery Projects . . . viii CHAPTER 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 . 52 . 56 . 68 Wo r ki ng w i t h Functi ons, Data Ty pes, an d Operat o rs . . . . . . . . . . . . . . 72 Working with Functions . . . . . . . . . Defining Functions . . . . . . . . . . Calling Functions. . . . . . . . . . . Understanding Variable Scope. . . . . Using Built-in JavaScript Functions . . . Working with Data Types . . . . . . . . Understanding Numeric Data Types . . Using Boolean Values . . . . . . . . Working with Strings . . . . . . . . . Using Operators to Build Expressions . . Arithmetic Operators . . . . . . . . . Assignment Operators . . . . . . . . Comparison and Conditional Operators. Logical Operators . . . . . . . . . . Special Operators . . . . . . . . . . Understanding Operator Precedence . . Summing Up . . . . . . . . . . . . . Comprehension Check . . . . . . . . . Reinforcement Exercises . . . . . . . . Discovery Projects . . . . . . . . . . . CHAPTER 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 . 73 . 76 . 79 . 81 . 83 . 85 . 88 . 89 . 95 . 97 105 107 111 113 114 117 118 121 132 B ui ldi ng A rr ay s and Control Structures . . . 135 Storing Data in Arrays . . . . . . . . . . Declaring and Initializing Arrays . . . . . Accessing Element Information . . . . . Modifying Elements . . . . . . . . . . Determining the Number of Elements in an Making Decisions . . . . . . . . . . . . if Statements . . . . . . . . . . . . if . . . else Statements . . . . . . . Nested if and if . . . else Statements switch Statements . . . . . . . . . . Repeating Code . . . . . . . . . . . . . while Statements. . . . . . . . . . . do . . . while Statements . . . . . . . . . . . . . . . . . . . Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 136 138 139 139 140 140 146 149 154 158 158 165 for Statements . . . . . . . Using CONTINUE Statements to Summing Up . . . . . . . . . Comprehension Check . . . . . Reinforcement Exercises . . . . Discovery Projects . . . . . . . CHAP TER 4 . . . . . . . . . Restart Execution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 171 173 174 179 187 M ani pul at ing t he Browser Obj ect Model . . . 190 Understanding the Browser Object Model . . . . . . . . The Document Object . . . . . . . . . . . . . . . . Referencing JavaScript Objects . . . . . . . . . . . . Manipulating the Browser with the Window Object . . . . Understanding Windows and Events . . . . . . . . . . Referring to Frames and Windows . . . . . . . . . . . Opening and Closing Windows . . . . . . . . . . . . . Working with Timeouts and Intervals . . . . . . . . . . Working with the History, Location, and Navigator Objects . . . . . . . . . . . . . . . . . . . . . . . The History Object. . . . . . . . . . . . . . . . . The Location Object . . . . . . . . . . . . . . . . The Navigator Object . . . . . . . . . . . . . . . The Screen Object . . . . . . . . . . . . . . . . . Summing Up . . . . . . . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . . . . . . . CHAP TER 5 . . . . . . . . . . . . . . 191 192 193 197 199 206 206 217 . . . . . . . . . 220 220 222 224 225 228 229 233 242 Val idat i ng Fo rm Data wi th Jav aScri pt . . . . 245 Understanding Forms . . . . . . . . Understanding the Element . Working with Form Controls . . . . . Using JavaScript with Forms . . . . Working with Input Fields . . . . . . . Input Field Objects . . . . . . . . . Text Boxes . . . . . . . . . . . . Password Boxes . . . . . . . . . . Push Buttons . . . . . . . . . . . Radio Buttons . . . . . . . . . . . Check Boxes . . . . . . . . . . . Creating Selection Lists . . . . . . . Menu Options . . . . . . . . . . . The Select and Option Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 249 251 252 255 257 259 264 266 268 272 276 277 280 ix CONTENTS Adding Options to a Selection List . . . Removing Options from a Selection List Changing Options in a Selection List . . Validating Submitted Data . . . . . . . Validating Text and Password Boxes . . Validating Radio Buttons . . . . . . . Validating Check Boxes . . . . . . . . Validating Selection Lists . . . . . . . Summing Up . . . . . . . . . . . . . Comprehension Check . . . . . . . . . Reinforcement Exercises . . . . . . . . Discovery Projects . . . . . . . . . . . x CHAPTER 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282 285 286 290 292 294 296 297 298 299 302 308 U si ng Obj ect - Ori ented Jav aScri pt . . . . . 311 Introduction to Object-Oriented Programming . . . . . Reusing Software Objects. . . . . . . . . . . . . What Is Encapsulation? . . . . . . . . . . . . . . Understanding Classes . . . . . . . . . . . . . . Using Built-In JavaScript Classes . . . . . . . . . Using the Date, Number, and Math Classes . . . . Manipulating the Date and Time with the Date Class Manipulating Numbers with the Number Class . . . Performing Math Functions with the Math Class . . Defining Custom JavaScript Objects . . . . . . . . . Declaring Basic Custom Objects. . . . . . . . . . Defining Constructor Functions . . . . . . . . . . Working with Object Properties . . . . . . . . . . Creating Methods . . . . . . . . . . . . . . . . Using the prototype Property . . . . . . . . . . Summing Up . . . . . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . . . . . CHAPTER 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 312 314 316 317 319 319 332 337 340 341 344 345 353 357 360 361 364 371 M ani pul at in g Dat a i n Stri ngs and Array s . . 373 Manipulating Strings . . . . . . . . . . . . . . . Formatting Strings . . . . . . . . . . . . . . . Counting Characters in a String . . . . . . . . . Finding and Extracting Characters and Substrings Replacing Characters and Substrings . . . . . . Combining Characters and Substrings . . . . . . Comparing Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 376 380 381 386 386 387 Working with Regular Expressions . . . . . . Defining Regular Expressions in JavaScript . Using Regular Expression Methods . . . . Writing Regular Expression Patterns . . . . Setting Regular Expression Properties . . . Manipulating Arrays . . . . . . . . . . . . Finding and Extracting Elements and Values Manipulating Elements . . . . . . . . . . Sorting and Combining Arrays . . . . . . . Converting Between Strings and Arrays . . . Summing Up . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . CHAP TER 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 391 392 393 402 404 407 409 414 417 422 423 426 437 Debu g g in g and Error Handl i ng. . . . . . . 440 Introduction to Debugging . . . . . . . . . . . . . Understanding Syntax Errors . . . . . . . . . . . Handling Run-Time Errors . . . . . . . . . . . . . Identifying Logic Errors . . . . . . . . . . . . . . Interpreting Error Messages . . . . . . . . . . . Using Basic Debugging Techniques . . . . . . . . . Writing Good Code . . . . . . . . . . . . . . . . Tracing Errors with the window.alert() Method . Tracing Errors with the write() and writeln() Methods . . . . . . . . . . . . . . . . . . . . Using Comments to Locate Bugs . . . . . . . . . Combining Debugging Techniques . . . . . . . . . Tracing Errors with Debugging Tools. . . . . . . . . Understanding the JavaScript Debugger and JScript Debugger Windows . . . . . . . . . . . . . . . Setting Breakpoints . . . . . . . . . . . . . . . Stepping through Your Scripts . . . . . . . . . . Clearing Breakpoints . . . . . . . . . . . . . . . Tracing Variables and Expressions . . . . . . . . . Examining the Call Stack . . . . . . . . . . . . . Handling Exceptions and Errors . . . . . . . . . . . Throwing Exceptions . . . . . . . . . . . . . . . Catching Exceptions . . . . . . . . . . . . . . . Executing Final Exception Handling Tasks . . . . . Implementing Custom Error Handling . . . . . . . Additional Debugging Techniques . . . . . . . . . . Checking XHTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 443 444 444 445 451 452 452 . . . . . . . . . . . . 455 460 461 464 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 469 473 474 475 480 481 482 483 483 486 489 490 xi CONTENTS Analyzing Logic . . . . . . . . . . . . . . . . Testing Statements with JavaScript URLs. . . . . Reloading a Web Page . . . . . . . . . . . . . Using a for...in Statement to Check Object Properties . . . . . . . . . . . . . . . . . . Identifying JavaScript Language and Browser Bugs Summing Up . . . . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . . . . xii CHAPTER 9 . . . . . . . . . . . . . . . . . . . . . . . . 493 494 496 497 501 508 M anag i ng S tat e I nformati on and Securi ty . . 510 Understanding State Information . . . . . . . . . Saving State Information with Hidden Form Fields . Saving State Information with Query Strings . . . Saving State Information with Cookies . . . . . . . Creating and Modifying Cookies . . . . . . . . . Reading Cookies with JavaScript . . . . . . . . Deleting Cookies with JavaScript . . . . . . . . Understanding Security Issues . . . . . . . . . . Secure Coding with JavaScript . . . . . . . . . JavaScript Security Concerns . . . . . . . . . . The Same Origin Policy . . . . . . . . . . . . . Summing Up . . . . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . . . . CHAPTER 10 . . . . 490 . . . . 492 . . . . 492 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511 512 527 536 537 545 548 549 549 550 551 555 556 559 572 I nt ro duct i o n t o t he Document Obj ect M o del (DOM) . . . . . . . . . . . . . . 574 Understanding the HTML Document Object Model . . HTML DOM Document Object Methods . . . . . HTML DOM Document Object Properties . . . . Opening and Closing the Document Object . . . Using the Image Object . . . . . . . . . . . . . Animation with the Image Object . . . . . . . . Image Caching. . . . . . . . . . . . . . . . . Accessing Document Elements . . . . . . . . . . Accessing Elements by Name . . . . . . . . . . Accessing Elements by Tag Name . . . . . . . . Accessing Elements by ID . . . . . . . . . . . Modifying Elements with the innerHTML Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 576 577 578 582 585 592 597 597 600 602 603 Summing Up . . . . . Comprehension Check . Reinforcement Exercises Discovery Projects . . . CHAP TER 1 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creat in g Dy nami c HTML (DHTML) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 607 610 621 . . . . . 624 Manipulating CSS with JavaScript . . . . . . . . . . . Modifying Styles with the this Reference . . . . . . Modifying Styles with Methods of the Document Object Checking Browser Compatibility . . . . . . . . . . . Understanding CSS Positioning . . . . . . . . . . . . Dynamic Positioning . . . . . . . . . . . . . . . . Traveling Animation . . . . . . . . . . . . . . . . Creating DHTML Menus. . . . . . . . . . . . . . . . Expandable Menus . . . . . . . . . . . . . . . . . Navigation Menus . . . . . . . . . . . . . . . . . Sliding Menus . . . . . . . . . . . . . . . . . . . Summing Up . . . . . . . . . . . . . . . . . . . . Comprehension Check . . . . . . . . . . . . . . . . Reinforcement Exercises . . . . . . . . . . . . . . . Discovery Projects . . . . . . . . . . . . . . . . . . CHAP TER 1 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 625 625 630 633 634 635 637 643 643 648 654 658 659 663 677 U pdat in g Web Pages wi th AJAX . . . . . . 679 Introduction to AJAX . . . . . . . . . . . . . . Understanding AJAX’s Limitations . . . . . . . Accessing Content on a Separate Domain . . . Running AJAX from a Web Server . . . . . . . Overview of Creating an AJAX Script . . . . . . Working with HTTP . . . . . . . . . . . . . . . Understanding HTTP Messages . . . . . . . . Sending HTTP Requests . . . . . . . . . . . Receiving HTTP Responses . . . . . . . . . . Requesting Server Data . . . . . . . . . . . . Instantiating an XMLHttpRequest Object . . . . Opening and Sending a Request . . . . . . . . Receiving Server Data . . . . . . . . . . . . . Sending and Receiving Synchronous Requests and Responses . . . . . . . . . . . . . . Sending and Receiving Asynchronous Requests and Responses . . . . . . . . . . . . . . . Refreshing Server Data Automatically . . . . . Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 685 686 691 692 693 694 696 697 702 703 707 711 . . . . . 713 . . . . . 719 . . . . . 722 . . . . . 725 xiii CONTENTS Summing Up . . . . . Comprehension Check . Reinforcement Exercises Discovery Projects . . . xiv APPEN DIX A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 726 727 731 747 B ui ldi ng a Web Dev el opment Env i ronment . . 750 Building a Web Development Environment . . . . . . Understanding Binary and Source Code Installations . Getting Help . . . . . . . . . . . . . . . . . . . Installing and Configuring a Web Server . . . . . . . Installing and Running Apache on UNIX and Linux . . Installing and Running Apache on Windows . . . . . Installing and Running Internet Information Services on Windows Operating Systems . . . . . . . . . Installing and Controlling IIS on Windows Vista and Windows 7 . . . . . . . . . . . . . . . . . Testing Your Web Server . . . . . . . . . . . . . Configuring Apache . . . . . . . . . . . . . . . Configuring Internet Information Services . . . . . Installing PHP . . . . . . . . . . . . . . . . . . . Installing PHP on UNIX and Linux Systems Running Apache . . . . . . . . . . . . . . . . Installing PHP on Windows Running Apache or IIS . . Configuring Apache for PHP on UNIX/Linux Platforms Configuring PHP . . . . . . . . . . . . . . . . . APPEN DIX B . . . . . . . . . . . . . . . . . . . . . . 750 751 752 754 754 756 . . . 758 . . . . . . . . . . . . . . . 759 760 762 765 767 . . . . . . . . . . . . 767 769 770 771 I nt ro duct i o n t o P HP . . . . . . . . . . . 772 Creating Basic PHP Scripts . . . . . . . . . . . . . . . Creating PHP Code Blocks . . . . . . . . . . . . . . Displaying Script Results . . . . . . . . . . . . . . . Case Sensitivity in PHP . . . . . . . . . . . . . . . . Adding Comments to a PHP Script . . . . . . . . . . . Using Variables . . . . . . . . . . . . . . . . . . . . Working with Data Types . . . . . . . . . . . . . . . Understanding Variable Scope. . . . . . . . . . . . . Working with Operators, Functions, and Control Structures Working with PHP Strings . . . . . . . . . . . . . . . . Using String Operators . . . . . . . . . . . . . . . . Understanding Simple and Complex String Syntax . . . . Parsing Strings . . . . . . . . . . . . . . . . . . . Finding and Extracting Characters and Substrings . . . Replacing Characters and Substrings . . . . . . . . . . . . . . . . . . . . . . . . 772 773 773 774 775 775 776 776 777 777 777 778 779 779 781 Comparing Strings . . . . . . . . . Working with Arrays . . . . . . . . . Manipulating Elements . . . . . . . Manipulating Arrays . . . . . . . . Converting Between Strings and Arrays Handling Form Submissions. . . . . . Using Autoglobals . . . . . . . . . Validating Submitted Data . . . . . Working with Files . . . . . . . . . . Opening and Closing File Streams . . Writing Data to Files . . . . . . . . Reading Data from Files . . . . . . APPEN DIX C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wo rk in g wi t h Wel l - Formed Web Pages XHTML Document Type Definitions (DTDs) . Transitional DTD . . . . . . . . . . . . Frameset DTD . . . . . . . . . . . . . Strict DTD. . . . . . . . . . . . . . . Writing Well-Formed Documents . . . . . . Using Phrase Elements . . . . . . . . . . Working with Cascading Style Sheets (CSS) CSS Properties . . . . . . . . . . . . Inline Styles . . . . . . . . . . . . . . Internal Style Sheets . . . . . . . . . . External Style Sheets . . . . . . . . . The Content-Type Element . . . . APPEN DIX D . . . . . . . . . . . . J avaS cri pt R ef erence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781 782 783 785 787 788 788 790 792 792 794 796 . . . 798 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 799 799 800 800 801 803 803 803 805 806 807 . . . . . . . . . . 809 Comment Types . . . . . . . . . Line Comments . . . . . . . . Block Comments . . . . . . . . JavaScript Reserved Words . . . . Events . . . . . . . . . . . . . JavaScript Events . . . . . . . Elements and Associated Events Primitive Data Types . . . . . . . JavaScript Escape Sequences . . Operators . . . . . . . . . . . . JavaScript Operator Types . . . Arithmetic Binary Operators. . . Arithmetic Unary Operators . . . Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809 809 809 810 810 810 811 811 812 812 812 813 813 813 xv CONTENTS Comparison Operators . . . . . . . Logical Operators . . . . . . . . . Operator Precedence . . . . . . . . Control Structures and Statements . . if Statements . . . . . . . . . . if...else Statements . . . . . . switch Statements . . . . . . . . while Statements. . . . . . . . . do...while Statements . . . . . for Statements . . . . . . . . . . for...in Statements . . . . . . . with Statements . . . . . . . . . break Statements. . . . . . . . . continue Statements . . . . . . . Built-In JavaScript Functions . . . . . Built-In JavaScript Classes . . . . . . Array Class . . . . . . . . . . . Date Class . . . . . . . . . . . . Math Class . . . . . . . . . . . . Number Class . . . . . . . . . . . String Class . . . . . . . . . . . Objects of the Browser Object Model . Document Object . . . . . . . . . History Object. . . . . . . . . . Location Object . . . . . . . . . Navigator Object . . . . . . . . Screen Object . . . . . . . . . . Window Object . . . . . . . . . . Objects of the Document Object Model Form Object . . . . . . . . . . . Image Object . . . . . . . . . . . Input Object . . . . . . . . . . . xvi APPEN DIX E . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814 814 815 815 815 815 816 816 816 816 816 816 816 817 817 817 817 818 819 820 821 822 822 823 824 824 825 825 826 826 827 828 S o lu t io n s t o Sho r t Qui z z es . . . . . . . . 830 I ndex . . . . . . . . . . . . . . . . . 885 Preface xvii JavaScript is a client-side scripting language that allows Web page authors to develop interactive Web pages and sites. Although JavaScript is considered a programming language, it is also a critical part of Web page design and authoring. This is because the JavaScript language “lives” within a Web page’s elements. The language is relatively easy to learn, allowing non-programmers to quickly incorporate JavaScript functionality into a Web page. In fact, because it is used extensively in the countless Web pages that are available on the World Wide Web, JavaScript is arguably the most widely used programming language in the world. JavaScript, Fifth Edition teaches Web page development with JavaScript for students with little programming or database experience. Although no prior programming experience is required, knowledge of HTML and Web page design is helpful, but not required. This book covers the basics of ECMAScript Edition 3, which is compatible with recent Web browsers including Mozilla Firefox and Microsoft Internet Explorer, along with advanced topics including object-oriented programming, the Document Object Model (DOM), and AJAX. Further, this book presents JavaScript techniques using XHTML-compatible Web pages. After you complete this course, you will be able to use JavaScript to build professional quality, dynamic Web sites. The Approach This book introduces a variety of techniques, focusing on what you need to know to start writing JavaScript programs. In each chapter, you perform tasks that let you use a particular technique to build JavaScript programs. The step-by-step tasks are guided activities that reinforce the skills you learn in the chapter and build on your learning experience by providing additional ways to apply your knowledge in new situations. In addition to step-by-step tasks, each chapter includes objectives, short quizzes, comprehension checks, and reinforcement exercises that highlight major concepts and let you practice the techniques you learn. At the end of each chapter, you will also P R E FA C E complete Discovery Projects that let you use the skills you learned in the chapter to write JavaScript programs on your own. xviii As with the last edition of this book, Web page examples and exercises are written in XHTML. Although you need to have a solid understanding of HTML to be successful with this book, you do not necessarily need to be an expert with XHTML. Because XHTML is almost identical to HTML, you can easily adapt any of your existing HTML skills to XHTML, and vice versa. Overview of This Book The examples and exercises in this book will help you achieve the following objectives: • Use JavaScript with well-formed Web pages • Work with JavaScript variables and data types and learn how to use the operations that can be performed on them. • Add functions, events, and control structures to your JavaScript programs • Write JavaScript code that controls the Web browser through the browser object model • Use JavaScript to make sure data was entered properly into form fields and to perform other types of preprocessing before form data is sent to a server • Include object-oriented programming techniques in your JavaScript programs • Manipulate data in strings and arrays • Trace and resolve errors in JavaScript programs • Save state information using hidden form fields, query strings, and cookies • Add animation and interactivity to your Web pages using the Document Object Model (DOM) and Dynamic HTML (DHTML) • Dynamically update Web pages with AJAX JavaScript presents twelve chapters that cover specific aspects of JavaScript programming. Chapter 1 discusses basic concepts of the World Wide Web, introduces XHTML documents, and covers the basics of how to add JavaScript to well-formed Web pages. How to write basic JavaScript code, including how to use variables, data types, expressions, operators, and events, is also discussed in Chapter 1. This early introduction of key JavaScript concepts gives students a framework for better understanding more advanced concepts and techniques later in this book, and allows them to work on more comprehensive projects from the start. Chapter 2 covers functions, data types, and how to build expressions. Chapter 3 explains how to store data in arrays and how to use structured logic in control structures and statements. Chapter 4 teaches how to use JavaScript to manipulate the Web browser using the Window, History, Location, Navigator, and Screen objects. Chapter 5 explains how to use JavaScript to make sure data was entered properly into form fields and how to perform other types of preprocessing before form data is sent to a server. Chapter 6 presents object-object oriented programming concepts, including how to use JavaScript’s built-in Array, Date, Number, and Math classes. Chapter 7 covers advanced techniques for manipulating data in strings and arrays. Chapter 8 provides a thorough discussion of debugging techniques, including how to use script debugging tools for Firefox and Internet Explorer. Chapter 9 explains how to save state information using hidden form fields, query strings, and cookies, and also briefly discusses JavaScript security issues. Chapter 10 and Chapter 11 teach how to add animation and interactivity to your Web pages using the Document Object Model (DOM) and Dynamic HTML (DHTML). Chapter 12 introduces the basics of how to use AJAX to dynamically update portions of a Web page with server-side data. What’s New in This Edition? The fifth edition includes the following important new features: • Significant revisions and improvements to the chapter projects and examples. • The use of professionally designed Web pages for chapter projects. The goal of this book is to teach Web page authoring techniques, not Web page design techniques. In the real world, Web page authors often (but not always) receive completed Web pages from a Web page designer. For this reason, students work with professionally designed Web pages that they would encounter in a business setting. • Instructions on working with XHTML moved to an appendix, providing a quick reference for students who need it, without slowing down general classroom instruction. • A new streamlined layout that makes it easier to locate information quickly. xix P R E FA C E • An introduction to the basics of JavaScript in Chapter 1 that gives students a framework for understanding more advanced concepts and techniques later in this book, and allows them to work on more comprehensive projects from the start. xx • An introduction to arrays in Chapter 3, “Building Arrays and Control Structures,” that provides a better context for learning about arrays and control structures. Features JavaScript, Fifth Edition is a superior textbook because it also includes the following features: CHAPTER OBJECTIVES: Each chapter begins with a list of the important concepts presented in the chapter. This list provides students with a quick reference to the contents of the chapter as well as a useful study aid. FIGURES AND TABLES: Plentiful screenshots allow students to check their screens against the desired output. Tables consolidate important material for easy reference. CODE EXAMPLES: Numerous code examples throughout each chapter are presented in any easy-to-read font, with key words shown in color. NEW TERMS: New terms are printed in boldface to draw the reader’s attention to new material. HELP: These margin notes provide more information about the task the student is currently performing. POINTER: These useful asides, located in the margin, provide students with practical advice and proven strategies related to the concept being discussed. They also contain cross-references to other sections in the book or to related Web sites. NOTE: These margin elements provide additional helpful information on specific techniques and concepts. CAREFUL: These cautionary notes point out troublesome issues related to a particular technique or concept. SHORT QUIZ: Several short quizzes are included in each chapter. These quizzes, consisting of three to five questions, help ensure students understand the major points introduced in the chapter. SUMMING UP: These brief overviews revisit the ideas covered in each chapter, providing students with a helpful study guide. COMPREHENSION CHECK: At the end of each chapter, a set of twenty review questions reinforce the main ideas introduced in the chapter. These questions help students determine whether or not they have mastered the concepts presented in the chapter. REINFORCEMENT EXERCISES: Although it is important to understand the concepts behind every technology, no amount of theory can improve on real-world experience. To this end, each chapter includes detailed Reinforcement Exercises that provide students with practical experience implementing technology skills in real-world situations. DISCOVERY PROJECTS: These end-of-chapter projects are designed to help students apply what they have learned to business situations, much like those a professional Web developer would encounter. They give students the opportunity to independently synthesize and evaluate information, examine potential solutions, and make decisions about the best way to solve a problem. Instructor Resources The following supplemental materials are available when this book is used in a classroom setting. All of the instructor resources available with this book are provided to the instructor on a single CD-ROM. ELECTRONIC INSTRUCTOR’S MANUAL. The Instructor’s Manual that accompanies this textbook includes additional instructional material to assist in class preparation, including items such as Sample Syllabi, Chapter Outlines, Technical Notes, Lecture Notes, Quick Quizzes, Teaching Tips, Discussion Topics, and Additional Case Projects EXAMVIEW ® . This textbook is accompanied by ExamView, a pow- erful testing software package that allows instructors to create and administer printed, computer (LAN-based), and Internet exams. ExamView includes hundreds of questions that correspond to the topics covered in this text, enabling students to generate detailed study guides that include page references for further review. The computer-based and Internet testing components allow students to take exams at their computers, and also save the instructor time by grading each exam automatically. POWERPOINT ® PRESENTATIONS. This book comes with Microsoft PowerPoint slides for each chapter. These are included as a teaching aid for classroom presentation, to make available to students xxi P R E FA C E on the network for chapter review, or to be printed for classroom distribution. Instructors can add their own slides for additional topics they introduce to the class. DATA FILES. Files that contain all of the data necessary for the xxii Hands-on Projects and Case Projects are provided through the Course Technology Web site at www.cengage.com/coursetechnology, and are also available on the Instructor Resources CD-ROM. SOLUTION FILES. Solutions to end-of-chapter Exercises and Projects are provided on the Instructor Resources CD and may also be found on the Course Technology Web site at www.cengage.com/ coursetechnology. The solutions are password protected. DISTANCE LEARNING. Course Technology is proud to present online test banks in WebCT and Blackboard to provide the most complete and dynamic learning experience possible. Instructors are encouraged to make the most of the course, both online and offline. For more information on how to access your online test bank, contact your local Course Technology sales representative. Read This Before You Begin The following information will help you as you prepare to use this textbook. To the User of the Data Files To complete the steps, exercises, and projects in this book, you will need data files that have been created specifically for this book. These data files are available through the Course Technology Web site at www.cengage.com/coursetechnology and are also provided on the Instructor Resources CD-ROM. Note that you can use a computer in your school lab or your own computer to complete the steps, exercises, and projects in this book. Using Your Own Computer You can use a computer in your school lab or your own computer to complete the chapters. To use your own computer, you will need the following: • A Web browser. You can use any browser you like to view the solutions to this exercises in this text, as long as it is compatible with the standardized version of the DOM that is recommended by the World Wide Web Consortium (W3C). At the time of this writing, Firefox and Internet Explorer 5.0 and higher are compatible with the W3C DOM, although other browsers are also compatible. • A code-based HTML editor, such as Adobe Dreamweaver, or a text editor such as Notepad on Windows, GNU Emacs on UNIX/ Linux, or SimpleText on the Macintosh. • A Web server (for Chapter 12) such as Apache HTTP Server or Microsoft Internet Information Services and PHP. Appendix A contains detailed instructions on how to install a Web server and PHP. To the Instructor To complete all the exercises and chapters in this book, your students must work with a set of user files, called data files, and download software from Web sites. The data files are included on the Instructor Resources CD-ROM. They may also be obtained electronically through the Course Technology Web site at www.cengage.com/ coursetechnology. Have students follow the instructions in Chapter 1 to install the data files. Course Technology Data Files You are granted a license to copy the data files to any computer or computer network used by individuals who have purchased this book. Visit Our World Wide Web Site Additional materials designed especially for this book might be available for your course. Periodically search www.cengage.com/coursetechnology for more information and materials to accompany this text. Got a Job In Computing . . . ? We hope you enjoyed the Q&A on the inside front cover of this book. If you’d like to suggest that we interview a recent graduate you know who has landed an interesting job in computing, please send your suggestions via e-mail to Amy Jollymore, Acquisitions Editor, at Amy.Jollymore@cengage.com. xxiii P R E FA C E Acknowledgements xxiv A text such as this represents the hard work of many people, not just the author. I would like to thank all the people who helped make this book a reality. First and foremost, I would like to thank Ann Shaffer, Development Editor; Alyssa Pratt, Senior Product Manager; and Amy Jollymore, Acquisitions Editor, for helping me get the job done. I would also like to thank Jill Braiewa, Senior Content Project Manager, and Tintu Thomas, Project Manager, who oversaw the process of turning the manuscript into a printed book. Also, many thanks to Chris Scriver, John Freitas, Serge Palladino, and Danielle Shaw, our excellent Quality Assurance team, who scrutinized every word and line of code. Many, many thanks to the reviewers who provided plenty of comments and positive direction during the development of this book: The following proposal reviewers helped me shape my plans for the new edition: Don Bergman, Olympic College; John Hulsey, Limestone College; Diane Kokoska, University of Maine at Augusta; William Kuechler, Jr., University of Nevada, Reno. The following people reviewed each and every chapter, providing countless helpful suggestions and comments: Ahmad Abuhejleh, University of Wisconsin— River Falls; Dan Luttrell, Community Colleges of Baltimore County, Catonsville Campus; Judy Scholl, Austin Community College; and Brian Snow, Central Maine Community College. A very special thanks to Judy Scholl, Austin Community College, for her invaluable advice on Chapter 12, “Updating Web Pages with AJAX.” On the personal side, I would like to thank my family and friends for supporting me in my career; I don’t see many of you nearly as often as I’d like, but you are always in my thoughts. My most important thanks always goes to my wonderful wife, Kathy, for her never ending support and encouragement, and to Noah the wonder dog. Don Gosselin CHAPTER Introduction to JavaScript In this chapter, you will:      Study the history of the World Wide Web Learn about Web development Add basic JavaScript code to your Web pages Learn about the JavaScript programming language Add structure to your JavaScript programs 1 CHAPTER 1 Introduction to JavaScript The original purpose of the World Wide Web (WWW) was to locate and display information. However, once the Web grew beyond a small academic and scientific community, people began to recognize that greater interactivity would make the Web more useful. As commercial applications of the Web grew, the demand for more interactive and visually appealing Web sites also grew. 2 To respond to the demand for greater interactivity, an entirely new Web programming language was needed. Netscape filled this need in the mid-1990s by developing the JavaScript programming language. Originally designed for use in the Navigator Web browser, JavaScript is now also used in most Web browsers, including Internet Explorer. Although JavaScript is considered a programming language, it is also a critical part of Web page design and authoring. This is because the JavaScript language “lives” within a Web page’s elements. In other words, the JavaScript code you write is usually placed within the elements that make up a Web page. JavaScript can turn static documents into applications such as games or calculators. JavaScript code can change the contents of a Web page after a browser has rendered it. It can also create visual effects such as animation, and it can control the Web browser window itself. None of this was possible before the creation of JavaScript. For the most current Web page-authoring techniques, see Don Gosselin’s XHTML, also published by Course Technology. In this chapter, you will learn the skills required to create basic JavaScript programs. In order to be successful in your JavaScript studies, you should already possess a strong knowledge of Web pageauthoring techniques. The first part of this chapter provides a quick refresher on the history of the World Wide Web and the basics on how to create Web pages. Even if you are highly experienced with HTML, you might not be familiar with the formal terminology that is used in Web page authoring. For this reason, be certain to read through these sections to ensure that you understand the terminology used in this book. Introduction to the World Wide Web The Internet is a vast network that connects computers all over the world. The original plans for the Internet grew out of a series of memos written by J. C. R. Licklider of the Massachusetts Institute of Technology (MIT), in August 1962, discussing his concept of a “Galactic Network.” Licklider envisioned a global computer network through which users could access data and programs from any site on the network. The Internet was actually developed in the 1960s by the Advanced Research Projects Agency (or ARPA) of the U.S. Department of Defense, which later changed its name to Defense Advanced Research Projects Agency (or DARPA). The goal of the Introduction to the World Wide Web early Internet was to connect the main computer systems of various universities and research institutions that were funded by this agency. This first implementation of the Internet was referred to as the ARPANET. More computers were connected to the ARPANET in the years following its initial development in the 1960s, although access to the ARPANET was still restricted by the U.S. government primarily to academic researchers, scientists, and the military. 3 The 1980s saw the widespread development of local area networks (LANs) and the personal computer. Although at one time restricted to academia and the military, computers and networks soon became common in business and everyday life. By the end of the 1980s, businesses and individual computer users began to recognize the global communications capabilities and potential of the Internet, and they convinced the U.S. government to allow commercial access to the Internet. In 1990 and 1991, Tim Berners-Lee created what would become the World Wide Web, or the Web, at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland, as a way to easily access cross-referenced documents that existed on the CERN computer network. When other academics and scientists saw the usefulness of being able to easily access cross-referenced documents using Berners-Lee’s system, the Web as we know it today was born. In fact, this method of accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to open other Web pages quickly. A hypertext link, or hyperlink or link, contains a reference to a specific Web page that you can click to open that Web page. A common misconception is that the words “Web” and “Internet” are synonymous. The Web is only one part of the Internet and is a means of communicating on the Internet. The Internet is also composed of other communication elements such as e-mail systems that send and receive messages. However, because of its enormous influence on computing, communications, and the economy, the World Wide Web is arguably the most important part of the Internet today and is the primary focus of this book. A document on the Web is called a Web page and is identified by a unique address called the Uniform Resource Locator, or URL. A URL is also commonly referred to as a Web address. A URL is a type of Uniform Resource Identifier (URI), which is a generic term for many types of names and addresses on the World Wide Web. The term Web site refers to the location on the Internet of the Web pages and related files (such as graphic and video files) that belong to a company, organization, or individual. You display a Web page on your computer screen by using a program called a Web browser. A person can retrieve and open a Web page in a Web browser either by entering a If you want to learn more about the history of the Internet, the Internet Society (ISOC) maintains a list of links to Internet histories at http://www.isoc.org/ internet/ history/. CHAPTER 1 4 Prior to version 6, the Netscape Web browser was called Navigator or Netscape Navigator. With the release of version 6, however, Netscape dropped “Navigator” from the browser name, and now simply refers to its browser as “Netscape.” For this reason, in this book “Navigator Web browser” refers to versions older than version 6, and “Netscape Web browser” refers to version 6 and later. DHTML is actually a combination of HTML, Cascading Style Sheets, and JavaScript. The term Cascading Style Sheets (CSS), or style sheets, refers to a standard set by the W3C for managing Web page formatting. The W3C does not actually release a version of a particular technology. Instead, it issues a formal recommendation for a technology, which essentially means that the technology is (or will be) a recognized industry standard. Introduction to JavaScript URL in the Web browser’s Address box or by clicking a hypertext link. When a user wants to access a Web page, either by entering its URL in a browser’s Address box or by clicking a link, the user’s Web browser asks a Web server for the Web page in what is referred to as a request. A Web server is a computer that delivers Web pages. What the Web server returns to the user is called the response. Understanding Web Browsers You can choose from a number of different browsers, but at the time of this writing, Mozilla Firefox is the most popular browser on the market. Although Firefox is the most popular browser, it was not the first. NCSA Mosaic was created in 1993 at the University of Illinois and was the first program to allow users to navigate the Web by using a graphical user interface (GUI). In 1994, Netscape released Navigator, which soon controlled 75% of the market. Netscape maintained its control of the browser market until 1996, when Microsoft entered the market with the release of Internet Explorer, and the socalled browser wars began, in which Microsoft and Netscape fought for control of the browser market. The browser wars began over DHTML, which is a combination of various technologies, including HTML and JavaScript, which allows a Web page to change after it has been loaded by a browser. Examples of DHTML include the ability to position text and elements, change document background color, and create effects such as animation. Earlier versions of Internet Explorer and Navigator included DHTML elements that were incompatible. Furthermore, Microsoft and Netscape each wanted its version of DHTML to become the industry standard. To settle the argument, the World Wide Web Consortium set out to create a platform-independent and browser-neutral version of DHTML. The World Wide Web Consortium, or W3C, was established in 1994 at MIT to oversee the development of Web technology standards. While the W3C was drafting a recommendation for DHTML, versions 4 of Internet Explorer and Navigator each added a number of proprietary DHTML elements that were completely incompatible with the other browser. As a result, when working with advanced DHTML techniques such as animation, a programmer had to write a different set of HTML code for each browser. Unfortunately for Netscape, the W3C adopted as the formal standard the version of DHTML found in version 4 of Internet Explorer, which prompted many loyal Netscape followers to defect to Microsoft. One great benefit of the browser wars is that it has forced the Web industry to rapidly develop and adopt advanced Web page standards (including JavaScript, CSS, and DHTML), which are consistent across browsers. In 2004, Internet Explorer appeared to be winning the Introduction to the World Wide Web browser wars, as it controlled 95% of the browser market. Yet, in the past few years, Internet Explorer has lost significant market share to a contentious newcomer, Mozilla Firefox. The Firefox Web browser is open source software developed by the Mozilla organization (http:// www.mozilla.org). Open source refers to software for which the source code can be freely used and modified. At the time of this writing, Internet Explorer usage has slipped to approximately 41%, while Firefox now controls approximately 47% of the market (according to the W3 Schools browser statistics page at http://www.w3schools.com/browsers/ browsers_stats.asp). One of the most fascinating aspects of Firefox is that it’s essentially an open source version of the Netscape browser. So, in a figurative sense, the original Netscape browser has risen from the ashes to resume battle with its arch nemesis, Internet Explorer—and it’s winning at the time of this writing. Healthy competition is good for any market, so hopefully the renewed hostilities in the browser wars will encourage vendors to continue improving browser quality and capabilities, and to adopt and adhere to Web page standards. 5 Creating Web Pages Originally, people created Web pages using Hypertext Markup Language. Hypertext Markup Language, or HTML, is a markup language used to create the Web pages that appear on the World Wide Web. Web pages are also commonly referred to as HTML pages or documents. A markup language is a set of characters or symbols that defines a document’s logical structure—that is, it specifies how a document should be printed or displayed. HTML is based on an older language called Standard Generalized Markup Language, or SGML, which defines the data in a document independent of how the data will be displayed. In other words, SGML separates the data in a document from the way that data is formatted. Each element in an SGML document is marked according to its type, such as paragraphs, headings, and so on. Like SGML, HTML was originally designed as a way of defining the elements in a document independent of how they would appear. HTML was not intended to be used as a method of designing the actual appearance of the pages in a Web browser. However, HTML gradually evolved into a language that is capable of defining how elements should appear in a Web browser. Basic HTML Syntax HTML documents are text documents that contain formatting instructions, called tags, which determine how data is displayed on a Web page. HTML tags range from formatting commands that make text appear in boldface or italics to controls that allow user input, such as option buttons and check boxes. Other HTML tags allow you to display This textbook uses the terms Web pages and HTML documents interchangeably. CHAPTER 1 Introduction to JavaScript graphic images and other objects in a document or Web page. Tags are enclosed in brackets (< >), and most consist of an opening tag and a closing tag that surround the text or other items they format or control. The closing tag must include a forward slash ( / ) immediately after the opening bracket to define it as a closing tag. For example, to make a line of text appear in boldface, you use the opening tag and the closing tag . Any text contained between this pair of tags appears in boldface when you open the HTML document in a Web browser. 6 HTML documents must have a file extension of .htm or .html. A tag pair and any data it contains are referred to as an element. The information contained within an element’s opening and closing tags is referred to as its content. Some elements do not require a closing tag. Elements that do not require a closing tag are called empty elements because you cannot use a tag pair to enclose text or other elements. For instance, the element, which inserts a horizontal rule on a Web page, does not include a closing tag. You simply place the element anywhere in an HTML document where you want the horizontal rule to appear. There are literally hundreds of HTML elements. Table 1-1 lists some of the more common elements. HTML element Description Formats the enclosed text in a bold typeface Encloses the body of the HTML document Inserts a line break Centers a paragraph in the middle of a Web page Encloses the page header and contains information about the entire page Indicates heading level elements, where n represents a number from 1 to 6 Inserts a horizontal rule Begins and ends an HTML document; these are required elements Formats the enclosed text in an italic typeface Inserts an image file Identifies the enclosed text as a paragraph Formats the enclosed text as underlined Table 1-1 Common HTML elements All HTML documents must use the element as the root element. A root element contains all the other elements in a document. This element tells a Web browser to assemble any instructions between the tags into a Web page. The opening and closing Introduction to the World Wide Web . . . tags are required and contain all the text and other elements that make up the HTML document. Two other important HTML elements are the element and the element. The element contains information that is used by the Web browser, and you place it at the beginning of an HTML document, after the opening tag. You place several elements within the element to help manage a document’s content, including the element, which contains text that appears in a browser’s title bar. A element must contain a element. With the exception of the element, elements contained in the element do not affect the displaying of the HTML document. The element and the elements it contains are referred to as the document head. Following the document head is the element. The element and the text and elements it contains are referred to as the document body. When you open an HTML document in a Web browser, the document is assembled and formatted according to the instructions contained in its elements. The process by which a Web browser assembles and formats an HTML document is called parsing or rendering. The following example shows how to make a paragraph appear in boldface in an HTML document: Herbal treatments for migraines may help reduce the severity of pain and discomfort. HTML is not case sensitive, so you can use in place of . However, the next generation of HTML, a language called XHTML, is case sensitive, and you must use lowercase letters for elements. For this reason, this book uses lowercase letters for all elements. (You will learn about XHTML shortly.) You use various parameters, called attributes, to configure many HTML elements. You place an attribute before the closing bracket of the opening tag, and separate it from the tag name or other attributes with a space. You assign a value to an attribute using the syntax attribute="value". For example, you can configure the element, which embeds an image in an HTML document, with a number of attributes, including the src attribute. The src attribute specifies the filename of an image file or video clip. To include the src attribute within the element, you type . When a Web browser parses or renders an HTML document, it ignores nonprinting characters such as tabs and line breaks; the final document that appears in the Web browser includes only recognized HTML elements and text. You cannot use line breaks in the body of an HTML document to insert spaces before and after a paragraph; 7 CHAPTER 1 Introduction to JavaScript the browser recognizes only paragraph and line break elements for this purpose. In addition, most Web browsers ignore multiple, contiguous spaces on a Web page and replace them with a single space. The following code shows the document head and a portion of the document body for the Web page shown in Figure 1-1. 8 The Fitness Center Web page is available in your Examples folder for Chapter 1. The majority of the screen captures of Web pages shown in this book were taken in Mozilla Firefox 3, running on the Windows XP operating system. Different Web browsers might render the parts of a Web page slightly differently from other browsers. The appearance of a Web browser itself can also vary across platforms. If you are using a Web browser other than Firefox and an operating system other than Windows XP, your Web pages and Web browser might not match the figures in this book. X Fitness Center ... Figure 1-1 Fitness Center Web page Introduction to the World Wide Web Creating an HTML Document Because HTML documents are text files, you can create them in any text editor, such as Notepad or WordPad, or any word-processing application capable of creating simple text files. If you use a text editor to create an HTML document, you cannot view the final result until you open the document in a Web browser. Instead of a text editor or word processor, you could choose to use an HTML editor, which is an application designed specifically for creating HTML documents. Some popular HTML editors, such as Adobe Dreamweaver and Microsoft Expression Web, have graphical interfaces that allow you to create Web pages and immediately view the results, similar to the WYSIWYG (what-you-see-is-what-you-get) interface in wordprocessing programs. In addition, many current word-processing applications, including Microsoft Word and WordPerfect, allow you to save files as HTML documents. Like text editors, HTML editors create simple text files, but they automate the process of applying elements. For example, suppose you are creating a document in Word. You can add boldface to a heading in the document simply by clicking a toolbar button. Then, when you save the document as an HTML document, Word automatically adds the element to the text in the HTML document. Any HTML editor can greatly simplify the task of creating Web pages. However, HTML editors automatically add many unfamiliar elements and attributes to documents that might confuse you and distract from the learning process. For this reason, in this book you create Web pages using a simple text editor. Working with XHTML and Well-Formed Web Pages HTML first became an Internet standard in 1993 with the release of version 1.0. The next version of HTML, 2.0, was released in 1994 and included many core HTML features, such as forms and the ability to bold and italicize text. However, many of the standard features that are widely used today, such as using tables to organize text and graphics on a page, were not available until the release of HTML 3.2 in 1996. The current version of HTML, 4.01, was released in 1999. HTML 4.01, however, is the last version of the HTML language; it has been replaced with Extensible Hypertext Markup Language, or XHTML, which is the next generation markup language for creating the Web pages that appear on the World Wide Web. HTML has been replaced because it is useful only for rendering documents in traditional Web browsers like Firefox or Internet Explorer. 9 Many people who are new to creating Web pages are surprised by the fact that you cannot use a Web browser to create an HTML document. CHAPTER 1 Introduction to JavaScript XHTML is based on Extensible Markup Language, or XML, which is used for creating Web pages and for defining and transmitting data between applications. That worked well as long as browsers running on computers were the main source of requests for files over the Web. These days, however, many types of devices besides computers use the Web. For example, mobile phones and personal digital assistants (PDAs) are commonly used to browse the Web. An application that is capable of retrieving and processing HTML and XHTML documents is called a user agent. A user agent can be a traditional Web browser or a device such as a mobile phone or PDA, or even an application such as a crawler for a search engine that simply collects and processes data instead of displaying it. Although user agents other than browsers can process HTML, they are not ideally suited to the task, primarily because HTML is more concerned with how data appears than with the data itself. As Web browsers have evolved over the years, they have added extensions (elements and attributes) to HTML to provide functionality for displaying and formatting Web pages. For instance, one extension to the original HTML language is the element, which allows you to specify the font for data in an HTML document. The element has nothing to do with the type of data in an HTML document. Instead, its sole purpose is to display data in a specific typeface within a Web browser. There is nothing wrong with continuing to author your Web pages using HTML and design elements such as the element—provided that your Web pages will be opened only in a Web browser. However, many user agents (such as mobile phones and PDAs) are incapable of processing HTML elements that handle the displaying and formatting of data. User agents such as these require a language that truly defines data (such as a paragraph or heading) independently of the way it is displayed. To ensure backward compatibility with older browsers, you should save XHTML documents with an extension of .html or .htm, just like HTML documents. The Web page examples and exercises in this book are written in XHTML. Although you need to have a solid understanding of HTML to be successful with this book, you do not necessarily need to be an expert with XHTML. Because XHTML is almost identical to HTML, you can easily adapt any of your existing HTML skills to XHTML, and vice versa. If you are not familiar with XHTML, review Appendix C, “Working with Well-Formed Web Pages,” before continuing with this chapter. Be sure you understand what a document type definition, or DTD, is. Also, you should thoroughly understand how to create well-formed documents and how to work with CSS. 10 Now you are ready to start creating a Web page that displays the menu page for a pizza restaurant. You can use any text editor, such as Notepad or WordPad. Most of the Web page’s design comes from a style sheet that is already created for you in the DonsPizza folder in your Chapter folder for Chapter 1. Before you begin the first exercise, be certain to extract the data files, which you can download from Course Technology’s Web site at Introduction to the World Wide Web http://www.course.com. Use the 0538748877_Data.exe file to install the data files on Windows operating systems and the 0538748877_Data. jar file to install the data files on UNIX/Linux operating systems. The 0538748877_Data.exe and 0538748877_Data.jar files automatically create directories where you can store the exercises and projects you create in this book and install any necessary data files that you will need. By default, the directories and data files are installed for Windows platforms in C:\Course Technology\Programming\ JavaScript\Data Files and for UNIX/Linux platforms in usr/local/ course/programming/javascript/data_files. The data file directories contain separate directories for each chapter, which, in turn, contain the Chapter, Exercises, and Projects directories. The Course Technology directory might also contain data files for other books you have used from Course Technology. Save the exercises and projects you create in the main body of each chapter within the Chapter directory. Save the Hands-On Exercises and Discovery Projects you create at the end of each chapter in the Exercises and Projects directories, respectively. To create the menu page for Don’s Pizza: 1. Start your text editor and create a new document, if necessary. 2. Type the following declaration for the transitional DTD: 3. Add to the end of the document the following elements to begin the HTML document. Remember that all HTML documents must begin and end with the element. 4. Next, add the following and elements between the . . . tag pair. The title appears in your Web browser’s title bar. Remember that the element must include the element. The element cannot exist outside the element. The element links to a style sheet named style.css. Don's Pizza The arrow symbol at the end of a line of code indicates the code is broken in this book because of space limitations. But in your program, you must type the code on a single line. 11 CHAPTER 1 Introduction to JavaScript 5. Next, add the following elements above the closing tag. The element contains all of the elements that are rendered in a Web browser. 12 6. Add the following elements and text above the closing element. The code contains standard HTML ele- ments along with the text that is displayed in the Web browser. Some Web servers do not correctly interpret spaces within the name of HTML files. For example, some Web servers may not correctly interpret a filename of Mortgage Brokers.html, with a space between Mortgage and Brokers. For this reason, filenames in this book do not include spaces. [Add code here] © All rights reserved. Don's Pizza. 2010. 7. Save the document as menu.html in the DonsPizza folder in your Chapter folder for Chapter 1. Some text editors automatically add their own extensions to a document. Notepad, for instance, adds an extension of .txt by default. Be sure your document is saved with an extension of .html. Keep the document open in your text editor. Introduction to the World Wide Web 8. Open the menu.html document in your Web browser. (You open a local document in most Web browsers by selecting Open or Open File from the File menu.) Figure 1-2 displays the menu.html document as it appears in Firefox. 13 Many of the projects and examples in this book use professionally designed Web sites because, in real-world situations, a JavaScript programmer is often asked to add code to a preexisting Web site. However, do not worry about trying to understand the design elements that you see in this book. Instead, simply focus on how JavaScript interacts with the Web pages you work on. Figure 1-2 9. menu.html in Firefox Close your Web browser window. Short Quiz 1 1. How and why did the World Wide Web evolve? 2. What prompted the browser wars? 3. What are the basic elements required for all Web pages? 4. What is a user agent? CHAPTER 1 Introduction to JavaScript Introduction to Web Development 14 Another term that you might often see in relation to Web development is Webmaster. Although there is some dispute over exactly what the term means, typically Webmaster refers to a person who is responsible for the day-to-day maintenance of a Web site, including the monitoring of Web site traffic and ensuring that the Web site’s hardware and software are running properly. The duties of a Webmaster often require knowledge of Web page design, authoring, and development. If you would like to study the topic of Web page design itself, refer to Joel Sklar’s excellent book, Principles of Web Design, Fourth Edition, published by Course Technology/Cengage Learning. Web page design, or Web design, refers to the visual design and creation of the documents that appear on the World Wide Web. Most businesses today—both prominent and small—have Web sites. To attract and retain visitors, and to stand out from the crowd, Web sites must be exciting and visually stimulating. High-quality Web design plays an important role in attracting first-time and repeat visitors. However, the visual aspect of a Web site is only one part of the story. Equally important is the content of the Web site and how that content is structured. Web design is an extremely important topic. However, this book is not about Web design, even though you will certainly learn many Web design concepts and techniques as you work through the chapters ahead. Instead, this book touches on both Web page authoring and Web development. Web page authoring (or Web authoring) refers to the creation and assembly of the tags, attributes, and data that make up a Web page. There is a subtle, but important, distinction between Web design and Web page authoring: Web design refers to the visual and graphical design aspects of creating Web pages, whereas a book on Web page authoring refers to the physical task of assembling the Web page tags and attributes. Web development, or Web programming, refers to the design of software applications for a Web site. Generally, a Web developer works “behind the scenes” to develop software applications that access databases and file systems, communicate with other applications, and perform other advanced tasks. The programs created by a Web developer will not necessarily be seen by a visitor to a Web site, although the visitor will certainly use a Web developer’s programs, particularly if the Web site writes and reads data to and from a database. Although JavaScript lives more in the realm of Web page authoring, there is certainly some overlap between Web authoring and Web development, especially when it comes to sending and receiving data to and from a Web server. There are countless ways of combining the hundreds of HTML tags to create interesting Web pages. One technique that professional Web authors use to increase their HTML skill is examining the underlying HTML tags of a Web page that they admire. All Web browsers contain commands that allow you to view the underlying HTML code for a Web page that appears in the browser; in Firefox you select Page Source from the View menu, and in Internet Explorer you select the Source command from the View menu. The open nature of HTML makes it possible for anyone to easily see how another Web author created a Web page. However, you should Introduction to Web Development never copy another Web page author’s work and attempt to pass it off as your own. As a responsible member of the Web community, you should examine the HTML code behind a Web page only to improve your own skills. The potential theft of another Web page author’s hard work and intellectual property is no small concern. Not only is stealing another Web page author’s code and Web page designs unscrupulous, but in many cases it is illegal, especially if the work is copyrighted. Throughout this book, you will examine the underlying HTML code from various published Web sites. However, remember that your reasons for examining existing HTML code should be to understand the techniques used to create specific elements on a Web page in order to improve your own skills, not to hijack someone else’s hard work. Understanding Client/Server Architecture To be successful in Web development, you need to understand the basics of client/server architecture. There are many definitions of the terms client and server. In traditional client/server architecture, the server is usually some sort of database from which a client requests information. A server fulfills a request for information by managing the request or serving the requested information to the client—hence the term, client/server. A system consisting of a client and a server is known as a two-tier system. One of the primary roles of the client, or front end, in a two-tier system is the presentation of an interface to the user. The user interface gathers information from the user, submits it to a server, or back end, then receives, formats, and presents the results returned from the server. The main responsibility of a server is usually data storage and management. On client/server systems, heavy processing, such as calculations, usually takes place on the server. As desktop computers become increasingly powerful, however, many client/server systems have begun placing at least some of the processing responsibilities on the client. In a typical client/server system, a client computer might contain a front end that is used for requesting information from a database on a server. The server locates records that meet the client request, performs some sort of processing, such as calculations on the data, and then returns the information to the client. The client computer can also perform some processing, such as building the queries that are sent to the server or formatting and presenting the returned data. Figure 1-3 illustrates the design of a two-tier client/ server system. 15 CHAPTER 1 Introduction to JavaScript Client request Server response 16 Client Figure 1-3 Two-tier client/server architecture is a physical arrangement in which the client and server are two separate computers. Three-tier client/server architecture is more conceptual than physical, because the storage tier can be located on the same server. Multitier client/server architecture is also referred to as n-tier architecture. Server The design of a two-tier client/server system The Web is built on a two-tier client/server system, in which a Web browser (the client) requests documents from a Web server. The Web browser is the client user interface. You can think of the Web server as a repository for Web pages. After a Web server returns the requested document, the Web browser (as the client user interface) is responsible for formatting and presenting the document to the user. The requests and responses through which a Web browser and Web server communicate happen with HTTP. For example, if a Web browser requests the URL http://www.course.com, the request is made with HTTP because the URL includes the HTTP protocol. The Web server then returns to the Web browser an HTTP response containing the response header and the HTML (or XHTML) for Course Technology’s home page. After you start adding databases and other types of applications to a Web server, the client/server system evolves into what is known as a three-tier client architecture. A three-tier, or multitier, client/server system consists of three distinct pieces: the client tier, the processing tier, and the data storage tier. The client tier, or user interface tier, is still the Web browser. However, the database portion of the two-tier client/server system is split into a processing tier and the data storage tier. The processing tier, or middle tier, handles the interaction between the Web browser client and the data storage tier. (The processing tier is also sometimes called the processing bridge.) Essentially, the client tier makes a request of a database on a Web server. The processing tier performs any necessary processing or calculations based on the request from the client tier, and then reads information from or writes information to the data storage tier. The processing tier also handles the return of any information to the client tier. Note that the processing tier is not the only place where processing can occur. The Web browser (client tier) still renders Web page documents (which requires processing), and the database or application in the data storage tier might also perform some processing. Figure 1-4 illustrates the design of a three-tier client/server system. Introduction to Web Development Processing tier Client tier Data storage tier 17 Handles user interface display (the Web browser) and submits requests to the processing tier Handles interaction between the Web browser client and the data storage tier Stores data in a database and returns requests presented by the processing tier Can be the same computer Figure 1-4 The design of a three-tier client/server system JavaScript and Client-Side Scripting As mentioned earlier, HTML was not originally intended to control the appearance of pages in a Web browser. When HTML was first developed, Web pages were static—that is, they couldn’t change after the browser rendered them. However, after the Web grew beyond a small academic and scientific community, people began to recognize that greater interactivity and better visual design would make the Web more useful. As commercial applications of the Web grew, the demand for more interactive and visually appealing Web sites also grew. HTML and XHTML could only be used to produce static documents. You can think of a static Web page written in HTML or XHTML as being approximately equivalent to a document created in a wordprocessing or desktop publishing program; the only thing you can do with it is view it or print it. Thus, to respond to the demand for greater interactivity, an entirely new Web programming language was needed. Netscape filled this need by developing JavaScript. JavaScript is a client-side scripting language that allows Web page authors to develop interactive Web pages and sites. Client-side scripting refers to a scripting language that runs on a local browser (on the client tier) instead of on a Web server (on the processing tier). Originally designed for use in Navigator Web browsers, JavaScript is now also used in most other Web browsers, including Firefox and Internet Explorer. The term scripting language is a general term that originally referred to fairly simple programming languages that did not contain the CHAPTER 1 18 Many people think that JavaScript is related to or is a simplified version of the Java programming language. However, the languages are entirely different. Java is an advanced programming language that was created by Sun Microsystems and is considerably more difficult to master than JavaScript. Although Java can be used to create programs that can run from a Web page, Java programs are usually external programs that execute independently of a browser. In contrast, JavaScript programs always run within a Web page and control the browser. Introduction to JavaScript advanced programming capabilities of languages such as Java or C++. When it comes to Web development, the term scripting language refers to any type of language that is capable of programmatically controlling a Web page or returning some sort of response to a Web browser. It’s important to note that, although the term scripting language originally referred to simple programming languages, today’s Web-based scripting languages are anything but simple. The part of a browser that executes scripting language code is called the browser’s scripting engine. A scripting engine is just one kind of interpreter, with the term interpreter referring generally to any program that executes scripting language code. When a scripting engine loads a Web page, it interprets any programs written in scripting languages, such as JavaScript. A Web browser that contains a scripting engine is called a scripting host. Firefox and Internet Explorer are examples of scripting hosts that can run JavaScript programs. JavaScript was first introduced in Navigator and was originally called LiveScript. With the release of Navigator 2.0, the name was changed to JavaScript 1.0. Subsequently, Microsoft released its own version of JavaScript in Internet Explorer 4.0 and named it JScript. When Microsoft released JScript, several major problems occurred. First, the Netscape and Microsoft versions of the JavaScript language differed so greatly that programmers were required to write almost completely different JavaScript programs for Navigator and Internet Explorer. To avoid similar problems in the future, an international, standardized version of JavaScript, called ECMAScript, was created. The most recent version of ECMAScript is edition 3. Both Netscape JavaScript and Microsoft JScript conform to ECMAScript edition 3. Nevertheless, Netscape JavaScript and Microsoft JScript each include unique programming features that are not supported by the other language. In this book, you will learn to create JavaScript programs with ECMAScript edition 3, which is supported by all current Web browsers including Firefox, Netscape 6 and higher, and Internet Explorer 4 and higher. Although JavaScript is considered a programming language, it is also a critical part of Web page authoring. This is because the JavaScript language “lives” within a Web page’s elements. JavaScript gives you the ability to: • Turn static Web pages into applications such as games or calculators. • Change the contents of a Web page after a browser has rendered it. • Create visual effects such as animation. • Control the Web browser window itself. Introduction to Web Development For security reasons, the JavaScript programming language cannot be used outside of the Web browser. For example, to prevent mischievous scripts from stealing information, such as your e-mail address or credit card information you use for an online transaction, or from causing damage by changing or deleting files, JavaScript does not allow any file manipulation whatsoever. Similarly, JavaScript does not include any sort of mechanism for creating a network connection or accessing a database. This limitation prevents JavaScript programs from infiltrating a private network or intranet from which information might be stolen or damaged. Another helpful limitation is the fact that JavaScript cannot run system commands or execute programs on a client. The ability to read and write cookies is the only type of access to a client that JavaScript has. Web browsers, however, strictly govern cookies and do not allow access to cookies from outside the domain that created them. This security also means that you cannot use JavaScript to interact directly with Web servers that operate at the processing tier. Although the programmer can employ a few tricks (such as forms and query strings) to allow JavaScript to interact indirectly with a Web server, if you want true control over what’s happening on the server, you need to use a server-side scripting language, as explained in the next section. Understanding Server-Side Scripting Server-side scripting refers to a scripting language that is executed from a Web server. Some of the more popular server-side scripting languages are PHP, Active Server Pages (ASP), and Java Server Pages (JSP). One of the primary reasons for using a server-side scripting language is to develop interactive Web sites that communicate with a database. Server-side scripting languages work in the processing tier and have the ability to handle communication between the client tier and the data storage tier. At the processing tier, a server-side scripting language usually prepares and processes the data in some way before submitting it to the data storage tier. Some of the more common uses of server-side scripting language that you have probably already seen on the Web include the following: • Shopping carts • Search engines • Mailing lists and message boards • Web-based e-mail systems • Authentication and security mechanisms • Web logs (blogs) • Games and entertainment 19 CHAPTER 1 20 Introduction to JavaScript Unlike JavaScript, a server-side scripting language can’t access or manipulate a Web browser. In fact, a server-side scripting language cannot run on a client tier at all. Instead, a server-side scripting language exists and executes solely on a Web server, where it performs various types of processing or accesses databases. When a client requests a server-side script, the script is interpreted and executed by the scripting engine within the Web server software. After the script finishes executing, the Web server software translates the results of the script (such as the result of a calculation or the records returned from a database) into HTML or XHTML, which it then returns to the client. In other words, a client will never see the server-side script, only the HTML or XHTML that the Web server software returns from the script. Figure 1-5 illustrates how a Web server processes a server-side script. Client requests a PHP script The scripting engine within the Web server interprets and executes the server-side scripting code and translates the results into HTML or XHTML Web server returns HTML or XHTML Web browser Figure 1-5 Web server Web server sofware How a Web server processes a server-side script Should You Use Client-Side or Server-Side Scripting? An important question in the design of any client/server system is deciding how much processing to place on the client and how much to place on the server. In the context of Web site development, you must decide whether to use client-side JavaScript or a server-side script. This is an important consideration because the choice you make can greatly affect the performance of your program. In some cases, the decision is simple. For example, if you want to control the Web browser, you must use JavaScript. If you want to access a database on a Web server, you must use a server-side script. However, there are tasks that both languages can accomplish, such as validating forms and manipulating cookies. Furthermore, both languages can perform the same types of calculations and data processing. A general rule of thumb is to allow the client to handle the user interface processing and light processing, such as data validation, but have the Web server perform intensive calculations and data storage. This division of labor is especially important when dealing with clients and servers over the Web. Unlike with clients on a private network, it’s Introduction to Web Development not possible to know in advance the computing capabilities of each client on the Web. You cannot assume that each client (browser) that accesses your client/server application (Web site) has the necessary power to perform the processing required by the application. For this reason, intensive processing should be performed on the server. Because servers are usually much more powerful than client computers, your first instinct might be to let the server handle all processing and only use the client to display a user interface. Although you do not want to overwhelm clients with processing they cannot handle, it is important to perform as much processing as possible on the client for several reasons: • Distributing processing among multiple clients creates applications that are more powerful, because the processing power is not limited to the capabilities of a single computer. Client computers become more powerful every day, and advanced capabilities such as JavaScript are now available in local Web browsers. Thus, it makes sense to use a Web application to harness some of this power and capability. A Web application is a program that executes on a server but that clients access through a Web page loaded in a browser. • Local processing on client computers minimizes transfer times across the Internet and creates faster applications. If a client had to wait for all processing to be performed on the server, a Web application could be painfully slow over a busy Internet connection. • Performing processing on client computers lightens the processing load on the server. If all processing in a three-tier client/server system is done on the server, the server for a popular Web site could become overwhelmed trying to process requests from numerous clients. Short Quiz 2 1. What are the differences among Web page design, Web page authoring, and Web development? 2. What are the primary roles of the client and the server in two-tier system architecture? 3. What is the purpose of the processing tier in three-tier system architecture? 4. Why are scripts written with the JavaScript programming language restricted to executing only within a Web browser? 21 CHAPTER 1 Introduction to JavaScript Adding JavaScript to Your Web Pages The following sections introduce basic procedures for adding JavaScript to your Web pages. 22 Using the Element JavaScript programs run from within a Web page (either an HTML or XHTML document). That is, you type the code directly into the Web page code as a separate section. JavaScript programs contained within a Web page are often referred to as scripts. The element tells the Web browser that the scripting engine must interpret the commands it contains. The type attribute of the element tells the browser which scripting language and which version of the scripting language is being used. You assign a value of “text/javascript” to the type attribute to indicate that the script is written with JavaScript. You need to include the following code in a document to tell the Web browser that the statements that follow must be interpreted by the JavaScript scripting engine: statements Next, you will add a script section to the Menu page for Don’s Pizza. To add a script section to the Menu page for the pizza restaurant: 1. Return to the menu.html document in your text editor. 2. Replace the [Add code here] line with the following script section: 3. Save the menu.html document. The individual lines of code, or statements, that make up a JavaScript program in a document are contained within the element. The following script contains a single statement that writes the text “Can you hear me now?” to a Web browser window, using the write() method of the Document object, which you will study shortly: document.write("Can you hear me now?"); Notice that the preceding statement ends in a semicolon. Many programming languages, including C++ and Java, require you to end all statements with a semicolon. JavaScript statements are not required to end in semicolons. Semicolons are strictly necessary only when you want to separate statements that are placed on a single line. Adding JavaScript to Your Web Pages For example, the following script contains two statements on the same line, with each statement ending in a semicolon: document.write("Can you "); document.write ("hear me now?"); As long you place each statement on its own line, separated from other lines with line breaks, you are not required to end statements with semicolons. The following code shows another example of the preceding script, but this time, each statement is placed on its own line, without an ending semicolon. document.write("Can you ") document.write("hear me now?") Even though the statements do not end in semicolons, the preceding script is legal. However, that’s not the end of the story. Programmers often adopt conventions in their code that make the code easier for the programmer to read in a text editor. In the case of semicolons, it is considered good JavaScript programming practice to end any statement with a semicolon. The semicolon serves to identify the end of each statement, making it easier for the programmer to read his or her own code (and for other programmers to read the code later on). Therefore, be sure to end all of your JavaScript statements with semicolons. Understanding JavaScript Objects Before you can use elements to create a JavaScript program, you need to learn some basic terminology that is commonly used in JavaScript programming and in other kinds of programming languages. In addition to being an interpreted scripting language, JavaScript is considered an object-based programming language. An object is programming code and data that can be treated as an individual unit or component. For example, you might create a CarLoan object that calculates the number of payments required to pay off a car loan....
Purchase answer to see full attachment