DHTML and JavaScript pdf

Cascading Style Sheets,
JavaScript Style Sheets,
& JavaScripted Layers
plus advanced
JavaScript 1.2 & 1.3
DHTML and
JavaScript
Gilorien
Prentice Hall PTR
Upper Saddle River, NJ 07458
www.phptr.com
Contents
Preface xvi
Regarding HTML Syntax xviii
Regarding JavaScript Syntax xviii
Regarding Section Header Capitalization xix
About the CD-ROM xx
Part I Dynamic HTML
Chapter 1 Style Sheets 1
Introduction to Style Sheets 4
1.1) Style Sheets Overview 4
1.2) The Golden Rules for Styles 6
1.3) Cascading Style Sheets & JavaScript Style Sheets 8
Cascading Style Sheets 8
1.4) CSS Syntax Property Chart 11
1.5) CSS & JavaScript Syntax Property Comparison Chart 12
1.6) CSS Layer Properties and <LAYER> Attributes Chart 13
1.7) JavaScript Layer Object Properties Chart 14
1.8) Generic { font-family: } Names Chart 14
1.9) Styles Chart for HTML Elements 15

The <STYLE> Element 16
1.10) Handling Comments in Styles 18
1.11) <STYLE> Element Style 20
Cascading Style Sheet Properties 23
1.12) The { font-size: } Property 23
1.13) The { font-family: } Property 24
1.14) The { font-weight: } Property 25
1.15) The { font-style: } Property 25
1.16) The { line-height: } Property 27
1.17) The { text-decoration: } Property 28
1.18) The { text-transform: } Property 28
1.19) The { text-align: } Property 28
1.20) The { text-indent: } Property 29
1.21) Margins Overview 30
1.22) The { margin: } Property 31
1.23) The { margin-top: } Property 32
1.24) The { margin-right: } Property 32
1.25) The { margin-bottom: } Property 32
1.26) The { margin-left: } Property 32
1.27) Padding Overview 34
1.28) The { padding: } Property 34
iii
1.29) The { padding-top: } Property 35
1.30) The { padding-right: } Property 35
1.31) The { padding-bottom: } Property 35
1.32) The { padding-left: } Property 35
1.33) Color Overview 37
1.34) The { color: } Property 38
1.35) The { background-color: } Property 40
1.36) The { background-image: } Property 42

1.37) Setting Borders Overview 46
1.38) The { border-style: } Property 46
1.39) The { border-color: } Property 48
1.40) Border Widths 52
1.41) The { border-width: } Property 52
1.42) The { border-top-width: } Property 53
1.43) The { border-right-width: } Property 53
1.44) The { border-bottom-width: } Property 53
1.45) The { border-left-width: } Property 53
1.46) The { width: } Property 59
1.47) Horizontal Alignment, Floating, and Clear 62
1.48) The { float: } Property 62
1.49) The { clear: } Property 64
1.50) The { white-space: } Property 66
1.51) The { list-style-type: } Property 68
Using Styles in the <STYLE> Element 72
1.52) <STYLE> Element with CLASS of STYLE 72
1.53) Naming your CLASS of STYLE 74
1.54) Defining a CLASS of STYLE without attaching it to an Element 75
1.55) The Keyword all 75
1.56) Attaching the same CLASS to more than one Element 78
1.57) Bordered Link workaround example 81
1.58) <STYLE> Element with ID Definition for CLASS Exceptions 83
1.59) Styles and Tables 85
1.60) <STYLE> Element with CONTEXTUAL SELECTION CRITERIA 93
1.61) Inheritance issues for CONTEXTUAL STYLEs 98
1.62) CONTEXTUAL SELECTION with CLASSes of STYLE and NAMED INDIVIDUAL STYLEs 99
More Style Uses 104
1.63) The STYLE Attribute 104
1.64) The <SPAN> Element 105

1.65) The <SPAN> Element with STYLE Attribute 106
1.66) The <SPAN> Element with CLASS Attribute 110
1.67) The <SPAN> Element with ID Attribute for CLASS Exceptions 112
1.68) External Style Sheets with the <LINK> Element 114
1.69) The <LINK> Element 114
1.70) Multiple External Style Sheets in one document 121
1.71) External Style Sheet precedence issues 121
1.72) Multiple <STYLE> Elements in one document 123
DHTML and JavaScript
iv
Chapter 2 Layers & Styles 127
Creating Layers with Styles 129
2.1) Overview 129
Creating Layers with CSS Syntax 130
2.2) Creating a LAYER with the STYLE Attribute 130
2.3) Creating a LAYER with a CLASS of STYLE 131
2.4) The { position: } Property 132
2.5) The { left: } Property 132
2.6) The { top: } Property 133
2.7) The NAMED LAYER Style ( Creating a LAYER with the ID Attribute ) 135
2.8) The { width: } Property 136
2.9) The { height: } Property 137
2.10) The { clip: } Property 139
2.11) The bugged version of the { clip: } Property 139
2.12) The unbugged version of the { clip: } Property 142
2.13) The { z-index: } Property 146
2.14) The { visibility: } Property 149
2.15) The { layer-background-color: } Property 151
2.16) The { layer-background-image: } Property 152
2.17) The { include-source: } Property 158

