|
In his seminal article Style Versus Design Jeffrey Zeldman wrote The web used to look like a phone book . What he should have written is: The web used to look like a phone book sitting in a tacky 70s disco. Thanks to the combined garishness of animated GIFs, Java applets and JavaScript, many web pages were distinctly vulgar.
Fast forward to 2011 and animated GIFs and Java applets have been thrown into the dustbin of history; but, surprisingly, JavaScript has enjoyed a renaissance of epic proportions. So much so that you can't call yourself a web designer today without some knowledge of JavaScript under your belt.
This state of affairs has come about through a number of different reasons. The introduction of AJAX as a means of updating web pages without a manual refresh, much more powerful browsers that can cope with a large amounts of scripting and the widespread use of JavaScript libraries such as jQuery, Dojo and Mootools.
At the beginning of last year I placed learning JavaScript on My Things To Do In 2010 list. A year later, I’ve made substantial progress. I would now classify my skills as intermediate. And with every new website I create, I learn more.
Below are some tips that you may find of use if you too are considering learning JavaScript.
Why You Should Learn JavaScript
If you are a web designer then knowledge of JavaScript will open up a myriad of new design possibilities for you. It’s going to be eye candy a go go! Not only that but you’ll be able to create some genuinely interesting form validation methods that would not be possible with just CSS and server-side script alone.
If you do not have a programming or development background then you will need to set aside some serious learning time as JavaScript will be quite a shock to your senses.
For all intents and purposes JavaScript is (almost) like using a fully functioning programming language, while HTML and CSS are anything but. As I was already familiar with PHP and ASP, diving into the big J wasn’t such a enormous step, but if this is your first introduction to functions, loops and variables then be prepared to suffer.
Become an expert HTML and CSS Coder First
Lets get this clear, it is unthinkable to tackle JavaScript without a sound knowledge of HTML and CSS. The three now go together like a brotherly triad.
You will need an awareness of HTML to use the DOM (more of which below) and most major JavaScript libraries now use CSS as a method of applying the script on the web page. For instance, Dojo and jQuery have incorporated the Sizzle Selector Engine to harness the power of basic and advanced CSS for their libraries.
If you know how to push CSS to its limits then you’ll be equipped to do the same to jQuery.
Use a JavaScript Library
Occasionally I read an opinion on the web that jQuery isn’t proper JavaScript, and so consequently the developer isn’t a proper JavaScript user. This argument is complete rubbish.
jQuery, and all the others, are 100% JavaScript. They primarily exist not to solve problems in the scripting language itself but to rectify inconsistencies between browsers.
If you consider CSS issues between the legacy Internet Explorer versions and the rest of the pack to be a headache then, oh boy, you just wait for JavaScript to send you crazy.
As an example below is the code that Andy Langton uses to find the viewport width and height. Note the three different methods that are necessary for multi-browser support.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| var viewportWidth;
var viewportHeight;
/* the more standards compliant browsers (mozilla/netscape/opera/IE8) use window.innerWidth and window.innerHeight*/
if (typeof window.innerWidth != 'undefined') {
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
/* IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) */
} else if (
typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
viewportWidth = document.documentElement.clientWidth;
viewportHeight = document.documentElement.clientHeight;
} else {
viewportWidth = document.getElementsByTagName('body')[0].clientWidth;
viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
} |
Alright, so after the slow death of IE6 the above code will be redundant, but there are a multitude of similar examples that could be given because the differences between Internet Explorer and the rest can be quite maddeningly bonkers.
JavaScript libraries will provide to you an easy way of dealing with issues that affect versions of older versions of Microsoft’s browser.
Freely using them is about understanding how Open Source works. The principles behind this programming philosophy is about finding a solution to a problem, and then allowing others to replicate the solution for their own purposes. This is why the Open Source approach is so effective. It doesn’t make you a lesser developer by relying on an Open Source library.
I started my educational quest at the beginning of 2010 with a copy of David Flanagan’s ‘JavaScript: the Definitive Guide’ and enrolment on a UK Open University course. After a few months of trying learn raw JavaScript it become apparent to me that I needed the help of a library.
However, those first few formative months were extremely important as it gave me an appreciation of the DOM (Document Object Method) and problems associated therewith.
The DOM is, if you don’t know, how JavaScript interacts with the HTML page.
Follow the DOM, not the Sizzle
After several months of regularly using jQuery and Dojo I’ll now be returning to core JavaScript in 2011 and incorporating that into my code wherever possible.
Essentially, jQuery is a series of functions. It is important to understand that it is not there to replace JavaScript, but it is an aid to using it more quickly and effectively. Understand and use raw JavaScript first, and rely on jQuery or one of the other existing projects next if you must.
In jQuery this is how you would find a div with an id
1
| var exampleId = jQuery(#example); |
While in DOM JavaScript it is:
1
| var exampleId = document.getElementById(example); |
Use the DOM object method wherever possible and don’t pass it through a function unless it is necessary to do so.
There is some criticism that JavaScript libraries carry too much code bloat, but by using the DOM and the JS core you minimise this issue.
In a similar spirit, I also use the core JavaScript loops and arrays rather than anything provided by jQuery. The point is to use a library, but don’t be dependent on it. For that you’ll need to understand the differences and then make decisions about when is the appropriate moment to use a somebody else’s script, and when you shouldn’t.
There is though one good reason why you should go through all the pain of forsaking jQuery and tackling JavaScript without an aid and that is because it will make you immensely employable.
You quite likely to be head hunted by an agency if you have advanced JavaScript experience as it is a skillset that is currently much in demand, and it would be fair to forecast the future and state that JavaScript will become an increasingly dominant web technology in coming years, rather than a shrinking one.
Try to Use Object Detection, not Browser Sniffing
Even with the best equipped JavaScript library, you will still regularly run into issues with IE that needs special attention.
If the JavaScript is used for non-essential eye candy, it may well be the best option to forget about IE 6 or 7 by creating a conditional statement that blocks both or either of these browsers from using the code. After all, time is money ñ and you have your sanity to worry about.
It is possible to detect the make and version number of a browser but the code to do so can be unreliable; indeed, jQuery have recommended against its use. A more trustworthy alternative is to use object detection.
jQuery has a limited set of object detection based around support, but Modernizr is a well-loved and well-respected script.
An example of Modernizr in action. The code below tests of HTML local.storage.
1
2
3
4
5
6
7
8
9
| if (Modernizr.localstorage){
// For browers Chrome 4+; Firefox 3.5+; IE8+; Opera 10.5+; Safari 4+; plus iPhone 2.0+; and Android 2.0+.
} else {
// Use cookies for all the others
} |
This is the code I use to run JS in any browser apart from Internet Explorer 6:
1
2
3
4
5
| if (document.documentElement && typeof document.documentElement.style.maxHeight != "undefined") {
// code here
} |
JavaScript purists might have little fit at the above slice of code as they consider objects should only be used for the object it is testing for, but you are never going to have perfection when comes to Internet Explorer.
Use JSLint
JSLint is kind of like a JavaScript validator, or a a code quality tool as it is described on their website. If you are new to this script and are wondering why your code isn’t working then cut and paste it into JSLint and let the automatically generated suggestions help you debug your work.
Even a single wrongly placed comma can stop the whole script from running, especially in IE which is a lot less tolerant of mistakes.
Keep your Code Tidy and Use Comments
If you write JavaScript without explaining your code you are either a complete arsehole (because you couldn’t care less about the developer after you) or you are a masochist, because when you return to your code a few months later it will be difficult to understand.
Use comments liberally. It is better to have too many comments then too few, at least then you can delete unnecessary comments at the end of the job (refactoring comments?!).
In JavaScript there are two different ways to leave comments. They are:
1
2
3
4
5
| // This is a single line comment
/*
This is a block of comments
*/ |
Likewise keep your code need and tidy and you can do that by using the rather wonderful JSBeautifier. This will indent your code into an easy to read pattern.
Also, I have now started to add a dollar sign to my variables akin to PHP. Unlike in PHP, there is no such requirement in JavaScript but nevertheless I find it easier on the eye when quickly scanning a document.
Conclusion
JavaScript with the DOM bumps mentioned above can be both infuriating and frustrating. But, like anything else, persistence pays off ñ and you may even grow to quite like the cantankerous old bugger.
One thing for sure though is that JavaScript is a key web technology of the present and the future. You ignore it at your peril. So buy some books, watch some Think Vitamin tutorials and get coding!
If you have any recommendations for JavaScript newbies that builds on this article, whether books, guides or techniques – then please post them below.
|