Andrew Watt and Jonathan Watt with Jinjer Simon and Jim O’Donnell

Teach Yourself

JavaScript in

21 Days

800 East 96th St., Indianapolis, Indiana, 46240 USA

™

Sams Teach Yourself JavaScript™ in 21 Days

ACQUISITIONS EDITOR

Copyright © 2002 by Sams Publishing

Jonathan Steever

All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Neither is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 0-672-32297-8 Library of Congress Catalog Card Number: 2001092863 Printed in the United States of America

03

02

6

DEVELOPMENT EDITOR MANAGING EDITOR Charlotte Clapp

PROJECT EDITOR Tony Reitz

COPY EDITOR Karen Whitehouse

INDEXER Larry Sweazy

PROOFREADER Cindy Long

TECHNICAL EDITOR

First Printing: May 2002 04

Betsy Brown

Jim O’Donnell 5

4

3

Trademarks

TEAM COORDINATOR Amy Patton

All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark.

INTERIOR DESIGN

Warning and Disclaimer

PRODUCTION

Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The authors and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book.

Gary Adair

COVER DESIGN Aren Howell Ayanna Lacey

Contents at a Glance Introduction Week 1

1 7

1

Getting the Basics Right

2

Working with Data

47

3

Functions and Statements

79

4

JavaScript Is Object-Based

119

5

An Introduction to Arrays

161

6

HTML Forms and the String Object

201

7

Numbers and Math

249

Week 2

9

283

8

The Browser Issue

285

9

Date and Time Manipulation

307

10

Events and Event Handling

331

11

Dynamic HTML

357

12

Windows and Frames

383

13

Regular Expressions Make It Easier

415

14

Advanced Array Management

453

Week 3

493

15

Debugging and Error Handling

495

16

Cookies: Storing Persistent Data

531

17

Privacy and Security

565

18

Plugins and Applets

583

19

Creating Your Own Objects

603

20

JavaScript in E-Commerce

621

21

JavaScript and SVG

649

Appendixes

687

A

New Features in JavaScript 1.5

689

B

Color Codes

693

C

Functions Reference

699

D

Resources Online

717

E

A Short History of JavaScript

723

Index

729

Contents Introduction

WEEK 1 A Sound Foundation DAY 1 Getting the Basics Right

1

7 9

Introducing JavaScript ..........................................................................................10 What Is JavaScript? ..........................................................................................10 What Does JavaScript Do? ..............................................................................12 JavaScript in Context ............................................................................................12 A Requirement for More Than Just HTML ....................................................12 Server-Side or Client-Side? ..............................................................................13 Server-Side ......................................................................................................13 Client-Side ........................................................................................................14 Reality ..............................................................................................................15 Selecting the Right Technology ............................................................................15 JavaScript, Jscript, and ECMAScript ....................................................................18 JavaScript..........................................................................................................18 JScript ..............................................................................................................18 ECMAScript ....................................................................................................18 Let’s Get Started ....................................................................................................19 Choosing a Text Editor and Web Browser ......................................................19 Basic Things to Remember ..............................................................................22 Where Does JavaScript Go? ............................................................................23 Reusing Code....................................................................................................32 Documenting Your Code ..................................................................................33 Reserved Words ................................................................................................34 Data Types ............................................................................................................36 Numbers............................................................................................................36 Boolean ............................................................................................................38 Strings ..............................................................................................................38 Some Useful Tools ................................................................................................41 The alert() Function ......................................................................................41 The confirm() Function ..................................................................................42 The prompt() Function ....................................................................................43 Summary ..............................................................................................................44 Workshop ..............................................................................................................44 Q&A ................................................................................................................44 Quiz ..................................................................................................................44 Quiz Answers....................................................................................................45 Exercises ..........................................................................................................45

vi

Sams Teach Yourself JavaScript in 21 Days

DAY 2 Working with Data

47

Simple Data Storage ..............................................................................................48 Variables ..........................................................................................................48 Constants ..........................................................................................................53 Operators................................................................................................................54 Understanding Operators..................................................................................55 JavaScript Operators ..............................................................................................57 Arithmetic Operators ........................................................................................57 Comparison Operators......................................................................................60 Conditional Operator ........................................................................................65 Logical Operators ............................................................................................67 String Operators................................................................................................70 Assignment Operators ......................................................................................71 Bitwise Operators ............................................................................................73 Operator Precedence ........................................................................................75 Summary ................................................................................................................76 Workshop ..............................................................................................................76 Q&A ................................................................................................................77 Quiz ..................................................................................................................77 Quiz Answers....................................................................................................77 Exercises ..........................................................................................................77 DAY 3 Functions and Statements

79

User Defined Functions ........................................................................................80 What Is a Function?..........................................................................................80 Creating a Function ..........................................................................................80 Using Functions................................................................................................82 Predefined Global Functions ................................................................................91 URI Encoding and Decoding ..........................................................................92 Evaluating Strings as Code ..............................................................................94 Arithmetic Functions ........................................................................................95 What Is a Statement? ..........................................................................................102 Control Statements ..............................................................................................103 Conditional Statements ..................................................................................103 Loop Statements ..................................................................................................110 The while Statement ......................................................................................111 The do while Statement ................................................................................112 The for Statement ..........................................................................................113 The for in Statement ....................................................................................116 Summary ..............................................................................................................117 Workshop ............................................................................................................117 Q&A ..............................................................................................................117 Quiz ................................................................................................................117

Contents

vii

Quiz Answers..................................................................................................118 Exercise ..........................................................................................................118 DAY 4 JavaScript Is Object-Based

119

Understanding Objects ........................................................................................120 What Are Objects?..........................................................................................120 Client-Side JavaScript Objects ............................................................................122 The window Object..........................................................................................122 The Dot Notation............................................................................................122 Variable or Property? Function or Method? ..................................................124 The window Object’s Children ........................................................................129 The document Object ..........................................................................................130 Properties ........................................................................................................131 Methods ..........................................................................................................133 Child Objects ..................................................................................................137 The body Object..............................................................................................140 Environment Objects ..........................................................................................141 The location Object ......................................................................................142 Loading a New Page ......................................................................................143 Accessing the URL ........................................................................................144 The history Object ......................................................................................147 The navigator Object ....................................................................................149 The screen Object..........................................................................................150 Core JavaScript Objects ......................................................................................150 Exploring an Object ............................................................................................154 Summary ..............................................................................................................158 Workshop ............................................................................................................159 Q&A ..............................................................................................................159 Quiz ................................................................................................................159 Quiz Answers..................................................................................................159 Exercises ........................................................................................................159 DAY 5 An Introduction to Arrays

161

What Is an Array? ................................................................................................161 Creating an Array ................................................................................................164 Providing Individual Arguments ....................................................................164 Creating an Empty Array and Populating It ..................................................165 Array Literals..................................................................................................167 Accessing Arrays ................................................................................................168 Parallel Arrays ................................................................................................171 Array Properties ..................................................................................................174

viii

Sams Teach Yourself JavaScript in 21 Days

Array Methods ....................................................................................................179 The toString() Method ................................................................................180 The toLocaleString() Method ....................................................................180 The join() Method ........................................................................................181 Adding and Removing Elements from an Array............................................182 The reverse() Method ..................................................................................189 The toSource() Method ................................................................................193 The valueOf() Method ..................................................................................193 Associative Arrays ..............................................................................................193 Storing Objects in Array Elements ......................................................................197 Summary ..............................................................................................................199 Workshop ............................................................................................................199 Q&A ..............................................................................................................199 Quiz ................................................................................................................199 Quiz Answers..................................................................................................200 Exercise ..........................................................................................................200 DAY 6 HTML Forms and the String Object

201

Collecting Data from HTML Forms....................................................................202 Why Use JavaScript in Forms? ......................................................................205 Accessing Form Elements Using JavaScript..................................................205 Properties of the

Element ..................................................................206 Methods of the Form Object ..........................................................................211 Form Elements ....................................................................................................215 The elements Collection ................................................................................216 Properties Common to Several Form Elements ............................................219 The text Element ..........................................................................................221 The textarea Element ..................................................................................223 Check Boxes ..................................................................................................226 Radio Buttons ................................................................................................228 Select Boxes ..................................................................................................230 Buttons............................................................................................................233 The String Object ..............................................................................................233 String Properties ............................................................................................235 String Methods ..............................................................................................236 Checking User Input ............................................................................................242 Summary ..............................................................................................................245 Workshop ............................................................................................................246 Q&A ..............................................................................................................246 Quiz ................................................................................................................246 Quiz Answers..................................................................................................246 Exercises ........................................................................................................247

Contents

DAY 7 Numbers and Math

ix

249

The Number Object ..............................................................................................250 Numbers in JavaScript....................................................................................250 Properties of the Number object ......................................................................255 Methods of the Number Object........................................................................258 The valueOf() method ..................................................................................266 The Math Object ..................................................................................................267 Predefined Properties ..........................................................................................267 Methods of the Math Object ................................................................................270 Creating Your Own Math Functions ....................................................................278 Finding the Factorial of a Number ................................................................278 Finding the nth Root ......................................................................................279 Log to Base N ................................................................................................280 Summary ..............................................................................................................281 Workshop ............................................................................................................281 Q&A ..............................................................................................................281 Quiz ................................................................................................................281 Quiz Answers..................................................................................................281 Exercises ........................................................................................................282

WEEK 2 Let’s Take It Further DAY 8 The Browser Issue

283 285

Different Browsers, Different JavaScript ............................................................286 JavaScript History ..........................................................................................286 ECMA Standards............................................................................................287 Cross-Browser Compatible Scripting ..................................................................288 Browsers That Don’t Support JavaScript ......................................................289 Browsers with JavaScript Support Turned Off ..............................................290 Determining Browser Information ................................................................292 Determining Browser Support for Specific Objects ......................................297 The W3C DOM ..................................................................................................298 Accessing Nodes ............................................................................................300 Summary ..............................................................................................................302 Workshop ............................................................................................................303 Q&A ..............................................................................................................303 Quiz ................................................................................................................304 Quiz Answers..................................................................................................304 Exercises ........................................................................................................305 DAY 9 Date and Time Manipulation

307

JavaScript and Dates ............................................................................................308 The Date Object ..................................................................................................309 Creating a Specific Date Object ....................................................................310

x

Sams Teach Yourself JavaScript in 21 Days

Date Formatting ..................................................................................................312 Converting the Numeric Day and Month Values ..........................................314 Combining Date Values ..................................................................................316 Time Formatting ..................................................................................................317 Converting to an AM/PM Time Frame ..........................................................319 Working with Time Zones..............................................................................322 Converting Date and Time Formats ....................................................................323 Date Calculations............................................................................................325 Converting Between Strings and Dates..........................................................327 Summary ..............................................................................................................327 Workshop ............................................................................................................328 Q&A ..............................................................................................................328 Quiz ................................................................................................................328 Quiz Answers..................................................................................................328 Exercises ........................................................................................................329 DAY 10 Events and Event Handling

331

Understanding Events ..........................................................................................332 Creating an Event Handler ..................................................................................332 Handling an Event with a JavaScript Statement ............................................333 Handling Events with JavaScript Function Calls ..........................................334 Capturing Events Directly Within JavaScript ................................................335 Types of Events....................................................................................................337 How to Handle Events ........................................................................................339 Monitoring Form Changes ............................................................................339 Working with Keyboard Events ....................................................................342 Monitoring an Object’s Focus ........................................................................344 Monitoring Window and Document Events ..................................................346 Capturing Mouse Actions ..............................................................................346 Summary ..............................................................................................................353 Workshop ............................................................................................................354 Q&A ..............................................................................................................354 Quiz ................................................................................................................354 Quiz Answers..................................................................................................355 Exercises ........................................................................................................355 DAY 11 Dynamic HTML

357

What is DHTML? ................................................................................................358 Using Cascading Style Sheets ............................................................................358 Defining Styles ..............................................................................................359 Creating CSS Rules ........................................................................................363 Creating Classes ............................................................................................369 Working with Layers ..........................................................................................371 Changing Attributes of an HTML Element ........................................................374

Contents

xi

Moving Things ....................................................................................................377 Summary ..............................................................................................................380 Workshop ............................................................................................................381 Q&A ..............................................................................................................381 Quiz ................................................................................................................382 Quiz Answers..................................................................................................382 Exercises ........................................................................................................382 DAY 12 Windows and Frames

383

What Are Windows and Frames? ........................................................................384 Window Properties and Methods ..................................................................385 Determining Window Location ..........................................................................390 Working with Window History............................................................................393 Working with the Status Line ..............................................................................394 Using the Screen Object......................................................................................397 Working with Frames ..........................................................................................399 Referencing Frame Locations ........................................................................403 Breaking Out of Frames ................................................................................406 Forcing Frames ..............................................................................................407 Working with Popups ..........................................................................................409 Summary ..............................................................................................................411 Workshop ............................................................................................................412 Q&A ..............................................................................................................412 Quiz ................................................................................................................412 Quiz Answers..................................................................................................413 Exercises ........................................................................................................413 DAY 13 Regular Expressions Make It Easier

415

Why Regular Expressions Are Useful ................................................................416 What Is a Regular Expression?............................................................................417 Matching a Literal Character Sequence ........................................................418 Some Simple Patterns ..........................................................................................422 Single Literal Character Choices....................................................................422 Choices Using Sequences of Literal Characters ............................................425 Patterns That Use Numbered Occurrences of Classes ..................................426 Patterns Using Variable Numbers of Occurrences ........................................430 Regular Expressions Overview............................................................................436 Defining Regular Expressions ............................................................................436 Creating a Regular Expression Using Literals ..............................................436 Creating Regular Expressions Using a Constructor ......................................437 Special Characters ..........................................................................................440 Quantifiers ..........................................................................................................444

xii

Sams Teach Yourself JavaScript in 21 Days

The Methods of the RegExp Object......................................................................446 Using the exec() Method ..............................................................................446 Using the test() Method ..............................................................................447 The Properties of the RegExp Object ..................................................................448 Scoping a Regular Expression Using the global Property............................448 Making a Regular Expression Case Insensitive Using the ignoreCase Property........................................................................................................449 Summary ..............................................................................................................449 Workshop ............................................................................................................449 Q&A ..............................................................................................................449 Quiz ................................................................................................................450 Quiz Answers..................................................................................................450 Exercises ........................................................................................................450 DAY 14 Advanced Array Management

453

The Array Object’s Methods ..............................................................................453 The concat() Method ....................................................................................454 The slice() Method ......................................................................................463 The splice() Method ....................................................................................464 The sort() Method ........................................................................................470 Multidimensional Arrays ....................................................................................484 Summary ..............................................................................................................491 Workshop ............................................................................................................491 Q&A ..............................................................................................................491 Quiz ................................................................................................................491 Quiz Answers..................................................................................................492 Exercises ........................................................................................................492

WEEK 3 Advanced Topics DAY 15 Debugging and Error Handling

493 495

Preventing and Classifying JavaScript Errors ....................................................496 Commenting Code..........................................................................................496 Keeping Track of JavaScript Variables ..........................................................497 JavaScript Error Types....................................................................................498 Finding Syntax Errors..........................................................................................498 Errors in Netscape Navigator ........................................................................499 Errors in Internet Explorer ............................................................................500 Debugging Load-Time Errors..............................................................................501 Using the document.writeln() Method ........................................................503 Using the Alternate Inputs..............................................................................506 Debugging Run-Time Errors I: Discrete Events ................................................509 Using the alert() Method ............................................................................511 Using HTML Form Elements ........................................................................514

Contents

xiii

Debugging Run-Time Errors II: Continuous Events ..........................................518 Advanced Debugging Techniques ......................................................................524 Creating a Run-Time JavaScript Interpreter ..................................................524 Opening a Debug Browser Window ..............................................................527 Using JavaScript Debuggers ................................................................................527 Summary ..............................................................................................................529 Workshop ............................................................................................................529 Q&A ..............................................................................................................529 Quiz ................................................................................................................530 Quiz Answers..................................................................................................530 Exercise ..........................................................................................................530 DAY 16 Cookies: Storing Persistent Data

531

Maintaining State ................................................................................................532 Cookies: An Introduction ....................................................................................533 Advantages of Cookies ..................................................................................534 Limitations of Cookies ..................................................................................534 Disadvantages of Cookies ..............................................................................534 Cookie Myths ................................................................................................535 Using Cookies......................................................................................................535 Retrieving Cookie Values ..............................................................................536 Setting Cookie Values ....................................................................................537 A Cookie Example ........................................................................................542 Where Are Cookies Going?............................................................................557 Where to Find More Information About Cookies..........................................557 Other State Maintenance Options........................................................................558 Using Query Strings to Send Information......................................................558 How to Use Hidden Form Variables ..............................................................561 Summary ..............................................................................................................562 Workshop ............................................................................................................562 Q&A ..............................................................................................................562 Quiz ................................................................................................................562 Quiz Answers..................................................................................................563 Exercise ..........................................................................................................563 DAY 17 Privacy and Security

565

Privacy for Web Users ........................................................................................566 File Restrictions..............................................................................................566 Cookies ..........................................................................................................568 Browser Window Access ................................................................................569 Computer Resource Limitations ....................................................................569 Privacy for Webmasters ......................................................................................570 Same Origin Policy ........................................................................................572

xiv

Sams Teach Yourself JavaScript in 21 Days

Privacy Impact on JavaScript ..............................................................................573 Password Protection ......................................................................................573 Creating Signed Scripts in Netscape ..............................................................577 Summary ..............................................................................................................580 Workshop ............................................................................................................580 Q&A ..............................................................................................................580 Quiz ................................................................................................................581 Quiz Answers..................................................................................................581 Exercises ........................................................................................................582 DAY 18 Plugins and Applets

583

Plugins Versus Applets ........................................................................................584 Detecting Plugin Installation ..............................................................................585 Plugin Handling by Browsers ........................................................................586 Checking for a Plugin ....................................................................................588 Determining Browser Support for a File Type ..............................................592 Working with Plugin Objects ..............................................................................594 Working with Applets ..........................................................................................595 Java Basics......................................................................................................596 Calling a Java Applet......................................................................................597 Interfacing with Java Applets ........................................................................598 Summary ..............................................................................................................599 Workshop ............................................................................................................599 Q&A ..............................................................................................................599 Quiz ................................................................................................................600 Quiz Answers..................................................................................................600 Exercises ........................................................................................................601 DAY 19 Creating Your Own Objects

603

What Is a Custom Object? ..................................................................................604 Different Data Types Within One Object ......................................................605 Combine Multiple Data Elements into One Object ......................................605 Create Methods and Properties Specific for the Custom Object ..................605 Use of the Constructor to Create Objects............................................................606 Adding Properties to the Object ....................................................................606 Creating an Instance of a Custom Object............................................................608 Accessing Properties of a Custom Object......................................................610 Changing the Value of an Object Property ....................................................611 Creating Object Methods ....................................................................................613 Linking Objects Together ....................................................................................616 Summary ..............................................................................................................618

Contents

xv

Workshop ............................................................................................................619 Q&A ..............................................................................................................619 Quiz ................................................................................................................620 Quiz Answers..................................................................................................620 Exercises ........................................................................................................620 DAY 20 JavaScript in E-Commerce

621

Requirements for an E-Commerce Site ..............................................................622 Shop Structure......................................................................................................622 The Online Catalog..............................................................................................625 Creating the Custom Database ......................................................................625 Designing Your Catalog..................................................................................627 The Bookstore Code ......................................................................................629 Creation of the Books.js File ........................................................................631 Shopping Carts ....................................................................................................635 Solving Floating-Point Math Errors ..............................................................636 Deleting Orders ..............................................................................................638 Gathering User Information ..........................................................................639 Coding for the Shopping Cart Page ..............................................................641 Issues to Consider ..........................................................................................645 Summary ..............................................................................................................646 Workshop ............................................................................................................646 Q&A ..............................................................................................................646 Quiz ................................................................................................................647 Quiz Answers..................................................................................................647 Exercises ........................................................................................................647 DAY 21 JavaScript and SVG

649

Overview of Scalable Vector Graphics ................................................................650 Why SVG?......................................................................................................650 Why SVG and JavaScript? ............................................................................651 Basic SVG Tools ............................................................................................651 Example SVG Code ............................................................................................654 The SVG Document Object Model ....................................................................656 Batik DOM Viewer ........................................................................................656 SVG DOM Basics ..........................................................................................658 Using JavaScript in SVG ....................................................................................659 The <script> Element in SVG Documents ..................................................659 Specifying the Scripting Language ................................................................660 A Skeleton SVG Document with JavaScript..................................................661 Adding a Title to an SVG Image....................................................................661 Creating a Simple Shape Using JavaScript ....................................................664 Adding Text Using JavaScript ........................................................................666

xvi

Sams Teach Yourself JavaScript in 21 Days

A Timed Animation Using JavaScript............................................................668 Creating a Shape That Responds to Events ..................................................670 JavaScript Beyond Declarative Animation ..........................................................676 Interaction Between the HTML and SVG DOM ................................................682 Finding Out More About SVG ............................................................................684 Summary ..............................................................................................................684 Workshop ............................................................................................................684 Q&A ..............................................................................................................685 Quiz ................................................................................................................685 Quiz Answers..................................................................................................685 Exercises ........................................................................................................686

Appendixes

687

A New Features in JavaScript 1.5

689

Number Formatting Additions ............................................................................689 toExponential Method ..................................................................................689 toFixed Method..............................................................................................690 toPrecision Method ......................................................................................690 Runtime Error Messages......................................................................................690 Regular Expressions ............................................................................................691 Greedy Quantifiers ........................................................................................691 Non-Capturing Parentheses ............................................................................691 Support for Positive and Negative Lookahead Assertions ............................691 The Multiple-Line Flag with RegExp ............................................................691 Conditional Function Declarations ......................................................................691 Functions Can Be Declared Within an Expression ............................................692 Multiple Catch Clauses........................................................................................692 B Color Codes

693

Color Names Specified as Plain-Language ........................................................694 Hexadecimal Color Value ....................................................................................695 RGB Color Values................................................................................................698 C Functions Reference

699

abs() ....................................................................................................................699 acos() ..................................................................................................................700 asin() ..................................................................................................................700 atan() ..................................................................................................................700 atan2() ................................................................................................................701 atob() ..................................................................................................................701 Boolean()

............................................................................................................701

btoa() ..................................................................................................................702

Contents

captureEvents()

................................................................................................702

catch() ................................................................................................................703 ceil() ..................................................................................................................703 cos() ....................................................................................................................703 Date() ..................................................................................................................704 decodeURI()

........................................................................................................704

decodeURIComponent() ........................................................................................704 encodeURI()

........................................................................................................704

encodeURIComponent() ........................................................................................705 Error() ................................................................................................................705 escape()

..............................................................................................................705

eval() ..................................................................................................................706 exp() ....................................................................................................................706 floor() ................................................................................................................706

..........................................................................................................707 ........................................................................................................707 handleEvent() ....................................................................................................708 isFinite() ..........................................................................................................708 isNaN() ................................................................................................................708 log() ....................................................................................................................709 max() ....................................................................................................................709 min() ....................................................................................................................709 Number() ..............................................................................................................710 Object() ..............................................................................................................710 parseFloat() ......................................................................................................711 parseInt() ..........................................................................................................711 pow() ....................................................................................................................712 random() ..............................................................................................................712 releaseEvents() ................................................................................................712 rgb() ....................................................................................................................713 round() ................................................................................................................713 routeEvents() ....................................................................................................713 ScriptEngine() ..................................................................................................714 sin() ....................................................................................................................714 sqrt() ..................................................................................................................714 tan() ....................................................................................................................714 toString() ..........................................................................................................715 unescape() ..........................................................................................................715 unwatch() ............................................................................................................715 watch() ................................................................................................................716 Function()

GetObject()

xvii

D Resources Online

717

JavaScript ............................................................................................................717 CNET Builder.COM ......................................................................................717 Dynamic Drive ..............................................................................................718 JavaScript Kit ................................................................................................718 The JavaScript Source ....................................................................................718 JavaScript World ............................................................................................718 Microsoft JScript Reference ..........................................................................718 Netscape JavaScript Developer Central ........................................................718 Netscape Plugin Guide ..................................................................................718 W3C World Wide Web Consortium ..............................................................719 W3Schools.com..............................................................................................719 WebReference.com ........................................................................................719 Java and Java Applets ..........................................................................................719 FreewareJava.com ..........................................................................................719 The Java Boutique ..........................................................................................719 Java Technology Tutorials ..............................................................................719 Javalobby ........................................................................................................719 JavaWorld ......................................................................................................720 The Source for Java Technology ....................................................................720 ZDNet Developer ..........................................................................................720 HTML ..................................................................................................................720 HTML Writers Guild......................................................................................720 NCSA Beginners Guide to HTML ................................................................720 Website Tips ..................................................................................................720 CGI ......................................................................................................................721 CGI 101 ..........................................................................................................721 CGI City ........................................................................................................721 The CGI Resource Index................................................................................721 The Common Gateway Interface....................................................................721 E A Short History of JavaScript

723

Evolution of the Internet ................................................................................723 Internet Programming Revolution ..................................................................724 JavaScript Introduction ..................................................................................725 Browser Support of JavaScript Versions ........................................................727 Index

729

About the Authors Andrew Watt is an independent consultant and author with expertise in XML and Web technologies including SVG. He is author of Designing SVG Web Graphics (New Riders) and XPath Essentials (Wiley). He is co-author of XML Schema Essentials (Wiley) and contributing author to XHTML, XML & Java 2 Platinum Edition (Que), Professional XSL, Professional XML 2nd Edition, and Professional XML Meta Data (Wrox). Jonathan Watt has been working with JavaScript for two years and has been Webmaster of the Strathclyde University Skills Society Web site, as well as a number of his own Web sites such as dsvg.com. His primary expertise is in the application of JavaScript in the client-side environment, but he also has used ASP and PHP to create database-driven Web sites. He is currently in the third year of a master’s degree in engineering at Strathclyde. Jinjer Simon has been actively involved in the computer industry for the past 17 years. Her involvement in the industry has included programming, providing software technical support, end-user training, developing written and online user documentation, creating software tutorials, developing Internet Web sites, and writing technical books. Jinjer and her husband currently live in Coppell, Texas, with their two children where she currently works as a consultant for MillenniSoft Inc. by providing Web site development and online documentation development. Jim O’Donnell was born on October 17, 1963, in Pittsburgh, Pennsylvania (you may forward birthday greetings to [email protected]). After a number of unproductive years, he went to Rensselaer Polytechnic Institute for 11 years earning three degrees. He now lives in Washington, DC, and spends most of his time building spacecraft. He has been writing and editing books for eight years. When he isn’t working, he collects comic books and PEZ dispensers and plays ice hockey for the DC Nationals. Go, Nats!

Dedication I would like to dedicate my contribution to this book to the memory of my late father George Alec Watt—a very special human being. —Andrew Watt To my immediate and extended family, all of whom I love very much. —Jonathan Watt To Ryan Miller. Italy in 2006! —Jim O’Donnell

