John Dean, PhD Associate Professor of Computer Science Park University Parkville, Missouri
Internet programming. | HTML (Document markup language) |
Cascading style sheets. | JavaScript (Computer program language)
BRIEF TABLE OF CONTENTS
Introduction to Web Programming
Coding Standards, Block Elements, Text Elements, and Character References
Cascading Style Sheets (CSS)
Organizing a Page’s Content with Lists, Figures, and Various Organizational Elements
Tables and CSS Layout
Links and Images
Image Manipulations, Audio, and Video
Introduction to JavaScript: Functions, DOM, Forms, and Event Handlers
Additional JavaScript Basics: window Object, if
Statement, Strings, Numbers, and Input Validation
Loops, Additional Controls, Manipulating CSS with JavaScript
Object-Oriented Programming and Arrays
Canvas
Appendix A HTML5 and CSS Coding-Style Conventions
Appendix B JavaScript Coding-Style Conventions
Review Question Solutions
Purchase Now !
Just with Paypal
Just with Paypal
Book Details
Price
|
4.00 |
|---|---|
Pages
| 699 p |
File Size
|
19,130 KB |
File Type
|
PDF format |
ISBN
| 9781284091793 (pbk.) |
Copyright©
| 2019 by Jones & Bartlett Learning, LLC |
John Dean is an Associate Professor and the Department Chair of the Department of Computer
Science and Information Systems at Park University. He earned a PhD degree in computer science
from Nova Southeastern University and an MS degree in computer science from the University
of Kansas. Dean has worked in industry as a software engineer and project manager, specializing
in Java and various web technologies—HTML, CSS, JavaScript, JavaServer Pages, and servlets.
He has taught a full range of computer science courses,
including client-side and server-side web-programming courses.
Preface
Since HTML’s introduction in 1993, web-programming technologies have been in flux, with web
programmers using different versions of HTML for different browsers. The constant change made
it difficult for authors to write quality textbooks about the subject. Consequently, most of the
books were trade books, not textbooks. With HTML5’s approval as a “stable recommendation” in
2014, web programmers and browsers appear to have embraced it fully. With the huge demand for
web programmers in the workforce, there has been a significant demand for web-programming
courses for quite a while. Now that web programming has coalesced around HTML5, there is a
need for better textbooks about web programming.
Web programming is a large field, with different types of web programming implemented by
different tools. All the tools work with the core language, HTML, so almost all the web-programming
books describe HTML to some extent. This textbook covers HTML5, CSS, and JavaScript, all in
depth. Those three technologies are known to be the pillars of client-side web programming. With
client-side web programming, all web page calculations are performed on end users’ computers
(the client computers). There’s also server-side web programming, which uses technologies such
as ASP.NET, JSP, and PHP. With server-side web programming, most of the web page calculations
are performed on the computers that host the web pages permanently (the server computers).
Many books attempt to cover one of the server-side technologies; in doing so, they necessarily have
to cover some HTML and CSS as well, because all web pages need those technologies to display
results on the client computer. Typically, such books try to cram in too much for beginning web
programmers to digest. Many books go to the opposite extreme and cover only HTML and CSS,
leaving out JavaScript, which is essential for calculations. This book hits a sweet spot—covering
all three client-side technologies in depth (HTML, CSS, and JavaScript), with no dependence on
server-side technologies. After finishing this book, you should be prepared to write nicely formatted,
interactive web pages that are able to perform calculations and show the results. And down the
road if you decide that you want to write server-side web pages, your solid client-side foundation
should properly prepare you to go forth and learn a server-side technology(ies).
Target Audience
Unlike many client-side web programming books, this book presents not only HTML and CSS,
but also JavaScript, the document object model (DOM), and canvas. With that programming
depth, the book works well for sophomore and junior Computer Science majors who have programming
experience. With the first seven chapters devoted to HTML and CSS and a gentle introduction
to programming concepts in the JavaScript chapters, the textbook can also work well for
non-Computer Science majors with no prerequisite programming knowledge.
In addition to targeting students in a college setting, this textbook targets high school students
with or without programming experience. Most likely, in a high school setting, this book’s
content would be covered in a year-long course. Finally, this book targets industry practitioners
who want to learn client-side web programming. Industry practitioners should read the entire
textbook at a pace determined on a case-by-case basis.
Table of Contents
Preface. xi
Acknowledgments . xviii
About the Author. xx
1 Introduction to Web Programming 1
1.1 Introduction . 2
1.2 Creating a Website. 3
1.3 Web Page Example. 5
1.4 HTML Tags . 7
1.5 Structural Elements . 8
1.6 title Element. 10
1.7 meta Element. 11
1.8 HTML Attributes. 11
1.9 body Elements: hr, p, br, div. 13
1.10 Cascading Style Sheets Preview. 15
1.11 History of HTML. 16
1.12 HTML Governing Bodies. 18
1.13 Differences Between Old HTML and HTML5 . 19
1.14 How to Check Your HTML Code. 20
1.15 Case Study: History of Electric Power. 23
2 Coding Standards, Block Elements, Text Elements,
and Character References 33
2.1 Introduction . 34
2.2 HTML Coding Conventions. 35
2.3 Comments. 36
2.4 HTML Elements Should Describe Web Page Content Accurately . 37
2.5 Content Model Categories. 38
2.6 Block Elements. 40
2.7 blockquote Element. 41
2.8 Whitespace Collapsing. 44
2.9 pre Element. 46
2.10 Phrasing Elements. 46
2.11 Editing Elements . 47
2.12 q and cite Elements . 48
2.13 dfn, abbr, and time Elements. 49
2.14 Code-Related Elements. 52
2.15 br and wbr Elements . 55
2.16 sub, sup, s, mark, and small Elements . 56
2.17 strong, em, b, u, and i Elements. 58
2.18 span Element. 59
2.19 Character References. 60
2.20 Web Page with Character References and Phrasing Elements . 63
2.21 Case Study: A Local Hydroelectric Power Plant. 66
3 Cascading Style Sheets (CSS) 73
3.1 Introduction . 74
3.2 CSS Overview. 74
3.3 CSS Rules . 75
3.4 Example with Type Selectors and the Universal Selector. 76
3.5 CSS Syntax and Style. 77
3.6 Class Selectors. 79
3.7 ID Selectors. 83
3.8 span and div Elements. 84
3.9 Cascading. 86
3.10 style Attribute, style Container. 87
3.11 External CSS Files. 88
3.12 CSS Properties. 91
3.13 Color Properties. 92
3.14 RGB Values for Color. 93
3.15 Opacity Values for Color. 96
3.16 HSL and HSLA Values for Color . 98
3.17 Font Properties. 100
3.18 line-height Property . 107
3.19 Text Properties. 108
3.20 Border Properties. 110
3.21 Element Box, padding Property, margin Property. 113
3.22 Case Study: Description of a Small City’s Core Area. 118
4 Organizing a Page’s Content with Lists, Figures, and
Various Organizational Elements 131
4.1 Introduction . 132
4.2 Unordered Lists . 132
4.3 Descendant Selectors . 137
4.4 Ordered Lists . 138
4.5 Figures. 141
4.6 Organizational Elements. 145
4.7 section, article, and aside Elements. 147
4.8 nav and a Elements. 150
4.9 header and footer Elements . 150
4.10 Child Selectors. 152
4.11 CSS Inheritance . 154
4.12 Case Study: Microgrid Possibilities in a Small City. 155
5 Tables and CSS Layout 167
5.1 Introduction . 168
5.2 Table Elements. 170
5.3 Formatting a Data Table: Borders, Alignment, and Padding. 172
5.4 CSS Structural Pseudo-Class Selectors . 174
5.5 thead and tbody Elements. 178
5.6 Cell Spanning. 182
5.7 Web Accessibility. 185
5.8 CSS display Property with Table Values. 188
5.9 Absolute Positioning with CSS Position Properties. 194
5.10 Relative Positioning. 199
5.11 Case Study: A Downtown Store’s Electrical Generation and Consumption. 203
6 Links and Images 217
6.1 Introduction . 218
6.2 a Element. 218
6.3 Relative URLs . 221
6.4 index.html File. 224
6.5 Web Design . 225
6.6 Navigation Within a Web Page. 228
6.7 CSS for Links. 235
6.8 a Element Additional Details . 237
6.9 Bitmap Image Formats: GIF, JPEG, PNG. 239
6.10 img Element. 244
6.11 Vector Graphics . 245
6.12 Responsive Images. 250
6.13 Case Study: Local Energy and Home Page with Website Navigation. 255
7 Image Manipulations, Audio, and Video 269
7.1 Introduction . 270
7.2 Positioning Images. 270
7.3 Shortcut Icon. 272
7.4 iframe Element . 274
7.5 CSS Image Sprites. 279
7.6 Audio. 282
7.7 Background Images. 286
7.8 Web Fonts. 290
7.9 Video. 291
7.10 Centering Content Within the Viewport, Color Gradients. 294
7.11 Case Study: Using an Image Map for a Small City’s Core Area and Website
Navigation with a Generic Home Page. 297
8 Introduction to JavaScript: Functions, DOM, Forms, and
Event Handlers 311
8.1 Introduction . 312
8.2 History of JavaScript . 313
8.3 Hello World Web Page . 314
8.4 Buttons . 315
8.5 Functions. 316
8.6 Variables. 318
8.7 Identifiers . 319
8.8 Assignment Statements and Objects. 319
8.9 Document Object Model . 322
8.10 Forms and How They’re Processed: Client-Side Versus Server-Side. 323
8.11 form Element. 326
8.12 Controls. 327
8.13 Text Control . 329
8.14 Email Address Generator Web Page. 330
8.15 Accessing a Form’s Control Values. 332
8.16 reset and focus Methods. 335
8.17 Comments and Coding Conventions. 335
8.18 Event-Handler Attributes. 338
8.19 onchange, onmouseover, onmouseout . 339
8.20 Using noscript to Accommodate Disabled JavaScript. 342
9 Additional JavaScript Basics: window Object, if Statement,
Strings, Numbers, and Input Validation 351
9.1 Introduction . 352
9.2 window Object. 353
9.3 alert and confirm Methods. 358
9.4 if Statement: if by itself. 361
9.5 Game Night Web Page. 363
9.6 prompt Method. 365
9.7 Game Night Web Page Revisited. 366
9.8 if Statement: else and else if Clauses. 367
9.9 Strings. 369
9.10 Word Ordering Web Page. 375
9.11 More String Details . 379
9.12 Arithmetic Operators. 381
9.13 Math Object Methods. 387
9.14 Parsing Numbers: parseInt, parseFloat . 388
9.15 Water Balloons Web Page. 389
9.16 Constraint Validation for Form Controls. 396
9.17 Constraint Validation Using the Number Control’s Attributes. 397
9.18 Constraint Validation Using CSS Pseudo-Classes. 400
9.19 Comparison Operators and Logical Operators. 401
9.20 JavaScript for the Improved Water Balloons Web Page. 406
9.21 Case Study: Dynamic Positioning and Collector Performance Web Page. 410
10 Loops, Additional Controls,
Manipulating CSS with JavaScript 425
10.1 Introduction . 426
10.2 while Loop. 426
10.3 External JavaScript Files . 429
10.4 Compound Interest Web Page. 430
10.5 do Loop. 437
10.6 Radio Buttons. 442
10.7 Checkboxes . 446
10.8 Job Skills Web Page. 449
10.9 for Loop. 452
10.10 fieldset and legend Elements. 455
10.11 Manipulating CSS with JavaScript . 456
10.12 Using z-index to Stack Elements on Top of Each Other. 461
10.13 Textarea Controls. 466
10.14 Dormitory Blog Web Page . 469
10.15 Pull-Down Menus. 476
10.16 List Boxes . 479
10.17 Case Study: Collector Performance Details and Nonredundant
Website Navigation. 483
11 Object-Oriented Programming and Arrays 499
11.1 Introduction . 500
11.2 Object-Oriented Programming Overview. 500
11.3 Classes, Constructors, Properties, new Operator, Methods. 502
11.4 Point Tracker Web Page . 505
11.5 static Methods. 509
11.6 Event Handlers. 513
11.7 Primitive Values Versus Objects . 517
11.8 Using addEventListener to Add Event Listeners . 518
11.9 Using Prototypes to Emulate a Class. 520
11.10 Inheritance Between Classes. 524
11.11 Pet Registry Web Page . 527
11.12 switch Statement. 536
11.13 Arrays. 538
11.14 Arrays of Objects. 542
11.15 Book Club Web Page. 545
11.16 Case Study: Downtown Properties Data Processing. 554
12 Canvas 569
12.1 Introduction . 570
12.2 Canvas Syntax Basics. 571
12.3 Rectangles Web Page. 572
12.4 Drawing Text with fillText and strokeText. 577
12.5 Formatting Text . 579
12.6 Drawing Arcs and Circles. 582
12.7 Drawing Lines and Paths. 585
12.8 Umbrella Web Page. 590
12.9 Face Web Page . 595
12.10 Using Canvas for Transformations. 597
12.11 Moving Face Web Page. 605
12.12 Case Study: Solar Shadowing Dynamics. 610
Appendix A HTML5 and CSS Coding-Style Conventions . 633
Appendix B JavaScript Coding-Style Conventions. 645
Review Question Solutions . 655
Index. 671
Bookscreen
Approach
Some web-programming books try to present exhaustive content without trying to explain it fully.
That can lead to readers with poor understanding and weak retention of the content. In this book,
we carefully consider the proper amount of content to present in each chapter, so that there is
ample opportunity for explanations and learning. We try to engage readers by using a fun, conversational tone. Readers who are engaged are more likely to retain what they’re reading.
Readers who are having fun are more likely to dig deep and yearn to learn more.
Although we take the time to carefully explain HTML, CSS, and JavaScript syntax, we realize
how important it is to develop the creativity and problem-solving skills necessary to become
adept at web programming. With that in mind, we present the content in a manner that supports
such development. Several of the leading web-programming textbooks embed much of their content
within tutorials. Each tutorial provides step-by-step instructions that explain how to paste
together code fragments to form a web page. That technique helps readers feel good about producing
results, but when that’s all there is, not much actual learning takes place. Because there’s
not much of a framework for organizing the content, that presentation strategy makes it difficult
for readers to integrate new material into what they already know and to remember what they’ve
learned. On the other hand, this book presents content with an optimal organization for learning.
Within each chapter, we explain concepts, present problems, and solve those problems with short
code fragments and also complete web pages.
At the end of each chapter, we present optional case study sections that build upon each other
to create an increasingly sophisticated website. In the case studies, we provide guidance and a
discussion of design decisions, rather than step-by-step instructions. This forces readers to apply
what they’ve learned earlier in the chapter, and it gives readers a feel for the real-world design
process. Perhaps most importantly, the case studies provide practice for readers in fostering their
creativity and problem-solving skills.