Chapter: 3

Web Technology II

Web Technology refers to the various tools and techniques that are utilized in the
process of communication between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be defined as programs that
display text, data, pictures, animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed using software interfaces provided
by Web browsers.
Web Technology can be classified into the following sections:
World Wide Web (WWW): The World Wide Web is based on several different
technologies : Web browsers, Hypertext Markup Language (HTML) and Hypertext
Transfer Protocol (HTTP).
Web Browser: The web browser is an application software to explore www (World
Wide Web). It provides an interface between the server and the client and requests to
the server for web documents and services.
Web Server: Web server is a program which processes the network requests of the
users and serves them with files that create web pages. This exchange takes place
using Hypertext Transfer Protocol (HTTP).
Web Pages: A webpage is a digital document that is linked to the World Wide Web
and viewable by anyone connected to the internet has a web browser.
Web Development: Web development refers to the building, creating, and
maintaining of websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an application that
works over the internet i.e. websites.
Web Development can be classified into two ways:
● Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’ of
the application.

● Backend Development: Backend is the server side of a website. It is the

part of the website that users cannot see and interact. It is the portion of
software that does not come in direct contact with the users. It is used to
store and arrange data.

1
 Programming Language Scripting Language

A programming language is a computer A scripting language is a type of

language that is used to communicate with programming language designed for a
computers using a set of instructions. runtime system to automate the execution
of tasks.

It is compiled language or compiler-based It is interpreted language or

language. interpreter-based language

It uses a compiler to convert source code It uses an interpreter to convert source

into machine code. code into machine code.

As it uses a compiler, hence the complete As it uses an interpreter, hence the

program is converted into machine code in program is converted into machine code
one shot. line by line.

Some popular examples are C, C++, Java, Some popular examples are Perl, Python,
Scala, COBOL, etc. JavaScript, etc.

Client side scripting :

web browsers execute client side scripting. It is use when browsers has all code.
Source code used to transfer from web server to user’s computer over internet and run
directly on browsers. It is also used for validations and functionality for user events.
Example of client-side scripting languages: HTML, CSS, VB Script, and JavaScript.
2. Server side scripting :

2
Web servers are used to execute server side scripting. The server-side scripting usually
happens on the back-end of a website. The user does not get access to view what
happens here. A server-side scripting creates a path for the website to the database and
all the behind-the-scene work which organizes and runs a website.
Example of server-side scripting languages: php, Ruby etc.
Difference between client side scripting and server side scripting :

BASIS OF SERVER-SIDE CLIENT-SIDE SCRIPTING

COMPARISO SCRIPTING
N
Use It is used at the backend It is used at the front end which
where the source code is not users can see from the browser.
viewable or hidden at the
client side (browser).
Operation A server can carry out a A browser can perform the
server-side script, but cannot client-side scripting after
perform the client side receiving the page sent by the
scripting. server.
Connection to It helps in connecting to the It does not connect to the
the database databases that are already databases that are on the web
present in the web server. server.
Languages Languages used in server Languages commonly used for
scripting are Ruby on Rails, client-side scripting are
PHP, ColdFusion, Python, Javascript, HTML, CSS, VB
ASP, Perl etc script etc.
Security It is more secure than client It is less secure because the
side scripting as the server scripts are usually not hidden
side scripts are usually hidden from the client end.
from the client end.

3
JavaScript

JavaScript (js) is a light-weight object-oriented programming language which is used

by several websites for scripting the webpages. It was introduced in the year 1995 for
adding programs to the webpages in the Netscape Navigator browser. Since then, it
has been adopted by all other graphical web browsers. With JavaScript, users can
build modern web applications to interact directly without reloading the page every
time. The traditional website uses js to provide several forms of interactivity and
simplicity.

Javascript Features

1. Light Weight Scripting Language

JavaScript is a lightweight scripting language because it is made for data handling at

the browser only. Since it is not a general-purpose language so it has a limited set of
libraries. Also as it is only meant for client-side execution and that too for web
applications, hence the lightweight nature of JavaScript is a great feature.

2. Dynamic Typing

