Internet programming

(Unit = 5)
Java Script:
➢ Introduction to Client Side Scripting :-
Client side scripting is a process in which the code along with HTML web
page is sent to the client by the server. Here, the code refers to the script.
In other simple words, client side scripting is a process in which scripts are
executed by browsers without connecting the server.
The code executes on the browser of client’s computer either during the
loading of web page or after the web page has been loaded.
Client side scripting is mainly used for dynamic user interface elements, such
as pull-down menus, navigation tools, animation buttons, data validation
purpose, etc.
Today, it is rapidly growing and evolving day by day. As a result, writing client
side web programming is now easier and faster, thereby, reducing load on the
server.
JavaScript and jQuery are by far the most important client-side scripting
languages or web scripting languages and widely used to create a dynamic
and responsive webpage and websites.
The browser (temporarily) downloads the code in the local computer and
starts processing it without the server. Therefore, the client side scripting is
browser dependent.
A client-side script is a small program (or set of instructions) that is
embedded (or inserted) into a web page. It is processed within the client
browser instead of the web server.

The script that executes on the user’s computer system is called client. It is
embedded (or inserted) within the HTML document or can be stored in an
external separate file (known as external script).

Popular Client side Scripting Language

A language in which a client side script or program is written using syntax is

called client side scripting language or client side programming.
The most popular client side scripting languages is as follows:
1. JavaScript: It is the most widely client side scripting or programming
language. It is based on ECMAScript standard language.
JavaScript is an object based oriented, dynamically typed (or also called weakly
typed) scripting language. It runs directly on the browser with the help of an
inbuilt interpreter.
Here, weakly typed means the variables are easily converted implicitly from
one data type to another.–
2. VBScript: This scripting language is developed by Microsoft, based on the
Visual Basic. It is basically used to enhance the features of web pages in
Internet Explorer. VBScript is interpreted by Internet Explorer web browser.
3. jQuery: jQuery is a fast, small, lightweight JavaScript library. It is used to
facilitate a lot of JavaScript code into simple-to-use-functionality.
Most of the biggest companies such as Google, Microsoft, IBM, Netflix, etc. on
the Web are using jQuery language.

Application of Client side Scripting

Client side scripting is used to make web pages or website more interactive. It
is primarily used at the frontend, where the user can see using the browser.
Some important applications of client side scripting are listed, as below:
• To retrieve data from web browser or user’s screen.
• Used in the field of online games.
• To customize the web page without reloading the page.
• Client side scripting is used for validation purpose. If the user
enters incorrect credentials on the login page, the web page
displays an error message on the client machine without
submitting it to the web server.
• To create ad banners that interact with the user, rather than
simply displaying graphics.
• To create animated images that change when we move the
mouse over them.
• Client side script can be used to detect installed plug-ins and
notify the user if a plugin is required.

Advantage of Client side Scripting

There are several great advantages of client side scripting that are as follows:
1. The client side scripting language is quite easy to learn and use. It requires
minimum programming knowledge or experienced required.
2. The main advantage of client side scripting is that it is lightweight and
relatively easy to implement (syntax not too complex). The editing and
executing the code is fast.
3. Data processing is done on the client side from the server, which makes it
easier to scale applications with large numbers of users. Thereby, load on the
server reduces.
4. The client side data validation can be possible using the client side scripting
language like JavaScript.
5. The execution of client side script is more quickly because once the script is
downloaded from the server, it is executed by the browser directly on the
user’s computer.–––
6. Mathematical assessment is also possible using client side scripting.
7. The client side programming helps to perform the complex tasks in
relatively few steps.
8. Script code only executed by the browser without connecting the server.
9. It takes too less time to execute script code.
10. Browser respond immediately when user presses any key, mouse
movement, clicks, etc.

Disadvantage of Client side Scripting

