I About the Tutorial

ix 

 

 

Checking for Plug-Ins ................................................................................................................................... 366

 

Controlling Multimedia ............................................................................................................................... 367

 

33.

 

JAVASCRIPT – Debugging ...................................................................................................................... 369

 

Error Messages in IE .................................................................................................................................... 369

 

Error Messages in Firefox or Mozilla ........................................................................................................... 370

 

Error Notifications ....................................................................................................................................... 371

 

How to Debug a Script ................................................................................................................................. 371

 

Useful Tips for Developers .......................................................................................................................... 372

 

34.

 

JAVASCRIPT – Image Map ..................................................................................................................... 374

 

35.

 

JAVASCRIPT – Browsers ........................................................................................................................ 377

 

Navigator Properties ................................................................................................................................... 377

 

Navigator Methods ...................................................................................................................................... 378

 

Browser Detection ....................................................................................................................................... 379

 

 

 

 

 

---

10 

 

 

Part 1: JavaScript Basics 

---

11 

 

 

What is JavaScript?

 

Javascript is a dynamic computer programming language. It is lightweight and most 

commonly  used  as  a  part  of  web  pages,  whose  implementations  allow  client-side 

script  to  interact  with  the  user  and  make  dynamic  pages.  It  is  an  interpreted 

programming language with object-oriented capabilities.  

JavaScript  was  first  known  as  LiveScript,  but  Netscape  changed  its  name  to 

JavaScript, possibly because of the excitement being generated by Java. JavaScript 

made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The 

general-purpose  core  of  the  language  has  been  embedded  in  Netscape,  Internet 

Explorer, and other web browsers. 

The 

ECMA-262  Specification

 defined  a  standard  version  of  the  core  JavaScript 

language. 



 

JavaScript is a lightweight, interpreted programming language. 



 

Designed for creating network-centric applications. 



 

Complementary to and integrated with Java. 



 

Complementary to and integrated with HTML. 



 

Open and cross-platform. 

Client-Side JavaScript

 

Client-side JavaScript is the most common form of the language. The script should 

be included in or referenced by an HTML document for the code to be interpreted by 

the browser. 

It means that a web page need not be a static HTML, but can include programs that 

interact with the user, control the browser, and dynamically create HTML content. 

The JavaScript client-side mechanism provides many advantages over traditional CGI 

server-side scripts. For example, you might use JavaScript to check if the user has 

entered a valid e-mail address in a form field. 

1.

 

JAVASCRIPT – OVERVIEW  

---

12 

 

 

The JavaScript code is executed when the user submits the form, and only if all the 

entries are valid, they would be submitted to the Web Server. 

JavaScript  can  be  used  to  trap  user-initiated  events  such  as  button  clicks,  link 

navigation, and other actions that the user initiates explicitly or implicitly.  

Advantages of JavaScript

 

The merits of using JavaScript are: 



 

Less server interaction: You can validate user input before sending the page 

off  to  the  server.  This  saves  server  traffic,  which  means  less  load  on  your 

server. 



 

Immediate  feedback  to  the  visitors: They  don't  have  to  wait  for  a  page 

reload to see if they have forgotten to enter something. 



 

Increased interactivity: You can create interfaces that react when the user 

hovers over them with a mouse or activates them via the keyboard. 



 

Richer interfaces: You can use JavaScript to include such items as drag-and-

drop components and sliders to give a Rich Interface to your site visitors. 

Limitations of JavaScript

 

We  cannot  treat  JavaScript  as  a  full-fledged  programming  language.  It  lacks  the 

following important features: 



 

Client-side JavaScript does not allow the reading or writing of files. This has 

been kept for security reason. 



 

JavaScript cannot be used for networking applications because there is no such 

support available. 



 

JavaScript doesn't have any multithreading or multiprocessor capabilities. 

Once  again,  JavaScript  is  a  lightweight,  interpreted  programming  language  that 

allows you to build interactivity into otherwise static HTML pages. 

JavaScript Development Tools

 

One  of  major  strengths  of  JavaScript  is  that  it  does  not  require  expensive 

development tools. You can start with a simple text editor such as Notepad. Since it 

---

13 

 

 

