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
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
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.
- Sent (0)
- New
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI