Some JavaScript Tips

Introduction
This is part 14 of my series, JavaScript Basics. In this part of the series, I give you some complementary aspects to what we have studied in JavaScript.

Note: If you think any text or image is missing, just contact me at forchatrans@yahoo.com .

White Space
When an ordinary man looks at a web page, he can call the spaces that do not have text or pictures, white space. These spaces are actually blank spaces; they do not have to be white in color. Some of these spaces have characters and a programmer has to be conscious of which character creates a particular type of white space. The meaning of these characters and their particular type of white spaces are listed and explained below.

Type of Characters
The ordinary man considers, A, as a character, B, as another character, C, as another character, 5 as a character, 7 as character, and so on. On the computer keyboard, you see non-commonly used characters such as the asterisk, *. In JavaScript, a white space character consists of two items. It begins with a back slash followed by text. These two items effectively form the white space character. For example, \n, is a white space character; the meaning will be given below. These two-item characters are better called Escape Sequences. They are also called Special Characters.

The Space
While typing in a text editor, when the computer user presses the spacebar of the keyboard, a space is created on the screen. In JavaScript, the escape sequence for this space is, \u0020. The two items involved are the back slash and u0020. Try the following code:

document.write('text\u0020text');

The Horizontal Tab
While somebody is writing with a pen on a peace of paper, if he wants to start a new paragraph he does not start at the left margin; he shifts a bit to the right (indents). That indentation can be considered as a horizontal tab. There is an escape sequence that can be used to achieve this with JavaScript. It is, \t. It begins with a back slash, followed by 't' in lower case. This special character is called the horizontal tab (i.e. \t).

Try the following code (it may not work with your browser):

document.write('\tsome text');

The Vertical Tab
As the horizontal tab exists, a Vertical Tab in the vertical direction also exists. For many languages, the escape sequence for the vertical tab is '\v'. You have a back slash followed by 'v' in lower case. Try the following code (it may not work with your browser):

document.write('\vsome text');

Form Feed
A form feed is more of an instruction than a blank space character. It is called a white space character because it can cause a blank space. Imagine that there are about ten lines of text for a document. Also imagine that in the middle of this text, you have the escape sequence, \f, which is what many languages use as the form feed character. Now while the page that has this text is being printed (displayed), when the printer (or screen) reaches this escape sequence, it should not print the rest of the text below on the current page; it should advance the page, leaving a blank space and then starts printing the rest of the text on the next page (paper). Form Feed means: print the rest of the text on the next page, just after feeding in the next page (paper to the printer). If the printer meets this character at the end of the current page, then no blank space would be produced, as the rest of the text would be printed (or displayed) on the next page fed.

Line Terminators
Two escape sequences are described below as white space characters, but they do not really produce blank spaces. However, they affect where the next line of text would be printed or displayed.

The space, horizontal tab and vertical tab white space characters are by themselves blank spaces. The form feed character can produce a blank space depending on its position in the current page; in itself, it is more of an instruction than a blank space character. The two escape sequences below, are not blank characters by themselves. They are actually line terminators, but in many forums they are called, white space characters.

Carriage Return
Imagine that a line of text is to be displayed (printed) and there is the escape sequence, \r in the middle of the line of text. \r is known as the Carriage Return character for many languages. When the printer or screen reaches this point, it sends the ink (or light) to the beginning of the current line. After this, if printing were to continue, the current line will be written over, by the right half of the line of text. The carriage return escaped sequence is normally used in conjunction with the Newline escape sequence (see below).

The Newline
Imagine that a line of text is to be displayed and there is the escape sequence, \n in the middle of the line of text. \n is known as the Newline character for many languages. When the printer or screen reaches this point, it sends the ink (or light) to the next (to-be-displayed) line. It is not clear whether the ink should go to the beginning or middle or end of the next line. If the programmer wants printing to continue at the beginning of the next line, then he has to use both \r and \n together (i.e. \r\n) at the same point in the line of text. With JavaScript (compilers or interpreters), \n alone serves the purpose of the presence of both \r and \n. Try the following code:

alert('the first line\nthe second line');

Escaping Quotation Marks
Escape sequences are not only used for white space characters. All the texts displayed above have been displayed as strings. A string literal is delimited by quotes (single or double). If you want the displayed string to display a quotation mark, you have to escape the quotation mark with a back slash. Try the following code:

document.write('Quotation marks are \" and \' .');

Escaping other Characters
The backslash is used in escaping sequences. However, if you want to display a backslash, you just escape (precede it with another backslash) it as well. Try the following code:

document.write('The backslash \\ is displayed.');

Reserved characters like { and ( are displayed by escaping them with a backslash. Consult a reference document for a list of such characters.

Concatenating Strings
You join strings using the + sign. This sign is an arithmetic operator, but when used with strings, it joins them. Try the following code:

var joinStr = "This is string one." + " This is string two.";
alert(joinStr);

In the code, note the space given before the second string actually starts. If this is not done, there will be no space between the full stop of the first string and the capital letter of the second string.

You can still concatenate strings, if they are in variables, with the + sign. Try this:

var str1 = "This is string one." ;
var str2 = " This is string two.";
var joinStr = str1 + str2;
alert(joinStr);

You can concatenate strings in the argument of the write and alert functions. Try this:

document.write("This is string one." + " This is string two.");
alert("This is string one." + " This is string two.");

Opening HTML file with Text Editor
Assume that you have written your combined HTML and JavaScript Code and save it as an HTML file. With the HTML file extension the code is to be displayed by the browser. You might want to modify the code in a text editor. Each operating system has a way of doing this. In the Windows operating system, you open the directory having the file; you right-click on the file name (icon); a pop up window appears; you point to Open With, and then click Notepad in the small pane that appears. Notepad is windows text editor.

NaN and undefined
As you work with JavaScript you may have the return value, NaN or undefined. NaN means the value is not a number. undefined means the value is not defined.

Variable Scope
If a variable is declared outside a function, it is called a global variable and can be used outside and inside functions. If it is declared inside a function, then it can be used only inside the function; it cannot be used outside it; such a variable is called a local variable.

Errors
When a web page is loaded, the JavaScript code is quickly compiled (made executable) first. When an event occurs then the script is interpreted (executed). If you typed your code with some syntax error, the code will freeze (halt and not continue) during the compilation phase or during the interpreted phase.

Where to put your Script
You can put your script in the HTML Head element or in the HTML BODY element. This is illustrated below:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//some script here

//some script here

Script in the BODY element is executed as the page loads, while script in the HEAD element is only executed when an event occurs.

External Script
You can type a JavaScript content in a separate file from the HTML file, and save it with the file extension, ".js". The SCRIPT element has a source attribute. If the content of the script is in a separate file, then you will use the source attribute to download the script content in to the HTML file. The first sample code below is an HTML code. It has a script element without content, but with a source attribute. The value of the source attribute is the URL of the JavaScript content.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The next code is the content of the script. It is saved in a file called, myScript.js in the same directory as the HTML file.

alert('It works.');
alert('Indeed');

As you can see, this second code is the content of the script of the first code, so it does not have the start and end tags. You can try the above two code samples.

The start and end tags for external JavaScript can be placed in the HEAD or BODY element. Above, it is placed in the BODY element.

We have covered a lot in this part. Let us stop here and continue in the next part.

Chrys