JavaScript

1.0 Introduction

1.1 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 developed by Netscape in 1995, has the following features:

 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

1.2 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.

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.

1.3 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.

1
  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.

1.4 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.

1.2 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 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.

2.0 JavaScript syntax

2
JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is
normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.

<script ...>
JavaScript code
</script>

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 segment will look like −

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

JavaScript code
</script>

2.1 Your First JavaScript Script

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 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.

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

3
This code will produce the following result −

Hello World!

2.2 Whitespace and Line Breaks

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces,
tabs, and newlines freely in your program and you are free to format and indent your programs in a neat
and consistent way that makes the code easy to read and understand.

2.3 Semicolons are Optional

Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C+
+, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed
on a separate line. For example, the following code could be written without semicolons.

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

<!--
var1 = 10
var2 = 20
//-->
</script>

But when formatted in a single line as follows, you must use semicolons −

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

<!--
var1 = 10; var2 = 20;
//-->
</script>

Note − It is a good programming practice to use semicolons.

2.4 Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords, variables, function
names, and any other identifiers must always be typed with a consistent capitalization of letters.

So the identifiers Time and TIME will convey different meanings in JavaScript.

NOTE − Care should be taken while writing variable and function names in JavaScript.

2.5 Comments in JavaScript

JavaScript supports both C-style and C++-style comments, Thus −

 Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.

4
  Any text between the characters /* and */ is treated as a comment. This may span multiple
lines.

 JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a
single-line comment, just as it does the // comment.

 The HTML comment closing sequence --> is not recognized by JavaScript so it should be written
as //-->.

Example

The following example shows how to use comments in JavaScript.

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

<!--

// This is a comment. It is similar to comments in C++

/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/

//-->
</script>

3.0 Enabling JavaScript in browsers

All the modern browsers come with built-in support for JavaScript. Frequently, you may need to enable
or disable this support manually. This chapter explains the procedure of enabling and disabling
JavaScript support in your browsers: Internet Explorer, Firefox, chrome, and Opera.

3.1. JavaScript in Internet Explorer

Here are simple steps to turn on or turn off JavaScript in your Internet Explorer −

 Follow Tools → Internet Options from the menu.

 Select Security tab from the dialog box.

 Click the Custom Level button.

 Scroll down till you find Scripting option.

 Select Enable radio button under Active scripting.

 Finally click OK and come out

5
To disable JavaScript support in your Internet Explorer, you need to select Disable radio button under
Active scripting.

3.2 JavaScript in Firefox

Here are the steps to turn on or turn off JavaScript in Firefox −

 Open a new tab → type about: config in the address bar.

 Then you will find the warning dialog. Select I’ll be careful, I promise!

 Then you will find the list of configure options in the browser.

 In the search bar, type javascript.enabled.

 There you will find the option to enable or disable javascript by right-clicking on the value of that
option → select toggle.

If javascript.enabled is true; it converts to false upon clicking toogle. If javascript is disabled; it gets
enabled upon clicking toggle.

3.3 JavaScript in Chrome

Here are the steps to turn on or turn off JavaScript in Chrome −

 Click the Chrome menu at the top right hand corner of your browser.

 Select Settings.

 Click Show advanced settings at the end of the page.

 Under the Privacy section, click the Content settings button.

 In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow all sites to
run JavaScript (recommended)".

3.4 JavaScript in Opera

Here are the steps to turn on or turn off JavaScript in Opera −

 Follow Tools → Preferences from the menu.

 Select Advanced option from the dialog box.

 Select Content from the listed items.

6
  Select Enable JavaScript checkbox.

 Finally click OK and come out.

To disable JavaScript support in your Opera, you should not select the Enable JavaScript checkbox.

3.5 Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a warning message to the
user using <noscript> tags.

You can add a noscript block immediately after the script block as follows −

<html>
<body>

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

<!--
document.write("Hello World!")
//-->
</script>

<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>

</body>
</html>

Now, if the user's browser does not support JavaScript or JavaScript is not enabled, then the message
from </noscript> will be displayed on the screen.

4.0 JavaScript - Placement in HTML File

There is a flexibility given to include JavaScript code anywhere in an HTML document. However the most
preferred ways to include JavaScript in an HTML file are as follows −

 Script in <head>...</head> section.

 Script in <body>...</body> section.

 Script in <body>...</body> and <head>...</head> sections.

 Script in an external file and then include in <head>...</head> section.

In the following section, we will see how we can place JavaScript in an HTML file in different ways.

7
4.1 JavaScript in <head>...</head> section

If you want to have a script run on some event, such as when a user clicks somewhere, then you will
place that script in the head as follows −

<html>

<head>

<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>

</head>

<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>

</html>

This code will produce the following results −

4.2 JavaScript in <body>...</body> section

If you need a script to run as the page loads so that the script generates content in the page, then the
script goes in the <body> portion of the document. In this case, you would not have any function
defined using JavaScript. Take a look at the following code.

<html>

<head>
</head>

<body>

<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>

<p>This is web page body </p>

</body>

8
</html>

This code will produce the following results −

3.3 JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body> section altogether as follows −

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>
</html>

This code will produce the following result −

3.4 JavaScript in External File

As you begin to work more extensively with JavaScript, you will be likely to find that there are cases
where you are reusing identical JavaScript code on multiple pages of a site.

You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a
mechanism to allow you to store JavaScript in an external file and then include it into your HTML files.

Here is an example to show how you can include an external JavaScript file in your HTML code using
script tag and its src attribute.

<html>

<head>
<script type="text/javascript" src="filename.js" ></script>

9
 </head>

<body>
.......
</body>
</html>

To use JavaScript from an external file source, you need to write all your JavaScript source code in a
simple text file with the extension ".js" and then include that file as shown above.

For example, you can keep the following content in filename.js file and then you can use sayHello
function in your HTML file after including the filename.js file.

function sayHello() {
alert("Hello World")
}

3.5 JavaScript Variables

Like many other programming languages, JavaScript has variables. Variables can be thought of as named
containers. You can place data into these containers and then refer to the data simply by naming them

In this example, x, y, and z, are variables:

Example
var x = 5;
var y = 6;
var z = x + y;

From the example above, you can expect:

 x stores the value 5

 y stores the value 6
 z stores the value 11

3.5 Much Like Algebra

In this example, price1, price2, and total, are variables:

Example
var price1 = 5;
var price2 = 6;
var total = price1 + price2;

10
In programming, just like in algebra, we use variables (like price1) to hold values. In programming, just
like in algebra, we use variables in expressions (total = price1 + price2). From the example above, you
can calculate the total to be 11. JavaScript variables are containers for storing data values.

3.6 JavaScript Identifiers

