The Best-Practice Guide to xHTML and CSS phần 6 pptx

chapter

Scripts & Objects

It j u s t s it s t h e r e . It doesn’t do anything. Well, that’s kind of the

point of HTML and CSS—it’s just a way of structuring and presenting

largely textual content. The whiz-bang-pop is the job of other languages

and file types. Close to home you’ve got JavaScript, which allows you to

dynamically manipulate the parts of an HTML page and then you’ve got

your completely alien objects like videos and Flash files. They may not

be a part of HTML or CSS, but they still rely on HTML to get them to

work in a web page.

JavaScript and the DOM

JavaScript is a commonly used and widely supported scripting language that

can be used to add interactive behaviors such as rollovers, form validation,

and even switching between different style sheets. It can be applied to an

HTML document with the script element or “event attributes” in individual

tags. Through the Document Object Model (DOM), the W3C’s standardized

model for the structure of a web page, it is possible to manipulate any part of

a web page with JavaScript.

The script Element

script defines a block of script, and is the tool of choice for inserting a chunk

of JavaScript into an HTML page.

7

148 |  chapter 7: Scripts and Objects

The script itself can be placed between the opening and closing script tags,

like so:

<script type=”text/javascript”>

function satsuma() {

alert(“SAAAATSUUUUMAAAA!!!”);}

</script>

Alternatively, a script can be kept in a separate file and applied like so:

<script type=”text/javascript” src=”kumquat.js”></script>

The type attribute is required, and will always have the value “text/javascript”

when using JavaScript, and just like in an img tag, the src attribute points to the

location of the external file.

To accommodate users who don’t have JavaScript-enabled browsers, or those who

choose to switch it off, you can provide alternative content by using a noscript ele￾ment anywhere inside the body element. The content of this element will only show

up when the browser can’t detect JavaScript.

<noscript>

<p>What? No JavaScript? Well what am I supposed to do now? Can’t you

get a new browser or something?</p>

</noscript>

Event Attributes

JavaScript code can be invoked when the user does something, such as clicking a

button, rolling over an element, or loading a page. You can apply event attributes to

just about any opening HTML tag (such as onclick in a submit button, onmouseover

in a link, or onload in the body tag) that will pick up on such actions and when they

take place, the value of the attribute, which would be a piece of JavaScript code,

will be executed:

<a href=”newfangled.html” onclick=”alert(‘SAAAATSUUUUMAAAA!!!’);”>

DO IT!</a>

While the value of the attribute could contain all of the required JavaScript (such

as that in the example above), it usually doesn’t. The values of event attributes

tend to make calls to functions defined in the script element (whether those

functions are actually in the page or in an external file). This cuts down on the

volume of inline code and makes common actions available in a central, reusable,

location:

<a href=”newfangled.html” onclick=”satsuma();”>DO IT!</a>

Having said all that, similar to the point made in Chapter 1, “Getting Started,”

about the style attribute, if you’re taking JavaScript seriously it should be unobtru￾sive—HTML elements can be targeted through the DOM with JavaScript without the

need of event attributes, which is a much nicer, easier way to manage, and more

powerful way of doing things.

Manipulating the DOM

Put simply, the DOM is a standardized model of every part of a web page, including

the HTML and CSS code, that is commonly manipulated with JavaScript.

The powerful ability to manipulate any and every part of any and every element on

a page means that you can do away with event attributes altogether and separate

out another layer: behavior, which carries similar benefits to separating structure and

presentation. With the DOM you should be able to place all of your code inside a

script element (be that in the page itself or accessed in a .js file) and dynamically

remote-control the page.

This is the modern, cutting-edge way of using JavaScript. Like web-standard HTML

and CSS, using DOM JavaScript leads to lighter, more manageable code. The phi￾losophy and practice of DOM Scripting is a huge subject unto itself, and is some￾what outside the remit of this book. There are now many good quality books (see

Figure 7.1) and online resources that delve right into it (http://www.webstandards.

org/action/dstf/ is a good starting point).

JavaScript and the DOM | 149