Sams Teach Yourself JavaScript in 24 Hours

How JavaScript Fits into a Web Page

As you hopefully already know, HTML is the language you use to create web documents. To refresh your memory, Listing 1.1 shows a short but sadly typical web document.

Listing 1.1. A Simple HTML Document

<html> <head> <title>Our Home Page</title> </head> <body> <h1>The American Eggplant Society</h1> <p>Welcome to our Web page. Unfortunately, it's still under construction.</p> </body> </html>

This document consists of a header within the <head> tags and the body of the page within the <body> tags. To add JavaScript to a page, you'll use a similar tag: <script>.

The <script> tag 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 hour.

JavaScript and HTML

Using the <script> tag>>tag, you can add a short script (in this case, just one line) to a web document, as shown in Listing 1.2.

Did you Know?

If you want to try this example in a browser but don't want to type it, the HTML document is available on this book's website (as are all of the other listings).

Listing 1.2. A Simple HTML Document with a Simple Script

<html> <head> <title>Our Home Page</title> </head> <body> <h1>The American Eggplant Society</h1> <p>Welcome to our Web page. Unfortunately, it's still under construction. We last worked on it on this date: <script language="JavaScript" type="text/javascript"> document.write(document.lastModified); </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.

By the Way

Notice that the <script> tag in Listing 1.2 includes the parameter type="text/javascript". This specifies the scripting language to the browser. You can also specify a JavaScript version, as you'll learn later in this hour.

In this example, we placed the script within the body of the HTML document. There are actually four different 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 don't immediately affect the HTML document, but can be referred to by other scripts. The header is often used for functionsgroups of JavaScript statements that can be used as a single unit. You will learn more about functions in Hour 3, "Getting Started with JavaScript Programming."
Within an HTML tag, such as <body> or <form> This is called an event handler and 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 Hour 3.
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.

Using Separate JavaScript Files

When you create more complicated scripts, you'll quickly find your HTML documents become large and confusing. To avoid this, 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:

<script language="JavaScript" type="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> tagsin 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 JavaScriptdon'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. See the Try It Yourself section of Hour 2 for an example of separate HTML and script files.

Did you Know?

External JavaScript files have a distinct advantage: You can link to the same .js file from two or more HTML documents. Because the browser stores this file in its cache, this can reduce the time it takes your web pages to display.

Events

Many of the useful things you can do with JavaScript involve interacting with the user, and that means responding to eventsfor 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 1.3 defines a button that displays a message when clicked.

Listing 1.3. A Simple Event Handler

<html> <head> <title>Event Test</title> </head> <body> <h1>Event Test</h1> <button onclick="alert('You clicked the button.')"> </body> </html>

In Hour 9, "Responding to Events," you'll learn more about JavaScript's event model and creating simple and complex event handlers.

By the Way

You can also use an external script to define event handlers. This is a good practice because it lets you keep all of your JavaScript in one place, rather than scattered across the HTML document. See Hour 9 for details.

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Main Menu

	More Books
	PHP Hacks
	Processing Xml With Java - A Guide To Sax, Dom, Jdom, Jaxp, And Trax
	The Koran (Holy Qur'an)
	Macromedia Flash 8 Bible
	Search Engine Optimization for Dummies
	YouTube Traffic
	PHP 5 for Dummies
	Harry Potter and The Chamber of Secrets
	Harry Potter and the Sorcerer's Stone
	The Pilgrim's Progress
	Wireless Hacks
	Flash Hacks. 100 Industrial-Strength Tips & Tools
	PayPal Hacks. 100 Industrial-Strength Tips and Tools
	Amazon Hacks
	Pdf Hacks
	The Da Vinci Code
	Google Hacks
	The Holy Bible
	Windows XP For Dummies
	Harry Potter and the Half-Blood Prince
	Seo Book
	Upgrading and Repairing Networks
	Macromedia Dreamweaver 8 UNLEASHED
	Windows XP Annoyances
	Windows XP Hacks
	Microsoft Windows XP Power Toolkit
	Teach Yourself MS Office In 24Hours
	iPod & iTunes Missing Manual
	PC Hacks 100 Industrial-Strength Tips and Tools
	PC Overclocking, Optimization, and Tuning - 2th Edition
	PC Hardware In A Nutshell 3rd Edition
	PC Hardware in a Nutshell, 2nd Edition
	Upgrading and Repairing PCs
	Google for Dummies
	MySQL Cookbook
	Teach Yourself Macromedia Flash 8 In 24 Hours
	PHP CookBook
	Sams Teach Yourself JavaScript in 24 Hours
	PHP5 Manual

Free Games Paper Airplanes

500 Kostenlose Spiele