All JavaScript variables must be identified with unique names. These unique names are called
identifiers. Identifiers can be short names (like x and y) or more descriptive names (age, sum,
totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

 Names can contain letters, digits, underscores, and dollar signs.

 Names must begin with a letter
 Names can also begin with $ and _ (but we will not use it in this tutorial)
 Names are case sensitive (y and Y are different variables)
 Reserved words (like JavaScript keywords) cannot be used as names

3.7 The Assignment Operator

In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.This is different
from algebra. The following does not make sense in algebra:

x=x+5

In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to x. (It calculates the value of
x + 5 and puts the result into x. The value of x is incremented by 5.) The "equal to" operator is written
like == in JavaScript.

3.8 Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable. You declare a JavaScript variable with the
var keyword:

var carName;

After the declaration, the variable has no value. (Technically it has the value of undefined) To assign a
value to the variable, use the equal sign:

carName = "Volvo";

You can also assign a value to the variable when you declare it:

var carName = "Volvo";

In the example below, we create a variable called carName and assign the value "Volvo" to it. Then we
"output" the value inside an HTML paragraph with id="demo":

11
Example
<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

It's a good programming practice to declare all variables at the beginning of a script.

3.8 One Statement, Many Variables

You can declare many variables in one statement. Start the statement with var and separate the
variables by comma:

var person = "John Doe", carName = "Volvo", price = 200;

A declaration can span multiple lines:

var person = "John Doe",

carName = "Volvo",
price = 200;

Value = undefined

In computer programs, variables are often declared without a value. The value can be something that
has to be calculated, or something that will be provided later, like user input.

A variable declared without a value will have the value undefined.

The variable carName will have the value undefined after the execution of this statement:

Example
var carName;

Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value. The variable carName will still have the
value "Volvo" after the execution of these statements:

Example
var carName = "Volvo";
var carName;

JavaScript Arithmetic

12
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:

Example
var x = 5 + 2 + 3;

You can also add strings, but strings will be concatenated:

Example
var x = "John" + " " + "Doe";

Also try this:

Example
var x = "5" + 2 + 3;

If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated. Now
try this:

Example
var x = 2 + 3 + "5";

3.9 JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables have
only two scopes.

 Global Variables − A global variable has global scope which means it can be defined anywhere in
your JavaScript code.
 Local Variables − A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same
name. If you declare a local variable or function parameter with the same name as a global variable, you
effectively hide the global variable. Take a look into the following example.

<html>
<body onload = checkscope();>
<script type = "text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>

13
 </body>
</html>

This produces the following result −local

3.10 JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.

 You should not use any of the JavaScript reserved keywords as a variable name. These keywords
are mentioned in the next section. For example, break or boolean variable names are not valid.
 JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or
an underscore character. For example, 123test is an invalid variable name but _123test is a valid
one.
 JavaScript variable names are case-sensitive. For example, Name and name are two different
variables.

3.11 JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, objects and more:

var length = 16;                               // Number

var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

The Concept of Data Types

In programming, data types is an important concept. To be able to operate on variables, it is important

to know something about the type. Without data types, a computer cannot safely solve this:

var x = 16 + "Volvo";

Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:

var x = "16" + "Volvo";

When adding a number and a string, JavaScript will treat the number as a string.

Example
var x = 16 + "Volvo";

Example
var x = "Volvo" + 16;

JavaScript evaluates expressions from left to right. Different sequences can produce different results:

14
JavaScript:
var x = 16 + 4 + "Volvo";

Result:
20Volvo

JavaScript:
var x = "Volvo" + 16 + 4;

Result:
Volvo164

In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo".In the second
example, since the first operand is a string, all operands are treated as strings.

JavaScript Types are Dynamic.

JavaScript has dynamic types. This means that the same variable can be used to hold different data
types: Example:

var x;               // Now x is undefined

var x = 5;           // Now x is a Number
var x = "John";      // Now x is a String

JavaScript Strings

A string (or a text string) is a series of characters like "John Doe". Strings are written with quotes. You
can use single or double quotes:

Example
var carName = "Volvo XC60";   // Using double quotes
var carName = 'Volvo XC60';   // Using single quotes

You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example
var answer = "It's alright";             // Single quote inside double quotes
var answer = "He is called 'Johnny'";    // Single quotes inside double quotes
var answer = 'He is called "Johnny"';    // Double quotes inside single quotes

JavaScript Numbers

JavaScript has only one type of numbers. Numbers can be written with, or without decimals:

15
Example
var x1 = 34.00;     // Written with decimals
var x2 = 34;        // Written without decimals

Extra large or extra small numbers can be written with scientific (exponential) notation:

Example
var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

JavaScript Booleans

Booleans can only have two values: true or false. Example

var x = true;
var y = false;

Booleans are often used in conditional testing. You will learn more about conditional testing later in this
tutorial.

JavaScript Arrays

JavaScript arrays are written with square brackets. Array items are separated by commas.The following
code declares (creates) an array called cars, containing three items (car names):

Example
var cars = ["Saab", "Volvo", "BMW"];

Array indexes are zero-based, which means the first item is [0], second is [1], and so on. You will learn
more about arrays later in this tutorial.

JavaScript Objects

JavaScript objects are written with curly braces.Object properties are written as name: value pairs,
separated by commas.

Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

The typeof Operator

You can use the JavaScript typeof operator to find the type of a JavaScript variable. The typeof operator
returns the type of a variable or an expression:

16
Example
typeof ""                  // Returns "string"
typeof "John"              // Returns "string"
typeof "John Doe"          // Returns "string"

Example
typeof 0                   // Returns "number"
typeof 314                 // Returns "number"
typeof 3.14                // Returns "number"
typeof (3)                 // Returns "number"
typeof (3 + 4)             // Returns "number"

Primitive Data

A primitive data value is a single simple data value with no additional properties and methods. The
typeof operator can return one of these primitive types:

 string
 number
 boolean
 null
 undefined

Example
typeof "John"              // Returns "string"
typeof 3.14                // Returns "number"
typeof true                // Returns "boolean"
typeof false               // Returns "boolean"

Complex Data

The typeof operator can return one of two complex types:

 function
 object

Example
typeof [1,2,3,4]             // Returns "object" (not "array", see note below)
typeof {name:'John', age:34} // Returns "object"
typeof function myFunc(){}   // Returns "function"

The typeof operator returns "object" for arrays because in JavaScript arrays are objects.

Undefined

17
In JavaScript, a variable without a value, has the value undefined. The typeof is also undefined.

Example
var person;                // Value is undefined, type is undefined

Any variable can be emptied, by setting the value to undefined. The type will also be undefined.

Example
person = undefined;        // Value is undefined, type is undefined

Empty Values

An empty value has nothing to do with undefined. An empty string variable has both a value and a type.
Example:

var car = "";              // The value is "", the typeof is "string"

Null

In JavaScript null is "nothing". It is supposed to be something that doesn't exist. Unfortunately, in

JavaScript, the data type of null is an object. You can consider it a bug in JavaScript that typeof null is an
object. It should be null.

You can empty an object by setting it to null:

Example
var person = null;         // Value is null, but type is still an object

You can also empty an object by setting it to undefined:

Example
var person = undefined;   // Value is undefined, type is undefined

Difference Between Undefined and Null

typeof undefined           // undefined

typeof null                // object
null === undefined         // false
null == undefined          // true

JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the following table. They cannot be used as
JavaScript variables, functions, methods, loop labels, or any object names.

18
examples: abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default,
delete, do etc.

JavaScript - Operators

What is an operator?

Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the
operator. JavaScript supports the following types of operators.

 Arithmetic Operators

 Comparision Operators

 Logical (or Relational) Operators

 Assignment Operators

 Conditional (or ternary) Operators

Lets have a look on all operators one by one.

Arithmetic Operators

JavaScript supports the following arithmetic operators : −

Addition (+), Subtraction(-), Multiplication(*), Division(/) and Modulo(%)

Note − Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give "a10".

Comparison Operators

JavaScript supports the following comparison operators −

= = (Equal), != (Not Equal), > (Greater than), < (Less than), >= (Greater than or Equal to)

and <=(Less than or equal)

Checks if the value of the left operand is greater than or equal to the value of the right operand, if yes,
then the condition becomes true. Assume variable A holds 10 and variable B holds 20, then −

Logical Operators

JavaScript supports the following logical operators :-

Sr.No Operator and Description

19
 && (Logical AND)

1 If both the operands are non-zero, then the condition becomes true.

Ex: (A && B) is true.

|| (Logical OR)

2 If any of the two operands are non-zero, then the condition becomes true.

Ex: (A || B) is true.
! (Logical NOT)

3 Reverses the logical state of its operand. If a condition is true, then the Logical NOT operator will
make it false.

Ex: ! (A && B) is false.

4.0 JavaScript - if...else Statement

While writing a program, there may be a situation when you need to adopt one out of a given set of
paths. In such cases, you need to use conditional statements that allow your program to make correct
decisions and perform right actions.

JavaScript supports conditional statements which are used to perform different actions based on
different conditions. Here we will explain the if..else statement.

Flow Chart of if-else

The following flow chart shows how the if-else statement works.

20
JavaScript supports the following forms of if..else statement −

 if statement

 if...else statement

 if...else if... statement.

if statement

The if statement is the fundamental control statement that allows JavaScript to make decisions and
execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows −

if (expression){
Statement(s) to be executed if expression is true
}

Here a JavaScript expression is evaluated. If the resulting value is true, the given statement(s) are
executed. If the expression is false, then no statement would be not executed. Most of the times, you
will use comparison operators while making decisions.

21
Example

Try the following example to understand how the if statement works.

<html>
<body>

<script type="text/javascript">
<!--
var age = 20;

if( age > 18 ){

document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

Output
Qualifies for driving
Set the variable to different value and then try...

if...else statement:

The 'if...else' statement is the next form of control statement that allows JavaScript to execute
statements in a more controlled way.

Syntax
if (expression){
Statement(s) to be executed if expression is true
}

else{
Statement(s) to be executed if expression is false
}

Here JavaScript expression is evaluated. If the resulting value is true, the given statement(s) in the ‘if’
block, are executed. If the expression is false, then the given statement(s) in the else block are executed.

Example

Try the following code to learn how to implement an if-else statement in JavaScript.

<html>

22
 <body>

<script type="text/javascript">
<!--
var age = 15;

if( age > 18 ){

document.write("<b>Qualifies for driving</b>");
}

else{
document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

Output
Does not qualify for driving
Set the variable to different value and then try...

if...else if... statement

The if...else if... statement is an advanced form of if…else that allows JavaScript to make a correct
decision out of several conditions.

Syntax

The syntax of an if-else-if statement is as follows −

if (expression 1){
Statement(s) to be executed if expression 1 is true
}

else if (expression 2){

Statement(s) to be executed if expression 2 is true
}

else if (expression 3){

Statement(s) to be executed if expression 3 is true
}

else{
Statement(s) to be executed if no expression is true
}

23
There is nothing special about this code. It is just a series of if statements, where each if is a part of the
else clause of the previous statement. Statement(s) are executed based on the true condition, if none of
the conditions is true, then the else block is executed.

Example

Try the following code to learn how to implement an if-else-if statement in JavaScript.

<html>
<body>

<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
document.write("<b>History Book</b>");
}

else if( book == "maths" ){

document.write("<b>Maths Book</b>");
}

else if( book == "economics" ){

document.write("<b>Economics Book</b>");
}

else{
document.write("<b>Unknown Book</b>");
}
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
<html>

Output
Maths Book
Set the variable to different value and then try...

JavaScript - Switch Case

You can use multiple if...else…if statements, as in the previous chapter, to perform a multiway branch.
However, this is not always the best solution, especially when all of the branches depend on the value of
a single variable.

24
Starting with JavaScript 1.2, you can use a switch statement which handles exactly this situation, and it
does so more efficiently than repeated if...else if statements.

Flow Chart

The following flow chart explains a switch-case statement works.

Syntax

The objective of a switch statement is to give an expression to evaluate and several different statements
to execute based on the value of the expression. The interpreter checks each case against the value of
the expression until a match is found. If nothing matches, a default condition will be used.

switch (expression)
{
case condition 1: statement(s)
break;

case condition 2: statement(s)

break;
...

case condition n: statement(s)

break;

25
 default: statement(s)
}

The break statements indicate the end of a particular case. If they were omitted, the interpreter would
continue executing each statement in each of the following cases.

We will explain break statement in Loop Control chapter.

Example

Try the following example to implement switch-case statement.

<html>
<body>

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
case 'A': document.write("Good job<br />");
break;

case 'B': document.write("Pretty good<br />");

break;

case 'C': document.write("Passed<br />");

break;

case 'D': document.write("Not so good<br />");

break;

case 'F': document.write("Failed<br />");

break;

default: document.write("Unknown grade<br />")

}
document.write("Exiting switch block");
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

Output
Entering switch block

26
Good job
Exiting switch block
Set the variable to different value and then try...

Break statements play a major role in switch-case statements

JavaScript - While Loops

While writing a program, you may encounter a situation where you need to perform an action over and
over again. In such situations, you would need to write loop statements to reduce the number of lines.

JavaScript supports all the necessary loops to ease down the pressure of programming.

The while Loop

The most basic loop in JavaScript is the while loop which would be discussed in this chapter. The
purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is
true. Once the expression becomes false, the loop terminates.

Flow Chart

The flow chart of while loop looks as follows −

Syntax

The syntax of while loop in JavaScript is as follows −

27
while (expression){
Statement(s) to be executed if expression is true
}

Example: Try the following example to implement while loop.

<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop ");
while (count < 4){
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop stopped!
Set the variable to different value and then try...

The do...while Loop

The do...while loop is similar to the while loop except that the condition check happens at the end of
the loop. This means that the loop will always be executed at least once, even if the condition is false.

Flow Chart

The flow chart of a do-while loop would be as follows −

28
Syntax: The syntax for do-while loop in JavaScript is as follows −
do{
Statement(s) to be executed;
} while (expression);

Note − Don’t miss the semicolon used at the end of the do...while loop.

Example: Try the following example to learn how to implement a do-while loop in JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
do{
document.write("Current Count : " + count + "<br />");
count++;
}

while (count < 5);

document.write ("Loop stopped!");
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>

Output
Starting Loop

29
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript - For Loop

The 'for' loop is the most compact form of looping. It includes the following three important parts −

 The loop initialization where we initialize our counter to a starting value. The initialization
statement is executed before the loop begins.

 The test statement which will test if a given condition is true or not. If the condition is true, then
the code given inside the loop will be executed, otherwise the control will come out of the loop.

 The iteration statement where you can increase or decrease your counter.

You can put all the three parts in a single line separated by semicolons.

Flow Chart: The flow chart of a for loop in JavaScript would be as follows −

Syntax: The syntax of for loop is JavaScript is as follows −

for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}

30
Example

Try the following example to learn how a for loop works in JavaScript.

<html>
<body>

<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 4; count++){
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Loop stopped!
Set the variable to different value and then try...

JavaScript - Events

What is an Event ?

JavaScript's interaction with HTML is handled through events that occur when the user or the browser
manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click
too is an event. Other examples include events like pressing any key, closing a window, resizing a
window, etc.

Developers can use these events to execute JavaScript coded responses, which cause buttons to close
windows, messages to be displayed to users, data to be validated, and virtually any other type of
response imaginable.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set
of events which can trigger JavaScript Code. Please go through this small tutorial for a better
understanding. Here we will see a few examples to understand a relation between Event and JavaScript

31
onclick Event Type: This is the most frequently used event type which occurs when a user clicks the left
button of his mouse. You can put your validation, warning etc., against this event type.

Example

Try the following example.

<html>
<head>

<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>

</head>

<body>
<p>Click the following button and see result</p>

<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>

</body>
</html>

Output

onsubmit Event type: onsubmit is an event that occurs when you try to submit a form. You can put your
form validation against this event type.

Example

The following example shows how to use onsubmit. Here we are calling a validate() function before
submitting a form data to the webserver. If validate() function returns true, the form will be submitted,
otherwise it will not submit the data.

Try the following example.

<html>
<head>
<script type="text/javascript">
<!--
function validation() {

32
 all validation goes here
.........
return either true or false
}
//-->
</script>

</head>
<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......
<input type="submit" value="Submit" />
</form>

</body>
</html>

onmouseover and onmouseout: These two event types will help you create nice effects with images or
even with text as well. The onmouseover event triggers when you bring your mouse over any element
and the onmouseout triggers when you move your mouse out from that element. Try the following
example.

<html>
<head>
<script type="text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>

</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>

</body>
</html>

33
Output

Common HTML Events: Here is a list of some common HTML events:

Event Description
Onchange An HTML element has been changed
Onclick The user clicks an HTML element
Onmouseover The user moves the mouse over an HTML element
Onmouseout The user moves the mouse away from an HTML element
Onkeydown The user pushes a keyboard key
Onload The browser has finished loading the page

JavaScript - Functions

A function is a group of reusable code which can be called anywhere in your program. This eliminates
the need of writing the same code again and again. It helps programmers in writing modular codes.
Functions allow a programmer to divide a big program into a number of small and manageable
functions.

Like any other advanced programming language, JavaScript also supports all the features necessary to
write modular code using functions. You must have seen functions like alert() and write() in the earlier
chapters. We were using these functions again and again, but they had been written in core JavaScript
only once.

JavaScript allows us to write our own functions as well. This section explains how to write your own
functions in JavaScript.

Function Definition

Before we use a function, we need to define it. The most common way to define a function in JavaScript
is by using the function keyword, followed by a unique function name, a list of parameters (that might
be empty), and a statement block surrounded by curly braces.

Syntax

The basic syntax is shown here.

<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>

34
Example

Try the following example. It defines a function called sayHello that takes no parameters −

<script type="text/javascript">
<!--
function sayHello()
{
alert("Hello there");
}
//-->
</script>

Calling a Function

To invoke a function somewhere later in the script, you would simply need to write the name of that
function as shown in the following code.

<html>
<head>

<script type="text/javascript">
function sayHello()
{
document.write ("Hello there!");
}
</script>

</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>

Output

Function Parameters: Till now, we have seen functions without parameters. But there is a facility to pass
different parameters while calling a function. These passed parameters can be captured inside the
function and any manipulation can be done over those parameters. A function can take multiple
parameters separated by comma.

35
Example

Try the following example. We have modified our sayHello function here. Now it takes two parameters.

<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>

A JavaScript function can have an optional return statement. This is required if you want to return a
value from a function. This statement should be the last statement in a function. For example, you can
pass two numbers in a function and then you can expect the function to return their multiplication in
your calling program.

Example

Try the following example. It defines a function that takes two parameters and concatenates them
before returning the resultant in the calling program.

<html>
<head>

<script type="text/javascript">
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}

function secondFunction()
{
var result;
result = concatenate('Zara', 'Ali');

36
 document.write (result );
}
</script>

</head>

<body>
<p>Click the following button to call the function</p>

<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>

<p>Use different parameters inside the function and then try...</p>

</body>
</html>

Output

There is a lot to learn about JavaScript functions, however we have covered the most important
concepts in this tutorial.

JavaScript Objects

Real Life Objects, Properties, and Methods:In real life, a car is an object. A car has properties like
weight and color, and methods like start and stop:

Object Properties Methods

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake()

car.color = white car.stop()

All cars have the same properties, but the property values differ from car to car. All cars have the same
methods, but the methods are performed at different times.

37
JavaScript Objects: You have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car:

var car = "Fiat";

Objects are variables too. But objects can contain many values. This code assigns many values (Fiat, 500,
white) to a variable named car: var car = {type:"Fiat", model:"500", color:"white"}; The values are
written as name:value pairs (name and value separated by a colon). JavaScript objects are containers for
named values.

Object Properties

The name:values pairs (in JavaScript objects) are called properties.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Property Property Value

firstName John

lastName Doe

Age 50

eyeColor Blue

Object Methods

Methods are actions that can be performed on objects. Methods are stored in properties as function
definitions.

Property Property Value

firstName John

