2.2 Syntactical Details

Rules, rules, rules. Just like English, French, or Chinese, all programming languages have their rules. Many of the rules are similar and many have individual quirks . But in order to do anything at all, you have to obey the rules, or your program simply won't work. If you have experience programming in other languages, you will find the JavaScript rules and syntax quite familiar, especially if you know Perl or languages derived from C. When you write JavaScript programs, you have to deal with HTML rules as well as JavaScript rules, since JavaScript does not stand alone.

2.2.1 Case Sensitivity

The HTML tags in a document are not case sensitive. If you type the title tag as <title>, <Title>, <TItle>, or any combination of upper or lowercase characters , the HTML renderer will not care. But JavaScript names , such as variables , keywords, objects, functions, and so on, are case sensitive. If, for example, you spell the Boolean value true with any uppercase letters (e.g., TrUE), JavaScript will not recognize it and will produce an error or simply ignore the JavaScript code. Although most names favor lowercase, some JavaScript names use a combination of upper and lowercase (e.g., onClick, Math.floor, Date.getFullYear ).

2.2.2 Free Form and Reserved Words

JavaScript ignores whitespace (i.e., spaces, tabs, and newlines) if the whitespace appears between words. For example: A function name , such as onMouseOver(), toLowerCase() , or onClick(), cannot contain whitespace even though it consists of more than one word.

 1. var name="Tom";  1 and 2 are equivalent statements  2. var     name   =            "Tom"; 3. onMouseOver()  3 and 4 are  not  the same  4. on  Mouse Over() 

Whitespace is preserved when it is embedded within a string or regular expression. For example, the whitespace in the string, "Hello there" will be preserved because it is enclosed within double quotes. Of course, you can't break up a word such as switch, if, else, window, document , and so on, because it would no longer be the same word. Because extra whitespace is ignored by the JavaScript interpreter, you are free to indent, break lines, and organize your program so that it is easier to read and debug.

There are a number of reserved words (also called keywords) in JavaScript. Being reserved means that keywords are special vocabulary for the JavaScript language and cannot be used by programmers as identifiers for variables, functions and labels, and the like. Words such as if, for, while, return, null , and typeof are examples of reserved words. Table 2.1 gives a list of reserved words.

Table 2.1. Reserved keywords.

abstract	boolean	break	byte	case	catch
char	class	const	continue	default	delete
do	double	else	extends	false	final
finally	float	for	function	goto	if
implements	import	in	instanceof	int	interface
long	native	new	null	package	private
protected	public	return	short	static	super
switch	synchronized	this	throw	throws	transient
true	try	typeof	var	void	volatile
while	with

2.2.3 Statements and Semicolons

Just like sentences (which represent complete thoughts) in the English language, JavaScript statements are made up of expressions. The statements are executed top down, one statement at a time. If there are multiple statements on a line, the statements must be separated by semicolons. Although not a rule, it is good practice to terminate all statements with a semicolon to make it clear where the statement ends. Because JavaScript is free form, as long as statements are terminated with a semicolon, the lines can be broken, contain whitespace, etc. A statement results in some action unless the statement is a null statement, in which case, it does nothing.

The following two lines are both technically correct:

 var name = "Ellie"  <-- a  var name = "Ellie"  ;   <-- b  

(a) no semicolon, valid

(b) better

The following line is incorrect:

 var name = "Ellie"  document.write("Hi "+name);  <-- a  

(a) wrong, two statements

It should be:

 var name = "Ellie"  ;  document.write("Hi " + name);  <-- a  

(a) semicolon needed to separate two statements on the same line

If the statements are grouped in a block of curly braces, they act as a single statement.

 if ( x > y) {  statement;  statement; }  <-- a  

(a) Statements enclosed in curly braces act as a single statement

2.2.4 Comments

A comment is text that describes what the program or a particular part of the program is trying to do and is ignored by the JavaScript interpreter. Comments are used to help you and other programmers understand, maintain, and debug scripts. JavaScript uses two types of comments: single-line comments and block comments.

Single line comments start with a double slash:

  // This is a comment  

For a block of comments, use the /* */ symbols:

 /*  This is a block of comments   that continues for a number of lines  */ 

2.2.5 The <script> Tag

JavaScript programs must start and end with the HTML <script> and </script> tags, respectively. Everything within these tags is considered JavaScript code, nothing else. The script tag can be placed anywhere within an HTML document. If you want the JavaScript code to be executed before the page is displayed, it is placed between the <head> and </head> tags. This, for example, is where function definitions are placed (see Chapter 7, "Functions"). If the script performs some action pertaining to the body of the document, then it is placed within the <body> and </body> tags. A document can have multiple <script> tags, each enclosing any number of JavaScript statements.

FORMAT

 <script>           JavaScript statements... </script> 

Example 2.1

 <script>          document.write("Hello, world!<br>"); </script> 

Attributes

The <script> tag also has attributes to modify the behavior of the tag. The attributes are

• language

• type

• src

Any JavaScript-enabled browser can identify that the scripting language is JavaScript, if the language attribute is set to JavaScript ^[2] rather than, for example, VBScript or JScript . You normally set the language attribute as follows :

^[2] Although common to most scripts, the language attribute has been deprecated as of HTML 4.0 in favor of the type attribute.

 <script language="JavaScript"> 

Each time a new version of JavaScript is released, it contains new or modified features. Some browsers haven't caught up or do not support a newer version. Netscape Navigator 6.x, Internet Explorer 6, and Opera 5 all support JavaScript 1.5, but HotJava 3.0 doesn't. So to ensure that users of the various browser versions avoid problems when viewing pages that use JavaScript, the language attribute can be assigned a version number to specify what version of JavaScript is supported. If the browser doesn't recognize the version, the script will be totally ignored. You shouldn't have to worry about this if you are using the latest version of a particular browser, but just in case, here's how you specify a version number.

 <  script language="JavaScript1.5"  > </script> 

The type attribute is used to specify both the scripting language and the Internet content type.

 <script language="JavaScript"  type="text/javascript">  </script> 

The src attribute is used when the JavaScript code is in an external file, the filename ending with a .js extension. The src attribute is assigned the name of the file, which can be prefixed with its location (e.g., a directory tree or URL).

 <script language="JavaScript"    type="text/javascript"  src="sample.js">  </script> <script language="JavaScript"    type="text/javascript"  src="directory/sample.js">  </script> <script language="JavaScript"    type="text/javascript"  src="http://hostname/sample.js">  </script>