2.18) CSS Layer Properties and <LAYER> Attributes Chart 161
Creating Layers with the <LAYER> Element 162
2.19) The <LAYER> Element 162
2.20) The <ILAYER> Element 173
2.21) The <NOLAYER> Element 176
Chapter 3 Layers & JavaScript 179
Introducing JavaScript Layers 182
3.1) Overview 182
3.2) Style Sheet Comments for JavaScript Syntax 182
New JavaScript Properties 183
3.3) New document Object Properties 183
3.4) The tags Property 183
3.5) The classes Property 185
3.6) The ids Property 187
JavaScript Style Sheets 189
3.7) JavaScript Style Sheets 189
3.8) Using the with() Statement 189
3.9) The JavaScript Keyword all 190
3.10) The contextual() Method 191
3.11) JavaScript Style Sheet Properties & Examples Chart 194
3.12) JavaScript Style Sheet Properties & All Values Chart 195
Contents
v
JavaScript and Layers 196
3.13) The JSS position Property 196
3.14) The HTML <SCRIPT> Element 196
3.15) Comment Tag to hide the contents of the <SCRIPT> Element 197
3.16) The JavaScript Keyword var 198
3.17) The JavaScript Layer Object 199
3.18) The JavaScript layers[i] Array 199

3.19) The two types of document Objects 200
Properties of the Layer Object 203
3.20) Properties of the Layer Object — Chart 203
3.21) The document Property of the Layer Object 204
3.22) Invoking Methods on a Layer Object 204
3.23) The Layer Object name Property 205
3.24) The Layer Object left Property 205
3.25) The Layer Object top Property 206
3.26) The Layer Object pageX Property 207
3.27) The Layer Object pageY Property 207
3.28) The Layer Object visibility Property 208
3.29) The Layer Object zIndex Property 209
3.30) The Layer Object siblingAbove Property 209
3.31) The Layer Object siblingBelow Property 210
3.32) The Layer Object above Property 210
3.33) The Layer Object below Property 210
3.34) The Layer Object parentLayer Property 211
3.35) The Layer Object and Clipping Rectangles 211
3.36) Default Values for the Clipping Properties 212
3.37) The Layer Object clip.top Property 212
3.38) The Layer Object clip.left Property 212
3.39) The Layer Object clip.bottom Property 213
3.40) The Layer Object clip.right Property 213
3.41) The Layer Object clip.width Property 213
3.42) The Layer Object clip.height Property 214
3.43) The Layer Object bgColor Property 214
3.44) The Layer Object background Property 215
3.45) The Layer Object src Property 215
Methods of the Layer Object 216
3.46) The moveBy(dx, dy) Method 217

3.47) The moveTo(x, y) Method 217
3.48) The moveToAbsolute(x, y) Method 218
3.49) The resizeBy(dwidth, dheight) Method 218
3.50) The resizeTo(width, height) Method 219
3.51) The moveAbove(layerName) Method 220
3.52) The moveBelow(layerName) Method 221
3.53) The load("sourceURL", newPixelWidth) Method 221
DHTML and JavaScript
vi
Using JavaScript with Layers 230
3.54) The JavaScript write() Method 230
3.55) Using the write() & close() Methods 230
3.56) Using the moveAbove() Method 232
3.57) Show & Hide Layers & writing Layer content 236
3.58) The new Operator for creating new Layers in real-time 240
3.59) Dynamically create new Layers with tags Property Style 241
3.60) Localized JavaScript <SCRIPT>s within a Layer 246
3.61) Animating a Clipping Rectangle to reveal an Image 250
3.62) The JavaScript setTimeout() Method 250
3.63) The JavaScript clearTimeout() Method 250
3.64) Animating Clipping Rectangles and popping Images 251
3.65) Some JavaScript Tips 264
3.66) Animating control Layers and Images offscreen and onscreen 264
3.67) The JavaScript setInterval() Method 284
3.68) The JavaScript clearInterval() Method 284
3.69) Three examples to cycle through Background Colors repeatedly 285
3.70) A Tic Tac Toe game example 296
3.71) The JavaScript Date Object 307
3.72) Creating Date Objects with the four Date Constructors 308
3.73) Creating a Time Counter and Displaying the Current Time 308

3.74) Creating a Time Counter and Displaying the Current Time in a Frameset 310
3.75) The JavaScript Conditional Operator ? : 316
3.76) The JavaScript Math Object 321
3.77) Math Object Property Summaries 322
3.78) Math Object Method Summaries 322
3.79) Randomly load different Background Images into a Layer 323
3.80) Using Math Methods in a quasi-calculator 325
3.81) Math Methods of Math.max(x,y), Math.min(x,y) and Math.pow(x,y) 334
3.82) The JavaScript toString() Method 336
3.83) The JavaScript parseFloat() Function 337
3.84) The JavaScript parseInt() Function 337
3.85) The JavaScript isNaN() Function 338
3.86) The JavaScript charAt() Method 338
3.87) The JavaScript split() Method 338
3.88) The JavaScript slice() Method 339
3.89) The length Property of String Object 339
3.90) A really cool color conversion calculator 340
3.91) A compilation example with border animation and music 351
Contents
vii
Part II JavaScript 1.2
Chapter 4 Objects & Functions 363
JavaScript Objects 366
4.1) The JavaScript Object Hierarchy 366
4.2) Using JavaScript Objects 367
4.3) Object Properties and Methods 367
JavaScript Functions 371
4.4) Defining a Function with the Function Statement 371
4.5) Calling a Function by Attribute Assignment 372
4.6) Calling a Function by Name 373