Acknowledgments Andrew Watt and Jonathan Watt We would first like to thank Shelley Johnston, who assisted in getting this project off the ground. We also would like to sincerely thank Betsy Brown whose ingenuity, practical suggestions, and almost limitless patience steered this project to a successful conclusion. We would also like to thank Jim O’Donnell, whose knowledge of JavaScript ideally fitted him to be technical editor for the book and who helped pick up those small errors that are so easy to overlook as an author. Jon Steever did his usual thorough and perceptive editing job on the submitted manuscript. Thanks, Jon. Finally, thanks to our fellow authors Jinjer Simon and Jim O’Donnell, without whose efforts the book would not have been completed.

Jinjer Simon I would like to thank Betsy Brown for giving me the opportunity to work on this book. I would also like to thank Karen Whitehouse, Tony Reitz, and Jon Steever—the editors at Sams who pulled everything together on the book. I would also like to thank the Technical Editor on this book, Jim O’Donnell. He did a great job of identifying changes that needed to be made to enhance the content of the book. Finally I would like to thank my husband and two children for their patience while I worked to meet the deadlines on this book.

Jim O’Donnell I would like to acknowledge Betsy Brown, Jon Steever, and all of the other fine editors I’ve worked with over the years.

Tell Us What You Think! As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can e-mail or write me directly to let me know what you did or didn’t like about this book—as well as what we can do to make our books stronger. Please note that I cannot help you with technical problems related to the topic of this book, and that due to the high volume of mail I receive, I might not be able to reply to every message. When you write, please be sure to include this book’s title and author as well as your name and phone or e-mail address. I will carefully review your comments and share them with the author and editors who worked on the book. E-mail:

[email protected]

Mail:

Mark Taber Associate Publisher Sams Publishing 800 East 96th Street Indianapolis, IN 46240 USA

Introduction JavaScript has become the most important client-side scripting language on the Web. It provides the Web developer with the functionality to create rollover effects, move objects around the browser screen, check the validity of data entered into HTML and XHTML forms, and much, much more. Sams Teach Yourself JavaScript in 21 Days will give you an understanding of JavaScript that will help you carry out the day-to-day tasks that you will use JavaScript to accomplish. As you master more and more of the important aspects of JavaScript, you will be able to add functionality to your existing Web pages, improving their impact on the experience of your Web site visitors. JavaScript has come a long way since it was first introduced in version 2 of the Netscape browser. While JavaScript, currently at version 1.5, is still produced by Netscape, there is an internationally recognized, standardized scripting language, ECMAScript, which is made available to developers on a more open basis. Both Netscape’s JavaScript and Microsoft’s JScript are based on ECMAScript, although both extend its functionality. In the late 1990s, incompatibilities among JavaScript versions were a major problem for Web developers. Many of those problems are disappearing as users upgrade to more modern versions of browsers, which have been introduced since the ECMAScript standardization process started. With the advent of Netscape version 6, the Netscape browser is making fuller use of standards such as the Document Object Model and Cascading Style Sheets. Unfortunately the first release, Netscape 6.0, had a number of problems that are being progressively ironed out as the Netscape browser transitions through versions 6.1 and later. As users discontinue use of browsers such as Netscape 3 and Internet Explorer 3, the need to support outdated implementations of client-side scripting becomes less. This makes writing cross-browser JavaScript code a much less frustrating and demanding task than it was only a few years ago. Both Microsoft and Netscape genuinely seem to attach importance to standards as they relate to JavaScript. Hopefully many of the remaining problems will be ironed out in the near future. The future for JavaScript is an exciting one.

How This Book Is Organized Sams Teach Yourself JavaScript in 21 Days is organized into 21 chapters, and they are written in such a way that you can work through one chapter a day and complete the book in three weeks, if you have the time available to do so. The book has been written so that you can work through chapters in the order in which they are presented. If you decide to dip into a particular chapter that interests you, then you may need to refer back

2

Sams Teach Yourself JavaScript in 21 Days

to earlier chapters to fully understand the code and how you can further develop it for your own use. Week 1 Day 1, “Getting the Basics Right,” introduces you to JavaScript and helps you to understand what kind of language JavaScript is. The tools you need to create and view JavaScript are discussed, and how to correctly create a JavaScript script within an HTML/XHTML file is covered. Day 2, “Working with Data,” introduces you to how JavaScript handles data. Day 2 also shows you how to store data in variables, and then how to change the value of that data, as well as how to create constants that can be used unchanged throughout a script are discussed. In Day 3, “Functions and Statements,” you are shown how to create code, stored in functions, which you can re-use as often as needed in your scripts. You also are shown how to create code that executes depending on conditions you define, and how to create code that loops through a process as often as you specify. Day 4, “JavaScript Is Object-Based,” introduces you to the important topic of JavaScript objects by discussing what an object is, and how you can use objects to write efficient scripts. Day 5, “An Introduction to Arrays,” teaches you what an array is, and how to create and use them. Collecting information from users is a hugely important part of the interactive Web. Day 6, “HTML Forms and the String Object,” introduces you to using JavaScript with HTML/XHTML forms to collect data from visitors to the Web sites you have created. Strings of characters are commonly collected when using forms, and Day 6 will show you how strings are handled in JavaScript. Day 7, “Numbers and Math,” introduces the JavaScript Number and Math objects and teaches you how numbers are handled in JavaScript as well as how to use the built-in mathematical functions which the JavaScript interpreter makes available to a scripter. Week 2 Day 8, “The Browser Issue,” tells you about the differences in the variety of browser versions and how they handle JavaScript. It also shows you how to produce JavaScript code that will run on commonly used modern browsers. Day 9, “Date and Time Manipulation,” introduces you to the JavaScript Date object and shows you how to create code that will handle dates and times.

Introduction

Day 10, “Events and Events Handling,” presents the important topic of events. You are shown what an event is and how to create your code to run in response to appropriate events, which take place within a Web browser. Day 11, “Dynamic HTML,” introduces Dynamic HTML, often referred to as DHTML. DHTML makes use of Cascading Style Sheets and layers, which allow interactive and dynamic Web pages to be created, taking Web pages to a new level. Day 12, “Windows and Frames,” tells you how JavaScript can be used in association with Web pages which use multiple frames, and how JavaScript can be used to create new windows. Day 13, “Regular Expressions Make It Easier,” introduces the JavaScript regular expressions that give the scripter enormous control over the patterns of string characters a user is allowed to enter into an HTML/XHTML form, for example. Day 14, “Advanced Array Management,” takes you deeper into the use of the JavaScript object, building on the knowledge you gained in Day 5.

Array

Week 3 Day 15, “Debugging and Error Handling,” shows you how to diagnose and correct errors that you may create as you build longer and more complex JavaScript scripts. Day 16, “Cookies: Storing Persistent Data,” introduces cookies, files JavaScript creates and stores on a user’s machine that can be used from one browser session to another. Day 17, “Privacy and Security,” introduces you to the important topic of security in JavaScript, and then discusses how Web developers and users are affected by JavaScript’s security model. Day 18, “Plugins and Applets,” demonstrates how JavaScript can be used with browser plugins and Java applets. Day 19, “Creating Your Own Objects,” shows you how to create custom objects that can be used with the built-in objects that JavaScript provides. Day 20, “JavaScript in E-Commerce,” discusses the use of JavaScript in e-commerce and shows you how to use JavaScript in the creation of an online shopping basket. Day 21, “JavaScript and SVG,” takes you beyond the world of HTML/XHTML to show you a little of how JavaScript will be used with the exciting new Web graphics format SVG—Scalable Vector Graphics.

3

4

Sams Teach Yourself JavaScript in 21 Days

Who Should Read This Book This book is designed to meet the needs of Web developers who want to add intelligence and interactivity to their Web pages using JavaScript.

What This Book Assumes We assume that you are comfortable using the World Wide Web, and that you are familiar with creating HTML and/or XHTML pages—so, there will not be an explanation of the basics of HTML and XHTML as JavaScript is applied to the fairly straightforward Web pages shown as examples in the book. If you are not confident that you are fully comfortable creating HTML/XHTML, perhaps you might want to have an introductory HTML or XHTML book at hand as you work through this book. Sams Teach Yourself HTML and XHTML in 24 Hours by Michael Morrison is a book you might consider as a reference to keep at hand. We also assume that you are either new to JavaScript or have very limited experience trying it out. As you are introduced to the individual parts of JavaScript, we won’t assume that you already know that material, but we will assume that you are a fairly quick learner and that you have seen many of JavaScript’s effects and know its capabilities.

Conventions Used in This Book This book uses the following conventions: Text that you type or see on screen appears in monospace.

Note

A Note presents interesting information related to the discussion.

Tip

A Tip offers advice or shows you an easier way to accomplish a task.

Caution

A Caution alerts you to a possible problem, and provides advice on how to avoid it.

Introduction

What’s on the Web Site? On the Web site, you will find the code for all the full code listings that we will create in the book. These will be useful to you if you receive error messages that you can’t solve when you run code that you have typed in. Great care has been taken to eliminate errors in the book but any reported errors will be listed on the Web site too. To get to the Web site, point your Web browser to http://www.samspublishing.com/. In the Search box, type in javascript in 21. Find this book from the list presented, and click on the link. On the book’s main page, find and click the link called Related Materials to get to the files.

5

WEEK 1 A Sound Foundation 1 Getting the Basics Right 2 Working with Data 3 Functions and Statements 4 JavaScript Is Object-Based 5 An Introduction to Arrays 6 HTML Forms and the String Object 7 Numbers and Math

WEEK 1

DAY

1

Getting the Basics Right JavaScript is a scripting language that allows you to add interactivity to HTML or XHTML Web pages. XHTML, the Extensible HyperText Markup Language, is HTML 4 rewritten in XML syntax. JavaScript is the scripting language of choice when it comes to adding interactivity and functionality to your Web pages that HTML or XHTML alone cannot provide. This book will introduce you to many of the most useful characteristics and features of JavaScript. At times, some of the topics may seem a bit abstract when they are introduced. For now, know that JavaScript works most powerfully when you use several of its aspects together. So initially you may need to learn some features of JavaScript through step-by-step examples in order to understand the explanation. As you get further into the book, you will gain the confidence in your own ability to combine these techniques, and begin to create JavaScript scripts that work and, with practice, perform exactly as you want on a Web page. If you work through the examples you will, by the time you finish this book, be a competent author of JavaScript scripts, applying its power to bring your site to life.

10

Day 1

In this introductory chapter, we will introduce you to both the applications and the basic structure of the JavaScript language. This will provide you with a solid foundation on which to build your knowledge of JavaScript throughout the rest of the book. Today you will learn • What JavaScript is • The foundations of JavaScript syntax including datatypes and a number of JavaScript functions

Introducing JavaScript The primary questions you need to ask yourself when you start to learn something new is “what is it?” and “what does it do?” So let’s begin there.

What Is JavaScript? To state some commonly heard jargon, JavaScript is a cross-platform, object-based scripting language that most commonly is used on the Web. If you are new to programming, that definition may not mean too much to you. So let’s look at each of its features.

Cross-Platform In computer terminology, the term platform is used as shorthand for operating system platform. Examples of operating systems that commonly run on desktop computers today include Windows (various flavors), Linux, and the MacOS. What we mean when we say that JavaScript is cross-platform is that it will (for the most part) run happily and produce the same results on a wide variety of different computer operating systems. The cross-platform nature of JavaScript is a very important aspect of the language. People use all sorts of different operating systems on the computers they use to connect to the Internet. Without JavaScript’s ability to behave consistently across platforms, it would be much more difficult for you to write scripts that would allow Internet users who use a variety of platforms to benefit from the JavaScript-based enhancements you might want to add to your Web pages. One of the central aims of JavaScript’s inventors was to create a cross-platform scripting language, which has been a key factor in its success. Without it, JavaScript wouldn’t have been nearly so appealing to Web designers—most of whom want to reach the widest audience possible.

Getting the Basics Right

11

Object-Based Up until now, the language you most likely would have used was HTML—which means you already know it is a markup language. Markup languages use tags to surround pieces of text. The tags tell the browser how that text should be treated. JavaScript is quite different. It requires that a data structure such as the structured information on a Web page already exist. It then treats the data on a page as a series of hierarchically structured objects that it can use. If the phrase “hierarchically structured objects” doesn’t mean too much to you, don’t worry, we will come back to that topic. In fact, we will be dedicating the whole of Chapter 4, “JavaScript Is Object-Based,” to investigating JavaScript’s object-based nature, as well as describing and using objects in many of the later chapters. For the moment, it is enough that you appreciate that objects allow you to more easily organize and manipulate Web pages.

Scripting Language JavaScript is also a scripting language. It is important to note that there are significant differences between scripting languages and standalone programming languages (for example, C++ or Visual Basic). Among the differences between scripting languages such as JavaScript and the many other computer languages are that scripting languages are interpreted and they usually require significantly less code. If a language is an interpreted language it simply means that the code you write does not need to be compiled into binary computer code before it can be used. Instead scripting languages are turned into instructions that a computer understands by parsing them with an interpreter each time the code is run. Another important difference is that a scripting language runs within another program or application, such as a Web browser. A typical client-side JavaScript script is contained within an HTML/XHTML Web page. Languages such as C++ and Java can be run independently, although Java also allows programs (called applets) to run within Web pages too. The JavaScript interpreter is the software that is built into the browser, which then takes your JavaScript code and follows the instructions within the code step by step. All major browsers that are version 3.0 and higher, support JavaScript.

Note

JavaScript can be run on the client side—within a Web browser—or it can be run on a Web server or Web-application server. In this book we will be covering client-side JavaScript only.

1

12

Day 1

An important practical difference you will notice when using a scripting language is that when you write a JavaScript script you tend to write a lot less code than for a standalone program. This is because the Web browser provides a lot of useful functionality that supports JavaScript. Scripts are easier to write but run more slowly than code which is compiled. The advantage of the scripting code is that it is often easier to write and demands less complex and expensive tools than some compiled languages.

What Does JavaScript Do? JavaScript “does” a number of things. Its main use, however, is for the enhancement of Web pages. It enables you to program a Web page so that it has motion or other interactivity which HTML alone cannot provide. JavaScript also can provide error checking of information collected from forms on your Web page.

JavaScript in Context Before we begin our study of the JavaScript language for real, let’s take a brief look at the need for JavaScript and how it fits in with other popular Web technologies.

A Requirement for More Than Just HTML Over the past decade a typical computer user has experienced a vast increase in the quality and functionality of the programs they use. Advances in software and hardware have contributed to improvements in both functionality and appearance. Computer users have grown accustomed to colorful, dynamic, and engaging programs. And they are now far less willing to settle for information presented in a bland and non-interactive format. Adding JavaScript to the Web browser makes Web pages more immediately interactive than was possible using interactivity that depended on server-side processing. Things are no different on the Web. Although originally intended as a way to make static text without any graphics accessible over a network, the Web has changed considerably over the years since its conception. Advances in HTML and the addition of CSS (Cascading Style Sheets) have come a long way in enabling the addition of color and images to Web pages to make them more visually pleasing. However, by itself HTML is still very much a static presentation format. The most it can offer in terms of user interaction is the use of hyperlinks or perhaps some form elements for a user to fill out. Even then, HTML can’t perform these useful tasks (such as checking the validity of information entered into a form) without the aid of another technology.

Getting the Basics Right

Competition among a growing number of Web sites puts increasing pressure on Web developers to find ways of attracting people to their sites, and keeping them coming back for further visits. This has led to the development of a wide variety of new and sometimes exciting technologies being developed to augment the simple but useful functionality provided by HTML. Some of these new technologies are intended to enhance the user experience with dynamic and interactive pages, and others are aimed at enabling the development of useful business functionality and other services. The JavaScript language is one of the key Web-enhancing technologies available. Its difference is underscored by its ability to bring otherwise static HTML pages to life.

Server-Side or Client-Side? Broadly speaking, Web-enhancing technologies can be split into two camps: server-side technologies and client-side technologies. Server-side and client-side simply describe where a technology runs—that is, which computer is used to do the processing. Confused? Okay, in a computer network, whether it is the Internet or a company intranet, there are two types of computers: clients and servers. A server’s job is to store documents (in our case Web documents) and send them to any other computers that ask for them. A computer that makes a request to a server (asks for a file which is held on the server) is called a client. Therefore if a technology is a “server-side” technology, it simply means that it uses the server to run and process data. Similarly, if a technology is a “client-side” technology, then it processes data on the client machine, most often within or in association with Web-browser software. This is an important distinction to make as it can make a big difference to the way things work.

Server-Side Technologies such as CGI (Common Gateway Interface), ASP (Active Server Pages), and JSP (JavaServer Pages) are examples of server-side technologies with which you might be familiar. When you use a Web site you may see fairly frequently within a URL (Uniform Resource Locator) the letters “cgi” or the filename endings “.asp” or “.jsp”. Quite likely you regularly make use of their functionality for a variety of different purposes. For example, every time you submit a search to a search engine you’re making use of server-side processes. In the case of search engines, an HMTL form is used to collect your search criteria, which are then sent to the server for processing. After the programs or scripts on the server have finished doing their job, the results are turned into HTML and returned by the Web server to your browser.

13

1

14

Day 1

The problem with server-side processing is the time it takes for the desired results to appear. The reasons for this are twofold. First there is the submit-and-wait aspect of the Internet. It takes time for data to reach the server and be processed, and for the results to be passed back. This can be especially frustrating for the many users who are connected to the Internet by means of a dial-up connection. A second reason for possible delays is the fact that server-side technologies load the server with the job of processing. This isn’t too much of a problem if the server is required to handle only a limited number of requests at a time. However, all computers have limited processing power. On busy servers handling perhaps many thousands of requests an hour and coping with dozens if not hundreds of requests at once, everything can very noticeably slow down, and in some cases can stop altogether. If you have used the Web frequently, you will almost certainly have seen those error messages in the browser which indicate that a Web site isn’t responding at that time and suggesting you try again later. Very likely at the time you made your request the capacity of the server was stretched and it simply couldn’t accept a further request for information. The wait for pages to load due to network transit time and server processing time inherent in server-side technologies is undesirable. It also makes running the scripts on the server side for some applications (such as DHTML, Dynamic HTML) simply unfeasible, since the whole process would become too slow and unresponsive to allow real-time interaction between the user and the Web page. Dynamic HTML, by the way, is a term used to describe various combinations of HTML, JavaScript, and CSS which allow additional interactivity or animation within Web pages. You should carefully weigh the pros and cons of using the server to do the processing. The original objective of improving interactivity and providing new applications should not be negated by excessive waiting times.

Client-Side When using server-side technologies the client computer—and often the human user— sits idle waiting for pages to arrive, while at the other end the server may be struggling to keep up with its workload. An obvious solution to this problem is to carry out at least some of the processing on the client computer. The first benefit of moving some of the load to the client-side is that it reduces the number of times the user has to load a page and thereby incur the inevitable time penalty of data traveling the Internet. When, for example, the validation of data entered on a form on an HTML Web page is conducted client-side using JavaScript, network delays are avoided altogether, at least until the point where the data has been validated and is ready to be sent to the server for definitive processing.

Getting the Basics Right

An important advantage of client-side scripting is that it enables the Web page itself to be programmed. In effect, this enables dynamic Web pages which can respond to user actions as they view and interact with the page. In addition to the direct benefit of removing a load from the server, whenever a new page must be requested the server can respond to requests a lot faster because it isn’t bearing the load of processing multiple scripts. Consequently, requests aren’t queued at all or for such a long time. By reducing the time spent waiting for pages to download from the server, this approach can greatly enhance a user’s browsing experience.

Reality Of course, in reality, a client computer cannot do everything. All sorts of Web-based services require that data be sent to the server to be stored or processed. For example placing an order on an e-commerce site simply wouldn’t be possible if the order never left your computer. At the same time, there’s no point using up server resources (its processing power) and incurring the inevitable time lag of sending data to the server when a task can be done perfectly adequately, or maybe even better on the client-side. In practice both client- and server-side technologies are used. Both are important for the diverse functioning of modern Web pages. When a task requires that information be sent to the server, for example for permanent storage, then it should be sent. Though, if possible, the load of processing data and ensuring its validity should be carried out on the client-side using scripts. By spreading the load between client and server computers, it is more likely that the best results can be obtained.

Selecting the Right Technology There are other client-side technologies, for example Flash, which are used mainly to enhance the look and feel of the user experience. Typically there is no built-in support in mainstream browsers simply because it is practical to support only a limited number of data formats so a Flash plug-in has to be used. The major browsers have a JavaScript interpreter built in, but to add a whole range of additional functionality would make the browser even larger (and they are already pretty bloated). To solve this problem, software plug-ins were developed and they first appeared in Netscape Navigator 2. By allowing users to choose which plug-ins they needed for the data they wanted to access, part of the bloated-browser problem could be removed. Plugins also allow the data to be blended into the document seamlessly rather than the browser opening up an application to display it. Animation also can be integrated into part of a page; and audio or video can be downloaded and played or streamed for live content.

15

1

16

Day 1

The downside of Web technologies that use plug-ins is that not everyone who views your Web page will have the necessary plug-in installed. For Flash this isn’t too great a problem now since the plug-in is widely distributed. For the newer Scalable Vector Graphics format (which we will look at in Chapter 21, “JavaScript and SVG”), fewer users will have an SVG plug-in and therefore care has to be taken to provide an alternate viewing experience for users who can’t yet view SVG. A link to a download can be provided, but some users may prefer, for whatever reason, not to bother. JavaScript support on the other hand has been provided in all the major browsers for a number of years now. JavaScripts can be very compact although you can make them as long and complex as you choose. However, keep in mind that the large file size often associated with Flash data is off-putting to many users, especially if they use a dial-up Internet connection. So, strive to keep your JavaScript as succinct as possible. There are occasions when a developer will require more power on the client-side than HTML and the other “popular” Web technologies can provide. Java in the form of Java applets was designed to address this problem. Applets are small Java applications (hence the name) written specifically for use within the context of a Web browser. Java is a full programming language that can run cross-platform and which can, for example, delete or overwrite files, therefore Java applets are designed to be limited (so as not to be used to create a security risk). Java is often a logical choice in environments (such as in some intranets) where you can be sure all visitors will have Java capabilities in their browsers. However, it can be problematic using Java applets on the Internet since not everyone chooses to allow Java applets to function in their browser. Java applets can be integrated seamlessly into a Web page. For example Java applets are commonly used as Web-based chat clients because Java can maintain a connection to a server listening for any new messages, unlike most scripting technologies. Java’s streaming ability also makes it popular with sites providing instant updates on news and stock prices. The downside of Java applets is similar to that for plug-ins in that they can take longer to download than some users are willing to wait. Not all browsers are able to handle Java, and some users also decide to turn it off. Java also has the problem of complexity, at least for those unfamiliar with using a full programming language. It is a full programming language in its own right. This prevents it from being a viable option for many casual or part-time developers. A language with Java’s power but a simpler syntax, and that made fewer demands on programmers, could offer many advantages.

Getting the Basics Right

In 1995, Brendan Eich, inspired by Apple’s HyperCard, was developing just such a language. Netscape originally released the language under the name LiveScript, which was intended to run on both the client and server-sides. At the time, Netscape’s browser had the major share of the browser market and so LiveScript—with its ability to move some of the work previously done by the server to the client—caught on very quickly. By the time Navigator 2 was released in early 1996, LiveScript had been renamed JavaScript. Unfortunately this association with Java has caused, and still causes, a lot of confusion to those who are new to the Web development community. JavaScript is not Java! JavaScript is not a cut-down version of Java. Despite syntactic and structural similarities there are also some significant differences between the two. Java was developed as a full programming language capable of creating its own GUI (Graphical User Interface). JavaScript on the other hand was designed simply to work within a Web browser with HTML elements already in existence. In JavaScript there is a lot to learn about, but it is still simpler to learn than a full programming language, and it can be used productively almost from the word go. It also can be just about as complex or as simple as you want it to be. For some applications, you may only want to use it to place the cursor in the first element of a form so the user can start typing when the page loads. For another, you might use it to create a complex and dynamic image-based navigation menu. As you acquire JavaScript skills working through this book, you will be able to make your own choices about how you want to use JavaScript. As we said earlier, JavaScript can be used server-side and for a number of other applications. However, its most common use is on the client-side in HMTL pages where it is downloaded and run on the client (on the computer of the person viewing the Web page). It is here where it has the ability to turn static HMTL and images into a lively interactive user experience that has made it the widely used phenomenon it is today. JavaScript allows you to move objects around on a Web page and respond to various user actions. JavaScript isn’t the solution to every Web project. It is, however, the natural choice for checking forms, detecting user input (even down to detecting the position of the mouse on the screen), manipulating the Web page, and processing data that doesn’t need to be sent to the server. JavaScript doesn’t have any inherent graphics capabilities, but it is increasingly being used to script vector graphic formats such as Flash and Scalable Vector Graphics (SVG). You will be introduced to the use of JavaScript with SVG in Chapter 21, “JavaScript and SVG.”

17

1

18

Day 1

JavaScript, Jscript, and ECMAScript JavaScript has several “flavors” so when you begin learning JavaScript certain terms may confuse you. More experienced developers often will refer to JavaScript, Jscript, and ECMAScript. So what exactly are these scripting languages? And what are the differences?

JavaScript JavaScript, as mentioned earlier, was the term Netscape, who invented JavaScript, chose to use for what was originally a proprietary scripting language. In fact, Netscape owned the name JavaScript. Version 1.0 of JavaScript originated in the Netscape browser version 2.0. In Netscape 3, JavaScript version 1.1 followed.

JScript It wasn’t long before Microsoft acknowledged the potential of JavaScript and integrated its implementation into Microsoft Internet Explorer 3. Microsoft then created JScript, since using the term JavaScript would have acknowledged Netscape’s ownership of the technology. Although it uses its own interpreter and varies from JavaScript, in some ways JScript has many similarities to JavaScript. From the developer’s perspective, once you have learned one, you know most of the other. Although Microsoft might at one time have preferred that VBScript be used in preference to JavaScript, JavaScript has remained the client-side scripter’s language of choice—partly because the Netscape browser was more popular initially, but even more so because JavaScript is available on a larger range of browsers than JScript. VBScript is now uncommonly found in mainstream Web pages because only Microsoft browsers support it. Strangely enough as JavaScript’s popularity with the server-side scripter waned, VBScript became ever more popular in the server-side scripting technology ASP. On the client side, however, there were sufficient differences between JavaScript and JScript so that writing cross-platform scripts was far from easy. The JavaScript standard was passed to the European Computer Manufacturers Association, ECMA, in order to create a “standard” version of what had been JavaScript. Enter ECMAScript.

ECMAScript With the advent of version 4 of Netscape Navigator and Internet Explorer both browsers attempted to implement a standards-based version of JavaScript, ECMAScript. Arguably Internet Explorer did a better job of implementation than Netscape, and this may have been one minor factor in Internet Explorer’s expansion to become the dominant force in the Web browser market.

Getting the Basics Right

