HTML and CSS Reference
In-Depth Information
control over selected elements, it is more likely they will be found in separate
.css
files
to let you produce sweeping changes over an entire document. With one CSS file you
can control the style of one or thousands of documents. External style sheets are cached,
reduce the amount of code, and let you modify an entire site without mangling the
HTML content pages. And CSS works with JavaScript and the DOM to create a dynamic
presentation, often known as DHTML.
Behavior.
The behavior layer is the layer of a Web page that makes the page perform
some action. For most Web pages, the first level of behavior is JavaScript. JavaScript
allows you to dynamically control the elements of the Web page based on user interac-
tion such as an individual keystroke, moving a mouse, submitting form input, and so
on. JavaScript also makes it easy to perform style changes on the fly. Although tradition-
ally CSS and JavaScript are separate layers, now with the DOM, they work so closely
together that the lines are somewhat blurred. JavaScript programs are often stored in
external files, which are then put in libraries where other programmers can share them.
Unobtrusive JavaScript.
When you hear this phrase, “Make sure you use unobtru-
sive JavaScript,” and you will hear or read about it once you have started really using
JavaScript, it refers to the three layers we just discussed. It is a technique to completely
separate JavaScript from the other two layers of Web development by putting JavaScript
code in its own file and leaving the HTML/XHTML/XML and CSS in their own respec-
tive files. In the following chapters we have included most of the JavaScript examples in
the same the HTML document because the files are small and serve to teach a particular
aspect of the language. So for the time being, we will be obtrusive.
Once you have learned the JavaScript basics and start working on larger applications,
you might want to understand this more fully. For the seven rules of unobtrusive Java-
HTML is static. It structures and defines how the elements of a Web page will appear in
the browser; for example, it is used to create buttons, tables, text boxes, and fillout
forms, but it cannot by itself react to user input. JavaScript is not static; it is dynamic. It
reacts asynchronously to events triggered by a user. For example, when a user fills out
a form; presses a button, link, or image; or moves his or her mouse over a link, JavaScript
can respond to the event and interact dynamically with the user. JavaScript can examine
user input and validate it before sending it off to a server, or cause a new image to appear
if a mouse moves over a link or the user presses a button, reposition objects on the page,
even add, delete, or modify the HTML elements on the fly. Events are discussed in detail
in Chapter 13, “Handling Events,” but you should be made aware of them right at the
beginning because they are inherently part of what JavaScript does, and there will be
many examples throughout this text that make use of them.