4.7) Calling a Function from within a Function 375
4.8) Calling a Function by Property Assignment 376
4.9) The JavaScript Core Function Object 378
4.10) The arguments[i] Array Property of a Function 380
4.11) Nesting a Function within a Function 384
Summaries Charts 386
4.12) Predefined JavaScript Objects 386
4.13) Predefined JavaScript Arrays as Object Properties 387
4.14) Predefined JavaScript Core Objects 388
4.15) Predefined JavaScript Core Functions 388
The JavaScript Core Object 389
4.16) The JavaScript Core Object Overview 389
4.17) Creating Objects with its Constructor Function 390
4.18) Creating Methods for an Object 392
4.19) An Object as a Property in an Object Definition 396
4.20) The prototype Property to add a Method to an Object Type 399
4.21) Add a Property to an Object Instance after it is defined 402
4.22) The prototype Property to add a Property to an Object Type 402
4.23) Indexing Properties of an Object 404
4.24) Creating Objects with Literal Notation 407
4.25) Deleting an Object 411
4.26) The watch() Method of the Core Object 411
4.27) The unwatch() Method of the Core Object 415
Predefined JavaScript Objects 416
4.28) The JavaScript window Object 416
4.29) The open() Method of the window Object 422
4.30) The close() Method of the window Object 427
4.31) The scrollBy() Method of the window Object 430
4.32) The JavaScript document Object 432
4.33) The cookie Property of the document Object 436

4.34) The JavaScript screen Object 445
4.35) The JavaScript Location Object 447
4.36) The JavaScript History Object 452
DHTML and JavaScript
viii
4.37) The JavaScript navigator Object 456
4.38) Creating Frames on the fly 457
4.39) The JavaScript Number Core Object 460
4.40) The JavaScript select Object 462
4.41) The JavaScript options[i] Array 464
4.42) The JavaScript option Object 465
New JavaScript Core Functions 467
4.43) The JavaScript Number Core Function 467
4.44) The JavaScript String Core Function 468
Chapter 5 Statements & Operators 471
JavaScript Statements 473
5.1) What are JavaScript Statements 473
5.2) Categories of Statements 473
5.3) Chart of all JavaScript Statements 474
Conditional Statements 475
5.4) The JavaScript if () Statement 475
5.5) The JavaScript if () else Statement 477
5.6) Nested if () Statement 478
5.7) Nested if () else Statement 479
5.8) The ( ) ? : Conditional Operator Statement 480
5.9) The switch( ) Statement 481
Loop Statements 484
5.10) The for( ) Statement 484
5.11) The while( ) Statement 486
5.12) The do while( ) Statement 488

5.13) The labeled : Statement 490
5.14) The break Statement 491
5.15) The continue Statement 494
Object Manipulation Statements 498
5.16) The for in Statement 498
5.17) The with( ) Statement 500
5.18) The with( ) Statement in a <STYLE> Element 502
5.19) The var Statement 503
5.20) The function Statement 505
5.21) The return Statement 506
5.22) The export Statement 506
5.23) The import Statement 507
5.24) The delete Statement 508
Comment Statements 508
5.25) Single & multiple-line Comment Statements 508
JavaScript Operators 509
5.26) What are JavaScript Operators? 509
5.27) Categories of Operators 510
Contents
ix
5.28) Special Operators 510
5.29) The Keyword new Operator 510
5.30) The Keyword this Operator 510
5.31) The Keyword typeof Operator 512
5.32) The Keyword void Operator 514
5.33) The ( , ) comma Operator 514
5.34) Comparison Operators 515
5.35) Arithmetic Operators 515
5.36) String Operators 516
5.37) Logical Operators 516

5.38) Assignment Operators 517
5.39) Bitwise Operators 517
JavaScript Expressions 518
Chapter 6 JavaScript Events 521
Event Objects & Handlers 524
6.1) The JavaScript Event Model 524
6.2) JavaScript Event Objects and Event Handlers 525
6.3) Event Properties Summaries Chart 526
6.4) Modifiers Keys and ASCII Values Chart 527
6.5) The Structure of an Event Object 527
6.6) Specifying an Event by name with dot notation 528
6.7) Available Event Properties for each Event Object 529
6.8) Defining Event Handlers 530
6.9) Defining Event Handlers by Property Assignment 530
6.10) Testing for Modifiers Keys in Conditionals 530
6.11) Defining Event Handlers by Attribute Assignment 532
6.12) The JavaScript event Keyword 532
6.13) Testing for Multiple Modifiers Keys in Conditionals 534
6.14) Testing for Modifiers Keys pressed during Mouse Events 535
6.15) The load() Method of the Layer Object with Key Events 536
6.16) The fromCharCode() Method of the String Object with Key Events 538
6.17) Using Modifiers Keys with Regular Keys to Trigger Events 540
6.18) Determining the ASCII Value of a Pressed Key 541
Capturing & Releasing Events 543
6.19) The JavaScript captureEvents() Method 543
6.20) Capturing Events in Nested Layers 543
6.21) The JavaScript releaseEvents() Method 544
6.22) Using the type Property and captureEvents() Method on a Layer 544
6.23) Dragging an Image with the Mouse 547
6.24) The name Property of the target Property of the Event Object 549