ECMA (European Computer Manufacturers Association) is an international industry association. It has developed a number of standards for the computer industry, most of which can be downloaded free from their Web site at http://www.ecma.ch. ECMAScript is the name that has been adopted for the ECMA-262 standard that came about after Netscape proposed JavaScript 1.1 as a standard. ECMAScript is the de facto international standard for JavaScript. At the time of writing, it was in its third iteration, which is roughly equivalent to JavaScript 1.5 and JScript 5.5. It is important to realize that ECMAScript is a standard for the core JavaScript language. By “core” we mean the language features that exist independent of which environment JavaScript is being used in (Web browser, PDF, and so on). This includes features such as those used for doing math or handling dates. These parts of the language do not interact with or depend on the presence of a browser. The parts that enable JavaScript to communicate with and manipulate its host environment are covered by a different standard known as the World Wide Web Consortium Document Object Model (or W3C DOM for short). This standard is important to HTML so you already may have come across it. As well as describing how HTML should be written, it specifies how JavaScript can access and manipulate parts of HTML documents. We will be looking at that aspect of the language later in the book. In practice, ECMAScript is not a language for JavaScript scripters to learn from. It is intended for browser developers so that their implementation of JavaScript will have the same functionality as other browser developers. ECMAScript has done a good job of bringing more uniformity to the JavaScript language. JavaScript will always include features that are not part of the ECMAScript specification, partly in order to provide backwards compatibility for older versions of browsers. JavaScript is compatible with ECMAScript, while providing additional features. We have spent quite a bit of time describing JavaScript’s background; now let’s begin to look at how to use the language itself.

Let’s Get Started To become a JavaScript author you are going to need two tools: a text editor and a browser.

Choosing a Text Editor and Web Browser You may well be used to using a WYSIWYG (What You See Is What You Get) editor such as Adobe GoLive, Microsoft FrontPage, or NetObjects Fusion for creating your

19

1

20

Day 1

Web pages. However, when it comes to scripting you will have to get used to typing code out by hand, although HTML editors such as Adobe GoLive and Macromedia DreamWeaver provide some pre-packaged JavaScripts, which you can use without necessarily understanding the code that such programs produce. Typically WYSIWYG editors will produce some nice effects but if you don’t understand the JavaScript that underlies those effects, you won’t be able to modify the effects to produce exactly the effect you want. The examples throughout this book have been included on the CD-ROM for your convenience. You will remember a lot more if you type out the scripts yourself, so we would encourage you to do so. Even the times when you make mistakes in typing will help you really grasp the details you need to master to become an efficient scripter. Whatever you decide, you will still need a means of writing scripts when it’s time to write your own. To do this you will need a text editor. When you save text in a word processor it is saved in files that include many formatting codes, which browsers aren’t designed to handle. It is possible to use a word processor but you must remember to save a file as plain (ASCII) text, and often it’s really more trouble than it’s worth. A text editor on the other hand saves files in ASCII format without adding proprietary codes that browsers cannot read. It is also relatively simple to get text editors to save files with an .htm or .html extension.

Note

In this book we will consistently use the .htm file extension. A browser on a 32-bit Windows platform will treat a file with .htm the same as a file with .html. Some platforms only allow three-letter file extensions. If you are using such a platform, then you will be able to use only the .htm file extension.

For the Windows user, you likely have a version of Notepad already installed. Look for Notepad in the Start menu, under Programs, Accessories. Notepad will be adequate for creating many JavaScript scripts, but once your files start to get large you may want to use WordPad or download a version of a more fully featured shareware editor such as TextPad. For MacOS users, SimpleText will be adequate to begin with, but an editor with more features, such as BBEdit, will be useful as you advance to creating longer and more complex scripts. Most of the screen shots in this book have been taken using Notepad and Netscape 6 on the Windows platform. You may be working on a different operating system such as the MacOS or one of the flavors of Unix so the output to your screen may look slightly

Getting the Basics Right

different. If it does look a little different, don’t worry too much about it. Different browsers on different platforms do display things slightly differently but the underlying data is the same. Once you have created your scripts you will, of course, need to view them to make sure that they work, and also that they work as you intended them to work. If you are interested in learning JavaScript, you are more than likely already familiar with using a Web browser such as Microsoft Internet Explorer or Netscape Navigator. As long as your browser is able to understand JavaScript and has JavaScript turned on, then, for the moment, it doesn’t matter which browser you choose. Either Netscape 6 or any recent version of Internet Explorer will enable you to view the results of your scripts. When learning JavaScript it is useful to have access to several Web browsers so you can test your code on all of them. It is often useful to know the differences in the visual appearance of a Web page and the behavior of its interactive parts when viewed in different browsers. Being aware of those differences will give you an insight into what some of your users are seeing when they visit your Web pages. Here is a list of some of the more important Web browsers currently available, together with a URL where you can download them from if you don’t already have them on your machine. • Internet Explorer is currently at version 6.0 and can be downloaded from http://www.microsoft.com/windows/ie/. If you have an earlier version of Internet Explorer and want to update, then open Internet Explorer, go to the Tools menu, and choose Windows Update to begin upgrading your version of Internet Explorer. If you have never done this before, it can be a slow process as you will be required to download various “critical” updates, quite possibly before you can download the new version of Internet Explorer. • Netscape Navigator 4.7 can be downloaded from http://home.netscape.com/browsers/. A variety of Netscape browser versions can be accessed from that page. • Netscape Navigator 6.2 can be found at http://home.netscape.com/browsers/. • The Mozilla browser can be downloaded from http://mozilla.org/releases/. • Opera 6 can be downloaded from http://www.opera.com/download/.

Note

You do not need an Internet connection to use a browser. Web pages stored on your computer can be loaded for viewing locally.

21

1

22

Day 1

Basic Things to Remember In this section we will cover some basic rules which you will need to keep in mind when you write any JavaScript. In time they will become second nature, but at first you may need to consciously think of them as you are writing your scripts.

Case Sensitivity JavaScript is case sensitive. So you have to be very careful to be consistent when using upper and lower case for any name of a JavaScript variable or constant which you create. It is a very common error among those just starting out to find that they have given a variable or function a name and then later write it out again using one or more characters with a different case. In a short script that can be easy to spot but in long scripts it can be very difficult to pin down from where the error is coming. Therefore if you give something the name “myElement” you must always refer to it with exactly the same case— not using the same case can produce either an error or cause unexpected effects.

Semicolons It is good practice to routinely use a semicolon at the end of each JavaScript statement. However, JavaScript doesn’t actually require that lines be finished with a semicolon. When you do need a semicolon is when two or more JavaScript statements need to be written on the same line. This is often used when you are creating a looping construct in JavaScript using a FOR loop, which will be described in a later chapter.

Line Breaks Line breaks can be used to help make your code more readable. The longer your scripts become the more important readability of code becomes.

Whitespace Whitespace characters (tabs, spaces, and new lines) are given their name due to the fact that they aren’t seen except in the way they create space within your code. Apart from the spaces necessary to separate certain elements of JavaScript code, the JavaScript interpreter will ignore extraneous whitespace. Therefore x = y + z

can also be written as x

=

y

+

z

Although writing code like this is acceptable to the JavaScript interpreter, it makes it more awkward for most people to read and understand the code. The idea behind JavaScript ignoring extraneous whitespace is to allow us to write out code in a way that

Getting the Basics Right

makes it easy to see the major parts of its structure. By using whitespace to structure our code, we can make it far more readable. For example if we have some code written between a pair of curly brackets: {code code code}

we are able to use whitespace to make this easier to read: { code code code }

The fact that the opening and closing curly braces are written on their own line and at the beginning of a line makes it easy to see where such a block of code starts and ends. This helps our eyes recognize what belongs to what as we scan through a large piece of JavaScript code.

Where Does JavaScript Go? JavaScript, like HTML, is simply text that can be typed directly into a text editor such as Notepad. However, for the JavaScript interpreter to recognize and correctly process your code, you must place your JavaScript code in a place where the JavaScript interpreter in the Web browser is expecting to find it. There are three places where you can put JavaScript code when you are using JavaScript in your HTML pages. Each of these will be explained in more detail below: • In a script block typed into the HMTL • In its own JavaScript file • Inside the opening tag of many HMTL elements

Script Blocks Typing your JavaScript into the HTML of your Web page using a script block is the simplest way to insert JavaScript. But what is a script block? A script block simply put is a piece of JavaScript code surrounded by a pair of HTML <script> tags—an opening <script> tag before the JavaScript and a closing tag after the end of the JavaScript. The <script> tag can be used in HTML to mark up an area of JavaScript just as the

tag can be used to mark up a paragraph or the tag can be used to mark up a form. Listing 1.1 shows an example of how it could be used.

23

1

24

Day 1

INPUT

LISTING 1.1

A Skeleton for JavaScript Code (skeleton.htm)

<script> // // // //

ALL YOUR JAVASCRIPT CODE GOES IN HERE BETWEEN THE OPENING AND CLOSING SCRIPT TAGS.

The content of your page here.

You can place script blocks almost anywhere between the opening and closing HTML tags of your Web page. However, unless it is necessary to place it at a particular place in the body of the HTML page, it is best to put the script block between the opening and closing tags and after the title and any meta tags you may be using. This ensures that your scripts are fully downloaded into the browser before the page is displayed. By doing so, you avoid all sorts of errors that can occur when user actions call scripts that haven’t loaded yet. Lets take a look at the effect different placement of your script can have on the way your page runs. Type the following code from Listing 1.2 into the text editor you have chosen to use.

INPUT

LISTING 1.2

Creating an Alert Box Using JavaScript (firstAlert.htm)

<script> alert(“Do you see the page heading?”);

Getting the Basics Right

LISTING 1.2

continued

Page heading

This should produce an appearance on screen like that in Figure 1.1.

OUTPUT FIGURE 1.1 A JavaScript alert displayed by a script block in the head of the page.

Now try shifting the script block to a point after the page heading, as in Listing 1.3.

INPUT

25

LISTING 1.3

An Alert Box Created by JavaScript Within the HTML Body (secondAlert.htm)

Page heading

<script> alert(“Do you see the page heading?”);

1

26

Day 1

LISTING 1.3

continued



Now you should see something like Figure 1.2:

OUTPUT FIGURE 1.2 The alert box displayed by a script block in the body of the HTML page.

Notice the difference the placement of the script block made. When the script block was in the document head it brought up the alert box before the words “Page heading” had loaded into the browser window. By moving the script block within the body of the HTML page, below the

tags, the words “Page heading” had loaded into the browser and was displayed on the page by the time the JavaScript alert box was shown.

ANALYSIS

Note

The lines of an HTML document are loaded from top to bottom, and each line is loaded from left to right. Therefore whatever you put first will be loaded first.

Caution

Always remember that the <script> tags are an HTML or XHTML tag pair. You should always remember to include the closing tag.

Getting the Basics Right

27

External JavaScript Files Any JavaScript code placed between the <script> tags also can be stored in a separate text file. However, although it is a text file, you must avoid giving it a .txt file extension. It needs to have a .js file extension to be correctly recognized by the JavaScript interpreter. As long as it is given a .js extension the whole script then can be used in an HTML page, as if it was actually typed into the page itself, by including the external JavaScript file. To include a JavaScript file you simply add a src attribute to the opening <script> tag. So the opening <script> tag would look something like this: <script src=”MyFirstExternalScript.js”>

Nothing should be written between the opening and closing tag, so it is best to place the closing tag immediately after the opening tag, like this: <script src”MyFirstExternalScript.js”>

Caution

In XHTML you have the option of writing an empty script tag like this: <script/>. Unfortunately this can cause errors in some browsers, so it is safer to use a <script> tag pair.

Listing 1.4 is an example. There isn’t an external file to link at present. The code is simply to demonstrate the syntax in place. LISTING 1.4

INPUT

An HTML Page That Accesses an External JavaScript File (external.htm)

<script src=”path/to/file/fileName.js”> The content of your page goes here.

1

28

Day 1

Most of the code in this book will be shown in script blocks—since that is easier when teaching a new topic. In practice, however, there are good reasons for using external files for storing your scripts once you get to the stage of writing serious code. We’ll talk about those reasons shortly in the “Reusing Code” section, but for the moment we need to cover a few more things you need to know about using the <script> tags.

Within an HTML Start Tag Placing JavaScript inside the opening tag of an HTML element is a special case. The only part of the JavaScript language ever used in this way is event handlers. Event handlers are quite an advanced topic, which we will look at in Chapter 10, “Events and Events Handling.” For the moment, we will just ignore this aspect until later in the book after you have become more familiar with JavaScript.

Specify the Script Language Currently, JavaScript is the default script language for all browsers so HTML desktop Web browsers will understand your code without you telling the browser that it’s being given JavaScript. However, there is good reason to specify the language that you are using. The default script language could change in the future. In fact, there could be profound changes in browsers over the next few years as the Extensible Markup Language, XML, becomes more widely used, and as mobile browsers become more common too. For the moment at least, it looks unlikely that the default will change for any of the browsers. To cover the possibility of the default scripting language changing, for at least some browsers, you should routinely specify two attributes in your opening <script> tag: the language attribute and the type attribute. Until recently, the language attribute has been the recognized way of telling a browser that a script is JavaScript. Although it is no longer the approved way of doing so, it is the only method which version 4 browsers and below will understand. Therefore, for backward compatibility, it is still necessary to use the language attribute in an opening <script> tag whenever you begin a piece of script. The language attribute is written in the same way you would write other HMTL attributes such as the bgColor attribute. For JavaScript it is simply given the word “javascript” as its value. In this case the J and S of JavaScript are not capitalized. This will allow you to use your scripts in XHMTL documents. XHTML, like JavaScript, is case sensitive and therefore “javascript” (all lowercase) is the only version acceptable for use in XHTML.

Getting the Basics Right

Note

XHTML stands for eXtensible HyperText Markup Language. XHTML 1.0 is HTML 4.0, which has been rewritten in XML rather than in SGML syntax (in which all HTML is actually written).

Assuming you used all lowercase, this is how your opening script tags should now look: <script language=”javascript”>

Or in the case of including an external file: <script src=”path/to/file/fileName.js” language=”javascript”>

New browsers, such as Microsoft Internet Explorer version 5 and above and Netscape Navigator version 6 and above, will continue to support the language attribute for some time, but eventually it is likely that it will fade out. The

Type

Attribute

The specifications for HTML 4.0 and XHTML 1.0 use a different attribute within the opening <script> tag, called the type attribute. The reason for changing to this attribute is to standardize the way of describing the type of content contained in a variety of files accessible across the Web. The types of files are called “media types” and each has its own standard way of being described. When the media type is “text/javascript” a browser, or other Web application, knows that it is dealing with JavaScript, and then can work out whether or not it knows how to process the content of the file by simply accessing the type attribute. When using JavaScript, the type attribute for the script tag takes the value “text/javascript”. To achieve maximum cross-browser version acceptance, it is best to use both the language and type attributes. This ensures not only that your scripts will be understood by old browsers but also that you won’t need to go back and add the type attribute at some future time. If we go back to the example code for a script block, it now should look like this: <script language=”javascript” type=”text/javascript”> // ALL YOUR JAVASCRIPT CODE // GOES IN HERE BETWEEN THE // OPENING AND CLOSING // SCRIPT TAGS.

29

1

30

Day 1

Old Browsers To achieve compatibility with very old browsers, we still have one last thing we probably should add, especially when we use script blocks in Web pages that may be viewed using such old browsers. We need to add comments to the JavaScript code to prevent really old browsers that don’t understand the code from displaying the code in your Web page—which, almost certainly, isn’t what you want. The problem stems from the fact that some very old browsers don’t understand the tag. Take a quick look at what happens when a browser doesn’t understand a tag. Type the HTML shown in Listing 1.5 and after you’ve saved it, take a look at it in your browser.

<script>

INPUT

LISTING 1.5 A Listing Illustrating What Happens When a Browser Doesn’t Recognize a Tag (nonExistentTag.htm)

<nonExistentTag> TYPE OUT LOTS AND LOTS OF TEXT HERE. IT DOESN’T MATTER WHAT IT IS AS LONG AS THERE IS PLENTY OF IT. AS YOU WILL NOTICE THIS TEXT IS IN THE HEAD OF THE DOCUMENT. YOU WOULDN’T REALLY WANT THIS STUFF SHOWING UP ON YOUR PAGE WOULD YOU?

Title of Document

Maybe write some more stuff in here.

If you ran this script you would see an appearance like the one shown in Figure 1.3.

Getting the Basics Right

OUTPUT

1

FIGURE 1.3 The content of unrecognizable tags displayed in a Web page.

As you can see, the browser displayed the text that was between the unrecognized start and end tags. The same thing happens in older browsers that don’t understand the <script> tag. The <script> tags are ignored, and the browser renders the script on the Web page in the browser. Clearly, this could make a mess of a page that would otherwise have looked fine—even if the scripts hadn’t run.

ANALYSIS

Luckily, there is a little trick involving HTML comments which you can use to make sure this doesn’t happen. Take a look at the following code in Listing 1.6:

INPUT

LISTING 1.6 Using HTML Comments to Avoid Errors in Older Browsers (hideScript.htm)

<script language=”javascript” type=”text/javascript”>

31

32

Day 1

LISTING 1.6

continued

Page content here...

If you look closely you will notice that there are a pair of HTML comments nested inside the script tags. This means that if the script tags are ignored (by browsers that don’t understand them), then all the code between them will be hidden by the comment just as a browser knows not to display an HTML comment. This seems quite clever, but what about the JavaScript being interpreted by a more modern browser that does understand how <script> tags are used? Is there the possibility that the HTML comments could cause errors if they were inside the script block? The answer is no. The JavaScript interpreter knows that it is not to try and render the “open comment” mark, and the two forward slashes before the HTML “close comment” mark prevent it from being interpreted (and you’ll see why shortly).

ANALYSIS

So if you include HTML comments inside <script> and tags, your code will work normally and be prevented from displaying on the page.

Reusing Code Before we go on to look at some example JavaScript, let’s take a quick look at the reasons why you might want to store your JavaScript code in an external .js file and include it into your page. For small pieces of code that are specific to an individual Web page, it is likely best to keep the JavaScript code inside the page itself. By keeping everything together in one file, when your code listings are short, it makes finding and maintaining your scripts simpler. However, when the same piece of code possibly could be used in more than one document it is better to store the JavaScript code in an external file. The first benefit of doing this is that if you need to modify the script (as is almost bound to happen at some time); then you don’t need to make repeated changes on every page that uses the script. This can save you a lot of time opening, pasting, saving, and then uploading every file. It also avoids the necessity of making exactly the same changes in each version.

Getting the Basics Right

The second benefit is not as immediately obvious. Because some browsers cache external .js files for the duration of a browser session, then by placing the code in an external JavaScript file your visitors only have to download it once for that browser session. So, for example, if you have several files in a directory that use the same JavaScript navigation menu, then you only need to download the code once but can use it on several pages. While the majority of users are still using modems to connect to the Internet this cuts down the time it takes them to download your pages.

Documenting Your Code Once you start to develop more involved JavaScript applications you will find that your code can become large and complex. If you don’t document your code, this can make it very difficult for someone else to understand how the code works without spending a great deal of time analyzing it line by line. You may even find that you don’t understand it yourself if you need to go back to it and make changes some time after it was written. Writing comments at key places in the code can go a long way to making the code more easily understood, possibly saving you a lot of frustration and wasted time. JavaScript provides two methods to insert comments into your code in order to document what it does: One method comments out a single line and the other method comments out multiple lines. To comment out an individual line, you simply need to type two consecutive forward slashes (//). The JavaScript interpreter will ignore everything that follows the forward slashes to the end of the line. The forward slashes can be placed at the beginning of a line or later in the line after some code. Examples of this style of commenting are below: // This entire line has been commented out! var dynMenuWidth = 10 // This comment follows some code.

There are times when you will need more than just a line or two of text to adequately comment a section of your code. You could, of course, place a couple of forward slashes at the beginning of each line, but that can become pretty tedious. JavaScript has another method to save us the trouble. To begin comments which span several lines we type a forward slash followed by an asterisk (/*). This time the comment does not end with the end of the line. The JavaScript interpreter treats everything on the page as a comment until it comes to an asterisk followed by a forward slash (*/). The following code demonstrates this for you: /* All of the text in a comment block like this is ignored. */

33

1

34

Day 1

Tip

This method is also very useful when you need to temporarily comment out large sections of your code. Much easier than typing and later removing two forward slashes from the beginning of every line!

Caution

Be careful to avoid nesting comments. If you have comments like this: /* x = 1; y = 2; /* this comment will close the outer comment */ z = 3; */

then the */ that ends the second comment will also end the first comment. So when the JavaScript interpreter finds the */ on the final line an error can be expected.

To make it easier to see where these comments start and end, you may find it useful to add a row of characters such as the hyphen at the top and bottom of the comment. As long as they are within the comment marks, the JavaScript interpreter will ignore them too. /* -----------------------------------All of the text in a comment block like this as well as the lines above and below are ignored. -----------------------------------*/

Although you shouldn’t skimp on your comments, try to keep them concise. Remember that they’re downloaded with the rest of the script every time someone requests one of your pages.

Reserved Words JavaScript has a number of words that are set aside for giving instructions to the JavaScript interpreter. These are listed here:

Getting the Basics Right

35

abstract

final

public

boolean

finally

return

break

float

short

byte

for

static

case

function

super

catch

goto

switch

char

if

synchronized

class

implements

this

const

import

throw

continue

in

throws

debugger

instanceof

transient

default

int

true

delete

interface

try

do

long

typeof

double

native

var

else

new

void

enum

null

volatile

export

package

while

extends

private

with

false

protected

At the moment don’t worry about how these keywords are used. As we progress through the book, they will be introduced when we need them. The point in giving the list to you now is to make you aware from the start that some words are reserved and can’t be used in your code except in the ways prescribed in JavaScript.

Caution

JavaScript is case sensitive. In theory, by capitalizing one of the letters of a reserved word you could use it to name something. However, this is very bad practice, creating all sorts of potential confusion.

1

36

Day 1

Data Types This final part of the chapter will conclude with coverage of the different types of valid JavaScript data, and the requirement for data type conversion in JavaScript. Data, the name given to information, which is used by a computer, can come in several different forms. For example, numbers, dates, and text readily spring to mind. Depending on the computer language used to process the data, data that contains different types of information is likely to be treated differently. It is important to know just how the language you are using will treat the data you will use in it. Some programming languages are strongly typed, which means that when a piece of data is included in the program being written its data type must be declared first. The data then must be treated according to strict rules which apply to that particular data type if an error is not to be caused. For example, if you tried to add a number to the end of a statement while using a strongly typed language, the computer wouldn’t know what to do. Most conventional programming languages such as C or C++ are strongly typed. JavaScript is what’s called a dynamically typed language. JavaScript is also weakly typed. You might guess, correctly, that when data is given to a JavaScript script you don’t need to specify its data type. The other aspect of a dynamically typed language is that it allows pieces of data to change types during run time (from the time when the script starts up to when it finishes). However, this doesn’t mean that we can just ignore data types, but JavaScript is more flexible than some other languages. Unless you understand how JavaScript treats data types, things can still turn out to have unexpected results. For example, 10 + 0

is treated by JavaScript as the number 10 but 10 + “0”

is processed by JavaScript as “100”. We will discuss why later.

Numbers Fully featured languages such as Java and C++ have several different data types for numbers that are used depending on its size and nature. The program then knows how much memory to set aside for it.

Getting the Basics Right

In JavaScript the priority is on ease of writing code. Therefore distinctions between different types of numbers are not made, which removes one source of possible coding errors. JavaScript understands numbers in two forms: integers (whole numbers such as the number 10), and floating point numbers (numbers with a fractional part, such as 1.55). Our lives are made easier by the fact that most of the time JavaScript treats all numbers as floating point numbers so we don’t need to worry about number types. Because JavaScript applications are usually small, the difference in performance is not noticeable. JavaScript can handle positive and negative numbers between – 21024 and 21024 (approx. 10307 to 10307). As well as understanding the decimal (base 10) numbers we use, JavaScript also understands octal (base 8) and hexadecimal (base 16) numbers. This can be useful when you want to manipulate an object’s color for example, as colors are commonly expressed in hexadecimal in HTML and XHTML. Unless you specifically tell JavaScript that the number you are giving it is an octal or hexadecimal number it will assume it is a decimal number. To designate a number as octal, you simply start with a zero. To designate a hexadecimal number, it needs to start with a zero and an “x”. Note that while you can give JavaScript octal and hexadecimal numbers to work with, it will always give back the result in decimal form. For example, the following code alert(10 + 10);

returns 20 as you would expect. But alert(010 + 010);

will alert as 16. This is because octal 10 is equivalent to decimal 8, and eight plus eight is 16 (remember it returns numbers in decimal form). For the same reason the following, which adds hexadecimal 10 to hexadecimal 10 (decimal 16 to decimal 16) will alert as 32. alert(0x10 + 0x10);

Caution

Whenever you collect decimal numbers from a user you must strip out any leading zeros otherwise JavaScript will assume it is an octal number.

37

1

38

Day 1

There are three special values that can occur when using numbers. These are as follows: Infinity -Infinity NaN

Positive and negative infinity can result from either of two conditions: if the numbers you are working with exceed the maximum amount that JavaScript can handle, or if you divide a number by 0. In the case of dividing by 0, Infinity (positive infinity) is produced if the number was positive, and –Infinity (negative infinity) if the number was negative. NaN is short for “Not a Number.” NaN can be produced if you attempt to do something inappropriate with a number, such as divide it by a string of characters. If, for example, you tried to divide 100 by “kangaroo” 100 / “kangaroo”

the result would be NaN.

Boolean Often when writing your scripts you will make decisions as to whether JavaScript should do something or not. For example, say you have a Web page that allows a user to fill out an online form to send you an e-mail. Before the user is allowed to submit the form, you may want to check that the return e-mail address that was entered is valid. For the moment, let’s ignore the script you would create in order to accomplish this (it will be dealt with later in the book). The outcome from your test would be either “yes, it is a valid e-mail address” and the form would be sent, or “no, that isn’t an e-mail address” and you would ask again for a valid one. In this case you have been looking for a true or false condition. This scenario is so common in coding that the Boolean data type was created. Boolean data has two and only two possible values: true or false. There is no “maybe,” “perhaps,” or “could be.” JavaScript can only make decisions when given a decisive “yes” or “no” in the form of Boolean logic.

Strings A more obvious data type we might want to use in our scripts is the string data type. However, because JavaScript code itself is written in text, without some means of distinguishing between the text, which is code, and the text that is a string things could become confusing. To solve this problem quote marks can be used to surround a line of text or sequence of characters to indicate it is “not code.” This makes sure that when the

Getting the Basics Right

JavaScript interpreter is run the text is treated just as a series of characters strung together and not as a piece of code. The name given to data when it is put into the form where it is to be treated as a series of characters “strung” together one after another is, naturally, a “string.” Strings are not limited to only storing letters of the alphabet; you also can store any other characters simply by enclosing them in quote marks. JavaScript is happy for you to use either double quotes or single quotes. Hence “I am a string” and ‘I am also a string’ are equally acceptable ways of turning data into a string. Care should be taken however that you do not mark the beginning of a string with one type of quote marks and then end it with the other. If you write “I am a string’ or ‘I am also a string”, you will cause an error. So, remember, whichever type of quote mark you use to begin the string must also end the string. You might think that if both double and single quotes can be used to indicate the beginning and end of a string, then it really shouldn’t matter if you start with one and then end with the other. However, if you stop a moment to think, you might wonder how you would then put quote marks into a string. The solution is that when you start a string with one of the quote marks the JavaScript interpreter waits until it finds one of the same type before says to itself “okay, that’s the end of the string, what follows now is code.” With this setup, if you want to put one type of quote marks into a string all you need to do is surround the quotation with the other type of quote marks. You likely will need to include—sooner rather than later—both types of quotes within a string. This is usually required for coding itself, but for the moment we will demonstrate it by imagining we need to make a string out of the following sentence: Ian called out “Hey, pass me Andrew’s football!”. If you were to enclose the sentence with double quotes “Ian called out “Hey, pass me Andrew’s football!”.”

JavaScript would think that the string was merely “Ian called out.” After it passed this point to “Hey,” which doesn’t mean anything to it, an error would occur. The same thing would happen if you enclosed it in single quotes. As soon as JavaScript got as far as “Andrew’” it would fail because the apostrophe in Andrew’s would be interpreted as the closing single quote mark for the string. JavaScript has set aside the backslash character (\)to solve this problem. Whenever you use a backslash in JavaScript it means that the next character is special. For the quote marks, preceding them with a backslash simply means that they do not indicate the end of a string. For example you could write:

39

1

40

Day 1

‘That is Andrew\’s football’ Or if you want to store five double quote marks in a string you would write: “\”\”\”\”\””

And for single quotes you would write: ‘\’\’\’\’\’’

When a character has a backslash placed in front of it, it is referred to as being “escaped.” There are several other characters that can be escaped to produce special characters. These are shown below: \b

Backspace

\f

Form feed

\n

New line

\r

Carriage return

\t

Tab

\’

Single quote

\”

Double quote

\\

Backslash

\xNN

A character in the Latin-1 character set (x is just an “x” and NN is a hexadecimal number)

\uNNNN

A character in the Unicode character set (u is just a “u” and NNNN is a hexadecimal number)

Suppose you wanted to include the copyright symbol in a string. In Latin-1 and Unicode respectively you would write: “Copyright \xA9 2002 by Sams Publishing” “Copyright \x00A9 2002 by Sams Publishing”

Both of the above strings will give you the following: Copyright  2002 by Sams Publishing As you may have noticed, Unicode seems to use the same hexadecimal number with a couple of extra zeros in front. In fact it is the same, but the extra two characters give it many extra possible characters. To see the full range of Unicode characters visit the Unicode Web site at http://www.unicode.org.

Getting the Basics Right

Caution

Although Unicode gives you far more characters to work with, it is a more recent character set that isn’t supported by version 4 browsers and below. In fact, some of the characters aren’t supported by even the latest browsers.

Some Useful Tools In the next couple of chapters, you will learn how to use three JavaScript tools that will enable you to show output, make decisions, and collect input respectively. The proper names for these tools are “functions,” but for the moment, if you don’t know what functions are, don’t worry about it. We will be taking a closer look at functions in Chapter 3, “Functions and Statements.”

The alert() Function We have already used the alert() function several times in this chapter to bring up what’s called an alert box. You have probably seen these small boxes that pop up many times before on Web sites to warn you, or “alert” you, to the consequences of an action. To bring up an alert box on your Web page, you need to use the JavaScript alert() function. When you use this function you only need to provide the function with a message in order for it to display. The JavaScript interpreter does all the construction of the alert box behind the scenes. Here is an example: alert(“Hello all!”);

This alert function could be placed on a line of code anywhere in a script block and it would bring up an alert box. There are two things to notice about the alert() function. The first is that the message to show on the page has to be enclosed within a pair of parentheses. In addition to that, because the contents are a string, they have to be enclosed within quote marks. If, for example, the message had been simply a number, then we would have written it without the quote marks (but still within the parentheses) like this: alert(55);

We will use the alert() function quite extensively in the next couple of chapters to show the results of some of our scripts. For example if we wanted to check what JavaScript would do with the sum 5+5, we might write: alert(5+5);

41

1

42

Day 1

The result, 10, would then be shown in the alert box so that we could be sure that 10 was indeed what JavaScript would return.

The confirm() Function The confirm() function is a bit more advanced than the alert() function. Rather than simply providing a user with information, it allows a user to make a choice between two options. Again, you already may have seen the small box that this function brings up in visits to Web sites. It is similar to the alert box, but in addition to a message and an “OK” button, it also has a “Cancel” button. For the moment we won’t take too close a look at the confirm() function. This is because, to be of any use, we need to use it in conjunction with pieces of code called “control statements” that allow us to make decisions. In simple terms, the button that the user clicks determines which of the two values is sent back to the script. These two values are the values true and false, which we have already seen. They can be thought of as the computer equivalent of “yes” and “no.” Whichever value is sent back by the user enables the script to determine whether or not to take a particular action. The confirm() function is written in a way that is similar to the alert box, and it also can be placed on a line of code anywhere in a script block. Here is an example:

INPUT

confirm(“Are you sure you want to reset the form?”);

When this confirm function is executed, it will display the confirm box shown in Figure 1.4.

OUTPUT FIGURE 1.4 Our first confirm box.

To see the true or false values that are returned from confirm boxes we can actually place the confirm() function inside an alert() function. Whichever value the confirm box sends back will be shown in the alert box that pops up. Here is how we would write this: alert(confirm(“Are you sure?”));

The part of this line that will be evaluated first is the confirm function. Once the confirm box displays and the user clicks “OK” or “Cancel,” then the value true or false will be given back and placed inside the parentheses of the alert function. The alert() function then will bring up an alert showing this value. Try it out and see for yourself.

Getting the Basics Right

In the following chapters you will see how to use the value returned by a confirm() function to make decisions in your scripts.

The prompt() Function The prompt() function is the last of the three functions we will look at for the present. This is the function that pops up a box that “prompts” you to enter some text for a script to use. For example you could be asked to enter your name and then the script could write your name into the HTML of the Web page to personalize it for you. The prompt() function is a little bit more complex than the previous two functions, but it is still fairly straightforward. It requires two strings to be written between the parentheses of the function. The first of these is the message that is shown in the prompt() box, and the second is used to pre-fill the area where you type in your input (pre-fill works in Internet Explorer only). To separate these strings, a comma is used, as shown in the following line of code:

INPUT

prompt(“Please enter your name.”, “Write it here.”);

This will bring up the prompt box in Figure 1.5.

OUTPUT FIGURE 1.5 Our first prompt box.

ANALYSIS

The text that the user enters into the box is returned in the same way as a true or false value is given back from a confirm box.

Note that if you don’t want to fill out the input area of the prompt box, you don’t leave out the second string in the function. You have to use what is called an “empty string” instead, which is simply an opening and closing quote mark that doesn’t surround any characters at all. prompt(“Please enter your name.”, “”);

These three functions enable us to take three actions that we will need over the next few chapters as we work our way through various parts of the fundamentals of JavaScript. Using alert functions we can find out the results of a piece of code we have written; with confirm boxes we can make decisions; and with a prompt box we can provide external input for some of our scripts.

43

1

44

Day 1

Summary This chapter introduced you to what JavaScript is, and it discussed a little about its place among other Web technologies. You have learned how the desire of Web authors to interact with their users led to the development of many new technologies, and how the crossplatform nature of JavaScript made it ideal for use on the Web. After learning how to insert JavaScript into your pages using script blocks or external files, you also learned some basic features of the language itself, such as that we can, and should, use whitespace to make our code more readable. You also learned about more key topics such as the five data types that JavaScript understands: numbers, boolean values, strings, null, and undefined. You also were introduced to some basic JavaScript and shown some simple code.

Workshop In the workshops, you will find a quiz and exercises that will conclude each chapter. We will ask some questions that you might ask yourself, together with possible answers to each question, as well as exercises to help you further explore chapter material for yourself.

Q&A Q. I created code that looked like this: Alert(“Hello I am learning JavaScript”);

but it didn’t work. Why? A. JavaScript is case sensitive. To get the code to work you would need to write, alert(“Hello I am learning JavaScript”);

Q. How would I ask the user for their location? A. You could use a prompt box, which uses the JavaScript prompt() function. For example, you could write prompt(“Where do you live?”, “Enter your location here.”);

Quiz 1. The JavaScript entities alert(), confirm(), and prompt() are all functions or statements? 2. Is JavaScript that follows “Hello World!” called a data type or a string? 3. What does NaN mean? Does it mean “not a number” or “nearly a number”?

Getting the Basics Right

45

Quiz Answers 1. The alert(), confirm(), and

prompt()

entities are all JavaScript functions.

2. “Hello World!” is a string. In JavaScript strings must be enclosed in pairs of either single or double quotes. 3. NaN means “Not a Number” and is returned by, for example, a function when something is wrong with a mathematical operation you have attempted.

Exercises 1. Create an alert box that tells the user, “This is Teach Yourself JavaScript in 21 Days.” 2. Create a confirm box that asks the user, “Are you enjoying learning about JavaScript?”. 3. Create a prompt box that asks the user, “What is your name?” and then gives the user the prompt, “Enter your name here.”

1

WEEK 1

DAY

2

Working with Data After reading Chapter 1, “Getting the Basics Right,” you should be clear about what JavaScript is and have a general idea of how it fits into the range of technologies available for use on the Web. Today, after having looked at the data types recognized by JavaScript, you will see how the data that you define as a Web-page author or collect from a user can be stored and processed. First, we are going to take a look at some simple methods of data storage followed by a study of operators, JavaScript’s basic data manipulation tools. This chapter will teach you • What variables are • How variables are created and used • What constants are • How constants are created and used • What operators are • How JavaScript’s operators are used

48

Day 2

Simple Data Storage In most JavaScript applications some data is used more than once or it is used at some time after the page has loaded. In these situations it is useful to have some means to temporarily store data. To allow you to do so, JavaScript provides several facilities that can be used to store data for re-use.

Variables The JavaScript storage facility for an individual piece of data is called a variable. Variables are effectively small containers which are given a name, and then filled with a piece of data that is in the form of one of the data types discussed in Chapter 1, “Getting the Basics Right.” Variables will be your primary method of data storage in JavaScript programs, although there are other containers (such as arrays), which are used for data storage. Arrays, which can be used for storing lists of information, will be covered in later chapters.

Creating Variables To create a variable, the first thing you must do is “declare” it. This simply lets the computer know that it has to set aside some memory for the storage of a new variable and, optionally, tells the computer about the data it will store. To declare a variable, simply write the var keyword followed by the name you wish to give to the variable. So, for example, to declare a variable called myFirstVar, without defining the value to be stored in it, you would write the following: var myFirstVar;

The next step is to give the variable some data to store. When a variable initially is given some data to store, the variable is referred to as “initialized.” More generally—that is, after the first time—this process of giving the variable a (new) value is known as “assigning” data to the variable. To do this, the variable name is written on a new line followed by the equal sign and the data to be stored. In the following code the first line declares the variable myFirstVar and the second line assigns a particular string to myFirstVar: var myFirstVar; myFirstVar = “I’m a string stored in a variable.”;

Caution

Note that the var keyword is only used once for each variable at the time you first declare it. Once a variable has been declared, don’t use the var keyword again with the same variable.

Working with Data

49

Every time you use the variable myFirstVar you will actually be using the data it contains. To demonstrate this, write the two lines of code above into the template which you saw earlier in Listing 1.6 and add a third line to bring up an alert box containing the value of the variable, as shown below in Listing 2.1.

INPUT

LISTING 2.1

Variable Demo (variableDemo.htm)

<script language=”javascript” type=”text/javascript”>

Variable Demo

Save the file and load it into your browser. The alert box brought up by the third line of code will contain the value of myFirstVar, as shown in Figure 2.1.

OUTPUT FIGURE 2.1 Displaying the value of myFirstVariable.

Congratulations! You have just stored data in your very first JavaScript variable. The way the variable myFirstVar was created and assigned a value is actually longer than it needs to be. It was created in two steps simply to demonstrate the difference between setting aside some memory for a variable and actually filling the memory with data. There is a shortcut that allows you to use a single line of code for the

ANALYSIS

2

50

Day 2

declaration of a variable and the assignment of data to it. To do that for the above example you would write the following: var myFirstVar = “I’m a string stored in a variable.”;

There is no difference between the two in terms of the way your scripts will run so you can use either method. Although it is sometimes useful to declare your variables before you assign data to them, the second method commonly is used simply because it is shorter.

Omitting the var Keyword If you have ever looked at scripts created by other people, you may have noticed in some scripts that the var keyword was not used to create variables. As long as you assign some data to a variable on the same line as you write the variable name, the JavaScript interpreter will accept this (if you omit the var keyword and also fail to assign it a value that will cause an error). The syntax you can use to declare and assign a value to a variable without using the var keyword is myFirstVar = “I’m a string stored in a variable.”;

and it works correctly. However, as we will see later in the book, once you start using variables in functions and omit the var keyword, it can have a very undesirable effect. The omission of the var keyword should be a deliberate choice, and until we have taken a closer look at the reasons for using or omitting it, it is best to get into the habit of using it every time you declare a new variable.

Naming Variables JavaScript has naming rules so variables can’t always be given the first name that comes to mind. It is important that certain simple naming rules be followed if errors are not to occur in your scripts. The rules for naming your JavaScript variables are the same as those for naming HTML elements. Names may only consist of alphanumeric characters (letters and numbers), the underscore character (_) and the dollar sign ($). There is a further rule that the first character of a name is not permitted to be a number. As we will see throughout the book, these rules are the same no matter what the item is you’re naming in JavaScript.

Working with Data

Caution

Remember that the JavaScript keywords listed in Chapter 1 can be used only for their designated purpose. They can’t be used for naming variables or other names. Remember too that JavaScript, unlike HTML, is case sensitive.

Version 1.5 of JavaScript now allows variable names to include letters from the ISO8859-1 and Unicode character sets, such as å and ü in addition to the letters of the English alphabet. Just remember that some of the users of your Web pages still may be using version 4 browsers or below, which don’t support the use of such characters. Also, note that Internet Explorer 5.5 will not accept these new characters as the first character of a variable name. Acceptable variable names include: myFirstVar, bob, max_width, total_$s, _1st_answer_

However, the following variable names will cause JavaScript errors and, depending on where they are used, they could possibly prevent your entire script from running at all. var 2nd_var 101_dalmatians @home first#

// // // // //

It uses a key word as a variable name It begins with a number It begins with a number The ‘@’ character is not allowed in a name The ‘#’ character is not allowed in a name

The reason var will cause an error is because it is a keyword. 1st_var and 101_ are unacceptable because they start with a numeric character, and @home and first# will fail because they use characters which aren’t allowed in JavaScript names.

dalmatians

Tip

51

Give your variables names that indicate their purpose. When multiple variables with nondescript names are used in a complex piece of code things can become very confusing. Using meaningful names helps you to follow the flow of code, particularly if you wrote it some time ago.

To adequately describe the purpose of a variable, it may be necessary to use more than one word in its name. Because a space character isn’t allowed in variable names there are two conventions which are commonly used to make the words within multiword variable names more readable. One method strings the words together and capitalizes the first letter of all but the first word; the second method separates the words with underscores. For example you might write the following:

2

52

Day 2

multiWordVariable phoneNumber faxNumber

or, multi_word_variable phone_number fax_number

The method you choose is completely up to you. The JavaScript interpreter accepts both methods just described. In this book we will usually use the first method purely because of personal preference. If you prefer the latter, feel free to use it instead. When looking at JavaScript code on the Web you will probably see both naming conventions used.

Caution

In theory you can use non-alphabetic characters in JavaScript names, such as * and +, or a period, but it is wiser to avoid these since they may cause confusion with JavaScript operators or object-related syntax that uses the period character.

Changing a Variable’s Contents As is implied by the name variable, the contents of variables can change. To change the data contained in a variable all you have to do is write the variable name followed by an equal sign and the new data. This process “reassigns” to the variable a new value. For example: var myVariable = 10; //Creates myVariable and assigns it the value 10 myVariable = 5; //Reassigns myVariable the value 5

To see this process working, try running the following code shown in Listing 2.2. LISTING 2.2

Reassigning Variables (reassignVariables.htm)

<script language=”javascript” type=”text/javascript”>

Reassigning Variables

Not only does the data change in value, but for the final assignment, it also changes data type from number to string.

Constants Constants are a new type of data container, which were introduced with JavaScript 1.5. They are declared in the same way as JavaScript variables but with the const keyword. As their name suggests, once you’ve given a constant a value it doesn’t change. In fact it cannot be changed. This rule is stricter than you might think. It is not possible to declare a constant and then assign it some data later, as we initially did to create a variable. If you were to try to do that the constant would simply take the value undefined at the time of the declaration, and then remain unchanged by any subsequent attempt made to assign it a value. For example, try the following three lines:

INPUT

53

const TEST_CONST; TEST_CONST = 10; alert(TEST_CONST);

This displays the following alert box, which shows that the value of constant testConst has remained undefined, even after attempting to assign it the value 10 (see Figure 2.2).

2

54

Day 2

OUTPUT FIGURE 2.2 The value of TEST_CONST.

To assign testConst the value 10, you have to make the assignment on the same line as the declaration of the variable. Therefore we would have to change the previous lines of code as follows:

ANALYSIS

const TEST_CONST = 10; alert(TEST_CONST);

Also note that you can’t re-declare a constant as a variable in an attempt to change its value. The following will produce an error: const TEST_CONST = 10; var TEST_CONST = 20;

When you declare constants the const keyword must be used. It is not an option in the way that the var keyword is optional. The default data container is the variable, so if the const keyword is omitted, then a variable will be created, which may not be what you intended.

Caution

At the time of writing, Internet Explorer, version 5.5, does not support constants.

It is traditional, although not required, in JavaScript to name constants with all uppercase letters, using an underscore to create any spaces between words. As you will see later in the book, this is also how the predefined JavaScript constants are written. It simply reminds us not to try to change the data they contain later in a script.

Operators You have learned about the types of data JavaScript understands, and you are able to use variables as a simple means of data storage. The next step is to learn about some of the different methods available to you for working with your data.

Working with Data

55

To begin with, we will examine operators, which are JavaScript’s basic data manipulation tools, many of which you will use regularly. JavaScript also has several other ways of processing data, including some built-in functions and powerful regular expressions (which we will look at in later chapters).

Understanding Operators “Operators” may sound a bit abstract, but you shouldn’t let their name put you off. You will find that you are already familiar with some of them, and many of them are intuitive to use. The term “operator” came about because in programming when you perform a simple action on a piece of data you are said to perform an “operation” on it. It is quite logical then that the JavaScript tools provided to perform this task—an operation—are called operators. Operators can operate on all of the data types that JavaScript understands. Take a look at an example of an arithmetic (mathematical) operation, with which you will undoubtedly be familiar: 1 + 2

In the simple arithmetic calculation above, a very common operation (addition) is performed using the numbers 1 and 2 and an operator (the plus sign). The plus sign is an operator you will have seen many times before, but quite possibly didn’t realize it could be called an operator. As you can see, this really is very simple. The thing most likely to cause confusion in this chapter is the terminology, so let’s quickly review some of the terms we will be using.

Terminology In addition to “operator” and “operation,” there are three other words that will come up regularly as we look at JavaScript operators: operands, expressions, and evaluation. Let’s clarify what each means in the context of JavaScript. Operands Okay, so the plus sign was called an operator, but what about the other parts of the calculation—the numbers 1 and 2? Because the types of data used with operators will not always be numerical data, we can’t always call the data numbers. Instead, data in this context is given the general term “operand.” Therefore the numbers 1 and 2 in the above addition are called the + operator’s “operands.” So, if we want to add two numbers, we could, in tech-speak, say that we want to add the operand 1 to the operand 2 using the + operator.

2

56

Day 2

For many of the operators, operands can be any of the JavaScript data types or they can be a data container containing some valid data. Expressions For the same reason (that is, not all operations are arithmetical), we don’t use the word “calculation” to describe a typed-out sequence of operators and operands. Instead we call this an “expression.” So, the code 1 + 2

could be described as an expression in which we use the + operator on the operand 1 and the operand 2. The process is simple, although the terminology may not be. So don’t let terminology that is unfamiliar make you uncomfortable. In JavaScript as with other languages, an expression is any combination of data, data containers, and operators that will evaluate to a single value. For example 1 + 2 evaluates to (it becomes) 3. In this expression there are two pieces of data and a mathematical operator, but expressions can consist of many more than two operands and one operator. You can use such expressions to assign a value to a variable. Thus, the following code adds the operand 1 to the operand 2, and assigns the resulting value to the variable mySecondVariable. mySecondVariable = 1 + 2

Evaluation Finally, we need a word that expresses what happens to an expression when the JavaScript interpreter processes it. For this process we use the words “evaluation” or “evaluates.” For example we would say that 1 + 2 evaluates to the value 3. Although this example simply evaluates to a value (and therefore would need to be used immediately), expressions can also assign a value to a data container such as a variable or constant when they are evaluated. For example, the following is an expression, which in this case will assign the value 3 to a variable called myVar on evaluation: var myVar = 3;

Most of the time your JavaScript expressions will evaluate to one of the three data types shown in Table 2.1.

Working with Data

TABLE 2.1

57

Data Types to Which Expressions Commonly Evaluate

Data type

Example

Number

For example, 15 or 3.14

String

For example, “Alan” or “3.14”

Logical

true

or false only

They can also evaluate to something called an “object,” but we’ll leave the explanation of what an object is and how you use it for a later chapter.

JavaScript Operators With the terminology out of the way, let’s get down to business. JavaScript has a very wide range of operators that can be broken up into the types shown below: • Arithmetic operators • Comparison operators • Logical operators • String operators • Assignment operators • Bitwise operators • Special operators We will examine all of the operators in each of the types except for the special operators, which we will only look at briefly. The special operators will be discussed later in the book at the points when they are most relevant.

Arithmetic Operators Arithmetic operators (also called mathematical operators) can be used to perform calculations with numbers or data containers that hold numerical values. In addition to the operators for the four basic mathematical processes (addition, subtraction, multiplication, and division), and an operator to reverse the sign of a number, there are three operators provided as shortcuts for some commonly used processes. Table 2.2 lists the mathematical operators along with a brief description of what they do.

2

58

Day 2

TABLE 2.2

Arithmetic Operators in JavaScript

Operator

Name

Description

+

Addition

Adds two operands together

-

Subtraction

Subtracts the second operand from the first operand

*

Multiplication

Multiplies two operands together

/

Division

Divides the first operand by the second operand

%

Modulo (or Remainder)

Returns the remainder of dividing the first operand by the second operand

++

Increment

Adds 1 to its operand

--

Decrement

Subtracts 1 from its operand

-

Negation

Reverses the sign of its operand

It is worth mentioning that the last three operators in Table 2.2 are commonly termed “unary” operators. This simply means that they only operate on one operand. Operators which operate on two operands, such as the simple addition calculations you saw earlier are called “binary” operators.

Caution

Note that the division operator (/) returns a floating-point value (a number with a decimal point and a fractional part after the decimal point), and the modulo operator (%) returns an integer (whole number).

The first four arithmetic operators behave as you would expect: 4 4 4 4

+ * /

8 8 8 8

// // // //

evaluates evaluates evaluates evaluates

to to to to

12 -4 32 0.5

As does the negation operator: -5 -(-5)

// evaluates to -5 // evaluates to 5

In other words, the negation operator turns positive values negative and negative values positive. However, the use of the remaining three operators—Modulo, Increment, and Decrement—may not be immediately apparent to you at this point.

Working with Data

59

The Modulo Operator The modulo operator finds the remainder after dividing its first operand by its second operand and it is written like this: 7 % 3

In this example, the expression would evaluate to 1 (7 divides by 3 twice before it leaves a number less than 3; for example, the remainder 1). At first the modulo operator may seem strange. Surely you don’t need to find the remainder of a division so often that a special operator had to be made to do the job. Well, maybe that is true, but it saves a lot of work for the times that we do need to find out what the remainder is.

Note

The modulo operator is sometimes referred to as the “modulus” operator. The two terms mean the same.

The Increment and Decrement Operators The increment and decrement operators are used extensively with variables in looping control statements (such statements will be dealt with more fully in the next chapter). The increment operator x++ is simply a shorthand. The following two lines of code mean the same thing: x++; x = x + 1;

Basically, when you need to repeatedly go through a piece of code a set number of times, a variable is set at a value and then each time the code is run the variable is incremented (increased in value by 1) or decremented (decreased in value by 1). The value of the variable, after it has been incremented (or decremented), then can be tested to determine at what stage the code is running, and whether the loop should be run again. You should note that one of the characteristics of these operators is that prefixing and postfixing the increment or decrement operator has different effects. The following code shows the prefix and postfix increment and decrement operators: ++x x++ --x x--

// // // //

the the the the

prefixed increment operator postfixed increment operator prefixed decrement operator postfixed decrement operator

Let’s look at an example to see just what we mean.

2

60

Day 2

Assume that a variable x has the value 3. If the increment operator is prefixed to it (applied to its left-hand side), then ++x sets x to 4 and returns 4. This is demonstrated by the following code: var x = 3; alert(++x); alert(x);

// alerts 4 // alerts 4

On the other hand if we postfix the increment operator to x, then x is not incremented to 4 until the next line of code. This can be shown with a similar piece of code using the postfix increment operator rather than the prefix increment operator: var x = 3; alert(x++); alert(x);

// alerts 3 // alerts 4

At the moment we don’t expect you to see why these techniques might be useful. Just bear it in mind for when we come to control statements later. With the exception of the increment or decrement operators, boolean values and the null value can be used as the operands of arithmetic operators in JavaScript. The values false and null are treated as 0, whereas the value true is treated as 1.

Comparison Operators Comparison operators are regularly used in JavaScript to test whether a condition is true or not. Although we may not consciously think in terms of comparison operators, we use this sort of evaluating process all the time in our day-to-day lives. For example, if you were to pass a shop and see something in the window that you liked, the first thing you might do is check in your purse or wallet to see if you have enough money (assuming you haven’t brought your credit card). Effectively you are making a comparison by asking yourself, “is the money I have greater than the money I need to buy that item.” These types of questions or comparisons always will result in a “yes” or “no” answer and are the basis of many decisions that we make. In this case, if the money you have is less than the money you need then you cannot buy the item. Just as we make comparisons in our lives to help us make decisions, JavaScript provides comparison operators so that we can compare data in order to make decisions in our scripts. Comparison operators take two operands and compare them to see if a certain condition is true. If it is, the expression evaluates to the value true, but if it’s not true, the expression evaluates to false. The values true and false are the JavaScript equivalent of “yes” and “no,” and they are the only values a comparison expression will evaluate to. Comparison expressions always evaluate to one or other of these two logical values. A condition is either true or false and nothing in between. Comparisons, in JavaScript at least, cannot evaluate to “maybe.”

Working with Data

61

Shortly we will look at how comparison expressions are used to make decisions, but for now let’s take a look at a simple example to show expressions at work. Imagine you have a variable called myVar and you want to check whether the number it contains is less than three. The less than and greater than operators in JavaScript are the same as they are in standard mathematical notation. Therefore to check this condition you would write the following:

2

myVar < 3

Try it out by adding some lines of code to the template as shown in Listing 2.3:

INPUT

LISTING 2.3

A Comparison Operator Demo (operatorDemo.htm)

<script language=”javascript” type=”text/javascript”>

A Comparison Operator Demo

OUTPUT If you change the value assigned to myVar you will see that when it contains a

value less than three the expression evaluates to true, and when three or greater it evaluates to false. A complete list of the comparison operators is shown in Table 2.3.

62

Day 2

TABLE 2.3

Comparison Operators in JavaScript

Operator

Name

Description

>

Greater than

Checks whether the first operand is greater than the second operand

<

Less than

Checks whether the first operand is less than the second operand

>=

Greater than or equal to

Asks if the first operand is greater than or equal to the second operand

<=

Less than or equal to

Checks whether the first operand is less than or equal to the second operand

==

Equal to

Checks whether both operands are equal

!=

Not equal to

Checks whether both operands are unequal

===

Strict equal to

Asks if both operands are equal and of the same data type

!==

Strict not equal to

Checks whether both operands are unequal and/or not of the same data type

The first four operators are most likely to immediately make sense to you. There is a slight difference between the greater than (>) and greater than or equal to (>=) operators, and between the less than (<) and less than or equal to (<=) operators, as you most likely know. However, just in case math wasn’t your favorite class, here are a couple of examples that show the difference: 3 3 3 3

< <= > >=

3 3 3 3

// // // //

evaluates evaluates evaluates evaluates

to to to to

false true false true

As you can see, they act just as their names imply. With the greater than or less than operators, the first operand has to actually be greater than or less than the second operand for the expression to evaluate to true. The greater than or equal to and the less than or equal to operators on the other hand will also evaluate to true if the operands are equal. The differences among some of the four equality comparison operators may not be quite so obvious however. The key to understanding how they work is to know that two of the comparison operators pay attention to data types and two of them don’t. Let’s look at some examples to demonstrate just what this means.

Working with Data

Caution

3 == 3 ==

It is a very common mistake to forget that there is a difference between the single equal sign that assigns a value to a variable and the double equal signs that compare its operands. If a comparison which checks for equality is causing errors check whether you have remembered to use a second equal sign.

3 “3”

// evaluates to true // evaluates to true

3 === 3 3 === “3”

// evaluates to true // evaluates to false

but:

Why have the second and fourth examples above not evaluated to the same logical value? The answer is that if the operands of the equal to (==) operator (and the not equal to operator) are of different data types, the JavaScript interpreter will try to convert one of them to the data type of the other to make a comparison. Therefore in the comparison 3 == “3” the second operand, a string containing the character 3, is converted to the number three which is equal to the first operand. Effectively the data types of the two operands have been ignored. On the other hand in the fourth comparison which uses the strictly equal to comparison operator, the data type of the operands is also taken into account. Therefore, as the first operand is a number and the second operand is a string, the expression immediately evaluates to false. It doesn’t matter that the character in the string is the character 3. The two operands aren’t strictly equal because they are not of the same data type. The problems with mistakenly using the assignment operator (=) instead of the equality operator (==) can arise when you have an expression like if (x==3). If, in error, you write if (x=3), then you have changed the value of the variable x to 3. Instead of checking whether the value of the variable x matches a certain value (the integer 3) you have, instead, changed its value to that numerical value. This won’t cause an error but it may cause problems later in your script, depending on whether or not the code depends on the value of x. These rules apply in the same way to the not equal to (!=) and the strictly not equal to (!==) comparison operators. Hence, 3 != 3 3 != “3”

63

// evaluates to false // evaluates to false

2

64

Day 2

but: 3 !== 3 3 !== “3”

// evaluates to false // evaluates to true

Caution

Notice that the negation of the equal operator, ==, is !=, which has one less “=” than the operator it negates. Similarly, the negation of the strictly equal operator, ===, is !==, which again has one less “=” than the operator it negates.

The most obvious and frequently used application of comparison operators is to compare numeric values. However operands can also be string and logical values. If a logical value is used as an operand, the rule is very simple: true evaluates to 1 and false evaluates to 0. Therefore: true

> 0.5

// evaluates to true

and false > 0.5

Caution

// evaluates to false

Be careful when comparing boolean (logical) values with numbers or strings, since different languages observe different rules for such comparisons, and it is easy to introduce a subtle error which could cause symptoms somewhere else in your code.

String comparisons are a bit more exciting and probably a lot more useful. The outcome of a string comparison is based on lexicographical ordering using the Unicode standard. That probably sounds pretty complicated but effectively it means that we can use the comparison operators to see if one string comes before another in the alphabet. Unfortunately this is not as simple as you might first think as Unicode separates uppercase letters from lowercase letters. The full set of uppercase letters, ABC…XYZ, comes before the lowercase letters, abc…xyz. For the moment, let’s just see how the operators work when the strings aren’t altered.

Working with Data

65

If one of the operands of a comparison expression is a string, then JavaScript compares the operands lexicographically. The less than operator checks whether the first operand comes before the second operand according to alphabetical ordering. If it does, then the expression evaluates to true. Let’s take a look at a couple of examples: “a” < “b”

// evaluates to true

“James” < “Alison” // evaluates to false

The greater than comparison operator acts in the opposite way, so it asks if a string comes after another string according to alphabetical ordering. Therefore: “a” > “b”

// evaluates to false

“James” > “Alison” // evaluates to true

It is important to remember that the ordering is based on Unicode values. Therefore, uppercase letters come before lowercase letters: “James” < “andrew” // evaluates to true

and “James” > “andrew” // evaluates to false

To get around this when we want to put strings in alphabetical order, you can temporarily change all the letters in both strings to either uppercase or lowercase; then the comparisons work alphabetically in the way that you would expect. Don’t worry about this for the moment though. For now let’s continue our examination of JavaScript’s comparison operators.

Conditional Operator The conditional operator is the only special operator that we will cover in depth at this point in the book. We are going to examine it now so that we are better able to demonstrate the logical operators in the next section of this chapter. The conditional operator is also the only JavaScript operator to take three operands. The operator consists of a question mark and a colon, which separate the three operands as shown below: operand1? operand2: operand3

Any of the three operands can be just a simple value or an expression in its own right. Therefore you could use the conditional operator to create the following expressions: true? 1: 0 myVariable? 5+5: 5-5 6>7? “it’s greater”: “it’s less”

2

66

Day 2

How the operator works is unlikely to immediately be apparent, so let’s first look at a simple example where the operands are simple values. Type the following line into the template, and open it with your browser. alert(true? 1: 0);

On opening the page, you should see an alert box with the value 1 in it. Now try changing the logical value true in the code to the value false. Save and refresh the page. This time you should see an alert box with the value 0. What the operator is doing is this: The whole expression evaluates to the second or third operand depending on whether the first is (or evaluates to) true or false. If the first operand evaluates to true, then the whole conditional operator expression evaluates to the second operand. If, however, the first operand evaluates to false, then the whole expression evaluates to the third operand. In the case above, the whole operand evaluates to the value 1 or 0. The resulting value, in this case it is 1, is then taken by the alert function and displayed in an alert box. The second and third operands can evaluate to any of the five data types, but the first operand will always evaluate to a logical value based on the following rules: • Numbers are treated as true if they are not equal to 0. • Strings are treated as true if they are greater than 0 characters in length. •

undefined

•

null

is treated as false.

is treated as false.

Hopefully these rules should be fairly easy to remember. Think of it in these terms: Any number with a value of 0 is not positive, so it won’t evaluate as true. In a similar sense, the empty string “” which contains no characters doesn’t have any length, so it evaluates to false. The undefined and null values mean that something does not yet contain any useful data, so they also evaluate to false. Let’s now take a look at an example where the first operand is an expression: alert(2<4 ? “The expression was true”: “The expression was false”);

As 2 is less than 4, the conditional operator will evaluate to the string “The was true”. Try it and see for yourself.

expression

The conditional operator is a very useful shortcut for passing one of two possible values to a variable. For example, let’s take a look at an example with the help of the confirm() function. Type out, save, and view the following code from Listing 2.4:

Working with Data

INPUT

LISTING 2.4

67

Conditional Operator Demo (conditionalOp.htm)

<script language=”javascript” type=”text/javascript”>

JavaScript Test Page

OUTPUT

This should bring up a confirm box followed by an alert. The value of the alert box depends on whether you click OK or Cancel. But how does it work?

Well, first, the confirm box is displayed. The confirm function will evaluate to if you click OK, or false if you click Cancel. This value is then stored in the variable confirmVal. The JavaScript interpreter then proceeds to the second line of code where it first evaluates the first operand of the conditional operator, which is the variable confirmVal. If it contains the value true, the whole expression evaluates to “You clicked OK”, and if it is false it evaluates to “You clicked Cancel”. The value of either the second or third operand (depending on what you clicked) is then assigned to the variable alertStr (before it is alerted by the third line of the script).

ANALYSIS

true

Logical Operators Logical (boolean) values are a very important part of JavaScript. As we saw when we looked at conditional operators, they are the basis of JavaScript decisions. This was further demonstrated by the example of their use with the conditional operator. So far the examples you have seen demonstrated making decisions based on only one condition. There are some times when you want to make a decision based on more than just one condition, or you may want to reverse a condition. To do this JavaScript provides us with the three logical operators shown in Table 2.4.

2

68

Day 2

TABLE 2.4

JavaScript Logical Operators

Operator

Name

Description

!

Logical NOT

Reverses a logical value.

&&

Logical AND

Asks if both of two conditions are true.

||

Logical OR

Asks if one or both of two conditions are true.

Let’s look at three examples for each of these operators. Hopefully you will find them fairly easy to grasp. First, let’s look at the ! (logical NOT) operator: !false !true !(3<4)

// evaluates to true // evaluates to false // evaluates to false

As you can see, this operator simply reverses the boolean value that would otherwise have been returned. If the value would have been true, the logical NOT operator would have changed the value to false; and if the value would have been false, the logical NOT operator would have changed the value to true. The following examples will use boolean values for simplicity. This is because the && and || operators actually can have a behavior when used with other data types that need some explanation. (We will look at that later in this chapter.) For the && (the logical AND) operator: false && false true && false true && true

// evaluates to false // evaluates to false // evaluates to true

And for the || (logical OR) operator: false || false true || false true || true

// evaluates to false // evaluates to true // evaluates to true

As you can see, if both operands are logical values then logical values of the type you would expect are returned. An expression with the && operator will only evaluate to true if both its operands are true. But an expression using the || operator will evaluate to true even if only one of its operands is true. However, in a similar way to how the first operand of the conditional operator need not be a logical data type, the logical operators can accept values other than boolean values. The rules are also the same as for the conditional operator. Numbers with the value zero, zero length strings, the null value, and the undefined value all evaluate as false, and everything else evaluates as true.

Working with Data

69

When we use non-boolean data types with the && and || operators something called short-circuit evaluation can cause some unexpected results. You may find yourself at a future time frequently using logical operators with non-boolean operands, so it is good to understand what happens, and why.

“Short-Circuit” Evaluation The ! operator will always return a logical value no matter what type of data it is used on. However, the && and || operators will return the value of one of their operands— only if this operand happens to actually be a logical value will a logical value be returned. As we’ll see, the operand that is returned depends on whether the first operand is equivalent to true (non-zero numbers and strings greater than zero characters in length) or equivalent to false (zero, zero length strings, undefined, and null). In a logical expression the first operand is evaluated before the second. For certain values of the first operand with some logical operators the second operand does not need to be evaluated to know what the expression will return. For example, if the left-hand operand of the && operator is equivalent to false, it doesn’t matter whether the right-hand operand is false or true—the expression will still evaluate to false. Similarly, if we use the || operator and its first operand is equivalent to true, it doesn’t matter what the value of the righthand operand is—the expression will always evaluate to true. This may seem pretty abstract and opaque to you, so let’s look in the following examples at how this works in practice. If, in the following examples, one of the above conditions is met then the first operand is returned, but if it isn’t met, then the second operand is returned. Here are some lines of code to illustrate this. Let’s look at the && operator first: “water” && “fire” 1 && “fire” true && “fire” “” && “fire” 0 && “fire” false && “fire” null && “fire” undefined && “fire”

// // // // // // // //

returns returns returns returns returns returns returns returns

“fire” “fire” “fire” “” 0 false null undefined

Notice that when the first operand is equivalent to true the second operand is returned, but when it is equivalent to false the first operand is returned. The rule is that the last operand to be checked is the one returned. Therefore, when the && operator has to check the second operand, as is the case in the first three examples, then it is the second operand which is returned. However, if the JavaScript interpreter knows that the

2

70

Day 2

expression will evaluate to the equivalent of false regardless of the value of the second operator, it doesn’t even bother checking it. It short-circuits and simply returns the first operand. Hopefully you have the idea, but let’s look at some examples of using the || operator just to make sure: “water” || “fire” 1 || “fire” true || “fire” “” || “fire” 0 || “fire” false || “fire” null || “fire” undefined || “fire”

// // // // // // // //

returns returns returns returns returns returns returns returns

“water” 1 true “fire” “fire” “fire” “fire” “fire”

If, as in the first three examples, the first operand of the || operator is equivalent to true, then there is no need to evaluate the second. The expression is short-circuited and only the first operand is checked. Therefore, it is the one returned. However, in the other five the first operand is equivalent to false. Therefore, the second operand needs to be checked and it is the one returned. Most of the time these effects won’t be of any consequence to your scripts. The operators are usually used in conditional expressions to make decisions. Therefore, the action based on the decision is either taken or it isn’t. The one time you may need to know about these effects is if one of your operands has a side effect such as incrementing a variable. If this is the case, then you should be very careful because as we have seen sometimes one of the operands of these expressions is not evaluated and the incrementing of the variable would never take place.

String Operators There is only one operator for working with strings. It is called the concatenation operator. If you aren’t familiar with this term, it simply refers to the action of joining something to the end of something else. In the case of the string operator, it enables us to join one string to the end of another to make a longer string. The symbol that is used for the concatenation operator is exactly the same as the one used for the addition operator: it’s the plus sign (+). To concatenate two strings, the operator is just placed between them as you might expect: var concatStr = “string 1 “ + “string 2”; alert(concatStr);

This code would bring up an alert box with the value “string

1 string 2”.

Working with Data

The only way to distinguish the concatenation operator from the addition operator is to examine whether one or both of its operands is a string. If one or both of the operands is a string, then the + sign acts as the concatenation operator, but if neither is a string then it acts as the addition operator. This is important when you have an expression that contains a mixture of numbers, strings, and plus signs. To know which + sign will act as the addition operator and which will act as the concatenation operator, it is important to know that evaluation in JavaScript is generally processed from left to right. Let’s look at some examples to demonstrate this: 1 + 2 + “string” 1 + “string” + 2 “string” + 1 + 2

// evaluates to “3string” // evaluates to “1string2” // evaluates to “string12”

In the first example, the first thing to be evaluated is the 1 + 2. The two numbers are added together. Only then does the result of that addition have the string “string” concatenated to it. In the second example, the number 1 and the string “string” are concatenated by the first expression evaluated. As “string” is a string, they are concatenated to produce the result in the string “1string”. Because “1string” is a string, the final operand, 2, also is concatenated to produce another string, “1string2”. In the third example, the leftmost operation is evaluated first. As one of the first two operands is a string, the + sign concatenates them. The result of the first operation is a string—so 2 is also concatenated to give the string “string12”. Note that the plus operator also will convert any of the other data types to a string for concatenation if one of the operands is a string. Therefore, in the following examples, since the first operand is a string, the second operand is converted to a string value and concatenated to the first string operand: “Operand “Operand “Operand “Operand

2 2 2 2

= = = =

“ “ “ “

+ + + +

1 true null undefined

// returns “Operand 2 = 1” // returns “Operand 2 = true” // returns “Operand 2 = null” // returns “Operand 2 = undefined”

Each of the operands that were of the data types other than string—1 which is a number, true which is boolean, and null and undefined—is converted to string values, then concatenated to the string “Operand 2 =”.

Assignment Operators Assignment operators are used to tell the JavaScript interpreter to store a piece of data in a variable or some other data container, hence they “assign” data to something. You already have come across the simplest JavaScript assignment operator, which is the equal sign. It simply does a straightforward assignment with no additional processes.

71

2

72

Day 2

Everything to its right is evaluated and assigned to the data container on its left. Hence, as you know to store the number 2002 in a variable called presentYear, you would simply write: var presentYear = 2002;

Frequently, you will want to add or subtract a number from the number contained within a variable. One way to do this is to recursively assign data to a variable using the variable name: someVar = someVar + 10;

You will find yourself frequently using this kind of operation. To save yourself from typing out the variable name twice, as in the above example, JavaScript provides several shortcut assignment operators. These shortcut assignment operators are not only for addition and subtraction, but for many other operations as well. Shortcut assignment operators require that the variable name isn’t written a second time and that the operator in the right-hand expression is moved in front of the equal sign. Hence the shortcut for adding 10 to the variable someVar would look like this: someVar += 10;

Both methods have exactly the same effect so you can forget about these shortcuts if you find them unintuitive or confusing. However, we would encourage you to get used to using the shortcuts as they can be useful time or space savers in large scripts. Table 2.5 shows the shortcut assignment operators you will most likely use. TABLE 2.5

JavaScript Shortcut Assignment Operators

Operator

Equivalent To

x += y

x = x + y

x -= y

x = x - y

x *= y

x = x * y

x /= y

x = x / y

x %= y

x = x % y

These shortcut assignment operators usually act on numbers, but if one of the operands of the += operator is a string, it will act as a string operator. In other words, it will concatenate the two operands as if both were strings. There are also shorthand operators for the bitwise operators that are discussed next, but you are far less likely to use them. They are listed in Table 2.6 for completeness.

Working with Data

TABLE 2.6

73

Shortcut JavaScript Bitwise Operators

Operator

Equivalent To

x &= y

x = x & y

x ^= y

x = x ^ y

x |= y

x = x | y

x <<= y

x = x << y

x >>= y

x = x >> y

x >>>= y

x = x >>> y

Bitwise Operators Bitwise operators have been left to last in this chapter because—unless you already use them in another programming language—it is very unlikely that you will make use of them in JavaScript. This is because they take numeric operands (in the form of octal and hexadecimal as well as decimal numbers) and work on them at the binary level. This means that when bitwise expressions are evaluated they convert their operands to binary numbers (1’s and 0’s) to perform their operation. After they have finished, they then convert the result to a decimal value. Manipulation of bits is used in such processes as encryption routines and data conversion to other programming languages. In client-side JavaScript, it is most commonly used with a bit of ingenuity to optimize scripts by making them work faster and more efficiently. It can be a very complex topic so if you don’t already know of any reason why you really need them then feel free to skip this section. In JavaScript bitwise operators accept operands as a set of 32 bits (zeros and ones). If one of the operands is larger than 32 bits when converted to binary form, then the additional bits are removed before the calculation proceeds. Of course, you need to make sure that the data you want to manipulate is not among the data that will be discarded.

Bitwise Logical Operators Conceptually, the bitwise logical operators work as follows: The operands are converted to 32-bit binary integers. Each bit in the first operand is paired with the corresponding bit in the second operand; first bit to first bit, then second bit to second bit, and so on. The operator is applied to each pair of bits in turn, and the result is constructed bitwise. Table 2.7 summarizes JavaScript’s logical bitwise operators.

2

74

Day 2

TABLE 2.7

JavaScript Bitwise Logical Operators

Operator

Name

Description

&

Bitwise AND

Returns 1 for each bit position where the corresponding operand bits are both ones

|

Bitwise OR

Returns 1 for each bit position where either of the corresponding operand bits is one

^

Bitwise XOR

Returns 1 for each bit position where only one of the corresponding operand bits is one

~

Bitwise NOT

Returns its operand bits inverted

For example, the binary representation of nine is 1001, and the binary representation of fifteen is 1111. So, when the bitwise operators are applied to these values, the results are as follows: 15 & 9 15 | 9 15 ^ 9

// evaluates to 9 (1111 & 1001 = 1001) // evaluates to 15 (1111 | 1001 = 1111) // evaluates to 6 (1111 ^ 1001 = 0110)

Or for bitwise NOT: ~9

// evaluates to -10

Bitwise Shift Operators The bitwise shift operators take two operands. The first is converted to binary for shifting, and the second specifies the number of bit positions by which the first operand is to be shifted. The shift operators are listed in Table 2.8. TABLE 2.8

JavaScript Bitwise Shift Operators

Operator

Name

Description

<<

Left shift

Shifts to the left discarding bits shifted off to the left and moving zero bits in from the right

>>

Sign-propagating right shift

Shifts to the right discarding bits shifted off to the right. Moves in bits from the left with the value of the original left-most bit

>>>

Zero-fill right shift

Shifts to the right discarding bits shifted off to the right and moving zero bits in from the left

Working with Data

75

Operator Precedence Until now, we have mostly ignored which parts of expressions that contain several operators are evaluated first. However, once you start to use larger and more complex expressions, it becomes increasingly important to know the order of evaluation. To help us describe this, we will refer to operators as having precedence over each other. The higher the precedence, the sooner it is evaluated. For example, you probably already know that in a sum, multiplication and division are carried out before addition and subtraction. Hence the sum 1+2*3 results in 7, even though the 1 + 2 came first reading from left to right. This is because multiplication has a higher operator precedence than addition. Table 2.9 shows the operators from highest precedence to lowest (i.e., from the operators that evaluate first to the operators that evaluate last). TABLE 2.9

Operator Precedence in JavaScript

Operator(s)

Operator Type(s)

. []

Member

() new

Call / create instance

! ~ - + ++ -- typeof void delete

Negation / increment / special

*/%

Multiply / divide / modulo

+-

Addition / subtraction

<< >> >>>

Bitwise shift

< <= > >= in instanceof

Relational / special

== != === !==

Equality

&

Bitwise AND

^

Bitwise XOR

|

Bitwise OR

&&

Logical AND

||

Logical OR

?:

Conditional

= += -= *= /= %= <<= >>= >>>= &= ^= |=

assignment

,

comma

2

76

Day 2

Special operators are included in this table, so if you don’t recognize some of the operators shown in Table 2.9, don’t worry about it. (They haven’t been covered yet.) If you find it difficult to remember even the simpler precedence rules within this table, you can override operator precedence by using parentheses. Hence in the expression 1 + 2 * 3

if you weren’t sure which came first, multiplication or addition, you could use parentheses just to make sure: 1 + (2 * 3)

Alternatively, parentheses can be used to override operator precedence. For example, if you intended to add 1 and 2 before multiplying by 3, you would write: (1 + 2) * 3

As you may have noticed in the table, some operators have the same precedence level. When this is the case the operators are evaluated as normal from left to right. For example 13 % 5 * 2

will evaluate to 6 because the remainder of 13 divided by 5 is 3, which multiplied by 2 equals 6.

Summary In this chapter we have covered a lot of ground. We have seen how data can be stored in variables and constants, and how these are subsequently used. In addition, we have covered all the JavaScript operators, with the exception of a few of the special operators. This will enable us to work with data far more effectively in the coming chapters. Don’t be too concerned if you feel we have covered more rules than you can remember. When appropriate, we will remind you as we continue through the book. Gradually, as you work through the examples and exercises, you will pick up the rules for yourself and they will become second nature to you.

Workshop This workshop asks only a few questions to test whether you are comfortable with the chapter material. Also, this workshop contains two exercises for you to try.

Working with Data

77

Q&A Q. When will it be safe to use constants? A. This varies depending on your audience. It will likely be years before all browsers in common use support them. Therefore it is up to you to decide when the number of visitors to your site using browsers that don’t support constants has fallen below an acceptable level. If possible, use site logs to help you make this decision. If you don’t have access to site logs, you can try to make an educated guess from the browser statistics published by other sites. In fact, if you create a variable and never change its value, it can function as a constant for your script. Q. Will I need to use bitwise operators often? A. Unless you need to carry out binary arithmetic, it is unlikely that you will need to know about the bitwise operators.

Quiz 1. How do you declare a variable called Temp and assign to it a value of 5? 2. How do you declare a constant called MY_FIVE that has the numeric value of 5? 3. Will the following expression evaluate to true or false? true && true || false

Quiz Answers 1. You can use the following code to declare the variable Temp and assign it a value of 5: var Temp = 5;

2. You can declare the constant MY_FIVE with a numeric value of 5 using the following code: const MY_FIVE = 5;

3. The expression true && true || false

will evaluate to true.

Exercises 1. Create a constant called MY_CONST and give it a value of 12 and a variable called myVariable and assign it a value of 10. Alter the value of myVariable by adding to the value of myVariable the value of MY_CONST. Then display the new value of myVariable in an alert box.

2

78

Day 2

2. Create two variables firstVariable and secondVariable. Assign the value of 10 to firstVariable and assign the value of 12 to secondVariable. Create an alert box that outputs the comparison of the two variables.

WEEK 1

DAY

3

Functions and Statements This chapter begins by looking at how you can store code by creating your own functions, and how you can control the flow of a script. This will provide the other “half” of the basics you will need to create useful scripts (in addition to what you learned about variables in Chapter 2, “Working with Data”). You will also find out about some of the conveniently built-in pieces of code found in JavaScript. In this chapter you will learn the following: • What functions are • How to create a function • How to use a function • About predefined global functions • What statements are • Conditional statements • Loop statements

80

Day 3

User Defined Functions A user-defined function is a function that you create, as opposed to one of the built-in JavaScript functions. JavaScript provides both built-in functions and the tools to create your own. Both have their place, but for the moment, let’s concentrate on learning what functions are and how we can build and use our own.

What Is a Function? Chapter 2 started by looking at how variables and constants can be used to store data until it is needed or it can be used again. Although this is an essential part of programming, to create truly useful scripts you also need to be able to store code (as opposed to data). So far, the code we have worked with runs as soon as the page loads or is reloaded. Frequently, though, you may want to use the same piece of code multiple times or run it some time after the page has loaded in response to a user action. To do this, a function is used. Just as you can think of variables as data containers that can be used to store data, think of functions as code containers used to store pieces of code. Let’s take a look at how they work.

Creating a Function In much the same way as variables are declared with the var keyword, functions are declared using the function keyword followed by the name you wish to give to the function. However, when you declare a function you are required to include two additional items: a pair of parentheses and a pair of curly braces, as shown in the example below: function functionName(){}

Tip

JavaScript functions are named according to the same rules that are used for naming variables. They can contain alphanumeric characters, the underscore character, and the dollar sign as long as you do not use a JavaScript keyword. The first character cannot be a number. Remember also to give your functions meaningful names.

We will discuss the function of the parentheses shortly, so let’s concentrate on the curly braces for now. The curly braces (or “curly brackets” as they are sometimes called) act as code containers. All the code that is to be contained by the function (termed the function body) has to be placed between them. Essentially, the curly braces tell the JavaScript interpreter where the function body starts and where it ends. Here is an example of a function with some code: function myFirstFunction(){ alert(“I’m in a function!”) }

Functions and Statements

81

As functions usually contain more than a single line of code, it is usual to break the curly braces over more than one line, as shown below: function myFunction(){ . code . }

or sometimes the code is written like this: function myFunction() { . code . }

Caution

3

Do not put a semi-colon (;) after the parentheses or after the curly braces. This will cause an error.

The JavaScript interpreter will treat both methods of code layout the same way. The JavaScript interpreter knows that functions aren’t finished until it has reached a closing curly brace so it ignores the extraneous white space. The aim of spreading code across several lines and indenting statements is to make the start and end of your function stand out so that when you scan large sections of code you can immediately pick out function names and where their code begins and ends. Which method you use is up to you. Let’s create a page that contains a function that will greet a visitor by name. Use the template in Listing 1.6 and add to it the function in the following code. After you have created the page, save it, and load it into your browser. See Listing 3.1.

INPUT

LISTING 3.1

Creating a Function (storedGreeting.htm)

<script language=”javascript” type=”text/javascript”>
82

Day 3

LISTING 3.1

continued

var myName = prompt(“Please enter your name.”, “”); alert(“Welcome “ + myName + “!”) } //-->

Function Demo

As you will see, the page loads without an error but the JavaScript contained within the function body doesn’t run. Hopefully this was what you expected. Remember, functions store code—we have yet to learn how to evaluate the code.

ANALYSIS

Using Functions To evaluate the function’s code (or as we are going to refer to it from now on, “to call the function”), we need to write out something termed a function call. To do this, simply write the function’s name followed by opening and closing parentheses. The parentheses tell the JavaScript interpreter to call the function immediately and to run its code before it does anything else. Therefore to call the function in your page, simply write the following line under the function declaration: greetVisitor();

If you load your page with these changes, the function should be called, and you then will be prompted for your name and greeted.

Caution

As with the var keyword for variables, the function keyword is only used one time—the first time you declare a function. It is not used when you call it.

Function calls can be placed anywhere in a script block (and can be placed in event handlers, as you will learn later in the book). For the moment, though, to call our functions, we are going to use the ability of anchor tags to execute JavaScript using their href

Functions and Statements

83

attribute. To do this, simply write “javascript” followed by a colon and a JavaScript statement between the href’s quote marks. To see this at work, add the following line to the body of an HTML document and click on the hyperlink it produces. Click Here!

This can be used to call functions simply by replacing the alert function with a function call to one of your own functions. Go back to your page for greeting a visitor and add a hyperlink that calls the function as shown in Listing 3.2. Resave the page, and then open it with your browser.

