Web Technologies

B.Com II Year IV Semester

Unit – III
1. What is Client-side JavaScript?
Client-side JavaScript performs execution of programs or scripts written by client on web
browser. Client-side scripts are written using JavaScript embedded in HTML or XHTML
documents. Client-side script mainly deals with user interface which enables user
interaction on web. As soon as a client request for a page with complete data along with the
HTML tags is sent to the client.
The steps for executing client- side scripts are:
➔ A script is written using scripting languages like JavaScript on end user system.
➔ Upon, receiving a request the web server transfers the requested file on user
computer.
➔ Later this file is executed by web browser on end-user system.
===================================================================
2. Explain the different datatypes supported by JavaScript.
Data Type:
The data type is used to indicate the type of data value stored in a variable. The data type
of a variable is specified at the time of its declaration.
Data Types of JavaScript:
1. Boolean data type
2. String data type
3. Null data type
4. Number data type
1. Boolean Data Type:
This data type consists of two logical values.
➔ True
➔ False
Ex: var snowing = false;
2. String Data Type:
The information is written in double quotes.
Ex: var name = “Siddharth”;
var greeting = “Hello!”;
3. Null Data Type:
The user can use this data type when they does not want to initialize the value of a particular
variable.
Ex: var empno = null;
var age = null;
4. Number Data Type:
This data type is just the opposite of String data type. The value is declared without double
quotes.
Ex: var n1 = 30;
var weight = 65.75;
var sal = 20000;
===================================================================
3. What is meant by an operator? Explain the types of operators supported by JavaScript.
Operator:
Operator is a symbol that performs certain operations like arithmetic operations, logical
operations and so on.
Types of Operators:
1. Arithmetic Operators
2. Relational Operators
3. Logical Operators
4. Assignment Operators
5. Increment or Decrement Operators
6. Bitwise Operators
1. Arithmetic Operators:
These operators are the mathematical operators that are used to perform arithmetic
operations. They are
➔ Addition (+)
➔ Subtraction (-)
➔ Multiplication (*)
➔ Division (/)
➔ Modulus (%)
Addition (+) Operator:
It is used to perform numeric addition. It performs addition operation on integers. It
performs concatenation when on strings.
Ex: var sum = 6 + 4; (Result is 10)
var value = “Hello!” + “World”; (Result is Hello! World)
Subtraction ( – ) Operator:
It is used to perform numerical subtraction.
Ex: var result = 5 – 2 ; (Result is 3)
Multiplication ( * ) Operator:
It is used to perform numerical multiplication.
Ex: var result = 6 * 2; (Result is 12)
Division ( / ) Operator:
It is used to perform numerical division.
Ex: var result = 6/2; (Result is 3)
Modulus (%) Operator:
It is used to return the remainder as a result.
Ex: var result = 5%2; (Result is 1)
2. Relational Operators:
These operators are used to test the relationship between two operands. They return a
Boolean value. They are
= = (Equal to) and != (Not equal to) Operator:
The equal to (= =) operator is used to compare two operands. It returns true if they are
equal. The not equal to (!=) operator returns true if they are not equal.
Comparison Operators (>, <, >=, <=):
These operators are used to compare numeric and string operands.
> (Greater than): It returns true if the left side operand is greater than the right side
operand.
< (Less than): It returns true if the left side operand is less than the right side operand.
>= (Greater than or equal to): It returns true if the left side operand is greater than or equal
to the right side operand.
<= (Less than or equal to): It returns true if the left side operand is less than or equal to the
right side operand.
3. Logical Operators:
The operators which operate only on the Boolean values such as true or false are called as
logical operators. The logical operators are &&, || and !.
x y x && y x || y !x
True True True True False
True False False True False
False True False True True
False False False False True
4. Assignment Operator:
This operator is used to assign values to variables. The basic assignment operator is ‘=’
which assigns the value at the right side of the operand. The operators are
Operator Example
+= x + = y or x = x + y
– = x – = y or x = x – y
*= x * = y or x = x * y
/= x / = y or x = x / y
%= x % = y or x = x % y
<< = x << = y or x = x << y
>> = x >> = y or x = x >> y
>>> = x >>> = y or x = x >>> y
&= x & = y or x = x & y
|= x | = y or x = x | y
^= x ^ = y or x = x ^ y
5. Increment or Decrement Operator:
Increment (++) Operator is used to increase the value of an operand by one. There are two
types of increment operators. They are post increment and pre increment.
Ex: Post increment:
x = 2;
y = x++; (Value of y is 2)
Pre increment:
x = 2;
y = ++x; (Value of y is 3)
Decrement ( – – ) Operator is used to decrease the value of an operand by one. There are
two types of decrement operators. They are post decrement and pre decrement.
Ex: Post increment:
x = 2;
y = x – –; (Value of y is 2)
Pre increment:
x = 2;
y = – –x; (Value of y is 1)

6. Bit-wise Operators:
Java Script has several bitwise operators.
Bitwise AND:
This operator returns 1 in all the bits position if the corresponding bits of both the operands
are 1. Otherwise, it returns 0.
Bitwise OR:
This operator returns 0 in all the bits if the corresponding bits of both the operands are 0.
Otherwise, it returns 1.
Bitwise XOR:
This operator returns 0 in all the bits if the corresponding bits of both the operands are
similar. Otherwise, it returns 1.
Bitwise NOT:
This operator will invert the bits of the operand on which it is applied.
Left Shift (<<):
This operator left shifts an operand for a specific bits by filling zeros from right.
Right Shift (>>):
This operator left shifts an operand for a specific bits by discarding the bits which are
shifted ‘off’.
Zero-fill Right Shift (>>>):
This operator right shifts an operand for a specific bits by discarding the bits which are
shifted off and also by shifting the zeros from left.
===================================================================
4. Explain the various conditional statements used in JavaScript.
Statement:
A statement in general is an instruction that causes an action to be performed when
executed. Each statement is ended by a semicolon.
The various conditional statements of JavaScript are:
1. Simple if statement
2. if – else statement
3. switch statement
Simple if statement:
It is the basic control statement which supports execution of certain statements after
satisfying a condition.
Syntax:
if (condition)
{
Statement;
}
Program:
<html>
<head>
<title> Simple if statement </title>
</head>
<body>
<script language = “javascript”>
var x = -2;
if (x < 0)
{
document.write(“ x is a negative number”);
}
</script>
</body>
</html>
if – else statement:
‘if – else’ is an extension to ‘if’ control statement. If the condition is false then else statement
is executed.
Syntax:
if (condition)
{
Statement – 1;
}
else
{
Statement – 2;
}
Program:
<html>
<head>
<title> If else statement </title>
</head>
<body>
<script language = “javascript”>
x = -2;
if (x < 0)
{
document.write(“x is a negative number”);
}
else
{
document.write(“x is a positive number”);
}
</script>
</body>
</html>
Switch statement:
It is a multi – way decision making statement.
Syntax:
switch (expression)
{
case constant1:
statement-1;
break;
case constant2:
statement-2;
break;
case constantn:
statement-n;
break;
default:
default statement;
break;
}

