Cool ebook

3,430 views

Published on

Published in: Technology, Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,430
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
183
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Cool ebook

  1. 1. DHTML and JavaScript Gilorien Cascading Style Sheets, JavaScript Style Sheets, & JavaScripted Layers plus advanced JavaScript 1.2 & 1.3 Prentice Hall PTR Upper Saddle River, NJ 07458 www.phptr.com
  2. 2. 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
  3. 3. iv DHTML and JavaScript 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
  4. 4. Contents v 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
  5. 5. vi DHTML and JavaScript 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(quot;sourceURLquot;, newPixelWidth) Method 221
  6. 6. Contents vii 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
  7. 7. viii DHTML and JavaScript 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
  8. 8. Contents ix 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
  9. 9. x DHTML and JavaScript 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
  10. 10. Contents xi 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
  11. 11. xii DHTML and JavaScript 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 quot;gquot; 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
  12. 12. Contents xiii 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
  13. 13. xiv DHTML and JavaScript 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
  14. 14. Contents xv 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
  15. 15. 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
  16. 16. Preface xvii 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: http://www.erols.com/gilorien Contact him at: gilorien@erols.com
  17. 17. xviii DHTML and JavaScript 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=quot;valuequot; 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 quot;URLquot; (or quot;URIquot; 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 required 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.
  18. 18. Preface xix 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 quot;Layerquot; 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().
  19. 19. xx DHTML and JavaScript 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 quot;Samplequot; 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: http://home.netscape.com/ Netscape's quot;DevEdgequot; (Developer Edge) on the web is: http://developer.netscape.com/index_home.html?cp=hom07cnde Netscape's quot;DevEdge - Libraryquot; on the web is: http://developer.netscape.com/docs/manuals/index.html Bare Bones Software's homepage on the web is: http://www.bbedit.com/ 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.
  20. 20. Part I Dynamic HTML Chapter 1 Style Sheets
  21. 21. 2 Part I — D y n a m i c H T M L 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