JavaScript supports dynamic typing which means types of the variable are defined
based on the stored value. For example, if you declare a variable x then you can store
either a string or a Number type value or an array or an object. This is known as
dynamic typing.

To understand this, in languages like Java, we explicitly mention that a particular

variable will store a certain type of data, whereas in JavaScript we do not have to
provide the data type while declaring a variable. In JavaScript, we just have to use var
or let keyword before the variable name to declare a variable without worrying about
its type.

3. Platform Independent

This implies that JavaScript is platform-independent or we can say it is portable;

which simply means that you can simply write the script once and run it anywhere and
anytime. In general, you can write your JavaScript applications and run them on any
platform or any browser without affecting the output of the Script.

4. Interpreted Language

JavaScript is an interpreted language which means the script written inside javascript
is processed line by line. These Scripts are interpreted by JavaScript interpreter which
is a built-in component of the Web browser. But these days many JavaScript engines

4
in browsers like the V8 engine in chrome uses just in time compilation for JavaScript
code.

5. Client-side Validations

This is a feature which is available in JavaScript since forever and is still widely used
because every website has a form in which users enter values, and to make sure that
users enter the correct value, we must put proper validations in place, both on the
client-side and on the server-side. JavaScript is used for implementing client-side
validations.

A Simple JavaScript Program

We should place all our JavaScript code within <script> tags (<script> and </script>)
if we are keeping your JavaScript code within the HTML document itself. This helps
our browser distinguish your JavaScript code from the rest of the code. As there are
other client-side scripting languages (Example: VBScript), it is highly recommended
that you specify the scripting language you use. You have to use the type attribute
within the <script> tag and set its value to text/javascript like this:
<script type="text/javascript">

Hello World Example:

<html>

<head>

<title>My First JavaScript code!!!</title>

<script type="text/javascript">

alert("Hello World!");

</script>

</head>

<body>

</body>

</html>

Adding Javascript to HTML page

5
Javascript is applied to HTML page in a similar manner like CSS. Whereas CSS uses
<link> elements to apply external stylesheets and <style> elements to apply internal
stylesheets to HTML. Javascript need <script> element.

There are three different ways to add/embed javascript into web page:

1. Inline javascript
2. Internal javascript
3. External javascript

Inline Javascript

➢ Javascript written within the HTML element with the event-handling attribute
then it is called as inline Javascript.
➢ This method is used when we have to call a function in the HTML event
handler attribute.
➢ Many cases where we have to add javascript code directly are onclick,
onmouseover, onload etc.

Example:

<html>

<head>

<title>Inline Javascript </title>

</head>

<body>

<form>

<input type="button" value="Click me" onclick="alert('Hello world')";>

</form>

</body>

</html>

Here, onclick is html attribute for javascript event and onclick=”alert(‘Hello world’)”
is the inline javascript code. When user press ‘click me’ button on the web browser
the event is captured and display alert popup with button clicked message.

Internal Javascript

➢ When javascript written in same HTML page inside a script element then it is
called as internal javascript.
➢ User can define the javascript code either in head section or in body section.

6
Example for placing javascript in head section

<html>

<head>

<title>Internal Javascript </title>

<script>

document.write("Hello world");

</script>

</head>

<body>

</body>

</html>

Example for placing javascript in body section

<html>

<head>

<title>Internal Javascript </title>

</head>

<body>

<script>

document.write("Hello world");

</script>

</body>

</html>

External Javascript

➢ In this method, first javascript code are written in separate external file and
stored using the .js extension and then including into HTML page using src
attribute of <script> tag.

7
Example:

Script.js

document.write("Hello world");

External.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>

JavaScript Comments

There are two types of comments in JavaScript.

1. Single-line Comment
2. Multi-line Comment

JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the
statement.

<html>

<body>

<script>

// It is single line comment

document.write("hello javascript");

8
</script>

</body>

</html>

Multi line Comment

It can be used to add single as well as multi line comments.

It is represented by forward slash with asterisk then asterisk with forward slash. For
example:

1. /* your code here */

<html>

<body>

<script>

/* It is multi line comment.

It will not be displayed */