The value of the expression is evaluated and it is compared with the constant case values.
When match is found, the corresponding statement block associated with the case is
executed.
Program:
<html>
<head>
<title> Switch – case statement </title>
</head>
<body>
<script language = “javascript”>
var n = 3;
switch (n)
{
case 1:
document.write(“Good Morning”);
break;
case 2:
document.write(“Good Afternoon”);
break;
case 3:
document.write(“Good Evening”);
break;
default:
document.write(“Good Night”);
break;
}
</script>
</body>
</html>
===================================================================
5. Explain the usage of Looping Statements in JavaScript along with syntax and examples.
Looping Statements:
Loop is a process of executing action or series of actions defined in the blocks of code
infinitely. It is necessary to terminate the loop as soon as the required task is completed.
Hence, a condition is used to control the loop before or after the execution of every block of
code. Various types of looping statements used in JavaScript are:
1. while loop
2. do – while loop
3. for loop
while loop:
This loop is used to execute a set of statements until the condition remains true.
Syntax:
Initialization;
while (condition)
{
Statements;
Increment / Decrement operator;
}
Program:
<html>
<head>
<title> While loop </title>
</head>
<body>
<script language = “javascript”>
var i = 1;
while (i<=10)
{
document.writeln(i);
i++;
}
</script>
</body>
</html>
do – while loop:
It is similar to the while loop. The condition is specified at the end of the loop.
Syntax:
Initialization;
do
{
Statements;
Increment / Decrement operator;
}
while (condition);
Program:
<html>
<head>
<title> While loop </title>
</head>
<body>
<script language = “javascript”>
var i = 1;
do
{
document.writeln(i);
i++;
}
while (i<=10);
</script>
</body>
</html>
for loop:
A set of instructions can be executed repeatedly by using for loop.
Syntax:
for (initialization; condition; increment/decrement)
{
Statements;
}
Program:
<html>
<head>
<title> for loop </title>
</head>
<body>
<script language = “javascript”>
var i;
for(i = 0; i<=10; i++)
{
document.writeln( i );
}
</script>
</body>
</html>
===================================================================
6. Explain in detail how JavaScript supports functions.
Function:
A function is a self-contained block of code that performs specific and well defined tasks. It
simplifies complex task by dividing the program into modules. They are:
i) Function Declaration
ii) Function Definition
iii) Function Call
Function Declaration:
It declares a function that consists of a function type or return type, function name
parameter or argument list and a terminating semicolon. Function declaration is also called
function prototype. A function must be declared before it is invoked.
Syntax:
function function_name(parameters);
Function Definition:
It is the complete description of a functionality of code. It tells what function does and how
it performs. It contains a function body or a block of statements.
Syntax:
function function_name(parameters)
{
Statements;
}
Function call:
It can be called with function name and a list of actual parameters are enclosed in
parameters. When a function call is encountered, the control is transferred to the respective
function. It is executed and the return value is returned to the function which called it.
Syntax:
Function_name(parameters);
Program:
<html>
<body>
<script>
function getInfo()
{
return "hello! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
===================================================================
7. What is an object? Explain various member functions of math object and date object.
Object:
An object is referred as a set of properties and methods. Properties are nothing but the
features and methods are nothing but the actions that are performed on the objects. The
properties can either be primitive data type or objects themselves. They can be added to the
objects even after they are created. Objects belonging to a class can have different
properties and methods.
Types of objects in JavaScript:
1. Math Object:
2. Date Object:
3. String Object:
4. Boolean Object:
5. Number Object:
Math Object:
Numerous mathematical functions are introduced by JavaScript to perform several
mathematical calculations. These mathematical functions or methods are entities of “Math”
object.
Syntax:
Math.methodname(numeric values);
Mathematical functions are:
i) min( ): Displays minimum of two numerical values.
Ex: document.writeln( min(2,5));
ii) max( ): Displays maximum of two numerical values.
Ex: document.writeln(max(2,5));
iii) abs( ): Displays the absolute value of the number entered into it.
Ex: document.writeln(abs(5));
iv) ceil( ): Displays the rounded value of the integer. The values displayed will be greater
than the value supplied.
Ex: document.writeln(ceil(5.2));
v) pow( ): Displays the power of the given number.
Ex: document.writeln(pow(2,3));
vi) round( ): Rounds the value entered to its nearest integer.
Ex: document.writeln(round(5.5));
vii) sqrt( ): Displays the square root of the given value.
Ex: document.writeln(sqrt(4));
viii) sin( ): Displays the sine value of the given numeric value.
Ex: document.writeln(sin(90));
viii) cos( ): Displays the consequent value of the given numeric value.
Ex: document.writeln(cos(0));
ix) tan( ): Displays the tangent value of the given numeric value.
Ex: document.writeln(tan(45));
x) exp( ): Displays exponential value of the number value.
Ex: document.writeln(exp(2));
xi) floor( ): Rounds the numeric value to the largest integer.
Ex: document.writeln(floor(5,2));
xii) log( ): Displays the logarithmic equivalent value for the numeric value.
Ex: document.writeln(log(2.718282));
Program:
<html>
<body>
<script type = "text/javascript">
var value = Math.abs( 4.5 );
document.writeln("First Value : " + value );
var value = Math.floor( 90.45 );
document.writeln("<br>Second Value : " + value );
var value = Math.sin( Math.PI/2 );
document.write("<br>Third Value : " + value );
</script>
</body>
</html>
Date Object:
Date/Time is recognized in two ways i.e., UTC (Universal Coordinated Time or Greenwich
Mean Time) and Local Time. UTC is a standard time followed through out the world. Local
time is the time of the system where the script is currently residing.
Syntax:
var currentdate = new date( );
The date( ) constructor in the above declaration is empty. Different values can e obtained
by passing parameters to this constructor.
Ex:
var currentdate = new date(“month, dd, yyyy”);
It returns a snapshot of system’s month, date and year values of that particular instant.
var currentdate = new date(“month, dd, yyyy, hh:mm:ss”);
It returns system’s month, date and year along with hours, minutes and seconds value of
that particular instant.
var currentdate = new date(yy, mm, dd);
It returns the current year, month and date values of the system.
var currentdate = new date(yy, mm, dd, hh, mm, ss);
It returns current year, month, date, hours, minutes and seconds values of the system.
var currentdate = (GMT milliseconds from 1/1/1970);
It returns the Greenwich Mean Time value.
The following methods are also supported by date object.
1) getFullyear( ) 2) getHours( ) 3) getMilliseconds 4) getDate( )
5) getDay( ) 6) getMonth( ) 7) getMinutes( ) 8) getTime( )
9) getSeconds( ) 10) setDate(1….31) 11) setFullyear(year[ , month, day])
12) setMilliseconds(ms) 13) setMinutes(min[ , secs ,ms]) 14)setSeconds(secs[ , ms])
15) setMonth(month[ , day]) 16) setTime(time) 17)toString( ) 18)toGMTString( )
19) toLocalString( )
Program:
<html>
<head>
<title> Working with Date object </title>
</head>
<body>
<script type="text/javaScript">
var mydate = new Date();
document.write("Today date is: " + mydate.getDate() + "/" + (mydate.getMonth()+1 ) +
"/" + mydate.getFullYear() + "<br/>");
document.write("The time is: " + mydate.getHours() + ":" + mydate.getMinutes() + ":"+
mydate.getSeconds() + "<br/>");
</script>
</body>
</html>
===================================================================
8. What is an array? Explain how to create an array and how to add and access elements in
an array.
Array:
An array is a collection of homogeneous items. In JavaScript an array contains
heterogeneous items. Arrays in JavaScript are also called as associative arrays.
Creating and Accessing the Array Elements:
An array can be declared as follows,
var arr;
Elements can be allocated to this array by the following statement,
arr = new Array(10);
An array is not initialized while it is allocated.
Arrays in JavaScript are considered as objects. They can also be created by making use of
constructors. Constructors in JavaScript are of three types. They are,
➔ Array( );
➔ Array(number of elements);
➔ Array(List of elements separated by commas);
Ex:
var arr = new Array( );
It creates an array of zero length.
arr[3] = 5;
The length of an array is 4. i.e., it has 4 elements. It adds an elements at the location arr[3].
Values to the array elements are assigned by writing them in square brackets by separating
them with commas.
Syntax:
var arr = [element0, element1, element2, ……….., element];
Ex:
var flowers = [“Rose”, “Lily”, “Jasmine”];
var arr = [0, 1, 2, 3, 4, 5];
An array index starts with 0. The elements of an array are accessed using the index.
Program:
<html>
<head>
<title>Basic Javascript Array Example</title>
</head>
<body>
<script language="javascript">
var empty = [];
var fruits = ['apple', 'orange', 'kiwi'];
alert(fruits[1]);
</script>
</body>
</html>
===================================================================
9. What is Document Object Model (DOM)?
Document Object Model (DOM):
DOM is an interface using which given programs/scripts can dynamically alter the contents
of a given web document. DOM is a language and platform independent interface. The given
web document can be further processed and the result of which can be induced in it again.
===================================================================