UNIT-III

What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages. It is an
interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. 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.

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.

JavaScript Variable
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global 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.

Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

Example of JavaScript variable

Let’s see a simple example of JavaScript variable.

1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is
accessible within the function or block only. For example:
 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:

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:
 52.1M
1.1K
Features of Java - Javatpoint

Data Type Description

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. For example:

1. var sum=10+20;

Here, + is the arithmetic operator and = is the assignment 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

JavaScript Arithmetic Operators

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

53.3M
1.1K
Exception Handling in Java - Javatpoint

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

JavaScript 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

JavaScript 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

JavaScript 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

JavaScript 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

 JavaScript 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.

JavaScript If-else
The JavaScript if-else statement is used to execute the code whether
condition is true or false. There are three forms of if statement in
JavaScript.

1. If Statement
2. If else statement
3. if else if statement

JavaScript If statement
It evaluates the content only if expression is true. The signature of
JavaScript if statement is given below.

1. if(expression){
2. //content to be evaluated
3. }
 Flowchart of JavaScript If statement

JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of
JavaScript if-else statement is given below.

3.5M
103
US State Department Launches New Cybersecurity Bureau

1. if(expression){
2. //content to be evaluated if condition is true
3. }
4. else{
5. //content to be evaluated if condition is false
6. }
 Flowchart of JavaScript If...else statement

JavaScript If...else if statement

It evaluates the content only if expression is true from several
expressions. The signature of JavaScript if else if statement is given below.

1. if(expression1){
2. //content to be evaluated if expression1 is true
3. }
4. else if(expression2){
5. //content to be evaluated if expression2 is true
6. }
7. else if(expression3){
8. //content to be evaluated if expression3 is true
9. }
10. else{
11. //content to be evaluated if no expression is true
12. }

JavaScript Switch
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.

The signature of JavaScript switch statement is given below.

1. switch(expression){
2. case value1:
3. code to be executed;
4. break;
5. case value2:
6. code to be executed;
7. break;
8. ......
9.
10. default:
11. code to be executed if above values are not matched;
12. }

JavaScript Loops
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.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while 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.

1. for (initialization; condition; increment)

2. {
3. code to be executed
4. }
5

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.

1. while (condition)
2. {
3. code to be executed
4. }
15

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.

1. do{
2. code to be executed
3. }while (condition);

JavaScript Functions
JavaScript functions are used to perform operations. We can call
JavaScript function many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

 1. Code reusability: We can call a function several times so it save
coding.
2. Less coding: It makes our program compact. We don’t need to
write many lines of code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){

2. //code to be executed
3. }

JavaScript Functions can have 0 or more arguments.

37.7M
662
History of Java

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has
arguments.

1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>
Test it Now

Output of the above example

JavaScript Function Arguments

We can call function by passing arguments. Let’s see the example of
function that has one argument.

1. <script>
2. function getcube(number){
3. alert(number*number*number);
4. }
5. </script>
6. <form>
7. <input type="button" value="click" onclick="getcube(4)"/>
8. </form>
Test it Now

Output of the above example

Function with Return Value

We can call function that returns a value and use it in our program. Let’s
see the example of function that returns value.

1. <script>
2. function getInfo(){
3. return "hello javatpoint! How r u?";
4. }
5. </script>
6. <script>
7. document.write(getInfo());
8. </script>
Test it Now

Output of the above example

hello javatpoint! How r u?

JavaScript Function Object

In JavaScript, the purpose of Function constructor is to create a new
Function object. It executes the code globally. However, if we call the
constructor directly, a function is created dynamically but in an unsecured
way.

Syntax
1. new Function ([arg1[, arg2[, ....argn]],] functionBody)
Parameter
arg1, arg2, .... , argn - It represents the argument used by function.

functionBody - It represents the function definition.

JavaScript Function Methods

Let's see function methods with description.

Method Description

apply() It is used to call a function contains this value and a single array of
arguments.

bind() It is used to create a new function.

call() It is used to call a function contains this value and an argument list.

toString() It returns the result in a form of a string.

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.

Some of the HTML events and their event handlers are:

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

resize onresize When the visitor resizes the window of the

browser