INPUT

LISTING 3.2

Creating a Function (storedGreeting2.htm)

<script language=”javascript” type=”text/javascript”>

Please click below and enter your name when prompted.

Click for a greeting

As you will see, the page loads without the alert box displaying. Now try clicking on the hyperlink. This will call the function, and the prompt for your name should appear as shown in Figure 3.1.

3

84

Day 3

OUTPUT FIGURE 3.1 A prompt box requests your name.

Fill in your name and an alert box will appear to greet you. You will see later in the chapter how to handle situations when someone may not fill in the prompt or they may click Cancel. Hopefully you now see how simple functions are created and used, and you understand why they are so essential. Without functions JavaScript couldn’t do anything after the page had loaded. With them, you can create countless interactive or useful enhancements.

Sending Data to Functions Frequently, when creating a function you will want to give it some data on which to work. This allows you to perform the same process repeatedly on different sets of data. The process of sending data to a function is termed passing data to a function, which means that the data to be passed is written into the parentheses of the function call. For example, to send the numeric value 10 to a function called squareNum() you would write: squareNum(10);

Sometimes you will need to extend this process so that more than one piece of data can be passed to a function. This can be accomplished by placing each piece of data to be passed to the function within the parentheses, and separating each of them with a comma. For example, if you wanted to send two different strings followed by the number 3 and the Boolean value true to a function called processThis(), you would write: processThis(“1st string”, “2nd string”, 3, true);

Functions and Statements

85

As you will see later, the order in which these pieces of data are written between the parentheses is important to the correct functioning of a function. All these pieces of data that are sent to a function for use in the code that the function contains are known as arguments (or parameters) of the function. Now that you can pass arguments to a function, let’s see how you can use them in the function body.

Using Arguments There are two ways of grabbing the arguments that are passed to functions. For the moment, we will deal with the simpler and more popular of the two. The usual method of accessing arguments is to write names into the parentheses of the function declaration that correspond to the arguments written into the function call. For example, say you have a function called numOddOrEven() that calculates whether the single numeric argument that is passed to it is odd or even. To call the function and send it the number 9, you would write the following: numOddOrEven(9);

To use this number in the function, a name must have been written in the parentheses when the function was defined. For example, if the name theNum was used, it might look like this: function numOddOrEven(theNum) { numType = (theNum % 2)? “odd”: “even”; alert(“The number “ +theNum+ “ is an “ +numType+ “ number.”); }

For the moment, you don’t need to worry about how the function works. The important thing to note is the way that theNum is used repeatedly throughout the function block. Effectively, the name (or names) contained within the parentheses acts exactly like a variable. Wherever it is used in the function body, the theNum is replaced by the data that was sent to the function as an argument (in this case the number 9). The method of separating arguments with commas is also used to separate the argument names in the function declaration’s parentheses. To use two arguments in the function, you would declare it as shown below:

INPUT

function numsOddOrEven(num1, num2) { numType1 = (num1 % 2)? “odd”: “even”; numType2 = (num2 % 2)? “odd”: “even”; alert(“The number “ +num1+ “ is an “ +numType1+ “ number.”); alert(“The number “ +num2+ “ is an “ +numType2+ “ number.”); }

3

86

Day 3

To call this function and send it the numbers 5 and 10, you would write the function call as shown below: numsOddOrEven(5, 10);

This would result in the two alert boxes shown in Figures 3.2 and 3.3.

OUTPUT FIGURE 3.2 Alert showing the type of the first argument passed to the numsOddOrEven()

function.

FIGURE 3.3 Alert showing the type of the second argument passed to the numsOddOrEven() function.

Note the order in which the alert boxes appear. The argument name num1, which comes first in the parentheses of the function declaration, takes the value 5, which was given first in the function call. Likewise num2, which came second in the function declaration, takes the value 10, which came second in the function call.

ANALYSIS

Caution

Always be careful to provide data in the correct order. If you confuse the order in which you provide the arguments to a function, you will likely get an unexpected result or an error.

Another thing to note is that if you have declared your function with argument names in the parentheses, you do not necessarily have to send them data with the function call. If arguments aren’t sent, then the argument names will simply have the value undefined. For example, try calling the following function both with and without an argument:

Functions and Statements

INPUT

87

function checkForArg(myArg) { var msg = “The function argument was “; // Start message // Add ending based on whether an argument has been sent msg += myArg? myArg: “not sent!”; alert(msg); } checkForArg();

The conditional operator concatenates the argument passed to the function to the variable msg, if an argument has been passed to the function. If no argument has been passed to the function, then the string “not sent!” is concatenated to the msg variable.

OUTPUT

ANALYSIS

This feature can be useful if for some reason you want to code your function so it does not rely on being sent arguments. But that would be an unusual situation.

Caution

Be careful about passing the correct number of arguments to a function, since most of your functions will only operate correctly if the correct number of parameters is passed to the function. With no parameters or an incorrect number passed to the function an unexpected result or an error may occur.

Returning Data from a Function Very often you will want functions to give back data after they have processed the data that was sent to them. To do this we use the return statement. Take a look at this example before we walk through it:

INPUT

function getModulus(theNum) { var theModulus = (theNum>=0)? theNum: -theNum; return theModulus; } var myNum = -12; myNum = getModulus(myNum); alert(myNum);

Notice that the function call is on the right-hand side of an assignment to a variable called myNum, and that the function is sent the original value of myNum as an argument. The first line of the function processes the number to find its modulus (the number 12) prior to storing it in the variable theModulus.

3

88

Day 3

Note

The modulus of a number is the same as the number if the number is greater than zero. If the number is less than zero, then its modulus is the negation of the number—that is, the modulus of -5 is 5. The modulus is sometimes referred to as the absolute value of the number.

It is the next line that is really of interest here. It uses the return keyword to return the value of the variable theModulus to the point in the code where the function call is situated. In this case, the function call was to the right of the = assignment operator. Therefore the value 12 is assigned to the variable myNum replacing its original value of -12. This is shown when the alert box displays myNum’s value (see Figure 3.4).

OUTPUT FIGURE 3.4 An alert showing the value of myNum, which is the value returned by the getModulus ()

function.

The return statement does indeed return data from the function to wherever the function call was located. However, there is another characteristic of the return statement that the above example doesn’t clearly demonstrate. When the return statement is evaluated it stops any further evaluation of the function body. Enter the following into the template from Listing 1.6 and try it out:

ANALYSIS

INPUT

function returnTest() { alert(“This will alert.”); return; alert(“This won’t alert.”); alert(“Neither will this.”); alert(“Or this.”); } returnTest();

In this example, the first alert would be the only one to be evaluated, and therefore displayed, because the return statement stops the function from continuing to the end of the function body.

OUTPUT

Functions and Statements

89

ANALYSIS A return statement can have two effects. When a return keyword is encoun-

tered it always stops a function from further evaluation. If provided with some data, the return statement will return the data to the place in the code where the function call is situated. If the return statement is not provided with data, it will simply return undefined—just as a function without a return statement would.

Variable Scope As promised in Chapter 2, let’s now look more closely at the differences that including or omitting the var keyword during declaration of a variable would make on the variables in your JavaScript code. The reason for putting this examination off until now is because it is in functions that your choice of including or omitting the var keyword has the most significant effect. Before we go on to find out more about the scope of a function, let’s first take a look at the meaning of the word scope. The word scope refers to the limits inside which something is applicable. For example, in the United States there are two types of law: federal law and state law. State law is only applicable in individual states and therefore due to its geographical limitation, it might be referred to as having “local” scope. Federal law, on the other hand, isn’t limited by state boundaries. It governs the whole country, so it might be said that, as far as the United States is concerned, it has “global” scope.

NEW TERM

The idea of local and global scopes also exists for JavaScript variables. When a variable is termed a global variable it means that it can be accessed and used by any part of any of the scripts in the same HTML document. In addition, you also can use global variables in scripts that are in a different frame or browser window (although we haven’t covered that yet). All variables declared in the script block, but outside of functions, have global scope. Variables defined inside a function are different. Their scope depends on whether you do or do not declare them with the var keyword. If a variable is declared within a function without the var keyword, then its scope is global. If a variable is declared within a function using the var keyword, then its scope is local. The problem with creating global variables from inside a function may not be immediately apparent. What tends to happen is that functions use temporary variables that are of use only while the function is evaluating. Outside the function they aren’t needed. It is easy in a long piece of code to forget some of the global variable names and give one or more of the variables inside a function the same name as a global variable which already exists. If you have not included the var keyword when a variable is declared within a function, then the variable is global in scope and the data in the global variable with the

3

90

Day 3

same name outside the function is overwritten. This can play havoc with your scripts, and it can be very hard to track down the problem, as error messages that may be generated won’t tell you from where the problem stems. The JavaScript interpreter is doing what you told it to do, but it is doing something that you may well not have expected it to do. Creating local variables enables you to eliminate the possibility that this type of problem will ever arise. If you happen to unintentionally use the same name for a variable in a function and a variable in the main script block, then as long as you used the var keyword an entirely different local variable is created inside the function.

Note

Local variables are not only limited to the function in which they were defined, but they also only exist for the time it takes for the function to execute. As soon as the function body has been evaluated, local variables cease to exist and the data they contained is discarded.

Here is an example that will show you the effect of declaring a variable within a function. Run it both with and without the var keyword in front of the variable testVariable in the function. First, if you run it with the var keyword within the function, the value of the global variable will not be overwritten.

INPUT

var testVariable = “Global variable was NOT overwritten!”; function someFunction() { var testVariable = “Global variable WAS overwritten!”; } someFunction(); alert(testVariable);

However, if you run the following code with the var keyword omitted in the declaration of the variable within the function, then the global variable will be overwritten.

INPUT

var testVariable = “Global variable was NOT overwritten!”; function someFunction() { testVariable = “Global variable WAS overwritten!”; } someFunction(); alert(testVariable);

In summary, unless you specifically want the function to change the value of a global variable you should always declare variables inside of functions with the var keyword.

Functions and Statements

91

It may seem tedious, but if you get into this good habit of using the var keyword all the time, you will ensure that you don’t accidentally overwrite an important global variable in a long complex script.

Caution

If you are using publicly available JavaScript code written by someone else with your own code, you need to be particularly careful. The way the other script author uses variables could be similar to your own, and one of your local variables could overwrite one of his global variables, causing problems that could be very difficult to track down.

Predefined Global Functions JavaScript provides many predefined functions. Some of these functions, termed global functions, can be called from any part of a script—just as you can call the functions you have written. However, many predefined functions need to be treated as belonging to objects. This means that they can’t be called in the same way that functions have been called so far (as you will learn later in the book). For the moment, let’s look at global functions.

Note

JavaScript’s predefined functions use native code (binary computer code) so you can call them but the code they contain cannot actually be seen. They are not written in JavaScript in the way that we write functions.

We have already come across and used some predefined functions such as the alert(), confirm(), and prompt() functions which bring up small dialog boxes to enable basic user interaction. These functions have been around for so long that the majority of browsers support them, although they are not actually part of core JavaScript. This means that in an environment other than a Web browser they may or may not be available. For the moment let’s concentrate on the core JavaScript functions. The predefined core JavaScript functions are listed below. •

decodeURI()

•

decodeURIComponent()

•

encodeURI()

•

encodeURIComponent()

3

92

Day 3

•

escape()

•

unescape()

•

eval()

•

isFinite()

•

isNaN()

•

Number()

•

parseFloat()

•

parseInt()

•

toString()

•

watch()

•

unwatch()

With the exception of watch() and unwatch(), you have already learned enough to be able to make use of all these functions. The watch() and unwatch() functions work with things called “object properties” to help in debugging. (As object properties are quite an advanced topic, and we haven’t yet covered objects; those functions will be discussed later in the book.) All these built-in functions either check or modify data in some way or another. Let’s take a look at them now, one by one, and see what they do and how they can make our lives easier.

URI Encoding and Decoding URIs (Uniform Resource Identifiers) is the most general name for the addresses used to access files on the Web. A “resource” is a unit of information that can be addressed. Not only can URIs be used to specify the address of a Web page, but they also can be used to send it information. You have probably seen Web sites where the address bar contains a question mark and lots of % symbols that are each followed by two numbers or letters. These are query strings used by sites, such as search engines, to send data from you to the server. The reason that much of the data is converted to what is called hex form, also called “escaped form”—when a character is converted to a % and the two characters of its hexadecimal value—is that some characters such as the space character can’t be carried as they are in a URI.

NEW TERM

When a form is used to submit data as a query string using the HTTP GET method, the browser automatically converts the characters that aren’t allowed within a URI to their encoded hex values. To do this using JavaScript, you need to use built-in functions.

Functions and Statements

93

The original JavaScript functions for encoding and decoding URIs were the escape() and unescape() functions respectively. Let’s look at an example to clarify just what they do:

INPUT

var priceRange = “$4 - $6”; var escapedRange = escape(priceRange); alert(escapedRange);

Figure 3.5 shows the output from the code.

OUTPUT FIGURE 3.5 Contents of the escapedRange variable after the escape() function has been applied to the priceRange variable.

3

The escape() function has replaced the $ and space characters with their escaped values, which are %24 and %20 respectively. The unescape() function acts in exactly the opposite way. When applied to the variable escapedRange the unescape() function will turn it back into text again.

ANALYSIS

Unfortunately the escape() and unescape() functions encode characters that do not need to be encoded. They are also slightly inconsistent from browser to browser in which characters they will encode. To remedy this, ECMAScript Edition 3 defined four new functions which are intended to replace the escape() and unescape() functions. These are the encodeURI(), decodeURI(), encodeURIComponent(), and decodeURIComponent() functions.

Caution

encodeURI(), decodeURI(), encodeURIComponent(), and decodeURIComponent() are only supported by Netscape 6+ and Internet

Explorer 5.5+.

The encodeURI() function will encode all characters except for alphanumerical characters and the following characters which it leaves intact: ! # $ & ‘ ( ) * + , - . / : ; = ? @ _ ~

94

Day 3

The encodeURIComponent() function is slightly different. It will encode all the characters that the encodeURI() function encodes but will also encode these characters: # $ & + , / : ; = ? @

Therefore, it only leaves alphanumeric and the following characters intact. ! ‘ ( ) * - . _ ~

The reason for having two different encoding functions is that sometimes you may want to encode a whole URI including the http:// etc., and at other times you may want to only encode some data to be attached as a query string. Clearly, if you were to encode a complete URI with the encodeURIComponent() function, you would end up encoding the :// part of http:// too. Therefore, two different functions were created: One for thoroughly encoding URI components to be added as a query string; and another function for encoding the address before the query string. The counterparts of these functions are the decodeURI() and decodeURIComponent() functions. The decodeURIComponent() function is similar to the unescape() function. It will decode all encoded characters. The decodeURI() function on the other hand will leave the following characters encoded: # $ & + , / : ; = ? @

Evaluating Strings as Code The eval() function is unusual in that it takes a string and processes it as code. Clearly, if this is not to cause an error, the string must be recognizable as JavaScript. To demonstrate this, try the code in Listing 3.3.

INPUT

LISTING 3.3

eval() Demo (evalDemo.htm)

<script language=”javascript” type=”text/javascript”>

Functions and Statements

95

LISTING 3.3 continued

eval() Demo

In the single line of JavaScript code, a string is stored in the variable myCode. Although you can see it is a piece of JavaScript, JavaScript itself doesn’t realize this. As far as it is concerned, it is just a series of characters strung together that it has been asked to store in a variable. Now try adding the following line after the variable declaration:

INPUT

eval(myCode);

The eval() function will force the string to be evaluated as JavaScript and the

OUTPUT alert box should appear.

For the moment we haven’t covered enough to make practical use of the eval() function, but take note of it as it comes in very useful as you will see in later chapters.

Arithmetic Functions Often programming is about manipulating numbers. It is no surprise then that JavaScript has a number of built-in functions designed to complement the arithmetic operators you learned about in Chapter 2. JavaScript provides functions that check whether a piece of data is a number or what type of number it is, as well as functions which enable the manipulation of the numbers.

Numerical Checks on Data There are two conditions that commonly cause arithmetic scripts to fail in JavaScript. One is that a number is, or becomes, infinite (or too large for JavaScript to handle, in which case the JavaScript interpreter treats the number as having the value Infinity). The other is that one of the pieces of data in an arithmetic operation is not a number. To check for these conditions where they are likely to occur, JavaScript provides two functions: isFinite() and isNaN(). Before examining these functions, it should be mentioned that there are three special values which have the data type number. These are Infinity, –Infinity, and NaN. Infinity and –Infinity represent, respectively, positive and negative numbers that have become too large for the JavaScript interpreter to handle or are genuinely infinite. They aren’t of much practical use in an operation except to indicate that a number is too large

3

96

Day 3

for the JavaScript interpreter to reliably process. The other special value NaN, which stands for “Not a Number,” indicates that an arithmetic operation could not be carried out: alert(“a” - 10);

//alerts NaN

As you already may have guessed, the isFinite() function checks to make sure that a number is not one of the special values Infinity or –Infinity. If the number is finite and calculations can be carried out, then the function returns true, otherwise false. It is rare that numbers to be entered directly into JavaScript are too big for it to process. It usually occurs when numbers are raised to excessive powers or divided by zero or a number very close to zero. Special care must be taken when accepting user input that might be used in these ways. The isNaN() function is a little more tricky. It checks that a value is not a number. This allows us to check for numbers without checking for all of the other four data types in turn. Unfortunately, the function can cause some confusion at first because it returns false if a value is a number and true otherwise (after all it is checking that a value is not a number). See for example, the following: alert(isNaN(“a”)); alert(isNaN(2));

// alerts true // alerts false

If you really want it to return true for numbers, the logical NOT operator can be placed in front of the function thereby reversing the result.

Caution

Rather surprisingly NaN does not even evaluate as being equivalent to itself. Therefore: NaN == NaN NaN === NaN

// evaluates to false // evaluates to false

To check for the value NaN, you must use the function isNaN(): isNaN(NaN)

// evaluates to true

The isNaN() function is especially useful when you collect numerical data from a visitor who is viewing your Web page. If the user enters non-numerical data either accidentally or intentionally then, without some appropriate error checking, your script will fail. It is always a good idea to use the isNaN() function to check any data you collect when you process it in any scripts. Let’s look at Listing 3.4, where the getModulus() function we wrote earlier is improved:

Functions and Statements

INPUT

LISTING 3.4

97

Safely Finding the Modulus (getModulus.htm)

<script language=”javascript” type=”text/javascript”>
getModulus()

theNum = prompt(“Please enter a number”, “”); theModulus = (theNum>=0)? theNum: -theNum; msg = (isNaN(theModulus))? “Numbers only please.”: “The modulus of “ + theNum + “ is “ + theModulus; alert(msg);

} //-->

Finding the Modulus

Get Modulus

When the link is clicked the function getModulus() is called. It prompts the user for a number and stores the input in the variable called theNum. The conditional operator is used on the following line to try to find the modulus (or absolute value) of the input. If this input is not numeric, then the result will be the value NaN. On the next line, the conditional operator is used again. This time the condition is the result from the function isNaN().

ANALYSIS

If the result of finding the modulus was NaN, then the isNaN() function will return true and the conditional operator will evaluate to its second operand which is the string “Numbers only please.”. Note that the end of this line is a colon and not a semicolon. A new line for the third operand was started because it is quite long. If the result of the function was false, then the conditional operator will evaluate to its third operand, which is an expression. This expression combines the values of theNum and theModulus. It generates a string that tells the user, in a user-friendly way, the modulus of the number that was entered. Whichever operand the conditional operator evaluates to is assigned to the

3

98

Day 3

variable called msg. This message is then alerted to the user using the code on the final line of the function body. The isNaN() function enabled you to output a result that has some intelligence to the user. In combination with the powerful control statements that you will learn about later in the chapter, the isNaN() function can be a very useful tool. Try to get used to using the function to check the data you collect with HTML forms or prompt boxes when this data should be numerical. It will help you make more professional scripts and allow you to avoid a significant number of potential errors.

Conversion Between String and Number There are good reasons for converting strings to numbers and vice versa. For example, numbers collected from user input are always in the form of a string. Most times if you perform an arithmetic operation with this data it will automatically be converted to the number data type, but sometimes it is necessary to do it manually. Most notably is when you wish to add two numbers that are stored as strings. If you try to do this without converting their data types, then the two strings will simply be concatenated. Conversely, in other settings, if you do want to concatenate two numbers which are of the data type number, you will need to convert their data type to string first. If you don’t, they will simply be added. The Number() and parseFloat() functions both take a single argument (or parameter if you prefer) and treat it in a very similar way. If the argument is a number they will return it unaltered, but if it is a string they will convert its data type to number (if possible) so that it can be used in arithmetic operations. They also both leave the number’s floating point intact (unless all the digits are zeros in which case they are removed). They differ in two respects: how they treat other data types, and how they treat strings starting with numerical characters followed by non-numeric characters. The parseFloat() function will always evaluate to NaN if used on a data type other than number or on a string, except when it contains only arithmetic characters. The Number() function, on the other hand, is a bit more flexible about the data with which it will work. As you might expect, it will convert false and null to 0, true to 1, and only undefined will be converted to NaN. Most of the time your choice of either of these two functions won’t make a difference, but sometimes you may need one effect rather than the other— depending on how you want the function to treat non-numeric or string data. As you progress through the book and learn more, you will become better equipped to make that decision.

Functions and Statements

99

If a string starts with numbers and they are followed by other characters, the Number() function will realize it is not a number and return the value NaN. The parseFloat() function, on the other hand, exhibits a special behavior. It removes the non-numeric characters from the end of the numbers and returns the numeric characters as a number. For example, the following code shows how the Number() and parseFloat() functions handle strings passed to them as arguments: Number(“1.12 is a number”); parseFloat(“1.12 is a number”);

// returns NaN // returns 1.12

Sometimes you may want to round off a number to get rid of its fractional part. The parseInt() function allows you to do exactly that. It converts a value’s data type to number and rounds it down to an integer in a single step. Here is an example: parseInt(“2.1”); parseInt(“2.5”); parseInt(“2.99999”);

// returns 2 // returns 2 // returns 2

This is useful, but the parseInt() function also has another less well known ability. It can convert numbers with a base between 2 and 36 to a decimal number (base 10). It does this by taking the number as its first argument, and then it allows you to specify the number’s base as a second argument. The values can be either the string or number data type. For example, see the following: parseInt(“1111”, 2); // returns 15

In this case, the number is the value “1111”, and the base was specified as 2, which is binary. Therefore the first argument is converted from binary to its decimal equivalent, which is 15. Here are another few examples: parseInt(20, 16); // returns 32 parseInt(“10”, 8); // returns 8 parseInt(“30”, 4); // returns 12

Note that parseInt() still rounds down numbers before conversion: parseInt(“1111.1111”, 2); // still returns 15 parseInt(“ff.ffff”, 16); // returns 255

Caution

The value you give to parseInt() must be a string if it is above base 10. This is because numbers above base 10 may include alphabetical characters.

If numerical data is collected from a user and the numbers after the decimal point are not required, it is a good idea to use the parseInt() function and specify the number’s base as 10. This will prevent it being interpreted as an octal number if the user began the

3

100

Day 3

number with a 0. The parseInt() function behaves in the same way as the parseFloat() function if a string starts with a number but continues with other characters; it will return only the number. The final function for string-number conversion is the toString() function. It behaves exactly opposite of the Number(), parseFloat(), and parseInt() functions. Instead of converting strings containing numeric characters to numbers, it converts numbers to strings. If you want to add one set of digits to another without them being summed, it can be done with this function. The syntax for the toString() function is different from that used for the Number(), parseFloat(), and parseInt() functions. Instead of taking a value as an argument typed into its parentheses, it uses something called the dot notation. In this case, the value must be stored in a data container such as a variable. The variable is then joined to the function call with a dot. Here is an example: var myVar = 2; myVar.toString();

// returns the string “2”

The dot tells the JavaScript interpreter to apply the toString() function to the contents of the variable myVar, which causes its data type to be changed to the data type string. You will learn more about dot notation as it applies to objects and their functions (methods) later. Let’s have a look at the effect this has on a few examples:

INPUT

var num1 = 12; var num2 = 34; alert(num1 + num2); alert(num1 + num2.toString()); alert(num1.toString() + num2);

As you would expect, the expression on the third line sums the contents of the two variables num1 and num2. The toString() function causes the next two expressions to behave very differently though. Both functions would display the following alert box (see Figure 3.6).

