- Learning Web Scripting Basics
- How JavaScript Fits into a Web Page
- Exploring JavaScript's Capabilities
- Displaying Time with JavaScript
- Testing the Script
- Summary
- Q & A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
How JavaScript Fits into a Web Page
By using the <script> tag, as shown in Listing 4.1, you can add a short script (in this case, just one line) to a web document. The <script> tag tells the browser to start treating the text as a script, and the closing </script> tag tells the browser to return to HTML mode. In most cases, you can’t use JavaScript statements in an HTML document except within <script> tags. The exception is event handlers, described later in this lesson.
Listing 4.1 A Simple HTML Document with a Simple Script
<!doctype html>
<htmllang="en">
<head>
<meta charset="utf-8">
<title>The American Eggplant Society</title>
</head>
<body>
<h1>The American Eggplant Society</h1>
<p>Welcome to our site. Unfortunately, it is still
under construction.</p>
<p>We last worked on it on this date:
<script>
<!-- // Hide the script from old browsers
document.write(document.lastModified);
// Stop hiding the script -->
</script>
</p>
</body>
</html>
JavaScript’s document.write statement, which you’ll learn more about later, sends output as part of the web document. In this case, it displays the modification date of the document, as shown in Figure 4.1.
)
Figure 4.1 Using document.write to display a last-modified date.
In this example, we placed the script within the body of the HTML document. There are actually four places where you might use scripts:
In the body of the page—In this case, the script’s output is displayed as part of the HTML document when the browser loads the page.- In the header of the page, between the <head> tags—Scripts in the header should not be used to create output within the <head> section of an HTML document, since that would likely result in poorly formed and invalid HTML documents, but these scripts can be referred to by other scripts here and elsewhere. The <head> section is often used for functions—groups of JavaScript statements that can be used as a single unit. You will learn more about functions in Lesson 20, “Getting Started with JavaScript Programming.”
- Within an HTML tag, such as <body> or <form>—This is called an event handler, and it enables the script to work with HTML elements. When using JavaScript in event handlers, you don’t need to use the <script> tag. You’ll learn more about event handlers in Lesson 20.
- In a separate file entirely—JavaScript supports the use of files with the .js extension containing scripts; these can be included by specifying a file in the <script> tag. While using the .js extension is a convention, scripts can actually have any file extension, or none.
As you’ll learn in Lesson 25, “JavaScript Best Practices,” the best place to put JavaScript is inside the <body> tag, just before the closing </body> tag. This ensures that JavaScript is the last thing to load and so doesn’t disrupt the speed of the rest of the page displaying.
Using Separate JavaScript Files
When you create more complicated scripts, you’ll quickly find that your HTML documents become large and confusing. To avoid this problem, you can use one or more external JavaScript files. These are files with the .js extension that contain JavaScript statements.
External scripts are supported by all modern browsers. To use an external script, you specify its filename in the <script> tag, as shown here:
<scriptsrc="filename.js"></script>
Because in this case you’ll be placing the JavaScript statements in a separate file, you don’t need anything between the opening and closing <script> tags; in fact, anything between them will be ignored by the browser.
You can create the .js file by using the same text editor you use to write HTML and CSS. This file should contain one or more JavaScript commands and only JavaScript; it should not include <script> tags, other HTML tags, CSS, or HTML comments. Save the .js file in the same directory as the HTML documents that refer to it.
Understanding JavaScript Events
Many of the useful things you can do with JavaScript involve interacting with the user, and that means responding to events—for example, a link or a button being clicked. You can define event handlers within HTML tags to tell the browser how to respond to an event. For example, Listing 4.2 defines a button that displays a message when clicked.
Listing 4.2 A Simple Event Handler
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Test</title>
</head>
<body>
<h1>Event Test</h1>
<button type="button"
onclick="alert('You clicked the button.')">
Click Me!</button>
</body>
</html>
In various places throughout these lessons, you’ll learn more about JavaScript’s event model and how to create simple and complex event handlers.