Integrating JavaScript with HTML

[ LiB ]

Integrating JavaScript with HTML

JavaScripts are collections of programming statements that you embed in HTML documents by placing them within the <SCRIPT> and </SCRIPT> tags. These tags can be placed within either the head or body section of an HTML page. Figure 1.3 outlines the syntax that you must follow when using these tags in an HTML page.

Figure 1.3. Syntax of the <SCRIPT> and </SCRIPT> tags when used with JavaScript.



Testing your JavaScripts with multiple browsers is simply a matter of downloading and installing them and then using them all to see how they handle your scripts. If you also want to test how older versions of those browsers work, you may need another computer. As of the writing of this book, I was able to download versions as old as Netscape 3 and Internet Explorer 3 from popular shareware sites such as www. tucows .com and .

Several arguments can be included within the first <SCRIPT> tag. The LANGUAGE attribute specifies the version of JavaScript you want to use.

Here are your available options:

 LANGUAGE="JavaScript" LANGUAGE="JavaScript1.1" LANGUAGE="JavaScript1.2" LANGUAGE="JavaScript1.3" LANGUAGE="JavaScript1.5" 


Different versions of the Netscape Navigator and Internet Explorer browsers support different versions of JavaScript (as shown in Table 1.1, earlier in this session).With so many different versions of JavaScript and browsers, things can get very confusing.You may want to write your JavaScripts so that they conform to the lowest common denominator (that is, so that your scripts don't use features in versions of JavaScript newer than the oldest version that visitors to your Web site are likely to have). Another option is to write your JavaScripts to accommodate different browser versions.

The LANGUAGE attribute is the old way of specifying the type of script embedded within an HTML page. According to the HTML 4.0 specification, the TYPE attribute is now the proper way to go. However, you can continue to use both attributes if you want, in order to ensure that older browsers don't get confused . When working with JavaScripts, the TYPE attribute will always be Text/JavaScript .

Another way to work with JavaScripts is to store them in external files that have a .js file extension and then to reference those files from within your HTML pages. To accomplish this, you use the SRC attribute to specify the location of an external JavaScript file. Referencing an external script makes it a little more difficult for users to view your JavaScript source code. It also makes it possible to share the same JavaScripts among multiple HTML pages. Once you have defined the opening and closing tags, you can begin placing JavaScript statements between them.

Your First JavaScript"Hello World"

So far, we've introduced JavaScript and JScript, discussed their capabilities and differences, and gone over their history. We then discussed JavaScript browser compatibility issues and learned the syntax required to use the <SCRIPT> and </SCRIPT> tags to embed JavaScripts within HTML pages. Now it's time to create your first JavaScript. It's going to be a very basic example, so don't get your hopes up too high. By tomorrow night, you'll be writing much more sophisticated scripts.

In this example, you will create the classic "Hello World" script that every programming book since the beginning of time has used as its introductory example. After all, who am I to defy such an honored tradition?

Before you get started, I want to say a quick word about HTML and JavaScript editors. There are plenty of them available, and their features and capabilities vary as much as their prices. It really does not matter which editor you ultimately decide to use. In fact, for the code you see in this book, I used the Notepad program that comes with Windows XP Home Edition.



Most JScript programmers have a script editor that they always work with. Modern script editors provide a number of features that facilitate and expedite script development, making them a lot more useful than Notepad. For example, most script editors will provide statement color coding. In addition, they can be configured to indent script statements automatically. Script editors may also provide wizards or templates that assist in the creation of new scripts. Some editors will even let you test your scripts from directly within the editor, saving you the trouble of having to load your HTML pages into your Web browser each time you want to test them. For example, HomeSite is a very popular editor among Web developers and can also be used when developing JScripts. To learn more about HomeSite, check out its home page at homesite .

The first thing I did before approaching any of the coding examples in this book was to create an HTML template that I could use over and over again. Every time I worked on a new script, I used Notepad to open my template and type in my JavaScript statements. Then I chose File and selected Save As from the Notepad menu to save my script with a new file name . If you are using a full-featured HTML editor, it may automatically provide you with a starting template whenever you create a new HTML page. If not, you may want to build and use a template like I did. My template is shown here:

 <HTML>   <HEAD>     <TITLE>Script 1.1 - Insert Descriptive Title Here</TITLE>   </HEAD>   <BODY>   </BODY> </HTML> 

As you can see, my template contains the <HEAD> </HEAD> , <TITLE> </TITLE> , and <BODY> </BODY> tag sets all wrapped inside the starting and ending <HTML> </HTML> tag set. If you want to do so, create your own template now. When you are done, add the following lines inside the body section:

 <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">   document.write("Hello World"); </SCRIPT> 

These three statements will make up your first JavaScript. You should recognize the first and last lines as script tags that tell your browser to execute the enclosed JavaScript statements. This script has just one statement. This statement tells the browser to write the message "Hello World" on the current document, which is the window in which the HTML page opened.

Once you have added the three lines of JavaScript to your template, it should look like this:

 <HTML>   <HEAD>     <TITLE>Script 1.2 - Sample HTML Page</TITLE>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">       document.write("Hello World");     </SCRIPT>   </BODY> </HTML> 

Testing Your First Script

Now that you have typed in your first script, you need to save it. I called my script HelloWorld.html. The HTML extension identifies the page as an HTML page. Your computer uses the information in the file's extension to associate the file with a particular application. An .html extension tells the operating system to open its default browser and pass the HTML file to it. Alternatively, you can use the .htm extension, which is also recognized as an extension for HTML pages.

If you are using a full-featured HTML editor, the editor may enable you to test your script with the click of a button. Because Notepad has no such automatic HTML testing feature, I simply started up a browser and used it to open the HelloWorld.html file. The browser opened my page and ran the script.

Depending on the browser installed on your computer, the process of testing your script is slightly different as outlined in the following procedures.

Testing with Netscape Communicator:

  1. Start Netscape Navigator.

  2. In the menu bar, click on File and then click on Open Web Location.

  3. Type the location of your HTML page and click on Open . Alternatively, click on the Choose File button to browse and find the HTML page and then select it and then click on Open. Netscape Navigator opens the page as shown in Figure 1.4.

    Figure 1.4. Testing your first JavaScript using Netscape Communicator


Testing with Internet Explorer:

  1. Start Internet Explorer.

  2. In the Internet Explorer menu bar, click on File and then click on Open. The Open dialog box appears.

  3. Type the location of your HTML page and click on OK. Alternatively, click on the Browse button, locate and select your HTML file and then click on OK. Internet Explorer opens the page as shown in Figure 1.5.

    Figure 1.5. Testing your first JavaScript using Internet Explorer


After loading your new script and making sure that it works the way that you intended in both Netscape Navigator and Internet Explorer, you know that you probably have a good script. However, both Internet Explorer and Netscape Communicator do a really good job of hiding errors when they occur. I will show you how to look for and fix these errors on Sunday morning. If you did not see the Hello World message displayed, then you probably mistyped something, so go back and reopen your HTML page and double-check your work. For now, I'll assume that you saw what you expected when you loaded your Web page and everything is okay.

[ LiB ]

Learn JavaScript In a Weekend
Learn JavaScript In a Weekend, Second Edition
ISBN: 159200086X
EAN: 2147483647
Year: 2003
Pages: 84 © 2008-2017.
If you may any questions please contact us: