This JavaScript article tutorial is going to show us some JavaScript tips and tricks, simple JavaScript solutions and practices for JavaScript beginners to learn JavaScript programming language better. This article basically is written for JavaScript starters but it still contains many helpful JavaScript references for all JavaScript coders, web developers. Please go to the full post page for details and JavaScript code examples.

Other JavaScript article tutorials for JavaScript beginners:
- JavaScript Form Validating Tips, Code and Examples
- 5 Good JavaScript Habits for Better Improvement
- 10 Tiny JavaScript Snippets for Good Beginners
- Top 10 Best JavaScript eBooks that Beginners should Learn
- The basics of Javascript for beginners

• Demo
• Enlarge
• Reload
• New window

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.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New