There are certain disadvantages of client side scripting that are as follows:
1. The main disadvantage of client side scripting is that it is unsecure because
the code is sent as is to the client and, therefore, visible to it if the client looks
at the sources of his web page. In short, code is usually visible.
2. Client side programming cannot be used if we need to access databases or
needs to transmit sensitive data over the internet.
3. There is no guarantee that user has enabled JavaScript on his computer’s
browser. Therefore, any required functionality must be loaded on the server
despite the possibility that it could be offloaded.
4. The smooth running of the script (or program) depends entirely on the
client’s browser, its configuration, and security level.
5. The web application based on the heavy JavaScript can be complicated to
debug and maintain.
6. Client side scripting languages are usually more limited in functionality than
server side scripting languages.

➢ Introduction to Java Script :-

JavaScript is a lightweight, cross-platform, and interpreted compiled programming
language which is also known as the scripting language for webpages. It is well-
known for the development of web pages, many non-browser environments also use
it. JavaScript can be used for Client-side developments as well as Server-
side developments. Javascript is both imperative and declarative type of language.
JavaScript contains a standard library of objects, like Array, Date, and Math, and a
core set of language elements like operators, control structures, and statements.

JavaScript can be added to your HTML file in two ways:

• Internal JS: We can add JavaScript directly to our HTML file by writing the
code inside the <script> tag. The <script> tag can either be placed inside the
<head> or the <body> tag according to the requirement.
• External JS: We can write JavaScript code in other file having an extension.js
and then link this file inside the <head> tag of the HTML file in which we want
to add this code.
History of JavaScript: It was created in 1995 by Brendan Eich while he was an
engineer at Netscape. It was originally going to be named LiveScript but was
renamed. Unlike most programming languages, the JavaScript language has no
concept of input or output. It is designed to run as a scripting language in a host
environment, and it is up to the host environment to provide mechanisms for
communicating with the outside world. The most common host environment is the
browser.

Features of JavaScript:

There are following features of JavaScript:

 1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
8. It provides good control to the users over the web browsers.

Applications of JavaScript:
• Web Development: Adding interactivity and behavior to static sites JavaScript
was invented to do this in 1995. By using AngularJS that can be achieved so
easily.
• Web Applications: With technology, browsers have improved to the extent
that a language was required to create robust web applications. When we
explore a map in Google Maps then we only need to click and drag the mouse.
All detailed view is just a click away, and this is possible only because of
JavaScript. It uses Application Programming Interfaces(APIs) that provide extra
power to the code. The Electron and React is helpful in this department.
• Server Applications: With the help of Node.js, JavaScript made its way from
client to server and node.js is the most powerful on the server-side.
• Games: Not only in websites, but JavaScript also helps in creating games for
leisure. The combination of JavaScript and HTML 5 makes JavaScript popular
in game development as well. It provides the EaseJS library which provides
solutions for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible devices and
applications. It provides a library PebbleJS which is used in smartwatch
applications. This framework works for applications that require the internet
for its functioning.
 • Art: Artists and designers can create whatever they want using JavaScript to
draw on HTML 5 canvas, and make the sound more effective also can be
used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used in web
development by using machine learning.
• Mobile Applications: JavaScript can also be used to build an application for
non-web contexts. The features and uses of JavaScript make it a powerful tool
for creating mobile applications. This is a Framework for building web and
mobile apps using JavaScript. Using React Native, we can build mobile
applications for different operating systems. We do not require to write code
for different systems. Write once use it anywhere!

Limitations of JavaScript:
• Security risks: JavaScript can be used to fetch data using AJAX or by
manipulating tags that load data such as <img>, <object>, <script>. These
attacks are called cross site script attacks. They inject JS that is not the part of
the site into the visitor’s browser thus fetching the details.
• Performance: JavaScript does not provide the same level of performance as
offered by many traditional languages as a complex program written in
JavaScript would be comparatively slow. But as JavaScript is used to perform
simple tasks in a browser, so performance is not considered a big restriction in
its use.
• Complexity: To master a scripting language, programmers must have a
thorough knowledge of all the programming concepts, core language objects,
client and server-side objects otherwise it would be difficult for them to write
advanced scripts using JavaScript.
• Weak error handling and type checking facilities: It is weakly typed language
as there is no need to specify the data type of the variable. So wrong type
checking is not performed by compile.