is an interpreted language inside the context of a web browser, you don't even need 

to buy a compiler. 

To make our life simpler, various vendors have come up with very nice JavaScript 

editing tools. Some of them are listed here: 



 

Microsoft FrontPage: Microsoft has developed a popular HTML editor called 

FrontPage.  FrontPage  also  provides  web  developers  with  a  number  of 

JavaScript tools to assist in the creation of interactive websites. 



 

Macromedia  Dreamweaver  MX: Macromedia  Dreamweaver  MX  is  a  very 

popular  HTML  and  JavaScript  editor  in  the  professional  web  development 

crowd. It provides several handy prebuilt JavaScript components, integrates 

well with databases, and conforms to new standards such as XHTML and XML. 



 

Macromedia HomeSite 5: HomeSite 5 is a well-liked HTML and JavaScript 

editor  from  Macromedia  that  can  be  used  to  manage  personal  websites 

effectively.  

Where is JavaScript Today?

 

The ECMAScript Edition 5 standard will be the first update to be released in over four 

years.  JavaScript  2.0  conforms  to  Edition  5  of  the  ECMAScript  standard,  and  the 

difference between the two is extremely minor. 

The  specification  for  JavaScript  2.0  can  be  found  on  the  following  site: 

http://www.ecmascript.org/

 

Today,  Netscape's  JavaScript  and  Microsoft's  JScript  conform  to  the  ECMAScript 

standard, although both the languages still support the features that are not a part 

of the standard. 

 

 

 

 

 

 

 

---

14 

 

 

JavaScript can be implemented using JavaScript statements that are placed within 

the  HTML tags in a web page. 

You can place the  

The script tag takes two important attributes: 



 

Language: This  attribute  specifies  what  scripting  language  you  are  using. 

Typically, its value will be javascript. Although recent versions of HTML (and 

XHTML, its successor) have phased out the use of this attribute. 



 

Type: This  attribute  is  what  is  now  recommended  to  indicate  the  scripting 

language in use and its value should be set to "text/javascript". 

So your JavaScript syntax will look as follows. 

 

  JavaScript code 

 

Your First JavaScript Code

 

Let us take a sample example to print out "Hello World". We added an optional HTML 

comment that surrounds our JavaScript code. This is to save our code from a browser 

that  does  not  support  JavaScript.  The  comment  ends  with  a  "//-->".  Here  "//" 

signifies a comment in JavaScript, so we add that to prevent a browser from reading 

2.

 

JAVASCRIPT – SYNTAX 

---

15 

 

 

the  end  of  the  HTML  comment  as  a  piece  of  JavaScript  code.  Next,  we  call  a 

function document.write which writes a string into our HTML document.  

 

This function can be used to write text, HTML, or both. Take a look at the following 

code. 

 

 

 

   document.write ("Hello World!") 

//--> 

 

 

 

 

---

20 

 

 

   document.write ("Hello World!") 

//--> 

 

 

  Sorry...JavaScript is needed to go ahead. 

 

... ...  

Click here for the result 

 

4.

 

JAVASCRIPT – PLACEMENT 

---

22 

 

 

...  portion of the document. In this case, 

you would not have any function defined using JavaScript. Take a look at the following 

code. 

 

 

 

 

 

document.write("Hello World") 

//--> 

 

This is web page body 

 

 and  Sections

 

You  can  put  your  JavaScript  code  in    and    section  altogether  as 

follows. 

 

 

 

function sayHello() { 

   alert("Hello World") 

} 

//--> 

 

 

 

 

document.write("Hello World") 

//--> 

 

 

 

....... 

 

 

 

var a = 33; 

---

31 

 

 

var b = 10; 

var c = "Test"; 

var linebreak = ""; 

 

document.write("a + b = "); 

result = a + b; 

document.write(result); 

document.write(linebreak); 

 

document.write("a - b = "); 

result = a - b; 

document.write(result); 

document.write(linebreak); 

 

document.write("a / b = "); 

result = a / b; 

document.write(result); 

document.write(linebreak); 

 

document.write("a % b = "); 

result = a % b; 

document.write(result); 

document.write(linebreak); 

 

