In February 2011 Think Vitamin published an article written by me entitled Tips on Learning JavaScript. In 2010 I had added learning JavaScript to my “things to do list” for that year, and the Think Vitamin item offered feedback on my progress so far. Re-reading my article nearly all the advice I gave out is correct but I did write: “I would now classify my skills as intermediate”. I was a little hasty in making that statement.
One year on and I've learned so much more about JavaScript. Having gone through various stages of anger and confusion, I have got to a state where I've grown quite fond of its peculiar idiosyncrasies and welcome the challenge JavaScript coding brings. Dare I say it, JavaScript is fun!
If you have just started learning JavaScript then you too will go through the stages of anger, acceptance and then, hopefully, enjoyment.
In the same spirit as my original item, I hope some points below will help you in your quest to learn this important development language.
JavaScript isn't PHP (or Ruby or any other common web development language)
The first point of confusion many new users face is: Where are all the functions? If you have used a server-side language like PHP then you would be familiar with clicking through the php.net trying to find the right inbuilt function as solution for your problem. There are thousands of inbuilt functions that come with PHP. JavaScript only has a fraction of these functions (actually they are methods not functions in JS) and it even has some vital functions missing that are regularly used in PHP like trim() (now in modern browsers – see ECMA5) or a simple way of formatting dates and times such as used in PHP date().
What initially seems like a handicap then hits you as liberation because you realise that you don't have to worry about thousands of already existing functions, with many – like in PHP – not subservient to a standard naming convention. In JavaScript, when necessary, you create your own functions and methods to be reused again in later jobs.
There is a well established Open Source project called phpjs.org. On this site contributors have recreated dozens if not hundreds of PHP functions in JavaScript. I've no doubt that the intention behind this project is well-meaning but aiming to ape PHP in JavaScript is not the way forward.
JavaScript has its own unique approach different to common web development languages and that is prototypal inheritance. To understand this and use it is to truly harness the power of this client-side script (Now server-side also too! See node.js for further details).
Take for instance the trim function on php.js:
function trim(str, charlist) {
// Strips whitespace from the beginning and end of a string
i = 0;
str += '';
if (!charlist) { // default list
whitespace = " nrtfx0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000";
} else {
// preg_quote custom list
charlist += '';
whitespace = charlist.replace(/([[]().?/*{}+$^:])/g, '$1');
}
l = str.length;
for (i = 0; i < l; i++) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(i);
break;
}
}
l = str.length;
for (i = l - 1; i >= 0; i--) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(0, i + 1);
break;
}
}
return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}
I count two loops in there and some regex plus lots of use of the indexOf and charAt methods.
Now take a look at a version as created by Douglas Crockford using the prototype object. This means that in browsers where there is no trim string method (IE8 and below) then the regex will be used.
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^s*(S*(?:s+S+)*)s*$/, "$1");
};
}
This seems to me a much more manageable solution.
You would use the above code like so:
var aString = “ This is a sentence that needs white space from the beginning and end to be removed ”; var newString = aString.trim();
Object Orientated JavaScript and Design Patterns
If you are serious about learning JavaScript then make a point of using Object Orientated Programming (OOP) as early on as you can. John Ressig has a whole chapter donated to OOP techniques in his book Pro JavaScript Techniques but I found Ross Harmes and Dustin Diaz's book Pro JavaScript Patterns particularly invaluable in dramatically improving the quality of my code.
It's a bit confusing talking about Object Orientated Programming with JavaScript as nearly everything in the language is an object, but I use OOP and design patterns interchangeably in this section as a means of a call to bring order to the code.
Before using OOP my output was becoming a mess with all the code written procedurally and which became impossible to maintain beyond 500 lines. If any poor bugger had hoped to collaborate with me on a project she would have run away screaming!
Using some of the design patterns in Harmes and Diaz's book made my output so much more manageable. If you don't come from a programming background then you would not of heard of the singleton, facade or module patterns (amongst many others). Nevertheless, these are well-established programming approaches that are applied to lots of different languages, JavaScript included, and understanding them will result in more professionally written code.
There are also other advantages to OOP like the ability to use a global namespace. This means that clashes between other JavaScript libraries you might be using or somebody else's code is kept to a minimum. Also, using OOP properly will mean a far more efficient code reuse and ultimately a much shorter page of script.
Much that we take for granted in other languages such as private and public attributes and methods, constants, passing variables by reference and even classes themselves are not used in JavaScript. But there are various ways to emulate them. “My god,” I hear you cry, “This is nothing but a hack script!”. Well, that's one of looking at the Big J, but if you are programmer who loves a challenge - and what programmer worth his / her salt doesn't? - then you will enjoy climbing over the hurdles JavaScript brings.
One last point about OOP design patterns in JavaScript. In my previous Think Vitamin article I stated that I used a dollar sign in front of variables so as to make scanning a document easier. Once I started using OOP and in particular the module pattern which uses private and public attributes and methods, the addition of the dollar sign for extra readability became unnecessary.
Use semantic names
Try to avoid abbreviations or, heaven forbid, just a single letter for variables and attributes.
I use single letters in loops when that letter represents a digit:
for (var i = 0; i < form.elements.length; i += 1) {
// loop through the values of the form elements
alert(form.elements[i].values);
} // end for loop
But other than for loops I use names for variables / attributes that demonstrate their purpose.
As an example, look at the names for the attributes I created in an object called CS.GlobalSet:
nameForm: null, sloganForm: null, emailForm: null, metaDescription: null, metaKeywords: null
These were the name of the form fields from where they took their values.
CS.GlobalSet.nameForm = this.nameForm.value.trim(); CS.GlobalSet.sloganForm = this.sloganForm.value.trim(); CS.GlobalSet.emailForm = this.emailForm.value.trim(); CS.GlobalSet.metaDescription = this.metaDescription; CS.GlobalSet.metaKeywords = this.metaKeywords;
This makes the code far easier for others to understand then if I had given them initials like nF, sF or eF.
(The full object referenced above can be found here).
There are lots of JavaScript coding standards that should be observed. Read from beginning to end the collaborative document hosted on GitHub called Principles of Writing Consistent, Idiomatic JavaScript. No matter your level of JavaScript skills, you will find some new ideas in this extensive article.
Keep you code neat and tidy
In my 2011 article “Tips on Learning JavaScript” I endorsed using JSBeautifier for automatic spacing and advocated liberally using comments so as to leave a clear explanation of the purpose of the code for when you return to utilize it at a later date. I still state that the correct use of space and full commenting are not optional, but essential.
If you want to see JavaScript as code poetry then look at some work produced by Juriy Zaytsev - aka kangax – in his fabric.js project. Note how he spaces out his code and how and when he leaves comments. This clearly is a project intended for collaboration between two or more developers and with over 12,000 lines of code it needs to be super-organised so as to keep it manageable.
Can you use JavaScript and never use a library?
Well that depends on the complexity of the code you are writing and the experience of the coder. But it's really tough to use 100% of your own DOM JavaScript and never, ever use a library.
As an example, I just recently I created a form with two different submit buttons. Each button produced two totally different outcomes: submit and delete. This wasn't a problem for the server-side script to handle, but JavaScript was a bloody nuisance. I found one event property called explicitOriginalTarget that was perfect for the purpose, but it is only used in Firefox! Similar alternatives in Webkit such as originalTarget were not cutting the mustard.
Eventually, I fell back to using jQuery like so:
$(document.forms['adminEditContent'].elements['submit']).click(function (event) {
// code here for form submission
event.preventDefault();
});
$(document.forms['adminEditContent'].elements['detete']).click(function (event) {
// code here for deletion
event.preventDefault();
});
Clearly, there is JavaScript solution because jQuery are using it in their script, but I didn't have the experience to work it out myself so I used a library. There's nothing wrong with relying on an established Open Source project when needs must. Just make a note of trying to crack the problem yourself at a later date.
I've also had a lot of problems in creating smooth animation in Internet Explorer so I use a library like animator.js or one of the big beasts such as jQuery or Dojo if I need to use JS animation.
And if you are working on a commercial project such as creating a Drupal or Wordpress theme, then using jQuery is a logical solution as it will save you considerable time. This is an important consideration if you are a professional because time is money.
Conclusion
So after two years of learning JavaScript can I now state that I have reached an intermediate skill level? Yes, I think so, but thoroughly learning any programming language is an exhaustive process that takes years; and although I have learned a hell of a lot there's still so much more to soak up yet.
I say, bring it on! I'm loving it.