Script Comparison - Falling Snow

Defining Variables And Starting The Script

Perhaps one of the more subtle changes in the way I coded my new "Falling Snow" script compared to how I coded the old one relates to how I defined all the variables that the script needs to have available throughout the running of the script and also how I tell the script to start running in the first place.

With the 2004 version of my script I defined all of the variables in separate statements in a way that gives them all global scope. The two variables that I expect people might want to change are defined at the very top of the script where they can be easily located while the rest are defined in between functions where they are less likely to be updated (which would with almost all of them break the script in any case).

Here's the statements that defined all the global variables in the original script:

var num_flakes = 10;
var snowflakes = new Array("snowflake.gif", "snowflake1.gif");
var speed = 50;
var movw = new Array();
var movh = new Array();
var move = new Array();
var stepw = new Array();
var steph = new Array();
var posw = new Array();
var posh = new Array();
var dir = new Array();
var winWidth;
var winHeight;

Now ignoring for the moment those first two variables that I want people to be able to change, my new script defines all of the rest of the "global" variables in a single var statement without assigning them any values. These do not in the new script actually have global scope as the entire new script is wrapped inside an anonymous function so that the scope of all of the variables used by this script is limited to just this script. By wrapping your scripts entirely within an anonymous function you remove all possibility of the script interfering with any other scripts on the page. By defining all of the variables in a single statement we make sure that they are all clearly local to this anonymous function and therefore prevent any variables that are global in scope belonging to other scripts from interfering.

Our newly defined variables can now be assigned values without needing to specify var in front of each separately because we know that they are all already defined. Since [] in JavaScript neans the same as new Array() does I also took the opportunity to shorten those assignment statements. I'd do the same with any objects defined the long eway and also any regular expressions with fixed values within the expression (using { } and / / respectively).

So my defining of all the "global" variables for the script now looks like this:

var newdiv, newimg, winWidth, winHeight, speed, movw, movh, move, stepw, steph, posw, posh, dir;
speed = 50;
movw = [];
movh = [];
move = [];
stepw = [];
steph = [];
posw = [];
posh = [];
dir = [];

Now with those first two variables where I want those using the script to be able to change them I took a different approach. I didn't define them as global variables outside the anonymous function (where they could interfere with other scripts) and I didn't define them inside the anonymous function (which would mean people would need to update code in the middle of the script with a greater possibility of them accidentally changing something else and breaking the script).Instead I defined them as arguments to be passed to the anonymous function and then assigned the values in the very last nine of the code where the anonymous function automatically runs itself (since being anonymous there is no way of actually running the function unless it is defined to run itself.

So the new version of my script wraps the entire script within the following statements which both enclose the entire script within an anonymous function and also make the variables that are intended to be able to be changed easily accessible via the last line of the script code.

(function(snowflakes, num_flakes) {
)(["graphics/snowflake.gif", "graphics/snowflake1.gif"], 10);

Note that we can't just replace those first two var statements of the original script with wrapping that script inside an anonymous function without making all the other changes that would be needed to modernise the script. We need to make sure that there is no code elsewhere that needs to be able to access something inside the script. As the new version of this script is written so as it isn't dependent on anything else this works with that version of the script.

Wrapping the old version of the script in an anonymous function wouldn't work because apart from the global declarations, the rest of the code that needs to run to actually configure the script is inside of a function that is called from elsewhere. In the old version of the script this code is wrapped inside a function called startSnow(). The new version of the script simply does away with the function wrapper around this code since the way the new script is run means it isn't necessary to use that function. So the following in the old script has no replacemnt in the new script.

function startSnow() {

The reason that this function was there in the first place is that the script can't actually start running until after the page has loaded. Now at the time the original script was written, scripts were normally placed in the head of the page unless there was some reason for placing them in the body. The problem with placing scripts in the head of the page is that anything in them that runs straight away runs before the content of the page gets to load and therefore you can't interact with the page from the script. Where scripts needed to interact with the page it was common to either use an onload event handler to call a function in the script so as to run that code after the page finished loading completely. An alternative as used with the original falling snow script was to put an additional small script at the very bottom of the page that contains the code to call that function after the HTML has loaded but without necessarily waiting for everything else in the page to load.

<script type="text/javascript">

Modern scripts do away with this complexity of needing to delay when the code runs by simply moving the entire script out of the head of the page and attaching it at the bottom of the body instead. This not only resolves the issued relating to the script interacting with the page but also speeds the loading of the page because browsers can't load other files while the JavaScript is loading but can load several other files at the same time. So by placing the script at the bottom of the page where we actually will be ready for it to run staraight away means that we do not delay the loading of everything else while the JavaScript loads earlier than it needs to.

Next: document.write And The DOM.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow