Upcoming posts on JavaScript will include references to functions in my base JavaScript file; rather than explain these functions each time, they’ll be detailed in this post for future reference.
There are many pre-written JavaScript examples and functions available, so it’s important to note that all of these functions have been written by others, some include slight changes; all moved to the namespace PWCC, as you’ll see in the source code.
In the code listings below, I’ve made the changes before moving the functions to move the PWCC namespace, to keep these listings a close to the original source code as possible.
Functions: Domready, readyState, onReady
These are taken from Geek Daily to fire JavaScript events once the DOM loads, rather than waiting for images to load and the onload event to fire. Geek Daily is altered to pass a call onReady() to the event, rather than a copy, so I can use a further function to add events as needed.
window.onDomReady(onReady);
//becomes
window.onDomReady(function() {
onReady();
});Functions: addLoadEvent, addDomEvent
addLoadEvent() is Simon Willison’s script to add events to the onload event, the only change is to move it to the PWCC namespace; addDomEvent() is the same script again, but changes the onReady() function.
Functions: hasClass, addClass, removeClass
Again no changes have are made to these scripts except to move them to the PWCC name space, they originate in Simply JavaScript, published by SitePoint.
Function: getElementsByClass
Taken from The JavaScript Source, var is added to a variable declaration to move the variables from the global to the local scope. The order in which the node and tag variables are passed to a function is reversed, as it’s more likely I’ll search by tag than a particular node; in practice I usually specify both. Finally, the default node has become the body element rather than the document node.
getElementsByClass (searchClass,node, tag) {
//becomes
getElementsByClass (searchClass,tag,node) {
//and
if (node == null)
node = document;
//becomes
if (node == null)
node = document.getElementsByTagName("body")[0];
//and
for (i = 0, j = 0; i < elsLen; i++) {
//becomes
for (var i = 0, j = 0; i < elsLen; i++) {Keeping it short and simple
I realise I could have used an existing frame work, such as the increasingly popular jQuery; I decided to use my own, which contains only the very basics, rather than have a larger file containing rarely used functions. For the time being I’m happy using my 1.34K – minimised – file.
If I find myself using other functions on most sites I develop, I’ll add them to this file; I’m already thinking of updating the dom load event functions to something more robust, when I do, I’ll to keep the function calls the same for backward compatibility.
Update
Since writing this article, I have reviewed my stance on JavaScript libraries and now use jQuery.