document.write("example of javascript multiline comment");

</script>

</body>

</html>

JavaScript Variable

A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )

sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.

Example of JavaScript variable

9
<html>

<body>

<script>

var x = 10;

var y = 20;

var z=x+y;

document.write(z);

</script>

</body>

</html>

Output of the above example

30

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within

the function or block only. For example:

1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:

1. <script>
2. var data=200;//global variable
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }

10
 9. a();//calling JavaScript function
10. b();
11. </script>

Javascript Data Types

JavaScript provides different data types to hold different types of values. There are
two types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the
variable because it is dynamically used by JavaScript engine. You need to use var
here to specify the data type. It can hold any type of values such as numbers, strings
etc. For example:

1. var a=40;//holding number

2. var b="Rahul";//holding string

JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types

The non-primitive data types are as follows:

Data Type Description

11
 Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

JavaScript Operators

JavaScript operators are symbols that are used to perform operations on operands. Let
us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and
‘+’ is called the operator. There are following types of operators in JavaScript.

1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

Arithmetic Operators
JavaScript supports the following arithmetic operators −
Assume variable A holds 10 and variable B holds 20, then −

Sr.No. Operator & Description

1 + (Addition)

Adds two operands

Ex: A + B will give 30

12
2 - (Subtraction)

Subtracts the second operand from the first

Ex: A - B will give -10

3 * (Multiplication)

Multiply both operands

Ex: A * B will give 200

4 / (Division)

Divide the numerator by the denominator

Ex: B / A will give 2

5 % (Modulus)

Outputs the remainder of an integer division

Ex: B % A will give 0

6 ++ (Increment)

13
 Increases an integer value by one

Ex: A++ will give 11

7 -- (Decrement)

Decreases an integer value by one

Ex: A-- will give 9

Example

<html>

<body>

<script type="text/javascript">

var a = 33;

var b = 10;

var c = "Test";

var linebreak = "<br />"

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

result = a + b;

document.write(result);

document.write(linebreak);

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

result = a - b;

document.write(result);

14
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);

a = ++a;

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

result = ++a;

document.write(result);

document.write(linebreak);

b = --b;

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

result = --b;

15
 document.write(result);

document.write(linebreak);

</script>

</body>

</html>

Output

a + b = 43

a - b = 23

a / b = 3.3

a%b=3

a + b + c = 43Test

++a = 35

--b = 8

Comparison Operators
Assume variable A holds 10 and variable B holds 20, then −

Sr.N Operator & Description

o.

1 = = (Equal)

Checks if the value of two operands are equal or not, if yes, then the
condition becomes true.

Ex: (A == B) is not true.

16
2 != (Not Equal)

Checks if the value of two operands are equal or not, if the values are not
equal, then the condition becomes true.

Ex: (A != B) is true.

3 > (Greater than)

Checks if the value of the left operand is greater than the value of the right
operand, if yes, then the condition becomes true.

Ex: (A > B) is not true.

4 < (Less than)

Checks if the value of the left operand is less than the value of the right
operand, if yes, then the condition becomes true.

Ex: (A < B) is true.

5 >= (Greater than or Equal to)

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.

Ex: (A >= B) is not true.

17
6 <= (Less than or Equal to)

Checks if the value of the left operand is less than or equal to the value of
the right operand, if yes, then the condition becomes true.

Ex: (A <= B) is true.

Example
The following code shows how to use comparison operators in JavaScript.
<html>
<body>
<script type = "text/javascript">
var a = 10;
var b = 20;
var linebreak = "<br />";

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);

18
 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);
</script>
</body>
</html>

Output

(a == b) => false

(a < b) => true

(a > b) => false

(a != b) => true

(a >= b) => false

a <= b) => true

Logical Operators

Sr.N Operator & Description

o.

19
1 && (Logical AND)

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

Ex: (A && B) is true.

2 || (Logical OR)

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

Ex: (A || B) is true.

3 ! (Logical NOT)

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

Ex: ! (A ) is false.

Example

<html>

<body>

<script type="text/javascript">

var a = true;

var b = false;

