- 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
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
Using the <script> tag, you can add a short script (in this case, just one line) to a web document, as shown in Listing 4.1. 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 chapter.
LISTING 4.1 A Simple HTML Document with a Simple Script
<!DOCTYPE html><htmllang="en"><head><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:<scripttype="text/javascript"><!-- Hide the script from old browsersdocument.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 Chapter 14, “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 Chapter 14. - 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 the .js extension is a convention, scripts can actually have any file extension, or none.
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:
<scripttype="text/javascript"src="filename.js"></script>
Because 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 using a text editor. It should contain one or more JavaScript commands, and only JavaScript—don’t include <script> tags, other HTML tags, 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><htmllang="en"><head><title>Event Test</title></head><body><h1>Event Test</h1><buttontype="button"onclick="alert('You clicked the button.')">Click Me!</button></body></html>
In various places throughout this book, you’ll learn more about JavaScript’s event model and how to create simple and complex event handlers.