Javascript Automation

1As already outlined, within client-side scripting, javascripts allows the content and formatting to be modified to best suit the capabilities of the client device and browser in use. In terms of the present discussion, we will restrict the scope to a basic subset of the javascript code that supports the determination of the client-side device and the navigational menus on offer. However, because the total number of javascript files is now quite large, it is more practical for this discussion to only present snippets of code that illustrate key issues. One of the first problems that any website has to recognise is that the client may be using one of many browser types, each having a range of different versions. The following code is not very sophisticated and there are plenty of better examples to be found on the internet, but at this stage, only the basic idea is being outlined:

// Javascript file=library.js
// test for browser type
var browserName=navigator.appName;
var browserVersion=navigator.appVersion;
var version=parseFloat(browserVersion);
var netscape = (document.layers) ? true : false;
var microsoft = (document.all) ? true : false;
var firefox = document.getElementById? true : false;
var chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

The code above sits in a javascript file that is included in the <head> section of every HTML files. As such, the variables are then available for use within the main run-time <body> of the webpage.

<head>
<! load and run external javascript file >
<script src="website/scripts/library/library.js" type="text/javascript"></script>
</head>
<body>
<! adjust content based on browser type>
<script type="text/javascript">
if ( chrome )
{if chrome browser, do this}
else
{do this}
</script>
</body>

In practice, there are many more browser types than suggested above, which might exist in a large range of versions. As such, coding and testing to make sure that your website works for every possible permutation can not only be impossibly time consuming, but can make your HTML file a mess of nested <if/else if//else> statements. While commercial websites may well have to attempt to maximise their user base, the Mysearch website took a more pragmatic approach by assuming that the majority of users would use the later versions of the most popular browsers, which then allows the coding and testing overhead to be dramatically reduced.

What about the capability of the client-side device?

There are a myriad of different device capabilities that can be determined, but it has to be remembered that excessive coding and testing for too many permutations will not only make your HTML source difficult to maintain, but potentially increase the load time of your website. Again, the following example is simply illustrative of a basic DHTML mechanism:

<head>
<script type="text/javascript">
if (screen.width < 1280)
{load style sheet 1}
else
{load style sheet 2}
</script>
</head>

As outlined earlier in the discussion addressing Web Navigation, this website divides each page into different section using the <div> tag. For the purposes of this discussion, we are only interested in the divisions across the page, which are sized based on a percentage of the total screen width, i.e.

 

Left Centre Right
CSS1 20% 60% 20%
CSS2 15% 70% 15%

Based on the javascript code above, the proportions of the three section, i.e. left, centre and right, are adjusted based on the screen width of the client-side device. So when the screen is small, the proportions of the left and right sections are increased to allow enough space to display the tree menu and comments. Clearly, client-side javascripting allows for almost endless applications to be dreamed up, but rather than trying to detail too much code, the following links provide two further examples, which illustrate how the client can interact with the webpage to change either the style of the content or the actual content displayed:

In the first example above, you can click on the image to expand its size and then double-click to reduce it. While this is quite a simple example, the cosmic calculator in comparsion is quite a large javascript program that allows the user to model the expansion of the universe!

But what about the web navigation design?

Unfortunately, the javascript code required by all the different navigational options on offer is quite large. Therefore, the discussion of each will primarily take the form of an overview as outlined in the following pages

Of course, when reading this you have direct ccess to the actual menus implemented, which may be initially more interesting than the details of the implementation.

Footnote

Two other examples of automation, which extend beyond javascipting, can be seen by following the links below:

The abbreviation (GIF) stands for 'graphics interchange format' and is a file format that can contain the information for an animation, as well as a static image. If the nature of animation is relatively cyclic, i.e. in terms of number of frames, then the animation can be placed within a page, just like any other image. The actual creation of each frame can be developed using offline programs, although the details will be deferred to another discussion. However, if the image is not cyclic or requires an extensive number of large-sized frames, then this approach becomes unworkable, due to excessive load-times. In this case, the second example above is illustrative of a java program, which can produce large scale, real-time animations based on a user's input. However, while the program size is fixed, load-times still can be problematic. Again, a more detailed outline of Java programming will be deferred to a later discussion.