CSS, DHTML and JavaScript

DHTML and JavaScript......Page 1C o n t e n t s......Page 3Preface......Page 16Regarding JavaScript Syntax......Page 18Regarding Section Header Capitalization......Page 19Style Sheets......Page 21--- Contents 1 ---......Page 22--- Contents 2 ---......Page 23Style Sheets Overview......Page 24The Golden Rules for STYLES......Page 26Cascading Style Sheets......Page 28Example 1-1:......Page 30CSS Syntax Property Chart......Page 31Units Chart......Page 32CSS Layer Properties and Attributes Chart......Page 33Generic font-family Names......Page 34Styles Chart for HTML E l e m e n t s......Page 35The Element......Page 36Example 1-3:......Page 37Handling Comments in Styles......Page 38STYLE Element Style......Page 40Example 1-4:......Page 41The { font-size: } Property......Page 43The { font-family: } Property......Page 44The { font-style: } Property......Page 45Example 1-5:......Page 46The { line-height: } Property......Page 47The { text-align: } Property......Page 48Example 1-6:......Page 49MARGINS......Page 50The { margin: } Property......Page 51Example 1-7:......Page 52The { padding: } Property......Page 54The { padding-left: } Property......Page 55Example 1-8:......Page 56COLOR......Page 57Example 1-9:......Page 58Example 1-10:......Page 60Example 1-11:......Page 62Example 1-12:......Page 63Example 1-13:......Page 66Example 1-14:......Page 68Example 1-15:......Page 69Example 1-16:......Page 70The { border-width: } Property......Page 72The { border-left-width: } Property......Page 73Example 1-17:......Page 74Example 1-18:......Page 76Example 1-19:......Page 79Example 1-20:......Page 80The { float: } Property......Page 82Example 1-21:......Page 83Example 1-22:......Page 84Example 1-23:......Page 86Example 1-24:......Page 88Example 1-24B:......Page 89Example 1-24C:......Page 90Element with CLASS of STYLE......Page 92Example 1-25:......Page 93Example 1-26:......Page 94The Keyword all......Page 95Example 1-28:......Page 96Example 1-29:......Page 98Example 1-30:......Page 99Example 1-31:......Page 101Element with ID Definition for CLASS Exceptions......Page 0Example 1-32:......Page 103Example 1-33:......Page 104Example 1-34:......Page 105Example 1-35:......Page 107Example 1-36:......Page 109Example 1-37:......Page 110Example 1-38:......Page 112Element with C O N T E X T U A L SELECTION CRITERIA......Page 113Example 1-39:......Page 114Example 1-40:......Page 115Example 1-41:......Page 116Example 1-42:......Page 117Contextual Selectors......Page 118Example 1-43:......Page 119Example 1-44:......Page 120Example 1-46:......Page 122Example 1-47:......Page 124The Element......Page 125The Element with STYLE Attribute......Page 126Example 1-49:......Page 127Example 1-50:......Page 129Example 1-51:......Page 130Example 1-52:......Page 132The Element......Page 134Example 1-53......Page 136Example 1-54......Page 137Example 1-55......Page 138Example 1-56......Page 141Multiple STYLE Elements in one document......Page 143Example 1-57:......Page 144Layers and Styles......Page 147--- Contents 1 ---......Page 148O v e r v i e w......Page 149CSS Syntax Property Names for Layers......Page 150Creating a LAYER with a Class of Style......Page 151The { left: } Property......Page 152Example 2-1:......Page 153Example 2-2:......Page 154Example 2-3:......Page 155The { width: } Property......Page 156Example 2-4:......Page 157The bugged version of the { clip: } Property......Page 159Example 2-5:......Page 161The u n b u g g e d version of the { clip: } Property......Page 162Example 2-6:......Page 163Example 2-7:......Page 165Example 2-8:......Page 166Example 2-9:......Page 169Example 2-10:......Page 171The { layer-background-image: } Property......Page 172Example 2-11:......Page 174Example 2-12:......Page 176The { include-source: } Property......Page 178Example 2-13:......Page 179Example 2-14......Page 180CSS Layer Properties and Attributes Chart......Page 181The Element......Page 182Attributes Defined:......Page 183Example 2-15:......Page 188Example 2-16:......Page 189Example 2-17:......Page 191The Element......Page 193Example 2-18:......Page 194Example 2-19:......Page 195Example 2-20:......Page 196La yers & Ja vaScript......Page 199--- Contents 1 ---......Page 200--- Contents 2 ---......Page 201Style Sheet Comments for JavaScript Syntax......Page 202The tags Property......Page 203Example 3-0:......Page 204The classes Property......Page 205Example 3-1:......Page 206The ids Property......Page 207Example 3-2:......Page 208Using the with() Statement......Page 209The JavaScript Keyword all......Page 210The contextual() Method......Page 211Example 3-5:......Page 212JavaScript Styles Syntax Property Values Chart......Page 213Chart......Page 214Chart......Page 215The HTML Element......Page 216Comment Tag to hide the contents of the Element......Page 217The JavaScript var Keyword......Page 218The JavaScript layers[i] Array......Page 219The two types of document Obects......Page 220Example 3-7:......Page 221Chart......Page 223Invoking Methods on a Layer Obect......Page 224The left Property......Page 225The top Property......Page 226The pageY Property......Page 227The visibility Property......Page 228The siblingAbove Property......Page 229The below Property......Page 230The Layer Obect and Clipping Rectangles......Page 231The clip.left Property......Page 232The clip.width Property......Page 233The bgColor Property......Page 234The src Property......Page 235Methods of the Layer Obect......Page 236The moveT o(x, y) Method......Page 237The resizeBy(dwidth, dHeight) Method......Page 238The resizeTo(width, height) Method......Page 239The moveAbove(layerName) Method......Page 240The load("sourceURL", newPixelWidth) Method......Page 241Example 3-8:......Page 242Example 3-9:......Page 243Using the write() and close() Methods - Example......Page 250Example 3-10:......Page 251Using the moveAbove() Method......Page 252Example 3-11:......Page 254Example 3-12:......Page 256The new Operator for Creating new Layers in Real-Time......Page 260Example 3-13:......Page 261Example 3-14......Page 263Example 3-15:......Page 266Example 3-16:......Page 268clearTimeout() Method......Page 270Example 3-17:......Page 271Example 3-18:......Page 273Example 3-19:......Page 277Example 3-20:......Page 278Example 3-21:......Page 281Example 9-22:......Page 284clearInterval() Method......Page 304Example 3-23:......Page 305Example 3-24:......Page 306Example 3-25:......Page 308Example 3-26:......Page 309Example 3-27:......Page 316Date Obect Methods......Page 327Example 3-28:......Page 328Example 3-29......Page 330The JavaScript Conditional Operator ? :......Page 336Example 3-30:......Page 337Using the w i t h ( ) Statement with Math Objects......Page 341Math Obect Property and Method Summaries......Page 342Example 3-31:......Page 343Example 3-32......Page 345Example 3-33:......Page 354toString() Method -- in brief......Page 356parseInt() Function -- in brief......Page 357split() Method -- in brief......Page 358length Property of a String Obect -- in brief......Page 359Example 3-34......Page 360Example 3-35......Page 371Obects & Functions......Page 383--- Contents 1 ---......Page 384--- Contents 2 ---......Page 385The JavaScript Obect Hierarchy......Page 386Obect Properties and Methods......Page 387Defining a Function with the Function Statement......Page 391Calling a Function by Attribute Assignment......Page 392Example 4-0:......Page 393Example 4-1:......Page 394Example 4-2:......Page 395Calling a Function by Property Assignment......Page 396Example 4-3:......Page 397The JavaScript Core Function Obect......Page 398Example 4-4:......Page 399The arguments[i] Array Property of a Function......Page 400Example 4-5:......Page 401Nesting a Function within a Function......Page 402Example 4-6:......Page 403Example 4-7:......Page 404Predefined Obects......Page 406Predefined Arrays as Obect Properties......Page 407Predefined Core Functions......Page 408Obect Methods......Page 409Creating Obects with its Constructor Function......Page 410Example 4-8:......Page 412Example 4-9:......Page 414Example 4-10:......Page 415Example 4-11:......Page 416The prototype Property to add a Method to an Obect Type......Page 419Example 4-12:......Page 420Example 4-13:......Page 421The prototype Property to add a Property to an Obect Type......Page 422Example 4-14:......Page 423Indexing Properties of an Obect......Page 424Example 4-15:......Page 425Creating Obects with Literal Notation......Page 427Example 4-16:......Page 428Example 4-17:......Page 429Example 4-18:......Page 430Using the h a n d l e r F u n c t i o n P a r a m e t e r......Page 431Example 4-19:......Page 433Example 4-20:......Page 434The unwatch() Method of the Core Obect......Page 435FRAME as window Object......Page 436Window Event Handlers......Page 437Window Properties......Page 438Window Methods......Page 440The open() Method of the Window Obect......Page 442windowFeatures List......Page 443Example 4-21:......Page 445Example 4-22:......Page 446Example 4-23:......Page 447Example 4-24:......Page 449Example 4-25:......Page 450The document Obect......Page 452Document Properties......Page 453Document Methods......Page 454Example 4-26:......Page 455Cookie Syntax:......Page 456Massaging Cookie Syntax......Page 457Example 4-27:......Page 458Example 4-28:......Page 459Example 4-29:......Page 463www Cookie Links......Page 464Screen Properties......Page 465Example 4-30:......Page 466The Location Obect......Page 467URL Protocol types......Page 468Location Methods......Page 469Example 4-31:......Page 470Example 4-32:......Page 471History Methods......Page 472Example 4-33 Part 1:......Page 473Navigator Properties......Page 476Example 4-34:......Page 477Number Properties......Page 480Example 4-35:......Page 481The select Obect......Page 482Select Methods......Page 483options[i] Array Properties......Page 484The option Obect......Page 485Examples using select Object......Page 486Number Core Function......Page 487Example 4-36:......Page 488Sta tements & Opera tors......Page 491--- Contents 1 ---......Page 492Categories of JavaScript Statements......Page 493Chart of all JavaScript Statements......Page 494if () Statement......Page 495if ()...else Statement......Page 497Nested if () Statements......Page 498Nested if ()...else Statements......Page 499The ( ) ? : Conditional Operator Statement......Page 500switch( ) Statement......Page 501for( ) Statement......Page 504while( ) Statement......Page 506do while( ) Statement......Page 508labeled Statement......Page 510break Statement......Page 511Example 5-0:......Page 512Example 5-1:......Page 514Example 5-2:......Page 516for...in Statement......Page 518with( ) Statement......Page 520with( ) Statement in a Element......Page 522var Statement......Page 523Example 5-3:......Page 524function Statement......Page 525export Statement......Page 526import Statement......Page 527Comment Statements......Page 528What are JavaScript Operators?......Page 529new Operator......Page 530Example 5-4:......Page 531typeof Operator......Page 532The ( , ) Comma Operator......Page 534Arithmetic Operators......Page 535Logical Operators......Page 536Assignment Operators......Page 537Bitwise Operators......Page 538Expressions......Page 539Ja vaScript Events......Page 541--- Contents 1 ---......Page 542--- Contents 2 ---......Page 543The Event Model......Page 544Event Obects and Event Handlers......Page 545Event Properties:......Page 546The Structure of an Event Obect......Page 547Specifying an Event by name with dot notation......Page 548Available Event Properties for Each Event Obect......Page 549Testing for Modifiers Keys in Conditionals......Page 550Example 6-0:......Page 551event Keyword......Page 552Example 6-1:......Page 553Example 6-2:......Page 554Example 6-3:......Page 555Example 6-4:......Page 556Example 6-5:......Page 558Example 6-6:......Page 559Example 6-7:......Page 560Example 6-8:......Page 561Capturing Events in Nested Layers......Page 563Using the type Property and captureEvents() Method on a Layer......Page 564Example 6-9:......Page 566Example 6-10:......Page 567name Property of the target Property of the Event Obect......Page 569Example 6-11:......Page 570Example 6-12:......Page 573The Chess Game Example......Page 576Example 6-13:......Page 578Tic Tac Toe played from the Keyboard......Page 600Example 6-14:......Page 601switch Statement and KEYDOWN, KEYPRESS and KEYUP Events......Page 606Example 6-15:......Page 608Animating Layers and Images......Page 610Animating Layers automatically and by clicking on an Image......Page 611Example 6-16:......Page 612Animating Layers with the e.target.name Property......Page 615Example 6-17:......Page 616Animating Layers in a Frameset Environment......Page 624Example 6-18:......Page 625Controling an External Frame document with JavaScript......Page 629Using Key Events to h i d e and s h o w L a y e r s......Page 630Example 6-19:......Page 632scrollT o() Method......Page 642Example 6-20:......Page 643Example 6-21:......Page 648Example 6-22:......Page 652Example 6-23:......Page 668Creating User Customizable Documents......Page 670Example 6-24:......Page 672Example 6-25:......Page 681Using the routeEvent() Function......Page 683Example 6-26:......Page 685handleEvent() Method......Page 688Example 6-27:......Page 689Example 6-28:......Page 693Ja vaScript Arrays......Page 699--- Contents 1 ---......Page 700Array Obect Constructor......Page 701dense Array......Page 703Create an Array with Literal notation......Page 705Example 7-1:......Page 706Two-Dimensional Arrays......Page 707Example 7-2:......Page 708Preamble to Example 7-4......Page 710Example 7-3:......Page 711Example 7-4:......Page 712Array Method Summaries......Page 713Example 7-5:......Page 714concat() Method of the Array Obect......Page 716Example 7-6:......Page 717Example 7-7:......Page 718Example 7-8:......Page 719concat() Method demonstrated......Page 720Example 7-9:......Page 721The join() Method of the Array Object......Page 723Example 7-10:......Page 724Example 7-11:......Page 725Example 7-12:......Page 727Example 7-13:......Page 729Example 7-14:......Page 731slice() Method of the Array Object......Page 733Example 7-15:......Page 734Example 7-16:......Page 736toString() Method of the Array Element......Page 739Example 7-17:......Page 740sort() Method of the Array Object......Page 742Example 7-18:......Page 743Example 7-19:......Page 745Example 7-20:......Page 746Example 7-21:......Page 748returned Array from the match() Method of String Objects......Page 749Example 7-22:......Page 750Example 7-23:......Page 751Example 7-24:......Page 753index Property of the Array Object......Page 755Example 7-25:......Page 756input Property of the Array Object......Page 759Using Arrays to fill Element Data Dynamically......Page 760Example 7-26:......Page 761Chart of Samples that use Arrays......Page 765Ja vaScript Strings......Page 767--- Contents 1 ---......Page 768JavaScript String Objects......Page 769String Object Method Summaries......Page 770Create a String Object with Literal notation......Page 772Special Characters in Strings......Page 773Character Array of String Objects......Page 774Example 8-0:......Page 775Example 8-1:......Page 776Example 8-2:......Page 777charAt() Method of the String Object......Page 779Example 8-3:......Page 780Example 8-4:......Page 781Example 8-5:......Page 783Example 8-6:......Page 784indexOf() Method of the String Object......Page 786Example 8-7:......Page 787Example 8-8:......Page 788lastIndexOf() Method of the String Object......Page 789String Object Methods used with Regular Expressions......Page 790search() Method of the String Object......Page 791Example 8-10:......Page 792Example 8-11:......Page 793Example 8-12:......Page 794Example 8-13:......Page 795Example 8-14:......Page 796more examples using the match() Method......Page 797replace() Method of the String Object......Page 798Example 8-15:......Page 800Example 8-16:......Page 801split() Method of the String Object......Page 802Example 8-17:......Page 805Example 8-18:......Page 806slice() Method of the String Object......Page 808Example 8-19:......Page 809substring() Method of the String Object......Page 810Example 8-20:......Page 811substr() Method of the String Object......Page 812Example 8-21:......Page 813Anchors in the a n c h o r s [ i ] A r r a y......Page 814Links in the l i n k s [ i ] A r r a y......Page 815Example 8-22:......Page 816toLowerCase() Method of the String Object......Page 817fontsize() Method of the String Object......Page 818Example 8-23:......Page 819JavaScript RegExps......Page 821--- Contents 1 ---......Page 822Predefined and Individual RegExp Object Differences......Page 823Regarding Methods......Page 824When the Browser Provides the i n p u t Property Va l u e......Page 825multiline Property of the Predefined RegExp Core Object......Page 826Property Summaries of the Predefined RegExp Core Object......Page 827RegExp Objects created with Literal notation......Page 828Runtime Compilation Issues......Page 829Literal Characters in Patterns in Regular Expressions......Page 830Special Characters in Patterns in Regular Expressions......Page 831Parenthesized SubStrings......Page 832Exploring Regular Expressions......Page 833Chart of All Special Characters for Regular Expressions......Page 834String Methods used with Individual RegExp Objects......Page 839Property Summary of Individual RegExp Objects......Page 840Example 9-0:......Page 841Example 9-1:......Page 842Example 9-2:......Page 843exec() Method of Individual RegExp Objects......Page 845Example 9-3:......Page 846Example 9-4:......Page 847Example 9-5:......Page 848Example 9-6......Page 850read Conditions Chart......Page 852Example 9-7:......Page 853Example 9-8:......Page 854Example 9-9:......Page 855Example 9-10:......Page 857Example 9-11:......Page 858Example 9-12:......Page 860Example 9-13:......Page 863Example 9-14:......Page 865Create a Search Engine......Page 867Example 9-15......Page 868What's New & Changed......Page 873--- Contents 1 ---......Page 874JavaScript 1.3 and ECMA-262 Compliance......Page 875JavaScript 1.3 and Unicode......Page 876Unicode Character Escape Sequences......Page 877Changes to the Array Constructor......Page 878New t o S o u r c e ( ) Method of Array Object......Page 879Change to the t o S t r i n g ( ) Method of Array Object......Page 880Change to the splice() Method of Array Object......Page 881Changes to the Date Constructor......Page 882New Methods for the Date Object......Page 883The g e t M i l l i s e c o n d s ( ) M e t h o d......Page 884The s e t M i l l i s e c o n d s ( ) M e t h o d......Page 885The g e t U T C F u l l Ye a r ( ) M e t h o d......Page 886The g e t U T C D a t e ( ) M e t h o d......Page 887The g e t U T C H o u r s ( ) M e t h o d......Page 888The g e t U T C M i l l i s e c o n d s ( ) M e t h o d......Page 889The s e t U T C M o n t h ( ) M e t h o d......Page 890The s e t U T C D a t e ( ) M e t h o d......Page 891The s e t U T C M i n u t e s ( ) M e t h o d......Page 892The s e t U T C S e c o n d s ( ) M e t h o d......Page 893The t o U T C S t r i n g ( ) M e t h o d......Page 894s e t M o n t h ( ) Method Changes......Page 895s e t H o u r s ( ) Method Changes......Page 896s e t M i n u t e s ( ) Method Changes......Page 897U T C ( ) Method Changes......Page 898The a p p l y ( ) Method of the Function Object......Page 900An a p p l y ( ) Method Example......Page 901Another a p p l y ( ) Method Example......Page 903Using the c a l l ( ) M e t h o d......Page 906Changes to the String Object......Page 908Changes to the r e p l a c e ( ) Method of String Object......Page 909example converts kilometers to Light Years......Page 911The t o S o u r c e ( ) Method for several Objects......Page 912N a N P r o p e r t y......Page 914u n d e f i n e d P r o p e r t y......Page 915The === Operator......Page 916The != Operator......Page 917Using the JavaScript Console to debug your code......Page 918Wrapping Up and Moving On......Page 919HTML Primer......Page 921Foreword to Appendix A......Page 922Tags and Elements......Page 923HTML 4.0 Transitional......Page 924The Element......Page 925The Element......Page 926Some Quick Color Theory......Page 927The Element......Page 931The Element......Page 932The Element......Page 933The Element......Page 934TheElement......Page 935The Element......Page 936The Element......Page 937The Ta g......Page 938The Element......Page 939The Element......Page 940The Element......Page 941The Element......Page 942The Element......Page 943The Element......Page 944The Element......Page 945The Element......Page 946The Element......Page 947The Element......Page 948The Element......Page 949The Element......Page 950The Element......Page 951The E l e m e n t......Page 952The E l e m e n t......Page 953The Element......Page 954The Element as A n c h o r......Page 955The Element as Link......Page 956O v e r v i e w......Page 957The Element......Page 959Example A3-3:......Page 963Example A3-4:......Page 966The Element......Page 967Example A3-6:......Page 969Tables & the Element......Page 973Example A4-1:......Page 975Example A4-2:......Page 979The Element......Page 982The Element......Page 983The Element......Page 984The Element......Page 987O v e r v i e w......Page 989Example A5-0:......Page 990The Element......Page 992Example A5-1:......Page 997Example A5-3:......Page 998Nested FRAMESETs......Page 999Example A5-5:......Page 1000Example A5-6:......Page 1002The Element......Page 1003S y n t a x :......Page 1009Example A5-7......Page 1005Example A5-8-......Page 1007Example A5-10-......Page 1013The Element......Page 1021The Element......Page 1024The Element......Page 1025The Element......Page 1026The Element......Page 1027The Element......Page 1028The Element......Page 1029The Element......Page 1030The Element......Page 1031The Element......Page 1032The Element for Embedded Objects......Page 1033Whurlplug Plug-in......Page 1036QuickTime Plug-in......Page 1037VRML Wo r l d Vi e w P l u g - i n......Page 1038The Element for Java Parameters......Page 1040The Element......Page 1041Plug-in MIME Type and Suffixes Chart......Page 1042The Element......Page 1043The Element......Page 1044H T M L Elements by Category......Page 1045Color Names and Values......Page 1049Color Theory......Page 1050Hexadecimal Triplet Color......Page 1051The rgb( ) Function......Page 1052Recognized Color Names with Values Chart......Page 1053Sample Files R e f e r e n c e d......Page 1059Sample Files and To p i c s......Page 1060Language A b b r e v i a t i o n s......Page 1069Language Abbreviations Chart......Page 1070C h a r t s......Page 1073I n d e x......Page 1119About the CD-Rom......Page 1163