Bài viết này cung cấp cho chúng ta vài hướng dẫn JavaScript cơ bản, vài phương pháp JavaScript hữu hiệu để có thể học và tiếp cận với ngôn ngữ lập trình JavaScript tốt hơn. Bài viết chủ yếu dành cho người mới làm quen với ngôn ngữ JavaScript nhưng vẫn có nhiều tham khảo đáng giá dành cho mọi người muốn quan tâm. Bạn vui lòng vào trang chi tiết để xem thêm.

Các bài viết liên quan khác:
- Hướng dẫn kiểm tra dữ liệu tốt hơn với JavaScript
- 5 thói quen tốt để cải thiện kĩ năng lập trình JavaScript
- 10 thủ thuật JavaScript đơn giản dành cho người mới học
- 10 eBook tốt nhất người mới học JavaScript nên đọc
- Các vấn đề JavaScript cơ bản cho người mới học

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

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.

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới