3.

1 Introduction
Web Technology refers to the methods by which computers communicate
with each other over the internet through the use of markup languages
and multimedia packages.
The web refers to the World Wide Web (WWW). All the resources like
webpages, web contents, documents are identified and located with the
help of URLs in the internet and they collectively formed world wide
web.
Technology refers to the tools and technique that makes these resources
available on the web.
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.
Here is some popular Web Browsers:
 Google Chrome
 Microsoft Edge
 Opera
 DuckDuckGo
Web Server:
The term web server can refer to either the hardware or the software that
helps to deliver web content that can be accessed through the Internet.
The most common use of web servers is to host websites, but there are
other uses such as gaming, data storage or running enterprise
applications.
Here is some popular Web Servers:
 Internet Information Services (IIS)
 Apache
 Nginx
 LiteSpeed
 GWS (Google Web Server)
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.
Website
A website is a collection of multiple web pages.
3.2 Server side and Client-Side Scripting
Scripting language is programming language that is not required to be
compiled and are rather interpreted.
A scripting language is a programming language designed for integrating
and communicating with other programming languages.
Scripting languages are used in web applications. It is used in server side
as well as client side. Server-side scripting languages are: JavaScript,
PHP, Perl etc. and client-side scripting languages are: HTML, CSS,
JavaScript, AJAX, jQuery etc.
Scripting languages are used in system administration. For example:
Shell, Perl, Python scripts etc.
Advantages of scripting languages:
Easy learning: The user can learn to code in scripting languages quickly,
not much knowledge of web technology is required.
Fast editing: It is highly efficient with the limited number of data
structures and variables to use.
Interactivity: It helps in adding visualization interfaces and
combinations in web pages. Modern web pages demand the use of
scripting languages. To create enhanced web pages, fascinated visual
description which includes background and foreground colors and so on.
Functionality: There are different libraries which are part of different
scripting languages. They help in creating new applications in web
browsers and are different from normal programming languages.
Difference between Programming and Scripting
Programming Language Scripting Language
It is a compiler-based language. It is an interpreter-based
i.e., It uses compiler to convert language.
source code into machine code. i.e., It is interpreted by the web
browser.
They are used to write a computer They are used to develop
programs. dynamic web applications.
They generate executable files They don’t generate executable
like “.exe”. files like “.exe”.
It doesn’t require a host to run. It requires a host to run.
 They are converted into machine They are interpreted line by line.
code at one go.
All programming languages are All scripting languages are
not scripting languages. programming languages.
Example: C, C++, C#, QBasic Example: JavaScript, PHP,
Python, Perl, Ruby.
Markup Languages
Markup languages are completely different from programming languages
and scripting languages.
Markup languages prepare a structure for the data or prepare the look or
design of a page.
These are presentational languages and it doesn’t include any kind of
logic or algorithm, for example, HTML is not asking any kind of question
to the computer or it’s not comparing things and it’s not asking any
logical question. It’s just used to represent a view inside a web browser.
It tells the browser how to structure data for a specific page, layout,
headings, title, table and all or styling a page in a particular way. So
basically, it involves formatting data or it controls the presentation of
data.
Examples of Markup languages are HTML, CSS or XML. These
languages are most widely used to design a website.
Client-Side Scripting
Client-side scripting is a scripting that runs on a user’s web browser
without any needs of server.
It is used at the frontend which users can see from the browser.
It is primarily uses to make user interface more attractive and functional.
Client-side scripting are not secured as they are visible to the users.
We can’t perform database operations using client-side scripting.
Responses from client-side script is faster because they are processed
locally on the user’s computer.
Examples: HTML, CSS, JavaScript
Server-Side Scripting
Server-side scripting is a scripting that requires web server to be
executed.
It is used at the backend which is completely hidden at the client side.
It is normally used to handle web browser’s request.
Server-side scripting are secured as they are completely invisible to the
users.
Server-side scripting allows the database operations.
Responses from server-side script is slower because the scripts are
processed remotely in the web server located far away. The script inside
the HTML file is executed by the server and the file is returned to the
browser as plain HTML.
Examples: PHP, Python, C#

3.4 Adding Java script to HTML page

JavaScript is a client-side scripting language that enables dynamic
interactivity on websites such as updating content, controlling
multimedia, animating images and many more.
It is a case sensitive language.
We can use JavaScript to create interactive websites where there are
dynamic drop-down menus, displaying current date and time, pop-up
windows etc.
It is applied to HTML page in a similar manner like CSS. There are three
different ways to add JavaScript into a web page.
1. Inline JavaScript
2. Internal JavaScript
3. External JavaScript
1. Inline JavaScript
JavaScript code written within the HTML elements with the event-
handling attribute is known as inline JavaScript.
In this method JavaScript code is added to the HTML directly without
using <script> tag.
<html>
<head>
<title>INLINE JavaScript</title>
</head>
<body>
<p onclick="alert('Clicked')">Click Here</p>
</body>
</html>

2. Internal JavaScript
JavaScript code written directly within web pages by placing it between
<script> </script> is known as internal JavaScript.
JavaScript code can be written either in head or body section.
<html>
<head>
<title>Internal JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("This is internal JavaScript");
</script>
</body>
</html>

3. External JavaScript
External JavaScript is the JavaScript code which is written separately in
external file and stored using .js extension and then included in HTML
page using src attribute in <script tag>.
external.js
document.write("This is external JavaScript");
script.html
<html>
<head>
<title>EXTERNAL JavaScript</title>
</head>
<body>
<script type="text/javascript"
src="external.js"></script>
</body>
</html>
3.5 Java script fundamental
JavaScript Comments
Single line: //
Multiple Line: start with /* and end with */
Keywords
Keywords in JavaScript are a set of reserved words that cannot be used as
names of functions, labels, or variables as they are already a part of the
syntax of JavaScript.
Each of the keywords has its own meaning.
Keywords cannot be used to name identifiers.
List of Keywords
while, case, class, void, function, instanceof, throw, export, delete,
catch, private, package, true, debugger, extends, default, interface, super,
with, enum, if, return, switch, try, let, yield, typeof, public, for, static,
new, else, finally, false , import, var, do, protected, null, in,
implements, this, await, const, continue, break
Identifiers
An identifier is a name that is given to entities like variables, functions,
class, etc.
Rules for Naming JavaScript Identifiers.
Identifier names must start with either a letter, an underscore _, or the
dollar sign $.
Identifier names cannot start with numbers.
Keywords cannot be used as identifier names.
JavaScript is case-sensitive. So, y and Y are different identifiers.
3.6 Java Script 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 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.
1. Primitive data types
Data types which can hold value only one at a time are known as
primitive data types.
There are five types of primitive data types in JavaScript. They are as
follows:
1. String:
It represents sequence of characters e.g., "hello"
2. Number:
It represents numeric values e.g., 100
3. Boolean:
It represents boolean value either false or true
4. Undefined:
It represents undefined value
5. Null:
It represents null i.e., no value at all
2. Non primitive data types
Data types which can hold multiple value at a time is known as non
primitive data type.
There are three non-primitive data types in JavaScript. They are as
follows:
1. Object:
It represents an instance through which we can access members
2. Array:
It represents a group of similar values.
3. RegExp:
It represents a regular expression

3.7 Variables and operators

JavaScript Variables
Variables are containers for storing data (storing data values).
It is an identifier whose value may change during the execution of the
program.

Scope of a variable
Local: A local variable is declared inside the block or function, and it is
accessible within that function or block only.
Global: A global variable is declared outside the block or function, and it
is accessible from anywhere.
Declaring a Variable:
Variable should be declared before their use but should not be declared
twice.
There are 4 Ways to Declare a JavaScript Variable:
1. Using var
var keyword is used to declare the variable globally.
The value of variable that is declared using var keyword can be changed.
var numOne = 10;

2. Using let
let keyword is used to declare the variable locally.
The value of variable that is declared using let keyword can be changed.
let numOne = 10;

3. Using const
const keyword is used to declare the variable locally.
The value of variable that is declared using const keyword can’t be
changed.
const numOne = 10;

4. Using nothing
We can also declare variable in JavaScript without using any keyword.
numOne = 10;

JavaScript Operator
An operator is a symbol which performs some operation on single or
multiple operands (data value) and produces a result.
JavaScript includes the following categories of operators.
1. Arithmetic Operators
2. Comparison Operators
3. Logical Operators
4. Assignment Operators
5. Conditional Operators /Ternary Operator

1. Arithmetic Operators
Arithmetic operators are used to perform mathematical operations
between numeric operands.
Operator Description
+ Adds two numeric operands.
- Subtract right operand from left operand
 Operator Description
* Multiply two numeric operands.
/ Divide left operand by right operand.
% Modulus operator. Returns remainder of two operands.
++ Increment operator. Increase operand value by one.
-- Decrement operator. Decrease value by one.

2. Comparison Operators
JavaScript provides comparison operators that compare two operands and
return a boolean value true or false.
Operators Description
== Compares the equality of two operands without considering type.
=== Compares equality of two operands with type.
!= Compares inequality of two operands.
> Returns a boolean value true if the left-side value is greater than the
right-side value; otherwise, returns false.
< Returns a boolean value true if the left-side value is less than the right-
side value; otherwise, returns false.
>= Returns a boolean value true if the left-side value is greater than or equal
to the right-side value; otherwise, returns false.
<= Returns a boolean value true if the left-side value is less than or equal to
the right-side value; otherwise, returns false.

3. Logical Operators
In JavaScript, the logical operators are used to combine two or more
conditions.
Operator Description
&& && is known as AND operator.
|| | | is known as OR operator.
! ! is known as NOT operator.

4. Assignment Operators
JavaScript provides the assignment operators to assign values to variables
with less key strokes.
Assignment
operators Description
= Assigns right operand value to the left operand.
+= Sums up left and right operand values and assigns the result to
the left operand.
 Assignment
operators Description
-= Subtract right operand value from the left operand value and
assigns the result to the left operand.
*= Multiply left and right operand values and assigns the result to
the left operand.
/= Divide left operand value by right operand value and assign the
result to the left operand.
%= Get the modulus of left operand divide by right operand and
assign resulted modulus to the left operand.

5. Conditional Operators (Ternary Operator)

JavaScript provides a special operator called ternary operator :? that
assigns a value to a variable based on some condition.
Syntax: <condition> ? <True value> : <False value>;

3.8 Functions and control structure if-else, if-elseif,

switch-case, for, while, do while loop

Q. Write a simple JavaScript code to add two

number
<html>
<head>
<title>Add Two Numbers</title>
<script>
var numOne = 10;
var numTwo = 20;
var sum = numOne + numTwo;
document.write("Sum = " + sum);
</script>
</head>
<body></body>
</html>

Q. Write a JavaScript code to take two number input

and add them.
<html>
<head>
<title>SUM</title>
 </head>
<body>
<script>
var numOne =Number(prompt("enter the
first number"));
var numTwo =Number(prompt("enter the
second number"));
var sum= numOne + numTwo;
document.write("The sum is "+sum);
</script>
</body>
</html>

Q. Write a JavaScript code to take a principle, time

and rate input and find the simple interest.
<html>
<head>
<title>Simple Interest</title>
</head>
<body>
<script>
var p = Number(prompt("enter the
principle"));
var t = Number(prompt("enter the time"));
var r = Number(prompt("enter the rate"));
var si = (p * t * r) / 100;
document.write("The Simple Interest is " +
si);
</script>
</body>
</html>

IF / ELSE
Q. Write a JavaScript code to take a number input
and find whether a number is odd or even.
<head>
<title>Odd or Even</title>
</head>
<body>
<script>
var n = prompt("Enter Number");
 n = Number(n);
if (n%2==0)
{
document.write(n + " is Even Number");
}
else
{
document.write(n + " is Odd Number");
}
</script>
</body>
</html>

Q. Write a JavaScript code to take a marks input

and find whether a student is pass or fail.
<html>
<head>
<title>Pass or Fail</title>
</head>
<body>
<script>
var n = prompt("Enter Marks");
n = Number(n);
if (n >= 40) {
document.write("Pass");
} else {
document.write("Fail");
}
</script>
</body>
</html>

IF / ELSE IF
Q. Write a JavaScript code to take a marks input
and find the grade of a student.

<html>
<head>
<title>Grade</title>
</head>
 <body>
<script>
var n = prompt("Enter Marks");
n = Number(n);
if (n >= 90) {
document.write("Grade = A+");
} else if (n >= 80) {
document.write("Grade = A");
} else if (n >= 70) {
document.write("Grade = B+");
} else if (n >= 60) {
document.write("Grade = B");
} else if (n >= 50) {
document.write("Grade = C+");
} else if (n >= 40) {
document.write("Grade = C");
} else {
document.write("Fail");
}
</script>
</body>
</html>

SWITCH CASE
Q. Write a JavaScript code to take a number input
and find the day of a week using switch case.
<html>
<head>
<title>Day according to input</title>
</head>
<body>
<script>
var n = prompt("Enter day of week in
number:");
n = Number(n);
switch (n)
{
case "1":
document.write("Sunday");
break;
 case "2":
document.write("Monday");
break;

case "3":
document.write("Tuesday");
break;

case "4":
document.write("Wednesday");
break;

case "5":
document.write("Thursday");
break;

case "6":
document.write("Friday");
break;

case "7":
document.write("Saturday");
break;

default:
document.write("Value must be from 1 to
7.");
break;

}
</script>
</body>
</html>

FOR LOOP
Q. Write a JavaScript code to take a number input
and find the sum of all the
natural number up to that number.
<html>
<head>
<title>Sum of n natural number</title>
 </head>
<body>
<script>
var n = Number(prompt("Enter number:"));
var sum = 0;
for (var i = 1; i <= n; i++) {
sum = sum + i;
}
document.write("Sum upto " + n + " = " +
sum);
</script>
</body>
</html>

Q. Write a JavaScript code to take a number input

and find the factorial of that number.
<html>
<head>
<title>Sum of n natural number</title>
</head>
<body>
<script>
var n = Number(prompt("Enter number:"));
var fact = 1;
for (var i = 1; i <= n; i++) {
fact = fact * i;
}
document.write("Factorial of " + n + " = "
+ fact);
</script>
</body>
</html>

Q. Write a JavaScript code to take a number input

and display the multiplication table of that number.
<html>
<head>
<title>Multiplication of a number</title>
</head>
 <body>
<script>
var n = prompt("Enter number:");
var n = Number(n);
for (var i = 1; i <= 10; i++) {
var mul = n * i;
document.write(n + " x " + i + " = " +
mul+"<br>");
}
</script>
</body>
</html>

WHILE LOOP
Q. Write a JavaScript code to take a number input
and find the reverse of that
number.
<html>
<head>
<title>Reverse</title>
</head>
<body>
<script>
var n = Number(prompt("Enter number:"));
var a = n;
var rev = 0;
var ld = 0;
while (n != 0) {
ld = n % 10;
rev = rev * 10 + ld;
n = Math.floor(n / 10);
}
document.write("Reverse of " + a + " = " +
rev);
</script>
</body>
</html>
Function

Write a JavaScript code to add two number using

function.
<html>
<body>
<script>
//function1 with both parameter & return
type
var a = Number(prompt("enter the first
number"));
var b = Number(prompt("enter the second
number"));
var sum = add(a, b); //function call
document.write("The sum is " + sum);

function add(a, b) {
var sum = a + b;
return sum;
}
</script>
</body>
</html>

Q. Write a JavaScript code to take a principle, time

and rate input and find the simple interest using
function.
<html>
<head>
<title>Simple Interest</title>
</head>
<body>
<script>
var p = Number(prompt("enter the
principle"));
var t = Number(prompt("enter the time"));
var r = Number(prompt("enter the rate"));
var si = interest(p, t, r);
document.write("The Simple Interest is " +
si);
function interest(p, t, r) {
 si = (p * t * r) / 100;
return si;
}
</script>
</body>
</html>

Types of Functions
<html>
<body>
<script>
//function1 without both parameter & return
type
function add() {
var a = 20,
b = 10;
var sum = a + b;
document.write(sum + "<br>");
}

//function2 with parameter & no return type

function subtract(a, b) {
var diff = a - b;
document.write(diff + "<br>");
}
//function3 without parameter & with return
type
function multiply() {
var a = 20,
b = 10;
return a * b;
}
//function4 with both parameter & return
type
function division(a, b) {
return a / b;
}

add(); //function1 call

subtract(20, 10); //function2 call
var mul = multiply();
document.write(mul + "<br>");
 var div = division(20, 10); //function4
call
document.write(div + "<br>");
</script>
</body>
</html>

Form
Write a simple HTML code to make a simple form
<html>
<body>
<form>
<p>Enter 1st Number:<input
id="i1"></input></p>
<p>Enter 2nd Number:<input
id="i2"></input></p>
<button> ADD </button>
<button> Multiply </button>
</form>
</body>
</html>

Write a JavaScript code to add two number using

form and function.
<html>
<head><title>Add Two Numbers</title> </head>
<body>
<p>Enter the First Number: <input id="n1"
/></p>
<p>Enter the Second Number: <input id="n2"
/></p>
<button onclick="add()">Add</button>
<p>Sum = <input id="answer" /></p>

<script>
function add() {
var numOne, numTwo, sum;
 numOne =
Number(document.getElementById("n1").value);
numTwo =
Number(document.getElementById("n2").value);
sum = numOne + numTwo;
document.getElementById("answer").value =
sum;
}
</script>
</body>
</html>
Event Handling with Java Script
Any change in the state of an object is known as an Event.
In html, there are various events which represents that some activity is
performed by the user or by the browser. When javascript code is
included in HTML, js react over these events and allow the execution.
The process of reacting over the event is known as event handling.
Mouse events:
Event Event Description
Performed Handler

click onclick When mouse click on an element

mouseover onmouseov When the cursor of the mouse comes

er over the element

mouseout onmouseou When the cursor of the mouse leaves

t an element

mousedown onmousedo When the mouse button is pressed

wn over the element

mouseup onmouseup When the mouse button is released

over the element

mousemove onmousem When the mouse movement takes

ove place.
Keyboard events:
Event Event Description
Performed Handler

Keydown onkeydow When the user press and then release

n the key

Keyup onkeyup When the user releases the key

Form events:
Event Event Description
Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form

element

change onchange When the user modifies or changes the

value of a form element

Window/Document events
Event Event Description
Performed Handler

load onload When the browser finishes the loading of

the page

unload onunload When the visitor leaves the current

webpage, the browser unloads it

Scroll onscroll When the user scrolls up and down the

 page

Examples:
<html>
<body>
<button type="button"
onclick="display1()">Single Click</button>
<br></br>
<button type="button"
ondblclick="display2()">Double Click</button>
</body>
<script>
function display1() {
alert("Button is clicked once");
}
function display2() {
alert("Button is clicked twice.");
}
</script>
</html>

Write a JavaScript code to display date of a

computer.
<html>
<body>
<button type="button"
onclick="showDate()">Check Date</button>
<script>
function showDate() {
var d = Date();
document.write(d);
}
</script>
</body>
</html>
3.11 Form validation
Write a JavaScript to check whether the password is
8 characters long or not.
Code using id
<html>
<body>
<form onsubmit="Validation()">
<p>username:<input type="text" id="uname"
/></p>
<p>password:<input type="password"
id="upass" /></p>
<input type="Submit" />
</form>

<script>
function Validation() {
var password =
document.getElementById("upass").value;
if (password.length < 8)
{
alert("Password must be at least 8
character long");
return false;
}
else
{
document.write("Password is 8 Character
long");
}
}
</script>
</body>
</html>

Code using name

<html>
<body>
<form name ="form1" method="post" action=""
onsubmit="Validation()">
<p>username:<input type="text"
name="uname"></p>
 <P>password:<input type="password"
name="upass"></P>
<input type="Submit">
</form>

<script>
function Validation(){
var password
=document.form1.upass.value;
if(password.length<8){
alert("Password must be at least
8 character long");
return false;
}
}
</script>
</body>
</html>

Write a JavaScript to check whether the two

passwords are same or not.
Code using id
<html>
<body>
<form onsubmit="Validation()">
<p>Password:<input type="password"
id="pass1" /></p>
<p>Confirm Password:<input type="password"
id="pass2" /></p>
<input type="Submit" />
</form>
<script>
function Validation() {
var p1 =
document.getElementById("pass1").value;
var p2 =
document.getElementById("pass2").value;
if (p1 == p2) {
document.write("Both Password
Matched");
} else {
 alert("Password doesnot match");
return false;
}
}
</script>
</body>
</html>

Code using name

<html>
<body>
<form name ="form1" method="post" action=""
onsubmit="Validation()">
<p>Password:<input type="password"
name="pass1"></p>
<P>Confirm Password:<input
type="password" name="pass2"></P>
<input type="Submit">
</form>
<script>
function Validation(){

var p1 =document.form1.pass1.value;
var p2 =document.form1.pass2.value;
if (p1 == p2) {
document.write("Both Password
Matched");
}
else {
alert("Password doesnot match");
return false;
}
}
</script>

</body>
</html>
3.9 Object based programming with Java Script
Creating object with Object Literals
<html>
<head>
<title></title>
</head>
<body>
<script>
//defining object
let person={
first_name:"Jame",
last_name:"Bond",
fullname: function(){
alert(person.first_name+'
'+person.last_name);
}
}
person.fullname();
</script>
</body>
</html>

Creating object with function constructors

<html>
<head>
<title></title>
</head>
<body>
<script>
function person(first_name,last_name){
this.fname=first_name;
this.lname=last_name;
}
let p1 = new person('James','Bond');
let p2 = new person('Harry','Peter');
alert(p1.fname+' '+p1.lname);
</script>
</body>
</html>
Object and Class in JavaScript
<html>
<script>
class car{
constructor(name,year){
this.name=name;
this.year=year;
}
}
let car1=new car("Mustang",1998);
//creating car1 object of car class
alert(car1.name + ' '+car1.year);
</script>
</html>