Writing Simple JavaScript Programs for Your Web Page
- Including JavaScript in Your Web Page
- JavaScript Statements
- Variables
- Operators
- Capturing Mouse Events
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
You learned in Hour 1, “Introducing JavaScript,” that JavaScript is a scripting language capable of making web pages more interactive.
In this hour you learn more about how JavaScript can be added to your web page, and then about some of the fundamental syntax of your JavaScript programs such as statements, variables, operators, and comments. You’ll also get your hands dirty with more code examples.
Including JavaScript in Your Web Page
In the previous hour I said that JavaScript programs are passed to the browser along with page content—but how do we achieve that? Actually there are two basic methods for associating JavaScript code with your HTML page, both of which use the <script></script> element introduced in Hour 1.
One method is to include the JavaScript statements directly into the HTML file, just like we did in the previous hour:
<script>
... Javascript statements are written here ...
</script>
A second, and usually preferable way to include your code is to save your JavaScript into a separate file, and use the <script> element to include that file by name using the src (source) attribute:
<script src=’mycode.js’></script>
The preceding example includes the file mycode.js, which contains our JavaScript statements. If your JavaScript file is not in the same folder as the calling script, you can also add a (relative or absolute) path to it:
<script src=’/path/to/mycode.js’></script>
or
<script src=’http://www.example.com/path/to/mycode.js’></script>
Placing your JavaScript code in a separate file offers some important advantages:
- When the JavaScript code is updated, the updates are immediately available to any page using that same JavaScript file. This is particularly important in the context of JavaScript libraries, which we look at later in the book.
- The code for the HTML page is kept cleaner, and therefore easier to read and maintain.
- Performance is slightly improved because your browser caches the included file; therefore, having a local copy in memory next time it is needed by this or another page.
Listing 2.1 shows the simple web page we used in Hour 1, but now with a file of JavaScript code included in the <body> section. JavaScript can be placed in either the head or body of the HTML page. In fact, it is more common—and generally recommended—for JavaScript code to be placed in the head of the page, where it provides a number of functions that can be called from elsewhere in the document. You learn about functions in Hour 3, “Using Functions”; until then, we limit ourselves to adding our example code into the body of the document.
Listing 2.1 An HTML Document with a JavaScript File Included
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
</head>
<body>
<p>Some content ...</p>
<script src=’mycode.js’></script>
</body>
</html>
When JavaScript code is added into the body of the document, the code statements are interpreted and executed as they are encountered while the page is being rendered. After the code has been read and executed, page rendering continues until the page is complete.