var linebreak = "<br />";

20
 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);

</script>

</body>

</html>

Output

(a && b) => false

(a || b) => true

!(a && b) => true

Bitwise Operators
Assume variable A holds 2 and variable B holds 3, then −

21
Sr.N Operator & Description
o.

1 & (Bitwise AND)

It performs a Boolean AND operation on each bit of its integer arguments.

Ex: (A & B) is 2.

2 | (BitWise OR)

It performs a Boolean OR operation on each bit of its integer arguments.

Ex: (A | B) is 3.

3 ^ (Bitwise XOR)

It performs a Boolean exclusive OR operation on each bit of its integer

arguments. Exclusive OR means that either operand one is true or operand
two is true, but not both.

Ex: (A ^ B) is 1.

4 ~ (Bitwise Not)

It is a unary operator and operates by reversing all the bits in the operand.

22
 Ex: (~B) is -4.

5 << (Left Shift)

It moves all the bits in its first operand to the left by the number of places
specified in the second operand. New bits are filled with zeros. Shifting a
value left by one position is equivalent to multiplying it by 2, shifting two
positions is equivalent to multiplying by 4, and so on.

Ex: (A << 1) is 4. 10==a,b,c,d 10==c=0 b=1 0

6 >> (Right Shift)

Binary Right Shift Operator. The left operand’s value is moved right by the
number of bits specified by the right operand.

Ex: (A >> 1) is 1.

7 >> (Right shift with Zero)

This operator is just like the >> operator, except that the bits shifted in on
the left are always zero.

Ex: (A >> 1) is 1.

Example

<html>

<body>

23
<script type="text/javascript">

var a = 2; // Bit presentation 10

var b = 3; // Bit presentation 11

var linebreak = "<br />";

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 << 1) => ");

24
 result = (a << 1);

document.write(result);

document.write(linebreak);

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

result = (a >> 1);

document.write(result);

document.write(linebreak);

</script>

</body>

</html>

Output

(a & b) => 2

(a | b) => 3

(a ^ b) => 1

(~b) => -4

(a << b) => 4

(a >> b) => 1

Assignment Operators

Sr.N Operator & Description

o.

1 = (Simple Assignment )

25
 Assigns values from the right side operand to the left side operand

Ex: C = A + B will assign the value of A + B into C

2 += (Add and Assignment)

It adds the right operand to the left operand and assigns the result to the left
operand.

Ex: C += A is equivalent to C = C + A

3 −= (Subtract and Assignment)

It subtracts the right operand from the left operand and assigns the result to
the left operand.

Ex: C -= A is equivalent to C = C - A

4 *= (Multiply and Assignment)

It multiplies the right operand with the left operand and assigns the result to
the left operand.

Ex: C *= A is equivalent to C = C * A

26
 5 /= (Divide and Assignment)

It divides the left operand with the right operand and assigns the result to
the left operand.

Ex: C /= A is equivalent to C = C / A

6 %= (Modules and Assignment)

It takes modulus using two operands and assigns the result to the left
operand.

Ex: C %= A is equivalent to C = C % A

Example
<html>
<body>
<script type="text/javascript">
var a = 33;
var b = 10;
var linebreak = "<br />";

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);

27
 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);
</script>
</body>
</html>

Output
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0

Special Operators

Operat Description
or

28
 (?:) Conditional Operator returns value based on the condition. It is like
if-else.

, Comma Operator allows multiple expressions to be evaluated as single

statement.

delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instance checks if the object is an instance of given type

of

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

Example

Using conditional operator in javascript

29
<html>

<body>

<script type="text/javascript">

var a = 10;

var b = 20;

var linebreak = "<br />";

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

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

document.write(result);

document.write(linebreak);

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

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

document.write(result);

document.write(linebreak);

</script>

</body>

</html>

Output

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

((a < b) ? 100 : 200) => 100

Example

Using typeof operator in javascript

<html>

<body>

30
 <script type = "text/javascript">

var a = 10;

var b = "String";

var linebreak = "<br />";

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);

</script>

</body>

</html>

Output

Result => B is String

Result => A is Numeric

31