6.25) Capturing Events for the window Object to Drag an Image 553
6.26) Using Localized Scripts to Drag an Image 556
6.26.1) The Chess Game Example 556
DHTML and JavaScript
x
6.27) Capturing and using KEYPRESS and KEYUP Events 580
6.27.1) Tic Tac Toe played from the Keyboard 580
6.28) Using the JavaScript switch() Statement & KEYDOWN, KEYPRESS, and KEYUP Events 586
6.29) Moving Layers with the switch() Statement 588
6.30) Animating Layers and Images 590
6.31) Animating Layers automatically and by clicking on an Image 591
6.32) Animating Layers with the e.target.name Property 595
6.33) Animating Layers in a Frameset environment 604
6.34) Controlling an External Frame document with JavaScript 609
6.35) The JavaScript linkColor, alinkColor and vlinkColor Properties 610
6.36) Using Key Events to hide and show Layers 610
Scrolling, Resizing, & Moving Windows with Key Events 622
6.37) The JavaScript scrollBy() Method 622
6.38) The JavaScript scrollTo() Method 622
6.39) Controlling your Window with a variety of Methods 623
6.40) ASCII Values for the which Property of the Event Object 628
6.41) Using Key Events to open a new Window 648
6.42) Creating user-customizable Documents 650
6.43) Drag on a Layer to Resize it 661
Routing & Handling Events 663
6.44) The JavaScript routeEvent(e) Function 663
6.45) Using the JavaScript routeEvent(e) Function 663
6.46) The JavaScript handleEvent(e) Method 668
6.47) Using the JavaScript handleEvent(e) Method 669
6.48) Handling and Routing Events in Nested and Unnested Layers 673

Chapter 7 JavaScript Arrays 679
JavaScript Array Objects 681
7.1) The JavaScript Array Object 681
7.2) Create an Array with the Array Object Constructor 681
7.3) Create a dense Array 683
7.4) Create an Array with Literal notation 685
7.5) Creating Two-Dimensional Arrays 687
7.6) Creating Three-Dimensional Arrays 690
7.7) Array Property Summaries 693
7.8) Array Method Summaries 693
7.9) An Overview Example that uses all of the Array Methods 694
Array Object Methods 696
7.10) The concat() Method of the Array Object 696
7.11) The join() Method of the Array Object 703
7.12) The pop() Method of the Array Object 705
7.13) The push() Method of the Array Object 707
7.14) The shift() Method of the Array Object 709
7.15) The unshift() Method of the Array Object 711
Contents
xi
7.16) The slice() Method of the Array Object 713
7.17) The splice() Method of the Array Object 716
7.18) The toString() Method of the Array Object 719
7.19) The toString() Method of the Array Element 719
7.20) The reverse() Method 722
7.21) The sort() Method 722
7.22) The compareFunction Function 723
Working with returned Arrays 729
7.23) Working with returned Arrays and Regular Expressions 729
7.24) The returned Array from the match() Method of String Objects 729

7.25) The returned Array from the match() Method with the "g" Flag 731
7.26) The returned Array from the exec() Method of RegExp Objects 733
7.27) The index Property of the Array Object 735
7.28) The returned Array from the split() Method of String Objects 736
7.29) The input Property of the Array Object 739
7.30) Using Arrays to fill <TABLE> Element Data Dynamically 740
7.31) Chart of Sample Files that use Arrays 745
Chapter 8 JavaScript Strings 747
JavaScript String Objects 749
8.1) The JavaScript String Object 749
8.2) String Object Property Summaries 750
8.3) String Object Method Summaries 750
8.4) Using the String Object Constructor Function 752
8.5) Create a String Object with Literal notation 752
8.6) JavaScript Special Characters in Strings 753
8.7) String Object Character Array 754
Manipulative String Object Methods 755
8.8) The concat() Method of String Object 755
8.9) The charAt() Method of String Object 759
8.10) The charCodeAt() Method of String Object 761
8.11) The fromCharCode() Static Method of String Object 763
8.12) The indexOf() Method of String Object 766
8.13) The lastIndexOf() Method of String Object 769
String Object Methods used with Regular Expressions 770
8.14) The search() Method of String Object 771
8.15) The match() Method of String Object 774
8.16) The replace() Method of String Object 778
8.17) The split() Method of String Object 782
More String Object Methods 788
8.18) The slice() Method of String Object 788

8.19) The substring() Method of String Object 790
8.20) The substr() Method of String Object 792
DHTML and JavaScript
xii
Creating Anchors & Links 794
8.21) The anchor() Method of String Object 794
8.22) The link() Method of String Object 795
Decorative Methods of String Object 797
8.23) Overview 797
8.24) The toLowerCase() Method of String Object 797
8.25) The toUpperCase() Method of String Object 798
8.26) The fontcolor() Method of String Object 798
8.27) The fontsize() Method of String Object 798
Chapter 9 JavaScript RegExps 801
JavaScript RegExp Objects 803
9.1) Regular Expression Objects Overview 803
Predefined RegExp Object 804
9.2) The Predefined RegExp Core Object 804
9.3) The input Property of the Predefined RegExp Core Object 805
9.4) The multiline Property of the Predefined RegExp Core Object 806
9.5) Property Summaries of the Predefined RegExp Core Object 807
Individual RegExp Objects 808
9.6) RegExp Objects created with Literal notation 808
9.7) RegExp Objects created with its Constructor Function 809
9.8) Patterns in Regular Expressions 810
9.9) Literal Characters in Patterns in Regular Expressions 810
9.10) Special Characters in Patterns in Regular Expressions 811
9.11) Parentheses in Patterns in Regular Expressions 812
9.11.1) Parenthesized SubStrings 812
9.12) Exploring Regular Expressions 813

