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
