CHP 1

Chapter 1
1.1Features of JavaScript
 Client-side technology.
 It is an interpreter-based scripting language.
 Object Based scripting language.
 It has set of predefined objects like document.
 Gives user more control over the browser.
 It is a case sensitive language.
 JavaScript supports use of functions for performing tasks.
1.2 Object type, name, property, method, dot syntax, main event.
Object name: A web page contains many objects. Each object has its unique identity based on fields,
buttons, interface elements, etc. Each object has its unique identity in the form of name or ID.
For example, two forms placed on web page can have different elements and interface with respect to their
use. So, each form can have unique name or id that can be referenced by JavaScript.
Property: A property is a value that is associated with an object. Objects can have many properties / values
depending on the type of object used by JavaScript.
For example, A form object in a web page can have properties like title, width, height, etc.
Method: A method is a process performed by an object when it receives a message or when an event occurs.
For example, A submit button placed on a form is an object. Clicking on submit button causes the button to
process a method i.e. when a click event occurs an action is performed and method executes.
Dot syntax: Each object has properties and methods. User can access properties and methods by using dot
syntax along with object name and its method or property.
Main event: An event causes JavaScript code to start its execution.

For example, when user click on submit button on a form ‘click’ event occurs and JavaScript code written
inside for submit button starts its execution.
In processing applications, JavaScript must react to events. Reacting to event is referred as event handling.
Event handler reacts to events.
For example, Event handler for a Submit button, click event ,contains JavaScript instructions that process
information the user has entered on a form. Process instructions will make sure that the user entered all the
required information on the form.
1.3 Values and Variables
Values: Value is a data that can be in text, numeric, string, Boolean form.
In HTML, all values are treated as text.
Types of values in JavaScript:
1. Number:- It is a numeric value in combination of 0 to 9 digits that can be used in a calculation.
2. String:- It is text that is enclosed within quotation. A string refers to grouping of more than one
character.
3. Boolean:- It is a value that is either True or False. It is represented as zero and/or non-zero. i.e. (1). It is
used in decision making.
4. Null:- Null indicates no value.
5. Objects:- An object is a value so a document is a value.
6. Functions:- A function performs action when it is called in a JavaScript. Functions used in JavaScript
are predefined functions and custom functions.
Variables: A variable is a container to store a value which can change during execution of script. Once a
variable is declared in the script with var keyword, it can hold any type of data.
Syntax for variable declaration: var variable_name
Example: var rollno
A variable rollno consist of any letters, digits and underscore but it cannot begin with a digit. A variable
name cannot be a JavaScript keyword.
Initializing a variable: Storing a value inside a variable is called as initialization of variable. A variable can
be initialized at the time of creation or when user wants to initialize.
Syntax: var variable_name=value
Or
variable_name=value
Example: var rollno=1

OR
var rollno
rollno=1
Types of variable:
1. Local Variable: A variable declared inside a function is known as local variable. This variable is
visible only inside the function in which it is declared.
2. Global Variable: A variable declared outside all functions in a script is known as global variable. It
can be accessed by any function in a script.
Example:
<html>
<head></head>
<body>
<script type=”text/javascript”>
var name // global variable as it is outside all functions such as display function
function display( )
{
var n1 // Local variable as it is declared inside display function. So, it is local display( )
}
</script>
</body>
</html>
1.4 Operators and Expressions
Operator: An operator is a symbol that tells the browser how to evaluate mathematical expression. Operator
is used with an operand which is a value on which operator perform operations.
For example: In an expression a+b; a and b are operands and + is an operator.
Expression: A statement that contains operands and operators to perform mathematical calculation is known
as mathematical expression.
Types of operators:
1. Arithmetic operator
2. Logical / Relational operator
3. Assignment operator
4. Comparison operator
5. Conditional operator
1. Arithmetic operators:-
Operator Use in script