document.write("a + b + c = "); 

result = a + b + c; 

document.write(result); 

document.write(linebreak); 

 

---

32 

 

 

a = a++; 

document.write("a++ = "); 

result = a++; 

document.write(result); 

document.write(linebreak); 

 

b = b--; 

document.write("b-- = "); 

result = b--; 

document.write(result); 

document.write(linebreak); 

 

 

//--> 

 

 

Set the variables to different values and then try...
 

 

 

 

var a = 10; 

var b = 20; 

var linebreak = ""; 

 

document.write("(a == b) => "); 

result = (a == b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a < b) => "); 

result = (a < b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a > b) => "); 

result = (a > b); 

document.write(result); 

document.write(linebreak); 

---

35 

 

 

 

document.write("(a != b) => "); 

result = (a != b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a >= b) => "); 

result = (a >= b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a <= b) => "); 

result = (a <= b); 

document.write(result); 

document.write(linebreak); 

 

//--> 

 

 

Set the variables to different values and different operators and then 

try...
 

 

 

 

var a = true; 

var b = false; 

var linebreak = ""; 

 

document.write("(a &&  b) => "); 

result = (a && b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a || b) => "); 

result = (a || b); 

document.write(result); 

document.write(linebreak); 

 

document.write("!(a && b) => "); 

result = (!(a && b)); 

document.write(result); 

document.write(linebreak); 

 

//--> 

 

 

---

38 

 

 

 

 

Set the variables to different values and different operators and then 

try...
 

 

 

 

---

40 

 

 

var a = 2;  // Bit presentation 10 

var b = 3;  // Bit presentation 11 

var linebreak = ""; 

 

document.write("(a &  b) => "); 

result = (a & b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a | b) => "); 

result = (a | b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a ^ b) => "); 

result = (a ^ b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(~b) => "); 

result = (~b); 

document.write(result); 

document.write(linebreak); 

 

document.write("(a << b) => "); 

result = (a << b); 

document.write(result); 

document.write(linebreak); 

---

41 

 

 

 

document.write("(a >> b) => "); 

result = (a >> b); 

document.write(result); 

document.write(linebreak); 

 

//--> 

 

 

Set the variables to different values and different operators and then 

try...
 

 

 

 

var a = 33; 

var b = 10; 

var linebreak = ""; 

 

document.write("Value of a => (a = b) => "); 

result = (a = b); 

document.write(result); 

document.write(linebreak); 

 

document.write("Value of a => (a += b) => "); 

result = (a += b); 

document.write(result); 

document.write(linebreak); 

 

document.write("Value of a => (a -= b) => "); 

result = (a -= b); 

document.write(result); 

document.write(linebreak); 

 

document.write("Value of a => (a *=  b) => "); 

result = (a *= b); 

document.write(result); 

document.write(linebreak); 

 

---

44 

 

 

document.write("Value of a => (a /= b) => "); 

result = (a /= b); 

document.write(result); 

document.write(linebreak); 

 

document.write("Value of a => (a %= b) => "); 

result = (a %= b); 

document.write(result); 

document.write(linebreak); 

 

//--> 

 

 

Set the variables to different values and different operators and then 

try...
 

 

 

 

var a = 10; 

var b = 20; 

var linebreak = ""; 

 

document.write ("((a > b) ? 100 : 200) => "); 

result = (a > b) ? 100 : 200; 

document.write(result); 

document.write(linebreak); 

 

document.write ("((a < b) ? 100 : 200) => "); 

---

46 

 

 

result = (a < b) ? 100 : 200; 

document.write(result); 

document.write(linebreak); 

 

//--> 

 

 

Set the variables to different values and different operators and then 

try...
 

 

 

 

var a = 10; 

var b = "String"; 

var linebreak = ""; 

 

result = (typeof b == "string" ? "B is String" : "B is Numeric"); 

document.write("Result => "); 

document.write(result); 

document.write(linebreak); 

 

result = (typeof a == "string" ? "A is String" : "A is Numeric"); 

document.write("Result => "); 

document.write(result); 

document.write(linebreak); 

 

---

48 

 

 

//--> 

 

 

Set the variables to different values and different operators and then 

try...