OUTPUT FIGURE 3.6 After the toString() function is applied the numbers concatenate!

Functions and Statements

101

The toString() function has caused the operands of the + operator to concatenate rather than sum. Remember that in Chapter 2 you learned that if one of the operands of the + sign is a string, then it concatenates the two operands regardless of the data type of the other. Therefore there is no need to apply the toString() function to both operands. Applying it to one of them is enough.

ANALYSIS

It is probably the last thing you would expect, but the toString() function is also able to convert numbers between bases. It does exactly the opposite of the action taken by the parseInt() function. The difference is that rather than converting a number from a base between 2 and 36 to a decimal value, the toString() function takes decimal numbers and converts them to a base between 2 and 36. Of course JavaScript only outputs numbers as decimal values so the “numbers” the toString() function returns aren’t of the data type number, but rather of the data type string. However, as they look like numbers to all intents and purposes, this doesn’t usually matter. To use toString() in this way, you simply give it the base you want to convert to as an argument:

INPUT

var y = 10; y.toString(8); var x = 0.5; x.toString(16);

// returns 12 (10 decimal expressed to base 8) // returns 0.8 (0.5 decimal expressed to base 16)

Note that as JavaScript accepts numbers in octal, decimal, or hexadecimal format, the toString() function converts from octal and hexadecimal numbers to the base you chose as well as from decimal. By combining the parseInt() and toString() functions, it is possible to convert a number from any base between 2 and 36, to any other base between 2 and 36. As shown below, this can be written into a function so it can be used multiple times on the same page. Just remember that because the parseInt() function removes floating points the function won’t be accurate with non-integers:

INPUT

function convertNum(theNum, fromBase, toBase) { var numBase10 = parseInt(theNum, fromBase); alert(numBase10.toString(toBase)); } convertNum(1100, 2, 16);

In this example, the first line takes the 1100 from the argument theNum, and the argument fromBase specifies it as binary. The parseInt() function then converts it to decimal before it is stored in the variable numBase10. On the second line, the decimal value is converted using the argument toBase to specify the base as hexadecimal.

ANALYSIS

3

102

Day 3

This then alerts the value c, which is the hexadecimal equivalent of the binary value 1100. Note that the alert could just as easily be replaced with a return keyword for more practical use.

What Is a Statement? All JavaScript scripts are essentially a series of commands that are passed to the interpreter to be carried out sequentially. JavaScript usually requires that each one be placed on a separate line. So far, we have been referring to these lines simply as lines of code. It is more accurate to call them statements.

NEW TERM

Already, you have come across several statements. For example, the method for adding comments into your code, which you learned in Chapter 1, uses the comment statements /* and */ or //. The // characters instruct the JavaScript interpreter to ignore all characters until the end of the line of code. Other examples include the following keywords: var, const, and function, which tell the interpreter to create a variable, constant, and function respectively. These are all statements. It is important to realize that although the words “expression” and “statement” can occasionally be used interchangeably, there is a difference between the two. As you have seen, expressions use operators to manipulate data before they evaluate to a single value (with the possible exception of the assignment expressions that also assigns its value). This is great and an essential part of a programming or scripting language, but expressions can’t do anything productive by themselves. Statements are the commands that decide what is done with the data that expressions return and, as you will see shortly, what is done with other statements. Expressions, on the other hand, are usually only a part of a statement, as shown in the example: const MY_CONST = 72/9;

The 72/9 is a sub-expression of the assignment expression, which assigns the outcome of dividing 72 by 9 (the value 8) to the constant MY_CONST. However, the line, as a whole, is considered to be a const statement. It is the const keyword that causes the constant to be created, thereby doing something useful with the data that the expression to its right evaluates to. Usually statements end with a line break, but if two statements are placed on the same line a semicolon must be used to separate each one. The semicolon tells the JavaScript interpreter that it has reached the end of a statement and should finish processing the code in front of the semicolon before it proceeds. In any case, it is helpful for the readability of your code to put no more than one statement on a line. Let’s study the type of statement that controls other statements.

Functions and Statements

103

Control Statements Control statements are designed to allow you to create scripts that can decide which lines of code are evaluated, or how many times to evaluate them. There are two different types of control statements: conditional statements and loop statements. Control statements make their decisions based on an expression that evaluates to the logical values true or false or their equivalents in other data types. As we will be using non-boolean data types extensively for the remainder of the chapter, here is a reminder of how the other data types are treated in logical conditions: • Numbers are treated as true if not equal to 0, otherwise they are treated as false • Strings are treated as true if greater than 0 characters in length, otherwise they are treated as false •

undefined

•

null

is treated as false

is treated as false

Conditional Statements Conditional statements are used to make decisions. In real life, we make all sorts of decisions based on criteria such as “am I being offered enough money to take this job?” If the answer is “yes,” then the result is “take the job.” If the answer is “no,” then “don’t take the job.” In JavaScript, you need to make decisions about which sections of code to evaluate. For example, if you asked a user for input so you could perform a calculation, you will want to carry out the calculation if the input is numeric, but not if it isn’t.

NEW TERM

You already have come across a simple means of making a decision in the form of the conditional operator, ?:. The conditional operator checks to determine if a condition is true or false, and uses the result to decide whether to evaluate to its second or third operand. Although this is a quick method of assigning one of two values to a variable, it is also very limited. If you want to choose between more than two options, the conditional operator is inadequate to do what you want.

The if, else, and else if Statements The if, else, and else if statements allow you to make a choice among several options. First let’s look at how to use the if statement to make a choice between two alternatives.

NEW TERM

3

104

Day 3

The if statement is the most frequently used decision-making statement. It checks a condition and if it evaluates to true, then the statement(s) that it governs are evaluated, but if it evaluates to false then the statement(s) are passed over. The syntax is as follows: if (condition) statement

or if (condition) statement

The condition is always surrounded by parentheses but the statement it governs can be on the same line or the following line. The JavaScript interpreter always associates the if statement with whatever statement follows it. Both code layouts work but some people prefer using separate lines because it makes their if statements easier to read. Here is an example that uses two if statements so you can get a feel for how the if statement works:

INPUT

var myVar1 var myVar2 if (myVar1 if (myVar2

= true; = false; == true) alert(“myVar1 is true”); == true) alert(“myVar2 is true”);

This will display only one alert box. The final line in the code will not cause an alert box to be displayed because the variable myVar2 has the value of false. See Figure 3.7.

OUTPUT FIGURE 3.7 The first if statement evaluates to true so the first alert box displays.

Remember that the comparison operator, ==, checks to see if the operands to its right and left are equal. If they are equal it returns true, and if they are not equal it returns false. In the above example, the condition for the first if statement evaluates to true because the value of myVar1 is true. The condition for the second statement evaluates to false because myVar2 does not equal true. As you can see, the if statement makes the decision as to whether the alert() function is called based on the evaluation of the condition.

Functions and Statements

105

Frequently, you will want the if statement (and the other conditional statements for that matter) to govern more than just one other statement. To do this, you need to use what is known as a statement block. The statement block consists of a pair of curly braces that surround the if statement’s statements in the same way that curly braces surround the statements in the function body. For example:

NEW TERM

if (condition) { statement1 statement2 ... statementN }

Hopefully this feels familiar. If the condition in parentheses evaluates to true, then the statements within the curly braces are evaluated. If the condition in parentheses evaluates to false, then none of those statements is evaluated.

Tip

It is useful to use curly braces even when the if statement has only one statement associated with it. Then if you later need to add other statements, you won’t encounter errors caused by forgetting to add the curly braces.

Remember that conditional statements allow you to take one action if a condition is true and another if it isn’t. This is where the else statement comes in. By placing the else statement after the if statement, it is linked to the if statement so that the statement(s) it governs is evaluated if the condition in the parentheses of the if statement turns out to be false. This saves writing out the condition again. In this way, either the statements the if statement governs will be evaluated, or the statements the else statement governs will be evaluated. After all a condition in JavaScript can only evaluate to true or false. Here are a couple of examples to demonstrate how you would write this:

INPUT

if (4 < 3) alert(“4 is less than 3”); else alert(“4 is greater than 3”);

Since 4 is greater than 3, the alert after the if statement is ignored; therefore, the alert() function after the else statement is evaluated. The else statement can also be used with a function block so you could write:

ANALYSIS

3

106

Day 3

INPUT

if (4 < 3) { alert(“The if statement’s statement block was evaluated”); alert(“because 4 is less than 3”); } else { alert(“The else statement’s statement block was evaluated”) alert(“because 4 is greater than 3”) }

Finally, when you need even more flexibility to check multiple conditions there is the else if statement. It is inserted between the if and else statements. Here’s an example:

INPUT

var promptVal = prompt(“Please enter a number”, “”); if (promptVal > 0) alert(“The number you entered was positive”); else if (promptVal == 0) alert(“The number you entered was zero”); else alert(“The number you entered was negative”);

In this example, the script accepts an inputted number and uses it along with the if ... else if ... else statements to choose among three possible alerts to evaluate. Note that only one of the control statements will be used. If the if statement’s condition evaluates to true, then the else if statement and the else statement will be ignored. If the if statement evaluates to false, then the condition of the else if statement is checked. Likewise if the condition of the else if statement evaluated to true, then the else statement would be ignored. The else statement acts as the default if all the previous conditions evaluated to false. Sometimes you will not want anything to happen if none of your conditions evaluates to true, in which case you would not use an else statement.

ANALYSIS

Multiple else if statements can be placed between the if statement and else statement if you want to check for more than three conditions. If you remember the discussion about the isNaN() function earlier, you may have realized that there is a problem with the example above—it doesn’t allow for the fact that the user may enter a non-numeric value. To accommodate this situation, you would want to move the condition checking for a number greater than 0 to an else if statement and use the if statement to first check if the value entered is numeric. To do this you would use the isNaN(). Here’s an example:

INPUT

var promptVal = prompt(“Please enter a number”, “”); if (isNaN(promptVal)) alert(“That wasn’t a number!”); else if (promptVal > 0)

Functions and Statements

107

alert(“The number you entered was positive”); else if (promptVal == 0) alert(“The number you entered was zero”); else alert(“The number you entered was negative”);

Note that statement blocks also can be used with the else if statement to control more than just one statement, such as the alerts in the earlier example. Let’s look next at an alternative control statement, the switch statement, that could have been used instead of the if...else statements in the above example.

The switch Statement The switch statement allows you to choose one of several options. It has functionality which resembles that provided by the if, else if, and else statements. Let’s look at how the switch statement works. The switch statement has markedly different syntax from the if...else statements, but it works in a similar way. Its structure is shown below. Note that the lines that begin with case must end in a colon.

INPUT

Note

switch (expression){ case value: statements case value: statements case value: statements }

Case values in JavaScript do not need to be constants or the same data type.

The first thing a switch statement does is evaluate the expression contained within its parentheses to a single value. It then works its way down through the case statements checking if the value returned by the expression in parentheses after the switch keyword is matched by any of the values that follow the case keywords. If it finds a match, then it evaluates all the following statements that belong to that case statement. Try the example in Listing 3.5, and see for yourself.

3

108

Day 3

INPUT

LISTING 3.5

Switch Statement Demo (switchDemo.htm)

<script language=”javascript” type=”text/javascript”>

Switch Statement Demo

This page will result in the alert boxes shown in Figure 3.8.

OUTPUT FIGURE 3.8 Two alert boxes are brought up because the second and third case statements each evaluate as true.

This is because the 1+1 evaluates to 2. Therefore it should come as no surprise that the first case, the string “a”, does not cause the associated alert() function to be evaluated. But the next case is the number 2, which is a match. As you can see from the screenshots in Figure 3.8, this causes not only the alert containing the number 2

ANALYSIS

Functions and Statements

109

to be evaluated, but, perhaps surprisingly, the alert containing the number 3 is also displayed. However, this may come as no surprise. We did say that if a match was found all the following statements would be evaluated up to the closing curly brace of the switch statement. Although this feature can occasionally be of use, generally you will want to evaluate only the statements between the matching case and the following one. To do this, you need to use the break statement. Replace the switch statement in Listing 3.5 with the following code:

INPUT

Note

switch (1+1){ case “a”: alert(1); break; case 2: alert(2); break; case 3: alert(3); break; }

The statements following each case are not enclosed in curly braces as in a statement block even if there are lots of them on multiple lines. Therefore, it is helpful to lay out your code as shown in the example above, to help you or someone else decipher your code.

ANALYSIS As you will see, using the break statement as the last statement in a case statement block breaks off evaluation of the switch statement, and execution of the script continues after the closing curly brace of the switch statement. This has the desired effect of preventing the statements belonging to the other case statements from being evaluated.

The switch statement is able, optionally, to run some code in the event that there are no matches—just as a concluding else statement works at the end of an if...else statement. To do this, you would include, following the case statements, the keyword default followed by a colon, as shown in the example below:

INPUT

switch (“Match this string.”){ case “This doesn’t match.”: alert(“This would have alerted if it had!”); break; case “Nor does this.”: alert(“This would have alerted if it had!”); break;

3

110

Day 3

case “Or this.”: alert(“This would have alerted if it had!”); break; default: alert(“None of the cases matched so the default evaluated.”); break; }

As none of the cases above are the string “Match this string”, their statements are ignored and the statements under the default are evaluated. See Figure 3.9.

OUTPUT FIGURE 3.9 The default statement is evaluated when none of the case statements match.

So which should be used: the if...else statement or the switch statement? The answer is that often either will do. The switch statement checks for a match to a single expression, and therefore is useful when you need to evaluate different statements based on the value of a single variable. It is also more efficient, so try to become accustomed to using it when possible. The if...else statement, on the other hand, can be given a new condition to check with each else if statement. This gives the if statement (and its associated else if statements) more flexibility, so the if statement tends to be used more than the switch statement.

ANALYSIS

Loop Statements Sometimes you will need to repeat an operation multiple times until a certain condition is true. As you will see in Chapter 5, “An Introduction to Arrays,” this is especially important when you need to work with data stored in arrays. The types of statements used to accomplish repetitive loops are called loop statements. An integral part of these statements is comparison and increment operators discussed in Chapter 2.

NEW TERM

There are three types of loop statements: the while statement, the do and the for statement. Let’s look at the while statement first.

while

statement,

Functions and Statements

111

The while Statement The while statement is the easiest of the looping statements to understand and use. Although it performs a different task, its structure is similar to the if statement: while (expression) statement

or while (expression) statement

Like all the looping statements, the first thing the while statement does is evaluate the expression contained within its parentheses to see whether the expression evaluates to true or false. If the expression evaluates to true, the while statement evaluates its statement(s). Where it differs from the statements that you have seen before is that it then goes back to recheck its expression. If the expression is true, then the JavaScript interpreter will execute the statement(s) in the statement block and it will evaluate the expression in parentheses again. The JavaScript interpreter will continue to loop in this way until the expression evaluates to false. Clearly, if the while statement isn’t to loop infinitely something in the expression has to change. This is achieved by including a variable in the expression that is changed by one of the statements evaluated by the loop during each evaluation. For example take a look at the following code:

INPUT

var loopCounter = 0; while (loopCounter <= 3) alert(loopCounter++);

This causes the display of four alert boxes in succession with the numbers 0, 1, 2 and 3 respectively. After the fourth alert has been displayed the variable loopCounter will contain a value of 4, so when the expression loopCounter <= 3 is evaluated, it returns false. Therefore, the while loop is not executed again and control passes to the statement that follows the while statement.

ANALYSIS

In Chapter 2 you learned that increment and decrement operators (++ and -- respectively) can be used to increment or decrement the value of their operand by 1. As you can see, this is especially useful in loops such as the one above. Every time the above alert is evaluated the value of the variable loopCounter is increased by 1. Therefore, after four loops the value of loopCounter is no longer less than or equal to three. Hence the expression evaluates to false, causing the while statement to stop looping, at which point evaluation will continue at the code following the while statement.

3

112

Day 3

It is uncommon to actually use a long variable name such as loopCounter because they are extensively used in the statements belonging to the loop statement. It is standard practice to give counter variables the names i, j, and k so as to keep the code as uncluttered as possible. But note this is the only time that it is considered acceptable to give variables such nondescript names.

Caution

You must be careful that the variable in the expression changes each time so eventually it will cause the expression to evaluate to false. If you don’t change the variable in the expression, the while statement will loop infinitely preventing any other scripts from running and, in some older browsers, will cause the browser to crash. This can happen if you forget to include a statement that increments/decrements the variable, or if you increment/decrement it in the wrong direction!

Generally, when you use the while statement you will want it to loop through more than just one line of code. To do this, include the curly braces as usual to create a statement block belonging to the while statement. For example, you could have written the above example like this: var loopCounter = 0; while (loopCounter <= 3) { alert(loopCounter); loopCounter++; }

The do while Statement The do while statement is very similar to the while statement. The difference is that the expression is evaluated at the end of the statement. In other words, the statement block is always evaluated once before the expression is evaluated. The structure of a do while statement is shown below:

INPUT

do statement while (expression);

The major effect of having the expression at the end of the loop is that the statements contained by the do while statement will be evaluated at least once before the expression is evaluated to decide whether it should loop again. For example try out the following code:

ANALYSIS

INPUT

do alert(“Statement evaluated!”); while (false);

Functions and Statements

113

As you will see, the alert box displays once regardless of the fact that the expression is simply the value false. Other than this, there is no difference between the way the while statement and the do while statement work.

ANALYSIS

If you want a do like this:

INPUT

while

statement to control multiple statements use a statement block,

do { statement1 statement2 ... statement5 } while(condition);

Caution

Because the do while statement does not end with a closing curly brace, it requires a semicolon after the closing parenthesis. Forgetting to include the semicolon may cause an error.

The for Statement The while and do...while statements have three essential elements: a statement that sets the initial value of a counter; an expression that tests a condition; and an expression that increments the counter. It can be easy to forget one or other of these when you are quickly typing out a piece of code, and you could end up with problems such as infinite loops. Fortunately, there is an alternative in the form of the for statement, which can contain all these elements in one place. It is written with the following structure: for (setInitialCounterValue; testCondition; changeCounterValue) statement

Because all three of the essential parts of a loop statement are located between the parentheses, the for loop is much more popular than the other two methods because it is easier to follow the logic that controls the looping.

Note

The for statement can govern multiple statements by enclosing them in a statement block.

Here’s a simple example that would display three alert boxes:

INPUT

for (var i=0; i<3; i++) { alert(i); }

3

114

Day 3

The first statement in the parentheses declares and assigns to the variable i an initial value. It is this variable that then acts as the loop counter. Note that it is only evaluated at the beginning of the first loop. The second statement is the condition for the loop. Each time a loop finishes it is checked again to determine whether another loop should be made. Finally there is the third statement. It declares how the loop counter should be incremented (or decremented).

ANALYSIS

Note

Note that the three elements inside the parentheses are statements. Therefore, semicolons separate them and not commas. Remember this is how more than one statement can be placed on a single line.

Caution

The variable used for the loop counter in a for statement is inside the parentheses so it can only be incremented using the increment and decrement operators ++ and -- or the full syntax equivalent to increase the value of the loop counter.

To get some experience using the for statement, let’s try to use it to create a page that will generate a simple multiplication table. First, we will ask a user which multiplication table he wants to see; then we will output the first 12 lines of that multiplication table in an alert box. The first thing we will need to do is ask the user to enter the multiplication table that he wants. This can be done using a prompt box that assigns the value to a variable we will call multTable. See the following example: var multTable = prompt(“Please enter the table.”, “”);

What about generating the table? We could write out each of the 12 lines concatenating each one to a variable. But this would be very inefficient. A better way would be to use a loop statement. To do that let’s choose the for statement. For the moment, let’s ignore the statement needed for the statement block and concentrate on the for statement itself. We probably want to start at 1 so this can be the initial value of our counter i, and we know when we want to stop once we get to 12. With this in mind our for loop will need to look something like this: for (var i=1; i<=12; i++) { statement; }

Functions and Statements

115

Okay, that’s fairly easy so far, but what about the statement the for loop controls? Well, to help decide what it should look like, it is useful to take a look initially at the first few lines of a multiplication table. Let’s take the 2 times table as an example: 1 x 2 = 2 2 x 2 = 4 3 x 2 = 6

Looking at the table, you can see that the first element of each line increments by 1. To recreate this with each iteration of the loop, you could quite easily use the counter i. The next three characters are always the same. The x and the equal sign could be created simply by using two strings, but the number in between depends on which table the user asks for. It’s not much of a problem though as that value can simply be found in the variable multTable. Let’s take a look at how our statement looks so far: i + “ x “ + multTable + “ = “

We are just concatenating all the components of the line together. But how do we actually add the answer to the end? Well actually it isn’t too hard if you think about it. What we have on the left-hand side of the equal sign is exactly what generates the answer: i multiplied by the variable multTable. This is all that is needed to finish the statement. Well, almost. We will also want to include a new line character to make sure each line of the table is actually displayed on a new line. This is done with the escaped character \n. Our statement now looks like this: i+ “ x “ +multTable+ “ = “ +(i*multTable)+ “\n”;

During each iteration through the for loop, you will need to concatenate the line to a variable, which builds up the table. Call this variable theTable and your completed statement will look like this: theTable += i+ “ x “ +multTable+ “ = “ +(i*multTable)+ “\n”;

With this statement in place within the loop, and an alert for theTable after the loop, a multiplication table will be generated. If you also store the entire piece of code within a function, it will allow users to request a different table as many times as they like. If you use a hyperlink to call the function, Listing 3.6 shows how your finished page might look:

INPUT

LISTING 3.6

Multiplication Table Generator (multTableGenerator.htm)



3

116

Day 3

LISTING 3.6

continued

<script language=”javascript” type=”text/javascript”>

Multiplication Table Generator

Create New Table

Try it yourself. Before you finish, it is worth mentioning that a statement that is related to the loop statements is the break statement. Remember that the break statement allows you to prematurely break out of conditional statements. There is a similar statement for the loop statements called the continue statement. However, rather than breaking out of the loop altogether and carrying on evaluation further down the page, it simply prevents evaluation of any remaining statements in the statement block. The loop continues to check the condition at the top of the loop to see whether it should loop again. Later in the book you will learn just how this can be useful.

The for in Statement A second use of the for loop is to loop through the properties and child objects of an object. Objects are the JavaScript entities that allow you to apply these tools to making a difference to your Web pages, and to a certain extent the browser. (Objects will be covered in the next chapter.)

Functions and Statements

117

Summary In this chapter you have learned “the other half” of the basics for creating useful scripts. You have learned how to create your own functions and you have learned about most of JavaScript’s built-in functions. You also have looked at how to control the flow of scripts through the use of control and loop statements. This prepares us to explore objects in Chapter 4, “JavaScript Is Object-Based.”

Workshop The workshop will test how much you have grasped of the topics discussed in this chapter.

Q&A Q. I want to repeat a piece of code an exact number of times. Which JavaScript statement should I use? A. The for statement is ideal to achieve that. You could achieve the same thing using a while loop, for example, but it is less convenient to use it. Q. I want to be able to check the length of several strings of characters in my code. How can I do that? A. You could create a short function which takes a single argument—the string you want to check. You may want to use array techniques within the function. Those will be described in Chapter 5. Q. I want to check if more than one thing is true. Can I use a switch statement to do that? A. You could use a switch statement, but not on its own. You could nest another function which uses a switch statement within a case statement. Often it will be at least as easy to use an if statement with a number of else if statements. Whichever technique you choose you need to be clear about the process of logic and which statements will be evaluated and which statements won’t.

Quiz 1. List the looping statements that are present in JavaScript. 2. Is it possible to include multiple statements in my own functions?

3

118

Day 3

Quiz Answers 1. The looping statements in JavaScript are the while statement, the do statement, and the for statement.

while

2. Yes. You can include multiple statements in a function by enclosing them in curly braces, like this: function myFunction() { statement statement ... statement }

Exercise Modify the multiplication table generator so that it will respond appropriately if the user clicks Cancel or enters a non-numeric value.

WEEK 1

DAY

4

JavaScript Is Object-Based In Chapter 1, “Getting the Basics Right,” you learned that JavaScript is an object-based scripting language. At the time, we didn’t look too deeply at what the term object-based meant. In this chapter, we are going to take a discovery tour of JavaScript objects and find out just what they mean for us as scripters. You then will be better placed to understand objects and their place in the scheme of things as they are explored in more detail in later chapters. Now that you have been introduced to topics such as data types, variables, and functions you will be able to make more efficient use of JavaScript objects. By creatively combining objects with the basic techniques you have already learned, you will find yourself better able to make a real a difference to your Web pages. This chapter will teach you the following: • What objects are • What object properties are • What object methods are • About the Global object and its children • How to use objects, their methods, and properties

120

Day 4

Understanding Objects All of the elements of an HTML document and some parts of the browser are made available to JavaScript in the form of something called “software objects,” or more simply “objects.” In practical terms, objects enable you to get (find out about) and set (change) characteristics of a document. For example, you can use JavaScript to get (find out) something about an image object, such as its width; you also can set (change) things about the same object, such as assign an image a new width and thereby change its size. Although the notion of objects can initially take a little time to grasp, once you understand what they are and how they’re used it will enable you to use JavaScript considerably more effectively and efficiently. Objects really are the crux of almost everything done in JavaScript.

What Are Objects? So what exactly are objects, and why are they helpful? Before we get technical about what an object is it might help to look at the idea of an object simply as a thing. A car is an object. It has several properties. It may have red paint. It may have four wheels. Properties are individual pieces of information that describe a characteristic of the car. A car can do things. It can move forward. It can accelerate. It can brake. The things that a car does could be called its “methods.” So a JavaScript object has many similarities to real-world objects (such as a car). It has one or more properties. For example, a browser window object in JavaScript has a width property. JavaScript objects also frequently have methods, which are pieces of code that enable the object to do things. For example, the window object has a moveTo() method which can be used to move the browser window to another part of the screen. Of course JavaScript objects and their properties and methods are much more abstract than the properties and methods of a motor car, but the analogy is a helpful one.

NEW TERM

In technical terms, objects are a collection of properties and methods. Very often a JavaScript object represents something—such as an HTML form or a link— which is to be displayed on a Web page. Properties of JavaScript objects contain information, or values, which tell you about some characteristic of the object. For example, the document object has a title property. You may be familiar with the following HTML/XHTML tag:

NEW TERM



JavaScript Is Object-Based

121

The <script language=”javascript” type=”text/javascript”> function changeTitle() { var newTitle = prompt(“Please enter a new title.”, “”); window.document.title = newTitle; }

You can change the <script language=”javascript” type=”text/javascript”>

JavaScript Is Object-Based

LISTING 4.2

125

continued

Status Bar Changer

Change Status

Figure 4.2 shows an example of what the status bar might look like after the function has been called, and the user has entered some text into the textbox.

OUTPUT FIGURE 4.2 The status bar in Internet Explorer has changed to show the text entered in the prompt box.

Unfortunately, Netscape 6.0 replaces the text when a link is clicked to call the function. Because the link takes back focus when the prompt box closes, then the contents of the href attribute immediately overwrite the text that our function writes to the status bar. Methods are another special case. Method is the name given to functions that belong to an object, and (frequently) acts on that same object. One of the methods that belongs to the window object is the scrollBy() method. Assuming the document is large enough that the scrollbars have been activated, then this method will scroll the window by the number of pixels that have been specified (if the scrollbars haven’t been activated, it will do nothing).

Note

Methods are written with parentheses, just like functions. Because window.scrollBy() uses parentheses (as the final part of the dot notation), you can assume that scrollBy() is a method.

The scrollBy() method belongs to and acts on the window object. Listing 4.3 shows an example page which uses the scrollBy() method.

4

126

Day 4

INPUT

LISTING 4.3

Scrolling the Window (scrollWindow.htm)

<script language=”javascript” type=”text/javascript”>

Window Scroller

Scroll Window

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

THE END

ANALYSIS When you click on the link the function scrollWin() will be called and you will be prompted to enter the number of pixels by which the window should be scrolled. Notice that because you are asking for numeric input from a user, the isNaN() function has been used to stop errors from occurring should the value the user enters have non-numeric characters. Assuming the input is accepted, then it is passed to the scrollBy() method. This method accepts two parameters. The first is the number of pixels that the window should be scrolled across, and the second is the number of pixels it should be scrolled down. Because we only want the window to scroll down, 0 has been specified for the first parameter, and the variable y for the second.

JavaScript Is Object-Based

127

If the number entered into the prompt box is larger than the number of pixels the window can be scrolled, then the scrollBy() method doesn’t scroll the window beyond the end of the document. It simply stops at the end. Therefore if you were to enter the value 1000 into the prompt box, the window should scroll to the end of the document and you should see an appearance like that shown in Figure 4.3.

OUTPUT FIGURE 4.3 Window will scroll to the end after entering a large value in the prompt box.

The code contained in the predefined object methods is native code, so you can’t actually see it. However, you still can test to see if a method exists by alerting the method’s name. Note that you do not include the call operators (the opening and closing parentheses), only the path to and the name of the method itself. For example, to check whether the scrollBy() method exists you would write the following: alert(window.scrollBy);

This would display an alert box like the one shown in Figure 4.4. FIGURE 4.4 An alert box allows a check for the existence of the window.scrollBy()

method.

As you can see, the alert shows that the scrollBy() function is supported, and also that the function body consists of native code. As stated earlier, JavaScript objects can own other objects as well as have their own properties and methods. Shortly, you will learn about the objects that belong to the window object, but in the meantime, it is worth mentioning something about the variables and functions you have been writing and using so far.

4

128

Day 4

You may have wondered where the variables and functions you created in previous chapters have been stored. Well, because they weren’t assigned to any particular object, they were assigned to the Global object. Whenever you created a new data container, such as a variable or constant, it was assigned to the window object. This is true for your functions as well. Whenever you created a new function, it was assigned to the window object. To demonstrate this, type the following lines of code into a page and load it:

INPUT

var myVar = “Variable myVar’s value.”; function alertMyVar() { alert(window.myVar); } window.alertMyVar();

Notice that you have used the window object both to call the function and to get to the value of the variable myVar. If the variable myVar and the function alertMyVar didn’t belong to the window object, then this will cause an error. When you load the page, you should see an alert box something like the one in Figure 4.5.

OUTPUT FIGURE 4.5 An alert box demonstrates that the myVar variable is a property of the window object.

ANALYSIS It works! The variable myVar was owned by the window object, which is the Global

JavaScript object in a browser, as was the function alertMyVar().

Other functions that you have been using, such as the alert(), confirm(), and prompt() functions, also belong to the window object, as do the predefined global functions discussed in the previous chapter (yes, the word “global,” meaning they belong to the Global object—the window object). This, of course, raises the question as to why, if the variables and functions created and used belong to the window object, you have not always had to access them by writing the following:

JavaScript Is Object-Based

129

window.variableName

and window.functionName()

Everything to which client-side JavaScript has access is encompassed in the window object. It is the default. Therefore, if you omit the keyword window (and haven’t used the name of some other object), the JavaScript interpreter knows to put it in for you. This means that you can start object paths with the objects next to the window object in the object hierarchy, and the JavaScript interpreter still will know what to do. This saves you from needlessly writing the word window at the beginning of the directions to an object. Before we finish, note that we haven’t, nor will we later, refer to our variables and functions as properties and methods of the window object. There are two reasons for this. One is that, in the case of properties, they do not give us information about the window object, and in the case of functions, they do not act on the window object. The second is that, because we can miss out the reference to the window object, we don’t have to consciously treat our variables and functions as belonging to the window object. For the rest of this chapter, when objects are accessed, properties and methods will include the window object in the object path. Although this isn’t necessary (as you’ve just seen), it will help you get used to the syntax for accessing objects and remind you that the window object is the object at the top of the tree.

The window Object’s Children When one object belongs to another, it is said that it is a child of that object. Conversely, the object that owns the child object is said to be its parent object. The window object has several child objects, but in general they can be split into three types: • The document object • Environment objects • Core JavaScript objects It is important to distinguish between the three types of objects as they enable us to perform different tasks. The document object is the object by which you gain access to your HTML documents. Without the document object, no matter how many processes were performed behind the scenes, you would never be able to affect the Web page itself. All interactions with page elements such as forms, images, and layers must take place through the document object. The environment objects enable you to find out details about such things as the browser and the user’s screen. This enables you to accomplish such tasks as loading a different page or finding out whether one of your scripts is supported and can be run.

4

130

Day 4

Finally, the Core JavaScript objects are the objects that are actually built into JavaScript itself. These always exist regardless of where JavaScript is used, whether it is in a Web browser, a PDF (Portable Document Format) file, or any other environment. These Core JavaScript objects provide a powerful means to create, sort, and otherwise manipulate data and data structures in your documents. This chapter will take an overview of the objects in all three groups.

The document Object Not too surprisingly, the document object provides access to the document that is currently loaded in the browser window. This means that it includes not only the elements contained between the body tags that are displayed in the window, but everything between the and tags. Before going any further, if you need to convince yourself that the document object really does belong to the window object, type the following line into the HTML for a Web page and view it with your browser:

INPUT

alert(window.document);

This will display the following alert box which shows that the document object does indeed exist as a child object of the window object. See Figure 4.6.

OUTPUT FIGURE 4.6 A check for the document object as a child of the window object.

The document object has many properties and methods as well as containing all the objects that make up the model that represents the document: the “Document Object Model.” The document object model is so large that we will spend many chapters exploring its different parts. For the present, though, let’s take a cursory look at the document object model to get a preliminary feel for what is there.

JavaScript Is Object-Based

131

Properties The standard set forth by the W3C Document Object Model (or DOM for short) describes a logical association of properties and methods to objects. This chapter will focus only on the properties that have been included in either the W3C DOM or browserspecific properties that have equivalent properties in other browsers.

Caution

Several of the properties that previously belonged to the document object are no longer approved for use. This is due to the fact that many of the properties that originally belonged to the document object should have been associated with other objects. It will be noted when this is the case.

A list of the properties of the document object in the W3C Document Object Model is given below: charset characterSet

4

cookie domain height lastModified referrer title URL width

You already know about the title property of the document object and how you can use JavaScript to change the title displayed in the browser’s title bar, so let’s move on. The charset and characterSet properties are browser-specific properties of Internet Explorer 4+ and Netscape 6+ respectively. They can be used to find out the character set that has been associated with the document. For example if the document contains the following meta tag: <meta http-equiv=”Content-Type” content=”text/html; charset=iso-

8859-1”>

Then in Internet Explorer the document object’s charset property will have the value “iso-8859-1”, and in Netscape the characterSet property will have the value “ISO8859-1”. The case of the letters in the meta tag doesn’t make any difference to the case

132

Day 4

of the string returned by these properties. Internet Explorer will return it in lowercase, and Netscape will return it in uppercase, whichever way you happen to have written it. The document object’s cookie property gives you the ability to set a cookie using JavaScript. We will take a detailed look at this property later in the book. The domain property is another property that we will leave until later for a detailed analysis. In brief, however, it allows you to access documents in other frames or windows that have been loaded from the same domain as the document in which the script resides, but from a different server. By default this is not possible for security reasons. The height and width properties of the document object are both Netscape-specific. They contain an integer that represents in pixels the total height and width of the document at the point in time that they are checked. This includes the parts of the page that are out of sight due to page scrolling. These properties enable you to know how far a document can be scrolled. You can then use the scrollBy() method used earlier to create custom scrollbars, for example. Internet Explorer has two equivalent properties to the Netscape height and width properties but they belong to the body object, so they will be discussed slightly later in the chapter. The lastModified property of each document contains a string with the date and time that the document was last changed. It can be used to do such things as add an automatic “Last Updated” line to our pages, but also for more advanced things such as checking whether the document has been changed since the last time a user visited. This script would also require the use of cookies however, so we will discuss that later. There are times that you will need to check that a visitor has only come from a designated page using the correct link. For example, you may require a user of your Web site to have checked a news page before entering another area. The document object’s referrer property allows you to check exactly from where a visitor has come—but, only if the user clicked on a link to get to the present page. If a link was clicked to navigate to the present page, then the referrer property will contain the URI of the document in which that link was contained. If a link wasn’t clicked, say the user entered the location directly into the location bar of her browser, then the property will simply contain an empty string. You can check for a certain URI and redirect the user, if she hasn’t been there yet. The document object’s URL property provides the URI that was used to download the document as a string value. However, there are two other ways of finding this information. There is a location object that will provide this string and a lot more information. You will learn about the location object shortly.

JavaScript Is Object-Based

Caution

133

You may have seen the properties bgColor, fgColor, alinkColor, linkColor, and vlinkColor used with the document object. These properties are now deprecated and should no longer be used. Because the document includes everything from the HTML tags down, and not just the displayed body, it is more appropriate to use either the style attribute, or the property equivalents that belong to the body object. You will see how to do that shortly.

Let’s now continue our study of the document object by investigating some of its methods.

Methods The document object has many methods, but for the moment we will only look at the methods that are most useful to us. A list of these is given below: close() getElementById() getElementsByName() getElementsByTagName() open() write() writeln()

When a document begins to load into a browser the first thing that happens is that the browser opens a data stream to accept the data that makes up the file. After all the data has arrived, the data stream is closed. The document object’s open(), write(), writeln(), and close() methods are all closely related. These methods enable you to construct entirely new documents using JavaScript. What they do not do is enable you to add to an existing document that has already loaded into a browser window. You will see how to do that later. The open() method allows you to open a new data stream to a browser window or frame. To construct a document in this window or frame, you then can use the write() or writeln() methods to add data to the data stream. After you have created a file and the data that makes up the file has been sent, you finish by using the close() method to close the data stream, indicating that the document content has ended.

4

134

Day 4

As soon as the open() method is used, one of two things can happen. If the document in a window has already finished downloading, then it will be removed to make way for a new document. But if the method is written into a script block (rather than a function’s body) so that it is called while a page is loading, then the open() method is ignored. After all, the data stream for that page is already open. Therefore the open() method is only of use when you need to create a new document. Once a data stream to a window is opened, the next step is to send some data to the window concerned. Use either the write() method or the writeln() method. The two methods are identical except for the fact that the writeln() method adds a line break to the end of the string it is given. In client-side JavaScript, the difference is not noticeable because—even after the document has been constructed—you can’t view the code that was used to make it by doing a view-source on the window in which it is contained. When you are constructing a document using server-side JavaScript the situation is different. Because the document is constructed on the server before being sent to the browser the source can be viewed and line breaks after each line of the page becomes useful. Because we are working client-side, we will only use the write() method in this book. Here is an example of how you might start constructing a new document: document.open(); document.write(“...”);

With the exception of Netscape 4, you can use as many calls to the write() method as needed to construct a document. In Netscape 4 there is a bug that prevents you from using more than one write() method per document. To get around that, you need to build up your page in a variable, and then write it all at once into the data stream. If you need to script for Netscape 4, then the existence of the bug isn’t too much of a problem.

Caution

If images are to be included in the document that you generate, then you will need to set either their src attributes with absolute URIs or the element. Without setting the element, relative URIs will not be recognized by some browsers. In order to locate the image its absolute address must be known, either directly using an absolute URI or relative to a stated base URI.

Finally, finish constructing the document by using the document object’s close() method to close the data stream: document.close();

JavaScript Is Object-Based

135

If the write() or writeln() methods are applied to a document that has finished loading without first using the open() method, then the browsers will automatically implement the open() method. Therefore, to a certain extent, the open() method is actually optional. However, you do need to use it if the document you are constructing is not an HTML document. This is because the default MIME type for the document that is created is “text/html”. If, say, for example, you wanted to create a page made purely from SVG, then you would have to specify the MIME type as “image/svg+xml”. To specify the MIME type of the document to be created, you need to declare it as a parameter of the open() method. For example, if your document is pure SVG then you would start with the following: document.open(“image/svg+xml”);

Other commonly used MIME types include those listed here: text/html text/plain image/gif image/jpeg

// the default

SVG images are created from markup so using the document object’s write() method is feasible, but it is less likely that you would want to write a GIF or JPEG (MIME type “image/jpeg”), which are pure binary. To generate a chart from user input would be relatively simple using SVG, but creating it from binary would be impractical.

Note

If the image you were generating were to be part of an HTML document, the MIME type would be “text/html”. The MIME type specified is for the MIME type of the main document.

We will make extensive use of the write() method to construct parts of a document as it loads. Remember that the write() method will clear a document from the window if used after it has finished loading, but if the document is still in the process of loading (therefore the data stream is still open), then the write() method can be used to add HTML to the page without destroying the HTML that has already arrived. In general, we will not make a great deal of use of the open(), write(), and close() methods to create new documents. Although they can be invaluable in this respect on some occasions, this use is not very common. By now, you probably would like a bit of variety from using alert boxes to display the output from JavaScript code. Although we won’t banish alert boxes entirely, you’ll be happy to know that this aspect of the write() method will now enable you to output the

4

136

Day 4

results from your scripts into the HTML of the document. Listing 4.4 is an example page.

INPUT

LISTING 4.4

Writing HTML to the Page Using document.write (writingHTML.htm)

<script language=”javascript” type=”text/javascript”> Writing HTML”); var myPara = “

This page was written using the “; myPara += “document object’s write() method!

”; window.document.write(myPara); //-->

The result from loading the page in Listing 4.4 is shown in Figure 4.7.

OUTPUT FIGURE 4.7 Writing to an HTML page using document.write().

ANALYSIS As you can see, by applying the write() method of the document object as the

document was loading, you were able to add HTML to the data stream and, therefore, to the page itself. The first time the write() method was used the argument it was given was the document header as a plain string, but for the longer paragraph it was

JavaScript Is Object-Based

137

built up in a variable first. By using control statements you will be able to selectively write different things into an HTML page rather than alerting it in alert boxes. Note that a document.close() call is not used after the script because there is still more HTML to come. Let’s now look at the other methods of the document object that were listed earlier. The document object’s methods that start with the word “get” are new and as such are only supported by Internet Explorer 5+ and Netscape 6+. These methods provide a crossbrowser means of accessing any element or group of elements in the document. The getElementById() method is our means of accessing any element in the document that has been assigned an id attribute in its opening tag. The getElementById() method returns a reference to the object which has the id attribute so that you are effectively taken straight to it without navigating the document tree. Note that the value assigned to an id attribute must be unique in the whole document. Assigning the same id to more than one element will simply mean that all duplicate ids after the first are ignored, and you won’t be able to access those elements using the value of the id attribute. The getElementsByName() and getElementsByTagName() methods play a similar role. Unlike the getElementById() method, they can return a collection of more than one object. In the case of the getElementByName() method, the element objects returned are only those elements that have the name attribute set to the value that was specified. The getElementsByTagName() method is similar but it returns the elements with the tag name that was specified. You will learn more about collections in the next chapter on arrays. In JavaScript, collections are a type of array—so let’s wait until after arrays have been discussed before exploring these methods in more detail.

Child Objects You have learned about reaching objects through a hierarchically structured path of objects belonging to the window object. Therefore, you may expect that to access the contents of a textarea belonging to a form contained within a table, you would write something like this: window.document.html.body.form.table.tr.td.textarea.contents

In the most recent browsers, it is indeed possible to access objects in a way similar to (although not exactly like) this. However, originally JavaScript didn’t enable access and manipulation of all document parts.

4

138

Day 4

Up until the release of Internet Explorer 4, the elements of a page that could be accessed were very limited. In earlier browsers, the document object was still the route to the document, but an HTML element could only be accessed if it belonged to a certain group of elements, or was a child element of one of these elements. As long as it was among this group, then it was possible to refer to it through a “collection.” The accessible HTML elements were split into these collection groups by tag name. For example, all the forms on a page could be accessed through a collection known as the “forms collection.” It didn’t matter how far down the tree they were found, the collections made access to them only one step away. Because the shortcuts provided by collections are such a useful feature, they have been included in the W3C DOM specifications. In fact, the W3C have added to the collections and provided methods that enable the creation of your own collections. However, collections don’t give access to every part of the document. To enable this the structure of the document object has been changed so that you can traverse every part of it using nodes. Nodes not only give access to the objects representing document elements, they also give access to their attributes and the text contained within them.

NEW TERM

There are pros and cons to both methods. Collections give quick and easy access to the elements you are most likely to want to access, but for the times you need more power to access other objects, then you will need to traverse the Document Object Model’s treelike structure of nodes. The Document Object Model, or DOM for short, maps out and describes how a document is constructed in terms of the hierarchical structure of its objects. It also requires certain methods and event handlers to be present.

NEW TERM

This chapter will take a quick look at the collections that are available to access the main parts of the document. We will cover the DOM way of doing things later in the book. Here is a list of the widely supported HTML collections and an important object that is the body object, which belongs to the document object: all applets anchors body embeds forms frames images layers

JavaScript Is Object-Based

139

links plugins

== embeds; seems to be being phased out

styleSheets

Before examining the body object, let’s take a quick look at the collections so that you can get a feel for these objects, which will be examined in more detail at appropriate points later in the book. Let’s use the forms collection first. Once you have learned what arrays are and how they are used in the next chapter, you will see how the forms collection (a type of array) can be used to access the HTML forms on a Web page. In general, there are two way to do this: Use the name you give to the form, or use an integer representing the form’s place among any other forms on the page. For example, if the first form on one of our Web pages is called myForm, you could access it using either of the following lines of code: window.document.forms.myForm

or window.document.forms[0]

Either will take you straight to the object representing that form.

Note

The individual parts of an array are numbered from zero—not from one.

Don’t worry if you don’t understand those lines—especially the second one. Once arrays have been covered, it should be a lot clearer. The all and layers collections are specific to Internet Explorer and Netscape 4 respectively. Note that when we say Netscape 4, we really do mean only version 4. The layers object was removed in Netscape 6 and replaced by the W3C DOM way of doing things. These collections provide a shortcut to objects on the page if the objects possess a particular name or id attribute. In the case of the all object, you can access any object on a page, but with the layers object you can only access layer objects or div objects. To do this you usually would write the following: window.document.all.nameOrId

or window.document.layers.nameOrId

or use the same integer notation that was used for the forms collection.

4

140

Day 4

The applets, embeds, and plugins collections can all be used to access the objects and information needed to insert other technologies into your pages. Collections will be covered in detail in Chapter 18, “Plugins and Applets.” When we do look at the anchors and links collections it is important to make clear the distinction between the two. Anchors are tags that have been given a name attribute; whereas links are tags that have been given an href attribute. As tags can be given both, it is possible that some of the objects in the anchors and links collections will be present in both collections. Not that this is a problem, but is something of which you might want to be aware. When looking at scripting between windows and frames in detail in a later chapter, you will learn how to make use of the frames collection. As you may expect by now, the images collection gives access to all the images on a page. Again you can access the individual images by specifying a name or index using the syntax used for the forms collection. For example, if you have an image on your page and you specified the name attribute in its opening tag to be “myImage”, then you can change the image that is being shown by writing something similar to the following: window.document.images.myImage.src = “path/to/new/image.gif”;

The image being displayed on the page would now be replaced with the image you specified. This is because by changing the src property that corresponds to the src attribute of the tag you force the image to change. The final entry in the above list is the styleSheets collection, which provides access to the style sheets in the page. This object gives access to all the <style> tags on the page. Note that it does not give access to any external style sheets loaded using the tag. Again, you will learn much more about the styleSheets collection later in the book. There are other interesting objects belonging to the document object. Especially worth mentioning is the documentElement object, which gives access to the corresponding node of a document. The document object provides access to selected objects on the page mainly through the collections just mentioned. However with the documentElement object, you can get access to everything, as you shall see later.

The body Object The body object, which is a child object of the document object, is available in both Internet Explorer 4+ and Netscape 6+. Surprisingly, it usually isn’t used as a gateway to the elements of a page, but rather as a means to set the main colors of the Web page and the background image, if there is one. By changing properties of the body object, you

JavaScript Is Object-Based

141

can change these corresponding attributes that can be added to the opening tag. The properties of the body object are listed below: aLink background bgColor link text vLink

These properties all have the same names as the attributes that can be added to the body tag, so if you are already fluent in HTML, hopefully it should be fairly easy for you to see how they are used. For example, you can change the background image of a page by writing this: window.document.body.background = “path/to/new/image.gif”;

Or you can change the color of links that have been visited by writing this: window.document.body.vLink = “#4488ff”;

The colors assigned also can be color names, just as they can be for the corresponding body tag attributes.

Caution

Remember that although the attribute names in HTML use the same letters as the JavaScript properties mentioned, you must use the correct case in JavaScript—whereas in HTML, attribute names are case-insensitive.

Internet Explorer also provides several properties that allow things such as the margin widths to be set. However, these properties are available in Internet Explorer only and are done better by using the style attribute or by adding style sheet rules, which you will learn about later.

Environment Objects As well as working with the document, you also may want to know some things about the browser and where it has been. There are four objects that belong to the window object that provide this information. They are the following objects:

4

142

Day 4

• The location object • The history object • The navigator object • The screen object The location and history objects provide access to the present URL and the browser history respectively. The navigator and screen objects provide information about the browser that is being used to view the document and the browser’s position in the user’s screen respectively.

The location Object The location object gives you access to and control over the URL that the current document was downloaded from. Initially, this may not seem all that useful. After all, you know the URL of the site where your Web pages are kept. But what if you want to make the browser load another page? Or what if you want to access data from the URL query string? For these sorts of tasks, you will need the location object. The location object has eight properties: hash host hostname href pathname port protocol search

The location object also has three methods: assign() reload() replace()

You will use the location object most often for loading a new document, so first let’s look at how this is done.

JavaScript Is Object-Based

143

Loading a New Page The usual way to load a new page into a window is to assign to its href property a string containing the new URL. To do this, you simply write something like the following: window.location.href = “http://www.xmml.com/path/to/file.htm”;

The assign() method enables you to assign a new URL to a window’s or frame’s location, and thereby load into the window or frame the Web page located at that URL. Although the assign() method still works in browsers, it is now deprecated—meaning it is no longer the approved way to do it. In any case, it is almost never used.

Caution

In some old browsers, the location object originally belonged to the document object rather than the window object. This is now deprecated, so if you ever see window.document.location or document.location don’t be tempted to copy. At present, browsers support the location object as belonging to the window or document objects. However, in the future that may no longer be the case.

There are many times when it is beneficial to use JavaScript to load a new page. For example, you may wish to use an HTML select box as a way of navigating to different sections of your site. It is very important to note that there are times when you should not load a new page using the location object’s href property. One example is when filter pages are used to redirect a visitor to a different page based on which browser he is using. Frequently, you will see the href property being used to do the redirecting. This means that when a visitor hits the back button he is immediately bounced forward again. You may well have come across pages that act like this yourself. The problem is that the filter page is still in the browser’s history, so when the back button is hit, it is reloaded and once again redirects to the page the user has come from. To solve this, you need to get the filter page to overwrite itself so that it isn’t included in the browser history. This is accomplished by using the second of the location object’s methods. The location object’s replace() method is an important alternative to assigning its href property with a new location. It replaces the page where it is used with a new URL, thereby preventing the browser from storing that page in the browser’s history. This

4

144

Day 4

means that when a visitor hits the back button, the page the replace method was on effectively doesn’t exist, and the browser loads the previous page. This prevents the nasty bounce effect associated with filter pages. Note that relative URLs can also be used with the location object’s href property and the replace() method. To demonstrate, assume the document being navigated from is located at the following URL: http://www.xmml.com/path/to/file.htm

If you wanted to move to a Web page called index.htm located in the directory /path/, you could write this: location.href = “http://www.xmml.com/path/index.htm”;

But you also could use a relative URL path to do the same thing. Therefore you could just write: location.href = “../index.htm”;

Both are acceptable. Similarly, if you wanted to go to the page index.htm in the root directory, instead of writing this: location.href = “http://www.xmml.com/index.htm”;

You could just write: location.href = “/index.htm”;

Both absolute and relative URLs can be used in the href attribute of an anchor tag to make it a link, so you can use absolute and relative URLs with the href properties and replace() method of the location object.

Accessing the URL As well as using the location object’s properties and methods to load a new page, you may sometimes want to just find the URL of the document currently loaded in a window. This could be the URL of the page the script is running on, or the URL of a page in another frame or browser window. The simplest way to use a script to find out a page’s URL is to swap the location.href to the other side of an assignment statement to assign the value of the href property to a variable. For example, by writing this: var pageURL = location.href; alert(pageURL);

JavaScript Is Object-Based

145

The location object’s href property contains the whole URL. So in the variable pageURL, you now will have everything including the protocol, hostname, and path to the file as well as the port number, query string, and hash, if they are present. Often, though, you will want one, or only some part of the URL. To make it easy for you to get this selectively, the location object has a number of other properties. To demonstrate these properties, let’s assume that the present URI of the page where the script can be found is the following: http://www.xmml.com:80/path/to/file.htm?myVar=val#anchorName

The following show the values that would then be contained within the other properties of the location object for the page: alert(location.hash) alert(location.host) alert(location.hostname) alert(location.pathname) alert(location.port) alert(location.protocol) alert(location.search)

// // // // // // //

alerts alerts alerts alerts alerts alerts alerts

“#anchorName” “www.xmml.com:80” “www.xmml.com” “/path/to/file.htm” “80” “http:” “?myVar=val”

Most of the time URIs do not contain many components, in which case some of these properties will contain just empty strings. It can be helpful to use these properties instead of the href property. For example, when a hash (#) is used in a URL it is followed by the name of an anchor tag in the document. This causes the page to load prescrolled to the point in the document that the anchor tag is located. This is very useful for linking directly to a certain part of a long document. If you use anchor tags like this, you may want to find out which part of a document a page has loaded. For example, if there is some important information at the top of a page, you might want to check for a hash and if it exists alert the reader to the information. To find the name of an internal link, simply use the hash property of the location object. It contains the hash character itself followed by the name of the anchor to which it has been linked. Therefore, if we were on the page with the URL given earlier, and we wrote:

INPUT

var myHash = location.hash; alert(myHash);

We would get the following alert box seen in Figure 4.8.

4

146

Day 4