Online Documentation Server
 
ods.com.ua Web
 
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 

 
. , - - , .




Previous Table of Contents Next

Placing JavaScript Code

When you want to place the script somewhere in the HTML document, you need to choose where to put it. Technically, you may place it anywhere between the <HTML> and </htmL> tags which enclose the whole document. Actually, the two possibilities are the <HEAD></HEAD> portion and the <BODY></BODY> portion. Because the <HEAD></HEAD> portion is evaluated first, it is generally a good practice to place the script there. You will find later another compelling reason to do so.

A single HTML document may contain any number of scripts. You can place some of the scripts in the <HEAD></HEAD> portion, and others in the <BODY></BODY> portion of the page. The following code demonstrates it:

<HTML>
<HEAD>
<TITLE>Multiple scripts</TITLE>
<SCRIPT LANGUAGE="JavaScript">

[JavaScript statements...]
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

[JavaScript statements...]

</SCRIPT>
</HEAD>
<BODY>
<H1>This is a complex structure</H1>
<SCRIPT LANGUAGE="JavaScript">

[JavaScript statements...]

</SCRIPT>
</BODY>
</html>

Conventions

JavaScript syntax is very similar to C, C++, and Java. It includes functions, expressions, statements, operators, and more.

Using the Semicolon

The JavaScript interpreter does not pay any attention to carriage return characters in the source. It is possible to put numerous statements on the same line, but you must separate them with a semicolon (;). You can also add a semicolon at the end of a statement that occupies its own line, but it is not necessary. Take a look at the following statements:

document.write("Hello"); alert("Good bye")

document.write("Hello")
alert("Good bye")

document.write("Hello");
alert("Good bye");

All three sets are legal, and their results are identical.

JavaScript is Case Sensitive

You saw earlier that JavaScript is a case-sensitive language. It applies to all aspects of the language, including variable names (identifiers), functions, and methods (discussed later). The statement document.write(), for example, is legal, but document.Write() is not.

Comments

Comments are an important concept in all languages, especially in JavaScript. They help make programs simple and easy to understand. Comments are messages that can be put into programs at various points, without affecting the results. There are two different types of comments in JavaScript:

  • Single-line comments are comments that do not exceed the length of a line. They must start and end on the same line of the source. These comments begin with a double-slash (//).
  • Multiple-line comments are comments that may exceed the length of one line. Therefore, they require a sign that specifies the beginning of the comment, and another sign that specifies the end of the comment. The opening part is /* and the closing part is */.

Both types of comments are identical to the comments in C and C++. You should use comments to explain every part of your script.

// single-line comment

/* line 1 of the comment
   line 2 of the comment
   line 3 of the comment */

Using Quotes

In JavaScript, you often use quotes to, among other things, delimit strings. A common problem arises when using a pair of quotes inside another pair of quotes. Since the interpreter must recognize each set of quotes in order to pair them correctly, the creators of JavaScript made it possible to use two different types of quotes: double quotes (") and single quotes ('). If you need only one set of quotes, you can choose either of them as long as you terminate the quote with the same type of quote you used to open it. If you do not follow this rule, you will get a JavaScript error: unterminated string literal. You must always alternate quotes properly:

document.write("<IMG SRC='cool.gif'>")

Your First Script

First of all, launch your text editor. Type Example 3-1 in the text editor and save it under a name of your choice. Make sure the name ends with either the .htm or .html extension. Next, launch the browser. Since the file is local, you do not need to be connected to the Internet to view the results. Now, load the file from the browsers menu. Thats all there is to it. You can start enjoying JavaScript.

The following script is interpreted and executed immediately when you load the page containing it.


Example 3-1.  HTML content generated by the document .write() method.

<HTML>
<HEAD>
<TITLE>Hello net.</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide code from old browsers

document.write("<H1>Hello net.</H1>")

// end code hiding -->
</SCRIPT>
</BODY>
</htmL>

Example 3-1 (ex3-1.htm). A simple Hello net. script.

This is a simple HTML document that includes a JavaScript script. Notice that its structure is the same as that of any other HTML document. The only new concept is the <SCRIPT> tag. We put the script in the <BODY></BODY> portion of the page, though you may put it anywhere between the <HTML> and </htmL> tags. For now, think of document.write() as a way to print expressions to the page. write() is actually a method of the document object. Objects, methods, and properties are introduced in Chapter 6, Object-Based Programming. The write() method supports any HTML syntax. Be aware, also, that all strings must be included in quotes.


Example 3-3.  One line of JavaScript-generated output and one of HTML output.

Example 3-1s equivalent consists of two files, the HTML file and the external JavaScript file:

<HTML>
<HEAD>
<TITLE>Hello net.</TITLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript" SRC="sayHello.js">
</SCRIPT>
</BODY>
</htmL>

// this file must be named sayHello.js
document.write("Hello net.")

Example 3-1 demonstrates the basic structure of a JavaScript program.

Printing JavaScript Output

Netscape Navigator 3.0 and up enables you to print the JavaScript script output. Take a peek at the following example:

<HTML>
<HEAD>
<TITLE>Printing JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

document.write("This is JavaScript output.")

// -->
</SCRIPT>
<BR>
This is HTML output.
</BODY>
</htmL>

Example 3-2 (ex3-2.htm). JavaScript and HTML output combined.

In order to understand the printing concept, it is necessary to compare the screen output with the paper output.

If you try printing this page with Navigator 2.0x you will receive a page with a blank line followed by the second lineThis is HTML output. When printing it with Navigator 3.0 and up, or Internet Explorer, the printout is identical to the content of the browser window.

Updating a Page

Whenever you change the content of the page and you wish to see how it affects the final layout, you must reload the page using the Reload button. A JavaScript script is immediately interpreted upon initial loading of the page, and code that does not run immediately is stored in memory. Reloading the page refreshes the memory and generates a new version of the page layout (if you changed it, of course).

Summary

In this chapter you learned how to write scripts and add them to an HTML document. We covered the <SCRIPT> tag and other related topics. It is sometimes difficult to predict what other people see on your page, especially those who are using a browser that does not support JavaScript. Although you havent seen any useful JavaScript script yet, we hope you understand that this is a powerful scripting language that can do much more than generate HTML content with document.write(). Once you get a grip on writing simple scripts, you will find it easy to move on to more complicated and interesting programs.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us