Page 1 | 2 | 3 | 4 | 5 | 6

Introduction: Javascripts and DHTML
JavaScript is a scripting language, created by Netscape, which can be embedded into your XHTML code to add functionality. DHTML (Dynamic Hypertext Markup Language) is an extension of HTML which uses CSS stylesheets and javascript to create animations and dynamic menu systems.

Javascript and DHTML are used in a wide variety of ways, from page effects like news tickers, to navigation and menu systems, through to whimsies like adding tails to the mouse pointer. In addition JavaScript is particularly useful with web forms, for example in checking the completeness of data a user submits.

How to use them
You use scripts in a very similar way to using a style sheet. Remember the way we devised our folders?

style
scripts
images

With our stylesheet we looked at two examples.

1. Including the style elements between the style tags in the head section of the web page
2. Keeping all the elements in a separate file (style/mystyle.css) which we referred to in the head section of the web page

With javascript we can do exactly the same, i.e. include the script in the head section of the web page between "script" tags or alternatively save all our scripts in a single file, an external javascript file, and simply refer to them from within the head section of the web page.

In the latter case the syntax for including an external javascript file in your web page is given below. In this example we've named the file "myscripts.js" and saved it in our scripts folder.

By keeping the scripts in a separate file we keep the page size at a minimum, we have more visibility on the code and it keeps coding items naturally separate, i.e. design, scripts, and content. This makes it easier to maintain and secure the site. When we include the link in each page of our website it means each page has access to the scripts. If we change a script we only have to do it once.

If we don't use an external javascript file and are including a javascript in our web page then we need to put the code between the script tags as follows

Free JavaScripts
Free javascripts are everywhere on the internet. However, before you use them you need to check the syntax and change it to validate the code. The most common error is that the tags have not been specified properly. You will find the script opening tags displayed

<script>
<script type="JavaScript">
<script language="JavaScript">

When you come accross tags like these in a javascript code you would like to use you need to change them if you want your page to be written in valid code and be indexed properly.

The <noscript> Tag
Not everyone accesses the internet with a computer.  Not everyone who accesses it uses the same browser or has the same settings on their browsers.

This means whatever your JavaScript does might not be visible or available for all your visitors. A common solution to this is to use a <noscript> tag which will display an alternative if the script cannot run.

IN XHTML the noscript tag must be placed in the body section of the page, i.e. not immediately following the closing script tag in the head section. The noscript tag will do something else (i.e. if you've included a server side script to run instead of the client side JavaScript) or display an alternative if JavaScript is not supported or enabled in the user agent.

Within the noscript tag you can provide a text description of what the script does. Avoid saying things like "Your browser doesn't support JavaScript or it is not enabled on your computer. Please enable it to view the page correctly". Your visitor will go elsewhere, why should they change their settings to view your website?

Lets look at an example which will also introduce us to the syntax required for forms. We will explore forms in more detail in a later article.

Example of Syntax
The following form field uses a JavaScript function to clear the field when you click into it. You might use this type of function if you have default values in some of your form fields. If a user wants to change the default value they click into the screen and the text disappers. They don't need to use the delete or backspace button to clear the text.

The syntax for the script and form is displayed underneath. The page validates as XHTML 1.0 Transitional.

Note the text we've used within the noscript tags.

"There is a script on the page that automatically clears default values in the form fields. This script is unable to run in your browser. To clear the fields manually click into the form field and press the delete key until the field is empty."

Events
Event handlers, in computer programming, are like triggers. When a particular event handle is used it will trigger something else to happen (the event). An example is when you move your mouse over an image, the image is swapped and you see an alternative, maybe in a different color. In this example moving your mouse over the image is the event handle and the swapping of the image is the event. Roll your mouse over the image below.

We will use events in DHTML and JavaScript, but an important thing to appreciate is that not everyone visiting your page might be using a mouse, so you should write your code with some redundancy built in. Checkpoint 6.4, of the World Wide Web Consortiums accessibility guidelines says

What does this mean? Basically we should build in the redundancy, for example we could add in some keyboard equivalents to our code. The onfocus event handler is the same as onmouseover, and the onblur event handler produces the same effect as the onmouseout. If someone was browsing your site without a mouse, i.e. maybe just using the tab key, they would still experience the site in its fullest.

We will explore accessibiliy and scripts in later issues. The purpose of mentioning them here is so that you have awareness of the accessibility issues and that you can correct the code you obtain from the internet so that it validates as valid XHTML.

Scripts in XHTML
If you want to write your web pages with validated code you will need to correct the syntax for many of the scripts that are freely available on the internet. Do you remember the key points in writing XHTML we discussed in article 1.1? Lets remind ourselves.

Lets pay particular attention to point one. All the code needs to be written in lowercase.

There is a common convention in javascript to use uppercase letters. We can see this very easily in the use of event handlers. Lets use an alert box as an example. Click the button below

Lets look at the code.

The first thing to observe is the way we've written our event handlers. These are written in lowercase so they validate as XHTML. When you obtain scripts on the internet you will need to change their native display from "onClick" (i.e. mixing uppercase letters) to the lowercase "onclick"

The second item to observe on this page is that we have built in redundancy. If you don't have a mouse you can still experience the same interactivity by using the tab key. If you want to see it work navigate this page using only the tab key, you will see a different message when you press enter on the button above.

Affiliate Links
Finally in this article, as we've been discussing the use of scripts written by other people, lets consider affiliate links.

You might like to include links on your site to products or services provided by other companies. When a visitor to your site clicks through on one of these affiliate links and buys a product or service you may have an opportunity of earning some commission from the sale. Frequently the links are provided by the other company, you just cut and paste them into your own code.

Lets look at an example. The links below click through to specific products in Amazon. However, if I used the link code as provided by Amazon this page would not validate as being valid XHTML.

Why? Lets look at a snippet of the link code

The code for these four books can produce a total of 67 validation errors including

• cannot generate system identifier for general entity "o"
• general entity "o" not defined and no default entity
• reference not terminated by REFC delimiter
• reference to external entity in attribute value

The specific problem here is that the code uses the symbol & (the ampersand). The correct way to write the code is &amp. To correct the errors you need to replace the & sysmbol with &amp; as you can see below

Remember that even though you may be obtaining links from very prestigious companies, the code might not be correct and your page may not validate if you use them in their native form. The two most frequent errors on affiliate links codes are

1. The use of a & symbol in the URL, and
2. No closing tags for elements which have no natural closing tag, i.e. images.

Next Article
In the next article we will look at some key points to include in your web design to ensure your web site is accessible to the broadest range of people. The topics we'll cover include using relative text size, using alternative text, using <div> containers instead of tables to control design, and using the title tag in external links.

Until then.............

Mark O'Connor 20th May, 2006

Page 1 | 2 | 3 | 4 | 5 | 6