- Basic Concepts
- JavaScript Syntax Rules
- Using Comments
- Best Practices for JavaScript
- Summary
- Q&A
- Quiz Questions
- Quiz Answers
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Best Practices for JavaScript
You should now be familiar with the basic rules for writing valid JavaScript. Along with following the rules, it's also a good idea to follow best practices. The following practices may not be required, but you'll save yourself and others some headaches if you follow them.
- Use comments liberally— These make your code easier for others to understand, and also easier for you to understand when you edit them later. They are also useful for marking the major divisions of a script.
- Use a semicolon at the end of each statement, and only use one statement per line— This will make your scripts easier to debug.
- Use separate JavaScript files whenever possible— This separates JavaScript from HTML and makes debugging easier, and also encourages you to write modular scripts that can be reused.
- Avoid being browser-specific— As you learn more about JavaScript, you'll learn some features that only work in one browser. Avoid them unless absolutely necessary, and always test your code in more than one browser.
- Keep JavaScript optional— Don't use JavaScript to perform an essential function on your site—for example, the primary navigation links. Whenever possible, users without JavaScript should be able to use your site, although it may not be quite as attractive or convenient. This strategy is known as progressive enhancement.
There are many more best practices involving more advanced aspects of JavaScript. These are covered in detail in Hour 15, "Unobtrusive Scripting."
Try It Yourself
Using an Event HandlerTo conclude this hour, here's a simple example of an event handler. This will demonstrate how you set up an event, which you'll use throughout this book, and how JavaScript works without <script> tags. Listing 3.1 shows an HTML document that includes a simple event handler.
Example 3.1. An HTML Document with a Simple Event Handler
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<h1>Event Handler Example</h1>
<p>
<a href="http://www.jsworkshop.com/"
onClick="alert('Aha! An Event!')">Click this link</a>
to test an event handler.
</p>
</body>
</html>
The event handler is defined with the following onClick attribute within the <a> tag that defines a link:
onClick="alert('Aha! An Event!")"
This event handler uses the built-in alert() function to display a message when you click on the link. In more complex scripts, you will usually define your own function to act as an event handler. Figure 3.1 shows this example in action.
)
Figure 3.1 The browser displays an alert when you click the link.
You'll use other event handlers similar to this in the next hour, and events will be covered in more detail in Hour 9.