Dynamic Behavior And Scripting
The first thing you should know about scripting and dynamic behavior is that you could skip this entire part of the book, never touch any scripting language, and still built a perfectly good webpage. Dynamic behavior describes how the webpage reacts to what the user is doing at the moment. It is probably the most complicated part of website design because, unlike structure, which is created with a markup language (in this case, (X)HTML) and presentation, which is created with CSS, dynamic behavior relies on an actual programming language, which is known as a scripting language.
A couple of notes:
- I will deal solely with client-side scripting, which means the browser runs the scripts. Server-side scripting (run by the server) is outside the purview of this book and has an entirely different purpose. I give server-side scripting a short rundown in Server-Side Scripting, but that's about it.
- I'm going to concentrate solely on JavaScript, which is shared by all major browsers. I am well aware of VBScript's and PerlScript's existences, but VBScript is for Internet Explorer only and is now so rare as to be almost non-existent. I'm not sure if PerlScript was ever implemented at all.
Client-side scripting received a pretty bad bad reputation due to wretched scripts that were full of errors, worked on only one browser or—worst of all—outright malicious code. This is still a problem. Well-written scripts don't need to be that way; proper implementation will result in scripts that don't raise errors and will work on most browsers (I have yet to find anything that will work with Lynx). While we're on the subject, you may have heard of DHTML. That stands for Dynamic HTML, the result of adding client-side scripting to HTML.
What Does Scripting Do?
Scripting allows your viewer to interact with the webpage and allow the webpage to change on the fly. For example, I have not even touched on (X)HTML forms because they are useless without some sort of script to interpret the user's input.
It also allows for randomized images, for tabbed menus, and so on. But always remember: You should always allow all your content to be viewed without scripting. A lot of people, for security reasons, disable scripting in their web browsers.
The Script Element
Element Name: script
To include a client-side script with a webpage requires the script element. This element either contains or refers to the script you are using. Unlike a lot of elements, this can go either in the body or head element, and you can have as many script elements as you like—but where each one goes is indeed important! I'll get to why shortly.
Also, when you're scripting for an XHTML document, you have to place the script in a character data section, much like you did when you used the style element; it, too, is not markup.
Required Attributes
- type
- This allows the browser to know what language the script is written in. The two options for JavaScript are:
type="application/javascript" (which Internet Explorer will ignore) and type="text/javascript" which is common to all browsers that support JavaScript.
Implied Attributes
- charset
- This allows the browser to know the character encoding of the script.
- src
-
This refers to an external script file. If the script element has this attribute, anything inside the script element itself will not be processed by the browser—which you can use to your advantage.
The advantage of external script files is they can be used for multiple webpages, much like external style sheets.
- defer
-
The defer attribute tells the browser that the script does not have to be processed until after the page has finished loading, which allows for pages to be rendered faster. This is a boolean attribute.
Warning: If a script is deferred, but a script that refers to it is not, you will probably get an error. Also, not all browsers support this attribute.
Forbidden Attributes
Language and core attributes may not be used in the script element.
The No Script Element
Element Name: noscript
The noscript element works as a Plan B
if scripting is disabled or not supported. If used, it must be the parent of a block-level element. Unlike the script element, the language and core attributes may be used here.
Introducing JavaScript
The most common client-side scripting language is JavaScript. Internet Explorer has something known as JScript but aside from a few extra features for Internet Explorer, JScript and JavaScript are almost identical in both syntax and vocabulary.
JavaScript, as mentioned earlier, can go either in an internal script or in an external script file with the extension .js.
Procedures and Objects
Throughout the next few chapters, I will mention functions, methods and objects several times and use them.
Functions And Methods
A procedure is a chunk of coding stored elsewhere and given a name so you don't have to type it out over and over again, merely refer to it by that name whenever you need it. All procedure names are followed by parentheses ((
, )
), between which you can place zero or more pieces of information to be passed to the method's code.
There are two types of procedures: functions, which are standalone procedures, and methods, which are procedures that are associated with an object. For example, the procedure alert (which is a function) makes a little alert box pop up. The piece of information passed to it is the text you want the popup box to display. The following will make a little alert box with the words Hello World
show up when a page is loaded:
<script type="text/javascript">
alert("Hello World");
</script>
The result would look like this:
Objects
An object is basically a collection of values, procedures, and/or other objects along with information about those values, procedures, and objects..
Setting The Default Scripting Language
This is a little more important than the default styling language because there is more than one scripting language out there. With JavaScript, you can set the default language to either application/javascript
or text/javascript
, using the meta element:
I should remind you that Internet Explorer ignores application/javascript
.
