Staying Static
OK, I have a confession to make. Until this spring, the content and layout of
my websites was almost totally "static". By this I mean that the information
simply sits on the page and never changes, unless I edit the page on my computer,
and then re-upload the page to the server, overwriting the original content.
Tables, backgrounds, images, text, all appear the same way they were designed and
uploaded, every time someone views the page. Now this was perfectly fine, and
worked quite well with some of the content that I was producing when I originally
designed my pages, (tutorials for image editing software).
However, one could now quite fairly level the accusations of "boring" and "dull"
at said designer, when static content is all that the website has to offer.
So, what else can we do with our pages to liven them up a little (or a lot!) ?
Well, why not "Get Dynamic with Javascript!".
Two questions immediately arise in the mind of the novice webmaster:
What is Javascript?
How do you produce dynamic/interactive content?
Read on........
What is Javascript?
Javascript is not to be confused with 'Java' although many
people do tend to do so, when they initially come across the terms.
Java is a large, complex, programming language developed by Sun Microsystems. Java applets
(small applications) are fully contained, stand-alone programs. Java is compiled
into a machine language before it can be run on the web, and your computer needs to
be 'java-enabled' for you to run these programs. (See the above link to Sun
Microsystems for further information).
Javascript, on the other hand, is placed inside an HTML document, and is saved as
text along with the HTML. It also requires a browser that understands the scripting
language, to display it. This now includes most browsers from Netscape 2 and above,
although certain browsers may display or 'render' the javascript somewhat
differently. Javascript was developed by Netscape, and Microsoft has it's own
version called jscript, which is why considerable differences are often apparent
when viewing scripts in Microsoft Internet Explorer (MSIE), or Netscape and other
Gecko based browsers such as Mozilla. However, using javascript, it is possible to
detect which browser your visitors are using, and tailor your pages
accordingly.
For example:
The following small javascript detects whether you are using MSIE, Netscape,
(Mozilla is detected as Netscape) or Opera.
This next script gives more detailed information about your browser type and
version:
I have tested this page in MSIE6, Netscape 7.1, Mozilla 1.6, and Opera 7.23, and the above script correctly (and impressively!) determined each browser, and displayed the relevant information here.
Getting Dynamic
So, what else can we do with javascript?
Well, the little scripts demonstrated above, are actually examples of dynamic
content, because they display different information dynamically
(ie in real time), depending on which particular browser is being used to download
the page and generate the javascript.
Speaking of time, would you like to know what time it is in Karachi right
now?
Well, you may have noticed a rather nice little clock ticking away on the left
hand menu bar.
If you click on the drop down box above the clock face, you can find out the
current time in a number of places around the world. Today's date is displayed
underneath the clock too. This clock uses a more complex javascript involving the
'date object' to access this information.
I admit I did not write this script myself, but have made some modifications to it
to display it here. This is the beauty of using javascripts on your sites. You dont
need to be able to write your own scripts, as an enormous number of free scripts
are available for download on the Internet.
It is much better if you do at least learn the rudiments of the scripting
language, though.
Then you will not only be in a position to write your own simple scripts, but you
can easily modify other more complex scripts to suit your own purposes, if you
understand how they are written.
I have found this site to be an excellent place to start, and a couple of
others are featured in the menu examples on the left.
The news column on the right hand side of the page contains dynamic content, too.
The top box uses a javascript to obtain newsfeeds which have been specially
converted to javascript files, from a couple of internet news sites.
The bottom box obtains a more traditional RSS (really simple syndication) feed
from the BBC website. I chose the BBC for a more British flavour to the news, but
you can obtain RSS feeds from a variety of news and entertainment sources. It is
then just a matter of copying and pasting the javascript generated, into the html
of your page, and away you go with dynamic news content ie: content that is updated
regularly throughout the day and is fed to your page every time it is
reloaded.
Basically, dynamic content is any content that can update or change when a page is
reloaded, (or in the case of a clock, can be set to update every second, so that it
is appears to be continuously "ticking" as you browse).
Becoming Interactive
Like the personalisation? This is interaction at it's best :-)
Perhaps not, but it is rather fun, isn't it?
When you loaded this page you were asked to write your name in a small box (known
as a prompt box), and depending on what you put in there, you have now been
addressed by name. This is all thanks to another little javascript which requires
interaction from you the user to generate a response.
Here is another fairly simple example of interaction:
When you click on the above button, this opens a new "pop up" window which
contains a small javascript using a function and a form, to ask you to change the
background colour of the window. Another button invites you to close the
window.
One has to be very circumspect in the use of pop up windows, as nowadays they tend
to be associated rather negatively, with unwanted and intrusive advertisements.
Many people (including myself) use software to "block" these ads, but this does
also block useful and helpful popups too. The only real answer I have found, is to
configure your software or browser to block popups generally, but to allow them for
specific sites or pages where you know they are needed.
For example : many forums and message boards use pop up windows for you to reply
to a posting, and other sites use them for further information on help topics, or
as part of your online banking experience.
More relevant interaction betwen the user and the website often involves forms,
perhaps a type of drop down menu where you can choose something, ( our friend the
clock over there, employs this method when you choose a city whose time you wish to
see displayed). HTML forms using javascript, which require you to fill in a number
of fields, and the information you submit is then taken off to a database for
processing, are very common these days. Registering to join a forum/bulletin board,
making an online purchase, using Internet banking, are all everyday examples of
interactivity.
The menu on the top left of this page has links to some more examples of dynamic
and interactive pages.
The first one is a fairly involved javascript menu that I have
been using on my website. Although the code itself is quite complex, the .js file
that you customise to your site's requirements is very well commented, and the
author's website offers extremely detailed, and thorough explanations of all
terms/variables and so on.
The second one is an online computer store that we use a lot. The content here
changes dynamically every time you click on a menu item or go to
another page, as the website revolves their display (rather like a shop window),
depending on which items they are featuring at the moment. This is of course common
practice with most online stores today, and www.amazon.co.uk is another good example of this. These stores
also use interactive methods, as you are able to set up a user
account with them (filling in a form), and then when you login, your previous
preferences are remembered (stored in a cookie), so that the website can show you
content tailored to your personal interests/ requirements. This is done with the
expectation that you are more likely to make a purchase, than if you have to search
through the site to find the items you want.
The final 3 links are examples of some resources available to learn how to
implement all this stuff on your websites. There are some javascript tutorials, lots of
free scripts for you to modify and customise, and finally a link to W3 Schools,
which I consider to be an excellent resource for all web building tutorials,
ranging from basic html right up to multi-media and advanced XML.
In Conclusion
There is of course a great deal more to a dynamic website than just adding a few
javascripts to your pages, but it is a great place to start.
You will then want to go on and learn about Cascading Style Sheets and DHTML. This
article has been my first foray into using javascripts with CSS myself, and has
certainly whetted my appetite for more. (Indeed, since this article was originally written in March 2004, I have just completely redesigned JWG from scratch).
Hopefully it will have done the same for you, too. Do check out W3 Schools first
though, for a good grounding in the basic structure of CSS and Javascript; and away
you go!
