Contents
Acknowledgments xi
Introduction xiii
About the Autho r xvii
1 Content and Structure 1
1.1 Opening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 The Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Minimal HTML D ocument . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Formatting a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2 Building a Sound Structure 15
2.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2 Lists and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.3 Generic <div> and <span> Elements . . . . . . . . . . . . . . . . . 21
2.4 Sectioning Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.5 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3 Presentation 35
3.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Setting up a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3 Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4 CSS Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.5 CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.6 CSS Pixel Unit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4 More Control over Style 51
4.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 51
vii
4.2 Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.3 ID Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.4 Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.5 Nesting Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.6 The HTML Ancestry Tree . . . . . . . . . . . . . . . . . . . . . . . 61
4.7 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
4.8 Determining Style Specificity . . . . . . . . . . . . . . . . . . . . . . 64
4.9 Relative Sizes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.10 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
5 Understanding CSS Boxes 71
5.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.2 CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
5.3 Element Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
5.4 Positioning and Element Flow . . . . . . . . . . . . . . . . . . . . . 80
5.5 Containing Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
5.6 Hiding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.7 Floated Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.8 Special Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
6 Behavior 101
6.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 101
6.2 Server Side Includes . . . . . . . . . . . . . . . . . . . . . . . . . . 104
6.3 Introducing JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 105
6.4 Values and Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
6.5 Operators and Expressions . . . . . . . . . . . . . . . . . . . . . . . 114
6.6 Concluding Remarks and Homework . . . . . . . . . . . . . . . . . . 124
7 Controlling Program Flow 127
7.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 127
7.2 Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
7.3 Design a Simple Progra m . . . . . . . . . . . . . . . . . . . . . . . . 136
7.4 Type Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
8 Introducing Objects 147
8.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 147
8.2 switch Conditional . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
8.3 Math Objec t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
8.4 do/while Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
8.5 Date Objec t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
8.6 Concluding Thoughts and Homework . . . . . . . . . . . . . . . . . 164
9 Understanding Arrays and Strings 165
9.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 165
9.2 Array Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
9.3 for Loo p . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
9.4 Array Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
viii Contents
9.5 String Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
10 Understanding Functions 187
10.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 187
10.2 Writing Function Definitions . . . . . . . . . . . . . . . . . . . . . . 188
10.3 References to Fu nction Objects . . . . . . . . . . . . . . . . . . . . . 195
10.4 Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
10.5 Passing Function Arguments by Reference . . . . . . . . . . . . . . . 200
10.6 The Scope Chain and Closures . . . . . . . . . . . . . . . . . . . . . 2 01
10.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
11 Building Your Own Obj ects 205
11.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 205
11.2 JavaScript Objects Revisited . . . . . . . . . . . . . . . . . . . . . . 207
11.3 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
11.4 Constructor Overloading . . . . . . . . . . . . . . . . . . . . . . . . 211
11.5 Factory Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
11.6 The prototype Object . . . . . . . . . . . . . . . . . . . . . . . . . 214
11.7 Mo re on Setting and Querying Object Properties . . . . . . . . . . . . 217
11.8 Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . . . . . . . . 219
11.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
12 Using JavaScript to Control the Browser 227
12.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 227
12.2 Deeper into the Browser . . . . . . . . . . . . . . . . . . . . . . . . 229
12.3 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
12.4 Scripting Documents . . . . . . . . . . . . . . . . . . . . . . . . . . 233
12.5 Timer Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
12.6 Scripting Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
12.7 Introducing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
12.8 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
13 User Interface 245
13.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 245
13.2 Using Family Relations to M anipulate Elements . . . . . . . . . . . . 247
13.3 Completing Math Worksheet Generator . . . . . . . . . . . . . . . . 249
13.4 Completing Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . 255
13.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
A Solution t o the Last Homework: Sudoku Generator 265
B Ways to Continue 271
B.1 Gra phics with Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . 271
B.2 Local Data Stor age through Web Storage . . . . . . . . . . . . . . . . 279
B.3 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
B.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
B.5 Go Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Contents ix
C HTML Mini Reference 305
C.1 Roo t Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
C.2 Do cument Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5
C.3 Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
C.4 Sections and Structure . . . . . . . . . . . . . . . . . . . . . . . . . 311
C.5 Grouping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
C.6 Text-Level Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . 321
C.7 Embedded Content . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
C.8 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
C.9 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 29
C.10 Global Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
C.11 Event-Handler Attributes . . . . . . . . . . . . . . . . . . . . . . . . 338
D CSS Mini Reference 339
D.1 CSS Data Ty pes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
D.2 inherit keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.3 Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.4 List Pr operties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
D.5 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
D.6 Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
D.7 Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . 357
D.8 Ta ble Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
D.9 Size Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 60
D.10 Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
D.11 Pseu do-Classes and Pseudo-Elements . . . . . . . . . . . . . . . . . 367
E JavaScript Mini Reference 373
E.1 Operator Precedence and Associativity . . . . . . . . . . . . . . . . . 373
E.2 arguments[] (Core JavaScript) . . . . . . . . . . . . . . . . . . . . 374
E.3 Array (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 374
E.4 Boolean (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 379
E.5 console (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 380
E.6 Da te (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 383
E.7 document (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 391
E.8 E le ment (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 396
E.9 E vent (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 402
E.10 Function (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 405
E.11 Global Variables, Functions, an d Objects (Core JavaScript) . . . . . . 406
E.12 Math (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 40 9
E.13 Node (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 414
E.14 Number (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 416
E.15 Object (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . 420
E.16 String (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 421
E.17 window (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 427
x Content s
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.151.107