+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment by 1
-- Decrement by 1
Order of operation: It specify set of rules that indicate order in which an expression is evaluated by the
browser.
1. Calculations must be performed from left to right.
2. Calculations in parenthesis are performed first. When more than one set of parentheses are included,
the expression in inner parenthesis is performed first.
3. Multiplication and division operations are performed next. If both operations are in an expression, the
calculations are performed left to right.
4. Addition and subtraction are next. If both operations are in expression, then calculations are
performed from left to right.
Example: 10*(5+6)= 10*11=110
Program: Output: -
<html> Arithmetic operators
<head></head>
<body> Addition= 10
<h1>Arithmetic operators</h1> Subtraction =2
<script type="text/javascript"> Multiplication =24
var a,b,c Division = 1.5
a=6 Modulus = 2
b=4 Pre-increment = 7
c=a+b Post-increment = 6
document.write("Addition= "+ c + "<br>")
c=a-b
document.write("Subtraction =" + c +"<br>")
c=a*b
document.write("Multiplication =" + c + "<br>")
c=a/b
document.write("Division = " + c + "<br>")
c=a%b
document.write("Modulus = " + c + "<br>")
a=6
c=++a
document.write("Pre-increment = " + c + "<br>")
a=6
c=a++
document.write("Post-increment = " + c + "<br>")
</script>
</body>
</html>
2. Logical / Relational operators:-

These operators are used to combine two logical expressions into one expression. A logical
expression is an expression that evaluate to either true or false.

AND (&&) When both the conditions are true returns true i.e 1
OR (||) When one of the conditions is true returns true i.e. 1
NOT (!) Returns inverse i.e it negates condition
Program: Output: -
<html> Logical operators
<head></head>
<body> AND(&&) operator
<h1>Logical operators</h1> a and b both are greater than 0
<script type="text/javascript"> OR(||) operator
var a,b,c a is a vowel
a=6 NOT(!) operator
b=4 a and b are not equal
document.write("AND(&&) operator <br>")
if(a>0 && b>0)
{
document.write(" a and b both are greater than 0")
}
document.write("<br> OR(||) operator <br>")
a='i'
if(a=='a'|| a=='e' || a=='i' || a=='u' || a=='o')
{
document.write(" a is a vowel")
}
else
{
document.write(" a is not a vowel")
}
document.write("<br> NOT(!) operator <br>")
if(!(a==b))
{
document.write("a and b are not equal")
}
else
{
document.write(" a and b are equal")
}
</script>
</body>
</html>
3. Assignment operators:-
These operators assign the value from the right side of the operator to the variable on the left side of
the operator.