9.13) Chart of all Special Characters for Regular Expressions 814
9.14) Method Summary of Individual RegExp Objects 819
9.15) Summary of String Methods used with Individual RegExp Objects 819
9.16) Property Summary of Individual RegExp Objects 820
9.17) The test() Method of Individual RegExp Objects 821
9.17.1) When to test() or exec() 821
9.18) The exec() Method of Individual RegExp Objects 825
9.19) The compile() Method of Individual RegExp Objects 830
9.20) The lastIndex Property of Individual RegExp Objects 832
9.21) Example to verify phone number using Regular Expressions 838
9.22) exec() & match() Method differences 840
9.23) Example to verify name & address using Regular Expressions 843
9.24) A full Regular Expression example 845
9.25) Creating a Search Engine example 847
Contents
xiii
Part III JavaScript 1.3
Chapter 10 What's New & Changed 853
What's New in JavaScript 1.3 & Changed in JavaScript 1.2 855
10.1) Overview of Features 855
10.2) JavaScript 1.3 and ECMA-262 Compliance 855
10.3) JavaScript 1.3 and Unicode 856
10.3.1) Unicode Character Escape Sequences 857
Changes to Objects 858
10.4) Changes to the Array Object 858
10.5) Changes to the Array Constructor 858
10.6) Change to the length Property of Array Object 859
10.7) New toSource() Method of Array Object 859
10.8) Change to the toString() Method of Array Object 860
10.9) Change to the push() Method of Array Object 861

10.10) Change to the splice() Method of Array Object 861
10.11) Changes to the Date Object 862
10.12) Changes to the Date Constructor 862
10.13) New Methods for the Date Object 863
10.14) Changes to preexisting Methods of the Date Object 875
10.15) Changes to the Function Object 880
10.16) The apply() Method of the Function Object 880
10.17) The call() Method of the Function Object 886
10.18) Changes to the String Object 888
New Method 892
10.19) The toSource() Method for several Objects 892
New Top-Level Properties 894
10.20) Infinity Property 894
10.21) NaN Property 894
10.22) undefined Property 895
New Top-Level Function 895
10.23) isFinite() Function 895
Changes to Top-Level Functions 896
10.24) eval() Function 896
New Operators 896
10.25) The === Operator 896
10.26) The !== Operator 897
Changes to Operators 897
10.27) The == Operator 897
10.28) The != Operator 897
Changes to Conditional Test Behaviors 898
10.29) Assignment Behaviors 898
10.30) null and undefined Values for Objects 898
Using the JavaScript Console to debug your code 898
DHTML and JavaScript

xiv
Part IV Resources
Appendix A HTML Primer 901
Appendix B Color Names and Values 1029
Appendix C Sample Files Referenced 1039
Appendix D Language Abbreviations 1049
Appendix E Charts 1053
Appendix F Index 1099
Contents
xv
Preface
This book is designed to guide the reader in developing web sites that can use the
new features and capabilities for using Style Sheets and Layers in both Cascading Style
Sheet Syntax and JavaScript Syntax that are reflected in Netscape's Navigator 4.0+ browser.
Additionally, it covers all of the new abilities of JavaScript 1.2 and including the Layer
Object and advanced Event Handling for capturing Events and using them to dynamically
alter the appearance and content of documents. There is also a chapter devoted to the new
functionality of JavaScript 1.3 and changes from version 1.2.
If you are a complete beginner, then check out Appendix A in Part IV which will
introduce you to all of the basics for using HTML Elements to design your web pages
including Images, Area Maps, Tables, Frames, Forms, and Embedded Objects for advanced
content like VRML, QTVR, QD3D, and Audio files. Appendix A contains a truncated
version of the HTML Elements Primer but there is a much more complete version on the
CD-ROM, in both HTML and PDF formats. Both of these online versions have about 100
additional examples that are linked to the documentation from separate files. If you are
already deep into web site design, then Appendix A can serve as a reference when you
need a quick memory fix.
Part I covers Styles and Layers. It starts with an introduction to using Cascading
Style Sheet (CSS) Syntax and the Properties that are used to define Styles for your
Elements. Chapter 2 demonstrates how to position Layers, which are Blocks of Content