lastName Doe

Age 50

eyeColor Blue

fullName function() {return this.firstName + " " + this.lastName;}

JavaScript objects are containers for named values called properties or methods.

Object Definition

38
You define (and create) a JavaScript object with an object literal:

Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Spaces and line breaks are not important. An object definition can span multiple lines:

Example
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

Accessing Object Properties

You can access object properties in two ways:

objectName.propertyName

or

objectName["propertyName"]

Example1
person.lastName;

Example2
person["lastName"];

Accessing Object Methods

You access an object method with the following syntax:

objectName.methodName()

Example
name = person.fullName(); If you access the fullName method, without (), it will return the function
definition:

Example
name = person.fullName; A method is actually a function definition stored as a property value.

39
JavaScript HTML DOM

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML
DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing
documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and style of a document."

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

40
  The HTML elements as objects
 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

JavaScript - HTML DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties are
values (of HTML Elements) that you can set or change. The HTML DOM can be accessed with JavaScript
(and with other programming languages). In the DOM, all HTML elements are defined as objects. The
programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML element). A method
is an action you can do (like add or deleting an HTML element).

Example

The following example changes the content (the innerHTML) of the <p> element with id="demo":

Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById Method: The most common way to access an HTML element is to use the id of the
element. In the example above the getElementById method used id="demo" to find the element.

The innerHTML Property: The easiest way to get the content of an element is by using the innerHTML
property. The innerHTML property is useful for getting or replacing the content of HTML elements. The
innerHTML property can be used to get or change any HTML element, including <html> and <body>.

For more reference: https://www.w3schools.com/js/default.asp and

https://www.tutorialspoint.com/javascript/javascript_html_dom.htm and

41