➢ Comments :-
JavaScript comments can be used to explain JavaScript code, and to make it more
readable. They can also be used to prevent the execution of a section of code if
necessary. Comments are ignored while the compiler executes the code. Comments
are user-friendly as users can get explanations of code using comments.
In javascript two types of comments are used :-
 1. Single line comments
2. Multi – line comments

Single Line Comments

Single line comments start with //.

Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).

Example:-

// A single line comment

console.log("Hello Geeks!")

Multi-line Comments
Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

This example uses a multi-line comment (a comment block) to explain the

code:

Example:-

/* It is multi line comment.

It will not be displayed upon
execution of this code */
console.log("Multiline comment in javascript");

➢ Variables in JS: -
Variables in JavaScript are containers for storing data. It is the basic unit of storage in
a program. The value stored in a variable can be changed during program execution.
A variable is only a name given to a memory location, all the operations done on the
variable effects that memory location. In JavaScript, all the variables must be
declared before they can be used. Variables can be declared in four different ways. –

• Using var
• Using let
• Using const
• Using nothing
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.

There are two types of variables in JavaScript : local variable and global variable.

➢ local variable: -
A JavaScript local variable is declared inside block or function. It is accessible
within the function or block only.
For example:

<script>
function abc(){
var x=10;//local variable
}
</script>

➢ Global Variables: -
A variable declared outside a function is called GLOBAL variable. It can be accessed
from any function.
• Global variables are declared at the start of the block(top of the program)
• Var or let keyword is used to declare variables globally.
• Global variables can be accessed from any part of the program.
Example: -
let carName = "Volvo"; //global variable
// code here can use carName

function myFunction() {
// code here can also use carName
}
 ➢ 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:

var a=40;//holding number

var b="Rahul";//holding string

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

non-primitive data types: -

The non-primitive data types are as follows:

Data Type Description

 Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

➢ Operators in JS: -
JavaScript operators operate the operands, these are symbols that are used to
manipulate a certain value or operand. Operators are used to performing specific
mathematical and logical computations on operands. In other words, we can say that
an operator operates the operands. In JavaScript, operators are used to comparing
values, perform arithmetic operations, etc.

JavaScript Operators: There are various operators supported by JavaScript. –

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

Arithmetic Operators: -

Arithmetic operators are used to perform arithmetic operations on the operands. The
following operators are known as JavaScript arithmetic operators.

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

 / Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison
operators are as follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

Bitwise Operators: -

The bitwise operators perform bitwise operations on operands. The bitwise operators
are as follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) = false

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) = false

 ~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift with Zero (10>>>2) = 2

Logical Operators: -

The following operators are known as JavaScript logical operators.

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

Assignment Operators: -

The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

Special Operators: -

The following operators are known as JavaScript special operators.

 Operator Description

(?:) 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

instanceof checks if the object is an instance of given type

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.

➢ Conditions Statements (If, If Else, Switch): -

Conditional statements are used to perform different actions based
on different conditions.

In JavaScript we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified

condition is true
• Use else to specify a block of code to be executed, if the same
condition is false
• Use else if to specify a new condition to test, if the first
condition is false
• Use switch to specify many alternative blocks of code to be
executed

• The if Statement: -
Use the if statement to specify a block of JavaScript code to be
executed if a condition is true.
Syntax: -
if (condition) {
// block of code to be executed if the condition is true
}

Example
Make a "Good day" greeting if the hour is less than 18:00:

if (hour < 18) {

greeting = "Good day";
}

• The else Statement: -

Use the else statement to specify a block of code to be executed if
the condition is false.

Syntax:-

if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Example
If the hour is less than 18, create a "Good day" greeting, otherwise
"Good evening":

if (hour < 18) {

greeting = "Good day";
} else {
greeting = "Good evening";
}

• The Switch statement: -

The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in previous
page. But it is convenient than if..else..if because it can be used with numbers,
characters etc.

Syntax: -
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......

default:
code to be executed if above values are not matched;
}
Example: -
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
 ➢ Java Script Loops (For Loop, While Loop, Do While Loop): -

The JavaScript loops are used to iterate the piece of code using for, while, do
while or for-in loops. It makes the code compact. It is mostly used in array.
Loops are handy, if you want to run the same code over and
over again, each time with a different value.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while loop
4. for-in loop

1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of
times. It should be used if number of iteration is known. The syntax
of for loop is given below.

Syntax:

for (initialization; condition; increment)

{
code to be executed
}

Example:

Let’s see the simple example of for loop in javascript.

<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>

2) JavaScript while loop

The JavaScript while loop iterates the elements for the infinite
number of times. It should be used if number of iteration is not
known. The syntax of while loop is given below.

Synax:

while (condition)
{
code to be executed
}

Example:

Let’s see the simple example of while loop in javascript.

<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>

3) JavaScript do while loop

The JavaScript do while loop iterates the elements for the infinite
number of times like while loop. But, code is executed at least once
whether condition is true or false. The syntax of do while loop is
given below.

Syntax:

do{
code to be executed
}while (condition);

Example:

Let’s see the simple example of do while loop in javascript.

<script>
var i=21;
 do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>

4) JavaScript for-in Loop: -

For-in loop in JavaScript is used to iterate over the properties of an
object. It can be a great debugging tool if we want to show the
contents of an object. The for-in loop iterates only over those keys
of an object which have their enumerable property set to “true”. The
key values in an object have four attributes (value, writable,
enumerable, and configurable). Enumerable when set to “true”
means that we can iterate over that property.

Syntax
for (key in object) {
// code block to be executed
}

Example
const person = {fname:"John", lname:"Doe", age:25};

let text = "";

for (let x in person) {
text += person[x];
}

➢ JS Popup Boxes (Alert, Prompt, Confirm): -

• alert(): -
The alert() function displays a message to the user to display some
information to users or An alert box is actually used for warning the
user about action has performed at the time of form filling.

. This alert box will have the OK button to close the alert box.

Syntax:
alert("message");

Example
alert("I am an alert box!");

• Confirm Box: -
A confirm box is often used if you want the user to verify or accept
something.

When a confirm box pops up, the user will have to click either "OK"
or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.

Syntax
confirm("sometext");

Example
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

• Prompt Box: -
A prompt box is often used if you want the user to input a value
before entering a page.

When a prompt box pops up, the user will have to click either "OK"
or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user
clicks "Cancel" the box returns null.
 Syntax
prompt("sometext","defaultText");

Example
let person = prompt("Please enter your name", "Harry Potter");
console.log(person);

➢ JavaScript Events: -
The 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. This process of reacting over the events is called Event Handling.
Thus, js handles the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.

Mouse events:

Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:
Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Performed Event Description

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

Example
<button onclick="displayDate()">The time is?</button>

➢ JavaScript Array: -
JavaScript array is an object that represents a collection of similar type of
elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
1) JavaScript array literal
The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

var arrayname=new Array();

Here, new keyword is used to create instance of array.

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that
we don't have to provide value explicitly.

var emp=new Array("Jai","Vijay","Smith");

➢ JS Objects: -
Objects, in JavaScript, are the most important data type and form the building blocks
for modern JavaScript. These objects are quite different from JavaScript’s primitive
data types (Number, String, Boolean, null, undefined, and symbol) in the sense that
these primitive data types all store a single value each (depending on their types).
Syntax:

new Object(value)

Object(value)

let object_name = {
key_name : value,
...
}

Note:- Object() can be called with or without new. Both create a new object.

Example:-
 const o = new Object();

o.foo = 42;

console.log(o);

// { foo: 4

• Objects are more complex and each object may contain any combination of
these primitive data-types as well as reference data-types.
• An object is a reference data type. Variables that are assigned a reference
value are given a reference or a pointer to that value. That reference or
pointer points to the location in memory where the object is stored. The
variables don’t actually store the value.
• Loosely speaking, objects in JavaScript may be defined as an unordered
collection of related data, of primitive or reference types, in the form of “key:
value” pairs. These keys can be variables or functions and are called properties
and methods, respectively, in the context of an object.
An object can be created with figure brackets {…} with an optional list of properties.
A property is a “key: value” pair, where a key is a string (also called a “property
name”), and the value can be anything.

JavaScript Object Properties: The property names can be strings or numbers. In case
the property names are numbers, they must be accessed using the “bracket
notation” like this.