and introduces additional Properties associated with Layers. Chapter 3 moves on to Style
Sheets created with JavaScript Syntax, focusing on using JavaScript to manipulate Layers
in real-world examples.
The Layer Object in JavaScript is new and has many Properties and Methods that
facilitate the manipulation of Layers both programmatically and dynamically from user
input. Many of the Methods and Properties of other JavaScript Objects which can enhance
this process are covered in both theory and in Sample Listings which are both in the book
and in separate files on the CD-ROM for you to run. Generally speaking, you can digest a
concept faster if you run the examples in a browser.
Part II covers all the vast array of new features of JavaScript 1.2 and changes to
previous Object functionality. There are new Statements to consider and many Objects that
required Constructor Functions can now be created with Literal Notation. String Objects,
Array Objects and Event Objects have been massively enhanced with a plethora of new
Properties and Methods. There is a new RegExp Object which uses Regular Expressions to
perform pattern matches in text searches that opens up a whole new range of possibilities.
xvi
Additionally, Part II covers many of the essential tools for using JavaScript such as
basic and advanced Object Theory, Statements and Operators, Functions, Methods,
Expressions, Variables and Properties.
Part III covers the new features and minor changes to JavaScript 1.3. Version 1.2 is
a major upgrade but version 1.3 is not. However, one really useful feature of 1.3 is the
JavaScript Console that you can use to debug your code from Navigator/Communicator.
Most of the examples in this book will require that you use the Navigator 4.0
version of the browser and make sure that you have JavaScript enabled in the Preferences
dialogue box. This book follows the standard conventions of using a fixed-width font
(Courier or Geneva) for displaying HTML and JavaScript code except when it occurs in the
context of a normal paragraph. In that circumstance, the code is displayed with a bold font.
Usually HTML code is displayed in allcaps and JavaScript is either all lowercase or
interCap.
Appendix E in Part IV consists of a group of charts that contain a lot of condensed

information that can serve as Syntax references. These charts are all in a file named:
Charts.pdf
on the CD-ROM. It is suggested that you print out the whole file for use while you are
learning the book and even more importantly for when you are writing your own code.
In summary, this book thoroughly covers CSS Style Sheets and JavaScript Style
Sheets in theory and by example, along with all of the new features of JavaScript versions
1.2 and 1.3. It also serves as a Syntax Reference for these topics. Most importantly, after
learning the theory, this book demonstrates how to effectively integrate JavaScript with
DHTML to create innovative and advanced web sites. Finally, this book is heavily focused
on examples as a learning mechanism; there are over 400 working examples in the book
and even more on the CD-ROM.
Have FUN!!
Gilorien
About the Author
Gilorien is a freelance artist in both the 2D and 3D realms, a 3D animator, musician
and advanced website designer and consultant. His company, DreamPlay Studios, provides
content and consulting for a variety of projects and is currently working on a full-length
animation film that is being created exclusively in the 3D digital realm. Still images of his
art, along with excerpts of music from his 2 CDs, can be seen/heard and purchased at:
Contact him at:
Preface
xvii
Regarding HTML Syntax
The way that Syntax (your HTML code) is laid out in this book is with the Element
Name first which in this case would be BODY. Then there is a list of the Attribute Names
with their respective Value possibilities which compose the NAME="value" pair as men-
tioned previously. When you see a vertical bar (|) between the values that means that you
have a choice of value Types to choose from. The Character (|) just means (or). For the
first Attribute Name of TEXT you can choose to use either a HEXADECIMAL Color or a
Color Name.

The value placeholder names between the quote marks (like colorName) are
descriptive only and are just an attempt to try to explain what kind of value you should
replace it with except when it is allcaps, which signifies that it is a Keyword that can be
used as is. One exception to this is "URL" (or "URI" if you want to be cutting edge).
Most Attributes are optional and are used to modify the Element to your own
tastes. When an Attribute is r
equired for the Element to work I will let you know.
Regarding JavaScript Syntax
The way that Syntax for JavaScript code is displayed in this book is similar to what
was just mentioned for HTML Syntax with the following additions. When Brackets [] are
used they signify, in most circumstances, that what they surround is/are optional
Parameter(s). The one exception to this is when they are used to create an Array with
Literal notation.
Curly Braces are used to enclose Statement Blocks in Functions and other types of
special Statements like if(). They are also used to create an Object with Literal notation.
InterCap words, such as statementsIfTrue, usually signify that this is a Parameter
that you should replace with your own specification. However, don’t confuse that with
Keywords, Properties, Methods or Function Names, etc., that use interCap spelling.
For more information on characters and symbols, see Chapter 9 and Chapter 10 on
Special Characters in JavaScript.
DHTML and JavaScript
xviii
Regarding Section Header Capitalization
The capitalization scheme for the Section Header Names in this book is somewhat
unorthodox. To make it as easy as possible for the reader to identify the topic or whatever
s/he is looking for, I have implemented the following general rules:
1. The first word of each section header is capitalized in all circumstances.
2. All other normal words are in lowercase letters, which is the most atypical aspect
of this scheme. The reason for this is to quickly identify code words.
3. All CSS, JSS, HTML, and JavaScript Keywords, Properties, Attributes, and Objects,

etc., have the capitalization that is appropriate for that particular word when it is used as
actual code. If a JavaScript Object such as the layers[i] Array is used in a title, then the
word layers is usually followed by the [i] which immediately shows that it is an Array.
Similarly, CSS Properties are usually identified like this: { font-size: }
4. Ordinarily, underlined words, if any, signify that they are the primary focus of the
topic to be discussed. Underlining a word also signals that this is definitely a code word,
which is especially useful for lowercase code words like the Keyword all
. Just in case you
are wondering why I don't just make them bold like in regular paragraphs, the answer is
simple: The whole header is already bold.
5. Certain words like Element, while technically aren't code words themselves, are
important enough to warrant capitalizing the first letter all the time. Actual HTML
Elements are always written in all uppercase letters and are usually surrounded by angle
brackets (< >) like this: <SCRIPT>.
6. Finally, there are some words which are capitalized according to the conventions
that seem to have been adopted or initiated. For instance, Netscape started using allcaps
for CONTEXTUAL SELECTION CRITERIA and I've continued the tradition.
7. Regarding the capitalization of the word Layer: Layer and LAYER are only used
for emphasis and should be considered interchangeable in most cases; although I do use
LAYER for usages of the <LAYER> Element, this is still a conventional choice because
HTML is case-insensitive. When LAYER is used in a topic concerning CSS Syntax, it more
than likely refers to a NAMED LAYER, but not always. Sometimes it is used that way just
to draw attention to it within the surrounding text. When Layer is used, it usually refers to
a generic usage.
There are two instances when the spelling of the word "Layer" is case-sensitive.
The first is when you access the layers[i] Array, and the second is when you create a new
Layer with the Layer() Constructor Function and the Keyword new, like this:
myContainer = new Layer(500);
See page 199 for layers[i] Array and pages 240-241 for new Layer().
Preface

xix
About the CD-ROM
All of the more than 400 examples in the book have an associated BBEdit HTML
Sample file on the CD-ROM in the folder named DHTML-JS_BOOK-Main_Files
. Each of
these files starts with the word "Sample" and are intended to be run on the Netscape
Navigator/Communicator browser. You can also check out the source code for
copying/pasting or alteration in any text editor. If you work on a Macintosh, you might
want to get the BBEdit text editor from Bare Bones Software, which is specifically designed
to work with HTML and other types of coding.
Netscape's homepage on the web is:
/>Netscape's "DevEdge" (Developer Edge) on the web is:
/>Netscape's "DevEdge - Library" on the web is:
/>Bare Bones Software's homepage on the web is:
/>The CD-ROM also contains a wealth of additional information of a technical
nature on a variety of subjects including HTML 4.0 white papers, Netscape's final HTML
4.0 Guide, JavaScript 1.2 and 1.3 References and Guides.
See the last two pages of the book, after the Index, for more information about the
contents of the CD-ROM.
Acknowledgments
Thanks to the many persons at Prentice Hall's PTR Division for their suggestions
and contributions in making this the best book it could be. Of special note at PTR are:
Greg Doench, Nicholas Radhuber, Mary Traecy, and Kathy Finch. Special thanks go to my
parental units, for their support and patience. This book is dedicated to all practitioners of
creativity and exploration everywhere.
DHTML and JavaScript
xx
Chapter 1
Style Sheets
Part I

Dynamic
HTML
Chapter 1
Style Sheets
Contents
Introduction to Style Sheets 4
1.1) Style Sheets Overview 4
1.2) The Golden Rules for Styles 6
1.3) Cascading Style Sheets & JavaScript Style Sheets 8
Cascading Style Sheets 8
1.4) CSS Syntax Property Chart 11
1.5) CSS & JavaScript Syntax Property Comparison Chart 12
1.6) CSS Layer Properties and <LAYER> Attributes Chart 13
1.7) JavaScript Layer Object Properties Chart 14
1.8) Generic { font-family: } Names Chart 14
1.9) Styles Chart for HTML Elements 15
The <STYLE> Element 16
1.10) Handling Comments in Styles 18
1.11) <STYLE> Element Style 20
Cascading Style Sheet Properties 23
1.12) The { font-size: } Property 23
1.13) The { font-family: } Property 24
1.14) The { font-weight: } Property 25
1.15) The { font-style: } Property 25
1.16) The { line-height: } Property 27
1.17) The { text-decoration: } Property 28
1.18) The { text-transform: } Property 28
1.19) The { text-align: } Property 28
1.20) The { text-indent: } Property 29
1.21) Margins Overview 30

1.22) The { margin: } Property 31
1.23) The { margin-top: } Property 32
1.24) The { margin-right: } Property 32
1.25) The { margin-bottom: } Property 32
1.26) The { margin-left: } Property 32
1.27) Padding Overview 34
1.28) The { padding: } Property 34
1.29) The { padding-top: } Property 35
1.30) The { padding-right: } Property 35
1.31) The { padding-bottom: } Property 35
Part I
— Dynamic HTML
2
1.32) The { padding-left: } Property 35
1.33) Color Overview 37
1.34) The { color: } Property 38
1.35) The { background-color: } Property 40
1.36) The { background-image: } Property 42
1.37) Setting Borders Overview 46
1.38) The { border-style: } Property 46
1.39) The { border-color: } Property 48
1.40) Border Widths 52
1.41) The { border-width: } Property 52
1.42) The { border-top-width: } Property 53
1.43) The { border-right-width: } Property 53
1.44) The { border-bottom-width: } Property 53
1.45) The { border-left-width: } Property 53
1.46) The { width: } Property 59
1.47) Horizontal Alignment, Floating, and Clear 62
1.48) The { float: } Property 62

1.49) The { clear: } Property 64
1.50) The { white-space: } Property 66
1.51) The { list-style-type: } Property 68
Using Styles in the <STYLE> Element 72
1.52) <STYLE> Element with CLASS of STYLE 72
1.53) Naming your CLASS of STYLE 74
1.54) Defining a CLASS of STYLE without attaching it to an Element 75
1.55) The Keyword all 75
1.56) Attaching the same CLASS to more than one Element 78
1.57) Bordered Link workaround example 81
1.58) <STYLE> Element with ID Definition for CLASS Exceptions 83
1.59) Styles and Tables 85
1.60) <STYLE> Element with CONTEXTUAL SELECTION CRITERIA 93
1.61) Inheritance issues for CONTEXTUAL STYLEs 98
1.62) CONTEXTUAL SELECTION with CLASSes of STYLE and NAMED INDIVIDUAL STYLEs 99
More Style Uses 104
1.63) The STYLE Attribute 104
1.64) The <SPAN> Element 105
1.65) The <SPAN> Element with STYLE Attribute 106
1.66) The <SPAN> Element with CLASS Attribute 110
1.67) The <SPAN> Element with ID Attribute for CLASS Exceptions 112
1.68) External Style Sheets with the <LINK> Element 114
1.69) The <LINK> Element 114
1.70) Multiple External Style Sheets in one document 121
1.71) External Style Sheet precedence issues 121
1.72) Multiple <STYLE> Elements in one document 123
CHAPTER 1 — Style Sheets
3
∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞
Introduction to Style Sheets

Style Sheets Overview
Cascading Style Sheets (CSS) and JavaScript Style Sheets used in concert with
Scripting is what puts the dynamism in Dynamic HTML. It allows you to precisely format,
embellish, and position the content in your documents instead of acquiescing to the whims
of each browser's rendering choices. You can also create documents that change by
themselves, or in response to user interaction, and have inline animations contained within
them. Inline is the key word here because that means faster downloading and no plug-ins
to load or have compatibility issues with or annoy the user because, if after downloading
seventy-five plug-ins, the one for your content isn't on his/her system. It also means that
you can have an image that not only animates but can move around the page instead of
being confined to a stationary rectangular space.
You embellish your content by making stylistic choices that affect the color, size,
font face, boldness, and other aspects of text markup, and you can create margins and
borders for your text. Then you can position your content exactly where you want it to
appear in the page instead of the old inline flow method. Transparent and opaque blocks
of content are now possible which you can change, move, resize, make appear or disappear
on-the-fly, or respond to user input. If so inclined, you could let each user custom design
how the website will appear for them.
Time will definitely be saved if you have a particular style that you want to use for
your whole site or section of it by creating the Style Sheet just once and saving it in its own
file and then accessing it multiple times with one line of code. You just LINK to the Style
Sheet when you want it to apply to that specific page.
The text layout paradigm of Style Sheets has been directly ported from the desktop
publishing world where programs like QuarkXpress have had Style Sheets for years. If
you are familiar with that then you're already halfway home to understanding Cascading
Style Sheets in HTML. There are two main differences between Style Sheets as used in
Quark and those used in Navigator. The first is that in Quark you are working in a
WYSIWYG environment so you just make your choices from radio buttons, text-boxes, and
pop-up menus in a dialog window and then Quark does all the post-script coding for you.
In HTML with Cascading Style Sheets you have to do the coding yourself but you're doing

the same thing to your content and you get very similar results. In fact, getting HTML
pages to behave more like documents in the publishing world is half the point. The other
difference, and this one goes way beyond desktop publishing, is the dynamic and
interactive aspects of Cascading Style Sheets.
Part I
— Dynamic HTML
4
Using the TYPE Attribute of <STYLE> Element
When you use the <STYLE> Element, you have to declare with the TYPE Attribute
which type of Style Sheet it is, either TYPE="text/CSS" or TYPE="text/JavaScript".
For the purposes of clarity and brevity CSS syntax
(Cascading Style Sheet syntax)
refers to syntax declared as:
TYPE="text/CSS"
When the term JavaScript syntax
is used it refers to syntax declared as:
TYPE="text/JavaScript"
Creating a Style
You can create Styles for your content in several ways. By using the <STYLE>
Element, the STYLE Attribute, the CLASS Attribute, the ID Attribute with the CLASS
Attribute, or the <SPAN> Element.
Once you get familiar with the new terms and how they are used together, and
especially the fact that there is a STYLE Element and a STYLE Attribute, it's easy.
Here's the new Elements
(Tags) associated with using Styles:
• <STYLE> specifies a Style or Layer or inflow Layer
• <SPAN> on-the-fly Style for one section of content in the
BODY Element
• <LINK> loads a Style Sheet from another Document
• <LAYER> specifies a Layer

• <ILAYER> specifies an inflow Layer or Offset inflow Layer
Here's the new Attributes
that you use with all the old Elements that you're
familiar with that are associated with creating Styles:
• STYLE on-the-fly Style for one Element only at a time in the
BODY Element
• CLASS on-the-fly Style for one Element only at a time in the
BODY Element that addresses a NAMED CLASS of
Style that was created in the HEAD Element
• ID on-the-fly NAMED INDIVIDUAL Style EXCEPTION to a
CLASS of STYLE addressed by the CLASS Attribute
for one Element only at a time in the BODY Element
CHAPTER 1 — Style Sheets
5