CSS, DHTML and JavaScript

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