1. Technology
Send to a Friend via Email

Unobtrusive Seasonal Background

Most people still write their JavaScript code so that it is all jumbled in with the HTML. With modern browser's support for the Document Object Model this is completely unnecessary as all of the JavaScript can be removed from the HTML into a separate file that is linked to your HTML with a script tag in the head of the page. This is called Unobtrusive JavaScript.

To examine how this works let's look at a script that puts a different background image behind part of the content of the page depending on which season it is.

The code that we need for this example is in three separate parts. The first of these is the HTML which defines the content of our web page. For the purpose of this example we just have several short paragraphs on the page some of which will have a background added and some that will not.

Copy and save the above content as season.htm.

There are three lines in this code that allow our script to work.

  • The JavaScript is attached to the web page using a script tag. In this case we identify our script as being contained within a file called season.js (which describes what the script does).
  • The stylesheet that defines our page appearance is called season.css and is linked into the HTML using a link tag.
  • This div tag has an id so as to allow us to both apply styles to it from within the stylesheet and to update those styles using JavaScript.

The second part of our code is the stylesheet which defines the appearance of our page. For this script the code we need is very simple since we just apply a width, padding, and margins to our div and float it to the left of the page allowing the other page content to appear to the right. The actual background image that will be applied to the div would normally appear here as well but as we want to change it based on which season we are currently in we will add it from the JavaScript instead. To allow for people with JavaScript disabled you might consider adding a default background image to the stylesheet that will be overridden by the one set from JavaScript.

Copy and save the above content as season.css.

The third and most important part of the code is the JavaScript which defines the behaviour of our page. In this instance we are looking at displaying one of four images depending on whether it is Summer, Autumn, Winter, or Spring.

Copy and save the above content as season.js.

The start function contains the code will be run to add the background image to the div.The backImg array references the four different background images, one of which will be added as a background by the rest of the code. We use the getElementById call to reference the div and to add the selected background to it.

We need to ensure that the div has actually loaded into the page before trying to attach the background (otherwise we will get an error). To ensure that the background is added as quickly as possible we set up a loop to test for when it exists rather than waiting until the page finishes loading.

The only thing that you need to add to the above code to get your unobtrusive seasonal background script to work is to save the four images that you want it to use to the same folder as the above three files.

©2014 About.com. All rights reserved.