= Assign value
+= Add value then assign
-= Subtract value then assign
*= Multiply value then assign
/= Divide value then assign
%= Modulus value then assign
Program: Output:
<html> Assignment operators
<head></head>
<body> Equalto (=) operator :a=4
<h1>Assignment operators</h1> Add then Assign (+=) operator :b=10
<script type="text/javascript"> Subtract then Assign (-=) operator :b=2
var a,b Multiplication then Assign (*=) operator :b=24
a=4 Division then Assign (/=) operator :b=1.5
document.write(" Equalto (=) operator :" + "a=" + Modulus then Assign (%=) operator :b=2
a)
document.write(" <br>Add then Assign (+=)
operator :")
b=6
b+=a
document.write("b="+b)
document.write(" <br>Subtract then Assign (-=)
operator :")
b=6
b-=a
document.write(" <br>Multiplication then Assign
(*=) operator :")
b=6
b*=a
document.write(" <br>Division then Assign (/=)
operator :")
b=6
b/=a
document.write(" <br>Modulus then Assign (%=)
operator :")
b=6
b%=a
</script>
</body>
</html>
4. Comparison operators:-
These operators are used to compare two values(operands).

== Equivalency
!= Not equivalent
> Greater than
>= Greater than equal to
< Less than
<= Less than equal to
Program: Output:
<html> Comparison operators
<head></head>
<body> Equal to equal to (==) operator :a and b are not equal
<h1>Comparison operators</h1> Not Equal to (!=) operator :a and b are not equal
<script type="text/javascript"> Greater than (>) operator :a is greater than b
var a,b Greater than equal to (>=) operator :a is greater than or
a=6 equal to b
b=4 Less than (<) operator :a is not less than b
document.write(" Equal to equal to (==) Less than equal to (<=) operator :a is not less than or
operator :") equal to b
if(a==b)
document.write("a and b are equal<br>")
else
document.write("a and b are not equal<br>")
document.write(" Not Equal to (!=) operator :")

if(a!=b)
document.write("a and b are not equal<br>")
else
document.write("a and b are equal<br>")
document.write(" Greater than (>) operator :")

if(a>b)
document.write("a is greater than b<br>")
else
document.write("a is not greater than b<br>")
document.write(" Greater than equal to (>=)

operator :")
if(a>=b)
document.write("a is greater than or equal to
b<br>")
else
document.write("a is not greater than or equal to
b<br>")
document.write(" Less than (<) operator :")

if(a<b)
document.write("a is less than b<br>")
else
document.write("a is not less than b<br>")
document.write(" Less than equal to (<=)

operator :")
if(a<=b)
document.write("a is less than or equal to b<br>")
else
document.write("a is not less than or equal to
b<br>")
</script>
</body>
</html>
5. Conditional (ternary) operator:-

It consists of three parts: first part is expression(condition) to be evaluated, second part is expression
to be executed if condition is true and third part is expression to be executed if condition is false.
Syntax: Condition ? True expression : False expression OR expression ? value1 : value2
Example:
var a=10
var b=20
var result
result=(a>b)? a : b
document.write(result)
Output: 20
Program: Output:
<html> Conditional operator
<head></head>
<body> Answer for conditional operator
<h1>Conditional operator</h1> 14
<script type="text/javascript">
var a,b,result
a=6
b=14
result=(a>b)?a:b;
document.write("Answer for conditional operator
<br>" +result)
</script>
</body>
</html>
1.5 if statement, if … else, if … elseif, nested if statement
A conditional statement is a type of JavaScript statements that tells the browser to evaluate a
condition.
1. if statement:- It tells the browser to execute one or more statements if a condition

expression evaluates to true.
Syntax: if(conditional expression)
{
Statement/code block;
}
Conditional expression evaluates either to true or false value. Statement/code block contains
one or more statements to be executed if conditional expression evaluates to true.
Program: Output: Prompt dialog box:

<html>
<head></head>
<body>
var a=prompt("Enter number","1");
if(a>0)
document.write("a is greater than 0");
</script>
</body>
</html>
2. if … else statement:- It tells the browser to execute one or more statements depending
on evaluation of conditional expression.
{
True statement/code block;
}
else
{
False statement/code block;
}
Conditional expression either evaluates to true or false. If conditional expression evaluates to true then
true statements/code block is executed and false block is ignored. If conditional expression evaluates
to false then true block is ignored and false block is executed.

<html>
<head></head>
<body>
if(a>0)
else
document.write("a is less than 0");
</script>
</body>
</html>
3. if …else if statement:- It tells the browser to evaluate first conditional expression and
if it is true then, execute true statement/code block and if it is false then evaluate another
conditional expression and so on.
Syntax: if (conditional expression)
{
}
else if(conditional expression)
{
}
else
{
False statement/code block;
}

<html>
<head></head>
<body>
if(a>0)
else if(a<0)
document.write("a is less than 0");
else
document.write("a is equal to 0");
</script>
</body>
</html>
4. Nested if statement:- When one if statement is written inside another if statement then
it is called as nested if statement.
{
if(conditional expression)
{
Statements;
}
}
Program: Output:
<html> Prompt dialog box:
<head></head>
<body>
if(a>10)
{
if(a<100)
{
document.write("a is in between 10 to
100");
}
}
</script>
</body>
</html>
1.6 switch … case statement :

It is used to compare a single switch value with multiple values specified as case values.
While executing switch … case statement, switch value is compared with a series of case
values. If the switch value matches a case value, then the browser executes all statements that
are placed inside case value block.
Syntax:
switch(value)
{
case ‘value1’:
statements;
break;
case ‘value2’:
statements;
break;
.
.
.
default:
statements;
}
- switch, case are keywords.
- switch value is the value to be compared with each case value.
- case value1,2...,n are the possible values for switch value.
- statements inside case executes when switch value and case value match with each
other.
- break statement is used to tell browser to skip all remaining cases and exit from
switch statement.
- default statements execute when all case values don’t match will switch value.
Program: Output:
<html>
<head></head>
<body>
var a=prompt("Enter day of week");
switch(a)
{
case '1':
document.write("It's Monday");
break;
case '2':
document.write("It's Tuesday");
break;
case '3':
document.write("It's Wednesday");
break;
case '4':
document.write("It's Thursday");
break;
case '5':
document.write("It's Friday");
break;
case '6':
document.write("It's Saturday");
break;
case '7':
document.write("It's Sunday");
break;
default:
document.write("Invalid number");
}
</script>
</body>
</html>
1.7 Loop statement: for loop, for … in loop, while loop, do … while
loop, continue statement
A loop is used to execute one or more statements repeatedly without rewriting same statements multiple
times in a program.
1. For loop: It tells the browser to execute statements within the loop until a condition statement returns
false value. It contains three parts: initialization, condition checking and increment or decrement counter
variable.
Syntax: for(initializer ; conditional expression ; post loop statement)

{
Loop statements;
}
- Initializer: It is a counter variable that stores count for execution of loop.
- Conditional expression: It is a condition that terminates the loop when desired number of iterations are
completed.
- Post loop statement: It is used to increment or decrement the counter variable after each iteration.
- Statements: It contains one or more statements to be executed in each iteration when condition evaluates
to true value.
Example:
var i;
for(i=0 ; i<10 ; i++)
document.write(“<br>” + i);
</script>
The above example, displays 0 to 9 values on separate line.
Program: Output:
To display sum of 1 to 10 numbers
<html>
<head></head>
<body>
var i,sum=0;
for(i=1;i<=10;i++)
{
sum=sum+i;
}
document.write("Sum = " + sum);
</script>
</body>
</html>
2. for … in loop: It is a special kind of loop that is used when browser executes statements within the
code block for each item on a list. It is used to retrieve all properties of an object available in JavaScript. For
example, if the list contains five items then browser executes loop for five times.
Syntax: for(list)
{
Statements;
}
- List contains list of items stored in an array.
- Statements are the instructions to be executed for each item in a list.
Example: By using for each loop we can display the properties that are available in the window object of a
browser in JavaScript.
for(property in window)
{
document.write(property);
document.write(“<br>”);
}
</script>
Program: Output:
<html>
<head></head>
<body>
var products=new Array("book","pen","pencil");
var i=0;
document.write("Items available in products array : ")
for( i in products)
document.write("<br>" + products[i]);
</script>
</body>
</html>
3. while loop: It tells the browser to execute one or more statements until the condition in while loop
becomes false. While loop doesn’t always specify number of times statements to be executed in a loop i.e.
when in an application loop execution depends on certain user action or application’s action then while loop
can be used. It is a entry control loop i.e. before executing loop statements it evaluates conditional
expression and is expression is true then only enters into the loop.
Syntax: while(conditional expression)

{
Statements;
}
Example:
var i=1;
while(i<10)
{
document.write(i+”<br>”);
i++;
}
</script>
Above example displays 1 to 9 numbers.
Program: Output:
<html>
<head></head>
<body>
var i=1;
while(i<=10)
{
document.write("<br>" + i);
i++;
}
</script>
</body>
</html>
4. do … while loop: It is used to execute one or more statements repeatedly. In this loop, condition is
checked after executing all statements from the loop at least once. So even though the condition is false,
statements from loop executes at least once. It is exit controlled loop i.e. after execution of loop statements
after every iteration conditional expression is evaluated and if the condition is true then only next iteration
executes.
Syntax: do
{
Statements;
}while(conditional expression);
do indicates enter the loop and execute all statements. Once control comes out of loop condition is evaluated.
If it evaluates to true then loop executes again otherwise loop exits.
Example:
var i=1;
do
{
i=i+1;
}while(i<=10);
</script>
Program: Output:
<html>
<head></head>
<body>
var i=1;
do
{
document.write("<br>" + i);
i++;
}while(i<=10);
</script>
</body>
</html>
5. continue statement: It is used to instruct the browser to stop execution of statements within the loop
immediately and go to beginning of loop to execute conditional expression. continue statement is used to
skip some statements from loop and continue with expression evaluation at the beginning of loop.
Syntax : continue;
Example:
var i=0;
while(i<5)
{
i++;
if(i==3)
{
continue;
}
}
</script>
In the above example, inside loop when i=3 continue statement will execute and browser will ignore
document.write statement and control will pass to beginning of loop i.e. while condition.
Program: Output:
<html>
<head></head>
<body>
var i=0;
while(i<5)
{
i++;
if(i==3)
{
continue;
}
document.write(i + "<br>");
}
</script>
</body>
</html>

CHP 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CHP 1

Uploaded by

Copyright:

Available Formats

Chapter 1

Main event: An event causes JavaScript code to start its execution.

Example: var rollno=1

Operator Use in script

2. Logical / Relational operators:-

Operator Use in script

Operator Use in script

Operator Use in script

document.write(" Not Equal to (!=) operator :")

document.write(" Greater than (>) operator :")

document.write(" Greater than equal to (>=)

document.write(" Less than (<) operator :")

document.write(" Less than equal to (<=)

5. Conditional (ternary) operator:-

1. if statement:- It tells the browser to execute one or more statements if a condition

Program: Output: Prompt dialog box:

Program: Output: Prompt dialog box:

Program: Output: Prompt dialog box:

1.6 switch … case statement :

Syntax: for(initializer ; conditional expression ; post loop statement)

Syntax: while(conditional expression)

You might also like