HTML and CSS Reference
In-Depth Information
In this example, I apply an approach referred to as unobtrusive JavaScript. The philoso-
phy behind it is that the behavior added by JavaScript should be clearly separated from
the presentation applied using HTML and
Cascading Style Sheets (CSS)
. The page
should work and be presentable without JavaScript and JavaScript code should not be
mixed with the markup on the page.
In practice, what this means is that events handlers should be specified in scripts instead
of HTML attributes. Also, in this example, using JavaScript unobtrusively means that if
the user has JavaScript turned off, they will see all the questions and answers by default,
rather than seeing a page with the questions hidden and no means of displaying them.
Task:
Exercise 15.2: Hiding and Showing Elements
▼
The exercise starts with a web page that displays the frequently asked questions that
doesn't include any JavaScript. Here's the source for the page. Figure 15.4 shows the
page in a browser.
Input
▼
<!DOCTYPE html>
<html>
<head>
<title>
Frequently Asked Questions
</title>
<style type=”text/css” media=”screen”>
dt { margin-bottom: .5em; font-size: 125%;}
dd { margin-bottom: 1em;}
</style>
</head>
<body>
<h1>
Frequently Asked Questions
</h1>
<dl id=”faq”>
<dt>
Don't I need a development environment to work with JavaScript
?</dt>
<dd>
Nope. As with HTML, all you need is a text editor and a browser that
supports JavaScript. You might be confusing JavaScript with Java, a more compre-
hensive programming language that needs at least a compiler for its programs to
run. However, tools like FireBug for Firefox, the Internet Explorer Developer
Toolbar, and Safari's Web Inspector can make your life easier. Consult the docu-
mentation on those tools to learn more about their JavaScript features
.</dd>
<dt>
What is AJAX?
</dt>
<dd>
One topic we haven't covered yet is AJAX. AJAX is a term used to
describe scripts that communicate with the server without requiring a Web page
to be fully reloaded. For example, you can use it to fetch information and dis-
